/*!
 * 港と星の航海日誌 ― 6つの巻に共通のスタイルシート
 * simple(ふしぎな話) / simple_ex(ひっかかった話) / exhaustive(しらべノート) /
 * exhaustive_ex(きをつけノート)が共有する。
 * 外部依存(Webフォント・CDN・アイコンフォント)は持たない。1ファイルで完結する。
 *
 * 目次
 *   1. デザイントークン(ライト / ダーク / 裏の巻 / 裏の巻ダーク)
 *   2. リセットと基本要素
 *   3. スキップリンク・ヘッダー・グローバルナビ
 *   4. レイアウト(page-body / content / sidebar)
 *   5. 記事コンポーネント(パンくず・記事ヘッダー・本文・図・ふりがな・コールアウト・要点)
 *   6. トップページ・サイトマップ・404 用コンポーネント
 *   7. フッター・ページ先頭へ戻る
 *   8. レスポンシブ
 *   9. 印刷・モーション低減・強制配色
 */

/* ============================================================
   1. デザイントークン
   ============================================================ */
:root {
  /* 面 ― まっ白にしない。ふしぎの国の古い紙。ほんのり藤色 */
  --color-bg: #f3f1fb;
  --color-bg-alt: #e8e4f4;
  --color-surface: #fffdff;
  --color-surface-alt: #efebf9;
  --color-border: #dcd5ef;
  --color-border-strong: #b3a7d6;
  /* 文字 ― まっ黒にしない。青みの墨 */
  --color-text: #1c182f;
  --color-text-muted: #494063;
  --color-text-faint: #5c527b;
  /* 主色 ― 藍紫(扉の色) */
  --color-primary: #4a3d9c;
  --color-primary-dark: #352a79;
  --color-primary-soft: #e9e4fa;
  --color-primary-border: #b0a3e2;
  --color-on-primary: #fffdff;
  /* 副色 ― 金(鍵の色) */
  --color-accent: #7d5709;
  --color-accent-soft: #fdf2da;
  --color-accent-border: #e0c489;
  /* 状態色 */
  --color-success: #1f6a4f;
  --color-success-soft: #e2f1ea;
  --color-warning: #a02640;
  --color-warning-soft: #fce9ee;
  --color-warning-border: #ecb1bf;
  /* コード・引用 */
  --color-code-bg: #ebe6f7;
  --color-code-text: #282040;
  /* 挿絵 */
  --scene-ink: #2e2848;
  --scene-tint: #fffdff;
  --scene-paper: #f3f1fb;
  --scene-accent: #4a3d9c;
  /* 装飾 ― 格子と光。地の文の後ろには敷かない(第5節) */
  --deco-grid: rgba(74, 61, 156, .07);
  --deco-glow: rgba(74, 61, 156, .16);
  /* 影 ― 紙なので浅く */
  --shadow-sm: 0 1px 2px rgba(34, 24, 66, .08);
  --shadow-md: 0 2px 8px rgba(34, 24, 66, .10);
  --shadow-lg: 0 10px 28px rgba(34, 24, 66, .15);
  /* 形状 ― 角丸は小さめ。紙に近づける */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  /* レイアウト定数 */
  --header-height: 64px;
  --sidebar-width: 272px;
  --content-max: 1120px;
  /* 書体。外部フォントを読み込まない */
  --font-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic",
             "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
  /* 見出しは明朝。紙の本の佇まいは、ここでほとんど決まる */
  --font-mincho: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho,
                 "Noto Serif JP", "Source Han Serif", serif;
  --font-en: ui-sans-serif, -apple-system, "Segoe UI", "Helvetica Neue", Arial,
             "Hiragino Kaku Gothic ProN", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
}

/* 裏の2巻(ひっかかった話 / きをつけノート)。紙の色と差し色を臙脂に寄せる */
body.theme-ura {
  --color-bg: #fbf0f7;
  --color-bg-alt: #f5e3ee;
  --color-surface: #fffcfe;
  --color-surface-alt: #f7e9f1;
  --color-border: #ecd3e2;
  --color-border-strong: #c9a1ba;
  --color-text: #28142a;
  --color-text-muted: #5c3a55;
  --color-text-faint: #6f4a67;
  --color-primary: #9c1e63;
  --color-primary-dark: #7a1249;
  --color-primary-soft: #fbe4f0;
  --color-primary-border: #dfa9c9;
  --color-on-primary: #fffcfe;
  --color-accent: #7a5509;
  --color-accent-soft: #fdf1d9;
  --color-accent-border: #ddc089;
  --color-success: #1f6a4f;
  --color-success-soft: #e2f1ea;
  --color-warning: #a02640;
  --color-warning-soft: #fce7ec;
  --color-warning-border: #e9adbc;
  --color-code-bg: #f3e4ee;
  --color-code-text: #2f1a2c;
  --scene-ink: #3a2038;
  --scene-tint: #fffcfe;
  --scene-paper: #fbf0f7;
  --scene-accent: #9c1e63;
  --deco-grid: rgba(156, 30, 99, .07);
  --deco-glow: rgba(156, 30, 99, .16);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 夜の町。ネオンの灯った港。暗い藍黒に、シアンと金 */
    --color-bg: #0d0f1c;
    --color-bg-alt: #141729;
    --color-surface: #161a2f;
    --color-surface-alt: #1d2139;
    --color-border: #2b3050;
    --color-border-strong: #4a5182;
    --color-text: #e7e7f8;
    --color-text-muted: #b6b8da;
    --color-text-faint: #9c9ec6;
    --color-primary: #6fe3f2;
    --color-primary-dark: #a7eff9;
    --color-primary-soft: #132634;
    --color-primary-border: #3a6b82;
    --color-on-primary: #08131c;
    --color-accent: #f2c052;
    --color-accent-soft: #2a2412;
    --color-accent-border: #6d5a24;
    --color-success: #63d6a4;
    --color-success-soft: #0f2a20;
    --color-warning: #ff90a6;
    --color-warning-soft: #2c1620;
    --color-warning-border: #6a3346;
    --color-code-bg: #1a1e34;
    --color-code-text: #dfe0f2;
    --scene-ink: #c6c8ea;
    --scene-tint: #161a2f;
    --scene-paper: #0d0f1c;
    --scene-accent: #6fe3f2;
    --deco-grid: rgba(111, 227, 242, .07);
    --deco-glow: rgba(111, 227, 242, .26);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-md: 0 3px 10px rgba(0, 0, 0, .5);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, .55);
  }
  body.theme-ura {
    --color-bg: #140b18;
    --color-bg-alt: #1c1022;
    --color-surface: #1f1326;
    --color-surface-alt: #28182f;
    --color-border: #3a2442;
    --color-border-strong: #5e3d68;
    --color-text: #f4e6f4;
    --color-text-muted: #cdafc8;
    --color-text-faint: #b294ae;
    --color-primary: #f39ada;
    --color-primary-dark: #f9bbe6;
    --color-primary-soft: #2e1430;
    --color-primary-border: #6b3a63;
    --color-on-primary: #140b18;
    --color-accent: #eec05e;
    --color-accent-soft: #2f2513;
    --color-accent-border: #65512a;
    --color-success: #63d6a4;
    --color-success-soft: #0f2a20;
    --color-warning: #ff90a6;
    --color-warning-soft: #301722;
    --color-warning-border: #6d3348;
    --color-code-bg: #241429;
    --color-code-text: #efe0ec;
    --scene-ink: #d9bcd4;
    --scene-tint: #1f1326;
    --scene-paper: #140b18;
    --scene-accent: #f39ada;
    --deco-grid: rgba(243, 154, 218, .07);
    --deco-glow: rgba(243, 154, 218, .26);
  }
}

/* ============================================================
   2. リセットと基本要素
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* sticky ヘッダーの下にアンカー着地点が隠れるのを全アンカーで一括回避する */
  scroll-padding-top: calc(var(--header-height) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-jp);
  /* 読者は小学校高学年。大人向けの16pxより1段大きくし、ふりがなも読める大きさにする */
  font-size: 17px;
  line-height: 1.9;
  font-feature-settings: "palt" 1;
  text-underline-offset: .18em;
}

/* 見出しは明朝。紙の本の佇まいは、ここでほとんど決まる */
h1, h2, h3, h4, h5 {
  font-family: var(--font-mincho);
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text);
  letter-spacing: .02em;
}
/* 数字と小さなラベルはゴシックのまま。明朝だと読みにくい */
.nav-chapter-num, .note-card-no, .tale-card-no, .q-num, .chapter-badge-num,
.progress-text, .side-nav-count, .part-count { font-family: var(--font-en); }

a { color: var(--color-primary); text-decoration-thickness: 1px; }
a:hover { color: var(--color-primary-dark); }

img, svg { max-width: 100%; }
img { height: auto; }

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

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--color-code-bg);
  color: var(--color-code-text);
  padding: .12em .35em;
  border-radius: 5px;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 40px 0;
}

/* ============================================================
   3. スキップリンク・ヘッダー・グローバルナビ
   ============================================================ */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  transform: translateY(-160%);
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform .15s ease-out;
}
.skip-link:focus { transform: translateY(0); color: var(--color-on-primary); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}
/* 港の灯。ヘッダーの下端を1本の光にする。文字には掛からない */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent,
    var(--color-primary) 16%, var(--color-accent) 50%, var(--color-primary) 84%, transparent);
  opacity: .5;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--color-text);
  flex: 1 1 auto;
  min-width: 0;
}
.brand-mark { width: 34px; height: 34px; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-name {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .02em;
  word-break: break-word;
}
.brand-sub {
  font-size: .68rem;
  color: var(--color-text-muted);
  letter-spacing: .02em;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.header-nav > a,
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 13px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-jp);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.header-nav > a:hover,
.nav-dropdown-toggle:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.header-nav > a[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.nav-dropdown-toggle.is-active {
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
}
.nav-caret { width: 10px; height: 10px; transition: transform .16s ease; }
.nav-dropdown.is-open .nav-caret { transform: rotate(180deg); }

.nav-dropdown { position: relative; }
/* 開閉の真実はクラス .is-open ただ一つ。:hover / :focus-within では開かない
   (CSSとJSの二重制御による aria-expanded の食い違いを避ける)。 */
.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 110;
  display: none;
  min-width: 300px;
  padding: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.nav-dropdown.is-open > .nav-dropdown-panel { display: block; }
.nav-dropdown-panel ul { list-style: none; margin: 0; padding: 0; }
.nav-dropdown-panel .nav-group-label {
  display: block;
  margin: 6px 8px 4px;
  font-family: var(--font-en);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.nav-dropdown-panel a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--color-text);
  text-decoration: none;
}
.nav-dropdown-panel a:hover { background: var(--color-bg-alt); color: var(--color-primary-dark); }
.nav-dropdown-panel a[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 700;
}
.nav-dropdown-panel .nav-chapter-num {
  display: inline-block;
  min-width: 3.4em;
  padding-right: 6px;
  color: var(--color-text-faint);
  font-family: var(--font-en);
  font-size: .78rem;
}
.nav-dropdown-panel a[aria-current="page"] .nav-chapter-num { color: var(--color-primary-dark); }

/* セットリストとメイン・サブのロールバッジ */
.nav-set-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-set-list li {
  margin-bottom: 4px;
}
.nav-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.nav-role-main a .nav-set-row {
  font-weight: 700;
}
.nav-set-desc {
  display: block;
  font-size: .75rem;
  color: var(--color-text-muted);
  font-weight: normal;
  line-height: 1.35;
  margin-top: 1px;
}
.nav-role-main .nav-set-desc {
  color: var(--color-primary-dark);
}
.variant-role-desc {
  font-size: .84rem;
  color: var(--color-primary-dark);
  margin: 0 0 8px 0;
  line-height: 1.4;
}
.badge-role {
  display: inline-block;
  font-size: .68rem;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1.4;
  letter-spacing: .02em;
  white-space: nowrap;
}
.badge-role.main {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.badge-role.sub {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.nav-panel-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}
.nav-panel-footer a {
  font-size: .82rem;
  color: var(--color-text-muted);
}

/* メガドロップダウンパネル（全24章・全37章） */
.nav-dropdown-panel.mega {
  display: none;
  width: min(92vw, 860px);
  max-height: 85vh;
  overflow-y: auto;
  right: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 14px;
  padding: 16px;
}
.nav-dropdown.is-open > .nav-dropdown-panel.mega { display: grid; }

.mega-group {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
}

.mega-group .nav-group-label {
  margin: 0 0 6px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
  font-size: .8rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-part-range {
  font-family: var(--font-en);
  font-size: .72rem;
  color: var(--color-text-faint);
  font-weight: 600;
  padding: 1px 6px;
  background: var(--color-surface);
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
}

.mega-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-group a {
  padding: 5px 8px;
  font-size: .84rem;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  color: var(--color-text);
  text-decoration: none;
}
.mega-group a:hover {
  background: var(--color-surface);
  color: var(--color-primary-dark);
}
.mega-group a[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 700;
}

.mega-group .nav-chapter-num {
  display: inline-block;
  min-width: 2.2em;
  padding-right: 4px;
  color: var(--color-text-faint);
  font-family: var(--font-en);
  font-size: .78rem;
  font-weight: 700;
}
.mega-group a[aria-current="page"] .nav-chapter-num {
  color: var(--color-primary-dark);
}

.mega-panel-footer {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  text-align: right;
}
.mega-panel-footer a {
  display: inline-block;
  padding: 4px 8px;
  font-size: .82rem;
  color: var(--color-text-muted);
  text-decoration: none;
}
.mega-panel-footer a:hover {
  color: var(--color-primary-dark);
}

.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
}
.hamburger:hover { background: var(--color-bg-alt); }

/* ============================================================
   4. レイアウト
   ============================================================ */
.page-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
  gap: 44px;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 34px 24px 72px;
}

.content { min-width: 0; }
.content-wide { max-width: 820px; }

.sidebar {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  align-self: start;
  max-height: calc(100vh - var(--header-height) - 44px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-right: 2px;
}
.sidebar-header {
  display: none;
}
@media (min-width: 881px) {
  .sidebar.sidebar-drawer-only { display: none; }
  .page-body.page-body-root { grid-template-columns: minmax(0, 1fr); }
}

.side-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.side-card h3 {
  margin: 0 0 10px;
  font-size: .8rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.side-card p { margin: 0 0 8px; font-size: .84rem; color: var(--color-text-muted); }
.side-card p:last-child { margin-bottom: 0; }

/* 目次(ビルド時に本文の h2/h3 から生成し、JSは現在位置の強調のみを担う) */
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list li { margin: 0; }
.toc-list a {
  display: block;
  padding: 5px 9px;
  border-left: 2px solid var(--color-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  text-decoration: none;
}
.toc-list a:hover { background: var(--color-bg-alt); color: var(--color-primary-dark); }
.toc-list a.active,
.toc-list a[aria-current="true"] {
  border-left-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 700;
}
.toc-list .toc-h3 a { padding-left: 22px; font-size: .8rem; }

/* サイドバーの章ナビ(モバイルではドロワーとして全章を提供する) */
.side-nav { }
.side-nav a {
  display: block;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--color-text);
  text-decoration: none;
}
.side-nav a:hover { background: var(--color-bg-alt); color: var(--color-primary-dark); }
.side-nav a[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 700;
}
.side-nav ul { list-style: none; margin: 0; padding: 0; }
.side-nav-group { margin-top: 10px; }
.side-nav-group:first-of-type { margin-top: 4px; }
.side-nav-group-label {
  display: block;
  margin: 0 0 3px;
  font-family: var(--font-en);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.side-nav details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 3px;
  font-family: var(--font-en);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.side-nav details > summary::-webkit-details-marker { display: none; }
.side-nav details > summary::before {
  content: "";
  flex: 0 0 auto;
  margin-top: .3em;
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.side-nav details[open] > summary::before { transform: rotate(90deg) translateX(1px); }
.side-nav .side-nav-count {
  color: var(--color-text-faint);
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}
.side-nav details > summary > span:first-of-type { flex: 1 1 auto; min-width: 0; }

.sidebar-overlay { display: none; }

/* ============================================================
   5. 記事コンポーネント
   ============================================================ */
.breadcrumb { margin: 0 0 18px; font-size: .82rem; color: var(--color-text-muted); }
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before {
  content: "/";
  color: var(--color-border-strong);
}
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary-dark); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 700; }

.article-header { margin: 0 0 30px; }
.article-header h1 {
  margin: 0 0 14px;
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.25rem);
  letter-spacing: .005em;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 18px;
  font-size: .8rem;
  color: var(--color-text-muted);
}
.article-meta > span, .article-meta > time { display: inline-flex; align-items: center; gap: 5px; }
/* 記事ヘッダーの最終確認日。信頼のために出すが、読む判断には効かないので一段弱く出す */
.article-meta .meta-rev { color: var(--color-text-faint); }
.article-lead {
  margin: 0;
  padding: 16px 20px;
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-text);
}

/* 裏の2巻(ひっかかった話・きをつけノート)の定型注記(作ったお話であること) */
.notice {
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  font-size: .84rem;
  line-height: 1.75;
  color: var(--color-text-muted);
}
.notice strong { color: var(--color-text); }

/* 読み進み具合のバー。要素は main.js が作るので、JS無効時は存在しない */
.read-progress {
  position: fixed;
  top: calc(var(--header-height) - 3px);
  left: 0;
  z-index: 99;
  width: 100%;
  height: 3px;
  pointer-events: none;
}
.read-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-primary);
}

.article-body { margin: 0; }
.article-body > section { margin: 0 0 12px; }
.article-body h2 {
  margin: 46px 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-border);
  font-size: clamp(1.24rem, 1.05rem + .6vw, 1.5rem);
}
.article-body h2:first-child { margin-top: 8px; }
.article-body h3 {
  margin: 32px 0 12px;
  padding-left: 12px;
  border-left: 4px solid var(--color-primary);
  font-size: 1.08rem;
}
.article-body p { margin: 0 0 18px; }
/* 表の巻と同主題のページで「このページが足すもの」を示す1行。地の文から一段引いて出す */
.article-body p.chapter-delta {
  padding: 10px 14px;
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .92rem;
  color: var(--color-text-muted);
}
/* 地の文は1行あたり全角46字程度に収める(日本語は50字を超えると行の追跡が落ちる)。
   表・コールアウト・要点は箱として全幅を使うため、直下の要素だけを対象にする。 */
.article-body > section > p,
.article-body > section > ul,
.article-body > section > ol,
.pause-answer p,
.pause-answer ul,
.pause-answer ol { max-width: 46em; }
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 1.5em; }
.article-body li { margin-bottom: 8px; }
.article-body li > ul, .article-body li > ol { margin-top: 8px; margin-bottom: 4px; }
.article-body strong { font-weight: 700; }
.article-body em { font-style: normal; background: linear-gradient(transparent 62%, var(--color-primary-soft) 62%); }

.table-scroll { overflow-x: auto; margin: 0 0 24px; }
/* 表は本文中でもトップページの節でも同じ体裁で出す(.table-scroll は生成側が必ず付ける) */
.article-body table,
.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  background: var(--color-surface);
}
.article-body caption,
.table-scroll caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 8px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
.article-body th, .article-body td,
.table-scroll th, .table-scroll td {
  border: 1px solid var(--color-border);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.article-body thead th,
.table-scroll thead th {
  background: var(--color-bg-alt);
  font-weight: 700;
  white-space: nowrap;
}
.article-body tbody th,
.table-scroll tbody th { background: var(--color-surface-alt); font-weight: 700; }

/* コールアウト。.callout-warning が単独で使われても枠と余白が効くように
   両クラスに基底スタイルを持たせる(基底クラス欠落による表示崩れの予防)。 */
.callout,
.callout-warning {
  margin: 26px 0;
  padding: 18px 20px;
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  font-size: .95rem;
  line-height: 1.85;
}
.callout > strong:first-child,
.callout-warning > strong:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--color-accent);
  font-size: .93rem;
}
.callout p:last-child, .callout-warning p:last-child { margin-bottom: 0; }
/* 事例が架空であることの担保。本文の各文に留保を付ける代わりにラベル側で1回示す */
.callout-tag {
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--color-accent-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text-faint);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .02em;
}
.callout ul, .callout-warning ul { margin-bottom: 0; }
/* 本文中の引用。書き方の見本を1行だけ示す用途で使う */
.article-body blockquote {
  margin: 20px 0;
  padding: 12px 18px;
  border-left: 4px solid var(--color-primary-border);
  background: var(--color-primary-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text);
}
.article-body blockquote p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   人形のことば ― 案内役のAIが、自分の弱いところを一言だけ言う囲み
   本文({{ai:...}} マクロ)から呼ぶ。文面は scripts/ainotes.py に集約する。
   見出しの語は ::before で出し、文言の出どころを1か所に保つ。
   ------------------------------------------------------------ */
.ainote {
  margin: 26px 0;
  padding: 16px 20px 16px 22px;
  border: 1px dashed var(--color-primary-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-primary-soft);
  box-shadow: inset 8px 0 16px -13px var(--color-primary);
}
.ainote::before {
  content: "AIが 言うには";
  display: block;
  margin-bottom: 6px;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.ainote p {
  margin: 0;
  font-size: .97rem;
  line-height: 1.95;
}
.ainote strong { color: var(--color-primary-dark); }


/* ------------------------------------------------------------
   詳細解説 ― 大人向け。子どもの読む流れの外に置く
   ページのいちばん下、前後ナビと「これも見てみる?」のあと。
   文字を一段落とし、地色を変えて「ここからは読者がちがう」と示す。
   ------------------------------------------------------------ */
.deepdive {
  margin: 40px 0 0;
  padding: 22px 24px 18px;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}
.deepdive > h2 {
  margin: 0 0 4px;
  font-family: var(--font-mincho);
  font-size: 1.06rem;
  letter-spacing: .04em;
  color: var(--color-text-muted);
}
.deepdive-for {
  margin: 0 0 14px;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--color-text-faint);
}
.deepdive-summary {
  margin: 0;
  padding: 14px 16px;
  border-left: 3px solid var(--color-primary-border);
  background: var(--color-surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .93rem;
  line-height: 1.85;
}
.deepdive-summary::before {
  content: "サマリー";
  display: block;
  margin-bottom: 4px;
  color: var(--color-text-faint);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.deepdive-body { margin-top: 14px; }
.deepdive-body > summary {
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: .86rem;
  font-weight: 700;
  list-style: none;
}
.deepdive-body > summary::-webkit-details-marker { display: none; }
.deepdive-body > summary::after { content: " ＋"; color: var(--color-text-faint); }
.deepdive-body[open] > summary::after { content: " －"; }
.deepdive-body[open] > summary { margin-bottom: 12px; }
.deepdive-body h3 {
  margin: 16px 0 4px;
  font-size: .93rem;
  color: var(--color-text-muted);
  letter-spacing: .02em;
}
.deepdive-body h3:first-of-type { margin-top: 4px; }
.deepdive-body p {
  margin: 0 0 8px;
  font-size: .9rem;
  line-height: 1.95;
  color: var(--color-text);
}
.deepdive-body ul { margin: 0 0 8px; font-size: .9rem; line-height: 1.9; }
.deepdive-body p:last-child, .deepdive-body ul:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   立ち止まり ― お話の途中。当たり外れは言わない
   ------------------------------------------------------------ */
.pause {
  margin: 34px 0;
  padding: 24px 26px 20px;
  border: 1px solid var(--color-border-strong);
  border-left: 5px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-surface);
  /* 左の線から内側へ、ごく淡い光。夜のテーマでネオンに見える */
  box-shadow: inset 10px 0 18px -14px var(--color-primary);
}
.pause::before {
  content: "なぜ？";
  display: block;
  margin-bottom: 12px;
  color: var(--color-primary);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.pause-q {
  margin: 0 0 18px;
  font-family: var(--font-mincho);
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.8;
  color: var(--color-text);
}
.pause-choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pause-choices li { margin: 0; }
.pause-choices button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.pause-choices button::before {
  content: counter(pause-choice);
  counter-increment: pause-choice;
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: .88rem;
}
.pause-choices { counter-reset: pause-choice; }
.pause-choices button:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.pause-choices button:disabled { cursor: default; transform: none; }

/* 当たり外れを言わない。選んだものに印をつけるだけ */
.pause-choices button.is-picked { border-color: var(--color-primary); background: var(--color-primary-soft); }
.pause-choices button.is-picked::after { content: "えらんだ"; margin-left: auto; color: var(--color-primary); font-size: .78rem; }
.pause-result {
  margin: 18px 0 0;
  font-family: var(--font-mincho);
  font-size: 1.06rem;
  color: var(--color-text);
}
.pause-answer { margin-top: 24px; }
.pause-answer > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  font-size: .96rem;
  cursor: pointer;
  list-style: none;
}
.pause-answer > summary::-webkit-details-marker { display: none; }
.pause-answer[open] > summary { display: none; }


/* ------------------------------------------------------------
   おぼえるのは これだけ / やってみて
   ------------------------------------------------------------ */
/* お話の末尾。わかったこと → 名前 → やってみて の順に置く */
.found, .oneline {
  margin: 0 0 16px;
  padding: 18px 20px 18px 22px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-border);
  border-left: 4px solid var(--color-primary);
  box-shadow: inset 10px 0 18px -14px var(--color-primary);
  font-family: var(--font-mincho);
  font-size: 1.12rem;
  line-height: 1.9;
}
.found::before { content: "この話で わかったこと"; }
.oneline::before { content: "ひとことで 言うと"; }
.found::before, .oneline::before {
  display: block;
  margin-bottom: 6px;
  color: var(--color-primary);
  font-family: var(--font-jp);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.found strong, .oneline strong {
  color: var(--color-primary-dark);
}

/* 「この話に名前をつけるなら」。ここで初めて名前が出る */
.truename, .fromtale {
  margin: 0 0 16px;
  padding: 16px 20px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  font-size: .96rem;
  color: var(--color-text-muted);
}
.crosslink {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 6px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  text-decoration: none;
}
.crosslink:hover { border-color: var(--color-primary); }
.crosslink-title {
  font-family: var(--font-mincho);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--color-primary);
}
.crosslink-where { font-size: .76rem; color: var(--color-text-faint); }

/* ------------------------------------------------------------
   前後ナビゲーション ― つぎへ / まえへ
   ------------------------------------------------------------ */
.article-nav-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.next-big {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 42%, var(--color-primary)) 0 3px,
                    transparent 3px),
    var(--color-primary);
  color: var(--color-on-primary);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform .14s ease, box-shadow .14s ease;
}
.next-big:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--color-on-primary); }
.next-big-next {
  flex: 1;
  max-width: 440px;
}
.next-big-prev {
  flex-shrink: 0;
  padding: 10px 16px;
  justify-content: center;
}
.next-big-index {
  flex-shrink: 0;
  padding: 10px 18px;
  justify-content: center;
}
.next-big-spacer {
  visibility: hidden;
  pointer-events: none;
  box-shadow: none;
}
.next-big-label { font-size: .8rem; opacity: .85; }
.next-big-title { font-size: 1.05rem; font-weight: 700; flex: 1; }
.next-big-arrow { font-size: 1.25rem; }
.next-big.is-goal { background: var(--color-success); }
.article-nav-sub { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.prev-small { font-size: .92rem; color: var(--color-text-muted); }

/* ------------------------------------------------------------
   すすみ具合としるし
   ------------------------------------------------------------ */
.progress-bar {
  height: 12px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}
.progress-bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--color-success);
  transition: width .4s ease;
}
.progress-text { margin: 0 0 8px; font-weight: 700; font-size: 1.02rem; }
.progress-note { margin: 10px 0 10px; font-size: .8rem; color: var(--color-text-faint); }
.progress-strip {
  max-width: 420px;
  margin: 22px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.progress-strip .progress-text { font-size: .95rem; }
.btn-small { padding: 6px 14px; font-size: .84rem; }
.stamp { flex: none; width: 20px; height: 20px; }
.stamp.is-clear::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-success);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
}
.stamp.is-star::before { content: "★"; background: var(--color-accent); font-size: .68rem; }
.q-card.is-clear .q-num { background: var(--color-success); color: #fff; }
.q-card .stamp-card { margin-left: auto; }

/* ------------------------------------------------------------
   ステージ選択(巻のトップ)
   ------------------------------------------------------------ */
.hero-pause h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); line-height: 1.35; }
.btn-big { padding: 16px 32px; font-size: 1.1rem; border-radius: 999px; }
.part-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 1.25rem;
}
.part-count { font-size: .85rem; color: var(--color-text-faint); font-weight: 400; }
.q-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.q-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-text);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.q-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
}
.q-num {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-family: var(--font-en);
  font-size: 1.15rem;
  font-weight: 700;
}
.q-card.is-clear .q-num { background: var(--color-success); color: #fff; }
.q-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.q-title { font-weight: 700; line-height: 1.45; }
.q-meta { font-size: .78rem; color: var(--color-text-faint); }
.cross-card {
  display: block;
  margin: 34px 0 0;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  border: 2px dashed var(--color-border-strong);
  background: var(--color-surface-alt);
  text-decoration: none;
  color: var(--color-text);
}
.cross-card:hover { border-color: var(--color-primary); color: var(--color-text); }
.cross-label { display: block; font-size: .82rem; color: var(--color-text-faint); }
.cross-title { display: block; font-size: 1.3rem; font-weight: 700; margin: 2px 0 6px; }
.cross-desc { display: block; font-size: .94rem; color: var(--color-text-muted); }

/* 記事ヘッダーの番号バッジ */
.chapter-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: .88rem;
  color: var(--color-text-muted);
}
.chapter-badge-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.02rem;
}
.chapter-badge-time {
  margin-left: auto;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  font-weight: 700;
}
.related li a { display: flex; flex-direction: column; gap: 2px; }
.related-where { font-size: .78rem; color: var(--color-text-faint); }
.related-title { font-weight: 700; }
.site-note-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: .92rem; }

/* ルートの「こまっていることから えらぶ」。表をやめてカードにした */
.sit-list { display: grid; gap: 10px; }
.sit-row {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.sit-q { margin: 0; font-weight: 700; }
.sit-a { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sit-a a {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
}
.sit-a a:hover { background: var(--color-primary); color: var(--color-on-primary); }
@media (max-width: 700px) {
  .sit-row { grid-template-columns: 1fr; }
}

/* サイドバーの一覧。番号・題名・しるしを横にならべる */
.side-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
}
.side-nav .nav-chapter-num {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--color-surface-alt);
  color: var(--color-text-faint);
  font-family: var(--font-en);
  font-size: .76rem;
  font-weight: 700;
}
.side-nav a[aria-current="page"] .nav-chapter-num,
.side-nav a.is-clear .nav-chapter-num { background: var(--color-primary); color: var(--color-on-primary); }
.side-nav a.is-clear .nav-chapter-num { background: var(--color-success); }
.side-nav .stamp { margin-left: auto; }

/* 「さいごにたしかめた日」はページの最後に、小さく。読むじゃまをしない */
.page-rev {
  margin: 30px 0 0;
  font-size: .74rem;
  color: var(--color-text-faint);
  text-align: right;
}
/* 記事の見出しのすぐ下に「なぜ？」が来る。あいだを詰める */
.article-header { margin-bottom: 22px; }
.article-header h1 { margin-bottom: 0; }
.article-header .notice { margin-top: 14px; }

/* ------------------------------------------------------------
   図解(figures.py が出力するインラインSVG)
   色はCSS変数を参照しているので4テーマすべてに追随する。
   ------------------------------------------------------------ */
.figure {
  margin: 26px 0;
  padding: 18px 18px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}
.figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 560px;
  margin: 0 auto;
  overflow: visible;
}
.figure svg text {
  font-family: var(--font-jp);
  /* SVG内の文字はブラウザの最小文字サイズの対象外。小さくしすぎない */
  dominant-baseline: middle;
}
.figure figcaption {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
  color: var(--color-text-muted);
  font-size: .88rem;
  line-height: 1.75;
}

/* ------------------------------------------------------------
   ふりがな(sitegen.apply_ruby がページ初出1回だけ付ける)
   ------------------------------------------------------------ */
ruby { ruby-align: center; }
ruby rt {
  /* 読めなければ振る意味がない。本文17pxに対して約10.5px */
  font-size: .62em;
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0;
  /* 読みの分だけ行が詰まって見えるのを防ぐ */
  line-height: 1.2;
  user-select: none;
}
/* ふりがなが付く行だけ行間が広がると段落が波打つため、本文側で先に余裕を持たせる */
.article-body p, .article-body li { line-height: 2.0; }


.callout-warning {
  background: var(--color-warning-soft);
  border-color: var(--color-warning-border);
}
.callout-warning > strong:first-child { color: var(--color-warning); }

.keypoints {
  margin: 44px 0 0;
  padding: 20px 22px;
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
}
.keypoints h2, .keypoints h3 {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-size: 1rem;
  color: var(--color-primary-dark);
}
.keypoints ul { list-style: none; margin: 0; padding: 0; }
.keypoints li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 24px;
  font-size: .93rem;
  line-height: 1.8;
}
.keypoints li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-primary);
}
.keypoints li:last-child { margin-bottom: 0; }
.keypoints .todo {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
}
.keypoints .todo strong { color: var(--color-primary-dark); }

/* チェックリスト(実チェックボックス。状態は localStorage に保持する) */
.checklist { list-style: none; margin: 0 0 24px; padding: 0; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: .93rem;
  line-height: 1.75;
}
.checklist input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: .35em 0 0;
  accent-color: var(--color-primary);
}
.checklist label { cursor: pointer; }
.checklist input:checked + label { color: var(--color-text-muted); text-decoration: line-through; }

/* 用語集 */
.glossary { margin: 0 0 28px; }
.glossary dt {
  margin: 20px 0 6px;
  padding-left: 11px;
  border-left: 3px solid var(--color-primary);
  font-weight: 700;
  font-size: 1rem;
  scroll-margin-top: calc(var(--header-height) + 20px);
}
.glossary dd {
  margin: 0 0 0 14px;
  color: var(--color-text);
  font-size: .93rem;
  line-height: 1.8;
}
.glossary dd .glossary-ref { font-size: .84rem; color: var(--color-text-muted); }
.term-index {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 0 26px;
  padding: 14px 16px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  list-style: none;
}
.term-index li { margin: 0; }
.term-index a {
  display: inline-block;
  padding: 2px 9px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: .8rem;
  text-decoration: none;
}
.term-index a:hover { border-color: var(--color-primary); }

/* 記事末尾の関連リンクと前後ナビ */
.related {
  margin: 40px 0 0;
  padding: 20px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.related h2 {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-size: 1rem;
}
.related ul { list-style: none; margin: 0; padding: 0; }
.related li { margin-bottom: 12px; font-size: .92rem; line-height: 1.7; }
.related li:last-child { margin-bottom: 0; }
.related a { font-weight: 700; text-decoration: none; }
.related a:hover { text-decoration: underline; }
.related .related-note { display: block; color: var(--color-text-muted); font-size: .85rem; font-weight: 400; }

.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 34px 0 0;
}
.article-nav a {
  display: block;
  padding: 14px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.article-nav a:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.article-nav .nav-dir {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-en);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.article-nav .nav-title { font-size: .92rem; font-weight: 700; color: var(--color-text); line-height: 1.6; }
.article-nav .next { grid-column: 2; text-align: right; }

/* ============================================================
   6. トップページ・サイトマップ・404
   ============================================================ */
.hero {
  position: relative;
  padding: 46px 0 8px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 34px;
}
/* 落ちていく穴と、町の格子。地の文の後ろには敷かず、ヒーローの中だけに置く */
.hero::before {
  content: "";
  position: absolute;
  /* 横にはみ出させない。はみ出すと狭い画面で横スクロールが出る */
  inset: -10px 0 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 88% 26%, var(--deco-glow) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 26%, transparent 30px, var(--deco-glow) 30px 31.5px, transparent 33px),
    radial-gradient(circle at 88% 26%, transparent 56px, var(--deco-glow) 56px 57.5px, transparent 59px),
    radial-gradient(circle at 88% 26%, transparent 86px, var(--deco-grid) 86px 87.5px, transparent 89px),
    linear-gradient(var(--deco-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--deco-grid) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, 44px 44px, 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, #000 0 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 58%, transparent 100%);
}
.hero > * { position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 12px;
  background: var(--color-primary-soft);
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-primary-dark);
}
.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.7rem);
  line-height: 1.32;
}
.hero p { margin: 0 0 18px; font-size: 1.02rem; max-width: 62ch; color: var(--color-text-muted); }
/* 読者の状況を並べる導入文。本文より一段大きく、地の文の色で出す */
.hero p.hero-lead {
  font-size: 1.15rem;
  line-height: 1.85;
  color: var(--color-text);
  max-width: 56ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 26px !important; max-width: none !important; }
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  font-size: .85rem;
  color: var(--color-text-muted);
}
.hero-stats strong { color: var(--color-text); font-size: 1.02rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
}
.btn:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-on-primary);
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px; }

.part-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 0 0 44px;
}
.part-overview-card {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-text);
}
.part-overview-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.part-overview-card .part-eyebrow { margin-bottom: 6px; }
.part-overview-card h2, .part-overview-card h3 {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  font-size: 1.04rem;
}
.part-overview-card p { margin: 0 0 10px; font-size: .875rem; color: var(--color-text-muted); line-height: 1.75; }
.part-overview-card .card-meta {
  margin-top: auto;
  font-size: .78rem;
  color: var(--color-text-faint);
  font-family: var(--font-en);
}

.part-eyebrow {
  display: inline-block;
  font-family: var(--font-en);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.part-section { margin: 0 0 46px; scroll-margin-top: calc(var(--header-height) + 20px); }
.part-section > h2 {
  margin: 6px 0 6px;
  font-size: 1.35rem;
}
.part-section > p { margin: 0 0 18px; color: var(--color-text-muted); font-size: .92rem; max-width: 70ch; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 16px;
}
.card-grid-2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.topic-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-text);
}
.topic-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.topic-card h3 { margin: 0; padding: 0; border: 0; font-size: 1rem; line-height: 1.55; }
.topic-card p { margin: 0; font-size: .86rem; color: var(--color-text-muted); line-height: 1.75; }
.topic-card .card-meta { margin-top: auto; font-size: .76rem; color: var(--color-text-faint); font-family: var(--font-en); }
.topic-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-on-primary);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: .82rem;
}
/* 裏の巻の印。ルートは表テーマなので、裏の主色を直接持つ(.variant-card.is-ura と同じ) */
.topic-icon.ura { background: linear-gradient(135deg, #9c1e63, #7a1249); color: #fbf0f7; }

/* ルート(5バリアント選択)のカード。列数は幅に応じて 1〜3 に折り返す */
.variant-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 18px;
  margin: 0 0 20px;
}
.variant-card {
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-text);
}
.variant-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-lg); }
.variant-card .variant-axis {
  display: inline-block;
  margin-bottom: 9px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-primary);
}
.variant-card h2 { margin: 0 0 12px; font-size: 1.22rem; }
/* 迷っている読者に既定の入口を1つ示す。色以外の手掛かり(バッジ・枠の太さ)も持たせる */
.variant-badge {
  display: inline-block;
  margin-left: 9px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: 2px;
}
.variant-card.is-default {
  border-color: var(--color-primary-border);
  background: var(--color-primary-soft);
  box-shadow: var(--shadow-md);
}
.variant-card dl { margin: 0 0 14px; font-size: .87rem; line-height: 1.75; }
.variant-card dt {
  float: left;
  width: 6.6em;
  clear: left;
  color: var(--color-text-faint);
  font-size: .8rem;
}
.variant-card dd { margin: 0 0 6px 6.8em; color: var(--color-text-muted); }
.variant-card .variant-go {
  margin-top: auto;
  font-size: .88rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
/* 裏の巻のカードはルート(表テーマ)に置かれるので、裏の主色を直接持つ。
   出所は scripts/brandmark.py の URA_BG と同じ深紅にそろえる */
.variant-card.is-ura { border-top: 4px solid #9c1e63; }
.variant-card.is-omote { border-top: 4px solid var(--color-primary); }

/* 6つの巻のセット構成（メイン1・サブ2） */
.vol-set-container {
  margin: 0 0 36px;
  padding: 26px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 72px;
}
.vol-set-container#set-children {
  border-top: 4px solid var(--color-primary);
}
.vol-set-container#set-mature {
  border-top: 4px solid #9c1e63;
}
.vol-set-head {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.vol-set-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.vol-set-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
}
#set-mature .vol-set-badge {
  background: #9c1e63;
  color: #fff;
}
.vol-set-title {
  margin: 0;
  font-size: 1.36rem;
  font-weight: 700;
  color: var(--color-text);
}
.vol-set-target {
  font-size: .86rem;
  color: var(--color-text-muted);
}
.vol-set-desc {
  margin: 6px 0 0;
  font-size: .92rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.vol-set-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.vol-role-section {
  display: flex;
  flex-direction: column;
}
.vol-role-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-text);
}
.vol-main-wrap {
  width: 100%;
}
.vol-sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px;
}
.variant-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.variant-card-head .variant-axis {
  margin-bottom: 0;
}
.variant-card h3,
.variant-card h4 {
  margin: 0 0 6px;
  font-size: 1.22rem;
}
.variant-card.is-main {
  border: 2px solid var(--color-primary-border);
  box-shadow: var(--shadow-md);
  padding: 24px 26px;
}
.variant-card.is-main.is-omote {
  border-left: 6px solid var(--color-primary);
  border-top: 2px solid var(--color-primary-border);
}
.variant-card.is-main.is-ura {
  border: 2px solid rgba(156, 30, 99, .25);
  border-left: 6px solid #9c1e63;
  border-top: 2px solid rgba(156, 30, 99, .25);
}
.variant-card.is-main h4 {
  font-size: 1.32rem;
}
.variant-card.is-sub {
  border: 1px solid var(--color-border);
}
.variant-card.is-sub.is-omote {
  border-top: 3px solid var(--color-primary);
}
.variant-card.is-sub.is-ura {
  border-top: 3px solid #9c1e63;
}
.badge-role.main.is-ura {
  background: #9c1e63;
  color: #fff;
}


.sitemap-group { margin: 0 0 34px; }
.sitemap-group > h2 { margin: 0 0 4px; font-size: 1.16rem; }
.sitemap-group > p { margin: 0 0 14px; font-size: .88rem; color: var(--color-text-muted); }
.sitemap-list { list-style: none; margin: 0; padding: 0; }
.sitemap-list li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: .93rem;
}
.sitemap-list .sitemap-num {
  flex: 0 0 4.6em;
  color: var(--color-text-faint);
  font-family: var(--font-en);
  font-size: .84rem;
}
.sitemap-list a { font-weight: 700; text-decoration: none; }
.sitemap-list a:hover { text-decoration: underline; }
.sitemap-desc {
  display: block;
  margin-top: 2px;
  font-size: .84rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  font-weight: 400;
}

.error-code {
  margin: 30px 0 8px;
  font-family: var(--font-en);
  font-size: clamp(3.4rem, 2rem + 7vw, 6rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(120deg, var(--color-primary), var(--color-primary-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 0 0 30px;
}
.info-item {
  padding: 16px 18px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
}
.info-item h3 { margin: 0 0 6px; font-size: .92rem; }
.info-item p { margin: 0; font-size: .85rem; color: var(--color-text-muted); line-height: 1.75; }

.site-note {
  margin: 40px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-size: .84rem;
  line-height: 1.8;
  color: var(--color-text-muted);
}
.site-note h2, .site-note h3 { margin: 0 0 8px; font-size: .92rem; color: var(--color-text); }
.site-note p { margin: 0 0 8px; }
.site-note p:last-child { margin-bottom: 0; }
.site-note dl { margin: 0; }
.site-note dt { float: left; clear: left; width: 6.2em; font-weight: 700; color: var(--color-text); }
.site-note dd { margin: 0 0 6px 6.6em; }

/* ============================================================
   7. フッター・ページ先頭へ戻る
   ============================================================ */
.site-footer {
  position: relative;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  background-image:
    linear-gradient(var(--deco-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--deco-grid) 1px, transparent 1px);
  background-size: 44px 44px;
  padding: 40px 24px 28px;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent,
    var(--color-primary) 22%, var(--color-accent) 50%, var(--color-primary) 78%, transparent);
  opacity: .34;
}
.footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 28px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.footer-col h3 {
  margin: 0 0 12px;
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--color-text);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 7px; }
.footer-col a { font-size: .85rem; color: var(--color-text-muted); text-decoration: none; }
.footer-col a:hover { color: var(--color-primary-dark); text-decoration: underline; }
.footer-col .sitemap-desc { font-size: .78rem; margin-bottom: 4px; }
.footer-col p { margin: 0 0 10px; font-size: .84rem; color: var(--color-text-muted); line-height: 1.75; }
.footer-group-label {
  display: block;
  margin: 12px 0 4px;
  font-family: var(--font-en);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.footer-group-label:first-child { margin-top: 0; }
.footer-bottom {
  max-width: var(--content-max);
  margin: 30px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  font-size: .78rem;
  color: var(--color-text-faint);
}
.footer-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--color-text); }
.footer-brand .brand-mark { width: 28px; height: 28px; }

.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-primary-dark);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--color-primary-dark); }

/* ============================================================
   8. レスポンシブ
   ============================================================ */
@media (max-width: 1080px) {
  .page-body { gap: 30px; }
  .nav-dropdown-panel.mega { width: min(92vw, 820px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .header-nav { display: none; }
  .hamburger { display: flex; }

  /* ルートはドロワーを持たないため、ヘッダーのリンクを隠さず折り返して残す */
  .header-nav.header-nav-plain {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px;
  }
  .header-nav.header-nav-plain > a { padding: 6px 9px; font-size: .82rem; }
  .page-body { grid-template-columns: minmax(0, 1fr); padding: 24px 18px 64px; }
  .site-header { padding: 0 16px; }

  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 130;
    width: min(88vw, 340px);
    max-height: none;
    height: 100%;
    margin: 0;
    padding: 12px 16px 34px;
    background: var(--color-bg);
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .22s ease;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 10px;
    border-bottom: 1px solid var(--color-border);
    flex: 0 0 auto;
  }
  .sidebar-title {
    font-family: var(--font-en);
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: .03em;
  }
  .sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
  }
  .sidebar-close:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  /* JS無効時のフォールバック: #sidebar への遷移で開ける */
  .sidebar:target { transform: translateX(0); }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    background: rgba(9, 11, 20, .5);
  }
  body.sidebar-open .sidebar-overlay { display: block; }
  body.sidebar-open { overflow: hidden; }

  .article-nav { grid-template-columns: 1fr; }
  .article-nav .next { grid-column: 1; }
  .hero { padding-top: 30px; }
  .variant-card dt { float: none; width: auto; }
  .variant-card dd { margin-left: 0; }
  .site-note dt { float: none; width: auto; }
  .site-note dd { margin-left: 0; }
}

@media (max-width: 560px) {
  .site-header { height: auto; min-height: var(--header-height); padding: 8px 12px; gap: 8px; flex-wrap: nowrap; }
  .site-header .brand-sub { display: none; }
  .brand-name { font-size: clamp(0.82rem, 3.8vw, 0.96rem); line-height: 1.2; }
  .brand-mark { width: 30px; height: 30px; }
  .hamburger { width: 38px; height: 38px; flex: 0 0 auto; }
  .header-nav.header-nav-plain { width: 100%; justify-content: flex-start; margin-left: 0; }
  .article-body h2 { margin-top: 36px; }
  .keypoints, .related, .callout, .callout-warning, .ainote, .deepdive { padding-left: 15px; padding-right: 15px; }
  .article-lead { padding: 14px 16px; }
  .back-to-top { right: 14px; bottom: 14px; }
  /* 図は幅がそのまま文字の大きさになる。狭い画面では余白を削って本文幅いっぱいに使う */
  .figure { padding: 12px 10px 10px; }
  /* 選択ボタンは指で押す。狭い画面ほど幅を使わせる */
  .pause { padding: 16px 12px 14px; }
  .pause-q { font-size: 1.18rem; }
  .next-big { padding: 10px 14px; }
  .next-big-title { font-size: 1rem; }
  .vol-set-container { padding: 20px 14px; }
  .page-body { padding: 20px 14px 64px; }
}

@media (max-width: 360px) {
  .site-header { padding: 6px 8px; gap: 6px; }
  .brand-name { font-size: 0.8rem; }
  .brand-mark { width: 26px; height: 26px; }
  .hamburger { width: 36px; height: 36px; }
  .vol-set-container { padding: 16px 10px; }
  .page-body { padding: 16px 8px 56px; }
}

/* ============================================================
   9. 印刷・モーション低減・強制配色
   ============================================================ */
@media print {
  :root {
    --color-bg: #fff;
    --color-bg-alt: #fff;
    --color-surface: #fff;
    --color-surface-alt: #fff;
    --color-text: #000;
    --color-text-muted: #333;
    --color-text-faint: #555;
    --color-primary: #000;
    --color-primary-dark: #000;
    --color-primary-soft: #fff;
    --color-border: #999;
    --color-border-strong: #666;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }
  .site-header, .sidebar, .sidebar-overlay, .site-footer,
  .back-to-top, .hamburger, .skip-link, .article-nav, .breadcrumb,
  .read-progress, [data-checklist-reset], .term-index { display: none !important; }
  body { font-size: 11pt; line-height: 1.6; }
  .page-body { display: block; max-width: none; padding: 0; }
  .content { max-width: none; }
  .article-header h1 { font-size: 18pt; }
  .article-body h2 { font-size: 13pt; margin-top: 18pt; page-break-after: avoid; }
  .article-body h3 { font-size: 11.5pt; page-break-after: avoid; }
  .article-body p, .article-body li { orphans: 3; widows: 3; }
  .figure { border: 1px solid #999 !important; background: #fff !important; page-break-inside: avoid; }
  .callout, .callout-warning, .ainote, .keypoints, .related, .checklist li, .article-lead, .deepdive {
    border: 1px solid #999 !important;
    background: #fff !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .checklist input[type="checkbox"] { -webkit-appearance: none; appearance: none; border: 1.2pt solid #000; border-radius: 2px; }
  .article-body table { page-break-inside: avoid; }
  .article-body a { color: #000; text-decoration: underline; }
  .table-scroll { overflow: visible; }
  /* 装飾(格子・光・かぎかっこ)は紙に出さない */
  .hero::before, .site-header::after, .site-footer::before,
  .scene::before, .scene::after { display: none !important; }
  .site-footer { background-image: none !important; }
  .pause, .ainote { box-shadow: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .topic-card:hover { transform: none; }
}

@media (forced-colors: active) {
  .read-progress span { background: Highlight; }
  .error-code { color: CanvasText; background: none; -webkit-background-clip: border-box; background-clip: border-box; }
  .topic-icon { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
  .callout, .callout-warning, .ainote, .keypoints, .side-card, .topic-card, .variant-card,
  .deepdive, .figure { border: 1px solid CanvasText; }
  .figure svg text { fill: CanvasText; }
  .article-body em { background: none; text-decoration: underline; }
  /* 強制配色では装飾が背景色として落ちるため、初めから出さない */
  .hero::before, .site-header::after, .site-footer::before { display: none; }
  .site-footer { background-image: none; }
  .scene::before, .scene::after { border-color: CanvasText; }
  .pause, .ainote { box-shadow: none; }
}

/* ------------------------------------------------------------
   挿絵 ― お話のいちばん上。ページを開いてまず目に入るもの
   ------------------------------------------------------------ */
.scene {
  position: relative;
  margin: 0 0 26px;
  padding: 14px 10px 4px;
  border-bottom: 1px solid var(--color-border);
}
/* 場面の四すみに、かぎかっこ。画面のわく、という合図 */
.scene::before,
.scene::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  border-color: var(--color-primary-border);
  border-style: solid;
  opacity: .9;
}
.scene::before { top: 0; left: 0; border-width: 2px 0 0 2px; }
.scene::after { top: 0; right: 0; border-width: 2px 2px 0 0; }
.scene-svg { display: block; width: 100%; height: auto; max-width: 640px; margin: 0 auto; }
.scene-svg text { font-family: var(--font-jp); }

/* ------------------------------------------------------------
   お話のページ
   ------------------------------------------------------------ */
.content-tale { max-width: 700px; }
.tale-header { margin-bottom: 26px; }
.tale-no {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 10px;
  font-size: .84rem;
  color: var(--color-text-faint);
}
.tale-no .no-word {
  font-family: var(--font-mincho);
  font-size: 1.06rem;
  color: var(--color-primary);
  letter-spacing: .08em;
}
.tale-no .tale-time { margin-left: auto; }
.tale-header h1 {
  margin: 0;
  font-size: clamp(1.7rem, 4.4vw, 2.3rem);
  line-height: 1.5;
  letter-spacing: .04em;
}
.content-tale .article-body p { line-height: 2.15; margin-bottom: 20px; }
/* 会話は一段下げる。地の文と区別がつく */
.content-tale .article-body p.say {
  margin-left: 1.2em;
  text-indent: -1.2em;
  color: var(--color-text);
}

/* ------------------------------------------------------------
   ノートのページ
   ------------------------------------------------------------ */
.note-header { margin-bottom: 22px; }
.note-no {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
  font-family: var(--font-en);
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--color-text-faint);
}
.note-no strong { font-size: 1.24rem; color: var(--color-primary); }
.note-no .tale-time { margin-left: auto; }
.note-header h1 { margin: 0; font-size: clamp(1.5rem, 3.6vw, 2rem); }

/* ------------------------------------------------------------
   もくじ ― お話は書棚、ノートは一覧
   ------------------------------------------------------------ */
.tale-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tale-card {
  display: block;
  position: relative;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-text);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.tale-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--color-text); }
.tale-card-art { display: block; border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.tale-card-art .scene-svg { max-width: none; }
.tale-card-body { display: block; padding: 14px 18px 16px; }
.tale-card-no {
  display: block;
  font-family: var(--font-mincho);
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--color-primary);
}
.tale-card-title {
  display: block;
  margin: 4px 0 6px;
  font-family: var(--font-mincho);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.55;
}
.tale-card-meta { display: block; font-size: .76rem; color: var(--color-text-faint); }
.tale-card .stamp-card { position: absolute; top: 12px; right: 12px; }

.note-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.note-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-text);
}
.note-card:hover { border-color: var(--color-primary); color: var(--color-text); }
.note-card-no {
  flex: none;
  font-family: var(--font-en);
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-text-faint);
  letter-spacing: .04em;
}
.note-card.is-clear .note-card-no { color: var(--color-success); }
.note-card-title { font-family: var(--font-mincho); font-size: 1.02rem; flex: 1; }
.note-card .stamp-card { margin-left: auto; }

/* ------------------------------------------------------------
   ヒーロー(巻のもくじの先頭)
   ------------------------------------------------------------ */
.hero-quiz h1, .hero h1 { letter-spacing: .05em; line-height: 1.5; }
.hero-eyebrow, .part-eyebrow {
  font-family: var(--font-mincho);
  letter-spacing: .14em;
  background: transparent;
  color: var(--color-primary);
  padding: 0;
}
.part-head { font-family: var(--font-mincho); }

@media (max-width: 560px) {
  .scene { margin-bottom: 20px; }
  .pause { padding: 18px 16px 14px; border-left-width: 4px; }
  .content-tale .article-body p { line-height: 2.05; }
}

/* ------------------------------------------------------------
   仕上げの上書き ― 先に定義した汎用スタイルより後に置く
   ------------------------------------------------------------ */
hr.article-divider {
  border: 0;
  border-top: 2px solid var(--color-border-strong);
  margin: 36px 0 24px;
}
.keypoints {
  margin: 32px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
.article-nav a.next-big {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-primary);
  border: 0;
  color: var(--color-on-primary);
  padding: 10px 18px;
  border-radius: var(--radius-md);
}
.article-nav a.next-big.next-big-next {
  flex: 1;
  max-width: 440px;
}
.article-nav a.next-big.next-big-prev {
  flex-shrink: 0;
  padding: 10px 16px;
  justify-content: center;
}
.article-nav a.next-big.next-big-index {
  flex-shrink: 0;
  padding: 10px 18px;
  justify-content: center;
}
.article-nav a.next-big:hover { background: var(--color-primary-dark); color: var(--color-on-primary); }
.article-nav a.next-big.is-goal { background: var(--color-success); }
.article-nav a.next-big .next-big-title { font-family: var(--font-mincho); }
.article-nav a.prev-small {
  background: transparent;
  border: 0;
  padding: 0;
  display: inline;
  color: var(--color-text-muted);
}
.article-nav { display: block; margin: 0; }
.todo {
  margin: 0;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  font-size: .98rem;
  line-height: 1.9;
}
.keypoints .todo strong { color: var(--color-primary); }


/* ------------------------------------------------------------
   初心者星間航海士(exhaustive_dx)― 高校1年生からの巻
   配色は表と同じで、変えるのは囲みの見出し語だけである。
   同じ部品を使いながら、読者に合わせて呼び名だけを言いかえる。
   (文言の出どころを1か所に保つため、::before の content で持つ)
   ------------------------------------------------------------ */
body.vol-saga .pause::before { content: "なぜ？"; margin-bottom: 10px; }
body.vol-saga .pause .pause-q { margin-bottom: 0; font-size: 1.18rem; line-height: 1.75; }
body.vol-saga .found::before { content: "この章で わかったこと"; }
body.vol-saga .ainote::before { content: "コアの自己申告"; }
/* ぼうけんの話(simple_dx)の囲み見出し */
main[data-variant="simple_dx"] .ainote::before { content: "AIが 言うには"; }
/* 章が長いので、会話の行間を本文よりわずかに詰めて読みやすくする */
body.vol-saga .content-tale .article-body p { line-height: 2.05; }
body.vol-saga .tale-header h1 { letter-spacing: .02em; }

/* 会話の話者を、行ごとに立てる(第11章で試行)
   本文には名前を書かず data-who で持つ。表示のしかたを後から変えられ、
   ふりがな・専門用語と同じく「本文は1つ、見せ方は巻ごと」の作りをくずさない。
   色は --color-text-faint / --color-bg の既存の組で、検査の対象を増やさない。

   名前は「に密着させる。欄をそろえると2文字の名前のうしろが空き、
   行頭がまばらになる。欄幅は名前ごとに決まる(max-content)ので、
   札の長さの制限は無い。折り返しは「の位置にそろう。 */
.content-tale .article-body p.say[data-who] {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0;
  margin-left: 0;
  text-indent: 0;
}
.content-tale .article-body p.say[data-who]::before {
  content: attr(data-who);
  align-self: baseline;
  font-size: .84em;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--color-text-faint);
}
@media (max-width: 560px) {
  .content-tale .article-body p.say[data-who]::before {
    font-size: .8em;
  }
}