/* =========================================================
   イナプリ 応用物理 解答解説  共通スタイル
   ========================================================= */
:root {
  --bg: #f6f5f1;
  --paper: #ffffff;
  --ink: #1d1d1f;
  --muted: #6b6b70;
  --line: #dcdad3;
  --soft: #efede6;
  --accent: #1f5fae;        /* 見出し・リンク */
  --accent-soft: #e6eef8;
  --ans: #d6362b;           /* 解答で描き込む力（赤） */
  --ans-soft: #fdecea;
  --axis: #1f6fd1;          /* 座標軸（青） */
  --gray-force: #b3b3b3;    /* プリントの灰色の力矢印 */
  --smooth: #dedede;        /* なめらかな面の帯 */
  --ok: #2b8a3e;
  --radius: 12px;
  --shadow: 0 1px 2px rgb(0 0 0 / .05), 0 4px 14px rgb(0 0 0 / .05);
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic", Meiryo, system-ui, sans-serif;
  /* 数式フォント：解説の数式（KaTeX）と同じフォントを図・見出しでも使う */
  --serif: "KaTeX_Main", "Times New Roman", serif;                  /* 立体（数字・sin・cos・記号） */
  --math: "KaTeX_Math", "KaTeX_Main", "Times New Roman", serif;   /* 斜体（変数） */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17181b; --paper: #202226; --ink: #ececec; --muted: #a2a3a8; --line: #3a3c42; --soft: #2a2c31;
    --accent: #7fb0ec; --accent-soft: #24344a; --ans: #ff7a6e; --ans-soft: #3d2523; --axis: #6fa8f0;
    --gray-force: #8a8a8a; --smooth: #4a4a4a; --ok: #6cc77f; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17181b; --paper: #202226; --ink: #ececec; --muted: #a2a3a8; --line: #3a3c42; --soft: #2a2c31;
  --accent: #7fb0ec; --accent-soft: #24344a; --ans: #ff7a6e; --ans-soft: #3d2523; --axis: #6fa8f0;
  --gray-force: #8a8a8a; --smooth: #4a4a4a; --ok: #6cc77f; color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr, 60px) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); line-height: 1.8; font-size: 16px;
}
a { color: var(--accent); }
.m, var { font-family: var(--math); font-style: italic; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.site-header .inner {
  max-width: 1160px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
}
.brand { font-weight: 700; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.brand .dot { width: 14px; height: 14px; border-radius: 50%; background: #00b050; }
.brand small { font-weight: 400; color: var(--muted); }
.tools { display: flex; gap: 8px; flex-wrap: wrap; }
.btn {
  font: inherit; font-size: .85rem; cursor: pointer; border-radius: 999px;
  padding: 5px 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn[aria-pressed="true"] { background: var(--ans-soft); border-color: var(--ans); color: var(--ans); }

/* ---------- レイアウト ---------- */
.layout { max-width: 1160px; margin: 0 auto; padding: 20px 16px 80px; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; }
.toc { position: sticky; top: calc(var(--hdr, 60px) + 16px); align-self: start; font-size: .9rem; }
.toc-back { display: inline-block; margin: 0 0 14px; color: var(--accent); text-decoration: none; font-size: .85rem; }
.toc-back:hover { text-decoration: underline; }
.toc-title { font-weight: 700; font-size: 1rem; margin: 0 0 8px; color: var(--ink); }
.toc p { margin: 0 0 6px; font-weight: 700; color: var(--muted); font-size: .8rem; letter-spacing: .08em; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc a { display: block; padding: 4px 12px; color: var(--muted); text-decoration: none; margin-left: -2px; border-left: 2px solid transparent; }
.toc a:hover { color: var(--ink); }
.toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 700; }
main { min-width: 0; }
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* スマホ・タブレット：目次をヘッダーの下に固定した横並びのボタンにする（スクロールしても見える） */
  .toc {
    position: sticky; top: var(--hdr, 60px); z-index: 40; display: flex; align-items: center; gap: 8px;
    background: var(--bg); margin: -20px -16px 0; padding: 8px 16px; border-bottom: 1px solid var(--line);
  }
  .toc p, .toc-title { display: none; }
  .toc a { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; margin: 0; background: var(--paper); }
  .toc a.active { border-color: var(--accent); }
  .toc a.toc-back { margin: 0; flex: none; white-space: nowrap; font-size: .8rem; border: 0; background: none; padding: 3px 2px; color: var(--accent); font-weight: 700; }
  .toc ol { display: flex; gap: 6px; overflow-x: auto; border: 0; padding-bottom: 2px; scrollbar-width: none; }
  .toc ol::-webkit-scrollbar { display: none; }
  .hero { margin-top: 8px; }
}
@media (max-width: 560px) {
  .site-header .inner { padding: 8px 12px; gap: 8px; }
  .brand { font-size: .9rem; white-space: nowrap; }
  .brand small { display: none; }
  .tools { flex-wrap: nowrap; gap: 6px; }
  .tools .btn { font-size: .75rem; padding: 4px 10px; white-space: nowrap; }
}

/* ---------- タイトル ---------- */
.hero { margin: 4px 0 22px; }
.hero .kicker { color: var(--muted); font-size: .85rem; }
.hero h1 { margin: 2px 0 6px; font-size: clamp(1.6rem, 4vw, 2.2rem); display: flex; align-items: center; gap: 12px; }
.hero h1::before { content: ""; width: .9em; height: .9em; border-radius: 50%; background: var(--unit-dot, #00b050); flex: none; }
.hero p { margin: 0; color: var(--muted); }

/* ---------- カード ---------- */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 28px;
}
@media (max-width: 560px) { .card { padding: 16px 14px; } }
.card > h2 { margin: 0 0 10px; font-size: 1.3rem; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.card > h2 .tag { font-size: .75rem; font-weight: 700; color: #fff; background: var(--ink); padding: 1px 10px; border-radius: 4px; }
.card > h2 .tag.practice { background: var(--accent); }
.card > h2 .sub { font-size: .9rem; color: var(--muted); font-weight: 400; }
.statement { margin: 0 0 12px; text-indent: 1em; }
.statement.noindent { text-indent: 0; }
ol.qs { margin: 6px 0 12px; padding-left: 0; list-style: none; counter-reset: q; }
ol.qs > li { counter-increment: q; padding-left: 2.2em; position: relative; margin: 2px 0; }
ol.qs > li::before { content: "(" counter(q) ")"; position: absolute; left: 0; }

/* 小問ブロック（例題①など） */
.sub-q { border-top: 1px dashed var(--line); padding-top: 16px; margin-top: 16px; }
.sub-q:first-of-type { border-top: 0; margin-top: 4px; padding-top: 4px; }
.sub-q h3 { font-size: 1rem; margin: 0 0 8px; font-weight: 700; }

/* 図 */
.fig-row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin: 6px 0 10px; }
.fig-row > * { min-width: 0; }
.figure { position: relative; flex: 1 1 300px; max-width: 460px; }
.figure.wide { max-width: 640px; flex-basis: 100%; }
.figure.small { max-width: 260px; flex-basis: 200px; }
.figure svg { width: 100%; height: auto; display: block; }
.fig-toggle { position: absolute; right: 0; top: 0; font-size: .75rem; padding: 2px 10px; }
.figure > b:first-child { display: block; font-size: .92rem; line-height: 1.4; margin-bottom: 4px; }
.figure.has-toggle > b:first-child { padding-top: 26px; }
figcaption { font-size: .8rem; color: var(--muted); text-align: center; }

/* 解答欄（プリントの枠） */
.answer-box { flex: 1 1 220px; max-width: 320px; border: 1.5px solid var(--ink); border-radius: 2px; font-size: .95rem; }
.answer-box > div { padding: 4px 10px 8px; min-height: 64px; }
.answer-box > div + div { border-top: 1.5px solid var(--ink); }
.answer-box .label { display: block; font-size: .75rem; font-weight: 700; }
.answer-box .val { display: block; text-align: center; font-size: 1.15rem; }
.answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1.5px solid var(--ink); margin: 12px 0; }
.answer-grid > div { padding: 6px 12px 10px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); min-height: 70px; min-width: 0; }
.answer-grid > div:nth-child(2n) { border-right: 0; }
.answer-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.answer-grid > div.full { grid-column: 1 / -1; border-right: 0; }
.answer-grid .label { font-size: .8rem; display: block; }
.answer-grid .val { display: block; text-align: center; font-size: 1.1rem; overflow-x: auto; overflow-y: hidden; }
.answer-grid.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.answer-grid.cols3 > div { border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.answer-grid.cols3 > div:nth-child(3n) { border-right: 0; }
.answer-grid.cols3 > div:nth-last-child(-n+3) { border-bottom: 0; }
.answer-grid.cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.answer-grid.cols4 > div { border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.answer-grid.cols4 > div:nth-child(4n) { border-right: 0; }
.answer-grid.cols4 > div:nth-last-child(-n+4) { border-bottom: 0; }
.data-table { border-collapse: collapse; margin: 8px 0 12px; font-size: .95rem; }
.data-table th, .data-table td { border: 1px solid var(--ink); padding: 3px 14px; text-align: center; white-space: nowrap; }
.data-table th { background: #cdeffd; color: #111; font-weight: 700; font-size: .85rem; }
@media (max-width: 560px) {
  .answer-grid, .answer-grid.cols3, .answer-grid.cols4 { grid-template-columns: minmax(0, 1fr); }
  .answer-grid > div { border-right: 0 !important; border-bottom: 1.5px solid var(--ink) !important; }
  .answer-grid > div:last-child { border-bottom: 0 !important; }
}
/* 答えを隠す（クリックで表示） */
.hide-ans .val { filter: blur(7px); cursor: pointer; user-select: none; transition: filter .2s; }
.hide-ans .val.shown { filter: none; }
.reveal-note { font-size: .75rem; color: var(--muted); margin: -6px 0 8px; }

/* 解説（アコーディオン） */
details.sol { margin: 10px 0 0; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
details.sol > summary {
  cursor: pointer; list-style: none; padding: 8px 14px; font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; gap: 8px; color: var(--accent);
}
details.sol > summary::-webkit-details-marker { display: none; }
details.sol > summary::before { content: "▶"; font-size: .7em; transition: transform .2s; }
details.sol[open] > summary::before { transform: rotate(90deg); }
details.sol > .body { padding: 2px 16px 14px; background: var(--paper); border-radius: 0 0 10px 10px; border-top: 1px solid var(--line); }
.body h4 { margin: 14px 0 4px; font-size: .95rem; }
.body h4 .n { display: inline-block; min-width: 2.2em; }
.body p { margin: 6px 0; }
.body ul { margin: 6px 0; padding-left: 1.4em; }
/* インデント：小問番号の見出し(h4)より解説の文章を一段下げ，別行の数式は文章よりさらに一段下げて左寄せ */
.body { --indent: 1.2em; }
.body:has(> h4) > :not(h4) { margin-left: var(--indent); }
.body span:has(> .katex-display) { display: block; }  /* KaTeX の自動描画が別行数式を包む span */
.body .katex-display { margin-left: var(--indent); }
.body .katex-display > .katex { text-align: left; }

/* 軸わけ（y軸・x軸の式） */
.axis-eq { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; margin: 8px 0; }
.axis-eq .ax {
  font-family: var(--math); font-style: italic; font-weight: 700; border: 1.5px solid var(--ink);
  min-width: 1.6em; height: 1.6em; padding: 0 .2em; display: grid; place-items: center; line-height: 1; border-radius: 2px; white-space: nowrap;
}
.axis-eq .eq { overflow-x: auto; overflow-y: hidden; }

.final { background: var(--ans-soft); border-left: 4px solid var(--ans); padding: 6px 12px; margin: 8px 0; border-radius: 0 6px 6px 0; overflow-x: auto; overflow-y: hidden; }
.final b { color: var(--ans); }
.note { background: var(--accent-soft); border-radius: 8px; padding: 8px 12px; margin: 10px 0; font-size: .92rem; }
.note b:first-child { color: var(--accent); }
.katex-display { margin: .5em 0; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
/* スマホ用の改行版（main.js が，元の版がはみ出すときだけ表示する） */
.eqwrap .eq-narrow { display: none; }
.eqwrap.use-narrow .eq-wide { display: none; }
.eqwrap.use-narrow .eq-narrow { display: block; }

/* ---------- ポイント（プリント冒頭の枠） ---------- */
.point-box { border: 6px solid #fcc; border-radius: 16px; padding: 14px 18px; }
.kinetic-box { border: 6px solid #ff6; border-radius: 16px; padding: 12px 18px; margin-top: 22px; }
.kinetic-box > p:first-child { margin-top: 0; }
.bullet-h { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 22px 0 8px; }
.bullet-h::before { content: ""; width: .8em; height: .8em; border-radius: 50%; background: var(--unit-dot, #00b050); flex: none; }
.point-box .lead { font-weight: 700; margin: 0; }
.big-eq { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; justify-content: center; }
.big-eq .fma { font-family: var(--math); font-style: italic; font-weight: 700; font-size: clamp(3rem, 9vw, 4.4rem); line-height: 1; letter-spacing: .02em; }
.big-eq .units { display: grid; grid-template-columns: repeat(3, auto); gap: 0 28px; font-size: .8rem; font-weight: 700; text-align: center; margin-top: 6px; }
.senryu { text-align: center; font-weight: 800; font-size: clamp(1.2rem, 4vw, 1.7rem); letter-spacing: .08em; margin: 10px 0 0; }
.senryu small { display: block; font-size: .7rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.senryu .k { font-size: 1.3em; }

.acc-icon svg.fig { display: inline-block; width: 2.6em; height: auto; vertical-align: -0.25em; }

/* プリントの黄色い公式枠・穴埋めの答え */
.yellow-box { border: 5px solid #ff0; padding: 10px 16px; margin: 10px 0; }
.fill { color: var(--ans); font-weight: 700; border-bottom: 1.5px solid var(--ans); padding: 0 .3em; }
.fill-list { margin: 6px 0; padding-left: 1.4em; }
.fill-list li { margin: 4px 0; }

/* 位置・速度・加速度の関係（03） */
.flow3 { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: nowrap; }
.flow3 .term { font-weight: 800; font-size: clamp(.85rem, 4vw, 1.4rem); white-space: nowrap; }
.flow3 .links { width: clamp(44px, 16vw, 130px); flex: none; }
.flow3 .links svg { width: 100%; height: auto; display: block; }

/* 運動方程式の利用（F = ma → v → r） */
.flow { display: flex; align-items: flex-end; justify-content: center; gap: 0; margin: 8px 0 4px; font-family: var(--serif); }
.flow .term { display: flex; flex-direction: column; align-items: center; }
.flow .term .cap { font-family: var(--font); font-weight: 700; font-size: .8rem; white-space: nowrap; }
.flow .big { font-family: var(--math); font-style: italic; font-weight: 700; font-size: clamp(1.5rem, 9vw, 3.2rem); line-height: 1.1; white-space: nowrap; }
.flow .ring { display: inline-block; border: 3px solid #ffc000; border-radius: 50%; padding: 0 .12em; line-height: 1.05; }
.flow .lhs { margin-right: .1em; }
.flow .arc { width: clamp(44px, 16vw, 150px); flex: none; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 1.6em; }
.flow .arc svg { width: 100%; height: auto; overflow: visible; }
.flow .arc path { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.flow .arc text { fill: var(--ans); font-family: var(--font); font-size: 15px; }
.flow .find { font-family: var(--font); font-size: .75rem; text-align: center; line-height: 1.2; white-space: nowrap; }
.flow .spacer { visibility: hidden; }

/* ---------- 実験入力（例題②） ---------- */
.measure { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 10px 0; }
.measure label { font-size: .8rem; display: grid; gap: 2px; }
.measure input { font: inherit; width: 6.5em; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); }
.measure output { font-weight: 700; }
.calc-result { background: var(--soft); border-radius: 8px; padding: 8px 12px; }

/* ---------- 目次ページ ---------- */
.top { max-width: 760px; margin: 0 auto; padding: 16px 16px 60px; }
.top-banner { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: var(--shadow); }
.top-lead { color: var(--muted); font-size: .92rem; margin: 14px 0 22px; }
.menu-icon-sample svg { width: 1em; height: 1.1em; vertical-align: -0.15em; color: #2a64b8; }
.menu { margin-bottom: 28px; }
.menu-head {
  margin: 0; background: #109810; color: #fff; font-size: 1.1rem; font-weight: 700;
  padding: 14px 18px; display: flex; align-items: center; gap: 8px;
}
.menu-badge {
  background: #111; color: #fff; font-size: .75rem; font-weight: 800; line-height: 1;
  padding: 4px 6px; border-radius: 2px; font-family: system-ui, sans-serif;
}
.menu-list { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.menu-list li { position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 1.05rem; transition: background-color .2s; }
/* マウスを乗せた行：薄い緑の背景＋左に緑の帯が伸びる＋タイトルが少し右へ＋アイコンが緑に反転。行のどこを押しても開く */
.menu-list li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #109810; transform: scaleY(0); transition: transform .2s ease; }
.menu-list li:not(.soon):hover, .menu-list li:not(.soon):focus-within { background: #eaf6e4; }
.menu-list li:not(.soon):hover::before, .menu-list li:not(.soon):focus-within::before { transform: scaleY(1); }
.menu-list li .menu-no { transition: color .2s; }
.menu-list li:not(.soon):hover .menu-no { color: #109810; }
.menu-no { width: 1.6em; font-weight: 700; flex: none; font-family: system-ui, sans-serif; }
.menu-title { flex: 1; color: var(--ink); text-decoration: none; letter-spacing: .04em; transition: transform .2s ease, color .2s; }
a.menu-title::after { content: ""; position: absolute; inset: 0; }  /* 行全体をリンクにする */
.menu-list li:not(.soon):hover a.menu-title, a.menu-title:focus-visible { color: #0b6e0b; transform: translateX(6px); font-weight: 700; }
a.menu-title:focus-visible { outline: none; }
.menu-icons { display: flex; gap: 6px; flex: none; }
.menu-icons a { position: relative; z-index: 1; color: #2a64b8; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; transition: background-color .2s, color .2s, transform .2s; }
.menu-list li:not(.soon):hover .menu-icons a { background: #109810; color: #fff; transform: scale(1.08); }
.menu-icons svg { width: 18px; height: 20px; }
.menu-list li.soon .menu-title { color: var(--muted); }
.menu-list li.soon .menu-icons::after { content: "準備中"; font-size: .72rem; color: var(--muted); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .menu-icons a, :root:not([data-theme="light"]) .menu-icon-sample svg { color: #7fb0ec; }
  :root:not([data-theme="light"]) .menu-list li:not(.soon):hover { background: #1f3a1f; }
  :root:not([data-theme="light"]) .menu-list li:not(.soon):hover a.menu-title { color: #9fe39f; }
}

footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 20px; }

/* =========================================================
   SVG 図（figlib.py と対応）  配色は Word の図形の色に合わせる。
   図はダークモードでも白い紙の上に描く（プリントの色を再現するため）。
   ========================================================= */
svg.fig {
  --ink: #111; --paper: #fff; --ans: #ef7d00; --axis: #1f6fd1;
  font-family: var(--serif); font-size: 15px; overflow: visible;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) svg.fig { background: #fff; border-radius: 8px; }
}
:root[data-theme="dark"] svg.fig { background: #fff; border-radius: 8px; }
svg.fig .ink, svg.fig .ink line, svg.fig .ink path { stroke: var(--ink); stroke-width: 1.4; fill: none; }
svg.fig .body { fill: #fff; }
svg.fig .body.cyan { fill: #cff; }
svg.fig .nofill { fill: none; }
svg.fig .force { stroke: #ffc000; stroke-width: 3.2; stroke-linecap: round; }
svg.fig .gray { stroke: #bfbfbf; stroke-width: 3.2; }
svg.fig .vel { stroke: #00b0f0; stroke-width: 2.6; }
svg.fig .vel-thin { stroke: #00b0f0; stroke-width: 2.6; fill: none; stroke-linejoin: round; }
.mk-vel { fill: #00b0f0; }
svg.fig .dot-vel { fill: #00b0f0; }
svg.fig .fillrect { stroke: var(--ink); stroke-width: 1.2; }
svg.fig .ans { stroke: var(--ans); stroke-width: 2.6; }
svg.fig .axis { stroke: var(--axis); stroke-width: 1.5; }
svg.fig .aux { stroke: var(--ans); stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; }
svg.fig .aux-ink { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
svg.fig .aux-dot { stroke: var(--ink); stroke-width: .9; stroke-dasharray: 1.5 2.5; fill: none; }
.mk-ink { fill: #111; }
.mk-gray { fill: #bfbfbf; }
.mk-force { fill: none; stroke: #ffc000; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mk-ans { fill: #ef7d00; }
.mk-axis { fill: #1f6fd1; }
svg.fig .dot-ink { fill: var(--ink); }
svg.fig .dot-ans { fill: var(--ans); }
svg.fig .dot-force { fill: #ffc000; }
svg.fig .dot-gray { fill: #bfbfbf; }
svg.fig .smooth { fill: #cfc; stroke: none; }
svg.fig .hatch { stroke: none; }
.hatch-bg { fill: #d9f2d0; }
.hatch-st { fill: #9ccf98; }
svg.fig text { fill: var(--ink); }
svg.fig text.m { font-family: var(--math); font-style: italic; }
svg.fig text.m tspan[font-style="normal"] { font-family: var(--serif); }
svg.fig text.jp { font-family: var(--font); font-style: normal; }
svg.fig text.small { font-size: 11px; }
svg.fig text.tiny { font-size: 9px; }
svg.fig text.bold { font-weight: 700; }
svg.fig .ans-t { fill: var(--ans); }
svg.fig .axis-t { fill: var(--axis); }
svg.fig .acc .acc-body { fill: #fff; stroke: var(--ink); stroke-width: 1.2; }
svg.fig .acc.pink .acc-body { fill: #fcc; }
svg.fig .acc line { stroke: var(--ink); stroke-width: 1.2; }
svg.fig .person .skin { fill: #ffc; stroke: var(--ink); stroke-width: 1.5; }
svg.fig .person .skin.pink { fill: #f99; }
svg.fig .person .skin.lpink { fill: #f2dbdb; }
svg.fig .person .skin.cyan { fill: #cff; }
svg.fig .person .skin.orange { fill: #fbc58f; }
svg.fig .person .limb { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
svg.fig .person .hand { fill: var(--ink); }
svg.fig .person .bubble { fill: #fff; stroke: var(--ink); stroke-width: .8; }
svg.fig .person .note { fill: var(--ink); font-family: var(--font); }
svg.fig .ball { fill: #ff9; stroke: var(--ink); stroke-width: 1.2; }
svg.fig .ball.gray { fill: #ddd; }
svg.fig .ball.white { fill: #fff; }
svg.fig .sw { fill: #c00000; stroke: var(--ink); stroke-width: .8; }
svg.fig .sw-face { fill: #fff; stroke: none; }
svg.fig .sw-hand { stroke: var(--ink); stroke-width: 1.4; }
svg.fig .curve { stroke: var(--ink); stroke-width: 2; fill: none; }
svg.fig .grid-major { stroke: #555; stroke-width: .8; }
svg.fig .grid-minor { stroke: #999; stroke-width: .5; stroke-dasharray: 1.5 1.5; }
svg.fig .grid-ink { stroke: #555; stroke-width: .7; }
svg.fig .grid-dot { stroke: #aaa; stroke-width: .7; stroke-dasharray: 2 2; }
svg.fig .curve-gray { stroke: #888; stroke-width: 1.3; fill: none; }
svg.fig .spot { fill: #7fd5f7; }
svg.fig .aux-thin { stroke: var(--ink); stroke-width: .7; fill: none; }
svg.fig .dashed { stroke-dasharray: 2 2; }
svg.fig .handfill { fill: #fdeddb; stroke: var(--ink); stroke-width: 1; }
svg.fig .handle { fill: #d6e3bc; stroke: var(--ink); stroke-width: .8; }
svg.fig .hammer { fill: #969696; stroke: var(--ink); stroke-width: .8; }
svg.fig .daruma { fill: #fcc; stroke: var(--ink); stroke-width: 1.2; }
svg.fig .face { fill: #fdeddb; stroke: var(--ink); stroke-width: 1; }
svg.fig .brow { stroke: var(--ink); stroke-width: 3; fill: none; stroke-linecap: round; }
svg.fig .loop-band { stroke: #cfc; stroke-width: 14; fill: none; }
svg.fig .car { fill: #ff9; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
svg.fig .car-win { fill: #ffffc8; stroke: var(--ink); stroke-width: 1; }
svg.fig .wheel { fill: #969696; stroke: var(--ink); stroke-width: 1; }
svg.fig .shade { fill: rgba(239, 125, 0, .18); stroke: var(--ans); stroke-width: 1; }
svg.fig .label-bg { fill: #fff; }

/* 解答レイヤー：既定は隠す。figure.show-ans で表示 */
svg.fig .ans-layer { opacity: 0; transition: opacity .35s; }
.show-ans svg.fig .ans-layer { opacity: 1; }
@media print {
  .site-header, .toc, .fig-toggle { display: none; }
  .layout { display: block; }
  details.sol { break-inside: avoid; }
}


/* =========================================================
   スマホ縦画面（〜560px）：左右の余白をなくして，本文・数式の幅を最大にする
   ========================================================= */
@media (max-width: 560px) {
  .layout { padding: 12px 0 60px; gap: 10px; }
  .toc { margin: -12px 0 0; padding: 8px 10px; }
  .hero { margin: 4px 12px 14px; }
  .card { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; padding: 14px 10px; margin-bottom: 14px; }
  .top { padding: 12px 0 40px; }
  .top-banner { border-radius: 0; }
  .top-lead { margin: 12px 12px 18px; }
  .menu-list li { padding: 9px 12px; }
  details.sol > summary { padding: 8px 10px; }
  details.sol > .body { padding: 2px 8px 12px; }
  .body { --indent: .7em; }
  .note { padding: 8px 10px; }
  .final { padding: 6px 8px; }
  .point-box, .kinetic-box { padding: 10px 10px; border-width: 4px; }
  .yellow-box { padding: 8px 10px; border-width: 4px; }
  ol.qs > li { padding-left: 2em; }
}

/* スマホ縦画面：上部のバーを1行に収める（横スクロールの原因になるため） */
@media (max-width: 420px) {
  .brand-sub { display: none; }
  .site-header .inner { padding: 8px 10px; gap: 6px; }
  .brand { gap: 6px; font-size: .88rem; }
  .tools { gap: 4px; }
  .tools .btn { font-size: .7rem; padding: 4px 8px; letter-spacing: -.02em; }
}

/* とても狭い画面（〜360px）：上部のバーのボタンを2段目に回し，図・表は幅に合わせる */
@media (max-width: 360px) {
  .site-header .inner { flex-wrap: wrap; row-gap: 6px; }
  .tools { width: 100%; }
  .tools .btn { flex: 1 1 0; text-align: center; padding: 5px 4px; }
  .flow .arc text { font-size: 18px; }
  .flow .cap, .flow .find { font-size: .62rem; }
  .flow .big { font-size: 7.6vw; }
  .flow .arc { width: 13vw; }
  .flow3 .term { font-size: 3.8vw; }
  .flow3 .links { width: 14vw; }
  .data-table { font-size: .78rem; }
  .data-table th, .data-table td { padding: 3px 5px; }
  .fig-row { gap: 10px; }
  .answer-box { max-width: none; }
  .measure input { width: 5.5em; }
}

/* 解答欄の空きセル（問題のない欄）：外枠の線も消して空白にする */
.answer-grid > .blank { border: 0 !important; background: var(--paper); margin: 0 -3px -3px 0; position: relative; }
@media (max-width: 560px) { .answer-grid > .blank { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .menu-list li, .menu-list li::before, .menu-title, .menu-icons a { transition: none; }
}