/* LPラフv3 公開前確認用（v2の点検を受けて「引く」方向に直した版・2026-10-10）。lp_v2.css の後に読む。⛔公開用ではない（ラフ）。
   方針：飾りを足さず、写真の大きさ・文字の大小差・余白で強弱をつける。
   色は 白(--paper)・生成り(--sand)・墨(--ink)・深緑(--green / --green-d) と、夜の場面だけの --night。
   暗い面は ①の帯・②の夜・⑨ の3か所だけ。アイコンはボタンのくの字とFAQの開閉矢印だけ。
   改行：build.py の P() が文節ごとに <span class="k"> で包む＝語の途中では折れない */
:root{ --night:#16201C; }
body.vfinal{background:var(--paper)}
.fw{padding:0 24px;max-width:1160px;margin:0 auto}
.band-sand{background:var(--sand)}

/* 共通の見出し（段階は5つ：h1 / h2 / h3 / h4 / 本文） */
.fh2{font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.5;letter-spacing:.03em;margin:0;color:var(--ink)}
.fh3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.55;letter-spacing:.03em;margin:0;color:var(--ink)}
/* 写真の下・上の小さな説明（役割ラベル） */
.cap{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;line-height:1.6;color:var(--sub);letter-spacing:.06em}
.cap::before{content:"";width:18px;height:1px;background:currentColor;flex:none}
.bleed{margin-left:-24px;margin-right:-24px}

/* ① 最初の画面：写真いっぱい＋見出しを重ねる（スマホ＝写真の上に見出し／下に緑の帯でボタン） */
.fhero{display:grid;background:var(--green-d);color:#fff}
.fhero .pic{grid-area:1/1;position:relative;height:460px;overflow:hidden}
.fhero .pic img,.fhero .pic video{display:block;width:100%;height:100%;object-fit:cover;object-position:27% 50%}
.fhero .pic video{object-position:50% 50%}
.fhero .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(12,18,15,.66) 0,rgba(12,18,15,.42) 34%,rgba(12,18,15,0) 62%)}
.fhero .h1v{grid-area:1/1;align-self:start;z-index:2;margin:0;padding:30px 24px 0;font-family:var(--serif);font-weight:500;font-size:44px;line-height:1.4;letter-spacing:.03em;color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.fhero .bd{grid-area:2/1;padding:26px 24px 44px;max-width:640px;position:relative;z-index:2}
.fhero .sub{margin:0;font-size:16.5px;line-height:1.95;color:#F4F1EA}
.fhero .btn.lt{margin-top:24px;background:#fff;color:var(--green-d)}
.fhero .btn.lt .arr{border-color:var(--green-d)}
.fhero .btn-note{color:#DCE3DD}

/* ② 旅の場面：写真を大きく、文字は小さく静かに */
.f2{padding:88px 0 0;background:var(--paper)}
.f2-h .lead{margin-top:20px}
.sc{margin-top:72px}
.sc .ph{margin:0}
.sc .ph.bleed{margin-left:-24px;margin-right:-24px}
.sc .ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.sc-a .ph img{object-position:25% 50%}
.sc .tx{padding-top:12px}
.sc .tx .fh3{margin-top:16px;font-size:22px}
.sc .tx p.t{margin-top:12px}
.sc-b{padding:72px 0}
.sc-b .ph img{aspect-ratio:3/2}
/* 夜：写真に本文を重ねる・写真の下に暗い帯を作らない */
.scn{background:var(--night);color:#F3F0E8;padding-bottom:0}
.f2 .sc-b + .scn{margin-top:0}
.scn .ph{position:relative}
.scn .ph img{aspect-ratio:4/5;object-position:36% 100%}
.scn .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(8,12,10,.78) 0,rgba(8,12,10,.5) 42%,rgba(8,12,10,0) 72%)}
.scn .over{position:absolute;z-index:2;left:0;right:0;top:0;padding:26px 24px 0}
.scn .over .cap{color:#E7E3D8}
.scn .fh3{color:#fff;font-size:26px;margin-top:16px;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.scn .t{margin-top:16px;max-width:30em;color:#F3F0E8;text-shadow:0 1px 12px rgba(0,0,0,.45)}
/* グループ：夜の次。写真は全幅 */
.scn + .sc-d{margin-top:0;padding-top:88px}

/* ③ 東員から：sand */
.f3{margin-top:88px;padding:88px 0}
.f3 .fh2{margin-bottom:0}
.rs{list-style:none;margin:32px 0 0;padding:0}
.rs li{display:block;padding:24px 0;border-top:1px solid var(--rule)}
.rs li:last-child{border-bottom:1px solid var(--rule)}
.rs b{display:block;font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:.03em;line-height:1.6}
.rs .d{display:block;margin-top:6px}
/* Day：細い実線と小さな点でつなぐ */
.fdays{margin-top:72px}
.fdays .eyebrow{display:block;padding:0;border:0;border-radius:0;background:none;font-family:var(--serif);font-size:21px;line-height:1.6;color:var(--ink);letter-spacing:.03em;margin:0 0 32px}
.tl{position:relative;padding-left:32px}
.tl::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;border-left:1px solid #9C978C}
.mk{position:relative;width:fit-content;background:var(--sand);margin:0;font-size:14px;line-height:1.6;color:var(--sub);letter-spacing:.06em;font-weight:400}
.mk::before{content:"";position:absolute;left:-31px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--sand);border:1px solid var(--ink)}
.mk.end{margin-top:40px}
.fd{position:relative;margin-top:48px}
.fd::before{content:"";position:absolute;left:-31px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--ink);box-shadow:none}
.fd .ph{margin-right:-24px;margin-left:0}
.fd .ph img{width:100%;aspect-ratio:3/2;object-fit:cover}
.fd:nth-of-type(2) .ph img{object-position:22% 50%}
.fd:nth-of-type(3) .ph img{object-position:18% 50%}
.fd .ph .cap{margin-top:12px;padding-right:24px}
.fd .tx{padding-top:16px}
.dn{display:flex;align-items:center;gap:12px;margin:0}
.dn .n{font-family:var(--serif);font-size:28px;font-weight:400;line-height:1.2;color:var(--ink);letter-spacing:.02em}
.fd .d3{margin-top:8px;font-size:19px}
.fd p.t{margin-top:8px}
.story{margin-top:56px;padding:28px 0 0;background:none;border:0;border-radius:0;border-top:1px solid var(--rule)}
.story b{display:block;font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.7;letter-spacing:.03em}

/* ④ 車：紙の地・写真1枚＋仕様の1行 */
.f4{background:var(--paper);color:var(--ink);padding:88px 0;margin-top:0}
.carname{margin:20px 0 0;font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.4;letter-spacing:.03em;color:var(--ink)}
.car-top{margin-top:32px}
.car-top .ph{margin-bottom:0}
.car-top .ph img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 42%}  /* v14 実車写真（v13から1477x1108・4:3・屋根は写っている）＝PCの16:9で見える縦の範囲を y116〜947 に＝屋根（y≈155）もタイヤの下（y≈925）も入る。v10の 70% は旧写真（1000x600）前提で屋根が切れていた */
.car-top .ph .cap{padding:0 24px;margin-top:12px}
.stats{list-style:none;display:flex;margin:24px 0 0;padding:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);gap:0}
.stats li{flex:1;padding:14px 0 12px 16px;border-left:1px solid var(--rule);background:none;text-align:left}
.stats li:first-child{border-left:0;padding-left:0}
.stats li span{display:block;margin:0 0 2px;font-size:14px;line-height:1.5;color:var(--sub);letter-spacing:.04em;white-space:nowrap}
.stats .num{display:block;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.2;color:var(--ink);letter-spacing:.01em}
.stats .num small{font-size:15px;margin-left:2px;color:var(--ink)}
.vid{margin-top:32px;padding:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:0;background:var(--sand);color:var(--sub)}  /* v14＝動画が届くまで16:9の空き箱をやめて札1行の帯に（届いたら aspect-ratio:16/9 に戻す） */
.vid .tbd-line{margin:0;padding:0 14px;text-align:center}
.inside{margin-top:32px;display:grid;gap:28px}
.inside figure{margin:0}
.inside img{width:100%;aspect-ratio:4/3;object-fit:cover}
.inside figcaption{display:flex;flex-direction:column;gap:2px}
.inside figcaption .cap{padding:0;margin:12px 0 0}
.sh{margin-top:56px;font-size:21px}
.eq{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;border-top:1px solid var(--rule)}
.eq li{display:block;padding:14px 0;border:0;border-bottom:1px solid var(--rule);border-radius:0;font-size:16px;line-height:1.5;letter-spacing:.03em}
.f4 .spec{margin-top:36px}

/* ⑤ お客様の旅の写真：生成りの地・空き枠（AI画像は置かない） */
.f5{background:var(--sand);padding:88px 0}
.fgal{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
.fgal figure{margin:0}
.fgal .slot{aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;text-align:center;background:#E6E0D4;border:0}
.fgal .slot span{font-size:14px;line-height:1.7;color:var(--sub);letter-spacing:.03em}
.f5 .ig-note{margin-top:24px;font-size:15px;line-height:1.85}
@media (max-width:899px){.fgal figure:nth-child(n+5){display:none}}

/* ⑥ 流れ：罫線1本ずつ */
.f6{padding:88px 0}
.ffl{list-style:none;margin:32px 0 0;padding:0}
.ffl li{display:block;padding:22px 0;border-top:1px solid var(--rule)}
.ffl li:last-child{border-bottom:1px solid var(--rule)}
.ffl .n{display:block;font-family:var(--serif);font-size:15px;color:var(--sub);letter-spacing:.04em;line-height:1.4}
.ffl b{display:block;font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.6;letter-spacing:.03em}
.ffl p{margin-top:2px}

/* ⑦ よくあるご質問 */
.f7{padding:88px 0}
.f7 .faq{margin-top:32px}
.f7 .faq{border-top-color:#CBC5B6}.f7 .faq details{border-bottom-color:#CBC5B6}
.f7 .tbd{background:#FFF1A8}

/* v14 確認会用の札（2026-10-18）＝［確認中］と「この書き方でよいか」に通し番号。黄の地 #FFF1A8 に墨 #1A1A1A＝15.0:1、枠と番号の地 #8A6A00＝地に対して3.96:1・白文字に対して5.05:1（WCAG相対輝度式で計算）。公開版では build_final.py の REVIEW=False で ASK を消し、TBD は0件にする */
.tbd{padding:4px 10px;background:#FFF1A8;border:1px solid #8A6A00;color:#1A1A1A}
.tbd .no,.ask{display:inline-block;min-width:1.6em;padding:0 6px;margin-right:6px;background:#8A6A00;color:#fff;font-family:var(--sans);font-weight:500;font-size:14px;line-height:1.6;letter-spacing:0;text-align:center;border-radius:2px;vertical-align:middle;white-space:nowrap}
.ask{margin:0 0 0 8px}
.fl-note{margin-top:28px;font-size:15px;line-height:1.9;color:var(--ink)}
/* 1920幅で1600pxのAI画像を引き伸ばさない（夜・整備の全幅写真）＝中央に寄せる */
.scn .ph,.ph8{max-width:1600px;margin-left:auto;margin-right:auto}

/* ⑧ 整備：写真に見出しを重ねる */
.f8{padding:0 0 88px}
.ph8{position:relative;background:#1d2420}
.ph8 img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:62% 50%}
.ph8::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(8,12,10,0) 12%,rgba(8,12,10,.6) 48%,rgba(8,12,10,.9) 100%)}
.ph8 .over{position:absolute;z-index:2;left:0;right:0;bottom:0;padding-bottom:26px;max-width:none}
.ph8 .over .cap{color:#E7E3D8;margin-bottom:8px}
.ph8 .over .fh2{color:#fff;font-size:28px;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.f8-body{padding-top:48px}
.f8-body p{margin:0}
.f8 .close{margin-top:2px}
.pts{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--rule);display:block}
.pts li{display:block;padding:16px 0;border:0;border-bottom:1px solid var(--rule);background:none}
.pts b{font-family:var(--serif);font-weight:500;font-size:17.5px;line-height:1.55;letter-spacing:.03em}
.f8 .local{margin-top:24px;font-size:15.5px}

/* ⑨ 最後：深い緑 */
.ffinal{position:relative;overflow:hidden;background:var(--green-d);color:#fff}
.ffinal .in{position:relative;padding:96px 24px;max-width:720px;margin:0 auto}
.ffinal .fh2{color:#fff;font-size:28px}
.ffinal .btn{margin-top:32px;background:#fff;color:var(--green-d)}
.ffinal .btn .arr{border-color:var(--green-d)}
.ffinal .line-btn{background:transparent}
.line-btn{max-width:420px}

/* 生成AIの画像の注釈（2026-10-11 v9）＝写真の右下に半透明の濃い地＋白文字の小さな札。LPの最小の文字（14px）のまま。
   写真だけを包む .aiw の中に入れるので、写真の下のキャプションとは重ならない。付ける画像は build_final.py の AI_IMAGES で決める。
   地は rgba(14,18,16,.66)＝写真が真っ白でも合成した地は #62625f 前後で、白文字とのコントラスト比 6.1:1（普通の写真の上では 12:1 以上） */
.aiw{display:block;position:relative}
.aib{position:absolute;right:8px;bottom:8px;z-index:3;margin:0;padding:2px 8px;background:rgba(14,18,16,.66);color:#fff;font-size:14px;line-height:1.5;font-weight:400;letter-spacing:.02em;white-space:nowrap;pointer-events:none}
.aib-hero{right:12px;bottom:12px}
.ph8 .over{padding-bottom:44px}   /* ⑧ スマホ＝見出しの2行目と札が重ならないよう、見出しを札の分だけ上げる */

/* ---- 広い画面（PC）---- */
@media (min-width:900px){
  .fw{padding:0 48px}
  .hd .wrap,.ft .wrap{max-width:1160px;padding:0 48px}
  .bleed,.sc .ph.bleed{margin-left:0;margin-right:0}
  .fh2{font-size:42px;line-height:1.45}
  .fh3{font-size:30px}
  /* ① */
  .fhero{grid-template-columns:minmax(0,1fr) minmax(0,600px);grid-template-rows:1fr auto auto 1fr;min-height:clamp(600px,82vh,760px)}
  .fhero .pic{grid-area:1/1/5/3;height:auto}
  .fhero .pic img,.fhero .pic video{object-position:50% 50%}
  .fhero .pic::after{background:linear-gradient(to left,rgba(12,18,15,.85) 0,rgba(12,18,15,.75) 36%,rgba(12,18,15,0) 72%)}  /* v14＝.78/.62→.85/.75。動画の明るいコマで説明文が3.19:1まで落ちていた（96コマ実測）の対策。文字色も白に */
  .fhero .h1v{grid-area:2/2;align-self:end;padding:0 56px 0 24px;font-size:72px;line-height:1.3}   /* v22b＝3案のいちばん長い行（7字）が収まる大きさ（80→72）*/
  .fhero .h1v .blk{display:block}
  .fhero .bd{grid-area:3/2;padding:26px 56px 0 24px;max-width:none}
  .fhero .sub{font-size:18px;color:#fff}
  .fhero .btn-note{color:#fff}
  /* ② */
  .f2{padding-top:128px}
  .f2-h{display:grid;grid-template-columns:6fr 5fr;gap:72px;align-items:end}
  .f2-h .lead{margin:0}
  .sc{margin-top:112px}
  .sc-in{display:grid;grid-template-columns:7fr 5fr;gap:72px;align-items:center}
  .sc .ph img{aspect-ratio:3/2}
  .sc .tx{padding-top:0}
  .sc .tx .fh3{font-size:30px}
  .sc .tx p.t{margin-top:16px}
  .sc-b{padding:112px 0}
  .sc-b .sc-in{grid-template-columns:5fr 7fr}
  .sc-b .ph{order:2}
  .scn .ph img{aspect-ratio:21/9;object-position:50% 72%}
  .scn .ph::after{background:linear-gradient(to right,rgba(8,12,10,.7) 0,rgba(8,12,10,.38) 40%,rgba(8,12,10,0) 70%)}
  .scn .over{max-width:1160px;margin:0 auto;padding:72px 48px 0;right:0;left:0}
  .scn .fh3{font-size:36px}
  .scn + .sc-d{padding-top:112px}
  .sc-d .tx{padding-top:0}
  /* ③ */
  .f3{margin-top:128px;padding:128px 0}
  .rs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;border-top:1px solid var(--rule)}
  .rs li{padding:30px 32px 34px;border-top:0;border-bottom:0 !important;border-left:1px solid var(--rule)}
  .rs li:first-child{border-left:0;padding-left:0}
  .rs li:last-child{padding-right:0}
  .fdays{margin-top:112px}
  .fdays .eyebrow{font-size:26px;margin-bottom:48px}
  .tl{display:grid;grid-template-columns:repeat(3,1fr);column-gap:40px;padding:0;max-width:none}
  .tl::before{display:none}
  .mk{grid-column:1/-1;padding:0;margin:0 0 20px;text-align:left}
  .mk::before{display:none}
  .mk.end{justify-self:end;margin:28px 0 0}
  .fd{display:block;margin:0;padding-top:28px;position:relative}
  .fd::before{left:0;top:-4px;margin:0;width:9px;height:9px;z-index:1}
  .fd::after{content:"";position:absolute;left:0;right:-40px;top:0;border-top:1px solid #9C978C}
  .fd:last-of-type::after{right:0}
  .fd .ph,.fd .tx{grid-column:auto;padding:0;margin:0}
  .fd .ph img{aspect-ratio:4/5}
  .fd .tx{padding-top:20px}
  .fd .ph .cap{padding-right:0}
  .dn .n{font-size:36px}
  .fd .d3{font-size:22px}
  .story{max-width:760px;margin:80px 0 0;padding:28px 0 0}
  .story b{font-size:24px}
  /* ④ */
  .f4{padding:128px 0}
  .carname{font-size:34px;margin-top:24px}
  .car-top{display:block;margin-top:48px}
  .car-top .ph img{aspect-ratio:16/9;min-height:0;flex:none}
  .car-top .ph .cap{padding:0}
  .stats{max-width:760px;margin-top:32px}
  .vid{margin:56px 0 0;max-width:760px}
  .inside{grid-template-columns:1fr 1fr;gap:28px;margin-top:56px}
  .sh{margin-top:80px}
  .eq{grid-template-columns:repeat(4,1fr)}
  .f4 .spec{max-width:760px}
  /* ⑤ */
  .f5{padding:128px 0}
  .fgal{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
  .fgal .slot{aspect-ratio:4/3}
  /* ⑥ */
  .f6{padding:128px 0}
  .ffl{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;margin-top:48px}
  .ffl li{border-top:1px solid var(--ink);border-bottom:0;text-align:left;padding:20px 0 0}
  .ffl li:last-child{border-bottom:0}
  /* ⑦ */
  .f7{padding:128px 0}
  .f7-in{display:grid;grid-template-columns:4fr 7fr;gap:88px;align-items:start}
  .f7 .faq{margin-top:6px}
  /* ⑧ */
  .f8{padding-bottom:128px}
  .ph8 img{aspect-ratio:21/9;object-position:50% 40%}
  .ph8 .over{padding-bottom:48px;max-width:1160px;margin:0 auto;left:0;right:0}
  .ph8 .over .fh2{font-size:42px}
  .f8-body{display:grid;grid-template-columns:5fr 6fr;gap:40px 80px;padding-top:72px;align-items:start}
  .pts{margin:0}
  .f8 .local{grid-column:1/-1;margin-top:0}
  /* ⑨ */
  .ffinal .in{padding:144px 48px;max-width:1160px}
  .ffinal .in > *{max-width:720px}
  .ffinal .in > .btn,.ffinal .in > .line-btn{max-width:420px}
  .ffinal .fh2{font-size:42px}
}
@media (min-width:1280px){
  .fhero .h1v{font-size:76px}   /* v22b＝88→76（同上）*/
  .fhero{grid-template-columns:minmax(0,1fr) 640px}
}

/* 生成AIの注釈（PC）＝札を少し内側へ */
@media (min-width:900px){
  .aib{right:12px;bottom:12px}
  .aib-hero{right:16px;bottom:16px}
}
/* v28＝PCは右下に常時のLINE枠（QR）が重なる＝最初の画面の札だけ左下へ */
@media (min-width:768px){
  .aib-hero{left:16px;right:auto;bottom:16px}
}

/* v16（2026-10-22）＝届いた伊吹山の写真・使い方の例・泊まる場所のリンク枠・安全運転ガイド動画 */
.fgal img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.fgal figcaption .cap{margin:8px 0 0;font-size:14px}
.f5 .tbd-line{margin-top:16px}
.uses{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.uses li{position:relative;font-size:16px;line-height:1.75;padding-left:1.1em}
.uses li::before{content:"・";position:absolute;left:0;top:0}
.stay{margin-top:48px;padding:24px 20px;background:#fff}
.stay b{display:block;font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.7;letter-spacing:.03em}
.stay p{margin:8px 0 0;font-size:16px;line-height:1.8}
.guide{margin-top:12px}
.guide video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.guide .cap{margin-top:8px}
@media (min-width:900px){
  .fgal img{aspect-ratio:4/3}
  .stay{max-width:760px;margin-top:64px;padding:28px 32px}
  .stay b{font-size:22px}
  .guide{max-width:560px}
}
.guide{display:block}

/* v17（2026-10-22）＝生成AIの画像を外した＝実写の無い場面は「写真が入ります」の空き枠（img と同じ縦横比）。整備（.ph8）は見出しが上に載るので暗い枠 */
.noimg{display:flex;align-items:center;justify-content:center;width:100%;padding:16px;text-align:center;background:#E6E0D4;color:var(--sub);font-size:14px;line-height:1.7;letter-spacing:.03em}
.sc .ph .noimg{aspect-ratio:4/3}
.fd .ph .noimg{aspect-ratio:3/2}
.ph8 .noimg{aspect-ratio:1/1;align-items:flex-start;padding-top:48px;background:#2B332E;color:#D5DBD6}
.fhero .pic img.hero-real{object-position:62% 50%}
@media (min-width:900px){
  .sc .ph .noimg{aspect-ratio:3/2}
  .fd .ph .noimg{aspect-ratio:4/5}
  .ph8 .noimg{aspect-ratio:21/9}
  .fhero .pic img.hero-real{object-position:50% 50%}
}/* v20d＝明るさ1.45倍・PCの影は文字の列だけ（本人「もう一段明るく」・実測 スマホ見出し3.74／PC見出し5.1・説明文5.7）。v20c＝写真を明るさ1.28倍・影は文字の下だけ残す（本人「もう一段明るく」・白文字との比を実測してスマホ見出し3.9／PC見出し4.42・説明文4.98）。v20＝最初の画面が実写1枚（22番・曇り空で元から暗め）のときは、重ねる影を薄くする（本人「ちょっと暗くない？」）。動画用の濃さ（v14）は video のときだけ残る */
.fhero .pic:has(.hero-real)::after{background:linear-gradient(rgba(12,18,15,.72) 0,rgba(12,18,15,.54) 40%,rgba(12,18,15,0) 60%)}
.fhero .pic img.hero-real{filter:brightness(1.45)}
@media (min-width:900px){
  .fhero .pic:has(.hero-real)::after{background:linear-gradient(to left,rgba(12,18,15,.70) 0,rgba(12,18,15,.58) 44%,rgba(12,18,15,0) 68%)}
}
/* v22＝最初の画面の見出し3案を同じ枠に重ね、時間で入れ替える（build_final.py の HERO_COPIES）。枠の高さはいちばん長い案に合う＝入れ替えで下の段が動かない */
.fhero .hcs{display:grid}
.fhero .hc{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.fhero .hc.on{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
.fhero .h1v .hc .blk{display:block}
.fhero .h1v .hc.sm{font-size:30px;line-height:1.5}
@media (min-width:900px){ .fhero .h1v .hc.sm{font-size:50px;line-height:1.4} }
@media (min-width:1280px){ .fhero .h1v .hc.sm{font-size:54px} }
@media (prefers-reduced-motion: reduce){ .fhero .hc{transition:none} }

/* v24＝④の動画枠（確認中の札をやめて安全運転ガイド動画を置く）・RVパーク一覧リンク・利用案内リンク */
.vid .guide{width:100%;max-width:560px;margin:0 auto;padding:0 14px;box-sizing:border-box}
.vid .guide .cap{text-align:center}
.stay-link a,.f8 .pts a{display:inline-block;padding:10px 0;color:inherit;text-decoration:underline;text-underline-offset:3px}
/* v27＝本人「リンク先とわかりにくい。ボタンにして」→外部リンク3つ（RVパーク・キャンプ場検索・利用案内）を枠つきのボタンに */
.stay-link a.lbtn{display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box;width:100%;max-width:420px;min-height:56px;margin:4px 0;padding:12px 44px 12px 18px;position:relative;border:2px solid var(--green-d);border-radius:10px;background:#fff;color:var(--green-d);text-decoration:none;font-weight:700;line-height:1.5}
.stay-link a.lbtn::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.stay-link a.lbtn .ext{flex:none;font-size:14px;font-weight:400;color:#4a4a4a}
.stay-link a.lbtn:hover,.stay-link a.lbtn:focus-visible{background:var(--green-d);color:#fff}
.stay-link a.lbtn:hover .ext,.stay-link a.lbtn:focus-visible .ext{color:#fff}
@media (max-width:420px){.stay-link a.lbtn{flex-direction:column;align-items:flex-start;gap:2px}}

/* v24b＝「東員　ご返却」を、右下に浮かせず、出発と同じ左端から始まる線の上に置く（PCのみ。スマホは縦線の終点のまま） */
@media (min-width:900px){
  .mk.end{justify-self:stretch;width:auto;position:relative;margin:40px 0 0;padding-top:20px;border-top:1px solid #9C978C}
  .mk.end::before{display:block;content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--ink);box-sizing:border-box}
}

/* ===== v25（2026-10-23）＝削る・大きく・リズム。見せ方だけ。写真を全幅にして短い言葉を重ねる／文字だけの節は大きく／仕様は大きな数字／細かい説明はFAQ。※読み順：このブロックは最後＝同じ強さなら上の指定に勝つ ===== */
.fh2{font-size:32px;line-height:1.45}
.f2-h .lead{font-size:19px;line-height:1.85}
.sc .tx .fh3{font-size:28px}
.sc .tx p.t{font-size:18px;line-height:1.85}
.sc-d .tx{margin-bottom:28px}
.sc-d .ph{margin-top:0}

/* 全幅写真＋重ねた言葉（冬・夜）。白文字の地は暗いグラデーション（実測は作業ログ） */
.sfull{margin-top:72px;padding:0}
.sfull .ph{position:relative;max-width:1600px;margin:0 auto}
.sfull .ph img{width:100%;aspect-ratio:3/4;object-fit:cover}
.sfull .ph::after{content:"";position:absolute;inset:0;pointer-events:none}
.sfull .over{position:absolute;z-index:2;left:0;right:0;padding:0 24px}
.sfull .over .cap{color:#fff}
.sfull .fh3{color:#fff;font-size:34px;line-height:1.5;margin-top:14px;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.sfull .t{color:#fff;font-size:18px;line-height:1.85;margin-top:14px;max-width:24em;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.sf-w .ph img{object-position:50% 40%}
.sf-w .ph::after{background:linear-gradient(to top,rgba(8,12,10,.9) 0,rgba(8,12,10,.8) 38%,rgba(8,12,10,0) 72%)}
.sf-w .over{bottom:0;padding-bottom:52px}
.scn .ph img{aspect-ratio:4/5}

/* ③ 文字だけの節＝大きく */
.rs b{font-size:24px;line-height:1.55}
.rs .d{font-size:17px;margin-top:8px}
.rs li{padding:30px 0}
.dn .n{font-size:44px}
.fd .d3{font-size:22px}
.fd p.t{font-size:17px}

/* ④ 車＝外観を全幅に・仕様は大きな数字 */
.f4{padding:0 0 88px}
.cfull .ph{position:relative;max-width:1600px;margin:0 auto}
.cfull .ph img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 60%}
.cfull .ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(8,12,10,.82) 0,rgba(8,12,10,.62) 32%,rgba(8,12,10,0) 62%)}
.cfull .over{position:absolute;z-index:2;top:0;left:0;right:0;max-width:1160px;margin:0 auto;padding-top:32px}
.cfull .fh2{color:#fff;font-size:32px;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.cfull .carname{margin:10px 0 0;color:#fff;font-size:22px;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.stats.big{margin:56px 0 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.stats.big li{padding:30px 4px 26px;text-align:center}
.stats.big .num{font-size:48px;line-height:1.1;font-weight:400}
.stats.big .num small{font-size:20px;margin-left:2px}
.stats.big li span{margin:10px 0 0;font-size:15px;white-space:normal;color:var(--ink)}
.inside{grid-template-columns:1fr 1fr;gap:20px 12px}
.inside .cap{font-size:14px}
.vid{margin-top:48px}

/* ⑤ 旅先の写真＝1枚目を全幅・残りは隙間を詰めて */
.fgal{gap:6px;margin-left:-24px;margin-right:-24px}
.fgal figure:first-child{grid-column:1/-1}
.fgal figure:first-child img{aspect-ratio:3/2}
.fgal figcaption{padding:0 12px}
.fgal figcaption .cap{margin-top:6px}
.fgal .cap::before{display:none}
.fgal .cap{gap:0}
@media (max-width:899px){.fgal figure:nth-child(5){display:block}.fgal figure:nth-child(n+6){display:none}}

/* ⑥ 流れ＝大きな数字 */
.ffl .n{font-size:48px;line-height:1.1;color:var(--green);margin-bottom:8px}
.ffl b{font-size:22px}
.ffl p{font-size:16.5px}
.ffl li{padding:28px 0}

/* ⑦ FAQ＝読む形（たたむ・先頭だけ開く） */
.faq summary{font-size:19px;line-height:1.6;padding:20px 40px 20px 0}
.faq summary::after{top:30px}
.faq details[open] summary::after{top:35px}
.faq .a{font-size:17px;line-height:1.95;padding:0 0 26px}
.faq .a .tbd{margin-top:8px}

@media (min-width:900px){
  .fh2{font-size:52px}
  .f2-h .lead{font-size:20px}
  .sc .tx .fh3{font-size:40px}
  .sc .tx p.t{font-size:19px}
  .sc-d .sc-in{grid-template-columns:5fr 7fr}
  .sc-d .tx{margin-bottom:0}
  .sfull .ph img{aspect-ratio:21/9}
  .sfull .fh3{font-size:46px}
  .sfull .t{font-size:19px}
  .sf-w .ph::after{background:linear-gradient(to left,rgba(8,12,10,.88) 0,rgba(8,12,10,.78) 40%,rgba(8,12,10,0) 70%)}
  .sf-w .over{top:0;bottom:0;max-width:1160px;margin:0 auto;padding:0 48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end}
  .sf-w .over > *{width:420px;max-width:100%}
  .rs b{font-size:26px}
  .rs li{padding:36px 32px 40px}
  .dn .n{font-size:52px}
  .fd .d3{font-size:24px}
  .fd p.t{font-size:18px}
  .cfull .ph img{aspect-ratio:21/9;object-position:50% 55%}
  .cfull .ph::after{background:linear-gradient(to right,rgba(8,12,10,.84) 0,rgba(8,12,10,.7) 36%,rgba(8,12,10,0) 66%)}
  .cfull .over{top:0;bottom:0;left:0;right:0;padding:0 48px;display:flex;flex-direction:column;justify-content:center}
  .cfull .fh2{font-size:48px}
  .cfull .carname{font-size:30px}
  .stats.big{max-width:none;margin-top:72px}
  .stats.big .num{font-size:88px}
  .stats.big .num small{font-size:30px}
  .stats.big li span{font-size:17px}
  .inside{grid-template-columns:repeat(4,1fr);gap:16px}
  .fgal{margin-left:0;margin-right:0;grid-template-columns:repeat(4,1fr);gap:12px}
  .fgal figure:first-child img{aspect-ratio:21/9}
  .fgal img{aspect-ratio:4/3}
  .fgal figure:nth-child(6){display:none}
  .ffl .n{font-size:56px}
  .ffl b{font-size:24px}
  .faq summary{font-size:21px}
  .faq .a{font-size:18px}
}
/* v25b＝車の外観：スマホは写真の上に濃い緑の帯で見出し（車体が白く、重ねると読めない）／PCは写真に重ねる */
@media (max-width:899px){
  .cfull .ph{display:flex;flex-direction:column}
  .cfull .ph::after{display:none}
  .cfull .over{position:static;order:-1;background:var(--green-d);padding:44px 24px 32px;max-width:none;margin:0}
  .cfull .ph img{aspect-ratio:4/3;object-position:50% 42%}
}
.vid .guide .cap{display:block;text-align:center}
.vid .guide .cap::before{display:none}
/* v25c＝重ねた白文字の比を実測して影を濃く（夜の本文スマホ3.56→、PC車の見出し2.89→ を4.5以上に） */
.scn .ph::after{background:linear-gradient(rgba(8,12,10,.86) 0,rgba(8,12,10,.78) 52%,rgba(8,12,10,0) 86%)}
@media (min-width:900px){
  .scn .ph::after{background:linear-gradient(to right,rgba(8,12,10,.84) 0,rgba(8,12,10,.7) 46%,rgba(8,12,10,0) 76%)}
  .cfull .ph::after{background:linear-gradient(to right,rgba(8,12,10,.9) 0,rgba(8,12,10,.82) 48%,rgba(8,12,10,0) 78%)}
}
/* v25c＝使い方の例（③の「県外からのお客様」の下）・装備の注記 */
.rs .eg{margin-top:14px;font-size:16px;color:var(--sub)}
.rs .uses{margin-top:6px}
.eq-note{margin-top:16px;font-size:15px;color:var(--ink)}
/* v25d＝『たとえば』の箇条が .rs li（3列の区切り線・余白）を受け継いでPCで崩れていた＝箇条の中だけ打ち消す */
.rs .uses > li{padding:0 0 0 1.1em !important;margin:0;border:0 !important}
.rs .uses > li::before{top:0}
/* v25e＝整備の枠に店舗の外観（nm_store_front）。建物が見えるよう暗い帯を下側だけに寄せ、写真の位置を下げる */
.ph8 img{object-position:50% 62%}
.ph8::after{background:linear-gradient(rgba(8,12,10,0) 45%,rgba(8,12,10,.55) 70%,rgba(8,12,10,.88) 100%)}

/* v26（2026-10-24）＝LINEの常時ボタン。スマホ（〜899px）＝公式の友だち追加ボタンだけを右下に。予約バー（〜767px）が出ている間はその上へ。PC（900px〜）＝白い小バナーにQR・ひとこと・ボタン */
.line-float{position:fixed;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:4px;text-decoration:none;color:var(--ink);transition:bottom .2s ease}
.line-float .lf-btn{display:block;width:116px;height:36px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.line-float .lf-qr,.line-float .lf-txt{display:none}
body.bar-on .line-float{bottom:calc(84px + env(safe-area-inset-bottom))}
.sp-bar{z-index:30}
@media (min-width:768px){ body.bar-on .line-float{bottom:calc(14px + env(safe-area-inset-bottom))} }
@media (min-width:900px){
  .line-float{right:20px;bottom:20px;flex-direction:column;gap:6px;width:132px;padding:12px 10px 10px;background:#fff;border:1px solid var(--rule);border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,.12)}
  .line-float .lf-qr{display:block;width:96px;height:96px}
  .line-float .lf-txt{display:block;font-size:14px;line-height:1.4;letter-spacing:.04em}
  .line-float .lf-btn{filter:none}
}
@media (prefers-reduced-motion: reduce){ .line-float{transition:none} }
/* v29（2026-10-26）＝旅程4方角のタブ。JSが無いときは4本が縦に並ぶ（hidden はJSが付ける） */
.rtabs{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 28px;border:1px solid var(--ink)}
.rtabs button{min-height:48px;margin:0;padding:0 4px;border:0;border-left:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font-family:var(--serif);font-size:18px;font-weight:500;letter-spacing:.08em;cursor:pointer}
.rtabs button:first-child{border-left:0}
.rtabs button[aria-selected="true"]{background:var(--ink);color:var(--sand)}
.rtabs button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rp[hidden]{display:none}
.rp + .rp{margin-top:56px}
.rp .rt{margin:0 0 24px;font-size:15px;line-height:1.7;color:var(--sub);letter-spacing:.04em}
.rp .fd:nth-of-type(n) .ph img{object-position:50% 50%}
#rp-w .fd:nth-of-type(2) .ph img{object-position:22% 50%}
#rp-w .fd:nth-of-type(3) .ph img{object-position:18% 50%}
@media (min-width:900px){
  .rtabs{max-width:560px}
  .rp .rt{font-size:16px;margin-bottom:32px}
}

/* v30（2026-10-28）＝旅の一例の方角ごとの色（中山様 10/27 18:56「バナーに色を」・色はTwill案：西＝夕焼けの橙／東＝富士の青／北＝北陸の深緑／南＝熊野の海の青緑）。
   --dc＝濃い色（選択中の面・線・Dayの字）／--dl＝薄い同系色（非選択の面）。白文字は濃い色に対して4.5:1以上、濃い色の字は薄い色・生成り・白に対して4.5:1以上 */
[data-dir="w"]{--dc:#A8480F;--dl:#FBE6D5}
[data-dir="e"]{--dc:#2A5A94;--dl:#DCE8F5}
[data-dir="n"]{--dc:#3B6B3A;--dl:#E1EDDC}
[data-dir="s"]{--dc:#0A6E77;--dl:#D6EEF0}
.rtabs{border-color:var(--rule);background:var(--paper)}
.rtabs button{border-left:1px solid var(--paper);background:var(--dl);color:var(--dc);font-weight:600;border-bottom:4px solid var(--dc)}
.rtabs button:first-child{border-left:0}
.rtabs button[aria-selected="true"]{background:var(--dc);color:#fff}
.rtabs button:focus-visible{outline:2px solid var(--dc);outline-offset:2px}
.rp .rt{color:var(--dc);border-left:4px solid var(--dc);padding-left:12px;font-weight:500}
.rp .fd::before{background:var(--dc)}
.rp .dn .n{color:var(--dc)}
.rp .dn::after{content:"";flex:0 0 40px;height:2px;background:var(--dc)}

/* v30b（2026-10-28）＝本人「タブだけでなく背景も」→ 選んだ方角の中身（.rp）の地を、方角ごとのごく薄い色に（--db＝タブの非選択 --dl よりさらに淡い）。
   スマホは画面の端まで（.fw の左右24pxを打ち消す）、PCは枠の中で四角く。時間札（.mk）の地も同じ色にして、道のりの線の切れ目を合わせる */
[data-dir="w"]{--db:#FDF3EA}
[data-dir="e"]{--db:#EEF4FA}
[data-dir="n"]{--db:#F0F6EE}
[data-dir="s"]{--db:#EBF6F7}
.rp{background:var(--db);margin-left:-24px;margin-right:-24px;padding:28px 24px 36px}
.rp .mk,.rp .mk::before{background:var(--db)}
@media (min-width:900px){
  .rp{margin-left:0;margin-right:0;padding:40px 40px 48px}
  .rp .bleed{margin-left:0;margin-right:0}
}

/* v31（2026-10-28）＝監査C #17。固定の h1 は画面に出さず読み上げ・検索用に。見た目の見出しは .h1v（旧 .fhero h1 の指定をそのまま移した） */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
ruby rt{font-size:.5em;letter-spacing:0}
/* v31＝監査C #19。幅900〜1100px で Day1〜3（3列）と「借りるまでの流れ」（4列）が横にはみ出す＝列を縮められるようにし、文字と余白を少し詰める */
@media (min-width:900px) and (max-width:1100px){
  .tl{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
  .rp{padding:32px 24px 40px}
  .fd .d3{font-size:19px}
  .ffl{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 20px}
  .ffl p{font-size:15px}
  .tl .fd p.t{font-size:16px}
  .tl .tbd-line{font-size:14.5px;letter-spacing:.02em}   /* 所要時間の行を語の途中で折らずに収める */
  /* ③東員から出発する理由（3列）も900px台の頭で「県外からのお客様が大半です」が溢れる＝同じ扱いに */
  .rs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rs li{padding-left:24px;padding-right:24px}
  .rs b{font-size:22px}
  .rs .k{white-space:normal}
  /* 列より長い文節だけは中で折る（inline-block のままなので、収まる文節は今まで通り丸ごと次の行へ送られる） */
  .tl .k,.ffl .k{white-space:normal}
}

/* v31h（2026-10-28）＝本人「PCでの改行がひどい」「雪景色がフェードの黒に隠れている」「夜の文字が上過ぎ」 */
.pl{display:inline}
.sf-w .ph::after{background:linear-gradient(to bottom,rgba(8,20,40,.45) 0,rgba(8,20,40,.18) 34%,rgba(8,20,40,0) 52%)}
.sf-w .over{top:0;bottom:auto;padding-top:48px;padding-bottom:0}
.scn .over{padding-top:64px}
@media (min-width:900px){
  .pl{display:block}
  .f2-h{grid-template-columns:1fr;gap:24px}
  .sc-a .sc-in{grid-template-columns:6fr 6fr}
  .sc-a .tx .fh3{font-size:clamp(28px,2.6vw,36px)}
  .sf-w .ph::after{background:linear-gradient(to right,rgba(8,20,40,.6) 0,rgba(8,20,40,.32) 32%,rgba(8,20,40,0) 55%)}
  .sf-w .over{justify-content:flex-start;align-items:flex-start;padding-top:72px}
  .scn .over{padding-top:112px}
}

/* v31i（2026-10-28）＝FAQの答えを箇条書き＋蛍光ペン（本人「テキストだらけで見づらい」） */
.faq .a ul.al{margin:0;padding:0 0 0 1.25em;list-style:disc}
.faq .a ul.al li{line-height:1.75;margin-top:8px}
.faq .a ul.al li:first-child{margin-top:0}
.faq .a ul.al li::marker{color:var(--green)}
.faq .a .hl{background:linear-gradient(transparent 56%,#FFE16A 56%)}   /* v32c（2026-10-28）＝本人「蛍光ペンのところだけ字が小さい」→ .mk（旅程の時間札）と名前がぶつかっていた＝.hl に分けた */

/* v31j（2026-10-28）＝本人「友達追加のフロートはもっと大きくてもいい・特にスマホ」 */
.line-float .lf-btn{width:161px;height:50px}
body.bar-on .line-float{bottom:calc(88px + env(safe-area-inset-bottom))}
@media (min-width:768px){ body.bar-on .line-float{bottom:calc(16px + env(safe-area-inset-bottom))} }
@media (min-width:900px){
  .line-float{width:160px}
  .line-float .lf-qr{width:124px;height:124px}
  .line-float .lf-txt{font-size:15px}
  .line-float .lf-btn{width:140px;height:43px}
}

/* v32（2026-10-28）＝本人「タブを並べただけでは気づかない。全部を見せるためのUIになっていない」→ 札4枚＋項目トップの動画（AskUserQ）。
   ①動画（.rreel）＝4方角の写真と行き先が順に切り替わる。スマホは正方形、PCは横長（make_route_reel_v32.py）
   ②札（.rtabs button）＝Day1の写真・方角・行き先。スマホは2×2、PCは横一列。色の決まり（v30の --dc/--dl）はそのまま＝押した札が方角の濃い色に
   ③各旅の最後（.rnext）＝残り3方角へのボタン。押すと札の位置へ戻って切り替わる */
.rreel{margin:0 -24px 24px;background:var(--night)}
.rreel video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.rhint{margin:0 0 12px;font-size:15px;line-height:1.7;color:var(--ink);letter-spacing:.04em}
.rtabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:0;background:none;max-width:none}
.rtabs button{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:0;border:0;border-bottom:4px solid var(--dc);background:var(--dl);color:var(--dc);text-align:left;overflow:hidden;transition:background-color .15s}
.rtabs button:first-child{border-left:0}
.rtabs button img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.rtabs .rd{display:block;padding:10px 12px 0;font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.4;letter-spacing:.06em}
.rtabs .rv{display:block;padding:4px 12px 12px;font-family:inherit;font-size:13px;font-weight:500;line-height:1.6;letter-spacing:.02em;color:var(--ink)}
.rtabs button[aria-selected="true"] .rv{color:#fff}
.rtabs button[aria-selected="false"] img{opacity:.9}
.rtabs button:hover .rd{text-decoration:underline;text-underline-offset:4px}
.rtabs button:focus-visible{outline:3px solid var(--dc);outline-offset:3px}
.rnext{margin:40px 0 0;padding-top:24px;border-top:1px solid #9C978C}
.rnext p{margin:0 0 12px;font-size:15px;line-height:1.6;color:var(--ink);letter-spacing:.04em}
.rgos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rgo{min-height:48px;margin:0;padding:0 6px;border:0;border-bottom:4px solid var(--dc);border-radius:0;background:var(--dl);color:var(--dc);font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:.06em;cursor:pointer}
.rgo:hover{background:var(--dc);color:#fff}
.rgo:focus-visible{outline:3px solid var(--dc);outline-offset:3px}
@media (min-width:900px){
  .rreel{margin:0 0 32px}
  .rreel video{aspect-ratio:1280/600}
  .rhint{font-size:16px}
  .rtabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:none;margin-bottom:32px}
  .rtabs .rd{font-size:24px;padding:12px 16px 0}
  .rtabs .rv{font-size:14px;padding:4px 16px 14px}
  .rgos{max-width:480px}
}
@media (prefers-reduced-motion: reduce){ .rtabs button{transition:none} }

/* v33（2026-10-28）＝監査v32c 必須3：PC幅でヒーローの注記の右端がLINEの常時ボタン（右下・幅160px）の下に隠れていた。注記を文節で折り、ボタンの手前で止める */
@media (min-width:900px){ .fhero .btn-note{max-width:380px} }

/* v33b（2026-10-28）＝本人「CTAが弱すぎる」。外部リンクのボタン（.lbtn＝太字・太枠・角丸）の方が予約ボタンより強く見えていた＝強弱が逆。
   予約ボタンを一段上に：大きく・太く・角丸を揃え・影をつけ、本文中のボタンには2行目「日付を選ぶと、合計金額がすぐ出ます」 */
.btn{border-radius:10px;font-weight:700}
.fhero .btn.lt,.ffinal .btn{min-height:64px;font-size:19px}
.btn-main{min-height:76px;padding:12px 28px;font-size:20px;box-shadow:0 6px 18px rgba(36,58,45,.28);transition:background .15s,transform .15s,box-shadow .15s}
.btn-main .bt{display:flex;flex-direction:column;align-items:center;line-height:1.4;text-align:center}
.btn-main .bm{font-size:20px;letter-spacing:.06em}
.btn-main .bs{margin-top:2px;font-size:14px;font-weight:400;letter-spacing:.04em;color:#E3ECE5}
.btn-main .arr{flex:none;width:11px;height:11px;margin-left:6px}
.btn-main:hover,.btn-main:focus-visible{background:var(--green-d);transform:translateY(-1px);box-shadow:0 10px 24px rgba(36,58,45,.34)}
.cta-block .pre{font-family:var(--serif);font-size:19px;line-height:1.7}
@media (min-width:900px){ .btn-main{max-width:520px} }
@media (prefers-reduced-motion: reduce){ .btn-main{transition:none} .btn-main:hover{transform:none} }

/* v33b＝本人「スマホはいらないけど、PCには右側に画像があってもいい」＝夜を過ごす場所の探し方の右に、本人の写真（十二坊オートキャンプ場の夜・ナンバーはぼかし済み）。スマホでは出さない（display:none なので遅延読み込みも走らない） */
.stay-ph{display:none}
@media (min-width:900px){
  .stay{max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:40px;align-items:start}
  .stay > *{grid-column:1}
  .stay-ph{display:block;grid-column:2;grid-row:1 / span 6;margin:0}
  .stay-ph img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
  .stay-ph figcaption{margin-top:8px;font-size:14px;line-height:1.6;color:var(--sub)}
}

/* v33b＝本人「ここも弱いよね」（最後の節）。予約は本文中と同じ2行の大きいボタン（深緑の地なので白地）、LINEは細い線をやめてLINEの緑で塗る。
   文字は濃い緑＝白文字だと #06C755 との比が2.26で足りないため（濃い文字なら約7:1・ボタンと地の比は5.42） */
.ffinal .btn-main{background:#fff;color:var(--green-d);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.ffinal .btn-main .bs{color:#4A5A50}
.ffinal .btn-main .arr{border-color:var(--green-d)}
.ffinal .btn-main:hover,.ffinal .btn-main:focus-visible{background:#F1F5F2}
.ffinal .line-btn{min-height:64px;margin-top:28px;background:#06C755;border:0;border-radius:10px;color:#0B2414;font-size:18px;font-weight:700}
.ffinal .line-btn:hover,.ffinal .line-btn:focus-visible{background:#22D36A}
@media (min-width:900px){ .ffinal .in > .btn,.ffinal .in > .line-btn{max-width:520px} }

/* v33c（2026-10-28）＝本人「CTAの部分は左に寄せるんじゃなくって、センタリングにできない？」＝本文中の予約の塊と最後の節を中央そろえに */
.cta-block{text-align:center}
.cta-block .btn,.cta-block .btn-note{margin-left:auto;margin-right:auto}
.ffinal .in{text-align:center}
.ffinal .in > *{margin-left:auto;margin-right:auto}

/* v33d（2026-10-28）＝本人「違和感ある隙間だらけ」（整備の節）。2列（5fr/6fr）＋罫線の箇条で、左の1文の下と「地元の方へ」の上に大きな空きが出ていた。
   1列・最大720pxにまとめ、説明とボタンは生成りの箱1つに、「地元の方へ」は箱のすぐ下に */
.f8-body{display:block;max-width:720px;margin:0 auto}
.f8 .lead8{font-family:var(--serif);font-size:19px;line-height:1.8;letter-spacing:.03em}
.f8 .care{margin-top:24px;padding:20px 20px 16px;background:var(--sand);border-radius:10px}
.f8 .care p{margin:0;font-size:16px;line-height:1.8}
.f8 .care p + p{margin-top:4px}
.f8 .care .stay-link{margin-top:12px}
.f8 .local{margin-top:20px;font-size:15.5px;line-height:1.8}
.f8 .local b{margin-right:1em;font-weight:700}
@media (min-width:900px){
  .f8-body{display:block;padding-top:64px}
  .f8 .lead8{font-size:22px}
  .f8 .care{margin-top:28px;padding:28px 32px 24px}
  .f8 .local{margin-top:24px;grid-column:auto}
}

/* v33d＝本人「右に寄りすぎな組み方」（旅のはじまり）。3列目だけ「たとえば」の5つで長かった＝3列の下の全幅の段へ。PCは5つを横に並べた札、スマホは縦の箇条 */
.uses-row{margin-top:28px}
.uses-row .eg{margin:0;font-size:16px;color:var(--sub)}
.uses-row .uses{margin-top:8px}
@media (min-width:900px){
  .uses-row{margin-top:40px}
  .uses-row .uses{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:12px}
  .uses-row .uses li{padding:16px 18px;background:#fff;border-radius:10px;font-size:15.5px;line-height:1.7}
  .uses-row .uses li::before{content:none}
}

/* v33d＝PCで本文の列を中央に置くと、左寄せの見出し（.fw の左端）とずれる＝左端を見出しにそろえる */
.f8-body{max-width:1160px;margin-left:auto;margin-right:auto}
.f8-body > *{max-width:720px}
/* v33d＝幅900〜1199では5つ並べると札が狭く文字がはみ出す＝3列に */
@media (min-width:900px) and (max-width:1199px){ .uses-row .uses{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* v33g（2026-10-29）＝店舗サイトへの文字リンク（整備の枠・フッター）。予約ボタンより目立たせない＝下線つきの文字だけ・押せる高さ44px */
.site-link{margin-top:8px}
.site-link a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:3px}
.f8 .site-link a{font-size:15.5px}