@charset "utf-8";

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

:root{
  /* 色（DESIGN.md のトークン。これ以外の色は使わない） */
  --paper:#FAF7F0;
  --panel:#FFFFFF;
  --sumi:#1C1C1A;
  --sumi-soft:#55534E;
  --midori:#1F5A45;
  --midori-wash:#E8F0EC;
  --kaki:#C75B1E;
  --kaki-deep:#A84A16;
  --keisen:#D8D2C4;
  --keisen-strong:#A89F8D;

  /* 書体 */
  --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-header{
  background:var(--paper);
  border-bottom:1px solid var(--keisen);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  min-height:78px;
}

.brand{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--sumi);
}
.brand__mark{width:28px;height:28px;flex:none}
.brand__name{
  font-family:var(--font-mincho);
  font-size:21px;font-weight:600;line-height:1;
  letter-spacing:.12em;
  transition:color var(--ease);
  /* 末尾の字送りぶんを詰めて、マークとの見た目の間隔をそろえる */
  margin-right:-.12em;
  font-feature-settings:"palt" 1;
}
.brand__sub{
  padding-left:13px;
  border-left:1px solid var(--keisen);
  font-size:11px;font-weight:400;line-height:1;
  letter-spacing:.2em;color:var(--sumi-soft);
  margin-right:-.2em;
}
.brand:hover .brand__name{color:var(--midori)}

.nav__list{
  display:flex;align-items:center;gap:34px;
  margin:0;padding:0;list-style:none;
}
.nav__list a{
  display:inline-block;
  color:var(--sumi);
  font-size:14px;line-height:1.6;letter-spacing:.06em;
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color var(--ease),border-color var(--ease);
}
.nav__list a:hover{color:var(--midori);border-bottom-color:var(--midori)}

/* ------------------------------------------------------------
   ヒーロー
   ------------------------------------------------------------ */
/* 下は 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}

/* ------------------------------------------------------------
   白書の表組み
   罫線の階層: 外枠・柱の右＝--keisen-strong / 行と列＝--keisen /
   ヘッダ内の区切り＝--panel（緑地に白のヘアライン）
   ------------------------------------------------------------ */
.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)}

/* セルの値は読者語彙（「高校卒業まで」「収入によっては対象外」）であり、一次ソースの
   短い値（「有」「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}
.how-sec__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:64px;
  align-items:start;
}

.steps{
  position:relative;
  margin:40px 0 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カラムグリッドの外（セクション末尾）に独立して置く。グリッドとの間隔は
   .section-illust 側で持たせるので、.illust 自体に上下マージンは付けない。
   カラム幅いっぱいだと絵が主役に見えるため、480pxで頭打ちにし左寄せにする */
.illust{margin:0;max-width:480px}
.illust img{display:block;width:100%;height:auto;border-radius:4px}
/* イラストの外枠（.wrap を再利用し、本文カラムの左端に揃える）。
   セクション自身の padding-block はそのままなので、セクション間の
   余白リズム（96–128px）には影響しない */
.section-illust{margin-top:44px}
.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}
.about-sec__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:64px;
  align-items:start;
}

.about-limit{
  margin-top:32px;
  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 で3列とも比率固定にして wrap 幅いっぱいに確実に割り付ける
   （免責文の grid-column:1/-1 の罫線もこれで欠けずに全幅へ通る） */
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr auto;
  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}

.footer__brand{
  margin:0;
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--font-mincho);
  font-size:17px;font-weight:600;letter-spacing:.08em;
  color:var(--sumi);
}
.footer__brand-sub{
  padding-left:10px;
  border-left:1px solid var(--keisen);
  font-family:var(--font-sans);
  font-size:11px;font-weight:400;letter-spacing:.16em;
  color:var(--sumi-soft);
}
.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}

.footer__nav ul{
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;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)}

.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段ヘッダが画面外に出ると列の意味が読めなくなるため、
   デスクトップ/タブレットでは2段とも固定する（tier1=通常のth高さ、
   tier2はその高さぶん下げる）。地色が深緑×不透明なので下を流れる行は隠れる。
   モバイルはカード化で解決済みのため対象外（display:none で thead ごと消える） */
.pref-table thead th{position:sticky;z-index:1}
.pref-table .tier1 th{top:0}
.pref-table .tier2 th{top:44px}

/* 市区町村名セルは市区町村ページへのリンク（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);
}

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

/* ------------------------------------------------------------
   タブレット: ヒーローを縦積みに
   ------------------------------------------------------------ */
@media (max-width:1024px){
  .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}
  .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,.how-sec__grid,.about-sec__grid{grid-template-columns:1fr;gap:48px}
  .how-sec__aside{max-width:520px}
  .about-sec__aside{max-width:520px}

  .footer__grid{grid-template-columns:1fr;row-gap:40px}
  /* 1列積みでは min-width:620px がそのままだと狭い画面ではみ出すため解除 */
  .stamp--footer{max-width:none;min-width:0}
}

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

  .site-header__inner{
    flex-direction:column;align-items:stretch;gap:0;
    min-height:0;
  }
  .brand{padding-block:16px}
  .brand__name{font-size:19px}
  .nav__list{
    justify-content:space-between;gap:12px;
    padding-block:11px;
    border-top:1px solid var(--keisen);
  }
  .nav__list a{font-size:12.5px;letter-spacing:.02em}

  .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}

  /* 用語ガイドは縦積みにし、仕切りを縦罫から横罫へ入れ替える */
  .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,.how-sec__grid,.about-sec__grid{grid-template-columns:1fr;gap:40px}
  .how-sec__aside,.about-sec__aside{max-width:none}
  .steps{margin-top:32px}
  .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{margin-top:28px;padding:18px}
  .about-policy li + li{margin-top:18px}

  .footer__grid{padding-block:44px 32px;row-gap:28px}
  /* 目次として読ませるため、モバイルでも縦1列のまま（base の column を維持） */
  .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;
  }
}

/* ------------------------------------------------------------
   法的ページ（プライバシーポリシー等・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}

@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自治体ぶんの事実ブロックと
   県内での位置づけ、横導線だけ。
   ------------------------------------------------------------ */

/* ファーストビューの版面は県ページ（.pref-hero）と同じ部品。
   県ページと違い市ページは必ずイラストを持つ（無ければ県版を流用する規約）ので、
   :has() での出し分けは要らない。R7-b で .pref-hero と1ルールへ統合する */
.city-hero{padding-block:64px}
.city-hero__grid{display:grid}
.city-hero__body{min-width:0}
.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:24px;max-width:42em}
/* ファーストビューに入るため loading="lazy" は使わない（fetchpriority="high"） */
.city-hero__figure{margin:32px 0 0;max-width:420px}
.city-hero__figure img{display:block;width:100%;height:auto;border-radius:4px}

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

/* ------------------------------------------------------------
   助成の内容（このページの価値の中心・単一自治体の事実ブロック）
   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}
/* 数字・値は主役級。表のセル（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__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}
}

/* ------------------------------------------------------------
   県内での位置づけ
   ------------------------------------------------------------ */
.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}

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

.city-source-sec{padding-block:64px}
/* 県ページでは表の figcaption だが、市ページには表が無いので単独で置く */
.city-source-sec .stamp{margin-top:0;max-width:820px}
/* 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;
}

/* ------------------------------------------------------------
   横導線
   主導線は県ページ（一覧でくらべる）。前後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-rank-sec,
  .city-glossary-sec,.city-source-sec{padding-block:56px}
  .city-nav-sec{padding-block:56px 72px}
}

@media (max-width:700px){
  .city-hero,.city-facts-sec,.city-rank-sec,
  .city-glossary-sec,.city-source-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: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}
}

/* ================================================================
   収益層: 診断ページ /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}

/* ================================================================
   収益層: 通勤圏比較 /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;
}

/* ================================================================
   収益層: 「引っ越しの検討」ブロック（ASP導線・共通部品）
   specs/SPEC-revenue-layer.md C章。データ本文より控えた視覚重量にする
   （--midori-wash の淡地・角丸4px・影なし。柿色はCTAにのみ使う予定だが、
   段階1はリンクが無いためCTAボタン自体が無い）。
   ================================================================ */

.move-promo{padding-block:64px;background:var(--midori-wash)}
.move-promo__head{margin-bottom:32px}
.move-promo__title{
  margin:0;
  font-family:var(--font-mincho);
  font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:.02em;
}
.move-promo__ad-label{
  margin:10px 0 0;
  font-size:12.5px;letter-spacing:.04em;
  color:var(--sumi-soft);
}
.move-promo__body{display:grid;gap:40px}
.move-promo__sub{
  margin:0 0 18px;
  font-size:14px;font-weight:600;letter-spacing:.06em;
  color:var(--midori);
}
.move-promo__checklist{margin:0;padding:0;list-style:none;counter-reset:promo-step}
.move-promo__checklist li{position:relative;padding:0 0 0 40px;counter-increment:promo-step}
.move-promo__checklist li + li{margin-top:18px}
.move-promo__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-promo__checklist-title{display:block;font-size:14.5px;font-weight:500;letter-spacing:.02em}
.move-promo__checklist-text{
  display:block;margin-top:4px;
  font-size:13px;line-height:1.85;color:var(--sumi-soft);
  word-break:auto-phrase;
}
.move-promo__info-text{
  margin:0;max-width:40em;
  font-size:13.5px;line-height:1.95;letter-spacing:.01em;
  word-break:auto-phrase;
}

@media (min-width:860px){
  .move-promo__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-promo{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-promo{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}
}