/* 正本は projects/textbook-common。このファイルを直接編集しない（sync.py で上書きされる） */
@charset "UTF-8";
/* 「非エンジニアのための〇〇の教科書」シリーズ共通スタイル
   デザイン: DESIGN.md（Schoo系統）準拠。ライトのみ（元仕様がダークモード非対応のため）。
   本文サイズだけは長文の読み物向けに 17px / line-height 1.9 へ拡大している。
   冊ごとのブランド色は各冊の chapters.json → build.py が <style> で :root に上書きする。 */

:root {
  /* ブランドカラーの既定値（Schoo）。実際の色は各冊の chapters.json "site.brand" から build.py が上書きする */
  --brand: #e29447;
  --brand-cta: #d8934e;
  --brand-text: #d27a3e;
  --surface: #f5f2ee;
  --brand-marker: rgba(226, 148, 71, 0.28);
  /* 旧トークン名（既存の指定はこのまま動く） */
  --orange: var(--brand);
  --orange-cta: var(--brand-cta);
  --orange-text: var(--brand-text);
  --text: #1f1f1f;
  --text-dark: #1e1e1e;
  --text-sub: #404044;
  --text-muted: #aaaaaa;
  --beige: var(--surface);
  --border: #e1e1e1;
  --input-bg: #eeeeee;
  --white: #ffffff;
  --danger: #dc3545;
  --success: #28a745;

  --font-main: Avenir, "Helvetica Neue", YuGothic, "Yu Gothic", "Hiragino Sans",
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, meiryo, osaka,
    "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --xs: 4px;
  --s: 8px;
  --m: 16px;
  --l: 24px;
  --xl: 40px;
  --xxl: 80px;

  --header-h: 60px;
  --sidebar-w: 288px;
  --measure: 720px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 17px;
  line-height: 1.9;
  font-feature-settings: normal;
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--text-dark); color: var(--white); padding: var(--s) var(--m);
  border-radius: 0 0 8px 0; text-decoration: none;
}
.skip-link:focus { left: 0; }

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

/* ---------- ヘッダー ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: rgba(30, 30, 30, 0.05) 0 4px 8px;
  backdrop-filter: saturate(180%) blur(6px);
}
.site-header__inner {
  height: 100%; max-width: 1200px; margin: 0 auto;
  padding: 0 var(--m);
  display: flex; align-items: center; justify-content: space-between; gap: var(--m);
}
.site-header__logo {
  display: inline-flex; align-items: center; gap: var(--s);
  color: var(--text-dark); text-decoration: none;
  font-size: 16px; font-weight: 700; letter-spacing: 0.02em;
}
.site-header__mark {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange);
  box-shadow: inset 0 0 0 4px var(--white), 0 0 0 1px var(--orange);
}

.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--s);
  background: transparent; color: var(--orange-text);
  border: 2px solid var(--orange); border-radius: 100px;
  padding: 5px 14px; font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.nav-toggle__bars { display: inline-flex; flex-direction: column; gap: 3px; }
.nav-toggle__bars i { display: block; width: 14px; height: 2px; background: currentColor; border-radius: 2px; }

/* ---------- レイアウト ---------- */
.layout {
  max-width: 1200px; margin: 0 auto;
  padding: calc(var(--header-h) + var(--xl)) var(--m) var(--xxl);
  display: grid; grid-template-columns: 1fr; gap: var(--xl);
}

/* ---------- サイドバー ---------- */
.sidebar__inner { position: sticky; top: calc(var(--header-h) + var(--l)); }
.sidebar__heading {
  margin: 0 0 var(--m);
  font-size: 14px; font-weight: 900; letter-spacing: 0.1em; color: var(--text-dark);
  white-space: nowrap;
}
/* 検索と進捗は目次をスクロールしても上に残る（スクロール枠の中で sticky） */
.sidebar__tools { position: sticky; top: 0; z-index: 1; background: var(--white); }
.sidebar__progress {
  margin: 0 0 var(--m); padding-bottom: var(--m);
  border-bottom: 1px solid var(--border);
}
.pbar { height: 4px; background: var(--surface); border-radius: 2px; overflow: hidden; }
.pbar > i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 2px; transition: width 0.3s ease; }
.pbar__label { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--text-muted); line-height: 1.6; }
.nav, .nav__list { list-style: none; margin: 0; padding: 0; }
.nav__part + .nav__part { margin-top: var(--l); }
.nav__part-label {
  margin: 0; font-size: 13px; font-weight: 700; color: var(--text-dark);
  letter-spacing: 0.04em;
}
.nav__part-note { margin: 2px 0 0; font-size: 11px; font-weight: 700; color: var(--text-muted); line-height: 1.5; }
.nav__list { margin-top: var(--s); }
.nav__link {
  display: grid; grid-template-columns: 26px 1fr 16px; align-items: baseline; gap: var(--s);
  padding: 7px var(--s); border-radius: 8px;
  color: var(--text-sub); text-decoration: none;
  font-size: 14px; line-height: 1.6;
}
.nav__link:hover { background: var(--beige); color: var(--text); }
.nav__link.is-current { background: var(--beige); color: var(--text-dark); font-weight: 700; }
.nav__num { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.04em; }
.nav__link.is-current .nav__num { color: var(--orange-text); }
.nav__check { align-self: center; width: 16px; height: 16px; }
.nav__link.is-read .nav__check {
  background: var(--orange); border-radius: 50%;
  box-shadow: inset 0 0 0 4px var(--white), 0 0 0 1px var(--orange);
}

.sidebar-scrim { display: none; }

/* ---------- 本文 ---------- */
.main { min-width: 0; max-width: var(--measure); }

.chapter__header { margin-bottom: var(--xl); }
.chapter__eyebrow {
  margin: 0 0 var(--m); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s);
  font-size: 11px; line-height: 1.4;
}
.chapter__part {
  background: var(--orange); color: var(--white);
  border-radius: 4px; padding: 2px 8px; font-weight: 700; white-space: nowrap;
}
.chapter__meta { color: var(--text-muted); font-weight: 700; }
.chapter__title {
  margin: 0; font-size: 34px; font-weight: 700; line-height: 1.44;
  letter-spacing: 0.01em; color: var(--text-dark);
}
.chapter__subtitle { margin: var(--s) 0 0; font-size: 15px; color: var(--text-sub); line-height: 1.7; }

.chapter h2 {
  margin: var(--xxl) 0 var(--m);
  font-size: 24px; font-weight: 700; line-height: 1.5; letter-spacing: 0.02em;
  color: var(--text-dark);
  padding-left: 14px; border-left: 5px solid var(--orange);
}
.chapter h3 {
  margin: var(--xl) 0 var(--s);
  font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--text-dark);
}
.chapter p { margin: 0 0 1.4em; }
.chapter ul, .chapter ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.chapter li { margin-bottom: 0.5em; }
.chapter strong { font-weight: 700; box-shadow: inset 0 -0.38em 0 var(--brand-marker); }
.chapter hr { border: 0; border-top: 1px solid var(--border); margin: var(--xl) 0; }

.lede { font-size: 18px; line-height: 1.95; }

code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--input-bg); color: var(--text-dark);
  padding: 2px 6px; border-radius: 4px;
}
pre {
  margin: 0 0 1.4em; padding: var(--m); overflow-x: auto;
  background: var(--text-dark); color: #f4f1ec;
  border-radius: 8px; font-size: 14px; line-height: 1.75;
  white-space: pre-wrap; overflow-wrap: anywhere;   /* URLや長い1行が狭い画面で切れないように折り返す */
}
pre.pre--scroll { white-space: pre; }               /* フォルダツリーなど、折り返すと崩れるものだけ横スクロール */
pre code { background: transparent; color: inherit; padding: 0; font-size: 1em; }

/* ---------- 表 ---------- */
.table-wrap { overflow-x: auto; margin: var(--xl) 0; }
.chapter table {
  border-collapse: collapse; width: 100%; min-width: 480px;
  font-size: 15px; line-height: 1.7;
}
.chapter th, .chapter td {
  border-bottom: 1px solid var(--border); padding: 12px var(--m); text-align: left;
  vertical-align: top;
}
.chapter thead th {
  background: var(--beige); font-size: 12px; font-weight: 900; letter-spacing: 0.06em;
  color: var(--text-dark); white-space: nowrap;
}
.chapter tbody th { font-weight: 700; }
.chapter td .note, .chapter tbody th .note {
  display: block; font-size: 12px; font-weight: 400; color: var(--text-sub);
  margin-top: 2px; line-height: 1.6;
}

/* ---------- 図解 ---------- */
.figure { margin: var(--xl) 0; }
.figure__scroll { overflow-x: auto; }
.figure svg { width: 100%; height: auto; display: block; }
.figure figcaption {
  margin-top: var(--s); font-size: 12px; line-height: 1.8; color: var(--text-sub);
}
.figure__hint { display: none; }

/* ---------- ボックス類 ---------- */
.goals {
  background: var(--beige); border-radius: 12px; padding: var(--l);
  margin: 0 0 var(--xl);
}
.goals__label {
  margin: 0 0 var(--s); font-size: 12px; font-weight: 900; letter-spacing: 0.1em;
  color: var(--orange-text);
}
.goals ul { margin: 0; padding-left: 1.3em; }
.goals li { font-size: 15px; line-height: 1.8; margin-bottom: 4px; }
.goals li::marker { color: var(--orange); }

.word {
  border: 1px solid var(--border); border-left: 5px solid var(--orange);
  border-radius: 8px; padding: var(--m) var(--l); margin: var(--l) 0 1.4em;
  background: var(--white);
}
.word__term { margin: 0 0 var(--xs); font-size: 14px; font-weight: 700; color: var(--text-dark); }
.word p:last-child { margin-bottom: 0; }
.word p { font-size: 15px; line-height: 1.85; }

.ask { margin: var(--xl) 0; border: 2px solid var(--orange); border-radius: 12px; overflow: hidden; }
.ask__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--m);
  background: var(--orange); color: var(--white); padding: 10px var(--m);
}
.ask__label { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.ask__copy {
  background: var(--white); color: var(--orange-text);
  border: none; border-radius: 100px; padding: 4px 14px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.ask__copy[data-copied="1"] { color: var(--success); }
.ask__body { padding: var(--m); background: var(--white); }
.ask__body p:last-child { margin-bottom: 0; }
.ask__prompt {
  margin: 0; padding: var(--m); background: var(--beige); color: var(--text);
  border-radius: 8px; font-family: var(--font-main); font-size: 15px; line-height: 1.85;
  white-space: pre-wrap;
}

.confirm, .pitfalls {
  border: 1px solid var(--border); border-radius: 12px; padding: var(--l); margin: var(--xl) 0;
}
.confirm__label, .pitfalls__label {
  margin: 0 0 var(--m); font-size: 12px; font-weight: 900; letter-spacing: 0.1em; color: var(--text-dark);
}
.confirm ul, .confirm ol { margin: 0; padding-left: 1.3em; }
.confirm li, .pitfalls dd { font-size: 15px; line-height: 1.85; }
.pitfalls dl { margin: 0; }
/* エラー文そのものは等幅、日本語で書いた「症状」は本文フォント */
.pitfalls dt {
  font-family: var(--font-mono); font-size: 13px; color: var(--danger);
  background: rgba(220, 53, 69, 0.07); border-radius: 4px; padding: 4px 8px;
  display: inline-block; margin-bottom: var(--s);
}
.pitfalls dt.symptom {
  font-family: var(--font-main); font-size: 14px; font-weight: 700;
  color: var(--text-dark); background: transparent; padding: 0;
}
.pitfalls dt.symptom::before { content: "症状："; color: var(--text-muted); font-weight: 700; }
.pitfalls dd { margin: 0 0 var(--l); }
.pitfalls dd:last-child { margin-bottom: 0; }

.checklist { background: var(--beige); border-radius: 12px; padding: var(--l); margin: var(--xxl) 0 0; }
.checklist__label { margin: 0 0 var(--m); font-size: 12px; font-weight: 900; letter-spacing: 0.1em; color: var(--orange-text); }
.checklist ul { list-style: none; margin: 0; padding: 0; }
.checklist li { margin-bottom: var(--s); }
.checklist label {
  display: flex; align-items: flex-start; gap: var(--s);
  font-size: 15px; line-height: 1.8; cursor: pointer;
}
.checklist input { margin-top: 8px; width: 17px; height: 17px; accent-color: var(--orange); flex: none; }
.checklist__done {
  margin: var(--m) 0 0; padding-top: var(--m); border-top: 1px solid var(--border);
  font-size: 14px; font-weight: 700; color: var(--orange-text);
}
.checklist__done[hidden] { display: none; }

/* ---------- 相談先の案内（本文とは切り離して置く） ---------- */
.aside {
  border: 1px solid var(--border); border-radius: 12px;
  padding: var(--l); margin: var(--xxl) 0 0; background: var(--white);
}
.aside__label {
  margin: 0 0 var(--s); font-size: 12px; font-weight: 900; letter-spacing: 0.1em;
  color: var(--text-muted);
}
.aside h3 { margin: 0 0 var(--s); font-size: 18px; font-weight: 700; color: var(--text-dark); line-height: 1.7; }
.aside p { font-size: 15px; line-height: 1.9; margin: 0 0 1em; }
.aside p:last-child { margin-bottom: 0; }
.aside__btn {
  display: inline-block; margin-top: var(--s);
  background: var(--orange-cta); color: #fff; text-decoration: none;
  border-radius: 50px; padding: 13px 32px; font-size: 15px; font-weight: 700;
}
.aside__btn:hover { opacity: .92; }
.aside__sub {
  margin-top: var(--m); padding-top: var(--m); border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-sub); line-height: 1.9;
}
.aside__sub a { color: var(--orange-text); }

/* ---------- 受け取り方の2択（メール／LINE） ---------- */
.aside__choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m); margin-top: var(--m); }
@media (max-width: 640px) { .aside__choice { grid-template-columns: 1fr; } }
.choice {
  border: 1px solid var(--border); border-radius: 10px;
  padding: var(--m); background: var(--beige);
}
.choice__h {
  margin: 0 0 var(--xs); font-size: 13px; font-weight: 900;
  letter-spacing: .06em; color: var(--text-dark);
}
.choice__note { margin: 0 0 var(--s); font-size: 13px; line-height: 1.85; color: var(--text-sub); }
.choice form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.choice input[type="email"] {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 15px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--white); color: var(--text-dark);
}
.choice input[type="email"]:focus { outline: 2px solid var(--orange-cta); outline-offset: 1px; }
.choice button {
  border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700;
  background: var(--orange-cta); color: #fff; border-radius: 50px; padding: 12px 20px;
}
.choice button:hover { opacity: .92; }
.choice button[disabled] { opacity: .55; cursor: default; }
.choice__line {
  display: inline-block; text-align: center; text-decoration: none;
  background: #06c755; color: #fff; border-radius: 50px;
  padding: 12px 20px; font-size: 15px; font-weight: 700;
}
.choice__line:hover { opacity: .92; }
.choice__msg { margin: 6px 0 0; font-size: 13px; line-height: 1.85; }
.choice__msg--ok { color: #1f7a4d; }
.choice__msg--ng { color: #b3261e; }
.aside__privacy { margin-top: var(--m); font-size: 12px; color: var(--text-muted); line-height: 1.85; }

/* ---------- 前後リンク ---------- */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--m);
  margin-top: var(--xxl); max-width: var(--measure);
}
.pager__link {
  display: block; padding: var(--m); border: 1px solid var(--border); border-radius: 12px;
  text-decoration: none; color: var(--text); background: var(--white);
}
.pager__link:hover { background: var(--beige); }
.pager__link--next { text-align: right; }
.pager__dir { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.pager__title { display: block; font-size: 14px; font-weight: 700; line-height: 1.6; margin-top: 2px; }
.pager__spacer { display: block; }

/* ---------- トップページ ---------- */
.hero { margin-bottom: var(--xxl); }
.hero__badge {
  display: inline-block; background: var(--orange); color: var(--white);
  border-radius: 4px; padding: 2px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.hero h1 {
  margin: var(--m) 0 0; font-size: 38px; font-weight: 700; line-height: 1.44;
  letter-spacing: 0.01em; color: var(--text-dark);
}
.hero__lead { margin: var(--l) 0 0; font-size: 18px; line-height: 1.95; }
.hero__cta {
  display: inline-block; margin-top: var(--l);
  background: var(--orange-cta); color: var(--white); text-decoration: none;
  border-radius: 50px; padding: 15px 44px; font-size: 17px; font-weight: 700;
}
.hero__cta:hover { opacity: 0.92; }

.pitch { background: var(--beige); border-radius: 12px; padding: var(--l); margin-bottom: var(--xxl); }
.pitch h2 { margin: 0 0 var(--m); font-size: 20px; font-weight: 900; letter-spacing: 0.04em; color: var(--text-dark); border: 0; padding: 0; }
.pitch p:last-child { margin-bottom: 0; }

.toc-part { margin-bottom: var(--xl); }
.toc-part__head { display: flex; align-items: baseline; gap: var(--m); flex-wrap: wrap; margin-bottom: var(--m); }
.toc-part__label { font-size: 20px; font-weight: 900; letter-spacing: 0.06em; color: var(--text-dark); }
.toc-part__note { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s); }
.toc-card {
  display: grid; grid-template-columns: 46px 1fr; gap: var(--m); align-items: baseline;
  padding: var(--m); border: 1px solid var(--border); border-radius: 12px;
  text-decoration: none; color: var(--text); background: var(--white);
}
.toc-card:hover { background: var(--beige); }
.toc-card__num { font-size: 12px; font-weight: 900; letter-spacing: 0.06em; color: var(--orange-text); }
.toc-card__title { display: block; font-size: 16px; font-weight: 700; line-height: 1.6; }
.toc-card__sub { display: block; font-size: 13px; color: var(--text-sub); line-height: 1.7; margin-top: 2px; }
.toc-card__min { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); margin-top: var(--xs); }

.coming { border: 1px dashed var(--border); border-radius: 12px; padding: var(--l); color: var(--text-sub); font-size: 14px; }
.coming p:last-child { margin-bottom: 0; }

/* ---------- フッター ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--beige); }
.site-footer__inner { max-width: 1200px; margin: 0 auto; padding: var(--l) var(--m); }
.site-footer__note { margin: 0; font-size: 12px; line-height: 1.8; color: var(--text-sub); }
.site-footer__copy { margin: var(--s) 0 0; font-size: 11px; font-weight: 700; color: var(--text-muted); }

/* ---------- レスポンシブ ---------- */
@media (min-width: 1024px) {
  .layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: var(--xxl); }
  .nav-toggle { display: none; }
}

@media (max-width: 1023px) {
  .sidebar {
    position: fixed; top: var(--header-h); left: 0; bottom: 0; z-index: 45;
    width: min(320px, 86vw); background: var(--white);
    border-right: 1px solid var(--border);
    overflow-y: auto; padding: var(--l) var(--m);
    transform: translateX(-102%); transition: transform 0.22s ease;
    box-shadow: rgba(30, 30, 30, 0.1) 0 8px 20px;
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar__inner { position: static; }
  .sidebar-scrim {
    display: block; position: fixed; inset: var(--header-h) 0 0; z-index: 44;
    background: rgba(30, 30, 30, 0.35);
  }
  .sidebar-scrim[hidden] { display: none; }
  .layout { padding-top: calc(var(--header-h) + var(--l)); }
}

@media (max-width: 767px) {
  body { font-size: 16px; }
  .chapter__title { font-size: 26px; }
  .hero h1 { font-size: 27px; }
  .hero__lead, .lede { font-size: 17px; }
  .chapter h2 { font-size: 20px; margin-top: var(--xl); }
  .chapter h3 { font-size: 17px; }
  .pager { grid-template-columns: 1fr; }
  .goals, .word, .ask__body, .confirm, .pitfalls, .checklist, .pitch { padding: var(--m); }
  /* 図の文字が潰れないよう、狭い画面では図だけ横スクロールさせる */
  .figure__scroll svg { width: 660px; max-width: none; }
  .figure__hint { display: block; margin: 0 0 var(--xs); font-size: 11px; font-weight: 700; color: var(--text-muted); }
  .hero__cta { display: block; text-align: center; padding: 15px var(--m); }
}

/* ---------- 目次の独立スクロール（PCのみ） ----------
   マウスを載せたほうだけが動く。端まで来てもページ側に送られない。 */
@media (min-width: 1024px) {
  .sidebar__inner {
    max-height: calc(100vh - var(--header-h) - var(--l) * 2);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: var(--s);
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .sidebar__inner::-webkit-scrollbar { width: 6px; }
  .sidebar__inner::-webkit-scrollbar-track { background: transparent; }
  .sidebar__inner::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  .sidebar__inner:hover::-webkit-scrollbar-thumb { background: var(--text-muted); }
}

/* ---------- 改行の整え（06_content-rules.md 準拠） ----------
   短いコピー（見出し・小見出し・チェック項目）は text-wrap: balance で
   1〜2文字の孤立行を避ける。地の文には保険として auto-phrase / pretty。
   最終確認は Playwright での実測（375px / 1280px）。 */
h1, h2, h3, dt, figcaption,
.chapter__subtitle, .toc-card__sub,
.goals li, .checklist li span { text-wrap: balance; }
p, li, dd { word-break: auto-phrase; text-wrap: pretty; }
/* 見出し・図の文言・手順名は build.py が文節の区切り（ZWSP）を入れるので、その位置だけで折り返す */
h1, h2, h3, figcaption, .flow__title, .flow__note, .flow__return, .compare__title, .compare__sub, .compare__tag,
.tree__note, .steps > li > strong, .steps__note { word-break: keep-all; overflow-wrap: anywhere; }


/* ---------- 実画面スクリーンショット ---------- */
.shot { margin: var(--xl) auto; }
.shot img { display: block; width: 100%; max-width: 100%; height: auto; background: var(--white);
  border: 1px solid var(--border); border-radius: 10px; }
.shot figcaption { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--text-sub); }
.shot--dialog { max-width: 460px; }
.shot--narrow { max-width: 340px; }
.shot--wide img { border-radius: 8px; }

/* ---------- 動画（ループ・解説） ---------- */
.clip { margin: var(--xl) 0; }
.clip video {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.clip--tall video { max-width: 360px; display: block; margin: 0 auto; }
.clip--square video { max-width: 480px; display: block; margin: 0 auto; }
.clip figcaption {
  margin-top: var(--s); font-size: 12px; line-height: 1.8; color: var(--text-sub);
}
.clip__bar { display: flex; justify-content: flex-end; margin-top: 6px; }
.clip__sound {
  font: inherit; font-size: 13px; font-weight: 700; padding: 3px 16px;
  background: var(--white); color: var(--brand-text);
  border: 1.5px solid var(--brand); border-radius: 100px; cursor: pointer;
}
.clip__sound:hover { background: var(--surface); }
.hero .clip { margin: var(--xl) 0 0; }



/* ==========================================================================
   2026-09 追加の部品（見やすく・理解しやすく・学びやすく）
   ========================================================================== */

/* ---------- 章内の見出しへの直リンク ----------
   固定ヘッダーの下に隠れないのは html の scroll-padding-top が担う（scroll-margin を重ねると二重に空く） */

/* ---------- 章内目次（PC: サイドバーの現在章の下に入れ子 / モバイル: 本文冒頭の折りたたみ） ---------- */
.nav__sections { list-style: none; margin: 2px 0 6px 34px; padding: 0; }
.nav__sections a {
  display: block; padding: 5px 0 5px 12px; font-size: 14px; line-height: 1.5;
  color: var(--text-sub); text-decoration: none; border-left: 2px solid var(--border);
}
.nav__sections a:hover { color: var(--text-dark); }
.nav__sections a.is-active { border-left-color: var(--brand); color: var(--brand-text); font-weight: 700; }

.secnav { border: 1px solid var(--border); border-radius: 12px; margin: 0 0 var(--xl); background: var(--white); }
.secnav summary {
  padding: 12px var(--m); font-size: 14px; font-weight: 700; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s);
}
.secnav summary::-webkit-details-marker { display: none; }
.secnav summary::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.secnav[open] summary::after { transform: rotate(-135deg); }
.secnav ol { list-style: none; margin: 0; padding: 0 var(--m) var(--m); }
.secnav li { margin: 0; }
.secnav a {
  display: block; padding: 6px 0 6px 14px; font-size: 14px; line-height: 1.6;
  color: var(--text-sub); text-decoration: none; border-left: 2px solid var(--border);
}
.secnav a.is-active { border-left-color: var(--brand); color: var(--text-dark); font-weight: 700; }
@media (min-width: 1024px) { .secnav { display: none; } }

/* ---------- 続きから読む（トップ・JSが表示する） ---------- */
.hero__resume { margin: var(--m) 0 0; font-size: 15px; font-weight: 700; line-height: 1.8; }
.hero__resume[hidden] { display: none; }

/* ---------- 冊内検索（サイドバー上部・JSが表示する） ---------- */
.search { margin: 0 0 var(--m); }
.search[hidden] { display: none; }
.search__label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 900; letter-spacing: 0.06em; color: var(--text-dark); }
.search__input {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 16px; line-height: 1.5;
  border: 1px solid var(--border); border-radius: 8px; background: var(--white); color: var(--text-dark);
}
.search__input:focus { outline: 2px solid var(--brand-cta); outline-offset: 1px; }
.search__count { margin: var(--s) 0 0; font-size: 14px; line-height: 1.7; color: var(--text-sub); }
.search__count:empty { display: none; }
.search__results { list-style: none; margin: var(--s) 0 0; padding: 0; }
.search__results li { margin: 0; }
.search__results a {
  display: block; padding: 10px var(--s); border-radius: 8px;
  text-decoration: none; color: var(--text);
}
.search__results a:hover, .search__results a:focus-visible { background: var(--surface); }
.r__ch { display: block; font-size: 14px; font-weight: 900; letter-spacing: 0.04em; color: var(--brand-text); }
.r__h { display: block; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--text-dark); }
.r__snip { display: block; margin-top: 2px; font-size: 14px; line-height: 1.7; color: var(--text-sub); }
.search mark { background: transparent; color: inherit; box-shadow: inset 0 -2px 0 var(--brand); }
.sidebar.is-searching .sidebar__heading,
.sidebar.is-searching .sidebar__progress,
.sidebar.is-searching .nav { display: none; }

/* ---------- 用語（本文中の初出に点線・タップで説明） ---------- */
.gl {
  color: inherit; text-decoration: underline dotted var(--brand);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: help;
}
.gl:hover, .gl[aria-expanded="true"] { color: var(--brand-text); }
.chapter { position: relative; }
.glpop {
  position: absolute; z-index: 40; width: min(320px, calc(100% - 16px));
  background: var(--white); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; box-shadow: rgba(30, 30, 30, 0.1) 0 8px 20px;
  font-size: 14px; line-height: 1.7; color: var(--text); font-weight: 400;
  text-align: left; white-space: normal;
}
.glpop__term { display: block; margin: 0 0 4px; font-size: 14px; font-weight: 900; letter-spacing: 0.04em; color: var(--brand-text); box-shadow: none; }
.glpop__read { margin-left: 6px; font-weight: 400; letter-spacing: 0; color: var(--text-muted); }
.glpop__body { display: block; }
.glpop__more { display: inline-block; margin-top: 6px; font-size: 14px; }

/* ---------- 用語集ページ ---------- */
.gl-list { margin: 0 0 var(--xl); }
.gl-list__row { padding: var(--m) 0; border-bottom: 1px solid var(--border); }
.gl-list dt { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-dark); font-family: var(--font-main); }
.gl-list__read { margin-left: 8px; font-size: 14px; font-weight: 400; color: var(--text-muted); }
.gl-list dd { margin: 4px 0 0; font-size: 15px; line-height: 1.8; }
.gl-list__first { margin-left: 8px; font-size: 14px; white-space: nowrap; }

/* ---------- 手順（読者が自分の手で操作する順番） ---------- */
.steps { list-style: none; counter-reset: step; margin: 0 0 1.4em; padding: 0; }
.steps > li { position: relative; padding-left: 44px; margin-bottom: var(--m); counter-increment: step; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0.1em;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: var(--white);
  font-size: 14px; font-weight: 900; line-height: 30px; text-align: center;
}
.steps > li > strong { display: block; font-size: 16px; line-height: 1.7; box-shadow: none; color: var(--text-dark); }
.steps > li > strong + * { margin-top: 2px; }
.steps__note { display: block; font-size: 15px; line-height: 1.8; color: var(--text-sub); }
.steps .ask { margin: var(--m) 0 var(--s); }   /* 手順の中に依頼文を置いたときは詰める */

/* ---------- 持ち帰り・先に言っておくこと（つまずきではない中立の箱） ---------- */
.point { border: 1px solid var(--border); border-radius: 12px; padding: var(--l); margin: var(--xl) 0; background: var(--white); }
.point__label { margin: 0 0 var(--m); font-size: 12px; font-weight: 900; letter-spacing: 0.1em; color: var(--text-dark); }
.point p, .point li, .point dd { font-size: 15px; line-height: 1.85; }
.point p:last-child, .point ul:last-child, .point ol:last-child, .point dl:last-child { margin-bottom: 0; }
.point dl { margin: 0; }
.point dt { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: var(--xs); }
.point dd { margin: 0 0 var(--m); }
.point dd:last-child { margin-bottom: 0; }

/* ---------- フロー図（PC: 横並び → モバイル: 縦積み。SVGの代わり） ---------- */
.figure--flow, .figure--compare, .figure--tree { margin: var(--xl) 0; }
.flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--l);
}
.flow--2 { --cols: 2; } .flow--3 { --cols: 3; } .flow--4 { --cols: 4; } .flow--5 { --cols: 5; }
.flow > li { margin: 0; min-width: 0; }
.flow__step { position: relative; background: var(--surface); border-radius: 12px; padding: var(--m); }
.flow__step--em { background: var(--brand); color: var(--white); }
.flow__step--em .flow__num, .flow__step--em .flow__note, .flow__step--em .flow__list { color: rgba(255, 255, 255, 0.9); }
.flow__step--em .flow__title { color: var(--white); }
.flow__num { display: block; font-size: 14px; font-weight: 900; letter-spacing: 0.08em; color: var(--brand-text); }
.flow__title { display: block; margin-top: 2px; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--text-dark); box-shadow: none; text-wrap: balance; }
.flow__note { display: block; margin-top: 2px; font-size: 14px; line-height: 1.7; color: var(--text-sub); }
.flow__list { margin: var(--s) 0 0; padding-left: 1.2em; font-size: 14px; line-height: 1.7; color: var(--text-sub); }
.flow__list li { margin-bottom: 2px; }
.flow__fork { display: grid; gap: var(--s); }
.flow__return { grid-column: 1 / -1; margin: 0; font-size: 14px; font-weight: 700; color: var(--text-sub); text-align: center; }
/* 矢印: 隣のカードとの隙間に置く。ボーダー2辺のシェブロン（画像・グラデーション不使用） */
.flow > li:not(:last-child):not(.flow__return)::after {
  content: ""; position: absolute; top: 50%; right: calc(var(--l) / -2 - 5px);
  width: 10px; height: 10px;
  border-top: 2px solid var(--brand-cta); border-right: 2px solid var(--brand-cta);
  transform: translateY(-50%) rotate(45deg);
}
.flow > li { position: relative; }
.flow--loop > li:last-child:not(.flow__return)::after,
.flow--loop > li:nth-last-child(2)::after { display: none; }

/* ---------- 対比（2〜4枚のカードを並べる。SVGの代わり） ---------- */
.compare { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: var(--m); }
.compare--1 { --cols: 1; } .compare--2 { --cols: 2; } .compare--3 { --cols: 3; } .compare--4 { --cols: 4; }
.compare__item {
  min-width: 0; border: 1px solid var(--border); border-radius: 12px; padding: var(--m);
  background: var(--white); overflow-wrap: anywhere;
}
.compare__item--em { background: var(--surface); border-color: var(--brand); }
.compare__item--muted { color: var(--text-sub); }
.compare__tag {
  display: inline-block; margin: 0 0 var(--s); padding: 2px 10px; border-radius: 100px;
  background: var(--brand); color: var(--white); font-size: 13px; font-weight: 900; letter-spacing: 0.06em;
}
.compare__item--muted .compare__tag { background: var(--text-sub); }
.compare__title { display: block; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--text-dark); box-shadow: none; text-wrap: balance; }
.compare__sub { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--brand-text); }
.compare__item p { margin: var(--s) 0 0; font-size: 14px; line-height: 1.75; }
.compare__pts { margin: var(--s) 0 0; padding-left: 1.2em; font-size: 14px; line-height: 1.7; color: var(--text-sub); }
.compare__pts li { margin-bottom: 2px; }
.compare__item img { display: block; width: 100%; height: auto; margin-top: var(--s); border: 1px solid var(--border); border-radius: 8px; background: var(--white); }
.compare__item pre { margin: var(--s) 0 0; font-size: 14px; }
/* 2枚の間に矢印 */
.compare--arrow { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); }
.compare__arrow { position: relative; min-height: 28px; }
.compare__arrow::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
  border-top: 2px solid var(--brand-cta); border-right: 2px solid var(--brand-cta);
  transform: translate(-70%, -50%) rotate(45deg);
}
/* 中心1枚＋周りに4枚（放射図の代わり） */
.compare--hub { --cols: 2; }
.compare__item--center { grid-column: 1 / -1; background: var(--brand); color: var(--white); border-color: var(--brand); text-align: center; }
.compare__item--center .compare__title, .compare__item--center p { color: var(--white); }

/* ---------- フォルダツリー（文字入りSVGの代わり） ---------- */
.tree, .tree ul { list-style: none; margin: 0; padding: 0 0 0 1.1em; }
.tree { padding-left: 0; font-family: var(--font-mono); font-size: 14px; line-height: 2; }
.tree li { position: relative; margin: 0; padding-left: 1.1em; }
.tree li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid var(--text-muted); }
.tree li::after { content: ""; position: absolute; left: 0; top: 1em; width: 0.8em; border-top: 1px solid var(--text-muted); }
.tree li:last-child::before { bottom: auto; height: 1em; }
.tree > li { padding-left: 0; }
.tree > li::before, .tree > li::after { display: none; }
.tree__dir { font-weight: 700; color: var(--text-dark); }
.tree__note { margin-left: 10px; font-family: var(--font-main); font-size: 14px; color: var(--text-sub); }
.tree strong { box-shadow: none; color: var(--brand-text); }

/* ---------- SVG（文字のない図だけ）に使う色クラス。hexを直書きしない ---------- */
.figure svg .f-brand { fill: var(--brand); }
.figure svg .f-cta { fill: var(--brand-cta); stroke: var(--brand-cta); }
.figure svg .f-surface { fill: var(--surface); }
.figure svg .f-text { fill: var(--text); }
.figure svg .f-sub { fill: var(--text-sub); }
.figure svg .f-line { stroke: var(--border); }
.figure svg .f-white { fill: var(--white); }

/* ---------- レスポンシブ（新部品） ---------- */
@media (max-width: 1023px) {
  .compare--4 { --cols: 2; }
}
@media (max-width: 767px) {
  .flow { grid-template-columns: 1fr; }
  .flow > li:not(:last-child):not(.flow__return)::after {
    top: auto; right: auto; bottom: calc(var(--l) / -2 - 5px); left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
  .compare, .compare--arrow, .compare--4 { grid-template-columns: 1fr; --cols: 1; }
  .compare__arrow::after { transform: translate(-50%, -70%) rotate(135deg); }
  .compare__item--center { grid-column: auto; }
  .steps > li { padding-left: 40px; }
  .point { padding: var(--m); }
}

/* ---------- 新部品の中の strong にはマーカーを付けない（.chapter strong より詳細度を上げる） ---------- */
.chapter .flow__title, .chapter .compare__title, .chapter .steps > li > strong,
.chapter .glpop__term, .chapter .tree strong, .chapter .compare__item--center .compare__title { box-shadow: none; }
.flow__list { list-style: disc; }
/* 5列のフロー図は隙間と文字を少し詰める（720px幅で1列あたり約130px） */
@media (min-width: 768px) {
  .flow--5 { gap: var(--m); }
  .flow--5 .flow__step { padding: 12px; }
  .flow--5 .flow__title { font-size: 14px; }
  .flow--5 > li:not(:last-child):not(.flow__return)::after { right: calc(var(--m) / -2 - 5px); }
}

/* ---------- 動きを減らす設定の人には、動きを付けない ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pbar > i, .sidebar, .secnav summary::after { transition: none; }
}