:root{
  --bg:#14110F; --surface:#1F1A16; --surface2:#2A231D;
  --fg:#F2EBE0; --muted:#9A8C7C;
  --accent:#E2551E; --gold:#D8AB4E;
  --line:rgba(242,235,224,.12);
  --s0:#F7F3EA; --s1:#E8D9B5; --s2:#E0B15C; --s3:#C4703A; --s4:#8C3A2B; --s5:#5A1E18;
  --maxw:900px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);
  font-family:"Noto Sans JP",system-ui,sans-serif;font-size:15px;line-height:1.95;
  font-feature-settings:"palt";-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:"Zen Old Mincho",serif;font-weight:600;line-height:1.4;letter-spacing:.03em}
a{color:inherit;text-decoration:none}
.num{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-feature-settings:normal}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;height:58px;padding:0 clamp(1rem,4vw,2rem);border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px)}
.nav .brand{font-family:"Zen Old Mincho",serif;font-weight:900;
  font-size:clamp(.85rem,3.2vw,1.02rem);letter-spacing:.04em;white-space:nowrap}
.nav .brand span{color:var(--accent)}
.nav nav{display:flex;gap:.4rem}
.nav nav a{font-size:.78rem;padding:.4rem .8rem;border:1px solid var(--line);border-radius:4px;
  white-space:nowrap;transition:.2s}
.nav nav a:hover{border-color:var(--fg)}

main{max-width:var(--maxw);margin-inline:auto;padding:0 clamp(1.1rem,4vw,2rem) 3rem}
.crumb{font-size:.75rem;color:var(--muted);padding:1.2rem 0 .4rem}
.crumb a:hover{color:var(--fg)}

.rule{height:3px;border-radius:2px;margin:1.2rem 0 0;max-width:260px;
  background:linear-gradient(90deg,var(--s0),var(--s1),var(--s2),var(--s3),var(--s4),var(--s5))}
.rule.short{max-width:150px;height:2px;margin:.7rem 0 0}

.eyebrow{font-size:.68rem;letter-spacing:.3em;color:var(--accent);font-weight:700;
  font-family:"JetBrains Mono",monospace}
.hero{padding:1.4rem 0 2.4rem}
.hero h1{font-size:clamp(1.9rem,5.6vw,3.1rem);font-weight:900;margin-top:.5rem}
.lede{margin-top:1.5rem;max-width:40em;color:var(--muted)}
.lede b{color:var(--fg)}
.lede b.num{color:var(--gold)}

.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin-top:2rem;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.kpi>div{background:var(--surface);padding:1.2rem 1.1rem}
/* 3項目が2列に落ちたときだけ最後を全幅にする。
   広い幅では3列そのまま入るので、無条件に適用すると逆に空セルを作る（実測で発生） */
@media(max-width:560px){
  .kpi>div:last-child:nth-child(odd){grid-column:1/-1}
}
.kpi .v{display:block;font-size:2rem;line-height:1.1;color:var(--gold)}
.kpi .v small{font-size:.45em;font-family:"Noto Sans JP";margin-left:.15em;color:var(--muted)}
.kpi .k{display:block;font-size:.73rem;color:var(--muted);margin-top:.5rem;line-height:1.55}

section{padding:2.2rem 0;border-top:1px solid var(--line)}
section h2{font-size:clamp(1.25rem,3.4vw,1.75rem)}
.note{font-size:.8rem;color:var(--muted);margin-top:1.1rem;max-width:42em;line-height:1.8}
/* 「1世帯あたり」は誤読されるとサイトの信頼が崩れる箇所。地の文に埋めず箱で見せる */
.note.callout{background:var(--surface);border-left:2px solid var(--accent);
  padding:.7rem .9rem;border-radius:0 4px 4px 0}
.note.callout b{color:var(--fg)}
.kpi .k-unit{color:var(--muted);opacity:.75;font-size:.9em}

/* ランキング表 */
/* table を display:block にすると支援技術がテーブルとして読まなくなる。
   横スクロールは外側のラッパーが持つ */
.rk-wrap{overflow-x:auto;margin-top:1.4rem;-webkit-overflow-scrolling:touch}
.rk-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rk{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px}
.rk caption{text-align:left;font-size:.72rem;color:var(--muted);padding-bottom:.5rem}
.rk thead th{text-align:right;font-size:.7rem;color:var(--muted);font-weight:400;
  padding:.5rem .6rem;border-bottom:1px solid var(--line);white-space:nowrap}
.rk thead th:first-child{text-align:left}
.rk td{padding:.62rem .6rem;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.rk tbody th{padding:.62rem .6rem;border-bottom:1px solid var(--line);
  text-align:left;white-space:normal;font-weight:400;color:var(--fg)}
.rk tbody th small{display:block;font-size:.66rem;color:var(--muted);font-weight:400}
.rk td em{font-style:normal;font-size:.72em;color:var(--muted);margin-left:.15em}
.rk .hi{color:var(--gold)}
.rk .mut{color:var(--muted)}
.rk .one{display:inline-block;font-size:.6rem;background:var(--gold);color:#14110F;font-weight:700;
  padding:.05rem .35rem;border-radius:2px;margin-left:.4rem;vertical-align:.12em;font-style:normal}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem}
.chips li{font-size:.8rem;padding:.3rem .7rem;border:1px solid var(--gold);color:var(--gold);
  border-radius:100px}

/* 郷土料理 × 統計 の接続 */
.connect .cx{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 6px 6px 0;padding:1.1rem 1.2rem;margin-top:1rem}
.cx h3{font-size:1.1rem}
.cx .kana{font-family:"Noto Sans JP";font-size:.7rem;color:var(--muted);margin-left:.5rem;font-weight:400}
.cx .ing{font-size:.8rem;color:var(--muted);margin-top:.35rem}
.cx .fact{font-size:.86rem;margin-top:.55rem}
.cx .fact b{color:var(--fg)}
.cx .fact b.num{color:var(--gold)}

/* 郷土料理一覧 */
.dishes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-top:1.4rem}
.dish{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:1.1rem 1.15rem;
  transition:.2s}
.dish:hover{border-color:var(--gold)}
.dish h3{font-size:1.02rem;line-height:1.45}
.dish h3 a:hover{color:var(--gold)}
.dish .kana{font-family:"Noto Sans JP";font-size:.68rem;color:var(--muted);margin-left:.4rem;font-weight:400}
.dish .area{font-size:.7rem;color:var(--accent);margin-top:.3rem}
.dish .sum{font-size:.79rem;color:var(--muted);margin-top:.55rem;line-height:1.8}
.s{display:inline-block;font-size:.62rem;padding:.02rem .3rem;border-radius:2px;margin-left:.3rem;
  vertical-align:.15em;font-family:"Noto Sans JP";font-weight:700}
.s春{background:#3D5A3A;color:#DCEBD8} .s夏{background:#2F5468;color:#D6ECF5}
.s秋{background:#7A4420;color:#F5E3D0} .s冬{background:#3A3F52;color:#DDE2F0}

/* 一覧ページのカード */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:.85rem;margin-top:1.3rem}
.card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:1.05rem 1.1rem;transition:.2s}
.card:hover{border-color:var(--gold);transform:translateY(-2px)}
.card .pn{display:block;font-family:"Zen Old Mincho",serif;font-size:1.16rem;font-weight:600}
.card .pt{display:block;font-size:.8rem;color:var(--muted);margin-top:.45rem}
.card .pt b{color:var(--gold);margin-left:.2rem}
.card .pm{display:block;font-size:.68rem;color:var(--muted);opacity:.75;margin-top:.4rem}

.pager{display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  padding:1.8rem 0 0;border-top:1px solid var(--line);font-size:.85rem;flex-wrap:wrap}
.pager a{padding:.55rem .9rem;border:1px solid var(--line);border-radius:4px;transition:.2s}
.pager a:hover{border-color:var(--fg)}
.pager .mid{color:var(--muted)}

footer{border-top:1px solid var(--line);padding:2rem clamp(1.1rem,4vw,2rem)}
footer .src{max-width:var(--maxw);margin-inline:auto;font-size:.7rem;color:var(--muted);
  line-height:1.8;opacity:.85}
footer .src + .src{margin-top:.8rem}

@media(max-width:600px){
  .dishes{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .pager{font-size:.78rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}