@charset "utf-8";
/* CSS Document */

@media only screen and (max-width: 768px) {
}

/* #topmain
----------------------------------------- */
#topmain {
   height: 100vh;
   z-index: 2;
   position: relative;
   background-color: #0b0b0b;
}

#topmain .mv_thumb {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url("../images/topmain_img02.jpg");
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
}

#topmain .top_slider_ {
   height: 100%;
   position: relative;
   overflow: hidden;
}

#topmain .top_slider_ .slick-list,
#topmain .top_slider_ .slick-track,
#topmain .top_slider_ .slick-slide,
#topmain .top_slider_ .sl_item {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: 100% !important;
}

/*#topmain li.slick-slide {
    width : 100%;
    height: calc(100vh - 23rem);
}*/

#topmain li .slide_wrap {
   display: block;
   width: 100%;
   height: 100%;
   position: relative;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
}
#topmain li.slick-slide .slide_wrap.slide01 {
   background-image: url("../images/topmain_img01.jpg");
}
#topmain li .slide_wrap.slide02 {
   background-image: url("../images/topmain_img02.jpg");
}
#topmain li.slick-slide .slide_wrap.slide03 {
   background-image: url("../images/topmain_img03.jpg");
}

#topmain h2 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   width: 24px;
}

#topmain .ttl_wrap {
   position: absolute;
   bottom: 8rem;
   right: 5rem;
   transform: translate(0, 0);
   -webkit-writing-mode: vertical-rl;
   -ms-writing-mode: tb-rl;
   writing-mode: vertical-rl;
   font-feature-settings: normal;
   z-index: 2;
}

.slide-animation .slide_wrap {
   animation: fadezoom 8s 0s forwards;
}
@keyframes fadezoom {
   0% {
      transform: scale(1);
   }
   100% {
      transform: scale(1.08);
   }
}

@media only screen and (max-width: 768px) {
   #topmain {
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
   }

   #topmain h2 {
      /* width: 8.6rem; */
   }

   #topmain li.slick-slide .slide_wrap {
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
   }

   #topmain li.slick-slide .slide_wrap.slide01 {
      background-image: url("../images/topmain_img01_sp.jpg");
   }
   #topmain li.slick-slide .slide_wrap.slide02 {
      background-image: url("../images/topmain_img02_sp.jpg");
   }
   #topmain li.slick-slide .slide_wrap.slide03 {
      background-image: url("../images/topmain_img03_sp.jpg");
   }

   #topmain .mv_thumb {
      background-image: url("../images/topmain_img02_sp.jpg");
   }

   .slide_target {
      pointer-events: none;
   }
}

/* #concept
----------------------------------------- */
#concept {
   width: 100%;
   position: relative;
}
#concept .inner {
   width: 100%;
   padding: 0;
}
#concept .con_wrap {
   max-width: 102rem;
   margin: auto;
   padding-top: 24rem;
   padding-bottom: 28rem;
}
#concept .con_wrap h2.copy {
   font-size: 4rem;
   letter-spacing: 0.18em;
   font-weight: 700;
   margin-bottom: 6rem;
}
#concept .con_wrap:first-child h2.copy {
   letter-spacing: 0.27em;
}
#concept .con_wrap h2.copy ruby rt {
   transform: translate(0, -0.3rem);
   font-size: 1.2rem;
}
#concept .con_wrap .txt_wrap {
   line-height: calc(50 / 16);
   letter-spacing: 0.125rem;
}

#concept .img_wrap {
   width: 100%;
   /* display: flex; */
}
#concept .img_wrap .img {
   width: 100%;
}

/*最新のsafari*/
_::-webkit-full-page-media,
_:future,
:root #concept h2.copy ruby rt {
   transform: translate(0, 0.5rem);
}
/*古いsafari用*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
   ::i-block-chrome,
   #concept h2.copy ruby rt {
      transform: translate(0, 0.5rem);
   }
}

@media only screen and (max-width: 768px) {
   #concept .con_wrap {
      max-width: 28rem;
      padding-top: 8rem;
      padding-bottom: 10rem;
   }
   #concept .con_wrap:first-child {
      /*padding-top: 16rem;*/
      padding-top: 8rem;
   }
   #concept .con_wrap h2.copy {
      font-size: 2.4rem;
      letter-spacing: 0.22em;
      margin-bottom: 3rem;
   }
   #concept .con_wrap:first-child h2.copy {
      letter-spacing: 0.22em;
   }
   #concept .con_wrap h2.copy ruby rt {
      transform: translate(0, -0.3rem);
      font-size: 1.2rem;
   }
   #concept .con_wrap .txt_wrap {
      font-size: 1.2rem;
      line-height: calc(28 / 12);
      letter-spacing: 0.1rem;
      /*white-space: nowrap;*/
   }

   #concept .img_wrap {
      flex-flow: column;
   }
   #concept .img_wrap .img {
      width: 100%;
   }

   /*最新のsafari*/
   _::-webkit-full-page-media,
   _:future,
   :root #concept h2.copy ruby rt {
      transform: translate(0, 0.25rem);
   }
   /*古いsafari用*/
   @media screen and (-webkit-min-device-pixel-ratio: 0) {
      ::i-block-chrome,
      #concept h2.copy ruby rt {
         transform: translate(0, 0.25rem);
      }
   }
}

/* #product
----------------------------------------- */
#product {
   width: 100%;
   position: relative;
}
#product .ttl_wrap {
   width: 100%;
   height: 66rem;
   background: url("../images/product_top.jpg") no-repeat center center;
   background-size: cover;
   display: flex;
   align-items: center;
   padding-left: calc(300 / 1920 * 100%);
}
#product .ttl_wrap .ttl {
   -webkit-writing-mode: vertical-rl;
   -ms-writing-mode: tb-rl;
   writing-mode: vertical-rl;
   font-feature-settings: normal;
}
#product .ttl_wrap .ttl span {
   color: #ffffff;
   white-space: nowrap;
   font-size: 4.5rem;
   font-weight: bold;
   letter-spacing: 0.25em;
}

#product .inner {
   width: calc(1640 / 1920 * 100%);
   padding-top: 16rem;
   padding-bottom: 30rem;
}
#product .product_layout {
   display: grid;
   grid-template-columns: repeat(3, auto);
   column-gap: 8.5rem;
}

#product .product_layout .product_con {
   width: 100%;
}

#product .txt_wrap {
   /* width: calc(1320 / 1640 * 100%); */
   margin: auto;
   margin-top: 20rem;
}
#product .txt_wrap .txt {
   font-size: 1.6rem;
   line-height: calc(44 / 16);
   letter-spacing: 0.125em;
}
#product .txt_wrap .link {
   margin-top: 10rem;
}

@media only screen and (max-width: 768px) {
   #product {
   }
   #product .ttl_wrap {
      width: 100%;
      height: 30rem;
      background: url("../images/product_top_sp.jpg") no-repeat center center;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 0;
   }
   #product .ttl_wrap .ttl {
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      font-feature-settings: normal;
   }
   #product .ttl_wrap .ttl span {
      font-size: 2.2rem;
      letter-spacing: 0.2em;
   }

   #product .inner {
      width: 24rem;
      padding-top: 8rem;
      padding-bottom: 10rem;
   }
   #product .product_layout {
      display: grid;
      grid-template-columns: 100%;
      column-gap: 0;
      grid-gap: 4.5rem;
   }
   #product .product_layout .product_con {
      width: 100%;
   }

   #product .txt_wrap {
      width: 24rem;
      margin-top: 10rem;
   }
   #product .txt_wrap .txt {
      font-size: 1.2rem;
      line-height: calc(28 / 12);
      letter-spacing: 0.1em;
   }
   #product .txt_wrap .link {
      margin-top: 6rem;
      display: flex;
      justify-content: flex-end;
   }
}