/* ひとり親の養育費 ― スタイル ============================================================ ★ トンマナは自治体サイト（八千代市公式ホームページ）に寄せています ★ 2026-09-07 変更。姉妹サイト（babycar / carseat など）の 紺青1色・角丸4px・装飾抑制とは意図的に別物にしています。 理由：読む人が「困っていて、役所の情報を探している」状態だからです。 役所のページと地続きに見えるほうが、身構えずに読めます。 ★ 姉妹サイトの配色をここに持ち込まないでください ★ 寄せた要素: ・淡いセージグリーンの帯を見出しに使う（中央寄せ） ・角丸は大きめ。円形のアイコンタイルで入口を作る ・白地＋クリーム。リンクは青 ・平面のイラスト（インラインSVG）。写真は使わない ★★ このサイトだけの決めごと ★★ 読む人は「養育費が払われていない」状況にいます。 ・煽らない。数字を大きくして不安にさせない。 ・「必ず回収できます」と読める見せ方をしない（check.mjs で弾いています）。 ・出典と確認日は小さくても必ず出す。消さないでください。 ・自治体に順位や点数を付けない。有無と金額を並べるだけにします。 ★★ このファイルを直したら各HTMLの ?v= の数字を上げてください ★★ Cloudflare Pages は CSS を4時間キャッシュします（max-age=14400）。 HTML は max-age=0 なので、直後は「新しいHTML＋古いCSS」になります。 tire-chart で 2026-08-07 に実際に壊れました。 ★ 色は必ず変数を通すこと ★ 直書きするとダークに追従しません。 ============================================================ */ /* ---------- 明るい地（既定） ---------- */ :root { color-scheme: light; --bg: #ffffff; --bg-tint: #f4f9f8; /* ページ下部などのごく薄い地 */ --card: #ffffff; --card-2: #f7faf9; --cream: #fcf6ed; /* 補足の囲み。八千代市の淡いベージュ */ --ink: #333333; --head: #2a2a2a; --body-text: #333333; --sub: #667077; --sub3: #8b9298; --line: #e6e7e8; --line-strong: #cfd6d5; /* ★ 主役の色＝淡いセージグリーン ★ 帯と縁に使います */ --band: #b2d7d3; --band-deep: #73baba; --band-ink: #2f5f5c; /* 帯の上に載せる文字 */ --accent: #4a9c98; /* 線・印に使う締めの色 */ --on-accent: #ffffff; --link: #0066cc; --link-hover: #004e9c; --good: #2f7d5f; --good-bg: #eef7f2; --good-line: #c6e0d3; --caution: #8a6320; --caution-bg: #fcf6ed; --caution-line: #e6d9be; --info: #2f5f5c; --info-bg: #eef6f5; --info-line: #cbe3e0; /* 急ぎの導線にだけ使う色。多用しないこと */ --urgent: #c1553f; --urgent-bg: #fdf3f0; --urgent-line: #f0d3cb; --shadow: rgba(45, 70, 68, 0.05); --shadow-lift: rgba(45, 70, 68, 0.13); /* ★ 角丸は大きめ ★ 自治体サイトのやわらかさはここから来ています */ --radius: 10px; --radius-lg: 20px; --radius-sm: 6px; } /* ---------- 暗い地 ---------- theme.js が を必ず入れます。 JS が動かない環境のために prefers-color-scheme 版も置いています。 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #171c1c; --bg-tint: #1b2222; --card: #212828; --card-2: #273030; --cream: #2a2620; --ink: #eef2f1; --head: #ffffff; --body-text: #dde4e3; --sub: #a3aeac; --sub3: #7f8b89; --line: #313a3a; --line-strong: #45514f; --band: #2f5f5c; --band-deep: #3f7d79; --band-ink: #d8ecea; --accent: #7cc4bf; --on-accent: #10201f; --link: #7fbcf0; --link-hover: #a8d3f7; --good: #74cfa4; --good-bg: #17271f; --good-line: #2c4a3a; --caution: #dfb96a; --caution-bg: #272016; --caution-line: #4a3d22; --info: #8fd0cb; --info-bg: #162423; --info-line: #2c4744; --urgent: #e88c76; --urgent-bg: #2b1a16; --urgent-line: #4e2f26; --shadow: rgba(0, 0, 0, 0.32); --shadow-lift: rgba(0, 0, 0, 0.5); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #171c1c; --bg-tint: #1b2222; --card: #212828; --card-2: #273030; --cream: #2a2620; --ink: #eef2f1; --head: #ffffff; --body-text: #dde4e3; --sub: #a3aeac; --sub3: #7f8b89; --line: #313a3a; --line-strong: #45514f; --band: #2f5f5c; --band-deep: #3f7d79; --band-ink: #d8ecea; --accent: #7cc4bf; --on-accent: #10201f; --link: #7fbcf0; --link-hover: #a8d3f7; --good: #74cfa4; --good-bg: #17271f; --good-line: #2c4a3a; --caution: #dfb96a; --caution-bg: #272016; --caution-line: #4a3d22; --info: #8fd0cb; --info-bg: #162423; --info-line: #2c4744; --urgent: #e88c76; --urgent-bg: #2b1a16; --urgent-line: #4e2f26; --shadow: rgba(0, 0, 0, 0.32); --shadow-lift: rgba(0, 0, 0, 0.5); } /* ---------- 土台 ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--body-text); /* ★ 自治体サイトの標準的な書体 ★ Noto Sans JP を先頭に、無ければ Meiryo 系 */ font-family: "Noto Sans JP", Meiryo, "メイリオ", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", sans-serif; font-size: 15px; line-height: 1.85; -webkit-font-smoothing: antialiased; } a { color: var(--link); } a:hover { color: var(--link-hover); } :focus-visible { outline: 3px solid var(--band-deep); outline-offset: 2px; } img, svg { max-width: 100%; } .wrap { max-width: 900px; margin: 0 auto; padding: 0 18px; } /* ---------- サイトの頭 ---------- */ header.site { padding: 22px 0 0; display: flex; flex-direction: column; gap: 12px; } .site h1 { margin: 0; font-size: clamp(21px, 3.4vw, 27px); line-height: 1.55; color: var(--head); font-weight: 700; text-wrap: balance; } .site .tagline { margin: 0; color: var(--sub); font-size: 14.5px; max-width: 62ch; } .topbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; border-top: 3px solid var(--band); padding-top: 10px; } .topbar .tagline { font-size: 12px; color: var(--sub3); letter-spacing: .04em; } .theme-switch { display: flex; gap: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; } .theme-switch button { font: inherit; font-size: 12px; line-height: 1.6; background: var(--card); color: var(--sub); border: none; border-right: 1px solid var(--line); padding: 5px 14px; cursor: pointer; } .theme-switch button:last-child { border-right: none; } .theme-switch button[aria-pressed="true"] { background: var(--band-deep); color: #ffffff; } .theme-switch .label { font-size: 12px; color: var(--sub3); padding: 5px 8px 5px 0; } /* ---------- 見出しの帯 ---------- ★ 自治体サイトらしさの核 ★ 淡い緑の帯に、中央寄せの見出し */ .section-title { margin: 0 0 18px; background: var(--band); color: var(--band-ink); font-size: 17px; font-weight: 700; line-height: 1.6; text-align: center; padding: 9px 16px; border-radius: var(--radius-sm); } .section-label { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--sub); text-align: center; } section.block { padding: 38px 0 0; } /* ---------- 入口（円のイラスト＋見出し） ---------- 八千代市の「生活シーンからさがす」に当たる部分です */ .entries { padding: 26px 0 0; } /* ★ 入口は4つ ★ 3+1 になると4つ目が余って見えるので、2列で2段に揃えます */ .entry-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 620px) { .entry-grid { grid-template-columns: repeat(2, 1fr); } } .entry { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 20px 20px; box-shadow: 0 1px 3px var(--shadow); text-decoration: none; color: inherit; text-align: center; transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; } .entry:hover { box-shadow: 0 6px 16px var(--shadow-lift); border-color: var(--band-deep); transform: translateY(-2px); } /* 円のアイコン。中身はインラインSVG */ .entry .icon { width: 84px; height: 84px; border-radius: 50%; background: var(--bg-tint); border: 2px solid var(--band); display: flex; align-items: center; justify-content: center; flex: none; } .entry:hover .icon { background: var(--card-2); border-color: var(--band-deep); } .entry .icon svg { width: 48px; height: 48px; display: block; } .entry h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--head); line-height: 1.5; } .entry .who { font-size: 12.5px; color: var(--sub); font-weight: 700; } .entry p { margin: 0; font-size: 13.5px; text-align: left; } .entry .go { margin-top: 4px; font-size: 13.5px; font-weight: 700; color: var(--link); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 5px 16px; background: var(--card-2); } .entry .go::after { content: " ›"; } .entry:hover .go { background: var(--band); color: var(--band-ink); border-color: var(--band-deep); } /* いちばん急ぐ人の入口だけ色を変える。ここ以外に --urgent を使わないこと */ .entry.urgent { background: var(--urgent-bg); border-color: var(--urgent-line); } .entry.urgent .icon { border-color: var(--urgent); background: var(--card); } .entry.urgent .who { color: var(--urgent); } .entry.urgent:hover { border-color: var(--urgent); } .entry.urgent:hover .go { background: var(--urgent); color: #ffffff; border-color: var(--urgent); } /* ---------- 相談窓口（すぐ電話できるように） ---------- */ .hotline { margin: 22px 0 0; background: var(--cream); border: 1px solid var(--caution-line); border-radius: var(--radius); padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; } .hotline .lbl { width: 100%; font-size: 13px; font-weight: 700; color: var(--sub); } .hotline .nm { font-size: 15px; font-weight: 700; color: var(--head); } .hotline .tel { font-size: 23px; font-weight: 700; color: var(--link); font-variant-numeric: tabular-nums; text-decoration: none; } .hotline .tel:hover { color: var(--link-hover); } .hotline .meta { width: 100%; font-size: 13px; color: var(--sub); } /* ---------- リンクの並び（自治体サイトの一覧） ---------- */ .linkrows { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .linkrows a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 14px 44px 14px 18px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; position: relative; } .linkrows a:last-child { border-bottom: 0; } .linkrows a:hover { background: var(--bg-tint); } .linkrows a::after { content: "›"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--band-deep); font-size: 22px; font-weight: 700; line-height: 1; } .linkrows .k { font-size: 12px; color: var(--sub); font-weight: 700; } .linkrows .t { font-size: 15.5px; font-weight: 700; color: var(--link); width: 100%; } .linkrows .d { font-size: 13px; color: var(--sub); width: 100%; } /* ---------- 読み解き ---------- */ .readout { margin: 14px 0 0; max-width: 64ch; font-size: 14.5px; background: var(--bg-tint); border-left: 4px solid var(--band); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 12px 16px; } .readout strong { color: var(--head); font-weight: 700; } .more { margin: 14px 0 0; font-size: 14px; font-weight: 700; text-align: right; } .more a { text-decoration: none; } .more a::after { content: " ›"; } /* ★ 出典と確認日。小さくても必ず出す。消さないこと ★ */ .source { margin: 10px 0 0; font-size: 12px; color: var(--sub); } .source a { word-break: break-all; } /* ---------- 数字 ---------- */ .fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .fact { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; text-align: center; } .fact .k { margin: 0 0 2px; font-size: 12.5px; color: var(--sub); } .fact .v { font-size: 27px; font-weight: 700; color: var(--band-ink); line-height: 1.3; font-variant-numeric: tabular-nums; } .fact .v small { font-size: 15px; font-weight: 500; color: var(--sub); margin-left: 2px; } .fact .n { margin: 2px 0 0; font-size: 12px; color: var(--sub3); } /* ---------- 法改正 ---------- */ .newlaw { background: var(--info-bg); border: 1px solid var(--info-line); border-radius: var(--radius); padding: 18px 20px; } .newlaw dl { margin: 0; display: flex; flex-direction: column; gap: 14px; } .newlaw dt { font-size: 16px; font-weight: 700; color: var(--head); } .newlaw dd { margin: 3px 0 0; font-size: 14.5px; } .newlaw dd strong { color: var(--head); font-weight: 700; } /* ---------- くらべる表 ---------- */ .table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); } table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 14px; } th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } thead th { font-size: 12.5px; font-weight: 700; color: var(--band-ink); background: var(--band); white-space: nowrap; } tbody th { font-weight: 700; color: var(--head); white-space: nowrap; background: var(--card-2); } tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; } td .num, th .num { font-variant-numeric: tabular-nums; } .num { font-variant-numeric: tabular-nums; } .sub-in-cell { font-weight: 400; color: var(--sub); font-size: 12.5px; } /* ★ 良し悪しの評価には使わないこと ★ 可否が事実として決まっているものだけ */ .can { color: var(--good); font-weight: 700; } .cannot { color: var(--sub); font-weight: 700; } /* ---------- 断り書き ---------- */ .notice { background: var(--info-bg); border: 1px solid var(--info-line); border-radius: var(--radius); padding: 14px 16px; font-size: 14px; color: var(--body-text); margin: 14px 0 0; } .notice b { color: var(--head); } .warn-note { margin: 14px 0 0; background: var(--cream); border: 1px solid var(--caution-line); border-radius: var(--radius); padding: 13px 16px; font-size: 13.5px; color: var(--body-text); } .warn-note b { color: var(--caution); } /* ★ 免責。弱めないこと ★ */ .disclaimer { margin: 40px 0 0; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; font-size: 13px; color: var(--sub); display: flex; flex-direction: column; gap: 6px; } .disclaimer h2 { margin: 0; font-size: 14px; color: var(--head); font-weight: 700; } .disclaimer p { margin: 0; } /* 広告表記。景品表示法（ステマ規制）で必須です。消さないこと */ .pr-flag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--sub); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 1px 10px; margin-left: 8px; vertical-align: 2px; } /* ============================================================ 下層ページ用の部品 ============================================================ */ /* パンくず */ .crumb { padding: 12px 0 0; font-size: 12.5px; color: var(--sub); } .crumb a { color: var(--link); text-decoration: none; } .crumb a:hover { text-decoration: underline; } .crumb .sep { color: var(--band-deep); margin: 0 7px; } /* ページの頭。帯の下に大きな見出し */ header.page { padding: 14px 0 0; display: flex; flex-direction: column; gap: 12px; } header.page .rule { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--band) 0%, var(--band-deep) 100%); } header.page h1 { margin: 0; font-size: clamp(21px, 3.4vw, 27px); line-height: 1.5; color: var(--head); font-weight: 700; text-wrap: balance; } header.page .lead { margin: 0; max-width: 62ch; font-size: 14.5px; } /* 手順（順番に意味があるものだけ番号を振る） */ .steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; } .steps > li { counter-increment: step; position: relative; padding: 15px 0 15px 48px; border-bottom: 1px solid var(--line); } .steps > li:last-child { border-bottom: 0; } .steps > li::before { content: counter(step); position: absolute; left: 0; top: 16px; width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 14px; font-weight: 700; color: var(--band-ink); background: var(--band); border-radius: 50%; font-variant-numeric: tabular-nums; } .steps h3 { margin: 0 0 3px; font-size: 16px; font-weight: 700; color: var(--head); } .steps p { margin: 0; font-size: 14.5px; } .steps .cost { margin: 6px 0 0; font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; } /* 箱 */ .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } /* 窓口の一覧 */ .desk-list { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .desk { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); } .desk:last-child { border-bottom: 0; } .desk .nm { font-weight: 700; color: var(--head); font-size: 15px; } .desk .tel { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--link); font-size: 18px; text-decoration: none; } .desk .tel:hover { color: var(--link-hover); } .desk .meta { width: 100%; font-size: 13.5px; color: var(--sub); } .desk .meta strong { color: var(--body-text); font-weight: 700; } /* 計算ツール */ .calc-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } .calc-fields { display: flex; flex-wrap: wrap; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .field { display: flex; flex-direction: column; gap: 5px; } .field label { font-size: 13px; font-weight: 700; color: var(--head); } .field input, .field select { font-family: inherit; font-size: 15px; color: var(--ink); background: var(--card-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 12px; min-width: 150px; } .field input:disabled, .field select:disabled { opacity: .5; } .calc-rows { display: flex; flex-direction: column; padding-top: 16px; } .calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; } .calc-row .lbl { color: var(--body-text); } .calc-row .lbl em { font-style: normal; display: block; font-size: 12px; color: var(--sub3); } .calc-row .num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--head); } .calc-row.total { border-bottom: 0; padding-top: 14px; margin-top: 4px; font-size: 16px; background: var(--bg-tint); border-radius: var(--radius-sm); padding: 14px 16px; } .calc-row.total .lbl { font-weight: 700; color: var(--head); } .calc-row.total .num { font-size: 25px; font-weight: 700; color: var(--band-ink); } /* 次にやること */ .todo { background: var(--cream); border: 1px solid var(--caution-line); border-radius: var(--radius); padding: 18px 22px; } .todo h2 { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--head); } .todo ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; } /* ページ送り */ .pager { margin: 38px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .pager a { display: flex; flex-direction: column; gap: 3px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 18px; text-decoration: none; color: inherit; } .pager a:hover { border-color: var(--band-deep); background: var(--bg-tint); } .pager .k { font-size: 12px; color: var(--sub); font-weight: 700; } .pager .t { font-size: 15px; font-weight: 700; color: var(--link); } .pager .t::after { content: " ›"; } /* 用語の説明 */ .terms { margin: 0; display: flex; flex-direction: column; gap: 14px; } .terms dt { font-size: 15px; font-weight: 700; color: var(--band-ink); border-left: 4px solid var(--band); padding-left: 10px; } .terms dd { margin: 4px 0 0; font-size: 14.5px; } /* イラスト（ページ頭の飾り） */ .hero-art { display: block; width: 100%; max-width: 380px; margin: 0 auto; height: auto; } footer.site { padding: 26px 0 44px; margin-top: 28px; border-top: 3px solid var(--band); font-size: 12.5px; color: var(--sub3); display: flex; flex-direction: column; gap: 6px; } footer.site a { color: var(--link); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } @media (max-width: 620px) { .entry { padding: 18px 16px 16px; } .entry .icon { width: 68px; height: 68px; } .entry .icon svg { width: 40px; height: 40px; } .section-title { font-size: 15.5px; } } /* ---------- 日本語の折り返し ---------- ★ 語の途中で改行されるのを防ぎます ★ 「見てく／ださい。」のような折れ方をなくすため、文節の切れ目で折ります。 auto-phrase は Chrome / Edge が対応。未対応のブラウザでは これまでどおりの折り返しになるだけで、崩れることはありません。 ★ 消さないでください ★ 消すと読みにくさが戻ります。 */ body, p, li, dd, dt, td, th, figcaption, summary, h1, h2, h3, h4, .lead, .tagline, .readout, .meta, .source, .note { word-break: auto-phrase; overflow-wrap: anywhere; } h1, h2, h3, .lead, .section-title { text-wrap: pretty; }