@charset "UTF-8";

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

Stay Room CSS

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

上記はここに記述する

============================================================================= */
:root {
  --stay_room-pc-w:118.0rem;
}
.stay_room-pc-w {
  @media (width > 640px) {
    width:var(--stay_room-pc-w);
  }
}

.page-container.-stay_room {
  @media (width > 640px) {
    display:grid;
    grid-template-columns:calc(50% -  50.0rem) 1fr;
    align-items: flex-start;
    padding-top:4.0rem;
    width:100%;
  }
}

.stay_room-contents {
  .l-column3-A {
    @media (width > 640px) {
      gap:5.0rem;
    }
  }
  .l-column2-A {
    @media (width > 640px) {
      gap:6.0rem;
    }
  }
}

.stay_room-heading {
  @media (width > 640px) {
    margin-inline:auto;
    display:flex;
    position:sticky;
    gap:1.8rem;
    top:calc(var(--header-height) + 4.0rem);
    z-index:10;
  }
  @media (width <= 640px) {
    display:grid;
    gap:1.0rem;
    margin-block:4.0rem;
  }

  > span {
    @media (width > 640px) {
      writing-mode:vertical-rl;
    }
  }
  .en {
    font-size:6.0rem;
    line-height:1;
    letter-spacing: .05em;
    @media (width > 640px) {
      max-height:calc(100lvh - var(--header-height) - 4.0rem);
    }
    @media (width <= 640px) {
      font-size:3.4rem;
      line-height:1.3;
    }
  }
  .ja {
    font-size:1.6rem;
    line-height:1;
    letter-spacing:1;
    @media (width > 640px) {
      margin-inline-start:.6rem;
      font-feature-settings: "palt" 0;
    }
    @media (width <= 640px) {
      font-size:1.4rem;
      letter-spacing:.16em;
    }
  }
}

/* キービジュアル
----------------------------------------------------------------------------- */
.stay_room-kv {
  position:relative;
  overflow:hidden;

  @media (width > 640px) {
    padding-bottom:6.0rem;
  }
  @media (width <= 640px) {
    padding-bottom:7.0rem;
  }
  .stay_room_js-kv {
    margin-bottom:1.0rem;
    height:60.0rem;
    position:static;
    overflow:visible;
    @media (width <= 640px) {
      margin-bottom:.6rem;
      height:34.0rem;
    }
    :is(.splide__track,.splide__list) {
      height:100%;
    }
    .splide__track {
    }
    .splide__slide {
    }
    .js-carousel-count-A {
      @media (width > 640px) {
      }
      @media (width <= 640px) {
        display:grid;
        position:absolute;
        gap:1.0rem;
        inset-inline:var(--pi-sp-30);
        bottom:0;
      }

      .splide__pagination {
        @media (width > 640px) {
          width:var(--stay_room-pc-w);
          position:absolute;
          left:0;
          bottom:0;
        }
        @media (width <= 640px) {
          grid-row:1/2;
          width:100%;
        }
      }
      .arrows_number {
        @media (width > 640px) {
          gap:.8rem;
          margin-top:5.0rem;
        }
        @media (width <= 640px) {
          grid-row:2/3;
          margin-left:auto;
        }
      }
    }
  }
  .stay_room_js-thumbnail {
    overflow:visible;
    @media (width > 640px) {
      margin-left:13.0rem;
      width:113.0rem;
      clip-path:polygon(0 0, calc(50vw + 48.0rem) 0, calc(50vw + 48.0rem) 100%, 0 100%);
    }
    @media (width <= 640px) {
      margin-left:.6rem;
      width:27.6rem;
    }
    .splide__track {
      overflow:visible;
    }
    .splide__slide {
      position:relative;
      cursor: pointer;
      transition-property: opacity;
      transition-duration: var(--duration-hover-A);
      height:auto;
      aspect-ratio:18/10;

      &.is-active {
        opacity:.5;
      }

      img {
        height:auto;
        aspect-ratio: 16/9;
      }
    }
  }
}


/* 基本情報
----------------------------------------------------------------------------- */
.stay_room-info {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  > .inner {
    @media (width > 640px) {
      display:grid;
      grid-template-rows:1fr auto;
      grid-template-columns:1fr 46.0rem;
      column-gap:8.0rem;
      padding-left:8.0rem;
    }
    @media (width <= 640px) {
    }
  }

  .info-text {
    @media (width > 640px) {
      grid-row:1/3;
      grid-column:1/2;
    }
    @media (width <= 640px) {
    }
    .text-desc {
      margin-bottom:6.4rem;
      @media (width <= 640px) {
        margin-bottom:4.0rem;
      }
    }
    .l-table-A {
    }
    .text-note {
      margin-top:2.4rem;
      @media (width <= 640px) {
        margin-top:1.6rem;
      }
    }
  }
  .info-floorplan {
    display:flex;
    flex-direction:column;
    align-items:center;
    &:has(.js-carousel-A.is-active) {
      @media (width > 640px) {
        /* margin-bottom:4.2rem; */
      }
      @media (width <= 640px) {
        margin-bottom:10.0rem;
      }
    }
    @media (width > 640px) {
      grid-row:1/2;
      grid-column:2/3;
      padding-top: 3.2rem;
      padding-bottom: 2.8rem;
      height:46.0rem;
    }
    @media (width <= 640px) {
      margin-top:5.6rem;
      padding-top:4.8rem;
      padding-top: 2.4rem;
      padding-bottom: 2.0rem;
      height:33.0rem;
    }
    .floorplan-heading {
      flex-shrink: 0;
      font-size:1.8rem;
      line-height:1.2;
      letter-spacing: .05em;
      @media (width <= 640px) {
      }
    }
    .js-carousel-A {
      flex:1;
      width:100%;
      height: 2.34rem;
      .splide__track {
        height:100%;
        @media (width > 640px) {
          padding-bottom:5.1rem;
        }
        @media (width <= 640px) {
          padding-bottom:3.6rem;
        }
      }
      .splide__list {
        height:100%;
      }
      .splide__slide {
        display:flex;
        justify-content: center;
        align-items: center;
        height:100%;
        @media (width > 640px) {
          padding-top:4.0rem;
        }
        @media (width <= 640px) {
          padding-top:2.8rem;
        }
      }
      &:not(.is-active) {
        .js-carousel-count-A {
          display:none;
        }
      }
      .js-carousel-count-A {
        @media (width > 640px) {
          margin-top:6.6rem;
          margin-left:auto;
          width:36.0rem;
        }
        @media (width <= 640px) {
          display:grid;
          grid-template-rows:auto auto;
          grid-template-columns:1fr auto;
          row-gap:.4rem;
          margin-top: 4.6rem;
          width:100%;
          position:absolute;
          top:100%;
        }
        .splide__pagination {
          @media (width <= 640px) {
            grid-column:1/-1;
            width:100%;
          }
        }
        .arrows_number {
          @media (width <= 640px) {
            grid-column:2/3;
          }
        }
      }
    }
    .stay-room_name {
      line-height: 1;
      letter-spacing: 0.12em;
      @media (width > 640px) {
        font-size: 1.5rem;
      }
      @media (width <= 640px) {
        font-size: 1.1rem;

      }
    }
  }
  .l-button-C {
    @media (width > 640px) {
      grid-row:2/3;
      grid-column:1/2;
      margin-top: 6.4rem;
    }
    @media (width <= 640px) {
      margin-top:5.6rem;
    }
  }
  .info-twocolumn {
    display: flex;
    @media (width > 640px) {
      grid-row:3/4;
      grid-column:1/2;
      margin-top: 6.4rem;
      gap: 1rem;
    }
    @media (width <= 640px) {
      margin-top:5.6rem;
      flex-direction: column;
      gap: 2rem;
    }
    .l-button-C {
      margin-top: 0;
      @media (width > 640px) {
      }
      @media (width <= 640px) {
      }
    }
  }
}


/* スイート限定サービス
----------------------------------------------------------------------------- */
.stay_room-special {
  position:relative;
  @media (width > 640px) {
    &::before {
      content:"";
      width:50vw;
      height:100%;
      background-color:var(--cc-white-B);
      z-index:-1;
      position:absolute;
      top:0;
      left:calc((50vw - 50.0rem) * -1);
    }
  }
  @media (width <= 640px) {
  }
  .bottom {
    overflow:hidden;
  }
}


/* 特徴
----------------------------------------------------------------------------- */
.stay_room-quality {
  position:relative;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  &::before {
    content:"";
    width:calc(50vw + 20.0rem);
    background-color:var(--cc-gray_back-A);
    position:absolute;
    inset-block:0;
    right:0;
    z-index: -1;
    @media (width <= 640px) {
      width:calc(100% - var(--pi-sp-30));
      top:2.0rem;
    }
  }
  .l-column3-A {
    .column-item {
      @media (width > 640px) {
      }
      @media (width <= 640px) {
        padding-left:var(--pi-sp-30);
      }
    }
    .item-img {
      @media (width <= 640px) {
        margin-bottom:4.8rem;
        margin-left:calc(var(--pi-sp-30) * -2);
      }
    }
  }
}


/* サービス
----------------------------------------------------------------------------- */
.stay_room-service {
  position:relative;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .service-contents {
    @media (width > 640px) {
      display:grid;
      grid-template-rows:1fr auto;
      grid-template-columns:27.4rem 1fr;
      grid-auto-flow:column;
    }
    @media (width <= 640px) {
    }
  };
  .contents-list_wrap {
    @media (width > 640px) {
      grid-row:1/-1;
      grid-column:2/3;
      display:grid;
      grid-template-columns:28.0rem 28.0rem 20.8rem;
      grid-auto-flow:column;
      justify-content: space-between;
      border-left:1px solid var(--cc-gray_line-A);
      padding-left:6.4rem;
    }
    @media (width <= 640px) {
      display:flex;
      align-content: space-between;
      flex-direction: column;
      flex-wrap:wrap;
      height:calc(var(--sp-row) * 1lh + 1px);
    }
  }
  .contents-list {
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      display:contents;
      letter-spacing: .05em;
    }

    > li {
      padding-left:1.5em;
      position:relative;
      @media (width <= 640px) {
        flex-shrink: 0;
        width:50%;
      }

      &.item {
        &::before {
          content:"";
          border-radius:50%;
          width:.5rem;
          height:.5rem;
          background-color:var(--cc-gray_text-A);
          position:absolute;
          left:calc(.755em - .25rem);
          top:calc(.5lh - .25rem);
        }
      }
      &.item-sub {
        &::before {
          content:"-";
        }
      }

    }
  }

  .service-barrier_free {
    @media (width > 640px) {
      display:grid;
      grid-template-columns:36.0rem 1fr;
      grid-auto-flow:column;
      gap:8.0rem;
    }
    @media (width <= 640px) {
    }

    .text {
      @media (width > 640px) {
        display:flex;
        flex-direction: column;
        grid-column:2/3;
      }

      .l-heading-C {
        margin-bottom:3.2rem;
      }
      .text-handle {
        padding:2.0rem 2.4rem;
        @media (width > 640px) {
          display:flex;
          align-items: center;
          margin-top:auto;
          width:fit-content;
        }
        @media (width <= 640px) {
          margin-top:3.2rem;
          padding:1.0rem 1.6rem;
        }
        dt {
          margin-right:2.4rem;
          padding-right:2.4rem;
          position:relative;
          @media (width > 640px) {
            &::after {
              content:"";
              margin-block:auto;
              width:1px;
              background-color:var(--cc-gray_line-A);
              position:absolute;
              inset-block:.3rem;
              right:0;
            }
          }
        }
      }
    }
    .js-carousel-A {
      @media (width > 640px) {
        grid-column:1/2;
      }
      @media (width <= 640px) {
        margin-top:3.2rem;
      }
      .js-carousel-count-A {
        margin-top:1.6rem;
      }
    }
  }
}


/* その他客室
----------------------------------------------------------------------------- */
.stay_room-other {
  position:relative;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    &::before {
      content:"";
      position:absolute;
      background-color:var(--cc-gray_back-A);
      inset-block:0;
      inset-inline:var(--pi-sp-30) 0;
      z-index: -1;
    }
  }

  > .inner {
    @media (width > 640px) {
      display:grid;
      grid-template-columns:36.0rem 1fr;
      grid-auto-flow:column;
      padding-left:10.0rem;
    }
    @media (width <= 640px) {
    }
  }

  .other-contents {
    position:relative;
    @media (width <= 640px) {
      margin-left:var(--pi-sp-30);
    }
  }
  .contents-heading {
    font-size:1.8rem;
    line-height:1;
    letter-spacing: .05em;
    @media (width > 640px) {
      display:flex;
      align-items: center;
      column-gap:3.2rem;
      margin-bottom:5.6rem;

      &:not(:first-child) {
        margin-top:12.0rem;
      }
      &::after {
        content:"";
        flex:1;
        border-bottom:1px solid var(--cc-gray_line-A);
      }
    }
    @media (width <= 640px) {
      margin-top:1.6rem;
      writing-mode:vertical-rl;
      font-size:1.6rem;
      position:absolute;
      left:0;
    }

    > span {
      @media (width > 640px) {
        flex-shrink: 0;
      }
    }
  }
  .contents-list {
    display:grid;
    @media (width > 640px) {
      grid-template-columns:repeat(3, 1fr);
      gap:4.4rem;
    }
    @media (width <= 640px) {
      gap:2.4rem;
      width:20.0rem;
      margin-left:auto;
      &:not(:last-child) {
        margin-bottom:6.4rem;
      }
    }

    .l-button-A {
      gap:0;
      width:100%;

      &.-current {
        pointer-events:none;
        &::after {
          content:none;
        }
        > span {
          opacity:.6;
        }
      }
    }
  }
}


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