/* =============================================================================
   NOMISMA — Academic Design System（Zenith Numismatics）
   正本: workspace/current/nomisma-redesign/stitch/…/zenith_numismatics/DESIGN.md

   ⚠ この学校には二つの面がある。混ぜない。
     ① 学校の面（この CSS）… 明色。Academic White の紙に、Navy の構造と Gold の印。
        大学のサイトとして「何が学べるか・誰が教えるか・どう入るか」を明快に示す面。
     ② 旅の面（style.css / app.js のツアー）… 暗色。情景に没入させる面。
     境界は「ヒーローの全面画像」。学校の頁でも、旅の絵は全幅の暗い帯として現れる。

   ⚠ ミニマルにしすぎない（[[feedback_luxury_design_pattern]]）。
     余白は広く取るが、罫・見出しの重さ・番号・ラベルの階層は残す。図録の重量感を保つ。
   ========================================================================== */

/* ⚠⚠ 変数は `:root` でなく `.ac` に置く（2026-08-01）。
   入口（index.html）は style.css も読む。style.css の `:root` は**同じ名前**の変数を
   墨地の値で持っている（--paper #17130d / --ink #ece3d0 / --gold / --rule / --ink-mid …）。
   ここを `:root` にすると、あとから読み込んだ側が学びの画面ぜんぶを塗り替えてしまう。
   `.ac` に置けば、学校の面（server は <body class="ac">／入口は <div class="ac">）の
   中だけで効き、外の墨地は一切動かない。 */
.ac {
  /* ── 色 ─────────────────────────────────────────────
     Navy=構造と信頼／Gold=行動と達成／White=紙／Parchment=読む面／Ink=文字 */
  --navy: #0A1F44;
  --navy-deep: #00081E;
  --navy-soft: #34466D;
  --navy-mist: #D9E2FF;
  --gold: #C5A059;
  --gold-deep: #775A19;
  --gold-pale: #FED488;
  --paper: #F8F9FA;
  --paper-white: #FFFFFF;
  --parchment: #F4F1E9;
  --ink: #191C1D;
  --ink-mid: #44464E;
  /* ⚠ 旧 #75777F は白4.47・淡灰4.24・羊皮3.96 で三地とも AA 未達だった（実測）。
     #515359 は 7.69 / 7.29 / 6.81 ＝ AAA 7:1 を満たす */
  --ink-faint: #515359;
  --rule: #E1E3E4;
  --rule-strong: #C5C6CF;
  --ink-black: #11100D;

  /* ── 字 ───────────────────────────────────────────── */
  --serif: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --sans: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --mono: 'Hanken Grotesk', 'Roboto Mono', ui-monospace, monospace;

  /* ── 間 ───────────────────────────────────────────── */
  --container: 1280px;
  --gutter: 24px;
  --margin-desktop: 64px;
  --margin-mobile: 16px;
  --section-gap: 120px;

  /* ── 形 ───────────────────────────────────────────── */
  --r: 4px;
  --r-lg: 8px;
  --shadow-float: 0 8px 40px rgba(10, 31, 68, .07);

  /* ── 基層 ─────────────────────────────────────────────
     ⚠ 変数と基層を一つの `.ac` にまとめてある。二つに割ると
        「同じ名前が二用途」の芽になる（tools/css_lint.py が見ている）。 */
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  /* ⚠ 入口では body（style.css）の字間 .02em が降りてくる。学校の面は字間を持たない */
  letter-spacing: normal;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* =============================================================================
   基層
   ========================================================================== */
.ac, .ac * { box-sizing: border-box; }
.ac img { max-width: 100%; display: block; }
/* ⚠ 素の <a> だけを継承色にする。class を持つ部品（釦・札・行）の色指定に勝たせない。
   実測で発覚: `.ac a`(0,2,0) が `.ac-head-cta`(0,1,0) を上書きし、紺地の釦の文字が墨色になっていた。 */
/* ⚠⚠ 詳細度の事故（2026-08-01 実測）: この規則(0,2,2)が `.ac-tabs a[aria-current]`(0,2,1) に勝ち、
   **紺地の札の文字を墨に戻して**いた（比 1.05＝読めない）。札の <a> は class を持たないので、
   「素のリンク」と見分けがつかなかった。器の中を除外する。 */
.ac main a:not([class]):not(.ac-tabs a):not(.ac-drop-panel a) { color: inherit; }

/* 内容の器。⚠ 頁の幅はここだけで決める（節ごとに違う幅を作らない） */
.ac-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--margin-mobile);
}
@media (min-width: 900px) { .ac-wrap { padding: 0 var(--margin-desktop); } }

/* 節。⚠ 余白は 120px を基準に、詰める時だけ縮める（広げない） */
.ac-sec { padding: 72px 0; }
@media (min-width: 900px) { .ac-sec { padding: var(--section-gap) 0; } }
.ac-sec--tight { padding: 56px 0; }
@media (min-width: 900px) { .ac-sec--tight { padding: 80px 0; } }
.ac-sec--paper { background: var(--paper-white); }
.ac-sec--parch { background: var(--parchment); }
.ac-sec--navy { background: var(--navy); color: #fff; }
.ac-sec--navy .ac-lede, .ac-sec--navy .ac-h2-sub { color: rgba(255,255,255,.78); }

/* =============================================================================
   字の階層 — 見出しは明朝（学校の声）／機能は角ゴシック
   ========================================================================== */
.ac-display {
  font-family: var(--serif); font-weight: 700; font-size: 34px;
  line-height: 1.24; letter-spacing: -0.01em; margin: 0;
}
@media (min-width: 900px) { .ac-display { font-size: 64px; line-height: 1.1; letter-spacing: -0.02em; } }

/* ⚠ 素の h1/h2 に style.css が字間と罫を当てている（入口だけ両方読む）。
   ここで打ち消す。server の頁では元から無いので、見た目は一切変わらない。 */
.ac-h1 { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.25; margin: 0;
  letter-spacing: normal; border: 0; padding: 0; }
@media (min-width: 900px) { .ac-h1 { font-size: 48px; line-height: 1.2; } }

.ac-h2 { font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.3; margin: 0;   /* 2026-10-26 要件定義書 v2 5 章: 見出し（h2）は 20〜22px（旧 26px） */
  letter-spacing: normal; border: 0; padding: 0; }
@media (min-width: 900px) { .ac-h2 { font-size: 22px; } }   /* 2026-10-26 要件定義書 v2 5 章: 見出し（h2）は 20〜22px（旧 PC 40px） */

.ac-h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.4; margin: 0;
  letter-spacing: normal; border: 0; padding: 0; }
@media (min-width: 900px) { .ac-h3 { font-size: 26px; line-height: 1.35; } }

.ac-h4 { font-family: var(--sans); font-weight: 700; font-size: 20px; line-height: 1.5; margin: 0; }

/* 節の肩ラベル。⚠ 大文字＋字送りで、本文と役割を分ける */
/* ⚠⚠ 金は「紙の上の文字」に使わない（2026-08-01 実測で是正）。
   墨地では #C5A059 が映えたが、紙地（#F8F9FA）では**コントラスト比 2.33**＝読めない。
   黒地から紙地へ移したとき、金だけ黒地時代の値のまま残っていた（実測で 57 件の文字が該当）。
   → **文字には --gold-deep(#775A19・比 6.11)／罫・枠・下線には --gold** と役割で分ける。
   ⚠ 暗い地（.ac-sec--navy / .ac-hero / .watch）の上では従来どおり --gold でよい。 */
.ac-label {
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
  margin: 0 0 14px; display: block;
}
.ac-sec--navy .ac-label { color: var(--gold); }
.ac-label--ja { font-family: var(--sans); letter-spacing: .28em; text-transform: none; }

/* ⚠ 行長は文字数で決まる。max-width が無いと 1440px 幅で 64字/行になっていた（参照実測 33〜40字） */
.ac-lede { font-size: 17px; line-height: 1.9; color: var(--ink-mid); margin: 18px 0 0; max-width: 640px; }
@media (min-width: 900px) { .ac-lede { font-size: 18px; line-height: 1.8; } }
.ac-body { font-size: 16px; line-height: 1.9; color: var(--ink-mid); margin: 0 0 1.1em; }
.ac-small { font-size: 15px; line-height: 1.8; color: var(--ink-faint); }

/* 節の頭（ラベル＋見出し＋説明）。中央寄せと左寄せの二型 */
.ac-head { margin-bottom: 44px; }
@media (min-width: 900px) { .ac-head { margin-bottom: 64px; } }
.ac-head--mid { text-align: center; max-width: 780px; margin-left: auto; margin-right: auto; }
.ac-head--mid .ac-lede { margin-left: auto; margin-right: auto; }
.ac-rule-mid { width: 40px; height: 1px; background: var(--gold); margin: 22px auto 0; }

/* =============================================================================
   釦 — Primary=Navy／Secondary=枠だけ／Ghost=金の文字
   ========================================================================== */
.ac-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .06em;
  padding: 15px 30px; border-radius: var(--r); text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: .18s ease;
  min-height: 48px; /* ⚠ 触れる高さ。SP で 44px を下回らせない */
}
.ac-btn--primary { background: var(--navy); color: #fff; }
.ac-btn--primary:hover { background: var(--navy-deep); }
/* ⚠ 金は「入学」という一語にだけ使う（グロービス実測の規律: アクセント色を一語に閉じる）。
   回遊・参照・記事への導線は primary(紺) か outline に落とす。
   色を語彙にすると、無料側を読んでいる人が「次に押すもの」を毎回同じ形で見つけられる。 */
.ac-btn--gold { background: var(--gold); color: var(--ink-black); }
.ac-btn--gold:hover { background: #b28f47; }
.ac-btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.ac-btn--outline:hover { background: var(--navy); color: #fff; }
/* ⚠⚠ 暗い地の上では枠釦を白に起こす。紺のままだと地に沈んで**見えない**。
   実測 2026-08-01: `.ac-cta`（紺の帯）は `.ac-sec--navy` を持たないため、
   /gakubu /kyoin /teikei /nyugaku の頁末 CTA で第3段の釦が丸ごと消えていた
   （「第一章を観る」しか見えず、隣の「入学案内を見る」が紺地に紺で描かれていた）。
   入口のヒーローでも同じことが起きた。地が暗い三つの器をまとめて起こす。 */
.ac-sec--navy .ac-btn--outline,
.ac-cta .ac-btn--outline,
.ac-hero .ac-btn--outline { color: #fff; border-color: rgba(255,255,255,.5); }
.ac-sec--navy .ac-btn--outline:hover,
.ac-cta .ac-btn--outline:hover,
.ac-hero .ac-btn--outline:hover { background: #fff; color: var(--navy); }
.ac-btn--ghost { padding: 0; min-height: 0; color: var(--gold-deep); border: 0; background: none; }
/* ⚠ 札の足に置いた細い導線は、読み物の中の字ではなく「押す場所」である。
   実測 2026-08-01: 窓口の盤（/teikei）の 8 本が高さ 22px で、SP の 44px を下回っていた。
   字の体裁（余白なし・金の文字）は変えず、当たりだけ広げる。 */
.ac-card-foot .ac-btn--ghost { min-height: 44px; }
.ac-btn--ghost::after { content: '→'; transition: transform .18s ease; }
.ac-btn--ghost:hover::after { transform: translateX(4px); }
.ac-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* ⚠ SP では釦を全幅にする。幅の違う釦を縦に積むと縁がぎざぎざになり、
   どちらが主かも読めなくなる（実測: 金196px と 枠155px が段違いに並んでいた）。 */
@media (max-width: 699px) { .ac-btns > .ac-btn { width: 100%; } }

/* =============================================================================
   札（カード）— 白地・1px の細い枠・影は使わない
   ========================================================================== */
.ac-card {
  background: var(--paper-white); border: 1px solid var(--rule);
  border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; transition: .2s ease;
}
a.ac-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.ac-card-fig { aspect-ratio: 16 / 10; background: var(--rule); overflow: hidden; }
.ac-card-fig img { width: 100%; height: 100%; object-fit: cover; }
.ac-card-in { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.ac-card-in > :last-child { margin-bottom: 0; }
.ac-card-meta {
  font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px;
}
.ac-card-desc { font-size: 17px; line-height: 1.85; color: var(--ink-mid); margin: 10px 0 0; }
/* 問いから科目への道。⚠ 六つの問いは、この学校の憲法にあたる部分。
   道が無いと「問い02に答えるにはどの科目か」が読者に分からず、問いが飾りで終わる。 */
.ac-gain-route { display: flex; flex-direction: column; gap: 6px; }
.ac-gain-route a {
  font-family: var(--mono); font-size: 14px; letter-spacing: .04em;
  color: var(--gold-deep); text-decoration: none; padding: 4px 0;
}
.ac-gain-route a:hover { color: var(--navy); text-decoration: underline; }
.ac-card-foot {
  margin-top: auto; padding-top: 18px; font-family: var(--mono); font-size: 14px;
  letter-spacing: .1em; color: var(--ink-faint);
}

/* 格子。⚠ SP は必ず1列に落とす */
.ac-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .ac-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .ac-grid { gap: var(--gutter); }
  .ac-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .ac-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 700px) and (max-width: 899px) {
  .ac-grid--3, .ac-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================================
   科目の一覧（/kamoku）
   ⚠⚠ 2026-08-01 に作り直した（オーナー指摘「文章がずらっと並んで難しそう」）。
      それまで図版 0 枚の箇条書きで、学校の中（図版 44 枚の札）と食い違っていた。
   ⚠ 符号（E1・B03）は内輪の記号なので、題より小さく・題の上に置く。
      符号を先頭に大きく出すと、頁が講義要綱の PDF に見える。
   ========================================================================== */
.ac-axismap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 48px; }
@media (min-width: 700px) { .ac-axismap { grid-template-columns: repeat(4, 1fr); } }
.ac-axismap a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r);
  text-decoration: none; color: var(--ink); background: var(--paper-white); transition: .2s ease;
}
.ac-axismap a:hover { border-color: var(--gold); }
.ac-axismap b { font-weight: 600; font-size: 15px; }
.ac-axismap small { font-family: var(--mono); font-size: 14px; color: var(--ink-faint); }

.ac-axis { margin: 0 0 56px; scroll-margin-top: calc(var(--head-top-h) + var(--head-main-h) + 16px); }
/* 入口（LP の「目的から」）から /gakubu#path-N へ着いたとき、道の名が固定ヘッダーに隠れないように（W19 第 3 単位） */
.ac-paths > li[id] { scroll-margin-top: calc(var(--head-top-h) + var(--head-main-h) + 16px); }
.ac-axis > h2 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.ac-axis > h2 > small { font-family: var(--mono); font-size: 14px; color: var(--ink-faint); font-weight: 400; }
.ac-axis-lede { color: var(--ink-mid); margin: 0 0 24px; max-width: 62ch; }

/* 科目の札。⚠ a 要素の中なので中身は span（p や h3 を入れると入れ子が不正になる） */
a.ac-course { display: flex; flex-direction: column; }
.ac-course .ac-card-fig { position: relative; }
.ac-course .ac-card-in { padding: 18px 20px 20px; }
.ac-course .ac-card-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
/* ⚠ 節数は折り返させない。学問の名が長いと（出土銭の読み方）「8／節」に割れていた（実測） */
.ac-course-n {
  font-weight: 400; letter-spacing: .06em; color: var(--ink-faint); text-transform: none;
  white-space: nowrap; flex: 0 0 auto;
}
/* 学問の名（史料批判・図像学…）。⚠ 捨てずに符号の隣に置く — 名前を教えるのも授業のうち。
   ただし見出しにはしない（読者はまだ学んでいないので、名前が先だと意味が渡らない） */
.ac-course-field {
  font-family: var(--sans); font-weight: 500; letter-spacing: .02em;
  text-transform: none; color: var(--ink-mid); margin-left: 8px;
}
.ac-course-field::before { content: '／'; color: var(--rule); margin-right: 8px; }
.ac-course-t {
  display: block; font-family: var(--serif); font-size: 21px; line-height: 1.5;
  font-weight: 600; color: var(--ink);
}
.ac-course .ac-card-desc { font-size: 15px; line-height: 1.75; margin-top: 8px; }
/* 実物のコインを情景の上に丸く添える。⚠ コインは標本、情景は場面。役割が違うので見せ方も分ける
   ⚠⚠ セレクタを `.ac-card-fig img.ac-card-plate` まで上げること（実測 2026-08-01）。
      `.ac-card-plate` 単独（0,1,0）は既存の `.ac-card-fig img`（0,1,1）に負け、
      width:100% が効いて**丸い実物が枠いっぱいに膨らみ、情景を覆っていた**。 */
.ac-card-fig img.ac-card-plate {
  position: absolute; right: 12px; bottom: 12px; width: 64px; height: 64px;
  object-fit: contain; border-radius: 50%; padding: 7px;
  background: rgba(255, 255, 255, .93); border: 1px solid rgba(0, 0, 0, .12);
}

/* 入口の一枚。⚠ 横並びにして、他の札より一段大きく見せる（ここから始まると分かるように） */
.ac-entry { margin: 0 0 56px; }
.ac-entry > h2 { margin-bottom: 16px; }
@media (min-width: 700px) {
  a.ac-entry-card { flex-direction: row; }
  .ac-entry-card .ac-card-fig { flex: 0 0 44%; aspect-ratio: auto; }
  .ac-entry-card .ac-card-in { padding: 28px 32px; justify-content: center; }
  .ac-entry-card .ac-course-t { font-size: 26px; }
}
.ac-tag-free {
  font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .08em;
  text-transform: none; color: var(--paper-white); background: var(--navy);
  padding: 3px 10px; border-radius: 999px;
}

/* =============================================================================
   実物の盤（/jitsubutsu）
   ⚠⚠ 2026-08-01。この頁は「すべて実物の写真です」と宣言しながら、217 種の一覧に
      **写真が一枚も無かった**。頁が自分の宣言と矛盾していた。
   ⚠ コインは透過 PNG なので、枠で囲わず紙の上に置く（標本の盤の見立て）。
      札の意匠（.ac-card）を流用しない — コインは「もの」で、科目は「入口」。役割が違う。
   ========================================================================== */
.ac-tray { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 4px; }
@media (min-width: 560px) { .ac-tray { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ac-tray { grid-template-columns: repeat(5, 1fr); } }
.ac-spec {
  display: block; text-align: center; text-decoration: none; color: inherit;
  padding: 14px 8px 18px; border-radius: var(--r); transition: .2s ease;
}
.ac-spec:hover { background: var(--paper-white); }
.ac-spec-fig {
  display: flex; align-items: center; justify-content: center;
  height: 108px; margin-bottom: 10px;
}
.ac-spec-fig img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ac-spec b { display: block; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.ac-spec small { display: block; margin-top: 3px; font-size: 14px; color: var(--ink-faint); }
.ac-spec:hover b { color: var(--navy); }

/* 制作中。⚠ 隠さない — 隠すと軸の全体像（何が来るか）が読者に見えない。
   ⚠ その軸の中に置く（末尾にまとめない）。開けない札なので、枠は破線で開いていないことを示す */
.ac-course-pending { border-style: dashed; background: transparent; }
/* ⚠ 情景は薄く出す。図版だけ空の札は「壊れた画像」に見え、「これから来る科目」には読めない */
.ac-course-pending .ac-card-fig { background: var(--rule); }
.ac-course-pending .ac-card-fig img { filter: grayscale(.75); opacity: .45; }
.ac-course-pending .ac-course-t { color: var(--ink-mid); }
.ac-course-pending .ac-card-meta { color: var(--ink-faint); }

/* =============================================================================
   数字の帯 — 実データだけを出す。⚠ 出典のない数字を置かない
   ========================================================================== */
.ac-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 700px) { .ac-stats--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .ac-stats--3 { grid-template-columns: repeat(3, 1fr); } }
.ac-stat { background: var(--paper-white); padding: 28px 18px; text-align: center; }
.ac-sec--navy .ac-stats { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.ac-sec--navy .ac-stat { background: var(--navy); }
.ac-stat-n { font-family: var(--mono); font-size: 34px; font-weight: 500; line-height: 1; color: var(--navy); letter-spacing: -.01em; }
.ac-sec--navy .ac-stat-n { color: #fff; }
@media (min-width: 900px) { .ac-stat-n { font-size: 44px; } }
.ac-stat-l { font-family: var(--sans); font-size: 14px; letter-spacing: .12em; color: var(--gold-deep); margin-top: 10px; }
.ac-sec--navy .ac-stat-l { color: var(--gold); }
/* 数が「その教材そのもの」へ行ける場合だけ、枡をリンクにする。
   ⚠ 入口では、この枡が五つの様式（観る・学ぶ・実物・引く）への見える導線を兼ねる。 */
a.ac-stat { display: block; text-decoration: none; color: inherit; transition: .2s ease; }
a.ac-stat:hover { background: var(--parchment); }
.ac-sec--navy a.ac-stat:hover { background: var(--navy-soft); }

/* =============================================================================
   ヒーロー — 全幅の暗い帯。旅の絵をここで見せる（学校の面と旅の面の境）
   ========================================================================== */
.ac-hero { position: relative; background: var(--ink-black); color: #fff; overflow: hidden; }
.ac-hero-bg { position: absolute; inset: 0; }
.ac-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.ac-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,31,68,.92) 0%, rgba(10,31,68,.62) 46%, rgba(17,16,13,.34) 100%);
}
.ac-hero-in { position: relative; padding: 96px 0 84px; }
@media (min-width: 900px) { .ac-hero-in { padding: 152px 0 132px; max-width: 780px; } }
.ac-hero .ac-label { color: var(--gold); }
.ac-hero .ac-lede { color: rgba(255,255,255,.86); }
.ac-hero-sub { font-family: var(--serif); font-weight: 400; color: var(--gold); }

/* 頁の頭（下層。ヒーローより浅い帯） */
/* ⚠⚠ 2026-10-26 公開前の直し（単位 B・オーナー 10/25 23:40「写真と文章を分けて、文章は無地のアイボリーの上に」）:
   旧は情景を帯の背景（--head-img・幕を重ねる）に敷き、その上に見出しと文章を載せていた。
   今は写真を帯の中の別の枠（.ac-ph-photo の <img>・server/lib/acshell.js の pagehead／public/app.js の screenHead）に出し、字は無地の地に置く。
   PC（900px 以上）は字の右に写真（字 3：写真 2）、SP は字の下に写真（高さ 200px まで）。料金の頁（--short）は SP で写真を出さない
   （390px で料金の枠の釦まで最初の画面に入れる＝第 2 段 57 の決まりを保つ） */
.ac-pagehead { background: var(--navy); color: #fff; padding: 56px 0 48px; }
.ac-ph-grid { display: grid; gap: 24px; align-items: center; }
.ac-ph-text { min-width: 0; }   /* 字の列（格子の中で長い語が列を押し広げない） */
.ac-ph-photo { margin: 0; }
.ac-ph-img { display: block; width: 100%; height: auto; max-height: 200px; object-fit: cover; border-radius: 8px; }
@media (min-width: 900px) {
  .ac-ph-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; }
  .ac-ph-img { max-height: 360px; aspect-ratio: 4 / 3; }
}
@media (max-width: 899px) { .ac-pagehead--short .ac-ph-photo { display: none; } }
@media (min-width: 900px) { .ac-pagehead { padding: 88px 0 76px; } }
.ac-pagehead .ac-label { color: var(--gold-deep); }
.ac-pagehead .ac-lede { color: rgba(255,255,255,.8); max-width: 720px; }
.ac-ph-cta { margin: 18px 0 0; }
.ac-ph-tag { display: block; margin: 0 0 8px; font-size: 14px; color: rgba(255,255,255,.72); white-space: nowrap; }
/* 2026-10-26 要件定義書 v2 P1-1（390px の /nyugaku）: 札が地に溶けて読めず、枠からはみ出していた。
   原因: 頭の帯の写真と文章を分けた（10-26 単位 B）後、札は字の列（.ac-ph-text・アイボリーの無地）に出ている。白い字（.72）のまま＝地と同じ色、
   white-space: nowrap のまま＝14px で日本語 35 字（14px × 35 = 490px）が 390px の字の列（390 − 余白 16px × 2 = 358px）を越えていた。
   新: 紺 rgba(10,31,68,.7) の下地に白い字・14px（サイトの床）・max-width: 100% で字の列の幅に収める。
   ⚠ 一行に収める（nowrap）は 14px の床では 7 言語どれも 358px に入らない（ja 35 字＝490px・zh 27 字＝378px・en 102 字〜es 117 字の欧文）ので、折り返しを許す（… で切らない・字を小さくしない） */
.ac-pagehead .ac-ph-tag { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 4px 10px; border-radius: 4px;
  background: rgba(10,31,68,.7); color: #fff; font-size: 14px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }   /* 2026-10-23 第 2 段 51: 名乗りの 3 段目（料金の頁） */   /* 2026-10-23 第 2 段 43: 事件の頁の「続きを読む」（.ac-head-cta は頭部の釦の名なので別の名） */

/* =============================================================================
   頭部（追従・すりガラス）
   ========================================================================== */
.ac-head-bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248,249,250,.86); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--rule);
}
/* 上段＝教材への直行路。⚠ 細く・小さく。下段の学校の導線より前に出さない */
/* ⚠ 色は継承の根で決める。子の a に色を書くと `.ac a:not([class])`(0,2,1) に負けて
   墨色を継承し、紺地で読めなくなる（実測で日本語だけ消えていた）。同種のバグの二度目。 */
/* ⚠⚠ 2026-08-01 再設計: 上段は**ユーティリティ**（言語・入学案内）。参照4校とも上段はここ。
   以前は上段に主ナビ（教材5本）を置き、下段に学校4本を置いていた＝**主ナビを2つに割って**いた。
   ⚠ 上段は控えめに。紺のベタ帯だと上段のほうが強く見え、主従が逆転する。 */
.ac-head-top { display: none; background: var(--paper); border-bottom: 1px solid var(--rule); }
@media (min-width: 62.5rem) { .ac-head-top { display: block; } }
/* ⚠ 学びの画面では上段の五様式を #corpusnav という入れ物に差し込む（chrome() が innerHTML で
   書き換えるため）。入れ物が flex の item になると、中の <a> に親の gap が効かず、
   「航路Routes科目Courses…」と詰まって出る（実測 2026-08-01）。入れ物を透明にする。 */
#corpusnav { display: contents; }
.ac-head-top-in {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--margin-desktop);
  height: 40px; display: flex; align-items: center; justify-content: flex-end; gap: 20px;
}
.ac-head-top-label {
  font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .22em;
  color: var(--gold-deep); margin-right: 4px;
}
/* ⚠⚠ 上段は紙地になった（2026-08-01 再設計）。**紺地前提の白文字が残っていて、
   白地に白文字（コントラスト比 1.05＝判読不能）になっていた**（オーナー指摘で実測）。
   ⚠ 地を変えたら、その上の文字色を必ず測り直す。地だけ変えて字を残すのが典型の事故。
   ⚠ 釦（.ac-head-cta）は自前の紺背景を持つので、この規則より後で上書きする。 */
.ac-head-top-in a {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font-size: 14px; font-weight: 500; color: var(--ink-mid);
}
.ac-head-top-in a:hover { color: var(--navy); }
.ac-head-top-in a.ac-head-cta { color: #fff; }
/* ⚠ 2026-09-04: 帯は「札（在籍/聴講中）→ マイページ → ログアウト」の三つ組。項目の間は 14px（実測で 0 だった＝一語に溶けていた）。
   札は状態であり行き先も持つので、縁のある小さな札にして地の文と区別する */
.ac-head-top-in .nav-util { display: inline-flex; align-items: center; gap: 14px; }
.ac-head-top-in .nav-state { color: var(--ink-mid); border: 1px solid var(--rule-strong, var(--rule)); border-radius: 999px; padding: 2px 10px; line-height: 1.4; }
.ac-head-top-in .nav-state:hover { border-color: var(--gold); color: var(--ink); }
/* ⚠⚠ 上段では英字の添えを出さない（2026-08-01 是正）。
   実測: 項目の中（和文と英字）が 7px、項目の間が 26px しかなく、**近さの差が 3.7 倍**。
   目が「どこまでが一項目か」を判別できず、「航路Routes科目Courses用語集Glossary…」と
   一本の帯に溶けていた。38px の細い帯に 5 項目 × 2 語＝10 語は入らない。
   英字は下段（縦積みで成立している側）に残す。役割が違うので、同じ扱いにしない。 */
.ac-head-top-in a i { display: none; }
.ac-head-top-in a:hover { color: #fff; }
.ac-head-top-in a:hover i { color: var(--gold); }
.ac-head-top-in a[aria-current] { color: var(--gold-deep); }

/* ⚠⚠ 群の間隔は、群の中の間隔より**はっきり広く**取る（2026-08-01 是正）。
   実測では逆転していた: 下段のナビは項目間 30px なのに、ナビと入学案内の間が 20px。
   近さの原則が反転するので、「四項目＋釦」が一塊に見えて読めなかった。
   いまは 群の中 24px ／ 群の間 48px（2倍）。上段も同じ考えで 30px を確保している。 */
.ac-head-in { max-width: var(--container); margin: 0 auto; padding: 0 var(--margin-mobile);
  height: 64px; display: flex; align-items: center; gap: 24px; }
@media (min-width: 900px) { .ac-head-in { padding: 0 var(--margin-desktop); height: 84px; gap: 48px; } }
/* ⚠ 校名は「家へ戻る」唯一の導線。実測で高さ 27px しかなかった（触れる最小は 44px）。
   頭部は 64/76px あるので、上下の余白で 44px にしても見た目は動かない。 */
.ac-brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; margin-right: auto;
  padding: 9px 0; }
.ac-brand b { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--navy); letter-spacing: .02em; }
.ac-brand small { font-family: var(--mono); font-size: 14px; letter-spacing: .18em; color: var(--gold-deep); }
@media (max-width: 560px) { .ac-brand small { display: none; } }
/* 下段＝学校の導線。日本語の下に英語を小さく添える。
   ⚠ 英語は意味を伝えるためでなく、見出しの図形として置く（実測: ZEN/グロービスとも同型）。
      太らせない・目立たせないことで効く。 */
.ac-nav { display: none; gap: 24px; align-items: flex-end; }
@media (min-width: 62.5rem) { .ac-nav { display: flex; } }
.ac-nav a {
  display: flex; align-items: center; text-decoration: none;
  padding: 10px 0; border-bottom: 2px solid transparent;
  font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.2;
}
.ac-nav a span { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.2; }
.ac-nav a i {
  font-style: normal; font-family: var(--mono); font-size: 14px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); line-height: 1;
}
/* 上段の入学案内。⚠ 下段の主ナビより小さく。ここは行動の口であって主ナビではない。 */
.ac-head-top .ac-head-cta { min-height: 28px; padding: 5px 16px; font-size: 14px; }
/* 「学校について」の束ね。⚠ 主ナビを 6〜7 本の相場に収めるための器（参照4校の実測）。
   ⚠ position を持つ板は、閉じているとき display:none を明示する（<details> の畳みが外れるため）。 */
.ac-drop { position: relative; }
.ac-drop > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  padding: 10px 0; border-bottom: 2px solid transparent;
  font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.2;
}
.ac-drop > summary::-webkit-details-marker { display: none; }
.ac-drop > summary::after {
  content: ''; width: 5px; height: 5px; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg);
}
.ac-drop > summary:hover, .ac-drop[open] > summary { color: var(--navy); border-bottom-color: var(--gold); }
.ac-drop:not([open]) > .ac-drop-panel { display: none; }
.ac-drop-panel {
  position: absolute; left: 0; top: calc(100% + 8px); min-width: 200px; z-index: 70;
  background: var(--paper-white); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow-float); padding: 6px;
}
.ac-drop-panel a { display: block; padding: 10px 14px; font-size: 14px; color: var(--ink); text-decoration: none; }
.ac-drop-panel a:hover { background: var(--paper); color: var(--navy); }
/* 2026-10-23 メニューの中の小見出し（しくみを知る ／ 歴史から学ぶ、いまの判断）。押せない見出しなので下線も手の形も出さない */
.ac-drop-sub { display: block; margin-top: 6px; padding: 10px 14px 4px; border-top: 1px solid var(--rule); font-size: 14px; font-weight: 700; color: var(--gold-deep, var(--gold)); }
.ac-menu-sub { display: block; margin-top: 4px; padding: 8px 0 2px; font-size: 14px; font-weight: 700; color: var(--gold-deep, var(--gold)); }
.ac-nav a:hover, .ac-nav a[aria-current] { color: var(--navy); }
.ac-nav a:hover i, .ac-nav a[aria-current] i { color: var(--gold-deep); }
.ac-nav a[aria-current] { border-bottom-color: var(--gold-deep); }
/* ⚠ 触れる高さは 44px を下回らせない（実測で 41px だった） */
.ac-head-cta { display: inline-flex; align-items: center; padding: 12px 20px; min-height: 44px;
  background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .06em;
  border-radius: var(--r); text-decoration: none; }
.ac-head-cta:hover { background: var(--navy-deep); }

/* 携帯・タブレットの目次。⚠ 1000px 未満ではナビが消え、脚部まで下りないと
   どこへも行けない状態だった（実測）。JS を使わず details/summary で開閉する。 */
/* ⚠⚠ SP では身分の群（在籍・ログイン）を頭に出さない（2026-08-01 是正）。
   実測: 仏 100px・独 97px・西 57px の横溢れが全画面で出ていた。犯人は入学案内の釦で、
   390px の幅に 校名＋身分＋釦 が入らなかった（長い語の言語で必ず溢れる）。
   身分は目次（ac-menu）の中に同じ項目があるので、頭からは落として構わない。
   ⚠ 「入らないから小さくする」ではなく「入らないものを別の場所へ移す」で直す。 */
@media (max-width: 62.4rem) { .nav-util { display: none; } }
.ac-menu { position: relative; }
@media (min-width: 62.5rem) { .ac-menu { display: none; } }
.ac-menu > summary {
  list-style: none; cursor: pointer; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--paper-white);
}
.ac-menu > summary::-webkit-details-marker { display: none; }
.ac-menu > summary span { display: block; width: 18px; height: 1px; background: var(--navy); position: relative; }
.ac-menu > summary span::before, .ac-menu > summary span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 1px; background: var(--navy);
}
.ac-menu > summary span::before { top: -6px; }
.ac-menu > summary span::after { top: 6px; }
.ac-menu[open] > summary span { background: transparent; }
.ac-menu[open] > summary span::before { top: 0; transform: rotate(45deg); }
.ac-menu[open] > summary span::after { top: 0; transform: rotate(-45deg); }
/* ⚠⚠ 目次の中身が画面より高い（2026-08-13 是正）。
   実測: 盤 874px に対し 390x844 で +94px・360x640 で +298px はみ出し、
   overflow-y が visible なので **中でスクロールできず、下の項目に触れられなかった**。
   届かなくなっていたのは 7 言語の切替と「ログイン」＝目次の最後にある項目。
   盤は sticky な頭の中に絶対配置されているので、頁を送ってもはみ出した先は出てこない。
   76px の根拠: 実測した盤の上端 64px（頭 65px の中に置かれ、top: 100%+10px）＋下の余白 12px。
   ⚠ vh は iOS のアドレスバー分だけ実際の可視領域より大きい。dvh を後に書いて上書きさせる。 */
.ac-menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: min(84vw, 320px);
  background: var(--paper-white); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow-float); padding: 8px; z-index: 60;
  max-height: calc(100vh - 76px);
  max-height: calc(100dvh - 76px);
  overflow-y: auto;
  overscroll-behavior: contain;      /* 盤の端まで来ても、後ろの頁が一緒に動かない */
  -webkit-overflow-scrolling: touch;
}
.ac-menu-panel a {
  display: block; padding: 14px 16px; font-size: 15px; font-weight: 500;
  color: var(--ink); text-decoration: none; border-radius: var(--r);
}
.ac-menu-panel a:hover, .ac-menu-panel a[aria-current] { background: var(--paper); color: var(--navy); }
.ac-menu-panel hr { border: 0; border-top: 1px solid var(--rule); margin: 8px 0; }
.ac-menu-panel small { display: block; padding: 4px 16px 10px; font-family: var(--mono);
  font-size: 14px; letter-spacing: .12em; color: var(--ink-faint); }

/* =============================================================================
   脚部 — 3列（学ぶ／連携と記録／規約）＋実データの帯
   ========================================================================== */
.ac-foot { background: var(--ink-black); color: rgba(255,255,255,.7); padding: 64px 0 32px; }
.ac-foot-grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .ac-foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gutter); } }
.ac-foot h2 { font-family: var(--sans); font-size: 20px; font-weight: 700; letter-spacing: .14em;
  color: var(--gold-deep); margin: 0 0 16px; }
.ac-foot ul { list-style: none; margin: 0; padding: 0; }
.ac-foot li { margin-bottom: 10px; }
.ac-foot a { font-size: 14px; color: rgba(255,255,255,.7); text-decoration: none; }
.ac-foot a:hover { color: var(--gold); }
.ac-foot-brand b { font-family: var(--serif); font-size: 20px; color: #fff; display: block; margin-bottom: 6px; }
.ac-foot-brand p { font-family: var(--serif); font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.85); margin: 0 0 10px; max-width: 26em; }
.ac-foot-brand p.ac-foot-sub { font-family: var(--sans); font-size: 14px; color: rgba(255,255,255,.5); margin: 0; }
.ac-foot-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-family: var(--mono); font-size: 14px; letter-spacing: .1em; color: rgba(255,255,255,.45); }

/* =============================================================================
   部品
   ========================================================================== */
/* 番号つきの手順（入学の流れ・学びの順序） */
.ac-steps { counter-reset: st; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 900px) { .ac-steps--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .ac-steps--5 { grid-template-columns: repeat(5, 1fr); } }
.ac-step { counter-increment: st; background: var(--paper-white); padding: 30px 24px; }
.ac-step::before {
  content: counter(st, decimal-leading-zero); display: block; font-family: var(--mono);
  font-size: 14px; font-weight: 700; letter-spacing: .14em; color: var(--gold-deep); margin-bottom: 14px;
}
.ac-step h3 { margin-bottom: 8px; }

/* 名簿（教員・提携先） */
.ac-person { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; }
.ac-person-fig { aspect-ratio: 1; background: var(--rule); border-radius: var(--r); overflow: hidden; }
.ac-person-fig img { width: 100%; height: 100%; object-fit: cover; }
.ac-person-role { font-family: var(--mono); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 6px; }

/* 記事の一覧行（紀要・コラム） */
.ac-rows { border-top: 1px solid var(--rule); }
.ac-row { display: block; padding: 26px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; }
.ac-row:hover .ac-h3 { color: var(--navy); }
.ac-row-meta { font-family: var(--mono); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; display: flex; gap: 14px; flex-wrap: wrap; }
.ac-row-meta b { color: var(--gold-deep); font-weight: 700; }

/* 定義の並び（要件・費用） */
.ac-dl { border-top: 1px solid var(--rule); }
.ac-dl > div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 700px) { .ac-dl > div { grid-template-columns: 220px 1fr; gap: 24px; } }
.ac-dl dt { font-size: 14px; font-weight: 700; color: var(--navy); }
.ac-dl dd { margin: 0; font-size: 16px; line-height: 1.8; color: var(--ink-mid); }  /* 2026-10-24 指示 77: 本文はスマホで 16px 以上（旧 15px） */

/* 折りたたみ（よくある質問） */
.ac-faq { border-top: 1px solid var(--rule); }
.ac-faq details { border-bottom: 1px solid var(--rule); }
.ac-faq summary { padding: 22px 40px 22px 0; font-size: 16px; font-weight: 700; color: var(--navy);
  cursor: pointer; list-style: none; position: relative; }
.ac-faq summary::-webkit-details-marker { display: none; }
.ac-faq summary::after { content: '+'; position: absolute; right: 8px; top: 20px; font-size: 20px; color: var(--gold-deep); font-weight: 400; }
.ac-faq details[open] summary::after { content: '−'; }
.ac-faq p { margin: 0 0 22px; font-size: 15px; line-height: 1.9; color: var(--ink-mid); }

/* 引用（学びの言葉） */
.ac-quote { border-left: 2px solid var(--gold); padding: 4px 0 4px 22px; margin: 0; }
.ac-quote p { font-family: var(--serif); font-size: 20px; line-height: 1.8; color: var(--ink); margin: 0 0 12px; }
@media (min-width: 900px) { .ac-quote p { font-size: 24px; } }
.ac-quote cite { font-style: normal; font-family: var(--mono); font-size: 14px; letter-spacing: .1em; color: var(--ink-faint); }

/* 二段組（画と文） */
.ac-split { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .ac-split { grid-template-columns: 1fr 1fr; gap: 64px; } .ac-split--wide { grid-template-columns: 1.15fr 1fr; } }
.ac-split-fig { border-radius: var(--r-lg); overflow: hidden; background: var(--rule); aspect-ratio: 4 / 3; }
.ac-split-fig img { width: 100%; height: 100%; object-fit: cover; }

/* 帯の CTA */
.ac-cta { background: var(--navy); color: #fff; text-align: center; }
.ac-cta .ac-h2 { color: #fff; }
.ac-cta .ac-lede { color: rgba(255,255,255,.78); max-width: 620px; margin-left: auto; margin-right: auto; }
.ac-cta .ac-btns { justify-content: center; }

/* パンくず */
.ac-crumb { font-family: var(--mono); font-size: 14px; letter-spacing: .1em; color: rgba(255,255,255,.55); margin-bottom: 18px; }
.ac-crumb a { color: rgba(255,255,255,.55); text-decoration: none; }
.ac-crumb a:hover { color: var(--gold); }

/* 読む本文（記事・規約） */
.ac-prose { max-width: 44rem; }
.ac-prose h2 { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--navy); margin: 44px 0 16px; }
.ac-prose h3 { font-family: var(--sans); font-size: 20px; font-weight: 700; margin: 32px 0 12px; }
.ac-prose p { font-size: 16px; line-height: 1.95; color: var(--ink-mid); margin: 0 0 1.2em; }
.ac-prose ul, .ac-prose ol { padding-left: 1.4em; margin: 0 0 1.4em; }
.ac-prose li { font-size: 16px; line-height: 1.9; color: var(--ink-mid); margin-bottom: .5em; }


/* =============================================================================
   読みもの（メディア層）
   ========================================================================== */
/* 分類のタブ。⚠ 実際に絞り込める（/yomu/c/<key>）ものだけを並べる */
.ac-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-tabs a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 18px; border: 1px solid var(--rule-strong); border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--ink-mid); text-decoration: none;
  background: var(--paper-white); transition: .18s ease;
}
.ac-tabs a:hover { border-color: var(--navy); color: var(--navy); }
.ac-tabs a[aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; }
.ac-tabs span { font-family: var(--mono); font-size: 14px; opacity: .7; }

/* 記事の頭（日付・筆者・分類） */
.ac-artmeta {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  font-family: var(--mono); font-size: 14px; letter-spacing: .1em; color: var(--ink-faint);
  padding-bottom: 20px; border-bottom: 1px solid var(--rule); margin-bottom: 32px;
}
.ac-artmeta a { color: var(--gold-deep); text-decoration: none; }
.ac-artfig { margin: 0 0 36px; border-radius: var(--r-lg); overflow: hidden; }
.ac-artfig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* 2026-10-26 没入改稿（担当 ARTVIEW）: 記事の本文の中の画像（server/lib/artfigures.js・印 [[img:<id>]]）。
   札は .img-roled の規則（資料写真・図＝画像のすぐ上の一行／再現画＝左上に重ねる）。説明文は .img-cap・出所は .img-src（14px）。
   画像は切り取らない（資料写真は全体を見せる。表紙の .ac-artfig の 16:9 の切り取りを使わない） */
.ac-artimg { margin: 32px 0; max-width: 44rem; }
.ac-artimg-box { border: 1px solid var(--rule-strong); }
.ac-artimg-in { position: relative; }
.ac-artimg-in img { display: block; width: 100%; height: auto; }
/* 拡大の範囲の枠（元の画像の上に重ねる・画像ファイルには描き込まない）。紺の線に生成りの縁で、明るい紙・暗い地のどちらの上でも線が見える */
.ac-artimg-zoom { position: absolute; border: 2px solid #0A1F44; box-shadow: 0 0 0 2px #FBF6EA; pointer-events: none; }
/* 文字を読む図（地図）は縮めない: 図の字は SVG の 15px のまま（字 14px 以上）。器より広ければ図の中だけ横に動かす（頁は横に動かない） */
.ac-artimg-box--scroll { overflow-x: auto; }
.ac-artimg-box--scroll .ac-artimg-in { width: max-content; }
.ac-artimg-box--scroll .ac-artimg-in img { width: auto; max-width: none; }
.ac-artimg-hint { margin: 6px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-mid); }
@media (min-width: 760px) { .ac-artimg-hint { display: none; } }
.ac-artimg-cap { display: block; font-size: 16px; line-height: 1.8; color: var(--ink); margin-bottom: 4px; }
.ac-artimg .img-src { display: block; }

/* 記事の末尾に置く「この記事が指している教材」 */
.ac-related { max-width: 44rem; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--rule); }
.ac-related ul { list-style: none; padding: 0; margin: 14px 0 0; }
.ac-related li { margin-bottom: 10px; }
.ac-related a { font-size: 15px; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.ac-related a:hover { border-bottom-color: var(--gold); }

/* =============================================================================
   言語切替 — 7言語（頭部の紺帯・携帯は目次の中）
   ⚠ 学びの画面（index.html）の <select class="lang-sel"> と同じ操作感（一覧から選ぶ）。
      頁は server で組むので JS を使わず details/summary で開く（.ac-menu と同型）。
   ⚠ 紺帯の中なので、色は .ac-head-top からの継承に任せず自分で持つ
      （`.ac a:not([class])` に負けて墨色になる事故の三度目を避ける）。
   ========================================================================== */
.ac-lang { position: relative; }
.ac-lang > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 14px; letter-spacing: .1em;
  /* ⚠ 上段は紙地になった（2026-08-01）。白文字のままだと消える */
  color: var(--ink-mid); padding: 0 2px;
}
.ac-lang > summary::-webkit-details-marker { display: none; }
.ac-lang > summary::after {
  content: ''; width: 5px; height: 5px; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg);
}
.ac-lang > summary:hover { color: var(--navy); }
.ac-lang[open] > summary { color: var(--navy); }
/* ⚠⚠ <details> は「開いていないとき中身を隠す」を **display の既定値に頼って** 実現している。
   板に position: absolute を与えた時点でその仕組みが外れ、**閉じていても出たまま**になる
   （実測 2026-08-01・本番: 言語の板 168×297 が常時見えており、SP では目次の板 320×822 が
   画面を覆っていた。オーナーに「縦に並んだ一覧」として見えていたのはこれ）。
   ⚠ 閉じているときに隠すことを、CSS で明示する。position を持つ板には必ずこの一行が要る。 */
.ac-lang:not([open]) > .ac-lang-panel,
.ac-menu:not([open]) > .ac-menu-panel { display: none; }
.ac-lang-panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 168px;
  background: var(--paper-white); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow-float); padding: 6px; z-index: 70;
}
.ac-lang-panel a {
  display: block; padding: 9px 14px; min-height: 36px; font-size: 14px;
  color: var(--ink); text-decoration: none; border-radius: var(--r);
}
.ac-lang-panel a:hover { background: var(--paper); color: var(--navy); }
.ac-lang-panel a[aria-current] { color: var(--navy); font-weight: 700; }
/* 携帯・タブレットは紺帯ごと隠れるので、目次の中に同じ一覧を置く。
   ⚠ 触れる高さは 44px を下回らせない */
.ac-menu-langs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 6px; }
.ac-menu-langs a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 14px; color: var(--ink); text-decoration: none;
  border: 1px solid var(--rule); border-radius: var(--r);
}
.ac-menu-langs a:hover, .ac-menu-langs a[aria-current] { background: var(--paper); color: var(--navy); border-color: var(--gold); }

/* 記事本文の中の引用・区切り */
.ac-prose blockquote { margin: 28px 0; padding: 2px 0 2px 20px; border-left: 2px solid var(--gold); }
.ac-prose blockquote p { font-family: var(--serif); font-size: 18px; color: var(--ink); margin: 0; }
.ac-prose hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }
.ac-prose b { font-weight: 700; color: var(--ink); }
.ac-prose a { color: var(--navy); border-bottom: 1px solid var(--rule-strong); text-decoration: none; }
.ac-prose a:hover { border-bottom-color: var(--gold); }

/* ⚠ 実バグ（2026-08-01 実測）: 選択中のタブが 1.05:1 で読めなかった。
   /yomu の「すべて」が背景に沈んでいた。地と字を同じ規則で決める。 */
.ac-tabs a[aria-current] { background: var(--navy); color: #fff; }

/* =============================================================================
   引く頁（用語・科目・実物・航路・学生の論文）の本文
   ⚠⚠ 2026-08-01: ここは server/routes/pages.js の中に <style> で直書きされており、
      **三つ目の器**になっていた（頭も脚もナビも学校の面と別物）。器を一つにするため、
      本文の体裁だけをここへ移し、頭・脚・ナビは acshell（学校の面）と共通にした。
   ⚠ 名前（.yo-*）は変えない。変えると 600 頁ぶんの本文を一度に壊す危険がある。
      名前の整理は、器の統合が本番で落ち着いてからにする。
   ========================================================================== */
  .yo { max-width: 44rem; margin: 0 auto; padding: 2.4rem 1.2rem 5rem; }
.yo-crumb { font-family: var(--mono); font-size: 14px; color: var(--ink-faint);
            letter-spacing: .06em; margin-bottom: 1.6rem; }
.yo-crumb a { color: var(--ink-faint); }
.yo h1 { font-size: 2.1rem; margin: 0 0 .2rem; line-height: 1.4; }
.yo-yomi { font-family: var(--mono); font-size: 14px; color: var(--ink-faint);
           letter-spacing: .1em; margin: 0 0 1.4rem; }
/* ⚠ 一文の答えを最初に、大きく。引く人も、生成 AI も、ここだけ読んで帰ることがある */
.yo-lede { font-size: 1.18rem; line-height: 1.9; color: var(--ink);
           border-left: 2px solid var(--gold); padding: .1rem 0 .1rem 1rem; margin: 0 0 2.2rem; }
.yo h2 { font-size: 20px; font-family: var(--mono); letter-spacing: .18em;
         color: var(--gold-deep); font-weight: 500; margin: 2.6rem 0 .8rem;
         border-bottom: 1px solid var(--rule); padding-bottom: .4rem; }
.yo p { margin: 0 0 1.1rem; }
.yo-tags a { display: inline-block; border: 1px solid var(--rule-strong); border-radius: 2px;
             padding: .18rem .7rem; margin: 0 .4rem .5rem 0; font-size: .92rem;
             color: var(--ink-mid); text-decoration: none; }
.yo-tags a:hover { color: var(--gold-deep); border-color: var(--gold); }
.yo-alias { color: var(--ink-faint); font-size: .92rem; }
.yo-back { display: inline-block; margin-top: 2.6rem; font-family: var(--mono);
           font-size: 14px; letter-spacing: .08em; color: var(--gold-deep); }
/* 主釦（.yo-back）の副リンク（W19 第 1 単位: 全文無料の科目の「テーマをすべて見る」） */
.yo-sub { margin: .8rem 0 0; font-size: .92rem; }
.yo-sub a { display: inline-block; padding: .4rem 0; color: var(--ink-mid); }
.yo-idx { columns: 2; column-gap: 2rem; }
@media (max-width: 640px) { .yo-idx { columns: 1; } .yo h1 { font-size: 1.7rem; } }
.yo-idx li { break-inside: avoid; margin: 0 0 .5rem; list-style: none; }
.yo-idx ul { padding: 0; margin: 0 0 2rem; }
.yo-idx b { font-weight: 400; }
.yo-idx small { color: var(--ink-faint); font-size: 14px; }
/* 語の頁の図版。⚠ 実物は「並べて見せる」、場面は「敷いて見せる」。役割が違うので形も分ける */
.yo-fig { margin: 0 0 2.2rem; }
/* 2026-10-27 統合（E2 担当の入口の流れ data/course-entrance.json・pages.js）: 入口の段の並びの入れ物。各段は既存の .yo-fig 等が持つので、ここは段の間隔だけ */
.yo-entrance { margin: 0 0 2.2rem; }
.yo-fig figcaption { margin-top: .6rem; font-family: var(--mono); font-size: 16px;
  letter-spacing: .1em; color: var(--ink-faint); }
.yo-fig.coins { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-end; }
.yo-fig.coins span { display: block; width: 8.5rem; text-align: center; }
.yo-fig.coins img { display: block; width: 100%; height: 8.5rem; object-fit: contain; }
.yo-fig.coins b { display: block; margin-top: .5rem; font-size: 14px; font-weight: 400; }
.yo-fig.coins i { display: block; font-style: normal; font-family: var(--mono);
  font-size: 14px; letter-spacing: .1em; color: var(--ink-faint); }
.yo-fig.coins figcaption { flex: 1 0 100%; }
.yo-fig.scene img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover;
  border-radius: 2px; box-shadow: 0 0 0 1px var(--rule); }

/* 主題の航路（/kouro/t/<code>）。諸編を時代順に横断する停の目次。番号は順路なので消さず、mono の細字で添える */
.ac-cross { margin: 0 0 2.2rem; padding-left: 0; counter-reset: cross; }
.ac-cross li { list-style: none; counter-increment: cross; padding: .55rem 0;
               border-bottom: 1px solid var(--rule); line-height: 1.8; }
.ac-cross li::before { content: counter(cross, decimal-leading-zero); font-family: var(--mono);
               font-size: 14px; letter-spacing: .08em; color: var(--ink-faint); margin-right: .9rem; }
.ac-cross small { font-family: var(--mono); font-size: 14px; letter-spacing: .06em; color: var(--ink-faint); }
.ac-cross b { font-weight: 500; }
.ac-cross a { font-size: .92rem; color: var(--gold-deep); }

/* 窓口のフォーム。⚠ 四つの窓口で同じ形（相手はどの頁から来ても同じ操作で送れる）。 */
.ac-form { max-width: 34rem; margin: 0 auto; text-align: left; }
.ac-form label { display: block; margin-bottom: 16px; font-size: 14px; font-weight: 700; color: var(--navy); }
.ac-form input, .ac-form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px;
  font: inherit; font-weight: 400; color: var(--ink);
  background: var(--paper-white); border: 1px solid var(--rule-strong); border-radius: var(--r);
}
.ac-form input:focus, .ac-form textarea:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.ac-form-msg { margin: 14px 0 0; font-size: 14px; text-align: center; }
.ac-form-msg.is-ok { color: var(--navy); }
.ac-form-msg.is-ng { color: #a3352a; }

/* ⚠⚠ 金は**地で使い分ける**（2026-08-01 実測）。
   紙地: --gold-deep(#775A19) 比 6.11 ／ 暗地: --gold(#C5A059) が映える。
   一律に深い金へ替えたら、今度は紺地・墨地の上で沈んだ（実測 38 件）。
   → 暗い地を持つ器（頁の頭・紺の節・入口のヒーロー・脚部）の中だけ、明るい金に戻す。 */
.ac-pagehead .ac-label,
.ac-sec--navy .ac-label,
.ac-hero .ac-label,
.ac-foot .ac-label,
.ac-foot h2,
.ac-cta .ac-label { color: var(--gold); }

/* ── シラバス一覧の表（/syllabus）── 2026-08-09 新設 ── */
.yo-table { width: 100%; border-collapse: collapse; margin: 12px 0 28px; font-size: .95rem; }
.yo-table th, .yo-table td { border: 1px solid var(--rule, #d8d2c6); padding: 8px 10px;
  text-align: left; vertical-align: top; line-height: 1.6; }
.yo-table th { background: #f4f1ea; font-weight: 600; white-space: nowrap; }
.yo-table td a { text-decoration: none; }
@media print { .yo-table { font-size: 14px; } .yo-table th { background: #eee; } }

/* ── 人物編（縦の映像）─────────────────────────────────────────────
   ⚠ 表紙は 9:16 の縦。既定の .ac-card-fig（16/10）のままだと、縦の絵の上下が
      切り落とされて「空と地面だけ」の帯になる（実測。人物編の表紙は中央に主題がある）。
   ⚠ 画面より高い映像を置かない。縦 9:16 を素のまま並べると、スマートフォンでは
      再生釦まで指が届かない位置に沈む。高さを見える範囲に抑えて中央へ寄せる。 */
.ac-film-fig { aspect-ratio: 3 / 4; }
.ac-film {
  margin: 1.6rem 0 2rem; display: flex; justify-content: center;
  background: #0b0b0e; border: 1px solid var(--rule);
}
.ac-film video {
  width: auto; max-width: 100%; height: min(78vh, 900px); display: block;
  background: #0b0b0e;
}

/* ── 人物編・停別プレーヤー（2026-08-14。航路と同じ操作系: 声/速さ/続きから） ── */
.jt { margin: 1.2rem 0 2rem; }
.jt-controls { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.jt-lbl { font-size: 14px; letter-spacing: 0.18em; color: #8a8172; margin-left: 0.4rem; }
.jt-btn { padding: 0.42rem 0.9rem; border: 1px solid #c9b98a; border-radius: 4px; background: #fffdf7;
  color: #4a4030; cursor: pointer; font-size: 0.9rem; }
.jt-btn.is-on { background: #1d2a4a; color: #f2e8d5; border-color: #1d2a4a; }
.jt-resume { display: block; width: 100%; max-width: 560px; margin: 0 auto 0.9rem; padding: 0.9rem 1.4rem;
  border: 2px solid #b3922f; border-radius: 6px; background: linear-gradient(180deg, #fdf6df, #f4e7bf);
  color: #574408; font-size: 1.02rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 10px rgba(179,146,47,0.25); }
.jt-stage { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
.jt-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jt-stage img.is-coin { object-fit: contain; background: #000; }
.jt-cap { position: absolute; left: 0; right: 0; bottom: 7%; display: flex; flex-direction: column;
  align-items: center; gap: 0.3rem; pointer-events: none; }
.jt-cap span { color: #fff; font-family: 'Shippori Mincho', serif; font-weight: 700;
  font-size: clamp(1rem, 2.6vw, 1.6rem); letter-spacing: 0.06em; line-height: 1.4;
  text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 2px 3px rgba(0,0,0,0.8); padding: 0 1rem; text-align: center; }
.jt-nav { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; flex-wrap: wrap; }
.jt-play { font-weight: 600; }
.jt-pos { margin-left: auto; font-size: 14px; color: #8a8172; letter-spacing: 0.1em; }
.jt-text { margin-top: 0.9rem; line-height: 1.9; color: #3d3629; }

/* ── 人物編: 映像版の埋め込み再生（2026-09-03 オーナー「動画を全画面表示できるように」）─────────
   ブラウザ標準の操作（controls）に加えて、明示の全画面釦。縦版（スマートフォン向け）は高さ基準で収める */
.jv { margin: 0 0 1.5rem; }
.jv-video { display: block; width: 100%; max-height: 72vh; background: #000; border-radius: 4px; }
.jv-video--tall { width: auto; max-width: 100%; max-height: 80vh; margin: 0 auto; }
.jv-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
/* 2026-10-26 公開前の直し C: 人物編の頁の文（6 言語）。再生の釦の文の段（.jt-l・player.js が読む・画面に出さない）と、縦版／16:9 版の釦の二つの文（押すと入れ替える） */
.jt-l[hidden], .jv-l-tall[hidden], .jv-l-wide[hidden] { display: none; }

/* ── 図版教本の一覧（/kyohon）: 640px の読み枠に合う「棚」の形（2026-09-03 オーナー「このページをデザイン入れて」）
   左に表紙の実物の貨幣（本文の section.cover から機械で引く）、右に題・副題・章数・読了時間。3 列の札は 200px 幅で題が切れていた */
.ac-books { display: grid; gap: 14px; margin-top: 18px; }
.ac-book { display: grid; grid-template-columns: 124px 1fr; gap: 22px; align-items: center; padding: 18px 22px 18px 18px;
  background: var(--paper-white); border: 1px solid var(--rule); border-radius: 8px; color: inherit; text-decoration: none; transition: border-color .2s; }
.ac-book:hover { border-color: var(--gold); text-decoration: none; }
.ac-book.is-free { border-color: var(--gold); }
.ac-book-fig { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.07), rgba(0,0,0,.28)); }
.ac-book-fig img { width: 84%; height: 84%; object-fit: contain; }
.ac-book-body { display: block; min-width: 0; }
.ac-book .ac-card-meta, .ac-book .ac-course-n { white-space: normal; }
.ac-book .ac-course-n { margin-left: .6em; }
.ac-book-t { display: block; font-family: var(--serif); font-size: 1.5rem; line-height: 1.3; margin: 6px 0 2px; }
.ac-book-sub { display: block; color: var(--ink-mid); line-height: 1.6; margin: 0 0 8px; }
.ac-book-meta { display: block; font-family: var(--mono); font-size: 14px; letter-spacing: .04em; color: var(--ink-faint); margin: 0 0 10px; }
/* 札の 5 項目の残り（読み方・押すと何が開くか・同じ題材の科目）W19 第 3 単位。文字は 14px 以上 */
.ac-book-more { display: block; margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-mid); }
@media (max-width: 560px) { .ac-book { grid-template-columns: 92px 1fr; gap: 14px; padding: 14px; } .ac-book-t { font-size: 1.25rem; } }

/* ── 繰り返す構造（/kouzou）— 2026-09-04。四段は「比較する場所」の主役なので本文と同じ大きさで四つ並べる ── */
.ac-pt-grid { margin: 8px 0 40px; }
.ac-pt .ac-course-t { font-size: 1.2em; }
.ac-pt-arc { display: block; margin-top: 12px; font-family: var(--mono); font-size: 14px; letter-spacing: .04em; color: var(--ink-faint); }
.ac-pt-four { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 8px 0 12px; }
@media (min-width: 700px) { .ac-pt-four { grid-template-columns: 1fr 1fr; } }
.ac-pt-cell { border: 1px solid var(--rule); border-radius: var(--r); padding: 20px 22px 16px; background: var(--paper-white); }
.ac-pt-cell b { display: block; font-family: var(--mono); font-size: 14px; letter-spacing: .18em; color: var(--gold-deep); margin-bottom: 8px; }
.ac-pt-cell p { margin: 0; line-height: 1.85; }
.ac-pt-stop { margin: 0 0 26px; padding: 0 0 18px; border-bottom: 1px dotted var(--rule); }
.ac-pt-stop h3 { font-family: var(--serif); font-size: 20px; margin: 0 0 4px; }
.ac-pt-stop h3 a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.ac-pt-stop h3 a:hover { border-bottom-color: var(--gold); }
.ac-pt-stop .stopera { font-family: var(--mono); font-size: 14px; letter-spacing: .06em; color: var(--ink-faint); margin: 0 0 10px; }
.ac-pt-dl { display: grid; grid-template-columns: 5.5em 1fr; gap: 6px 14px; margin: 0; }
.ac-pt-dl dt { font-family: var(--mono); font-size: 14px; letter-spacing: .12em; color: var(--gold-deep); padding-top: 3px; }
.ac-pt-dl dd { margin: 0; line-height: 1.8; }
.ac-pt-hist { list-style: none; margin: 0; padding: 0; }
.ac-pt-hist li { margin: 0 0 10px; }
.ac-pt-hist a, .ac-matrix a { color: inherit; text-decoration: none; }
.ac-pt-hist a b, .ac-matrix a b { display: block; font-weight: 600; line-height: 1.5; }
.ac-pt-hist a small, .ac-matrix a small { display: block; font-family: var(--mono); font-size: 14px; letter-spacing: .04em; color: var(--ink-faint); margin-top: 2px; }
.ac-pt-hist a:hover b, .ac-matrix a:hover b { color: var(--gold-deep); }
.ac-matrix { width: 100%; min-width: 760px; border-collapse: collapse; margin: 16px 0 8px; }
.ac-matrix th, .ac-matrix td { border: 1px solid var(--rule); padding: 12px 14px; text-align: left; vertical-align: top; }
.ac-matrix thead th { font-family: var(--mono); font-size: 14px; letter-spacing: .14em; color: var(--ink-faint); background: var(--paper-white); }
.ac-matrix tbody th { font-family: var(--serif); font-weight: 600; background: var(--paper-white); white-space: nowrap; }
.ac-matrix tbody th small { display: block; font-family: var(--mono); font-size: 14px; font-weight: 400; letter-spacing: .06em; margin-top: 4px; }
.ac-matrix tbody th small a { color: var(--gold-deep); text-decoration: none; }
.ac-matrix td:last-child { background: rgba(233, 195, 73, .06); }

/* ── CASE FILES（/cases・/cases/<slug>）2026-09-04。既存の索引と本文の部品（ac-*・yo-*）に寄せ、専用は最小 ── */
.cs-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 28px; margin: 0 0 30px; }
.cs-filters h3 { font-family: var(--sans); font-size: 20px; letter-spacing: .22em; color: var(--ink-mid); margin: 0 0 8px; }
.cs-filters ul { list-style: none; margin: 0; padding: 0; }
.cs-filters li { display: inline-block; margin: 0 8px 6px 0; }
.cs-filters a { display: inline-block; padding: 3px 10px; border: 1px solid var(--rule); border-radius: 3px; color: var(--ink); text-decoration: none; font-size: 14px; }
.cs-filters a.is-on { border-color: var(--shu); color: var(--shu); }
.cs-list { list-style: none; margin: 0; padding: 0; }
.cs-list li { padding: 18px 0; border-top: 1px solid var(--rule); }
.cs-list .cs-meta { font-family: var(--sans); font-size: 14px; letter-spacing: .06em; color: var(--ink-mid); margin: 0 0 4px; }
.cs-list h2 { font-family: var(--serif); font-size: 20px; margin: 0 0 6px; }
.cs-list .cs-q { margin: 0 0 6px; font-size: 16px; }
.cs-chips { margin: 4px 0 0; }
.cs-chips span, .cs-chips a { display: inline-block; margin: 0 6px 4px 0; padding: 1px 8px; border: 1px solid var(--rule); border-radius: 3px; font-family: var(--sans); font-size: 14px; color: var(--ink-mid); text-decoration: none; }
/* 事件の頁の右柱（仕組み）は一覧と同じ札。押せる札は縁が金になる */
.cs-chips a:hover { border-color: var(--gold); color: var(--ink); }
dd.cs-chips { margin: 4px 0 0; }
.cs-draft { color: var(--shu); font-family: var(--sans); font-size: 14px; letter-spacing: .12em; }
.cs-bigq { font-family: var(--serif); font-size: 1.35em; line-height: 1.7; margin: 8px 0 22px; padding-left: 14px; border-left: 3px solid var(--shu); }
.cs-part { margin: 0 0 34px; }
.cs-part h2 { font-family: var(--sans); font-size: 20px; letter-spacing: .24em; color: var(--shu); margin: 0 0 10px; }
.cs-note { padding: 14px 18px; border: 1px solid var(--rule); background: rgba(255,255,255,.5); font-size: 16px; }
.cs-src li, .cs-rel li { margin: 0 0 6px; overflow-wrap: anywhere; }
.cs-req { margin: 8px 0 0 1.2em; font-size: 16px; }
@media (max-width: 760px) { .cs-filters { grid-template-columns: 1fr; gap: 12px; } }

/* CASE FILES 下書き: 史料の地図（オーナー・レビュー用。published では出ない） */
.cs-em { margin: 18px 0 0; }
.cs-em h3 { font-family: var(--sans); font-size: 20px; letter-spacing: .16em; color: var(--shu); margin: 22px 0 8px; }
.cs-em .tblwrap { overflow-x: auto; max-width: 100%; }
.cs-em table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 16px; line-height: 1.6; }
.cs-em th, .cs-em td { border: 1px solid var(--rule); padding: 6px 8px; text-align: left; vertical-align: top; }
.cs-em th { font-family: var(--sans); font-size: 14px; letter-spacing: .06em; background: rgba(0,0,0,.03); white-space: nowrap; }
.cs-em td small { font-size: 14px; color: var(--ink-mid); display: block; }   /* ⚠ --ink-2 は未定義の変数だった（check:css） */
.cs-em ul, .cs-em ol { margin: 6px 0 0 1.2em; font-size: 16px; }
.cs-em li { margin: 0 0 6px; overflow-wrap: anywhere; }
.cs-em .cs-em-status { font-family: var(--sans); font-size: 14px; letter-spacing: .06em; }

/* ── 主ナビ＝学び方の四段（2026-09-04・nav.js）。五つの束ね（読む・深める・確かめる・考える・学校について）を
   同じ器（.ac-drop）で出す。いま居る頁を含む束ねは summary に印。⚠ 段の名は辞書（gakubu.steps）から。ここで文言を書かない ── */
.ac-nav .ac-drop[data-cur] > summary { color: var(--navy); border-bottom-color: var(--gold-deep); }
.ac-nav .ac-drop-panel { min-width: 180px; }
.ac-nav .ac-drop-panel a[aria-current] { color: var(--navy); font-weight: 700; }
.ac-menu-panel small { display: block; margin: 10px 0 4px; }

/* ── CASE FILES 図解と札（2026-09-04・オーナー指摘「表でなく直感的に」）。語彙の id は出さず日本語の札。色は 確かめた＝緑／これから＝琥珀／争いあり＝朱 ── */
.cs-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-family: var(--sans); font-size: 14px; line-height: 1.5; border: 1px solid var(--rule); color: var(--ink); margin: 0 6px 4px 0; white-space: nowrap; }
.cs-pill--ok { background: rgba(46,125,50,.12); border-color: rgba(46,125,50,.5); color: #1f6b25; }
.cs-pill--todo { background: rgba(184,134,11,.12); border-color: rgba(184,134,11,.55); color: #7a5a06; }
.cs-pill--dispute { background: rgba(176,55,31,.10); border-color: rgba(176,55,31,.55); color: var(--shu); }
.cs-pill--core { background: var(--navy); border-color: var(--navy); color: #fff; }
.cs-srcchip { display: inline-block; font-family: var(--sans); font-size: 14px; padding: 1px 8px; margin: 0 6px 4px 0; border: 1px dashed var(--rule); border-radius: 3px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.cs-srcchip:hover { border-style: solid; color: var(--navy); }
.cs-fig { margin: 22px 0 8px; }
.cs-fig figcaption { font-family: var(--sans); font-size: 16px; letter-spacing: .12em; color: var(--ink-mid); margin: 0 0 10px; }
.cs-fig-src { letter-spacing: 0; }
/* 年表（縦） */
.cs-tl ol { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 3px solid var(--rule); }
.cs-tl > ol > li { margin: 0 0 18px; position: relative; }
.cs-tl > ol > li::before { content: ''; position: absolute; left: -21px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--shu); }
.cs-tl-y { display: block; font-family: var(--serif); font-size: 20px; margin: 0 0 4px; }
.cs-tl ul { list-style: none; margin: 0; padding: 0; }
.cs-tl ul li { display: grid; grid-template-columns: 6.5em 1fr; gap: 6px 10px; align-items: baseline; font-size: 16px; line-height: 1.7; margin: 0 0 4px; }
.cs-tl-d { font-family: var(--sans); font-size: 15px; color: var(--ink-mid); }
.cs-tl ul li .cs-srcchip { grid-column: 2; justify-self: start; }
@media (max-width: 560px) { .cs-tl ul li { grid-template-columns: 1fr; } .cs-tl ul li .cs-srcchip { grid-column: 1; } }
/* 数の推移（SVG） */
.cs-chart svg { width: 100%; height: auto; display: block; background: rgba(255,255,255,.55); border: 1px solid var(--rule); }
.cs-ch-title { font-family: var(--sans); font-size: 18px; font-weight: 700; fill: var(--ink); }
.cs-ch-grid { stroke: rgba(29,26,22,.18); stroke-width: 1; }
.cs-ch-tick { font-family: var(--sans); font-size: 14px; fill: var(--ink-mid); }
.cs-ch-line { fill: none; stroke: var(--shu); stroke-width: 3; stroke-linejoin: round; }
.cs-ch-dot { fill: var(--shu); } .cs-ch-dot.is-note { fill: var(--gold-deep); }
.cs-ch-val { font-family: var(--sans); font-size: 16px; font-weight: 700; fill: var(--ink); }
.cs-ch-lab { font-family: var(--sans); font-size: 14px; fill: var(--ink); }
.cs-ch-note { font-family: var(--sans); font-size: 16px; fill: var(--ink-mid); }
/* 史料の層 */
.cs-layers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cs-layer { border: 1px solid var(--rule); padding: 10px 14px; background: rgba(255,255,255,.45); }
.cs-layer h3, .cs-layer h4 { font-family: var(--sans); font-size: 20px; letter-spacing: .14em; color: var(--shu); margin: 0 0 8px; }
.cs-layer ul { list-style: none; margin: 0; padding: 0; } .cs-layer li { font-size: 16px; line-height: 1.6; margin: 0 0 8px; overflow-wrap: anywhere; }
.cs-layer li small { display: block; font-size: 14px; color: var(--ink-mid); }
/* 数の行（値｜何の数・いつ｜出所）。縦に積まない */
.cs-nums { display: grid; gap: 0; margin: 14px 0 0; border-top: 1px solid var(--rule); }
.cs-num { display: grid; grid-template-columns: minmax(9em, 14em) 1fr minmax(10em, 16em); gap: 4px 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule); border-left: 4px solid transparent; padding-left: 10px; }
.cs-num--ok { border-left-color: #1f6b25; } .cs-num--todo { border-left-color: #b8860b; } .cs-num--dispute { border-left-color: var(--shu); }
.cs-num-v { font-family: var(--serif); font-size: 19px; line-height: 1.4; overflow-wrap: anywhere; } .cs-num-v small { display: block; font-family: var(--sans); font-size: 14px; color: var(--ink-mid); }
.cs-num-body { display: flex; flex-direction: column; gap: 2px; } .cs-num-what { font-size: 16px; line-height: 1.6; }
.cs-num-meta, .cs-num-src { font-family: var(--sans); font-size: 14px; color: var(--ink-mid); line-height: 1.6; }
.cs-num-src small { display: block; }
@media (max-width: 700px) { .cs-num { grid-template-columns: 1fr; gap: 2px; } }
/* 俗説の判定 */
.cs-myths { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 14px 0 0; }
.cs-myth { border: 1px solid var(--rule); border-left: 5px solid var(--rule); padding: 10px 14px; background: rgba(255,255,255,.45); }
.cs-myth--dispute { border-left-color: var(--shu); } .cs-myth--todo { border-left-color: #b8860b; } .cs-myth--ok { border-left-color: #1f6b25; }
.cs-myth-claim { font-family: var(--serif); font-size: 17px; margin: 0 0 6px; }
.cs-myth-verdict { margin: 0 0 4px; } .cs-myth-origin { font-family: var(--sans); font-size: 14px; color: var(--ink-mid); }
.cs-myth-src { margin: 0; }
/* 研究者の見方 */
.cs-dispute { margin: 14px 0 0; } .cs-dispute h3, .cs-dispute h4 { font-family: var(--serif); font-size: 20px; margin: 0 0 8px; }
.cs-positions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.cs-pos { border: 1px solid var(--rule); padding: 10px 12px; background: rgba(255,255,255,.45); font-size: 16px; }
.cs-pos b { display: block; font-family: var(--sans); font-size: 14px; letter-spacing: .06em; color: var(--shu); margin: 0 0 4px; } .cs-pos p { margin: 0 0 6px; }
.cs-handling { font-size: 15px; color: var(--ink-mid); margin: 8px 0 0; }
/* 確かめる作業の盤（下書きだけ） */
.cs-part--review { border-top: 3px solid var(--gold-deep); padding-top: 14px; }
.cs-strip { display: grid; gap: 8px; margin: 14px 0 6px; }
.cs-bar { display: grid; grid-template-columns: 9em 1fr; gap: 6px 12px; align-items: center; font-size: 15px; }
.cs-bar-l { font-family: var(--sans); font-size: 14px; letter-spacing: .06em; color: var(--ink-mid); }
.cs-bar-t { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: rgba(0,0,0,.06); }
.cs-bar-t i { display: block; height: 100%; } .cs-bar-ok { background: #2e7d32; } .cs-bar-todo { background: #c9962b; } .cs-bar-dispute { background: var(--shu); }
.cs-bar-n { grid-column: 2; }
@media (max-width: 560px) { .cs-bar { grid-template-columns: 1fr; } .cs-bar-n { grid-column: 1; } }
.cs-claims { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.cs-claim { border: 1px solid var(--rule); border-left: 5px solid var(--rule); padding: 10px 14px; background: rgba(255,255,255,.45); }
.cs-claim--ok { border-left-color: #1f6b25; } .cs-claim--todo { border-left-color: #b8860b; } .cs-claim--dispute { border-left-color: var(--shu); }
.cs-claim-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 0 0 6px; }
.cs-claim-no { font-family: var(--sans); font-size: 14px; letter-spacing: .08em; color: var(--ink-mid); margin-right: 6px; }
.cs-conf { font-family: var(--sans); font-size: 14px; color: var(--ink-mid); margin-left: auto; }
.cs-claim-text { margin: 0 0 6px; font-size: 16px; line-height: 1.75; } .cs-claim-src { margin: 0; } .cs-claim-note { margin: 4px 0 0; font-size: 16px; color: var(--ink-mid); }
.cs-unknowns { margin: 8px 0 0 1.2em; font-size: 16px; } .cs-unknowns li { margin: 0 0 6px; }
.cs-cmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 8px 0 0; }
.cs-cmp-card { border: 1px solid var(--rule); padding: 10px 14px; background: rgba(255,255,255,.45); font-size: 15px; }
.cs-cmp-card h4 { font-family: var(--sans); font-size: 20px; letter-spacing: .08em; margin: 0 0 8px; color: var(--navy); }
.cs-cmp-card dl { margin: 0; display: grid; grid-template-columns: 5em 1fr; gap: 4px 10px; } .cs-cmp-card dt { font-family: var(--sans); font-size: 14px; color: var(--shu); } .cs-cmp-card dd { margin: 0; }
.cs-cmp-card--no { border-style: dashed; } .cs-cmp-card--no ul { margin: 0 0 0 1.1em; padding: 0; }
.cs-inhouse { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.cs-inhouse li { border: 1px dashed var(--rule); padding: 8px 12px; font-size: 15px; } .cs-inhouse li b { font-family: var(--sans); font-size: 14px; color: var(--ink-mid); } .cs-inhouse li p { margin: 4px 0 0; }
/* 一覧の絞り込み: 時代・種類は常に出し、仕組み・問い・史料は畳む（史料は 2 列） */
.cs-facets { margin: 0 0 26px; }
.cs-facets .cs-facet-row { margin: 0 0 10px; }
/* 2026-09-08 監査 A-022: 見出しの段が飛んでいた（h2 の下が h4／h1 の下が h3）。タグだけ上げ、装いは同じにする */
.cs-facets h2 { font-family: var(--sans); font-size: 20px; /* 14px 未満禁止（読者は 60 代が多い・2026-09-04 裁定）。12→14 */ letter-spacing: .22em; color: var(--ink-mid); margin: 0 0 6px; }
.cs-facets ul { list-style: none; margin: 0; padding: 0; } .cs-facets li { display: inline-block; margin: 0 8px 6px 0; }
.cs-facets a { display: inline-block; padding: 3px 10px; border: 1px solid var(--rule); border-radius: 3px; color: var(--ink); text-decoration: none; font-size: 14px; }
.cs-facets a.is-on { border-color: var(--shu); color: var(--shu); }
/* 畳んだ絞り込みの見出しに添える件数（2026-09-04）。check:css が定義無しと出した */
.cs-facet > summary .cs-facet-n { display: inline-block; margin-left: 8px; font-family: var(--sans); font-size: 14px; letter-spacing: .04em; color: var(--ink-faint); }
.cs-facet { border-top: 1px solid var(--rule); }
.cs-facet > summary { list-style: none; cursor: pointer; font-family: var(--sans); font-size: 14px; letter-spacing: .14em; color: var(--ink-mid); padding: 10px 0; display: flex; align-items: center; gap: 8px; }
.cs-facet > summary::-webkit-details-marker { display: none; }
.cs-facet > summary::after { content: ''; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin-left: 2px; }
.cs-facet[open] > summary::after { transform: rotate(-135deg); }
.cs-facet > summary .cs-facet-on { color: var(--shu); letter-spacing: 0; }
.cs-facet .cs-facet-body { padding: 0 0 12px; }
.cs-facet--src ul { columns: 2; column-gap: 24px; } .cs-facet--src li { display: block; break-inside: avoid; margin: 0 0 6px; }
.cs-facet--src a { display: inline-block; max-width: 100%; white-space: normal; }
@media (max-width: 700px) { .cs-facet--src ul { columns: 1; } }

/* ── 物語の本編（2026-10-17 パイロット・server/lib/casesview.js storyBody）。data/cases/<id>.json に story がある事件だけが使う。
   ⚠ 色はトークンだけ（暗い面と白地の両方で効く）。色だけで意味を分けない（棒には模様と文字の札を併せる）。文字は 14px 以上・本文 16px 以上。
   ⚠ 図は既定が縦の構成（SP 320／390）。図の容器が広いときだけ横に並べる（@container）。動きは使わない。 */
.cx-meta { font-family: var(--sans); font-size: 14px; color: var(--ink-mid); letter-spacing: .04em; margin: 0 0 18px; }
.cx-stage { margin: 0 0 48px; overflow-wrap: break-word; hyphens: auto; }   /* 他言語の長い複合語（独 Hypothekenfinanzierungsunternehmen）で SP 320 が横に溢れた（2026-10-17 実測）。和文の折り返しには効かない */
.cx-fig li, .cx-fig p, .cx-fig span, .cx-fig b { min-width: 0; overflow-wrap: anywhere; }
.cx-stage-h { font-family: var(--sans); font-size: 20px; letter-spacing: .24em; color: var(--shu); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.cx-stage-lede { font-size: 16px; line-height: 1.8; color: var(--ink-mid); margin: 0 0 12px; }
.cx-fig { container-type: inline-size; border: 1px solid var(--rule); background: var(--paper-white); padding: 18px 16px 14px; margin: 26px 0 22px; }
.cx-fig figcaption { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; letter-spacing: 0; color: var(--ink); }
.cx-fig-no { font-family: var(--sans); font-size: 14px; letter-spacing: .18em; color: var(--gold-deep); }
.cx-fig-t { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink); }
.cx-goal { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--gold); background: var(--parchment); font-size: 16px; line-height: 1.7; }
.cx-goal b { display: block; font-family: var(--sans); font-size: 14px; letter-spacing: .12em; color: var(--ink-mid); font-weight: 600; }
.cx-note { font-size: 16px; color: var(--ink-mid); margin: 12px 0 0; line-height: 1.7; }
.cx-src { font-family: var(--sans); font-size: 14px; color: var(--ink-mid); margin: 10px 0 0; } .cx-src small { font-size: 14px; }
.cx-sub { font-family: var(--sans); font-size: 15px; font-weight: 600; margin: 18px 0 8px; color: var(--ink); }
.cx-tail { font-size: 15px; color: var(--ink-mid); margin: 8px 0 0; line-height: 1.7; }
.cx-back { font-family: var(--sans); font-size: 15px; margin: 12px 0 0; }
/* 章。時を前後させるので、日付を見出しの上に必ず出す */
.cx-ch { margin: 0 0 18px; padding-top: 26px; border-top: 1px solid var(--rule); }
.cx-ch:first-of-type { border-top: 0; padding-top: 4px; }
.cx-when { font-family: var(--sans); font-size: 15px; letter-spacing: .08em; color: var(--gold-deep); margin: 0 0 4px; }
.cx-ch h3 { font-family: var(--serif); font-size: 24px; line-height: 1.5; margin: 0 0 14px; }
.cx-ch > p { font-size: 17px; line-height: 1.95; margin: 0 0 1em; }
.cx-example { margin: 16px 0; padding: 12px 16px; border: 1px dashed var(--rule-strong); }
.cx-example p { margin: 0; font-size: 16px; line-height: 1.8; } .cx-example .cx-example-k { font-family: var(--sans); font-size: 14px; letter-spacing: .14em; color: var(--ink-mid); margin: 0 0 4px; }
/* 逆にたどる図（図 7）。番号の代わりに時点を置き、矢印は罫で描く（文字にしない） */
.cx-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.cx-chain li { position: relative; }
.cx-chain li + li::before { content: ''; position: absolute; left: 20px; top: -17px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid var(--ink-mid); }
.cx-chain--trace li + li::before { border-top: 0; border-bottom: 10px solid var(--ink-mid); }
.cx-chain--after { margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--rule-strong); }
.cx-chain a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--rule-strong); text-decoration: none; color: var(--ink); background: var(--paper); }
.cx-chain a:hover, .cx-chain a:focus-visible { border-color: var(--gold); }
.cx-chain-no { font-family: var(--sans); font-size: 14px; color: var(--gold-deep); letter-spacing: .06em; }
.cx-chain-t { font-size: 16px; line-height: 1.7; }
/* 流れの図 */
.cx-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.cx-flow li { position: relative; padding: 10px 12px; border: 1px solid var(--rule-strong); background: var(--paper); display: flex; flex-direction: column; gap: 4px; }
.cx-flow li + li::before { content: ''; position: absolute; left: 20px; top: -19px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid var(--ink-mid); }
.cx-flow b { font-size: 17px; line-height: 1.5; } .cx-flow span { font-size: 16px; line-height: 1.7; }
@container (min-width: 640px) {
  .cx-flow { grid-template-columns: repeat(4, 1fr); gap: 30px; }
  .cx-flow li + li::before { left: -22px; top: 50%; transform: translateY(-50%); border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid var(--ink-mid); border-right: 0; }
}
/* 担保と借りられる額の図 */
.cx-assumed { display: inline-block; font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 2px 10px; border: 1px solid var(--ink-mid); color: var(--ink); margin: 0 0 10px; }
.cx-hc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.cx-hc-name { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.cx-split { display: flex; height: 26px; margin: 0 0 6px; border: 1px solid var(--ink-mid); }
.cx-split-a { background: var(--gold); }
.cx-split-b { background: repeating-linear-gradient(45deg, transparent 0 5px, var(--ink-mid) 5px 7px); }
.cx-hc-vals { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--sans); font-size: 15px; margin: 0; }
.cx-key-a::before, .cx-key-b::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border: 1px solid var(--ink-mid); }
.cx-key-a::before { background: var(--gold); } .cx-key-b::before { background: repeating-linear-gradient(45deg, transparent 0 3px, var(--ink-mid) 3px 5px); }
/* 横の棒（担保の図の実際の記録・資産と負債の図の例）。棒の長さは casesview.js が値から計算する */
.cx-hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cx-hbars li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.cx-hb-l { grid-column: 1 / -1; font-size: 15px; line-height: 1.5; }
.cx-hb-track { height: 18px; background: var(--parchment); border: 1px solid var(--rule-strong); }
.cx-hb-track i { display: block; height: 100%; background: var(--gold); }
.cx-hb-v { font-family: var(--sans); font-size: 16px; white-space: nowrap; }
@container (min-width: 560px) {
  .cx-hbars li { grid-template-columns: minmax(0, 8em) minmax(3em, 1fr) auto; } .cx-hb-l { grid-column: auto; } .cx-hb-v { text-align: right; }
  .cx-hbars--wide li { grid-template-columns: minmax(0, 13em) minmax(3em, 1fr) auto; }   /* 値の欄は中身の幅（伊・仏・西の「3.836 miliardi di dollari」が 8em を越えて図が溢れた）*/
}
/* 資産と負債の図 */
.cx-sides { display: grid; gap: 12px; }
.cx-side { border: 1px solid var(--rule-strong); padding: 12px 14px; background: var(--paper); }
.cx-side-h { font-family: var(--sans); font-size: 14px; letter-spacing: .12em; color: var(--ink-mid); margin: 0 0 4px; }
.cx-side-w { font-family: var(--serif); font-size: 18px; line-height: 1.5; margin: 0 0 6px; }
.cx-side ul { margin: 0; padding-left: 1.2em; font-size: 16px; line-height: 1.7; }
@container (min-width: 560px) { .cx-sides { grid-template-columns: 1fr 1fr; } }
/* 出来事の図 */
.cx-events { list-style: none; margin: 0; padding: 0 0 0 4px; border-left: 3px solid var(--rule-strong); }
.cx-events li { position: relative; padding: 0 0 18px 16px; }
.cx-events li::before { content: ''; position: absolute; left: -11px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--gold-deep); }
.cx-ev-d { font-family: var(--sans); font-size: 15px; color: var(--ink-mid); margin: 0; }
.cx-ev-w { font-size: 17px; font-weight: 600; margin: 2px 0 4px; line-height: 1.6; }
.cx-ev-y { font-size: 16px; line-height: 1.7; margin: 0; } .cx-ev-y b { display: block; font-family: var(--sans); font-size: 14px; color: var(--ink-mid); letter-spacing: .08em; }
.cx-ev-s { margin: 6px 0 0; }
@container (min-width: 620px) {
  .cx-events li { display: grid; grid-template-columns: 8.5em 1fr 1fr; gap: 4px 18px; }
  .cx-events--plain li { grid-template-columns: 11em 1fr; }
  .cx-ev-d { grid-row: span 2; } .cx-ev-w { margin: 0; } .cx-ev-s { grid-column: 2 / -1; margin: 0; }
}
/* 推移の図。既定は横の棒の行（SP）、広い容器では縦の棒（左から時の順） */
.cx-series { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cx-series li { display: grid; grid-template-columns: 7.6em 1fr 3.6em; gap: 2px 8px; align-items: center; }
.cx-s-l { font-family: var(--sans); font-size: 14px; }
.cx-s-track { height: 16px; background: var(--parchment); border: 1px solid var(--rule-strong); }
.cx-s-track i { display: block; height: 100%; width: var(--r); background: var(--gold); }
.cx-s-v { font-family: var(--sans); font-size: 16px; text-align: right; }
.cx-s-n { grid-column: 2 / -1; font-family: var(--sans); font-size: 14px; color: var(--ink-mid); }
@container (min-width: 600px) {
  .cx-series { display: flex; align-items: stretch; gap: 6px; }
  .cx-series li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
  .cx-s-v { order: 1; text-align: center; }
  .cx-s-track { order: 2; width: 70%; height: 200px; display: flex; align-items: flex-end; background: none; border: 0; border-bottom: 1px solid var(--ink-mid); }
  .cx-s-track i { width: 100%; height: var(--r); }
  .cx-s-l { order: 3; text-align: center; line-height: 1.5; } .cx-s-l span { display: block; white-space: nowrap; }
  .cx-s-n { order: 4; text-align: center; }
}
/* 深める・自分で確かめる（開閉）。既存の本文・年表・図・台帳を中にそのまま置く */
.cx-more { border-top: 1px solid var(--rule); }
.cx-more:last-child { border-bottom: 1px solid var(--rule); }
.cx-more > summary { list-style: none; cursor: pointer; padding: 14px 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cx-more > summary::-webkit-details-marker { display: none; }
.cx-more > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-mid); border-bottom: 2px solid var(--ink-mid); transform: rotate(45deg); align-self: center; }
.cx-more[open] > summary::after { transform: rotate(-135deg); }
.cx-more-k { font-family: var(--sans); font-size: 14px; letter-spacing: .12em; color: var(--gold-deep); }
.cx-more-t { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.cx-more-body { container-type: inline-size; padding: 0 0 22px; }
.cx-origq b { display: block; font-family: var(--sans); font-size: 14px; letter-spacing: .12em; color: var(--ink-mid); }
.cx-think-h { font-family: var(--sans); font-size: 20px; margin: 0 0 8px; }
.cx-map { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.cx-map th, .cx-map td { border-bottom: 1px solid var(--rule); padding: 6px 8px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.cx-map th { font-family: var(--sans); font-size: 14px; color: var(--ink-mid); font-weight: 600; }
.cx-map code, .cx-map small { font-family: var(--mono); font-size: 14px; }
@container (max-width: 640px) {
  .cx-map thead { display: none; }
  .cx-map tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--rule); }
  .cx-map td { display: block; border: 0; padding: 2px 0; }
  .cx-map td::before { content: attr(data-k) "："; font-family: var(--sans); font-size: 14px; color: var(--ink-mid); }
}

/* ── 表示の面の切替釦（2026-09-04）。上段の語と同じ見た目の文字釦。目次の中では項目と同じ行の形 ── */
.ac-head-top-in .theme-btn { background: none; border: 0; padding: 0; margin: 0 0 0 14px; font: inherit; font-size: 14px; color: var(--ink-mid); cursor: pointer; letter-spacing: .02em; }
.ac-head-top-in .theme-btn:hover { color: var(--navy); }
.ac-menu-panel .theme-btn--menu { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; font-size: 15px; color: var(--ink); padding: 10px 12px; cursor: pointer; }
.ac-menu-panel .theme-btn--menu:hover { background: var(--paper); }
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
/* ⚠ 2026-09-04 オーナー「目次が背景色とかぶって文字が見にくい」: 目次の板は頁と同じ色調で、縁が消え、板の外の本文が板の字と重なって見えた。
   開いている間は頁全体に幕を掛け（大きな影を幕に使う）、板を頁から切り離す */
.ac-menu[open] > .ac-menu-panel { box-shadow: 0 0 0 100vmax rgba(10, 12, 14, .55), var(--shadow-float); }

/* 項目が一つだけの段（深める＝科目）は束ねずに直行する <a>（nav.js の規則）。見た目は束ねの見出し（.ac-drop > summary）と同じ行に並ぶ。
   ⚠ 2026-09-04 check:css「定義が無い」→ .ac-nav a の規則を継ぐことを明示 */
.ac-nav a.ac-nav-one { display: inline-flex; align-items: center; }
.ac-nav a.ac-nav-one[aria-current="page"] { color: var(--gold-deep); }

/* ── 実技（/jitsugi・2026-09-04）。どの文字も 14px 以上 ── */
.jg-kind { margin: 28px 0 8px; }
.jg-kind h2 .jg-n { display: inline-block; margin-left: 10px; font-family: var(--sans); font-size: 14px; color: var(--ink-faint); font-weight: 500; }
.jg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 12px 0 24px; }
.jg-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper-white); text-decoration: none; color: var(--ink); }
.jg-card:hover { border-color: var(--gold); }
.jg-card .jg-q { font-size: 14px; color: var(--ink-mid); }
.jg-card .jg-t { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.5; }
.jg-card .jg-scene { font-size: 14px; color: var(--ink-faint); }
.jg-card .jg-ja { align-self: flex-start; font-size: 14px; color: var(--ink-faint); border: 1px solid var(--rule); border-radius: 3px; padding: 0 6px; }
.jg-scene-line { font-size: 15px; color: var(--ink-mid); }
.jg-steps { padding-left: 1.4em; } .jg-steps li { margin: 8px 0; } .jg-steps li span { display: block; font-size: 15px; color: var(--ink-mid); }
.jg-calc { margin: 28px 0; padding: 18px 20px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper-white); }
.jg-calc-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .jg-inputs, .jg-outputs { min-width: 0; } @media (min-width: 720px) { .jg-calc-grid { grid-template-columns: 1fr 1fr; } }
.jg-calc h3 { font-size: 20px; margin: 0 0 8px; color: var(--ink-mid); }
.jg-in { display: block; margin: 0 0 10px; } .jg-in span { display: block; font-size: 15px; margin-bottom: 4px; } .jg-in small { font-size: 14px; color: var(--ink-faint); margin-left: 4px; }
.jg-in input { width: 100%; max-width: 16em; font-size: 16px; padding: 6px 8px; border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--paper); color: var(--ink); box-sizing: border-box; }
.jg-out { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dotted var(--rule); font-size: 15px; } .jg-out b { font-family: var(--mono); font-size: 17px; } .jg-out small { font-size: 14px; color: var(--ink-faint); margin-left: 4px; }
.jg-formula { font-size: 15px; color: var(--ink-mid); margin: 12px 0 0; }
.jg-src { list-style: none; padding: 0; } .jg-src li { margin: 6px 0; } .jg-src small { display: block; font-size: 14px; color: var(--ink-faint); }
.jg-rel a { margin-right: 8px; }


/* ── 学問の地図（/gakumon・2026-09-05）。文字は 14px 以上（09-04 裁定） ── */
.gk-sec { margin: 40px 0; }
.gk-quote { margin: 16px 0; padding: 18px 22px; border-left: 4px solid var(--gold, #8a6d3b); background: var(--paper-white); border-radius: var(--r); }
.gk-quote p { margin: 0 0 8px; } .gk-quote .gk-orig { font-size: 15px; color: var(--ink-mid); font-style: italic; margin: 0; }
.gk-note { font-size: 16px; color: var(--ink-mid); } .gk-school { font-size: 15px; color: var(--ink-mid); margin: 8px 0 0; }
.gk-timeline { list-style: none; padding: 0; margin: 12px 0; border-left: 2px solid var(--rule); }
.gk-timeline li { position: relative; padding: 0 0 18px 22px; } .gk-timeline li::before { content: ''; position: absolute; left: -6px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold, #8a6d3b); }
.gk-year { display: block; font-size: 15px; letter-spacing: .04em; color: var(--ink-mid); } .gk-timeline p { margin: 4px 0; } .gk-timeline small { font-size: 14px; }
.gk-table { width: 100%; border-collapse: collapse; font-size: 15px; } .gk-table th, .gk-table td { border-top: 1px solid var(--rule); padding: 10px 12px; vertical-align: top; text-align: left; }
.gk-table thead th { border-top: 0; font-size: 14px; color: var(--ink-mid); font-weight: 600; } .gk-table th small, .gk-table td small { display: block; font-size: 14px; color: var(--ink-mid); margin-top: 4px; }
.gk-table tbody th { font-weight: 600; min-width: 12em; } .gk-methods tbody th { font-weight: 500; }
.gk-src { font-size: 14px; } .gk-sources { padding-left: 1.2em; } .gk-sources li { margin: 4px 0; font-size: 15px; }
.gk-bridge { padding: 20px 22px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper-white); }

/* 種類と個体を分けて示す表（2026-09-08・調べる導線）
   ⚠ 明暗どちらの面でも読めるように、区切りは**色の面ではなく罫**で作る。
      背景の淡い網は暗い面でほとんど見えない（theme-dark の下で消える）。
   ⚠ 幅の狭い画面では横に溢れさせない。読者は携帯で実物を見にくる。 */
.yo-spec { border-collapse: collapse; width: 100%; margin: 1rem 0 .4rem; }
.yo-spec th, .yo-spec td { border-bottom: 1px solid var(--rule, #d8d2c6); padding: .5rem .6rem;
  text-align: left; vertical-align: top; font-size: 16px; line-height: 1.7; }
.yo-spec th { white-space: nowrap; font-weight: 500; color: var(--ink-faint); width: 10em; }
.yo-spec .yo-spec-h { width: auto; color: var(--ink); font-weight: 600;
  border-bottom: 2px solid var(--rule, #d8d2c6); padding-top: 1.1rem; }
.yo-spec tr:first-child .yo-spec-h { padding-top: .3rem; }
@media (max-width: 560px) {
  .yo-spec th { width: 6.6em; }
  .yo-spec th, .yo-spec td { padding: .45rem .3rem; }
}

/* 出典と観察の並び（2026-09-08 監査 A-019）。
   2026-09-08 に足したクラスに定義が無く、配信面では**ブラウザ既定の 40px**で出ていた
   （実測: 本番 /guide/checking-rarity・/jitsubutsu/coin/lysimachos-tetradrachm いずれも左 40px）。
   この頁族（.yo）には箇条書きの規則がそもそも無い（今日まで箇条書きが無かったため）ので、
   値は**この site の読み物頁の既存規則をそのまま採る** — 659〜660 行の
   `.ac-prose ul, .ac-prose ol` / `.ac-prose li`。新しい寸法を作らない。
   ⚠ font-size / line-height / color は写さない。.yo 族は自前の本文律（p の余白 1.1rem・行送り 1.8）を
      持っており、.ac-prose の 1.9 と var(--ink-mid) を混ぜると同じ頁の中で本文の律が二つになる */
.yo-src, .yo-obs { padding-left: 1.4em; margin: 0 0 1.4em; }
.yo-src li, .yo-obs li { margin-bottom: .5em; }

/* ⚠⚠ 2026-09-08 監査 A-022 の後始末。`.yo h2`（774 行）はこの頁族の**節の札**の装い
   （小さな mono・金・下罫）で、段を h2 へ上げた見出しがその札に化けた（実測: 事件の題が
   20.4px 明朝 → 14px 金・字間 .16em）。事件の題と絞り込みの見出しは札ではなく中身なので、
   札の装いだけを打ち消して元の見え方に戻す。
   ⚠ 詳細度: type-scale.css の `html .yo h2` が (0,1,2) なので `.cs-list h2` (0,1,1) では負ける。
      `.yo` を前に足して (0,2,1) にする。色と行送りは元どおり**継承**に返す（h3 のときも継承だった） */
.yo .cs-list h2 { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: normal;
  color: inherit; margin: 0 0 6px; border-bottom: 0; padding-bottom: 0; }
.yo .cs-facets h2 { font-family: var(--sans); font-size: 20px; font-weight: 700; letter-spacing: .22em;
  color: var(--ink-mid); margin: 0 0 6px; border-bottom: 0; padding-bottom: 0; }  /* ⚠ 余白は生きている .cs-facets h2（1074 行）の 6px。死んでいる .cs-filters h3 の 8px を写して 1 度間違えた */
/* 2026-10-25 公開前の直し（単位 A）: 総論の章の一覧の部の見出し（/rekishi/kouro/coin）を h3 → h2 に上げた（h1 の直後で段が飛んでいた）。
   上と同じく、節の札の装い（.yo h2）を打ち消して h3 のときの見え方（ブラウザの h3＝1.17em・太字・色は継承）に戻す */
.yo .yo-partH { font-family: inherit; font-size: 20px; font-weight: 700; letter-spacing: normal;
  color: inherit; margin: 1em 0; border-bottom: 0; padding-bottom: 0; }

/* 次の話への送り（2026-09-09 オーナー指摘「映像もいちいち止まらないように」）。
   ⚠ 目立たせるが、本編の上には重ねない（見返している人の邪魔をしない）。
   ⚠ 文字の大きさは 16px（読者は 60 代が多い・2026-09-04 裁定）*/
.jv-next { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin: .8rem 0 0; padding: .8rem 1rem; font-size: 16px; line-height: 1.7;
  border: 1px solid var(--rule); border-radius: 3px; }
.jv-next b { font-size: 18px; }

/* 史料室: 解説がまだその言語に訳されていない史料の札（2026-10-17 オーナー裁定）。訳済みと見分けられるよう、点線の枠で示す */
.ac-src-pending { display: inline-block; font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--ink-mid); border: 1px dashed var(--rule-strong); padding: 2px 8px; }
p.ac-src-pending { display: block; padding: 10px 12px; }

/* 科目の紹介の頁: 入口の一場面と、全体の案内の畳み（2026-10-17 K01・server/course-openings.json の科目だけに出る） */
.yo-opening { margin: 1.6rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--rule); }
.yo-opening p { font-size: 17px; line-height: 1.95; margin: 0 0 1em; color: var(--ink); }
.yo-open-cta { margin: .4rem 0 2rem; }
.yo-open-cta .yo-back { margin-top: 0; }
.yo-fold { border-top: 1px solid var(--rule); }
.yo-fold:last-of-type { border-bottom: 1px solid var(--rule); }
.yo-fold > summary { padding: 18px 40px 18px 0; font-size: 17px; font-weight: 700; color: var(--navy);
  cursor: pointer; list-style: none; position: relative; min-height: 44px; }
.yo-fold > summary::-webkit-details-marker { display: none; }
.yo-fold > summary::after { content: '+'; position: absolute; right: 8px; top: 16px; font-size: 20px; color: var(--gold-deep); font-weight: 400; }
.yo-fold[open] > summary::after { content: '−'; }
.yo-fold > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── 学びの案内 /annai（2026-10-22）: 層 1 ＝目的・層 2 ＝場所・層 3 ＝中身（details） ── */
.an-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 0; margin: 0 0 32px; font-family: var(--sans); font-size: 16px; color: var(--ink-mid); }
.an-steps li { display: flex; align-items: center; gap: 8px; }
.an-steps b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--paper-white); font-size: 15px; }
.an-start { border: 1px solid var(--rule-strong); border-radius: var(--r); padding: 20px 24px; margin: 0 0 48px; background: var(--paper-white); }
.an-start h2 { font-size: 20px; margin: 0 0 12px; }
.an-start ol { margin: 0; padding-left: 1.4em; display: grid; gap: 12px; }
.an-start a { display: grid; gap: 2px; text-decoration: none; color: var(--ink); }
.an-start a b { color: var(--navy); font-size: 17px; }
.an-start a span { color: var(--ink-mid); font-size: 15px; }
.an-door { margin: 0 0 56px; }
/* 2026-10-23 はじめての方へ: 3 テーマの扉（場所の一覧はテーマの頁） */
.an-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin: 0 0 56px; }
.an-themes .an-theme { margin: 0; padding: 24px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-white); display: flex; flex-direction: column; gap: 12px; }
.an-themes .an-theme h2 a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }   /* 押せる高さ 44px（2026-10-23 実測 17px）*/
.an-theme-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.an-theme-list a { display: block; min-height: 44px; padding: 10px 0; font-size: 16px; border-bottom: 1px solid var(--rule); }
.an-theme .an-open { margin-top: auto; min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }
.an-door > header { display: flex; gap: 16px; align-items: flex-start; border-top: 2px solid var(--navy); padding-top: 16px; margin-bottom: 20px; }
.an-no { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--gold); color: var(--gold-deep); font-family: var(--serif); font-size: 20px; }
.an-door h2 { margin: 0 0 4px; font-size: 22px; text-wrap: balance; }   /* 2026-10-26 要件定義書 v2 5 章: 見出し（h2）は 20〜22px（旧 24px） */
.an-q { font-size: 18px; color: var(--ink); margin: 0 0 4px; }
.an-door header p:not(.an-q) { color: var(--ink-mid); margin: 0; }
.an-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.an-place { border: 1px solid var(--rule); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; background: var(--paper-white); min-width: 0; }
.an-place h3 { margin: 0; font-size: 20px; }
.an-place h3 a { color: var(--navy); text-decoration: none; }
.an-place p { margin: 0; font-size: 15px; color: var(--ink-mid); }
.an-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--sans); font-size: 14px; }
.an-meta span:first-child { color: var(--ink); }
.an-old { color: var(--ink-faint); }
.an-more summary { cursor: pointer; font-family: var(--sans); font-size: 15px; color: var(--gold-deep); }
.an-more ul { list-style: none; padding: 8px 0 0; margin: 0; display: grid; gap: 4px; }
.an-more li { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; border-bottom: 1px dotted var(--rule); padding-bottom: 4px; }
.an-more li small { color: var(--ink-faint); font-family: var(--sans); font-size: 14px; }
.an-open { margin-top: auto; align-self: flex-start; font-family: var(--sans); font-size: 15px; color: var(--navy); }
.an-about { border-top: 1px solid var(--rule); padding-top: 16px; }
.an-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.an-links a { display: inline-flex; align-items: center; min-height: 44px; }   /* 押せる高さ 44px（2026-10-23 実測 29px）*/

/* 動画の視聴ページ（/douga/<slug>・2026-10-22） */
.dg-meta { font-family: var(--sans); font-size: 15px; color: var(--ink-mid); margin: 0 0 12px; }
.dg-wrap { position: relative; max-width: 960px; }
.dg-wrap video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.dg-load { position: absolute; left: 0; right: 0; top: 45%; text-align: center; color: #fff; font-size: 16px; text-shadow: 0 1px 3px #000; pointer-events: none; }
.dg-ch { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.dg-ch button { width: 100%; min-height: 44px; text-align: left; font: inherit; font-size: 15px; padding: 8px 12px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 4px; cursor: pointer; }
.dg-ch button span { font-variant-numeric: tabular-nums; color: var(--ink-mid); margin-right: 8px; }
/* 再生できないときの退路・字幕の全文・案内（2026-10-24 学習体験の点検 §04）。動画の下に置き、動画の操作をふさがない */
.dg-fail { max-width: 960px; margin: 12px 0 0; padding: 12px 16px; border: 1px solid var(--rule); border-left: 4px solid var(--navy); border-radius: 4px; background: var(--paper); font-family: var(--sans); font-size: 16px; }
.dg-fail p { margin: 0 0 8px; }
.dg-fail-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0 !important; }
.dg-fail-acts a { display: inline-flex; align-items: center; min-height: 44px; }
.dg-text, .dg-help { max-width: 960px; margin: 24px 0 0; border-top: 1px solid var(--rule); padding-top: 12px; }
.dg-text summary, .dg-help summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-family: var(--sans); font-size: 16px; }
.dg-text h3 { font-size: 20px; margin: 20px 0 6px; scroll-margin-top: calc(var(--head-top-h) + var(--head-main-h) + 16px); }
.dg-text h3 span { font-family: var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-mid); font-size: 15px; margin-right: 8px; }
.dg-text p { font-size: 16px; line-height: 1.9; margin: 0; }
.dg-help ul { font-size: 16px; padding-left: 1.4em; }
/* テーマ別の一覧（/tema/<key>） */
.tm-sec { margin: 0 0 40px; }
.tm-all { font-family: var(--sans); font-size: 16px; }
/* はじめての方へ: 目的別の 3 入口（2026-10-22 顧客体験レビュー §04） */
.an-ways-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; margin: 0 0 32px; }
.an-way { border: 1px solid var(--rule); border-radius: 6px; padding: 20px; background: var(--paper-white, transparent); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.an-way-tag { font-family: var(--sans); font-size: 14px; color: var(--ink-mid); margin: 0; }
.an-way h3 { font-size: 20px; line-height: 1.5; margin: 0; text-wrap: balance; }
.an-way h3 a { color: var(--ink); text-decoration: none; }
.an-way p { margin: 0; font-size: 16px; }
.an-way-coins { display: flex; gap: 8px; }
.an-way-coins img { width: 72px; height: 72px; object-fit: contain; border-radius: 50%; background: var(--paper); }
.an-way-steps { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; font-family: var(--sans); font-size: 16px; }
.an-way-steps li { display: flex; flex-direction: column; }
.an-way-steps small { font-size: 14px; color: var(--ink-mid); }
.an-way-steps a { min-height: 44px; display: inline-flex; align-items: center; }   /* 押せる高さ 44px（2026-10-23 実測 32px）*/
/* 2026-10-24 学習体験の点検 項目 02（単位 A）: 道の各段に、クリック前に読める日を添える行 */
.an-way-steps small.an-acc { color: var(--ink-faint); }
.an-p1 { border-left: 4px solid var(--gold); padding: 4px 0 4px 16px; margin: 0 0 40px; }
.an-p1 h2 { font-size: 20px; font-family: var(--sans); color: var(--ink-mid); margin: 0 0 4px; }
.an-p1 p { margin: 0; font-size: 18px; }
.an-allh { margin-top: 8px; }
.an-ways { margin: 0 0 8px; }
.tm-card .ac-card-desc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dg-card { max-width: 720px; }
.dg-next { margin: 32px 0 0; }
.dg-range { font-family: var(--sans); font-size: 15px; color: var(--ink-mid); margin: 8px 0 0; }
.dg-resume { margin: 12px 0 0; }

/* 本の札の読むボタン（/kyohon・2026-10-22 顧客体験レビュー §07 単位 6）。札全体が一つのリンクなので、ボタンの見た目の行（押せる高さ 44px） */
.ac-book-cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--navy); }

/* 「暮らしのお金：計算と手続き」の用事の目次と、札の形式の小札（/jitsugi・2026-10-22 顧客体験レビュー §07 単位 6）。押せる高さ 44px */
.jg-needs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 8px; }
.jg-needs b { font-size: 16px; margin-right: 4px; }
.jg-needs a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: var(--r); font-size: 16px; color: var(--ink); text-decoration: none; background: var(--paper-white); }
.jg-needs a small { font-size: 14px; color: var(--ink-faint); }
.jg-card .jg-kindtag { align-self: flex-start; font-size: 14px; color: var(--ink-mid); }

/* ── 見てわかる段（server/lib/visual.js・2026-10-22）────────────────────────────
   オーナー「絵や図を入れて文字嫌いな人でも」「楽しんで進める」。色は既存の変数だけ（--gold・--ink・--paper-white・--rule）で、
   明暗どちらでも同じ規則で塗る。文字は 16px 以上（札の小書きも 15px）。押せる所は 44px 以上 */
.vz { --px-a: var(--gold); --px-b: var(--ink); --px-c: var(--paper-white); margin: 0 0 48px; }
.vz-title { font-family: var(--sans); font-size: 15px; letter-spacing: .08em; color: var(--gold-deep, var(--gold)); margin: 0 0 12px; font-weight: 700; }
.vz-steps { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: vz; }
.vz-steps a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--rule-strong, var(--rule)); border-radius: 999px; font-family: var(--sans); font-size: 15px; color: var(--ink); text-decoration: none; background: var(--paper-white); }
.vz-ck { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--rule-strong, var(--rule)); flex: none; }
.vz-steps a.done { border-color: var(--gold); }
.vz-steps a.done .vz-ck { background: var(--gold); border-color: var(--gold); box-shadow: inset 0 0 0 3px var(--paper-white); }
.vz-sec { margin: 0 0 40px; scroll-margin-top: 96px; }
.vz h2.vz-h { display: flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 22px; line-height: 1.4; letter-spacing: 0; color: var(--ink); font-weight: 700; margin: 0 0 8px; padding: 0; border: 0; text-transform: none; }
.vz-n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: var(--paper-white); font-size: 18px; font-weight: 700; flex: none; }
.vz-hint { font-family: var(--sans); font-size: 15px; color: var(--ink-mid); margin: 0 0 12px; }
.vz-strip { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 16px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.vz-card { position: relative; flex: 0 0 82%; max-width: 340px; scroll-snap-align: start; background: var(--paper-white); border: 1px solid var(--rule); border-radius: 14px; padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 6px 24px rgba(10, 31, 68, .06); }
@media (min-width: 900px) { .vz-card { flex-basis: calc((100% - 32px) / 3); } }
.vz-of { position: absolute; top: 14px; right: 16px; font-family: var(--sans); font-size: 14px; color: var(--ink-mid); }
.vz-px { width: 96px; height: 96px; margin: 4px 0 8px; }
.vz-px-s { width: 56px; height: 56px; flex: none; }
.vz-when { font-family: var(--sans); font-size: 15px; color: var(--gold-deep, var(--gold)); font-weight: 700; margin: 0; }
.vz-text { font-family: var(--sans); font-size: 19px; line-height: 1.6; font-weight: 700; margin: 0; color: var(--ink); }
.vz-num { font-family: var(--sans); font-variant-numeric: lining-nums tabular-nums; font-size: 28px; line-height: 1.3; color: var(--gold-deep, var(--gold)); margin: 8px 0 0; font-weight: 700; }
.vz-numnote { font-family: var(--sans); font-size: 16px; color: var(--ink-mid); margin: 0; line-height: 1.6; }
.vz-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.vz-btn { min-height: 44px; min-width: 88px; padding: 0 16px; font: inherit; font-family: var(--sans); font-size: 16px; border: 1px solid var(--rule-strong, var(--rule)); border-radius: 999px; background: var(--paper-white); color: var(--ink); cursor: pointer; }
.vz-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.vz-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong, var(--rule)); }
.vz-dots i.on { background: var(--gold); width: 20px; border-radius: 4px; }
.vz-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.vz-numcard { background: var(--paper-white); border: 1px solid var(--rule); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.vz-big { font-family: var(--sans); font-variant-numeric: lining-nums; font-size: 48px; line-height: 1.1; color: var(--gold-deep, var(--gold)); margin: 4px 0 0; font-weight: 700; }
.vz-big small { font-size: 20px; margin-left: 4px; font-family: var(--sans); }
.vz-lab { font-family: var(--sans); font-size: 16px; line-height: 1.6; margin: 0; color: var(--ink); }
.vz-bars { display: grid; gap: 8px; margin-top: 8px; }
.vz-bar { display: grid; grid-template-columns: 7.5em 1fr auto; align-items: center; gap: 8px; font-family: var(--sans); font-size: 15px; }
.vz-bt { height: 14px; background: var(--rule); border-radius: 7px; overflow: hidden; }
.vz-bt i { display: block; height: 100%; background: var(--ink-mid); border-radius: 7px; }
.vz-bt i.hi { background: var(--gold); }
.vz-bv { font-variant-numeric: tabular-nums; color: var(--ink); }
.vz-q { display: flex; gap: 16px; align-items: flex-start; background: var(--paper-white); border: 1px solid var(--rule); border-radius: 14px; padding: 20px; }
.vz-qt { font-family: var(--sans); font-size: 18px; line-height: 1.7; font-weight: 700; margin: 0; }
.vz-opts { display: grid; gap: 12px; }
.vz-opt { border: 2px solid var(--rule-strong, var(--rule)); border-radius: 14px; background: var(--paper-white); }
.vz-opt[open] { border-color: var(--gold); }
.vz-opt summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 20px; font-family: var(--sans); font-size: 18px; font-weight: 700; color: var(--ink); }
.vz-opt summary::-webkit-details-marker { display: none; }
.vz-opt summary::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--rule-strong, var(--rule)); flex: none; }
.vz-opt[open] summary::before { background: var(--gold); border-color: var(--gold); box-shadow: inset 0 0 0 4px var(--paper-white); }
.vz-rev { padding: 0 20px 18px; font-family: var(--sans); font-size: 16px; line-height: 1.8; }
.vz-rev p { margin: 0 0 8px; }
.vz-after { color: var(--ink-mid); border-top: 1px solid var(--rule); padding-top: 10px; }
.vz-readlink { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--gold); color: var(--paper-white); font-family: var(--sans); font-size: 17px; font-weight: 700; text-decoration: none; }

/* 2026-10-23 参考文献の頁送り */
.ac-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0; font-size: 16px; }
.ac-pager a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--rule); border-radius: 8px; text-decoration: none; }
.ac-pager-n { text-align: center; font-size: 14px; }

/* 2026-10-23 脚部の共通の一文（投資の助言をしない） */
.ac-foot-note { margin: 24px 0 0; font-size: 16px; line-height: 1.7; opacity: .85; }

/* 2026-10-23 頁の最後の「次に読む 1 本」と受講案内（server/lib/nextread.js） */
.nx { padding-block: 40px 8px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.nx-in { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.nx-next, .nx-enroll { border: 1px solid var(--rule); border-radius: 12px; padding: 20px 24px; background: var(--paper-white); }
.nx-h { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--gold-deep, var(--gold)); }
.nx-card, .nx-enroll a { display: inline-flex; align-items: center; min-height: 44px; font-size: 18px; font-weight: 700; }
/* 2026-10-24 学習体験の点検 項目 08（単位 B）: 次の一話の「次に分かること・時間・読める範囲」。文字は 15px（14px 以上） */
.nx-hint { margin: 6px 0 0; font-size: 15px; line-height: 1.7; color: var(--ink-mid); }
.nx-enroll p { margin: 0 0 8px; font-size: 16px; }

/* 2026-10-23 広告の受け皿（/muryo/sagi）の無料登録の入口 */
.su { padding-block: 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.su-in { max-width: 880px; margin: 0 auto; padding: 24px; border: 2px solid var(--gold); border-radius: 12px; background: var(--paper-white); }
.su-h { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.su-in p { font-size: 16px; }
.su-in .ac-btn { min-height: 48px; }
.su--page + .su--page { padding-top: 0; }   /* 2026-10-23 /touroku: LINE の欄とメールの欄が並ぶとき、間を詰める */

/* 2026-10-23 事件の頁の目次と、出どころの頁への口 */
.cx-toc { margin: 16px 0 32px; padding: 16px 20px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-white); }
.cx-toc-h { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--gold-deep, var(--gold)); }
.cx-toc ol { margin: 0; padding-left: 1.4em; display: grid; gap: 2px; }
.cx-toc a { display: inline-block; min-height: 44px; padding: 10px 0; font-size: 16px; }
.cx-check-link, .cx-back a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 16px; }

/* 2026-10-23 貨幣学検定の説明頁: 自社の検定であることの一文 */
.kt-own { padding: 16px 20px; border-left: 4px solid var(--gold); background: var(--paper-white); font-size: 16px; line-height: 1.8; }
/* 外国語版のメール登録の欄（2026-10-23・server/routes/pages.js の signupBox）。入力欄と釦は 44px 以上・字は 16px */
.su-form { display: grid; gap: 10px; margin-top: 8px; max-width: 520px; }
.su-form label { font-size: 16px; }
.su-form input[type=email] { min-height: 44px; width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--paper-white); color: var(--ink); }
.su-consent { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; font-size: 15px; line-height: 1.6; cursor: pointer; }   /* 同意の欄は文字の行ごと押せる（チェックの枠は 24px・押せる範囲は行全体で 44px 以上） */
.su-consent input { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.su-msg { margin: 0; font-size: 16px; }
/* LINE で友だちになる釦（日本語版の無料登録・data/line.json の url があるときだけ出る） */
.su-line { min-height: 44px; }
.ac-trust-name { margin: 8px 0 4px; }
.su-note { font-size: 16px; color: var(--ink-mid); }
/* 価格のすぐ下の全額返金の一行と申込みの釦（2026-10-23） */
.ac-refund-line { display: inline-block; margin: 8px 0; font-size: 16px; font-weight: 700; }
/* 2026-10-24 学習体験の点検 項目 03（単位 A）: 申込みの手前の 3 点（最初の 7 日間・すべてがひらく時点・返金の受付期限）を同じ順で並べる */
ul.ac-refund-line.ac-terms { display: block; padding-left: 1.2em; font-weight: 400; }
ul.ac-terms li { margin: 4px 0; }
.ac-price-go { margin-top: 4px; }
/* 入口の 1 話の終わりの欄（2026-10-23・server/lib/paywall.js）。押せる物は 44px 以上・字は 16px 以上 */
.pw { margin: 40px 0 24px; padding: 20px 22px; border: 2px solid var(--gold); border-radius: 10px; background: var(--paper-white); color: var(--ink); }
.pw-in { display: grid; gap: 8px; max-width: 720px; }
.pw-h { margin: 0; font-weight: 700; font-size: 18px; }
.pw-next, .pw-all, .pw-price { margin: 0; font-size: 16px; line-height: 1.7; }
.pw-next a { color: inherit; }
.pw-act { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 4px 0 0; }
.pw-sub { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.ac-adm-opens { margin: 0 0 20px; font-size: 18px; font-weight: 700; }

/* 鍵の印（2026-10-24 指示 75）: 題の横に小さな鍵と「登録で読めます」。印だけにしない。
   ⚠ 透明度を変えない・隠さない（題と 1 行目は誰でも読める）。文字 14px 以上（読者は 60 代が多い） */
.lk { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--ink-mid); white-space: nowrap; vertical-align: middle; }
.lk-i { flex: none; width: 14px; height: 14px; }
/* 2026-10-24 指示 77: 押せる所はスマホで 44px 四方以上。脚部の短いリンク（「講師」28px）とパンくず（「講座」32px）に幅の下限 */
.ac-foot li a, .yo-crumb a { min-width: 44px; }
/* 図鑑: 既存の検索への入口・写真の面の名・写真の見方（2026-10-24 学習体験の点検 §18・§19） */
.zk-search { margin: 0 0 32px; font-family: var(--sans); font-size: 16px; max-width: 640px; }
.zk-search label { display: block; margin: 0 0 6px; }
.zk-search span { display: flex; gap: 8px; }
.zk-search input { flex: 1 1 auto; min-width: 0; min-height: 44px; font: inherit; font-size: 16px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 4px; }
.zk-search button { min-height: 44px; }
.yo-fig.coins .zk-side { display: block; margin-top: .4rem; font-family: var(--sans); font-size: 14px; color: var(--ink-mid); }
.zk-sides { margin: 0 0 2rem; font-size: 16px; }
.zk-sides dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 8px; }
.zk-sides dt { font-family: var(--sans); color: var(--ink-mid); }
.zk-sides dd { margin: 0; }
.zk-norev { color: var(--ink-mid); }

/* 2026-10-25 学習体験の点検 項目 17・21 の残り（server/lib/learnnav.js）
   戻り先（.ln-back）と問い合わせの口（.ln-ask）は .yo-sub の装いを使う。ここは押せる高さだけ足す。
   一覧の札（本の棚 bk-・事件 cs-・史料 src-・学び方の道 way-）は「来た一覧へ戻る」の行き先。見出しが上の帯に隠れないよう帯の高さだけ空ける */
.ln-back a, .ln-ask a { min-height: 44px; }
.ac-book[id], .cs-list li[id], .ac-ledger tr[id], .an-way[id] { scroll-margin-top: calc(var(--head-top-h) + var(--head-main-h) + 16px); }
/* /support の「見ていた教材」: 本文の先頭に入れた内容を、送る前にそのまま見せる（文字 16px） */
.ln-ctx { border: 1px solid var(--rule); border-radius: 6px; padding: 16px 20px; }
.ln-ctx-pre { white-space: pre-wrap; word-break: break-all; font-family: inherit; font-size: 16px; margin: 12px 0; }

/* 2026-10-25 オーナー決定（NOMISMA まとめ 最終版・ハム v4）: トップと料金の頁のボタンは 2 種類だけ。
   A「まず無料で読む」は 2 段（下に小さく「登録なし・約 8 分」）。下の段も 14px（文字は 14px 以上・読者は 60 代が多い）。B は従来の金の釦（.ac-btn--gold）
   ⚠ 見た目（実画面・PC/SP）は未確認。型の詰めは次の担当（デザイン） */
.ac-btn--two { flex-direction: column; gap: 2px; line-height: 1.35; padding-top: 10px; padding-bottom: 10px; text-align: center; }
.ac-btn--two small { font-size: 14px; font-weight: 400; letter-spacing: .02em; }
/* トップの料金の要約: 「1講座あたり約730円。月額なし、期限なしで…」 */
.ac-adm-cmp { margin: 0 0 12px; font-size: 16px; line-height: 1.7; }
/* トップの講師紹介（要約 2 行＋全文へのリンク＋利益相反の開示） */
.ac-trust-sum { margin: 12px 0 16px; padding-left: 1.4em; font-size: 16px; line-height: 1.8; }
.ac-trust-coi { margin: 16px 0 0; font-size: 14px; line-height: 1.7; }
/* 料金の頁: 数字のバッジ（講座68本／図解の本19／国別のお金の歴史19本・全713章／図鑑436点／辞典461語）と注記 */
.ac-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.ac-badge { display: inline-block; font-size: 14px; line-height: 1.5; padding: 4px 10px; border: 1px solid currentColor; border-radius: 999px; white-space: nowrap; }
/* 2026-10-26 要件定義書 v2 P1-2: ドイツ語のチップ「19 Geldgeschichten nach Ländern · insgesamt 713 Kapitel」（55 字）が nowrap のまま 390px の字の列（358px）を越え、
   頁の横のはみ出しを隠す所で切れていた。折り返しを許し、高さは中身に合わせる（固定の高さ・overflow・ellipsis は持たない）。
   角は 999px だと 2 行のとき字の角にかかるので 16px（1 行の高さ 31px では半径 15.5px で頭打ち＝1 行の見た目は変わらない） */
/* 2026-10-26 要件定義書 v2 P1-3: 日本語の h1 を語の途中で折らない。word-break: auto-phrase（文節で折る・対応するブラウザ）を日本語の h1 すべてに。
   対応しないブラウザ向けに、文節の切れ目に <wbr> を入れた h1（.ac-wbr・server/routes/academic.js の料金の頁）は keep-all（<wbr> と句読点の後だけで折る）。
   overflow-wrap: anywhere は、一つの文節が字の列より長いときだけ効く逃げ道（はみ出させない） */
html[lang="ja"] h1 { word-break: auto-phrase; }
.ac-wbr { word-break: keep-all; overflow-wrap: anywhere; }
@supports (word-break: auto-phrase) { .ac-wbr { word-break: auto-phrase; } }
.ac-badges .ac-badge { max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; border-radius: 16px; height: auto; }
.ac-notes li { margin: 0 0 8px; }
.ac-notes .pb-endnote { font-size: inherit; }
/* 2026-10-26 没入改稿（オーナー点検 7・担当 VIEW）: 画像の役割の札（再現画／資料写真）。図題・画像の下の小さな札。
   区分は既存のデータから（情景＝再現画・図の写真の格子＝資料写真・server/lib/sectionlayout.js）。⚠ 字は 14px を下回らない（check:typefloor） */
.img-role { display: inline-block; margin-right: .6em; padding: 0 .5em; font-family: var(--mono);
  font-size: 14px; line-height: 1.7; letter-spacing: .06em; color: var(--ink-mid);
  border: 1px solid var(--rule-strong); border-radius: 2px; vertical-align: baseline; }
.img-cap { margin: .4rem 0 0; font-size: 14px; }
.img-role--scene { border-style: dashed; }   /* 再現画（描いた絵） */
.img-role--photo { border-style: solid; }    /* 資料写真（実物・史料の写真） */
.img-role--figure { border-style: double; border-width: 3px; }   /* 図（作図・地図・グラフ）。2026-10-26 VIEW2 */
/* 2026-10-26 没入改稿（担当 VIEW2）: 札の位置の規則を一つに（共通編集方針「画像の左上、細部を隠すならすぐ上」）。
   .img-roled＝札を持つ画像の器（札は画像の直前に置く）。資料写真・図＝画像のすぐ上の一行（重ねると読む細部を隠す）／
   再現画＝画像の左上に重ねる（情景は細部を読む画像ではない）。重ねる札は字 14px・墨の地（不透明度 .82）に生成りの字で、どの絵の上でも対比を取る */
.img-roled { position: relative; }
.img-roled > .img-role { display: table; margin: 0 0 6px; }
.img-roled > .img-role--scene { position: absolute; top: 8px; left: 8px; z-index: 1; margin: 0;
  background: rgba(20, 18, 15, .82); color: #fbfaf7; border-color: rgba(251, 250, 247, .7); }
/* 教本の実物の写真の札（server/lib/imagerole.js が画像だけの箱の直前に置く器）。grid の親では全列、flex の親では一行を取り、画像のすぐ上・左寄せ */
.tb-role { display: block; grid-column: 1 / -1; flex: 0 0 100%; margin: 0 0 6px; text-align: left; line-height: 1.7; }
/* 講座の一覧（/kouza）と学びの画面の講座一覧（#/courses）の「つづきから」（3 入口より先・2026-10-26 VIEW2） */
.ac-kouza-cont { margin: 0 0 32px; padding: 20px; border: 1px solid var(--rule-strong); border-radius: 6px; }
.ac-kouza-cont > h2 { margin: 0 0 12px; }
.ac-kouza-cont p { margin: 0 0 10px; font-size: 16px; }
.ac-kouza-cont-t { font-weight: 700; }
.ac-kouza-cont .ac-kouza-cont-note { margin: 0; font-size: 14px; color: var(--ink-mid); }
/* 2026-10-26 統合（E2 裁定 1）: 資料写真の札の後ろの出所・権利・加工の説明文。字は 14px（check:typefloor の下限）・色は札と同じ中間の墨 */
.img-src { font-size: 14px; line-height: 1.7; color: var(--ink-mid); }
/* 2026-10-26 統合（INTNAME）: 内部名を置き換えた資料名のリンク（server/lib/refname.js・app.js）。本文のリンクと同じ見え方で、下線で押せると分かるように */
.refname { text-decoration: underline; text-underline-offset: .15em; }
/* 講座の一覧（/kamoku＝/kouza）の冒頭の 3 入口（/annai と同じ組み立て）と、その下の全講座の見出し（2026-10-26 没入改稿・オーナー点検 6） */
.ac-kouza-ways > h2 { margin: 0 0 16px; }
.ac-kouza-allh { margin: 8px 0 16px; }
/* 2026-10-28 要件定義書 v3 0.7（担当 VIEW2・ポテト）: 「つづきから」の紺の帯（/kouza・#/courses・マイページ）。講座名と「第3節からつづける」を二行に分け、帯の下を 12px あける。
   釦の地・字の色は従来の釦（.ac-btn--primary・.btn）のまま。二行目は 14px（check:typefloor の床） */
.ac-cont-go { flex-direction: column; align-items: center; gap: 2px; line-height: 1.35; white-space: normal; text-align: center; padding-top: 10px; padding-bottom: 10px; }
.ac-cont-go small { display: block; font-size: 14px; font-weight: 400; letter-spacing: .02em; }
.ac-cont-go-row, .ac-kouza-cont .ac-cont-go-row { margin-bottom: 12px; }
/* 確認環境（preview）だけの見え方の切り替えの欄（server/lib/previewpanel.js・本番では器ごと出さない）。脚部の後ろの目立たない一段。字は 14px・押す口は 44px */
.pv-as { margin: 0; padding: 12px 16px; border-top: 1px dashed var(--rule-strong, #8a8274); font-size: 14px; line-height: 1.7; color: var(--ink-mid, #4a453d); }
.pv-as-in { max-width: 1216px; margin: 0 auto; }
.pv-as-now { font-weight: 700; }
.pv-as-go { display: block; }
.pv-as-go a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 16px; color: inherit; text-decoration: underline; text-underline-offset: .15em; }