@charset "UTF-8";

/* =========================================================
   COCOSHUKU UENO SHIN-OKACHIMACHI / Top
   ---------------------------------------------------------
   構成
   1. Design Tokens（変数）
   2. Base / Reset
   3. Layout（l-）
   4. Components（c-）… 使い回し可能なパーツ
   5. Project（各セクション）
   6. Responsive（SP）

   ※ サイズ指定は基本 rem（html font-size: 62.5% / 1rem = 10px）
   ※ フォント
       英字 : Quasimoda（Regular 400 / SemiBold 600）
       和文 : DNP 秀英角ゴシック銀 Std M（Medium 500）
       → --font-base に英→和の順で並べ、字種ごとに自動で振り分け
   ========================================================= */


/* =========================================================
   1. Design Tokens
   ========================================================= */
:root {
  /* Color */
  --color-bg:      #f2f1ec; /* 全体の背景（ベージュ） */
  --color-text:    #222222; /* 基本テキスト */
  --color-white:   #ffffff;
  --color-accent:  #606060; /* ボタン・グレー系 */
  --color-footer:  #696969; /* フッター背景 */
  --color-line:    #dddddd; /* 罫線 */

  /* Font family */
  --font-en:   "quasimoda", sans-serif;                              /* 英字（Quasimoda） */
  --font-jp:   "dnp-shuei-gothic-gin-std", sans-serif;              /* 和文（秀英角ゴシック銀 Std M） */
  --font-base: "quasimoda", "dnp-shuei-gothic-gin-std", sans-serif; /* 混在用：Latin=Quasimoda / 和文=秀英 */

  /* Font weight */
  --fw-regular:  400; /* Quasimoda Regular */
  --fw-medium:   500; /* 秀英角ゴシック銀 M */
  --fw-semibold: 600; /* Quasimoda SemiBold */

  /* Layout（参考デザイン PC=1280 / SP=390 実測基準） */
  --container:   107rem; /* テキスト列の最大幅 (1070px) */
  --card-pad:    7.5rem; /* 白カードの内側余白 (PC / 75px) */
  --card-w:      calc(var(--container) + var(--card-pad) * 2); /* カード幅 (1220px) */
  --header-h:    8.8rem; /* ヘッダー高さ */
  --gutter:      2.4rem; /* 左右の余白(PC) */
  --gutter-sp:   2.6%;   /* 左右の余白(SP) */
}


.--pc{
  display: block;
}
.--sp{
  display: none;
}
@media (max-width: 1000px) {
  .--pc{
    display: none;
  }
  .--sp{
    display: block;
  }
}

/* =========================================================
   2. Base / Reset
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 62.5%; /* 1rem = 10px */
  -webkit-text-size-adjust: 100%;
  /* overflow-x:hidden はタッチ縦スクロールを壊すため clip を使用 */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: var(--fw-regular);
  font-size: 1.5rem; /* 参考デザイン本文 15px */
  line-height: 1.9;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: clip;
  letter-spacing: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, p, dl, dd, dt {
  margin: 0;
}


/* =========================================================
   3. Layout
   ========================================================= */
/* 中央寄せコンテナ
   縮小時の内容列を intro__card / location__card と同じ位置に揃える。
   （カード＝ .intro の gutter + カード内側 --card-pad の二段インセットと等価）
     ・内容列幅 = --container（107rem）
     ・左右インセット = --gutter + --card-pad（= 9.9rem） */
.l-container {
  width: 100%;
  max-width: calc(var(--card-w) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: calc(var(--gutter) + var(--card-pad));
}


/* =========================================================
   4. Components（使い回し可能なパーツ）
   ========================================================= */

/* --- c-btn : 角丸ピルボタン -------------------------------
   modifier
     --book  : 予約ボタン（グレー塗り + アイコン）
     --ghost : 枠線スタイル（白背景） */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  min-height: 6rem;
  padding: 0 3.2rem;
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: var(--fw-regular);
  line-height: 1;
  border-radius: 99.9rem;
  transition: opacity .3s ease;
}
.c-btn:hover { opacity: .8; }

.rooms .c-btn--book{
  min-width: 24rem;
}
.c-btn__icon img {
  width: 2.4rem;
}

.c-btn--book {
  color: var(--color-white);
  background: var(--color-accent);
  font-weight: var(--fw-semibold);
  font-size: 1.7rem; /* BOOK NOW 17px */
}

.c-btn--ghost {
  color: var(--color-text);
  background: var(--color-white);
  font-weight: var(--fw-semibold);
  min-height: 4rem;
}


/* --- c-section-title : セクション見出し -------------------
   modifier --sm : 客室内の小見出し用
   ※ 英字=Quasimoda SemiBold / 和文=秀英 M を字種で自動振り分け */
.c-section-title {
  font-family: var(--font-base);
  font-weight: var(--fw-semibold);
  font-size: 2.4rem;
  line-height: 1.2;
  color: var(--color-text);
}
.c-section-title--sm {
  font-size: 2.4rem;
}


/* --- c-list : ○マーカー付きリスト ------------------------- */
.c-list li {
  position: relative;
  padding-left: 2rem;
  line-height: 2;
}
.intro__feat--en .c-list li,
.intro__feat--ja .c-list li{
  font-weight: var(--fw-semibold);
}
.c-list li::before {
  content: "";
  position: absolute;
  top: .85em;
  left: 0;
  width: .7rem;
  height: .7rem;
  border: .1rem solid currentColor;
  border-radius: 50%;
}


/* --- c-bilingual : 英語／日本語の2カラムレイアウト --------
   .c-bilingual__en / .c-bilingual__ja を左右に並べる。
   SPでは縦積み（英語→日本語）になる。
   英=Quasimoda Regular / 和=秀英 M の太さを列単位で指定。 */
.c-bilingual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem 6.4rem;
}
.c-bilingual__en dt{
  font-weight: 600;
}
.c-bilingual__ja { font-weight: var(--fw-medium); }
/* 和文見出し・ラベルは秀英 M に統一（英字側は600のまま） */
.c-bilingual__ja .c-section-title,
.c-bilingual__ja .c-table__head { 
  font-weight: bold; 
}


/* --- c-table : 2カラムの罫線テーブル ----------------------- */
.c-table {
  border-top: .1rem solid var(--color-line);
}
.c-table__row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 2rem;
  padding: 2.2rem 0;
  border-bottom: .1rem solid var(--color-line);
}
.c-table__head {
  font-weight: bold;
}


/* --- inview : スクロール表示アニメーション -----------------
   ブランドサイト(cocoshuku.com)と同様のふわっと表示。
   ・JS有効時(html.js)のみ初期非表示 → JSが落ちても内容は見える
   ・一度表示したら is-view を付けたまま（戻り再生なし）
   ・data-inview-delay="ms" で時差表示（JSが transition-delay に反映） */
.js .inview {
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity .7s ease, transform .7s ease;
}
.js .inview.is-view {
  opacity: 1;
  transform: translateY(0);
}
/* 画像用：フェード＋わずかに拡大した状態から等倍へ（親でクリップし、はみ出し防止）
   ※ フェードは短め（空白の時間を最小に）、ズームだけゆっくり残す */
.js .inview-img {
  overflow: hidden;
}
.js .inview-img img {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity .8s ease, transform 1.4s cubic-bezier(.22, .61, .36, 1);
}
.js .inview-img.is-view img {
  opacity: 1;
  transform: scale(1);
}
/* スライダーのインジケーターも画像と一緒にフェードイン
   （画像より先にドットだけ見えて動く「ズレ」防止） */
.js .inview-img .swiper-pagination {
  opacity: 0;
  transition: opacity .8s ease;
}
.js .inview-img.is-view .swiper-pagination {
  opacity: 1;
}
/* OSの「動きを減らす」設定を尊重（KVファーストビュー含む） */
@media (prefers-reduced-motion: reduce) {
  .js .inview,
  .js .inview-img img,
  .js .kv__bg img,
  .js .kv__catch,
  .js .kv__lead,
  .js .header,
  .js .kv__scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* =========================================================
   5. Project
   ========================================================= */

/* --- Header --------------------------------------------- */
/* ヘッダー本体（ロゴ）はページ最上部に絶対配置し、スクロールで一緒に流れて消える。
   固定追従するのは .header__nav（Brand Website / BOOK NOW）だけ。 */
.header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  /* KVに重なる白文字 */
  color: var(--color-white);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: var(--gutter);
}
.header__logo{
  display: flex;
  align-items: center;
  gap: 3rem;
}
.header__logo-name {
  display: block;
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  width: 26rem;
  line-height: 1.05;
}
.header__logo-area {
  display: block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.6rem; /* UENO SHIN-OKACHIMACHI 16px */
  line-height: 1;
}
/* ボタン群のみ画面に固定追従（ロゴはスクロールで流れて消える） */
.header__nav {
  position: fixed;
  top: 0;
  right: var(--gutter);
  z-index: 101;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.header__nav .c-btn--book{
  width: 22rem;
}


/* --- KV --------------------------------------------------- */
.kv {
  position: relative;
  height: 100svh;
  max-height: 100rem;
  padding-top: var(--header-h);
  color: var(--color-white);
  overflow: hidden;
}
.kv::before{
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  /* デザインアセット(SVG)準拠：黒の縦グラデ（下50% → 上30%） */
  background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, .3));
}
.kv__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.kv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- KV ファーストビュー登場アニメーション -----------------
   ロード完了（html.is-loaded）で再生。
   背景ゆっくりズームアウト → キャッチ → リード → ヘッダー/Scroll の時差フェード */
.js .kv__bg img {
  opacity: 0;
  transform: scale(1.06);
  /* フェードは短く（グレーだけの時間を最小に）、ズームだけゆっくり残す */
  transition: opacity .7s ease, transform 2.4s cubic-bezier(.22, .61, .36, 1);
}
.js .kv__catch {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 1s ease .5s, transform 1s ease .5s;
}
.js .kv__lead {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 1s ease .75s, transform 1s ease .75s;
}
.js .header {
  opacity: 0;
  transition: opacity 1s ease .9s;
}
.js .kv__scroll {
  opacity: 0;
  transition: opacity 1s ease 1.2s;
}
.js.is-loaded .kv__bg img {
  opacity: 1;
  transform: scale(1);
}
.js.is-loaded .kv__catch,
.js.is-loaded .kv__lead {
  opacity: 1;
  transform: translateY(0);
}
.js.is-loaded .header,
.js.is-loaded .kv__scroll {
  opacity: 1;
}
.kv__inner {
  position: relative;
  z-index: 99;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 0 var(--gutter);
  /* 下寄せレイアウト */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-height: 100rem;
  height: 100%;
  /* Introカードが下から8rem重なるため、リード文が隠れないよう余白を確保 */
  padding-bottom: 12rem;
}
.kv__catch {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 5.4rem;
  line-height: 1.5;
  margin-bottom: 4rem;
}
.kv__lead-title {
  font-size: 3.2rem;
  line-height: 1.6;
  margin-bottom: 1.6rem;
  font-weight: var(--fw-semibold);
}
.kv__lead-text {
  font-size: 1.8rem;
  font-weight: var(--fw-semibold);
}

.c-bilingual__ja .kv__lead-title,
.c-bilingual__ja .kv__lead-text{
  font-weight: bold;
}
/* KV内のbilingualは余白を詰める */
.kv__lead { gap: 2.4rem 6.4rem; }

/* 縦書き Scroll インジケーター（クリックで下へスムーススクロール） */
.kv__scroll {
  position: absolute;
  right: 3.2rem;
  bottom: 7rem;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  z-index: 99;
}
.kv__scroll-text {
  font-family: var(--font-en);
  font-weight: var(--fw-regular);
  font-size: 1.3rem;
  writing-mode: vertical-rl;
  transition: opacity .3s ease;
}
.kv__scroll:hover .kv__scroll-text { opacity: .6; }

/* 縦線（トラック）＋ 上から下へ流れるハイライト */
.kv__scroll-line {
  position: relative;
  display: block;
  width: .1rem;
  height: 18rem;
  /* トラックは半透明に（opacity を使うと子のドットまで薄くなり
     流れるハイライトが見えなくなるため、背景色で透過させる） */
  background: color-mix(in srgb, currentColor 30%, transparent);
  overflow: hidden;
}
.kv__scroll-line-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 45%;
  background: currentColor;
  animation: kv-scroll-flow 2s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes kv-scroll-flow {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(222%); }
}
@media (prefers-reduced-motion: reduce) {
  .kv__scroll-line-dot { animation: none; }
}


/* --- Intro（白カード） ------------------------------------ */
.intro {
  /* KVに重なるように引き上げ */
  margin-top: -4rem;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 2;
}
.intro__card {
  /* 参考: カード幅1220px / 内側余白75px → 内容列は本文列(1070px)に揃う */
  max-width: var(--card-w);
  margin-inline: auto;
  background: var(--color-white);
  border-radius: 2.4rem;
  padding: 6.4rem var(--card-pad);
}
/* intro__grid : 1グリッドで PC/SP の並びを出し分ける（HTML構造は共通）
   PC … 行グループ：[英リード｜和リード] / 罫線 / [FEATURES｜特徴] */
.intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6.4rem;
  grid-template-areas:
    "lead-en lead-ja"
    "divider divider"
    "feat-en feat-ja";
}
.intro__lead--en { grid-area: lead-en; }
.intro__lead--ja { grid-area: lead-ja; }
.intro__feat--en { grid-area: feat-en; }
.intro__feat--ja { grid-area: feat-ja; }
.intro__divider  { grid-area: divider; }

.intro__lead {
  font-size: 1.5rem;
  line-height: 2;
}
.intro__divider {
  width: 100%;
  height: .1rem;
  border: 0;
  margin: 4.8rem 0;
  /* PC: 中央の列間(6.4rem)だけ透明にして左右2本に分割
     （transparent 範囲 = column-gap 6.4rem を中央に） */
  background: linear-gradient(
    to right,
    var(--color-line) 0 calc(50% - 3.2rem),
    transparent calc(50% - 3.2rem) calc(50% + 3.2rem),
    var(--color-line) calc(50% + 3.2rem) 100%
  );
}
.intro__feat .c-list {
  margin-top: 2rem;
  font-size: 1.6rem; /* 特徴リスト 16px */
}


/* --- Illustration band ------------------------------------ */
.illust-band {
  margin-top: -4rem; /* 参考: 白カード下に約40pxの余白 */
}
.illust-band img {
  width: 100%;
  object-fit: cover;
}
/* ページネーション（右下ドット / スタイルは Location と共通） */
.illust-band__pagination.swiper-pagination {
  position: absolute;
  right: 2rem;
  bottom: 1.5rem;
  top: auto;
  left: auto;
  width: auto;
  display: flex;
  gap: 0.4rem;
  z-index: 5;
}


/* --- Rooms ------------------------------------------------ */
.rooms {
  padding: 6.4rem 0 9.6rem;
}
.rooms__title {
  font-size: 3.6rem;
  margin-bottom: 3rem;
}
.rooms__desc {
  font-size: 1.5rem;
}
.rooms__book {
  margin-top: 4.8rem;
}
.rooms__detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6.4rem;
  margin-top: 9.6rem;
}
.rooms__image {
  border-radius: 1.2rem; /* inview-img のクリップ用（img と同radius） */
}
.rooms__image img {
  width: 100%;
  border-radius: 1.2rem;
}
.rooms__specs {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
}
.spec-group {
  gap: 2.4rem 6.4rem;
}
.spec-group .c-list {
  margin-top: 1.5rem;
}


/* --- Location Slider -------------------------------------- */
.location {
  position: relative;
}
/* 画像スライダー本体（画像だけがフェードで切り替わる） */
.location__slider {
  width: 100%;
}
/* フェード時はスライドが重なるため高さを明示して潰れを防ぐ */
.location__slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ページネーション（右上ドット） */
.location__pagination.swiper-pagination {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  left: auto;
  bottom: auto;
  width: auto;
  display: flex;
  gap: 0.4rem;
  z-index: 5;
}
/* 非アクティブ = 白の輪郭（中空）丸 / アクティブ = 白塗り丸
   ※ illust-band のドットも同スタイルを共有 */
.location__pagination .swiper-pagination-bullet,
.illust-band__pagination .swiper-pagination-bullet {
  width: 1rem;
  height: 1rem;
  margin: 0 !important;
  background: transparent;
  border: .1rem solid var(--color-white);
  opacity: .7;
  transition: background-color .3s ease, opacity .3s ease;
}
.location__pagination .swiper-pagination-bullet-active,
.illust-band__pagination .swiper-pagination-bullet-active {
  background: var(--color-white);
  opacity: 1;
}

/* 施設情報カード（スライダーとは独立 / 画像下に重ねて固定） */
.location__card {
  position: relative;
  margin-top: -4rem; /* スライダー下端に重ねる */
  z-index: 3;
}
.location__card .l-container {
  max-width: var(--card-w);
  background: var(--color-white);
  border-radius: 2.4rem;
  padding: 5rem var(--card-pad);
}
.location__name {
  font-family: var(--font-base);
  font-weight: var(--fw-semibold);
  font-size: 2.4rem;
  margin-bottom: 2.8rem;
}
.c-bilingual__ja .location__name{
  font-weight: bold;
}
.location__address,
.location__tel {
  font-size: 1.5rem;
  line-height: 1.8;
}
.location__time {
  margin-top: 2.8rem;
  font-size: 1.5rem;
}
.location__map {
  text-decoration: underline;
}


/* --- Access ----------------------------------------------- */
.access {
  padding: 8rem 0 10rem;
}
/* 見出しと表の間に余白を確保（罫線が見出しに密着しないように） */
.access .c-section-title {
  margin-bottom: 2.4rem;
  font-weight: 600;
}
.c-bilingual__ja .c-section-title{
  font-weight: bold;
}


/* --- Footer ----------------------------------------------- */
.footer {
  background: var(--color-footer);
  color: var(--color-white);
}
.footer__inner {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 2.8rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.footer__copy {
  font-size: 1.3rem;

}
.footer__privacy {
  position: absolute;
  right: var(--gutter);
  font-size: 1.3rem;
  text-decoration: underline;
}


/* --- SP固定予約ボタン（PCでは非表示） --------------------- */
.book-fixed {
  display: none;
}


/* =========================================================
   6. Responsive（SP : 〜1000px）
   ※ ブレイクポイントは慣例どおり px 指定
   ========================================================= */
@media (max-width: 1000px) {
  :root {
    --header-h: 6.4rem;
  }

  body {
    font-size: 1.4rem; /* 参考SP本文 14px */
  }

  /* SPは画面が小さくズームが感じにくいため、動きを強め＆ゆっくりに
     （フェードは短いまま、ズームだけ1.8sに） */
  .js .inview-img img {
    transform: scale(1.12);
    transition: opacity .8s ease, transform 1.8s cubic-bezier(.22, .61, .36, 1);
  }

  .l-container {
    padding-inline: 5.2%;
  }

  /* bilingual は縦積み（英語→日本語）。
     ※ KVリードと設備リストは参考どおりSPでも2カラム維持（下で個別指定） */
  .c-bilingual {
    grid-template-columns: 1fr;
    gap: 2.8rem;
  }

  .c-list li{
    padding-left: 1.5rem;
  }

  .access .c-section-title{
    margin-bottom: 2rem;
  }

  .c-section-title { font-size: 2rem; } /* FEATURES / Access / AMENITIES 等 20px */
  .c-section-title--sm { font-size: 2rem; }

  .c-table__row {
    grid-template-columns: 7.5rem 1fr;
    gap: 1.5rem;
    padding: 1.6rem 0;
  }

  /* Header : SPはロゴ + Brand Website のみ（予約は画面下に固定） */
  .header__inner { 
    align-items: start;
    margin-top: 2rem;
    padding-inline: var(--gutter-sp);
  }
  .header__logo{
    flex-direction: column;
    gap: 1rem;
    align-items: start;
    width: 17.5rem;
  }
  .header__logo-name { 
    width: 17.5rem;
    line-height: 1;
  }
  .header__logo-area { 
    font-size: 1.2rem; 
  }
  .header__nav {
    gap: 1rem;
    height: auto;
    right: var(--gutter-sp);
  }
  .header__book { display: none; }
  .c-btn--ghost {
    min-height: 4rem;
    padding: 0 2rem;
    right: 2rem;
    font-size: 1.4rem;
    margin-top: 2rem;
  }


  /* KV */
  /* カード重なり(8rem) + 固定予約ボタン(約8rem)を避ける余白 */
  .kv{
    max-height: 80rem;
  }
  .kv__inner { 
    padding-bottom: 9rem; 
    max-height: 80rem;
    padding: 0 5.2% 9rem;
  }
  .kv__catch { 
    font-size: 3.4rem; 
    margin-bottom: 2.8rem; 
  }
  /* KVのリードは参考どおりSPでも英日2カラムを維持（他セクションは縦積み） */
  .kv__lead {
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem 1.6rem;
  }
  .kv__lead-title { 
    font-size: 1.8rem; 
    line-height: 2; 
    margin-bottom: 1rem; 
  }
  .kv__lead-text { font-size: 1.4rem; }
  .kv__scroll { 
    right: 4.1%; 
    top: 30%; 
  }
  .kv__scroll-line {
    height: 15rem;
  }

  /* Intro（カードは参考どおり左右10px余白 / 内側20px） */
  .intro { padding-inline: 2.6%; }
  .intro__card {
    border-radius: 1.6rem;
    padding: 4.5rem 5.2% 5rem;
  }

  .intro__lead{
    font-size: 1.4rem;
  }
  /* SP … 言語グループ：[英リード→FEATURES] / 罫線 / [和リード→特徴] */
  .intro__grid {
    grid-template-columns: 1fr;
    row-gap: 3rem;
    grid-template-areas:
      "lead-en"
      "feat-en"
      "divider"
      "lead-ja"
      "feat-ja";
  }
  /* SPは縦積み（英語群/日本語群の区切り）なので1本の実線に戻す */
  .intro__divider {
    margin: 1rem 0;
    background: var(--color-line);
  }
  .intro__feat .c-list { font-size: 1.5rem; } /* 特徴リスト SP 15px */

  /* Rooms */
  .rooms { 
    padding: 4rem 0 5.5rem; 
  }
  .rooms__title { 
    font-size: 2.4rem; 
    margin-bottom: 2rem;
  } /* 参考: ROOMS は SP で 24px */
  .rooms__detail {
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 5.6rem;
  }
  .rooms__desc{
    font-size: 1.4rem;
  }
  /* 設備（アメニティ/備品）は参考どおりSPでも2カラム維持 */
  .spec-group {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.6rem;
  }

  /* Location */
  .location__pagination.swiper-pagination {
    top: 1.8rem;
    right: 2rem;
  }
  /* Illustration band（右下） */
  .illust-band__pagination.swiper-pagination {
    bottom: 1.8rem;
    right: 2rem;
  }
  .location__card { margin-top: -3.2rem; }
  .location__card .l-container {
    border-radius: 1.6rem;
    padding: 3.6rem 5.2%;
    margin-inline: 2.6%; /* 参考どおり左右10px余白 */
    width: auto;
  }
  .location__name {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  /* SP: 縦積みになる施設情報の 英/和 の間に区切り罫線を入れる
     （c-bilingual の gap 4rem と padding-top 4rem で上下を均等に） */
  .location__info .c-bilingual__ja {
    border-top: .1rem solid var(--color-line);
    padding-top: 4rem;
  }

  /* Access */
  .access { 
    padding: 4.5rem 0 8.5rem; 
  }

  /* Footer */
  .footer__inner {
    flex-direction: column;
    gap: 1.6rem;
    padding: 2.5rem var(--gutter-sp) 10rem; /* 固定ボタン分の余白 */
    text-align: center;
  }
  .footer__copy { 
    font-size: 1.2rem;
    line-height: 2; 
  }
  .footer__privacy {
    position: static;
    font-size: 1.3rem;
  }

  /* SP固定予約ボタン（画面下に常時表示） */
  .book-fixed {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 90;
    width: calc(100% - 7.7%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    min-height: 6rem;
    font-family: var(--font-en);
    font-weight: 500;
    font-size: 1.7rem;
    color: var(--color-white);
    background: var(--color-accent);
    border-radius: 99.9rem;
    box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .2);
  }
  .book-fixed .c-btn__icon img { 
    width: 2.4rem;
  }
  .rooms__specs{
    gap: 3rem;
  }

  .illust-band{
    margin-top: -2rem;
  }
  .rooms .c-btn--book{
    min-width: 22rem;
    margin-top: 3rem;
  }
}