@-webkit-keyframes fadeIn {
  0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
  }
  100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
  }
  100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
  }
}

.bg {
  width: 1092px;
  background-image: url(../img/common/bg_products.jpg);
}

.contents_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: calc(100vh - 69px);
  margin: 0 auto;
  padding-top: 65px;
  box-sizing: border-box;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;

  -webkit-align-items: flex-start;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-justify-content: center;
}

.product {
  font-style: normal;
  font-weight: 500;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  text-align: left;
}

.product_cap {
  height: 38px;
  font-size: 12px;
}

.product_categoty {
  height: calc(100vh - 168px);
}

.product_categoty .product_cap {
  padding-left: 22px;
}

.product_categoty_list {
  width: 134px;
  height: 100%;

  border-right: 1px solid #ccc;
}

.product_categoty li {
  position: relative;
  margin-bottom: 20px;
  padding: 4px 0 4px 22px;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -.035em;
  cursor: pointer;
}

.product_categoty li:first-of-type {
  margin-top: -4px;
}

.product_categoty li.current::before, .product_categoty li:hover::before {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 4px;
  width: 10px;
  height: 19px;
  background: url(../img/product/icon_select.png) center no-repeat;
  background-size: contain;

  -webkit-background-size: contain;
  -o-background-size: contain;
}

.product_cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.product_cont_inner {
  height: calc(100vh - 172px);
  overflow-y: scroll;

  border-right: 1px solid #ccc;
  -ms-overflow-y: scroll;
}

.product_cont_inner::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.product_cont_inner::-webkit-scrollbar-track {
  background: transparent;
}

.product_cont_inner::-webkit-scrollbar-thumb {
  background: #000;
}

.product_cont_l .product_cap {
  padding-left: 52px;
}

.product_cont_r .product_cap {
  padding-left: 60px;
}

.product_cont_nav {
  padding: 0 52px;
}

.product_cont_nav_list {
  width: 285px;
  padding: 2px 0 45px;
}

.product_cont_nav_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin-bottom: 24px;
  cursor: pointer;
  transition: all .3s ease-in;

  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
}

.product_cont_nav_item:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .5;
}

.product_cont_nav_item:last-of-type {
  margin-bottom: 0;
}

.product_cont_nav_item.bo_top {
  padding-top: 14px;

  border-top: 1px solid #ccc;
}

.product_cont_nav_item.current::before, .product_cont_nav_item:hover::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 10px);
  left: -18px;
  width: 10px;
  height: 19px;
  background: url(../img/product/icon_select.png) center no-repeat;
  background-size: contain;

  -webkit-background-size: contain;
  -o-background-size: contain;
}

.product_cont_nav_item .thumb {
  position: relative;
  width: 158px;
  padding: 1px;
}

.product_cont_nav_item .thumb::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/product/_item_frame.png) left top no-repeat;
  background-size: contain;

  -webkit-background-size: contain;
  -o-background-size: contain;
}

.product_cont_nav_item .thumb.thumb_min::before {
  background: url(../img/product/_item_frame_min.png) left top no-repeat;
}

.product_cont_nav_item .cap {
  width: calc(100% - 175px);
  padding-left: 16px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -.02em;
}

.product_cont_nav_item .cap span {
  display: block;
  margin-bottom: 5px;
  font-weight: 300;
  font-size: 13px;
}

.product_cont_detail {
  width: 491px;
}

.product_cont_detail .wrap {
  padding: 0 80px 45px 60px;
}

.product_cont_detail .image {
  margin-bottom: 30px;
}

.product_cont_detail .image_area {
  position: relative;
  width: 350px;
  height: 350px;
  background: #fff;
}

.product_cont_detail .image_area::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 80;
  width: 100%;
  height: 100%;
  background: url(../img/product/_detail__frame.png) center no-repeat;
  background-size: contain;

  -webkit-background-size: contain;
  -o-background-size: contain;
}

.product_cont_detail .image_area_item {
  position: relative;
  width: 350px;
  height: 350px;
}

.product_cont_detail .image_area img {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 50;
  transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.product_cont_detail .image_thumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  -webkit-justify-content: center;
}

.product_cont_detail .image_thumb li {
  position: relative;
  width: 70px;
  height: 70px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all .3s ease-in;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
}

.product_cont_detail .image_thumb li:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .5;
}

.product_cont_detail .image_thumb li:not(:first-of-type) {
  margin-left: 15px;
}

.product_cont_detail .image_thumb li.active::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}

.product_cont_detail .image_thumb li img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;

  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.product_cont_detail .name {
  margin-bottom: 24px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.02em;
}

.product_cont_detail .name span {
  display: block;
  margin-bottom: 10px;
  font-weight: 300;
  font-size: 13px;
}

.product_cont_detail .txt {
  margin-bottom: 30px;
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.8;
  font-family: itc-avant-garde-gothic-pro, "Noto Sans JP", sans-serif;
  letter-spacing: .04em;
}

.product_cont_detail .txt:last-of-type {
  margin-bottom: 0;
}

.product_cont_detail .nov_list {
  margin-bottom: 20px;

  border-bottom: 1px solid #ccc;
}

.product_cont_detail .nov_list li {
  padding: 20px 0 18px;

  border-top: 1px solid #ccc;
}

.product_cont_detail .nov_list .shop {
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 13px;
}

.product_cont_detail .nov_list .txt {
  margin-bottom: 0;
}

.product_cont_detail .nov_list figure {
  margin-top: 10px;
}

.product_cont_detail .notes {
  margin-left: 1em;
  font-size: 10px;
  line-height: 1.4;
  text-indent: -1em;
}