@charset "UTF-8";

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

   /* main-ttl-wrap
   -------------------------------------*/
   #skysauna .main-ttl-wrap {
      padding: 161px 5rem 72px;
      display: grid;
      text-align: left;
   }
   #skysauna .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;
   }
   #skysauna .main-ttl-wrap .en span {
      font-size: 30px;
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: 0.05em;
      position: relative;
   }
   #skysauna .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;
   }
   #skysauna .main-ttl-wrap h1 {
      font-size: 16px;
      font-weight: 500;
      line-height: 2.5;
      letter-spacing: 0.05em;
   }

   #skysauna 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: 5rem;
      align-items: center;
      position: relative;
   }
   .fv .photo {
      position: relative;
      z-index: 2;
   }
   .fv .photo img {
      width: 100%;
      height: auto;
   }
   .fv .ttl-box {
      position: relative;
   }
   .fv h2 {
      display: grid;
      gap: 2.15rem;
      font-size: 32px;
      line-height: 1.6875;
      letter-spacing: 0.05em;
      font-weight: 500;
      margin: -6.4rem 0 0;
   }
   .fv h2 span {
      font-size: 13px;
      line-height: 1.2307692308;
      letter-spacing: 0em;
      font-weight: 400;
      color: #9A9A9A;
   }
   .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: 16.5rem 0 11.875rem;
      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: 3.8rem;
    }
    .fv .fv-bottom .txt {
      font-size: 16px;
      line-height: 2;
      letter-spacing: 0.05em;
      font-weight: 400;
      text-align: center;
      width: min(95%, 691px);
      margin-inline: auto;
    }
   
    /* sec共通
    -------------------------------------*/
    .sec .ttl-box {
      width: min(95%, 1640px);
      margin-inline: auto;
      display: flex;
      gap: 1.65rem;
      margin-bottom: 10.1rem;
    }
    .sec .en-ttl {
      font-size: 24px;
      line-height: 1.7083333333;
      letter-spacing: 0.05em;
      font-weight: 500;
      color: #8E7016;
    }
    .sec h2 {
      font-size: 32px;
      line-height: 1.28125;
      letter-spacing: 0.05em;
      font-weight: 700;
    }
    .sec .inBox .txt {
      font-size: 16px;
      line-height: 2;
      letter-spacing: 0.05em;
      font-weight: 400;
      margin-bottom: 1.95rem;
    }
    .sec .inBox .photo img {
      width: 100%;
      height: auto;
    }
    
    /* story
    -------------------------------------*/
    .story {
      padding: 12.5625rem 0 10.625rem;
    }
    .story .inBox01 {
      width: min(95%, 1630px);
      margin-right: auto;
      display: grid;
      grid-template-columns: 58.8957% 1fr;
      gap: 6.25rem;
      margin-bottom: 5.4375rem;
    }
   .story .inBox01 .txt-box {
    margin: 7.85rem 0 0;
   }
    .story .inBox02 {
      width: min(95%, 1400px);
      margin-inline: auto;
      display: grid;
      grid-template-columns: 49.3% 1fr;
      gap: 6.25rem;
    }
    .story .inBox02 .txt-box {
      margin-left: 7.5rem;
      margin-top: 4.3rem;
    }
    .story .inBox02 .txt {
      margin-bottom: 4rem;
    }

    /* product
    -------------------------------------*/
    .product {
      background: #F0EFEB;
      padding: 11.3rem 0 11.2rem;
    }
    .product .inBox01 {
      width: min(95%, 1630px);
      margin-left: auto;
      display: grid;
      grid-template-columns: 34.9693% 1fr;
      gap: 6.25rem;
      margin-bottom: 4.6rem;
      align-items: center;
    }
   .product .inBox01 .txt {
    margin: -2.5rem 0 0;
   }
    .product .inBox02 {
      width: min(95%, 1500px);
      margin-inline: auto;
      display: grid;
      grid-template-columns: 44% 38%;
      align-items: center;
      gap: 6.25rem;
    }
    .product .inBox02 .txt {margin: 1.5rem 0 0;}

    /* effect
    -------------------------------------*/
    .effect {
      background: url(../images/skysauna/effect-bg.jpg) no-repeat top center  #1C1C1C;
      padding: 9.75rem 0 14.6rem;
    }
    .effect .ttl-box {
      margin-bottom: 7.5rem;
      gap: 3.35rem;
    }
    .effect .ttl-box .wrap {
      display: grid;
      gap: 1.35rem;
    }
    .effect .ttl-box .en-ttl {
      color: #D6B44E;
    }
    .effect .ttl-box h2 {
      color: #E9E8E4;
    }
    .effect .ttl-box .subt {
      font-size: 16px;
      line-height: 2;
      letter-spacing: 0.05em;
      font-weight: 400;
      color: #E9E8E4;
    }
    .effect .effect-box {
      width: min(95%, 1280px);
      margin-inline: auto;
      padding: 3.6rem 0 3.2rem;
      position: relative;
      margin-bottom: 12.45rem;
    }
    .effect .effect-box::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #333;
      mix-blend-mode: multiply;
    }
    .effect .effect-box::after {
      content: "";
      position: absolute;
      top: -5px;
      left: -5px;
      width: calc(100% + 10px);
      height: calc(100% + 10px);
      border: 1px solid #9A9A9A;
      pointer-events: none;
    }
    .effect .effect-box h3 {
      font-size: 24px;
      line-height: 1.7083333333;
      letter-spacing: 0.05em;
      font-weight: 500;
      color: #E9E8E4;
      margin-bottom: 3.8rem;
      position: relative;
      text-align: center;
    }
    .effect .effect-box .list {
      width: min(95%, 647px);
      margin-inline: auto;
      position: relative;
    }
    .effect .effect-box .list li {
      font-size: 19px;
      line-height: 1.6842105263;
      letter-spacing: 0.05em;
      font-weight: 400;
      color: #E9E8E4;
      border-bottom: 1px dotted #696969;
      margin-bottom: 1.1875rem;
      padding: 0 0 0.95rem 7rem;
      display: flex;
      gap: 0.75rem;
    }
    .effect .content {
      padding: 6.75rem 0 0;
    }
    .effect .item {
      width: min(95%, 1280px);
      margin-inline: auto;
      display: grid;
      gap: 4.125rem;
    }
    .effect .item li {
      display: grid;
      gap: 5.8125rem;
      margin-left: 2.5rem;
    }
    .effect .item li .photo img {
      width: 100%;
      height: auto;
    }
     .effect .item li .txt-box {
       margin: 5.25rem 0 0;
     }
    .effect .item li h4 {
      font-size: 20px;
      line-height: 1.6;
      letter-spacing: 0.05em;
      font-weight: 400;
      color: #E9E8E4;
      margin-bottom: 2.1rem;
    }
    .effect .item li .txt {
      font-size: 16px;
      line-height: 2;
      letter-spacing: 0.05em;
      font-weight: 400;
      color: #E9E8E4;
    }
    .effect .item li:nth-child(odd) {
      grid-template-columns: 37.6613% 1fr;
    }
    .effect .item li:nth-child(even) {
      grid-template-columns: 54.83% 1fr;
    }
    .effect .item li:nth-child(even) .photo {
      order: 2;
    }
    .effect .item li:nth-child(even) .txt-box {
      order: 1;
      margin: 6.2rem 0 0;
    }
    .effect .item li:nth-child(4) .txt-box {
      order: 1;
      margin: 5.2rem 0 0;
    }


    /* bottom-photo
    -------------------------------------*/
    .bottom-photo {
      position: relative;
      margin: -1rem 0 0;
    }
    .bottom-photo .photo img{
      width: 100%;
      height: auto;
    }
    .bottom-photo .txt {
      font-size: 24px;
      font-weight: 500;
      line-height: 1.7083;
      letter-spacing: 0.05em;
      color: #FFFFFF;
      text-align: center;
      position: absolute;
      bottom: 7.3rem;
      left: 50%;
      transform: translateX(-50%);
    }

    /* link-box
    -------------------------------------*/
    .link-box {
      padding: 11.25rem 0 10rem;
    }
    .link-box .en-ttl {
      font-size: 20px;
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: 0.05em;
      color: #908672;
      text-align: center;
      margin-bottom: 1rem;
    }
    .link-box h2 {
      font-size: 24px;
      font-weight: 500;
      line-height: 1.7083;
      letter-spacing: 0.05em;
      text-align: center;
      margin-bottom: 3.2rem;
    }
    .link-box .item {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1.25rem;
      width: min(95%, 1340px);
      margin-inline: auto;
    }
    .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:1440px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1440px) {
   .fv .inner {
      gap: calc(40 / 1920 * 100vw);
   }
   .fv h2 {
      font-size: clamp(1.5rem, 0.929rem + 1.19vw, 2rem);
   }
}
/* ========================================
@media screen and (min-width:768px) and (max-width:1280px)
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
   .story .inBox01 {
      gap: calc(100 / 1920 * 100vw);
   }
   .story .inBox02 {
      gap: calc(100 / 1920 * 100vw);
   }
   .product .inBox01 {
      gap: calc(100 / 1920 * 100vw);
   }
   .story .inBox01 .txt-box {
      margin: calc(125 / 1920 * 100vw) 0 0;
   }
   .product .inBox02 {
      gap: calc(100 / 1920 * 100vw);
   }
   .story .inBox02 .txt-box {
      margin-left: calc(120 / 1920 * 100vw);
      margin-top: calc(70 / 1920 * 100vw);
   }
   .effect .ttl-box {
      gap: calc(53 / 1920 * 100vw);
   }
   .effect .item li {
      gap: calc(93 / 1920 * 100vw);
   }
   .effect .item li:nth-child(even) .txt-box {
      order: 1;
      margin: calc(100 / 1920 * 100vw) 0 0;
   }
   .effect .item li:nth-child(4) .txt-box {
      margin: calc(85 / 1920 * 100vw) 0 0;
   }
   .effect .item li .txt-box {
      margin: calc(85 / 1920 * 100vw) 0 0;
   }
}


/* ========================================
@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
   -------------------------------------*/
   #skysauna .main-ttl-wrap {
      padding: 44vw 5.2vw 8.1vw;
      display: grid;
      text-align: left;
   }
   #skysauna .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;
   }
   #skysauna .main-ttl-wrap .en span {
      font-size:4.348vw;
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: 0.05em;
      position: relative;
   }
   #skysauna .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;
   }
   #skysauna .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: 11.1vw 0 15.2vw;
   }
   .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 .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: 18.4vw 5.3vw 10.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: 4.6vw;
    }
    .fv .fv-bottom .txt {
      font-size:3.382vw;
      line-height: 2.285714;
      letter-spacing: 0.05em;
      font-weight: 500;
    }

    /* sec共通
    -------------------------------------*/
    .sec .ttl-box {
      width: 89.375vw;
      margin-inline: auto;
      display: grid;
      gap: 3vw;
      margin-bottom: 11.4vw;
    }
    .sec .en-ttl {
      font-size:5.797vw;
      line-height: 1.7083333333;
      letter-spacing: 0.05em;
      font-weight: 500;
      color: #8E7016;
    }
    .sec h2 {
      font-size:5.314vw;
      line-height: 1.5909;
      letter-spacing: 0.05em;
      font-weight: 700;
    }
    .sec .inBox .txt {
      font-size:3.382vw;
      line-height: 2.285714;
      letter-spacing: 0.05em;
      font-weight: 400;
      margin-bottom: 8.2vw;
    }
    .sec .inBox .photo img {
      width: 100%;
      height: auto;
    }
    

   /* story
    -------------------------------------*/
    .story {padding: 23.4vw 0 14vw;}
    .story .inBox01 {width: 89.375vw;margin-inline: auto;display: grid;gap: 3.5vw;margin-bottom: 2vw;}
    .story .inBox02 {display: grid;width: 89.375vw;margin-inline: auto;gap: 3.4vw;}
    .story .inBox02 .txt-box {order: 2;}
   
    /* product
    -------------------------------------*/
    .product {
      background: #F0EFEB;
      padding: 13.8vw 0 14vw;
    }
    .product .ttl-box {
      gap: 3.9vw;
    }
   .product .inBox01 {width: 89.375vw;margin-inline: auto;display: grid;gap: 3.5vw;margin-bottom: 2.4vw;}
   .product .inBox01 .txt {
    order: 2;
   }
   .product .inBox02 {width: 89.375vw;margin-inline: auto;display: grid;gap: 3.8vw;}


   /* effect
    -------------------------------------*/
    .effect {
      background: url(../images/skysauna/effect-bg_sp.jpg) no-repeat top center  #1C1C1C;
      padding: 14vw 0 26vw;
      position: relative;
      z-index: 2;
      background-size: contain;
    }
    .effect .ttl-box {gap: 4vw;margin-bottom: 9vw;}
    .effect .ttl-box .wrap {
      display: grid;
      gap: 4.8vw;
    }
    .effect .ttl-box .en-ttl {
      color: #D6B44E;
    }
    .effect .ttl-box h2 {
      color: #E9E8E4;
    }
    .effect .ttl-box .subt {
      font-size:3.382vw;
      line-height: 2.285714;
      letter-spacing: 0.05em;
      font-weight: 400;
      color: #E9E8E4;
    }
    .effect .effect-box {
      width: 87vw;
      margin-inline: auto;
      padding: 13vw 0 12.2vw;
      position: relative;
      margin-bottom: 29vw;
    }
    .effect .effect-box::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #333;
      mix-blend-mode: multiply;
    }
    .effect .effect-box::after {
      content: "";
      position: absolute;
      top: -1.2vw;
      left: -1.2vw;
      width: calc(100% + 2.5vw);
      height: calc(100% + 2.5vw);
      border: 0.2vw solid #9A9A9A;
      pointer-events: none;
    }
    .effect .effect-box h3 {
      font-size:4.831vw;
      line-height: 1.75;
      letter-spacing: 0.05em;
      font-weight: 500;
      color: #E9E8E4;
      margin-bottom: 8.7vw;
      position: relative;
      text-align: center;
    }
    .effect .effect-box .list {
      width: 81vw;
      margin-inline: auto;
      position: relative;
      display: grid;
      gap: 2.2vw;
    }
    .effect .effect-box .list li {
      font-size:3.382vw;
      line-height: 2.285714;
      letter-spacing: 0.05em;
      font-weight: 400;
      color: #E9E8E4;
      border-bottom: 0.2vw solid #696969;
      padding: 0 0 1.5vw 2vw;
    }
    .effect .effect-box .list li span {margin: 0 1vw 0 0;}
    .effect .item {
      width: 89.375vw;
      margin-inline: auto;
      display: grid;
      gap: 13.5vw;
    }
    .effect .item li {
      display: grid;
      gap: 2vw;
    }
     .effect .item li .photo {order: 2;margin-bottom: 0.8vw;}
     .effect .item li .txt-box {display: contents;}
    .effect .item li h4 {
      font-size:4.348vw;
      line-height: 1.94444;
      letter-spacing: 0.05em;
      font-weight: 400;
      color: #E9E8E4;
      margin-bottom: 1.4vw;
      order: 1;
      display: flex;
      gap: 1vw;
    }
    .effect .item li .txt {
      font-size:3.382vw;
      line-height: 2.285714;
      letter-spacing: 0.05em;
      font-weight: 400;
      color: #E9E8E4;
      order: 3;
    }

    /* bottom-photo
    -------------------------------------*/
    .bottom-photo {
      position: relative;
      margin: -10vw 0 0;
      padding: 0 0 0;
    }
    .bottom-photo .photo img{
      width: 100%;
      height: auto;
    }
    .bottom-photo .txt {
      font-size:4.831vw;
      font-weight: 500;
      line-height: 1.75;
      letter-spacing: 0.05em;
      color: #FFFFFF;
      text-align: center;
      position: absolute;
      bottom: 8.7vw;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
    }

    
    /* link-box
    -------------------------------------*/
    .link-box {
      padding: 24.4vw 0 29vw;
    }
    .link-box .en-ttl {
      font-size:3.865vw;
      font-weight: 400;
      line-height: 1.1875;
      letter-spacing: 0.05em;
      color: #908672;
      text-align: center;
      margin-bottom: 2vw;
    }
    .link-box h2 {
      font-size:4.831vw;
      font-weight: 500;
      line-height: 1.75;
      letter-spacing: 0.05em;
      text-align: center;
      margin-bottom: 9vw;
    }
    .link-box .item {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4.4vw 2.4vw;
      width:89.375vw;
      margin-inline: auto;
    }

}