/* 手書きの線画イラストは一旦外している（素材は images/illust/ に保持。復活時はここに定義を戻す） */
/* ============================================================
みかわ温泉 海遊亭 デザインシステム v3.0（ブランドブック改訂版 2026年9月18日）
出典：海遊亭 ブランドカラーブック「我が家の温かさを、色で伝える」（Aqxis）
文字色は、カラーブック2026年10月1日更新の「トーン展開と補助色」（背景ごとに使える文字色の表）に従う。
設計の核：
画面はすべて温かい色でつくる。ネイビーは最下層の帯（フッター）だけ。
ホームオレンジが主役。主要ボタン・歓迎の場面・ロゴの印に置く。
オレンジは広い面に使わない（面として使えるのは淡色を公式予約の背景に用いる場合のみ）。
オレンジのボタンに載せる文字はブラウン（白文字は使わない）。
============================================================ */
/* ── 1. トークン ─────────────────────────────────
1-1 ブランド7色と、そこから導いた段階 */
:root{
--c-orange:#EDA73F; --c-orange-d:#E39D35; --c-orange-p:#FBEBCF; /* ホームオレンジの段階（オレンジ 深＝ボタンのホバー） */
--c-clay:#C86F4A; --c-clay-d:#A3552F; --c-clay-p:#EFDCD3; /* ウォームクレイの段階（クレイ 深＝小さい見出し・リンク・補助ボタンの文字） */
--c-beige:#D8C2A5; --c-beige-p:#EFE1CB; --c-beige-xp:#F7EFE2; /* ウォームベージュ */
--c-cream:#FDF6E9; /* クリーム（ページの地色） */
--c-ivory:#FFFDF8; /* アイボリー（カードの内側・ネイビーと写真の上の文字） */
--c-brown:#5D4A33; /* ブラウン（本文の文字） */
--c-navy:#2D548F; --c-navy-d:#1E3A66; /* 海遊亭ネイビー（最下層の帯のみ）・ネイビー 深（帯の中のリンクのホバー） */
--c-sub:#6E6357; --c-btn-ink:#4A3A27; --c-rule:#E7DECD; /* 補足の文字・ボタンの文字・罫線（2026-10-01 カラーブック更新） */
/* 1-2 役割トークン（ブランドブック「場所ごとの色の使い方」表に対応）
文字色は背景で決まる。アイボリー・クリーム・ベージュ 極淡・オレンジ 淡の上では、本文・補足・クレイ 深・
ウォームクレイ（大きい見出しのみ）を使える。ベージュ 淡・クレイ 淡の上では本文の色だけを使う */
--bg:var(--c-cream); /* ページの地色：画面の大部分 */
--bg-alt:var(--c-beige-xp); /* セクションの背景：地色との差で区切りをつくる */
--card:var(--c-ivory); /* カードの内側 */
--ink:var(--c-brown); /* 本文の文字 */
--head:var(--c-clay); /* 見出しの文字：24px以上、または18.66px以上で太さ700 */
--head-s:var(--c-clay-d); /* 18.66px未満の見出し */
--soft:var(--c-sub); /* 補足：説明・注記・パンくず・日付（ベージュ 淡・クレイ 淡の上では使わない） */
--line:var(--c-rule); /* カードの枠・区切り */
--line-s:var(--c-beige); /* 強い罫線（表の外枠・セルの区切り・フッターとの境） */
--chip:var(--c-beige-p); /* タグ・ラベル・写真枠・表の見出し行 */
--brand:var(--c-orange); /* 主要ボタンの面（ブランドの主役） */
--brand-d:var(--c-orange-d); /* ボタンのホバー（色の差が小さいため、文字に下線も付ける） */
--brand-ink:var(--c-btn-ink); /* ボタンの文字（ホームオレンジとオレンジ 深の上）。白文字は使わない */
--btn2-ink:var(--c-clay-d); /* 補助ボタンの文字 */
--btn2-bd:var(--c-clay); /* 補助ボタンの枠 */
--link:var(--c-clay-d); /* リンク：クレイ 深に下線を付ける */
--accent:var(--c-clay-d); /* 数値・強調の文字（小さい文字なのでクレイ 深） */
--sign:var(--c-beige); /* 見出しの脇に置く短い線 */
--welcome:var(--c-orange); /* 歓迎の場面 */
--welcome-p:var(--c-orange-p);/* 歓迎のタグの面・公式予約の背景 */
--ftrbg:var(--c-navy); /* 最下層の帯：サイトで唯一のネイビーの面 */
--ftr-rgb:45,84,143; /* 最下層の帯の色のRGB（フッターの三河湾の帯を下の面へ溶かすグラデーション用。--ftrbg と同じ色） */
--note:#fff8dc;--note-bd:#d9c25a;
/* 1-3 書体 */
--serif:"Shippori Mincho",serif;
--sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif; /* 2026-09-22 正式採用（Aqxisフィードバック A-4-1）。旧丸ゴシック版は比較用に18章で残す */
/* 1-4 寸法（ヘッダーのズレ防止に、高さは変数で固定する） */
--hdr-h:76px; --util-h:33px; --ctl-h:40px;
--wrap:1060px; --wrap-w:1240px; --pad-x:26px;
/* 1-5 角丸・影（対比を強くしすぎない＝影は浅く） */
--r-s:10px;--r-m:14px;--r-l:18px;--r-pill:999px;
--sh-1:0 3px 14px rgba(93,74,51,.12);
--sh-2:0 12px 32px rgba(93,74,51,.14);
--sh-3:0 12px 40px rgba(93,74,51,.22);
/* 1-6 重なり順 */
--z-hdr:30;--z-util:31;--z-fix:40;
}
/* ── 2. ベース ───────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
/* 文字サイズのレギュレーション（Aqxisフィードバック 8月FB・優先度B-8）
本文 PC17px／SP16px、補助情報は一律14px以上、英字・数字のみのラベルは12px以上。
「重要な補足」と「補助情報」は区別せず14pxに統一する。
ルートを18pxにすることで、rem指定の部品がまとめて基準を満たす（.78rem＝14.04px） */
html{font-size:18px}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:2;font-size:17px;letter-spacing:.02em}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
/* ── 3. レイアウト ─────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad-x)}
h1,h2,h3{line-height:1.7}
h3{font-weight:700;font-size:1.02rem}
/* セクション見出し：日本語主体（大人の温かさ調整） */
.ttl{text-align:center;margin-bottom:38px}
.ttl .jp{display:block;font-family:var(--serif);color:var(--head);font-weight:600;font-size:clamp(1.35rem,2.6vw,1.7rem)}
.ttl::after{content:"";display:block;width:40px;height:3px;border-radius:3px;background:var(--sign);margin:14px auto 0}
.ttl--left{text-align:left}
.ttl--left::after{margin-left:0}
.catch{font-family:var(--serif);color:var(--head);font-weight:600;font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:2}
.catch .sl{color:inherit} /* オレンジは文字に使わない（カラーブック 背景ごとに使える文字色）。強調の色分けはしない */
/* キャッチは2.6vwで伸縮し、幅923px以下では24px未満になる。その幅ではウォームクレイを太さ700で使う */
@media(max-width:923px){.catch{font-weight:700}}
/* 小さいキャッチ（お料理・お風呂の各区画の頭）。22.5pxで24px未満のため、ウォームクレイを太さ700で使う（10/1） */
.catch--s{font-size:1.25rem;font-weight:700}
.lead{color:var(--soft);font-size:.95rem}
.sec{padding:86px 0}
.sec--alt{background:var(--bg-alt)}
/* ── 4. コンポーネント ───────────────────────────
4-1 ボタン（.btn＝主CTA／.btn-w＝副次）。影は控えめ、面で色を持つ */
.btn{display:inline-block;background:var(--brand);color:var(--brand-ink);font-weight:700;padding:14px 40px;border-radius:var(--r-pill);font-size:.95rem;box-shadow:var(--sh-1);transition:background .15s,opacity .15s;border:none;cursor:pointer;font-family:var(--sans);text-align:center}
.btn:hover{background:var(--brand-d);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px} /* オレンジ 深は色の差が小さいため、ホバーは文字の下線でも示す */
/* 補助ボタン：アイボリーの地にウォームクレイの枠、文字はクレイ 深（主要ボタンと差をつける） */
.btn-w{background:var(--card);color:var(--btn2-ink);box-shadow:inset 0 0 0 1.5px var(--btn2-bd)}
/* ホバーは主要ボタンと同じく文字の下線で示す（クレイ 淡の面にクレイ 深の文字は載せない） */
.btn-w:hover{background:var(--card);color:var(--btn2-ink)}
/* 4-2 補助メニュー帯（PCのみ）：高さを--util-hで固定する */
.util{background:var(--bg);border-bottom:1px solid var(--line)}
.util-in{max-width:var(--wrap-w);margin:0 auto;height:var(--util-h);padding:0 var(--pad-x);display:flex;align-items:center;justify-content:flex-end;gap:20px;font-size:.78rem;color:var(--ink)} /* 補助メニューもナビゲーションなのでブラウン（10/1） */
.util a:hover{color:var(--link)}
@media(max-width:920px){.util{display:none}}
/* SPドロワー内の補助メニュー項目 */
/* ドロワー内の補助メニュー：主ナビと並列にせず、従属ブロックとして小さくまとめる */
.nav .nav-sub{display:none}
.nav.open .nav-sub{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.nav.open .nav-sub-t{grid-column:1/-1;font-size:.78rem;font-weight:700;letter-spacing:.1em;color:var(--soft)}
.nav.open .nav-sub a{padding:2px 0;border-bottom:none;font-size:.86rem;color:var(--ink)}
/* 4-3 ヘッダー
ズレ防止の原則：高さは--hdr-hで固定し、中の要素の寸法に依存させない。
ヘッダー内のコントロール（EN・メニュー・空室CTA）は--ctl-hで高さを揃える */
/* 半透明の地は96%。下に暗い写真が来ても、クレイ 深の文字で4.5:1を保つ濃さ（92%では4.19:1まで下がる） */
.hdr{position:sticky;top:0;z-index:var(--z-hdr);background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.hdr-in{position:relative;max-width:var(--wrap-w);margin:0 auto;height:var(--hdr-h);padding:0 var(--pad-x);display:flex;align-items:center;gap:20px}
.brand{flex:none;display:flex;align-items:center}
.brand img{height:44px;width:auto;display:block}
.nav{display:flex;gap:18px;align-items:center;font-size:.86rem;font-weight:500;flex:1;flex-wrap:wrap}
.nav a:hover{color:var(--link)}
/* 現在地の目印。ナビゲーションの選択中の項目はクレイ 深と下線（カラーブック「ナビゲーション」） */
.nav a[aria-current="page"]{color:var(--link);font-weight:700;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.util a[aria-current="page"]{color:var(--link);font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.ftr nav a[aria-current="page"]{color:var(--c-ivory);font-weight:700;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
/* ヘッダー内コントロールの共通形（高さ・角丸・改行禁止を1か所で定義） */
.tel,.lang,.menu-btn,.avail{display:inline-flex;align-items:center;justify-content:center;height:var(--ctl-h);border-radius:var(--r-pill);white-space:nowrap;flex:none;font-family:var(--sans);line-height:1}
.tel{font-size:.8rem;border:1px solid var(--line);padding:0 14px}
.lang{font-size:.78rem;font-weight:700;letter-spacing:.08em;border:1px solid var(--line);padding:0 14px;color:var(--soft)}
.lang:hover{color:var(--link);border-color:var(--link)}
/* SPのメニューはハンバーガー（3本線＋MENUの英字ラベル）。枠と面を持たない素のボタンで、
ヘッダーの右端（orderで最後）に置く。開いている間は3本線が×に変わり、ラベルはCLOSEになる。
MENU／CLOSE は操作のラベルとして残す英字（見出しの飾りの英字は9/26に全廃）。英字・数字のみのラベルとして12px以上 */
.menu-btn{display:none;flex-direction:column;gap:3px;border:none;background:none;color:var(--ink);padding:0 6px;cursor:pointer}
/* 上下の線は疑似要素で±7pxにはみ出すため、marginで場所を確保する（ラベルに重ねない） */
.menu-btn .mb-i{position:relative;display:block;width:22px;height:2px;margin:7px 0;background:currentColor;border-radius:1px;transition:background .15s}
.menu-btn .mb-i::before,.menu-btn .mb-i::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;border-radius:1px;transition:transform .15s}
.menu-btn .mb-i::before{top:-7px}
.menu-btn .mb-i::after{top:7px}
.menu-btn.open .mb-i{background:transparent}
.menu-btn.open .mb-i::before{transform:translateY(7px) rotate(45deg)}
.menu-btn.open .mb-i::after{transform:translateY(-7px) rotate(-45deg)}
/* 英字だけのラベルは12px以上（9/25 11.2px→12px） */
.menu-btn .mb-t{font-size:.67rem;font-weight:700;letter-spacing:.12em;line-height:1}
.avail{background:var(--brand);color:var(--brand-ink);font-weight:700;font-size:.86rem;padding:0 24px;box-shadow:var(--sh-1);transition:background .15s}
.avail:hover{background:var(--brand-d);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
/* TOPヒーロー：写真が主役（第一画面いっぱい）。コピーと確認情報は写真に軽く重ねる（Aqxis情報設計①）
白いカードは積まない */
.hero{position:relative}
.hero .im{position:relative;height:min(92svh,820px);overflow:hidden}
.hero .im .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.hero .im .slide.on{opacity:1}
.hero .im .slide img{width:100%;height:100%;object-fit:cover}
.p1 .tx{position:relative;z-index:1}
/* 4-x ページのキービジュアル（.kv）
プロトタイプ v04準拠：h1＋リードは温かい地色の上に置き（文字を暗い写真に乗せない）、
そのすぐ下に全幅の写真を置く。見出しの帯と写真を密着させて間延びを防ぐ。
ブランドブック ルール1「画面はすべて温かい色でつくる」に沿い、
暗いスクリムで画面を沈ませない */
.phead--kv{padding-bottom:34px;border-bottom:none}
.kv{position:relative;height:min(50svh,460px);overflow:hidden;background:var(--c-beige-p)}
.kv img{width:100%;height:100%;object-fit:cover;display:block}
/* 客室ページ：ソファの上の愛犬2頭（ゆらぎ 230523-036）を、横長に切り出しても耳から足元まで入れる（10/27 海遊亭様「ワンちゃんが映ってて欲しい」→ LEOSENSE角田さん「案2で反映」。1920pxで中央の切り出しだと足元が欠けたため） */
.kv--dogs img{object-position:50% 56%}
/* お料理：板前が盛り付ける八寸（料理 _YA_0211）。横長に切り出しても、器と葉が中心に入る位置（10/27 LEOSENSE角田さん「料理はやはり案Aで」） */
.kv--cuisine img{object-position:50% 56%}
/* 宿泊プラン：客室の椅子に並ぶ愛犬2頭（アンバサダー kaiyutei00038）。横長に切り出しても2頭の顔が入る高さに寄せる（10/30 LEOSENSE角田さん、候補A〜Cから「Bで」。それまでの膝の上の2頭〔kaiyutei00030〕は奥の子の顔と飼い主の手が見づらかった） */
.kv--plans img{object-position:50% 30%}
/* 記念日・お祝い：夕日の三河湾を眺める愛犬2頭の後ろ姿（アンバサダー kaiyutei00032）。横長の枠では下寄せにして2頭とおそろいのリボンを入れる。頭の上端は写真の上から約51%（10/30 LEOSENSE角田さん「32番」） */
.kv--anniv img{object-position:50% 70%}
/* 2000px以上の幅では写真がさらに拡大されるので、頭の上の余白を保つため上に寄せる（10/30 角田さん「PCの幅によっては少しだけ頭が切れる」） */
@media(min-width:2000px){.kv--anniv img{object-position:50% 62%}}
/* 撮影メモ（実装時は削除する内部注記） */
.kv .kvnote{position:absolute;right:14px;bottom:14px;z-index:2;max-width:min(440px,52vw);padding:8px 13px;border-radius:var(--r-s);background:rgba(255,253,248,.88);color:var(--soft);font-size:.66rem;font-weight:700;line-height:1.75;text-align:left}
@media(max-width:720px){
.kv{height:240px}
.kv .kvnote{font-size:.6rem;padding:7px 10px;max-width:70vw;right:10px;bottom:10px}
}
/* 4-x 一日セクション（.p1）
「海遊亭で過ごす一日」の場面を、写真とテキストを左右交互に並べて見せる。
本体のレイアウト定義はここに置き、ページ側にCSSを書かない */
/* 2カラムの並び（.dg2）：写真とテキストを左右に置く。スマホでは1列に積む */
.dg2{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
/* 中身の高さが違う2つを並べるときは上をそろえる（中央揃えだと見出しの位置がずれる） */
.dg2--top{align-items:start}
/* 2列の区画の文章の欄に添える小さめの写真（お風呂：大浴場の区画のサウナ）。10/27 海遊亭様「サウナの画像欲しい。館内 292 はどうか（ちょっと加工）」→ LEOSENSE角田さん「案Bで反映して」。
写真は素材「館内」の _YA_0292 を、天井の上側を切り、暗く暖かい色に整えたもの（比較画像 tools/photos-src/sheet/sauna_edit_1027.jpg） */
.dg2 .subph{margin:20px 0 0}
.dg2 .subph img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.dg2 .subph figcaption{font-size:14px;color:var(--soft);margin-top:6px}
/* 10/27 LEOSENSE角田さん「PCからだとズレてる」（大浴場の写真が右の列の高さの中央に置かれ、サウナの写真と上下がずれていた）。
文章（.bathtx）を上にまとめ、大浴場とサウナの写真を同じ大きさで横に並べて、どちらにも説明を付ける */
.bathtx{margin-bottom:24px}
.dg2--ph{align-items:start}
.dg2--ph .subph{margin:0}
@media(max-width:920px){.dg2{grid-template-columns:1fr!important}}
/* ─ 海遊亭で過ごす一日（トップ内蔵・案1-B）─ */
.p1{position:relative;max-width:1000px;margin:0 auto;padding:20px 26px 30px}
.p1 .sc{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:44px 0;align-items:center}
.p1 .sc:nth-child(even) .tx{order:2;text-align:left}
.p1 .sc:nth-child(even) .imw{order:1}
.p1 .sc:nth-child(odd) .tx{text-align:right}
.p1 .tx h3{font-family:var(--serif);font-weight:600;font-size:1.45rem;margin:4px 0 2px}
.p1 .tx .cp2{margin-bottom:8px}
.p1 .tx p{font-size:.88rem;color:var(--soft)}
.p1 .tx .val{margin-bottom:8px}
.p1 .tx .xl{margin-top:10px;display:inline-block}
.p1 .imw img,.p1 .imw .shot{border-radius:14px;width:100%;height:250px;object-fit:cover;min-height:250px}
.p1 .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.p1 .reveal.on{opacity:1;transform:none}
@media(max-width:820px){
.p1 .sc{grid-template-columns:1fr;gap:14px;padding:30px 0}
.p1 .sc:nth-child(odd) .tx{text-align:left}
.p1 .sc:nth-child(even) .tx{order:1}.p1 .sc:nth-child(even) .imw{order:2}
.p1 .imw img,.p1 .imw .shot{height:200px;min-height:200px}
}
@media (prefers-reduced-motion:reduce){
.p1 .reveal{opacity:1;transform:none;transition:none}
}
@media(max-width:720px){
/* SPは全場面とも見出し右上に小さく（下方向の見切れ防止） */
}
.hero .slide .fvshot{position:absolute;inset:0;background:var(--bg-alt);display:flex;align-items:flex-start;justify-content:center;padding:140px 40px 0} /* 説明ボックスは上部に寄せ、中央のキャッチと重ねない */
.hero .slide .fvshot b{max-width:540px;border:2px dashed color-mix(in srgb,var(--soft) 50%,#fff);border-radius:14px;padding:26px 30px;color:var(--soft);font-size:.92rem;font-weight:700;line-height:2;text-align:center}
/* スライドごとの価値ラベル（写真と1対1で紐付け・写真と一緒にフェード） */
.hero .slb{position:absolute;left:30px;bottom:44px;z-index:2;color:var(--c-ivory);font-size:.82rem;font-weight:700;letter-spacing:.12em;padding-left:12px;border-left:2px solid rgba(255,253,248,.85);text-shadow:0 1px 3px rgba(30,20,8,.5),0 2px 14px rgba(30,20,8,.35)}
.hero .im::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(93,74,51,0) 30%,rgba(60,42,20,.16) 62%,rgba(50,34,16,.62))} /* 下側はキャッチの下の暗がり。上側のヘッダー用の暗がりは、ヘッダーを写真から切り離したため外した（10/1） */
.hero .im .ov{position:absolute;left:24px;right:24px;bottom:230px;z-index:2;text-align:center;color:var(--c-ivory);text-shadow:0 2px 26px rgba(50,32,10,.6)}
.hero .ov .top{font-weight:700;font-size:.9rem;letter-spacing:.1em}
.hero .ov h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.4rem);margin:10px 0 12px;line-height:1.8}
.hero .ov p{color:var(--c-ivory);font-size:.92rem;max-width:38em;margin:0 auto;opacity:.95}
.kw{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.hero .kw span{background:rgba(255,253,248,.2);border:1px solid rgba(255,253,248,.55);color:var(--c-ivory);backdrop-filter:blur(4px)}
.kw span{background:var(--chip);border:1px solid var(--line);font-size:.78rem;font-weight:700;padding:6px 14px;border-radius:999px}
/* トップのヘッダーは、写真に重ねず、ほかのページと同じクリームの地にする（2026-10-01、Aqxis多田さんのご提案）。
写真を差し替えても文字の見え方が変わらないようにするため。以前の、写真に重ねてスクロールで地を出す指定（.page-top）は削除した */
/* 空室検索ウィジェット：日付・人数を入れてから予約番へ渡す（改善1・5） */
/* 見出し行（.row1）は外し、フォーム1行＋メリット1行だけの薄いパネルにする（9/23） */
.fvpanel{position:absolute;left:50%;bottom:66px;transform:translateX(-50%);z-index:3;width:min(760px,calc(100% - 40px));background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:14px 20px 15px;box-shadow:0 12px 40px rgba(50,34,16,.25)}
.fvpanel .row1{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.8rem;margin-bottom:10px;flex-wrap:wrap}
.fvpanel .row1 .lb{font-weight:700;font-size:.9rem}
.fvpanel .row1 .rnote{font-size:.78rem;color:var(--soft)}
/* 狭い端末では見出し行が2行に折れてFVの高さを崩すため落とす（読み上げ用のラベルは各選択肢に付けてある） */
@media(max-width:389px){.fvpanel .row1 .rnote{display:none}}
.fvpanel .row1 .perk b{color:var(--accent)}
.fvpanel form{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
/* 入力欄はラベルを上に置く（選択肢には数字だけを入れ、項目名はラベルで示す） */
.fvf{display:flex;flex-direction:column;gap:5px;flex:1 1 0;min-width:0}
.fvf--date{flex:1.4 1 0}
.fvf--guests{flex:2.1 1 0}
.fvf>label{font-size:.78rem;font-weight:700;color:var(--soft);line-height:1.5;white-space:nowrap}
.fvf .fld{width:100%}
.fvpanel .fld{height:42px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:0 12px;font-size:.85rem;font-family:var(--sans);color:var(--ink)}
.fvpanel .dsel-t{height:42px;padding:0 12px}
.fvpanel .btn{height:42px}
.fvpanel .btn{padding:10px 28px;font-size:.86rem;box-shadow:none;border:none;cursor:pointer;font-family:var(--sans)}
/* 条件の要点1行：検索パネルの下に静かに置く（改善5） */
.fvcond{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:3;font-size:.78rem;color:var(--c-ivory);text-shadow:0 1px 12px rgba(50,32,10,.6);white-space:nowrap}
.fvcond a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* 下層ページの頭 */
.phead{background:var(--bg-alt);padding:56px 0 46px;border-bottom:1px solid var(--line)}
.phead h1{font-family:var(--serif);color:var(--head);font-weight:600;font-size:clamp(1.5rem,3vw,1.9rem)}
.phead .lead{margin-top:8px}
.crumb{font-size:.78rem;color:var(--soft);margin-bottom:14px}
/* 予約導線ブロック：特典→CTA（共通部品）
ブランド色のボーダーは使わない（枠線は中立の罫線色のみ。色はCTAボタン側で使う） */
.cta-band{max-width:640px;margin:44px auto 0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 30px;text-align:center}
.cta-band .perk{font-size:.86rem;margin-bottom:16px;line-height:1.9}
.cta-band .perk b{color:var(--accent);font-size:1.02rem}
/* 特典の一文は途中で不自然に折り返さない。
金額は語中で分かれないようにし、文全体は幅に余裕を持たせる */
.perk s,.perk b{white-space:nowrap}
/* 特典は1文で流さず、見出し＋項目の行に分ける。行の途中で金額だけが取り残されない */
.perk .ph2{display:block;font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--soft);margin-bottom:6px}
.perk .pi{display:block}
.perk s{color:var(--soft)}
.cta-band .sub{font-size:.78rem;color:var(--soft);margin-top:12px}
/* 予約ボタンの下に置く補助の導線。主ボタンと競合しないよう文字リンクで並べる */
.cta-band .ctal{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
/* カード・タイル */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tile{position:relative;border-radius:12px;overflow:hidden;height:280px;background:var(--card)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.tile:hover img{transform:scale(1.04)}
.tile .lb{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,rgba(93,74,51,.78));color:var(--c-ivory);padding:36px 16px 14px;text-align:center;font-weight:700}
.tile .lb small{display:block;font-size:.7rem;letter-spacing:.2em;opacity:.9;font-weight:500}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* カードは影で浮かせず、罫線と余白で区切る（スキル8） */
.cd{background:var(--card);border-radius:14px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column}
.cd .im{height:190px;overflow:hidden}
.cd .im img{width:100%;height:100%;object-fit:cover}
.cd .b{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}
.t{display:inline-block;align-self:flex-start;background:var(--chip);color:var(--ink);font-size:.78rem;font-weight:700;padding:4px 12px;border-radius:999px;margin-bottom:10px} /* 9/25 13px→14px（補助は14px以上のレギュレーション） */
.cd h3{font-family:var(--serif);color:var(--head);font-weight:700;font-size:1.12rem;margin-bottom:6px}
.cd p{font-size:.86rem;color:var(--soft)}
.cd .xl{margin-top:auto;padding-top:14px}
/* 4-x 一日の場面（.scn＝場面名／.scnote＝注意書き）
構成はAqxisのプロトタイプに合わせ、場面名・見出し・本文・導線の順で置く。
写真に文字は重ねない */
.scn{display:block;font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.18em;color:var(--soft)}
.scnote{margin-top:8px;font-size:.8rem;color:var(--soft)}
/* 4-x 歓迎の灯り（お迎え／お見送りの場面のタグ）
ブランドブック ルール3：オレンジは押させる色ではなく迎える色。
オレンジ淡の面に、オレンジの点をひとつ添える形に限定する */
.cp2--welcome{display:inline-block;background:var(--welcome-p);border-radius:var(--r-pill);padding:3px 18px 3px 14px;color:var(--ink);font-size:.95rem}
.cp2--welcome::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--welcome);margin-right:9px;vertical-align:middle}
/* お風呂・海の見出し：改訂版でブルーグレーが7色から外れたため、
ほかの見出しと同じウォームベージュの短い線に統一する（.ttl--sea は互換のため残す） */
.ttl--sea::after{background:var(--sign)}
/* 4-x 願望×客室カード（.wcombo）
「どんな時間を過ごしたいか」の写真と、その行き先の客室を1枚に束ねる。
願望と客室を1対1にして、対応で迷わせない。TOPでは2列×2段で置く */
.wcombo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.wc{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.wc .ph{position:relative;display:block;height:320px} /* 写真の有無に関わらず高さを揃える */
.wc .ph img{width:100%;height:100%;object-fit:cover;display:block}
/* 写真の上の文字は、文字の下に暗いグラデーションを敷いて基準のコントラスト比を保つ（カラーブック「写真の上の文字」）。
英語版では2〜3行になるため、グラデーションは写真全体ではなく文字の箱に持たせ、行数に合わせて伸ばす。
文字の真下は不透明度0.62で、白い写真の上でも4.7:1（10/1） */
.wc .ph .ov2{position:absolute;left:0;right:0;bottom:0;z-index:2;color:var(--c-ivory);padding:48px 20px 16px;background:linear-gradient(rgba(40,30,18,0),rgba(40,30,18,.62) 48px)}
.wc .ph .ov2 b{display:block;font-size:1.05rem;font-weight:700;line-height:1.8;text-shadow:0 1px 3px rgba(30,20,8,.5)}
.wc .shot2{position:absolute;inset:0;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;padding:20px}
.wc .shot2 b{border:2px dashed var(--c-beige);border-radius:var(--r-m);padding:16px 20px;color:var(--soft);font-size:.8rem;font-weight:700;line-height:2;text-align:center;max-width:420px}
.wc .bd{display:block;padding:20px 24px 22px}
.wc .tag2{display:inline-block;background:var(--chip);border-radius:var(--r-pill);font-size:.78rem;font-weight:700;padding:4px 14px}
.wc .bd h3{font-family:var(--serif);color:var(--head);font-weight:700;font-size:1.18rem;margin-top:6px}
.wc .bd p{font-size:.88rem;margin-top:8px;color:var(--ink)}
.wc .bd .xl{margin-top:10px;display:inline-block}
.wc:hover{border-color:var(--link)}
@media(max-width:720px){.wcombo{grid-template-columns:1fr;gap:16px}.wc .ph{height:220px}}
/* 4-x 公式予約のセクション（オレンジ淡の背景）
ブランドブック ルール3：面として使えるオレンジは淡色のみで、
公式予約のセクション背景に限る。ほかのセクションには広げない。
ネイビーの面はサイトで最下層の帯（フッター）だけ */
.sec--book{background:var(--welcome-p)}
.sec--book .ttl::after{background:var(--c-beige)} /* 見出し脇の短い線はウォームベージュで統一 */
.sec--book .off2{background:var(--card)}
.sec--book .mcell{background:var(--bg)}
/* 最下層の帯（フッター）：上のセクションとのあいだにウォームベージュの線（4px）を入れて分ける（カラーブック
「温かい画面から海の色へ移るときの段差を、やわらげるため」）。9/25に一度外したが、10/1にカラーブックに合わせて戻した（角田さん） */
/* 帯の中にオレンジは置かない（ボタン・リンクはアイボリー） */
.ftr .btn{background:var(--c-ivory);color:var(--c-navy)}
.ftr .btn:hover{background:var(--c-ivory);color:var(--c-navy-d)}
/* 公式予約コンポーネント（プロトタイプ準拠）：左＝見出し・説明・CTA、右＝メリット2枚を1枚の白カードに */
.off2{max-width:1020px;margin:28px auto 0;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:36px 40px;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.off2 h3{font-family:var(--serif);color:var(--head);font-weight:600;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.9;margin-bottom:10px}
@media(max-width:1199px){.off2 h3{font-weight:700}} /* 2vwで伸縮し、幅1199px以下では24px未満になるため太さ700 */
.off2 .body p{font-size:.9rem;color:var(--soft)}
.off2 .body .btn{margin-top:18px}
.off2 .subtel{font-size:.8rem;color:var(--soft);margin-top:14px}
.off2 .mcol{display:flex;flex-direction:column;gap:16px}
.mcell{background:var(--chip);border-radius:12px;padding:18px 22px}
.mcell h4{font-size:.95rem;color:var(--head-s);font-weight:700;margin-bottom:4px}
.mcell p{font-size:.84rem;color:var(--soft)}
@media(max-width:920px){.off2{grid-template-columns:1fr;padding:26px 20px;gap:24px}}
/* 公式予約コンポーネント：メリット2セル＋CTA行を1つの箱に（浮いたCTA箱を作らない） */
.offbox{max-width:780px;margin:30px auto 0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.offbox .cells{display:grid;grid-template-columns:1fr 1fr}
.offbox .cell{padding:26px 30px}
.offbox .cell+.cell{border-left:1px solid var(--line)}
.offbox .cell h3{font-family:var(--serif);color:var(--head);font-weight:700;font-size:1.05rem;margin:6px 0 6px}
.offbox .cell p{font-size:.86rem;color:var(--soft)}
.offbox .foot{border-top:1px solid var(--line);background:var(--chip);padding:24px 22px;text-align:center}
.offbox .foot .sub{font-size:.78rem;color:var(--ink);margin-top:10px}
@media(max-width:920px){
.offbox .cells{grid-template-columns:1fr}
.offbox .cell+.cell{border-left:none;border-top:1px solid var(--line)}
}
/* 過ごしたい時間の4分類（客室と宿泊プランの入口） */
.wants{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.want{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.want b{display:block;font-size:.85rem;margin-bottom:2px}
.want span{font-size:.78rem;color:var(--soft)}
.wants3{grid-template-columns:repeat(3,1fr)}
/* 複数CTAの並び（重なり防止はflexのgapで担保） */
.ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
@media(max-width:920px){.wants,.wants3{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.wants,.wants3{grid-template-columns:1fr}.ctas .btn{width:100%;text-align:center}}
/* テキストリンク：クレイ 深に下線（カラーブック「詳細ページへのリンク」）。矢印は下線から外す */
.xl{display:inline-block;font-size:.84rem;font-weight:700;color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.xl::after{content:"→";display:inline-block;margin-left:.3em;text-decoration:none}
.xl:hover{text-decoration-thickness:2px}
/* 帯写真 */
.band{position:relative;height:52vh;overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(93,74,51,.04),rgba(93,74,51,.38))}
.band .cp{position:absolute;left:0;right:0;bottom:12%;text-align:center;color:var(--c-ivory);z-index:2;font-family:var(--serif);font-weight:600;font-size:clamp(1.2rem,2.8vw,1.7rem);text-shadow:0 2px 22px rgba(60,40,10,.55)}
.band .cp small{display:block;font-family:var(--sans);font-weight:500;font-size:.84rem;margin-top:6px;opacity:.95}
/* 過ごし方タイムライン */
.tl{position:relative;margin:10px 0 0 6px;padding-left:34px;border-left:2px solid var(--c-clay)}
.step{position:relative;padding-bottom:52px}
.step::before{content:"";position:absolute;left:-42px;top:10px;width:14px;height:14px;border-radius:50%;background:var(--c-clay);box-shadow:0 0 0 4px var(--bg)}
.sec--alt .step::before{box-shadow:0 0 0 4px var(--bg-alt)}
.step time{font-family:var(--serif);font-weight:600;font-size:1.15rem;color:var(--accent)}
.step h3{font-family:var(--serif);color:var(--head);font-weight:700;font-size:1.1rem;margin:2px 0 6px}
.step p{font-size:.9rem;color:var(--soft);max-width:34em}
.step .im{max-width:460px;border-radius:12px;overflow:hidden;margin-top:14px}
.step .im img{width:100%;height:240px;object-fit:cover}
/* 撮影予定プレースホルダ（写真がまだ無い枠） */
.shot{background:var(--chip);border:2px dashed var(--c-beige);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--soft);font-size:.8rem;padding:18px;min-height:200px;gap:4px}
.shot::before{content:"PHOTO";font-size:.68rem;font-weight:700;letter-spacing:.3em;color:var(--soft)}
.shot[data-label]::before{content:attr(data-label)}
.shot b{color:var(--ink)}
.num{font-family:var(--serif);font-weight:600;font-size:1.3rem;color:var(--accent);letter-spacing:.1em;margin-bottom:6px}
.num::after{content:"";display:block;width:26px;height:2px;background:var(--c-clay);margin-top:6px}
.shot.sm{min-height:140px}
/* アンカーメニュー */
/* 表 */
/* ページ内リンクの着地点がヘッダーに隠れないようにする */
[id]{scroll-margin-top:calc(var(--hdr-h) + 18px)}
/* 比較表の客室名は、そのままその客室の説明へ移動できるようにする */
/* 2列のメニュー表は、金額の列を固定幅にして左右の重さをそろえる */
table.mnu th:last-child,table.mnu td:last-child{width:9em}
.cmp th a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cmp th a:hover{text-decoration-thickness:2px}
table{width:100%;border-collapse:collapse;background:var(--card);font-size:.86rem;border-radius:12px;overflow:hidden;border:1px solid var(--line-s)} /* 背景と区別がつくよう枠と見出しを一段濃く */
th,td{border:1px solid var(--line-s);padding:12px 14px;text-align:left;vertical-align:top} /* セルの区切りはウォームベージュ（罫線色では白地に埋もれて境目が見えないため） */
th{background:var(--chip);font-weight:700;white-space:nowrap}
/* 比較表の行見出し（客室名・プラン名のリンク）はカード地に。ベージュ淡の上のクレイは読みにくいため（9/27） */
.cmp tr:not(.hd) th{background:var(--card)}
.muted{color:var(--soft);font-size:.82rem}
/* 料金対比：通常価格は取り消し線で（スキル: 競合実例に基づく金額対比の見せ方） */
s{color:var(--soft);font-weight:500;text-decoration-thickness:1px}
/* 一日の場面表示の共通部品：価値タグ・添え時刻・場面コピー */
.val{display:inline-block;background:var(--chip);color:var(--ink);border:1px solid var(--line);font-size:.78rem;font-weight:700;padding:3px 12px;border-radius:999px}
.tmin{font-family:var(--sans);font-size:.78rem;color:var(--soft);font-weight:700;letter-spacing:.1em;margin-left:12px;vertical-align:2px}
.cp2{font-family:var(--serif);color:var(--ink);font-size:1rem;line-height:1.9}
/* FAQ */
.faq{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:14px}
.faq h3{font-size:.95rem;color:var(--head-s)}
.faq h3::before{content:"Q．";color:inherit;font-weight:700} /* オレンジは文字に使わない（10/1）。問いと同じクレイ 深 */
.faq p{font-size:.88rem;color:var(--ink);margin-top:4px} /* 長く読ませる回答は本文色（9/27、読みやすさの修正） */
.faq p::before{content:"A．";color:var(--ink);font-weight:700}
/* 囲みメモ（お客様向け補足） */
.info{background:var(--card);border:2px dashed var(--line);border-radius:12px;padding:20px 26px;font-size:.88rem;color:var(--soft);margin-top:22px}
.info b{color:var(--ink)}
/* 設計メモ（内部注記・デザイン対象外） */
.note{background:var(--note);border:1px dashed var(--note-bd);padding:8px 14px;font-size:.78rem;margin:18px 0 0;border-radius:4px;color:#26282b;line-height:1.8}
.note::before{content:"設計メモ｜";font-weight:700}
/* 伝達メモのポップ：レイアウトに影響しない浮き注記。クリックで開閉（デザイン対象外） */
.wrap{position:relative}
.pop{position:absolute;top:-14px;right:20px;z-index:6;background:#fff;border:1px solid var(--note-bd);color:#8a6d1f;font-size:.68rem;font-weight:700;padding:5px 12px;border-radius:999px;cursor:pointer;font-family:"Hiragino Kaku Gothic ProN",sans-serif;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.pop .bb{display:none;position:absolute;top:calc(100% + 8px);right:0;width:min(360px,82vw);background:var(--note);border:1px solid var(--note-bd);border-radius:10px;padding:12px 16px;font-size:.74rem;font-weight:400;line-height:1.9;text-align:left;color:#26282b;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.pop.open .bb{display:block}
@media(max-width:920px){.pop{right:14px}}
/* フッター */
.ftr{background:var(--ftrbg,var(--ink));color:var(--c-ivory);padding:60px 0 34px;font-size:.86rem;margin-top:0;border-top:4px solid var(--line-s)} /* 文字とリンクはアイボリー */
/* 上の端に三河湾の帯（10/27 海遊亭様「フッターのネイビーに透過性をもたせて、三河湾の景色を入れるのはどうか」→ LEOSENSE角田さん「三河湾の海の写真を使って」→ 比較画像 tools/photos-src/sheet/footer_bay_day_1027.jpg の推奨に決定）。
写真は素材「風景」の _YA_0601（水平線と小さな島）を横1920×縦640に切り出した images/footer/bay-band.jpg。帯の高さは PC 150〜240px・スマホ150px で、下へネイビーに溶かし、文字はネイビーの上に置く（読みやすさは前と同じ） */
.ftr{--band:clamp(150px,16vw,240px);padding-top:var(--band);background:linear-gradient(to bottom,rgba(var(--ftr-rgb),.18) 0,rgba(var(--ftr-rgb),.45) calc(var(--band) * .6),rgba(var(--ftr-rgb),.92) var(--band),var(--ftrbg) calc(var(--band) + 50px)) top/100% 100% no-repeat,url(/images/footer/bay-band.jpg) center calc(var(--band) / 2 - 16.67vw)/100% auto no-repeat,var(--ftrbg)}
@media(max-width:720px){.ftr{--band:150px;background-position:top,50% -75px,0 0;background-size:100% 100%,auto 300px,auto}}
.ftr .b img{height:88px;width:auto;filter:brightness(0) invert(1);opacity:.92}
.ftr nav{display:flex;gap:18px;flex-wrap:wrap;margin:20px 0;font-size:.82rem}
/* 帯の中のリンクのホバーはネイビー 深の面（カラーブック「海遊亭ネイビーの段階」）。余白の分だけ外へ広げ、並びは動かさない */
.ftr nav a{padding:2px 6px;margin:-2px -6px;border-radius:4px;transition:background .15s}
.ftr a:hover{color:var(--c-ivory);background:var(--c-navy-d);text-decoration:underline;text-underline-offset:4px}
/* 小さい行も薄くしない（不透明度0.65では4.19:1になり、4.5:1に届かないため。10/1） */
.ftr .sub{font-size:.78rem}
/* SP固定バー */
.spbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;grid-template-columns:1fr;gap:1px;background:var(--line);border-top:1px solid var(--line)}
.spbar a{background:var(--brand);color:var(--brand-ink);text-align:center;padding:14px 8px;font-weight:700;font-size:.9rem}
.spbar a.tel2{background:var(--card);color:var(--ink)} /* 10/26 「電話する」を外し、空室・予約の1本にした。ボタンの配置は②の確認後に決める */
.spbar a:not(.tel2):hover{background:var(--brand-d);text-decoration:underline;text-underline-offset:3px}
/* 検討用UI（デザイン対象外） */
/* 版の帯（.tag）は中身だけを読み取って確認パネルへ移すため、画面には出さない。
JavaScriptが動かない場合の保険として、素の状態でも左下に小さく出しておく */
.tag{position:fixed;left:10px;bottom:70px;z-index:40;background:#3b5bdb;color:#fff;font-size:.7rem;padding:6px 10px;border-radius:4px}
.theme-switch{display:none;position:fixed;right:10px;bottom:70px;z-index:40;background:#fff;border:1px solid #c9cdd3;border-radius:6px;padding:8px 10px;font-size:.72rem;box-shadow:0 2px 8px rgba(0,0,0,.12);color:#26282b;line-height:1.6;font-family:"Hiragino Kaku Gothic ProN",sans-serif}
.theme-switch .ts-title{font-weight:700;margin-bottom:6px}
.theme-switch button{display:flex;align-items:center;gap:6px;width:100%;text-align:left;border:1px solid #d5d7db;background:#fff;border-radius:4px;padding:4px 8px;margin-top:4px;font-size:.72rem;cursor:pointer;color:#26282b}
.theme-switch button.on{border-color:#3b5bdb;background:#eef1fb;font-weight:700}
.theme-switch .sw{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.15);flex:none}
@media(max-width:1240px){
.tel{display:none}
.nav{gap:14px;font-size:.83rem}
.hdr-in{gap:14px}
}
@media(max-width:920px){
.hero .im{height:min(64svh,560px)}
/* SPはキャッチを縦書きに切替（スキル10：文字サイズを落とさず狭い画面に収める。縦書きは1画面1箇所、SCROLLキューはPCのみ） */
/* 縦組みのキャッチは、右端からの位置指定ではなく余白で置く。
端に寄せる指定だと端末によって切れて見えるため、全幅の箱に右の余白を取り、
その内側に寄せる。切り欠きのある端末では安全領域の分だけさらに内側へ */
/* ヘッダーを写真から切り離したため、写真の上端からの距離は22px（画面上の位置は以前の84pxとほぼ同じ。10/1） */
.hero .im .ov{left:0;right:0;top:22px;bottom:auto;display:flex;justify-content:flex-end;text-align:left;
padding-right:calc(clamp(34px,11vw,64px) + env(safe-area-inset-right,0px));
padding-left:calc(20px + env(safe-area-inset-left,0px))}
.hero .slb{left:calc(clamp(16px,5vw,24px) + env(safe-area-inset-left,0px));bottom:70px;font-size:.74rem}
.hero .ov .top{display:none}
.hero .ov h1{writing-mode:vertical-rl;font-size:1.02rem;line-height:2.05;letter-spacing:.06em;margin:0;max-height:52svh;padding-right:2px} /* 実寸約18.5px。詰めたFV写真の中で「海辺のもう一つの我が家へ。」の下端が切れない寸法 */
.hero .ov p{display:none}
.hero .ov .kw{display:none}
.fvpanel{position:static;transform:none;width:auto;margin:-48px 16px 0}
.fvf--date{flex:1 1 calc(58% - 7px)}
.fvf--nights{flex:1 1 calc(42% - 7px)}
.fvf--guests{flex:1 1 100%}
.fvpanel form .btn{flex:1 1 100%;min-width:0;padding:10px}
.fvcond{position:static;transform:none;white-space:normal;color:var(--soft);text-shadow:none;text-align:center;margin:12px 16px 0}
.fvcond a{color:var(--link)}
/* SPはヘッダー高さとコントロール高さを変数ごと切り替える（個別paddingで調整しない） */
:root{--hdr-h:62px;--ctl-h:36px;--pad-x:12px}
body{font-size:16px}
/* ヘッダーは何を足しても画面幅を超えない（min-width:0で縮小を許可し、はみ出しを構造的に防ぐ） */
.hdr-in{gap:5px;min-width:0;overflow:hidden}
.brand{margin-right:auto;min-width:0}
.brand img{height:36px}
.avail{padding:0 10px;font-size:.78rem;min-width:0;letter-spacing:0}
.menu-btn{padding:0 4px}
.lang{display:inline-flex;padding:0 8px;font-size:.72rem;letter-spacing:0}
.nav{display:none}
/* ドロワーはヘッダー直下に隙間なく貼り付き、画面幅いっぱいのシートとして開く */
.nav.open{display:flex;position:fixed;top:var(--hdrb,var(--hdr-h));left:0;right:0;max-height:calc(100svh - var(--hdrb,var(--hdr-h)) - 62px);overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg);border:none;border-top:1px solid var(--line);border-radius:0;flex-direction:column;align-items:stretch;text-align:left;gap:0;padding:2px 22px 18px;box-shadow:0 16px 32px rgba(93,74,51,.16)}
.nav.open a{padding:15px 2px;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.6}
.nav.open a:last-child{border-bottom:none}
.menu-btn{display:inline-flex;order:10} /* ハンバーガーはヘッダーの一番右へ */
table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 2〜3列の表は画面幅に収めて折り返す（横スクロールにしない）。
列数が多く収まらない比較表だけ .cmp でカードに組み替える */
table{display:table;overflow:visible}
th,td{white-space:normal;padding:10px 12px}
/* 見出しの列は内容ぴったりにして折り返さない（固定幅だと「備品・アメニティ」のような見出しが1文字ずつ折れる） */
th{width:1%;white-space:nowrap;font-size:.82rem}
table.mnu th{width:auto;white-space:normal}
/* 品名が長いメニュー表（.mnu）は、品名の列に幅を残し、単位と金額を折り返さない */
table.mnu th{width:auto}
table.mnu td:last-child{white-space:nowrap}
td{font-size:.84rem}
/* 比較表のカード組み替えは、下の 960px のブロックにまとめている */
.tiles,.cards{grid-template-columns:1fr!important} /* ページ側のインライン列指定（2〜3列）よりSPの1列を優先 */
.tile{height:220px}
.hero .im{height:52vh}
.hero .card{margin:-56px 18px 0;padding:28px 22px}
.band{height:40vh}
.sec{padding:60px 0}
.spbar{display:grid;padding-bottom:env(safe-area-inset-bottom,0px)}
/* 画面下の固定バーにフッターの最終行が隠れないよう、本文の下に逃げをつくる */
body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
.ftr{padding-bottom:110px}
.theme-switch,.tag,.wtool,.wt-open{bottom:120px}
}
/* 比較表は、表のままだと「向いている旅」が3行になって行の高さがそろわないため、
960px以下で1室＝1カードに組み替える（表のままの下限は961px） */
@media(max-width:960px){
/* 比較表（.cmp）はSPで横スクロールをやめ、1室=1カードに組み替える */
/* tableの表組み計算を完全に外し、通常のブロック要素として幅100%に収める */
table.cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto;max-width:100%;box-sizing:border-box}
table.cmp{overflow:visible;border:none;background:transparent}
.cmp tbody{min-width:0}
.cmp tr{display:block;background:var(--card);border:1px solid var(--line-s);border-radius:12px;margin-bottom:14px;overflow:hidden}
.cmp tr.hd{display:none}
.cmp th{display:block;white-space:normal;border:none;padding:12px 16px;font-size:.95rem}
.cmp td{display:flex!important;gap:12px;white-space:normal;border:none;border-top:1px solid var(--line-s);padding:9px 16px}
.cmp td:last-child{min-width:0}
/* 項目名は最長の「向いている旅」が1行に収まる幅でそろえる */
.cmp td::before{content:attr(data-label);flex:none;width:6.4em;white-space:nowrap;font-size:.78rem;font-weight:700;color:var(--soft);padding-top:3px;line-height:1.6}
.cmp td br{display:none} /* 注記は改行せず同じ行に流す */
.cmp td .muted{display:inline}
.cmp tbody tr:not(.hd) th,.cmp tbody tr:not(.hd) td{height:auto;padding-top:9px;padding-bottom:9px}
.cmp td:nth-child(2),.cmp td:nth-child(3),.cmp td:nth-child(4),.cmp td:nth-child(5){white-space:normal;width:auto;text-align:left}
.cmp th,.cmp td{vertical-align:top}
}
@media screen and (min-height:1200px){.hero .im{height:620px}.band{height:430px}}
/* ============================================================
部品：予約番 埋め込み検索フォームのスキン（.bansearch）
キャディッシュ発行の「検索フォームの埋め込みタグ」（searchjs）が
書き出すHTML（form name="searchForm489ban"）の構造・クラスに
そのまま当たるように書いてある。実装時はデモの静的HTMLを
scriptタグ1行に置き換えるだけでこの見た目になる。
タグ側は装飾を一切持たないため、装飾の自由度は100%こちら側 */
.bansearch form{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;margin:0}
.bansearch dl{margin:0}
.bansearch dt{font-size:.78rem;font-weight:700;letter-spacing:.05em;color:var(--soft);margin-bottom:5px;white-space:nowrap}
.bansearch dd{margin:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bansearch .inbox_489ban{display:flex;gap:12px 16px;flex-wrap:wrap;align-items:flex-end}
.bansearch select{appearance:none;-webkit-appearance:none;background:var(--card) url('data:image/svg+xml;utf8,') no-repeat right 10px center;border:1px solid var(--line);border-radius:10px;padding:9px 28px 9px 12px;font-size:.85rem;font-family:var(--sans);color:var(--ink);cursor:pointer;line-height:1.5}
.bansearch select:focus{outline:2px solid var(--c-clay-d);outline-offset:1px} /* 淡いオレンジの枠は地との差が1.4:1しかなく見えにくいため（10/1） */
.bansearch dd>span{font-size:.78rem;color:var(--soft)}
.bansearch .date_489ban dd>label{font-size:.78rem;color:var(--soft);display:inline-flex;align-items:center;gap:4px;white-space:nowrap;cursor:pointer}
.bansearch input[type="checkbox"]{accent-color:var(--brand)}
/* 子供欄はタグ仕様で「0名固定・入力不可」のため表示しない */
.bansearch dl:has(.child_count),.bansearch .child_input{display:none}
.bansearch button[name="searchButton489ban"]{background:var(--brand);color:var(--brand-ink);border:none;border-radius:999px;font-family:var(--sans);font-weight:700;font-size:.86rem;letter-spacing:.04em;padding:11px 32px;cursor:pointer;transition:opacity .15s}
.bansearch button[name="searchButton489ban"]:hover{background:var(--brand-d);text-decoration:underline;text-underline-offset:3px}
/* 置き方A：FVパネル型（写真の上に重ねる半透明パネル。.fvpanelと同じ質感） */
.bansearch--panel{background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:16px 22px 18px;box-shadow:0 12px 40px rgba(50,34,16,.25)}
.bansearch--panel .row1{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.8rem;margin-bottom:10px;flex-wrap:wrap}
.bansearch--panel .row1 .lb{font-weight:700;font-size:.9rem}
/* 置き方B：セクション帯型（客室・プランページの末尾などに置く白カード） */
.bansearch--band{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 26px}
.bansearch--band .row1{font-size:.9rem;font-weight:700;margin-bottom:12px}
@media screen and (max-width:720px){
.bansearch form{gap:10px}
.bansearch dl,.bansearch .inbox_489ban{width:100%}
.bansearch .inbox_489ban dl{width:calc(50% - 5px)}
.bansearch .inbox_489ban{gap:10px}
.bansearch dd{flex-wrap:nowrap}
.bansearch .date_489ban dd{flex-wrap:wrap}
.bansearch select{width:auto;flex:1;min-width:0}
.bansearch .date_489ban select{flex:0 1 auto}
.bansearch button[name="searchButton489ban"]{width:100%;padding:13px 0}
}
/* ============================================================
部品：プラン詳細カード（.plx）
宿泊プランページの主力3プラン用。写真＋シーン名＋説明＋条件表＋料金＋予約CTA。
料金・プラン名は予約番の公開情報（2026年9月時点）に基づく */
.plx{display:flex;flex-direction:column;gap:36px}
.plx .pcard{display:grid;grid-template-columns:minmax(0,44%) 1fr;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.plx .ph{position:relative;min-height:320px}
.plx .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plx .ph .scene{position:absolute;left:14px;top:14px;background:rgba(255,253,248,.94);font-size:.78rem;font-weight:700;padding:6px 16px;border-radius:999px;color:var(--ink)}
.plx .bd{padding:26px 32px 26px}
.plx .bd h3{font-family:var(--serif);color:var(--head);font-size:1.3rem;font-weight:700;line-height:1.6}
.plx .oname{font-size:.78rem;color:var(--soft);margin-top:4px}
.plx .bd>p{font-size:.92rem;margin-top:12px}
.plx .facts{margin-top:16px;border-top:1px solid var(--line);font-size:.86rem}
.plx .facts>div{display:flex;gap:16px;padding:9px 2px;border-bottom:1px solid var(--line);line-height:1.8}
.plx .facts b{flex:none;width:6.5em;font-size:.78rem;color:var(--soft);font-weight:700;padding-top:2px}
.plx .price{display:flex;align-items:baseline;gap:10px;margin-top:16px;flex-wrap:wrap}
.plx .price b{font-size:1.5rem;line-height:1}
.plx .price .yen{font-size:.9rem;font-weight:700}
.plx .price .cond{font-size:.78rem;color:var(--soft)}
.plx .act{display:flex;gap:18px;align-items:center;margin-top:16px;flex-wrap:wrap}
.plx .act .btn{padding:12px 34px;font-size:.9rem}
@media screen and (max-width:720px){
.plx .pcard{grid-template-columns:1fr}
.plx .ph{min-height:0;height:220px}
.plx .bd{padding:20px 18px 22px}
.plx .facts b{width:5.5em}
}
/* 客室詳細カード（ゆらぎ3室）：写真スライダー（自動再生なし）＋間取りスロット */
.rdx .rph{position:relative;display:flex;min-height:0}
.rdx .rph img{position:static;inset:auto;width:100%;height:auto} /* .plx .ph img の全面絶対配置を打ち消す */
.rdx .rsl{display:flex;flex-direction:column;width:100%}
.rsl-main{position:relative;flex:1;min-height:300px;overflow:hidden;background:var(--bg-alt)} /* メイン写真がカードの縦余白を吸収する */
.rdx .rsl-main>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.rsl-main>img.on{opacity:1}
.rsl-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,253,248,.85);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .15s}
.rsl-btn:hover{background:#fff}
.rsl-btn svg{width:11px;height:18px}
.rsl-btn.prev{left:12px}
.rsl-btn.next{right:12px}
.rsl-btn.next svg{transform:scaleX(-1)}
.rsl-num{position:absolute;right:12px;bottom:10px;z-index:2;color:var(--c-ivory);font-size:.72rem;font-weight:700;letter-spacing:.08em;background:rgba(40,30,18,.66);padding:1px 9px;border-radius:var(--r-pill)} /* 枚数の表示は暗い小さな面に載せる。白い写真の上でも5.2:1（10/1） */
.rsl-thumbs{display:flex;gap:6px;padding:6px;background:var(--card);overflow-x:auto;-webkit-overflow-scrolling:touch}
.rsl-thumbs button{flex:none;width:76px;border:none;padding:0;background:none;cursor:pointer;border-radius:6px;overflow:hidden;opacity:.55;transition:opacity .15s;outline-offset:-2px}
.rsl-thumbs button img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.rsl-thumbs button.on{opacity:1;outline:2px solid var(--brand)}
/* キーボードで選んだときの枠はクレイ 深（選択中を示すオレンジの枠は地との差が2.0:1で、フォーカスと見分けにくいため。10/1） */
.rsl-thumbs button:focus-visible{outline:2px solid var(--c-clay-d);outline-offset:2px}
/* 離れ ゆらぎ3室の間取り図：写真の切り替えの最後の1枚と、サムネイルの列の最後の「間取り」（10/27 海遊亭様「ゆらぎの間取りイラストは付け加えますか？」→ LEOSENSE角田さん「案Aで」。
比較画像 tools/photos-src/sheet/yuragi_plan_1027.jpg。間取り図は素材「ゆらぎ」の201・203・204イラスト。白い地に全体を収める。10/17に削除した空き枠 .mad の位置に、中身を入れて戻した形） */
.rdx .rsl-main>img.plan{object-fit:contain;background:#fff;padding:14px}
.rsl-thumbs .rsl-plan{position:relative;background:#fff}
.rsl-thumbs .rsl-plan img{object-fit:contain;background:#fff}
.rsl-thumbs .rsl-plan span{position:absolute;left:0;right:0;bottom:0;font-size:.62rem;font-weight:700;line-height:1.7;color:var(--c-ivory);background:rgba(40,30,18,.66);text-align:center}
/* 小型版（和室3タイプ用） */
.rdx--s .pcard{grid-template-columns:minmax(0,40%) 1fr}
.rdx--s .bd{padding:20px 26px 20px}
.rdx--s .bd h3{font-size:1.1rem}
.rdx--s .bd>p{font-size:.88rem}
.rdx--s .facts{font-size:.82rem}
.rdx--s .rsl-main{min-height:240px}
.rdx--s .rsl-thumbs button{width:64px}
.rsl-thumbs .mad{flex:none;width:100px;border:2px dashed color-mix(in srgb,var(--soft) 45%,#fff);border-radius:6px;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px;color:var(--soft);font-size:.6rem;font-weight:700;line-height:1.6}
/* そのほかのプラン：1行リスト型 */
.plmini{border-top:1px solid var(--line)}
.plmini>div{display:grid;grid-template-columns:1fr auto auto;gap:8px 22px;align-items:center;padding:16px 2px;border-bottom:1px solid var(--line)}
.plmini h3{font-size:.98rem;font-weight:700}
.plmini p{font-size:.84rem;color:var(--soft);margin-top:2px}
.plmini .pr{font-size:.86rem;white-space:nowrap}
.plmini .pr b{font-size:1.1rem}
@media screen and (max-width:720px){
.plmini>div{grid-template-columns:1fr;gap:4px}
.plmini .pr{justify-self:start}
}
/* TOPプランカードの料金行 */
.cd .pln{font-size:.82rem;color:var(--soft);margin-top:8px}
.cd .pln b{font-size:1.05rem;color:var(--ink)}
@media(max-width:720px){
/* SPは.plx .phのグリッド前提（固定高・絶対配置）を全て解除し、通常フローで積む */
.rdx .pcard{display:block}
.rdx .rph{height:auto!important;min-height:0!important;position:static;display:block;overflow:visible}
.rdx .rsl{display:block}
.rdx .rsl-main,.rdx--s .rsl-main{position:relative;flex:none;aspect-ratio:3/2;min-height:0;height:auto}
.rdx .rsl-main>img{position:absolute;inset:0;width:100%;height:100%}
/* SPはサムネイルを横スクロール帯ではなくグリッドで折り返す（帯が潰れて1枚しか見えない問題の解消） */
.rdx .rsl-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;overflow:visible}
.rdx .rsl-thumbs button{width:100%}
.rdx .rsl-thumbs .mad{width:auto;font-size:.56rem;padding:3px}
.rsl-btn{width:34px;height:34px}
.rsl-num{bottom:8px;right:10px}
}
/* ============================================================
部品：お知らせ・Instagram（.igh／.igfeed／.nlist）
お知らせページはInstagramを主役に置く。公式アカウントの投稿をそのまま正方形で並べ、
1枚ずつ投稿へリンクする。日付や本文はサイト側では持たない */
.igh{display:flex;align-items:center;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:18px 22px;margin-bottom:28px}
.igh .ic{width:54px;height:54px;flex:none;border-radius:50%;background:var(--chip);border:1px solid var(--line-s);display:grid;place-items:center;font-size:.67rem;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.igh .m{flex:1;min-width:0}
.igh .m b{display:block;font-family:var(--serif);color:var(--head);font-weight:700;font-size:1.04rem}
.igh .m span{display:block;font-size:.8rem;color:var(--soft);margin-top:3px}
.igh .btn{flex:none;padding:12px 30px;font-size:.88rem}
.igfeed{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.igp{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--chip);container-type:inline-size}
.igp img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s,opacity .2s}
.igp:hover img{transform:scale(1.04);opacity:.92}
.igp .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:10px;font-size:.74rem;font-weight:700;line-height:1.7;color:var(--soft);border:1px dashed var(--c-beige)}
/* 実際の投稿の作り（ネイビーの帯・白文字・ピンクのラベル）をそのまま再現した枠。
投稿画像に文字が焼き込まれているため、サイト側の色ではなく投稿側の色を使う */
.igp .igtop{position:absolute;top:0;left:0;right:0;z-index:2;background:#1F3864;color:#fff;font-size:11px;font-size:4cqw;font-weight:700;text-align:center;padding:1.6cqw 1cqw;line-height:1.45;letter-spacing:.01em}
.igp .igtop--w{background:rgba(255,255,255,.96);color:#222}
.igp .igbtm{position:absolute;left:0;right:0;bottom:0;z-index:2;background:#1F3864;color:#fff;font-size:10px;font-size:3.5cqw;font-weight:700;text-align:center;padding:1.6cqw 1cqw;line-height:1.5}
.igp .ighrt{position:absolute;z-index:3;left:5cqw;top:26cqw;width:20cqw;height:20cqw;border-radius:50%;background:#EC5F8E;color:#fff;display:grid;place-items:center;text-align:center;font-size:9px;font-size:3.2cqw;font-weight:700;line-height:1.15}
.igp .ignm{position:absolute;z-index:3;left:4cqw;bottom:16cqw;background:#EC5F8E;color:#fff;border-radius:999px;padding:.8cqw 3cqw;font-size:9px;font-size:3.2cqw;font-weight:700}
.igp .igdt{position:absolute;z-index:3;right:2.5cqw;bottom:15cqw;color:#fff;font-size:9px;font-size:3cqw;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.igp .igmk{position:absolute;z-index:3;top:3cqw;right:3cqw;width:5cqw;height:5cqw;border:1.2px solid #fff;border-radius:2px;box-shadow:1px -1.4px 0 -.4px #fff,0 0 3px rgba(0,0,0,.35)}
.igp .igmk--v{border:none;width:0;height:0;border-left:5cqw solid #fff;border-top:3cqw solid transparent;border-bottom:3cqw solid transparent;border-radius:0;box-shadow:none;filter:drop-shadow(0 0 2px rgba(0,0,0,.4))}
.igp--info{background:#1F3864;display:grid;place-items:center;text-align:center;padding:6cqw}
.igp--info b{display:block;color:#fff;font-family:var(--serif);font-size:15px;font-size:7cqw;font-weight:600;line-height:1.35}
.igp--info span{display:block;color:#C9D6EC;font-size:9px;font-size:3.4cqw;font-weight:700;margin-top:2.5cqw;line-height:1.6}
.igmore{text-align:center;margin-top:26px}
.nlist{border-top:1px solid var(--line)}
.nrow{display:grid;grid-template-columns:100px 92px 1fr;gap:20px;align-items:center;padding:17px 4px;border-bottom:1px solid var(--line)}
.nrow .dt{font-size:.8rem;font-weight:700;color:var(--soft);white-space:nowrap}
.nrow .ct{font-size:.78rem;font-weight:700;color:var(--ink);background:var(--chip);border-radius:var(--r-pill);padding:4px 0;text-align:center}
.nrow .ct--media{background:var(--chip)} /* メディアのカテゴリタグはベージュ淡。オレンジ淡は公式予約の広い背景面と、歓迎の場面の小さなタグに限る（Aqxisフィードバック 優先度B-7） */
.nrow .tt{font-size:.9rem;color:var(--ink);font-weight:500;line-height:1.75}
.nrow a.tt{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.nrow a.tt:hover{text-decoration-thickness:2px}
@media(max-width:820px){.igfeed{gap:3px}.igp .ph{font-size:.66rem;padding:6px}}
@media(max-width:720px){
.igh{flex-wrap:wrap;gap:14px;padding:16px 18px}
.igh .m{flex:1 1 60%}
.igh .btn{width:100%;padding:12px 20px}
/* スマホ：日付の横にカテゴリの札を詰めて置き、タイトルは次の行へ。グリッドだと下の行のタイトルの長さで上の2欄が広がり、札の幅と位置が行ごとにずれたため flex に（10/30 LEOSENSE角田さん「スマホデザインが微妙」） */
.nrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:15px 2px}
.nrow .ct{padding:3px 12px;font-size:.74rem}
.nrow .tt{flex-basis:100%}
}
.igh .st{display:inline-block;margin-top:9px;font-size:.78rem;font-weight:700;color:var(--ink);background:var(--chip);border-radius:var(--r-pill);padding:4px 13px;line-height:1.6}
.igh .st--live{background:var(--chip)}
/* ベージュ 淡の面の文字は本文の色だけ（カラーブック）。.igh .m span の補足の色より強く指定する（10/1） */
.igh .m .st{color:var(--ink)}
/* ============================================================
部品：条件サマリー（.sums）／場面の詳細（.swx）
愛犬ページの冒頭で、迷わず判断できる数値を先に出す。
場面は .swx で写真を大きく見せる */
.sums{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:26px}
.sums .sm{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 14px;text-align:center}
.sums .sm b{display:block;font-family:var(--serif);color:var(--head);font-weight:700;font-size:1.06rem;line-height:1.5}
.sums .sm span{display:block;font-size:.78rem;color:var(--soft);margin-top:6px;line-height:1.7}
@media(max-width:920px){.sums{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(max-width:480px){.sums .sm{padding:13px 10px}.sums .sm b{font-size:.98rem;color:var(--head-s)}} /* 17.6pxになるためクレイ 深 */
/* 場面の詳細（.swx）＝左に大きな写真、右に5場面の見出し。見出しを選ぶと写真が入れ替わる。
ホームの一日は概要、愛犬とご宿泊のこの区画が詳細という関係なので、
写真を大きく取りつつ、5場面を一覧で見渡せる形にする */
.swx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
/* 左は1場面につき3枚。大きい1枚の下に小さい2枚を並べ、場面の全体と細部を同時に見せる */
.swph{position:sticky;top:calc(var(--hdr-h) + 20px);aspect-ratio:100/128}
.swph figure{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:3fr 2fr;gap:8px;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.swph figure.on{opacity:1;visibility:visible}
.swph figure>span{position:relative;overflow:hidden;border-radius:var(--r-m);background:var(--chip)}
.swph figure>span:first-child{grid-column:1 / -1}
.swph img{width:100%;height:100%;object-fit:cover;display:block}
.swph .shot{height:100%;min-height:0;border:none;border-radius:0;font-size:.72rem;padding:12px;gap:3px}
.swph figure>span:not(:first-child) .shot{font-size:.66rem;padding:8px}
.swph figure>span:not(:first-child) .shot::before{font-size:.58rem}
.swls{border-top:1px solid var(--line)}
.swit{border-bottom:1px solid var(--line)}
.swh{position:relative;display:flex;align-items:center;gap:14px;width:100%;background:none;border:none;cursor:pointer;padding:17px 34px 17px 4px;text-align:left;font-family:var(--serif);font-weight:600;color:var(--ink);font-size:1.1rem;line-height:1.6;border-radius:var(--r-s);transition:background .15s}
.swh:hover{color:var(--link);background:var(--bg-alt)}
/* 右端の山形で、開けることと開いている状態を示す */
.swh::after{content:"";position:absolute;right:11px;top:50%;width:8px;height:8px;border-right:1.6px solid var(--soft);border-bottom:1.6px solid var(--soft);transform:translateY(-70%) rotate(45deg);transition:transform .25s ease,border-color .15s}
.swit.on>.swh::after{transform:translateY(-25%) rotate(-135deg);border-color:var(--link)}
.swh:hover::after{border-color:var(--link)}
.swit.on>.swh{color:var(--head);font-weight:700} /* 開いている見出しは19.8px（スマホ18.7px）なので太さ700 */
.swh .swn{flex:none;width:28px;height:28px;border-radius:50%;background:var(--chip);color:var(--ink);font-family:var(--sans);font-size:.74rem;font-weight:700;display:grid;place-items:center;line-height:1}
.swit.on>.swh .swn{background:var(--brand);color:var(--brand-ink)}
.swb{display:none;padding:0 4px 22px 46px}
.swit.on>.swb{display:block}
.swb .catch{font-size:1rem;color:var(--ink);line-height:1.95;font-weight:600}
.swb p{font-size:.86rem;color:var(--soft);line-height:2.05;margin-top:10px}
.swb .xl{margin-top:14px;display:inline-block}
@media(max-width:820px){
.swx{grid-template-columns:1fr;gap:16px}
/* staticにすると写真の絶対配置の基準が外れて重なるため、relativeで基準を保つ */
.swph{position:relative;top:auto;scroll-margin-top:calc(var(--hdr-h) + 12px)}
/* 写真は開いている見出しのすぐ下（本文の上）に入る（10/27 上→下）。見出しはヘッダーの下に止まるように送る */
.swit>.swph{margin:2px 0 14px}
.swh{scroll-margin-top:calc(var(--hdr-h) + 8px)}
.swh{padding:15px 30px 15px 2px;font-size:1.04rem}
.swb{padding:0 2px 18px 42px}
.swph .shot{font-size:.68rem;padding:10px}
.swph figure>span:not(:first-child) .shot{font-size:.62rem;padding:6px}
}
@media (prefers-reduced-motion:reduce){.swph figure{transition:none}}
/* ============================================================
幅の狭い端末（389px以下）
ボタン文字を14px以上に保つと、ロゴ・EN・メニュー・予約の4つが収まらず
予約ボタンが切れる。文字を小さくするのではなく、ENを落として予約ボタンを残す。
English はフッターからも辿れる。iPhone SE / mini（375px）が主な対象 */
@media(max-width:389px){
.hdr-in{gap:4px;padding:0 8px}
.brand img{height:30px}
.lang{display:none}
.avail{padding:0 7px;font-size:.78rem}
.menu-btn{padding:0 2px}
}
/* ============================================================
12. ファーストビュー（1枚写真版） .hero.hero--one
写真1枚＋コンセプトのコピーを重ね、その下に検索パネル（公式予約の2つのメリット込み）、
さらに下に愛犬の宿泊条件を置く。スライドは使わない。
既存の .hero / .fvpanel / .fvcond の指定を上書きするため、メディアクエリより後に置く
============================================================ */
.hero--one .im{height:calc(min(78svh,660px) - var(--hdr-h) - var(--util-h) - 2px)} /* ヘッダーを写真から切り離した分（補助メニュー帯＋ヘッダー＋罫線2本＝111px）だけ写真を短くし、検索パネルより下の位置を変えない（10/1） */
.hero--one .im>img{width:100%;height:100%;object-fit:cover}
.hero--one .im .ov{bottom:84px}
/* 検索パネルは写真の下端に半分かかる位置で通常の流れに戻す（絶対配置をやめて高さの重なりを防ぐ） */
.hero--one .fvpanel{position:relative;left:auto;right:auto;bottom:auto;transform:none;width:min(860px,calc(100% - 2*var(--pad-x)));margin:-58px auto 0}
/* 公式予約の2つのメリット（短縮版） .perk2
ホームの長い説明（.off2）を繰り返さずに、要点だけを2列で置く部品。
.perk2--fv はファーストビューの検索パネルに入れる場合の体裁 */
.perk2{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;max-width:640px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 22px}
.perk2 .p2{font-size:.82rem;line-height:1.9;color:var(--soft)}
.perk2 .p2 b{color:var(--accent);font-weight:700}
.perk2 .p2 s{color:var(--soft)}
.perk2 .p2 i{display:block;font-style:normal;font-size:.78rem}
/* FV用は写真を圧迫しないよう1行に畳む（Aqxis多田さんの提案・9/23。補足も改行しない） */
.perk2--fv{max-width:none;background:none;border:none;border-top:1px solid var(--line);border-radius:0;padding:11px 0 0;margin-top:12px}
.perk2--fv .p2{font-size:.78rem;line-height:1.85}
.perk2--fv .p2 i{display:inline;font-size:.78rem;margin-left:6px}
/* 愛犬の宿泊条件はパネルの下、地色の上に置く */
.hero--one .fvcond{position:static;transform:none;white-space:normal;color:var(--soft);text-shadow:none;text-align:center;margin:14px auto 0;padding:0 var(--pad-x)}
.hero--one .fvcond a{color:var(--link)}
/* 撮影メモ（実装時は削除する内部注記） */
.hero--one .fvnote{position:absolute;right:14px;bottom:76px;z-index:2;max-width:min(460px,52vw);padding:8px 13px;border-radius:var(--r-s);background:rgba(255,253,248,.88);color:var(--soft);font-size:.66rem;font-weight:700;line-height:1.75;text-align:left}
@media(max-width:920px){
.hero--one .im{height:calc(min(46svh,420px) - var(--hdr-h) - 1px)} /* 写真・コピー・検索・メリット・条件の5つが1画面に収まる高さ。下部の固定バーに条件行が隠れないようにする。ヘッダー（62px＋罫線1px）の分は引く（10/1） */
.hero--one .im .ov{bottom:auto}
.hero--one .fvpanel{width:auto;margin:-48px 16px 0;padding:13px 16px 14px}
.hero--one .fvpanel .row1{margin-bottom:8px}
.hero--one .fvpanel .fld{height:40px;padding:0 10px}
.hero--one .fvpanel .dsel-t{height:40px;padding:0 10px}
.hero--one .fvpanel .btn{height:40px}
.hero--one .fvpanel form{gap:8px}
.hero--one .fvf{gap:3px}
.hero--one .fvf>label{font-size:.78rem}
.hero--one .perk2--fv{margin-top:10px;padding-top:10px;gap:4px}
/* メリット2行の行組み */
.hero--one .perk2--fv .p2{font-size:.78rem}
.hero--one .perk2--fv .p2 i{font-size:.78rem}
.hero--one .fvcond{margin-top:10px}
/* 縦組みのキャッチが右側にあるため、SPでは撮影メモを左下へ寄せる */
.hero--one .fvnote{font-size:.6rem;padding:7px 10px;max-width:60vw;left:10px;right:auto;bottom:58px}
}
@media(max-width:720px){
.perk2{grid-template-columns:1fr;gap:6px}
}
/* 狭い端末は写真をもう一段詰めて、5要素が1画面に収まる状態を保つ（iPhone SE / mini 相当） */
@media(max-width:389px){
.hero--one .im{height:calc(min(35svh,320px) - var(--hdr-h) - 1px)}
}
/* ============================================================
13. 冒頭の問いかけ（.ask）と、プランの探し方（.finds）
============================================================ */
/* 見出しの前に置く問いかけ。h1より小さく、地の文より少しだけ強い */
.ask{font-family:var(--serif);color:var(--head-s);font-size:.98rem;font-weight:600;letter-spacing:.04em;margin-bottom:10px}
/* 切り口からプランへ送る4つの入口 */
.finds{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.finds .fd{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:18px 18px 16px;transition:border-color .15s,box-shadow .15s,background-color .3s,transform .3s ease}
/* ホバーでは枠と影に加えて、地をアイボリーから白へ明るくし、カード全体をわずかに膨らませる */
.finds .fd:hover{border-color:var(--line-s);box-shadow:var(--sh-1);background:#fff;transform:scale(1.02)}
.finds .fd b{display:block;font-family:var(--serif);color:var(--head-s);font-weight:600;font-size:1rem;line-height:1.6}
.finds .fd span{display:block;font-size:.78rem;color:var(--soft);line-height:1.85;margin-top:8px}
/* 写真つきの入口（.finds--ph）。問いかけの4リンクを、行き先のイメージ写真とセットで見せる。
写真はイメージの仮当てで、実撮影後に差し替える。PCは写真の下に見出しと説明、
480px以下は正方形サムネイル＋見出しの横並びに畳む（説明は行き先のセクションで読める） */
.finds--ph .fd{padding:0;overflow:hidden;display:flex;flex-direction:column}
.finds--ph .fd .im{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt);margin:0}
.finds--ph .fd .im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,filter .5s ease}
.finds--ph .fd b{padding:13px 16px 0}
/* リンクであることは色ではなく、サイト共通の「→」（.xl と同じ流儀）で示す */
.finds--ph .fd b::after{content:" →";display:inline-block;transition:transform .2s ease}
/* ホバーで写真が緩やかに寄りながら少し明るくなり、矢印が進行方向へ動く（.im の overflow:hidden で枠は動かない） */
.finds--ph .fd:hover .im img{transform:scale(1.06);filter:brightness(1.05)}
.finds--ph .fd:hover b::after{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
.finds .fd,.finds--ph .fd .im img,.finds--ph .fd b::after{transition:none}
.finds .fd:hover,.finds--ph .fd:hover .im img,.finds--ph .fd:hover b::after{transform:none}
}
.finds--ph .fd span:not(.im){padding:0 16px 15px;margin-top:6px}
@media(max-width:920px){.finds{grid-template-columns:1fr 1fr;gap:10px}}
@media(max-width:480px){
.finds{grid-template-columns:1fr}
.finds--ph{gap:8px}
.finds--ph .fd{display:grid;grid-template-columns:86px 1fr;align-items:center}
.finds--ph .fd .im{aspect-ratio:auto;height:100%;min-height:64px;grid-row:1/3}
.finds--ph .fd b{padding:10px 14px 10px 14px}
.finds--ph .fd span:not(.im){display:none}
}
/* ============================================================
14. 料金の条件表示（.pricenote／.pn2／.perk .pn）
最低料金には、何名1室か・1名あたりか・含まれる内容・税込か・対象日の条件・変動する旨を必ず添える
（9/25からサイト全体で宿泊料金は非掲載。入湯税は当館が対象外のため記載しない）
============================================================ */
.pricenote{font-size:.8rem;color:var(--soft);line-height:1.95;margin:-14px 0 24px}
.pricenote b{color:var(--ink);font-weight:700}
/* 料金の後ろに添える短い注記。前の文から少し離して置く */
.pn2{display:inline-block;margin-left:8px;font-size:.78rem;color:var(--soft)}
.cd .pln .pn2{display:block;margin:2px 0 0}
/* 予約帯の中の小さな補足（現地精算など） */
.perk .pn{display:block;font-size:.78rem;color:var(--soft);font-weight:400}
/* ============================================================
15. 品目の一覧（.dishlist）
料金のない「何が出るか」の列挙に使う。品名と一言を縦に組み、2列で並べる
============================================================ */
.dishlist{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin-top:18px;border-top:1px solid var(--line)}
.dishlist>div{padding:13px 2px;border-bottom:1px solid var(--line)}
.dishlist b{display:block;font-size:.92rem;font-weight:700;color:var(--ink);line-height:1.7}
.dishlist span{display:block;font-size:.78rem;color:var(--soft);line-height:1.85;margin-top:3px}
@media(max-width:720px){.dishlist{grid-template-columns:1fr}}
/* ============================================================
16. 周辺スポットの一覧（.spots）
施設の写真を使わずに、所要時間・施設名・一言・愛犬の同伴条件だけを並べる。
写真の許諾が取れない施設が含まれるため、文字だけで成立する形にしている
============================================================ */
.spots{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.spots .sp{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px}
.spots .dist{display:inline-block;font-size:.78rem;font-weight:700;color:var(--ink);background:var(--chip);border-radius:var(--r-pill);padding:3px 11px;line-height:1.7}
.spots .sp b{display:block;font-family:var(--serif);color:var(--head-s);font-weight:600;font-size:1.02rem;line-height:1.6;margin-top:9px}
.spots .sp .d{display:block;font-size:.8rem;color:var(--soft);line-height:1.9;margin-top:5px}
.spots .sp .dog{display:block;font-size:.78rem;color:var(--ink);line-height:1.8;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
@media(max-width:720px){.spots{grid-template-columns:1fr;gap:10px}}
/* ============================================================
17. 実用ページの部品（アクセス・よくある質問・お問い合わせ）
============================================================ */
/* 分類への目次チップ（.jumps）：ページ内アンカーへ飛ぶ。よくある質問の冒頭で使用 */
.jumps{display:flex;flex-wrap:wrap;gap:10px}
.jumps a{background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 18px;font-size:.84rem;font-weight:700;color:var(--ink);transition:border-color .15s}
.jumps a:hover{border-color:var(--line-s);color:var(--link)}
/* 経路の流れ（.route）：駅→移動→宿を縦の流れで見せる。アクセスで使用 */
.route{max-width:520px}
.route .rt{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 18px}
.route .rt+.rt{margin-top:26px}
.route .rt+.rt::before{content:"";position:absolute;left:50%;top:-19px;width:2px;height:12px;background:var(--c-beige)}
.route .rt b{display:block;font-family:var(--serif);color:var(--head-s);font-weight:600;font-size:1rem;line-height:1.6}
.route .rt span{display:block;font-size:.78rem;color:var(--soft);line-height:1.85;margin-top:3px}
.route .rt--goal{border-color:var(--line-s);background:var(--c-beige-xp)}
/* お問い合わせフォーム（.cform）：見た目のみのワイヤー。実装はPages Functions＋Turnstile */
.cform{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;max-width:760px}
.cform .cf--full{grid-column:1/-1}
.cform label{display:block;font-size:.84rem;font-weight:700;margin-bottom:7px}
.cform label i{font-style:normal;font-size:.78rem;font-weight:700;color:var(--ink);background:var(--chip);border-radius:var(--r-pill);padding:2px 9px;margin-left:8px;vertical-align:1px}
.cform .fld{width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:.9rem;font-family:var(--sans);color:var(--ink)}
.cform textarea.fld{resize:vertical;line-height:1.9}
.cform .btn{border:none;cursor:pointer;font-family:var(--sans);padding:13px 34px}
@media(max-width:720px){.cform{grid-template-columns:1fr;gap:14px}}
/* ============================================================
18. 書体の切り替え（比較・検討用） html[data-font="maru"]
本文とUIの書体は、角ゴシック（Zen Kaku Gothic New）を既定にしている
（Aqxisフィードバック 優先度A-4-1）。採用前の丸ゴシックと見比べられるよう、
比較用の上書きを残す。右下のスイッチか ?font=maru で表示する。
文字サイズはレギュレーション（優先度B-8）として全体に適用済みのため、
ここでは書体（--sans）だけを差し替える。
確認が済んだら、このブロックと右下のスイッチをまとめて除去する
============================================================ */
html[data-font="maru"]{--sans:"Zen Maru Gothic",sans-serif}
/* ============================================================
24. ワイヤー確認用パネル（.wtool・公開前に除去）
版の切り替えと書体の切り替えを1枚にまとめたもの。
以前は版の帯を左下、書体スイッチを右下に置いていたが、
確認のたびに視線が左右へ往復するため1か所に集めた。
サイトの見た目と混ざらないよう、色も書体もサイト側のトークンを使わない
============================================================ */
.wtool{position:fixed;left:10px;bottom:70px;z-index:40;background:#fff;border:1px solid #c9cdd3;border-radius:6px;font-size:12px;line-height:1.6;color:#26282b;font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.14);width:246px;max-width:calc(100vw - 20px);overflow:hidden}
.wtool .wt-head{display:flex;align-items:center;gap:7px;width:100%;border:none;background:#3b5bdb;color:#fff;font-family:inherit;font-size:12px;font-weight:700;padding:7px 30px 7px 10px;cursor:pointer;text-align:left}
.wtool .wt-head:hover{background:#3550c4}
.wtool .wt-ttl{flex:none}
.wtool .wt-now{margin-left:auto;font-weight:400;font-size:11px;color:#dbe2fb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wtool .wt-chev{flex:none;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #fff;transition:transform .15s}
.wtool.closed .wt-chev{transform:rotate(-90deg)}
.wtool.closed .wt-body{display:none}
.wtool .wt-body{padding:2px 10px 10px}
/* 版と書体は別の区画にして、罫線で切る */
.wtool .wt-sec{padding:8px 0;border-bottom:1px solid #e3e5e8}
.wtool .wt-lbl{font-weight:700;color:#5b6067;margin-bottom:5px}
.wtool .wt-cur{color:#26282b;margin-bottom:5px}
.wtool .wt-link{display:inline-block;color:#3b5bdb;text-decoration:underline;font-weight:700}
.wtool .wt-sec button{display:block;width:100%;text-align:left;border:1px solid #d5d7db;background:#fff;border-radius:4px;padding:5px 8px;margin-top:4px;font-size:12px;cursor:pointer;color:#26282b;font-family:inherit}
.wtool .wt-sec button.on{border-color:#3b5bdb;background:#eef1fb;font-weight:700}
.wtool .wt-sample{margin-top:8px;padding:6px 8px;border:1px solid #e3e5e8;border-radius:4px;background:#fafbfc;text-align:center;line-height:1.3}
.wtool .wt-sample b{display:block;font-size:26px;font-weight:500;color:#26282b}
.wtool .wt-sample span{display:block;font-size:11px;color:#5b6067;margin-top:2px}
.wtool .wt-fv .wt-range{display:block;margin:6px 0 0;font-size:12px;color:#3c4047}
.wtool .wt-fv .wt-range span{display:block}
.wtool .wt-fv .wt-range input{width:100%}
.wtool .wt-fv .wt-fvout{margin-top:6px;font-size:11px;line-height:1.5;color:#26282b;background:#fafbfc;border:1px solid #e3e5e8;border-radius:4px;padding:4px 6px}
.wtool .wt-note{padding-top:8px;color:#5b6067;line-height:1.5}
/* 閉じるボタンは見出しの上に重ねる（見出し自体が開閉のボタンのため入れ子にできない） */
.wtool .wt-x{position:absolute;right:4px;top:5px;width:20px;height:20px;border:none;background:none;cursor:pointer;padding:0}
.wtool .wt-x::before,.wtool .wt-x::after{content:"";position:absolute;left:4px;top:9px;width:12px;height:1.6px;background:#fff;border-radius:1px}
.wtool .wt-x::before{transform:rotate(45deg)}
.wtool .wt-x::after{transform:rotate(-45deg)}
.wt-open{position:fixed;left:10px;bottom:70px;z-index:40;display:none;background:#3b5bdb;color:#fff;border:none;border-radius:4px;font-size:.66rem;font-weight:700;letter-spacing:.04em;padding:5px 9px;cursor:pointer;font-family:"Helvetica Neue",Arial,sans-serif;opacity:.85}
.wt-open:hover{opacity:1}
body.tag-off .wtool{display:none}
body.tag-off .wt-open{display:block}
@media(max-width:920px){
/* 下の固定バーに重ならない位置へ逃がし、幅も一段小さくする */
.wtool{bottom:120px;width:210px}
.wtool .wt-head{font-size:11px;padding:6px 26px 6px 8px}
.wtool .wt-now{font-size:10px}
.wtool .wt-body{padding:2px 8px 8px}
.wtool .wt-sec button{font-size:11px;padding:4px 7px}
.wtool .wt-sample b{font-size:22px}
}
/* ============================================================
19. ドロップダウン（.dsel）
ネイティブの select はOS任せの見た目になり、プレビューのエミュレーション
では選択肢が離れた位置に描かれる。ブランドの見た目で統一するため、
design.js が select.fld を実行時にこの部品へ置き換える（値は元のselectと同期）。
実装時の注意：FVの検索は予約番の埋め込みタグへ置き換える前提。
本番でこの部品を残す場合は、フォーカストラップとスクリーンリーダー確認を行う
============================================================ */
.dsel{position:relative}
.fvpanel .dsel{width:100%;min-width:0}
.cform .dsel{width:100%}
.dsel .fld{display:none} /* 元のselectは値の器として残す */
.dsel-t{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:.85rem;font-family:var(--sans);color:var(--ink);cursor:pointer;text-align:left}
.cform .dsel-t{padding:11px 13px;font-size:.9rem}
.dsel-t:hover{border-color:var(--line-s)}
.dsel.open .dsel-t{border-color:var(--c-clay);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-clay) 14%,transparent)}
.dsel-t svg{flex:none;width:12px;height:12px;color:var(--soft);transition:transform .15s}
.dsel.open .dsel-t svg{transform:rotate(180deg)}
.dsel-l{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-2);padding:6px;max-height:264px;overflow:auto;display:none}
.dsel.open .dsel-l{display:block}
.dsel.up .dsel-l{top:auto;bottom:calc(100% + 6px)} /* 画面下端では上に開く */
.dsel-o{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;border:none;background:none;border-radius:8px;padding:9px 11px;font-size:.85rem;font-family:var(--sans);color:var(--ink);cursor:pointer;line-height:1.7}
.dsel-o:hover,.dsel-o.hl{background:var(--bg-alt)}
.dsel-o[aria-selected="true"]{background:var(--chip);font-weight:700}
.dsel-o .ck{flex:none;width:14px;height:14px;color:var(--accent);visibility:hidden}
.dsel-o[aria-selected="true"] .ck{visibility:visible}
.dsel-t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* スマホでは、日付・泊数・大人男性・大人女性の4つが必ず2列2段に並ぶようにする
（min-width指定のままだと端数で1列4段に折れ、ファーストビューの高さが崩れる） */
@media(max-width:920px){
.fvpanel .dsel{flex:1 1 auto;min-width:0}
}
/* ============================================================
20. 人数・部屋数をまとめて選ぶ部品（.gsel）
欄には「大人2名 子供0名 1室」と要約を出し、押すと中で増減できる。
子供は予約番と同じ5区分（小学生／幼児の4種）。値は非表示のinputが持つ。
選択肢を1つずつ開くより、家族連れが一度に人数を組み立てられる形を優先した
============================================================ */
.gsel{position:relative}
.gsel-t{display:flex;align-items:center;gap:8px;width:100%;height:42px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:0 12px;font-size:.85rem;font-family:var(--sans);color:var(--ink);cursor:pointer;text-align:left}
.gsel-t:hover{border-color:var(--line-s)}
.gsel.open .gsel-t{border-color:var(--c-clay);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-clay) 14%,transparent)}
.gs-ico{flex:none;width:15px;height:15px;border-radius:50%;border:2px solid var(--soft);position:relative}
.gs-ico::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);width:5px;height:5px;border-radius:50%;background:var(--soft);box-shadow:0 5px 0 -1px var(--soft)}
.gs-sum{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-chev2{flex:none;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--soft);transition:transform .15s}
.gsel.open .gs-chev2{transform:rotate(180deg)}
/* 中身 */
.gsel-p{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:max(100%,min(370px,88vw));background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-2);padding:6px 14px 14px;display:none;overflow:auto;overscroll-behavior:contain}
.gsel.open .gsel-p{display:block}
.gsel.up .gsel-p{top:auto;bottom:calc(100% + 6px)}
/* 上下どちらにも入りきらないときは、画面中央のシートにして全部見せる（HISの選び方を参考） */
.gsel-bd{position:fixed;inset:0;z-index:69;background:rgba(48,36,20,.34);display:none}
.gsel-bd.on{display:block}
.gsel-p.as-sheet.open-sheet{display:block;position:fixed;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);z-index:70;width:min(420px,calc(100vw - 28px));max-height:min(92svh,680px);border-radius:16px;padding:8px 18px 16px}
.gsel-p.as-sheet:not(.open-sheet){display:none}
.gsel-p.as-sheet .gs-ok{bottom:-16px;box-shadow:0 -12px 14px var(--card)}
.gsel-r{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.gsel-r:last-of-type{border-bottom:none}
.gs-l{min-width:0}
.gs-l b{display:block;font-size:.86rem;font-weight:700;color:var(--ink);line-height:1.45}
.gs-l i{display:block;font-style:normal;font-size:.78rem;color:var(--soft);line-height:1.45}
/* 増減 */
.stp{flex:none;display:flex;align-items:center;gap:10px}
.stp-b{width:27px;height:27px;flex:none;border:1px solid var(--line-s);background:var(--bg);border-radius:50%;color:var(--ink);font-size:.95rem;line-height:1;cursor:pointer;font-family:var(--sans);display:grid;place-items:center}
.stp-b:hover:not(:disabled){background:var(--chip)}
.stp-b:disabled{opacity:.35;cursor:default}
.stp-n{min-width:3em;text-align:center;font-size:.86rem;font-weight:700;white-space:nowrap}
/* 子供の区分：小学生は平の行、幼児は4区分をひとまとめにする（じゃらん・HISの見せ方を参考） */
.gs-more{display:flex;align-items:center;gap:7px;border:none;background:none;padding:4px 0;font-size:.82rem;font-family:var(--sans);color:var(--link);cursor:pointer;font-weight:700}
.gs-chev{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--link);transition:transform .15s}
.gs-more.up .gs-chev{transform:rotate(180deg)}
.gsel-kids{display:none}
.gsel-kids.open{display:block;margin-bottom:2px}
/* 小学生（1行だけ）：枠で囲まず、ラベルと補足を1行にまとめる */
.gsel-r--flat{padding:6px 0;border-bottom:none}
.gsel-r--flat .gs-l b{display:inline;font-size:.84rem;font-weight:700;color:var(--ink)}
.gsel-r--flat .gs-l i{display:inline;font-size:.78rem;margin-left:7px;white-space:nowrap}
@media(max-width:480px){
/* 狭い画面では補足を次の行に落とし、ラベルが途中で折れないようにする */
.gsel-r--flat .gs-l i{display:block;margin-left:0}
}
/* 幼児（4区分） */
.gs-grp{background:var(--bg-alt);border-radius:var(--r-m);padding:2px 12px 6px;margin:4px 0 6px}
.gs-grp-t{font-size:.78rem;font-weight:700;color:var(--soft);padding:7px 0 1px}
.gs-grp .gsel-r{padding:4px 0;border-bottom:none}
.gs-grp .gsel-r+.gsel-r{border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.gsel-r--sub .gs-l b{font-size:.82rem;font-weight:400;color:var(--soft);white-space:nowrap;line-height:1.5}
.gsel-r--kid{border-bottom:none;padding-bottom:2px}
/* 注記 */
.gs-note{font-size:.78rem;color:var(--soft);line-height:1.6;padding-top:9px;border-top:1px solid var(--line);margin-top:2px}
/* 決定 */
.gs-ok{position:sticky;bottom:-14px;width:100%;margin-top:10px;background:var(--brand);color:var(--brand-ink);font-weight:700;border:none;border-radius:var(--r-pill);padding:12px;font-size:.9rem;font-family:var(--sans);cursor:pointer;box-shadow:0 -10px 12px var(--card)}
.gs-ok:hover{background:var(--brand-d);text-decoration:underline;text-underline-offset:3px}
@media(max-width:920px){
.gsel-t{height:40px;padding:0 10px}
.gsel-p{left:0;right:0;width:auto}
.gs-grp{padding:4px 10px 8px}
.stp{gap:8px}
.stp-n{min-width:2.8em}
}
/* ============================================================
22. 比較表（table.cmp）の整え
.cmp--rooms は客室の比較表だけに付ける修飾で、列の並びが
「客室／広さ／定員／愛犬／お風呂／向いている旅」であることを前提にしている。
広さ・定員・愛犬は短い事実なので折り返さない。列が狭くて
「2〜6／名」のように途中で折れ、行ごとに高さが変わっていたため。
行の高さは2行分でそろえ、内容が1行の行も同じ高さにする。
品目の一覧など、列の意味が違う表には付けない
============================================================ */
.cmp{table-layout:auto}
.cmp thead th,.cmp tr.hd th{white-space:nowrap}
/* 広さ・定員・愛犬：中身が短いので折り返さず、幅も内容に合わせる */
.cmp--rooms td:nth-child(2),.cmp--rooms td:nth-child(3),.cmp--rooms td:nth-child(4){white-space:nowrap;width:1%}
.cmp--rooms tr.hd th:nth-child(2),.cmp--rooms tr.hd th:nth-child(3),.cmp--rooms tr.hd th:nth-child(4){width:1%}
/* 愛犬の可否は中央に置いて視線をそろえる */
.cmp--rooms td:nth-child(4),.cmp--rooms tr.hd th:nth-child(4){text-align:center}
/* 行ごとに1px差が出ないよう、セルの高さを直接そろえて上下中央に置く */
.cmp--rooms tbody tr:not(.hd) th,.cmp--rooms tbody tr:not(.hd) td{height:88px;padding-top:10px;padding-bottom:10px}
.cmp th,.cmp td{vertical-align:middle}
.cmp tr.hd th{vertical-align:middle}
/* カードに切り替わる直前の幅では「お風呂」「向いている旅」が3行になるため、
その帯だけ文字を一段小さくして2行に収め、行の高さをそろえる */
@media(min-width:961px) and (max-width:1060px){
.cmp--rooms td:nth-child(5),.cmp--rooms td:nth-child(6){font-size:.82rem}
/* それでも「向いている旅」が3行になる行があるため、この帯は3行分でそろえる */
.cmp--rooms tbody tr:not(.hd) th,.cmp--rooms tbody tr:not(.hd) td{height:112px}
}
@media(max-width:960px){
/* スマホは1室＝1カードに組み替えるため、上の指定は戻す */
.cmp--rooms tbody tr:not(.hd) th,.cmp--rooms tbody tr:not(.hd) td{height:auto;padding-top:9px;padding-bottom:9px}
.cmp--rooms td:nth-child(2),.cmp--rooms td:nth-child(3),.cmp--rooms td:nth-child(4),.cmp--rooms td:nth-child(5){white-space:normal;width:auto;text-align:left}
.cmp th,.cmp td{vertical-align:top}
}
/* ============================================================
23. 客室カードの中身（プロトタイプ v04 の並びに合わせる）
タグ →（客室名＋広さ｜キャッチ）→ リード → スペック3点 → 本文 → 注記 → 導線
============================================================ */
.rtag{display:inline-block;background:var(--chip);border-radius:var(--r-pill);font-size:.78rem;font-weight:700;padding:4px 14px;margin-bottom:8px}
.rtag--nodog{background:var(--c-beige-p)}
.plx .bd .rname{font-family:var(--serif);color:var(--head);font-size:1.3rem;font-weight:700;line-height:1.6}
.plx .bd .rname i{font-style:normal;display:block;font-size:.92rem;color:var(--ink);font-weight:400;line-height:1.7;margin-top:2px}
.rlead{font-size:.95rem;color:var(--ink);margin-top:8px;line-height:1.9}
/* スペック3点（定員・広さ・お風呂） */
.rspec{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 2px}
.rspec span{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-pill);font-size:.8rem;font-weight:700;padding:5px 14px;line-height:1.7}
/* 愛犬の条件など、カード末尾の注記 */
.rnote2{font-size:.8rem;color:var(--soft);line-height:1.9;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
@media(max-width:920px){
.plx .bd .rname{font-size:1.16rem}
.plx .bd .rname i{font-size:.88rem}
.rspec span{font-size:.78rem;padding:4px 12px}
}
/* ============================================================
25. 宿泊プランのカード（.plx--plan）
配置はプロトタイプ v04 に合わせる。
カードの中は上から、キャッチ（ピル）／見出し／正式プラン名 が全幅で並び、
その下に 写真｜本文 の2列、さらに下に 条件の注記、いちばん下にボタン。
写真を列いっぱいに引き伸ばさず16:9で固定するため、本文の長さに
引きずられて縦横比が崩れることがない。
本文が写真より短いときに右下だけ空くのを避けるため、
2列は上下中央でそろえる（本文の余りを写真の上下に等分する）
============================================================ */
.plx--plan{gap:22px}
.plx--plan .pcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px 32px}
.plx--plan .rtag{display:inline-block;margin-bottom:10px}
.plx--plan h3{font-family:var(--serif);color:var(--head);font-size:1.3rem;font-weight:700;line-height:1.55;margin-bottom:8px}
/* 予約サイト（予約番）での表示名。9/26 Aqxis様のご指摘で、見出しの下から予約ボタンのすぐ上へ移した。
上の注記（.pcond）と同じ小さく薄い文字で、「予約サイトでの表示名：」を頭に付ける（タグ・枠の案は9/26に試して見送り） */
.plx--plan .oname{margin-top:14px;font-size:.8rem;color:var(--soft);line-height:1.8}
.plx--plan .oname + .act{margin-top:8px}
.plx--plan .ptwo{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.plx--plan .ptwo .ph{position:relative;min-height:0;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--bg-alt)}
.plx--plan .ptwo .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plx--plan .ptx>p{font-size:.92rem;line-height:1.95}
.plx--plan .ptx>p+p{margin-top:12px}
.plx--plan .pcond{font-size:.8rem;color:var(--soft);line-height:1.9;border-top:1px solid var(--line);padding-top:12px;margin-top:20px}
.plx--plan .act{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.plx--plan .act .btn{padding:12px 28px;font-size:.9rem}
@media(max-width:820px){
.plx--plan .pcard{padding:22px 20px}
.plx--plan .ptwo{grid-template-columns:1fr;gap:18px}
.plx--plan .act .btn{flex:1 1 auto;text-align:center}
}
/* スマホ：ボタンは2つとも全幅の2段にそろえ、予約サイトでの表示名はボタンの下へ回す（9/26 角田さん指示）。
並べ替えのためカードを縦のflexにする。キャッチのタグは内容の幅のまま */
@media(max-width:720px){
.plx--plan .pcard{display:flex;flex-direction:column}
.plx--plan .rtag{align-self:flex-start}
.plx--plan .act{order:1;flex-direction:column;gap:10px}
.plx--plan .act .btn{width:100%}
.plx--plan .oname{order:2;margin-top:12px}
.plx--plan .oname + .act{margin-top:16px}
}
/* ============================================================
26. 料金を出さない一覧（.plmini--np）
宿泊プランページは、プロトタイプに合わせて料金を載せず、
金額は予約番の画面で確かめてもらう。
.plmini の3列（本文／料金／導線）から料金の列を外した形
============================================================ */
.plmini--np>div{grid-template-columns:1fr auto}
/* 27章（.bookin・公式予約のメリットとボタン）は削除した。
宿泊プランの予約導線をホームの公式予約セクション（.sec--book ＋ .off2）に
そろえたため、使う場所が無くなった。経緯は 30_修正チェックリスト.md */
/* ============================================================
28. カード写真に重ねる撮影メモ（.imnote）
キービジュアルの .kvnote と同じ見た目を、カード（.cd .im）でも
使えるようにしたもの。スタンドイン写真の上に【要撮影】の内容を
置き、破線のプレースホルダ（.shot）を実写の見え方に近づける。
写真が確定したら span ごと削除する。ワイヤー確認用の注記なので、
14px未満だが本文のレギュレーションの対象外
============================================================ */
.cd .im{position:relative}
.imnote{position:absolute;right:10px;bottom:10px;z-index:2;max-width:calc(100% - 20px);padding:7px 11px;border-radius:var(--r-s);background:rgba(255,253,248,.88);color:var(--soft);font-size:.66rem;font-weight:700;line-height:1.75;text-align:left}
/* ============================================================
29. 公式予約セクションの検索フォーム（.bkform）
Aqxis多田さんの提案（9/23）による両置き構成の下側。FVと同じ
項目（宿泊日・泊数・人数）の検索フォームを、公式予約セクション
（.off2）の左列に置き、右列のメリット2枚と並べて見せる。
送信の配線は data-avsearch でFVと共通（design.js）。
入力欄の見た目はFVの検索パネルと同じ42px・角丸10px
============================================================ */
.bkform{display:flex;gap:10px 12px;flex-wrap:wrap;align-items:end;margin-top:16px}
.bkform .fld{height:42px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:0 12px;font-size:.85rem;font-family:var(--sans);color:var(--ink)}
.bkform .fvf--date{flex:1.3 1 132px}
.bkform .fvf--nights{flex:.8 1 88px}
.bkform .fvf--guests{flex:2 1 200px}
.bkform .gsel-t{background:var(--bg)}
/* 泊数はJavaScriptでドロップダウン（.dsel）に置き換わるため、地色と高さを他の欄にそろえる */
.bkform .dsel-t{height:42px;padding:0 12px;background:var(--bg)}
.bkform .gsel-t{height:42px}
.bkform .btn{height:42px;padding:10px 22px;font-size:.86rem;border:none;box-shadow:none;cursor:pointer;font-family:var(--sans);flex:1 1 auto;white-space:nowrap}
@media(max-width:480px){.bkform .btn{flex:1 1 100%}}
/* 並びは「宿泊日＋泊数／人数・部屋数／全幅の送信ボタン」の3段（9/25 角田さん指示）。
横並びが途中で折り返し、見出しの無いボタンが人数の横に浮いて見えていたため。
スマホで縦に積んだときと同じ順になる。案内の一文はボタンの直下、電話は罫線で区切る */
.bkform{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:10px 12px;align-items:end}
.bkform .fvf--guests{grid-column:1/-1}
.bkform .btn{grid-column:1/-1;width:100%;margin-top:4px}
.off2 .bkform+.follow{margin-top:10px;text-align:center;font-size:.8rem}
.off2 .bkform~.subtel{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);text-align:center}
/* ============================================================
30. 本文ブロックの間隔と小見出し（.intro／.follow／.subh／.t--in／.cards--2／.cd--ph）
セクション見出しの直下に置く導入文、表やカードの後に置く補足や
リンクの行、セクション内の小見出しの3つ。これまで各ページで
style属性に直接書いていた余白（22px／14〜20px）と、海辺・周辺の
分類見出しの書式を部品にまとめた。余白は既存ページの実測値に合わせる
============================================================ */
.intro{margin-bottom:22px}
.follow{margin-top:18px}
.subh{font-family:var(--serif);color:var(--head);font-weight:700;font-size:1.1rem;line-height:1.6;margin:36px 0 10px}
.subh:first-child{margin-top:0}
/* 確認中などのタグを文の後ろに続けて置く形（表のセル・本文の中）。左に6pxあけ、下の余白を消す */
.t--in{margin:0 0 0 6px;align-self:auto}
/* カードを2列で並べる形（4枚を2列×2段で収めるときなど）。スマホは .cards の1列指定がそのまま効く */
.cards--2{grid-template-columns:repeat(2,1fr)}
/* 写真を大きく見せるカード。固定の高さ190pxをやめ、写真の縦横比3:2のまま全幅で見せる（お料理の極・葵など） */
.cd--ph .im{height:auto;aspect-ratio:3/2}
/* 動画のサムネイルや番組の場面など、横16:9の画像を切らずに見せるカード群（10/17 角田さん「このカードの高さ変える。特に画像部分」）。
固定の高さ190pxをやめ、枠を16:9にする。トップの「実際に泊まったご家族の時間」の4枚 */
.cards--169 .cd .im{height:auto;aspect-ratio:16/9}
/* ============================================================
31. ファーストビュー下の確認情報（.fvbasics／.fvchips／.fvmore／.fvoffer）
プロトタイプ v04 のFV直下（.basics）を再現する。検索パネルの下に、
愛犬との宿泊の要点5つのチップ、詳しい条件への誘導、公式予約の特典の帯を
この順で置く。特典は検索パネルから外し、ここに移した（9/25・角田さん指示）。
特典の帯は公式予約の内容のため、公式予約の区画と同じオレンジ淡の面を使う
（ブランドブック v3.0 で面に塗ってよいのは公式予約だけ。プロトタイプの
ブルーグレーは改訂版で7色から外れたため使わない）
============================================================ */
.fvbasics{width:min(860px,calc(100% - 2*var(--pad-x)));margin:18px auto 0;text-align:center}
.fvchips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.fvchips li{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line-s);border-radius:var(--r-pill);padding:8px 16px;font-size:.78rem;font-weight:700;color:var(--ink);line-height:1.5}
.fvchips li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--c-beige)}
.fvmore{margin-top:12px;font-size:.78rem;color:var(--soft)}
.fvmore a{color:var(--link);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.fvoffer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 18px;margin-top:14px;background:var(--welcome-p);border-radius:var(--r-m);padding:13px 20px;text-align:left}
.fvoffer span{font-size:.82rem;color:var(--ink)}
.fvoffer a{margin-left:auto;font-size:.82rem;font-weight:700;color:var(--link);white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.fvoffer a::after{content:"→";display:inline-block;margin-left:.3em;text-decoration:none}
@media(max-width:920px){
.fvbasics{width:auto;margin:14px 16px 0}
.fvchips{gap:6px}
.fvchips li{padding:6px 12px}
.fvoffer{padding:12px 16px}
}
/* スマホでは、チップをやめて1つの枠の中の確認リスト（1列）にする（9/25 角田さん指示）。
長さの違うチップが中央揃えで5段に折り返し、冗長に見えるため。先頭の印は点からチェックに替える */
@media(max-width:720px){
.fvchips{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:2px 16px;text-align:left}
.fvchips li{display:flex;align-items:flex-start;gap:10px;background:none;border:none;border-bottom:1px solid var(--line);border-radius:0;padding:9px 0}
.fvchips li:last-child{border-bottom:none}
.fvchips li::before{width:11px;height:6px;margin-top:.5em;border-radius:0;background:none;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
}
/* ============================================================
32. 補足の帯（.subnote）
プロトタイプ v04 のホーム客室ブロック下（.subnote）を再現する。
左に一文の補足、右に関連ページへの小さな導線を置く横長の帯。
プロトタイプの地色ブルーグレーは改訂版で7色から外れたため、
カードと同じアイボリーに罫線で区切る（公式予約ではないのでオレンジ淡は使わない）
============================================================ */
.subnote{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 18px;margin-top:30px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:13px 20px}
.subnote span{font-size:.82rem;color:var(--ink)}
.subnote a{margin-left:auto;font-size:.82rem;font-weight:700;color:var(--link);white-space:nowrap;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.subnote a::after{content:"→";display:inline-block;margin-left:.3em;text-decoration:none}
@media(max-width:720px){.subnote{padding:12px 16px}}
/* ============================================================
33. 周辺スポットの小見出しとタグとリンク（.subh--rec／.sp .tip／.sp .lk）
.subh--rec＝「海遊亭スタッフのおすすめ」の小見出し。9/26 Aqxis様のご指摘で、
ネイビーのタグ（旧 .rec）をやめ、小見出しで対象施設をまとめる形にした（新しい色のルールを増やさない）。
頭に「いいね」の印（親指を立てた線のアイコン）を見出しと同じクレイで添える。
.tip＝過ごし方の添え書き（朝のお散歩に 等）。.lk＝施設の公式サイトへのリンク
============================================================ */
.spots .sp .tip{display:inline-block;margin-left:6px;font-size:.78rem;font-weight:700;color:var(--ink);background:var(--card);border:1px solid var(--line-s);border-radius:var(--r-pill);padding:2px 10px;line-height:1.7;vertical-align:top}
.subh--rec::before{content:"";display:inline-block;width:1.05em;height:1.05em;margin-right:8px;vertical-align:-.14em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h3a4 4 0 0 0 4-4V6a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1-2 2h-7a3 3 0 0 1-3-3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h3a4 4 0 0 0 4-4V6a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1-2 2h-7a3 3 0 0 1-3-3'/%3E%3C/svg%3E") center/contain no-repeat}
.spots .sp .lk{display:inline-block;margin-top:8px;font-size:.78rem;font-weight:700;color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.spots .sp .lk::after{content:"→";display:inline-block;margin-left:.3em;text-decoration:none}
/* ============================================================
34. ボタンの統一（9/25 角田さん指示）
形・色・文字・影・文言をそろえ、大きさだけを2段階にする。
・標準（高さ52px）：ページ内に単独で置くボタン。文字16px（.9rem）
・フォーム用（高さ42px）：FVの検索・公式予約のフォーム。入力欄と同じ高さ
影はすべて無し（平らな形）。.btn-w は枠線を inset の影で描いているため、
影を消したあとに枠線だけ引き直す。ヘッダーの .avail はヘッダー部品の高さ（--ctl-h）のまま影だけ消す
============================================================ */
.btn{font-size:.9rem;line-height:1.5;padding:14px 36px;box-shadow:none}
.btn-w{box-shadow:inset 0 0 0 1.5px var(--btn2-bd)}
.plx .act .btn,.plx--plan .act .btn,.igh .btn,.cform .btn{padding:14px 34px;font-size:.9rem}
.fvpanel .btn,.bkform .btn{height:42px;padding-top:0;padding-bottom:0;font-size:.9rem}
.avail{box-shadow:none}
@media(max-width:720px){
/* 狭い幅では左右の余白を詰め、長い文言（この客室の空室・料金を確認 等）を1行に収める */
.btn,.plx .act .btn,.plx--plan .act .btn,.cform .btn{padding-left:16px;padding-right:16px}
.igh .btn{padding:14px 16px}
/* 副次ボタン2つを横に並べ、主ボタンだけを全幅にして主従を分ける（ホームの客室ブロック下） */
.ctas--split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ctas--split .btn{width:100%;padding-left:8px;padding-right:8px}
.ctas--split .btn:not(.btn-w){grid-column:1/-1}
}
@media(max-width:360px){.btn,.plx .act .btn,.plx--plan .act .btn{padding-left:12px;padding-right:12px}}
/* ============================================================
35. スマホ下部の固定CTAの出し入れ（.spbar.is-hidden）
ホームではFVの検索パネルが見えている間は隠し、通り過ぎたら下から出す。
下部の公式予約フォーム（ホーム・宿泊プラン）が見えている間も隠す
（9/25 角田さん指示。FVに同じ導線があるのに固定CTAが重なって出ていたため）。
切り替えは design.js の spbarReveal()。検索パネルの無いページは常に表示
============================================================ */
.spbar{transition:transform .25s ease,visibility .25s}
.spbar.is-hidden{transform:translateY(110%);visibility:hidden}
@media(prefers-reduced-motion:reduce){.spbar{transition:none}}
/* ============================================================
36. 写真つきのメニュー一覧（.mph）
一品料理など、写真・品名・単位・価格を並べる一覧（9/25 角田さん指示で、
お料理の一品料理を表からこの形に）。PCは3列、スマホは2列。
写真は4:3で切り抜き、価格は税込を太字で右に置く
============================================================ */
.mph{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.mph .it{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;display:flex;flex-direction:column}
.mph .it img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.mph .it .tx{padding:12px 16px 14px;display:flex;flex-direction:column;flex:1}
.mph .it b{display:block;font-family:var(--serif);color:var(--head-s);font-weight:600;font-size:1rem;line-height:1.6}
.mph .it .pr{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:auto;padding-top:6px;font-size:.8rem;color:var(--soft)}
.mph .it .pr strong{font-size:.9rem;color:var(--ink);font-weight:700;white-space:nowrap}
@media(max-width:720px){
.mph{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mph .it .tx{padding:10px 12px 12px}
.mph .it b{font-size:.92rem}
.mph .it .pr{flex-direction:column;align-items:flex-start;gap:0}
}
/* ============================================================
37. 手描きのおさんぽマップ（.walkmap）
海辺・周辺の徒歩圏で、スタッフがお客様に渡している手描きマップを
画像のまま見せる枠（9/25 角田さん指示。PDFは置かない）。
紙の案内物として見せるため、アイボリーの台紙に載せ、下に説明と拡大の導線を置く
============================================================ */
.walkmap{margin:0 0 22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:12px}
.walkmap img{display:block;width:100%;height:auto;border-radius:var(--r-m)}
.walkmap figcaption{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 16px;margin-top:10px;padding:0 4px;font-size:.8rem;color:var(--soft);line-height:1.8}
.walkmap figcaption b{color:var(--ink);font-weight:700;margin-right:8px}
@media(max-width:720px){.walkmap{padding:8px}}
/* 周辺スポットの施設情報（住所・駐車場・定休日・営業時間）を小さな表で添える（.sp .meta）。
海遊亭の配布用チラシ「おすすめ周辺観光」の項目に合わせる（9/25） */
.spots .sp .meta{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:9px 0 0;padding-top:9px;border-top:1px solid var(--line);font-size:.78rem;line-height:1.7;color:var(--soft)}
.spots .sp .meta dt{font-weight:700;color:var(--ink);white-space:nowrap}
.spots .sp .meta dd{margin:0}
/* ============================================================
38. カード内の長い説明文を本文の大きさに（9/25 角田さん指示）
文章が長く、実質的に本文として読まれる説明文だけを、本文と同じ
PC 17px・スマホ（920px以下）16px にそろえる。短い補足（公式予約の
メリット、そのほかのプランの一行説明など）は補助のまま14px以上。
対象：客室カード、愛犬とご宿泊の5場面、ホームの一日の流れ、
願望×客室カード、記念日のタイムライン、宿泊プランのカード
============================================================ */
.plx .bd>p,.rdx--s .bd>p,.swb p,.p1 .tx p,.wc .bd p,.step p,.plx--plan .ptx>p{font-size:17px}
@media(max-width:920px){.plx .bd>p,.rdx--s .bd>p,.swb p,.p1 .tx p,.wc .bd p,.step p,.plx--plan .ptx>p{font-size:16px}}
/* オレンジ淡は「公式予約の区画の面」と「歓迎の場面の小さなタグ」だけに使う（Aqxis優先度B-7）。
9/25にInstagramのアイコンの丸・配信中の表示・フォームの必須の印をベージュ淡（--chip）に変更 */
/* ============================================================
39. 出発地ごとの経路（.rlines／.rl）
アクセスの「お車」「公共交通機関」で、出発地ごとの経路を1行の流れで見せる
（9/25 角田さん指示で、現行サイトのアクセスの経路図を整理し直したもの）。
地点（IC・駅など）はチップ、道路・路線名は小さい文字で、間を矢印でつなぐ。
幅が足りないときは折り返す
============================================================ */
.rlines{display:grid;gap:12px}
.rl{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 18px 16px}
.rl h3{font-family:var(--serif);color:var(--head-s);font-weight:600;font-size:1.02rem;line-height:1.6}
.rl h3 span{margin-left:10px;font-family:var(--sans);font-size:.8rem;font-weight:700;color:var(--ink)}
.rl ol{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.rl li{display:inline-flex;align-items:center;font-size:.8rem;line-height:1.6;color:var(--soft)}
.rl li+li::before{content:"→";margin:0 7px;color:var(--c-beige)}
.rl li.pt{color:var(--ink);font-weight:700}
.rl li.pt span{background:var(--chip);border-radius:var(--r-pill);padding:2px 11px}
.rl li.goal span{background:var(--card);box-shadow:inset 0 0 0 1px var(--line-s)}
.rl .alt{margin-top:6px;font-size:.78rem;color:var(--soft)}
@media(max-width:720px){.rl{padding:12px 14px 14px}.rl li+li::before{margin:0 5px}}
/* ============================================================
40. 英語版（/brand/en/。html lang="en"）の調整（9/29）
英語版は日本語版と同じ部品をそのまま使い、英語で崩れるところだけを直す。
・スマホのFVのキャッチは縦書きをやめて横組みにする（英語は縦に組めない）
・英単語の途中で折り返さない
部品が書き出す文字（人数の選択など）は design.js の T() で英語にする
============================================================ */
html[lang="en"] body{word-break:normal;overflow-wrap:break-word}
/* よくある質問の Q．A． は全角の点で、英語の前では字間が空いて見えるため半角にする */
html[lang="en"] .faq h3::before{content:"Q. "}
html[lang="en"] .faq p::before{content:"A. "}
/* 英語は語が長く、日本語向けの「折り返さない」指定のままだと表がはみ出すため、英語版だけ折り返しを許す */
html[lang="en"] .cmp tr:not(.hd) th{white-space:normal}
html[lang="en"] table.mnu td:last-child{white-space:normal}
/* 愛犬のお食事（愛犬とご宿泊「愛犬にも、旅のごちそうを。」）：料金を見せるカード2枚。10/27 LEOSENSE角田さん「これ他のデザインないかな」→「お食事は案Cで」。
それまでの3列の表（.mnu--3）を置き換えた。比較画像 tools/photos-src/sheet/dogmeal_options_1027.jpg */
.mcards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:22px 24px;display:flex;flex-direction:column}
.mcard-tg{display:inline-block;align-self:flex-start;background:var(--chip);border-radius:var(--r-pill);font-size:.78rem;font-weight:700;color:var(--ink);padding:3px 12px}
.mcard h3{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--head);margin-top:10px}
.mcard p{font-size:17px;color:var(--ink);margin-top:8px;line-height:1.9}
.mcard .mcard-pr{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px}
.mcard .mcard-pr b{font-family:var(--serif);font-size:1.6rem;color:var(--head)}
.mcard .mcard-pr small{font-size:14px;color:var(--soft)}
@media(max-width:720px){.mcards{grid-template-columns:1fr;gap:14px}.mcard p{font-size:16px}}
/* 3列のメニュー表（愛犬のお食事：メニュー／内容／料金）のスマホ表示。10/27 LEOSENSE角田さん「スマホのレイアウトが崩れている」。
幅390pxで料金の列（9em・折り返さない）と内容の列に幅を取られ、メニュー名の列が1〜2文字ずつ縦に折れていた。
720px以下は1品ずつの組みにする：1行目にメニュー名（太字）と料金（右寄せ）、2行目に内容。見出しの行は隠す。英語版は料金が長いため名前の下に置く */
@media(max-width:720px){
table.mnu--3,table.mnu--3 tbody,table.mnu--3 tr,table.mnu--3 td{display:block;width:auto}
table.mnu--3 tr:first-child{display:none}
table.mnu--3 tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;padding:14px 16px;border-top:1px solid var(--line-s)}
table.mnu--3 tr:nth-child(2){border-top:0}
table.mnu--3 td{padding:0;border:0}
table.mnu--3 td:nth-child(1){font-weight:700;color:var(--ink)}
table.mnu--3 td:nth-child(3){grid-column:2;grid-row:1;white-space:nowrap;text-align:right;font-weight:700}
table.mnu--3 td:nth-child(2){grid-column:1/-1;margin-top:4px}
html[lang="en"] table.mnu--3 tr{grid-template-columns:minmax(0,1fr)}
table.mnu--3 td:last-child{width:auto} /* 2列の表用の料金の列の幅（9em）を外す */
html[lang="en"] table.mnu--3 td:nth-child(3){grid-column:1;grid-row:2;white-space:normal;text-align:left}
html[lang="en"] table.mnu--3 td:nth-child(2){grid-row:3}
}
html[lang="en"] .subnote a{white-space:normal}
@media(max-width:920px){
html[lang="en"] .hero .im .ov{justify-content:flex-start;padding-right:calc(20px + env(safe-area-inset-right,0px))}
html[lang="en"] .hero .ov h1{writing-mode:horizontal-tb;font-size:1.15rem;line-height:1.45;letter-spacing:0;max-height:none;max-width:15em;padding-right:0}
}
/* ============================================================
41. 本文中のリンク（カラーブック 2026年10月1日更新）
リンクは色に加えて下線を付け、本文と見分けられるようにする。色はクレイ 深。
部品になっているリンク（.xl／.subnote／.fvoffer／.sp .lk／.cmp th a／.nrow a.tt）は各章で指定済み。
ここでは、文中に置いた素の （クラスなし）をまとめて指定する。
ナビゲーション（ヘッダー・補助メニュー・フッター）、パンくず、目次のチップ、
カード全体のリンク、ボタンは対象外（それぞれの章の指定に従う）
============================================================ */
:is(p,li,td,dd,figcaption) a:not([class]),.cta-band .sub a,.subtel a,.info a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
:is(p,li,td,dd,figcaption) a:not([class]):hover,.cta-band .sub a:hover,.subtel a:hover,.info a:hover{text-decoration-thickness:2px}
.ftr :is(p,li,td,dd) a:not([class]){color:var(--c-ivory)} /* 帯の中のリンクはアイボリー */
/* トップのファーストビュー（.hero--left）。10/16 角田さんの判断で、写真は「防波堤を愛犬と歩く親子」（大倉さんの素材 わんこ/0170、補正D）。
写真は暗くしない。キャッチは写真の上部の空に置き、カラーブックの濃いブラウン（ボタンの文字 #4A3A27）にして、背景は敷かない。
文字には目立たない程度の薄いアイボリーのにじみだけを沿わせる。写真の上の文字をブラウンにする使い方は Aqxis様に未確認。
影を含めない明暗差（各行の暗いほうから1割の画素に対して）：PC 1440 上の1行9.66、キャッチ4.77、説明文4.86 */
.hero--left .im::after{background:none}
.hero--left .im .ov,.hero--left .ov .top,.hero--left .ov h1,.hero--left .ov p{color:var(--c-btn-ink);text-shadow:0 0 2px rgba(255,253,248,.9),0 0 8px rgba(255,253,248,.7)}
.hero--left .ov p{margin:0;opacity:1}
/* PC：写真は下寄りに切り出して、左下の親子と愛犬を検索パネルの上に出す。キャッチは左上の空に置く */
@media(min-width:921px){
.hero--left .im>img{object-position:center 92%}
.hero--left .im .ov{top:30px;bottom:auto;left:max(var(--pad-x),calc((100% - var(--wrap-w))/2 + var(--pad-x)));right:auto;text-align:left}
.hero--left .ov h1{margin:8px 0 10px;white-space:nowrap}
/* 英語版は文が長いため、箱を広げて行数を減らし、左下の親子にかからないよう空と水平線の付近に収める */
html[lang="en"] .hero--left .im .ov{width:min(780px,58%)}
html[lang="en"] .hero--left .ov h1{white-space:normal;font-size:clamp(1.5rem,2.3vw,1.9rem);line-height:1.4}
html[lang="en"] .hero--left .ov h1 br{display:none}
}
/* SP：写真を主役にする。写真を高くし、キャッチは写真の上部の空に横書き2行。
検索フォームは入力欄を最初から見せる（たたんだボタン1本の案は、わかりにくいため取りやめ） */
@media(max-width:920px){
/* 写真の高さは画面の66%（上限480px）。高い画面で写真が縦長になりすぎて人物が切れないよう上限を置く */
.hero--left .im{height:calc(min(66svh,480px) - var(--hdr-h) - 1px)}
.hero--left .im>img{object-position:18% 75%}
.hero--left .im .ov{left:0;right:0;width:auto;top:16px;display:block;
padding-left:calc(20px + env(safe-area-inset-left,0px));padding-right:calc(20px + env(safe-area-inset-right,0px))}
.hero--left .ov h1{writing-mode:horizontal-tb;font-size:min(1.45rem,calc((100vw - 40px) / 13.6));line-height:1.6;letter-spacing:.02em;max-height:none;padding-right:0;white-space:nowrap}
.hero--left .fvpanel{margin:-34px 16px 0}
html[lang="en"] .hero--left .ov h1{white-space:normal;font-size:1.2rem;line-height:1.5}
}
/* 相談用（10/17 角田さん）：トップのファーストビューに、アンバサダー/DSC08992 を角田さんがAIで加工した横長版（16:9、1672×941）を入れて見比べる。
PCは写真がほぼ全部入る高さ（画面の高さからヘッダー分を引いた値。ただし写真の縦横比の高さ56.25vwまで）にして、切らずに近い形で見せる。
SPは家族と愛犬と海が入るよう左寄りに切り出す */
@media(min-width:921px){
/* 10/17 角田さんがつまみで決めた値（画面の幅1920pxで、高さ740px・切り出し28%・キャッチの左端380px）を基本にする。
低い画面ではヘッダー分を引いた画面の高さまでにする */
.hero--left .im:has(>img.fv-family-wide){height:min(740px,calc(100svh - var(--hdr-h) - var(--util-h) - 2px))}
.hero--left .im>img.fv-family-wide{object-position:center 28%}
/* 10/26 LEOSENSE角田さん「湯船を写したいので、写真の上をカットして若干下を写したい。ただし足は写したくない」。
元の写真（1672×941）の縦 80〜720px を写す。720px は男性の靴下（722px〜）の直前で、湯船の縁と湯面までが入る。
高さを画面の幅に比例させ（(720−80)÷1672＝38.3vw。幅1920pxで735px）、写真の下端を枠の下から (941−720)÷1672＝13.2vw 下に出して、写る下端を720pxにそろえる。
これまでは幅1536px以下で枠が写真に対して高く、写真のほぼ全体（足まで）が写っていた。
幅1933px以上（高さ740pxで頭打ち）や低い画面では上側を多めに切り、下端は720pxのまま（湯船が入り、足は入らない） */
.hero--left .im:has(>img.fv-family-wide){height:min(740px,38.3vw,calc(100svh - var(--hdr-h) - var(--util-h) - 2px))}
.hero--left .im>img.fv-family-wide{object-position:50% calc(100% + 13.2vw)}
}
@media(max-width:920px){.hero--left .im>img.fv-family-wide{object-position:24% 50%}}
/* スマホ（幅480pxまで）は愛犬が小さく見えるため、写真を拡大して家族と愛犬に寄せる（10/26 Aqxis様のご指摘「スマホでの愛犬の見え方」）。
写真の横1672pxのうち 290〜820px の範囲を画面の幅いっぱいに出す（拡大は従来の約1.6倍）。愛犬が画面の中央付近、男性の頭の上端が写真の上から105pxに来る。
キャッチの左端の背後が石壁ではなく空になる位置。481〜920px は従来どおり */
@media(max-width:480px){
.hero--left .im>img.fv-family-wide{width:315.5%;height:auto;max-width:none;margin-left:-54.7%;margin-top:calc(105px - 60.4%)}
/* 10/26 LEOSENSE角田さん「スマホの方は写真をもう少し縦長で」→ 参考（八の坊のスマホのトップ）を見て「これぐらいのインパクトが欲しい」。
案の確認で「画面の約85%・足なし」に決定。写真の枠の高さを、画面の高さからヘッダーと100pxを引いた値にする（375×812で650px）。
写る範囲は元の写真の縦 15〜720px（上は窓枠の上端を外し、下は男性の靴下の直前。PCと同じ）。この705pxが枠の高さに収まるよう拡大し、
横は元の写真の x＝492px（家族4人と愛犬の中ほど）を画面の中央に置く。375×812で横 288〜695px が写る（男性の背中側と女性の背中が少し切れる）。
画像の高さ＝枠の高さ×941÷705＝1.3348倍、上へのずらし＝枠の高さ×15÷705＝0.0213倍、左へのずらし＝枠の高さ×492÷705＝0.6979倍。
検索フォームは最初の画面では見出しだけがのぞき、予約の入口は下の固定ボタンになる */
.hero--left .im:has(>img.fv-family-wide){--fvh:calc(100svh - var(--hdr-h) - 100px);height:var(--fvh)}
.hero--left .im>img.fv-family-wide{width:auto;height:calc(var(--fvh) * 1.3348);max-width:none;margin-top:calc(var(--fvh) * -.0213);margin-left:calc(50% - var(--fvh) * .6979)}
/* 10/26 LEOSENSE角田さん「文字の場所を視認性が良い場所に」。キャッチの左端が写真の左の黒い窓枠（元の写真の横 274〜334px）に重なり、1文字目が読みにくかった。
窓枠の右の空（元の写真の横350px〜。明るさがほぼ一定）に収める：左の余白＝画面の中央−枠の高さ×0.2014（元の写真の x＝350px の位置）。
縦は空のうち明るさのむらがいちばん少ない帯（元の写真の縦120px〜）に置く：上＝枠の高さ×0.149（375×812で97px）。人物の頭（縦320px〜）より上。
文字の大きさは、残りの幅に1行（13.6字分）が収まる大きさまで（上限は従来の1.45rem） */
.hero--left .im:has(>img.fv-family-wide) .ov{top:calc(var(--fvh) * .149);padding-left:calc(50% - var(--fvh) * .2014);padding-right:12px}
.hero--left .im:has(>img.fv-family-wide) .ov h1{font-size:min(1.45rem,calc((50vw + var(--fvh) * .2014 - 12px) / 13.6))}
}
/* 10/26 LEOSENSE角田さん「タブレットの方も足が写らないようにして」。幅481〜920pxは写真の枠（高さは従来どおり 画面の66%・上限480px−ヘッダー）に写真のほぼ全体が入り、足まで写っていた。
PC・スマホと同じく、写る範囲の下端を元の写真の縦720px（男性の靴下の直前）にそろえる。縦 15〜720px が枠に収まる大きさ（枠の高さ×1.3348）か、
幅いっぱいの大きさ（56.28vw）の大きいほうに拡大し、横は元の写真の x＝492px（家族の中ほど）を中央に寄せる（写真の端が枠の内側に入らない範囲で）。
キャッチはスマホと同じく、窓枠の右の空（元の写真の x＝350px〜、縦120px の高さ。上は16px以上）に置く。
--ih＝画像の高さ、--il＝画像の左端の位置。画像の幅＝高さ×1.7768、x＝492px は 高さ×0.5228、x＝350px は 高さ×0.3719、縦720px と 120px は 高さ×0.7651・0.1275 */
@media(min-width:481px) and (max-width:920px){
.hero--left .im:has(>img.fv-family-wide){--th:calc(min(66svh,480px) - var(--hdr-h) - 1px);--ih:max(56.28vw,calc(var(--th) * 1.3348));--il:clamp(calc(100% - var(--ih) * 1.7768),calc(50% - var(--ih) * .5228),0px);height:var(--th)}
.hero--left .im>img.fv-family-wide{width:auto;height:var(--ih);max-width:none;margin-top:calc(var(--th) - var(--ih) * .7651);margin-left:var(--il)}
.hero--left .im:has(>img.fv-family-wide) .ov{top:max(16px,calc(var(--th) - var(--ih) * .6376));padding-left:calc(var(--il) + var(--ih) * .3719);padding-right:16px}
.hero--left .im:has(>img.fv-family-wide) .ov h1{font-size:min(1.45rem,calc((100vw - min(0px,max(100vw - var(--ih) * 1.7768,50vw - var(--ih) * .5228)) - var(--ih) * .3719 - 16px) / 13.6))}
}
/* 横向きなど低い画面（高さ560px以下）では写真の上側が多く切れ、窓枠の右の空だとキャッチが男性の頭にかかる。
この場合はキャッチを女性の右の空（元の写真の x＝760px〜。x＝760px は 高さ×0.8077）に移し、上は16px */
@media(min-width:481px) and (max-width:920px) and (max-height:560px){
.hero--left .im:has(>img.fv-family-wide) .ov{top:16px;padding-left:calc(var(--il) + var(--ih) * .8077)}
.hero--left .im:has(>img.fv-family-wide) .ov h1{font-size:min(1.45rem,calc((100vw - min(0px,max(100vw - var(--ih) * 1.7768,50vw - var(--ih) * .5228)) - var(--ih) * .8077 - 16px) / 13.6))}
}
/* キャッチの左端は画面の幅の約20%（1920pxで380px）。右寄せの案（1920pxで990px＝約51.5%）は確認パネルで切り替えて見る（10/17 角田さん） */
@media(min-width:921px){
.hero--left .im:has(>img.fv-family-wide) .ov{left:max(var(--pad-x),19.8%)}
html[lang="ja"]:not(.fv-catch-left) .hero--left .im:has(>img.fv-family-wide) .ov{left:51.5%}
}
/* テレビ番組の切り抜き動画 10/16。中京テレビ『カミング』2026年8月21日放送の切り抜き8本（Aqxis様作成、横長16:9）。
お知らせ「メディア掲載・動画」の「中京テレビで紹介されました」のカードの中で見られるようにする（.cd--clips）。
YouTubeは使わず動画ファイルを直接置く（横1280px・24fps・1本3〜6MB）。下の場面名を押すと、上の動画が替わって再生する。トップのカードは止まった画像のみ */
/* 動画を流すカードは、画像の枠を動画と同じ16:9にして、上下が切れないようにする */
.cd--clips .im{height:auto;aspect-ratio:16/9}
.cd--clips .im video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.clip-l{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.clip-b{padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--c-btn-ink);font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}
.clip-b.is-on{background:var(--c-orange);border-color:var(--c-orange)}
/* YouTubeを埋め込むカード（おでわんの宿泊動画。お知らせ「メディア掲載・動画」）。枠を16:9にする 10/17 */
.cd--yt .im{height:auto;aspect-ratio:16/9}
.cd--yt .im iframe{display:block;width:100%;height:100%;border:0}
/* お知らせ「メディア掲載・動画」のカード（10/19 角田さん「カードの画像が小さすぎる」→「PCはこのカードの形」「他のカードも同じ形に」）。
PCは3枚とも全幅で、画像（動画）を左・文を右に 1.5:1 で並べる。画像の枠は16:9。SPは通常の縦並び */
@media(min-width:921px){
.cards--media{grid-template-columns:1fr}
.cards--media .cd{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}
.cards--media .cd .im{height:auto;aspect-ratio:16/9}
}
/* 10/26 ヘッダーのメニューに「離れ ゆらぎ」を足して8項目にした。PCの狭い幅（921〜1000px）でメニューが2行に折り返さないよう、項目の間隔と「空室・料金を確認」の左右の余白を詰める（文字の大きさは変えない） */
@media(min-width:921px) and (max-width:1000px){
.nav{gap:10px}
.hdr .avail{padding-left:14px;padding-right:14px}
}
/* 10/26 スマホ下部の固定ボタン：オレンジの帯に見えて、押せるボタンだと分かりにくい（角田さん）。
地色の台の上に角丸のボタンを置き、下側の影（押し込める厚み）と右向きの矢印で、ボタンだと分かる形にする。押すと2px沈む */
@media(max-width:920px){
.spbar{gap:0;background:rgba(253,246,233,.97);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 18px rgba(74,58,39,.12)}
.spbar a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 20px;border-radius:var(--r-pill);font-size:1rem;letter-spacing:.04em;box-shadow:0 3px 0 rgba(74,58,39,.30),0 6px 14px rgba(74,58,39,.16)}
.spbar a::after{content:"";width:8px;height:8px;border-top:2.5px solid currentColor;border-right:2.5px solid currentColor;transform:rotate(45deg)}
.spbar a:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(74,58,39,.30),0 3px 8px rgba(74,58,39,.16)}
body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
/* 10/27 LEOSENSE角田さん「固定のCTAもうちょっと下にいかない？広すぎて邪魔かも。スマホの上のCTAは逆にぱんぱん」→ 比較画像 tools/photos-src/sheet/sp_cta_1027.jpg の「案２にしてみて」。
スマホ（920px以下）：ヘッダーのボタンは「空室・予約」と短くして余白を広げる（PCは「空室・料金を確認」のまま）。
下の固定ボタンは台（地色の帯）をなくし、右下に浮いた小さな角丸のボタンにする（ページの最後が隠れないよう、本文の下の余白はそのまま） */
.av-s{display:none}
@media(max-width:920px){
.hdr .avail{padding:0 18px;font-size:.82rem;letter-spacing:.04em}
.hdr .avail .av-l{display:none}
.hdr .avail .av-s{display:inline}
.spbar{left:auto;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));background:none;border:0;padding:0;box-shadow:none}
.spbar a{min-height:48px;padding:10px 22px;font-size:.92rem;box-shadow:0 3px 0 rgba(74,58,39,.30),0 8px 18px rgba(74,58,39,.22)}
/* 10/27 LEOSENSE角田さん「フッターの下がクリーム色になってる」：ボタンの逃げの余白を本文（クリーム）からフッター（紺）の中へ移す */
body{padding-bottom:0}
.ftr{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}
/* 10/26 確認用パネル：スマホでパネルが画面より高くなり、見出し（開閉）と×が画面の上に出て閉じられなくなった（角田さん）。
パネルの高さを画面に収まる高さまでにし、中身だけをスクロールさせて、見出しと×が常に画面の中に残るようにする */
.wtool{display:flex;flex-direction:column;max-height:calc(100svh - 90px)}
.wtool .wt-head{flex:none}
.wtool .wt-body{overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch}
@media(max-width:920px){.wtool{max-height:calc(100svh - 140px)}}
/* ============================================================
40. 公式予約の特典バナー（.perkban）10/26
確認ページ perk-banner.html の「A-1の不透明度 50%」を部品にしたもの（角田さん「不透明度50%でmockに入れて」）。
夕景の写真（sunset-bay.jpg）の上に、茶色（#3B2E20）を不透明度50%で重ねる。写真が明るく出るため文字に薄い影を付ける。
左に犬の足あとのスタンプ（BEST RATE）、中央に「最低価格保証」「愛犬のご宿泊料が半額」、右にボタン。
幅640px以下（コンテナの幅）では1列にし、スタンプを右上に置く
============================================================ */
.perkban-w{container-type:inline-size}
.perkban{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:26px;border-radius:var(--r-m);color:var(--c-ivory);padding:24px 30px;overflow:hidden;isolation:isolate;text-align:left;text-shadow:0 1px 3px rgba(30,22,14,.6)}
.perkban::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/images/sunset-bay.jpg) center 55%/cover}
.perkban::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(59,46,32,.5)}
.perkban-emb{position:relative;width:120px;height:120px;flex:none}
.perkban-emb .paw{width:100%;height:100%;transform:rotate(-12deg);filter:drop-shadow(0 3px 0 rgba(30,22,14,.35)) drop-shadow(0 6px 10px rgba(30,22,14,.25))}
.perkban-txt{min-width:0}
.perkban-eye{font-family:var(--serif);font-weight:700;font-size:1.15rem;letter-spacing:.12em;display:flex;align-items:center;gap:14px}
.perkban-eye::before,.perkban-eye::after{content:"";flex:1;max-width:70px;height:1px;background:rgba(255,253,248,.6)}
.perkban-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:6px}
.perkban-main b{font-family:var(--serif);font-size:2.5rem;line-height:1.25;letter-spacing:.06em;color:#FFC970}
.perkban-plus{font-size:1.1rem;font-weight:700}
.perkban-dog{font-family:var(--serif);font-weight:700;font-size:1.7rem}
.perkban-dog em{font-style:normal;color:#FFC970;font-size:2.1rem;margin-left:4px}
.perkban-price{font-size:1.05rem;font-weight:700;margin-top:4px}
.perkban-price s{color:inherit;opacity:.8}
.perkban-price b{font-size:1.45rem;color:#FFC970}
.perkban-price small{font-size:.78rem;white-space:nowrap}
.perkban-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;background:var(--brand);color:var(--brand-ink);font-weight:700;border-radius:var(--r-pill);padding:16px 30px;font-size:1.05rem;box-shadow:0 3px 0 rgba(74,58,39,.28);text-shadow:none}
.perkban-cta::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.perkban-cta:hover{background:var(--brand-d);text-decoration:underline;text-underline-offset:3px}
@container (max-width:640px){
.perkban{grid-template-columns:1fr;gap:12px;padding:18px 16px}
.perkban-emb{position:absolute;left:12px;right:auto;top:16px;width:76px;height:76px}
.perkban-eye{font-size:.95rem;letter-spacing:.04em;min-height:76px;padding-left:84px;padding-right:0}
.perkban-eye::before,.perkban-eye::after{display:none}
.perkban-main{gap:2px 10px}
.perkban-main b{font-size:1.9rem}
.perkban-plus{font-size:.95rem}
.perkban-dog{font-size:1.3rem}.perkban-dog em{font-size:1.6rem}
.perkban-price{font-size:.95rem}.perkban-price b{font-size:1.25rem}
.perkban-cta{width:100%;font-size:1rem}
}
/* トップのファーストビュー下：これまでの「公式サイト限定の料金・特典」の帯（.fvoffer）の位置に置く */
/* 各ページ下部の公式予約の特典も、ホームと同じバナーにする（10/27 海遊亭様「各ページ下部の公式特典もバナーに変更いただけますか」→ LEOSENSE角田さん「ホームなどとテイストをあわせる」）。
それまでの白い枠の文字とボタン（.cta-band .perk）を置き換え、ボタンはバナーの中（.perkban-cta）。関連リンクはバナーの下 */
.perkban-w--page{margin-top:44px}
.perkban-sub{text-align:center;font-size:.78rem;color:var(--soft);margin-top:12px}
/* 英語版は文言が長く、日本語版と同じ大きさではバナーが2倍近い高さになるため、文字を一段小さくする */
html[lang="en"] .perkban-eye{font-size:1rem;letter-spacing:.06em}
html[lang="en"] .perkban-main b{font-size:1.8rem}
html[lang="en"] .perkban-dog{font-size:1.2rem}
html[lang="en"] .perkban-dog em{font-size:1.45rem}
html[lang="en"] .perkban-cta{white-space:normal;text-align:center}
@container (max-width:640px){html[lang="en"] .perkban-main b{font-size:1.45rem}html[lang="en"] .perkban-dog{font-size:1.02rem}html[lang="en"] .perkban-dog em{font-size:1.2rem}html[lang="en"] .perkban-eye{font-size:.9rem}}
.fvbasics .perkban-w{margin-top:16px}
/* 10/26 トップのバナーはすぐ上の検索フォームと同じ「空室・料金を確認」のボタンを重ねて持っていたため、ボタンを外した（予約の入口は検索フォームに一本化。下部の公式予約の欄の特典と同じ形）。
ボタンの列を詰めて、スタンプと本文の2列にする */
.fvbasics .perkban{grid-template-columns:auto minmax(0,1fr)}
/* 10/26 スマホのメニュー：項目が8つになり、画面の低い端末（iPhoneのSafariなど）でメニューの高さの上限を超えると、
縦並び（flex-direction:column）のまま折り返しが効いて、そのほかのご案内が右の2列目に回り込んでいた（角田さん「スマホのレスポンシブがおかしい」）。
開いたメニューは折り返さず1列にし、はみ出す分はメニューの中をスクロールさせる */
@media(max-width:920px){
.nav.open{flex-wrap:nowrap}
.nav.open>a,.nav.open .nav-sub{flex:none}
}
/* 中間幅でも予約ボタンを右に保ち、スタンプと文字を幅に合わせる。 */
@container (min-width:641px) and (max-width:900px){
.perkban{gap:16px;padding:22px 24px}
.perkban-emb{width:80px;height:80px}
.perkban-eye{font-size:.95rem;letter-spacing:.04em;gap:8px}
.perkban-eye::before,.perkban-eye::after{display:none}
.perkban-main{gap:4px 10px}
.perkban-main b{font-size:1.9rem}
.perkban-plus{font-size:.95rem}
.perkban-dog{font-size:1.3rem}
.perkban-dog em{font-size:1.6rem}
.perkban-cta{justify-self:end;font-size:.95rem;padding:16px 20px}
}
/* 10/26 iPhoneのSafariで、日付の入力欄（input type=date）が中身の幅より縮まず、隣の「泊数」の欄の下に食い込んでいた（角田さんのスクリーンショット）。
日付の欄の見た目をブラウザの既定から外し、幅を親の欄に合わせ、文字を左寄せにする */
input.fld[type="date"]{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box;text-align:left}
input.fld[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
.fvf>input,.fvf>select{min-width:0;max-width:100%;box-sizing:border-box}
/* 10/26 PCのトップの特典バナーが、検索パネルと同じ860px幅に収まってボタンが下に回り、確認ページの案（ボタンが右）と違って見えた（角田さん「PCのデザインが違う」）。
PCではバナーだけを最大1020pxに広げ、確認ページと同じ横3列（スタンプ・本文・ボタン）にする */
/* → 同日、トップのバナーからボタンを外したため（上の .fvbasics .perkban）、広げる指定もやめ、検索パネルと同じ860px幅に戻した */
/* 10/26 スマホUI点検：フォーム、人数選択、プラン画像、確認用ボタン */
@media(max-width:920px){
.fvpanel form{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px 10px}
.fvpanel .fvf--guests,.fvpanel form>.btn{grid-column:1/-1}
.fvpanel .fld,.fvpanel .dsel-t,.fvpanel .gsel-t,
.bkform .fld,.bkform .dsel-t,.bkform .gsel-t{height:46px;min-height:46px;font-size:16px;line-height:1.4}
.fvpanel .btn,.bkform .btn{height:auto;min-height:48px;font-size:16px;line-height:1.4}
input.fld[type="date"]{display:flex;align-items:center;padding:0 12px;line-height:44px}
input.fld[type="date"]::-webkit-date-and-time-value{display:block;min-height:1.4em;line-height:1.4;text-align:left;margin:0}
input.fld[type="date"]::-webkit-datetime-edit{padding:0;line-height:1.4}
.dsel-o{min-height:44px;font-size:16px}
.gsel-p.as-sheet .stp-b{width:44px;height:44px;font-size:20px}
.gsel-p.as-sheet .stp{gap:4px}
.gsel-p.as-sheet .stp-n{min-width:2em;font-size:16px}
.gsel-p.as-sheet .gs-l{flex:1}
.gsel-p.as-sheet .gs-l b,.gsel-p.as-sheet .gs-l i{white-space:normal}
.gsel-p.as-sheet .gs-more{min-height:44px;padding:4px 8px}
.gsel-p.as-sheet .gs-ok{min-height:48px;font-size:16px}
.plx--plan .ptwo{min-width:0;width:100%}
.plx--plan .ptwo .ph{width:100%;min-width:0;height:auto}
.wt-open{left:auto;right:8px;top:calc(var(--hdr-h) + 8px);bottom:auto;min-height:32px}
}
body.guest-sheet-open{overflow:hidden}
.gs-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:4px}
.gs-panel-head b{font-size:16px}
.gs-close{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--bg-alt);color:var(--ink);font:24px/1 var(--sans);cursor:pointer}
.gsel-p.as-sheet .gs-panel-head{position:sticky;top:-8px;background:var(--card);z-index:2}
@media(max-width:360px){
.gsel-p.as-sheet.open-sheet{padding-left:12px;padding-right:12px}
.gsel-p.as-sheet .gsel-r{gap:8px}
.gsel-p.as-sheet .gs-grp{padding-left:8px;padding-right:8px}
}
@media(max-width:920px){.menu-btn,.hdr .avail{min-height:44px}.menu-btn{min-width:44px}}
/* 10/26 周辺スポット：写真の有無で差が出にくい共通カード */
.spots--photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.spots--photos>.sp{padding:0;overflow:hidden;min-width:0;display:flex}
.spots--photos .spot-body{padding:22px 24px;min-width:0;width:100%;display:flex;flex-direction:column}
.spot-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:132px;margin-bottom:14px}
.spot-heading-text{min-width:0;flex:1}
.spots--photos .spot-heading-text>b{display:block;color:var(--link);font-family:var(--serif);font-size:1.08rem;line-height:1.6;margin-top:6px}
.spot-photo{position:relative;flex:none;display:block;width:160px;padding:0;border:0;border-radius:10px;overflow:hidden;background:var(--bg-alt);text-align:center;cursor:pointer;color:var(--ink)}
.spot-photo img{display:block;width:100%;height:110px;object-fit:cover}
.spot-photo>span{display:block;padding:4px 2px;font:700 11px/1.5 var(--sans);background:var(--bg-alt)}
.spots--photos .spot-body>.d{flex:1}
.spot-links{display:flex;flex-wrap:wrap;gap:0 18px;align-items:center}
.spots--photos .spot-details{margin-top:10px}
.spots--photos .spot-details>summary{min-height:44px;cursor:pointer;color:var(--link);font-size:.78rem;font-weight:700;padding:8px 0}
.spot-photo:focus-visible{outline:3px solid var(--link);outline-offset:3px}
.spot-gallery{width:min(1000px,calc(100vw - 24px));max-width:none;max-height:calc(100svh - 24px);padding:16px;border:0;border-radius:14px;background:var(--card);color:var(--ink);overscroll-behavior:contain}
.spot-gallery::backdrop{background:rgba(33,26,19,.8)}
.spot-gallery-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.spot-gallery-title{font:700 18px/1.5 var(--sans)}
.spot-gallery button{min-width:48px;min-height:44px;padding:4px 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
.spot-gallery button:disabled{opacity:.4;cursor:default}
.spot-gallery-image{display:block;width:100%;height:auto;max-height:65svh;object-fit:contain}
.spot-gallery-controls{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:12px;font-size:14px}
body.spot-gallery-open{overflow:hidden}
@media(max-width:720px){.spots--photos{grid-template-columns:minmax(0,1fr);gap:16px}.spots--photos .spot-body{padding:18px 20px}.spot-heading{min-height:142px;gap:12px;margin-bottom:12px}.spot-photo{width:clamp(128px,40vw,160px)}.spot-photo img{height:auto;aspect-ratio:4/3}.spot-photo>span{font-size:11px;padding:4px 1px}.spot-gallery{padding:12px}.spot-gallery-title{font-size:16px}}
/* 周辺スポットは横長の共通カード。写真は右に添えて大きく見せる。 */
.spots--photos{grid-template-columns:minmax(0,1fr);gap:18px}
.spots--photos>.sp{position:relative;min-height:254px}
.spots--photos .spot-body{padding:26px 28px}
.spots--photos .sp--photo .spot-body{padding-right:354px}
.spot-heading{min-height:62px;margin-bottom:12px}
.spots--photos .spot-body>.d{flex:0}
.spots--photos .spot-body>.dog{margin-top:auto}
.spots--photos .spot-heading-text>b{font-size:1.18rem}
.spot-photo{position:absolute;right:28px;top:26px;width:294px}
.spot-photo img{height:180px}
@media(max-width:720px){
.spots--photos>.sp{min-height:0}
.spots--photos .spot-body,.spots--photos .sp--photo .spot-body{padding:18px 20px}
.spot-heading{min-height:164px;gap:12px;margin-bottom:14px}
.spot-photo{position:relative;right:auto;top:auto;width:clamp(140px,46vw,190px)}
.spot-photo img{height:auto;aspect-ratio:4/3}
.spots--photos .spot-heading-text>b{font-size:1.08rem}
}
/* 写真はカードの右側いっぱいに配置し、拡大リンクは付けない。 */
.spots--photos>.sp{min-height:232px}
.spots--photos .sp--photo .spot-body{padding-right:calc(36% + 28px)}
.spot-heading{min-height:62px}
.spot-photo{position:absolute;right:0;top:0;bottom:0;width:36%;height:100%;border-radius:0;cursor:default;background:transparent;overflow:hidden}
.spot-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
@media(max-width:720px){
.spots--photos>.sp{min-height:0}
.spots--photos .spot-body{padding:20px 18px}
.spots--photos .sp--photo .spot-body{padding:20px calc(38% + 16px) 20px 18px}
.spot-heading{min-height:62px;gap:0;margin-bottom:12px}
.spot-photo{position:absolute;right:0;top:0;bottom:0;width:38%;height:100%;border-radius:0}
.spot-photo img{height:100%;aspect-ratio:auto}
.spots--photos .sp--photo .spot-body>.d{font-size:13px;line-height:1.85}
.spots--photos .sp--photo .spot-body>.dog{font-size:12px;line-height:1.8}
.spots--photos .sp--photo .spot-links{gap:0 12px}
.spots--photos .sp--photo .spot-links .lk{font-size:12px}
}
@media(max-width:720px){.spot-photo img[src$="0283.jpg"]{object-position:35% center}.spot-photo img[src$="0242.jpg"]{object-position:65% center}}
@media(max-width:720px){
.spots--photos>.sp--photo{flex-direction:column}
.spots--photos .sp--photo .spot-body{padding:20px 18px}
.spots--photos .sp--photo>.spot-photo{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;flex:none}
.spots--photos .sp--photo>.spot-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.spots--photos .sp--photo .spot-body>.d{font-size:inherit;line-height:inherit}
.spots--photos .sp--photo .spot-body>.dog{font-size:inherit;line-height:inherit}
.spots--photos .sp--photo .spot-links .lk{font-size:inherit}
}
/* 公式予約フォームの特典：見出し・肉球・料金の読みやすさを統一。背景の50%重ね色は上部と共有。 */
.perkban-emb .paw{display:block;transform:none;filter:none;text-shadow:none;shape-rendering:geometricPrecision}
.booking-perk{display:block;min-height:0;padding:26px;align-self:stretch;text-shadow:0 1px 2px rgba(30,22,14,.5)}
.booking-perk-heading{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.booking-perk .perkban-emb{position:static;flex:none;width:88px;height:88px}
.booking-perk-heading p{font:700 16px/1.75 var(--serif);letter-spacing:.04em;margin:0;color:var(--c-ivory)}
.booking-perk .booking-perk-title{font:700 36px/1.4 var(--serif);letter-spacing:.02em;color:#FFC970;margin:0 0 12px}
.booking-perk .booking-perk-dog{font:700 22px/1.65 var(--serif);margin:0 0 16px;color:var(--c-ivory)}
.booking-perk-dog>span{display:block;font:700 16px/1.6 var(--sans);margin-bottom:4px}
.booking-perk-dog em{display:inline-block;white-space:nowrap;font-size:32px;font-style:normal;color:#FFC970;margin-left:4px}
.booking-perk .perkban-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 7px;font:700 16px/1.5 var(--sans);margin:0;color:var(--c-ivory)}
.booking-perk .perkban-price b{font-size:34px;color:#FFC970}
.booking-perk .perkban-price small{font-size:13px}
.booking-perk .perkban-price s{color:inherit;opacity:1}
.booking-perk .booking-perk-note{font:400 14px/1.9 var(--sans);margin:16px 0 0;color:var(--c-ivory)}
@media(max-width:760px){
.booking-perk{padding:22px 20px}
.booking-perk-heading{gap:14px;margin-bottom:14px}
.booking-perk .perkban-emb{width:80px;height:80px}
.booking-perk-heading p{font-size:15px;letter-spacing:.02em}
.booking-perk .booking-perk-title{font-size:32px}
.booking-perk .booking-perk-dog{font-size:21px}
.booking-perk-dog em{font-size:30px}
.booking-perk .perkban-price b{font-size:32px}
}
@media(max-width:360px){
.booking-perk{padding:20px 16px}
.booking-perk-heading{gap:12px}
.booking-perk .perkban-emb{width:72px;height:72px}
.booking-perk-heading p{font-size:14px}
.booking-perk .booking-perk-title{font-size:29px}
.booking-perk .booking-perk-dog{font-size:20px}
}
/* 10/26 採用A案：写真に重ねず、直下に独立したコンパクトな検索帯を置く。 */
.fvsearchband{background:var(--card);border-bottom:1px solid var(--line)}
.hero--one .fvsearchband .fvpanel{position:static;transform:none;width:min(1100px,calc(100% - 2*var(--pad-x)));margin:0 auto;padding:28px 0;display:grid;grid-template-columns:170px minmax(0,1fr);align-items:center;gap:28px;background:none;backdrop-filter:none;border:0;border-radius:0;box-shadow:none}
.fvsearch-title{font:700 22px/1.5 var(--serif);margin:0;color:var(--ink);white-space:nowrap}
.fvsearch-title small{display:block;font:500 10px/1.5 var(--sans);letter-spacing:.16em;color:var(--soft);margin-top:5px}
.fvsearchband .fvpanel form{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr) minmax(0,1.55fr) minmax(180px,1.15fr);gap:12px;align-items:end}
.fvsearchband .fvpanel .fvf>label{font-size:13px;line-height:1.5}
.fvsearchband .fvpanel .fld,.fvsearchband .fvpanel .gsel-t,.fvsearchband .fvpanel .dsel-t{height:46px;min-height:46px;font-size:15px;border-radius:8px}
.fvsearchband .fvpanel .btn{height:46px;min-height:46px;padding:0 16px;font-size:15px;white-space:nowrap}
@media(max-width:1100px) and (min-width:921px){.hero--one .fvsearchband .fvpanel{grid-template-columns:150px minmax(0,1fr);gap:20px}.fvsearch-title{font-size:20px}.fvsearchband .fvpanel form{grid-template-columns:minmax(0,1fr) minmax(0,.65fr) minmax(0,1.4fr) minmax(158px,1fr);gap:10px}.fvsearchband .fvpanel .btn{font-size:14px;padding:0 10px}}
@media(max-width:920px){
.hero--one .fvsearchband .fvpanel{display:block;padding:24px 0}
.fvsearch-title{font-size:21px;margin:0 0 18px}
.fvsearch-title small{display:none}
.fvsearchband .fvpanel form{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px 12px}
.fvsearchband .fvpanel .fvf--guests,.fvsearchband .fvpanel form>.btn{grid-column:1/-1}
.fvsearchband .fvpanel .fld,.fvsearchband .fvpanel .gsel-t,.fvsearchband .fvpanel .dsel-t{height:48px;min-height:48px;font-size:16px}
.fvsearchband .fvpanel .btn{height:50px;min-height:50px;font-size:16px;margin-top:2px}
}
/* 10/26 家族を左、コピーを右の空へ。スマホは従来の上部2行を保つ。
11/02 確認パネル（design.js）が付けていた .fv-catch-right に頼らず、右を既定にした（本番にはパネルがなく、キャッチが左に寄っていた）。
英語版は1行の見出しが長く右に収まらないため、日本語版（html[lang="ja"]）だけに当てる。左寄せの案は .fv-catch-left */
@media(min-width:921px){
html[lang="ja"]:not(.fv-catch-left) .hero--left .im:has(>img.fv-family-wide) .ov{left:auto;right:max(var(--pad-x),5%);width:48%;text-align:left}
html[lang="ja"]:not(.fv-catch-left) .hero--left .ov h1{font-size:clamp(1.6rem,2.6vw,2.4rem);white-space:nowrap}
html[lang="ja"]:not(.fv-catch-left) .hero--left .ov .top{font-size:clamp(12px,1.05vw,15px);letter-spacing:.04em}
html[lang="ja"]:not(.fv-catch-left) .hero--left .ov p{font-size:clamp(13px,1.1vw,16px);margin-left:0}
}
/* ==========================================================
41. 海遊亭で、家族みんなの一日（写真を大きく見せる A案）10/27
確認ページ oneday-options.html の「A 場面ごとに写真の大きさと位置を変える」をトップに入れた（LEOSENSE角田さん「A案でトップに反映して」）。
写真は1場面1枚。番号は付けず、場面名（到着・客室・夕食・お風呂・翌朝・海辺）を大きく出す（LEOSENSE角田さん「数字を入れずに、到着、客室、夕食を代わりに」）。
48列の格子で、行の高さは容器の幅の1%（写真の縦横比を幅に合わせて保つ）。文章が長いときは行が伸びる。
参考：リサーチ/layout-refs（26_ladogresort、14_matsunoura、05_grande_hitachi、03_conperro_ise）
========================================================== */
.dayx{container-type:inline-size;max-width:1600px;margin:0 auto;padding:3vw 0 1vw;overflow-x:clip}
/* overflow-x:clip … 写真が現れる前の少し大きい状態（scale 1.03）で、幅いっぱいの写真が画面の横からはみ出し、横スクロールが出ていたため（10/27） */
/* 場面の間の余白は 9cqw → 4.5cqw（10/27 LEOSENSE角田さん「間の距離を少し狭める」。1440pxで約130px → 約65px） */
.dx{display:grid;grid-template-columns:repeat(48,minmax(0,1fr));grid-auto-rows:minmax(1cqw,auto);margin-bottom:4.5cqw}
.dx-m{position:relative;margin:0;overflow:hidden;z-index:1}
.dx-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dx-b{display:none;z-index:0;background:var(--bg-alt)}
.dx-t{z-index:3;align-self:start}
/* 場面名は見出し（h3）の上に添える小さな札にする（10/27 LEOSENSE角田さん「夕食、客室などのタイトルを今より小さくして目立たなく」）。
PC 18px・スマホ 16.2pxで18.66px未満のため、カラーブックの規定どおり色はクレイ 深（--head-s）。補助の14px以上も満たす */
.dx-k{display:block;font-family:var(--serif);font-weight:600;font-size:1rem;line-height:1.5;letter-spacing:.2em;color:var(--head-s);margin-bottom:6px}
.dx-t h3{font-family:var(--serif);font-weight:600;font-size:1.6rem;line-height:1.5;color:var(--head);margin-bottom:12px}
.dx-t p{font-size:17px;line-height:1.95}
.dx-t .scnote{font-size:14px;margin-top:8px}
.dx-t .xl{display:inline-block;margin-top:14px}
.dx-card{background:var(--card);border-radius:14px;padding:2.4cqw 2.6cqw;box-shadow:0 14px 36px rgba(74,58,39,.14)}
/* 10/27 LEOSENSE角田さん「（翌朝・海辺の形に）このデザインに統一する」→「左右交互でトップに反映して」。
5場面とも、カードにしない文章＋少し小さめの写真（幅の約56%）＋写真の後ろに下へずらした淡い色の面にそろえる。
到着・夕食・海辺は文章が左、客室・お風呂は左右を入れ替えて文章が右。比較画像 tools/photos-src/sheet/oneday_unify_1027.jpg。
それまでの場面ごとの組み方（写真の大きさと位置を変えるA案、客室・夕食・お風呂の文字のカード）は 30_修正チェックリスト.md の10/27の記録を参照 */
.dx .dx-b{display:block;grid-column:22/49;grid-row:7/53}
.dx .dx-m{grid-column:17/44;grid-row:1/43}
/* 文章の欄は下の面の端（53行）まで使う。幅が狭いと文章が長くなり、欄が写真の行より高くなって写真が縦に伸びるため（1024pxで夕食430→512px）。容器1200px以下は上の端も上げる */
.dx .dx-t{grid-column:3/15;grid-row:10/53}
@container (max-width:1200px){.dx .dx-t{grid-row:4/53}}
.dx:nth-child(even) .dx-b{grid-column:1/28}
.dx:nth-child(even) .dx-m{grid-column:6/33}
.dx:nth-child(even) .dx-t{grid-column:35/47}
/* 区画の最後のリンク：最後の場面のあと大きな余白をはさんで文字リンク1行だけが浮いて見えていた（LEOSENSE角田さん「ここだけ独立してしまっているのが気になる」）。
ほかの区画の終わりと同じ白い枠のボタン（.btn.btn-w）にし、最後の場面のすぐ下に置く（比較画像 oneday_end_link_pc_1027.jpg の案1） */
.dx.s5{margin-bottom:5cqw}
.dayx-more{text-align:center}
.dayx .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.dayx .reveal.on{opacity:1;transform:none}
/* 10/27 LEOSENSE角田さん「写真→テキストという順番で登場するように」。写真が現れてから0.5秒遅れて文章が現れる（写真は少し大きい状態から戻す） */
.dayx .dx-m.reveal{transform:translateY(26px) scale(1.03);transition:opacity .9s ease,transform 1.1s ease}
.dayx .dx-m.reveal.on{transform:none}
.dayx .dx-t.reveal{transition-delay:.5s}
@media (prefers-reduced-motion:reduce){.dayx .reveal,.dayx .dx-m.reveal,.dayx .dx-t.reveal{opacity:1;transform:none;transition:none}}
/* 10/27 LEOSENSE角田さん「下から出てくるのではなく、左から右に出るように」→「左からの動きでトップに反映して」。
文章（.dx-t）は左から48pxすべり込む（写真から0.5秒遅れはそのまま）。区画の見出しと導入文（.slx）も画面に3割入ったら左から（導入文は0.2秒あと）。
.slx の表示の切り替えは index.html のスクリプト。写真の出方は変えていない */
/* → 同日、LEOSENSE角田さん「PC版だけ横から出てくるようにして、スマホ元のアニメーションにする」。左からの動きは PC の組み方（区画の幅901px以上）だけ。
スマホ・タブレット（900px以下、写真の下に文章が来る組み方）は元のとおり文章が下から出て、見出しと導入文は動かさない */
@container (min-width:901px){
.dayx .dx-t.reveal{transform:translateX(-48px);transition:opacity .8s ease .5s,transform .9s cubic-bezier(.22,1,.36,1) .5s}
.dayx .dx-t.reveal.on{transform:none}
}
@media (min-width:901px){
.slx{opacity:0;transform:translateX(-48px);transition:opacity .8s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.slx.on{opacity:1;transform:none}
.lead.slx{transition-delay:.2s}
}
@media (prefers-reduced-motion:reduce){.dayx .dx-t.reveal,.slx{opacity:1;transform:none;transition:none}}
/* スマホとタブレット（容器の幅900px以下）：写真を幅いっぱいに出し、場面ごとに縦横比を変える（4:3・正方形・4:5）。文章は写真の直後に置く
（写真の行に重ねると、文章の高さの分だけ写真が引き伸ばされるため）。
幅820pxなどのタブレットでPCの組み方のままだと、文章の欄が幅205〜273pxまで狭くなり、お風呂の文字のカードが写真の大半を覆ったため、900px以下はこの組み方にする */
@container (max-width:900px){
.dx{grid-template-columns:repeat(12,minmax(0,1fr));margin-bottom:10cqw} /* 10/27 16cqw → 10cqw（390pxで約62px → 約39px） */
.dx .dx-b{display:none!important}
.dx .dx-m{grid-column:1/13!important;grid-row:1/76!important}
/* 10/27 LEOSENSE角田さん「ホームの写真の高さがところどころ違うので統一させたい」。場面ごとに変えていた縦横比（4:3・正方形・4:5）をやめ、PCと同じ4:3（幅の75%の高さ）にそろえた */
.dx.s2 .dx-m img{object-position:40% 50%}
.dx.s5 .dx-m img{object-position:38% 50%} /* 10/27 LEOSENSE角田さん「ワンちゃん映ってない」。62%では左の愛犬が切れていた。38%で、元の写真の左から18〜71%（愛犬と子どもの両方）が入る */
.dx .dx-t{grid-column:1/13!important;grid-row:76/77!important;padding:20px max(20px,calc((100% - 720px) / 2)) 0;background:none!important;box-shadow:none;border-radius:0}
.dx-k{font-size:.9rem}
.dx-t h3{font-size:1.3rem;font-weight:700} /* 23.4pxはカラーブックの18.66〜24pxにあたるため、ウォームクレイは太さ700（10/27） */
.dx-t p{font-size:16px}
}
/* ==========================================================
42. ファーストビュー下の塊（検索・条件のチップ・特典バナー）の地色 10/27
LEOSENSE角田さん「（検索の帯の）背景色揃えた方が良い？」「塊はここまでだよね？」「その下のセクションと色を分けた方がよくない？」→ 比較画像（tools/photos-src/sheet/fv_block_bg_pc_1027.jpg）の案2に決定。
検索の帯だけがアイボリーで下に線があり、塊の途中で区切れて見えていた。帯の色と線をなくし、検索から特典バナーまでを区画の交互の地色（--bg-alt）の1枚の面にする。
下の「家族みんなの一日」（--bg）、その次の「宿泊プラン」（--bg-alt）と1区画ずつ色が入れ替わる。英語版のトップ（検索の帯がない）には当てない
========================================================== */
#fv:has(.fvsearchband){background:var(--bg-alt);padding-bottom:64px}
#fv .fvsearchband{background:transparent;border-bottom:0}
@media(max-width:920px){#fv:has(.fvsearchband){padding-bottom:44px}}
/* ==========================================================
43. 家族の過ごし方に合わせて選べる客室（.wca）10/27
Codex のA案（写真を大きく、説明は横）を、サイトの部品で組み直したもの。LEOSENSE角田さん「客室については、左に写真右に説明で統一する」「（願望の一文は）案１で」。
比較画像 tools/photos-src/sheet/rooms_a_left_pc_1027.jpg・rooms_a_wish_sp_1027.jpg。
写真だけ角を丸めない（サイトの角丸の例外。写真を大きく、強調して見せるため）。タグはサイトのタグと同じ丸い端。
願望の一文は「家族みんなの一日」の場面名と同じ札（明朝18px・クレイ 深）にして、客室名の上に添える
========================================================== */
.wrap--wca{max-width:var(--wrap-w)}
.wca-r{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:48px;align-items:center;margin-bottom:64px}
.wca-ph{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:0}
.wca-ph img{width:100%;height:100%;object-fit:cover;display:block}
.wca-wish{display:block;font-family:var(--serif);font-weight:600;font-size:1rem;line-height:1.6;letter-spacing:.08em;color:var(--head-s);margin-bottom:12px}
.wca-tag{display:inline-block;background:var(--chip);border-radius:var(--r-pill);font-size:.78rem;font-weight:700;color:var(--ink);padding:4px 14px}
.wca-tx h3{font-family:var(--serif);color:var(--head);font-weight:600;font-size:1.6rem;line-height:1.5;margin-top:10px}
.wca-d{font-size:17px;line-height:2;color:var(--ink);margin:14px 0 18px}
@media(max-width:720px){
.wca-r{display:block;margin-bottom:44px}
.wca-tx{padding-top:20px}
.wca-tx h3{font-size:1.3rem;font-weight:700}
.wca-d{font-size:16px;line-height:1.95}
.wca-wish{font-size:.9rem}
}
/* 10/27 LEOSENSE角田さん「スマホ画面で、どの部屋とどの写真が紐づいているのかが分かりにくくなった」→ 比較画像 tools/photos-src/sheet/rooms_sp_link_1027.jpg の「案Bで反映」。
スマホは、願望の札・タグ・客室名を写真の上に出し、説明とリンクを写真の下に置く。部屋ごとに罫線で区切る */
@media(max-width:720px){
.wca-r{display:flex;flex-direction:column;gap:0;align-items:stretch;text-align:left;margin-bottom:0;padding:30px 0 34px;border-top:1px solid var(--line-s)}
.wca-r:first-child{border-top:0;padding-top:0}
.wca-tx{display:contents;padding-top:0}
.wca-wish{order:1}
.wca-tag{order:2;align-self:flex-start}
.wca-tx h3{order:3;margin:8px 0 14px}
.wca-ph{order:4}
.wca-d{order:5;margin-top:16px}
.wca-r .xl{order:6;align-self:flex-start}
}
/* ==========================================================
44. お客様の声（.rvw／.rv）10/27
LEOSENSE角田さん（八の坊の口コミのカードを参考に）「口コミもこの見本でmockにしてみる」。比較画像 tools/photos-src/sheet/voice_reviews_1027.jpg。
星・本文・罫線・出典のカード。PCは3列、スマホは横にすべらせる。星はオレンジを文字に使わない決まりのためクレイ 深。
本文と出典は、掲載の許可と条件を確認できた口コミが決まるまで仮の文（実在しない口コミは作らない）
========================================================== */
.rvw{margin-top:44px}
.rvw-h{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--head);text-align:center;margin-bottom:18px}
.rvw-list{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:20px}
.rv{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:26px 26px 20px;display:flex;flex-direction:column}
.rv-st{color:var(--head-s);letter-spacing:.18em;font-size:1rem}
.rv blockquote{margin:14px 0 18px;font-size:17px;line-height:2;color:var(--ink);flex:1}
.rv figcaption{border-top:1px solid var(--line);padding-top:12px;font-size:14px;color:var(--soft)}
.rvw-note{text-align:center;font-size:14px;color:var(--soft);margin-top:14px}
/* 10/27 LEOSENSE角田さん「口コミはスマホは縦に並べて」（横にすべらせる形をやめた） */
@media(max-width:720px){
.rvw-list{grid-template-columns:1fr;gap:14px}
.rv{padding:22px 20px 16px}
.rv blockquote{font-size:16px}
}
/* 10/27 LEOSENSE角田さん「ここは横幅広めに使って上の３つがこのままで横並びになるように」。
「実際に泊まったご家族の時間」だけ横幅を広げ（最大1600px）、動画・Instagram・テレビの3枚を、2列だったときに近い大きさのまま横に並べる。下の口コミのカードも同じ幅 */
.wrap--voice{max-width:1600px}
/* ============================================================
ファーストビュー直下「家族みんなの5つの時間」（.ftacc／.ft-tab／.ft-panel／.ft-cond）（2026-10-28）
10/24 フィードバック②「トップの5つのポイント」に、Aqxis様のコピー（大倉さんOK）と多田さんの表示方法のご提案を合わせた。
5つの見出しを押すと説明文が開く。PCは下線のタブ（選んだ1つの説明文を下に出す）、820px以下は折りたたみ（最初は全部閉じる）。
宿泊条件は5つの下に短く残す（.ft-cond）。開閉は index.html の中のスクリプト
============================================================ */
.ftacc{position:relative;left:50%;transform:translateX(-50%);width:min(1000px,calc(100vw - 2*var(--pad-x)));margin:22px 0 0;text-align:left}
.ft-ttl{font-family:var(--serif);color:var(--head);font-weight:600;font-size:1.35rem;line-height:1.6;letter-spacing:.04em;text-align:center;margin:0 0 16px}
.ft-tab{position:relative;display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;padding:0;font:700 15px/1.5 var(--sans);color:var(--ink);text-align:left;cursor:pointer;word-break:keep-all;overflow-wrap:anywhere}
.ft-tab:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.ft-chk{flex:none;width:11px;height:6px;margin-top:-3px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.ft-num{flex:none;font:600 17px/1 var(--serif);color:var(--accent);letter-spacing:.04em}
.ft-lbl{flex:1}
.ft-arw{flex:none;width:9px;height:9px;margin-top:-4px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .2s}
.ft-tab[aria-expanded="true"] .ft-arw{transform:rotate(-135deg);margin-top:4px}
.ft-panel[hidden]{display:none}
.ft-panel p{font-size:17px;line-height:1.85;color:var(--ink);margin:0}
.ft-panel .ft-note{font-size:14px;color:var(--soft);margin-top:4px}
.ft-cond{margin:14px 0 0;text-align:center;font-size:14px;color:var(--soft);line-height:1.8}
.ft-cond span::after{content:"｜";margin:0 12px;color:var(--c-beige)}
.ft-cond a{color:var(--link);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ft-br{display:none}
@media(max-width:820px){.ftacc{left:auto;transform:none;width:auto}.ft-ttl{font-size:1.2rem;font-weight:700}.ft-tab{font-size:16px}.ft-panel p{font-size:16px}.ft-cond span{display:block}.ft-cond span::after{display:none}.ft-br{display:inline}}
.ft-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:4px}
.ft-tab{grid-row:1;justify-content:center;text-align:center;min-height:64px;padding:8px 6px 12px;font:600 17px/1.5 var(--serif);color:var(--ink);border-bottom:2px solid var(--c-beige)}
.ft-tab .ft-chk,.ft-tab .ft-arw{display:none}
.ft-tab:hover{color:var(--head-s)}
.ft-tab[aria-expanded="true"]{color:var(--head-s);border-bottom-color:var(--c-orange);box-shadow:0 1px 0 var(--c-orange)}
.ft-panel{grid-row:2;grid-column:1/-1;text-align:center;padding:20px 0 6px}
.ft-panel p{max-width:38em;margin:0 auto}
@media(max-width:1100px){.ft-tab{font-size:15px}}
@media(max-width:820px){
.ft-grid{grid-template-columns:1fr;border-top:1px solid var(--c-beige)}
.ft-tab,.ft-panel{grid-row:auto;grid-column:1}
.ft-tab{justify-content:flex-start;text-align:left;min-height:56px;padding:12px 4px;font:600 16px/1.5 var(--serif);border-bottom:1px solid var(--c-beige)} /* PCのタブと同じ明朝に（10/30 LEOSENSE角田さん「スマホ版の文字フォントをPC版に合わせて」） */
.ft-tab .ft-arw{display:block}
.ft-tab[aria-expanded="true"]{border-bottom:1px solid transparent}
.ft-panel{text-align:left;padding:0 4px 16px;border-bottom:1px solid var(--c-beige)}
}
/* 10/28 LEOSENSE角田さん「行数の関係で下のバナーが動くから、間隔を事前に空けておいて、切り替えで動かないようにして」。
PCでは5つの説明文を同じ場所に重ね、選んでいないものは見えないだけにして場所は取っておく（いちばん長い説明文の高さにそろう） */
@media(min-width:821px){.ftacc .ft-panel[hidden]{display:block;visibility:hidden}}
/* 10/28 LEOSENSE角田さん「スマホで開いた時の説明が、上の見出しと近すぎて読みづらい」「デザインはそのままで、レイアウトの調整」。
820px以下で開いた説明文の上に余白を取る（線や色はそのまま） */
@media(max-width:820px){
.ftacc .ft-panel{padding-top:16px;padding-bottom:20px}
.ftacc .ft-panel .ft-note{margin-top:8px}
}
/* 10/28 英語版のヘッダー：Webフォント（Zen Kaku Gothic New）が使われず端末のフォント（ヒラギノ・游ゴシック・標準のゴシック）で表示されると、
幅921〜1059pxでメニューが2行に折り返し「Access / FAQ」がはみ出していた。英語版だけ、921〜1240pxはメニューを折り返さず、
幅に応じて項目の間隔と「Check availability」の左右の余白を詰める。921〜980pxだけ文字を一段小さくする（どの書体でも1行に収まる） */
@media(min-width:921px) and (max-width:1240px){html[lang="en"] .hdr .nav{flex-wrap:nowrap;gap:12px}html[lang="en"] .hdr .nav>a{white-space:nowrap}html[lang="en"] .hdr-in{gap:12px}}
@media(min-width:921px) and (max-width:1100px){html[lang="en"] .hdr .nav{gap:8px}html[lang="en"] .hdr .avail{padding-left:12px;padding-right:12px}}
@media(min-width:921px) and (max-width:1000px){html[lang="en"] .hdr .nav{gap:6px}html[lang="en"] .hdr-in{gap:8px}html[lang="en"] .hdr .avail{padding-left:10px;padding-right:10px}}
@media(min-width:921px) and (max-width:980px){html[lang="en"] .hdr .nav{font-size:.78rem}}
/* お知らせ：公式Instagramの配信のご案内（投稿は並べず、アカウントへ案内するだけ。10/30 LEOSENSE角田さん） */
.igband{display:flex;align-items:center;gap:28px;max-width:880px;margin:0 auto;padding:30px 36px;background:var(--c-ivory);border:1px solid var(--c-rule);border-radius:18px}
.igband .ig-ic{flex:none;width:84px;height:84px}
.igband .ig-ic svg,.ftr-ig svg{display:block;width:100%;height:100%}
.igband .m{flex:1 1 300px;min-width:0}
.igband .m b{display:block;font-family:var(--serif);color:var(--head);font-size:1.15rem;font-weight:600}
.igband .m .d{display:block;margin-top:6px;line-height:1.8}
.igband .m .h{display:block;margin-top:4px;font-size:.88rem;color:var(--c-sub)}
.igband .btn{flex:none}
/* フッターの公式Instagramのアイコン */
.ftr-ig{display:flex;gap:14px;margin-top:18px} /* Facebook・Instagram・X（10/30 LEOSENSE角田さん「フェイスブックとXもあるので追加」） */
.ftr-ig a{display:inline-block;width:40px;height:40px}
@media(max-width:720px){
/* 10/30 LEOSENSE角田さん「間延びしてる」：縦並びにすると .m の flex-basis 300px が高さとして効いていた。スマホはアイコンと文を横に並べ、ボタンを下の行に */
.igband{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px 16px;align-items:start;padding:22px 20px}
.igband .ig-ic{width:56px;height:56px}
.igband .m{flex:none}
.igband .m b{font-size:1.05rem}
.igband .btn{grid-column:1/-1;justify-self:start}
}
/* 5つの時間の番号（01〜05）。PCはタブの文字の上、スマホは文字の左（10/30 LEOSENSE角田さん「番号を振りたい」） */
.ft-grid{counter-reset:ft}
.ft-tab{counter-increment:ft}
.ft-lbl::before{content:counter(ft,decimal-leading-zero);display:block;margin-bottom:4px;font:600 13px/1 var(--serif);letter-spacing:.08em;color:var(--c-clay-d)}
@media(max-width:820px){.ft-lbl::before{display:inline-block;margin:0 12px 0 0;font-size:15px;vertical-align:1px}}
/* 英語版：検索欄の見出し「Search availability & rates」が、日本語に合わせた見出しの欄（PCで170px）からはみ出して右の「Check-in date」に重なっていた。英語だけ折り返して2行にする（10/30 補助金用の画面を撮ったときに見つけた） */
html[lang="en"] .fvsearch-title{white-space:normal;font-size:19px;line-height:1.35}
/* ============================================================
45. お知らせの記事ページの本文（.news-body） ※本番で追加。10/30 mock にも同じものを入れた（記事ページの見本 news-article.html）
microCMS の本文のうち、許可した要素（p／h2／h3／strong／em／a／ul／ol／li／img／figure／figcaption／blockquote）の字組みだけを決める
============================================================ */
.news-body{max-width:46em;margin:0 auto}
.news-body p,.news-body ul,.news-body ol,.news-body blockquote,.news-body figure{margin:0 0 1.2em}
.news-body h2{font-family:var(--serif);color:var(--head);font-weight:700;font-size:1.1rem;line-height:1.6;margin:2em 0 .6em}
.news-body h3{margin:1.6em 0 .4em}
.news-body ul,.news-body ol{padding-left:1.4em}
.news-body a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.news-body blockquote{padding:.2em 1.2em;border-left:3px solid var(--line)}
.news-body img{height:auto;border-radius:var(--r-s)}
.news-body figcaption{font-size:.8rem;color:var(--soft)}
.news-body .xl{margin-top:8px}
/* ============================================================
46. お知らせの一覧（写真中心・案C-2）（10/30 LEOSENSE角田さん「お知らせは上から5件、あとは折り返し、日付を目立たないように」「案Cがいいが画像中心にできる？」「案C-2で反映」）
最新1件を大きく（.ncard--big）、続く4件を写真のカード（.ngrid）。6件目以降は「過去のお知らせ」（.nbar）で開く一覧（.nlist--more）。
日付は題名の下に細く小さく（補助の文字の下限14pxは守る）
============================================================ */
.nfeat{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;margin-bottom:28px}
.ncard{display:flex;flex-direction:column;gap:10px;color:var(--ink);text-decoration:none}
.ncard-im{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-s);background:var(--chip)}
.ncard-im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.ncard:hover .ncard-im img{transform:scale(1.03)}
.ncard-tx{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.ncard .ct{font-size:.78rem;font-weight:700;color:var(--ink);background:var(--chip);border-radius:var(--r-pill);padding:3px 12px}
.ncard b{font-size:.92rem;line-height:1.7;color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:500}
.ncard .dt,.nlist--more .nrow .dt{font-weight:400;font-size:.78rem;color:var(--soft);letter-spacing:.04em}
/* 「NEW」の印（案B。11/01 角田さん「案Bで」）：日付の後ろにクレイ深の太字。札にせず、日付と同じ控えめな行に置く。公開から14日のあいだ Worker が自動で付ける */
.ncard .dt .nnew,.nrow .dt .nnew{margin-left:10px;font-size:.74rem;font-weight:700;letter-spacing:.08em;color:var(--accent)}
.ncard--big b{font-family:var(--serif);font-size:1.15rem;font-weight:600}
.ngrid{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.ngrid .ncard-im{aspect-ratio:3/2}
.nbar{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 4px;font:700 .9rem/1.5 var(--sans);color:var(--ink);cursor:pointer;text-align:left}
.nbar i{width:9px;height:9px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);margin-top:-4px;transition:transform .2s}
.nbar[aria-expanded="true"] i{transform:rotate(-135deg);margin-top:4px}
.nbar:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.nlist--more{border-top:0}
.nlist--more .nrow{grid-template-columns:92px 1fr;grid-template-areas:'ct tt' '. dt';row-gap:2px}
.nlist--more .nrow .ct{grid-area:ct}
.nlist--more .nrow .tt{grid-area:tt}
.nlist--more .nrow .dt{grid-area:dt}
@media(max-width:720px){
.nfeat{grid-template-columns:1fr;gap:22px}
.ngrid{gap:18px 12px}
.ngrid .ncard b{font-size:.86rem}
.nlist--more .nrow{display:grid;grid-template-columns:auto 1fr;grid-template-areas:'ct ct' 'tt tt' 'dt dt';gap:6px 0}
.nlist--more .nrow .ct{justify-self:start}
}