/* ============================================================
   外壁塗装の補助金台帳 — 共通スタイルシート
   DESIGN.md 準拠: カラートークン10（+チップ内限定の屋根色1） / 角丸2値(0・3px) /
   影ゼロ / transition 1値(160ms ease) / 明朝は見出し限定 / tabular-nums 全数
   scripts/build_pages.py がこのファイルを site/assets/site.css へそのまま複製する。
   ============================================================ */

:root{
  --paper:      #F8F5EE;
  --sheet:      #FFFDF8;
  --paper-dim:  #EFE9DC;
  --ink:        #2E2822;
  --dim:        #7D7263;
  --rule:       #C9BFAB;
  --bengara:    #8E3F2B;
  --bengara-deep:#703224;
  --shu:        #BC4327;
  --moss:       #5A6247;
  /* 署名的装置3（塗料色見本チップ）内でのみ使用が許された屋根色（DESIGN.md）。 */
  --chip-roof:  #96552E;

  --mincho: "Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP","Noto Serif CJK JP",IPAexMincho,serif;
  --gothic: "Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP","Noto Sans CJK JP",IPAexGothic,sans-serif;
  --t: 160ms ease;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--gothic);
  font-size:14px;
  line-height:1.9;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
svg text{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
h1,h2{ font-family:var(--mincho); font-weight:600; margin:0; }
h3{ font-family:var(--gothic); font-weight:700; margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; }
a{ color:var(--bengara); }

.wrap{ width:min(1120px, calc(100% - 96px)); margin-inline:auto; }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--sheet); padding:10px 16px; z-index:10;
}
.skip-link:focus{ left:16px; top:16px; }

.unit{ font-size:.78em; margin-left:.25em; color:var(--dim); }
.unit-pct{ margin-left:.06em; }
.note{ font-size:11.5px; line-height:1.7; color:var(--dim); }
.kicker{ font-size:13px; line-height:1.5; letter-spacing:.18em; color:var(--bengara); margin-bottom:24px; }

.lead-note::before{
  content:"";
  display:inline-block;
  width:22px; height:5px;
  border-left:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin-right:9px;
  transform:translateY(-2px);
}

/* ============================================================
   署名的装置1: 図枠タイトルブロック
   ============================================================ */
.titleblock .tb-grid{
  display:grid;
  grid-template-columns:1fr 190px 190px;
  border-bottom:2px solid var(--ink);
}
.tb-cell{ padding:16px 0; }
.tb-name{ padding-right:24px; }
.tb-meta{ border-left:1px solid var(--rule); padding-left:20px; }

.wordmark{
  display:inline-block;
  font-family:var(--mincho);
  font-weight:600;
  font-size:20px;
  line-height:1.45;
  letter-spacing:.04em;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--t), border-color var(--t);
}
.wordmark:hover{ color:var(--bengara); border-bottom-color:var(--rule); }
.wordmark:focus-visible{ outline:2px solid var(--bengara); outline-offset:2px; }

.tb-en{ display:block; font-size:10px; line-height:1.4; letter-spacing:.22em; color:var(--dim); margin-top:5px; }
.tb-label{ display:block; font-size:11px; line-height:1.4; letter-spacing:.1em; color:var(--dim); }
.tb-value{ display:block; font-size:15px; line-height:1.5; margin-top:4px; letter-spacing:.02em; }

/* ============================================================
   パンくず
   ============================================================ */
.breadcrumb{ border-bottom:1px solid var(--rule); }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; list-style:none; padding:12px 0; gap:8px; }
.breadcrumb li{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--dim); }
.breadcrumb li:not(:last-child)::after{ content:"›"; color:var(--rule); }
.breadcrumb a{ color:var(--dim); text-decoration:none; border-bottom:1px solid transparent; transition:color var(--t), border-color var(--t); }
.breadcrumb a:hover{ color:var(--bengara); border-bottom-color:var(--rule); }
.breadcrumb a:focus-visible{ outline:2px solid var(--bengara); outline-offset:2px; }

/* ============================================================
   ヒーロー（トップページ）
   ============================================================ */
.hero{ padding:88px 0 92px; }
.hero-grid{ display:grid; grid-template-columns:1fr 380px; gap:72px; align-items:center; }

h1{ font-size:30px; line-height:1.72; letter-spacing:.02em; margin-bottom:26px; word-break:auto-phrase; }
.phrase span{ display:inline-block; }

.lead{ font-size:14px; line-height:1.95; max-width:34em; margin-bottom:36px; word-break:auto-phrase; }

.actions{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.btn{
  display:inline-block;
  padding:14px 32px;
  font-size:14px;
  line-height:1.4;
  letter-spacing:.06em;
  color:var(--sheet);
  background:var(--bengara);
  border:1px solid var(--bengara);
  border-radius:0;
  text-decoration:none;
  transition:background var(--t), border-color var(--t), color var(--t);
}
.btn:hover{ background:var(--bengara-deep); border-color:var(--bengara-deep); }
.btn:focus-visible{ outline:2px solid var(--bengara); outline-offset:2px; }

.tlink{
  font-size:14px; line-height:1.4; color:var(--bengara); text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:3px;
  transition:color var(--t), border-color var(--t);
}
.tlink:hover{ color:var(--bengara-deep); border-bottom-color:var(--bengara-deep); }
.tlink:focus-visible{ outline:2px solid var(--bengara); outline-offset:2px; }

.fig{ margin:0; background:var(--sheet); border:1px solid var(--rule); }
.fig svg{ display:block; width:100%; height:auto; padding:18px; }
.fig figcaption{ border-top:1px solid var(--rule); padding:11px 16px 12px; font-size:11.5px; line-height:1.7; color:var(--dim); }
.fig-name{ display:block; color:var(--ink); }
.fig-note{ display:block; padding-left:31px; }

/* ============================================================
   イラスト図版（層A）
   AI生成イラストは1px罫の図枠に収める。署名的装置1（図枠タイトルブロック）と
   ヒーローの立面図が同じ扱いなので、絵だけが浮かないようにする。
   角丸0・影ゼロの規律はここでも崩さない（DESIGN.md「AIっぽさブラックリスト」）。
   ============================================================ */
.plate{ margin:0; background:var(--sheet); border:1px solid var(--rule); }
.plate-img{ display:block; width:100%; height:auto; }

/* ============================================================
   台帳（トップページ抄録・都道府県一覧・自治体詳細で共有）
   ============================================================ */
.ledger{ border-top:1px solid var(--rule); padding:88px 0 96px; }
.sec-head{ display:flex; justify-content:space-between; align-items:baseline; gap:32px; flex-wrap:wrap; margin-bottom:24px; }
.sec-head h2{ font-size:20px; line-height:1.5; letter-spacing:.03em; }

/* 節の見出しに図版を並べる。図版が無い節では .sec-block--fig を付けず、
   見出しだけが従来どおり全幅で置かれる。 */
.sec-block{ margin-bottom:24px; }
.sec-block .sec-head{ margin-bottom:0; }
.sec-block--fig{ display:grid; grid-template-columns:1fr 280px; gap:48px; align-items:center; }
.sec-block--fig .sec-head{ display:block; }
.sec-block--fig .sec-head h2{ margin-bottom:10px; }

.table-scroll{ overflow-x:auto; }
table{
  table-layout:fixed;
  width:100%;
  min-width:840px;
  border-collapse:collapse;
  background:var(--sheet);
  border-top:1.5px solid var(--ink);
}
thead th{
  font-weight:400; font-size:11px; line-height:1.4; letter-spacing:.1em; color:var(--dim);
  text-align:left; background:var(--paper-dim); padding:12px 14px; border-bottom:1px solid var(--ink);
}
tbody td, tbody th{ font-size:13px; line-height:1.65; vertical-align:top; padding:14px; border-bottom:1px solid var(--rule); }
tbody th{ font-weight:400; text-align:left; }

/* 台帳のみ: 制度詳細ページへのリンクが自治体名に載るため行ホバーを復活させる
   （hoverとfocus-visibleの対をDESIGN.mdの規律どおり必ず両輪で持つ）。 */
.ledger tbody tr:hover,
.ledger tbody tr:has(a:focus-visible){ background:var(--paper-dim); }

.c-pref{ display:block; font-size:11.5px; line-height:1.5; color:var(--dim); }
.c-city{ display:block; color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; transition:color var(--t), border-color var(--t); }
a.c-city:hover{ color:var(--bengara); border-bottom-color:var(--rule); }
a.c-city:focus-visible{ outline:2px solid var(--bengara); outline-offset:2px; }
.c-name{ letter-spacing:.01em; }
.num{ text-align:right; white-space:nowrap; }
.qual{ font-size:11.5px; color:var(--dim); margin-left:.35em; }
.flat{ color:var(--dim); }

col.w-city{ width:11.79%; }
col.w-name{ width:26.35%; }
col.w-work{ width:17.14%; }
col.w-cat { width:11.79%; }
col.w-rate{ width:10.54%; }
col.w-max { width:11.20%; }
col.w-stat{ width:11.20%; }

.chips{ display:flex; flex-direction:column; gap:6px; }
.chip{ display:flex; align-items:center; gap:8px; font-size:13px; line-height:1.4; }
.sw{ flex:none; width:12px; height:12px; border:1px solid var(--rule); border-radius:3px; }
.sw-wall{ background:var(--bengara); }
.sw-roof{ background:var(--chip-roof); }
.sw-eco { background:var(--moss); }
.sw-etc { background:var(--dim); }

/* 補助区分タグの記号（templates/_tag_icons.html ＋ scripts/subsidy_tags.py と対応）。
   区分名は自治体の原文そのままなので、記号は読み替えではなく先頭に置く手がかりに留める。
   判定できない区分には記号を出さない（タグなしのまま原文だけを見せる）。 */
.tag-mark{ display:inline-block; flex:none; width:14px; margin-right:6px; vertical-align:-2px; color:var(--dim); }
.tag-icon{ display:block; width:14px; height:14px; }
/* 記号のない行にも同じ幅を確保し、区分名の左端を台帳として揃える。 */
.tag-mark--none{ height:14px; }
tr:hover .tag-mark{ color:var(--bengara); }

.status{
  display:inline-block; border:1px solid var(--rule); border-radius:3px;
  padding:2px 9px; font-size:11.5px; line-height:1.6; color:var(--dim); white-space:nowrap;
}
.status--open{ color:var(--moss); border-color:var(--moss); }
.status--closed{ color:var(--dim); border-color:var(--rule); }
.status--warn{ color:var(--shu); border-color:var(--shu); }

.section-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-top:36px; }
.section-foot .source{ max-width:44em; }

.stamp{ display:block; width:88px; height:88px; transform:rotate(-6deg); }
.stamp-wrap{ flex:none; padding:6px; }

/* ============================================================
   収録している補助区分（トップページ）
   罫線1本で仕切る帳票の並び。カードを浮かせない（影ゼロ・角丸0）ため、
   都道府県索引と同じく 1px の隙間を背景色で見せる方式にする。
   件数は実測値で、絵は区分の見当をつけるための挿図に留める。
   ============================================================ */
.tag-index{ border-top:1px solid var(--rule); padding:72px 0 80px; }
.tag-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule); list-style:none;
}
.tag-card{ display:flex; flex-direction:column; background:var(--sheet); }
.tag-card .plate{ border:0; border-bottom:1px solid var(--rule); }
.tag-card-body{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:12px 16px 13px;
}
.tag-card-name{ display:flex; align-items:center; font-size:13px; line-height:1.5; }
.tag-card-count{ font-size:15px; line-height:1.4; color:var(--dim); white-space:nowrap; }

/* ============================================================
   都道府県から探す（トップページ）
   ============================================================ */
.pref-index{ border-top:1px solid var(--rule); padding:72px 0 96px; }
.pref-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); list-style:none; }
.pref-link{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 16px; background:var(--sheet); color:var(--ink); text-decoration:none;
  transition:background var(--t), color var(--t);
}
.pref-link:hover{ background:var(--paper-dim); color:var(--bengara); }
.pref-link:focus-visible{ outline:2px solid var(--bengara); outline-offset:-2px; }
.pref-link-name{ font-size:13px; }
.pref-link-count{ font-size:11.5px; color:var(--dim); }

/* ============================================================
   都道府県ページ・自治体ページ共通の本文セクション
   ============================================================ */
.pref-page, .city-page, .legal-page, .error-page{ padding:64px 0 96px; }
.pref-page h1, .city-page h1, .legal-page h1, .error-page h1{ font-size:26px; line-height:1.6; margin-bottom:22px; }
.pref-page .lead, .city-page .lead{ margin-bottom:32px; }

.rate-table, .pref-table{ min-width:0; }
.rate-table th, .rate-table td, .pref-table th, .pref-table td{ font-size:13px; }
.rate-table col.w-cat, .pref-table col.w-city{ width:38%; }
.rate-table col.w-rate, .pref-table col.w-has{ width:22%; }
.rate-table col.w-max, .pref-table col.w-count{ width:20%; }
.pref-table col.w-status{ width:26%; }

/* ============================================================
   自治体ページ: 制度カード（角丸カード多用の禁止に従い、直線の帳票様式にする）
   ============================================================ */
.programs{ display:flex; flex-direction:column; gap:0; }
.program{ border-top:1.5px solid var(--ink); padding:32px 0; }
.program:first-child{ padding-top:0; }
.program-name{ font-size:16px; line-height:1.6; margin-bottom:16px; }
.program .chips{ flex-direction:row; flex-wrap:wrap; gap:8px 20px; margin-bottom:20px; }

/* 制度名の横に対象世帯の図版を置く。同じタグの2件目以降には出さない
   （scripts/site_data.py の attach_illustrations）。図版の無い制度は従来どおり全幅。 */
/* 図版のほうが背が高く行の高さを決めるため、表との間隔はここで確保する
   （図版の無い制度は .chips の margin-bottom がそのまま効く）。
   幅140pxは「本文に対する挿図」の寸法。制度カードは原文引用・出典・確認日という
   証拠の単位なので、図版がその主役になる面積を与えない。 */
.program-head--fig{ display:grid; grid-template-columns:1fr 140px; gap:32px; align-items:start; margin-bottom:20px; }

.kv{ margin-top:20px; border-top:1px solid var(--rule); }
.kv-row{ display:grid; grid-template-columns:180px 1fr; gap:20px; padding:10px 0; border-bottom:1px solid var(--rule); }
.kv-row dt{ font-size:11px; letter-spacing:.06em; color:var(--dim); }
.kv-row dd{ margin:0; font-size:13px; line-height:1.7; }
.conditions{ list-style:none; }
.conditions li{ position:relative; padding-left:1.2em; }
.conditions li::before{ content:"・"; position:absolute; left:0; color:var(--dim); }

.absence{ border-top:1.5px solid var(--ink); padding-top:28px; }
.quote{
  margin:0 0 24px; padding:20px 24px; background:var(--sheet); border:1px solid var(--rule);
  border-left:3px solid var(--shu);
}
.quote p{ font-size:14px; line-height:1.9; }

/* ============================================================
   運営者情報・プライバシーポリシー
   ============================================================ */
.legal-body{ display:flex; flex-direction:column; gap:36px; }
.legal-article h2{ font-size:16px; line-height:1.7; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--rule); }
.legal-article .plate{ max-width:300px; margin-bottom:18px; }
.legal-article p{ font-size:13.5px; line-height:1.95; margin-bottom:10px; }
.legal-article p:last-child{ margin-bottom:0; }

/* ============================================================
   フッター
   ============================================================ */
.site-footer{ border-top:2px solid var(--ink); padding:48px 0 40px; }
.footer-grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.footer-brand{ max-width:44em; }
.footer-brand-name{ font-family:var(--mincho); font-weight:600; font-size:15px; margin-bottom:10px; }
.footer-line{ font-size:11.5px; line-height:1.8; color:var(--dim); }
.footer-nav ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.footer-nav a{ font-size:13px; color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; transition:color var(--t), border-color var(--t); }
.footer-nav a:hover{ color:var(--bengara); border-bottom-color:var(--rule); }
.footer-nav a:focus-visible{ outline:2px solid var(--bengara); outline-offset:2px; }

/* ============================================================
   960px以下: 台帳(ledger table)を「1制度 = 1ブロック」の縦積みへ再構成する。
   ============================================================ */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr 330px; gap:52px; }
}

@media (max-width:960px){
  .ledger .table-scroll{ overflow:visible; }
  .ledger table{ display:block; min-width:0; border-top:0; background:none; }
  .ledger thead{ display:none; }

  .ledger tbody{
    display:grid; grid-template-columns:1fr max-content max-content; column-gap:16px; row-gap:9px;
    background:var(--sheet); border:1px solid var(--rule); border-top:1.5px solid var(--ink);
    padding:16px 14px 15px; margin-bottom:14px;
  }
  .ledger tbody:last-of-type{ margin-bottom:0; }
  .ledger tr{ display:contents; }

  .ledger tbody td, .ledger tbody th{ display:block; padding:0; border:0; font-size:13px; line-height:1.7; }

  .ledger tbody th{ order:1; grid-column:1 / -1; }
  .ledger .c-pref{ display:inline; margin-right:.6em; }
  .ledger .c-city{ display:inline; font-size:15px; letter-spacing:.02em; }

  .ledger .c-name{ order:2; grid-column:1 / -1; }

  .ledger .c-work{ order:3; grid-column:1 / -1; margin-top:3px; padding-top:14px; border-top:1px solid var(--rule); }
  .ledger .chips{ flex-direction:row; flex-wrap:wrap; gap:8px 18px; }

  .ledger .c-cat { order:4; grid-column:1; }
  .ledger .c-rate{ order:4; grid-column:2; }
  .ledger .c-max { order:4; grid-column:3; }
  .ledger .c-cat--none{ display:none; }
  .ledger .c-rate::before{ content:"率"; margin-right:.5em; font-size:11.5px; color:var(--dim); }
  .ledger .c-max::before { content:"上限"; margin-right:.5em; font-size:11.5px; color:var(--dim); }

  .ledger .c-stat{ order:5; grid-column:1 / -1; margin-top:3px; padding-top:14px; border-top:1px solid var(--rule); }

  .pref-grid{ grid-template-columns:repeat(2, 1fr); }
  .tag-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* rate-table / pref-table: 短い列数のため縦積みカードではなく行内ラベル方式で
   横スクロールを避ける（J章「モバイルで横スクロールしない」）。 */
@media (max-width:640px){
  .stack-table, .stack-table thead, .stack-table tbody, .stack-table tr, .stack-table th, .stack-table td{ display:block; width:auto; }
  .stack-table{ border-top:0; }
  .stack-table thead{ display:none; }
  .stack-table tr{ border-top:1.5px solid var(--ink); padding:10px 0; }
  .stack-table tbody tr:first-child{ border-top:1.5px solid var(--ink); }
  .stack-table td, .stack-table th{
    display:flex; justify-content:space-between; align-items:baseline; gap:12px;
    padding:5px 0; border:0; text-align:left; white-space:normal;
  }
  .stack-table td::before, .stack-table th[data-label]::before{
    content:attr(data-label); flex:none; font-size:11px; letter-spacing:.06em; color:var(--dim);
  }
}

@media (max-width:860px){
  .wrap{ width:calc(100% - 64px); }
  .titleblock .tb-grid{ grid-template-columns:1fr 1fr; }
  .tb-name{ grid-column:1 / -1; padding-right:0; padding-bottom:14px; }
  .tb-meta{ border-top:1px solid var(--rule); padding-top:14px; }
  .tb-meta:first-of-type{ border-left:0; padding-left:0; }

  .hero{ padding:64px 0 68px; }
  .hero-grid{ grid-template-columns:1fr; gap:48px; align-items:start; }
  .fig{ max-width:420px; }

  /* 図版は縦積みへ。幅は 300px 止まり（scripts/illustrations.py の MAX_DISPLAY_WIDTH）。
     これを超えると2倍解像度の画面が 1200px 版を引き、1枚180KBになる。 */
  .sec-block--fig{ grid-template-columns:1fr; gap:24px; }
  .sec-block--fig .plate{ max-width:300px; }
  .program-head--fig{ grid-template-columns:1fr; gap:20px; }
  .program-head--fig .plate{ max-width:300px; }

  .ledger{ padding:64px 0 72px; }
  .section-foot{ flex-direction:column; align-items:flex-start; gap:28px; }
  .stamp-wrap{ align-self:flex-end; }

  .pref-index{ padding:56px 0 72px; }
  .kv-row{ grid-template-columns:140px 1fr; }
}
@media (max-width:520px){
  .wrap{ width:calc(100% - 48px); }
  .titleblock .tb-grid{ grid-template-columns:1fr 1fr; }
  .tb-cell{ padding:14px 0; }
  .wordmark{ font-size:19px; }
  .tb-en{ letter-spacing:.16em; }
  .tb-meta{ padding-left:16px; }

  .hero{ padding:52px 0 56px; }
  h1{ font-size:24px; line-height:1.68; }
  .kicker{ font-size:12px; letter-spacing:.14em; margin-bottom:20px; }
  .lead{ margin-bottom:32px; }
  .actions{ gap:22px; }
  .btn{ padding:14px 26px; }

  .ledger{ padding:56px 0 64px; }
  .sec-head{ gap:14px; margin-bottom:20px; }
  .sec-head h2{ font-size:18px; }

  .ledger tbody{ grid-template-columns:max-content 1fr; column-gap:14px; row-gap:7px; }
  .ledger .c-cat { grid-column:1 / -1; margin-top:5px; }
  .ledger .c-rate{ grid-column:1; padding-left:1.1em; }
  .ledger .c-max { grid-column:2; justify-self:start; }

  .pref-grid{ grid-template-columns:1fr; }
  .tag-index{ padding:56px 0 64px; }
  /* 1列では図版が画面幅いっぱいになり、区分の一覧というより挿絵の連続に見える。
     横並びの行に組み替えて一覧性を保ち、読み込む画像も小さいまま済ませる。 */
  .tag-grid{ grid-template-columns:1fr; }
  .tag-card{ flex-direction:row; align-items:stretch; }
  .tag-card .plate{ flex:none; width:112px; border-bottom:0; border-right:1px solid var(--rule); }
  .tag-card-body{ flex:1; align-items:center; padding:10px 14px; }
  .kv-row{ grid-template-columns:1fr; gap:4px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}