*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:clip}img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.demo{position:fixed;z-index:99;left:12px;bottom:12px;display:flex;gap:12px;align-items:center;padding:9px 13px;border:1px solid currentColor;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);font:600 12px/1 var(--body);letter-spacing:.08em;border-radius:999px}.demo a{text-decoration:underline}.skip{position:fixed;left:8px;top:-80px;z-index:120;background:#fff;color:#000;padding:10px}.skip:focus{top:8px}.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase}.arrow::after{content:" ↗"}:focus-visible{outline:3px solid #4f8cff;outline-offset:4px}@media(max-width:720px){.demo{left:8px;bottom:8px;max-width:calc(100vw - 16px);font-size:12px}.desktop{display:none!important}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
:root{--bg:#151512;--ink:#f3efe5;--body:Inter,"Helvetica Neue",sans-serif;--disp:"Noto Serif JP",serif;--gold:#d8b55f}.top{position:fixed;z-index:20;inset:22px 28px auto;display:flex;justify-content:space-between;align-items:flex-start;font-size:12px;letter-spacing:.08em}.mark{font-weight:800;line-height:.85;font-size:18px}.top nav{display:flex;gap:26px}.sound{border:0;background:none;font-size:12px}.cinema{height:100svh;min-height:680px;position:relative;background:#111}.cinema img{filter:saturate(.65) contrast(1.1);transition:filter 1s}.cinema::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent 65%)}canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}.cinema-copy{position:absolute;z-index:3;left:5vw;bottom:8vh;max-width:820px}.cinema h1{font-family:var(--disp);font-weight:600;font-size:clamp(44px,6vw,86px);line-height:.98;letter-spacing:-.02em;margin:18px 0}.cinema-copy>p:last-child{max-width:480px;font-size:16px;line-height:1.8}.book{position:absolute;z-index:4;right:4vw;bottom:6vh;border-bottom:1px solid;padding:12px 0}.scene{min-height:100svh;padding:15vh 6vw;display:grid;grid-template-columns:1fr 2fr;align-items:end;background-attachment:fixed;background-size:cover}.scene>div:last-child{max-width:850px}.scene h2{font-family:var(--disp);font-weight:600;font-size:clamp(42px,6vw,88px);line-height:1.05;letter-spacing:-.02em}.scene p{max-width:520px;line-height:2}.scene-room{background:linear-gradient(180deg,#19191740 0%,#1919175c 55%,#19191799 100%),url("/web-production/samples/images-v2/01-lodge-room-v2.webp") center/cover;background-attachment:scroll}.scene-table{background:linear-gradient(#d8b55fbb,#d8b55fbb),url("/web-production/samples/images-v2/01-lodge-table.webp") center/cover;background-attachment:scroll;color:#17160f}.archive{padding:15vh 6vw;display:grid;gap:0}.archive button{font-family:var(--disp);font-weight:400;font-size:clamp(44px,8vw,120px);text-align:left;border:0;border-bottom:1px solid;background:none;padding:.12em 0;letter-spacing:-.03em}.reserve{min-height:70vh;padding:10vh 6vw;display:flex;flex-direction:column;justify-content:center;background:#eee8db;color:#171612}.reserve h2{font-family:var(--disp);font-weight:600;font-size:clamp(46px,8vw,110px);letter-spacing:-.02em;margin:.2em 0}.reserve a{align-self:flex-start;border-bottom:1px solid;padding:12px 0}footer{padding:30px 4vw;display:grid;grid-template-columns:1fr 1fr auto;font-size:12px}@media(max-width:720px){.top{inset:18px}.top nav{display:none}.cinema-copy{left:20px;right:20px;bottom:80px}.cinema h1{font-size:40px}.scene{grid-template-columns:1fr;padding:120px 22px 50px}.scene h2{font-size:44px}.archive button{font-size:48px}footer{grid-template-columns:1fr;gap:12px}}
/* ══════════════════════════════════════════════════════════════════
写真に元から入っている金継ぎの継ぎ目を、上から下へ光が流れるように光らせる
★オーナー指示(2026-08-15・逐語)
「もともとつなぎ目が入っている。なので、そのつなぎ目に沿って、ラインが光るような
演出は再現できない?画像のつなぎ目が、一定サイクルで光るとか。光り方は、全部が
同時に光るんじゃなくて、上から下に電気が流れるような光り方。」
★やり方 ── 線を手でなぞらない
継ぎ目は写真に焼き込まれているので、**写真から金色の細い筋だけを抜き出した型**を
作った(`images-v2/*-seam.webp`。透明度が型そのもの)。その型で光の帯を切り抜く。
手でなぞる案を採らなかった理由 = 写真は器の大きさに合わせて cover で切り取られるため、
画面幅ごとに写る範囲が変わる。**型を写真と同じ cover 指定で敷けば、どの幅でも
継ぎ目と 1px もずれない**(なぞった線は必ずずれる)。
★型の作り方(再現手順。次のページで作り直すときのため)
1. 金色度 = (赤 - 青)×明るさ。金の筋だけが強く出る
2. ホワイトトップハット(元 - 開き演算)= **細い明るい筋**だけを残す
3. 太い塊を作って引く = かけらの紙質など「面」の誤検出を落とす
4. 細長い塊だけ残す(外接矩形が長く、その中をあまり埋めていない物 = 線)
5. にじませて透明度に焼き、webp で保存
★`*.png` は全社の除外設定に入っており、置いても配信物から黙って消える。
`images-v2/*.webp` だけが除外の例外。**必ず webp で置き、git check-ignore で確かめる**
(同型の事故 4 回。今回 5 回目を未然に止めた)。
★2026-08-15 オーナー指摘「2〜3枚目は光が走ってる?そうは見えない」への是正
実測すると **3 枚とも動いていた**(帯の縦位置が 178→329→506→677→796px と下降)。
問題は別で、**周期が 8.5 秒 / 10 秒と長く、その節を見ている間に一度も通らない**
ことがあった。見えなければ「光っていない」のと同じ。是正 = 2 つ。
(1) **節が画面に入った瞬間に走り出す**(site.js が ks-in を付ける → 下の
animation-play-state が paused → running に変わる)。到着と同時に必ず 1 回通る。
(2) **食卓だけ光を強める**。金の被せ(#d8b55f 73%)の上なので明るさの差が
他の 2 枚の半分以下(最大差 86 対 190)しか出ていなかった。
★JS が落ちて ks-on が外れた場合は「止める指定」ごと無効になり、光は常時走る側へ
倒れる(飾りが消えるより、勝手に動く方が害が小さい)。
══════════════════════════════════════════════════════════════════ */
.ks-glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
-webkit-mask-image:var(--ks-seam);mask-image:var(--ks-seam);
-webkit-mask-size:cover;mask-size:cover;
-webkit-mask-position:center;mask-position:center;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ks-glow i{position:absolute;left:-2%;right:-2%;top:-56%;height:56%;
background:linear-gradient(180deg,rgba(255,214,120,0) 0%,rgba(255,222,140,.40) 38%,rgba(255,239,190,.95) 50%,rgba(255,222,140,.40) 62%,rgba(255,214,120,0) 100%);
animation:ks-flow var(--ks-cycle,6.5s) linear infinite;will-change:transform}
@keyframes ks-flow{from{transform:translateY(0)}to{transform:translateY(285%)}}
/* 画面に入るまで止めておく。入った瞬間から走る = 見ている間に必ず 1 回通る。 */
html.ks-on .ks-glow i{animation-play-state:paused}
html.ks-on .ks-glow.ks-in i{animation-play-state:running}
.cinema .ks-glow{--ks-seam:url("/web-production/samples/images-v2/01-creative-collage-seam.webp");--ks-cycle:6.5s;z-index:1}
.scene-room .ks-glow{--ks-seam:url("/web-production/samples/images-v2/01-lodge-room-seam.webp");--ks-cycle:7s}
.scene-table .ks-glow{--ks-seam:url("/web-production/samples/images-v2/01-lodge-table-seam.webp");--ks-cycle:7.5s}
/* 食卓は金の被せの上なので、他の 2 枚より強く・白く寄せないと差が出ない。 */
.scene-table .ks-glow i{background:linear-gradient(180deg,rgba(255,240,180,0) 0%,rgba(255,246,206,.62) 38%,rgba(255,255,240,1) 50%,rgba(255,246,206,.62) 62%,rgba(255,240,180,0) 100%)}
/* 光の層は写真の上・本文の下。節はグリッドなので、本文側を持ち上げてから光を下に置く。 */
.scene{position:relative}
.scene>*{position:relative;z-index:1}
.scene>.ks-glow{position:absolute;z-index:0}
@media(prefers-reduced-motion:reduce){.ks-glow{display:none}}
/* ══════════════════════════════════════════════════════════════════
03 SEAM ── 「割れたところに、金が入る」= このページの signature。
★1 版目を捨てた理由(ゲイツ自身の全画面目視)
右の列に細い金線を 1 本置いただけで、画面の右半分が広大な黒い空白になった。
オーナーが「セクションが少ない・完全に手抜き」と言ったその状態を、新設した節で
作っていた。**足した節が、既存の節より手抜きに見えていた。**
★2 版目で直したこと(目視 + 別人格レビュー)
(a) 金の継ぎ目が **本文の上を横切って読めなくなっていた**(スマホ)。デスクトップでも
幅 1024px 付近で本文の右端と交差する計算だった(継ぎ目の一番左は横幅の 43.75%)。
→ 本文の器を 36vw 以内に閉じ込め、見出しの上限を 60px に下げ、スマホでは
継ぎ目を上 40% に寄せた。**320〜1440px の 8 幅で交差 0 件を実測済**。
(b) 節番号「03 / SEAM」が 320px で **ロゴの上に重なっていた**。上位置を 104px へ。
(c) ラベルが二重だったので eyebrow を廃止。01 / 02 と同じ「番号 / 英字」1 個に揃え、
04 にも番号を付けた。
★(a)(b) はどの機械ゲートも赤にしなかった(線と文字の交差・重なりを見るゲートは無い)。
見つかったのは全画面を目で見たからで、次も目で見るしかない。
★節そのものを「割れた 1 枚の器」にする考え方
画面を金の継ぎ目が端から端まで貫き、左右で地の色をわずかに変えて 2 つの破片に
見せる。写真は 1 枚も増やしていない(既存 3 枚のまま)。
preserveAspectRatio="none" で器いっぱいに引き伸ばすが、線の太さだけは
vector-effect="non-scaling-stroke" で保つ(伸ばすと線まで潰れる)。
★ただしこの組み合わせは stroke-dasharray の座標系をずらす。site.js の C2 の注記を読め。
══════════════════════════════════════════════════════════════════ */
.lodge-seam{position:relative;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:18vh 6vw 12vh;background:#111110}
.lodge-seam-art{position:absolute;inset:0;z-index:0;pointer-events:none}
.lodge-seam-art svg{display:block;width:100%;height:100%}
.lodge-shard-a{fill:#121210}
.lodge-shard-b{fill:#1c1b16}
.lodge-seam-main{filter:drop-shadow(0 0 18px rgba(216,181,95,.45))}
.lodge-seam-knots circle{filter:drop-shadow(0 0 12px rgba(216,181,95,.7))}
.lodge-seam-label{position:absolute;left:6vw;top:14vh;z-index:2;font-size:12px;letter-spacing:.16em;color:#8d8677}
/* 継ぎ目の一番左は横幅の 43.75%。本文はそこへ届かせない。 */
.lodge-seam-in{position:relative;z-index:2;max-width:min(620px,36vw)}
.lodge-seam h2{font-family:var(--disp);font-weight:600;font-size:clamp(32px,4vw,60px);line-height:1.25;letter-spacing:-.02em;margin:0 0 26px}
.lodge-seam-in p{max-width:100%;line-height:2;font-size:16px}
.lodge-seam-note{margin-top:26px;padding-top:22px;border-top:1px solid #3c3a30;color:#b8b1a1;font-size:14px}
/* ══════════════════════════════════════════════════════════════════
04 A DAY ── 「一日は、五つの時刻でできている」
時刻は本物の順序なので番号を振ってよい(飾りの連番ではない)。
金の継ぎ目が、そのまま時間軸になる。各行が自分の線を持つので、
行が現れるたびに軸が下へ継がれていく。
══════════════════════════════════════════════════════════════════ */
.lodge-day{padding:16vh 6vw 12vh;background:#eee8db;color:#171612}
.lodge-day-head{max-width:1000px;margin:0 auto 7vh}
.lodge-day-label{font-size:12px;letter-spacing:.16em;color:#7d7768}
.lodge-day h2{font-family:var(--disp);font-weight:600;font-size:clamp(38px,5vw,70px);line-height:1.25;letter-spacing:-.02em;margin:16px 0 0}
.lodge-hours{list-style:none;margin:0 auto;padding:0;max-width:1000px}
.lodge-hours li{position:relative;display:grid;grid-template-columns:clamp(84px,10vw,132px) 34px minmax(0,1fr);align-items:start;padding:clamp(22px,2.8vw,36px) 0}
.lodge-hours li::before{content:"";position:absolute;left:calc(clamp(84px,10vw,132px) + 16px);top:0;bottom:0;width:2px;background:var(--gold)}
.lodge-hours li:first-child::before{top:calc(clamp(22px,2.8vw,36px) + .46em)}
.lodge-hours li:last-child::before{bottom:auto;height:calc(clamp(22px,2.8vw,36px) + .46em)}
.lodge-hours li::after{content:"";position:absolute;left:calc(clamp(84px,10vw,132px) + 10px);top:calc(clamp(22px,2.8vw,36px) + .46em);width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px #eee8db}
.lodge-hours time{font-family:var(--disp);font-weight:400;font-size:clamp(30px,3.6vw,50px);line-height:1;letter-spacing:-.02em}
.lodge-hours span{grid-column:3;padding-top:.3em;max-width:520px;line-height:2;font-size:clamp(14px,1.1vw,16px);color:#3d3a32}
/* ── 明るい帯の上に来たとき、固定ヘッダーの文字色を反転する ──────────
別人格レビュー critical。地 #eee8db に対し文字 #f3efe5 は
コントラスト 1.06:1 で、ヘッダーが**完全に消えていた**。
切り替えは site.js が html.ks-light を付け外しする。 */
html.ks-light .top{color:#171612}
/* ── 触れるところは、触れると分かるようにする(このページはホバーが 0 個だった)── */
.top nav a,.sound,.book,.reserve a,.archive button,.demo a{transition:color .35s ease,border-color .35s ease,opacity .35s ease}
.top{transition:color .35s ease}
.top nav a:hover,.sound:hover{color:var(--gold)}
.book:hover,.reserve a:hover{color:var(--gold);border-color:var(--gold)}
.archive button:hover{color:var(--gold);border-color:var(--gold)}
@media(max-width:900px){
/* ★固定ヘッダーをページと一緒に流す(オーナーの実機スクショで確認)。
スマホでは `.top` が画面に貼り付いたまま本文の上を通り、明るい節(食卓)の上で
「KINTSUGI LODGE」と本文が重なって**どちらも読めなくなっていた**。
スマホではナビも隠れており、貼り付けておく利得が無い。 */
.top{position:absolute}
/* 継ぎ目は上 40% だけ。本文は下の無地の破片に置く(横切らせない)。 */
.lodge-seam{min-height:92svh;padding:120px 22px 64px}
.lodge-seam-art{bottom:60%}
.lodge-seam-label{top:104px;left:22px}
.lodge-seam-in{max-width:100%}
.lodge-seam h2{font-size:clamp(30px,7vw,42px)}
.lodge-day{padding:100px 22px 70px}
.lodge-day h2{font-size:clamp(30px,6.4vw,44px)}
.lodge-day-head{margin-bottom:44px}
.lodge-hours li{grid-template-columns:clamp(70px,17vw,96px) 26px minmax(0,1fr);padding:22px 0}
.lodge-hours li::before{left:calc(clamp(70px,17vw,96px) + 12px)}
.lodge-hours li::after{left:calc(clamp(70px,17vw,96px) + 6px);width:12px;height:12px;margin-top:-6px}
.lodge-hours time{font-size:clamp(24px,6vw,32px)}
}
/* ══════════════════════════════════════════════════════════════════
演出パターン A「継ぎ目」── 中央の一本の線から、左右へ開いて中身が出る。
金継ぎ = 割れたものを継ぐ、というこのブランドの言語から取った仕草。
同じ「作り方」を 22 枚で共有し、「見た目」(速さ・段差・軸・色)は
ページごとに変える。
★実装の決め事(すべて実測で踏んだ事故が理由。ゼロホー本体 enshutsu.js 由来)
1. 本文は opacity / transform で隠さない。**clip-path でだけ**出す。
opacity 0 の要素は公開品質ゲートが検査から丸ごと外す = 偽の緑。
transform でずらすと兄弟ごとにズレて隙間が詰まる。
clip-path は描画だけを切るので、矩形も行間も 1px も動かない。
2. 隠す指定は **すべて html.ks-on の下**に置く。JS が例外で落ちたときは
ks-on を外す = 隠す指定が 1 つ残らず無効になり、素の HTML に戻る。
3. clip-path は position:fixed の子孫の包含ブロックになる。固定ヘッダー
(.top)は #main の中に在るので、**#main と body には絶対に ks-r を付けない**。
4. prefers-reduced-motion は CSS 側でも明示的に解除する。既存の
「animation:none / transition:none」だけでは clip-path は解除されず、
隠れたまま固定される。
5. ★**切り終わりは箱の 40px 外側まで広げる**(別人格レビュー critical C4)。
`inset(0)` で終えると、切る枠が箱そのものになるため、その 4〜7px 外側に描かれる
**キーボードのフォーカス枠が丸ごと消える**(季節ボタンで青い画素 8910 → 0 = 100% 消失を実測)。
演出が終わったあとも永続する不具合だった。横方向だけを動かし、上下は最初から
-40px にしてあるので、出方は変わらない。
══════════════════════════════════════════════════════════════════ */
html.ks-on .ks-r{clip-path:inset(-40px 50% -40px 50%);transition:clip-path .9s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--ks-d,0)*80ms)}
html.ks-on .ks-r.ks-in{clip-path:inset(-40px)}
/* ★金の継ぎ目の出し方を stroke-dasharray から clip-path の拭き取りへ替えた(2026-08-15)。
理由 = dasharray は `vector-effect:non-scaling-stroke` + `preserveAspectRatio="none"` と
併さると **画面座標** で解釈され、`getTotalLength()` の **viewBox 座標** とずれる。
長さを測って渡す是正を 2 度入れたが、オーナーの実機で「光が一部表示されない」と再指摘された。
clip-path は本文の出現と同じ仕掛けで、長さも座標系も関係しない。**同じ場所を 3 回直すことに
なったら、直すのではなく仕掛けごと替える。** 速さも 2.6 秒 → 1.4 秒に詰めた(スクロールで
到達した人が、描き終わるのを待たされないように)。 */
html.ks-on .lodge-seam-art{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s cubic-bezier(.33,0,.18,1)}
html.ks-on .lodge-seam-art.ks-in{clip-path:inset(0)}
html.ks-on .lodge-seam-knots circle{opacity:0;transition:opacity .6s ease}
html.ks-on .lodge-seam-art.ks-in .lodge-seam-knots circle{opacity:1;transition-delay:1.1s}
@media(prefers-reduced-motion:reduce){
html.ks-on .ks-r,html.ks-on .ks-r.ks-in{clip-path:none!important}
html.ks-on .lodge-seam-art,html.ks-on .lodge-seam-art.ks-in{clip-path:none!important}
html.ks-on .lodge-seam-knots circle{opacity:1!important}
}
/*HEADING-LEADING-20260811 ── 見出しの行間の是正(オーナー指示 2026-08-11「標準的な行間に。空けすぎないこと」)。
対象 = **実測で 2 行以上に折り返し、行間が 1.06 未満、かつ日本語を含む**見出しだけ。
日本語は文字が全角の枠いっぱいなので 1.00 = 行と行が接する。1.00〜1.05 は実質接している。
1.06 以上は既に隙間が見えており標準域なので触らない(= 空けすぎない)。
欧文だけの見出しも触らない(枠いっぱいという理屈が当てはまらず、実測で他の部品と重なった)。
セレクタは実際に描画された要素から機械で取った全長パス。共有 shared-quality.css が
site.css の**後**に読まれて `!important` で勝つため、短いセレクタでは当たらない。
生成 = apply_heading_leading_20260811.py / 確認 = scan_all_headings_20260811.cjs --tag after
0.98 → 1.25 / 3行 / 森の亀裂から、静けさが満ちてくる。
1.05 → 1.25 / 3行 / 眠るためではなく、感覚を戻すための三室。
1.05 → 1.25 / 2行 / 土地の色を、ひと皿ずつ。
★2026-08-15 追記: 03 SEAM / 04 A DAY の見出しは**新設**なので、上の 3 行と同じ 1.25 を
最初から .lodge-seam h2 / .lodge-day h2 に直接書いてある(全長パスではなく短いセレクタ)。
★別人格レビュー W3 の訂正: 「shared-quality.css に .lodge-* の !important は無い」は
文字としては真だが、**当たっているのはタグ側のセレクタ**(`.eyebrow + :where(h1,h2,h3)`)
だった。文字を数えるだけでは「効いているか」は分からない。現在は新設 2 節から
`.eyebrow` を外したのでこの経路は当たらない。**実描画の computed で確かめること。**
節を後ろに足しただけで既存 3 節の DOM の道筋は変えていないので、下の 3 行は当たり続ける。
*/
html body div#main main section.cinema div.cinema-copy h1{line-height:1.25!important}
html body div#main main section#stays.scene.scene-room div h2{line-height:1.25!important}
html body div#main main section#table.scene.scene-table div h2{line-height:1.25!important}
/*/HEADING-LEADING-20260811*/
/*LODGE-GUIDE-20260819 ── 施設案内(新設)
★オーナー指摘(2026-08-19 逐語)「これはイメージ写真なのでダメです。もっと宿の案内を
する専門のセクションを用意し、そこで示す必要があります」。
#stays / #table の背景写真は雰囲気(演出)であって案内ではない、という判定。
ここは写真を正面のカードとして出し、キャプションで何の写真か明示する。
★TABLE(02)の直後・SEAM の前に置いた(番号は 03 → SEAM が 04、A DAY が 05 へ繰り上げ)。
「部屋を見せた→食事を見せた→ここで宿全体を案内する→哲学(継ぎ目)→一日の流れ」の順が
自然と判断した。既存の見出しの CSS セレクタは id/class 参照なので、番号の繰り上げでは壊れない。
★写真はまだ無い(2026-08-19 時点はプレースホルダー参照)。オーナーが ChatGPT で生成した
画像を images-v2/01-guide-{room,onsen,cuisine}.webp として置けば、そのまま表示される
(コードの変更は不要)。 */
.lodge-guide{padding:16vh 6vw 12vh;background:#111110}
.lodge-guide-head{max-width:1000px;margin:0 auto 6vh}
.lodge-guide-label{font-size:12px;letter-spacing:.16em;color:#8d8677}
.lodge-guide h2{font-family:var(--disp);font-weight:600;font-size:clamp(38px,5vw,70px);line-height:1.25;letter-spacing:-.02em;margin:16px 0 0}
.lodge-guide-head p{margin:18px 0 0;max-width:520px;line-height:2;font-size:16px;color:#b8b1a1}
.lodge-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1200px;margin:0 auto}
.lodge-guide-grid figure{margin:0}
.lodge-guide-grid img{aspect-ratio:3/4;object-fit:cover;background:#232019;border-radius:2px}
.lodge-guide-grid figcaption{margin-top:16px;display:flex;flex-direction:column;gap:4px}
.lodge-guide-grid figcaption b{font-family:var(--disp);font-weight:600;font-size:20px}
.lodge-guide-grid figcaption span{font-size:13px;color:#8d8677}
@media(max-width:900px){.lodge-guide-grid{grid-template-columns:1fr;gap:36px}}
@media(max-width:720px){.lodge-guide{padding:100px 22px 70px}}
html body div#main main section#guide.lodge-guide div.lodge-guide-head h2{line-height:1.25!important}
/*/LODGE-GUIDE-20260819*/