@charset "UTF-8";

/* =============================================================================

Stay Room CSS

・客室詳細用CSS「.sauna-×××」

上記はここに記述する

============================================================================= */

/* SelectorName
----------------------------------------------------------------------------- */
.sauna-SelectorName {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
}

/* サウナ・バス＆フィットネス紹介（about）
----------------------------------------------------------------------------- */
.sauna-about {
  @media (width > 640px) {
    text-align: center;
  }
  @media (width <= 640px) {
    text-align: left;
  }
  .info-text {
    @media (width > 640px) {
      margin-bottom: 12.0rem;
    }
    @media (width <= 640px) {
      margin-bottom: 5.6rem;
    }
  }
  .sauna-pic {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sauna-pic p {
    position: absolute;
    color: var(--cc-white-A);
    letter-spacing: 0.05em;
    text-align: center;
    @media (width > 640px) {
      font-size: 2.2rem;
      line-height: 1.8;
    }
    @media (width <= 640px) {
      font-size: 1.8rem;
      line-height: 1.4;
    }
  }
  .sauna-pic span {
    @media (width > 640px) {
      font-size: 1.4rem;
    }
    @media (width <= 640px) {
      font-size: 1.2rem;
      line-height: 2.6;
    }
  }
}
.sauna-ttl {
  @media (width > 640px) {
    margin-bottom: 5.6rem;
  }
  @media (width <= 640px) {
    margin-bottom: 3.2rem;
  }
}
.sauna-txt {
  @media (width > 640px) {
    margin-bottom: 4.0rem;
  }
  @media (width <= 640px) {
    margin-bottom: 3.2rem;
  }
}
.sauna-subject {
  color: var(--cc-gold-A);
  line-height: 2;
  letter-spacing: 0.2em;
  @media (width > 640px) {
    font-size: 1.8rem;
  }
  @media (width <= 640px) {
    font-size: 1.4rem;
  }
  span {
    font-size: 1.4rem;
  }
}
.sauna-pic {
  width: 100%;
  height: auto;
}

/* サウナ・バス＆フィットネス
----------------------------------------------------------------------------- */
.sauna-service {
  @media (width > 640px) {
    padding-bottom: 16rem;
  }
  @media (width <= 640px) {
    padding-bottom: 8.4rem;
  }
  .l-horizontal-carousel_text {
    position: relative;
  }
  .text.p-pi-sp-30 {
    @media (width <= 640px) {
      margin-bottom: 3.2rem;
    }
  }
  .text-desc {
    @media (width > 640px) {
      width: 40.0rem;
    }
    @media (width <= 640px) {
      width: 100%;
    }
  }
  .l-heading-A {
    align-items: flex-start;
     @media (width > 640px) {
      margin-bottom: 6.8rem;
    }
    @media (width <= 640px) {
      margin-bottom: 4.0rem;
    }
  }
  .l-horizontal-carousel_text .inner {
    grid-template-columns: 42.9rem 1fr;
    column-gap: 10.0rem;
    align-items: flex-start;
    margin-left: auto;
  }
  .l-horizontal-carousel_text .text {
    grid-column: 1 / 2;
  }
  .l-horizontal-carousel_text .carousel {
    grid-column: 2 / 3;
  }
  .l-horizontal-carousel_text {
    @media (width > 640px) {
      margin-bottom: 16rem;
    }
    @media (width <= 640px) {
      margin-bottom: 4rem;
    }
  }
  .l-horizontal-carousel_text .carousel .js-carousel-A {
    margin-left: 0;
    @media (width > 640px) {
      position: static;
    }
  }
  .l-horizontal-carousel_text .carousel .splide__slide {
    @media (width > 640px) {
      width: 83.2rem;
      height: 52.0rem;
    }
  }
  .l-horizontal-carousel_text .carousel .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .l-horizontal-carousel_text .js-carousel-count-A {
    @media (width > 640px) {
      position: absolute;
      left: calc(50% - 68rem);
      bottom: 0;
      width: 40rem;
    }
    @media (width <= 640px) {
      position: static;
      width: 33rem;
    }
  }
  .l-column3-A {
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      gap: 3.2rem;
    }
  }
  .l-column3-A .item-img {
    @media (width > 640px) {
      margin-bottom: 2.4rem;
    }
    @media (width <= 640px) {
      margin-bottom: 0.8rem;
    }
  }
}
.sauna-service:nth-child(3) {
  .column-item:nth-child(1) {
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      order: 1;
    }
  }
  .column-item:nth-child(2) {
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      order: 2;
    }
  }
  .column-item:nth-child(3) {
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      order: 3;
    }
  }
}
.sauna-service:nth-child(4) {
  .l-column3-A {
    @media (width > 640px) {
      margin-bottom: 8rem;
    }
    @media (width <= 640px) {
      margin-bottom: 3.2rem;
    }
  }
}


/* ご利用情報
----------------------------------------------------------------------------- */
.sauna-info {
  @media (width <= 640px) {
      padding-bottom: 6.4rem;
    }
  div {
    @media (width > 640px) {
      display: flex;
      justify-content: flex-start;
      gap: 4.8rem;
      padding: 1.6rem;
    }
    @media (width <= 640px) {
      padding: 1.6rem 0;
    }
  }
  .sauna-tabel_ttl {
    @media (width > 640px) {
      width: 31.2rem;
      flex-shrink: 0;
    }
    @media (width <= 640px) {
      width: 100%;
    }
  }
  .sauna-tabel_subttl {
    margin-bottom: 0;
    padding-left: 0;
  }
}

/* 予約ボタン
----------------------------------------------------------------------------- */
.sauna-reserve {
  @media (width <= 640px) {
      margin-bottom: 6.4rem;
  }
}

/* 下ボタン群（共通設定）
----------------------------------------------------------------------------- */
.sauna-other {
  @media (width > 640px) {
    margin-bottom: 16rem;
  }
  @media (width <= 640px) {
    margin-bottom: 12rem;
  }
  .p-ff-castoro {
    letter-spacing: 0.05em;
    text-align: center;
    @media (width > 640px) {
      margin-bottom: 4rem;
      font-size: 2.8rem;
      line-height: 1;
    }
    @media (width <= 640px) {
      margin-bottom: 2.4rem;
      font-size: 2rem;
      line-height: 1.2;
    }
  }
}
.sauna-fbtns {
  display: grid;
  @media (width > 640px) {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    padding: 0 1.6rem;
  }
  @media (width <= 640px) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0.2rem;
    padding: 0 0.4rem;
  }
}
.sauna-fbtn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
  .sauna-fbtn_bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    pointer-events: none;
    transition: var(--duration-hover-A);
  }
  .sauna-txtbox {
    position: absolute;
    width: 100%;
    height: 100%;
    color: var(--cc-white-A);
  }
  .sauna-txtbox a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    height: 100%;
  }
  .p-ff-castoro {
    display: block;
    letter-spacing: 0.05em;
    text-align: center;
    @media (width > 640px) {
      margin-bottom: 0.8rem;
      font-size: 2.2rem;
      line-height: 1.3;
    }
    @media (width <= 640px) {
      margin-bottom: 0.4rem;
      font-size: 1.5rem;
      line-height: 1.5;
    }
  }
  .p-ff-serif {
    display: block;
    line-height: 1;
    letter-spacing: 0.12em;
    text-align: center;
    @media (width > 640px) {
      font-size: 1.4rem;
    }
    @media (width <= 640px) {
      font-size: 1.1rem;
    }
  }
  .l-button-A {
    @media (width > 640px) {
      gap: 1.2rem;
      min-height: 2rem;
      color: var(--cc-white-A);
    }
    @media (width <= 640px) {
      display: none;
    }
  }
  .l-button-A::before {
    border-bottom: 1px solid var(--cc-white-A);
  }
  .l-button-A::after {
    background-color: var(--cc-white-A);
  }
}
.sauna-fbtn:hover {
  @media (width > 640px) {
    .sauna-fbtn_bg {
      transform: scale(1.04);
    }
    .l-button-A::before {
      background-color: transparent;
    }
  }
}