@charset "utf-8";

/* ============================================================
   こそだてくらべ「くらしの白書」
   色・角丸・影は DESIGN.md のトークンのみを使う。
   角丸は 0（表・帯・様式欄）と 4px（ボタン・タブ）の2値のみ。影は使わない。
   ============================================================ */

:root{
  /* 色（DESIGN.md のトークン。これ以外の色は使わない） */
  --paper:#FAF7F0;
  --panel:#FFFFFF;
  --sumi:#1C1C1A;
  --sumi-soft:#55534E;
  --midori:#294F3E;
  --midori-wash:#EFF3ED;
  --kaki:#C75B1E;
  --kaki-deep:#A84A16;
  --keisen:#E2DDD2;
  --keisen-strong:#B7AD9B;
  --feature:#797653;
  --feature-hover:#646142;
  --radius-feature:50%;

  /* 書体 */
  --font-mincho:"Shippori Mincho","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;

  /* 動き */
  --ease:150ms ease;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--sumi);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}

.wrap{
  max-width:1280px;
  margin-inline:auto;
  padding-inline:40px;
}

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* 和文の折返しは文節単位 */
.phrase{display:inline-block}
.hero__title,.lead,.band__text{word-break:auto-phrase}

/* 共通フォーカス */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--midori);
  outline-offset:3px;
}

/* ------------------------------------------------------------
   スキップリンク
   ------------------------------------------------------------ */
.skip-link{
  position:absolute;top:-72px;left:40px;z-index:5;
  padding:11px 20px;
  background:var(--midori);color:var(--panel);
  border-radius:4px;
  font-size:14px;font-weight:500;letter-spacing:.06em;text-decoration:none;
  transition:top var(--ease),background-color var(--ease);
}
.skip-link:focus{top:16px}
.skip-link:hover{text-decoration:underline;text-underline-offset:5px}

/* ------------------------------------------------------------
   ヘッダ
   見た目は site/assets/site-header.css（全ページ共通・まなびの見た目）。ここは保護者向けの面だけの
   追従（sticky）と、スマホでスクロールの向きに合わせて隠す動き（assets/header.js）
   ------------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:20;
  transition:transform var(--ease);
}
html{scroll-padding-top:96px}
/* sticky ヘッダの高さが狭幅で題字段の畳み込みにより変わるとき、ブラウザの
   スクロール位置補正（scroll anchoring）が本文のずれを打ち消そうとして閾値をまたぎ直し、
   ヘッダが上下にチラつく。画像は width/height 必須（DESIGN.md）で補正に頼らないため、
   補正を切る。閾値側のヒステリシスは assets/header.js */
html{overflow-anchor:none}

/* ------------------------------------------------------------
   ヒーロー
   ------------------------------------------------------------ */
/* 下は 104px から詰めてある。直下の索引帯の上端をファーストビューへ覗かせ、
   スクロールの手がかりにするため */
.hero{padding-block:88px 72px}

.hero__grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:64px;
  align-items:start;
}

.hero__title{
  margin:0;
  font-family:var(--font-mincho);
  font-size:clamp(30px,3.1vw,44px);
  font-weight:600;
  line-height:1.45;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
}

.lead{
  margin:28px 0 0;
  font-size:16px;
  line-height:2;
  letter-spacing:.02em;
  max-width:34em;
}

.cta-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:16px 32px;
  margin-top:40px;
}

.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 32px;
  background:var(--kaki);color:var(--panel);
  border-radius:4px;
  /* 19px/700 は WCAG の大きな文字の基準を満たす（白 × --kaki で 4.2:1、hover の
     --kaki-deep で 5.7:1）。小さくする場合は地色を --kaki-deep へ変えること */
  font-size:19px;font-weight:700;line-height:1.4;letter-spacing:.08em;
  text-decoration:none;
  transition:background-color var(--ease);
}
.btn-primary:hover{background:var(--kaki-deep)}

.link-quiet{
  color:var(--midori);
  font-size:15px;font-weight:500;letter-spacing:.06em;
  text-decoration:underline;
  text-decoration-color:var(--keisen-strong);
  text-decoration-thickness:1px;
  text-underline-offset:7px;
  transition:text-decoration-color var(--ease),text-decoration-thickness var(--ease);
}
.link-quiet:hover{
  text-decoration-color:var(--midori);
  text-decoration-thickness:2px;
}

/* 図版（表が主役） */
.hero__figure{margin:0;padding-top:10px}

/* 図版（動く切り絵・プロトタイプ）
   土台 .scene__base の上に紙片 .scene__layer を元絵比率で重ねる。動きは「紙を手で
   動かした程度」で、知覚できる速さにする（なめらかな微動は静止に見えた・2026-09-04）:
   - 庭木・鉢植えは根元を支点に風で揺れる（±1.4°、周期2.4〜3.2秒）
   - 家族は紙人形のコマ送り。足元を支点に傾けた姿勢と元の姿勢を steps で切り替え、
     補間しない（傾き±1.3°、切替は1.1〜1.6秒ごと、4人の位相をずらす）
   - 雲は左から現れて右へ流れ、端で薄れて消える（往復させない。1周28〜36秒）
   - 雲の上に、空だけを透過した「地上の輪郭」（skyline）を重ね、雲が屋根・電柱・
     電線の後ろを流れるようにする（紙片の重ね順: 土台 < 雲 < 輪郭 < 木・草・家族）
   規律は DESIGN.md「形・動き」。土台には動かす紙片も描いたまま残す（紙片の取得に
   失敗しても土台だけで絵が完成し、雲は空を埋めてあるので流れても跡が出ない）。
   紙片の枚数と座標はこの素材専用で、素材を差し替えるときは舞台（.scene の比率）だけを
   引き継ぐ。 */
.scene{position:relative;margin:0;overflow:hidden;background:var(--midori-wash);aspect-ratio:1448/1086}
.scene__base{display:block;width:100%;height:auto}
.scene__layer{position:absolute;height:auto;max-width:none}
.scene__layer--clouds-a{left:40.401%;top:2.855%;width:30.318%;animation:scene-cloud-a 28s linear infinite}
.scene__layer--clouds-b{left:88.674%;top:11.694%;width:11.326%;animation:scene-cloud-b 36s linear -14s infinite}
.scene__layer--skyline{left:0;top:0;width:100%}
.scene__layer--tree{left:0.0%;top:18.692%;width:17.403%;transform-origin:34% 100%;animation:scene-sway 3.2s ease-in-out infinite alternate}
.scene__layer--plant{left:16.16%;top:52.947%;width:9.53%;transform-origin:50% 100%;animation:scene-sway 2.4s ease-in-out -1s infinite alternate}
.scene__layer--father{left:40.746%;top:35.543%;width:14.227%;transform-origin:50% 100%;animation:scene-puppet 2.6s steps(1,end) infinite}
.scene__layer--mother{left:26.243%;top:40.147%;width:12.224%;transform-origin:50% 100%;animation:scene-puppet-alt 3.1s steps(1,end) -1.2s infinite}
.scene__layer--boy{left:34.807%;top:56.63%;width:11.671%;transform-origin:50% 100%;animation:scene-puppet-alt 2.2s steps(1,end) -.5s infinite}
.scene__layer--girl{left:47.652%;top:57.919%;width:14.019%;transform-origin:50% 100%;animation:scene-puppet 2.9s steps(1,end) -1.9s infinite}
@keyframes scene-cloud-a{0%{transform:translateX(-22%);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(62%);opacity:0}}
@keyframes scene-cloud-b{0%{transform:translateX(-130%);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(40%);opacity:0}}
@keyframes scene-sway{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
@keyframes scene-puppet{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(1.3deg) translateY(-1.2%)}}
@keyframes scene-puppet-alt{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(-1.3deg) translateY(-1%)}}

/* 表1（ヒーロー直下） */
.table-sec{padding-block:0 8px}
.table-sec__figure{max-width:760px;padding-top:0}

/* ------------------------------------------------------------
   白書の表組み
   罫線の階層: 外枠・柱の右＝--keisen-strong / 行と列＝--keisen /
   ヘッダ内の区切り＝--panel（緑地に白のヘアライン）
   ------------------------------------------------------------ */
/* 表紙の特集丸。リンク全体を円にし、写真に文字を焼き込まない。
   desktopでは卓上の右下、mobileでは写真左上の壁面へ置く。 */
.hero-feature{
  position:absolute;z-index:1;right:max(32px,calc((100vw - 1264px)/2));bottom:28px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:220px;aspect-ratio:1;padding:24px;
  border-radius:var(--radius-feature);
  background:var(--feature);color:var(--panel);text-align:center;text-decoration:none;
  font-family:var(--font-mincho);
  transition:background-color var(--ease),transform var(--ease);
}
.hero-feature__label{
  width:100%;max-width:134px;padding-bottom:8px;margin-bottom:10px;
  border-bottom:1px solid currentColor;
  font-size:13px;line-height:1.5;letter-spacing:.25em;text-indent:.25em;
}
.hero-feature__title{font-size:23px;line-height:1.45;letter-spacing:.035em}
.hero-feature__title > span{display:block}
.hero-feature__more{margin-top:12px;font-family:var(--font-sans);font-size:11px;line-height:1.5;letter-spacing:.08em}
.hero-feature:hover{background:var(--feature-hover);transform:translateY(-3px)}
.hero-feature:focus-visible{background:var(--feature-hover);outline:3px solid var(--panel);outline-offset:4px}
@media(max-width:1024px){
  .hero-feature{width:194px;right:24px;bottom:24px;padding:20px}
  .hero-feature__title{font-size:21px}
}
@media(max-width:700px){
  .hero-feature{width:156px;left:16px;right:auto;top:calc(100% - 304px);bottom:auto;padding:16px}
  .hero-feature__label{max-width:98px;padding-bottom:6px;margin-bottom:8px;font-size:10px}
  .hero-feature__title{font-size:17px;line-height:1.4}
  .hero-feature__more{margin-top:9px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .hero-feature{transition:none}
  .hero-feature:hover{transform:none}
}

.wtable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--panel);
  border:1px solid var(--keisen-strong);
  border-radius:0;
  table-layout:fixed;
  font-variant-numeric:tabular-nums;
}
.col-stub{width:23%}
.col-data{width:19.25%}

/* 表題（索引タブ＋見出し） */
/* caption 自体は table-caption のまま（display を変えると表内の匿名セルへ落ちる）。
   並びは内側の .cap-row で組む */
.wtable__cap{
  caption-side:top;
  padding:0;
  text-align:left;
}
.cap-row{display:flex;align-items:flex-end;gap:12px}
.tab{
  position:relative;flex:none;
  width:72px;height:30px;
  margin-bottom:-1px;
}
.tab__shape{display:block;width:72px;height:30px;overflow:visible}
.tab__label{
  position:absolute;inset:0;
  display:grid;place-items:center;
  padding-bottom:2px;
  font-family:var(--font-mincho);
  font-size:13px;font-weight:600;line-height:1;letter-spacing:.14em;
  color:var(--midori);
  /* 末尾の字送りぶんを打ち消して光学的に中央へ置く */
  padding-left:.14em;
}
.wtable__capText{
  padding-bottom:7px;
  font-size:13px;line-height:1.6;letter-spacing:.06em;
  color:var(--sumi-soft);
  font-feature-settings:"palt" 1;
}

.wtable thead th{
  background:var(--midori);
  color:var(--panel);
  font-weight:500;
}
.tier1 th{
  padding:10px 12px;
  font-size:12px;letter-spacing:.16em;
  text-align:center;
  border-bottom:1px solid var(--panel);
  text-indent:.16em;
}
.tier1 th + th{border-left:1px solid var(--panel)}
.tier1 th.stub{
  padding:10px 16px;
  font-size:13px;letter-spacing:.1em;
  text-align:left;text-indent:0;
  vertical-align:middle;
  border-bottom:0;
}
.tier2 th{
  padding:9px 12px;
  font-size:13px;letter-spacing:.08em;
  text-align:center;text-indent:.08em;
  border-left:1px solid var(--panel);
}

.wtable tbody th.stub{
  padding:15px 16px;
  font-weight:400;text-align:left;vertical-align:middle;
}
.pref{
  display:block;
  font-size:11px;line-height:1.5;letter-spacing:.12em;
  color:var(--sumi-soft);
}
.muni{
  display:block;
  font-size:16px;font-weight:500;line-height:1.55;letter-spacing:.02em;
}

.wtable tbody td{
  padding:15px 12px;
  font-size:15px;line-height:1.6;
  text-align:center;vertical-align:middle;
  border-left:1px solid var(--keisen);
}
.wtable tbody td:first-of-type{border-left:1px solid var(--keisen-strong)}
.wtable tbody tr + tr th,
.wtable tbody tr + tr td{border-top:1px solid var(--keisen)}

/* ------------------------------------------------------------
   長い表を「読む道具」にする走査装置（.wtable--long）
   1画面に収まらない表（都道府県一覧62行・全国統計47行・対照表・奨学金の県別一覧）
   だけに付ける修飾。数行の表（/select/ の県別表、統計の表1・表2）には付けない。
   sticky が不要な場面で発動しないことをクラスの有無で保証する規約。

   (1) 列見出しの固定。固定するのは th ではなく thead 全体。th ごとに top を
       持たせると、2段見出しの下段を「上段の高さぶん」ずらす必要があり、その高さが
       幅で変わる（全国統計の表3は実測で 44 / 67 / 38 / 59px と4通り）。
       thead を単位で固定すれば段数も段の高さも問わない。
   (2) 固定中は帯の下を行が流れ続けるので、下端を強罫で閉じて表本体と切り離す
       （閉じないと深緑地と最初の行が地続きに見え、どこからがデータか分からない）。
       段をまたぐ柱セル（rowspan）の下端も同じく thead の下端なので同じ罫にする。
   (3) 行hover/focus-within = 深緑の淡地（既存の行ハイライト用トークン）。
       キーボードで柱のリンクを辿るときも同じ手応えが要るので同値で扱い、
       走査中の行は柱のリンクも深緑へ返して縦の列を目で追えるようにする。
   (4) 5行ごとの区切り罫（統計表の慣行）。行の塊で縦の現在地が数えられる。
       地色の縞は使わない（hoverの淡地と衝突し、表が斑になる）。

   (3)(4) は700px以下では止める。この幅では表が市区町村ごとのカードへ倒れ、
   「行」という単位自体が無くなる（柱が深緑地になるので文字色の返しも成立しない）。
   ポインタも hover を持たない。
   ------------------------------------------------------------ */
/* 700px以下でも、カード化せず表のまま残る表（全国統計の表3）だけは列見出しが要る。
   47行×5列の数値表は列の意味を失うと読めない。この幅のヘッダはスクロール方向で
   出入りする（下向きで translateY(-100%)、上向きで実測123.91px が戻る）ため
   固定先を一意に決められないので、読み進める向き＝ヘッダが退いた状態に合わせて
   画面の天へ固定する。上へ戻す間だけ戻ってきたヘッダが列見出しを覆うが、
   これは読者がナビを呼び戻している最中であり、下へ向き直せば列見出しが戻る。
   カード化する表では thead ごと display:none になるので、この規則は当たらない */
.wtable--long thead{position:sticky;top:0;z-index:1}
.wtable--long thead tr:last-child th,
.wtable--long thead th[rowspan]{border-bottom:1px solid var(--keisen-strong)}

@media (min-width:701px){
  /* 固定先を画面の天から sticky なサイトヘッダの下端へ下ろす。top:0 のままだと
     z-index 20 のサイトヘッダの裏へ潜り、2段見出しの下段しか見えない
     （R2で実測・修正済み）。表が視野に入る位置では必ず .is-scrolled が付く
     （しきい値 scrollY>24px）ので、基準はスクロール後の実高にする。
     この幅ではヘッダが題字を畳んでナビ帯だけになる（実測52.39px）。切り上げて
     53pxにすると0.61pxの隙間から流れる行の文字が覗くため、52pxで下に潜らせる
     （ヘッダは不透明な生成り地なので、潜った0.39pxは見えない） */
  .wtable--long{--thead-top:52px}
  .wtable--long thead{top:var(--thead-top)}

  .wtable--long tbody tr{transition:background-color var(--ease)}
  .wtable--long tbody tr:hover,
  .wtable--long tbody tr:focus-within{background:var(--midori-wash)}
  .wtable--long tbody tr:hover .muni-link,
  .wtable--long tbody tr:focus-within .muni-link,
  .wtable--long tbody tr:hover .stats-preflink,
  .wtable--long tbody tr:focus-within .stats-preflink{color:var(--midori);border-bottom-color:var(--midori)}
  .wtable--long tbody tr:nth-child(5n+1) th,
  .wtable--long tbody tr:nth-child(5n+1) td{border-top-color:var(--keisen-strong)}
}
/* 題字を畳まない幅ではヘッダの実高が61pxになる */
@media (min-width:1025px){
  .wtable--long{--thead-top:61px}
}

/* セルの値は読者語彙（「高校卒業まで」「収入によっては対象外」）であり、一次ソースの
   短い値（「有」「18歳年度末」）ではない。nowrap では溢れるので文節で折り返す。
   対象年齢のセルは主ラベルの下に正確な定義を小さく敷く2段構成（specs/SPEC-vocabulary.md）*/
.cell{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.val{white-space:normal;word-break:auto-phrase}
.val__note{
  font-size:10.5px;line-height:1.5;letter-spacing:0;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}

/* 編集部マーカー（1）注目値を囲む手描きの丸 */
.val--penned{position:relative;display:inline-block}
.mk-pen{
  /* 楕円が文字の矩形を角まで包む寸法（値の四隅が輪郭の内側に入る）。
     svg は置換要素で inset だけでは縦が縦横比に引かれるため、寸法を明示する */
  position:absolute;left:-14px;top:-12px;
  width:calc(100% + 28px);height:calc(100% + 24px);
  overflow:visible;
  fill:none;stroke:var(--kaki);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.mk-pen path{vector-effect:non-scaling-stroke}

/* 編集部マーカー（2）同種の値に付ける圏点。文字の上に置き、行の高さは動かさない */
.val--marked{position:relative;display:inline-block}
.mk-dot{
  position:absolute;left:50%;top:-5px;
  width:7px;height:7px;margin-left:-3.5px;
  overflow:visible;fill:var(--kaki);
}

/* 凡例: 柿色の印を2種とも実物の記号つきで定義する */
.mk-legend{
  display:flex;flex-direction:column;gap:12px;
  margin:12px 0 0;
  font-size:12.5px;line-height:1.8;letter-spacing:.02em;
  color:var(--sumi-soft);
}
.mk-legend__item{display:flex;align-items:baseline;gap:10px}
.mk-legend dt{display:flex;align-items:baseline;gap:9px;flex:none}
.mk-legend dd{margin:0;min-width:0;word-break:auto-phrase}
.mk-key{flex:none;width:30px;display:flex;justify-content:center}
.mk-term{flex:none;color:var(--sumi);font-weight:500;letter-spacing:.08em}
.mk-sample{
  position:relative;display:inline-block;
  font-size:13px;line-height:1.6;color:var(--sumi);
}
/* 見本は1文字ぶんなので、丸は文字の大きさに合わせて描き直す */
.mk-sample .mk-pen{
  left:-8px;top:-5px;
  width:calc(100% + 16px);height:calc(100% + 10px);
  stroke-width:1.4;
}

/* 所得制限・自己負担は本来「通院/入院」で分かれ得る値（R4の全国データ突合で判明）。
   この3市区はたまたま一致しているだけなので、表の構造は変えずに注記1行で明示する */
.wtable-note{
  margin:10px 0 0;
  font-size:12px;line-height:1.8;letter-spacing:.02em;
  color:var(--sumi-soft);
}

/* ------------------------------------------------------------
   基準日スタンプ（出典＋基準日の様式欄／押印）
   ------------------------------------------------------------ */
.stamp{
  position:relative;
  /* footer では figure 要素として使うため、UA既定の左右マージン(1em 40px)を
     明示的にリセットする（figcaption のヒーロー側は元々0なので影響なし） */
  margin:22px 0 0;
  padding:20px 24px;
  display:flex;align-items:center;gap:24px;
}
.stamp__frame{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
}
.stamp__fields{position:relative;margin:0;flex:1;min-width:0}
/* 帳票の縦罫: 見出し欄と記入欄を仕切る（横罫と交差して様式の枠になる） */
.stamp__fields::before{
  content:"";
  position:absolute;left:46px;top:0;bottom:0;
  width:1px;background:var(--keisen);
}
.field{
  display:grid;
  grid-template-columns:38px 1fr;
  column-gap:16px;
  align-items:baseline;
}
.field + .field{
  margin-top:10px;padding-top:10px;
  border-top:1px solid var(--keisen);
}
.field dt{
  font-size:11.5px;line-height:1.8;
  letter-spacing:0;
  color:var(--sumi-soft);
  /* 帳票の均等割付（「出典」「基準日」の見出し幅をそろえる） */
  text-align:justify;
  text-align-last:justify;
}
.field dd{
  margin:0;
  font-size:12.5px;line-height:1.85;letter-spacing:.01em;
  color:var(--sumi);
}
.field dd .num{
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  margin-right:.35em;
}

.cite-link{
  color:var(--sumi);
  text-decoration:underline;
  text-decoration-color:var(--keisen-strong);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:color var(--ease),text-decoration-color var(--ease);
}
.cite-link:hover{color:var(--midori);text-decoration-color:var(--midori)}

.seal{
  position:relative;flex:none;
  width:52px;height:74px;
  display:grid;place-items:center;
  transform:rotate(-4deg);
}
.seal__frame{position:absolute;inset:0;width:52px;height:74px}
.seal__text{
  writing-mode:vertical-rl;
  font-family:var(--font-mincho);
  font-size:11px;font-weight:600;line-height:1;letter-spacing:.16em;
  color:var(--keisen-strong);
  padding-inline-start:.16em;
}

/* ------------------------------------------------------------
   引っ越し先をしぼりこむ（収益層への導線・トップページ限定）
   specs/SPEC-revenue-layer.md H章。新しい視覚装置は増やさず、.section-head/
   .cta-row/.btn-primary（.hero と同じ部品）と .select-compare-links
   （/select/ の「通勤圏でくらべる」と同じ部品）を共有する。
   ------------------------------------------------------------ */
.entry-sec{padding-block:64px}
.entry-sec__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:64px;
  align-items:start;
}
.entry-sec__main .cta-row{margin-top:32px}

/* ------------------------------------------------------------
   索引帯（.entry-sec 直下のパッチワーク）
   47都道府県のイラストを 3px の目地で継ぐ。目地は生成り地のまま抜いて、
   写真の並びではなく「紙を継いだ一枚の面」に見せる。角丸なし・影なし。
   JS が動くときだけ 2 セットに複製して無限に流す（下の inline script）。
   ------------------------------------------------------------ */
.quilt-strip{
  border-top:1px solid var(--keisen-strong);
  border-bottom:1px solid var(--keisen-strong);
  background:var(--paper);
  /* JS 無効時のフォールバック。指・トラックパッドで横に送れる */
  overflow-x:auto;
}
.quilt-strip[data-quilt-animated]{overflow:hidden}

.quilt-strip__track{display:flex;width:max-content}
.quilt-strip[data-quilt-animated] .quilt-strip__track{
  animation:quilt-slide 120s linear infinite;
}
/* 読もうとした人の前で動かさない */
.quilt-strip:hover .quilt-strip__track,
.quilt-strip:focus-within .quilt-strip__track{animation-play-state:paused}

.quilt-strip__set{
  display:flex;gap:3px;padding-right:3px;
  margin:0;padding-block:0;padding-left:0;list-style:none;
}
.quilt__cell{flex:none}
.quilt__link{
  position:relative;display:block;
  width:152px;height:150px;overflow:hidden;
  background:var(--midori-wash);
  text-decoration:none;color:var(--sumi);
}
.quilt__img{
  width:100%;height:100%;object-fit:cover;
  /* 47枚ぶんの彩度差をならして紙面へ馴染ませる */
  filter:saturate(.9) contrast(1.02);
  transition:filter var(--ease),transform var(--ease);
}
/* 継ぎ目の演出。イラストはどれも上三分の一が空なので、素直に並べると
   空の水色が横一直線につながって一枚のパノラマに見えてしまう。切り出し位置を
   周期の違う nth-child で上下に振り、空の高さを揃わせない。
   タイル幅は等間隔のまま（索引タブの様式に合わせる。幅も散らすと周期が
   読み取れず、意図した不揃いではなく揃え損ねに見える）。 */
.quilt-strip__set > li:nth-child(3n+2) .quilt__img{object-position:center 74%}
.quilt-strip__set > li:nth-child(4n+3) .quilt__img{object-position:center 26%}
.quilt__link::after{
  content:"";position:absolute;inset:0;
  background:rgba(250,247,240,.16);
  pointer-events:none;
  transition:background-color var(--ease);
}
.quilt__link:hover .quilt__img,
.quilt__link:focus-visible .quilt__img{filter:saturate(1) contrast(1.02);transform:scale(1.04)}
.quilt__link:hover::after,
.quilt__link:focus-visible::after{background:rgba(250,247,240,0)}

.quilt__name{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  background:rgba(250,247,240,.94);
  border-top:1px solid var(--keisen-strong);
  font-size:12px;line-height:1.6;letter-spacing:.06em;
  padding:4px 10px;
  transition:background-color var(--ease),color var(--ease),border-color var(--ease);
}
.quilt__link:hover .quilt__name,
.quilt__link:focus-visible .quilt__name{
  background:var(--midori);color:var(--panel);border-top-color:var(--midori);
}

@keyframes quilt-slide{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
/* タッチ端末では hover による一時停止が効かない。自動送りをやめ、
   指で送れる横スクロールに切り替える */
@media (pointer:coarse){
  .quilt-strip[data-quilt-animated]{overflow-x:auto}
  .quilt-strip[data-quilt-animated] .quilt-strip__track{animation:none}
}
@media (prefers-reduced-motion:reduce){
  .quilt-strip[data-quilt-animated]{overflow-x:auto}
  .quilt-strip[data-quilt-animated] .quilt-strip__track{animation:none}
  .quilt__link:hover .quilt__img,
  .quilt__link:focus-visible .quilt__img{transform:none}
}

/* ------------------------------------------------------------
   収録範囲の帯
   ------------------------------------------------------------ */
.band{background:var(--midori);color:var(--panel)}
.band__inner{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-block:19px;
}
.band__text{
  margin:0;
  font-size:14px;line-height:1.8;letter-spacing:.06em;
}
.band__text .num{
  font-size:19px;font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  margin-inline:4px 2px;
}
.band__note{
  flex:none;margin:0;
  padding-left:20px;
  border-left:1px solid var(--midori-wash);
  font-size:13px;line-height:1.8;letter-spacing:.08em;
  white-space:nowrap;
}

/* ------------------------------------------------------------
   セクション共通見出し（②③④で共有）
   見出しと本文の間隔は DESIGN.md の縦リズム値（24px）に合わせる
   ------------------------------------------------------------ */
.section-head{margin-bottom:44px}
.section-title{
  margin:0;
  font-family:var(--font-mincho);
  font-size:clamp(24px,2.1vw,32px);
  font-weight:600;
  line-height:1.5;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
}
.section-lead{
  margin:24px 0 0;
  font-size:15px;
  line-height:1.9;
  letter-spacing:.02em;
  color:var(--sumi-soft);
  max-width:42em;
}

/* ------------------------------------------------------------
   索引タブ（地方ブロック見出し用）
   ヒーローの表題タブ（.tab / .tab__shape）と同じ形を、
   preserveAspectRatio="none" で自由な幅へ伸縮させて流用する
   ------------------------------------------------------------ */
/* SVG は背景として絶対配置し、実寸はラベル（実コンテンツ）側に持たせる。
   .stamp__frame と同じ考え方（内容が箱を決め、装飾は inset:0 で追従する） */
.tab--region{
  width:auto;height:40px;
  padding:0;
}
.tab--region .tab__shape{
  position:absolute;inset:0;
  width:100%;height:100%;display:block;
}
.tab__label--region{
  position:relative;
  display:flex;align-items:center;justify-content:flex-start;
  height:100%;
  padding:0 16px 2px 14px;
}
.tab__no{
  flex:none;
  padding-right:9px;margin-right:9px;
  border-right:1px solid var(--keisen-strong);
  font-size:11px;line-height:1;letter-spacing:.02em;
  color:var(--sumi-soft);
}
.tab__name{
  font-family:var(--font-mincho);
  font-size:14.5px;font-weight:600;letter-spacing:.08em;
  color:var(--midori);
  white-space:nowrap;
}

/* ------------------------------------------------------------
   都道府県から探す（索引本体）
   紙の索引のように列で流し込む。ブロックは高さがまちまちなので
   段組み（columns）で自然にバランスさせ、均一な格子罫は作らない
   ------------------------------------------------------------ */
.index-sec{padding-block:64px}

.pref-index{
  margin-top:48px;
  column-count:3;
  column-gap:48px;
  column-rule:1px solid var(--keisen);
}
.pref-block{
  break-inside:avoid;
  padding-top:18px;
  margin-top:28px;
  border-top:2px solid var(--keisen-strong);
}
.pref-block:first-child{margin-top:0}
/* 段組みの自動バランスに任せると、ブロックの高さ（項目数）が不揃いなため
   段の下端差が大きくなりすぎる。読み順（01→07）は保ったまま、
   項目数で釣り合う位置に強制改段する。
   PC3段: 01-02（14項目）/ 03-04（16項目）/ 05-07（17項目） */
/* 列頭に立つブロックは margin-top:28px を引き継がない（天罫の位置を列間で揃える）。
   :first-child だけでなく、break-before:column を書いた場所と同じ粒度でリセットする */
.pref-block:nth-of-type(3),
.pref-block:nth-of-type(5){break-before:column;margin-top:0}

.pref-block__head{
  display:flex;align-items:flex-end;flex-wrap:wrap;
  gap:14px;
  margin:0 0 12px;
}
.pref-block__meta{
  padding-bottom:6px;
  font-size:12px;line-height:1.6;letter-spacing:.02em;
  color:var(--sumi-soft);
  white-space:nowrap;
}
.pref-block__meta .num{font-variant-numeric:tabular-nums}
.meta-sep{margin:0 1px}

.pref-list{margin:0;padding:0;list-style:none}
.pref-list__link{
  display:flex;align-items:baseline;gap:8px;
  margin-inline:-6px;padding:7px 6px;
  color:var(--sumi);text-decoration:none;
  transition:color var(--ease),background-color var(--ease);
}
.pref-list__name{
  flex:none;
  font-size:14.5px;line-height:1.7;letter-spacing:.02em;
  color:var(--midori);
}
.pref-list__leader{
  flex:1;min-width:16px;
  border-bottom:1px dotted var(--keisen-strong);
  transform:translateY(-5px);
}
.pref-list__count{
  flex:none;min-width:2.2em;
  font-size:14px;font-weight:500;text-align:right;
  font-variant-numeric:tabular-nums;
}
.pref-list__link:hover,
.pref-list__link:focus-visible{
  color:var(--midori);
  background:var(--midori-wash);
}
.pref-list__link:hover .pref-list__leader,
.pref-list__link:focus-visible .pref-list__leader{
  border-bottom-color:var(--midori);
}

/* ------------------------------------------------------------
   比較のしかた
   ------------------------------------------------------------ */
.how-sec{padding-block:64px}
/* 節見出しは版面幅いっぱいの1行（「都道府県から探す」と同じ組み）で、その下を2欄に割る。
   左欄=手順+注意点、右欄=図版。図版をグリッドの外に置いていた旧版（R3-a）は、
   1440pxで絵の右に720pxの空白が残り「貼った」ように見えていた（クライアント指摘R2-3）。
   右欄へ入れることで絵は既存の右レールの軸に載り、左欄は2段とも本文カラムの
   左軸のまま（中央寄せにしない＝SPEC-illust-integration.mdの版面規則を維持） */
.how-sec__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  grid-template-areas:
    "main  illust"
    "aside illust";
  gap:40px 64px;
  align-items:start;
  margin-top:40px;
}
.how-sec__main{grid-area:main}
.how-sec__aside{grid-area:aside}
.how-sec__illust{grid-area:illust}

.steps{
  position:relative;
  margin:0;padding:0;list-style:none;
}
.steps::before{
  content:"";
  position:absolute;left:19px;top:4px;bottom:24px;
  width:1px;background:var(--keisen-strong);
}
.step{
  position:relative;
  display:flex;align-items:flex-start;gap:20px;
  padding-bottom:28px;
}
.step:last-child{padding-bottom:0}
/* 編集方針の番号（.about-policy__no）と同族の様式欄チップに寄せる。
   ベタ塗りの汎用ステップUIにしない */
.step__num{
  position:relative;z-index:1;flex:none;
  width:40px;height:40px;
  display:grid;place-items:center;
  background:var(--midori-wash);
  border:1px solid var(--keisen-strong);
  border-radius:4px;
  font-size:14px;font-weight:700;letter-spacing:.02em;
  color:var(--midori);
  font-variant-numeric:tabular-nums;
}
.step__text{
  margin:9px 0 0;
  font-size:15.5px;line-height:1.85;letter-spacing:.02em;
}

/* イラスト（common-01・common-02）。装飾のみ（alt=""）で本文の情報を持たない。
   2欄グリッドの右欄に入れ、欄幅いっぱい（1440pxで約494px）で組む。
   絵が主役に見えないよう500pxで頭打ちにし、狭い画面では欄の幅に従う
   （「絵が主役に見えたら入れすぎ」= SPEC-illust-integration.md の制作メモ） */
.illust{margin:0;max-width:500px}
.illust img{display:block;width:100%;height:auto;border-radius:4px}
.illust figcaption{
  margin-top:8px;
  font-size:11.5px;line-height:1.7;letter-spacing:.02em;
  color:var(--sumi-soft);
}

.how-note{
  padding:24px 24px 22px;
  background:var(--panel);
  border:1px solid var(--keisen);
  border-top:2px solid var(--keisen-strong);
}
.how-note__label{
  margin:0 0 14px;
  font-family:var(--font-mincho);
  font-size:13px;font-weight:600;letter-spacing:.16em;
  color:var(--midori);
}
.how-note__list{margin:0;padding:0;list-style:none}
.how-note__list li{
  position:relative;padding-left:18px;
  font-size:13.5px;line-height:1.85;letter-spacing:.01em;
  color:var(--sumi);
}
.how-note__list li + li{margin-top:10px}
.how-note__list li::before{
  content:"";
  position:absolute;left:0;top:.8em;
  width:6px;height:1px;
  background:var(--kaki-deep);
}
.how-note__more{
  margin:16px 0 0;padding-top:14px;
  border-top:1px solid var(--keisen);
  font-size:12.5px;line-height:1.8;letter-spacing:.01em;
  color:var(--sumi-soft);
}

/* ------------------------------------------------------------
   このサイトについて
   ------------------------------------------------------------ */
.about-sec{padding-block:64px}
/* how-sec と同じ規約を反復する（節見出しは全幅、左欄=収録範囲+編集方針、右欄=図版） */
.about-sec__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  grid-template-areas:
    "main  illust"
    "aside illust";
  gap:40px 64px;
  align-items:start;
  margin-top:40px;
}
.about-sec__main{grid-area:main}
.about-sec__aside{grid-area:aside}
.about-sec__illust{grid-area:illust}

.about-limit{
  margin-top:0;
  padding:20px 22px;
  background:var(--midori-wash);
  border-left:3px solid var(--midori);
}
.about-limit__label{
  margin:0 0 8px;
  font-size:12px;font-weight:600;letter-spacing:.14em;
  color:var(--midori);
}
.about-limit__text{
  margin:0;
  font-size:13.5px;line-height:1.85;letter-spacing:.01em;
  color:var(--sumi);
}

.about-policy__title{
  margin:0 0 20px;
  font-family:var(--font-mincho);
  font-size:15px;font-weight:600;letter-spacing:.1em;
  color:var(--sumi);
  padding-bottom:14px;
  border-bottom:2px solid var(--keisen-strong);
}
.about-policy{margin:0;padding:0;list-style:none}
.about-policy li{
  display:flex;align-items:flex-start;gap:16px;
}
.about-policy li + li{margin-top:20px}
.about-policy__no{
  flex:none;
  width:34px;height:34px;
  display:grid;place-items:center;
  background:var(--midori-wash);
  border:1px solid var(--keisen-strong);
  border-radius:4px;
  font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--midori);
  font-variant-numeric:tabular-nums;
}
.about-policy p{
  margin:5px 0 0;
  font-size:13.5px;line-height:1.85;letter-spacing:.01em;
}

/* ------------------------------------------------------------
   フッタ
   ------------------------------------------------------------ */
.site-footer{
  background:var(--paper);
  border-top:2px solid var(--keisen-strong);
}
/* auto/auto の実測幅がフッタ内容全体を左寄せし、右端に余白が残っていた。
   fr で列の比率を固定して wrap 幅いっぱいに確実に割り付ける
   （免責文の grid-column:1/-1 の罫線もこれで欠けずに全幅へ通る）。
   1行目はスタンプと運営表示の2列。目次（.footer__nav）は下の行を全幅で受ける */
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  column-gap:56px;row-gap:32px;
  align-items:start;
  padding-block:56px 40px;
}
/* 出典の一行（「令和6年度」まで）が折り返さない実測幅を確保する。
   figure の既定マージン修正だけでも改善するが、fr の取り分競合で
   潰れないよう下限も明示しておく */
.stamp--footer{margin-top:0;max-width:none;min-width:620px}
/* 2調査ぶん載せるページ（市ページ）のフッタ。スタンプを縦に継いで1列目の枠へ収める。
   グリッド項目はこの容れ物に移るが、最小幅は中のスタンプがそのまま決める */
.footer__stamps{display:grid;row-gap:12px}

.footer__line{
  margin:10px 0 0;
  font-size:13px;line-height:1.8;letter-spacing:.02em;
  color:var(--sumi-soft);
}
.footer__line .num{font-variant-numeric:tabular-nums}

/* サイト全体の目次。ヘッダのプルダウンの親・子を全て並べるので14項目あり、
   1列で積むとナビ列だけが526px伸びて（実測）、スタンプ・運営表示の列に
   同じ高さの空白が残る。行を分けて全幅で受け、3列の索引として組む */
.footer__nav{grid-column:1/-1}
.footer__nav ul{
  margin:0;padding:0;list-style:none;
  /* 列送り（column）にして、紙面の目次と同じく列ごとに上から下へ読ませる */
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(5,auto);
  grid-auto-flow:column;
  column-gap:40px;row-gap:10px;
}
.footer__nav a{
  color:var(--sumi);
  font-size:13.5px;letter-spacing:.04em;
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color var(--ease),border-color var(--ease);
}
.footer__nav a:hover{color:var(--midori);border-color:var(--midori)}
/* 保護者向けでないページ（トップ・法務・404）の短いフッター。4項目なので目次の格子にせず横へ流す（2026-10-30） */
.footer__nav--plain ul{display:flex;flex-wrap:wrap;column-gap:28px;row-gap:10px}

.footer__disclaimer{
  grid-column:1/-1;
  /* max-width を付けると grid-column:1/-1 の幅いっぱいに広がらず、
     上の罫線（border-top）がナビ列の手前で切れて見える。付けない */
  margin:0;padding-top:28px;
  border-top:1px solid var(--keisen);
  font-size:12px;line-height:1.9;letter-spacing:.02em;
  color:var(--sumi-soft);
}

/* ------------------------------------------------------------
   都道府県ページ（R4・東京都で版面を固める）
   ------------------------------------------------------------ */
.breadcrumb{
  background:var(--paper);
  border-bottom:1px solid var(--keisen);
}
.breadcrumb__list{
  display:flex;align-items:center;flex-wrap:wrap;
  margin:0;padding:14px 0;list-style:none;
  font-size:13px;letter-spacing:.02em;
  color:var(--sumi-soft);
}
.breadcrumb__list li{display:flex;align-items:center}
/* 「›」ではなく、罫線の家系に合わせた短い斜め罫を区切りにする */
.breadcrumb__list li:not(:last-child)::after{
  content:"";
  display:inline-block;
  width:1px;height:10px;
  margin:0 12px;
  background:var(--keisen-strong);
  transform:rotate(20deg);
}
.breadcrumb__list a{
  color:var(--sumi-soft);
  text-decoration:none;
  padding-bottom:1px;
  border-bottom:1px solid transparent;
  transition:color var(--ease),border-color var(--ease);
}
.breadcrumb__list a:hover,
.breadcrumb__list a:focus-visible{color:var(--midori);border-bottom-color:var(--midori)}
.breadcrumb__current{color:var(--sumi);font-weight:500}

.pref-hero{padding-block:64px}
/* 本文（.pref-hero__body）と県別イラスト（.pref-hero__figure）の並び。
   DOM順は本文→図版で固定し、タブレット以下（初期値・grid-template-columns未指定＝
   暗黙の1列）では図版が本文の下に積まれるだけで、見出し・リード文を画面外へ
   押し出さない。2カラムはデスクトップ（min-width:1025px）でのみ有効にする */
.pref-hero__grid{display:grid}
.pref-hero__body{min-width:0}
.pref-hero__title{
  margin:0;
  font-family:var(--font-mincho);
  font-size:clamp(28px,2.8vw,38px);
  font-weight:600;
  line-height:1.5;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
}
.pref-hero__lead{margin-top:24px;max-width:42em}

/* 県別イラスト。ファーストビューに入るため loading="lazy" は使わない
   （テンプレート側で fetchpriority="high" を指定）。420px上限はタブレット/モバイルの
   積み表示、380pxはデスクトップの固定カラム幅（下の @media で切替） */
.pref-hero__figure{margin:32px 0 0;max-width:420px}
.pref-hero__figure img{display:block;width:100%;height:auto;border-radius:4px}

@media (min-width:1025px){
  .pref-hero__grid:has(.pref-hero__figure){
    grid-template-columns:minmax(0,1fr) 380px;
    column-gap:56px;
    align-items:center;
  }
  .pref-hero__grid:has(.pref-hero__figure) .pref-hero__figure{
    margin-top:0;
    max-width:none;
  }
}

.pref-points-sec{padding-block:64px}
.pref-points{margin:32px 0 0;padding:0;list-style:none}
.pref-points li{display:flex;align-items:flex-start;gap:16px}
.pref-points li + li{margin-top:20px}
/* .about-policy__no と同族の様式欄チップ（3度目の再利用） */
.pref-points__no{
  flex:none;
  width:34px;height:34px;
  display:grid;place-items:center;
  background:var(--midori-wash);
  border:1px solid var(--keisen-strong);
  border-radius:4px;
  font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--midori);
  font-variant-numeric:tabular-nums;
}
.pref-points p{
  margin:5px 0 0;
  font-size:14.5px;line-height:1.9;letter-spacing:.01em;
}
.pref-points p .num{
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.pref-table-sec{padding-block:64px}

/* 用語ガイド: 列見出しは一次ソースの語（所得制限・自己負担）のまま残すので、
   その語の意味を表の直前で1回だけ引き取る。セルごとには繰り返さない
   （規約: specs/SPEC-vocabulary.md）。白書の注記欄の様式で組み、装飾にしない */
.glossary{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin:28px 0 0;
  background:var(--panel);
  border:1px solid var(--keisen);
}
.glossary__item{padding:14px 18px 15px;border-left:1px solid var(--keisen)}
.glossary__item:first-child{border-left:0}
.glossary__term{
  font-size:12.5px;font-weight:700;line-height:1.5;letter-spacing:.08em;
  color:var(--midori);
}
.glossary__body{
  margin:5px 0 0;
  font-size:13px;line-height:1.85;letter-spacing:.01em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}

.pref-table-figure{margin:20px 0 0}
/* 62行の主表: 7列（市区町村＋通院/入院を年齢・所得制限・自己負担の3項目で分ける）。
   全国データでは所得制限も自己負担も通院/入院で食い違う自治体があるため
   （東京都はたまたま所得制限が一致するが、47都道府県へ展開する版面としては畳まない）、
   3項目すべてを助成の対象年齢と同じ colspan2 の二段見出しにそろえる */
/* 対象年齢の2列は、注記「18歳になった後の最初の3月31日」が「3月/31日」で割れない
   幅を確保する（1440px で約200px）。市区町村名は最長でも6文字なので柱を18%まで詰める */
.pref-table .col-stub{width:18%}
.pref-table .col-age{width:17%}
.pref-table .col-data{width:12%}

/* 差がつく値「有」だけ太字にして走査で拾えるようにする。地色は使わない
   （62行×6列のうち33箇所が塗られると表が斑になる）。柿色も使わない
   （圏点=「助成が手厚い側」の意味と衝突するため、負担の「有」には転用しない） */
.pref-table .val--has{font-weight:700}
/* 読者語彙は一次ソースの「有」「18歳年度末」より長い。1文字ぶんの左右余白を削り、
   行の高さは2段セルに合わせて詰める（読める範囲での最小値） */
.pref-table tbody td{padding:12px 10px;font-size:14.5px;line-height:1.55}

/* 62行は表の中段で2段ヘッダが画面外に出ると列の意味が読めなくなる。
   列見出しの固定・行hover・5行区切り罫は、同じ丈の表すべてで共有する
   .wtable--long（「白書の表組み」の節）が持つ。ここではこの表の寸法だけを扱う */

/* 市区町村名セルは市区町村ページへのリンク（R7・D-1）。1,741件が緑字になると表が
   緑だらけになるので、既定は本文色＋細い罫線にとどめ、hover/focus で深緑へ変える。
   モバイルでは柱が深緑地になり .muni 側が白字を持つため、ここでは罫線だけ差し替える */
.muni-link{
  display:inline-block;
  color:var(--sumi);
  text-decoration:none;
  border-bottom:1px solid var(--keisen-strong);
  transition:color var(--ease),border-color var(--ease);
}
.muni-link:hover,
.muni-link:focus-visible{color:var(--midori);border-bottom-color:var(--midori)}

/* 一次ソースの脚注マーク（愛知4市町の学生医療）。値の右肩に置き、表末の注記へ導く。
   柿色は「印」としての用途なので使ってよい（壁紙にはしない） */
.fn-mark{
  margin-left:2px;
  font-size:10px;line-height:1;
  color:var(--kaki-deep);
  vertical-align:super;
}

/* 収益層への導線（specs/SPEC-revenue-layer.md H章）。新しい視覚装置は増やさず、
   .section-head/.cta-row/.btn-primary（トップの hero と同じ部品）と
   .select-compare-links（/select/ の「通勤圏でくらべる」と同じ部品）を共有する */
.pref-entry-sec{padding-block:64px}

.pref-more-sec{padding-block:64px}
.pref-more__text{
  margin:0 0 20px;
  font-size:15px;line-height:1.9;
  color:var(--sumi-soft);
}

/* ------------------------------------------------------------
   狭めのデスクトップ: フッタの1行目を全幅の出典スタンプへ
   1.4fr / 1fr の2列は、1列目の .stamp--footer が min-width:620px を持つため、
   ウィンドウ幅が1200px弱だと2列目の取り分が潰れ、フッタのサイト名が
   「こそだ／てくら／べ」と3行に折り返していた（実測）。1200px未満では
   出典スタンプを1行目全幅へ落とす。目次はどちらでも下の行を全幅で受ける。
   ------------------------------------------------------------ */
@media (min-width:1025px) and (max-width:1199px){
  .footer__grid{grid-template-columns:1fr auto}
  .stamp--footer,
  .footer__stamps{grid-column:1 / -1}
}

/* ------------------------------------------------------------
   タブレット: ヒーローを縦積みに
   ------------------------------------------------------------ */
@media (max-width:1024px){
  /* sticky で残るのはスクロール後の高さ（ナビの段のみ。site-header.css） */
  html{scroll-padding-top:80px}

  .hero{padding-block:64px 56px}
  .hero__grid{grid-template-columns:1fr;gap:56px}
  .quilt__link{width:136px;height:134px}
  .hero__figure{padding-top:0;max-width:640px}
  .hero__scene{max-width:640px}
  .lead{max-width:38em}

  .index-sec,.entry-sec,.how-sec,.about-sec{padding-block:56px}
  .pref-hero,.pref-points-sec,.pref-table-sec,.pref-entry-sec,.pref-more-sec{padding-block:56px}
  .pref-index{column-count:2}
  /* 2段では PC の改段位置を解除し、01-03（23項目）/ 04-07（24項目）で区切る。
     margin-top も列頭の付け替えに合わせて動かす（03・05は通常の28pxへ戻し、04を列頭として0に） */
  .pref-block:nth-of-type(3){break-before:auto;margin-top:28px}
  .pref-block:nth-of-type(4){break-before:column;margin-top:0}
  .pref-block:nth-of-type(5){break-before:auto;margin-top:28px}

  .entry-sec__grid{grid-template-columns:1fr;gap:48px}
  /* 1欄へ倒す。領域名は DOM順（手順→注意点→図版）のまま縦に積む */
  .how-sec__grid,.about-sec__grid{
    grid-template-columns:1fr;
    grid-template-areas:"main" "aside" "illust";
    gap:48px;
    margin-top:36px;
  }
  .how-sec__aside,.about-sec__aside,
  .how-sec__illust,.about-sec__illust{max-width:520px}

  .footer__grid{grid-template-columns:1fr;row-gap:40px}
  /* 1列積みでは min-width:620px がそのままだと狭い画面ではみ出すため解除 */
  .stamp--footer{max-width:none;min-width:0}
  /* 目次は3列だと1項目あたりの取り分が最長ラベル（274px・実測）を割るので2列へ */
  .footer__nav ul{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(7,auto);
    column-gap:32px;
  }
}

/* ------------------------------------------------------------
   モバイル: 表を市区町村ごとの記録カードへ組み替える（横スクロールなし）
   ------------------------------------------------------------ */
@media (max-width:700px){
  .wrap{padding-inline:20px}
  .skip-link{left:20px}

  .site-header.is-hidden{transform:translateY(-100%)}
  .site-header:focus-within{transform:translateY(0)}

  .hero{padding-block:44px 40px}
  .hero__grid{gap:44px}
  .quilt__link{width:112px;height:112px}
  .quilt__name{font-size:11px;padding:3px 8px;letter-spacing:.02em}
  .lead{margin-top:24px;font-size:15px}
  /* 全幅ボタンと副リンクの軸をそろえる */
  .cta-row{margin-top:32px;gap:20px;flex-direction:column;align-items:center}
  .btn-primary{width:100%;font-size:17px;min-height:54px}

  .wtable{display:block;border:0;background:transparent}
  .wtable colgroup{display:none}
  .wtable__cap{display:block}
  .wtable thead{display:none}
  .wtable tbody{display:block}
  .wtable tbody tr{
    display:block;
    background:var(--panel);
    border:1px solid var(--keisen-strong);
  }
  .wtable tbody tr + tr{margin-top:-1px}
  .wtable tbody th.stub{
    display:flex;align-items:baseline;gap:10px;
    padding:9px 16px;
    background:var(--midori);
    border:0;
  }
  .wtable tbody tr + tr th.stub{border-top:0}
  .pref{font-size:11.5px;color:var(--midori-wash)}
  .muni{font-size:16px;color:var(--panel)}
  /* 柱が深緑地になるので、罫線を淡地色へ。文字色は .muni が持つ白のまま */
  .muni-link{border-bottom-color:var(--midori-wash)}
  .muni-link:hover,
  .muni-link:focus-visible{border-bottom-color:var(--panel)}
  .muni-link:hover .muni,
  .muni-link:focus-visible .muni{color:var(--midori-wash)}
  .wtable tbody td{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:13px 16px;
    text-align:right;
    border:0;border-top:1px solid var(--keisen);
  }
  .wtable tbody td:first-of-type{border-left:0}
  .wtable tbody tr + tr td{border-top:1px solid var(--keisen)}
  /* カード幅では行が浅くなるため、手描きの丸も行罫線に触れない寸法へ落とす */
  .mk-pen{
    left:-10px;top:-9px;
    width:calc(100% + 20px);height:calc(100% + 18px);
  }
  .wtable tbody td::before{
    content:attr(data-label);
    font-size:12.5px;line-height:1.6;letter-spacing:.04em;
    color:var(--sumi-soft);
    text-align:left;
  }
  /* カードでは値が右側に来るので、2段セルの主ラベルと注記も右端でそろえる。
     ラベル側が折り返しても値の右端が動かないよう、値の側を縮ませない */
  .pref-table tbody td{padding:12px 16px}
  .pref-table .cell{align-items:flex-end;flex:none;max-width:60%}
  .pref-table .val,.pref-table .val__note{text-align:right}
  .pref-table tbody td::before{flex:1 1 auto;min-width:0}

  /* 記事の表もカード化に乗せる（横スクロールで読ませない）。散文のセルが多いので
     カードの中では見出しを値の上へ積み、数値だけの列はデータ面のカードと同じく
     見出しの右へ値を置く。柱は深緑地になるため文字を淡地色へ返す */
  .wtable--guide tbody th.stub{color:var(--panel)}
  .wtable--guide tbody td{flex-direction:column;align-items:stretch;gap:4px;text-align:left}
  .wtable--guide tbody td.num{
    flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px;
    text-align:right;
  }

  /* 用語ガイドは縦積みにし、仕切りを縦罫から横罫へ入れ替える */
  .glossary{grid-template-columns:1fr}
  .glossary__item{border-left:0;border-top:1px solid var(--keisen)}
  .glossary__item:first-child{border-top:0}

  .stamp{
    flex-direction:column;align-items:stretch;gap:16px;
    padding:18px 20px;
  }
  .seal{align-self:flex-end;margin-right:6px}

  .band__inner{
    flex-direction:column;align-items:flex-start;gap:8px;
    padding-block:17px;
  }
  .band__note{
    padding-left:0;border-left:0;
    padding-top:8px;border-top:1px solid var(--midori-wash);
    align-self:stretch;
  }

  .index-sec,.entry-sec,.how-sec,.about-sec{padding-block:48px}
  .pref-hero,.pref-points-sec,.pref-table-sec,.pref-entry-sec,.pref-more-sec{padding-block:48px}
  .pref-hero__lead{margin-top:16px}
  .section-head{margin-bottom:32px}
  .section-lead{margin-top:16px}

  .pref-index{
    margin-top:32px;
    column-count:1;column-gap:0;column-rule:0;
  }
  /* 1段では強制改段が列超過を招く（column-countを超えて列が増え、横スクロールの
     原因になる）ため、PC/タブレットの break-before を明示的に解除する。
     margin-top も同じ粒度でモバイルの既定値へ戻す（列頭リセットの0pxが残ると
     詰まって見える） */
  .pref-block:nth-of-type(3),
  .pref-block:nth-of-type(4),
  .pref-block:nth-of-type(5){break-before:auto;margin-top:24px}
  .pref-block{margin-top:24px;padding-top:16px}
  .tab--region{height:36px}
  .tab__name{font-size:14px}
  .pref-block__meta{font-size:11.5px}
  /* タップ目標を確保（7px→12pxで実質48px級の行高に） */
  .pref-list__link{padding-block:12px}

  .entry-sec__grid{grid-template-columns:1fr;gap:40px}
  .how-sec__grid,.about-sec__grid{gap:40px;margin-top:28px}
  .how-sec__aside,.about-sec__aside,
  .how-sec__illust,.about-sec__illust{max-width:none}
  .step{gap:16px;padding-bottom:24px}
  .step__num{width:36px;height:36px;font-size:13px}
  .steps::before{left:17px}
  .step__text{font-size:15px}

  .about-limit{padding:18px}
  .about-policy li + li{margin-top:18px}

  .footer__grid{padding-block:44px 32px;row-gap:28px}
  /* 目次として読ませるため、モバイルでは縦1列に戻す（列を割ると
     「通勤圏でくらべる（東京東部と千葉西部）」が実機幅で2行に折れる） */
  .footer__nav ul{
    grid-template-columns:1fr;
    grid-template-rows:none;
    grid-auto-flow:row;
  }
  .footer__disclaimer{padding-top:24px}
}

/* ------------------------------------------------------------
   動きの抑制
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  .site-header{transform:none !important}
  .scene__layer{animation:none !important}
}

/* ------------------------------------------------------------
   法的ページ（プライバシーポリシー等・templates/legal.html）
   .section-head/.section-title/.section-lead/.breadcrumb は
   都道府県ページと共通のものをそのまま流用する。ここで足すのは
   条文の版面（見出し・段落・番号リスト）だけ。
   ------------------------------------------------------------ */
.legal-sec{padding-block:64px}
.legal-sec__wrap{max-width:860px}
.legal-sec__enacted{
  margin:16px 0 0;
  font-size:13px;letter-spacing:.02em;
  color:var(--sumi-soft);
}

.legal-body{
  margin-top:56px;
  padding-top:8px;
  border-top:2px solid var(--keisen-strong);
}
.legal-article{
  padding-block:28px;
  border-bottom:1px solid var(--keisen);
}
.legal-article:last-child{border-bottom:none}
.legal-article__title{
  margin:0 0 16px;
  font-family:var(--font-mincho);
  font-size:17px;font-weight:600;letter-spacing:.04em;
  color:var(--midori);
}
.legal-article__p{
  margin:0;
  font-size:15px;line-height:1.9;letter-spacing:.01em;
  word-break:auto-phrase;
}
.legal-article__p + .legal-article__p{margin-top:16px}
.legal-article__list{
  margin:16px 0 0;
  padding-left:1.4em;
  font-size:15px;line-height:1.9;letter-spacing:.01em;
}
.legal-article__list li{word-break:auto-phrase}
.legal-article__list li + li{margin-top:10px}
.legal-article__list .legal-article__list{margin-top:10px}
.legal-article__h3{
  margin:28px 0 12px;
  font-family:var(--font-mincho);
  font-size:16px;font-weight:600;letter-spacing:.04em;
  color:var(--sumi);
}
.legal-article__list + .legal-article__p,
.legal-article__h3 + .legal-article__p,
.legal-table-wrap + .legal-article__p{margin-top:16px}
.legal-table-wrap{margin-top:16px;overflow-x:auto}
.legal-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;line-height:1.7;letter-spacing:.01em;
}
.legal-table th,
.legal-table td{
  padding:10px 12px;
  border:1px solid var(--keisen);
  text-align:left;
  vertical-align:top;
  word-break:auto-phrase;
}
.legal-table th{
  background:var(--midori);
  color:var(--panel);
  font-weight:500;
  letter-spacing:.06em;
}
.legal-sec .cta-row{margin-top:28px}
.legal-sec .btn-primary:focus-visible{outline:2px solid var(--midori);outline-offset:3px}

@media (max-width:1024px){
  .legal-sec{padding-block:56px}
}

@media (max-width:700px){
  .legal-sec{padding-block:48px}
  .legal-body{margin-top:40px}
  .legal-article{padding-block:22px}
  .legal-article__p,.legal-article__list{font-size:14px}
}

/* ------------------------------------------------------------
   市区町村ページ（R7-a・札幌市／春日井市／高松市で版面を固める）
   パンくず・様式欄チップ・基準日スタンプ・用語ガイドは県ページのものを
   そのまま流用する。ここで足すのは、1自治体ぶんの事実ブロックと
   県内での位置づけ、横導線だけ。
   ------------------------------------------------------------ */

/* ファーストビューは答えから始める（2026-09-05・specs/SPEC-site-upgrade.md）。
   ヒーローは H1 と短いリードだけで、3事実のカードが直後の「助成の内容」で続く。
   イラストは「助成の内容」の柱（レール）の下へ下げた（.city-facts__figure） */
.city-hero{padding-block:52px 32px}
.city-hero__title{
  margin:0;
  font-family:var(--font-mincho);
  font-size:clamp(28px,2.8vw,38px);
  font-weight:600;
  line-height:1.5;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
}
.city-hero__lead{margin-top:18px;max-width:44em;font-size:15.5px}

/* ------------------------------------------------------------
   助成の内容（このページの価値の中心・単一自治体の事実ブロック）
   1自治体ぶんの6値なので表にしない。通院と入院で3項目とも同値なら1枚へ統合し
   「通院・入院とも」で言う。値が食い違うときだけ2枚並べる
   （同値なのに2枚並べると1,741ページの大半で同語反復が倍になる）
   ------------------------------------------------------------ */
.city-facts-sec{padding-block:64px}

/* カード幅を420pxで頭打ちにして、1枚（統合）でも2枚（並置）でも1枚あたりの
   版面が変わらないようにする。テンプレート化したとき分岐で見た目が動かない。
   既定は縦積み。横に並べられる幅になったら下の @media で2列へ切り替える */
.fact-cards{
  display:grid;
  grid-template-columns:minmax(0,420px);
  justify-content:start;
  gap:24px;
}
.fact-card{
  background:var(--panel);
  border:1px solid var(--keisen-strong);
}
/* 適用範囲の帯。表のヘッダ行（深緑地×白文字）と同じ語彙を使い、
   「この値が通院と入院のどちらに掛かるか」を版面で示す */
.fact-card__scope{
  margin:0;
  padding:10px 16px;
  background:var(--midori);
  color:var(--panel);
  font-size:13px;font-weight:500;line-height:1.6;letter-spacing:.1em;
}
.fact-list{margin:0}
.fact-item{
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  column-gap:20px;
  align-items:baseline;
  padding:16px 16px 17px;
}
.fact-item + .fact-item{border-top:1px solid var(--keisen)}
/* 見出しは一次ソースの語のまま残す（自治体サイトで照合できること・検索語としての価値）。
   意味は下の用語ガイドが1回だけ引き取る（specs/SPEC-vocabulary.md） */
.fact-item__term{
  font-size:12.5px;line-height:1.7;letter-spacing:.06em;
  color:var(--sumi-soft);
}
.fact-item__value{margin:0;min-width:0;overflow-wrap:anywhere}
/* 数字・値は主役級。表のセル（14.5px・中央揃え）より一段大きく、左揃えで置く */
.fact-item__value .cell{align-items:flex-start;gap:4px}
.fact-item__value .val{
  font-size:20px;font-weight:500;line-height:1.5;letter-spacing:.02em;
}
.fact-item__number{font-variant-numeric:tabular-nums}
.fact-item__unit{
  margin-left:3px;
  font-size:12.5px;font-weight:400;letter-spacing:.04em;
  color:var(--sumi-soft);
}
.fact-item__value .val__note{font-size:11.5px;text-align:left}
/* 在学条件など、値だけでは誤読される注記。比較のしかたの注意書き
   （.how-note__list）と同じ柿色の短罫を使う。柿色は印としてのみ使う用途 */
.fact-item__caveat{
  position:relative;
  margin:10px 0 0;padding-left:18px;
  font-size:12.5px;line-height:1.8;letter-spacing:.01em;
  color:var(--sumi);
  word-break:auto-phrase;
}
.fact-item__caveat::before{
  content:"";
  position:absolute;left:0;top:.85em;
  width:6px;height:1px;
  background:var(--kaki-deep);
}

/* 通院と入院を横に並べられる幅から2列にする。閾値はカード2枚（420px×2）と
   隙間（24px）と .wrap の余白（40px×2）とスクロールバー（15px）の合計。
   2列のときだけ subgrid で行の高さを左右にそろえる。注記の有無や値の長さで
   「所得制限」「自己負担」の位置が左右でずれると、同じ項目を見くらべられない。
   縦積みのままここを有効にすると row-gap:0 でカード同士が接してしまうので、
   列を増やす条件とそろえて同じ @media に入れる。
   subgrid 非対応の環境では2列のまま行がずれるだけで、内容は落ちない */
@media (min-width:960px){
  .fact-cards{
    grid-template-columns:repeat(2,420px);
    grid-template-rows:auto auto auto auto;
    row-gap:0;
  }
  .fact-card:not(:only-child){display:grid;grid-row:span 4;grid-template-rows:subgrid}
  .fact-card:not(:only-child) .fact-list{display:grid;grid-row:2/span 3;grid-template-rows:subgrid}

  /* 統合カード（1枚）は全1,741ページ中1,573ページの既定形で、ここが市ページの
     標準版面になる。420px1枚のまま広い画面へ置くと本文幅の右側が大きく空き、
     モバイル部品を拡大画面へ流用したように見える。並置2枚と同じ合計幅
     （420px×2＋隙間24px）を占めさせ、3項目は用語ガイドと同じ列リズムの
     横組み3カラムにする。深緑の「通院・入院とも」帯は全幅のまま残し、
     対象年齢の注記も縦組みと同じく値の直下に付いたままにする */
  .fact-card:only-child{grid-column:1/-1}
  .fact-card:only-child .fact-list{display:grid;grid-template-columns:repeat(3,1fr)}
  /* 横組みでは項目の仕切りを横罫から縦罫へ入れ替える（用語ガイドと同じ扱い）。
     見出しは値の上へ積んで、値に列の幅をすべて渡す */
  .fact-card:only-child .fact-item{
    grid-template-columns:1fr;
    row-gap:6px;
    border-top:0;
    border-left:1px solid var(--keisen);
  }
  .fact-card:only-child .fact-item:first-child{border-left:0}
  /* 窓口カード（.official-contact）は .fact-cards の外に単独で置かれ、項目数も
     担当課・電話・医療証の名称・払い戻し期限の4つで固定ではない。並置2枚用の
     subgrid（見出し＋3項目）を継ぐと4項目目が3項目目に重なるので、縦積みの
     通常フローへ戻す（2026-09-05、港区ページの実表示で重なりを確認） */
  .fact-card.official-contact{display:block;grid-row:auto;grid-template-rows:none}
  .fact-card.official-contact .fact-list{display:block;grid-row:auto;grid-template-rows:none}
  /* フリースクール節の統合カード（1枚）は並置2枚の固定幅（420px×2＋隙間）でなく
     本文欄の幅に合わせる。固定幅のままだと本文欄の右端を16pxほど越える */
  .city-freeschool-sec > .wrap > .fact-cards{grid-template-columns:minmax(0,1fr);max-width:none}

  /* 奨学金ページは10項目あり、対象奨学金だけが長文になる。汎用カードの3列は
     保ったまま、このページ種別の長文項目だけを全幅の単独行へ分離する。 */
  .shogakukin-facts .fact-item--wide{
    grid-column:1/-1;
    border-left:0;
    border-top:1px solid var(--keisen);
  }
  .shogakukin-facts .fact-item--wide + .fact-item,
  .shogakukin-facts .fact-item:nth-child(6),
  .shogakukin-facts .fact-item:nth-child(9){border-left:0}
}

.city-infant-medical__note{
  margin:0;max-width:44em;
  font-size:13px;line-height:1.9;letter-spacing:.01em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}

/* 申請・相談の窓口。公式リンク・FAQ・既存の小注記だけで構成する。 */
.city-contact-sec{padding-block:64px}

@media (max-width:1024px){
  .city-contact-sec{padding-block:56px}
}

@media (max-width:700px){
  .city-contact-sec{padding-block:48px}
}

/* ------------------------------------------------------------
   県内での位置づけ
   ------------------------------------------------------------ */
.city-rank-sec{padding-block:64px}
.city-rank{margin:32px 0 0;padding:0;list-style:none}
.city-rank li{display:flex;align-items:flex-start;gap:16px}
.city-rank li + li{margin-top:20px}
/* .about-policy__no / .step__num / .pref-points__no と同族の様式欄チップ（4度目の再利用） */
.city-rank__no{
  flex:none;
  width:34px;height:34px;
  display:grid;place-items:center;
  background:var(--midori-wash);
  border:1px solid var(--keisen-strong);
  border-radius:4px;
  font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--midori);
  font-variant-numeric:tabular-nums;
}
/* 位置づけ文は語彙表の値（長さがまちまち）を含む機械生成文なので、
   ヒーローやリードのように .phrase（inline-block）で文節を固定すると、
   長い値のところで行が割れて泣き別れる。可変長の部分は素のテキストのまま
   auto-phrase に任せ、.phrase は短い定型句だけに使う */
.city-rank p{
  margin:5px 0 0;max-width:44em;
  font-size:14.5px;line-height:1.9;letter-spacing:.01em;
  word-break:auto-phrase;
}
/* 分母（県内の市区町村数）は地の文のまま、答えにあたる件数だけ太字にする。
   全部太字にすると走査の手がかりが消える */
.city-rank p .num{font-variant-numeric:tabular-nums}
.city-rank p b.num{font-weight:700}

/* ------------------------------------------------------------
   保育所等の利用状況（第2カテゴリの事実ブロック）
   新しい装置は増やさず、助成の内容と同じ fact-card 系を使う。値は4つなので、
   統合カード（1枚）の横組みをそのまま借りて列数だけ3→4へ変える。
   基準日は帯（.fact-card__scope）に置く。医療費（2024年4月1日）と基準日が違うので、
   この節の数値がいつ時点のものかを節の外の出典スタンプ任せにしない
   ------------------------------------------------------------ */
.city-childcare-sec{padding-block:64px}
/* 並置2枚（420px×2＋隙間24px）と同じ版面幅。助成の内容の統合カードと軸をそろえる */
.childcare-facts{max-width:864px}
.childcare-facts .num{font-variant-numeric:tabular-nums}

/* カードの値の読み方を限定する注記（保育所等＝国の集計に含まれない申込者、
   学童保育＝同名の待機児童数との違い）。独立した文ではなく
   .fact-item__caveat と同じ柿色の短罫を印として付ける */
.childcare-note,.after-school-note,.lunch-note{
  position:relative;
  max-width:44em;
  margin:24px 0 0;padding-left:18px;
  font-size:13px;line-height:1.85;letter-spacing:.01em;
  word-break:auto-phrase;
}
.childcare-note::before,.after-school-note::before,.lunch-note::before{
  content:"";
  position:absolute;left:0;top:.9em;
  width:6px;height:1px;
  background:var(--kaki-deep);
}
/* 前年差分と県内文脈。位置づけ（.city-rank p）と同じ本文の組みにそろえる */
.childcare-context,.lunch-context{
  max-width:44em;
  margin:20px 0 0;
  font-size:14.5px;line-height:1.9;letter-spacing:.01em;
  word-break:auto-phrase;
}
.childcare-context + .childcare-context{margin-top:8px}

@media (min-width:960px){
  /* .fact-card:only-child の横組み（用語ガイドと同じ列リズム）がそのまま効くので、
     列数だけ4項目ぶんへ差し替える */
  .childcare-facts .fact-card:only-child .fact-list{grid-template-columns:repeat(4,1fr)}
}

/* ------------------------------------------------------------
   学童保育（放課後児童クラブ）の状況
   保育所等の次に置く第3カテゴリ。新しい装置は増やさず、カード・注記とも
   既存の部品を継承する。値は3つなので統合カードの横組みがそのまま効く。
   基準日と「速報値」は帯（.fact-card__scope）へまとめる。3節が別々の基準日を
   持つページなので、どの数値がいつ・どの確度のものかを値と同じ枠の中で断る
   ------------------------------------------------------------ */
.city-after-school-sec{padding-block:64px}
/* 保育所等・助成の内容と同じ版面幅（420px×2＋隙間24px）で軸をそろえる */
.after-school-facts{max-width:864px}
.after-school-facts .num{font-variant-numeric:tabular-nums}

/* 未実施自治体（全1,741件中105件）。数値カードは出さないが、注記1行だけにすると
   節が痩せて「作りかけの版面」に見える。カードと同じパネル・同じ帯を持つ様式欄で
   受け、実施・未実施どちらでも節の骨格が変わらないようにする。
   .fact-card は名乗らない（事実カードではなく、調査にどう載っているかの記載） */
.after-school-empty{
  background:var(--panel);
  border:1px solid var(--keisen-strong);
}
.after-school-empty__scope{
  margin:0;
  padding:10px 16px;
  background:var(--midori);
  color:var(--panel);
  font-size:13px;font-weight:500;line-height:1.6;letter-spacing:.1em;
}
/* 本文は fact-item と同じ内寸へ収める。値ではないので .val の20pxは使わず、
   位置づけ・文脈文（14.5px）と同じ本文の組みにする */
.after-school-empty__body{
  margin:0;
  padding:16px 16px 17px;
  max-width:44em;
  font-size:14.5px;line-height:1.9;letter-spacing:.01em;
  word-break:auto-phrase;
}

@media (min-width:960px){
  /* 保育所等が4列、こちらは3項目なので3列。列リズムは用語ガイドと同じ */
  .after-school-facts .fact-card:only-child .fact-list{grid-template-columns:repeat(3,1fr)}
}

/* ------------------------------------------------------------
   学校給食費の無償化（第4カテゴリ）
   値が人数ではなく5値の状態なので、数の節と見た目を変える理由はあるが、
   ここで新しいカードを起こすと1ページに4種類の版面が並ぶ。装置は保育所等・
   学童保育と同じ fact-card 系のまま、列数（2列）と値の扱いだけを差し替える。

   状態ごとの見せ方には非対称を持たせる。
   ・無償（恒久）… 編集部マーカー（手描きの丸）＋深緑ベタの区分標。表ヘッダと
   　　　　　　 同じ地なので「確定した強い状態」として読める
   ・無償（期間限定）… 同じマーカーに、深緑の淡地の区分標。今は同じ「無償」でも
   　　　　　　 続く保証が違うことを、地の強さの差だけで言う（色は足さない）
   ・一部補助 … 区分標なしの本文濃度。無償の2値と同じ枠に並べない
   ・保護者負担あり … 本文と同じ濃さ。事実として確定しているので弱めない
   ・記載なし … 補足色へ落とす。事実の不在を「実施していない」と同じ濃さで
   　　　　　　 置くと、無い記載が有る事実に見える（編集原則）
   ------------------------------------------------------------ */
.city-lunch-sec,.city-freeschool-sec{padding-block:64px}
/* 助成の内容・保育所等・学童保育と同じ版面幅（420px×2＋隙間24px）で軸をそろえる */
.lunch-facts{max-width:864px}
.lunch-facts .num{font-variant-numeric:tabular-nums}
/* 小・中で注記や引用の量が違うと、grid の既定（auto行のstretch）で背の低い側の行が
   引き伸ばされ、左右で値の高さが食い違う。同じ項目を目の高さでくらべる節なので、
   行を伸ばさず上から詰める */
.lunch-item{align-content:start}
/* 値の下に根拠の引用が入るので、セルの縦centerではなく上から積む。
   引用の有無で値の行が上下しないよう、値側（.cell）だけ高さを持たせる */
.lunch-item .fact-item__value{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
/* 値の下に説明を敷くとき、手描きの丸は値の下端より10px外へ出る。既定の2pxのままだと
   輪郭が説明文へ乗るので、この節だけ値と説明の間を空ける。丸の有無で左右の行位置が
   ずれないよう、無償以外のセルにも同じ間隔を掛ける。
   小学校と中学校の値は上端でそろえる（高さの固定ではなく上詰めでそろえるので、
   注記や引用が片側だけにあっても値の行は動かない） */
.lunch-item .cell{gap:9px;justify-content:flex-start}
/* 値と区分標は同じ行に置く。標が回り込んでも値の位置が動かないよう baseline でそろえ、
   狭い幅では標だけを次行へ落とす。横の間隔は手描きの丸が値の外へ出る幅（13px）より
   広く取る。詰めると輪郭が標に乗る */
.lunch-item .lunch-value{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 17px}
/* 手描きの丸は6文字の値（「高校卒業まで」）向けの寸法。2文字の「無償」に流用すると
   横に潰れて輪郭が値から離れるので、この節ぶんだけ寸法を描き直す */
.lunch-item .mk-pen{
  left:-13px;top:-10px;
  width:calc(100% + 26px);height:calc(100% + 20px);
  stroke-width:1.5;
}
.lunch-item--unknown .val{color:var(--sumi-soft)}

/* 区分標。「無償」の2値を分ける唯一の装置なので、地の強さで差を付ける。
   罫は両方に1pxずつ入れて、地の違いで高さが変わらないようにする */
.lunch-qual{
  display:inline-block;
  padding:3px 7px 4px 8px;
  border:1px solid transparent;border-radius:4px;
  font-size:11.5px;font-weight:700;line-height:1.5;letter-spacing:.1em;
  white-space:nowrap;
}
/* 恒久＝表ヘッダと同じ深緑ベタ。ページの中で「確定」を意味する地はこれだけ */
.lunch-qual--full_free_permanent{
  background:var(--midori);border-color:var(--midori);
  color:var(--panel);
}
/* 期間限定＝同じ深緑の淡地。強さだけを落とし、色は増やさない */
.lunch-qual--full_free_temporary{
  background:var(--midori-wash);border-color:var(--keisen-strong);
  color:var(--midori);
}

/* 逐語引用。値の言い換えではなく原文なので、値と同じ列のまま一段下げ、
   罫（紙の引用欄）で本文と区別する。色は本文より落として値の主役を奪わない */
.lunch-quote{
  max-width:40em;
  margin:0;padding:2px 0 3px 13px;
  border-left:2px solid var(--keisen-strong);
  font-size:13px;line-height:1.9;letter-spacing:.01em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}
/* 備考・引用の標目。公式FAQの見出し（.official-faq__eyebrow）と同じ深緑の小見出しで
   「ここから先は値ではなく根拠・断り書き」と示す */
.lunch-note__term{
  margin-right:10px;
  color:var(--midori);
  font-size:11.5px;font-weight:700;letter-spacing:.12em;
}
.lunch-quote__asof{margin-left:4px;font-size:11.5px;white-space:nowrap}

/* 区分の読み方。用語ガイド（.glossary）と同じ罫だけの表組みで、カードの外に置く。
   自治体ごとの説明ではなく分類語の定義なので、カードの中へ混ぜない */
.lunch-legend{max-width:864px;margin-top:24px}
.lunch-legend__head{
  margin:0 0 8px;
  color:var(--midori);
  font-size:11.5px;font-weight:700;line-height:1.6;letter-spacing:.12em;
}
.lunch-legend__list{margin:0;border-top:1px solid var(--keisen)}
.lunch-legend__row{
  display:grid;
  grid-template-columns:minmax(0,148px) minmax(0,1fr);
  column-gap:20px;
  padding:11px 0 12px;
  border-bottom:1px solid var(--keisen);
}
.lunch-legend__term{
  font-size:12.5px;font-weight:700;line-height:1.85;letter-spacing:.04em;
  color:var(--sumi);
}
.lunch-legend__desc{
  margin:0;max-width:44em;
  font-size:12.5px;line-height:1.85;letter-spacing:.01em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}

@media (min-width:960px){
  /* 保育所等が4列、学童保育が3列、こちらは2項目なので2列 */
  .lunch-facts .fact-card:only-child .fact-list{grid-template-columns:repeat(2,1fr)}
  /* 2列になると縦の切れ目が要る。行間の罫（.fact-item + .fact-item）は横並びでは
     右の列にだけ乗って左右が食い違うので、この節では縦罫へ置き換える */
  .lunch-facts .fact-card:only-child .lunch-item + .lunch-item{
    border-top:0;
    border-left:1px solid var(--keisen);
  }
}

@media (max-width:559px){
  /* 標目を折り返さずに置く幅が無くなるので、定義文を下へ積む */
  .lunch-legend__row{grid-template-columns:minmax(0,1fr);row-gap:2px}
}

/* ------------------------------------------------------------
   用語ガイド・出典と公式情報
   ------------------------------------------------------------ */
.city-glossary-sec{padding-block:64px}

.city-source-sec{padding-block:64px}
/* 県ページでは表の figcaption だが、市ページには表が無いので単独で置く */
.city-source-sec .stamp{margin-top:0;max-width:820px}
/* 調査ごとに1個並ぶ（医療費・保育）。押印の枠が接して1枚の様式に見えないよう間を空ける */
.city-source-sec .stamp + .stamp{margin-top:20px}
/* URL台帳が verified の自治体だけリンクを張る。candidate は張らない
   （誤リンクは信頼を壊す）。それ以外は一般文のみ（specs/SPEC-city-page.md 構成8） */
.official{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 20px;
  margin:24px 0 0;
}
.official__verified{
  font-size:12.5px;line-height:1.8;letter-spacing:.02em;
  color:var(--sumi-soft);
}
.official__verified .num{font-variant-numeric:tabular-nums}
.official__text{
  font-size:14.5px;line-height:1.9;letter-spacing:.01em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}

/* 自治体公式FAQの要約。比較データのスタンプに従属する一次情報への入口で、
   FAQだけを独立したCTAに見せない（specs/SPEC-official-faq.md）。 */
.official-faq{
  max-width:820px;
  margin:36px 0 0;
  padding-top:28px;
  border-top:1px solid var(--keisen);
}
.official-faq__heading{margin:0}
.official-faq__eyebrow{
  margin:0;
  color:var(--midori);
  font-size:12px;font-weight:700;letter-spacing:.12em;
}
.official-faq__question{
  margin:10px 0 0;
  font-family:var(--font-mincho);
  font-size:19px;font-weight:600;line-height:1.65;letter-spacing:.02em;
  word-break:auto-phrase;
}
.official-faq__summary{
  max-width:50em;
  margin:16px 0 0;
  font-size:14.5px;line-height:1.95;letter-spacing:.01em;
  word-break:auto-phrase;
}
.official-faq__source{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 20px;
  margin:18px 0 0;
}
.official-faq__link{font-size:14px}
.official-faq__note{
  margin:18px 0 0;
  color:var(--sumi-soft);
  font-size:12.5px;line-height:1.8;letter-spacing:.02em;
  word-break:auto-phrase;
}

/* 調査後変更は公式FAQと給食の逐語引用枠を組み合わせる。新しい装置は作らず、
   複数引用の間隔と比較表内の脚注リンクに必要な配置だけを足す。 */
.post-survey-change .official__verified{margin:12px 0 0}
.post-survey-change__quotes{display:grid;gap:10px;margin-top:16px}
.post-survey-change-link{display:inline-block;margin-left:3px;text-decoration:none}
.post-survey-change-link:hover .fn-mark,
.post-survey-change-link:focus-visible .fn-mark{color:var(--midori)}

/* ------------------------------------------------------------
   くらべる・しぼりこむ（収益層への導線・specs/SPEC-revenue-layer.md）
   県ページの .pref-entry-sec と同じく新しい視覚装置は増やさず、
   .section-head/.cta-row/.btn-primary と .select-compare-links を共有する
   ------------------------------------------------------------ */
.city-entry-sec{padding-block:64px}
/* 市ページの通勤圏リンクは対象圏域1件だけなので、複数並ぶ /select/ ほど間を取らない */
.city-entry-sec .select-compare-links{margin-top:40px;padding-top:28px}

/* ------------------------------------------------------------
   横導線
   主導線は県ページ（一覧でくらべる）。前後2件はそれに視覚的に従属させ、
   同格に並べない（specs/SPEC-city-page.md B-3）
   ------------------------------------------------------------ */
.city-nav-sec{padding-block:64px 88px}
.city-nav__primary{margin:0}
/* ラベルに県名と市区町村数が入るので、トップページのCTAより長く、狭い幅では2行になる。
   「一覧でく／らべる」と語中で折れないよう文節で折り返す */
.city-nav__primary .btn-primary{word-break:auto-phrase;text-align:center}

.city-adjacent{
  max-width:820px;
  margin-top:44px;padding-top:28px;
  border-top:1px solid var(--keisen);
}
/* 見出しは根拠を明示する（「近隣」は隣接データを持っていないので使わない。
   「あわせて読みたい」等、編集的推薦を装う見出しも使わない・B-2） */
.city-adjacent__head{
  margin:0 0 16px;
  font-family:var(--font-mincho);
  font-size:13px;font-weight:600;letter-spacing:.14em;
  color:var(--sumi-soft);
}
.city-adjacent__list{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin:0;padding:0;list-style:none;
}
/* 県内で完結するので、県内先頭は「前」が、末尾は「次」が無い（B-1）。
   前＝左・次＝右の位置を固定して、1件しか無くても向きが版面で分かるようにする */
.city-adjacent__item--prev{grid-column:1}
.city-adjacent__item--next{grid-column:2}
.city-adjacent__link{
  display:flex;align-items:baseline;gap:12px;
  padding:13px 16px;
  background:var(--panel);
  border:1px solid var(--keisen);
  border-radius:4px;
  color:var(--sumi);text-decoration:none;
  transition:color var(--ease),border-color var(--ease),background-color var(--ease);
}
.city-adjacent__link:hover,
.city-adjacent__link:focus-visible{
  color:var(--midori);
  border-color:var(--midori);
  background:var(--midori-wash);
}
.city-adjacent__dir{
  flex:none;
  padding-right:11px;
  border-right:1px solid var(--keisen-strong);
  font-size:11.5px;line-height:1.7;letter-spacing:.14em;
  color:var(--sumi-soft);
  /* 1文字なので末尾の字送りぶんを詰めて、罫線との間隔をそろえる */
  margin-right:-.14em;
}
.city-adjacent__name{
  min-width:0;
  font-size:14.5px;line-height:1.7;letter-spacing:.02em;
  word-break:auto-phrase;
}

@media (max-width:1024px){
  .city-hero,.city-facts-sec,.city-contact-sec,.city-rank-sec,.city-childcare-sec,.city-after-school-sec,
  .city-lunch-sec,.city-freeschool-sec,.city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec{padding-block:56px}
  .city-nav-sec{padding-block:56px 72px}
}

@media (max-width:700px){
  .city-hero,.city-facts-sec,.city-contact-sec,.city-rank-sec,.city-childcare-sec,.city-after-school-sec,
  .city-lunch-sec,.city-freeschool-sec,.city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec{padding-block:48px}
  .city-nav-sec{padding-block:48px 64px}
  .city-hero__lead{margin-top:16px}

  .official-faq{margin-top:32px;padding-top:24px}
  .official-faq__question{font-size:18px}

  /* カード幅が狭いので、見出しを値の上へ積んで値に全幅を渡す */
  .fact-item{grid-template-columns:minmax(0,1fr);row-gap:6px;padding:14px 16px 16px}
  .fact-item__value .val{font-size:19px}

  .city-adjacent{margin-top:36px;padding-top:24px}
  .city-adjacent__list{grid-template-columns:1fr}
  .city-adjacent__item--prev,
  .city-adjacent__item--next{grid-column:1}
}

/* ================================================================
   市区町村ページの版面（R1・白書の2欄組）
   specs/SPEC-design-uplift-r1.md

   R7-a〜R9で節を足すたびに「.wrap 全幅の中で、左寄り約55chの本文列だけが伸びる」
   組みが積み重なり、1440pxでは節の右半分が生成りのまま残っていた。本文列を広げても
   行長が読めなくなるだけなので、**版面そのものを2欄に割る**。

   規約（1,741ページの全節で同一。節ごとに方式を変えない）:
   - 左レール = 章番号（CSSカウンタ）＋ 節見出し。柱として節の高さいっぱいに立てる
   - 本文欄  = リード以下すべて（注記・カード・表・導線）。節の実体はここに集まる
   - 章の切れ目 = 版面幅いっぱいの2px天罫（--keisen-strong）。柱罫は1px（--keisen）
   - 数の節も文の節も同じ軸に載せ、カード群は本文欄の幅いっぱいまで伸ばす

   DOMは触っていない（見出し・本文・URL・構造化データ・計測属性はすべて不変）。
   見出しとリードの割り振りは .section-head の display:contents で行い、header 要素
   そのものは残す。章番号は .section-head::before に置き、h2 のテキストにも
   アクセシブル名にも混ぜない。

   レールは 1120px 以上でだけ立てる。それ未満は既存の縦積みのままで、
   足すのは天罫・章番号・様式欄（.city-rank の枠など）だけ。

   :is() の中身は「章を持つ節」の実体。ヒーロー・中間導線・奥付は章ではないので
   入れない。並び順は templates/city.html のDOM順。
   ================================================================ */

/* 章番号の通し。節は自治体ごとに出し分けがある（給食費・暮らしの環境）ので、
   固定の番号を持たせずDOM順で数える */
main{counter-reset:city-sec}

:is(.city-facts-sec,.city-contact-sec,.city-rank-sec,
    .city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,
    .city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec){counter-increment:city-sec}

/* 章の切れ目。border-top だと .wrap の左右内余白ぶん罫が版面より外へ出るので、
   背景の1本線で引いて表・カードの左右端にきっちりそろえる（--wrappad は .wrap の
   内余白と同じ値で、狭い画面の 20px も同じ式で追随する） */
:is(.city-facts-sec,.city-contact-sec,.city-rank-sec,
    .city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,
    .city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) > .wrap,
.city-nav-sec > .wrap{
  --wrappad:40px;
  padding-top:36px;
  background-image:linear-gradient(var(--keisen-strong),var(--keisen-strong));
  background-repeat:no-repeat;
  background-size:calc(100% - var(--wrappad) * 2) 2px;
  background-position:var(--wrappad) 0;
}

/* 章番号。柿色は印とCTAのためのものなので使わない（深緑の小見出し語彙を借りる） */
:is(.city-facts-sec,.city-contact-sec,.city-rank-sec,
    .city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,
    .city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) > .wrap > .section-head::before{
  content:counter(city-sec,decimal-leading-zero);
  display:block;
  margin-bottom:12px;
  font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.14em;
  color:var(--midori);
  font-variant-numeric:tabular-nums;
}

/* 未定義のまま16pxの地の文で出ていた注記欄（給食費の調査範囲・免責）を様式の階層へ戻す。
   出典まわりの注記（.stamp-credit）と同じ濃さにそろえる */
.section-note{
  margin:12px 0 0;max-width:46em;
  font-size:12.5px;line-height:1.85;letter-spacing:.02em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}
.section-lead + .section-note{margin-top:14px}

/* 位置づけは「文が縦に並ぶだけ」で版面の骨が無かった。値のカードと同じ白地＋強罫の
   様式欄で受け、項目の切れ目を罫で示す（番号チップは既存のまま） */
.city-rank{
  margin:24px 0 0;
  background:var(--panel);
  border:1px solid var(--keisen-strong);
}
.city-rank li{padding:16px 20px 17px}
.city-rank li + li{margin-top:0;border-top:1px solid var(--keisen)}
.city-rank p{max-width:46em}

/* 窓口の確認方法は、編集方針の限定欄（.about-limit）と同じ深緑の様式欄で受ける。 */
.city-contact-sec .section-lead{
  /* 2欄組では本文欄の先頭なので上余白を落とす（下の @media で0にする）。
     縦積みのときだけ見出しとのあいだを空ける */
  margin:18px 0 0;
  padding:16px 20px 17px;
  max-width:46em;
  background:var(--midori-wash);
  border-left:3px solid var(--midori);
  color:var(--sumi);
  font-size:15.5px;
}

/* 版面幅に対する頭打ちを外す。幅は本文欄（レールの右）が決める。
   1120px未満では .wrap 幅そのものが上限になるので、狭い画面の見た目は変わらない */
.city-childcare-sec > .wrap > .childcare-facts,
.city-after-school-sec > .wrap > .after-school-facts,
.city-lunch-sec > .wrap > .lunch-facts,
.city-lunch-sec > .wrap > .lunch-legend,
.city-env-sec > .wrap > .env-metrics,
.city-source-sec > .wrap > .stamp,
.city-source-sec > .wrap > .official-faq,
.city-contact-sec > .wrap > .official-faq,
.city-nav-sec > .wrap > .city-adjacent{max-width:none}

/* 注記・文脈文の行長も本文欄に合わせて少しだけ伸ばす（読める範囲で止める） */
.childcare-note,.after-school-note,.lunch-note,
.childcare-context,.lunch-context{max-width:48em}

@media (max-width:700px){
  :is(.city-facts-sec,.city-contact-sec,.city-rank-sec,
      .city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,
      .city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) > .wrap,
  .city-nav-sec > .wrap{--wrappad:20px;padding-top:26px}
  .city-contact-sec .section-lead{padding:14px 16px 15px;font-size:15px}
  .city-rank li{padding:14px 16px 15px}
}

/* ----------------------------------------------------------------
   2欄組（1120px 以上）
   レール幅と隙間は px で持つ。柱罫は要素を足さず .wrap の背景の1本線で引くので、
   背景の原点（padding box）から .wrap の左内余白（40px）ぶんずらして、
   レールと本文欄の隙間の中央へ置く。
   1200px の版面では 300 + 52 + 848 に割れ、本文欄の 848px が
   fact-card 2枚（並置）と統合カード1枚の共通幅になる。
   ---------------------------------------------------------------- */
@media (min-width:1120px){
  :is(.city-facts-sec,.city-contact-sec,.city-rank-sec,
      .city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,
      .city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) > .wrap{
    --rail:250px;
    --railgap:44px;
    display:grid;
    grid-template-columns:var(--rail) minmax(0,1fr);
    column-gap:var(--railgap);
    row-gap:0;
    align-items:start;
    /* 天罫（版面幅）＋柱罫（レールと本文欄の隙間の中央）。どちらも背景の線で、
       要素も影も足さない */
    background-image:
      linear-gradient(var(--keisen),var(--keisen));
    background-repeat:no-repeat;
    background-size:calc(100% - var(--wrappad) * 2) 2px,1px 100%;
    background-position:
      var(--wrappad) 0,
      calc(var(--wrappad) + var(--rail) + var(--railgap) / 2) 0;
  }

  /* 奥付だけは前後導線を持つページに限って2欄にする。同じ city-nav-sec を使う
     奨学金ページには前後導線が無く、レールを立てると柱の右が空くため。
     :has() を含む規則は他のセレクタと同じ並びへ入れない（非対応環境で規則ごと
     落ちる）。落ちた場合はレールが立たないだけで、内容も天罫も残る */
  .city-nav-sec > .wrap:has(> .city-adjacent){
    --rail:250px;
    --railgap:44px;
    display:grid;
    grid-template-columns:var(--rail) minmax(0,1fr);
    column-gap:var(--railgap);
    row-gap:0;
    align-items:start;
    background-image:
      linear-gradient(var(--keisen),var(--keisen));
    background-repeat:no-repeat;
    background-size:calc(100% - var(--wrappad) * 2) 2px,1px 100%;
    background-position:
      var(--wrappad) 0,
      calc(var(--wrappad) + var(--rail) + var(--railgap) / 2) 0;
  }

  /* header は残したまま、見出しをレールへ、リード以下を本文欄へ割る */
  :is(.city-facts-sec,.city-contact-sec,.city-rank-sec,
      .city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,
      .city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) > .wrap > .section-head{display:contents}

  :is(.city-facts-sec,.city-contact-sec,.city-rank-sec,
      .city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,
      .city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) > .wrap > *,
  :is(.city-facts-sec,.city-contact-sec,.city-rank-sec,
      .city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,
      .city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) > .wrap > .section-head > *{grid-column:2}

  /* 柱は節の高さいっぱいに立てる。行の高さは本文欄の要素だけで決まるので、
     レール側が短くても本文欄に空きの行はできない（span は行数の上限として置く） */
  :is(.city-facts-sec,.city-contact-sec,.city-rank-sec,
      .city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,
      .city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) > .wrap > .section-head::before,
  :is(.city-facts-sec,.city-contact-sec,.city-rank-sec,
      .city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,
      .city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) > .wrap > .section-head > .section-title{
    grid-column:1;
    grid-row:1 / span 30;
    align-self:start;
    /* 紙の「柱」。出典（帳票5枚）のように節が縦に長いページでは、いま何章を
       読んでいるかが失われるので、章のあいだだけ柱を連れて下りる。
       追従の範囲はグリッド領域＝その節の中に限られる。sticky なので
       prefers-reduced-motion の対象になる動きは起こさない */
    position:sticky;
    top:100px;
  }
  :is(.city-facts-sec,.city-contact-sec,.city-rank-sec,
      .city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,
      .city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) > .wrap > .section-head::before{margin-bottom:0}

  /* 章番号と見出しは同じ枠に重ねて置き、見出し側の天余白で番号ぶんを空ける。
     レールの幅で組むので、全幅見出しより一段小さい号数にする */
  :is(.city-facts-sec,.city-contact-sec,.city-rank-sec,
      .city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,
      .city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) > .wrap > .section-head > .section-title{
    padding-top:30px;
    font-size:clamp(21px,1.8vw,26px);
    /* レール幅では見出しが2〜3行になる。語中で折らず文節で折り返す
       （「位置づ／け」を出さない） */
    word-break:auto-phrase;
  }
  /* リードは本文欄の先頭。レールの見出しと天をそろえる */
  :is(.city-facts-sec,.city-contact-sec,.city-rank-sec,
      .city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,
      .city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) > .wrap > .section-head > .section-lead{
    margin-top:0;
    max-width:46em;
  }

  /* 見出し直下に本文欄の実体が来る節は、header の下余白が無くなるぶんを個別に持つ */
  .city-childcare-sec > .wrap > .childcare-facts,
  .city-after-school-sec > .wrap > .after-school-facts,
  .city-lunch-sec > .wrap > .lunch-facts{margin-top:28px}
  .city-contact-sec > .wrap > .city-infant-medical__note{margin-top:20px;max-width:56em}
  .city-contact-sec > .wrap > .section-lead{max-width:none}
  .city-glossary-sec > .wrap > .glossary{margin-top:0}

  /* 助成の内容: 並置2枚も統合1枚も本文欄の幅いっぱいに伸ばす。420px固定のままだと
     本文欄の右が余り、モバイル部品を拡大画面へ流用したように見える */
  .city-facts-sec > .wrap > .fact-cards{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* くらべる・しぼりこむ（R2-7）。R1では主導線を柱の側へ落として柱の2段目に使ったが、
     結果として本文欄に残るのが「2行のリード＋短いリンク1件」だけになり、
     848px の欄が痩せて見えた（クライアント指摘）。他の全節と同じ規約へ戻し、
     柱は見出しだけ・本文欄がリード→主導線→通勤圏欄を受け持つ形にする
     （＝この節のためだけの例外規則を持たない）。

     通勤圏の欄は対象圏域が1件だけなので、細罫1本＋短いリンクでは罫の長さと
     中身の量が釣り合わない。位置づけ（.city-rank）と同じ白地＋強罫の様式欄で受け、
     リードとの間に空いていた68px（margin40+padding28）を欄の内側へ振り替える。
     幅はリードと同じ行長（46em）で止め、本文欄の右の軸をそろえる。新規の作文はしない */
  .city-entry-sec > .wrap > .select-compare-links{
    margin-top:32px;padding:18px 20px 20px;max-width:46em;
    background:var(--panel);
    border:1px solid var(--keisen-strong);
  }
  .city-entry-sec > .wrap > .select-compare-links > .select-compare-links__head{margin-bottom:14px}

  /* 奥付: 主導線をレール側へ、前後の自治体を本文欄へ置いて章の軸をそのまま使う */
  .city-nav-sec > .wrap > .city-nav__primary{grid-column:1}
  .city-nav-sec > .wrap > .city-adjacent{
    grid-column:2;
    margin-top:0;padding-top:0;border-top:0;
  }
}

@media (min-width:1280px){
  :is(.city-facts-sec,.city-contact-sec,.city-rank-sec,
      .city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,
      .city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) > .wrap{--rail:300px;--railgap:52px}
  .city-nav-sec > .wrap:has(> .city-adjacent){--rail:300px;--railgap:52px}
}

/* ================================================================
   全国統計ページ /stats/iryohi/（specs/SPEC-stats-iryohi.md）
   引用層のページ。CTA・PR枠を置かず、図表と表だけで構成する。
   既存セレクタは変更せず、追加はすべて .stats- 接頭辞に閉じる。
   ================================================================ */

.stats-hero{padding-block:64px 0}
.stats-sec{padding-block:64px}
/* 本文と図表は読める行長で止める（表3だけ .wrap 全幅を使う） */
.stats-wrap{max-width:920px}

.stats-hero__title{
  margin:0;
  font-family:var(--font-mincho);
  font-size:clamp(28px,3vw,40px);
  font-weight:600;
  line-height:1.45;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
  word-break:auto-phrase;
}
.stats-hero__lead{margin-top:24px;max-width:42em}
.stats-hero__note{
  margin:16px 0 0;
  max-width:42em;
  font-size:13.5px;line-height:1.9;letter-spacing:.01em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}
/* リード直下のスタンプは節の下端を兼ねるので、通常の 22px より離す */
.stats-hero .stamp{margin-top:36px;max-width:620px}

.stats-subhead{
  margin:48px 0 0;
  font-family:var(--font-mincho);
  font-size:18px;font-weight:600;line-height:1.6;letter-spacing:.06em;
}
.stats-subhead + .glossary{margin-top:16px}
/* 用語ガイドの但し書き。GLOSSARY の本文は scripts/vocabulary.py が正本なので触らず、
   このページ固有の注記（学年での言い方は在学条件ではない）だけを下へ添える */
.stats-glossary-note{
  margin:14px 0 0;
  max-width:44em;
  font-size:12.5px;line-height:1.85;letter-spacing:.01em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}

/* ------------------------------------------------------------
   要点の数値（4枚）。装置は増やさず .fact-card と同じ版面語彙
   （白地＋強罫の枠、深緑の適用範囲帯）を使う
   ------------------------------------------------------------ */
.stats-kpi{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:32px;
}
.stats-kpi__item{
  background:var(--panel);
  border:1px solid var(--keisen-strong);
  display:flex;flex-direction:column;
}
.stats-kpi__scope{
  margin:0;
  padding:8px 16px;
  background:var(--midori);color:var(--panel);
  font-size:12.5px;font-weight:500;line-height:1.6;letter-spacing:.1em;
}
.stats-kpi__body{padding:16px 16px 18px}
.stats-kpi__label{
  margin:0;
  font-size:12.5px;line-height:1.7;letter-spacing:.04em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}
/* 数字は主役級。単位は小さく添える（DESIGN.md） */
.stats-kpi__value{
  margin:6px 0 0;
  font-size:34px;font-weight:500;line-height:1.3;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.stats-kpi__unit{
  margin-left:6px;
  font-size:13px;font-weight:400;letter-spacing:.04em;
  color:var(--sumi-soft);
}
.stats-kpi__sub{
  margin:4px 0 0;
  font-size:12.5px;line-height:1.7;letter-spacing:.02em;
  color:var(--sumi-soft);
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------
   図（インラインSVG・静的）。値の一次表現は直後の表に置く
   ------------------------------------------------------------ */
.stats-figure{margin:32px 0 0}
.stats-figure__cap{margin-bottom:0}
.stats-chart{
  display:block;
  width:100%;
  /* 図中の文字はviewBox単位。拡大率が1前後に収まる幅で頭打ちにして、
     390px幅でも文字が潰れないようにする（本文の行長には合わせない） */
  max-width:480px;
  height:auto;
  margin-top:12px;
  font-family:var(--font-sans);
  font-variant-numeric:tabular-nums;
}
.stats-chart--tall{max-width:460px}
.stats-figure__note{
  margin:12px 0 0;
  max-width:44em;
  font-size:12px;line-height:1.8;letter-spacing:.02em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}

/* 図の直後に置く同じ数値の表 */
.stats-numtable{margin-top:28px}
.stats-col-stub{width:32%}
.stats-col-pref{width:16%}
.stats-col-num{width:17%}
.stats-preftable .stats-col-num{width:16.8%}
.stats-numtable tbody td,
.stats-numtable tfoot td{
  padding:12px 10px;
  font-size:14.5px;line-height:1.55;
  text-align:right;
}
.stats-numtable tbody th.stub,
.stats-numtable tfoot th.stub{padding:12px 14px;font-size:14.5px}
.stats-numtable tbody th.stub .cell{align-items:flex-start;gap:2px}
.stats-numtable tbody th.stub .val__note{text-align:left}
/* 項目のまとまり（所得制限／自己負担）を示す帯。表ヘッダの淡地版 */
.stats-grouprow th{
  padding:8px 14px;
  background:var(--midori-wash);
  color:var(--sumi);
  font-size:12.5px;font-weight:500;line-height:1.6;letter-spacing:.1em;
  text-align:left;
  border-top:1px solid var(--keisen-strong);
}
.stats-numtable tbody + tbody .stats-grouprow th{border-top:1px solid var(--keisen-strong)}
.stats-numtable tfoot th,
.stats-numtable tfoot td{
  border-top:1px solid var(--keisen-strong);
  font-weight:500;
}
.stats-numtable tfoot td{border-left:1px solid var(--keisen)}

/* 都道府県名は各都道府県ページへのリンク（内部リンクハブ） */
.stats-preflink{
  display:inline-block;
  color:var(--sumi);
  text-decoration:none;
  border-bottom:1px solid var(--keisen-strong);
  transition:color var(--ease),border-color var(--ease);
}
.stats-preflink:hover,
.stats-preflink:focus-visible{color:var(--midori);border-bottom-color:var(--midori)}

.stats-source{
  margin:16px 0 0;
  font-size:12px;line-height:1.8;letter-spacing:.02em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}

/* 読み方の注意（.pref-points と同じ番号つきの版面） */
.stats-notes{margin:32px 0 0;padding:0;list-style:none;max-width:44em}
.stats-notes li{display:flex;align-items:flex-start;gap:16px}
.stats-notes li + li{margin-top:20px}
.stats-notes__no{
  flex:none;
  padding-top:.35em;
  font-family:var(--font-mincho);
  font-size:13px;font-weight:600;line-height:1;letter-spacing:.1em;
  color:var(--kaki-deep);
  font-variant-numeric:tabular-nums;
}
.stats-notes p{
  margin:0;
  font-size:15px;line-height:1.95;letter-spacing:.02em;
  word-break:auto-phrase;
}
.stats-notes__link{margin:32px 0 0}

@media (max-width:1024px){
  .stats-hero{padding-block:56px 0}
  .stats-sec{padding-block:56px}
}

@media (max-width:700px){
  .stats-hero{padding-block:48px 0}
  .stats-sec{padding-block:48px}
  .stats-hero__lead{margin-top:16px}
  .stats-subhead{margin-top:36px;font-size:17px}

  .stats-kpi{grid-template-columns:1fr;gap:16px}
  .stats-kpi__value{font-size:30px}

  .stats-chart,.stats-chart--tall{max-width:none}
  .stats-notes p{font-size:14.5px}

  /* 数表はカード化せず表のまま残す（値が数字だけなので、
     6列でも 390px 幅に収まる。47行をカードにすると走査できなくなる） */
  .stats-numtable{
    display:table;
    background:var(--panel);
    border:1px solid var(--keisen-strong);
    margin-top:24px;
  }
  .stats-numtable colgroup{display:table-column-group}
  /* .wtable のカード化は caption も block へ倒す。table へ戻す側では
     table-caption に戻さないと、caption が匿名セル扱いで1列に潰れる */
  .stats-numtable .wtable__cap{display:table-caption}
  .stats-numtable thead{display:table-header-group}
  .stats-numtable tbody{display:table-row-group}
  .stats-numtable tfoot{display:table-footer-group}
  .stats-numtable tbody tr,
  .stats-numtable tfoot tr{display:table-row;background:transparent;border:0;margin-top:0}
  .stats-numtable thead th{padding:8px 4px;font-size:11px;letter-spacing:.02em;text-indent:0}
  .stats-numtable .tier1 th.stub{padding:8px 6px;font-size:11px;letter-spacing:.02em}
  .stats-numtable tbody th.stub,
  .stats-numtable tfoot th.stub{
    display:table-cell;
    padding:9px 6px;
    background:var(--panel);color:var(--sumi);
    font-size:12px;line-height:1.5;
    text-align:left;
    border:0;border-top:1px solid var(--keisen);
  }
  .stats-numtable tbody td,
  .stats-numtable tfoot td{
    display:table-cell;
    padding:9px 4px;
    font-size:12px;line-height:1.5;
    text-align:right;
    border:0;border-top:1px solid var(--keisen);border-left:1px solid var(--keisen);
  }
  .stats-numtable tbody td::before,
  .stats-numtable tfoot td::before{content:none}
  .stats-numtable tbody th.stub .val__note{font-size:10px}
  .stats-numtable .stats-grouprow th{
    display:table-cell;
    padding:7px 6px;
    background:var(--midori-wash);color:var(--sumi);
    font-size:11.5px;letter-spacing:.04em;
  }
  .stats-numtable tfoot th,
  .stats-numtable tfoot td{border-top:1px solid var(--keisen-strong)}
  .stats-col-stub{width:30%}
  .stats-col-pref{width:19%}
  .stats-col-num{width:17.5%}
  .stats-preftable .stats-col-num{width:16.2%}
}

/* ================================================================
   収益層: 診断ページ /select/（specs/SPEC-revenue-layer.md A章）
   ================================================================ */

.select-glossary{margin-top:28px}
.select-glossary__note{
  margin:14px 0 0;
  max-width:52em;
  font-size:12.5px;line-height:1.85;letter-spacing:.01em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}

.select-form-sec{padding-block:64px}
.select-form{
  margin:40px 0 0;
  display:grid;
  gap:32px;
}
.select-field{margin:0;padding:0;border:0}
.select-field__legend{
  display:block;width:100%;
  padding:0 0 14px;
  font-family:var(--font-mincho);
  font-size:14px;font-weight:600;letter-spacing:.08em;
  border-bottom:1px solid var(--keisen-strong);
}
.select-radio-group,.select-checkbox-group{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:16px;
}
.select-radio,.select-checkbox{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 16px;
  background:var(--panel);
  border:1px solid var(--keisen);
  border-radius:4px;
  font-size:14px;letter-spacing:.02em;
  cursor:pointer;
  transition:border-color var(--ease),background-color var(--ease);
}
.select-radio:hover,.select-checkbox:hover{border-color:var(--midori)}
.select-radio:has(input:checked),
.select-checkbox:has(input:checked){
  border-color:var(--midori);
  background:var(--midori-wash);
}
.select-radio input,.select-checkbox input{accent-color:var(--midori)}
.select-radio input:focus-visible,
.select-checkbox input:focus-visible{outline:2px solid var(--midori);outline-offset:3px}
.select-dropdown{
  display:block;
  margin-top:16px;
  width:100%;max-width:360px;
  padding:12px 14px;
  background:var(--panel);
  border:1px solid var(--keisen-strong);
  border-radius:4px;
  font-family:var(--font-sans);
  font-size:14.5px;color:var(--sumi);
  transition:border-color var(--ease);
}
.select-dropdown:hover{border-color:var(--midori)}
.select-dropdown:focus-visible{outline:2px solid var(--midori);outline-offset:2px}

.select-results-sec{padding-block:64px}
.select-error{
  margin:0 0 24px;padding:16px 20px;
  background:var(--panel);
  border:1px solid var(--keisen-strong);
  border-left:3px solid var(--kaki-deep);
  font-size:14px;line-height:1.85;
  word-break:auto-phrase;
}
.select-error[hidden]{display:none}
.select-noscript{
  margin:0 0 24px;padding:16px 20px;
  background:var(--midori-wash);
  font-size:14px;line-height:1.85;
  word-break:auto-phrase;
}
.select-result-count{
  margin:0;
  font-size:16px;line-height:1.9;letter-spacing:.02em;
}
.select-result-count .num{font-variant-numeric:tabular-nums;font-weight:700;color:var(--midori)}
.select-zero-suggestions{
  margin:20px 0 0;padding:0;list-style:none;
}
.select-zero-suggestions[hidden]{display:none}
.select-zero-suggestions li{
  position:relative;padding-left:18px;
  font-size:13.5px;line-height:1.85;letter-spacing:.01em;
}
.select-zero-suggestions li + li{margin-top:8px}
.select-zero-suggestions li::before{
  content:"";
  position:absolute;left:0;top:.8em;
  width:6px;height:1px;
  background:var(--kaki-deep);
}
.select-zero-suggestions .num{font-variant-numeric:tabular-nums;font-weight:700}
.select-result-list{
  margin:24px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px 16px;
}
.select-result-list li{
  padding:12px 14px;
  background:var(--panel);
  border:1px solid var(--keisen);
  border-radius:4px;
}
.select-result-list a{
  color:var(--sumi);text-decoration:none;
  font-size:14.5px;letter-spacing:.02em;
  transition:color var(--ease);
}
.select-result-list a:hover,.select-result-list a:focus-visible{color:var(--midori)}
.select-result-list__pref{
  display:block;
  font-size:11px;color:var(--sumi-soft);letter-spacing:.04em;
  margin-bottom:2px;
}
.select-result-list__note{
  display:block;margin-top:6px;
  font-size:12px;line-height:1.7;color:var(--sumi-soft);
  word-break:auto-phrase;
}
.select-supplement{margin-top:44px;padding-top:28px;border-top:1px solid var(--keisen)}
.select-supplement[hidden]{display:none}
.select-supplement__lead{
  margin:0;font-size:13.5px;color:var(--sumi-soft);line-height:1.85;
  word-break:auto-phrase;
}

.select-static-sec{padding-block:64px}
.select-static-questions{margin:40px 0 0;display:grid;gap:40px}
.select-static-q{
  padding:28px 28px 30px;
  background:var(--panel);
  border:1px solid var(--keisen);
  border-top:2px solid var(--keisen-strong);
}
.select-static-q__title{
  margin:0;
  font-family:var(--font-mincho);
  font-size:17px;font-weight:600;line-height:1.6;letter-spacing:.02em;
  word-break:auto-phrase;
}
.select-static-q__body,.select-static-q__lead-text{
  margin:16px 0 0;max-width:50em;
  font-size:14.5px;line-height:1.95;letter-spacing:.01em;
  word-break:auto-phrase;
}
.select-static-q__body .num,.select-static-q__lead-text .num{font-variant-numeric:tabular-nums}
.select-static-table{
  margin-top:20px;
  width:100%;
  border-collapse:collapse;
  background:var(--panel);
  border:1px solid var(--keisen-strong);
}
.select-static-table th,.select-static-table td{
  padding:10px 14px;
  font-size:13.5px;line-height:1.7;
  border-top:1px solid var(--keisen);
  text-align:left;
}
.select-static-table thead th{
  background:var(--midori);color:var(--panel);
  font-weight:500;letter-spacing:.06em;
  border-top:0;
}
.select-static-table td .num{font-variant-numeric:tabular-nums}
.select-static-table tbody tr:nth-child(odd){background:var(--midori-wash)}

.select-compare-links{margin-top:56px;padding-top:32px;border-top:1px solid var(--keisen)}
.select-compare-links__head{
  margin:0 0 16px;
  font-family:var(--font-mincho);
  font-size:13px;font-weight:600;letter-spacing:.14em;
  color:var(--sumi-soft);
}
.select-compare-links__list{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:12px 28px}

/* 単独で置く基準日スタンプ（表のfigcaptionに従属しないページ用） */
.cite-stamp-sec{padding-block:64px}
.cite-stamp-sec .stamp{margin-top:0;max-width:820px}

/* ================================================================
   ガイド記事 /guide/{slug}/
   ================================================================ */

.guide-hero{padding:64px 0 56px;background:var(--midori-wash)}
.guide-hero__eyebrow{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--midori)}
.guide-hero__title{margin:0;font-family:var(--font-mincho);font-size:clamp(28px,3vw,42px);font-weight:600;letter-spacing:.02em}
.guide-hero__lead{margin:22px 0 0;max-width:44em;font-size:15px;line-height:2;letter-spacing:.02em;color:var(--sumi-soft);word-break:auto-phrase}
.guide-hero__date{margin:20px 0 0;font-size:12px;letter-spacing:.04em;color:var(--sumi-soft)}
/* ガイドを動画にしたページへの入口（本文より上。絵と音声で見たい人が先に選べる） */
.guide-video{display:flex;align-items:center;gap:20px;max-width:560px;margin:26px 0 4px;padding:14px;background:var(--panel);border:1px solid var(--keisen-strong);border-radius:4px;color:var(--sumi);text-decoration:none;transition:border-color var(--ease),background var(--ease)}
.guide-video:hover,.guide-video:focus-visible{border-color:var(--midori);background:var(--midori-wash)}
.guide-video__thumb{position:relative;flex:0 0 200px;aspect-ratio:16/9;background:var(--midori-wash);border-radius:4px;overflow:hidden}
.guide-video__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.guide-video__play{position:absolute;left:50%;top:50%;width:52px;height:52px;transform:translate(-50%,-50%)}
.guide-video__play circle{fill:var(--midori)}
.guide-video__play path{fill:var(--panel)}
.guide-video__text{display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.7;color:var(--sumi-soft)}
.guide-video__text strong{font-size:17px;color:var(--sumi);letter-spacing:.02em}
/* エレメンタリーの「さわって わかる」への入口（templates/guide.html。manabi/sawaru.json の guides） */
.guide-sawaru{list-style:none;display:grid;gap:10px;max-width:560px;margin:18px 0 0;padding:0}
.guide-sawaru__link{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:var(--panel);border:1px solid var(--keisen-strong);border-radius:4px;color:var(--sumi);text-decoration:none;font-size:13px;line-height:1.7;transition:border-color var(--ease),background var(--ease)}
.guide-sawaru__link:hover,.guide-sawaru__link:focus-visible{border-color:var(--midori);background:var(--midori-wash)}
.guide-sawaru__link strong{font-size:16px;color:var(--sumi)}
.guide-sawaru__link span:last-child{color:var(--sumi-soft)}
.guide-sawaru__tag{align-self:flex-start;padding:1px 8px;border:1px solid var(--midori);border-radius:4px;color:var(--midori);font-size:12px;font-weight:700}
@media (max-width:520px){.guide-video{gap:14px}.guide-video__thumb{flex-basis:132px}.guide-video__play{width:40px;height:40px}}
.guide-ad-label{margin:18px 0 0;padding-top:12px;border-top:1px solid var(--keisen);max-width:44em;font-size:12.5px;line-height:1.85;letter-spacing:.04em;color:var(--sumi-soft);word-break:auto-phrase}
.guide-section{padding-block:56px;border-bottom:1px solid var(--keisen)}
.guide-section__inner{max-width:820px}
.guide-section h2{margin:0 0 24px;font-family:var(--font-mincho);font-size:clamp(23px,2.3vw,30px);font-weight:600;letter-spacing:.02em}
.guide-section h3{margin:32px 0 12px;font-size:17px;font-weight:600;letter-spacing:.02em}
.guide-section p,.guide-section li{font-size:15px;line-height:2;letter-spacing:.02em;word-break:auto-phrase}
.guide-section p{margin:0}
.guide-section p + p{margin-top:16px}
.guide-section ol,.guide-section ul{margin:16px 0 0;padding-left:1.4em}
.guide-section ol + p,.guide-section ul + p{margin-top:16px}
.guide-section li + li{margin-top:8px}
.guide-subsection + .guide-subsection{margin-top:32px}
/* 記事中の表もデータ面と同じ「白書の表組み」（.wtable）を共有する。ヘッダ地の深緑・
   罫線の階層・tabular-nums は .wtable の実装をそのまま使い、ここに置くのは散文セルの
   ための版面差（列幅の自動配分・左揃え・行の余白）だけにする */
.guide-table-wrap{margin-top:24px;overflow-x:auto}
.wtable--guide{table-layout:auto}
.wtable--guide thead th{padding:11px 16px;font-size:12.5px;letter-spacing:.08em;text-align:left;text-indent:0}
.wtable--guide thead th.stub{padding:11px 16px;font-size:12.5px;letter-spacing:.08em}
.wtable--guide tbody th.stub{padding:13px 16px;font-size:14px;font-weight:500;line-height:1.75;vertical-align:top;word-break:auto-phrase}
.wtable--guide tbody td{padding:13px 16px;font-size:14px;line-height:1.75;text-align:left;vertical-align:top;word-break:auto-phrase}
/* 数値だけの列は、データ面の表と同じ中央揃えで柱として立てる（tabular-nums は .wtable 側） */
.wtable--guide tbody td.num{text-align:center;white-space:nowrap}
.guide-ad-slot{display:flex;align-items:baseline;gap:8px;max-width:44em;margin:20px 0 0;padding:11px 13px;border:1px dashed var(--keisen-strong);border-radius:4px;background:var(--paper)}
.guide-ad-slot__label{flex:none;padding:1px 5px;border:1px dashed var(--keisen-strong);border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--sumi-soft)}
.guide-ad-slot__text{font-size:12px;line-height:1.8;color:var(--sumi-soft);word-break:auto-phrase}
.guide-next-links{display:grid;gap:10px;list-style:none;padding-left:0!important}
.guide-next-links a{color:var(--midori);text-decoration:underline;text-decoration-color:var(--keisen-strong);text-underline-offset:3px}

/* コラム一覧 /guide/ */
.guide-index-hero{padding:64px 0 56px;background:var(--midori-wash)}
.guide-index-hero__eyebrow{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--midori)}
.guide-index-hero h1{margin:0;font-family:var(--font-mincho);font-size:clamp(28px,3vw,42px);font-weight:600;letter-spacing:.02em}
.guide-index-hero p:last-child{max-width:44em;margin:22px 0 0;font-size:15px;line-height:2;letter-spacing:.02em;color:var(--sumi-soft);word-break:auto-phrase}
.guide-index-list{padding-block:56px}
.guide-index-list__inner{max-width:820px}
.guide-index-list h2{margin:0 0 24px;font-family:var(--font-mincho);font-size:clamp(23px,2.3vw,30px);font-weight:600;letter-spacing:.02em}
.guide-index-cards{display:grid;gap:16px}
.guide-index-card{padding:24px;border:1px solid var(--keisen);background:var(--panel)}
.guide-index-card__date{margin:0;font-size:12px;letter-spacing:.04em;color:var(--sumi-soft)}
.guide-index-card h3{margin:12px 0 0;font-family:var(--font-mincho);font-size:20px;font-weight:600;letter-spacing:.02em}
.guide-index-card h3 a{color:inherit;text-decoration:none}
.guide-index-card h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.guide-index-card p:not(.guide-index-card__date){margin:12px 0 0;font-size:14px;line-height:1.9;letter-spacing:.02em;color:var(--sumi-soft);word-break:auto-phrase}
.guide-index-card__link{display:inline-block;margin-top:16px;color:var(--midori);font-size:14px;text-decoration:underline;text-decoration-color:var(--keisen-strong);text-underline-offset:3px}

/* ================================================================
   収益層: 通勤圏比較 /compare/{slug}/（specs/SPEC-revenue-layer.md B章）
   ================================================================ */

.compare-glossary-sec{padding-block:0}

.compare-table-sec{padding-block:64px}
.compare-table .col-stub{width:22%}
.compare-table .col-cmp{width:26%}
.compare-table tbody td{padding:14px 16px;font-size:14.5px;line-height:1.6;vertical-align:top}

/* 通院・入院で値が違う自治体のセル内表示（市ページの統合/並置の分岐を、
   3列の対照表というこのページの版面に合わせて踏襲したもの）。
   新しい視覚装置ではなく、既存の .cell/.val をラベル付きで並べる構成 */
.cmp-split{display:flex;flex-direction:column;gap:10px;align-items:center}
.cmp-side{display:flex;flex-direction:column;align-items:center;gap:3px}
.cmp-side__label{
  font-size:10.5px;font-weight:700;letter-spacing:.1em;
  color:var(--sumi-soft);
}

.compare-reading-sec{padding-block:64px}
.compare-reading{
  margin:24px 0 0;max-width:44em;
  font-size:15px;line-height:2;letter-spacing:.02em;
  word-break:auto-phrase;
}

.compare-cities-sec{padding-block:64px}
.compare-cities-list{
  margin:24px 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:12px 28px;
}

/* 比較ページ相互の横リンク（specs/SPEC-revenue-layer.md H章）。.compare-cities-list を
   そのまま流用するのでリスト自体のCSSは無く、セクションの縦リズムだけ持たせる */
.compare-siblings-sec{padding-block:64px}

.compare-scope-sec{padding-block:64px}
.compare-scope{
  margin:24px 0 0;max-width:44em;
  font-size:13.5px;line-height:1.95;letter-spacing:.01em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}

/* ================================================================
   収益層: ステップ2「住まい探し」ブロック（ASP導線・共通部品）
   specs/SPEC-revenue-layer.md C章。データ本文より控えた視覚重量にする
   （--midori-wash の淡地・角丸4px・影なし。柿色はCTAにのみ使う予定だが、
   現時点ではリンクが少なくCTAボタン自体が無い）。
   ================================================================ */

.move-guide{padding-block:64px;background:var(--midori-wash)}
.move-guide__head{margin-bottom:32px}
/* 「ステップ2」の目印。索引タブや基準日スタンプと同じ「様式欄」の文法で、
   数字だけを枠に入れず、白書の節番号のように見出しの上へ小さく置く。 */
.move-guide__step{
  margin:0 0 10px;
  font-size:12px;font-weight:600;letter-spacing:.14em;
  color:var(--midori);
}
.move-guide__step .num{
  margin-left:.35em;
  font-size:14px;
  font-variant-numeric:tabular-nums;
}
.move-guide__title{
  margin:0;
  font-family:var(--font-mincho);
  font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:.02em;
}
.move-guide__lead{
  margin:16px 0 0;max-width:44em;
  font-size:13.5px;line-height:1.95;letter-spacing:.01em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}
/* PR表記は本文の続きに見せず、様式欄の注記として細罫で切り離す
   （開閉・小文字・薄色にはしない。景品表示法のステマ規制対応・SPEC C章）。 */
.move-guide__ad-label{
  margin:18px 0 0;padding-top:12px;
  border-top:1px solid var(--keisen);
  max-width:44em;
  font-size:12.5px;line-height:1.85;letter-spacing:.04em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}
.move-guide__routes{margin-bottom:48px}
.move-guide__body{display:grid;gap:40px}
.move-guide__sub{
  margin:0 0 18px;
  font-size:14px;font-weight:600;letter-spacing:.06em;
  color:var(--midori);
}
.move-guide__checklist{margin:0;padding:0;list-style:none;counter-reset:promo-step}
.move-guide__checklist li{position:relative;padding:0 0 0 40px;counter-increment:promo-step}
.move-guide__checklist li + li{margin-top:18px}
.move-guide__checklist li::before{
  content:counter(promo-step);
  position:absolute;left:0;top:1px;
  width:26px;height:26px;
  display:grid;place-items:center;
  background:var(--panel);
  border:1px solid var(--keisen-strong);
  border-radius:4px;
  font-size:12px;font-weight:700;color:var(--midori);
  font-variant-numeric:tabular-nums;
}
.move-guide__checklist-title{display:block;font-size:14.5px;font-weight:500;letter-spacing:.02em}
.move-guide__checklist-text{
  display:block;margin-top:4px;
  font-size:13px;line-height:1.85;color:var(--sumi-soft);
  word-break:auto-phrase;
}
/* 探し方の3分岐（specs/SPEC-revenue-layer.md C章「ステップ2の構成」）。
   柿色はCTAボタン1個にのみ使う規約のため、リンクは .link-quiet と同じ考え方の
   控えめな下線リンクにし、ボタン化はしない（このブロックには柿色を一切使わない）。
   カードは白書の様式欄と同じ「白地＋樺色の細罫」で、データ表より軽い重量にする。 */
.move-guide__linklist{margin:0;display:grid;gap:16px}
.move-guide__linkitem{
  display:flex;flex-direction:column;
  padding:20px;
  background:var(--panel);
  border:1px solid var(--keisen);
  border-radius:4px;
}
.move-guide__linkitem-title{
  margin:0 0 8px;
  font-size:14.5px;font-weight:600;letter-spacing:.02em;
  color:var(--sumi);
}
.move-guide__linkitem-text{
  margin:0;max-width:40em;
  font-size:13px;line-height:1.9;letter-spacing:.01em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}
/* 先に確かめておくこと。読者が何も押さずに帰っても持ち帰れる部分であり、
   広告枠より上に置く（AGENTS.md「何も買わなくても得して帰る」）。 */
.move-guide__tips{
  margin:12px 0 0;padding:0;list-style:none;
  border-top:1px solid var(--keisen);
}
.move-guide__tips li{
  position:relative;
  padding:10px 0 0 18px;
  font-size:12.5px;line-height:1.85;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}
.move-guide__tips li::before{
  content:"";
  position:absolute;left:2px;top:19px;
  width:6px;height:1px;
  background:var(--keisen-strong);
}
/* 広告が入る枠。リンクがある枠は実線、まだ入っていない枠は破線で、
   同じ位置・同じ大きさの「様式欄」として出す。空でも枠が見えることが要件
   （どこに広告が入る設計なのかを、読者にもASPの審査担当にも一目で示す）。
   margin-top:auto でカードの高さが違っても枠の上端が横並びで揃う。 */
.move-guide__slot{
  display:flex;align-items:baseline;gap:8px;
  margin:16px 0 0;padding:11px 13px;
  border:1px solid var(--keisen-strong);
  border-radius:4px;
  font-size:13px;line-height:1.85;
}
.move-guide__linkitem .move-guide__slot{margin-top:auto}
.move-guide__slot--empty{
  border-style:dashed;
  background:var(--paper);
}
.move-guide__slot-text{
  font-size:12px;line-height:1.8;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}
/* 広告ではない通常のリンクを置いた枠。PRラベルが無い分だけ枠の意味が
   変わるため、直後に必ず .move-guide__linknote を添える。 */
.move-guide__cta--plain{background:var(--paper)}
.move-guide__linknote{
  margin:8px 0 0;
  font-size:11.5px;line-height:1.75;letter-spacing:.02em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}
.move-guide__cta .move-guide__pr{margin:0;flex:none}
.move-guide__pr{
  display:inline-block;
  margin:0 6px;
  padding:1px 5px;
  border:1px solid var(--keisen-strong);
  border-radius:4px;
  font-size:10px;font-weight:700;letter-spacing:.06em;
  color:var(--sumi-soft);
  vertical-align:1px;
}
/* 枠のラベルは3種類で、枠の中身が何かを名指しする:
   PR=広告 / 広告枠=まだ広告が入っていない / 参考=広告ではない通常のリンク。 */
.move-guide__pr--empty{margin:0;flex:none;border-style:dashed}
.move-guide__pr--plain{margin:0;flex:none}
.move-guide__link,
.move-guide__reflink{
  color:var(--midori);
  font-weight:500;
  text-decoration:underline;
  text-decoration-color:var(--keisen-strong);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color var(--ease),text-decoration-color var(--ease),text-decoration-thickness var(--ease);
}
.move-guide__link:hover,
.move-guide__link:focus-visible,
.move-guide__reflink:hover,
.move-guide__reflink:focus-visible{
  text-decoration-color:var(--midori);
  text-decoration-thickness:2px;
}
.move-guide__link:focus-visible,
.move-guide__reflink:focus-visible{outline:2px solid var(--midori);outline-offset:2px}
.move-guide__pixel{vertical-align:middle}

@media (min-width:720px){
  .move-guide__linklist--routes{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:860px){
  .move-guide__body{grid-template-columns:1.1fr 1fr;gap:56px}
}

@media (max-width:1024px){
  .select-form-sec,.select-results-sec,.select-static-sec,.cite-stamp-sec,
  .compare-table-sec,.compare-reading-sec,.compare-cities-sec,.compare-scope-sec,
  .move-guide,.guide-section{padding-block:56px}
}

@media (max-width:700px){
  .select-form-sec,.select-results-sec,.select-static-sec,.cite-stamp-sec,
  .compare-table-sec,.compare-reading-sec,.compare-cities-sec,.compare-scope-sec,
  .move-guide,.guide-section{padding-block:48px}
  .guide-hero{padding-block:48px}
  .select-result-list{grid-template-columns:1fr}
  .select-radio-group,.select-checkbox-group{flex-direction:column;align-items:stretch}

  /* .wtable の共通モバイル規約（カード化）に合わせ、対照表も右揃えの値表示にする
     （pref-table のモバイル規約と同じ考え方） */
  .compare-table tbody td{padding:12px 16px}
  .compare-table .cell{align-items:flex-end;max-width:60%}
  .compare-table .val,.compare-table .val__note{text-align:right}
  .compare-table tbody td::before{flex:1 1 auto;min-width:0}
  .cmp-split{align-items:flex-end}
  .cmp-side{align-items:flex-end}
  /* 通院・入院の2段セルでは、td 直下の値側は .cmp-split であって .cell ではない。
     60% の上限を内側の .cell が二重に受けると、.cmp-side の実幅（値の max-content）の
     さらに 60% まで詰まり、「窓口で支払いあり」が語の途中で3行に折れる。上限は
     値側の外枠である .cmp-split 一段だけに掛け、中の .cell は外枠の幅で折り返す */
  .compare-table .cmp-split{max-width:60%}
  .compare-table .cmp-split .cell{max-width:none}
}

/* ============================================================
   暮らしの環境データ（e-Stat 統計ダッシュボード）
   市ページ: 指標カード＋県内の分布ゲージ / 県ページ: 要点の数値＋分布の図

   装置は増やさず既存の版面語彙（白地＋強罫の枠・深緑の帯・柿色の丸マーカー・
   様式欄）を使う。新しいのは分布ゲージだけで、これは「県内のどこに位置するか」を
   文だけでは示せないために足した1つの図。値と順位は必ず文でも読める。
   ============================================================ */

.city-env-sec{padding-block:64px}
.pref-env-sec{padding-block:64px}

/* 指標カード（市ページ）。fact-card と同じ枠・同じ帯で、標目だけ横並びにして
   基準となる年を値の近くへ置く。指標ごとに年が違う出典なので年は省略できない */
.env-metrics{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  margin-top:32px;
  max-width:864px;
}
.env-metric{
  background:var(--panel);
  border:1px solid var(--keisen-strong);
  padding:0 0 20px;
}
.env-metric__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 16px;
  background:var(--midori);
  color:var(--panel);
}
.env-metric__term{
  margin:0;
  font-size:12.5px;font-weight:500;line-height:1.6;letter-spacing:.1em;
  word-break:auto-phrase;
}
.env-metric__asof{
  margin:0;flex:none;
  font-size:11.5px;font-weight:400;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
/* 数字は主役級。単位は小さく添える（DESIGN.md） */
.env-metric__value{
  margin:16px 16px 0;
  font-size:34px;font-weight:500;line-height:1.3;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.env-metric__unit{
  margin-left:6px;
  font-size:13px;font-weight:400;letter-spacing:.04em;
  color:var(--sumi-soft);
}
.env-metric__context{
  margin:12px 16px 0;
  font-size:13.5px;line-height:1.85;letter-spacing:.02em;
  word-break:auto-phrase;
  font-variant-numeric:tabular-nums;
}
.env-metric__context b.num{font-weight:700}
.env-metric__note{
  margin:10px 16px 0;
  padding-top:10px;
  border-top:1px solid var(--keisen);
  font-size:12px;line-height:1.8;letter-spacing:.02em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}

/* 分布ゲージ。図中の文字は viewBox 単位なので、拡大率が1前後に収まる幅で
   頭打ちにして小さい画面でも文字が潰れないようにする（.stats-chart と同じ考え方） */
.env-gauge{
  display:block;
  width:calc(100% - 32px);
  max-width:420px;
  height:auto;
  margin:8px 16px 0;
  font-family:var(--font-sans);
  font-variant-numeric:tabular-nums;
}
.env-gauge__legend{
  display:flex;flex-wrap:wrap;gap:4px 18px;
  margin:2px 16px 0;
  font-size:11.5px;line-height:1.8;letter-spacing:.02em;
  color:var(--sumi-soft);
}
.env-gauge__note{
  margin:6px 16px 0;
  font-size:11.5px;line-height:1.8;letter-spacing:.02em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
  font-variant-numeric:tabular-nums;
}
/* 凡例の見本は図と同じ形をSVGで描く。角丸トークン（0/4px）の外にある丸は
   CSSの border-radius ではなく図形として置く（既存の .mk-legend と同じ考え方） */
.env-key{display:inline-flex;align-items:center;gap:6px}
.env-key__mark{flex:none;width:12px;height:12px}

/* 要点の数値（県ページ）。全国統計ページのKPIと同じ版面語彙 */
.env-kpi{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  margin-top:32px;
}
.env-kpi__item{
  background:var(--panel);
  border:1px solid var(--keisen-strong);
  display:flex;flex-direction:column;
}
.env-kpi__scope{
  margin:0;
  padding:8px 16px;
  background:var(--midori);color:var(--panel);
  font-size:12.5px;font-weight:500;line-height:1.6;letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}
.env-kpi__body{padding:16px 16px 18px}
.env-kpi__label{
  margin:0;
  font-size:12.5px;line-height:1.7;letter-spacing:.04em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}
.env-kpi__value{
  margin:6px 0 0;
  font-size:34px;font-weight:500;line-height:1.3;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.env-kpi__unit{
  margin-left:6px;
  font-size:13px;font-weight:400;letter-spacing:.04em;
  color:var(--sumi-soft);
}
.env-kpi__sub{
  margin:4px 0 0;
  font-size:12.5px;line-height:1.7;letter-spacing:.02em;
  color:var(--sumi-soft);
  font-variant-numeric:tabular-nums;
}

/* 分布の図（県ページ） */
.env-figure{margin:40px 0 0;max-width:820px}
.env-figure__cap{margin-bottom:0}
.env-figure__asof{
  margin-left:10px;
  font-size:12px;font-weight:400;letter-spacing:.04em;
  color:var(--sumi-soft);
  font-variant-numeric:tabular-nums;
}
.env-chart{
  display:block;
  width:100%;
  max-width:480px;
  height:auto;
  margin-top:16px;
  font-family:var(--font-sans);
  font-variant-numeric:tabular-nums;
}
.env-figure__note{
  margin:14px 0 0;
  max-width:44em;
  font-size:12px;line-height:1.8;letter-spacing:.02em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
  font-variant-numeric:tabular-nums;
}
.env-figure .stamp{margin-top:24px}

/* 出典表示とは別に掲示するAPIの利用クレジット。様式欄のすぐ下に小さく置く */
.stamp-credit{
  margin:12px 0 0;
  max-width:44em;
  font-size:11.5px;line-height:1.8;letter-spacing:.02em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}

@media (min-width:960px){
  .env-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .env-kpi{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:1024px){
  .city-env-sec,.pref-env-sec{padding-block:56px}
}

@media (max-width:700px){
  .city-env-sec,.pref-env-sec{padding-block:48px}
  .env-metric__value,.env-kpi__value{font-size:30px}
  .env-metric__head{flex-wrap:wrap;gap:2px 12px}
}

/* ============================================================
   観測型FAQ /faq/ ・研究検証台帳 /research/ ・論点別コラム /columns/
   （specs/SPEC-evidence-faq.md）

   新しい装置は増やさない。ガイド記事の版面（.guide-hero / 本文820px）と、
   様式欄（出典・基準日のスタンプ）の文法を引き継ぐ。この面で足すのは
   「問の通し番号（台帳の柱）」と「標本・報告・限界を並べる様式欄」の2つだけで、
   どちらも読み飛ばさせないための枠であって装飾ではない。
   ============================================================ */

.ev-sec{padding-block:56px;border-bottom:1px solid var(--keisen)}
.ev-sec__inner{max-width:820px}
.ev-sec__title{margin:0 0 24px;font-family:var(--font-mincho);font-size:clamp(21px,2.1vw,27px);font-weight:600;letter-spacing:.02em;word-break:auto-phrase}
.ev-body{margin:0;font-size:15px;line-height:2;letter-spacing:.02em;word-break:auto-phrase}
.ev-body + .ev-body{margin-top:16px}
.ev-note{
  margin:14px 0 0;max-width:44em;
  font-size:12.5px;line-height:1.85;letter-spacing:.02em;
  color:var(--sumi-soft);word-break:auto-phrase;
}
.ev-note a{color:var(--midori);text-decoration:underline;text-decoration-color:var(--keisen-strong);text-underline-offset:3px}
/* 英題は明朝の和文寸法だと間延びするので、字送りだけ本文側へ戻す */
.guide-hero__title--en{font-size:clamp(24px,2.6vw,34px);letter-spacing:0;line-height:1.5}

/* 収録件数。ヒーローの中で数字を主役級に置く（tabular-nums は .num が持つ） */
.ev-count{
  display:flex;flex-wrap:wrap;gap:0 32px;
  margin:26px 0 0;padding-top:18px;
  border-top:1px solid var(--keisen-strong);
  max-width:44em;
}
.ev-count__item{display:flex;align-items:baseline;gap:10px}
.ev-count dt{font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--sumi-soft)}
.ev-count dd{margin:0;font-size:15px;letter-spacing:.02em}
.ev-count dd .num{font-variant-numeric:tabular-nums;font-size:21px;font-weight:700;margin-right:2px}

/* 問の台帳。カードを並べず、罫線で区切った帳面の行にする */
.ev-ledger{margin:0;padding:0;list-style:none}
.ev-q{display:flex;gap:20px;padding-block:26px;border-top:1px solid var(--keisen)}
.ev-q:first-child{border-top:1px solid var(--keisen-strong);padding-top:24px}
.ev-q:last-child{border-bottom:1px solid var(--keisen-strong)}
/* .about-policy__no / .step__num と同族の様式欄チップ（5度目の再利用） */
.ev-q__no{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:48px;height:32px;
  border:1px solid var(--keisen-strong);
  background:var(--panel);
  font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--midori);
  font-variant-numeric:tabular-nums;
}
.ev-q__body{min-width:0;flex:1}
.ev-q__title{margin:0;font-family:var(--font-mincho);font-size:19px;font-weight:600;line-height:1.7;letter-spacing:.02em;word-break:auto-phrase}
.ev-q__title a{color:inherit;text-decoration:none;border-bottom:1px solid var(--keisen-strong);transition:color var(--ease),border-color var(--ease)}
.ev-q__title a:hover,
.ev-q__title a:focus-visible{color:var(--midori);border-bottom-color:var(--midori)}
.ev-q__answer{margin:12px 0 0;font-size:14.5px;line-height:1.95;letter-spacing:.02em;word-break:auto-phrase}
.ev-q__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin:14px 0 0;font-size:12px;letter-spacing:.04em;color:var(--sumi-soft);
}
.ev-q__meta .num{font-variant-numeric:tabular-nums;font-weight:700;margin-inline:2px}
.ev-q__topic{padding-left:14px;border-left:1px solid var(--keisen)}

/* テーマの見出し（/faq/ 一覧）。並びは _taxonomy.yaml の topic の並び。
   目次は帳面の「索引」として罫線の行で並べ、カードにしない */
.ev-toc{margin:0 0 40px;padding:16px 0 4px;border-top:1px solid var(--keisen-strong);border-bottom:1px solid var(--keisen)}
.ev-toc__label{margin:0 0 8px;font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--sumi-soft)}
.ev-toc__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:0;padding:0;list-style:none}
.ev-toc__list li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-block:9px;border-top:1px solid var(--keisen);font-size:14px;line-height:1.7;letter-spacing:.02em}
.ev-toc__list li:nth-child(-n+2){border-top:0}
.ev-toc__list a{min-width:0;color:var(--midori);text-decoration:underline;text-decoration-color:var(--keisen-strong);text-underline-offset:3px;word-break:auto-phrase}
.ev-toc__list a:hover,
.ev-toc__list a:focus-visible{text-decoration-color:var(--midori)}
.ev-toc__count{flex:none;font-size:12px;color:var(--sumi-soft)}
.ev-toc__count .num{font-variant-numeric:tabular-nums;font-weight:700;margin-right:1px}
.ev-group{scroll-margin-top:16px}
.ev-group + .ev-group{margin-top:48px}
.ev-group__title{margin:0 0 14px;font-family:var(--font-mincho);font-size:clamp(18px,1.7vw,21px);font-weight:600;line-height:1.6;letter-spacing:.02em;color:var(--midori);word-break:auto-phrase}

/* 根拠の区分標。柿色は使わず、深緑の地と淡地で強さだけを分ける
   （表ヘッダ＝確定の地、淡地＝補助）。色数を増やさない */
.ev-tag{
  display:inline-block;padding:2px 9px;border-radius:4px;
  font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1.7;
}
.ev-tag--administrative{background:var(--midori);color:var(--panel)}
.ev-tag--research{background:var(--midori-wash);color:var(--midori);border:1px solid var(--midori)}
.ev-tag--topic{background:var(--midori-wash);color:var(--midori)}
.guide-hero__eyebrow .ev-tag{margin-left:12px;letter-spacing:.06em}

/* 様式欄（回答の要約・書誌・限界）。基準日スタンプと同じ「枠と標目」の文法で、
   読み飛ばされると誤読になる情報だけを入れる */
.ev-panel{
  margin:26px 0 0;max-width:44em;
  border:1px solid var(--keisen-strong);
  background:var(--panel);
}
.ev-panel__field{display:flex;gap:0;padding:0}
.ev-panel__field + .ev-panel__field{border-top:1px solid var(--keisen)}
.ev-panel dt{
  flex:none;width:132px;padding:15px 16px;
  border-right:1px solid var(--keisen);
  background:var(--paper);
  font-size:12px;font-weight:700;letter-spacing:.1em;line-height:1.8;color:var(--midori);
}
.ev-panel dd{
  margin:0;padding:15px 18px;min-width:0;
  font-size:14.5px;line-height:1.95;letter-spacing:.02em;word-break:auto-phrase;
}
.ev-panel dd .num{font-variant-numeric:tabular-nums}
.ev-panel dd a{word-break:break-all}
.ev-panel--answer{margin-top:28px;border-color:var(--midori)}
.ev-panel--answer dt{background:var(--midori);color:var(--panel);border-right-color:var(--midori)}
.ev-panel--answer dd{font-size:15.5px}
.ev-panel--limits{margin-top:0}

/* 一覧のリンク行。カード列にせず、題と一文の説明を組にして罫線で継ぐ */
.ev-linklist{margin:0;padding:0;list-style:none}
.ev-linklist li{padding-block:18px;border-top:1px solid var(--keisen)}
.ev-linklist li:first-child{border-top:1px solid var(--keisen-strong)}
.ev-linklist li:last-child{border-bottom:1px solid var(--keisen-strong)}
.ev-linklist__title{
  display:inline-block;
  color:var(--midori);font-size:15.5px;font-weight:500;line-height:1.75;letter-spacing:.02em;
  text-decoration:underline;text-decoration-color:var(--keisen-strong);text-underline-offset:4px;
  word-break:auto-phrase;transition:text-decoration-color var(--ease),color var(--ease);
}
.ev-linklist__title:hover,
.ev-linklist__title:focus-visible{color:var(--kaki-deep);text-decoration-color:var(--kaki)}
.ev-linklist__note{
  display:block;margin-top:6px;
  font-size:13px;line-height:1.9;letter-spacing:.02em;color:var(--sumi-soft);
  word-break:auto-phrase;
}
.ev-sec--links{border-bottom:0}

/* 台帳の表。研究1件が標本・報告・限界の散文3列を持つので、この節だけ本文820pxより
   広い版面を使う（表が主役の面ではデータ面と同じ扱いにする） */
.ev-sec--wide .ev-sec__inner{max-width:1120px}
.ev-table{table-layout:fixed}
.ev-table tbody th.stub{width:24%}
.ev-table .col-note{width:19%}
.ev-cell-link{
  color:var(--midori);font-size:13.5px;line-height:1.65;
  text-decoration:underline;text-decoration-color:var(--keisen-strong);text-underline-offset:3px;
  word-break:break-word;transition:text-decoration-color var(--ease),color var(--ease);
}
.ev-cell-link:hover,
.ev-cell-link:focus-visible{color:var(--kaki-deep);text-decoration-color:var(--kaki)}
.ev-cell-sub{
  display:block;margin-top:5px;
  font-size:11.5px;line-height:1.7;letter-spacing:.02em;color:var(--sumi-soft);
  font-weight:400;word-break:auto-phrase;
}
.ev-cell-sub .num{font-variant-numeric:tabular-nums}

@media (max-width:1024px){
  .ev-sec{padding-block:56px}
}

@media (max-width:700px){
  .ev-sec{padding-block:44px}
  .ev-count{gap:12px 24px}
  .ev-count__item{flex:1 1 100%}
  .ev-q{gap:0;flex-direction:column;padding-block:22px}
  .ev-q__no{width:52px;margin-bottom:12px}
  .ev-q__title{font-size:17.5px}
  .ev-q__topic{padding-left:0;border-left:0}
  .ev-toc__list{grid-template-columns:minmax(0,1fr)}
  .ev-toc__list li:nth-child(2){border-top:1px solid var(--keisen)}
  .ev-group + .ev-group{margin-top:40px}
  /* 様式欄は縦積み。標目を上、記入欄を下にして帳票の見え方を保つ */
  .ev-panel__field{flex-direction:column}
  .ev-panel dt{width:auto;padding:10px 14px;border-right:0;border-bottom:1px solid var(--keisen)}
  .ev-panel dd{padding:14px}
  .ev-panel--answer dt{border-bottom-color:var(--midori)}
  /* 表はカード化（.wtable の共通規約）。狭幅の柱は共通規約の後段で淡地（midori-wash）に
     なるので、ここで地と文字色を淡地側にそろえる（白字のままだと淡地の上で読めなかった） */
  .ev-table tbody th.stub{width:auto;display:block;padding:11px 16px;background:var(--midori-wash);border-bottom:1px solid var(--keisen)}
  .ev-table tbody th.stub .ev-cell-link{color:var(--midori);text-decoration-color:var(--keisen-strong)}
  .ev-table tbody th.stub .ev-cell-link:hover,
  .ev-table tbody th.stub .ev-cell-link:focus-visible{color:var(--kaki-deep);text-decoration-color:var(--kaki)}
  .ev-table tbody th.stub .ev-cell-sub{color:var(--sumi-soft)}
}

/* ================================================================
   即答版面と市区町村さがし（2026-09-05・specs/SPEC-site-upgrade.md）
   市区町村ページを「答え」から始める: H1 → 短いリード → 3事実カード → 基準日・出典の1行
   → 計算欄（お子さんはいつまで対象年齢か）→ 柱の下にイラスト。
   加えて、パンくず段の市区町村さがし（全ページ）、となりの市区町村の表、
   全国のなかでの位置づけをここで定義する。色・角丸・影はトークンのみ。
   ================================================================ */

/* パンくずの段に市区町村さがしを同居させる（左=パンくず、右=さがし） */
.breadcrumb__row{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px 32px;flex-wrap:wrap;
}
.breadcrumb__row .breadcrumb__list{flex:1 1 auto;min-width:0}

/* 市区町村さがし。入力欄とボタンは1つの様式欄として組む（罫線で接ぐ） */
.finder{position:relative;margin:0}
.finder--bar{flex:0 0 auto;width:min(100%,340px);padding-block:8px}
.finder__label{
  display:block;margin-bottom:6px;
  font-size:12px;letter-spacing:.08em;color:var(--sumi-soft);
}
.finder--bar .finder__label{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
/* 入力欄とボタンは1つの様式欄。角丸は外枠（.finder__field）だけが持つ（角丸は 0 / 4px の2値） */
.finder__field{display:flex;align-items:stretch;border-radius:4px;overflow:hidden}
.finder__input{
  flex:1 1 auto;min-width:0;
  padding:8px 12px;
  background:var(--panel);
  border:1px solid var(--keisen-strong);border-right:0;
  border-radius:0;
  font-family:var(--font-sans);font-size:14px;line-height:1.5;color:var(--sumi);
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--ease);
}
.finder__input::placeholder{color:var(--sumi-soft);opacity:.9}
.finder__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.finder__input:hover{border-color:var(--midori)}
/* 外枠が overflow:hidden なので、輪郭は外へ出さず内側の罫線の色で示す */
.finder__input:focus-visible{outline:2px solid var(--midori);outline-offset:-2px;border-color:var(--midori)}
.finder__button{
  flex:none;
  padding:0 14px;
  background:var(--panel);color:var(--midori);
  border:1px solid var(--keisen-strong);
  border-radius:0;
  font-family:var(--font-sans);font-size:13px;font-weight:700;letter-spacing:.08em;
  cursor:pointer;
  transition:background-color var(--ease),border-color var(--ease),color var(--ease);
}
.finder__button:hover{background:var(--midori-wash);border-color:var(--midori)}
.finder__button:focus-visible{outline:2px solid var(--midori);outline-offset:-2px}
/* 候補は入力欄の直下へ白い様式欄で落とす。影は使わず罫線で層を作る */
.finder__list{
  position:absolute;left:0;right:0;top:calc(100% - 8px);z-index:30;
  margin:0;padding:6px 0;list-style:none;
  background:var(--panel);
  border:1px solid var(--keisen-strong);
  text-align:left;
}
.finder--hero .finder__list{top:100%}
.finder__list[hidden]{display:none}
.finder__item{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 14px;
  cursor:pointer;
  transition:background-color var(--ease);
}
.finder__item:hover,.finder__item.is-active{background:var(--midori-wash)}
.finder__name{font-size:14.5px;font-weight:500;letter-spacing:.02em;color:var(--sumi)}
.finder__pref{flex:none;font-size:11.5px;letter-spacing:.06em;color:var(--sumi-soft)}
.finder__empty{
  padding:10px 14px;
  font-size:12.5px;line-height:1.7;color:var(--sumi-soft);
  word-break:auto-phrase;
}
/* トップのヒーローでは主導線。柿色のボタン（CTA用途）で受ける */
.finder--hero{margin-top:36px;max-width:520px}
.finder--hero .finder__label{
  font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--sumi);
  margin-bottom:8px;
}
.finder--hero .finder__input{padding:14px 16px;font-size:16px}
.finder--hero .finder__button{
  padding:0 26px;
  background:var(--kaki);color:var(--panel);
  border-color:var(--kaki);
  font-size:16px;letter-spacing:.1em;
}
.finder--hero .finder__button:hover{background:var(--kaki-deep);border-color:var(--kaki-deep)}
.hero__links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:22px}

/* 助成の内容: ヒーローの直後に続くので上の余白を詰める（章の天罫がリードのすぐ下に来る） */
.city-facts-sec{padding-top:12px}

/* 基準日と出典の1行。答えから信頼の装置を離さない（正式な様式欄は出典の章） */
.fact-asof{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  margin:12px 0 0;
  font-size:12.5px;line-height:1.8;letter-spacing:.02em;
  color:var(--sumi-soft);
}
.fact-asof__term{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--midori)}
.fact-asof__sep{width:1px;height:12px;background:var(--keisen-strong);align-self:center}
.fact-asof .num{font-variant-numeric:tabular-nums;color:var(--sumi)}

/* 計算欄（お子さんはいつまで対象年齢か）。値のカードと同じ白地＋強罫の様式欄で受ける */
.eligibility{
  margin:28px 0 0;padding:20px 24px 22px;
  background:var(--panel);
  border:1px solid var(--keisen-strong);
}
.eligibility[hidden]{display:none}
.eligibility__title{
  margin:0;
  font-family:var(--font-mincho);
  font-size:16px;font-weight:600;letter-spacing:.04em;line-height:1.6;
}
.eligibility__form{margin-top:14px}
.eligibility__label{
  display:block;margin-bottom:6px;
  font-size:12.5px;letter-spacing:.06em;color:var(--sumi-soft);
}
.eligibility__row{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px 12px}
.eligibility__input{
  flex:0 1 220px;min-width:0;
  padding:10px 12px;
  background:var(--panel);
  border:1px solid var(--keisen-strong);border-radius:4px;
  font-family:var(--font-sans);font-size:15px;color:var(--sumi);
  font-variant-numeric:tabular-nums;
  transition:border-color var(--ease);
}
.eligibility__input:hover{border-color:var(--midori)}
.eligibility__input:focus-visible{outline:2px solid var(--midori);outline-offset:2px}
.eligibility__button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 20px;
  background:var(--panel);color:var(--midori);
  border:1px solid var(--midori);border-radius:4px;
  font-family:var(--font-sans);font-size:14px;font-weight:700;letter-spacing:.08em;
  cursor:pointer;
  transition:background-color var(--ease);
}
.eligibility__button:hover{background:var(--midori-wash)}
.eligibility__result{
  margin:16px 0 0;
  font-size:15.5px;line-height:1.9;letter-spacing:.01em;
  word-break:auto-phrase;
}
.eligibility__result:empty{display:none}
/* 答えが出たら、注記と同じ柿色の短罫を印として付ける */
.eligibility[data-state="ok"] .eligibility__result{position:relative;padding-left:18px}
.eligibility[data-state="ok"] .eligibility__result::before{
  content:"";
  position:absolute;left:0;top:.95em;
  width:6px;height:1px;
  background:var(--kaki-deep);
}
.eligibility[data-state="error"] .eligibility__result{color:var(--kaki-deep)}
.eligibility__note{
  margin:12px 0 0;max-width:48em;
  font-size:12.5px;line-height:1.85;letter-spacing:.02em;
  color:var(--sumi-soft);
  word-break:auto-phrase;
}

/* 自治体イラスト。狭い幅では計算欄の下、2欄組では章の柱の下に置く */
.city-facts__figure{margin:32px 0 0;max-width:420px}
.city-facts__figure img{display:block;width:100%;height:auto;border-radius:4px;}

/* となりの市区町村とくらべる。県ページの一覧表（.pref-table）と同じ寸法・同じ走査装置 */
.city-neighbors-sec{padding-block:64px}
.neighbors-figure{margin:20px 0 0}
.neighbors-table .col-stub{width:18%}
.neighbors-table .col-age{width:17%}
.neighbors-table .col-data{width:12%}
.neighbors-table .val--has{font-weight:700}
.neighbors-table tbody td{padding:12px 10px;font-size:14.5px;line-height:1.55}
/* この市区町村の行は淡地で目印にする（先頭行・リンクなし） */
.neighbors-table tbody tr.is-self th,
.neighbors-table tbody tr.is-self td{background:var(--midori-wash)}
.neighbors-self{
  display:inline-block;margin-top:4px;padding:1px 7px;
  border:1px solid var(--midori);border-radius:4px;
  font-size:10.5px;line-height:1.6;letter-spacing:.1em;
  color:var(--midori);
}

/* 県内と全国の位置づけを1つの章で受ける。小見出しは柱の見出しより一段小さい明朝 */
.city-rank__head{
  margin:28px 0 0;
  font-family:var(--font-mincho);
  font-size:14px;font-weight:600;letter-spacing:.12em;
  color:var(--sumi-soft);
}
.city-rank__head + .city-rank{margin-top:12px}

@media (min-width:1120px){
  /* 助成の内容: 柱は見出しだけを1行目に置き、その下にイラストを置く。
     見出しの行送り（span 30）と sticky はこの章では使わない */
  .city-facts-sec > .wrap > .section-head::before,
  .city-facts-sec > .wrap > .section-head > .section-title{grid-row:1;position:static}
  .city-facts-sec > .wrap > .city-facts__figure{
    grid-column:1;grid-row:2 / span 40;
    align-self:start;
    margin:28px 0 0;max-width:none;
  }
  .city-rank-sec > .wrap > .city-rank__head:first-of-type{margin-top:0}
  .city-neighbors-sec > .wrap > .neighbors-figure{margin-top:0;max-width:none}
}

@media (max-width:700px){
  .breadcrumb__row{gap:4px 16px}
  .finder--bar{width:100%;padding-block:2px 12px}
  .finder--hero{margin-top:28px;max-width:none}
  .finder--hero .finder__button{padding:0 18px;font-size:15px}
  .hero__links{justify-content:center}
  .city-hero{padding-block:36px 20px}
  .city-facts-sec{padding-top:8px}
  /* 3事実は折りたたまず fold に入れる。カード幅では見出しを左、値を右の1行に組む
     （他の章のカードは見出しを値の上へ積む既定のまま） */
  .city-facts-sec .fact-item{grid-template-columns:104px minmax(0,1fr);column-gap:12px;row-gap:0;padding:12px 14px 13px}
  /* 見出し「助成の対象年齢」（7字）を語中で折らない幅にする */
  .city-facts-sec .fact-item__term{font-size:12px;letter-spacing:.03em;word-break:keep-all}
  .city-facts-sec .fact-item__value .val{font-size:18px}
  .city-facts-sec .fact-item__caveat{grid-column:1/-1}
  .eligibility{padding:16px 16px 18px}
  .eligibility__input{flex:1 1 100%}
  .eligibility__button{width:100%}
  .neighbors-table tbody td{padding:12px 16px}
  .neighbors-table .cell{align-items:flex-end;flex:none;max-width:60%}
  .neighbors-table .val,.neighbors-table .val__note{text-align:right}
  .neighbors-table tbody td::before{flex:1 1 auto;min-width:0}
  /* カード化した先頭行（この市区町村）。柱は深緑地のまま、標だけ白で返す */
  .neighbors-table tbody tr.is-self th.stub{background:var(--midori)}
  .neighbors-self{color:var(--panel);border-color:var(--midori-wash)}
}

/* ============================================================
   2026-09-06 — 暮らしの情報誌
   写真と大きな題字で表紙を作り、データ面は白い紙と静かな横罫で組む。
   既存の値・注記・比較マーカーの意味は変えない。
   ============================================================ */
body{letter-spacing:.015em}
.wrap{max-width:1360px;padding-inline:48px}
.breadcrumb{border-bottom:0;background:var(--paper)}
.breadcrumb__row{padding-block:12px}
.breadcrumb__list{font-size:11px;letter-spacing:.04em}
.finder--bar{max-width:300px}
.finder__input{border-color:var(--keisen);border-radius:0;}
.finder__button{border-radius:0;}

/* 表紙。写真には文字を焼き込まず、検索候補も写真の上へ正しく出す。 */
.home-editorial .hero{position:relative;isolation:isolate;padding:0;background:var(--paper)}
.home-editorial .hero__grid{display:block;min-height:670px;position:static;padding-block:66px 60px}
.home-editorial .hero__lede{position:relative;z-index:2;width:57%;max-width:700px}
.home-editorial .hero__title{font-size:clamp(40px,4vw,62px);line-height:1.48;font-weight:600;letter-spacing:.015em}
.home-editorial .hero__title .phrase{display:block}
.hero__photo{position:absolute;inset:0;z-index:0;margin:0;overflow:hidden}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.home-editorial .finder--hero{margin-top:40px;max-width:490px}
.home-editorial .finder__label{font-size:13px;font-weight:400;letter-spacing:.07em}
.home-editorial .finder--hero .finder__input{background:var(--panel);min-height:56px;border-color:var(--keisen-strong)}
.home-editorial .finder--hero .finder__button{background:var(--midori);border-color:var(--midori);font-size:14px;padding-inline:26px;font-weight:500}
.home-editorial .finder--hero .finder__button:hover{background:var(--sumi);border-color:var(--sumi)}
.home-editorial .hero__links{gap:24px;margin-top:18px;justify-content:flex-start}
.home-editorial .hero__links a{font-size:12px;font-weight:400}
.home-editorial .hero__lead{margin:18px 0 0;font-family:var(--font-mincho);font-size:clamp(16px,1.35vw,20px);font-weight:600;line-height:1.8;letter-spacing:.04em;color:var(--sumi-soft)}
.home-editorial .hero__lead .phrase{display:inline-block}

/* 表紙の「まなび」入口。白書緑の帯一枚をリンク全体にし、積み木の専用SVGを添える。
   緑→墨のhoverで、色を増やさない。 */
.hero-manabi{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 24px;
  margin-top:32px;max-width:620px;padding:18px 28px 18px 18px;
  background:var(--midori);color:var(--paper);text-decoration:none;
  border:1px solid var(--midori);border-radius:4px;
  transition:background-color var(--ease),border-color var(--ease);
}
.hero-manabi__art{display:block;width:80px;height:auto;margin-left:6px}
.hero-manabi__copy{display:grid;gap:4px;min-width:0}
.hero-manabi__eyebrow{font-size:11px;line-height:1.6;letter-spacing:.08em}
.hero-manabi__title{font-family:var(--font-mincho);font-size:clamp(30px,2.6vw,38px);font-weight:600;line-height:1.3;letter-spacing:.12em}
.hero-manabi__note{font-size:13px;line-height:1.8;letter-spacing:.03em;word-break:auto-phrase}
.hero-manabi__more{
  display:inline-flex;align-items:center;gap:10px;justify-self:end;
  padding-bottom:4px;border-bottom:1px solid currentColor;
  font-size:13px;font-weight:500;letter-spacing:.06em;white-space:nowrap;
}
.hero-manabi__arrow{display:inline-block;font-size:18px;line-height:1;transition:transform var(--ease)}
.hero-manabi:hover{background:var(--sumi);border-color:var(--sumi)}
.hero-manabi:hover .hero-manabi__arrow{transform:translateX(4px)}
.hero-manabi:focus-visible{outline:2px solid var(--midori);outline-offset:4px}
@media(max-width:1024px){
  .hero-manabi{grid-template-columns:auto minmax(0,1fr);padding-right:22px}
  .hero-manabi__more{grid-column:2;justify-self:start}
}
@media(max-width:700px){
  .home-editorial .hero__lead{margin-top:12px;font-size:15px}
  .hero-manabi{gap:6px 16px;margin-top:24px;max-width:none;padding:14px 16px 14px 12px}
  .hero-manabi__art{width:60px;margin-left:4px}
  .hero-manabi__eyebrow{font-size:10px;letter-spacing:.02em}
  .hero-manabi__title{font-size:28px}
  .hero-manabi__note{font-size:12px}
  .hero-manabi__more{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .hero-manabi,.hero-manabi__arrow{transition:none}
  .hero-manabi:hover .hero-manabi__arrow{transform:none}
}
.home-intro{padding-block:32px;border-bottom:1px solid var(--keisen)}
.home-intro p{max-width:800px;margin:0 auto;font-size:14px;line-height:2.1;color:var(--sumi-soft)}

/* 索引は各地方を一枚の目次として、揃った文字と余白で見せる。 */
.home-editorial .index-sec{padding-block:80px 88px;background:var(--panel)}
.section-title{font-size:clamp(25px,2.3vw,34px);line-height:1.5;letter-spacing:.045em}
.section-lead{color:var(--sumi-soft);font-size:14px;line-height:2}
.home-editorial .index-sec .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:32px;margin-bottom:44px}
.home-editorial .index-sec .section-lead{max-width:34em;margin:0;font-size:12px}
.pref-index{columns:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 32px}
.pref-block,.pref-block:nth-of-type(3),.pref-block:nth-of-type(5){margin:0;padding:0;border:0;break-before:auto}
.pref-block__head{display:block;border-bottom:1px solid var(--keisen);padding-bottom:12px;margin-bottom:9px}
.pref-block__meta{display:block;margin-top:7px;font-size:10px;color:var(--sumi-soft)}
.pref-block .tab{height:auto;min-width:0;width:auto;padding:0}
.pref-block .tab__shape{display:none}
.pref-block .tab__label{position:static;display:flex;align-items:baseline;gap:10px;padding:0}
.pref-block .tab__no{font-size:10px;font-family:var(--font-sans);color:var(--sumi-soft)}
.pref-block .tab__name{font-family:var(--font-mincho);font-size:20px;font-weight:600;color:var(--sumi)}
.pref-list__link{padding:7px 0;min-height:38px}
.pref-list__name{font-size:13px}
.pref-list__count{font-size:11px;color:var(--sumi-soft)}
.pref-list__leader{border:0}
.band{background:var(--midori-wash);color:var(--midori);border-block:1px solid var(--keisen)}
.band__inner{padding-block:24px}
.band__text{font-size:15px}
.band__note{color:var(--midori)}
.home-editorial .table-sec{padding-block:80px;background:var(--paper)}
.home-editorial .table-sec__figure{max-width:1100px;margin-inline:auto}
.home-editorial .entry-sec{padding-block:72px;background:var(--panel)}
.home-editorial .how-sec,.home-editorial .about-sec{padding-block:88px}
.about-sec__illust img{border-radius:0;aspect-ratio:3/2;object-fit:cover}

/* 内側の紙面。タイトルの明朝と、項目・値のゴシックを対比させる。 */
.city-hero{padding-block:56px 46px}
.city-hero__title{font-size:clamp(30px,3.7vw,54px);line-height:1.55;letter-spacing:.025em}
.city-hero__lead{font-size:14px;line-height:2.1;margin-top:22px;max-width:54em;color:var(--sumi-soft)}
.pref-hero{padding-block:54px 64px}
.pref-hero__title{font-size:clamp(32px,3.7vw,54px);line-height:1.55}
.pref-hero__lead{font-size:14px;line-height:2.1;color:var(--sumi-soft)}
.pref-hero__figure{max-width:460px}
.pref-hero__figure img{border-radius:0;}
.city-facts__figure img{border-radius:0;}
:is(.city-facts-sec,.city-contact-sec,.city-rank-sec,.city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,.city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) > .wrap,
.city-nav-sec > .wrap{--wrappad:48px;background-size:calc(100% - var(--wrappad) * 2) 1px;padding-top:32px}
:is(.city-facts-sec,.city-contact-sec,.city-rank-sec,.city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,.city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) .section-title{font-family:var(--font-sans);font-size:20px;font-weight:500;letter-spacing:.06em;line-height:1.7}
.fact-card{border:0;border-top:1px solid var(--keisen-strong);background:var(--panel)}
.fact-card__scope{background:var(--panel);color:var(--midori);font-size:12px;letter-spacing:.08em;padding:16px 22px;border-bottom:1px solid var(--keisen)}
.fact-item{padding:22px}
.fact-item__term{font-size:12px}
.fact-item__value .val{font-size:23px;font-weight:500;line-height:1.6}
.fact-item__value .val__note{font-size:11px;line-height:1.8;color:var(--sumi-soft)}
.fact-item__number{font-size:36px;font-weight:400;letter-spacing:-.035em}
.fact-asof{margin-top:16px;font-size:11px}
.eligibility{border:0;border-top:1px solid var(--keisen);background:var(--panel);padding:26px}
.eligibility__title{font-family:var(--font-sans);font-size:15px;font-weight:500}
.official-faq__question{font-family:var(--font-sans);font-size:18px;font-weight:500}
.city-rank{border:0;border-top:1px solid var(--keisen);background:var(--panel)}
.city-rank li{padding:22px}
.city-contact-sec .section-lead{border-left-width:1px;font-size:14px;padding:20px}
.city-contact-sec [data-official-link]{font-size:15px;line-height:1.9}
.stamp{background:transparent;border-block:1px solid var(--keisen);padding-block:18px}
.stamp__frame,.seal{display:none}
.stamp__fields{padding:0}

/* 表の見出しは淡地に。差分マーカー・原資料注記はそのまま残す。 */
.wtable{border-color:var(--keisen);background:var(--panel)}
.wtable thead th{background:var(--midori-wash);color:var(--midori);border-color:var(--keisen);font-family:var(--font-sans);font-weight:500;font-size:12px}
.wtable tbody th.stub{background:var(--panel);font-weight:500}
.wtable tbody td{border-left-color:var(--keisen);font-size:14px}
.wtable tbody td:first-of-type{border-left-color:var(--keisen)}
.tab__shape{opacity:.55}
.wtable__capText{font-family:var(--font-sans);font-size:12px;letter-spacing:.04em}
.guide-hero,.guide-index-hero{background:var(--paper);padding-block:64px 72px;border-bottom:1px solid var(--keisen)}
.guide-hero__title,.guide-index-hero h1{font-size:clamp(30px,3.4vw,48px);line-height:1.65}
.guide-section{background:var(--panel);padding-block:64px}
.guide-section__inner,.guide-index-list__inner{max-width:900px}
.guide-section h2{font-family:var(--font-sans);font-size:24px;font-weight:500}
.guide-index-card{border:0;border-top:1px solid var(--keisen);padding:30px 0;background:transparent}
.guide-index-card h3{font-size:25px;line-height:1.7}
.site-footer{padding-block:60px 32px;background:var(--paper);border-top:1px solid var(--keisen)}
.footer__nav a{font-size:12px}

@media(min-width:1120px){
  :is(.city-facts-sec,.city-contact-sec,.city-rank-sec,.city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,.city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) > .wrap{
    --rail:220px;--railgap:60px;
    background-size:calc(100% - var(--wrappad) * 2) 1px;
  }
  .city-facts-sec > .wrap{--rail:200px;--railgap:60px}
  .city-facts-sec .fact-item{padding:24px 22px 28px}
  .city-facts-sec .fact-card:only-child .fact-item{border-left:0}
  .city-facts-sec .fact-card:only-child .fact-item + .fact-item{border-left:1px solid var(--keisen)}
  .city-facts-sec > .wrap > .city-facts__figure{margin-top:36px}
}
@media(max-width:1024px){
  .wrap{padding-inline:32px}
  .home-editorial .hero__grid{min-height:590px;padding-block:55px}
  .home-editorial .hero__title{font-size:42px}
  .home-editorial .hero__lede{width:60%}
  .pref-index{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  :is(.city-facts-sec,.city-contact-sec,.city-rank-sec,.city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,.city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) > .wrap,.city-nav-sec > .wrap{--wrappad:32px}
}
@media(max-width:700px){
  .wrap{padding-inline:24px}
  .breadcrumb__row{padding-block:10px}
  .finder--bar{max-width:none;padding-bottom:6px}
  .home-editorial .hero__grid{min-height:0;padding-block:36px 356px}
  .home-editorial .hero__lede{width:100%;max-width:none}
  .home-editorial .hero__title{font-size:clamp(27px,7.5vw,44px);line-height:1.6;letter-spacing:.01em}
  .hero__photo{top:auto;height:320px}
  .hero__photo img{object-position:85% 50%;object-fit:cover}
  .home-editorial .finder--hero{margin-top:28px;max-width:470px}
  .home-editorial .finder--hero .finder__input{min-height:52px;font-size:14px}
  .home-editorial .finder--hero .finder__button{font-size:13px;padding-inline:20px}
  .home-editorial .hero__links{gap:24px;margin-top:14px}
  .home-intro{padding-block:24px}
  .home-intro p{font-size:12px;line-height:2}
  .home-editorial .index-sec{padding-block:48px 56px}
  .home-editorial .index-sec .section-head{display:block;margin-bottom:30px}
  .home-editorial .index-sec .section-lead{margin-top:16px;font-size:12px}
  .pref-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
  .pref-block .tab__name{font-size:17px}
  .pref-block__meta{font-size:9px;line-height:1.7}
  .pref-list__link{min-height:40px}
  .pref-list__name{font-size:12px}
  .home-editorial .table-sec,.home-editorial .entry-sec,.home-editorial .how-sec,.home-editorial .about-sec{padding-block:52px}
  .city-hero{padding-block:32px 30px}
  .city-hero__title{font-size:28px;line-height:1.6}
  .city-hero__lead{font-size:12px;line-height:2;margin-top:16px}
  .pref-hero{padding-block:34px 40px}
  .pref-hero__title{font-size:31px}
  .pref-hero__lead{font-size:13px}
  .pref-hero__figure{max-width:none;margin-top:28px}
  :is(.city-facts-sec,.city-contact-sec,.city-rank-sec,.city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,.city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) > .wrap,.city-nav-sec > .wrap{--wrappad:24px;padding-top:24px}
  :is(.city-facts-sec,.city-contact-sec,.city-rank-sec,.city-childcare-sec,.city-after-school-sec,.city-lunch-sec,.city-freeschool-sec,.city-env-sec,.city-glossary-sec,.city-source-sec,.city-entry-sec,.city-neighbors-sec) .section-title{font-size:20px}
  .city-facts-sec .fact-item{padding:18px 16px;grid-template-columns:100px minmax(0,1fr);gap:12px}
  .city-facts-sec .fact-item__value .val{font-size:19px}
  .fact-card__scope{padding:14px 16px;font-size:11px}
  .fact-item__number{font-size:30px}
  .fact-asof{font-size:10px}
  .city-facts__figure{max-width:240px;margin:28px auto 0}
  .eligibility{padding:22px 18px}
  .wtable tbody th.stub,.neighbors-table tbody tr.is-self th.stub{background:var(--midori-wash);color:var(--midori);border-bottom:1px solid var(--keisen)}
  .wtable tbody th.stub a{color:var(--midori)}
  .wtable tbody th.stub .muni{color:var(--sumi)}
  .wtable tbody th.stub .pref{color:var(--midori)}
  .wtable tbody th.stub .muni-link:hover .muni,
  .wtable tbody th.stub .muni-link:focus-visible .muni{color:var(--midori)}
  .neighbors-self{color:var(--midori);border-color:var(--keisen-strong)}
  .guide-section{padding-block:44px}
  .guide-section h2{font-size:21px}
  .guide-index-card h3{font-size:22px}
  .site-footer{padding-top:40px}
}
@media(prefers-reduced-motion:reduce){
  .home-editorial .hero *{animation:none;transition:none}
}


/* ------------------------------------------------------------
   都道府県から探す: タイル地図（2026-09-23 サク採用）
   47都道府県を同じ大きさの正方形で地理的に並べ、色の濃さで
   「通院の助成が高校卒業まで、またはそれより長い市区町村の割合」を示す。
   HTMLは scripts/home_tilemap.py が集計から組む。段階色は新しい色を
   足さず、白書緑と生成りの混色（color-mix）だけで作る。影は使わない。
   ------------------------------------------------------------ */
.tilemap{
  --tile-p90:color-mix(in srgb,var(--midori) 60%,var(--paper));
  --tile-p80:color-mix(in srgb,var(--midori) 38%,var(--paper));
  --tile-p60:color-mix(in srgb,var(--midori) 18%,var(--paper));
  display:grid;
  grid-template-columns:repeat(14,minmax(0,1fr));
  gap:3px;
  margin-bottom:56px;
}
.tilemap__readout{grid-column:1/9;grid-row:1/6;align-self:start;padding-right:16px}
.tilemap__label{margin:0;font-size:12px;line-height:1.7;color:var(--sumi-soft)}
.tilemap__name{margin:10px 0 0;font-family:var(--font-mincho);font-weight:600;font-size:clamp(22px,2.2vw,30px);line-height:1.3;color:var(--sumi)}
.tilemap__pct{margin:4px 0 0;font-weight:700;font-size:clamp(44px,5.2vw,72px);line-height:1.05;color:var(--midori);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tilemap__pct small{font-size:.4em;margin-left:.08em}
.tilemap__desc{margin:10px 0 0;max-width:30em;font-size:13px;line-height:1.85;color:var(--sumi-soft)}
.tilemap__legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:18px 0 0;padding:0;list-style:none;font-size:12px;color:var(--sumi-soft)}
.tilemap__legend li{display:inline-flex;align-items:center;gap:6px}
.tilemap__swatch{display:inline-block;width:14px;height:14px;box-sizing:border-box}

.tilemap__tile{
  aspect-ratio:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:clamp(9px,.9vw,12.5px);font-weight:700;line-height:1.25;
  color:var(--sumi);text-decoration:none;
  outline:2px solid transparent;outline-offset:-2px;
  transition:outline-color var(--ease),background-color var(--ease);
}
.tilemap__tile:hover,.tilemap__tile.is-active{outline-color:var(--sumi)}
.tilemap__tile:focus-visible{outline:2px solid var(--sumi);outline-offset:2px}
.tilemap__v{margin-top:3px;font-weight:500;font-size:.88em;font-variant-numeric:tabular-nums}
.tilemap__a{display:none}
.tilemap__tile--p100{background:var(--midori);color:var(--panel)}
.tilemap__tile--p90{background:var(--tile-p90)}
.tilemap__tile--p80{background:var(--tile-p80)}
.tilemap__tile--p60{background:var(--tile-p60)}
.tilemap__tile--low{background:var(--panel);border:1.5px dashed var(--keisen-strong);box-sizing:border-box}

/* 配置（data-x = 列0〜13、data-y = 行0〜10） */
.tilemap__tile[data-x="0"]{grid-column:1}.tilemap__tile[data-x="1"]{grid-column:2}
.tilemap__tile[data-x="2"]{grid-column:3}.tilemap__tile[data-x="3"]{grid-column:4}
.tilemap__tile[data-x="4"]{grid-column:5}.tilemap__tile[data-x="5"]{grid-column:6}
.tilemap__tile[data-x="6"]{grid-column:7}.tilemap__tile[data-x="7"]{grid-column:8}
.tilemap__tile[data-x="8"]{grid-column:9}.tilemap__tile[data-x="9"]{grid-column:10}
.tilemap__tile[data-x="10"]{grid-column:11}.tilemap__tile[data-x="11"]{grid-column:12}
.tilemap__tile[data-x="12"]{grid-column:13}.tilemap__tile[data-x="13"]{grid-column:14}
.tilemap__tile[data-y="0"]{grid-row:1}.tilemap__tile[data-y="1"]{grid-row:2}
.tilemap__tile[data-y="2"]{grid-row:3}.tilemap__tile[data-y="3"]{grid-row:4}
.tilemap__tile[data-y="4"]{grid-row:5}.tilemap__tile[data-y="5"]{grid-row:6}
.tilemap__tile[data-y="6"]{grid-row:7}.tilemap__tile[data-y="7"]{grid-row:8}
.tilemap__tile[data-y="8"]{grid-row:9}.tilemap__tile[data-y="9"]{grid-row:10}
.tilemap__tile[data-y="10"]{grid-row:11}

@media(max-width:760px){
  .tilemap{gap:2px;margin-bottom:40px}
  .tilemap__readout{grid-column:1/-1;grid-row:12;padding:18px 0 0}
  .tilemap__n,.tilemap__v{display:none}
  .tilemap__a{display:block;font-size:9.5px;letter-spacing:-.02em}
}
@media(prefers-reduced-motion:reduce){
  .tilemap__tile{transition:none}
}