/* 中小企業のWebマーケ教科書 — 共通CSS（見本 v1） */
@font-face {
  font-family: "Noto Sans JP";
  src: local("Noto Sans JP"), url("fonts/NotoSansJP-sub.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* 色 */
  --c-ink: #1B2B4B;        /* 本文・見出し（黒は使わない） */
  --c-ink-soft: #4E5C78;   /* 補足・キャプション */
  --c-deep: #13213D;       /* 濃色の面（ホーム上部・部の扉・フッター） */
  --c-mist: #EEF2F7;       /* 淡い地色（区切り・表の見出し行） */
  --c-paper: #FFFFFF;
  --c-rule: #D5DCE7;       /* 横罫 */
  --c-cyan: #0A7EA4;       /* 強調語（文字用。白地で4.5:1以上） */
  --c-cyan-bright: #33B9E0;/* アイコン・濃色の面の上の強調 */
  --c-cyan-tint: #E3F3F9;  /* 青葉工業の例の地 */
  --c-cta: #FFC83D;        /* CTA専用 */
  --c-cta-hover: #FFB703;
  --c-on-deep: #FFFFFF;
  --c-on-deep-soft: #B9C4D8;

  /* 文字 */
  --font: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-note: 13px;
  --fs-h3: 20px;
  --fs-h2: 27px;
  --fs-h1: 44px;
  --fs-display: 64px;      /* ホームと部の扉の見出し */
  --fs-numeral: 280px;     /* 部の扉の部番号 */
  --lh-body: 1.85;
  --lh-head: 1.35;

  /* 寸法 */
  --measure: 38em;         /* 本文1行 約38字 */
  --side: 248px;
  --toc: 216px;
  --gap: 48px;
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;
  --sp-6: 104px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-paper);
  font-feature-settings: "pkna" 0;
}
h1, h2, h3, h4 { line-height: var(--lh-head); font-feature-settings: "palt"; margin: 0; }
p { margin: 0 0 1em; }
a { color: var(--c-ink); text-decoration-color: var(--c-cyan-bright); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--c-cyan); }
:focus-visible { outline: 3px solid var(--c-cyan-bright); outline-offset: 3px; }
strong, .em { color: var(--c-cyan); font-weight: 700; }
small, .note { font-size: var(--fs-note); color: var(--c-ink-soft); }
.num { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: var(--c-paper); padding: 8px 12px; z-index: 100; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- 進捗バー ---------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--c-cyan-bright); z-index: 60; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-paper);
  box-shadow: 0 1px 0 var(--c-rule);
}
.site-header__inner {
  max-width: 1280px; margin: 0 auto; padding: 14px 32px;
  display: flex; align-items: center; gap: 32px;
}
.site-name { font-weight: 800; font-size: 17px; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.site-nav { display: flex; gap: 24px; font-size: 15px; }
.site-nav a { text-decoration: none; color: var(--c-ink-soft); padding: 4px 0; }
.site-nav a[aria-current="page"], .site-nav a:hover { color: var(--c-ink); box-shadow: inset 0 -2px 0 var(--c-cyan-bright); }
.search { margin-left: auto; position: relative; }
.search input {
  font: inherit; font-size: 15px; color: var(--c-ink);
  width: 220px; padding: 7px 12px 7px 36px;
  background: var(--c-mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%230A7EA4' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") no-repeat 12px center;
  border: 0; border-radius: 6px;
}
.search__results {
  position: absolute; right: 0; top: calc(100% + 6px); width: 340px; max-height: 60vh; overflow: auto;
  background: var(--c-paper); box-shadow: 0 8px 28px rgba(19,33,61,.16); border-radius: 6px; padding: 8px 0; margin: 0; list-style: none;
}
.search__results[hidden] { display: none; }
.search__results a { display: block; padding: 8px 16px; text-decoration: none; font-size: 15px; }
.search__results a:hover, .search__results a:focus { background: var(--c-mist); }
.search__results span { display: block; font-size: var(--fs-note); color: var(--c-ink-soft); }
.menu-btn { display: none; font: inherit; font-size: 15px; color: var(--c-ink); background: var(--c-mist); border: 0; border-radius: 6px; padding: 6px 12px; }

/* ---------- パンくず ---------- */
.crumbs { font-size: var(--fs-small); color: var(--c-ink-soft); margin: 0 0 var(--sp-3); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li + li::before { content: "／"; padding: 0 8px; color: var(--c-rule); }
.crumbs a { color: var(--c-ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--c-cyan); text-decoration: underline; }

/* ---------- 濃色の面 ---------- */
.band { background: var(--c-deep); color: var(--c-on-deep); }
.band a { color: var(--c-on-deep); }
.band .crumbs, .band .crumbs a { color: var(--c-on-deep-soft); }
.band strong { color: var(--c-cyan-bright); }

/* ---------- ホーム ---------- */
.home-hero { padding: var(--sp-6) 32px var(--sp-5); }
.home-hero__inner { max-width: 1216px; margin: 0 auto; }
.home-hero h1 { font-size: var(--fs-display); font-weight: 800; letter-spacing: -.01em; max-width: 12em; }
.home-hero__lead { font-size: 19px; color: var(--c-on-deep-soft); max-width: 34em; margin: var(--sp-3) 0 0; }

.route { margin: var(--sp-5) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(8, 1fr); position: relative; }
.route::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 4px; background: var(--c-cyan-bright); }
.route li { position: relative; padding-right: 12px; }
.route a { text-decoration: none; display: block; }
.route__no {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: var(--c-deep); box-shadow: 0 0 0 4px var(--c-cyan-bright) inset;
  font-weight: 800; font-size: 20px; color: var(--c-on-deep); position: relative;
}
.route a:hover .route__no, .route a:focus .route__no { background: var(--c-cyan-bright); color: var(--c-deep); }
.route__name { display: block; margin-top: 14px; font-weight: 700; font-size: 16px; line-height: 1.4; }
.route__desc { display: block; font-size: var(--fs-note); color: var(--c-on-deep-soft); margin-top: 4px; line-height: 1.6; }
.route__now { position: absolute; left: 0; top: -30px; font-size: var(--fs-note); color: var(--c-cyan-bright); font-weight: 700; white-space: nowrap; }

.ways { max-width: 1216px; margin: 0 auto; padding: var(--sp-5) 32px; }
.ways h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.way { display: grid; grid-template-columns: 14em 1fr 18em; gap: var(--gap); padding: var(--sp-4) 0; border-top: 1px solid var(--c-rule); align-items: start; }
.way:last-child { border-bottom: 1px solid var(--c-rule); }
.way h3 { font-size: 30px; font-weight: 800; }
.way p { margin: 0; max-width: var(--measure); }
.way ul { margin: 0; padding: 0; list-style: none; font-size: 15px; }
.way li { padding: 2px 0; }

.week { background: var(--c-mist); }
.week__inner { max-width: 1216px; margin: 0 auto; padding: var(--sp-5) 32px; display: grid; grid-template-columns: 14em 1fr; gap: var(--gap); }
.week h2 { font-size: var(--fs-h2); }
.week p.note { margin-top: var(--sp-2); }

/* ---------- 部の扉 ---------- */
.door { padding: var(--sp-4) 32px var(--sp-5); overflow: hidden; }
.door__inner { max-width: 1216px; margin: 0 auto; display: grid; grid-template-columns: 1fr 440px; gap: var(--gap); align-items: end; }
.door__numeral { font-size: var(--fs-numeral); line-height: .8; font-weight: 900; color: #22365E; margin: var(--sp-3) 0 0 -10px; letter-spacing: -.04em; }
.door h1 { font-size: var(--fs-display); font-weight: 800; margin-top: -24px; }
.door__lead { font-size: 19px; color: var(--c-on-deep-soft); max-width: 30em; margin-top: var(--sp-3); }
.door__figure { margin: 0; }
.door__figure svg { width: 100%; height: auto; display: block; }
.door__figure figcaption { font-size: var(--fs-note); color: var(--c-on-deep-soft); margin-top: var(--sp-1); }

.chapters { max-width: 1216px; margin: 0 auto; padding: var(--sp-5) 32px; }
.chapters h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-2); }
.chapter-row { display: grid; grid-template-columns: 4em 1fr 22em 6em; gap: 24px; padding: 20px 0; border-top: 1px solid var(--c-rule); text-decoration: none; align-items: baseline; }
.chapter-row:last-of-type { border-bottom: 1px solid var(--c-rule); }
.chapter-row:hover { background: var(--c-mist); }
.chapter-row__no { font-weight: 800; color: var(--c-cyan); font-variant-numeric: tabular-nums; }
.chapter-row__title { font-size: 20px; font-weight: 700; }
.chapter-row__job { font-size: 15px; color: var(--c-ink-soft); }
.chapter-row__time { font-size: var(--fs-small); color: var(--c-ink-soft); text-align: right; }

/* ---------- 章ページの骨組み ---------- */
.doc { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: var(--side) minmax(0, 1fr) var(--toc); gap: 0 var(--gap); padding: 0 32px; }
.sidenav { background: var(--c-mist); margin-left: -32px; padding: var(--sp-4) 20px var(--sp-5) 32px; }
.sidenav__inner { position: sticky; top: 88px; }
.sidenav h2 { font-size: var(--fs-small); color: var(--c-ink-soft); font-weight: 700; margin: 0 0 var(--sp-1); }
.sidenav ol { margin: 0 0 var(--sp-3); padding: 0; list-style: none; font-size: 15px; line-height: 1.5; }
.sidenav li a { display: grid; grid-template-columns: 2.2em 1fr; padding: 7px 8px; text-decoration: none; border-radius: 4px; }
.sidenav li a span:first-child { color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.sidenav li a:hover { background: rgba(255,255,255,.7); }
.sidenav li a[aria-current="page"] { background: var(--c-paper); font-weight: 700; }
.sidenav li a[aria-current="page"] span:first-child { color: var(--c-cyan); }
.sidenav .back { font-size: var(--fs-small); }

.main { padding: var(--sp-4) 0 var(--sp-6); min-width: 0; }
.chapter-head { margin-bottom: var(--sp-4); }
.chapter-head__part { font-size: 15px; font-weight: 700; color: var(--c-cyan); margin: 0 0 var(--sp-1); }
.chapter-head h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.005em; max-width: 16em; }
.chapter-head__job { font-size: 19px; margin: var(--sp-3) 0 0; max-width: var(--measure); }
.chapter-head__meta { font-size: var(--fs-small); color: var(--c-ink-soft); margin-top: var(--sp-1); }

.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--fs-h2); font-weight: 800; margin: var(--sp-6) 0 var(--sp-2); padding-top: var(--sp-3); box-shadow: 0 -1px 0 var(--c-rule); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-h3); font-weight: 700; margin: var(--sp-4) 0 var(--sp-1); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin: 2px 0; }
.prose li::marker { color: var(--c-cyan-bright); }
.lead { font-size: 19px; }

/* 表：横罫だけ */
.table-wrap { overflow-x: auto; margin: var(--sp-3) 0 var(--sp-4); max-width: 46em; }
table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.7; }
caption { text-align: left; font-size: var(--fs-small); color: var(--c-ink-soft); padding-bottom: var(--sp-1); }
th, td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--c-rule); }
thead th { background: var(--c-mist); font-size: 15px; font-weight: 700; padding: 10px 16px; border-bottom: 0; }
thead th:first-child { padding-left: 12px; }
tbody th { font-weight: 700; padding-left: 12px; white-space: nowrap; }
td.num, th.num { text-align: right; }

/* 注記：ラベルは本文列の中、文の上に小さく置く。
   以前は左へぶら下げていたが、3段組みでは余白が足りずサイドナビに重なるためやめた。 */
.note-block { position: relative; margin: var(--sp-4) 0; font-weight: 500; font-size: 18px; line-height: 1.75; }
.note-block__label { display: block; font-size: var(--fs-small); font-weight: 700; color: var(--c-cyan); margin: 0 0 6px; line-height: 1.4; }
.note-block p:last-child { margin: 0; }

/* 定義 */
.defs { margin: var(--sp-3) 0 var(--sp-4); display: grid; grid-template-columns: 5em 1fr; gap: 10px 24px; }
.defs dt { font-weight: 800; font-size: 19px; line-height: 1.6; }
.defs dd { margin: 0; }
.defs dd .not { color: var(--c-ink-soft); }

/* 悪い例・良い例 */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: var(--sp-4) 0; max-width: 46em; }
.compare > div { padding: 20px 24px; }
.compare__bad { background: var(--c-mist); }
.compare__good { background: var(--c-deep); color: var(--c-on-deep); }
.compare h4 { font-size: var(--fs-small); margin-bottom: 6px; }
.compare__good h4 { color: var(--c-cyan-bright); }
.compare p { margin: 0; }

/* 青葉工業の例 */
.aoba { background: var(--c-cyan-tint); margin: var(--sp-4) 0; padding: 24px 28px 24px 84px; position: relative; max-width: 46em; }
.aoba::before {
  content: ""; position: absolute; left: 28px; top: 28px; width: 36px; height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%230A7EA4' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M4 18L18 6l14 12'/%3E%3Cpath d='M8 15v16h20V15'/%3E%3Cpath d='M22 12c2 3 3 6 0 9'/%3E%3C/svg%3E") no-repeat center / contain;
}
.aoba__label { font-size: var(--fs-small); font-weight: 700; color: var(--c-cyan); margin: 0 0 4px; }
.aoba p:last-child { margin: 0; }

/* チェックリスト */
.checks { margin: var(--sp-5) 0 var(--sp-4); max-width: var(--measure); }
.checks h2 { box-shadow: none; padding-top: 0; margin-top: 0; }
.checks ul { list-style: none; padding: 0; margin: var(--sp-2) 0 0; }
.checks li { border-top: 1px solid var(--c-rule); }
.checks li:last-child { border-bottom: 1px solid var(--c-rule); }
.checks label { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 14px 0; cursor: pointer; }
.checks input { appearance: none; width: 22px; height: 22px; margin: 5px 0 0; background: var(--c-mist); border-radius: 3px; display: grid; place-items: center; cursor: pointer; }
.checks input:checked { background: var(--c-cyan); }
.checks input:checked::after { content: ""; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg); }
.checks input:checked + span { color: var(--c-ink-soft); }
.checks__count { font-size: var(--fs-small); color: var(--c-ink-soft); }

/* 起きやすい失敗 */
.pitfalls { margin: var(--sp-4) 0; max-width: var(--measure); font-size: 16px; }
.pitfalls h2 { font-size: var(--fs-h3); box-shadow: none; padding: 0; margin: 0 0 var(--sp-1); }
.pitfalls ul { padding-left: 1.2em; }

/* 出典 */
.sources { margin-top: var(--sp-5); padding-top: var(--sp-3); box-shadow: 0 -1px 0 var(--c-rule); max-width: 46em; font-size: var(--fs-small); color: var(--c-ink-soft); }
.sources h2 { font-size: 15px; color: var(--c-ink); margin-bottom: var(--sp-1); }
.sources ol { padding-left: 1.4em; margin: 0; }
.sources li { margin: 4px 0; }

/* 前後の章 */
.pager { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: var(--sp-5); max-width: var(--measure); flex-wrap: wrap; }
.pager__prev { font-size: 15px; text-decoration: none; color: var(--c-ink-soft); }
.pager__prev span, .btn span { display: block; font-size: var(--fs-note); }
.pager__prev b { color: var(--c-ink); }
.btn {
  display: inline-block; background: var(--c-cta); color: var(--c-deep); font-weight: 800;
  text-decoration: none; padding: 12px 24px; border-radius: 6px; line-height: 1.4;
}
.btn:hover { background: var(--c-cta-hover); color: var(--c-deep); }
.btn span { font-weight: 500; }

/* ページ内目次 */
.toc { padding: var(--sp-4) 0; }
.toc__inner { position: sticky; top: 104px; font-size: var(--fs-small); }
.toc h2 { font-size: var(--fs-small); color: var(--c-ink-soft); margin-bottom: var(--sp-1); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a { display: block; padding: 6px 0 6px 14px; text-decoration: none; color: var(--c-ink-soft); box-shadow: inset 2px 0 0 var(--c-rule); line-height: 1.5; }
.toc a.is-active, .toc a:hover { color: var(--c-ink); box-shadow: inset 3px 0 0 var(--c-cyan-bright); }
.toc details summary { display: none; }

/* ---------- 汎用のページ頭（索引・道具箱・用語集） ---------- */
.page-head { padding: var(--sp-5) 32px var(--sp-4); }
.page-head__inner { max-width: 1216px; margin: 0 auto; }
.page-head h1 { font-size: 52px; font-weight: 800; }
.page-head p { font-size: 19px; color: var(--c-on-deep-soft); max-width: 34em; margin: var(--sp-2) 0 0; }
.wide { max-width: 1216px; margin: 0 auto; padding: var(--sp-5) 32px var(--sp-6); }

/* 困りごと索引：アコーディオン（JSなしでも <details> で開閉できる） */
.acc-toolbar {
  display: flex; justify-content: flex-end; align-items: baseline; flex-wrap: wrap;
  margin: 0 0 var(--sp-2); font-size: var(--fs-small);
}
.acc-toolbar[hidden] { display: none; }
.acc-toolbar button {
  font: inherit; font-size: var(--fs-small); color: var(--c-ink-soft);
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--c-cyan-bright);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.acc-toolbar button:hover { color: var(--c-cyan); }
.acc-toolbar__sep { color: var(--c-rule); padding: 0 8px; }

.problem { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--c-rule); }
.problem:last-of-type { border-bottom: 1px solid var(--c-rule); }
.problem summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 1.5em; align-items: start; gap: 12px;
  padding: var(--sp-4) 0; cursor: pointer; list-style: none;
}
.problem summary::-webkit-details-marker,
.problem summary::marker { display: none; content: none; }
.problem h2 { font-size: 30px; font-weight: 800; }
.problem__sign { font-size: 15px; color: var(--c-ink-soft); margin: var(--sp-1) 0 0; }
.problem summary::after {
  content: ""; width: 8px; height: 8px; margin-top: 14px; justify-self: center;
  border-right: 2px solid var(--c-cyan); border-bottom: 2px solid var(--c-cyan);
  transform: rotate(45deg); transition: transform .2s ease;
}
.problem[open] summary::after { transform: rotate(225deg); margin-top: 18px; }
.problem[open] { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); align-items: start; }
.problem ol { margin: 0; padding: var(--sp-4) 0; list-style: none; counter-reset: s; }
.problem li { counter-increment: s; display: grid; grid-template-columns: 2em 1fr; padding: 6px 0; }
.problem li::before { content: counter(s); font-weight: 800; color: var(--c-cyan); font-variant-numeric: tabular-nums; }
.problem li a { font-weight: 700; }
.problem li small { display: block; }

/* 道具箱 */
.toolgroup { display: grid; grid-template-columns: 14em 1fr; gap: var(--gap); padding: var(--sp-4) 0; border-top: 1px solid var(--c-rule); }
.toolgroup h2 { font-size: 26px; font-weight: 800; }
.toolgroup > div > p { margin: 0 0 var(--sp-2); color: var(--c-ink-soft); font-size: 15px; }
.toolgroup table td:first-child { width: 15em; font-weight: 700; }
.toolgroup .tool-icon { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-right: 8px; }
.library { background: var(--c-mist); margin-top: var(--sp-4); padding: var(--sp-4) 40px; display: grid; grid-template-columns: 1fr auto; gap: var(--gap); align-items: center; }
.library h2 { font-size: 26px; font-weight: 800; }
.library p { margin: 6px 0 0; max-width: 36em; }

/* 用語集 */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.filters button { font: inherit; font-size: 15px; color: var(--c-ink); background: var(--c-mist); border: 0; border-radius: 6px; padding: 6px 16px; cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--c-deep); color: var(--c-on-deep); }
.term { display: grid; grid-template-columns: 15em minmax(0, 1fr) 13em; gap: var(--gap); padding: var(--sp-3) 0; border-top: 1px solid var(--c-rule); }
.term[hidden] { display: none; }
.term h2 { font-size: 22px; font-weight: 800; }
.term__alt { font-size: var(--fs-small); color: var(--c-ink-soft); margin-top: 2px; }
.term__def p { margin: 0 0 6px; max-width: var(--measure); }
.term__rule { font-size: 15px; background: var(--c-cyan-tint); padding: 8px 14px; margin-top: 8px; max-width: var(--measure); }
.term__rule b { color: var(--c-cyan); }
.term__see { font-size: var(--fs-small); }
.term__see span { display: block; color: var(--c-ink-soft); }
.term__cat { font-size: var(--fs-note); color: var(--c-ink-soft); }

/* ---------- フッター ---------- */
.site-footer { background: var(--c-deep); color: var(--c-on-deep-soft); font-size: var(--fs-small); }
.site-footer__inner { max-width: 1280px; margin: 0 auto; padding: var(--sp-4) 32px; display: flex; gap: 32px; flex-wrap: wrap; justify-content: space-between; }
.site-footer a { color: var(--c-on-deep); }

/* ---------- （Web担当追記：別サイト用のサブテーマは、教科書の版では外した。見本の site.css には残っている） ---------- */

/* ---------- レスポンシブ ---------- */
@media (max-width: 1180px) {
  .doc { grid-template-columns: var(--side) minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 900px) {
  :root { --fs-display: 42px; --fs-h1: 32px; --fs-h2: 23px; --fs-numeral: 150px; --gap: 24px; --sp-6: 72px; }
  .site-header__inner { padding: 10px 16px; gap: 12px; flex-wrap: wrap; }
  .site-nav { order: 3; width: 100%; overflow-x: auto; gap: 18px; font-size: 14px; white-space: nowrap; display: none; }
  .site-nav.is-open { display: flex; }
  .menu-btn { display: block; margin-left: auto; }
  .search { order: 4; margin-left: 0; width: 100%; }
  .search input { width: 100%; }
  .search__results { width: 100%; }
  .doc { display: block; padding: 0 20px; }
  .sidenav { margin: 0 -20px; padding: 16px 20px; }
  .sidenav__inner { position: static; }
  .sidenav details summary { cursor: pointer; font-weight: 700; font-size: 15px; }
  .home-hero, .door, .page-head { padding-left: 20px; padding-right: 20px; }
  .home-hero { padding-top: var(--sp-5); }
  .route { grid-template-columns: 1fr; gap: 0; }
  .route::before { left: 23px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; }
  .route li { display: grid; grid-template-columns: 50px 1fr; gap: 16px; padding: 10px 0; }
  .route a { display: contents; }
  .route__name { margin-top: 4px; }
  .route__now { position: static; grid-column: 2; }
  .ways, .chapters, .wide { padding-left: 20px; padding-right: 20px; }
  .way, .week__inner, .toolgroup { grid-template-columns: 1fr; gap: 12px; }
  .problem[open] { grid-template-columns: minmax(0, 1fr); }
  .problem[open] ol { padding: 0 0 var(--sp-4); }
  .problem h2 { font-size: 24px; }
  .problem summary::after { margin-top: 10px; }
  .problem[open] summary::after { margin-top: 14px; }
  .way h3 { font-size: 24px; }
  .week__inner { padding-left: 20px; padding-right: 20px; }
  .door__inner { grid-template-columns: 1fr; }
  .door h1 { margin-top: -12px; }
  .chapter-row { grid-template-columns: 3em 1fr; gap: 4px 12px; }
  .chapter-row__job { grid-column: 2; }
  .chapter-row__time { grid-column: 2; text-align: left; }
  .compare { grid-template-columns: 1fr; }
  .aoba { padding: 20px 20px 20px 68px; }
  .aoba::before { left: 18px; top: 22px; width: 32px; height: 32px; }
  .defs { grid-template-columns: 1fr; gap: 0; }
  .defs dd { margin-bottom: 12px; }
  .term { grid-template-columns: 1fr; gap: 8px; }
  .page-head h1 { font-size: 36px; }
  .library { grid-template-columns: 1fr; padding: 24px 20px; }
  .toolgroup table td:first-child { width: auto; }
  th, td { padding-right: 10px; }
  tbody th { white-space: normal; }
}
@media print {
  .site-header, .sidenav, .toc, .progress, .pager, .site-footer, .search { display: none !important; }
  .doc { display: block; }
  body { font-size: 11pt; }
  .band { background: none; color: var(--c-ink); }
}

/* サイドナビ：PCでは見出し、スマホでは開閉 */
.sidenav summary { display: none; }
@media (max-width: 900px) {
  .sidenav summary { display: block; }
  .sidenav details:not([open]) h2 { display: none; }
  .sidenav details > h2 { margin-top: 12px; }
}

/* ホームの調整 */
.home-hero h1 { font-size: 84px; line-height: 1.15; max-width: none; letter-spacing: -.02em; }
.week .table-wrap { max-width: none; margin-top: 0; }
.week thead th { background: var(--c-paper); }
.week td:last-child { width: 11em; color: var(--c-ink-soft); }
@media (max-width: 900px) { .home-hero h1 { font-size: 44px; } }

/* 表の左端をそろえる */
thead th { padding: 10px 16px 10px 0; }
th:first-child, td:first-child { padding-left: 12px; }
/* 扉の数字をもう一段はっきり */
.door__numeral { font-size: var(--fs-numeral); color: #2C477A; margin-top: 0; }
.door h1 { margin-top: -64px; position: relative; }
@media (max-width: 900px) { .door__numeral { font-size: 160px; } .door h1 { margin-top: -36px; } }

/* 道具箱の表：狭い幅で道具名を詰めすぎない */
.toolgroup td:first-child { width: 9.5em; }
.toolgroup td:first-child a { white-space: nowrap; }
.toolgroup td:nth-child(2) { white-space: nowrap; }
@media (max-width: 600px) {
  .toolgroup thead { display: none; }
  .toolgroup tr { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--c-rule); padding: 12px 0; }
  .toolgroup td { border: 0; padding: 0 0 0 12px; width: auto; }
  .toolgroup td:nth-child(2) { color: var(--c-ink-soft); font-size: 15px; padding-right: 12px; }
  .toolgroup td:nth-child(3) { grid-column: 1 / -1; font-size: 15px; color: var(--c-ink-soft); margin-top: 4px; }
}
@media (max-width: 600px) {
  .toolgroup td:nth-child(2), .toolgroup td:first-child a { white-space: normal; }
  .toolgroup td:nth-child(2) { text-align: right; max-width: 9em; }
}

/* ===== Web担当追記（2026-11-11）：Astro 版で足したもの。見本の値はそのまま、足りない部品だけ ===== */
.prose blockquote { margin: var(--sp-3) 0; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--c-cyan-bright); color: var(--c-ink); background: rgba(51, 185, 224, .06); }
.prose blockquote p { margin: 0; }
.chapter-tools { margin-top: var(--sp-4); }
.chapter-tools a { margin-right: 1em; }
.toc-list .chapters { padding-left: 0; padding-right: 0; }
.stub-note { margin: var(--sp-3) 0; }
@media print {
  .prose, .checks, .pitfalls, .sources { max-width: none; }
  .table-wrap { overflow: visible; }
  table { page-break-inside: auto; }
  tr, .note-block, .aoba, .compare, .checks li { page-break-inside: avoid; }
  .prose h2, .prose h3 { page-break-after: avoid; }
  .sources a[href^="http"]::after { content: "（" attr(href) "）"; font-size: .85em; word-break: break-all; }
  .checks input { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Web担当追記：出典の長いURLを、狭い幅で列の中に折り返す */
.sources a, .changes a { overflow-wrap: anywhere; }
.changes { padding-left: 1.3em; max-width: 46em; }
.changes > li { margin: 0 0 var(--sp-3); }
.changes h4 { font-size: var(--fs-h3); margin: 0 0 var(--sp-1); }
/* Web担当追記（部3）：コード例（robots.txt・head の修正案）。見本に無い部品。本文列の中で折り返し、横にはみ出さない */
main pre { margin: 1.25em 0; padding: 14px 16px; background: var(--c-mist); border-left: 3px solid var(--c-cyan-bright); color: var(--c-ink); font-size: 0.875rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
main pre code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; background: none; padding: 0; }

/* 表の行見出しが390pxで1字ずつ折れないように（Web担当の実装から取り込み 2026-11-11） */
.table-wrap tbody th[scope="row"] { min-width: calc(5em + 22px); } /* 5字まで1行（左右の余白22px分を足す） */

/* 列が多い表（列の見出しが5つ以上）は、600px以下で週ごとの縦並びにする（2026-11-11 デザイン担当）
   実装：ビルド時に該当の .table-wrap に .table-wrap--stack を付け、各 td に data-label="列の見出し" を入れる */
@media (max-width: 600px) {
  .table-wrap--stack table, .table-wrap--stack tbody, .table-wrap--stack tr,
  .table-wrap--stack th, .table-wrap--stack td { display: block; width: auto; min-width: 0; }
  .table-wrap--stack caption { display: block; width: auto; text-align: left; }
  .table-wrap--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-wrap--stack tbody tr { padding: 12px 0; border-bottom: 1px solid #DCE3EC; }
  .table-wrap--stack tbody th[scope="row"] { padding: 0 0 6px; font-weight: 700; }
  .table-wrap--stack td { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 3px 0; border: 0; }
  .table-wrap--stack td::before { content: attr(data-label); color: #5A6B85; font-size: 0.9em; }
}

/* 長い文が入る列は、縦並びのとき列名を上に置いて全幅で読ませる（2026-11-11 デザイン担当・L802用）
   実装：ビルド時に、40字以上のセルがある表にも .table-wrap--stack を付け、その td に .is-long を付ける */
@media (max-width: 600px) {
  .table-wrap--stack td.is-long { display: block; padding-top: 6px; }
  .table-wrap--stack td.is-long::before { display: block; margin-bottom: 2px; }
}

/* トップ「今週の表」：縦並びのとき最後の列の固定幅を外す（Web担当の実装から取り込み 2026-11-11） */
@media (max-width: 600px) { .week .table-wrap--stack td:last-child { width: auto; } }
/* 記入シート集（T01）の印刷：1シート1枚、手で書ける行の高さ（Web担当の実装から取り込み・デザイン担当確認済み 2026-11-11） */
@media print {
  @page { size: A4 portrait; margin: 14mm 12mm; }
  .main[data-print="sheets"] .prose > h2:not(#how) { break-before: page; margin-top: 0; }
  .main[data-print="sheets"] .prose > h2 + p { break-after: avoid; }
  .main[data-print="sheets"] .table-wrap { max-width: none; overflow: visible; }
  .main[data-print="sheets"] .prose > h2:not(#how) ~ .table-wrap { break-inside: avoid; }
  .main[data-print="sheets"] table { width: 100%; }
  .main[data-print="sheets"] th, .main[data-print="sheets"] td { padding-top: 1.5mm; padding-bottom: 1.5mm; }
  .main[data-print="sheets"] .prose > h2:not(#how) ~ .table-wrap tbody tr { height: 10mm; }
  .main[data-print="sheets"] .prose > p { margin: 0 0 2mm; }
  .main[data-print="sheets"] .table-wrap { margin: 2mm 0 3mm; }
  /* 「使い方」の一覧の表は画面用（紙ではシートが1枚ずつ続く） */
  .main[data-print="sheets"] .prose > h2#how ~ .table-wrap:not(.prose > h2:not(#how) ~ .table-wrap) { display: none; }
  .main[data-print="sheets"] .checks, .main[data-print="sheets"] .pitfalls { display: none; }
  .main[data-print="sheets"] a { color: inherit; text-decoration: none; }
}
/* 記入用のページ（T01〜T04）：記入欄（td.is-blank）の列に書く幅を取る。質問が長い表で答えの列がつぶれないように。行見出しの折り返しも（Web担当の実装から取り込み・デザイン担当確認済み 2026-11-11） */
@media (min-width: 601px), print {
  .main[data-print="sheets"] tbody th { white-space: normal; } /* 質問が長い行見出しは折り返す（1行のままだと表が本文の幅を超える） */
  .main[data-print="sheets"] tr > td.is-blank:nth-child(2):last-child { width: 35%; }
  .main[data-print="sheets"] tr > td.is-blank:nth-child(2):nth-last-child(2) { width: 30%; }
  .main[data-print="sheets"] tr > td.is-blank:nth-child(3):last-child { width: 30%; }
}

/* 記入用のページの印刷：出典は前の紙に寄せる（§15。小さめの文字は 8pt。eaf8879 から取り込み・デザイン担当確認済み 2026-11-11） */
@media print {
  .main[data-print="sheets"] .sources { break-before: avoid; font-size: 8pt; margin-top: 3mm; padding-top: 2mm; }
  .main[data-print="sheets"] .sources h2 { font-size: 9pt; }
}

/* 飛び先リンク（用語集・T05）と本文の中に置いたチェック（e4c5671 から取り込み・デザイン担当確認済み 2026-11-11） */
.jump-links { display: flex; flex-wrap: wrap; gap: 0.25em 1em; margin: var(--sp-2) 0 var(--sp-3); }
.jump-links a { white-space: nowrap; }
.checks[data-inline] { margin-top: var(--sp-3); }
.prose > p + .checks[data-inline] { margin-top: 0; }
.checks[data-inline] .checks__count { margin-top: 0; }

/* 資料室（T09）とファイルの一覧（3bf4e42 から取り込み・デザイン担当確認済み 2026-11-11） */
.library-page > .library { margin-bottom: var(--sp-5); }
.library-page [data-size] { white-space: nowrap; }
.lib-books__item { display: block; }
.lib-books__label { white-space: nowrap; }
.prose .file-links { list-style: none; margin: 0 0 1em; padding: 0; }
.file-links__label { white-space: nowrap; }
@media (max-width: 600px) {
  .library-page td [data-size] { display: block; }
}

/* 後から足した日付つきの注記（週次トピックス。746b664 から取り込み・名前は .note-block--dated・デザイン担当確認済み 2026-11-11） */
.note-block--dated { background: var(--c-mist); padding: var(--sp-2); border: 0; font-weight: 400; }
.note-block--dated > :last-child { margin-bottom: 0; }