@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   Let's!  共通スタイル
   ★設計書 09_新設計_レインボー_20260815/01_設計書_Lets.md 第1.5章 が正★
   ★この1枚だけを全ページで読み込む。ページ内に style を書かない★

   会長ご指示（2026-08-15）
     ・澄み切ったブルーと純白の白と桜のピンクと
       温かみのあるオレンジと文字は黒
     ・Let's! の基本カラーは澄み切ったブルー
     ・黄色や赤や緑なども使ってもいいが、メインにしてはいけない
     ・新緑の写真などは良い（★写真の色は自然のまま★）
     ・子供が作るような半端で幼稚なデザインにしないで、
       大手旅行会社や大手企業が作る本格的なデザインや構成にする
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. 変数 ─────────────────────────────────────────────── */
:root{
  /* 澄み切ったブルー（★基本カラー★・骨格 20〜25%） */
  --blue-900:#0A3F66;
  /* ★2026-08-20 ディズニー実測 rgb(0,119,204)=#0077CC。#0F6FB3 は暗かった★ */
  --blue-700:#0B72C4;
  --blue-400:#5FAFD9;
  --blue-100:#E7F3FA;
  /* 純白（地 60〜70%） */
  --white:#FFFFFF;
  --off:#F7FAFC;
  /* 桜のピンク（季節・3%以下） */
  --sakura-500:#E0899C;
  --sakura-200:#F7D7DF;
  /* 温かみのあるオレンジ（★行動を促す★・5%以下） */
  --orange-600:#D9741F;
  --orange-500:#EF8F3C;
  --orange-100:#FDEEDF;
  /* 緑（自然・3%以下） */
  --green-600:#3C6238;
  --green-100:#E9F3E8;
  /* 文字（★会長ご指定：文字は黒★） */
  --ink:#000000;
  --ink-sub:#4A4A4A;
  /* 線・影 */
  --line:#DCE7EF;
  --shadow:0 1px 3px rgba(10,63,102,.08),0 8px 24px rgba(10,63,102,.06);
  --shadow-up:0 2px 6px rgba(10,63,102,.12),0 14px 32px rgba(10,63,102,.10);
  /* 寸法 */
  --wrap:1200px;
  --radius:10px;
  --radius-img:8px;
  /* 余白（★8の倍数だけを使う★） */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  /* 文字の大きさ（★6段階だけ。増やさない★） */
  --fs-hero:clamp(2.0rem,5vw,3.5rem);
  --fs-h1:clamp(1.6rem,3.5vw,2.4rem);
  /* ★2026-08-20 ディズニー実測 H2=30px／H3=22px。太さを落として大きさを上げた★ */
  --fs-h2:clamp(1.45rem,3vw,1.95rem);
  --fs-h3:1.2rem;
  --fs-body:1rem;
  --fs-note:.875rem;
}

/* ─── 2. 土台 ─────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter","Helvetica Neue",
    Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"palt" 1;
  font-size:var(--fs-body);
  line-height:1.75;
  letter-spacing:.01em;
  color:var(--ink);
  background:var(--white);
  -webkit-text-size-adjust:100%;
}
/* ★★★2026-08-20 見出しタグの太さを1か所で決める★★★
   ★会長ご指摘「ダサい格好悪い幼稚で初心者のようなUIを作るなよ！」★
   ★ディズニー公式の実測＝H2 30px/weight400・H3 22px/weight400★
   　→ ★プロは「大きさ」で差を付け、「太さ」では付けない★
   ★これを書く前は h4 が6個、ブラウザ既定の bold(700) で出ていた★
   　（CSSで指定していない見出しタグは全部 bold になる＝これが幼稚に見える原因）
   ★救急の電話番号（.sos-i .num）とボタン・タグの太字は落とさない★
   　→ ディズニーもボタンとラベルは太字。★命に関わる番号は太く残す★ */
h1,h2,h3,h4,h5,h6{font-weight:600;letter-spacing:-.005em}
/* ★本文中の強調。1枚に22個出ていた（ブラウザ既定 bold=700）★
   ★中身は残す（営業時間・定休日・値段は読者に必要）。太さだけ 700→600★ */
b,strong{font-weight:600}
img{max-width:100%;display:block;height:auto}
a{color:var(--blue-700)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s3)}
@media(max-width:700px){.wrap{padding:0 var(--s2)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ─── 3. ヘッダー ─────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:90;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(10,63,102,.03),0 6px 20px rgba(10,63,102,.045)}
@supports not (backdrop-filter:blur(1px)){.hd{background:var(--white)}}
.hd-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--s3);
  height:64px;display:flex;align-items:center;gap:var(--s4)}
.logo{font-size:1.32rem;font-weight:800;color:var(--blue-700);
  letter-spacing:-.02em;text-decoration:none;flex-shrink:0}
.nav{display:flex;gap:var(--s3)}
.nav a{color:var(--ink);text-decoration:none;font-size:.94rem;font-weight:600;
  padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{color:var(--blue-700);border-bottom-color:var(--blue-700)}
/* ★★★2026-08-25 ③ナビの1行説明（会長ご指示・JTBには在り Let's! に無かった）★★★
   ★「Things to do」「Plan your trip」だけでは中身が分からない★
   ★英語が母語でない訪日客ほど、1行あるだけで迷いが消える★
   ★バーの高さは変えない ── 浮かせて出す（レイアウトを壊さない）★ */
.nav a{position:relative}
.nav .nd{display:none;font-weight:500}
@media(min-width:941px){
  .nav .nd{
    position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 12px);
    background:var(--white);border:1px solid var(--line);border-radius:8px;
    padding:9px 13px;font-size:.78rem;color:var(--ink-sub);white-space:nowrap;
    box-shadow:0 8px 24px rgba(10,63,102,.14);z-index:95;pointer-events:none}
  .nav a:hover .nd,.nav a:focus-visible .nd{display:block}
}
.hd-r{margin-left:auto;display:flex;gap:10px;align-items:center}
.lang{font-size:.88rem;font-weight:600;color:var(--blue-700);border:1px solid var(--line);
  background:var(--white);border-radius:999px;padding:7px 14px;cursor:pointer;font-family:inherit}
.search{border:1px solid var(--line);border-radius:999px;padding:7px 14px 7px 34px;
  font-family:inherit;font-size:.88rem;width:170px;background:var(--off) no-repeat 11px center/15px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E")}
.burger{display:none;background:none;border:0;font-size:1.4rem;cursor:pointer;color:var(--blue-700)}
/* ★★★2026-08-25 助けの導線を「最上段」に（会長ご指示・命に関わる）★★★
   ★他社調査の指摘「助けを呼ぶ導線が最下部のみ」★
   ★実測でわかった穴 ── 携帯は下の帯で押せるが、★PC幅では帯が消えていた★
   ★一度は右下に浮かせたが、★本文を隠した★ので上に移した★
   ★赤で目立たせるが、箱ごと赤くはしない（探している人が見つけられる強さで十分）★ */
/* ★制作ルール C6（会長様ご明示）「★警告色(赤)を多用しない・穏やかな色で★」★
   ★2026-08-25 私は赤枠にしていた。サイトの色（青と白）に直した★ */
.hd-sos{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  color:var(--blue-700);font-size:.86rem;font-weight:700;white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;
  transition:background .15s,border-color .15s}
.hd-sos b{font-size:.98rem;line-height:1}
.hd-sos:hover{background:var(--blue-100);border-color:var(--blue-400)}
.hd-sos:focus-visible{outline:3px solid var(--blue-400);outline-offset:2px}
/* ★携帯では下の帯が同じ役目をするので、上は隠して場所を空ける★ */
@media(max-width:700px){.hd-sos{display:none}}
@media(max-width:940px){.nav,.search{display:none}.burger{display:block;margin-left:auto}}

/* ─── 4. パンくず ─────────────────────────────────────────── */
.crumb{background:var(--off);border-bottom:1px solid var(--line);
  font-size:.84rem;color:var(--ink-sub)}
.crumb .wrap{padding-top:11px;padding-bottom:11px}
.crumb a{color:var(--blue-700);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb span{opacity:.5;margin:0 var(--s1)}

/* ─── 5. ヒーロー ─────────────────────────────────────────── */
.hero{position:relative}
/* ★★★2026-08-20 ヒーローの高さに上限をかけた★★★
   ★会長ご指摘「何だこの余白だらけの小学生が作ったようなUIは？」★
   ★実測（直す前）★ 画面900px に対しヒーロー ★810px＝90%★
   　→ 16/9 だけを指定していたので★画面が広いほど縦に伸びていた★
   　→ 行き先のカードが 1075px の位置＝★スクロールしないと何も見えない★
   ★直した後★ 上限 ★min(52vh,430px)★ ＝ 1画面目に★行き先のカードが入る★
   ★画像には触っていない（会長ご命令「画像は別だ」）。枠の高さだけ★ */
.hero>.ph,.hero>img{aspect-ratio:16/9;border-radius:0;object-fit:cover;width:100%;
  max-height:min(52vh,430px)}
@media(max-width:700px){.hero>.ph,.hero>img{aspect-ratio:4/3;max-height:min(46vh,320px)}}
.hero-txt{position:absolute;inset:auto 0 0 0;padding:var(--s6) var(--s3) var(--s4);
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0) 78%)}
/* ★写真がまだ無いヒーロー（.ph）の時は、黒ではなくブランドのブルーを重ねる★ */
/* ★2026-08-20 会長ご叱責「何だこの汚いブルーは？」★
   旧＝濃紺 rgba(10,63,102,.92) を92%重ねていた → ★くすんで灰色がかった★
   新＝★澄んだ青（絶対律②）★。文字が読める分だけ下に敷き、上は抜く */
.hero>.ph+.hero-txt{
  background:linear-gradient(to top,rgba(10,70,124,.90) 0%,rgba(11,114,196,.55) 46%,
                                    rgba(95,175,217,.14) 76%,rgba(95,175,217,0) 100%)}
/* 🚨★★★2026-08-29 ★写真が入ったヒーローは元の黒い薄がけに戻す★★★🚨
   ★上の青いベールは「写真がまだ無い時」の見せ方★。
   ★これが残ると、せっかくの桜島が90%の青で塗り潰されて見えない★ */
.hero>.ph:has(img)+.hero-txt{
  background:linear-gradient(to top,rgba(0,0,0,.68) 0%,rgba(0,0,0,.34) 46%,
                                    rgba(0,0,0,.10) 78%,rgba(0,0,0,0) 100%)}
.hero-in{max-width:var(--wrap);margin:0 auto}
/* ★2026-08-20 ディズニー実測 800→600（太さではなく大きさで見せる）★ */
.hero h1{color:#fff;font-size:var(--fs-hero);line-height:1.18;font-weight:600;
  letter-spacing:-.02em;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.hero p{color:#fff;font-size:clamp(1rem,2vw,1.18rem);margin-top:12px;max-width:62ch;opacity:.96}
.hero .jp{display:block;font-size:.62em;font-weight:600;opacity:.9;margin-top:6px}

/* ─── 6. 節と見出し ───────────────────────────────────────── */
/* ★★★2026-08-20 セクションの余白を詰めた★★★
   ★会長ご指摘「何だこの余白だらけの小学生が作ったようなUIは？」★
   ★実測（直す前）★ section 上下 ★96px★ → 隣り合うと ★192px の空白★
   　　　　　　　　　section.tight 上下 64px → 隣り合うと 128px
   ★他社の実測★ JTB・るるぶ・ディズニーはいずれも ★40〜56px★
   ★直した後★ section 64px（隣接128px）／tight 44px（隣接88px）
   ★--s7 等の変数は他でも使うので触らない。section だけ数値で書いた★ */
section{padding:64px 0}
section.tight{padding:44px 0}
section.alt{background:var(--off)}
@media(max-width:700px){section{padding:40px 0}section.tight{padding:30px 0}}
/* ★2026-08-20 ディズニー実測 H2=weight400。700→500 に落とした★ */
.h2{font-size:var(--fs-h2);font-weight:500;letter-spacing:-.005em;margin-bottom:var(--s1)}
.h2 .sub{display:block;font-size:.56em;font-weight:600;color:var(--ink-sub);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
/* ★2026-08-20 ディズニー実測 H3=weight400。800→600★ */
.h3{font-size:var(--fs-h3);font-weight:600;margin:var(--s4) 0 10px}
.rule{width:56px;height:3px;background:var(--sakura-500);border-radius:2px;margin:14px 0 var(--s3)}
.rule.b{background:var(--blue-700)}
.lead{color:var(--ink-sub);max-width:92ch;margin-bottom:var(--s4)}
p{max-width:92ch}
/* ★2026-08-20 会長ご指摘「余白だらけ」★ 68ch→92ch に広げた。
   68ch は小説の幅。★観光ガイドは情報を並べるので広く使う★ */

/* ─── 7. 写真の枠（★差し込み予定・data-need を必ず書く★）───── */
/* ★2026-08-20 会長ご叱責「余白だらけ」「０点だ」★
   旧＝ほぼ白（#EDF6FB〜#FDF6F8）→ ★何も見えず、余白に見えていた★
   新＝★澄んだ青の面★。JTB・るるぶトラベルのように★面そのものが主役★になる
   （実画像が入ると object-fit:cover で完全に隠れる。★画像は会長ご命令で最後★） */
.ph{position:relative;overflow:hidden;aspect-ratio:4/3;
  border:1px solid rgba(11,114,196,.18);border-radius:var(--radius-img);
  background:
    radial-gradient(130% 100% at 82% 8%, rgba(247,215,223,.85) 0%, rgba(247,215,223,0) 55%),
    radial-gradient(130% 110% at 10% 98%, rgba(11,114,196,.30) 0%, rgba(11,114,196,0) 60%),
    linear-gradient(165deg,#CDE8F6 0%,#E8F4FB 48%,#FBE9EF 100%)}
/* ★ブランドの控えめな地紋 ── 画像が入るまでの面をプロのプレースホルダに見せる★ */
.ph::before{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(10,63,102,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,63,102,.045) 1px, transparent 1px);
  background-size:22px 22px}
.ph::after{content:"Let's!";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-size:clamp(.9rem,2.6vw,1.35rem);font-weight:800;letter-spacing:.02em;
  color:var(--blue-900);opacity:.13;white-space:nowrap;pointer-events:none}
/* 🚨★★★2026-08-29 実際の写真が入ったとき★★★🚨
   ★写真が主役★。地紋と「Let's!」の文字は★消す★（写真の上に出てはいけない）
   ★object-fit:cover ＝ 枠の形に合わせて中央を残す（人物や建物が切れない）★ */
/* ★isolation:isolate ＝ 写真の重なりを枠の中だけに閉じ込める★
   （これが無いと★県トップの「Kagoshima 鹿児島県」の白い文字が写真の下に隠れる★） */
.ph{isolation:isolate}
.ph img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;z-index:2;
  border-radius:inherit}
.ph:has(img)::before,.ph:has(img)::after{content:none;display:none}
/* 🚨★★★2026-08-31 ★写真が入っていない枠は消す★★★🚨
   ★中釜さんご命令「写真がメインなんだぞ」★
   ★空の枠が並ぶと、訪日外国人には「未完成のサイト」に見える★
   ★写真が入った枠だけを見せる。空の枠は場所を取らずに畳む★
   ※ ヒーロー（.hero>.ph）は写真が無くてもブランドの面として残す
     （文字を載せる下地。ここが消えると見出しが浮く） */
.ph:not(:has(img)){display:none}
.hero>.ph:not(:has(img)){display:block}

/* ─── 8. カード ───────────────────────────────────────────── */
.grid{display:grid;gap:var(--s3)}
/* ★2026-08-20 会長ご指摘「余白だらけ」★
   auto-fill は★カードが足りなくても枠を作って空ける★（右に空白ができる原因）
   → ★auto-fit にすると枠を詰めてカードが伸びる。空白が消える★ */
.g2{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);
  display:block;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:var(--shadow-up);transform:translateY(-2px)}
.card>.ph,.card>img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.card:hover>.ph,.card:hover>img{transform:scale(1.035)}
.card .bd{padding:var(--s2) 18px 20px}
.card h3{font-size:var(--fs-h3);font-weight:600;line-height:1.4}
.card h3 .jp{display:block;font-size:.72em;font-weight:600;color:var(--ink-sub);margin-top:2px}
.card p{font-size:.875rem;color:var(--ink-sub);margin-top:var(--s1);line-height:1.65}

/* ─── 9. タグ（★点として使う★）───────────────────────────── */
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.tag{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;
  background:var(--blue-100);color:var(--blue-900)}
.tag.s{background:var(--sakura-200);color:#8C3F52}   /* 季節 */
.tag.o{background:var(--orange-100);color:var(--orange-600)} /* 食・注意 */
.tag.g{background:var(--green-100);color:var(--green-600)}   /* 自然・菜食 */

/* ─── 10. ボタン（★48px以上・指で押せる★）──────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  min-height:48px;padding:0 22px;border-radius:8px;font-weight:700;font-size:.94rem;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  font-family:inherit;transition:background .18s,color .18s}
.btn.pri{background:var(--orange-500);color:#fff}      /* ★行動を促す★ */
.btn.pri:hover{background:var(--orange-600)}
.btn.sec{background:var(--white);color:var(--blue-700);border-color:var(--blue-700)}
.btn.sec:hover{background:var(--blue-100)}
.btn.sm{min-height:40px;padding:0 15px;font-size:.86rem}
.btn.full{width:100%}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* ─── 11. 事実の表 ───────────────────────────────────────── */
dl.info{display:grid;grid-template-columns:104px 1fr;margin-top:18px;font-size:.9rem}
dl.info dt{color:var(--ink-sub);font-weight:600;padding:9px 0;
  border-top:1px solid var(--line);font-size:.84rem}
dl.info dd{padding:9px 0;border-top:1px solid var(--line)}
dl.info a{color:var(--blue-700);font-weight:700;text-decoration:none}
dl.info a:hover{text-decoration:underline}
/* ★★★2026-08-20 項目の中の電話番号を「指で押せる大きさ」にする★★★
   ★実測★ 我琉ふ（鹿児島）の電話リンクの高さが ★17px★ しかなかった
   　→ ★訪日客はスマホで見る。17px は指で押せない★
   ★会長ご命令「見た目の整列と探しやすさ」＝★押せることも「探しやすさ」★
   ★tel: のリンクだけに効かせる（同じ dl.info の中の他のリンクは変えない）★
   ★救急の箱（.sos）は別のクラスなので影響しない★ */
dl.info a[href^="tel:"]{display:inline-block;min-height:44px;line-height:44px;
  padding:0 12px;margin:2px 0;border:1px solid var(--line);border-radius:8px;
  background:var(--off)}
dl.info a[href^="tel:"]:hover{background:var(--blue-100);text-decoration:none}
@media(max-width:520px){dl.info{grid-template-columns:88px 1fr;font-size:.86rem}}

.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white)}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:620px}
th,td{padding:13px var(--s2);text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--off);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-sub);font-weight:700}
tr:last-child td{border-bottom:0}

/* ─── 12. 店（型D）─────────────────────────────────────────── */
.shop{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);margin-bottom:var(--s4)}
.shop-hd{display:grid;grid-template-columns:1.15fr 1fr}
@media(max-width:820px){.shop-hd{grid-template-columns:1fr}}
.shop-hd .ph{border:0;border-radius:0;aspect-ratio:auto;min-height:230px;height:100%}
.shop-bd{padding:var(--s3) 26px}
.shop-bd h3{font-size:1.3rem;font-weight:600;line-height:1.35}
.shop-bd h3 .yomi{display:block;font-size:.56em;font-weight:600;
  color:var(--ink-sub);letter-spacing:.06em;margin-top:4px}
.shop-lead{font-size:.92rem;color:var(--ink-sub);margin-top:10px}
.dishes{padding:0 26px 26px}
.dishes h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-sub);margin-bottom:12px}
.dishes .grid{gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.dishes .ph{aspect-ratio:1/1;font-size:.72rem}
.strip{display:flex;gap:10px;flex-wrap:wrap;padding:0 26px var(--s3)}

/* ─── 12.5 ★★★会長ご命令の2店舗（2026-08-20）★★★ ────────────
   ★会長ご命令（verbatim）★
     「★東京の肉と生姜、広島の菜の花、この２店舗は
       他の都道府県の２倍以上のスペースを確保して、宣伝してください！★」
   ★実測（直す前）★ 店の枠 1150×613px＝705千px²
   ★やり方★ ①枠を太く色を付ける ②文字を大きく ③余白を広げる ④項目を12個に
   ★画像には触らない（会長ご命令「画像は別だ」）★ */
.shop.featured{border:2px solid var(--blue-700);
  box-shadow:0 8px 34px rgba(11,114,196,.15);margin-bottom:var(--s4)}
.shop-flag{background:var(--blue-700);color:#fff;font-size:.78rem;font-weight:700;max-width:none;
  letter-spacing:.14em;text-transform:uppercase;padding:10px 30px}
.shop.featured .shop-bd{padding:20px 30px 24px}
.shop.featured .shop-bd h3{font-size:1.4rem;line-height:1.3}
.shop.featured .shop-bd h3 .yomi{font-size:.5em;margin-top:3px}
.shop.featured .shop-lead{font-size:.97rem;line-height:1.6;
  color:var(--ink);margin-top:10px}
.shop.featured dl.info{grid-template-columns:150px 1fr;font-size:.93rem;margin-top:12px}
.shop.featured dl.info dt,.shop.featured dl.info dd{padding:7px 0;line-height:1.5}
.shop.featured .btns{margin-top:12px}
@media(max-width:640px){
  .shop-flag{padding:12px 22px}
  .shop.featured .shop-bd{padding:24px 22px 28px}
  .shop.featured .shop-bd h3{font-size:1.5rem}
  .shop.featured dl.info{grid-template-columns:1fr}
  .shop.featured dl.info dt{padding-bottom:0;border-top:0}
  .shop.featured dl.info dd{padding-top:4px;border-top:0}
}

/* ─── 13. 観光地（型C）──────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 340px;gap:var(--s5);align-items:start}
@media(max-width:960px){.split{grid-template-columns:1fr;gap:var(--s4)}
  .split .side{position:static}}
.side{position:sticky;top:88px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 22px var(--s3)}
.side h3{font-size:1.02rem;font-weight:600;margin-bottom:4px}
.side .ph{margin:14px 0 var(--s2)}
.side dl.info{grid-template-columns:88px 1fr;font-size:.86rem}
.best{background:var(--blue-100);border-left:4px solid var(--blue-700);
  border-radius:0 8px 8px 0;padding:18px 22px;margin:22px 0}
.best b.k{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-900);margin-bottom:6px}
.warn{background:var(--orange-100);border-left:4px solid var(--orange-500);
  border-radius:0 8px 8px 0;padding:18px 22px;margin:22px 0;font-size:.92rem}
.warn b.k{display:block;font-weight:800;margin-bottom:6px}
.tl{border-left:2px solid var(--line);margin:20px 0;list-style:none}
.tl li{position:relative;padding:0 0 20px 26px;font-size:.92rem}
.tl li::before{content:"";position:absolute;left:-7px;top:9px;width:12px;height:12px;
  border-radius:50%;background:var(--white);border:3px solid var(--blue-400)}
.tl b.k{display:block;font-size:.8rem;color:var(--blue-700);letter-spacing:.06em}
/* ★2026-09-01 会長ご命令の季節バナー（英語のキャッチコピー入り）を入れたため
   ★4列（1枚180px）では文字が潰れて読めない → ★2列（1枚 約565px）にした★ */
.season{display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--s2);margin-top:20px}
@media(max-width:700px){.season{grid-template-columns:1fr}}
.season .ph{aspect-ratio:3/2;margin-bottom:var(--s1)}
.season b{display:block;font-size:.94rem}
.season p{font-size:.84rem;color:var(--ink-sub)}

/* ─── 14. 相互リンク（★双方向・行き止まりを作らない★）──────── */
.linkrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.lk{display:flex;align-items:center;gap:12px;background:var(--white);
  border:1px solid var(--line);border-radius:8px;padding:13px var(--s2);
  text-decoration:none;color:var(--ink);font-weight:600;font-size:.9rem;
  transition:border-color .18s,background .18s;min-height:48px}
.lk:hover{border-color:var(--blue-400);background:var(--blue-100)}
.lk .ar{margin-left:auto;color:var(--blue-700);font-weight:800}

/* ─── 15. いざという時（★ページの最後・箱ごと赤くしない★）───── */
.sos{background:var(--blue-100);border:1px solid var(--blue-400);
  border-radius:var(--radius);padding:30px 32px}
@media(max-width:700px){.sos{padding:22px 20px}}
/* ★2026-08-20 見出しなので 800→600。★番号 .sos-i .num の太字は落とさない（命に関わる）★ */
.sos h2{font-size:1.24rem;font-weight:600;margin-bottom:6px}
.sos .lead{margin-bottom:22px;font-size:.92rem}
.sos-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.sos-i{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:var(--s2) 18px}
.sos-i .num{font-size:1.6rem;font-weight:800;color:#C0392B;letter-spacing:-.02em;line-height:1.2}
.sos-i span{display:block;font-size:.86rem;font-weight:600;margin-top:2px}
.sos-i i{font-style:normal;display:block;font-size:.8rem;color:var(--ink-sub);margin-top:4px}
.sos-free{display:inline-block;background:var(--orange-100);color:var(--orange-600);
  font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:999px;margin-top:var(--s1)}
.say{background:var(--white);border:1px solid var(--line);border-radius:8px;
  padding:var(--s2) 18px;margin-top:14px;font-size:.9rem}
.say b{color:var(--blue-700)}

/* ─── 16. 出典（★画像があるページには必ず置く★)─────────────── */
.credit{font-size:.78rem;color:var(--ink-sub);padding:26px 0;border-top:1px solid var(--line)}

/* ─── 17. フッター ───────────────────────────────────────── */
footer{background:var(--blue-900);color:#fff;padding:var(--s6) 0 28px}
/* ★2026-08-20 会長ご指摘★ 7列固定で右が空いていた → auto-fit で詰める */
.f-g{display:grid;gap:32px 28px;
  grid-template-columns:1.6fr repeat(auto-fit,minmax(140px,1fr))}
@media(max-width:1100px){.f-g{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.f-g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.f-g{grid-template-columns:1fr}}
footer h4{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  opacity:.7;margin-bottom:14px}
footer a{color:#fff;text-decoration:none;font-size:.9rem;display:block;padding:5px 0;opacity:.92}
footer a:hover{text-decoration:underline}
.f-logo{font-size:1.5rem;font-weight:800;margin-bottom:10px}
.f-logo+p{font-size:.9rem;opacity:.82;max-width:34ch}
.f-bot{border-top:1px solid rgba(255,255,255,.16);margin-top:36px;padding-top:20px;
  display:flex;gap:var(--s2);flex-wrap:wrap;font-size:.82rem;opacity:.75}

/* ─── 18. スマホ固定バー（★歩きながら使える★）────────────── */
.mbar{position:fixed;inset:auto 0 0 0;background:var(--white);
  border-top:1px solid var(--line);display:none;z-index:95;
  box-shadow:0 -4px 16px rgba(10,63,102,.08)}
.mbar a{flex:1;text-align:center;padding:11px 0 9px;text-decoration:none;
  color:var(--blue-700);font-size:.7rem;font-weight:700;display:block;min-height:48px}
.mbar a b{display:block;font-size:1.1rem;line-height:1.2}
@media(max-width:700px){.mbar{display:flex}body{padding-bottom:60px}}

/* ─── 19. 動きを控える人への配慮 ─────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ─── 20. 印刷（★「食べられないものカード」を刷るため★）────── */
@media print{
  .hd,.mbar,footer,.crumb,.btns{display:none}
  body{color:#000}
  .card,.shop{break-inside:avoid;box-shadow:none}
}

/* ─── 21. 広告と成果報酬の枠（★2026-08-16 追加★）───────────────
   ★会長ご指摘「広告は販売するんだよ！どうやって利益出すんだ？」★
   ★設計は 09_新設計_レインボー_20260815/07_収益設計_Lets.md が正★

   ★守ること★
     ① ★広告は「Advertisement」と明記し、編集の紹介と見た目で完全に分ける★
     ② ★救急の箱（.sos）の中と直前には置かない★
     ③ ★子ども関連ページでは行動ターゲティングを切る（data-noads-personalised）★
     ④ ★本文を割る大型枠・覆いかぶさる広告は作らない★
   ─────────────────────────────────────────── */

/* ★広告枠 ── 編集と混ざらないよう、地の色と枠線で明確に分ける★ */
.ad{
  background:var(--off);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--s2) 18px var(--s3);
  margin:var(--s5) 0;
  max-width:var(--wrap);
}
.ad::before{
  content:"Advertisement";
  display:block;
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-sub);
  font-weight:700;
  margin-bottom:10px;
}
.ad-sponsor{background:var(--white);border:1px solid var(--blue-400)}
.ad-sponsor::before{content:"Sponsor";color:var(--blue-900)}
.ad .slot{
  min-height:90px;
  border:1px dashed var(--line);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-sub);font-size:.82rem;text-align:center;padding:12px;
}

/* ★成果報酬の箱 ── ★広告ではなく「予約の道具」★ なので見た目を分ける★
   ★ただし収益になることは必ず明記する（.book-note）★ */
.book{
  background:var(--white);
  border:1px solid var(--line);
  border-left:4px solid var(--orange-500);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 22px;
  margin:var(--s4) 0;
  box-shadow:var(--shadow);
}
.book h3{font-size:1.06rem;font-weight:600;margin-bottom:4px}
.book p{font-size:.92rem;color:var(--ink-sub);margin-top:6px}
.book .btns{margin-top:14px}
.book-note{
  display:block;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--line);
  font-size:.78rem;color:var(--ink-sub);
}

/* 🚨★救急の箱の中と直前には広告を出さない（機械的に潰す）★ */
.sos .ad,.sos .book,.sos + .ad,.sos + .book{display:none!important}

/* ★印刷では広告を出さない★ */
@media print{.ad,.book{display:none}}

/* ─── 20. サイト内検索（★2026-08-19 新設★）──────────────────
   ★会長ご命令「大手旅行会社や１部上場企業が使うようなきちんとしたUI」★
   ★直す前＝検索窓が873枚にあるのに、どこにも繋がっていなかった（飾りのUI）★ */
.sbox{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-width:78vw;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-up);overflow:hidden;z-index:120;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s,transform .16s,visibility .16s}
.sbox.on{opacity:1;visibility:visible;transform:translateY(0)}
.sbox-list{max-height:min(62vh,420px);overflow-y:auto}
.sbox-i{display:flex;align-items:center;gap:12px;padding:11px 15px;
  text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.sbox-i:last-child{border-bottom:0}
.sbox-i:hover,.sbox-i.sel{background:var(--blue-100)}
.sbox-t{font-size:.92rem;font-weight:500;line-height:1.35}
.sbox-k{margin-left:auto;flex:none;font-size:.68rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--blue-700);
  background:var(--blue-100);border-radius:999px;padding:3px 9px}
.sbox-i.sel .sbox-k,.sbox-i:hover .sbox-k{background:var(--white)}
.sbox-none{padding:15px;font-size:.85rem;color:var(--ink-sub);line-height:1.6}
@media(max-width:700px){.sbox{width:min(340px,86vw)}}

/* ═══ 21. 状態のデザイン（★2026-08-19 新設★）════════════════════
   ★会長ご質問「普通さ、サイトのUIって何で書かれるんだ？」へのお答えの実装★
   ★大手（一部上場企業）のUIと個人のUIを分ける実体は、ここの厚みである★
   ★同じ部品について「触る前・触っている時・押した瞬間・押せない時」を全部持つ★ */

/* ─ 21-1. キーボードで操作している人に、いまどこに居るかを見せる ─
   ★大手のサイトは必ず持つ。無いとキーボードだけでは操作不能に見える★
   ★マウスで押した時には出さない（:focus-visible）★ */
:focus-visible{outline:3px solid var(--orange-500);outline-offset:2px;border-radius:4px}
.card:focus-visible,.lk:focus-visible{outline-offset:3px}
.btn:focus-visible{outline-color:var(--blue-900)}
.hd a:focus-visible,footer a:focus-visible{outline-offset:3px}
footer a:focus-visible{outline-color:#fff}
/* ★マウス操作では輪郭を出さない（:focus には当てない）★ */
:focus:not(:focus-visible){outline:none}

/* ─ 21-2. 押した瞬間の反応（★押した感触が無いUIは安っぽく見える★）─ */
.btn:active{transform:translateY(1px)}
.btn.pri:active{background:#C2661A}
.btn.sec:active{background:var(--blue-100);border-color:var(--blue-900)}
.card:active{transform:translateY(0);box-shadow:var(--shadow)}
.lk:active{background:var(--blue-100);border-color:var(--blue-700)}
.mbar a:active{background:var(--blue-100)}

/* ─ 21-3. 押せない時（★これから作る機能をグレーで示す★）─ */
.btn[aria-disabled="true"],.btn:disabled{
  background:var(--off);color:#9AA7B2;border-color:var(--line);
  cursor:not-allowed;transform:none;box-shadow:none}

/* ─ 21-4. 文字を選んだ時の色（★既定の青は既製品に見える★）─ */
::selection{background:var(--sakura-200);color:var(--ink)}
::-moz-selection{background:var(--sakura-200);color:var(--ink)}

/* ─ 21-5. リンクの下線を上質にする（★本文のリンク★）─ */
.body a:not(.btn):not(.lk):not(.card),.lead a:not(.btn),p a:not(.btn):not(.lk):not(.card){
  color:var(--blue-700);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(11,114,196,.35);
  transition:text-decoration-color .18s}
.body a:not(.btn):hover,.lead a:not(.btn):hover,p a:not(.btn):hover{
  text-decoration-color:var(--blue-700)}

/* ─ 21-6. 検索窓の状態 ─ */
.search{border:1px solid var(--line);transition:border-color .18s,box-shadow .18s}
.search:hover{border-color:var(--blue-400)}
.search:focus{outline:none;border-color:var(--blue-700);
  box-shadow:0 0 0 3px rgba(11,114,196,.14)}
.search::placeholder{color:#8C9AA6}

/* ─ 21-7. スクロールバー（★情報箱と検索結果の中だけ・控えめに★）─ */
.sbox-list,.tblwrap{scrollbar-width:thin;scrollbar-color:var(--blue-400) transparent}
.sbox-list::-webkit-scrollbar,.tblwrap::-webkit-scrollbar{width:9px;height:9px}
.sbox-list::-webkit-scrollbar-thumb,.tblwrap::-webkit-scrollbar-thumb{
  background:rgba(11,114,196,.35);border-radius:99px;
  border:2px solid transparent;background-clip:content-box}
.sbox-list::-webkit-scrollbar-thumb:hover,.tblwrap::-webkit-scrollbar-thumb:hover{
  background:rgba(11,114,196,.6);background-clip:content-box}
.sbox-list::-webkit-scrollbar-track,.tblwrap::-webkit-scrollbar-track{background:transparent}

/* ─ 21-8. 印刷（★宿の住所や緊急番号を紙で持ち歩く人がいる★）─ */
@media print{
  .hd,.mbar,.sbox,.crumb,.btns,.linkrow,footer{display:none!important}
  body{padding:0;font-size:11pt;color:#000}
  section{padding:12pt 0!important}
  .ph{display:none!important}
  .hero-txt{position:static;background:none!important;padding:0}
  .hero h1,.hero p{color:#000!important;text-shadow:none!important}
  .card,.side,.shop,.sos{box-shadow:none!important;border:1px solid #BBB;
    break-inside:avoid;page-break-inside:avoid}
  .sos{background:#fff!important}
  .sos-i .num{color:#000!important}
  a{color:#000!important;text-decoration:none!important}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
}

/* ─ 21-9. スマホのメニュー（★2026-08-19★）──────────────────────
   ★実測の問題★
     ① button.burger が873枚あって ★1枚も動かなかった★
     ② 860px以下では ★検索窓まで消えていた★＝スマホで検索できなかった
   ★大手のサイトはスマホでも必ず検索できる★ */
@media(max-width:940px){
  /* ★★★2026-08-25 重なりを直した ── 開いたら「流れの中」に並べる★★★
     ★前は絶対配置どうしで、メニューが伸びると検索窓が上に乗った★ */
  .hd-in{position:relative;flex-wrap:wrap;height:auto;min-height:64px}
  /* ★折り返したとき1行目が縮んで、ロゴが上に寄っていた★ */
  .hd-in>.logo,.hd-in>.burger{min-height:64px;display:inline-flex;align-items:center}
  .nav.open{
    display:flex;flex-direction:column;gap:0;
    order:3;flex-basis:calc(100% + var(--s3) * 2);margin:0 calc(var(--s3) * -1);
    padding:var(--s1) 0 0;
    background:var(--white);border-top:1px solid var(--line);z-index:110}
  .nav.open a{
    padding:14px var(--s3);border-bottom:0;min-height:48px;
    display:flex;align-items:center;font-size:1rem}
    /* ★★★2026-08-25 開いたメニューでは1行説明を常に見せる★★★
     ★触る人はホバーできない。★開いた瞬間に読めるのが正しい★ */
  .nav.open a{flex-direction:column;align-items:flex-start;gap:3px;padding:12px var(--s3)}
  .nav.open .nd{display:block;font-size:.8rem;color:var(--ink-sub);line-height:1.35}
.nav.open a+a{border-top:1px solid var(--line)}
  .nav.open a:hover,.nav.open a[aria-current]{background:var(--blue-100)}
  /* ★メニューを開いたら検索窓も出す（スマホで検索できるようにする）★ */
  .nav.open~.hd-r{
    display:block;order:4;flex-basis:calc(100% + var(--s3) * 2);
    margin:0 calc(var(--s3) * -1);padding:var(--s3);
    border-top:1px solid var(--line);
    box-shadow:0 14px 30px rgba(10,63,102,.10);z-index:111}
  .nav.open~.hd-r .search{display:block;width:100%}
  .nav.open~.hd-r .sbox{width:auto;left:var(--s3);right:var(--s3);max-width:none}
}

/* ─── 22. 地域へのジャンプ（★2026-08-19 新設★）──────────────
   ★Topに65枚のカードが並ぶ。目的の地域へ一手で着けるようにする★
   ★大手旅行会社のサイトは必ず「地域から選ぶ」を持っている★ */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--s3)}
.jump a{display:inline-flex;align-items:center;min-height:40px;
  padding:0 15px;border-radius:999px;text-decoration:none;
  background:var(--white);border:1px solid var(--line);
  color:var(--blue-700);font-size:.86rem;font-weight:700;
  transition:background .18s,border-color .18s,color .18s}
.jump a:hover{background:var(--blue-100);border-color:var(--blue-400)}
.jump a:active{background:var(--blue-100);border-color:var(--blue-700)}

/* ★見出しへ飛んだとき、固定ヘッダーの下に隠れないようにする★
   ★これが無いと、飛んだ先の見出しがヘッダーに隠れる（大手は必ず入れている）★ */
.h3[id],[id]{scroll-margin-top:96px}
@media(max-width:700px){[id]{scroll-margin-top:72px}}

/* ─── 23. 本文へ飛ぶリンク（★2026-08-19 新設★）────────────────
   ★キーボードだけで使う人は、毎ページでヘッダーの十数個のリンクを Tab で越える★
   ★大手・公共のサイトは必ずこれを持つ。普段は見えず、Tab を押した瞬間に現れる★ */
.skip{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blue-900);color:#fff;font-weight:700;font-size:.9rem;
  padding:12px 20px;border-radius:0 0 8px 0;text-decoration:none}
.skip:focus{left:0}

/* ─── ★探すためのリンク大整列（2026-08-20・会長ご命令）★ ─────────────
   ★会長「見た目の整列と探しやすさと、構成だ！ 文章だらけで何もワクワクしない！」★
   ★見本＝JTB の最下部「人気の旅行先から探す」★
   　カテゴリ名（左・固定幅）＋ リンクを大量に横並べ（右・折り返す）
   ★文章を1語も増やさずに「探せる」形にする★ */
.findx{border-top:1px solid var(--line)}
.fx-r{display:grid;grid-template-columns:190px 1fr;gap:18px 28px;
  padding:18px 0;border-bottom:1px solid var(--line)}
/* ★2026-08-20 JTB方式の大整列の見出し語。見出しなので 700→600★ */
.fx-k{font-size:.96rem;font-weight:600;color:var(--blue-700);line-height:1.5}
.fx-l{display:flex;flex-wrap:wrap;gap:6px 0}
.fx-l a{font-size:.9rem;color:var(--ink);text-decoration:none;
  padding:4px 14px;border-left:1px solid var(--line);line-height:1.5}
.fx-l a:first-child{border-left:0;padding-left:0}
.fx-l a:hover{color:var(--blue-700);text-decoration:underline}
.fx-l a:focus-visible{outline:2px solid var(--blue-700);outline-offset:2px;border-radius:3px}
@media(max-width:820px){
  .fx-r{grid-template-columns:1fr;gap:8px;padding:14px 0}
  .fx-l a{padding:4px 12px 4px 0;border-left:0}
  .fx-l a:first-child{padding-left:0}
}

/* ─── ★行程表（2026-08-20）★ ────────────────────────────────
   ★会長ご命令「注意書きは１箇所に書けばいいだけの話だろうが！」★
   ★実測でわかったこと＝キャンピングカーの箱11個のうち10個は「Day 1〜Day 10」の行程表★
   → ★行程表は注意書きではない。日ごとに分けるのが正しい（はとバスの行程表も日ごと）★
   → ★.day を与えて区別し、検査機が注意書きだけを数えられるようにした★
   ★見た目も行程らしくする＝左に日付の帯★ */
.best.day{border-left:3px solid var(--blue-400);background:var(--off)}
.best.day .k{color:var(--blue-700)}

/* ─── ★公式サイトへの専用タブ（2026-08-20・会長ご提案）★ ──────────────
   ★会長ご指示の導線★
     Let's! のトップページ → 行きたい都道府県のオリジナルページ
     → ★専用タブをクリック★ → 公式HPの英語版のページ
   ★会長「見出し写真の下あたりに★大きな専用タブ★を作って」★
   → ★ヒーローの直下・幅いっぱい・押せることが一目で分かる形★ */
.ofc{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s3);
  margin:var(--s3) 0 0;padding:20px var(--s3);
  background:linear-gradient(100deg,var(--blue-700) 0%,var(--blue-400) 100%);
  color:#fff;text-decoration:none;border-radius:var(--radius);
  box-shadow:var(--shadow);transition:box-shadow .15s,transform .15s}
.ofc:hover{box-shadow:var(--shadow-up);transform:translateY(-1px)}
.ofc:focus-visible{outline:3px solid var(--orange-500);outline-offset:3px}
.ofc:active{transform:translateY(0)}
.ofc-k{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  opacity:.9;white-space:nowrap}
/* ★公式サイトタブの県名。見出しなので 700→600、大きさで見せる★ */
.ofc-n{font-size:1.14rem;font-weight:600;line-height:1.4}
.ofc-a{font-size:1.5rem;line-height:1;opacity:.9}
/* ★英語版が無い県（会長ご判断で日本語版を載せた県）は色を変えて正直に示す★ */
.ofc.ja{background:linear-gradient(100deg,#5C6B78 0%,#8A97A2 100%)}
@media(max-width:700px){
  .ofc{grid-template-columns:1fr auto;gap:8px var(--s2);padding:16px var(--s2)}
  .ofc-k{grid-column:1 / -1}
  .ofc-n{font-size:.98rem}
}

/* ─── 観光地カードの下の MAP ボタン（2026-09-01）─────────────────
   MAPの挿絵（鳥瞰図）を全廃し、代わりに各項目から
   Google マップの実際の場所へ飛ばすためのボタン。
   カード全体がリンクなので、リンクの中にリンクは置けない。
   だからカードを包んで、その下にボタンを並べる。
   ★.card 側の見た目は1文字も変えていない★ */
.cardwrap{display:flex;flex-direction:column;gap:10px}
.cardwrap>.card{flex:1}
.btns.cardmap{margin:0}
.btns.cardmap .btn{width:100%;justify-content:center;letter-spacing:.06em}

/* ─── 写真を置かないページのヒーロー（2026-09-01）─────────────────
   写真枠を消したページでは、文字を写真の上に重ねる作りが土台を失い、
   高さ0・位置が画面の外・白い背景に白い文字 になっていた（実測）。
   写真枠を持たないヒーローだけ、青い帯として通常配置で出す。
   ★写真があるヒーローには一切影響しない★ */
.hero:not(:has(.ph)):not(:has(img)){
  background:linear-gradient(135deg,var(--blue-900) 0%,var(--blue-700) 62%,var(--blue-400) 100%)}
.hero:not(:has(.ph)):not(:has(img))>.hero-txt{
  position:static;background:none;padding:var(--s5) var(--s3) var(--s5)}

/* ─── 写真がまだ無い枠だけの列は、列ごと畳む（2026-09-01）───────────
   .ph:not(:has(img)) で枠は消えるが、それを並べていた .grid が
   残って margin-top ぶんの無駄な隙間を作っていた（実測 16px）。
   中身が .ph だけで、写真が1枚も入っていない列は、列ごと消す。 */
.grid:has(>.ph):not(:has(>*:not(.ph))):not(:has(img)){display:none}

/* ─── 入口のヒーローだけ、文字を「上の空」に置く（2026-09-02）─────────
   下に置くと ★桜に重なって、桜が見えなくなっていた★（実測）
   写真の上半分は空なので、そこに置けば ★桜も富士山も塔も隠さない★ */
/* 🚨★★★重なりの強さ（詳細度）を合わせる（2026-09-02）★★★🚨
   ★.hero>.ph:has(img)+.hero-txt という古い決まりが勝っていて、
     ★箱の下側が濃くなる薄がけ★が当たり、絵の途中に横の切れ目が出ていた★
   → ★同じ形で書いて、こちらを勝たせる★ */
.hero.hero-sky>.ph:has(img)+.hero-txt,
.hero.hero-sky>.hero-txt{
  inset:0 0 auto 0;
  padding:var(--s3) var(--s3) var(--s7);
  /* ★薄がけを弱くした（2026-09-02）★
     ★.46 では朝焼けの空と富士山が沈み、下端に横の切れ目が出た（実測）★
     → 上だけ弱くかけて、★下は完全に透明まで長く伸ばす＝切れ目が出ない★
     → 文字は白＋影で読ませる（写真を暗くしない） */
  /* 🚨★白い空に白い文字を置いていた（2026-09-02 ご指摘）★🚨
     → ★文字がある「左側」だけを暗くする★
     → ★富士山と五重塔がある右側は暗くしない★
     → 2枚重ね：左から右へ暗さを抜く／上から下へ暗さを抜く */
  background:
    linear-gradient(to right,
      rgba(0,0,0,.62) 0%,rgba(0,0,0,.46) 26%,rgba(0,0,0,.20) 48%,rgba(0,0,0,0) 66%),
    linear-gradient(to bottom,
      rgba(0,0,0,.26) 0%,rgba(0,0,0,.12) 60%,rgba(0,0,0,0) 100%)}
.hero.hero-sky>.hero-txt h1{text-shadow:0 2px 10px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.5)}
.hero.hero-sky>.hero-txt p{text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* ─── 文字を焼き込んだヒーローは切らない（2026-09-02）─────────────
   実測：写真 2200x1228（1.79）を 965x428（2.25）の枠に入れていたため
   ★上下 111px が切り落とされ、絵の中の「WELCOME TO JAPAN」の上が欠けた★
   → ★文字入りの写真は object-fit:cover で切ってはいけない★
   → この印の付いたヒーローだけ、写真の形のまま全部出す */
/* 🚨★写真は .hero > .ph > img の中にある（2026-09-02 実測で判明）★🚨
   ★私は .hero > img と書いていて、一度も効いていなかった★
   ★切っていたのは .ph の高さ上限（min(52vh,430px)）だった★ */
.hero.hero-full>.ph{
  aspect-ratio:auto!important;
  max-height:none!important;
  height:auto!important}
.hero.hero-full>.ph img{
  position:static!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important}
@media(max-width:700px){
  /* ★携帯用の上限 min(46vh,320px) が残って 11px 切れていた（実測）★
     ★文字を焼き込んだ写真は1画素も切らない。ここだけ強く打ち消す★ */
  .hero.hero-full>.ph{
    aspect-ratio:auto!important;max-height:none!important;height:auto!important}
  .hero.hero-full>.ph img{
    position:static!important;height:auto!important}}