/* ============================================================
   top.css — TOPページ固有
   ============================================================ */

/* ---- HERO ---- */
.hero { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: center; justify-content: center; color: var(--c-white); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -2; --hero-fade: 2.2s; }
.hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  /* 退場側：入場側が完全に覆いきるまで不透明のまま待ってから消える。
     両方が同時に半透明になる瞬間が無いので、切り替わりの中間で暗く沈まない。 */
  transition: opacity 0s linear var(--hero-fade); }
.hero__bg img.is-active { opacity: 1; z-index: 1;
  /* 入場側は上に重ねてゆっくり現れる。ease-in-out＝前半に一気に立ち上がらない */
  transition: opacity var(--hero-fade) ease-in-out 0s;
  animation: heroZoom 12s linear forwards; }
@media (prefers-reduced-motion: reduce) {
  .hero__bg img { transition: none; }
  .hero__bg img.is-active { animation: none; }
}
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(10,18,14,0.35), rgba(10,18,14,0.15) 40%, rgba(10,18,14,0.55)); }
/* 等速のゆるやかなパン。切替時に JS が現在の拡大率を固定するため途中で戻らない */
/* 2026.09.17 修正依頼「全体的にアップすぎる。楽天と同じ引きで」：寄りの動きを 1.08→1 から 1.03→1 に弱め、
   写真は建物全体が入るよう中央合わせに（横長の画面では 3:2 の写真の上下が切れるのは避けられない） */
@keyframes heroZoom { from { transform: scale(1.03); } to { transform: scale(1); } }
.hero__inner { text-align: center; animation: heroFade 1.6s var(--ease) 0.3s both; }
@keyframes heroFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero__mark { width: 76px; height: 76px; margin: 0 auto 1.2em; }
.hero__ttl { font-family: var(--f-en); font-weight: 500; font-size: clamp(1.8rem, 5.2vw, 3.6rem); letter-spacing: 0.12em; margin: 0; }
.hero__sub { font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.7rem); letter-spacing: 0.2em; margin-top: 0.2em; opacity: 0.92; }
.hero__logo { margin: 0; line-height: 0; }
.hero__logo img { width: min(440px, 66vw); height: auto; }
.hero__scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); font-family: var(--f-en-sans); font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; padding-bottom: 52px; }
.hero__scroll::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 1px; height: 40px; background: rgba(255,255,255,0.7); animation: scrollLine 2s ease-in-out infinite; transform-origin: top; }
@keyframes scrollLine { 0%,100% { transform: scaleY(0.3); opacity: 0.4;} 50% { transform: scaleY(1); opacity:1; } }

/* ---- 重要なお知らせのバナー（2026.09.30）----
   メインビジュアル直下の帯。お知らせに important-notice の記事があるときだけ front-page.php が出す。
   深緑地＋金のラベルでサイトの配色に合わせつつ、本文より一段濃く見えるようにしている。 */
.alert-bar {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 26px);
  padding: clamp(14px, 1.8vw, 20px) var(--gut);
  background: var(--c-forest-deep); color: var(--c-white);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  transition: 0.4s var(--ease);
}
.alert-bar:hover { background: var(--c-forest); }
.alert-bar__label {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 0.1em;
  padding: 0.5em 1.1em; border: 1px solid var(--c-gold); color: var(--c-gold-light);
  font-family: var(--f-ja); font-size: 0.86rem; letter-spacing: 0.1em; line-height: 1.3;
}
.alert-bar__label small { font-family: var(--f-en-sans); font-size: 0.62rem; letter-spacing: 0.14em; opacity: 0.85; }
.alert-bar__text { flex: 1 1 auto; font-size: 0.92rem; line-height: 1.7; }
.alert-bar__text small { display: block; font-family: var(--f-en-sans); font-size: 0.72rem; letter-spacing: 0.06em; opacity: 0.7; margin-top: 0.2em; }
.alert-bar__more {
  flex: none; display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--f-ja); font-size: 0.82rem; letter-spacing: 0.1em; color: var(--c-gold-light);
}
.alert-bar__more::after { content: ""; width: 24px; height: 1px; background: currentColor; transition: 0.4s var(--ease); }
.alert-bar:hover .alert-bar__more::after { width: 34px; }
/* キャンペーンの帯（2026.10.19 九州ふっこう応援割）。ラベルの枠の代わりにロゴを置く。
   ロゴの幅を「重要なお知らせ」の枠と揃え、文言の書き出し位置を上の帯と合わせる */
.alert-bar__label { min-width: 9.2rem; }
.alert-bar__logo { flex: none; width: 9.2rem; display: flex; justify-content: center; }
.alert-bar__logo img { width: 6.6rem; height: auto; }
.alert-bar--campaign { padding-block: clamp(10px, 1.2vw, 14px); }
@media (max-width: 760px){
  .alert-bar { flex-wrap: wrap; gap: 10px 14px; padding-block: 14px; }
  .alert-bar__label { padding: 0.4em 0.8em; font-size: 0.78rem; min-width: 0; }
  .alert-bar__text { flex: 1 1 100%; order: 3; font-size: 0.86rem; }
  .alert-bar__more { margin-left: auto; font-size: 0.78rem; }
  .alert-bar__logo { width: auto; }
  .alert-bar__logo img { width: 5.6rem; }
}
/* ---- CONCEPT ---- */
.concept { padding-block: clamp(70px, 11vw, 150px); }
.concept__grid { display: grid; grid-template-columns: 200px 1fr; gap: clamp(20px, 5vw, 70px); }
.concept__label { position: relative; padding-left: 1.6em; }
.concept__bracket { position: absolute; left: 0; top: -0.4em; width: 36px; height: 130px; border-left: 1px solid var(--c-gold); border-top: 1px solid var(--c-gold); border-bottom: 1px solid var(--c-gold); }
.concept__catch { font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 500; line-height: 1.7; letter-spacing: 0.08em; margin: 0 0 1.4em; color: var(--c-gold); }
/* 狭い画面で「…新しい滞在。」の最後の1〜2文字だけが次行に落ちるため、少し詰める */
@media (max-width: 430px){ .concept__catch { font-size: 1.34rem; letter-spacing: 0.04em; } }
.concept__body p { font-size: 0.96rem; line-height: 2.3; opacity: 0.92; max-width: 40em; }
.concept__body p + p { margin-top: 1.6em; }
@media (max-width: 760px){
  .concept__grid { grid-template-columns: 1fr; gap: 1.6em; }
  /* 罫は「CONCEPT」のラベルだけを囲む高さにする。130px のままだと1カラム時に
     下のキャッチコピーへ食い込んで重なる（2026.09.10 修正依頼「納まりよく」） */
  .concept__label { line-height: 1; padding-top: 0.3em; padding-bottom: 0.3em; }
  .concept__bracket { top: 0; height: 100%; width: 24px; }
  .concept__catch { font-size: clamp(1.28rem, 5.6vw, 1.5rem); letter-spacing: 0.06em; line-height: 1.75; }
}

/* ---- DISCOVER onsen ---- */
.discover__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.discover__media { display: flex; flex-direction: column; }
.discover__ttl { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 500; line-height: 1.06; color: var(--c-forest); margin: 0 0 0.8em; }
.discover__lead { font-size: 0.93rem; line-height: 2.2; color: var(--c-ink-soft); margin-bottom: 2em; }
.discover__thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 2.4em; max-width: 320px; }
.discover__thumbs img { aspect-ratio: 1/1; object-fit: cover; }
/* figure のブラウザ既定マージン（1em 40px）を打ち消す。
   これが残ると画像が見出しより 16px 下がり、幅も列より 80px 狭くなる。 */
.discover__main, .view__main { margin: 0; }
.discover__main img { aspect-ratio: 4/3.2; object-fit: cover; }
.discover__more { position: relative; margin-top: 1.6em; display: flex; align-items: center; justify-content: center; gap: 0.7em; border: 1px solid var(--c-forest); padding: 1.15em 1.4em; font-family: var(--f-ja); font-size: 0.98rem; letter-spacing: 0.04em; color: var(--c-forest); transition: 0.4s var(--ease); }
.discover__more:hover { background: var(--c-forest); color: #fff; }
.discover__more-ja { font-family: var(--f-en-sans); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--c-gold); }
.discover__more i { position: absolute; right: 1.3em; font-style: normal; font-size: 1.15em; line-height: 1; }
/* 1カラムでは見出しを先に出す。メディア側に「愉しみ方」の本文まで入っているため、
   画像を先頭に回すと見出しより先に説明文が来て読み順が崩れる。 */
@media (max-width: 820px){
  .discover__grid { grid-template-columns: 1fr; row-gap: 0; }
  /* 1カラム時の並びを「見出し → 本文 → 大きい写真 → 小さい写真2枚 → 温泉の愉しみ方」にする。
     小さい2枚は本文側、大きい写真は右カラム側の要素なので、2つのカラム枠を display:contents で
     ほどいて grid の直下に並べ、order で順番を決める（2026.09.10 修正依頼）。 */
  .discover__text, .discover__media { display: contents; }
  .discover__grid > .discover__text > .eyebrow { order: 1; }
  .discover__ttl   { order: 2; }
  .discover__lead  { order: 3; }
  .discover__main  { order: 4; margin-bottom: 14px; }
  .discover__thumbs { order: 5; max-width: none; margin-top: 0; margin-bottom: 2.4em; gap: 14px; }
  /* 2026.10.13 修正依頼：温泉の注記と「客室を見る」を、小さい写真2枚の下・「温泉の愉しみ方」の前へ
     （order が無いと 0 扱いでセクションの先頭に出ていた） */
  .discover__note { order: 6; }
  .discover__detail { order: 7; }
}

/* ---- DISCOVER breakfast（2026.09.29 追加）----
   組みは View と同じ（写真左・本文右）なので view__* のCSSを共用し、違うところだけ上書きする。 */
.breakfast .view__main img { object-position: 50% 50%; }
/* 温泉セクションの注記と「客室を見る」（2026.09.29 追加） */
/* 2026.10.13 修正依頼「間隔をもう少し詰めて」：注記の上に grid の行間（最大70px）と margin（40px）が重なっていたので、
   行間をなくして margin だけにする */
.discover__grid { row-gap: 0; }
.discover__note { grid-column: 1 / -1; margin-top: clamp(24px, 3vw, 40px); }
.discover__note p { font-size: 0.86rem; line-height: 1.9; color: var(--c-ink-soft); margin: 0 0 1.4em; }
/* スマホは小さい写真2枚（margin-bottom 2.4em）のすぐ下に来るので上の余白は不要 */
@media (max-width: 820px){ .discover__note { margin-top: 0; margin-bottom: 2.4em; } }
/* ---- DISCOVER view ---- */
.view__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.view__main img { aspect-ratio: 4/3.2; object-fit: cover; }
.view__ttl { font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 500; line-height: 1.08; color: var(--c-forest); margin: 0 0 0.8em; }
.view__lead { font-size: 0.93rem; line-height: 2.2; color: var(--c-ink-soft); }
/* サムネは主画像の直下に並ぶので、幅は画像に合わせる（本文側にあった頃の 320px 上限は撤去） */
.view__thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.view__thumbs img { aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 820px){ .view__grid { grid-template-columns: 1fr; } .view__text { order: -1; } }

/* ---- DISCOVER / VIEW：左右カラムの上端・下端を揃える（クライアント指示「高さを揃える」）----
   上端＝画像の頭を見出し（Onsen Experience / The Japanese…）の頭に合わせる。
   見出しの上マージンを撤去して eyebrow 側へ移し、メディア側に同じ eyebrow を
   visibility:hidden で置くことで、数値をハードコードせずに厳密に揃う。
   下端＝テキスト側のサムネを margin-top:auto で底へ落とし、メディア側は主画像に余りを吸わせる。
   1カラムになるモバイルでは適用しない。 */
.discover__grid .eyebrow, .view__grid .eyebrow { margin: 0 0 1.5rem; }
.discover__ghost, .view__ghost { visibility: hidden; }
@media (max-width: 820px) { .discover__ghost, .view__ghost { display: none; } }
@media (min-width: 821px) {
  .discover__grid, .view__grid { align-items: stretch; }
  .discover__text, .view__text, .discover__media, .view__media { display: flex; flex-direction: column; }
  /* Onsen はテキスト側の末尾がサムネなので、下端合わせは margin-top:auto で。
     View はサムネが主画像の直下（同じ列）にあるので、余りは主画像側が吸う。 */
  .discover__thumbs { margin-top: auto; }
  .discover__main { flex: 1 1 auto; min-height: 0; display: flex; }
  /* flex-basis:0 で主画像を列の高さ計算から外す。列の高さは本文側で決まり、
     画像が残りを埋めるので、サムネの下端が本文の下端とぴったり揃う。 */
  .view__main { flex: 1 1 0; min-height: 0; display: flex; }
  .discover__main img, .view__main img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  /* 由布岳の写真は縦に伸ばすと下半分（ベッド）が増えるので、上寄りで切る */
  .view__main img { object-position: 50% 32%; }
}

/* ---- INFORMATION ---- お知らせ一覧（/news/）と共用のため common.css へ移した */


/* ---- ROOMS preview ---- */
.rooms-pv__grid { display: grid; grid-template-columns: 1fr 250px; gap: clamp(20px, 4vw, 50px); align-items: stretch; }
.rooms-pv__stage { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.rooms-pv__img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--ease); }
.rooms-pv__img.is-active { opacity: 1; }
.rooms-pv__img img { width: 100%; height: 100%; object-fit: cover; }
.rooms-pv__tabs { display: flex; flex-direction: column; justify-content: center; gap: 0.2em; }
.rooms-pv__tabs button { width: 100%; text-align: left; font-family: var(--f-en-sans); font-size: 1rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.65); padding: 0.85em 1em; border-bottom: 1px solid rgba(255,255,255,0.14); transition: 0.4s var(--ease); }
.rooms-pv__tabs button:hover { color: #fff; }
.rooms-pv__tabs button.is-active { color: var(--c-forest); background: var(--c-gold-light); }
.rooms-pv__note { margin-top: 2.4em; font-size: 0.92rem; line-height: 2.1; opacity: 0.88; }
.rooms-pv__cta { margin-top: 2em; }
@media (max-width: 760px){
  /* 並びを「写真 → 本文 → 客室タブ → ボタン」にする（2026.09.10 修正依頼「入れ替え」）。
     写真とタブは同じ枠（rooms-pv__grid）の中にあるので、枠を display:contents でほどき、
     .wrap を縦の flex にして order で並べ替える。data-tab-group の JS は DOM を見るので影響しない。 */
  .rooms-pv .wrap { display: flex; flex-direction: column; }
  .rooms-pv__grid { display: contents; }
  .rooms-pv .sec-head { order: 1; }
  .rooms-pv__stage  { order: 2; }
  .rooms-pv__note   { order: 3; margin-top: 1.8em; }
  .rooms-pv__tabs   { order: 4; display: grid; grid-template-columns: 1fr 1fr; margin-top: 1.8em; }
  .rooms-pv__cta    { order: 5; }
}

/* ---- SIGHTSEEING preview ---- */
.sight-pv__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sight-pv__card { position: relative; aspect-ratio: 3/4.2; overflow: hidden; display: flex; align-items: flex-end; color: #fff; }
.sight-pv__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.sight-pv__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,18,14,0.7), transparent 60%); }
.sight-pv__card span { position: relative; z-index: 1; padding: 1.4em; font-family: var(--f-en-sans); font-size: 1rem; letter-spacing: 0.06em; }
.sight-pv__card small { display: block; font-family: var(--f-ja-sans); font-size: 0.74rem; letter-spacing: 0.18em; opacity: 0.85; margin-top: 0.3em; }
.sight-pv__card:hover img { transform: scale(1.07); }
@media (max-width: 760px){ .sight-pv__grid { grid-template-columns: 1fr 1fr; } }

/* ---- BOOKING ---- */
.booking { position: relative; padding-block: clamp(70px, 11vw, 150px); color: #fff; text-align: center; overflow: hidden; }
/* Photo Gallery ↔ Booking の境目：中央=金／両端=透明にフェードする細線 */
.booking::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3; background: linear-gradient(to right, transparent, var(--c-gold) 30%, var(--c-gold) 70%, transparent); }
.booking__bg { position: absolute; inset: 0; z-index: -2; }
.booking__bg img { width: 100%; height: 100%; object-fit: cover; }
.booking::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(15,28,21,0.66); }
.booking__inner { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.booking__ttl { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 500; letter-spacing: 0.16em; margin: 0.4em 0 1.4em; }
.booking__bar { display: inline-flex; flex-wrap: wrap; align-items: stretch; background: rgba(255,255,255,0.96); color: var(--c-ink); border-radius: 2px; overflow: hidden; }
.booking__bar span { display: flex; align-items: center; padding: 1.1em 1.8em; font-size: 0.86rem; letter-spacing: 0.06em; border-right: 1px solid var(--c-line); }
.booking__search { display: flex; align-items: center; padding: 1.1em 2.2em; background: var(--c-forest); color: #fff; font-family: var(--f-en-sans); font-size: 0.82rem; letter-spacing: 0.12em; transition: 0.4s var(--ease); }
.booking__search:hover { background: var(--c-gold); }
@media (max-width: 600px){ .booking__bar { flex-direction: column; } .booking__bar span { border-right: none; border-bottom: 1px solid var(--c-line); } }

/* ---- RESTAURANT preview（クリックでポップアップ） ---- */
.meal-pv__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.meal-pv__card { position: relative; aspect-ratio: 3/4; overflow: hidden; display: flex; align-items: flex-end; color: #fff; text-align: left; cursor: pointer; }
.meal-pv__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.meal-pv__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,18,14,0.72), transparent 62%); }
.meal-pv__card span { position: relative; z-index: 1; padding: 1.3em; font-family: var(--f-en-sans); font-size: 1rem; letter-spacing: 0.06em; }
.meal-pv__card small { display: block; font-family: var(--f-ja-sans); font-size: 0.72rem; letter-spacing: 0.18em; opacity: 0.85; margin-top: 0.3em; }
.meal-pv__card:hover img { transform: scale(1.07); }
/* 2列だと「モーニングビュッフェ」等の和名が枠幅に収まらず1文字だけ折り返すので、
   スマホでは余白と字間を詰めて1行に収める */
@media (max-width: 760px){
  .meal-pv__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .meal-pv__card span { padding: 1em 0.9em; font-size: 0.94rem; }
  .meal-pv__card small { font-size: 0.66rem; letter-spacing: 0.08em; }
}

/* ---- Onsen「愉しみ方」クリック展開 ---- */
.discover__more { cursor: pointer; }
.discover__more i { transition: transform 0.4s var(--ease); }
.discover__more.is-open i { transform: rotate(90deg); }
/* 開閉をやめて常時表示（クライアント指示「展開なし」） */
.discover__detail { display: block; }
.discover__detail-inner { overflow: visible; }
.discover__detail-ttl { font-family: var(--f-ja); font-size: 1.05rem; font-weight: 500; color: var(--c-forest); margin: 1.5em 0 0.6em; letter-spacing: 0.04em; }
.discover__detail-lead { font-size: 0.9rem; line-height: 1.95; color: var(--c-ink-soft); margin: 0; }

/* ---- Onsen 効能ブロック ---- */
.discover__efficacy { margin-top: 1.4em; padding: 1.2em 1.4em; border: 1px solid var(--c-line); background: rgba(255,255,255,0.4); }
.discover__efficacy-ttl { font-family: var(--f-en-sans); font-size: 0.9rem; letter-spacing: 0.14em; color: var(--c-gold); margin: 0 0 0.5em; }
.discover__efficacy p { font-size: 0.86rem; line-height: 1.9; margin: 0; }
.discover__efficacy dl { display: grid; grid-template-columns: 4.5em 1fr; gap: 0.5em 1.1em; margin: 0; font-size: 0.86rem; line-height: 1.9; }
.discover__efficacy dt { font-family: var(--f-en-sans); letter-spacing: 0.08em; color: var(--c-gold); }
.discover__efficacy dd { margin: 0; color: var(--c-ink-soft); }
/* スマホでは 泉質／効能 の見出しを上に置いて本文を全幅に。横並びだと本文が約 200px 幅になり、
   文節ごとの改行で行が細切れになる（2026.09.14） */
@media (max-width: 760px){
  .discover__efficacy dl { grid-template-columns: 1fr; gap: 0.15em; }
  .discover__efficacy dd + dt { margin-top: 0.8em; }
}

/* ---- ACCESS preview（構成案5ページ準拠） ---- */
.access-pv__top { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(24px, 5vw, 64px); align-items: stretch; }
.access-pv__info { display: flex; flex-direction: column; }
.access-pv__btns { margin-top: auto; }
.access-pv__addr { font-size: 1.05rem; line-height: 1.9; color: var(--c-forest); margin: 0 0 0.5em; }
.access-pv__access { font-size: 0.92rem; line-height: 1.7; color: var(--c-ink-soft); margin: 0 0 1.4em; }
.access-pv__meta { display: grid; grid-template-columns: auto 1fr; gap: 0.55em 1em; font-size: 0.86rem; margin-bottom: 1.6em; }
.access-pv__meta dt { font-family: var(--f-en-sans); letter-spacing: 0.08em; color: var(--c-gold); white-space: nowrap; }
.access-pv__meta dd { margin: 0; color: var(--c-ink-soft); line-height: 1.7; white-space: nowrap; }
.access-pv__btns { display: flex; flex-wrap: wrap; gap: 0.8em; }
.access-pv__map { aspect-ratio: 4/3; }
.access-pv__map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1); }

/* route flow / parking の共通スタイルは common.css に集約（TOP・アクセスページ共用） */

@media (max-width: 820px){ .access-pv__top { grid-template-columns: 1fr; } .access-pv__map { order: -1; } }
/* グリッドの子は既定で min-width:auto のため、中身が縮まないと列ごと画面より広くなる。
   実際、駐車場の注記に white-space:nowrap が効いていて、スマホで右に余白が出ていた。
   幅の狭い画面では折り返しを許可し、列が画面幅を超えないようにする。 */
.access-pv__top > * { min-width: 0; }
@media (max-width: 820px){ .access-pv__meta dd { white-space: normal; } }

/* ---- PHOTO GALLERY band ---- */
/* ギャラリー帯と直下の予約セクションはどちらも夜景で、隣り合うと一枚の暗い塊に見える。
   細線では効かないので、アイボリーの余白で明確に切る（クライアント指示「境目を設けてください」） */
.gallery-pv { display: grid; grid-template-columns: repeat(8, 1fr); position: relative; border-bottom: 16px solid var(--c-ivory); }
.gallery-pv__cell { aspect-ratio: 1/1; overflow: hidden; }
.gallery-pv__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.gallery-pv:hover .gallery-pv__cell img { transform: scale(1.05); }
.gallery-pv__label { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3em; color: #fff; background: rgba(15,28,21,0.55); transition: 0.4s var(--ease); }
.gallery-pv:hover .gallery-pv__label { background: rgba(15,28,21,0.68); }
.gallery-pv__label b { font-family: var(--f-en); font-size: clamp(1.4rem, 3.4vw, 2.2rem); font-weight: 500; letter-spacing: 0.14em; }
.gallery-pv__label small { font-family: var(--f-ja-sans); font-size: 0.78rem; letter-spacing: 0.2em; }
@media (max-width: 760px){ .gallery-pv { grid-template-columns: repeat(4, 1fr); } }