/* 共通スタイル
   スマホ幅（360px前後）を基準に書き、広い画面には @media で足しています。
   デザインの考え方：「勉強ノート」。紙の地色、インクの紺、蛍光ペンの黄、
   カテゴリは見出しシール（インデックス）の色で見分けます。 */

:root {
  --paper: #faf7ef;
  --card: #fffdf8;
  --ink: #1e2a3a;
  --ink-soft: #4a5565;
  --line: #d9d2c0;
  --rule: #ebe5d5;
  --marker: #ffe24d;
  --link: #0a55a8;
  --cat: #1e2a3a;
  --radius: 6px;
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI",
    "Yu Gothic", Meiryo, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 12px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.85;
  overflow-wrap: anywhere;
  line-break: strict; /* 「ー」や小さい「っ」が行頭に来ないようにする */
  font-feature-settings: "palt" 0;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
/* 見出しは、できるだけ文節の切れ目で折り返す（対応ブラウザのみ） */
h1, h2, h3, .card-title, .cal-title, .entry-name, .step-title { word-break: auto-phrase; }
ul, ol { padding: 0; }

/* アイコン（線のSVG）。大きさは文字の高さに合わせ、色は周りの文字色を使う */
.icon { display: inline-block; width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; margin-right: 0.35em; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.wrap-narrow { max-width: 752px; margin: 0 auto; padding: 0 16px; }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 10;
  background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--radius);
}
.skip:focus { top: 8px; }

.preview-bar {
  background: var(--ink); color: #fff; font-size: 12px; text-align: center;
  padding: 4px 12px; line-height: 1.5;
}

/* ------------------------------------------------------------ ヘッダー */
.site-header { background: var(--card); border-bottom: 2px solid var(--ink); }
.header-inner { padding-top: 14px; padding-bottom: 10px; }
.brand-wrap { font-size: inherit; font-weight: inherit; }
.brand { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; color: var(--ink); text-decoration: none; }
.brand-name {
  font-size: 24px; font-weight: 900; letter-spacing: 0.02em; line-height: 1.3;
  background: linear-gradient(transparent 62%, var(--marker) 62%, var(--marker) 92%, transparent 92%);
  padding: 0 2px;
}
.brand-bang { color: #b5352b; }
.brand-sub { font-size: 12px; color: var(--ink-soft); }

.cat-nav { border-top: 1px solid var(--rule); overflow-x: auto; scrollbar-width: thin; }
.cat-nav ul { display: flex; gap: 6px; list-style: none; padding-top: 8px; padding-bottom: 0; }
.cat-nav li { flex: none; }
.cat-nav a {
  display: block; padding: 8px 12px 7px; font-size: 13px; font-weight: 700; line-height: 1.3;
  color: var(--ink); text-decoration: none; background: var(--paper);
  border: 1px solid var(--line); border-bottom: 0; border-top: 4px solid var(--cat);
  border-radius: var(--radius) var(--radius) 0 0;
}
.cat-nav a:hover { background: #fff; }
.cat-nav a[aria-current] { background: var(--cat); color: #fff; border-color: var(--cat); }
.cat-nav .icon { color: var(--cat); display: none; }          /* スマホ幅は文字だけ */
.cat-nav.icons-sp .icon { display: inline-block; }            /* site.toml の [nav] で出す設定にしたとき */
.cat-nav a[aria-current] .icon { color: #fff; }

/* ------------------------------------------------------------ 小さな部品 */
.cat-tab {
  display: inline-block; background: var(--cat); color: #fff; font-size: 12px; font-weight: 700;
  line-height: 1.3; padding: 4px 10px; border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
}
.type-label {
  display: inline-block; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--ink);
  padding: 3px 9px; border: 1px solid var(--ink); border-radius: 999px; background: var(--card);
}
.pending { color: var(--ink-soft); }
.pending small { font-size: 0.85em; }
.empty { color: var(--ink-soft); background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); padding: 14px 16px; }
.section-h {
  font-size: 20px; line-height: 1.4; margin: 0 0 14px; padding-left: 12px;
  border-left: 6px solid var(--ink);
}
.breadcrumb { font-size: 12px; color: var(--ink-soft); padding: 12px 0 4px; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.breadcrumb a { color: var(--ink-soft); }

/* ------------------------------------------------------------ 記事カード */
.cards { list-style: none; display: grid; gap: 14px; grid-template-columns: 1fr; }
.card { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--cat); border-radius: var(--radius); overflow: hidden; }
.card-link { display: block; color: var(--ink); text-decoration: none; }
.card-link:hover .card-title { text-decoration: underline; }
.card-img { width: 100%; border-bottom: 1px solid var(--rule); }
.card-body { display: grid; gap: 6px; padding: 12px 14px 14px; }
.card-labels { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.card-labels .cat-tab { border-radius: var(--radius); }
.card-title { font-size: 16px; font-weight: 700; line-height: 1.5; }
.card-key { font-size: 13px; color: var(--ink-soft); }
.card-key b { color: var(--ink); font-size: 15px; margin-right: 6px; background: linear-gradient(transparent 60%, var(--marker) 60%); }
/* 「いくら」の文。2行まで出し、あふれた分は末尾を「…」にする */
.card-howmuch {
  font-size: 13px; line-height: 1.7; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.card-howmuch b { font-size: 11px; line-height: 1.3; padding: 2px 7px; margin-right: 6px; background: var(--marker); border-radius: 2px; vertical-align: 1px; }
.card-date { font-size: 12px; color: var(--ink-soft); }

/* ------------------------------------------------------------ トップページ */
.hero { padding: 18px 0 4px; }
.hero-q { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.hero-q li {
  font-size: 13px; font-weight: 700; line-height: 1.3; padding: 4px 10px;
  background: var(--marker); border-radius: 2px;
}
.hero-promise { font-size: 15px; font-weight: 700; line-height: 1.7; }
.top-sec { margin-top: 32px; }
.more { margin-top: 10px; font-size: 14px; text-align: right; }

.cal-list { list-style: none; display: grid; gap: 10px; }
.cal-item {
  background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--cat);
  border-radius: var(--radius); padding: 12px 14px;
}
.cal-when { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; }
.cal-kind { background: var(--ink); color: #fff; font-weight: 700; font-size: 12px; line-height: 1.3; padding: 3px 8px; border-radius: 2px; }
.cal-date { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-title { font-size: 16px; font-weight: 700; line-height: 1.5; margin-top: 4px; }
.cal-body { font-size: 14px; line-height: 1.7; margin-top: 2px; }
.cal-src { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
.cal-sub { font-size: 15px; margin: 18px 0 10px; }
.cal-yearly { border: 1px solid var(--ink); color: var(--ink); font-weight: 700; font-size: 11px; line-height: 1.3; padding: 2px 6px; border-radius: 2px; }
.cal-whos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cal-who { font-size: 11px; line-height: 1.4; padding: 1px 7px; border-radius: 999px; background: var(--paper, #f3efe6); border: 1px solid var(--line); color: var(--ink-soft); }
.cal-who-note { font-size: 11px; line-height: 1.4; padding: 1px 2px; color: var(--ink-soft); }
.cal-note { font-size: 12px; line-height: 1.6; margin-top: 4px; color: var(--ink-soft); }
.cal-article { font-size: 13px; margin-top: 6px; }
.cal-page .cal-lead { font-size: 14px; line-height: 1.8; margin-top: 8px; }
.cal-month { margin-top: 26px; }
.cal-month > h2 { font-size: 18px; margin-bottom: 10px; padding-left: 10px; border-left: 4px solid var(--ink); }

.entries { list-style: none; display: grid; gap: 10px; grid-template-columns: 1fr; }
.entry {
  display: flex; flex-direction: column; gap: 2px; height: 100%; background: var(--card); color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-left: 6px solid var(--cat); border-radius: var(--radius);
  padding: 12px 14px;
}
a.entry:hover { background: #fff; border-color: var(--cat); }
.entry-name { font-size: 16px; font-weight: 700; line-height: 1.4; }
.entry-name .icon { color: var(--cat); }
div.entry-aud .entry-name .icon { color: var(--ink); }
.body h2 .icon, .cat-head h1 .icon { color: var(--cat); }
.entry-topics { font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.entry-count { font-size: 12px; font-weight: 700; color: var(--cat); margin-top: auto; padding-top: 4px; }
/* 状況別の入口：リンクのない（準備中の）ときだけ点線。リンクになったらカテゴリの入口と同じ実線と色の帯 */
div.entry-aud { border-left-color: var(--ink); border-style: dashed; border-left-style: solid; }
div.entry-aud .entry-count { color: var(--ink-soft); }

/* ------------------------------------------------------------ カテゴリページ */
.cat-head { padding: 8px 0 24px; }
.cat-head h1 {
  font-size: 26px; line-height: 1.4; display: inline;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--cat) 28%, transparent) 62%);
}
.cat-head p { margin-top: 10px; color: var(--ink-soft); }

/* ------------------------------------------------------------ 記事ページ */
.article { padding-bottom: 8px; }
.article-head { padding: 6px 0 16px; }
.labels { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.labels .cat-tab { border-radius: var(--radius); }
.article h1 { font-size: 24px; line-height: 1.45; letter-spacing: 0.01em; }
.dates { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 12px; font-size: 13px; color: var(--ink-soft); }
.dates div { display: flex; gap: 6px; }
.dates dt { font-weight: 700; }
/* 確認状況の帯。確認日は日付の行に出ているので、帯には件数と確認の事実だけを出す */
.verify {
  margin-top: 8px; padding: 5px 12px 5px 32px; position: relative; line-height: 1.5;
  font-size: 13px; font-weight: 700; font-feature-settings: "palt";
  background: var(--card); border: 1px solid var(--ink); border-radius: var(--radius);
}
.verify::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 5px; margin-top: -5px;
  border-left: 2.5px solid var(--cat); border-bottom: 2.5px solid var(--cat); transform: rotate(-45deg);
}
.verify span { white-space: nowrap; }
.byline { margin-top: 12px; font-size: 13px; line-height: 1.6; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }

.pr-label { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; margin: 8px 0 4px; padding: 8px 12px; background: #fff; border: 2px solid var(--ink); border-radius: var(--radius); }
.pr-badge { background: var(--ink); color: #fff; font-weight: 900; padding: 1px 10px; border-radius: 2px; letter-spacing: 0.08em; }
/* 広告枠（本文の見出しの直上）。中身はASPやアドセンスのコードのまま。ラベルだけを付ける */
.ad-slot { margin: 28px 0 8px; padding: 8px 0 4px; border-top: 1px solid var(--line, #ddd); text-align: center; overflow: hidden; }
.ad-label { display: block; font-size: 11px; color: #666; letter-spacing: 0.08em; text-align: left; margin-bottom: 4px; }
.ad-preview { border: 1px dashed #999; border-radius: var(--radius); padding: 8px 12px; background: #fafafa; }
.ad-preview-note { margin: 0; font-size: 12px; color: #555; }

.eyecatch img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); }

/* 固定の枠：サイトが毎記事に置く部品（この記事の結論、あなたの場合、やらなくていいこと、更新の記録、
   出典、この記事をつくった人）。左上にアイコン付きのタブ、中身を囲み線で包む。
   本文のh2（左に縦線、アイコンなし）とは形で区別する。 */
.frame {
  position: relative; margin: 40px 0 0; padding: 22px 16px 14px; scroll-margin-top: 28px;
  background: var(--card); border: 1px solid var(--ink); border-radius: var(--radius);
}
.frame > .frame-tab, .body .frame > h2.frame-tab {
  position: absolute; top: -14px; left: 12px; display: inline-block; margin: 0; padding: 5px 12px;
  border: 0; border-radius: 2px; background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 700; line-height: 1.3;
}
.frame > .frame-tab .icon, .body .frame > h2.frame-tab .icon { color: #fff; }
.body .frame { margin-bottom: 8px; }
.conclusion { margin-top: 30px; border-width: 2px; }
/* 4項目（いつから・誰が・いくら・何をする）。スマホ幅は縦積み、広い画面は左に項目名 */
.concl-4 { padding-top: 6px; }
.concl-4 > div { padding: 10px 0; }
.concl-4 > div + div { border-top: 1px dashed var(--line); }
.concl-4 dt {
  display: inline-block; font-size: 13px; font-weight: 700; line-height: 1.3; padding: 4px 10px;
  background: var(--marker); border-radius: 2px; margin-bottom: 6px;
}
.concl-4 dd { font-size: 15px; line-height: 1.75; }
.concl-4 dd.na { font-size: 12px; color: var(--ink-soft); }
.concl-extra { margin-top: 2px; padding-top: 12px; border-top: 2px solid var(--ink); }
.concl-extra-h { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.conclusion ul { list-style: none; margin-top: 6px; display: grid; gap: 6px; }
.conclusion li { padding-left: 22px; position: relative; font-size: 14px; line-height: 1.75; }
.conclusion li::before {
  content: ""; position: absolute; left: 2px; top: 0.55em; width: 11px; height: 6px;
  border-left: 3px solid var(--cat); border-bottom: 3px solid var(--cat); transform: rotate(-45deg);
}

.toc { margin-top: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.toc h2 { font-size: 14px; }
.toc ol { margin: 6px 0 0 1.4em; font-size: 14px; line-height: 1.7; }
.toc li + li { margin-top: 4px; }

.body { margin-top: 8px; }
.body h2 {
  font-size: 21px; line-height: 1.5; margin: 44px 0 16px; padding: 8px 0 8px 14px;
  border-left: 8px solid var(--cat); border-bottom: 1px solid var(--line);
}
.body h3 { font-size: 17px; line-height: 1.55; margin: 30px 0 10px; padding-left: 10px; border-left: 4px solid var(--line); }
.body p { margin: 14px 0; }
.body ul, .body ol { margin: 14px 0 14px 1.5em; }
.body li + li { margin-top: 6px; }
.body strong { font-weight: 700; }
.nb { white-space: nowrap; }
/* 蛍光ペン。結論の数字と、読者が取るべき行動の文だけに使う。数字の途中では折り返さない（.nb） */
mark {
  background: linear-gradient(transparent 55%, var(--marker) 55%); color: inherit; font-weight: 700; padding: 0 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ref { font-size: 11px; line-height: 0; margin-left: 1px; }
.ref a { text-decoration: none; padding: 1px 4px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); color: var(--link); font-variant-numeric: tabular-nums; }

.box { margin: 20px 0; padding: 14px 16px 6px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--cat); }
.box .box-title { margin: 0 0 4px; font-weight: 700; font-size: 14px; color: var(--cat); }
.box p { margin: 6px 0 10px; }
.box ul, .box ol { margin: 6px 0 10px 1.4em; }
.box-caution { border-left-color: #b5352b; }
.box-caution .box-title { color: #b5352b; }
.frame-history { font-size: 14px; }
/* 柱の記事の末尾に出す、クラスターの記事一覧 */
.cluster-list { margin-top: 48px; }
.cluster-items { list-style: none; }
.cluster-items li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 9px 0; font-size: 15px; line-height: 1.6; }
.cluster-items li:first-child { padding-top: 0; }
.cluster-items li + li { border-top: 1px dashed var(--line); }
.cluster-items a { font-weight: 700; }
.history-when { display: flex; gap: 8px; align-items: center; }

/* 更新の種別。色だけに頼らず、種別名を文字で出す */
.upd-kind { display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: 11px; font-weight: 700; line-height: 1.6; color: #fff; white-space: nowrap; }
.upd-new { background: #1a7446; }
.upd-update { background: #1d5fa8; }
.upd-law { background: #b5352b; }
.upd-add { background: #6a3f9c; }
/* 最近の更新（トップページと /updates/） */
.upd-list { list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.upd-list li { display: grid; gap: 2px 14px; padding: 10px 14px; font-size: 14px; line-height: 1.7; }
.upd-list li + li { border-top: 1px dashed var(--line); }
.upd-when { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.upd-month { margin-top: 28px; }
.upd-feed { font-size: 13px; }
.body ul.history { list-style: none; margin: 6px 0 0; display: grid; gap: 8px; }
.history li { margin: 0 !important; display: grid; gap: 0 12px; }
.history time { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.history-more { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.history-more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--link); padding: 4px 0; }
.history-more[open] summary { margin-bottom: 2px; }

.steps-wrap { margin: 20px 0; }
.steps-title { font-weight: 700; margin: 0 0 8px !important; }
.body ol.steps { list-style: none; margin: 0; counter-reset: step; display: grid; gap: 10px; }
.steps li {
  counter-increment: step; position: relative; margin: 0 !important; padding: 12px 14px 10px 58px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.steps li::before {
  content: counter(step); position: absolute; left: 12px; top: 12px; width: 34px; height: 34px;
  border-radius: 50%; background: var(--cat); color: #fff; font-weight: 900; font-size: 17px;
  display: grid; place-items: center; line-height: 1;
}
.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 28px; top: 48px; bottom: -11px; border-left: 2px dotted var(--cat);
}
.steps p { margin: 0; }
.steps .step-title { font-weight: 700; line-height: 1.5; padding-top: 3px; }
.steps .step-title + p { margin-top: 4px; font-size: 15px; }

/* 表：ふつうは横スクロール。:::cards で囲んだ表はスマホ幅で1行＝1枚のカードにする */
.scroll-hint { margin: 20px 0 -14px !important; font-size: 12px; color: var(--ink-soft); text-align: right; }
.table-wrap { margin: 20px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.65; }
.table-wrap:not(.table-cards) table { min-width: 560px; }
th, td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
thead th { background: var(--ink); color: #fff; font-size: 13px; white-space: nowrap; }
tbody th { font-weight: 700; background: color-mix(in srgb, var(--cat) 7%, var(--card)); }
.table-wrap:not(.table-cards) tbody th:not(.wrap12) { white-space: nowrap; }
.table-wrap:not(.table-cards) tbody th.wrap12 { min-width: 12em; }
tbody tr:last-child > * { border-bottom: 0; }

.table-cards { border: 0; background: none; overflow: visible; }
.table-cards table, .table-cards tbody, .table-cards tr, .table-cards th, .table-cards td { display: block; }
.table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.table-cards tr { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--cat); border-radius: var(--radius); padding: 4px 0; }
.table-cards tr + tr { margin-top: 12px; }
.table-cards tbody th { background: none; font-size: 16px; padding-bottom: 6px; }
.table-cards td { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; border-bottom: 0; border-top: 1px dashed var(--rule); padding: 8px 12px; }
.table-cards td::before { content: attr(data-label); font-size: 12px; font-weight: 700; color: var(--ink-soft); padding-top: 2px; }

/* 「あなたの場合」。スマホ幅は1件ずつ縦に並べ（状況を太字、その下に次にやること）、広い画面は2列の表 */
.cases-table tr { border: 0; border-radius: 0; padding: 10px 0 2px; background: none; }
.cases-table tr + tr { margin-top: 0; border-top: 1px dashed var(--line); }
.cases-table tr:first-child { padding-top: 0; }
.cases-table tbody th { padding: 0 0 6px; border-bottom: 0; }
.cases-table td { display: block; border-top: 0; padding: 0 0 10px; }
.cases-table td::before { content: none; }
/* スマホ幅では表の見出し行が出ないので、カードごとに「次にやること」のラベルを付ける。色は結論の4項目と同じ */
.case-label {
  display: inline-block; font-size: 12px; font-weight: 700; line-height: 1.3; padding: 3px 9px; margin-bottom: 5px;
  background: var(--marker); border-radius: 2px;
}
.cases-table .cell { display: block; }

/* 「やらなくていいこと」。取り消し線は使わず、先頭に × を付ける */
.body ul.skip-list { list-style: none; margin: 0; }
.skip-list li { margin: 0 !important; padding: 10px 0; }
.skip-list li:first-child { padding-top: 0; }
.skip-list li + li { border-top: 1px dashed var(--line); }
.skip-list p { margin: 0; }
.skip-item { font-weight: 700; line-height: 1.5; padding-left: 28px; position: relative; }
.skip-x {
  position: absolute; left: 0; top: 0.1em; width: 20px; height: 20px; border-radius: 3px;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 900; line-height: 20px; text-align: center;
}
.skip-reason { margin-top: 4px !important; padding-left: 28px; font-size: 15px; }

.fig { margin: 24px 0; padding: 14px 14px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.fig figcaption { font-weight: 700; font-size: 15px; line-height: 1.5; margin-bottom: 10px; }
.fig svg { width: 100%; max-width: 380px; }
.fig text { font-family: var(--font); fill: var(--ink); }
.fig-label { font-size: 13px; }
.fig-value { font-size: 13px; font-weight: 700; }
.fig-small { font-size: 12px; }
.fig .fig-b { font-weight: 700; }
.fig .fig-soft { fill: var(--ink-soft); }
.fig .fig-num { font-size: 12px; font-weight: 900; fill: #fff; }
.fig-bar { fill: var(--cat); }
.fig-seg { fill: var(--cat); stroke: var(--cat); stroke-width: 1; }
.fig-axis { stroke: var(--ink); stroke-width: 1; }
.fig-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.fig-zebra { fill: var(--rule); fill-opacity: 0.6; }
.fig-plate { fill: var(--card); }
.fig-box { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.fig-arrow { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fig-note { font-size: 12px; line-height: 1.7; color: var(--ink-soft); margin-top: 8px; }

.sources { margin-top: 56px; }
.related h2 { font-size: 18px; line-height: 1.4; padding-left: 12px; border-left: 6px solid var(--ink); margin-bottom: 10px; }
.sources-sub { font-size: 0.85em; font-weight: 700; }
.sources-lead { font-size: 13px; color: var(--ink-soft); }
/* 出典の種別ラベル。色だけに頼らず、種別名を文字で出す */
.kind { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 3px; font-size: 11px; font-weight: 700; line-height: 1.6; color: #fff; vertical-align: 2px; white-space: nowrap; }
.kind-gov { background: #1d4f91; }
.kind-designated { background: #0b6f82; }
.kind-association { background: #6a3f9c; }
.kind-company { background: #5c6470; }
.sources ol { margin: 8px 0 0 1.6em; font-size: 14px; line-height: 1.7; }
.sources li { padding: 6px 0; scroll-margin-top: 12px; }
.sources li + li { border-top: 1px dashed var(--line); }
.sources li:target { background: color-mix(in srgb, var(--marker) 45%, transparent); }
.src-meta { display: block; font-size: 12px; color: var(--ink-soft); }

.notice { margin-top: 28px; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; line-height: 1.75; }
.notice p + p { margin-top: 4px; }

.author-box { margin-top: 44px; }
.author-box dl { font-size: 14px; }
.author-box dl div { display: grid; grid-template-columns: 3em 1fr; gap: 10px; padding: 8px 0; }
.author-box dl div:first-child { padding-top: 0; }
.author-box dl div + div { border-top: 1px dashed var(--line); }
.author-box dt { font-weight: 700; color: var(--ink-soft); }
.author-sub { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.author-links { font-size: 13px; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line); }

.related { margin-top: 36px; }
.notfound { padding: 48px 16px; }
.notfound p { margin-top: 12px; }

/* ------------------------------------------------------------ フッター */
.site-footer { margin-top: 56px; background: var(--ink); color: #fff; padding: 28px 0 20px; font-size: 14px; }
.site-footer a { color: #fff; }
.site-footer .pending { color: #c9d0da; }
.footer-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
.footer-brand { font-size: 18px; font-weight: 900; }
.footer-promise { font-size: 13px; line-height: 1.7; color: #dfe4ea; margin-top: 4px; }
.footer-h { font-weight: 700; font-size: 13px; color: var(--marker); margin-bottom: 4px; }
.site-footer ul { list-style: none; display: grid; gap: 2px; }
.footer-bottom { margin-top: 22px; padding-top: 14px; border-top: 1px solid #46536a; font-size: 12px; color: #dfe4ea; display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: space-between; }

/* ------------------------------------------------------------ 広い画面 */
/* ---- 図：スマホ幅とPC幅で、横幅の違う図を出し分ける */
.fig svg.fig-pc { display: none; }
/* ---- 表：短いセルと1列目は、表の形で見せる幅では折らない */
/* ---- フッターなど：語の途中で折らない（<wbr> の位置でだけ折る） */
.keep { word-break: keep-all; overflow-wrap: anywhere; }
/* ---- ページの高さ：本文が短くても、フッターを画面の下端に付ける */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
/* ---- 制度カレンダー：最後の1件が奇数番目なら横いっぱい（右半分を空けない） */
.cal-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (min-width: 600px) {
  .table-wrap th.nw, .table-wrap td.nw, .table-wrap thead th:first-child { white-space: nowrap; }
  .table-wrap tbody th.wrap12 { min-width: 12em; }   /* 1列目の長い語は、全角12文字分の幅を取って折る */
  .table-wrap td:not(.nw) { min-width: 10em; }   /* 1列目が長くて表が横スクロールになっても、ほかの列が細くなりすぎないように */
  .scroll-hint { display: none; }
  .cases-table { border: 0; background: none; overflow: visible; }
  .cases-table tr, .cases-table tr + tr { padding: 0; border: 0; }
  .cases-table td { display: table-cell; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
  .cases-table tbody th { width: 36%; padding: 10px 12px; }
  .case-label { display: none; }
  .concl-4 > div { display: grid; grid-template-columns: 6.5em 1fr; gap: 14px; align-items: start; }
  .concl-4 dt { margin: 2px 0 0; text-align: center; }
  .history li { grid-template-columns: 13em 1fr; }
  .upd-list li { grid-template-columns: 13.5em 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .entries { grid-template-columns: repeat(2, 1fr); }
  .cal-list { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }

  .table-cards { border: 1px solid var(--line); background: var(--card); overflow-x: auto; }
  .table-cards table { display: table; }
  .table-cards thead { display: table-header-group; position: static; width: auto; height: auto; clip-path: none; }
  .table-cards tbody { display: table-row-group; }
  .table-cards tr { display: table-row; border: 0; border-radius: 0; padding: 0; background: none; }
  .table-cards tr + tr { margin-top: 0; }
  .table-cards th, .table-cards td { display: table-cell; }
  .table-cards tbody th { background: color-mix(in srgb, var(--cat) 7%, var(--card)); font-size: 14px; padding: 10px 12px; }
  .table-cards td { border-top: 0; border-bottom: 1px solid var(--rule); padding: 10px 12px; }
  .table-cards td::before { content: none; }
}

@media (min-width: 900px) {
  .fig svg.fig-sp { display: none; }
  .fig svg.fig-pc { display: block; width: 100%; max-width: none; }
  body { font-size: 17px; }
  .brand-name { font-size: 30px; }
  .brand-sub { font-size: 13px; }
  .cat-nav { overflow-x: visible; }
  .cat-nav .icon { display: inline-block; }
  .cat-nav a { font-size: 14px; padding: 9px 16px 8px; }
  .hero { padding-top: 28px; }
  .hero-promise { font-size: 18px; }
  .section-h { font-size: 23px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .entries { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .article h1 { font-size: 32px; }
  .body h2 { font-size: 25px; margin-top: 56px; }
  .body h3 { font-size: 19px; }
  .concl-4 dd { font-size: 16px; }
  .cat-head h1 { font-size: 32px; }
  table { font-size: 15px; }
}

@media print {
  .site-header nav, .site-footer, .preview-bar, .toc, .related { display: none; }
  body { background: #fff; }
}