/* 記事・一覧・方針のページの共通の見た目
   2026-10-21 22時台 デザイン B「からだチェック型」（クロコ）：
   宮本さん「内容は良い感じ。後はデザイン。このサイトにあった明るいデザイン」「こそだてまっぷはデザインがマッチ」「姿勢のアプリは良い感じ」。
   土台＝からだチェック（白地・爽やかな緑と空色・角丸のカード・広い余白）。足した物＝こそだてまっぷの色とりどりのロゴの字・カテゴリの色・写真つきの行・旗の形の番号。
   2026-10-21 23時台 仕上げ（クロコ・点検35件を反映）：
   ・色は「意味」で配る（並び順では回さない）。カテゴリの色の表＝お金＝緑／休み方＝空／手続き＝桃／住まい＝橙／地域（堺）＝山吹。
     それ以外の飾り（ボタン・印・番号・時間の線の強調など）はサイトの緑（--accent）1色。ロゴの5色はロゴだけ。
   ・記事の章の見出し（◎）と目次の番号は、その記事のカテゴリの色（body.cat-okane＝緑・body.cat-sumai＝橙）。
   字に使う濃さは白の上で4.5以上（--c-*）、札の塗りは --f-*（その上の字は --o-*）、淡い帯は --t-*。
   文字 14/16/18/20/24（トップの大見出しとロゴだけ 26/28/32）・太さ 400/500/700・余白 4/8/12/16/24/32/48/64・角丸 8/12/16px と丸い札。影は --shadow の1種類だけ。
   グラデ・絵文字・斜体・明朝・英字の飾りラベルは使わない。丸い点の印・丸い輪のアイコンは使わない（箇条の頭は角の丸い小さな四角）。
   記事の章の見出しの印「◎」（宮本さんが選んだ物）は章の見出しだけに残す（目次の行の頭は番号）。
   入力欄の枠は白の上で3.0以上（--field）。暗い表示の帯は濁らない暗い面（--band-dark）にし、色は波の縁・印・札の字に残す。表のマス・出典・文中のリンクも文節で折る。 */
/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
:root {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f3f7f5; --ink: #1a2b26; --ink-2: #55675f; --line: #e0e8e4;
  --accent: #15784f; --accent-ink: #ffffff; --accent-soft: #e6f4ec; --accent-press: #dbeee3; --accent-hover: #10663f;
  /* 柱の色：字に使う濃さ（白の上で4.5以上。桃・空は、押せる行の淡い緑の地 --accent-soft の上でも4.5以上になる濃さ）。山吹は橙と見分けやすいよう黄みに寄せた（白の上で5.17） */
  --c-green: #15784f; --c-orange: #b9480b; --c-sky: #166fb3; --c-pink: #c4306a; --c-yellow: #856a00;
  /* 札の塗りと、その上の字 */
  --f-green: #15784f; --f-orange: #b9480b; --f-sky: #1872b8; --f-pink: #c8336b; --f-yellow: #f5b52a;
  --o-green: #ffffff; --o-orange: #ffffff; --o-sky: #ffffff; --o-pink: #ffffff; --o-yellow: #3d2a00;
  /* 淡い帯 */
  --t-green: #e9f6ef; --t-orange: #fdf0e6; --t-sky: #e8f3fb; --t-pink: #fdeef3; --t-yellow: #fff7dc;
  /* ロゴの字（20〜26pxの太字＝大きい字。白の上でも下の帯 #f3f7f5 の上でも3.0以上。「の」は白で3.40・帯で3.15） */
  --l1: #1b8fd0; --l2: #22a063; --l3: #c97800; --l4: #ec6236; --l5: #e3457f;
  --warn-bg: #fff7dc; --warn-line: #f0c95a; --warn-ink: #4b3800;
  --mark: rgba(255, 196, 0, .34);
  --shadow: 0 2px 8px rgba(26, 64, 48, .08);
  /* 入力欄・選ぶ札の枠（白の上で3.0以上）と、暗い表示の帯の面 */
  --field: #77857f; --band-dark: #18241e;
  --font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --gx: 16px;
  /* 印（mask で描くので色は変数） */
  /* お金＝お札（角の丸い四角に¥。丸い輪の印は使わない） */
  --i-yen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='16' height='12' rx='3'/%3E%3Cpath d='M7.5 7l2.5 3 2.5-3M10 10v3.5M8 10.5h4M8 12.5h4'/%3E%3C/svg%3E");
  --i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9.5L10 3l7.5 6.5'/%3E%3Cpath d='M4.5 8v9h11V8'/%3E%3Cpath d='M8.5 17v-5h3v5'/%3E%3C/svg%3E");
  /* 休み方＝カレンダー／手続き＝紙をはさむ板 */
  --i-yasumi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='15' height='14' rx='3'/%3E%3Cpath d='M2.5 8.5h15M6.5 2v4M13.5 2v4'/%3E%3C/svg%3E");
  --i-tetsuzuki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='13' height='15' rx='2.5'/%3E%3Crect x='7' y='1.5' width='6' height='3.5' rx='1.5' fill='black'/%3E%3Cpath d='M7 10h6M7 13.5h4'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101915; --surface: #17221d; --surface-2: #1d2a24; --ink: #e6efea; --ink-2: #a9bab2; --line: #2c3b34;
    --accent: #5ccf97; --accent-ink: #0b1a13; --accent-soft: #1c3428; --accent-press: #25452f; --accent-hover: #7ad9aa;
    --c-green: #5ccf97; --c-orange: #f3a06b; --c-sky: #6db8ef; --c-pink: #f08cb2; --c-yellow: #eec25a;
    --f-green: #5ccf97; --f-orange: #f3a06b; --f-sky: #6db8ef; --f-pink: #f08cb2; --f-yellow: #eec25a;
    --o-green: #101915; --o-orange: #101915; --o-sky: #101915; --o-pink: #101915; --o-yellow: #101915;
    --t-green: #1b2822; --t-orange: #1b2822; --t-sky: #1b2822; --t-pink: #1b2822; --t-yellow: #1b2822;
    --l1: #6cc0f0; --l2: #5ccf97; --l3: #f0c24f; --l4: #f5925f; --l5: #f27fa8;
    --warn-bg: #2e2610; --warn-line: #7d6a22; --warn-ink: #f4e2a3;
    --mark: rgba(238, 194, 90, .30);
    --shadow: 0 2px 8px rgba(0, 0, 0, .30);
    --field: #7d9087; --band-dark: #18241e;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101915; --surface: #17221d; --surface-2: #1d2a24; --ink: #e6efea; --ink-2: #a9bab2; --line: #2c3b34;
  --accent: #5ccf97; --accent-ink: #0b1a13; --accent-soft: #1c3428; --accent-press: #25452f; --accent-hover: #7ad9aa;
  --c-green: #5ccf97; --c-orange: #f3a06b; --c-sky: #6db8ef; --c-pink: #f08cb2; --c-yellow: #eec25a;
  --f-green: #5ccf97; --f-orange: #f3a06b; --f-sky: #6db8ef; --f-pink: #f08cb2; --f-yellow: #eec25a;
  --o-green: #101915; --o-orange: #101915; --o-sky: #101915; --o-pink: #101915; --o-yellow: #101915;
  --t-green: #1b2822; --t-orange: #1b2822; --t-sky: #1b2822; --t-pink: #1b2822; --t-yellow: #1b2822;
  --l1: #6cc0f0; --l2: #5ccf97; --l3: #f0c24f; --l4: #f5925f; --l5: #f27fa8;
  --warn-bg: #2e2610; --warn-line: #7d6a22; --warn-ink: #f4e2a3;
  --mark: rgba(238, 194, 90, .30);
  --shadow: 0 2px 8px rgba(0, 0, 0, .30);
  --field: #7d9087; --band-dark: #18241e;
  color-scheme: dark;
}
/* @/shared ---- ここまで */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* カテゴリの色（記事の章の見出し・目次の番号）。書き出しの時に body へ cat-okane / cat-sumai を付ける */
body { --cat: var(--c-green); --cat-t: var(--t-green); margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.8; letter-spacing: .02em; -webkit-tap-highlight-color: transparent; overflow-wrap: anywhere; }
body.cat-sumai { --cat: var(--c-orange); --cat-t: var(--t-orange); }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* 外枠が overflow:hidden の一覧（行全体を押す物）と出典の開け閉めは、輪を内側に描く（外に描くと左右と上が切れる） */
/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
.cards a:focus-visible, .rank a:focus-visible, .toc a:focus-visible, .links a:focus-visible, .ask a:focus-visible, .recent a:focus-visible, .srcbox summary:focus-visible, .fnav a:focus-visible { outline-offset: -3px; border-radius: 12px; }
/* @/shared ---- ここまで */
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.5; }
/* 見出しは書き出しの時に文節の間へ <wbr> を入れてある（BudouX）。文字と文字の間では折らず、<wbr>・読点で折る（iPhone の Safari も同じ） */
h1, h2, h3, .toc a, .card-t, .card-d, .cta, .links a > span:first-child, .links .d, .srcbox summary, .author-cc, .author li, .author div > p, .todo-t, .ex-t, .note-t, .tl-t, .me-h, .tl-e, .byline span, .answer li { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; text-wrap: balance; }
p, ul, ol, dl, dd, figure { margin: 0; }
/* 本文の最後の行に1〜2字だけ残さない（対応するブラウザだけ）。:where で強さを0にして、見出し・題の balance を消さない */
:where(.lead, .body p, .body li) { text-wrap: pretty; }
img { max-width: 100%; height: auto; }
.nw, .nb { white-space: nowrap; }
.num, td { font-variant-numeric: tabular-nums; }

/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
/* ---------- 枠：ロゴ（一文字ずつ柱の色）とナビ ---------- */
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.top-in { max-width: 720px; margin: 0 auto; padding: 0 var(--gx); display: flex; align-items: center; justify-content: space-between; gap: 0 8px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; min-height: 56px; font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: .06em; text-decoration: none; }
.brand .l1 { color: var(--l1); } .brand .l2 { color: var(--l2); } .brand .l3 { color: var(--l3); } .brand .l4 { color: var(--l4); } .brand .l5 { color: var(--l5); }
.gnav { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 -8px; }
.gnav a { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 8px; font-size: 16px; font-weight: 500; color: var(--ink-2); text-decoration: none; border-radius: 8px; white-space: nowrap; }
.gnav a[aria-current="page"] { color: var(--accent); font-weight: 700; }
.gnav a[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 3px; border-radius: 2px; background: var(--accent); }
@media (hover: hover) { .gnav a:hover { background: var(--surface-2); } }
.gnav a:active { background: var(--accent-press); }
/* 320px ほどの細い画面：ナビの4つを1段に収める（16pxのまま、間と字間を詰める）。それでも入らない、さらに細い画面では、ナビを横に流せる帯にする */
@media (max-width: 359px) {
  .gnav { gap: 0; flex-wrap: nowrap; margin: 0 -4px; }
  .gnav a { padding: 0 4px; letter-spacing: 0; }
  .gnav a[aria-current="page"]::after { left: 4px; right: 4px; }
}
@media (max-width: 319px) {
  .gnav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .gnav::-webkit-scrollbar { display: none; }
  .gnav a:focus-visible { outline-offset: -3px; }
}
@media (min-width: 640px) { .gnav { margin: 0; } }
/* @/shared ---- ここまで */
main { max-width: 720px; margin: 0 auto; padding: 8px var(--gx) 64px; }
/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
/* パンくず：字だけのリンクでも押せる高さは48px（行の真ん中にそろえる） */
.crumbs { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: "›"; margin-right: 4px; color: var(--ink-2); }
.crumbs a { display: inline-flex; align-items: center; min-height: 48px; color: var(--ink-2); border-radius: 4px; }
.crumbs a:active { background: var(--accent-press); }
/* @/shared ---- ここまで */

/* ---------- 記事の頭 ---------- */
.head { margin-top: 8px; }
.head h1 { font-family: var(--font-display); font-size: 24px; line-height: 1.5; letter-spacing: .02em; }
.eyecatch { margin-top: 16px; }
.eyecatch img { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--surface-2); }
/* 題の下の短い説明は文節で折る（書き出しの時に <wbr>） */
.lead { margin-top: 16px; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.meta { margin-top: 12px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.meta span { white-space: nowrap; }
.meta span + span::before { content: "／"; margin: 0 4px; }
.byline { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.byline img, .author img, .me-h img { border-radius: 50%; background: var(--t-sky); flex: none; }
/* 書いた人の名前のリンク：押せる高さは48px。上下の負の余白で、行の高さは今のまま（字の行の上下に12pxずつ押せる所が広がる） */
.byline a, .author-n a { display: inline-flex; align-items: center; min-height: 48px; margin: -12px 0; border-radius: 4px; }
.byline a { color: var(--ink-2); }
.byline a:active, .author-n a:active { background: var(--accent-press); }
/* 押せる高さは48pxに広げてあるが、キーボードの輪は字のまわりに描く（下の行の字に重ねない） */
.byline a:focus-visible, .author-n a:focus-visible { outline-offset: -10px; }

/* ---------- 本文 ---------- */
.body { margin-top: 24px; counter-reset: stage; }
.body > * + * { margin-top: 24px; }
.body > p, .body .ex p, .body .me-b p { line-height: 1.9; }
/* 章の見出し：淡い色の帯（角丸12px）。色はその記事のカテゴリの色（お金＝緑・住まい＝橙）で、記事の中では変えない */
.body h2 {
  --hc: var(--cat); --ht: var(--surface-2);
  position: relative; margin-top: 48px; padding: 12px 16px;
  border-radius: 12px; background: var(--ht); color: var(--ink);
  font-family: var(--font-display); font-size: 20px; line-height: 1.5; letter-spacing: .02em;
  scroll-margin-top: 16px;
}
.body h2[id] { --hc: var(--cat); --ht: var(--cat-t); }
/* 目次に載らない見出し（書いた人・次に読む・関連）：帯にせず、下に2pxの線と緑の短い線（h3 と同じ形で一回り大きく） */
.body h2:not([id]) { padding: 0 0 8px; border-radius: 0; background: none; border-bottom: 2px solid var(--line); }
.body h2:not([id])::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 48px; height: 2px; border-radius: 1px; background: var(--accent); }
/* 記事の一覧（分類ごとの見出しのすぐ下にカード）だけは、見出しの色を分類の色にそろえる（お金＝緑・住まい＝橙。カードの分類名と同じ色） */
.body h2[id]:has(+ .cards .card-k.k-okane) { --hc: var(--c-green); --ht: var(--t-green); }
.body h2[id]:has(+ .cards .card-k.k-sumai) { --hc: var(--c-orange); --ht: var(--t-orange); }
/* 記事の章の見出し（目次に載る h2＝id がある物）だけ、左に◎（二重丸・24px・カテゴリの色）。
   2026-10-21 16:52 宮本さんが選んだ印。1行目の真ん中（行の高さ 1.5em）にそろえる。文字は 16＋24＋8＝48px から始める */
.body h2[id] { padding: 16px 16px 16px 48px; }
.body h2[id]::before { content: ""; position: absolute; left: 16px; top: calc(16px + (1.5em - 24px) / 2); width: 24px; height: 24px; background: var(--hc); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='2.5'/%3E%3Ccircle cx='12' cy='12' r='4.5' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E") center / 24px 24px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='2.5'/%3E%3Ccircle cx='12' cy='12' r='4.5' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E") center / 24px 24px no-repeat; }
.body h3 {
  position: relative; margin-top: 32px; padding-bottom: 8px;
  border-bottom: 2px solid var(--line);
  font-family: var(--font-display); font-size: 18px; line-height: 1.5; letter-spacing: .02em;
}
.body h3::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 32px; height: 2px; border-radius: 1px; background: var(--cat); }
.body h2 + *, .body h3 + * { margin-top: 16px; }
.body ol { padding-left: 24px; }
.body li + li { margin-top: 8px; }
.body ol > li::marker { color: var(--accent); font-weight: 700; }
/* 箇条書きの頭：丸い点ではなく、時間の線の節と同じ「角の丸い小さな四角」（8px・角丸2px・緑）。1行目の真ん中（行の高さ1.8）にそろえる。
   番号つきの箇条（ol）は数字のまま。チェックの印を持つ箱（この記事を読んだら・書いた人）と、行の一覧（.links・.cards）は除く */
.body ul:not([class]) { list-style: none; padding-left: 0; }
.body ul:not([class]):not(.todo ul):not(.author ul) > li { position: relative; padding-left: 24px; }
.body ul:not([class]):not(.todo ul):not(.author ul) > li::before { content: ""; position: absolute; left: 4px; top: calc(.9em - 4px); width: 8px; height: 8px; border-radius: 2px; background: var(--cat); }
.body .stage ul:not([class]):not(.todo ul):not(.author ul) > li::before { background: var(--stb, var(--stc)); }
/* 「ラベル：中身」の項目（時期で見る）：ラベルを1段目の太字にし、中身は次の行から */
.body li > .lbl:first-child, .panel li > .lbl:first-child { display: block; margin-bottom: 4px; font-weight: 700; line-height: 1.5; }
.body strong { font-weight: 700; }
/* 答えの1文のマーカー（字の下半分だけ・山吹色） */
.mk { font-weight: 700; box-shadow: inset 0 -.5em 0 var(--mark); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.small { font-size: 14px; line-height: 1.7; }
/* 表のマスの中の注記も中身の一部なので、本文と同じ16px（2026-10-22） */
.tbl .small { font-size: 16px; }
.muted { color: var(--ink-2); }
.src-line { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.src-line a { color: var(--ink-2); }
/* 文中のリンク・出典の一覧・答えのマーカー・関連の一覧は、書き出しの時に文節の間へ <wbr> を入れてある。語の途中では折らない */
.body a, .srcs li, .mk, .links a { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }

/* 箱の題：16px・太字・濃い字。左に20pxの2色の印（::before＝薄い面、::after＝濃い線。色は箱ごとの変数） */
.toc-t, .tl-t, .ex-t, .note-t, .todo-t { position: relative; padding-left: 32px; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.note-t { color: var(--warn-ink); }
.toc-t::before, .toc-t::after, .tl-t::before, .tl-t::after, .ex-t::before, .ex-t::after, .note-t::before, .note-t::after, .todo-t::before, .todo-t::after {
  content: ""; position: absolute; left: 0; top: calc((1.5em - 20px) / 2); width: 20px; height: 20px;
  -webkit-mask: var(--ico) center / 20px 20px no-repeat; mask: var(--ico) center / 20px 20px no-repeat;
}
.toc-t::before, .tl-t::before, .ex-t::before, .note-t::before, .todo-t::before { background: var(--ico-face, var(--accent-soft)); }
.toc-t::after, .tl-t::after, .ex-t::after, .note-t::after, .todo-t::after { background: var(--ico-line, var(--accent)); }
/* 目次＝中身の紙 */
.toc-t::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='2' width='14' height='16' rx='3' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); --ico-face: var(--surface); }
.toc-t::after { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='2' width='14' height='16' rx='3'/%3E%3Cpath d='M7 7h6M7 10.5h6M7 14h3'/%3E%3C/svg%3E"); }
/* 時間の線＝カレンダー */
.tl-t::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='4' width='15' height='14' rx='3' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); --ico-face: var(--t-sky); }
.tl-t::after { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='15' height='14' rx='3'/%3E%3Cpath d='M2.5 8.5h15M6.5 2v4M13.5 2v4'/%3E%3Ccircle cx='13' cy='13.5' r='1.5' fill='black' stroke='none'/%3E%3C/svg%3E"); --ico-line: var(--c-sky); }
/* 例・計算＝虫めがね（確かめる） */
.ex-t::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); --ico-face: var(--surface); }
.ex-t::after { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.5 12.5L17 17'/%3E%3C/svg%3E"); --ico-line: var(--c-sky); }
/* 気をつける事＝角の丸い四角に「！」（丸い輪の印は使わない） */
.note-t::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='15' height='15' rx='4' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); --ico-face: var(--surface); }
.note-t::after { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='2.5' y='2.5' width='15' height='15' rx='4'/%3E%3Cpath d='M10 6v4.5'/%3E%3Crect x='9' y='13' width='2' height='2' rx='.5' fill='black' stroke='none'/%3E%3C/svg%3E"); --ico-line: var(--warn-ink); }
/* この記事を読んだら＝チェックの板 */
.todo-t::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3.5' y='3.5' width='13' height='15' rx='2.5' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); --ico-face: var(--accent-soft); }
.todo-t::after { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='13' height='15' rx='2.5'/%3E%3Crect x='7' y='1.5' width='6' height='3.5' rx='1.5' fill='black'/%3E%3Cpath d='M7 11.5l2.25 2.25L13.5 9.5'/%3E%3C/svg%3E"); }
/* ---------- 箱（役目ごと）：淡い色の面の箱は枠なし（気をつける事・例・ツールへの誘い）、白い箱は1pxの枠（この記事を読んだら・目次・時間の線・書いた人・出典）、先に結論だけ緑の2pxの枠 ---------- */
/* 先に結論：白地に緑の2pxの枠、題は丸い札 */
.answer { position: relative; background: var(--surface); border: 2px solid var(--cat); border-radius: 16px; padding: 32px 16px 16px; margin-top: 32px; }
.answer-t { position: absolute; top: -16px; left: 16px; margin: 0; padding: 4px 16px; border-radius: 999px; background: var(--cat); color: var(--accent-ink); font-size: 14px; font-weight: 700; line-height: 1.6; }
.answer li { line-height: 1.8; }
.answer li + li { margin-top: 8px; }
/* 気をつける事：淡い山吹（枠なし） */
.note { background: var(--warn-bg); color: var(--warn-ink); border-radius: 12px; padding: 16px; }
.note > * + * { margin-top: 8px; }
.note a { color: inherit; }
/* 例・計算：淡い空色 */
.ex { background: var(--t-sky); border-radius: 12px; padding: 16px; }
.ex > * + * { margin-top: 12px; }
/* 書いている私の場合：顔と名前の下に、淡い空色の吹き出し。中の文は .me-b（書き出しの時に包む）。名前の行は濃い字（空色の太字はリンクに見えるため） */
.me-h { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.me-b { position: relative; margin-top: 16px; background: var(--t-sky); border-radius: 16px; padding: 16px; }
.me-b > * + * { margin-top: 12px; }
/* しっぽ：16pxの四角を45度回し、顔（40px）の真ん中の下に置く */
.me-b::before { content: ""; position: absolute; left: 12px; top: -8px; width: 16px; height: 16px; background: var(--t-sky); transform: rotate(45deg); border-radius: 2px; }
/* この記事を読んだら：白地に1pxの枠（下のツールへの誘い＝淡い緑の面と見分ける） */
.todo { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.todo > * + * { margin-top: 12px; }
.todo ul { list-style: none; padding: 0; }
.todo li { position: relative; padding-left: 24px; }
.todo li + li { margin-top: 12px; }

/* ---------- 目次（行の頭は章の番号。色はその記事のカテゴリの色。◎は章の見出しだけに使う） ---------- */
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.toc-t { padding: 12px 16px 12px 48px; border-bottom: 1px solid var(--line); background: var(--cat-t); }
.toc-t::before, .toc-t::after { left: 16px; top: calc(12px + (1.5em - 20px) / 2); }
.toc ol { list-style: none; padding: 0 !important; margin: 0; counter-reset: toc; }
.toc li { margin: 0 !important; counter-increment: toc; }
.toc li + li { border-top: 1px solid var(--line); }
.toc a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; color: var(--ink); text-decoration: none; line-height: 1.5; }
.toc a::before { content: counter(toc); flex: none; min-width: 16px; font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--cat); text-align: center; font-variant-numeric: tabular-nums; }
.toc a::after { content: ""; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); margin-top: -4px; }
@media (hover: hover) { .toc a:hover { background: var(--accent-soft); } }
.toc a:active { background: var(--accent-press); }

/* ---------- 絵と図 ---------- */
.fig img { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--surface-2); }
/* 図や表の説明（決まりそのものが書かれている物もあるので、本文と同じ16px） */
.fig figcaption, .cap { font-size: 16px; color: var(--ink-2); margin-top: 8px; line-height: 1.8; }
/* 時間の線（日付の流れの図）。節は角の丸い小さな四角（丸い点の印は使わない）。線は日付の列と中身の列の間（16pxの真ん中）を通し、節の真ん中を線に合わせる */
.tl { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.tl-t { margin-bottom: 12px; }
.tl ol { list-style: none; padding: 0 !important; margin: 0; position: relative; }
.tl { --tld: 7.5em; }
.tl li { position: relative; display: grid; grid-template-columns: var(--tld) 1fr; gap: 0 16px; padding: 0 0 16px 0; margin: 0 !important; }
.tl li:last-child { padding-bottom: 0; }
.tl li::before { content: ""; position: absolute; left: calc(var(--tld) + 7px); top: 20px; bottom: -8px; width: 2px; background: var(--line); }
.tl li:last-child::before { display: none; }
.tl-d { font-size: 16px; font-weight: 700; color: var(--c-sky); line-height: 1.7; }
.tl-e { position: relative; padding-left: 16px; line-height: 1.7; }
.tl-e::before { content: ""; position: absolute; left: -14px; top: 8px; width: 12px; height: 12px; border-radius: 3px; background: var(--surface); border: 2px solid var(--c-sky); box-sizing: border-box; }
.tl li.on .tl-e::before { background: var(--accent); border-color: var(--accent); }
.tl li.on .tl-e { font-weight: 700; }

/* ---------- 表（本文と同じ16px。2列の表と数字の表は、スマホでは表の中だけ横に動く） ---------- */
.tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tbl table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.6; letter-spacing: 0; }
.tbl th, .tbl td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
/* 表の見出しの行は文節で折る（1行に収まらない長い見出しで、表が画面からはみ出さないように） */
.tbl thead th { background: var(--t-green); font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.tbl td.r, .tbl th.r { text-align: right; white-space: nowrap; }
/* 表のマスは書き出しの時に文節の間へ <wbr> を入れ、最後の文節と「10営業日」のような数字＋単位をつないである（「以内」「同意」の1字だけが次の行に落ちない）。
   文節の途中では折らない（keep-all）。列の幅の計算では anywhere（1字ずつ折れる扱い）にして、長い文節（「住宅瑕疵担保責任保険協会の」）でも表を画面からはみ出させない */
.tbl td, .tbl th { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
/* 3列以上で文の長いマスがある表（書き出しの時に .stack と各マスの data-label を付ける）は、スマホでは1行を1つの塊に積む。
   行の頭のマスを太字の見出しにし、その下に「申請」「支払い」などの列の名前（14px・太字）と中身を2段で並べる */
@media (max-width: 639px) {
  .tbl.stack { overflow: visible; }
  .tbl.stack table, .tbl.stack tbody, .tbl.stack tr, .tbl.stack td { display: block; width: auto; }
  .tbl.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .tbl.stack tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .tbl.stack tr:last-child { border-bottom: 0; }
  .tbl.stack td { padding: 0; border: 0; text-align: left; white-space: normal; }
  .tbl.stack td:first-child { font-weight: 700; line-height: 1.5; }
  .tbl.stack td + td { margin-top: 8px; }
  .tbl.stack td + td::before, .tbl.stack td.r:first-child::before { content: attr(data-label); display: block; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink-2); }
}

/* ---------- ツールへの誘導：淡い緑の箱に、緑の丸いボタン ---------- */
.toolbox { background: var(--t-green); border-radius: 16px; padding: 16px; }
.toolbox > * + * { margin-top: 12px; }
.toolbox-t { line-height: 1.8; }
.cta { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 8px 24px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; text-align: center; }
@media (hover: hover) { .cta:hover { background: var(--accent-hover); } }
.cta:active { background: var(--accent-hover); }
.cta-sub { font-size: 14px; color: var(--ink-2); text-align: center; }

/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
/* ---------- 関連の一覧（行全体を押せる） ---------- */
.links { list-style: none; padding: 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.links li { margin: 0 !important; }
.links li + li { border-top: 1px solid var(--line); }
.links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 16px; color: var(--ink); font-weight: 700; text-decoration: none; line-height: 1.6; }
.links a::after { content: ""; flex: none; width: 8px; height: 8px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg); }
.links .d { display: block; font-size: 14px; font-weight: 400; color: var(--ink-2); }
@media (hover: hover) { .links a:hover { background: var(--accent-soft); } }
.links a:active { background: var(--accent-press); }

/* ---------- 記事のカード：左に写真、右に色つきのカテゴリ名（印つき）と題（こそだてまっぷの記事の行の形）。
   絵のまだ無い記事は、写真の列ごと外した「文字だけの行」（.t-only。仮の絵の四角は出さない） ---------- */
.cards, .rank { list-style: none; padding: 0 !important; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.cards li, .rank li { margin: 0 !important; }
.cards li + li, .rank li + li { border-top: 1px solid var(--line); }
.cards a, .rank a { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; padding: 16px; color: var(--ink); text-decoration: none; }
.cards a.t-only, .rank a.t-only { grid-template-columns: 1fr; }
.cards img, .rank img { display: block; width: 120px; height: 80px; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
/* カテゴリ名：14px・太字・カテゴリの色。頭に14pxの印（お金＝お札・休み方＝カレンダー・手続き＝板・住まい＝家）。札はどこでもこの形1種類 */
.card-k { --kc: var(--c-green); --ki: var(--i-yen); display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--kc); }
.card-k::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--kc); -webkit-mask: var(--ki) center / 14px 14px no-repeat; mask: var(--ki) center / 14px 14px no-repeat; }
.card-k.k-yasumi { --kc: var(--c-sky); --ki: var(--i-yasumi); }
.card-k.k-tetsuzuki { --kc: var(--c-pink); --ki: var(--i-tetsuzuki); }
.card-k.k-sumai { --kc: var(--c-orange); --ki: var(--i-home); }
.card-t { display: block; margin-top: 4px; font-size: 16px; font-weight: 700; line-height: 1.5; }
/* 写真の横の細い列の題は、行の長さをそろえる（balance）より上の行から詰める（pretty）方が、1行目が短くならない */
.cards .card-t, .rank .card-t { text-wrap: pretty; letter-spacing: 0; }
.card-d { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
@media (hover: hover) { .cards a:hover, .rank a:hover { background: var(--accent-soft); } }
.cards a:active, .rank a:active { background: var(--accent-soft); }   /* 色の札（桃・空）が4.5を保てる淡さ。押した時はhoverと同じ色 */
/* 細い画面は写真を小さくして題の幅を広げる。PC は写真を大きく */
@media (max-width: 359px) { .cards a, .rank a { grid-template-columns: 96px 1fr; } .cards img, .rank img { width: 96px; height: 64px; } }
@media (min-width: 640px) { .cards a, .rank a { grid-template-columns: 160px 1fr; gap: 16px; } .cards img, .rank img { width: 160px; height: 107px; } }
/* もっと見る（枠線の丸いボタン）：枠と字は章の色（トップの章では --sc。無い所はサイトの緑）。2026-10-22 home.css から移した（計算ツールの「記事の一覧を見る」も同じ形） */
.more-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 24px; padding: 8px 24px; border: 2px solid var(--sc, var(--accent)); border-radius: 999px; background: var(--surface); color: var(--sc, var(--accent)); font-weight: 700; text-decoration: none; text-align: center; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
@media (hover: hover) { .more-btn:hover { background: var(--st, var(--accent-soft)); } }
.more-btn:active { background: var(--accent-press); }
/* @/shared ---- ここまで */

/* ---------- 書いた人・出典 ---------- */
.author { display: grid; grid-template-columns: 64px 1fr; gap: 12px 16px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.author-n { font-weight: 700; }
.author-n a { color: var(--accent); }
/* 書いた人の紹介文は文節で折るが、行の長さはそろえない（3行に収める） */
.author div > p:not(.author-n) { text-wrap: pretty; }
/* 書いた人の頭のキャッチコピー（18px・見出しの字・緑）。下に1pxの線 */
.author .author-cc { grid-column: 1 / -1; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; color: var(--accent); }
.author p { font-size: 16px; line-height: 1.8; }
.author p + p { margin-top: 8px; }
.author > ul, .author > .author-c { grid-column: 1 / -1; }
.author ul { list-style: none; padding: 0; }
.author li { position: relative; padding-left: 24px; line-height: 1.8; }
.author li + li { margin-top: 8px; }
.author li::before, .todo li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.author .author-c { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.srcbox { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.srcbox summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 16px; font-weight: 700; cursor: pointer; list-style: none; line-height: 1.5; }
.srcbox summary::-webkit-details-marker { display: none; }
.srcbox summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); margin-top: -4px; }
.srcbox[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
@media (hover: hover) { .srcbox summary:hover { background: var(--accent-soft); } }
.srcbox summary:active { background: var(--accent-press); }
.srcbox .srcs { padding: 0 16px 16px 48px; }
.srcs { font-size: 16px; line-height: 1.7; padding-left: 24px; }
.srcs li + li { margin-top: 12px; }
.srcs a { display: inline; padding: 4px 0; }

/* ---------- 時期で見る：淡い面に、番号（1・2・3…）の四角と時期の名前。
   2026-10-22 0時台：トップの時期のタブと同じ色（こそだてまっぷの年齢別の札の考え）＝1 妊娠中＝桃・2 産後8週＝橙・3 育休中＝緑・4 終わる前＝山吹（番号の四角だけ山吹・題の字は本文の色）・5 育休の後＝空 ---------- */
.stage { counter-increment: stage; background: var(--stt, var(--surface-2)); border-radius: 16px; padding: 16px; --stc: var(--accent); --stf: var(--accent); --sto: var(--accent-ink); }
.stage:nth-of-type(5n+1) { --stc: var(--c-pink); --stf: var(--f-pink); --sto: var(--o-pink); --stt: var(--t-pink); }
.stage:nth-of-type(5n+2) { --stc: var(--c-orange); --stf: var(--f-orange); --sto: var(--o-orange); --stt: var(--t-orange); }
.stage:nth-of-type(5n+3) { --stc: var(--c-green); --stf: var(--f-green); --sto: var(--o-green); --stt: var(--t-green); }
.stage:nth-of-type(5n+4) { --stc: var(--ink); --stb: var(--c-yellow); --stl: var(--f-yellow); --stf: var(--f-yellow); --sto: var(--o-yellow); --stt: var(--t-yellow); }
.stage:nth-of-type(5n+5) { --stc: var(--c-sky); --stf: var(--f-sky); --sto: var(--o-sky); --stt: var(--t-sky); }
.stage > * + * { margin-top: 12px; }
.stage h3 { margin-top: 0; padding-left: 40px; color: var(--stc); border-bottom-color: rgba(127, 127, 127, .25); }
.stage h3::before { content: counter(stage); position: absolute; left: 0; top: calc((1.5em - 28px) / 2); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--stf); color: var(--sto); font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1; }
.stage h3::after { background: var(--stl, var(--stc)); }
.stage .when { font-size: 16px; line-height: 1.7; color: var(--ink-2); }

/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
/* ---------- 下：ロゴ、2つに分けた案内（サイトの中／このサイトについて）、目安の断り ---------- */
.bottom { border-top: 1px solid var(--line); background: var(--surface-2); }
.bottom-in { max-width: 720px; margin: 0 auto; padding: 24px var(--gx) 32px; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.fbrand { min-height: 48px; font-size: 20px; }
.fnavs { margin-top: 8px; }
.fnav-g + .fnav-g { margin-top: 12px; }
.fnav-h { font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink); }
/* 項目の間は1pxの縦線。行の左の端の線は外枠の外に出して隠す。スマホは4つを2つずつ2段（線の位置が上下でそろう）、PC は4つを1段 */
.fnav { list-style: none; padding: 0; margin: 4px 0 0 -13px; display: grid; grid-template-columns: repeat(2, minmax(max-content, 1fr)); overflow: hidden; }
.fnav li { display: flex; align-items: center; margin-left: -1px; border-left: 1px solid var(--line); }
.fnav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .fnav a:hover { background: var(--accent-soft); color: var(--ink); } }
.fnav a:active { background: var(--accent-press); }
.bottom-in p { margin-top: 12px; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; text-wrap: pretty; }
.bottom-in .fnav-h { margin-top: 0; }
@media (min-width: 640px) { .fnav { display: flex; flex-wrap: wrap; } }
/* @/shared ---- ここまで */

/* @shared ---- ここから、計算ツール（/keisan/）にも同じ物を入れる（publish.js が切り出してツールの <style> に入れる。直すと両方に効く） */
/* 暗い表示：白地の絵が夜にまぶしく浮かないよう、少しだけ暗くする */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.eyecatch, .fig, .cards, .rank) img { filter: brightness(.88); }
}
:root[data-theme="dark"] :is(.eyecatch, .fig, .cards, .rank) img { filter: brightness(.88); }
/* @/shared ---- ここまで */

/* 320px ほどの細い画面：表のマスの左右の余白を詰める */
@media (max-width: 359px) {
  .tl { --tld: 6.5em; }
  .tbl th, .tbl td { padding: 8px; }
  /* 行の頭の列（「出産育児一時金」）は、細い画面では文節で折ってよい（表を画面に収める） */
  .tbl td.nw:first-child { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
}
@media (min-width: 640px) {
  :root { --gx: 24px; }
  main { padding-top: 16px; }
  .head h1 { font-size: 28px; }
  /* PC では丸いボタンを列の幅いっぱいに伸ばさず、真ん中に置く */
  .toolbox .cta { max-width: 360px; margin-left: auto; margin-right: auto; }
}
@media print {
  .top, .bottom, .cta, .cta-sub, .crumbs, .toc, .toolbox, .cards, .rank { display: none !important; }
  body { background: #fff; color: #000; }
}
