/* 資格期限マップ — 単一スタイルシート。外部フォント・外部CSSは読み込まない（CSPでも禁じている）。
 *
 * 設計の方針:
 *  - これは読み物ではなく計測器。答えが主役で、文章は根拠として脇に置く。
 *  - 色は分類（失効する／義務／推奨／期限なし）にだけ使う。装飾に使わない。
 *    装飾に使うと、色が分類を意味しなくなる。
 *  - 和文の組版は palt（プロポーショナル詰め）と行長で決まる。
 *    日本語の可読な行長は40字前後なので、本文は 33rem に抑える。
 *  - 数字は tabular-nums。日付が並んだとき桁が揃わないと読み比べられない。
 */

/* ---------------------------------------------------------------- tokens */

:root {
  /* 紙とインク */
  --paper: #fbfaf7;
  --surface: #ffffff;
  --surface-2: #f5f3ee;
  --ink: #1a1c1e;
  --ink-2: #4c5054;
  /* AA(4.5:1)を満たす濃さ。#7d8186 は紙色上 3.76:1 で足りなかった */
  --ink-3: #6b6f74;
  --rule: #e5e1d8;
  --rule-strong: #cfc9bd;

  /* 唯一のブランド色 */
  --accent: #0f5245;
  --accent-ink: #ffffff;
  --accent-soft: #e8f0ed;

  /* 分類の色。ここでしか使わない */
  --danger: #a32e1e;
  --danger-soft: #fbefec;
  --caution: #8c6212;
  --caution-soft: #fbf4e4;
  --calm: #2f5875;
  --calm-soft: #eef3f7;
  --neutral: #686c71;
  --neutral-soft: #f2f1ed;

  --focus: #1a6fd4;

  --radius: 12px;
  --radius-sm: 7px;

  /* 本文の行長。和文で40字前後 */
  --measure: 33rem;
  --shell: 72rem;

  /* 節と節のあいだ。詰まっていると読む前に諦められる */
  --gap-section: 5rem;

  --shadow-sm: 0 1px 2px rgba(26, 28, 30, .04), 0 1px 1px rgba(26, 28, 30, .03);
  --shadow: 0 2px 4px rgba(26, 28, 30, .04), 0 8px 24px -12px rgba(26, 28, 30, .12);

  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "YuGothic",
    "Noto Sans JP", "Meiryo", system-ui, -apple-system, sans-serif;
  --mono: "SF Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
}


/* ---------------------------------------------------------------- base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.85;
  /* 和文の約物を詰める。これを入れるかどうかで別物になる */
  font-feature-settings: "palt" 1;
  text-spacing-trim: space-first;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .002em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .12s ease;
}
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: var(--accent-soft); color: var(--ink); }

code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--surface-2);
  padding: .1em .35em;
  border-radius: 4px;
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: "palt" 0; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 20;
  background: var(--surface); padding: .6rem 1rem; border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

/* ---------------------------------------------------------------- shell */

.site-head {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  position: sticky; top: 0; z-index: 10;
}
.site-head > .inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: .8rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.brand-mark {
  width: 1.85rem; height: 1.85rem; flex: none;
  border-radius: 6px; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  font-size: .82rem; font-weight: 700; letter-spacing: 0;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.28; }
.brand-text b { font-size: .95rem; letter-spacing: .01em; }
.brand-text small { font-size: .72rem; color: var(--ink-3); white-space: nowrap; }
.site-nav { display: flex; gap: 1.1rem; font-size: .85rem; }
/* ヘッダーの項目は絶対に折り返させない。「資格を選／ぶ」で割れると素人に見える */
.site-nav a { text-decoration: none; color: var(--ink-2); white-space: nowrap; }
.site-nav a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 34rem) {
  .site-head > .inner { padding: .7rem 1.1rem; gap: .6rem; }
  .brand-text small { display: none; }
  .brand-text b { font-size: .9rem; }
  .site-nav { gap: .85rem; font-size: .8rem; }
  /* 屋号がホームへのリンクなので、狭いときは一覧への導線を省く */
  .site-nav a:first-child { display: none; }
}

main { max-width: var(--shell); margin: 0 auto; padding: 0 1.5rem 5rem; }
@media (max-width: 34rem) { main { padding: 0 1.1rem 3.5rem; } }

.site-foot {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  background: var(--surface-2);
}
.site-foot > .inner {
  max-width: var(--shell); margin: 0 auto; padding: 2.2rem 1.5rem 3rem;
  font-size: .8rem; line-height: 1.85; color: var(--ink-3);
}
.privacy-badge {
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--rule); border-left: 3px solid var(--calm);
  border-radius: var(--radius-sm); padding: .85rem 1rem; margin: 0 0 1rem;
  max-width: 46rem;
}
.privacy-badge b { color: var(--ink); }
.foot-meta { max-width: 46rem; margin: 0 0 1rem; }
.foot-links { margin: 0; }
.foot-links a { color: var(--ink-2); }

/* ---------------------------------------------------------------- 分類トークン
 * 分類はサイト全体で同じ見た目にする。索引でもページでも表でも。
 * 見た目が揺れると、利用者は同じものだと分からない。 */

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: .18rem .6rem .18rem .5rem;
  border-radius: 999px; white-space: nowrap;
  border: 1px solid currentColor;
}
.chip::before {
  content: ""; width: .45rem; height: .45rem; border-radius: 1px;
  background: currentColor; flex: none;
}
.chip-danger  { color: var(--danger);  background: var(--danger-soft); }
.chip-caution { color: var(--caution); background: var(--caution-soft); }
.chip-calm    { color: var(--calm);    background: var(--calm-soft); }
.chip-neutral { color: var(--neutral); background: var(--neutral-soft); }

/* ---------------------------------------------------------------- hero */

.hero { padding: 3.5rem 0 3.5rem; border-bottom: 1px solid var(--rule); }
@media (max-width: 34rem) {
  .hero { padding: 2rem 0 2.25rem; }
  :root { --gap-section: 3.25rem; }
}
.hero-grid { display: grid; gap: 2.25rem; align-items: start; }
@media (min-width: 62rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 18rem; gap: 3.5rem; }
}
.hero-inner { max-width: 40rem; }

/* 和文は約物や助詞の途中で折れると読みにくい。
 * 見出しは厳格な禁則にして、割れてほしくない句は .nb で塊にする。 */
h1, h2, h3, .card-title a, .legend b { line-break: strict; word-break: normal; overflow-wrap: normal; }
.nb { display: inline-block; }

/* 分類の凡例。装飾ではなく、この道具の主張そのものなので本文の隣に置く */
.legend {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.15rem 1.25rem;
}
.legend h2 { font-size: .9rem; margin: 0 0 .85rem; letter-spacing: .01em; }
.legend ul { list-style: none; margin: 0 0 .9rem; padding: 0; }
.legend li { border-bottom: 1px dashed var(--rule); }
.legend li:last-child { border-bottom: 0; }
.legend a {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem 0; text-decoration: none; color: var(--ink);
}
.legend a:hover b { text-decoration: underline; }
.legend a::before {
  content: ""; width: .55rem; height: .55rem; border-radius: 2px; flex: none;
  background: var(--tone, var(--rule-strong));
}
.legend b { font-size: .855rem; font-weight: 600; flex: 1; }
.legend-n { font-size: .76rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.legend-danger  { --tone: var(--danger); }
.legend-caution { --tone: var(--caution); }
.legend-calm    { --tone: var(--calm); }
.legend-neutral { --tone: var(--neutral); }
.legend > p { font-size: .78rem; line-height: 1.8; color: var(--ink-3); margin: 0; }
.eyebrow {
  font-size: .76rem; font-weight: 700; letter-spacing: .14em;
  color: var(--ink-3); margin: 0 0 1rem;
}
.hero h1 {
  font-size: clamp(1.7rem, 1.05rem + 2.2vw, 2.55rem);
  line-height: 1.4;
  letter-spacing: -.005em;
  margin: 0 0 1.25rem;
}
.hero h1 .mark {
  /* 赤で叫ばず、下線で指す */
  color: inherit;
  background-image: linear-gradient(transparent 64%, var(--danger-soft) 64%);
  box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--danger) 70%, transparent);
}
.hero-lead { font-size: 1.02rem; color: var(--ink-2); max-width: var(--measure); margin: 0 0 1.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }
@media (max-width: 34rem) { .hero-actions .btn { flex: 1 1 100%; } }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .62rem 1.25rem;
  border-radius: 999px; border: 1px solid var(--rule-strong);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: .92rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .06s ease;
}
.btn:hover { border-color: var(--ink-3); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { color: var(--accent-ink); filter: brightness(1.08); border-color: var(--accent); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); }

/* ---------------------------------------------------------------- 索引（トップ） */

.section { padding: var(--gap-section) 0 0; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .9rem;
  flex-wrap: wrap; margin-bottom: .4rem;
  padding-bottom: .55rem; border-bottom: 1px solid var(--rule);
}
.section-head h2 { font-size: 1.12rem; letter-spacing: .01em; display: flex; align-items: baseline; gap: .6rem; }
.sec-tick { width: .5rem; height: .5rem; border-radius: 2px; background: var(--tone, var(--rule-strong)); flex: none; }
.sec-danger  { --tone: var(--danger); }
.sec-caution { --tone: var(--caution); }
.sec-calm    { --tone: var(--calm); }
.sec-neutral { --tone: var(--neutral); }
.sec-count { font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }

.section-lead { color: var(--ink-2); font-size: .9rem; max-width: 44rem; margin: 1.1rem 0 2rem; }

.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; align-items: start; }
@media (min-width: 62rem) { .cards { grid-template-columns: 1fr 1fr; } }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem 1.4rem;
  display: flex; flex-direction: column;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.card::before {
  /* 分類の色は左の細い罫だけで示す。面で塗ると索引が騒がしくなる */
  content: ""; position: absolute; left: 0; top: .9rem; bottom: .9rem;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--tone, var(--rule-strong));
}
.card:hover { border-color: var(--rule-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.card-danger  { --tone: var(--danger); }
.card-caution { --tone: var(--caution); }
.card-calm    { --tone: var(--calm); }
.card-neutral { --tone: var(--neutral); }

.card-title { display: flex; align-items: baseline; justify-content: space-between; gap: .9rem; }
.card-title a { text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1rem; line-height: 1.5; }
.card-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card:hover .card-title a { color: var(--accent); }
.card-cycle {
  flex: none; font-size: .78rem; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.card-trap { margin: .45rem 0 0; font-size: .845rem; line-height: 1.78; color: var(--ink-2); }

/* ---------------------------------------------------------------- 起算日の型（トップの参照表） */

.types { border-top: 1px solid var(--rule); margin-top: 1.4rem; }
.type-row {
  display: grid; gap: .15rem 1.25rem; padding: .95rem .2rem;
  border-bottom: 1px solid var(--rule);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .type-row { grid-template-columns: 11rem 1fr; } }
.type-name { font-weight: 700; font-size: .9rem; }
.type-rule { font-size: .87rem; color: var(--ink-2); }
.type-who { font-size: .78rem; color: var(--ink-3); margin-top: .1rem; }

/* ---------------------------------------------------------------- 資格ページの2段組 */

.crumbs { font-size: .78rem; color: var(--ink-3); padding: 1.1rem 0 0; }
.crumbs a { color: var(--ink-3); }

.doc-head { padding: .5rem 0 1.5rem; border-bottom: 1px solid var(--rule); }
.doc-head h1 {
  font-size: clamp(1.4rem, 1rem + 1.7vw, 2.05rem);
  margin: .55rem 0 0; letter-spacing: -.004em;
}
.doc-head .sub { color: var(--ink-2); font-size: .92rem; margin: .6rem 0 0; max-width: var(--measure); }

.layout { display: grid; gap: 2.5rem; align-items: start; padding-top: 2.25rem; }
@media (min-width: 64rem) {
  .layout { grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 3.5rem; }
  .rail { position: sticky; top: 5rem; }
}
.col-main { min-width: 0; }
.col-main > * + * { margin-top: 3.25rem; }
.prose { max-width: var(--measure); }

.block h2 {
  font-size: 1.02rem; margin-bottom: 1rem;
  padding-bottom: .45rem; border-bottom: 1px solid var(--rule);
}
.block-hard h2 { border-bottom-color: var(--danger); }
.block-soft h2 { border-bottom-color: var(--calm); }

/* ---------------------------------------------------------------- 罠 */

.trap {
  background: var(--caution-soft);
  border: 1px solid color-mix(in srgb, var(--caution) 24%, transparent);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
}
.trap h2 {
  font-size: .74rem; letter-spacing: .12em; color: var(--caution);
  margin: 0 0 .5rem; border: 0; padding: 0;
}
.trap p { font-size: .94rem; margin: 0; }

/* ---------------------------------------------------------------- 計算機 */

.calc {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.calc-head {
  padding: 1rem 1.35rem;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.calc-head h2 { font-size: .95rem; border: 0; padding: 0; margin: 0; }
.calc-head .hint { margin: 0; }
.calc-body { padding: 1.75rem; }

.field label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: .5rem; }
.field-input { position: relative; }
.field input[type="text"], .field input[type="date"], textarea {
  width: 100%;
  padding: .9rem 1rem;
  font: inherit; font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.field input[aria-invalid="true"] { border-color: var(--danger); }
textarea { line-height: 1.75; font-size: .92rem; resize: vertical; min-height: 9rem; }

.echo { font-size: .8rem; margin: .5rem 0 0; min-height: 1.4em; color: var(--ink-3); }
.echo-ok { color: var(--accent); }
.echo-ng { color: var(--danger); }
.hint { font-size: .78rem; color: var(--ink-3); margin: .5rem 0 0; line-height: 1.75; }

.examples { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 0; }
.examples button {
  font: inherit; font-size: .75rem; cursor: pointer;
  padding: .16rem .55rem; border-radius: 999px;
  border: 1px dashed var(--rule-strong); background: transparent; color: var(--ink-3);
}
.examples button:hover { border-style: solid; color: var(--accent); border-color: var(--accent); }

/* 答えの板 */
.answer { margin-top: 1.45rem; padding-top: 1.35rem; border-top: 1px solid var(--rule); display: block; }
.answer[hidden] { display: none; }
.answer-label { font-size: .74rem; letter-spacing: .12em; color: var(--ink-3); margin: 0 0 .15rem; }
.answer-date {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.6rem);
  font-weight: 700; line-height: 1.2; letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.answer-sub {
  font-size: .87rem; color: var(--ink-2); margin: .35rem 0 0;
  font-variant-numeric: tabular-nums;
}
.answer-status { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .95rem; }
.st-aside { font-size: .84rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.st {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .84rem; font-weight: 700; padding: .22rem .75rem;
  border-radius: 999px; font-variant-numeric: tabular-nums;
}
.st::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.st-expired, .st-critical { background: var(--danger-soft); color: var(--danger); }
.st-warn, .st-notice { background: var(--caution-soft); color: var(--caution); }
.st-ok, .st-none { background: var(--calm-soft); color: var(--calm); }
/* 分類Bは「失効しない」ので、期限系の色を当てない */
.st-ok-soft, .st-due-soft { background: var(--neutral-soft); color: var(--neutral); }

/* 素朴計算との差 */
.diff {
  margin-top: 1.1rem; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
  background: var(--danger-soft);
  padding: .85rem 1rem; font-size: .86rem; line-height: 1.8;
}
.diff b { display: block; color: var(--danger); font-variant-numeric: tabular-nums; }
.diff-note { border-color: var(--rule); background: var(--surface-2); }
.diff-note b { color: var(--ink); }

/* 手続きの締切 */
.deadline {
  margin-top: 1.1rem; padding: .85rem 1rem; border-radius: var(--radius-sm);
  background: var(--calm-soft); border: 1px solid color-mix(in srgb, var(--calm) 22%, transparent);
  font-size: .86rem; line-height: 1.8;
}
.deadline b { display: block; font-variant-numeric: tabular-nums; }
.deadline-passed { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 28%, transparent); }
.deadline-passed b { color: var(--danger); }

.warn-note {
  margin: .9rem 0 0; padding: .75rem .95rem; border-radius: var(--radius-sm);
  background: var(--caution-soft); color: var(--caution); font-size: .85rem; line-height: 1.8;
}

.row-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.3rem; }

/* ---------------------------------------------------------------- 段取り（時系列） */

.timeline { list-style: none; padding: 0; margin: 1rem 0 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: .28rem; top: .6rem; bottom: .6rem;
  width: 1px; background: var(--rule);
}
.timeline li {
  position: relative; padding: .75rem 0 .75rem 1.6rem;
  display: grid; gap: .1rem .9rem; font-size: .88rem;
}
@media (min-width: 40rem) { .timeline li { grid-template-columns: 7rem 1fr; } }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem;
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--rule-strong);
}
.timeline li:last-child::before { border-color: var(--accent); background: var(--accent); }
.t-when { color: var(--ink-3); font-size: .8rem; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 右レール */

.rail > * + * { margin-top: 1.5rem; }
.rail-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.05rem 1.15rem;
}
.rail-card h3 {
  font-size: .72rem; letter-spacing: .12em; color: var(--ink-3);
  margin: 0 0 .75rem;
}
.spec { margin: 0; font-size: .85rem; }
.spec div { display: flex; justify-content: space-between; gap: .8rem; padding: .42rem 0; border-bottom: 1px dashed var(--rule); }
.spec div:last-child { border-bottom: 0; padding-bottom: 0; }
.spec dt { color: var(--ink-3); flex: none; }
.spec dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.rail-list { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.rail-list li { padding: .38rem 0; border-bottom: 1px dashed var(--rule); }
.rail-list li:last-child { border-bottom: 0; }
.rail-list a { text-decoration: none; }
.rail-list a:hover { text-decoration: underline; }

.sources-list { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.sources-list li { padding: .45rem 0; border-bottom: 1px dashed var(--rule); line-height: 1.7; }
.sources-list li:last-child { border-bottom: 0; }
.tier {
  display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-3); border: 1px solid var(--rule-strong); border-radius: 3px;
  padding: 0 .3rem; margin-right: .4rem; vertical-align: .1em;
}

.notes { margin: .4rem 0 0; padding-left: 1.15rem; font-size: .89rem; color: var(--ink-2); }
.notes li { margin: .7rem 0; }

/* ---------------------------------------------------------------- まとめて調べる */

.summary {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.sum {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: .8rem .9rem;
  display: flex; flex-direction: column; line-height: 1.35;
  border-top: 3px solid var(--tone, var(--rule-strong));
}
.sum b { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sum span { font-size: .74rem; color: var(--ink-3); margin-top: .15rem; }
.sum-danger  { --tone: var(--danger); }  .sum-danger b  { color: var(--danger); }
.sum-caution { --tone: var(--caution); } .sum-caution b { color: var(--caution); }
.sum-calm    { --tone: var(--calm); }    .sum-calm b    { color: var(--calm); }
.sum-neutral { --tone: var(--neutral); } .sum-neutral b { color: var(--neutral); }
.sum-zero { --tone: var(--rule); }
.sum-zero b { color: var(--ink-3); }
.sum-zero span { color: var(--ink-3); }

.layout-note { font-size: .85rem; color: var(--ink-2); margin: 2.4rem 0 .9rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }

.table-wrap {
  border: 1px solid var(--rule); border-radius: var(--radius);
  overflow-x: auto; background: var(--surface);
}
table.grid { width: 100%; border-collapse: collapse; font-size: .855rem; }
table.grid th, table.grid td { padding: .62rem .8rem; text-align: left; vertical-align: top; white-space: nowrap; }
/* 状態の文言は長い。ここだけ折り返させないと、右端の区分列が画面外へ押し出される */
table.grid td.wrap, table.grid th.wrap { white-space: normal; min-width: 11rem; }
table.grid thead th {
  font-size: .72rem; letter-spacing: .06em; font-weight: 700; color: var(--ink-3);
  border-bottom: 1px solid var(--rule-strong); background: var(--surface-2);
  position: sticky; top: 0;
}
table.grid tbody tr { border-bottom: 1px solid var(--rule); }
table.grid tbody tr:last-child { border-bottom: 0; }
table.grid td:first-child { font-weight: 600; }
table.grid .num { font-variant-numeric: tabular-nums; }
table.grid tbody tr.row-expired  { background: var(--danger-soft); }
table.grid tbody tr.row-critical,
table.grid tbody tr.row-warn     { background: var(--caution-soft); }
table.grid tbody tr.row-error    { background: var(--danger-soft); }
table.grid a { text-decoration: none; }
table.grid a:hover { text-decoration: underline; }

.guess {
  font-size: .66rem; color: var(--ink-3); border: 1px solid var(--rule-strong);
  border-radius: 3px; padding: 0 .28rem; margin-left: .35rem; vertical-align: .08em;
}
.bad { color: var(--danger); }

/* ---------------------------------------------------------------- 別枠リスト */

.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.plain > li {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1rem 1.2rem; font-size: .9rem;
}
.plain > li > b { font-size: .96rem; }
.sources { font-size: .78rem; margin: .6rem 0 0; }

/* キーボードで到達できる隠し方。hidden や display:none だとフォーカスが当たらない */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.visually-hidden:focus-visible + .btn { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- 印刷
 * 社内回覧に使われる想定。画面用の装飾は全部落として、罫と文字だけにする。 */

@media print {
  :root {
    --paper: #fff; --surface: #fff; --surface-2: #fff;
    --ink: #000; --ink-2: #222; --ink-3: #555;
    --rule: #bbb; --rule-strong: #888;
    --danger-soft: #fff; --caution-soft: #fff; --calm-soft: #fff; --neutral-soft: #fff;
    --shadow: none; --shadow-sm: none;
  }
  @page { margin: 14mm; }
  body { font-size: 10.5pt; line-height: 1.7; background: #fff; }
  .site-head, .site-nav, .row-actions, .hero-actions, .examples, .skip,
  .field, .calc-head .hint, .site-foot .foot-links { display: none !important; }
  main { max-width: none; padding: 0; }
  .layout { display: block; }
  .rail { margin-top: 1.5rem; }
  .rail-card, .card, .calc, .plain > li { break-inside: avoid; border: 1px solid #bbb; box-shadow: none; }
  /* 表は複数ページにまたがってよい。avoid を付けると大きな空白ができる */
  .table-wrap { border: 1px solid #bbb; overflow: visible; break-inside: auto; }
  table.grid th, table.grid td { white-space: normal; }
  table.grid thead { display: table-header-group; }
  table.grid thead th { position: static; }
  table.grid tbody tr { break-inside: avoid; }
  /* 畳んだ根拠が紙に出ないと、回覧された側が裏取りできない */
  details.fold > .fold-body { display: block !important; }
  details.fold > summary { list-style: none; font-weight: 700; }
  details.fold > summary::before { display: none; }
  /* 画面向けの断り書きは紙では場所を食うだけ。確認日と免責だけ残す */
  .privacy-badge, .examples, .echo, .section-note { display: none !important; }
  .answer-date { font-size: 20pt; }
  a { color: #000; text-decoration: none; }
  /* 印刷物には出典URLを紙面に出す（画面のリンクは紙では死ぬ） */
  .sources-list a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; word-break: break-all; }
}

/* ---------------------------------------------------------------- 図
 *
 * 最初は「同じ時間軸に2本のバー」で作ったが、棒グラフに見えて
 * 読み手が長さを比べようとしてしまうのでやめた。
 * 読み取ってほしいのは長さではなく「どの日から数え始めるか」なので、
 * 数える単位（年・年度）をそのままマス目にして縦に流す。
 */

.figure {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  text-align: center;
}
.figure > figcaption {
  font-size: .74rem; letter-spacing: .1em; color: var(--ink-3);
  margin: 0 0 1.25rem; text-align: left;
}

.fig-from, .fig-to {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
}
.fig-from-label, .fig-to-label { font-size: .74rem; letter-spacing: .1em; color: var(--ink-3); }
.fig-from b, .fig-to b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.fig-to b { font-size: 1.5rem; letter-spacing: -.01em; }

/* 下向きの流れ。矢印は罫で描く（画像を使わない） */
.fig-arrow {
  position: relative; margin: .3rem 0 1.15rem; padding-top: 2.1rem;
  font-size: .8rem; color: var(--ink-2); line-height: 1.7;
}
.fig-arrow::before {
  content: ""; position: absolute; left: 50%; top: .35rem;
  width: 1px; height: 1.35rem; background: var(--rule-strong);
}
.fig-arrow::after {
  content: ""; position: absolute; left: 50%; top: 1.35rem;
  width: .42rem; height: .42rem; margin-left: -.21rem;
  border-right: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong);
  transform: rotate(45deg);
}

/* 数える年（年度）のマス目 */
.fig-cells {
  list-style: none; margin: 0 0 1.15rem; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
}
.fig-cells li {
  flex: 1 1 4.6rem; max-width: 7rem;
  padding: .6rem .3rem;
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.fig-cells li.is-last {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.fig-cells-span li { flex: 0 1 9rem; max-width: 11rem; }

.fig-converge {
  margin: 1.15rem auto 0; max-width: 30rem;
  font-size: .82rem; line-height: 1.8; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: .6rem .9rem;
}
.fig-naive {
  margin: 1.15rem auto 0; max-width: 30rem;
  display: flex; flex-direction: column; gap: .1rem;
  font-size: .8rem; color: var(--ink-3);
  padding-top: 1rem; border-top: 1px dashed var(--rule-strong);
}
.fig-naive s {
  color: var(--danger); font-size: 1rem; font-weight: 700;
  font-variant-numeric: tabular-nums; text-decoration-thickness: 2px;
}

/* 例として置いてある図。実データではないと分かるように落とす */
.figure-sample { opacity: .7; }
.figure-sample .fig-cells li.is-last { background: var(--ink-3); border-color: var(--ink-3); color: var(--surface); }
.sample-tag {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  padding: 0 .35rem; margin-right: .5rem; color: var(--ink-3);
}

/* ---------------------------------------------------------------- 分類のアイコン
 * 色だけで分類を示さない。かならず形と文字を添える。 */

.ico { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.16em; }

/* ---------------------------------------------------------------- 畳む
 * 初見の人に全部読ませない。要るときだけ開く。 */

details.fold {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); padding: 0 1.35rem;
}
details.fold + details.fold { margin-top: .8rem; }
details.fold > summary {
  cursor: pointer; list-style: none;
  padding: .95rem 0; font-size: .92rem; font-weight: 700;
  display: flex; align-items: center; gap: .6rem;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before {
  content: ""; width: .45rem; height: .45rem; flex: none;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(-45deg); transition: transform .15s ease; margin-left: .15rem;
}
details.fold[open] > summary::before { transform: rotate(45deg); }
details.fold > summary:hover { color: var(--accent); }
.fold-body { padding: 0 0 1.35rem; }
.fold-body > *:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- 見出し直下の3点
 * 開いて最初に目に入るところで結論を出す。読ませる前に答える。 */

.keyfacts {
  display: grid; gap: 1px; margin: 1.6rem 0 0;
  background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 40rem) { .keyfacts { grid-template-columns: repeat(3, 1fr); } }
.keyfacts > div { background: var(--surface); padding: .9rem 1.1rem; }
.keyfacts dt { font-size: .72rem; letter-spacing: .1em; color: var(--ink-3); margin-bottom: .15rem; }
.keyfacts dd { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.5; }

/* ---------------------------------------------------------------- 起算日の型カード */

.type-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.35rem; align-items: start; }
@media (min-width: 66rem) { .type-cards { grid-template-columns: 1fr 1fr; } }
.type-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.4rem 1.5rem 1.5rem;
}
.type-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.type-head h3 { font-size: 1rem; }
.type-count { font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.type-rule { font-size: .87rem; color: var(--ink-2); margin: .5rem 0 1.15rem; }
.type-card .figure { border: 0; padding: 0; background: transparent; }
.type-card .figure > figcaption { display: none; }
.type-who { font-size: .8rem; color: var(--ink-3); margin: 1.15rem 0 0; padding-top: .9rem; border-top: 1px solid var(--rule); }
.type-who a { color: var(--ink-2); text-decoration: none; }
.type-who a:hover { color: var(--accent); text-decoration: underline; }

/* ---------------------------------------------------------------- 索引カード */

.card-count {
  display: flex; align-items: center; gap: .5rem;
  margin: .7rem 0 0; font-size: .85rem; color: var(--ink-2);
}
.card-count b { color: var(--ink); font-weight: 700; }
.card-count .ico { color: var(--tone, var(--ink-3)); }

.section-head h2 .ico { color: var(--tone, var(--ink-3)); margin-right: .1rem; }
.section-head h2 { gap: .5rem; }
#cat-expiring    .section-head h2 { --tone: var(--danger); }
#cat-duty        .section-head h2 { --tone: var(--caution); }
#cat-recommended .section-head h2 { --tone: var(--neutral); }
#cat-none        .section-head h2 { --tone: var(--calm); }

.legend a .ico { color: var(--tone, var(--ink-3)); }
.legend a::before { display: none; }
.chip .ico { margin-right: -.05rem; }
.chip::before { display: none; }

/* 入力前に置く例の図 */
.answer-placeholder { margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.answer:not([hidden]) ~ .answer-placeholder { display: none; }
.answer-figure { margin-top: 1.6rem; }
.answer-figure .figure { border: 0; padding: 0; background: transparent; }

/* 結論カード。開いて最初に目に入る位置に、20字前後の答えだけを置く。
 * ここまで文章を読ませない。 */
.verdict {
  margin: 1.25rem 0 0;
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 4px solid var(--tone, var(--accent));
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
}
.verdict-label { font-size: .74rem; letter-spacing: .1em; color: var(--ink-3); margin: 0 0 .3rem; }
.verdict-rule {
  font-size: clamp(1.2rem, .95rem + 1.1vw, 1.6rem); font-weight: 700;
  line-height: 1.5; margin: 0; letter-spacing: -.005em;
}
.verdict-not { margin: .7rem 0 0; font-size: .9rem; color: var(--ink-2); }
.verdict-not b { color: var(--danger); }
.v-expiring { --tone: var(--danger); }
.v-duty { --tone: var(--caution); }
.v-recommended { --tone: var(--neutral); }
.v-none { --tone: var(--calm); }

.warncard {
  display: flex; gap: .65rem; align-items: flex-start;
  margin: 1.1rem 0 0; padding: .9rem 1.1rem;
  background: var(--caution-soft); border-radius: var(--radius-sm);
  font-size: .875rem; line-height: 1.8; color: var(--ink-2);
}
.warncard .ico { color: var(--caution); margin-top: .35em; }

@media (max-width: 34rem) {
  .verdict { padding: 1.15rem 1.25rem; }
  .layout { padding-top: 1.5rem; }
  .col-main > * + * { margin-top: 2.75rem; }
  .figure { padding: 1.25rem 1rem; }
}

.fig-to-sub { font-size: .82rem; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: .15rem; }
.answer { padding-top: 1.6rem; }
.answer .answer-status { justify-content: center; margin-top: 1.25rem; }
.answer-figure { margin-top: 0; }
.answer-figure .figure { background: var(--surface-2); border: 1px solid var(--rule); padding: 1.75rem 1.6rem; }

.section-note {
  display: flex; gap: .6rem; align-items: flex-start;
  margin: 1.35rem 0 0; padding: .95rem 1.15rem;
  background: var(--caution-soft); border-radius: var(--radius-sm);
  font-size: .875rem; line-height: 1.8;
}
.section-note .ico { color: var(--caution); margin-top: .35em; }

/* 制度上の期日と、こちらの提案を見た目で分ける。
 * 混ぜて並べると「守らないといけない日」と「早めの目安」の区別がつかない。 */
.t-kind {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  border-radius: 3px; padding: .05rem .35rem; margin-right: .5rem; vertical-align: .1em;
  border: 1px solid currentColor;
}
.t-rule .t-kind { color: var(--danger); background: var(--danger-soft); }
.t-plan .t-kind { color: var(--ink-3); background: var(--surface-2); }
.timeline li.t-rule::before { border-color: var(--danger); background: var(--danger); }
.timeline li.t-plan::before { border-color: var(--rule-strong); background: var(--surface); }
.timeline li:last-child::before { border-color: inherit; }