@charset "UTF-8";
/* ==============================================
   ROOMS ARCHIVE
   ============================================== */
.p-rooms__intro {
  background: var(--c-beige);
  color: var(--c-dark);
  padding: 11.3rem 0 12.2rem;
}
.p-rooms__intro-texts {
  margin-top: 3rem;
}
.p-rooms__list {
  background-color: #1f3134;
  padding: 12rem 0 14rem;
}
.p-rooms__list-header {
  margin-bottom: 4rem;
}

@media (max-width: 1000px) {
  .p-rooms__intro {
    padding: 6.3rem 0 6.3rem;
  }
  .p-rooms__list {
    padding: 6.3rem 0 7.5rem;
  }
  .p-rooms__list-header {
    margin-bottom: 3.6rem;
  }
}

/* ==============================================
   ROOMS SINGLE
   ============================================== */
.p-room-single {
  background-color: #1f3134;
}
.p-room-single__header {
  padding: 36.7rem 0 5.8rem;
}
.p-room-single__title {
  font-size: 4.8rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.05em;
  color: #fff;
}
.p-room-single__subtitle {
  margin-top: 1.4rem;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  color: #fff;
}

/* ギャラリー（中央拡大スライダー） */
.p-room-single__gallery {
  position: relative;
}
.p-room-single__swiper {
  width: 100%;
  overflow: hidden;
}
.p-room-single__swiper:not(.swiper-initialized) {
  /* Swiper初期化前（=中央寄せ位置への移動・スライド複製が未反映の生レイアウト）が
     一瞬見えてしまうのを防ぐ。高さはswiper-slideのCSS指定で確保済みのため
     visibility:hiddenでもレイアウト崩れ（CLS）は発生しない */
  visibility: hidden;
}
.p-room-single__swiper .swiper-slide {
  width: auto; /* 画像ごとの比率に応じて幅が変わる。spaceBetween(JS側)でスライド間の間隔は常に一定 */
  height: 39.0625vw; /* 高さは固定（1280pxで約500pxになる比率。旧: 幅58.59375vw × 3:2クロップ時の高さと同じ） */
}
.p-room-single__swiper .swiper-slide img {
  width: auto;
  height: 100%;
  display: block;
}


/* 本文 + 客室情報 / 間取り図 */
.p-room-single__body {
  display: flex;
  gap: 8rem;
  margin-top: 6rem;
}
.p-room-single__main {
  flex: 1;
  min-width: 0;
  width: calc(100% - 37% - 8rem);
}
.p-room-single__plan {
  flex-shrink: 0;
  width: 37%;
  padding: 3.5% 4%;
}
.p-room-single__plan img {
  width: 100%;
  height: auto;
  display: block;
}
.p-room-single__info-title {
  margin-top: 5.5rem;
  font-size: 2.8rem;
  line-height: 1.53;
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* 設備セクション */
.p-room-single__equip {
  padding: 5.4rem 0 0;
}
.p-room-single__equip-title {
  font-size: 2.8rem;
  line-height: 1.53;
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.05em;
}
.p-room-single__btn {
  margin-top: 5.5rem;
}

/* その他の客室 */
.p-room-single__others {
  padding: 11.4rem 0 14rem;
}
.p-room-single__others-title {
  margin-bottom: 4.3rem;
}

@media (max-width: 1000px) {
  .p-room-single__header {
    padding: 26.1rem 0 4.5rem;
  }
  .p-room-single__title {
    font-size: 2.4rem;
    line-height: 1.65;
  }
  .p-room-single__subtitle {
    margin-top: 0.7rem;
    font-size: 1.6rem;
  }
  .p-room-single__body {
    flex-direction: column;
    gap: 4rem;
    margin-top: 4.2rem;
  }
  .p-room-single__main {
    width: 100%;
  }
  .p-room-single__plan {
    width: 100%;
  }
  .p-room-single__info-title {
    margin-top: 3rem;
    font-size: 2.2rem;
  }
  .p-room-single__equip-title {
    font-size: 2.2rem;
  }
  .p-room-single__equip {
    padding: 4.2rem 0 0;
  }
  .p-room-single__btn {
    margin-top: 4rem;
  }
  .p-room-single__others {
    padding: 5.4rem 0 7.6rem;
  }
  .p-room-single__others-title {
    margin-bottom: 3.3rem;
  }
}

@media (max-width: 750px) {
  .p-room-single__swiper .swiper-slide {
    height: 55.33vw; /* 83vw × 2/3（旧幅とクロップ比から算出） */
  }
}