/* こども制度 のってる？チェック 単一CSS・依存なし（外部フォント／外部CSS／CDNは読み込まない）
   色は必ず :root の変数に置き、ダークは変数だけ差し替える（個別セレクタに生のHEXを書かない）。
   赤は使わない。状態は文字のバッジで表す。図形は割合バーだけ。 */
:root{
  --bg:#f6f4ef;
  --panel:#ffffff;
  --ink:#1e2328; --ink-2:#4a5460; --ink-3:#6e7885;
  --line:#e3e0d8; --line-2:#f0eee8;
  --accent:#1f3a5f; --accent-bg:#e7edf6; --accent-line:#d3ddec;
  --on-accent:#ffffff;
  --th-bg:#eef1f6;
  --track:#dfe6f0;
  --yes:#2f6b54; --yes-bg:#e6efe9; --yes-soft:#f2f7f3;
  --no:#5a5f66; --no-bg:#ecebe6;
  --gap:#8a5a12; --gap-bg:#f6eddc; --gap-line:#e0cba4;
  --unknown:#6e7885; --unknown-bg:#f0eee8;
  --radius:8px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14181c;
    --panel:#1b2126;
    --ink:#e8ecef; --ink-2:#b6c0c9; --ink-3:#96a1ab;
    --line:#333c45; --line-2:#262d34;
    --accent:#8fb6da; --accent-bg:#1e2b33; --accent-line:#33475a;
    --on-accent:#12181c;
    --th-bg:#222a31;
    --track:#2c353d;
    --yes:#7fd3b3; --yes-bg:#16302a; --yes-soft:#172520;
    --no:#a8b0b8; --no-bg:#262c32;
    --gap:#e0b063; --gap-bg:#33291a; --gap-line:#54452a;
    --unknown:#96a1ab; --unknown-bg:#242a30;
  }
}

*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:inherit;
  font-size:16px; line-height:1.8; word-break:normal; overflow-wrap:anywhere;
}
.wrap{max-width:960px; margin:0 auto; padding:0 16px}
a{color:var(--accent)}
a:hover{text-decoration:none}
strong{font-weight:700}

/* header */
.site-head{background:var(--panel); border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:6px 24px; padding-top:14px; padding-bottom:14px}
.site-name{margin:0; font-size:18px; font-weight:700; letter-spacing:.02em}
.site-name a{color:var(--accent); text-decoration:none}
.site-nav{display:flex; flex-wrap:wrap; gap:2px 20px; font-size:14px; margin-left:auto}
.site-nav a{color:var(--ink-2); text-decoration:none; padding:2px 0; border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--accent)}
.site-nav a.on{color:var(--accent); border-bottom-color:var(--accent)}

main.wrap{padding-top:32px; padding-bottom:56px}
h1{font-size:30px; line-height:1.5; margin:0 0 14px; color:var(--accent); letter-spacing:.01em}
h1 .code{font-size:15px; color:var(--ink-3); font-weight:400; margin-left:8px; font-variant-numeric:tabular-nums}
h2{font-size:20px; margin:34px 0 14px; color:var(--accent); line-height:1.5}
h2 .fine{color:var(--ink-3)}
h3{font-size:17px; margin:0 0 8px; color:var(--accent); line-height:1.5}
p{margin:0 0 14px}
.lead{font-size:16px; color:var(--ink-2)}
.fine{font-size:13px; color:var(--ink-3); line-height:1.7}
.crumb{font-size:13px; color:var(--ink-3); margin-bottom:10px}
.offsite{font-size:14px}
.offsite a{margin-right:2px}
section{margin-bottom:8px}
:target{scroll-margin-top:16px}

/* 「134自治体の中で」などの一言（薄い紺地・角丸・左罫なし） */
.summary{background:var(--accent-bg); color:var(--ink); padding:14px 18px; border-radius:var(--radius); margin:0 0 10px}
.summary strong{color:var(--accent)}

/* 白いカード（見出しごと包む） */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:4px 20px 18px; margin:0 0 22px}
.panel h2{margin:18px 0 12px}
.panel .scroll{border:0; border-radius:0; background:transparent; margin-bottom:0}
.panel>p:last-child{margin-bottom:0}

/* 数字カード（findings.html・houday.html） */
.figs{display:flex; flex-wrap:wrap; gap:16px; margin:22px 0 14px}
.fig{flex:1 1 260px; background:var(--yes-soft); border:1px solid var(--line); border-radius:var(--radius); padding:20px 16px 18px; text-align:center}
.fig-num{margin:0; font-size:38px; line-height:1.15; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.fig-num span{font-size:20px; margin-left:2px}
.fig-label{display:inline-block; margin:10px 0 0; padding:3px 16px; border-radius:4px;
  background:var(--yes-bg); color:var(--ink); font-size:14px; font-weight:600}
.fig-sub{margin:10px 0 0; font-size:15px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.fig-sub strong{font-size:19px; color:var(--accent); margin-right:2px}

/* 検索（JSなしでも form が muni/index.html に飛ぶ） */
.searchbox{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px 20px; margin:24px 0 26px}
.searchbox label{display:block; font-size:17px; font-weight:700; color:var(--accent); margin-bottom:10px}
.searchrow{display:flex; gap:12px}
.searchrow input{
  flex:1 1 auto; min-width:0; height:48px; padding:0 14px;
  font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
}
.searchrow input::placeholder{color:var(--ink-3)}
.searchrow input:focus{outline:2px solid var(--accent); outline-offset:1px}
.searchrow .btn{flex:0 0 auto; height:48px; padding:0 36px; display:inline-flex; align-items:center; justify-content:center}
.searchbox .fine{margin:12px 0 0}
.searchbox .chips{margin-top:10px}

/* トップ最上部の検索（見出しごと1枚のカードに入れる） */
.searchbox-hero{margin-top:0; padding:26px 24px 24px}
.searchbox-hero h1{font-size:28px; line-height:1.5; margin:0 0 10px}
.searchbox-hero .lead{margin:0 0 18px}
.searchbox-hero label{font-size:15px}

/* トップ「公式サイトに載っているもの・載っていないもの」 */
ul.honest{margin:0 0 14px; padding-left:1.3em}
ul.honest li{margin-bottom:10px; line-height:1.8}
ul.honest li:last-child{margin-bottom:0}
.hl-n{font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums}

/* 都道府県チップ */
.chips{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:14px 0 24px}
.chip{display:inline-block; background:var(--panel); border:1px solid var(--accent-line); color:var(--accent); border-radius:999px; padding:5px 15px; font-size:14px; text-decoration:none}
.chip:hover{background:var(--accent-bg)}
.chip-n{margin-left:6px; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}

.btn{display:inline-block; background:var(--accent); color:var(--on-accent); border:0; border-radius:6px; padding:11px 24px; font-family:inherit; font-size:15px; font-weight:700; text-decoration:none; cursor:pointer}
.btn:hover{opacity:.92}

/* steps */
.steps{margin:0 0 14px; padding-left:1.4em}
.steps li{margin-bottom:8px}

/* notice（この数字を読むときの注意／この表の読み方） */
.notice{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:4px 20px 18px; margin:28px 0 22px}
.notice h2{margin:18px 0 10px}
.notice ul{margin:0; padding-left:1.3em}
.notice li{margin-bottom:6px}
.notice li:last-child{margin-bottom:0}

/* cards（入口） */
.cards{display:flex; flex-wrap:wrap; gap:14px}
.card{flex:1 1 260px; display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; text-decoration:none; color:var(--ink)}
.card:hover{border-color:var(--accent)}
.card-t{display:block; font-weight:700; color:var(--accent); margin-bottom:4px}
.card-d{display:block; font-size:14px; color:var(--ink-2); line-height:1.7}
/* トップ「このサイトで分かること」の3枚（カード全体はリンクにしない） */
.card-plain{cursor:auto}
.card-plain:hover{border-color:var(--line)}
.card-n{display:block; margin-top:8px; font-size:13px; color:var(--ink-3); line-height:1.7}
.card-go{display:block; margin-top:10px; font-size:14px}
.btn-sub{background:var(--panel); color:var(--accent); border:1px solid var(--accent-line)}
.btn-sub:hover{background:var(--accent-bg); opacity:1}

/* 4つのテーマの結果（findings.html のハブ・PC2列／スマホ1列） */
.hub{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0 0 12px}
.hubcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px}
.hubcard h3{margin:0 0 8px}
.hubcard .hub-lead{margin:0 0 10px; font-size:14px; color:var(--ink-2); line-height:1.75}
.hubcard .fine{margin:10px 0 0}
/* 学童は主役なので、枠を濃紺の2pxにして一回り大きく見せる（色は増やさない） */
.hubcard-main{border:2px solid var(--accent); padding:20px 22px}
.hubcard-main h3{font-size:20px}
.hubcard-main .hub-lead{font-size:15px; color:var(--ink)}
.hubbar{display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px;
  padding:7px 0; border-bottom:1px solid var(--line-2); font-size:14px}
.hubbar:last-child{border-bottom:0}
.hb-k{flex:1 1 8em; min-width:0}
.hb-n{flex:0 0 5.4em; text-align:right; color:var(--ink-2); font-variant-numeric:tabular-nums}
.hb-bar{flex:0 0 auto; white-space:nowrap}
.hub-go{margin:12px 0 0; font-size:14px}

/* 市町村ページ：テーマごとの「親の質問 → 答え」 */
.theme{padding:4px 20px 10px}
.theme>.fine{margin:0 0 6px}
.theme-sub{background:var(--bg)}
.qalist{margin:6px 0 0}
.qa{padding:14px 0; border-bottom:1px solid var(--line-2)}
.qa:last-child{border-bottom:0}
.qa-q{margin:0 0 6px; font-size:16px; font-weight:700; color:var(--accent); line-height:1.6}
.qa-a{margin:0; font-size:15px; line-height:1.8}
.qa-a .st{margin-right:8px}
.qa-a .badge{margin-right:6px}
.qa-d{margin:6px 0 0; font-size:13px; color:var(--ink-3); line-height:1.7;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px}
.qa-d a.src{flex:0 1 auto; min-width:0}
.h2-sub{font-size:17px}

/* tables */
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel)}
table.data{border-collapse:collapse; width:100%; font-size:14px}
table.data.wide{min-width:660px}
table.data th, table.data td{padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line-2)}
table.data thead th{background:var(--th-bg); color:var(--ink-2); font-weight:700; font-size:13px; white-space:nowrap; border-bottom:1px solid var(--line)}
table.data tbody tr:last-child td{border-bottom:0}
table.data td{color:var(--ink)}
table.data td:first-child{min-width:8em}
table.data td .nowrap{display:inline-block}
table.rubric td:first-child{min-width:2em; text-align:center}

/* status */
.st{display:inline-block; font-size:13px; font-weight:600; padding:3px 13px; border-radius:999px; white-space:nowrap}
.st-yes{color:var(--yes); background:var(--yes-bg)}
.st-no{color:var(--no); background:var(--no-bg)}
.st-gap{color:var(--gap); background:var(--gap-bg)}
.st-unknown{color:var(--unknown); background:var(--unknown-bg)}
.badge{display:inline-block; font-size:12px; padding:2px 12px; border-radius:999px; color:var(--gap); background:var(--panel); border:1px solid var(--gap-line); white-space:nowrap}
.quote{color:var(--ink-2)}
.nowrap{white-space:nowrap}
a.src{color:var(--accent); font-size:13px; display:inline-block; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom}

/* bar（項目一覧の表の中・96px固定） */
.bar{display:inline-block; width:96px; height:8px; background:var(--track); border-radius:4px; overflow:hidden; vertical-align:middle; margin-right:8px}
.bar-in{display:block; height:100%; background:var(--accent); border-radius:4px}
.bar-num{font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums}

/* グループ別の割合バー（項目ページ） */
.grouprows{margin:0 0 4px}
.grouprow{display:flex; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--line-2); font-size:15px}
.grouprow:last-child{border-bottom:0}
.g-name{flex:0 0 13em}
.gbar{flex:1 1 auto; min-width:48px; height:8px; background:var(--track); border-radius:4px; overflow:hidden}
.g-num{flex:0 0 5.4em; text-align:right; color:var(--ink-2); font-variant-numeric:tabular-nums}
.g-pct{flex:0 0 4.4em; text-align:right; color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums}

/* 調べ方・このサイトについて（本文直下の小見出しと運営者欄） */
main.wrap>h3{margin-top:28px}
.about-dl{margin:0 0 14px}
.about-dl dt{font-weight:700; color:var(--ink-3); font-size:13px; margin-top:12px}
.about-dl dd{margin:2px 0 0}

ul.plain{list-style:none; padding:0; margin:0 0 14px}
ul.plain li{margin-bottom:4px; font-size:14px; color:var(--ink-2)}

/* footer */
.site-foot{background:var(--panel); border-top:1px solid var(--line); padding:28px 0 40px; margin-top:24px}
.site-foot h2{font-size:15px; margin:20px 0 8px; color:var(--ink-2)}
.site-foot p{font-size:14px; color:var(--ink-2)}

/* ------- スマホ（ページ全体の横スクロールを作らない。列の多い表だけ枠の中で横に動かす） ------- */
@media (max-width:700px){
  .hub{grid-template-columns:1fr}
  .hubcard-main{padding:18px 18px}
  /* 表を1行＝1カードに畳む（JSなし・td の data-label を見出しに使う） */
  table.data.cardify{min-width:0; display:block}
  table.data.cardify thead{display:none}
  table.data.cardify tbody{display:block}
  table.data.cardify tr{display:block; padding:14px 4px; border-bottom:1px solid var(--line)}
  table.data.cardify tbody tr:last-child{border-bottom:0}
  table.data.cardify td{display:flex; gap:10px; border:0; padding:3px 0; font-size:14px}
  table.data.cardify td::before{
    content:attr(data-label); flex:0 0 10em;
    background:var(--line-2); color:var(--ink-2); font-size:12px; line-height:1.8;
    padding:0 4px; border-radius:3px;
  }
  table.data.cardify td:first-child{display:block; font-size:16px; font-weight:700; margin-bottom:6px; min-width:0}
  table.data.cardify td:first-child::before{display:none}
  a.src{display:inline-block; padding:9px 0}
  .qa-d{gap:2px 12px}
  .qa-q{font-size:15px}
}
@media (max-width:600px){
  body{font-size:15px}
  main.wrap{padding-top:22px}
  h1{font-size:24px}
  h2{font-size:18px; margin-top:28px}
  .searchbox-hero{padding:20px 16px 18px}
  .searchbox-hero h1{font-size:22px}
  .figs{flex-direction:column; gap:12px; margin-top:18px}
  .fig{flex:1 1 auto}
  .fig-num{font-size:32px}
  .searchrow{flex-direction:column}
  .searchrow .btn{width:100%; padding:0}
  .panel{padding:4px 16px 16px}
  .notice{padding:4px 16px 16px}
  .grouprow{gap:8px; font-size:14px; padding:9px 0}
  .g-name{flex:0 0 8.5em}
  .g-num{flex:0 0 4.6em; font-size:13px}
  .g-pct{flex:0 0 3.6em; font-size:13px}
  /* 幅が足りないので、項目名を1行目・件数とバーを2行目に折り返す */
  .hb-k{flex:1 1 100%}
  .hb-n{flex:0 0 auto; text-align:left}
  table.data.cardify td{min-width:0}
  table.data.cardify td>*{min-width:0}
  .site-nav{margin-left:0; gap:2px 14px; font-size:13px}
}
/* 320px級まで詰まったら、グループ名を1行目・バーと数値を2行目に折り返す */
@media (max-width:430px){
  .grouprow{flex-wrap:wrap; gap:2px 10px}
  .g-name{flex:1 1 100%}
  .gbar{flex:1 1 60px}
  .g-num, .g-pct{flex:0 0 auto}
}