/* ==========================================================
   数学ハイウェイ — design tokens
   高速道路の案内標識を視覚言語に:
   緑の案内板 / レーン色 / 破線センターライン
   ========================================================== */
:root {
  --paper: #FBFAF7;
  --ink: #22313E;
  --ink-soft: #5D6C79;
  --line: #E5E1D6;
  --card: #FFFFFF;

  --brand: #00794E;        /* 高速道路の案内標識の緑 */
  --brand-deep: #005B3B;
  --lane-mark: #F2C230;    /* 車線境界線の黄 */

  --lane-n: #2F6FDE;       /* 数と代数 */
  --lane-g: #E0782A;       /* 幾何 */
  --lane-a: #D8465C;       /* 解析 */
  --lane-l: #7B52C7;       /* 線形代数 */
  --lane-s: #0E9AA5;       /* 論理と集合 */
  --lane-p: #B8860B;       /* 確率と統計 */
  --lane: var(--brand);

  --ok: #1B8A4B;
  --ng: #C9542E;

  --font-display: "Zen Maru Gothic", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;

  --radius: 14px;
  --maxw: 720px;
}

.lane-n { --lane: var(--lane-n); }
.lane-g { --lane: var(--lane-g); }
.lane-a { --lane: var(--lane-a); }
.lane-l { --lane: var(--lane-l); }
.lane-s { --lane: var(--lane-s); }
.lane-p { --lane: var(--lane-p); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.85;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.4;
  color: var(--ink);
}

a { color: var(--brand); }

:focus-visible {
  outline: 3px solid var(--lane-n);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: .5em 1em;
  z-index: 100;
}
.skip-link:focus { left: 8px; }

/* ---------- header / footer ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 20px 10px;
  border-bottom: 4px solid var(--brand);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--ink);
  text-decoration: none;
}

/* 小さな道路アイコン: 暗い路面に破線 */
.logo-road {
  display: inline-block;
  width: 34px;
  height: 18px;
  border-radius: 6px;
  background: #37444F;
  position: relative;
}
.logo-road span {
  position: absolute;
  left: 4px; right: 4px; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg,
    var(--lane-mark) 0 5px, transparent 5px 9px);
}

.site-nav a {
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  color: var(--brand);
  border: 2px solid var(--brand);
  border-radius: 999px;
  padding: .3em .95em;
}
.site-nav a:hover { background: var(--brand); color: #fff; }

main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 20px 60px;
}

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding: 24px 20px 40px;
  text-align: center;
  color: var(--ink-soft);
  font-size: .85rem;
}

/* ---------- レーン帯（シグネチャー）---------- */
.route-bar {
  height: 14px;
  border-radius: 999px;
  background: var(--lane);
  position: relative;
  margin: 6px 0 18px;
}
.route-bar::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,.95) 0 14px, transparent 14px 26px);
  border-radius: 2px;
}

/* ---------- パンくず ---------- */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5em;
  font-size: .9rem;
  margin-bottom: 6px;
}
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--lane); text-decoration: underline; }
.crumb-sep { color: var(--ink-soft); }

a.route-chip { text-decoration: none; }
a.route-chip:hover { filter: brightness(1.12); }
.route-chip {
  display: inline-grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 8px;
  background: var(--lane);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
}

.test-flag, .unit-flag {
  display: inline-block;
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  color: var(--lane);
  border: 2px solid var(--lane);
  border-radius: 999px;
  padding: .05em .8em;
}

.step-head h1 { margin: .1em 0 .5em; font-size: 1.9rem; }

/* ---------- まなぶことボックス（緑の案内標識風）---------- */
.learn-box {
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5),
              inset 0 0 0 6px var(--brand);
  margin-bottom: 28px;
}
.learn-box h2 {
  margin: 0 0 .4em;
  font-size: 1rem;
  color: #fff;
  letter-spacing: .06em;
}
.learn-box ul { margin: 0; padding-left: 1.3em; }
.learn-box li { margin: .15em 0; }
.learn-summary {
  margin: .8em 0 0;
  padding-top: .7em;
  border-top: 2px dashed rgba(255,255,255,.5);
  font-weight: 500;
}
.learn-summary::before {
  content: "まとめ";
  display: inline-block;
  background: #fff;
  color: var(--brand-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  border-radius: 999px;
  padding: 0 .8em;
  margin-right: .6em;
}

/* ---------- 本文 ---------- */
.step-body h2 {
  font-size: 1.3rem;
  margin: 1.8em 0 .6em;
  padding-left: .6em;
  border-left: 6px solid var(--lane);
}
.step-body table {
  border-collapse: collapse;
  margin: 1em auto;
}
.step-body th, .step-body td {
  border: 1.5px solid var(--line);
  padding: .35em 1em;
  text-align: center;
}
.step-body th { background: color-mix(in srgb, var(--lane) 10%, white); }

.mh-figure {
  margin: 1.2em auto;
  text-align: center;
}
.mh-figure figcaption {
  color: var(--ink-soft);
  font-size: .95rem;
  margin-top: .3em;
}

canvas[data-dots], .ex-canvas, .mh-gen-area canvas {
  display: block;
  margin: .6em auto;
  max-width: 100%;
}

.digit-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 1.2em 0;
}
.digit-card {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px 6px;
  text-align: center;
}
.digit-card .digit {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.7rem;
  color: var(--lane);
}
.digit-card .yomi { font-size: .85rem; color: var(--ink-soft); }

.math-display { margin: 1em 0; text-align: center; font-size: 1.25em; }

/* ---------- 演習 ---------- */
.mh-exercise {
  background: var(--card);
  border: 2px solid var(--line);
  border-left: 8px solid var(--lane);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 18px 0;
}
.mh-exercise.is-correct {
  border-color: var(--ok);
  background: #F3FAF5;
}

.ex-head {
  display: flex;
  align-items: center;
  gap: .7em;
  margin-bottom: .3em;
}
.ex-no {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--lane);
  font-size: 1.05rem;
}
.ex-level {
  font-size: .75rem;
  border-radius: 999px;
  padding: .05em .8em;
  background: color-mix(in srgb, var(--lane) 12%, white);
  color: var(--ink-soft);
}
.level-3 .ex-level {
  background: var(--lane-mark);
  color: #4d3a00;
}

.ex-question { margin: .2em 0 .4em; font-weight: 500; }
.ex-formula {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  margin: .4em 0;
}

.ex-answer-row {
  display: flex;
  align-items: center;
  gap: .6em;
  flex-wrap: wrap;
}
.mh-answer-input {
  font-size: 1.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  width: 6em;
  padding: .25em .6em;
  border: 2px solid var(--line);
  border-radius: 10px;
  text-align: center;
  background: #fff;
  color: var(--ink);
}
.mh-answer-input:focus { border-color: var(--lane); outline: none; }
.ex-suffix { font-weight: 500; }

.btn, .mh-check, .mh-choice {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.mh-check {
  background: var(--brand);
  color: #fff;
  padding: .45em 1.3em;
}
.mh-check:hover { background: var(--brand-deep); }

.btn-primary {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  padding: .6em 1.6em;
  font-size: 1.05rem;
}
.btn-primary:hover { background: var(--brand-deep); }

.ex-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: .4em 0;
}
.mh-choice {
  background: #fff;
  border: 2.5px solid var(--lane);
  color: var(--ink);
  border-radius: 12px;
  min-width: 3.2em;
  padding: .5em 1em;
  font-size: 1.2rem;
}
.mh-choice:hover { background: color-mix(in srgb, var(--lane) 10%, white); }
.mh-choice.is-right { background: var(--ok); border-color: var(--ok); color: #fff; }
.mh-choice.is-wrong { border-color: var(--ng); color: var(--ng); opacity: .6; }

.mh-feedback { min-height: 1.4em; margin: .5em 0 0; font-weight: 700; }
.mh-feedback.is-ok { color: var(--ok); }
.mh-feedback.is-ng { color: var(--ng); }

@keyframes mh-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.mh-exercise.shake { animation: mh-shake .25s ease-in-out 2; }

@keyframes mh-pop {
  0% { transform: scale(.6); opacity: 0; }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- クリアバナー ---------- */
.step-clear {
  background: var(--lane-mark);
  color: #4d3a00;
  border-radius: var(--radius);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.2rem;
  padding: 14px;
  margin: 24px 0;
  animation: mh-pop .35s ease-out;
}
.step-clear p { margin: 0; }

/* ---------- 類題生成 ---------- */
.mh-generator {
  border: 2.5px dashed var(--lane);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 30px 0 10px;
  background: color-mix(in srgb, var(--lane) 5%, white);
}
.mh-generator h2 {
  margin: 0 0 .3em;
  font-size: 1.15rem;
  border: none;
  padding: 0;
}
.mh-generator > p { margin: .3em 0; }
.gen-pair {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.gen-pair figure { margin: 0; text-align: center; }
.gen-pair figcaption { font-weight: 700; }

/* ---------- ページ送り ---------- */
.step-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 34px;
}
.nav-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: var(--radius);
  padding: 12px 18px;
  text-decoration: none;
  border: 2.5px solid var(--brand);
  color: var(--brand-deep);
  background: #fff;
}
.nav-btn .nav-dir {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
}
.nav-btn .nav-title { font-weight: 700; }
.nav-next {
  background: var(--brand);
  color: #fff;
  text-align: right;
  align-items: flex-end;
}
.nav-next:hover { background: var(--brand-deep); }
.nav-prev:hover { background: #F0F7F3; }
.nav-btn.is-disabled {
  border-color: var(--line);
  background: var(--paper);
  color: var(--ink-soft);
}
.step-nav .nav-next:only-child { grid-column: 2; }

/* ---------- たんげんページ ---------- */
.prereqs h2, .step-list-section h2 {
  font-size: 1.1rem;
  margin: 1.4em 0 .5em;
}
.prereq-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.chip {
  display: inline-block;
  border: 2px solid var(--lane);
  border-radius: 999px;
  padding: .15em .9em;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  font-weight: 500;
}
.chip:hover { background: color-mix(in srgb, var(--lane) 10%, white); }
.chip.is-muted {
  border-color: var(--line);
  color: var(--ink-soft);
  background: var(--paper);
}

.step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.step-list::before {
  content: "";
  position: absolute;
  left: 13px; top: 10px; bottom: 10px;
  width: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(180deg,
    var(--lane) 0 12px, color-mix(in srgb, var(--lane) 25%, white) 12px 20px);
}
.step-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px 9px 0;
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
}
.step-item a:hover .step-title { text-decoration: underline; }
.step-marker {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--lane);
  background: #fff;
  position: relative;
  z-index: 1;
}
.step-item.is-done .step-marker { background: var(--lane); }
.step-item.is-done .step-done-mark { color: var(--ok); font-weight: 900; }
.step-item.is-test .step-marker { border-radius: 8px; }
.unit-start { margin-top: 1.4em; }

.step-item.is-locked .step-link-disabled {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px 9px 0;
  color: var(--ink-soft);
}
.step-item.is-locked .step-marker {
  border-color: var(--line);
  background: var(--paper);
}
/* ---------- ICバッジと道路コンポーネント（章・単元ページ） ---------- */
/* ICバッジ: マップのIC円と同じ視覚ルール（白地・路線色の輪・JCTは二重リング） */
.ic-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--lane);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--ink);
  text-decoration: none;
}
.ic-badge.is-jct {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(34, 49, 62, .55);
}
.ic-badge-sm {
  width: 40px;
  height: 40px;
  border-width: 3px;
  font-size: .8rem;
}
a.ic-badge:hover { background: color-mix(in srgb, var(--lane) 10%, white); }

.chapter-head, .unit-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.chapter-head h1, .unit-head h1 { margin: 0; font-size: 1.9rem; }
.chapter-head .unit-flag, .unit-head .unit-flag { margin: 0 0 4px; }
.jct-note {
  margin: .35em 0 0;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink-soft);
}

/* 単元ページのミニ位置図: 章のIC ─ 単元の円 */
.pos-map {
  display: inline-flex;
  align-items: center;
  flex: none;
  position: relative;
}
.pos-map .ic-badge, .pos-map .ic-dot {
  position: relative;
  z-index: 1;
}
.pos-stub {
  width: 40px;
  height: 10px;
  margin: 0 -9px;   /* 両側の円の下にもぐりこませ、道路を途切れさせない */
  background: var(--lane);
  position: relative;
}
.pos-stub::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,.95) 0 4px, transparent 4px 8px);
}
.pos-here {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lane-mark) 60%, transparent);
}

/* 章ページ: 縦の道路（路面＋白破線）に単元の番号円が並ぶ */
.ic-road {
  list-style: none;
  padding: 4px 0;
  margin: 0;
  position: relative;
}
.ic-stop a, .ic-stop .ic-stop-disabled {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 8px 14px 0;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  position: relative;
  z-index: 1;
}
/* 章ページ: タイトルのIC円から道路が下へ連続して伸びる */
.chapter-road {
  position: relative;
}
.chapter-road::before {       /* 路面（タイトル円の中心から最後の円まで） */
  content: "";
  position: absolute;
  left: 20px; top: 30px; bottom: 32px;
  width: 18px;
  border-radius: 9px;
  background: var(--lane);
}
.chapter-road::after {        /* センターライン */
  content: "";
  position: absolute;
  left: 28px; top: 62px; bottom: 46px;
  width: 2px;
  background: repeating-linear-gradient(180deg,
    rgba(255,255,255,.95) 0 8px, transparent 8px 17px);
}
.chapter-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.chapter-title-row h1 { margin: 0; font-size: 1.9rem; }
.chapter-road-body {
  margin-left: 56px;
  position: relative;
  z-index: 1;
}
.chapter-units-heading {
  font-size: 1.1rem;
  margin: 1.4em 0 .5em;
}
.ic-stop a:hover .ic-stop-title { text-decoration: underline; }
.ic-dot {
  flex: none;
  margin-left: 10px;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 3.5px solid var(--lane);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  color: var(--ink);
}
.ic-stop.is-done .ic-dot { background: var(--lane); color: #fff; }
.ic-stop.is-current .ic-dot {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lane-mark) 60%, transparent);
}
.ic-stop-code {
  display: inline-block;
  margin-left: .55em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .75rem;
  color: var(--ink-soft);
}
.ic-stop.is-locked .ic-stop-disabled { color: var(--ink-soft); font-weight: 400; }
.ic-stop.is-locked .ic-dot { border-color: var(--line); color: #B7BEC4; }
.ic-dot-next {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--lane) 45%, white);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: .72rem;
}
.ic-stop.is-next a { color: var(--ink-soft); }
.gate-chip {
  flex: none;
  margin-left: 2px;
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  border: 2px solid var(--lane-mark);
  border-radius: 8px;
  padding: .2em .7em;
  position: relative;
  z-index: 1;
}
.ic-stop.is-gate.is-done .gate-chip { background: var(--ok); }

/* 単元ページ: 1本の道路を区画割り。円は使わず「走る区間」として見せる */
.seg-road {
  list-style: none;
  padding: 0;
  margin: 0;
}
.seg a {
  display: flex;
  align-items: stretch;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
.seg a:hover .seg-title { text-decoration: underline; }
.seg-strip {
  flex: none;
  width: 18px;
  min-height: 58px;
  background: var(--lane);
  position: relative;
}
.seg:first-child .seg-strip { border-radius: 9px 9px 0 0; }
.seg:nth-last-child(2) .seg-strip { border-radius: 0 0 9px 9px; }
.seg-strip::before {          /* 区画の境界線（キロポスト風） */
  content: "";
  position: absolute;
  top: -1px; left: -5px; right: -5px;
  height: 2.5px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 45%, white);
}
.seg:first-child .seg-strip::before { display: none; }
.seg-strip::after {           /* センターライン */
  content: "";
  position: absolute;
  left: 50%; top: 8px; bottom: 8px;
  width: 2px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg,
    rgba(255,255,255,.95) 0 8px, transparent 8px 17px);
  opacity: 1;
}
/* 走りおえた区画はうすく（これから走る道のほうがくっきり見える） */
.seg.is-done .seg-strip { background: color-mix(in srgb, var(--lane) 28%, white); }
.seg.is-done .seg-strip::after { opacity: .5; }
.seg.is-done .seg-title { color: var(--ink-soft); }
/* 自車: ルートマップの車と同じデザイン（緑のボディ＋白縁＋水色の窓、下向き） */
.seg.is-current .seg-strip::after {
  content: "";
  left: 50%;
  top: 50%;
  bottom: auto;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 24'%3E%3Crect x='1.3' y='1.3' width='11.4' height='21.4' rx='4' fill='%2300794E' stroke='%23fff' stroke-width='1.6'/%3E%3Crect x='3.4' y='14.2' width='7.2' height='5.6' rx='1.8' fill='%23CFE3FF'/%3E%3C/svg%3E") center / 13px 23px no-repeat,
    radial-gradient(circle closest-side, rgba(61, 125, 242, .28), rgba(61, 125, 242, 0) 72%);
  opacity: 1;
}
.seg-title {
  display: flex;
  align-items: center;
  padding: 8px 0;
}
.seg .step-done-mark {
  display: flex;
  align-items: center;
}
.seg .step-done-mark[hidden] { display: none; }
.seg.is-next a {
  color: var(--ink-soft);
  align-items: center;
  margin-top: 8px;
}
.seg.is-next .seg-title { padding: 0; }

/* ステップの共通マーカー: ひし形の標識に番号（未クリア=白地、クリアずみ=塗りつぶし） */
.step-dia {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: #fff;
  border: 2.5px solid var(--lane);
  border-radius: 7px;
  transform: rotate(45deg);
  margin: 4px;
}
.step-dia::before {
  content: attr(data-n);
  transform: rotate(-45deg);
  color: var(--lane);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .8rem;
  line-height: 1;
}
.step-head h1 .step-dia { margin-right: .7em; vertical-align: .12em; }
.seg-title .step-dia { margin-right: .7em; }
.seg.is-done .step-dia { background: var(--lane); }
.seg.is-done .step-dia::before { color: #fff; }
.step-dia-sm { width: 19px; height: 19px; border-width: 2px; border-radius: 5px; margin: 3px; }
.step-dia-sm::before { font-size: .66rem; }
.nav-title .step-dia-sm { margin-right: .6em; vertical-align: .05em; }

/* マップのリスト表示の単元番号 */
.chip-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: .8em;
  color: var(--lane);
  margin-right: .4em;
}

/* 解説と「こたえを見る」 */
.mh-explain {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 7%, white);
  border: 1.5px solid color-mix(in srgb, var(--brand) 30%, white);
  font-size: .95rem;
  line-height: 1.8;
}
.mh-explain-tag {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .75rem;
  border-radius: 999px;
  padding: 0 .8em;
  margin-right: .6em;
  vertical-align: .1em;
}
.mh-reveal {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  color: var(--ink-soft);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: .25em 1em;
  cursor: pointer;
}
.mh-reveal:hover { border-color: var(--ink-soft); }

.chapter-milestone-note {
  background: color-mix(in srgb, var(--lane-mark) 25%, white);
  border: 2px dashed var(--lane-mark);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-weight: 700;
  margin: 20px 0 0;
}

/* ---------- ホーム ---------- */
.hero {
  text-align: center;
  padding: 30px 0 10px;
}
.hero h1 {
  font-size: 2.4rem;
  margin: .2em 0;
}
.hero .hero-lead {
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 34em;
  margin: 0 auto 1.2em;
}
.hero-road {
  height: 22px;
  border-radius: 999px;
  background: #37444F;
  position: relative;
  margin: 18px auto 26px;
  max-width: 520px;
}
.hero-road::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg,
    var(--lane-mark) 0 22px, transparent 22px 40px);
  border-radius: 2px;
}
.hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.btn-outline {
  display: inline-block;
  border: 2.5px solid var(--brand);
  color: var(--brand-deep);
  background: #fff;
  padding: .6em 1.6em;
  font-size: 1.05rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
}
.btn-outline:hover { background: #F0F7F3; }

.lane-board {
  list-style: none;
  padding: 0;
  margin: 30px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.lane-board a {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--line);
  border-top: 8px solid var(--lane);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.lane-board a:hover { border-color: var(--lane); }
.lane-board .lane-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: .5em;
}
.lane-board .lane-desc {
  font-size: .85rem;
  color: var(--ink-soft);
  margin-top: .2em;
}

/* ---------- ルートマップ ---------- */
.map-strand { margin: 34px 0; }
.map-strand-head {
  display: flex;
  align-items: center;
  gap: .6em;
  margin-bottom: 4px;
}
.map-strand-head h2 { margin: 0; font-size: 1.4rem; }
.map-strand-desc { color: var(--ink-soft); font-size: .92rem; margin: 2px 0 12px; }

.map-chapter {
  background: var(--card);
  border: 2px solid var(--line);
  border-left: 8px solid var(--lane);
  border-radius: var(--radius);
  padding: 12px 18px;
  margin: 10px 0;
}
.map-chapter h3 { margin: 0 0 .4em; font-size: 1.05rem; }
.map-units {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.map-units .chip { font-size: .92rem; }
.map-units li { position: relative; }
.map-units li.is-done .chip::after {
  content: "✓";
  color: var(--ok);
  font-weight: 900;
  margin-left: .35em;
}
.chip-test {
  border-style: dashed;
  font-weight: 700;
}

/* ---------- ハイウェイ路線図ビュー ---------- */
.map-view-toggle {
  display: flex;
  gap: 8px;
  margin: 18px 0 14px;
}
.map-toggle-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  border: 2.5px solid var(--brand);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-deep);
  padding: .4em 1.2em;
  cursor: pointer;
}
.map-toggle-btn.is-active {
  background: var(--brand);
  color: #fff;
}
.map-visual-hint {
  color: var(--ink-soft);
  font-size: .9rem;
  margin: 0 0 10px;
}
.route-map-scroll {
  overflow-x: auto;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  /* 本文カラムを はみ出して 画面幅いっぱいに */
  width: min(100vw - 32px, 1280px);
  margin-left: calc(50% - min(100vw - 32px, 1280px) / 2);
}
.route-map-svg {
  margin: 0 auto;
}
.route-map-svg {
  display: block;
}
.route-map-svg text {
  font-family: var(--font-body);
}
.rm-ic {
  cursor: pointer;
}
.rm-ic:focus {
  outline: none;
}
.rm-ic:focus circle {
  stroke-width: 5;
}
.map-chapter h3 a {
  color: var(--ink);
  text-decoration: none;
}
.map-chapter h3 a:hover {
  color: var(--lane);
  text-decoration: underline;
}

.mainline {
  margin-top: 40px;
  padding-top: 10px;
  border-top: 4px solid var(--brand);
}
.mainline-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 0;
  list-style: none;
}
.mainline-flow .chip { font-size: .88rem; }
.milestone-flag {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  border-radius: 8px;
  padding: .2em .9em;
  text-decoration: none;
}
a.milestone-flag:hover {
  background: var(--brand-deep);
}
.milestone-flag.is-muted {
  background: var(--ink-soft);
}
.rm-gate {
  cursor: pointer;
}
.rm-navi-flow {
  animation: rm-dash 1.4s linear infinite;
}
@keyframes rm-dash {
  to { stroke-dashoffset: -26; }
}
/* 車がICのクリックをさえぎらないように（現在地の情報はIC側のツールチップで出す） */
.rm-car, .rm-player {
  pointer-events: none;
}
.rm-edit-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
}
.rm-edit-panel button {
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .5em 1.2em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* ---------- responsive / a11y ---------- */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .step-head h1 { font-size: 1.5rem; }
  .step-nav { grid-template-columns: 1fr; }
  .step-nav .nav-next:only-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mh-exercise.shake, .step-clear { animation: none; }
  .rm-navi-flow { animation: none; }
}