@charset "UTF-8";

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {

   /* main-ttl-wrap
   -------------------------------------*/
   #product03 .main-ttl-wrap {
      padding: 161px 5rem 72px;
      display: grid;
      text-align: left;
   }
   #product03 .main-ttl-wrap .en{
      font-size: 40px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0.05em;
      display: flex;
      align-items: flex-end;
      gap: 4.25rem;
   }
   #product03 .main-ttl-wrap .en span {
      font-size: 30px;
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: 0.05em;
      position: relative;
   }
   #product03 .main-ttl-wrap .en span::before {
      position: absolute;
      content: "-";
      top: 50%;
      left: -1.9rem;
      transform: translateY(-50%);
      font-size: 30px;
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: 0.05em;
   }
   #product03 .main-ttl-wrap h1 {
      font-size: 16px;
      font-weight: 500;
      line-height: 2.5;
      letter-spacing: 0.05em;
   }

   #product03 main {
    max-width: 1920px;
    margin-inline: auto;
    width: 100%;
   }

   /* fv
   -------------------------------------*/
   .fv {
    max-width: 1920px;
    margin-inline: auto;
    width: 100%;
   }
   .fv .inner {
      display: grid;
      grid-template-columns: 70.8333% 1fr;
      gap: calc(80 / 1920 * 100vw);
      position: relative;
   }
   .fv .photo {
      position: relative;
      z-index: 2;
   }
   .fv .photo img {
      width: 100%;
      height: auto;
   }
   .fv .ttl-box {
      position: relative;
      margin: calc(76 / 1920 * 100vw) 0 0;
   }
   .fv h2 {
      display: grid;
      gap: 2.25rem;
      font-size: 32px;
      line-height: 1.6875;
      letter-spacing: 0.05em;
      font-weight: 500;
      margin-top: 6.4rem;
      margin-bottom: 3.3rem;
   }
   .fv h2 span {
      font-size: 13px;
      line-height: 1.2307692308;
      letter-spacing: 0em;
      font-weight: 400;
      color: #9A9A9A;
   }
   .fv .ttl-box .txt {
      font-size: 16px;
      font-weight: 400;
      line-height: 2;
      letter-spacing: 0.05em;
      width: min(95%, 360px);
   }
   .fv .scrolldown-bar {
      position: absolute;
      bottom: 0;
      right: 479px;
      width: 1px;
      height: 196px;
      background: #1C1C1C;
      overflow: hidden;
      z-index: 2;
   }
   .fv .scrolldown-bar-active {
      position: absolute;
      bottom: 100%;
      left: 0;
      width: 1px;
      height: 40px;
      background: #FFFFFF;
      animation: 3.0s ease-in-out backwards infinite scrollDown;
   }
   @keyframes scrollDown {
      0% {
        bottom: 100%;
      }
      100% {
        bottom: -50px;
      }
   }

   .fv .fv-bottom {
      background: #F0EFEB;
      padding: 12.2rem 0 7.5rem;
      margin-top: -6.125rem;
    }
    .fv .fv-bottom h3 {
      font-size: 24px;
      line-height: 1.7083333333;
      letter-spacing: 0.05em;
      font-weight: 500;
      text-align: center;
      margin-bottom: 2.7rem;
    }
    .fv .fv-bottom .list {
      width: min(95%, 640px);
      margin-inline: auto;
      display: grid;
      gap: 0.65rem;
    }
    .fv .fv-bottom .list li {
      font-size: 16px;
      line-height: 2;
      letter-spacing: 0.05em;
      font-weight: 400;
      border-bottom: 1px dotted #9A9A9A;
      position: relative;
      padding: 0 0 0.55rem 5rem;
    }
    .fv .fv-bottom .list li::before {
      position: absolute;
      content: "";
      top: 40%;
      left: 2rem;
      transform: translateY(-50%);
      width: 1.5rem;
      height: 1.55rem;
      background: url(../images/page-common/check.svg)no-repeat;
      background-size: contain;
    }
   
    /* sec共通
    -------------------------------------*/
    .section-wrap {
      background: #333333;
      padding: 11.25rem 0 3.65rem;
      display: grid;
      gap: 2.5rem;
    }
    
    .sec {
      position: relative;
    }
    .sec .content {
      background: #1C1C1C;
      padding: 12.5rem 0 24.8125rem 16.25rem;
      z-index: 2;
      color: #fff;
      width: calc(1240 / 1920 * 100vw);
      margin-right: auto;
      max-width: 1240px;
    }
    .sec:nth-child(even) .content {
      padding: 15rem 0 15.95rem 27.5rem;
      margin-left: auto;
      margin-right: 0;
    }
    .sec .photo01 {
      position: absolute;
      top: 9.4%;
      right: 0;
      width: calc(1040 / 1920 * 100vw);
      z-index: 1;
      max-width: 1040px;
    }
    .sec:nth-child(even) .photo01 {
      left: 0;
      right: auto;
      top: 10.8%;
    }
    .sec .content .num {
      margin-bottom: 2.65rem;
    }
    .sec .content h2 {
      font-size: clamp(1rem, 0.333rem + 1.39vw, 2rem);
      line-height: 1.28125;
      letter-spacing: 0.05em;
      font-weight: 700;
      color: #FFFFFF;
      margin-bottom: 3.75rem;
    }
    .sec .content .txt {
      font-size: clamp(0.75rem, 0.583rem + 0.35vw, 1rem);
      line-height: 2;
      letter-spacing: 0.05em;
      font-weight: 400;
      color: #FFFFFF;
      margin-bottom: 1.95rem;
      width: min(95%, 540px);
    }
    .sec .photo img {
      width: 100%;
      height: auto;
    }
    .sec .photo02 {
      position: relative;
      top: -7.65rem;
      width: calc(1120 / 1920 * 100vw);
      max-width: 1120px;
    }
    .sec:nth-child(even) .photo02 {
      top: -6.25rem;
      margin-left: auto;
    }

    /* sec03 */
    .sec03 {
      margin: 1.25rem 0 0;
    }
    .sec03 .content {
      padding: 12.5rem 0 20.625rem 16.25rem;
    }

    /* section-wrap02
    -------------------------------------*/
    .section-wrap02 {
      background: url(../images/page-common/sec-wrap02-bg.png)repeat;
      background-size: contain;
      padding: 0 0 8.7rem;
    }
    .section-wrap02 .en-ttl {
      font-size: 13px;
      line-height: 1.2307692308;
      letter-spacing: 0em;
      font-weight: 400;
      text-align: center;
      color: #9A9A9A;
      margin-bottom: 0.55rem;
    }
    .section-wrap02 h2 {
      font-size: 24px;
      line-height: 1.7083333333;
      letter-spacing: 0.05em;
      font-weight: 700;
      text-align: center;
      margin-bottom: 2.2rem;
    }
    .section-wrap02 .price {
      background: #FFFFFF;
      width: min(95%, 776px);
      margin-inline: auto;
      padding: 2.1rem 0;
      text-align: center;
      margin-bottom: 5.85rem;
    }
    .section-wrap02 .price h3 {
      font-size: 18px;
      line-height: 2.2777777778;
      letter-spacing: 0.05em;
      font-weight: 500;
      margin-bottom: 0.55rem;
    }
    .section-wrap02 .price .price-num {
      font-size: 24px;
      line-height: 1.7083333333;
      letter-spacing: 0.05em;
      font-weight: 500;
    }
    .section-wrap02 .price .price-num span {
      font-size: 18px;
      line-height: 2.2777777778;
      letter-spacing: 0.05em;
      font-weight: 500;
    }
    
    
    /* standard
    -------------------------------------*/
    .standard {
      padding: 10rem 0 0;
    }
    .standard .list {
      width: min(95%, 1400px);
      margin-inline: auto;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0 2.5rem;
      padding: 0 0 2.85rem;
    }
    .standard .list li {
      grid-template-rows: subgrid;
      grid-row: span 3;
      display: block grid;
      margin-bottom: 3.15rem;
    }
    .standard .list li h4 {
      font-size: 20px;
      line-height: 2.05;
      letter-spacing: 0.05em;
      font-weight: 700;
      text-align: center;
      margin-bottom: 1.2rem;
    }
    .standard .list li .photo {
      margin-bottom: 1rem;
    }
    .standard .list li .photo img {
      width: 100%;
      height: auto;
    }
    .standard .list li .txt {
      font-size: 16px;
      line-height: 2;
      letter-spacing: 0.05em;
      font-weight: 400;
    }

    /* gallery
    -------------------------------------*/
    .gallery {
      padding: 6.2rem 0 0;
    }
    .section-wrap02 .gallery .en-ttl {
      color: #908672;
      font-size: 20px;
      font-weight: 400;
      line-height: 1.25;
      letter-spacing: 0.05em;
    }
    .section-wrap02 .gallery h2 {
      margin-bottom: 4.05rem;
    }
    .gallery-slider {
      margin-bottom: 1.95rem;
    }
    .gallery-slider .slick-img {
      width: 1040px;
      margin: 0 20px;
    }
    .thumbnail .slick-track{
      width: min(95%, 1280px)!important;
      display: flex;
      justify-content: center;
    }
    .thumbnail-img {
      width: 240px!important;
      margin: 0 20px 0 0;
      position: relative;
    }
    .thumbnail-img:nth-child(5) {
      margin: 0;
    }
    .thumbnail-img img {
      width: 100%;
      height: 160px;
      object-fit: cover;
    }
    .thumbnail-img::before {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(28, 28, 28, 0.64);
      pointer-events: none;
      transition: opacity 0.3s;
      opacity: 1;
    }
    .thumbnail .slick-slide.active::before {
      opacity: 0;
    }
    .slick-img img {
      height: auto;
      width: 100%;
    }

    /* link-box
    -------------------------------------*/
    .link-box .inner {
      width: min(95%, 1040px);
      margin-inline: auto;
      padding: 7.45rem 0 10rem;
    }
    .link-box .en-ttl {
      color: #908672;
      font-size: 20px;
      font-weight: 400;
      line-height: 1.25;
      letter-spacing: 0.05em;
      text-align: center;
      margin-bottom: 0.8rem;
    }
    .link-box h2 {
      font-size: 24px;
      line-height: 1.7083333333;
      letter-spacing: 0.05em;
      font-weight: 700;
      text-align: center;
      margin-bottom: 3.5rem;
    }
    .link-box .item {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 2.5rem;
    }
    .link-box .item img {
      width: 100%;
      height: auto;
    }
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1919px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1919px) {
  .fv .scrolldown-bar {
    right: 24.961vw;
    height: 10.214vw;
  }
}


/* ========================================
@media screen and (min-width:768px) and (max-width:1700px)
======================================== */
@media screen and (min-width:768px) and (max-width:1700px) {
    .sec .content {
      padding: 11.765vw  0 19.588vw 10.294vw;
    }
    .sec .content .txt {
      width: 31.765vw;
    }
    .sec:nth-child(even) .content {
      padding: 14.118vw 0 16.588vw 25.882vw;
    }
    .sec03 .content {
      padding: 11.765vw 0 19.412vw 10.294vw;
    }
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1500px)
======================================== */
@media screen and (min-width:768px) and (max-width:1500px) {
  .thumbnail-img {
    width: calc(240 / 1500 * 100vw)!important;
    margin: 0 calc(20 / 1500 * 100vw) 0 0;
  }
  .thumbnail-img img  {
    height: calc(160 / 1500 * 100vw);
  }
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1440px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1440px) {
   .fv h2 {
      font-size: clamp(1.375rem, 0.661rem + 1.49vw, 2rem);
      gap: calc(36 / 1920 * 100vw);
      margin-bottom: calc(52 / 1920 * 100vw);
      margin-top: 0;
   }
   .fv .ttl-box .txt {
    font-size: clamp(0.875rem, 0.732rem + 0.3vw, 1rem);
   }

  }

/* ========================================
@media screen and (min-width:768px) and (max-width:1280px)
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
  .sauna-box .inner {
    padding: calc(78 / 1280 * 100vw) calc(100 / 1280 * 100vw) calc(80 / 1280 * 100vw);
  }
  .gallery-slider .slick-img {
    width: calc(1040 / 1280 * 100vw);
    margin: 0 calc(20 / 1280 * 100vw);
  }
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1100px)
======================================== */
@media screen and (min-width:768px) and (max-width:1100px) {
  .fv .scrolldown-bar {
    right: 26.45vw;
  }
}

/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
   /* main-ttl-wrap
   -------------------------------------*/
   #product03 .main-ttl-wrap {
      padding: 44vw 5.2vw 8.1vw;
      display: grid;
      text-align: left;
   }
   #product03 .main-ttl-wrap .en{
      font-size:5.797vw;
      font-weight: 700;
      line-height: 1.208333;
      letter-spacing: 0.05em;
      display: flex;
      align-items: flex-end;
      gap: 6.7vw;
      margin-bottom: 3.15vw;
   }
   #product03 .main-ttl-wrap .en span {
      font-size:4.348vw;
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: 0.05em;
      position: relative;
   }
   #product03 .main-ttl-wrap .en span::before {
      position: absolute;
      content: "-";
      top: 50%;
      left: -3vw;
      transform: translateY(-50%);
      font-size:4.348vw;
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: 0.05em;
   }
   #product03 .main-ttl-wrap h1 {
      font-size:3.14vw;
      font-weight: 500;
      line-height: 1.7692;
      letter-spacing: 0.05em;
   }


    /* fv
   -------------------------------------*/
   .fv .inner {
      display: grid;
      gap: 1vw;
      position: relative;
   }
   .fv .photo {
      position: relative;
      z-index: 2;
   }
   .fv .photo img {
      width: 100%;
      height: auto;
   }
   .fv .ttl-box {
      position: relative;
      padding: 10.7vw 0 22.2vw;
      display: grid;
      gap: 7.1vw;
   }
   .fv h2 {
      display: grid;
      gap: 4.2vw;
      font-size:5.797vw;
      line-height: 1.75;
      letter-spacing: 0.05em;
      font-weight: 500;
      text-align: center;
   }
   .fv h2 span {
      font-size:3.14vw;
      line-height: 1.2307692308;
      letter-spacing: 0em;
      font-weight: 400;
      color: #9A9A9A;
   }
   .fv .ttl-box .txt {
    font-size:3.865vw;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.05em;
    width: 89.375vw;
    margin-inline: auto;
 }
  .fv .scrolldown-bar {
      position: absolute;
      bottom: -8.1vw;
      left: 50%;
      width: 0.2vw;
      height: 21.1vw;
      background: #1C1C1C;
      overflow: hidden;
      z-index: 2;
      transform: translateX(-50%);
   }
  .fv .scrolldown-bar-active {
      position: absolute;
      bottom: 100%;
      left: 0;
      width: 0.2vw;
      height: 4.4vw;
      background: #FFFFFF;
      animation: 3.0s ease-in-out backwards infinite scrollDown;
   }
   @keyframes scrollDown {
      0% {
        bottom: 100%;
      }
      100% {
        bottom: -50px;
      }
    }
   

   .fv .fv-bottom {
      background: #F0EFEB;
      padding: 14vw 5.3vw 14.4vw;
    }
    .fv .fv-bottom h3 {
      font-size:4.348vw;
      line-height: 1.9444;
      letter-spacing: 0.05em;
      font-weight: 500;
      text-align: center;
      margin-bottom: 7vw;
    }
    .fv .fv-bottom .list {
      width: 84.6vw;
      margin-inline: auto;
      display: grid;
      gap: 2.65vw;
    }
    .fv .fv-bottom .list li {
      font-size:3.382vw;
      line-height: 2.285714;
      letter-spacing: 0.05em;
      font-weight: 400;
      border-bottom: 0.2vw dotted #9A9A9A;
      position: relative;
      padding: 0 1vw 2vw 8.6vw;
    }
    .fv .fv-bottom .list li::before {
      position: absolute;
      content: "";
      top: 1vw;
      left: 0;
      width: 5.8vw;
      height: 5.8vw;
      background: url(../images/page-common/check.svg)no-repeat;
      background-size: contain;
    }

    /* sec共通
    -------------------------------------*/
    .section-wrap {
      background: #333333;
      padding: 17vw 0 17vw;
      display: grid;
      gap: 24vw;
    }
    
    .sec {
      position: relative;
      display: grid;
      padding: 16.5vw 0 0;
    }
    .sec .content {
      color: #fff;
      display: contents;
    }
    .sec:nth-child(odd):before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: 94.7vw;
      height: 100.25vw;
      background: #1C1C1C;
      pointer-events: none;
    }
    .sec:nth-child(even):before {
      position: absolute;
      content: "";
      top: 0;
      right: 0;
      width: 94.7vw;
      height: 93.25vw;
      background: #1C1C1C;
      pointer-events: none;
    }
    .sec .photo {
      position: relative;
      z-index: 2;
    }
    .sec .photo01 {
      order: 3;
      margin-bottom: 6vw;
    }
    .sec .content .num {
      margin-bottom: 3.4vw;
      order: 1;
      width: 89.375vw;
      margin-inline: auto;
      position: relative;
      z-index: 2;
    }
    .sec .content h2 {
      font-size:4.348vw;
      line-height: 1.9444;
      letter-spacing: 0.05em;
      font-weight: 700;
      color: #FFFFFF;
      margin-bottom: 3.6vw;
      order: 2;
      width: 89.375vw;
      margin-inline: auto;
      position: relative;
    }
    .sec .content .txt {
      font-size:3.382vw;
      line-height: 2.285714;
      letter-spacing: 0.05em;
      font-weight: 400;
      color: #FFFFFF;
      margin-bottom: 7.8vw;
      width: 89.375vw;
      margin-inline: auto;
      order: 4;
      z-index: 2;
    }
    .sec .content .txt:last-child {
      margin-bottom: 8.2vw;
    }
    .sec .photo img {
      width: 100%;
      height: auto;
    }
    .sec .photo02 {
      order: 5;
    }

    /* sec01 */
    .sec .content .num img {
      width: 7.8vw;
    }
    /* sec02 */
    .sec02 {
      padding: 12.7vw 0 0;
    }
    .sec02 .content .num {width: 88.8vw;margin: 0 0 2.7vw auto;}
    .sec02 .content .num img {
      width: 8.7vw;
    }
    .sec02 .content h2 {width: 88.8vw;margin: 0 0 5.8vw auto;}
    /* sec03 */
    .sec03 {
      padding: 16.7vw 0 0;
    }
    .sec03 .content .num img {
      width: 9vw;
    }
  .sec03 .content h2 {
    margin-bottom: 5.6vw;
}

    /* section-wrap02
    -------------------------------------*/
    .section-wrap02 {
      padding: 0 0 1vw;
    }
    .section-wrap02 .en-ttl {
      font-size:3.14vw;
      line-height: 1.2307692308;
      letter-spacing: 0em;
      font-weight: 400;
      text-align: center;
      color: #9A9A9A;
      margin-bottom: 1.7vw;
    }
    .section-wrap02 h2 {
      font-size:4.348vw;
      line-height: 1.9444;
      letter-spacing: 0.05em;
      font-weight: 700;
      text-align: center;
      margin-bottom: 5vw;
    }
    .section-wrap02 .price {
      background: #FFFFFF;
      width: 89.375vw;
      margin-inline: auto;
      padding: 7vw 0 10.5vw;
      text-align: center;
      margin-bottom: 22.5vw;
    }
    .section-wrap02 .price h3 {
      font-size:3.865vw;
      line-height: 2.5625;
      letter-spacing: 0.05em;
      font-weight: 500;
      margin-bottom: 0.45vw;
    }
    .section-wrap02 .price .price-num {
      font-size:4.831vw;
      line-height: 2.05;
      letter-spacing: 0.05em;
      font-weight: 500;
    }
    .section-wrap02 .price .price-num span {
      font-size:3.865vw;
      line-height: 2.5625;
      letter-spacing: 0.05em;
      font-weight: 500;
    }
    

     /* standard
    -------------------------------------*/
    .standard {
      padding: 25vw 0 0;
      background: url(../images/page-common/sec-wrap02-bg_sp.png)repeat;
      background-size: auto;
    }
    .standard .list {
      width: 89.375vw;
      margin-inline: auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 11.85vw;
      padding: 0 0 13vw;
    }
    .standard .list li h4 {
      font-size:4.348vw;
      line-height: 2.2777;
      letter-spacing: 0.05em;
      font-weight: 500;
      text-align: center;
      margin-bottom: 4.1vw;
    }
    .standard .list li .photo {
      margin-bottom: 4.4vw;
    }
    .standard .list li .photo img {
      width: 100%;
      height: auto;
    }
    .standard .list li .txt {
      font-size:3.382vw;
      line-height: 2.285714;
      letter-spacing: 0.05em;
      font-weight: 400;
    }

    /* gallery
    -------------------------------------*/
    .gallery {
      padding: 25vw 0 0;
    }
    .section-wrap02 .gallery .en-ttl {
      color: #908672;
      font-size:3.865vw;
      font-weight: 400;
      line-height: 1.1875;
      letter-spacing: 0.05em;
    }
    .section-wrap02 .gallery h2 {
      margin-bottom: 4vw;
      font-size: 4.831vw;
      font-weight: 500;
      margin-bottom: 13vw;
    }
    .gallery-slider {
      margin-bottom: 1vw;
    }
    .gallery-slider .slick-img {
      width: 81vw;
      margin: 0 1.25vw;
    }
    .thumbnail .slick-track{
      width: 94vw!important;
      display: flex;
      justify-content: center;
    }
    .thumbnail .slick-list {
      padding: 0!important;
    }
    .thumbnail-img {
      width: 40vw!important;
      margin: 0 1vw 0 0;
      position: relative;
    }
    .thumbnail-img:nth-child(5) {
      margin: 0;
    }
    .thumbnail-img img {
      width: 100%;
      height: 11.836vw;
      object-fit: cover;
    }
    .thumbnail-img::before {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(28, 28, 28, 0.64);
      pointer-events: none;
      transition: opacity 0.3s;
      opacity: 1;
    }
    .thumbnail .slick-slide.active::before {
      opacity: 0;
    }
    .slick-img img {
      height: auto;
      width: 100%;
    }

    /* link-box
    -------------------------------------*/
    .link-box .inner {
      width: 89.375vw;
      margin-inline: auto;
      padding: 24vw 0 28vw;
    }
    .link-box .en-ttl {
      color: #908672;
      font-size:3.865vw;
      font-weight: 400;
      line-height: 1.1875;
      letter-spacing: 0.05em;
      text-align: center;
      margin-bottom: 1.8vw;
    }
    .link-box h2 {
      font-size:4.831vw;
      line-height: 1.75;
      letter-spacing: 0.05em;
      font-weight: 700;
      text-align: center;
      margin-bottom: 16vw;
    }
    .link-box .item {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4.6vw 2vw;
    }
    .link-box .item img {
      width: 100%;
      height: auto;
    }

}