/* ========================================
   パネル型教材（試作）
   unit-05-panel.html 専用．既存の unit.css とは独立している．
   base.css と header.css の後に読み込む．

   しくみ
   ・各パネルの .canvas は「高さ720px・幅1280px以上」の作業面として組む．
   ・panel.js が画面に収まる倍率を計算し，.canvas に zoom を掛ける．
     画面の倍率（50%・100%など）や画面の大きさが変わっても，
     1枚のパネルが常に画面内へ収まる．
   ・画面幅が狭いとき（スマホ）と「一覧で読む」では，
     縦に流れる表示（.is-flow）に切り替える．
   ・.canvas 内の寸法は，すべて作業面上の px で指定する．
======================================== */

:root {
    /* 基本色（トップページの紺と青を引き継ぐ） */
    --ink: #0c2c47;
    --ink-soft: #3a5266;
    --muted: #6b7f90;
    --blue: #3f7fa9;
    --blue-pale: #e6eef6;
    --line: rgba(12, 44, 71, 0.14);
    --paper: #fbfbfa;

    /* 三つの手段の色（グラフ・点・凡例で共通） */
    --c-rail: #0c2c47;
    --c-bus: #e8792f;
    --c-bike: #5b9bc8;

    /* 路線図の色（編ごと） */
    --line-basic: #3f7fa9;
    --line-adv1: #5b9bc8;
    --line-adv2: #8fb6d6;
    --line-prac: #e8792f;

    --font-jp: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-display: "Archivo Black", "Arial Black", Arial, sans-serif;
    --font-math: "Times New Roman", Times, serif;
}

/* 縦の短い画面では，ヘッダーを少し低くして教材の面積を確保する */
@media (max-height: 820px) and (min-width: 761px) {
    .lesson-page {
        --header-height: clamp(54px, 8.5vh, 76px);
        --header-top-space: 8px;
        --logo-height: clamp(26px, 4.6vh, 42px);
        --header-button-height: clamp(34px, 5.6vh, 46px);
    }
}

.lesson-page {
    color: var(--ink);
    font-family: var(--font-jp);
}

.lesson {
    box-sizing: border-box;
    width: var(--page-content-outer-width);
    margin: 0 auto;
    padding-top: calc(var(--header-height) + var(--header-top-space) + 10px);
    padding-bottom: 10px;
}

/* パネル表示：画面の高さちょうどに収める */
.lesson.is-fit {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
    height: 100vh;
    height: 100svh;
}

/* ---------- 上部：単元名・進捗・表示切り替え（1行） ---------- */

.lesson-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
}

.lesson-crumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.crumb-line {
    width: 24px;
    height: 5px;
    border-radius: 3px;
    background: var(--line-basic);
}

.lesson-progress {
    display: flex;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lesson-progress li {
    flex: 1 1 0;
}

.lesson-progress button {
    display: block;
    width: 100%;
    height: 20px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.lesson-progress button::before {
    content: "";
    display: block;
    height: 4px;
    border-radius: 2px;
    background: rgba(12, 44, 71, 0.13);
    transition: background 0.2s ease;
}

.lesson-progress .is-done button::before { background: var(--blue); }
.lesson-progress .is-current button::before { background: var(--ink); }

.mode-toggle {
    padding: 6px 14px;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.mode-toggle[aria-pressed="true"] {
    color: #ffffff;
    background: var(--ink);
    border-color: var(--ink);
}

/* ---------- ステージとパネル ---------- */

.stage {
    position: relative;
    overflow: hidden;
    min-height: 0;
    background-color: var(--paper);
    background-image:
        linear-gradient(rgba(12, 44, 71, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12, 44, 71, 0.03) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: -1px -1px;
    border: 1px solid var(--line);
    border-radius: clamp(16px, 2vw, 28px);
}

.panel-track {
    display: flex;
    align-items: flex-start;
    transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.24, 1);
    will-change: transform;
}

.panel {
    position: relative;
    flex: 0 0 100%;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.is-fit .panel-track,
.is-fit .panel {
    height: 100%;
}

.is-fit .panel {
    display: grid;
    place-items: center;
}

/* 作業面（720px の高さで組む） */
.canvas {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 112px 56px 96px;
    overflow: hidden;
}

.is-fit .canvas {
    height: 720px; /* panel.js が実際の高さへ置き換える */
}

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    align-items: center;
    width: 100%;
    max-width: 2060px;
    margin: 0 auto;
}

.split--cover {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: end;
}

.stack {
    width: 100%;
    max-width: 2060px;
    margin: 0 auto;
}

.col {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.col--end {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
}

/* 縦書きの英字ラベル */
.side-label {
    position: absolute;
    top: 60px;
    right: 40px;
    margin: 0;
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.24em;
    writing-mode: vertical-rl;
    white-space: nowrap;
}

/* 小さな色の短冊 */
.stripe {
    position: absolute;
    display: flex;
    height: 16px;
}

.stripe span:nth-child(1) { width: 40px; background: var(--c-bike); }
.stripe span:nth-child(2) { width: 12px; background: var(--ink); }
.stripe span:nth-child(3) { width: 26px; background: var(--line-adv2); }
.stripe span:nth-child(4) { width: 36px; background: var(--c-bus); }

.stripe--a { left: 96px; bottom: 30px; }
.stripe--b { right: 96px; top: 40px; }

/* ---------- 文字 ---------- */

.kicker {
    margin: 0 0 16px;
    color: var(--blue);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.panel-title {
    margin: 0 0 28px;
    font-size: 46px;
    font-weight: 900;
    line-height: 1.42;
    letter-spacing: 0.01em;
}

.panel-title--big {
    font-size: 60px;
    line-height: 1.3;
}

.prose {
    color: var(--ink-soft);
    font-size: 22px;
    line-height: 1.85;
}

.prose p { margin: 0; }
.prose p + p { margin-top: 14px; }

.prose strong,
.col-note strong {
    color: var(--ink);
    font-weight: 700;
    background: linear-gradient(transparent 62%, var(--blue-pale) 62%);
}

.col-lead {
    margin: 0 0 16px;
    color: var(--ink-soft);
    font-size: 20px;
    font-weight: 700;
}

.col-note {
    margin: 22px 0 0;
    color: var(--ink-soft);
    font-size: 20px;
    line-height: 1.85;
}

.question-line {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 2px solid var(--ink);
}

.question-line p {
    margin: 0;
    font-size: 27px;
    font-weight: 900;
    line-height: 1.6;
}

.question-line .question-line__label {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 16px;
    font-weight: 700;
}

/* 吹き出しカード */
.bubble {
    position: relative;
    padding: 26px 30px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 20px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.8;
}

.bubble::after {
    content: "";
    position: absolute;
    left: 40px;
    bottom: -11px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transform: rotate(45deg);
}

.bubble p { margin: 0; }

.bubble .bubble__by {
    margin-top: 10px;
    color: var(--muted);
    font-size: 16px;
    font-weight: 500;
}

/* ---------- 表紙 ---------- */

.cover-bg-word {
    position: absolute;
    top: 36px;
    right: 30px;
    z-index: 0;
    margin: 0;
    color: rgba(12, 44, 71, 0.045);
    font-family: var(--font-display);
    font-size: 230px;
    line-height: 0.86;
    text-align: right;
    pointer-events: none;
    user-select: none;
}

.cover-title {
    margin: 0 0 24px;
    font-size: 68px;
    font-weight: 900;
    line-height: 1.16;
    letter-spacing: 0.01em;
}

.cover-lead {
    max-width: 34em;
    margin: 0 0 34px;
    color: var(--ink-soft);
    font-size: 22px;
    line-height: 1.9;
}

.mode-icons {
    display: flex;
    gap: 34px;
}

.mode-icons figure {
    margin: 0;
    text-align: center;
}

.mode-icons svg {
    display: block;
    width: 84px;
    height: auto;
}

.mode-icons figcaption {
    margin-top: 6px;
    color: var(--ink-soft);
    font-size: 16px;
    font-weight: 700;
}

.cover-meta {
    display: flex;
    width: 100%;
    margin: 0;
    border-top: 1.5px solid var(--ink);
    border-bottom: 1px solid var(--line);
}

.cover-meta div {
    display: flex;
    flex: 1 1 0;
    align-items: baseline;
    gap: 10px;
    padding: 14px 0;
}

.cover-meta div + div {
    padding-left: 20px;
    border-left: 1px solid var(--line);
}

.cover-meta dt {
    color: var(--muted);
    font-size: 15px;
}

.cover-meta dd {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
}

/* 路線図（15単元の現在地） */
.route-map {
    width: 100%;
}

.route-map__label {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 700;
}

.route-map__line {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    row-gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.route-map__line li {
    position: relative;
    display: flex;
    justify-content: center;
}

.route-map__line li::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--line-basic);
}

.route-map__line li:nth-child(8n + 1)::before { left: 50%; }
.route-map__line li:nth-child(8n)::before { right: 50%; }
.route-map__line li.line-adv1::before { background: var(--line-adv1); }
.route-map__line li.line-adv2::before { background: var(--line-adv2); }
.route-map__line li.line-prac::before { background: var(--line-prac); }

.route-map__line a,
.route-map__line span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    color: var(--ink);
    background: #ffffff;
    border: 2px solid var(--ink);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 12px;
    line-height: 1;
}

.route-map__line .is-done a {
    color: #ffffff;
    background: var(--blue);
    border-color: var(--blue);
}

.route-map__line .is-current span {
    width: 40px;
    height: 40px;
    margin-top: -3px;
    color: #ffffff;
    background: var(--ink);
    font-size: 14px;
}

/* ---------- ボタン ---------- */

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 9px 9px 9px 28px;
    color: #ffffff;
    background: var(--ink);
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.btn-arrow {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--ink);
    background: #ffffff;
    border-radius: 50%;
    font-size: 22px;
    transition: transform 0.2s ease;
}

.btn-primary:hover .btn-arrow { transform: translateX(3px); }

.btn-ghost,
.chip {
    padding: 11px 20px;
    color: var(--ink);
    background: #ffffff;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

.btn-ghost:hover,
.chip:hover { background: var(--blue-pale); }

.btn-ghost:disabled {
    color: var(--muted);
    border-color: var(--line);
    background: transparent;
    cursor: default;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid var(--c-bike);
    outline-offset: 3px;
}

/* ---------- 選択肢（予想・確認問題） ---------- */

.option-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.option-list button {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    padding: 20px 26px;
    color: var(--ink);
    background: #ffffff;
    border: 2px solid var(--line);
    border-radius: 18px;
    font: inherit;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.6;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.option-list button b { font-size: 22px; }

.option-list button span {
    color: var(--muted);
    font-size: 17px;
    font-weight: 500;
}

.option-list button:hover { border-color: var(--ink); }

.option-list button[aria-pressed="true"] {
    background: var(--blue-pale);
    border-color: var(--ink);
}

.option-list--quiz button.is-correct {
    background: var(--blue-pale);
    border-color: var(--blue);
}

.option-list--quiz button.is-correct::after,
.option-list--quiz button.is-wrong::after {
    margin-left: auto;
    font-size: 16px;
    font-weight: 700;
}

.option-list--quiz button.is-correct::after { content: "正解"; color: var(--blue); }

.option-list--quiz button.is-wrong {
    color: var(--muted);
    border-style: dashed;
}

.option-list--quiz button.is-wrong::after { content: "もう一度"; color: var(--muted); }

.feedback {
    min-height: 3.6em;
    margin: 16px 0 0;
    color: var(--ink-soft);
    font-size: 19px;
    line-height: 1.8;
}

/* ---------- 操作教材 ---------- */

.lab {
    padding: 26px 28px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 22px;
}

.lab__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.lab__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.lab__total {
    min-height: 3.4em;
    margin: 12px 0 0;
    color: var(--ink-soft);
    font-size: 17px;
    line-height: 1.75;
}

.dot-grid {
    display: grid;
    grid-template-columns: repeat(20, minmax(0, 1fr));
    gap: 6px;
}

.dot-grid i {
    display: block;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--line);
    transform: scale(0.4);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.dot-grid i.is-in {
    transform: scale(1);
    opacity: 1;
}

.dot-grid i[data-mode="0"], .sw--rail, .bar__fill--rail { background: var(--c-rail); }
.dot-grid i[data-mode="1"], .sw--bus, .bar__fill--bus { background: var(--c-bus); }
.dot-grid i[data-mode="2"], .sw--bike, .bar__fill--bike { background: var(--c-bike); }

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    font-size: 19px;
}

.legend b {
    margin: 0 2px 0 6px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
}

.sw {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: -1px;
}

.control + .control { margin-top: 20px; }

.control__label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--ink-soft);
    font-size: 20px;
}

.control__label output {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 24px;
}

.control input[type="range"] {
    width: 100%;
    height: 24px;
    margin: 0;
    accent-color: var(--ink);
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.bar {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 84px;
    gap: 16px;
    align-items: center;
}

.bar + .bar { margin-top: 18px; }

.bar__name {
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
}

.bar__track {
    position: relative;
    height: 22px;
    background: #eef1f4;
    border-radius: 11px;
}

.bar__fill {
    display: block;
    height: 100%;
    border-radius: 11px;
    transition: width 0.25s ease;
}

.bar__base {
    position: absolute;
    top: -6px;
    bottom: -6px;
    width: 3px;
    margin-left: -1.5px;
    background: var(--ink);
}

.bar__value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    text-align: right;
}

.bars__note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 16px;
}

.base-mark {
    display: inline-block;
    width: 3px;
    height: 18px;
    background: var(--ink);
}

.why {
    margin-top: 26px;
    padding: 20px 24px;
    background: var(--blue-pale);
    border-radius: 16px;
}

.why__label {
    margin: 0 0 6px;
    color: var(--blue);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.why__list {
    min-height: 8.6em;
    margin: 0;
    padding-left: 1.3em;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.75;
}

.predict-check {
    margin: 24px 0 0;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
    color: var(--ink-soft);
    font-size: 18px;
    line-height: 1.75;
}

/* ---------- 式 ---------- */

.word-formula {
    margin: 28px 0 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 2.1;
}

.word-formula span {
    padding: 3px 10px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.fx {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 26px 20px;
    background: #ffffff;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-math);
    font-size: 40px;
    line-height: 1.4;
}

.fx--small {
    margin-top: 22px;
    font-size: 26px;
    text-align: center;
}

.fx i { font-style: italic; }
.fx sub { font-size: 0.62em; }

.fx__frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.fx__num,
.fx__den { padding: 0 20px; }

.fx__num {
    padding-bottom: 6px;
    border-bottom: 2px solid var(--ink);
}

.fx__den { padding-top: 6px; }

.fx-tag {
    margin-left: 6px;
    color: var(--blue);
    font-family: var(--font-jp);
    font-size: 0.45em;
    font-style: normal;
    vertical-align: super;
}

.symbol-list { margin: 18px 0 0; }

.symbol-list div {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.symbol-list dt {
    font-family: var(--font-math);
    font-size: 25px;
    white-space: nowrap;
}

.symbol-list dt sub { font-size: 0.65em; }

.symbol-list dd {
    margin: 0;
    color: var(--ink-soft);
    font-size: 18px;
    line-height: 1.7;
}

.symbol-list strong { color: var(--ink); }

/* ---------- 計算表 ---------- */

.setting-tag {
    margin: 0;
    color: var(--ink-soft);
    font-size: 19px;
    line-height: 1.85;
}

.setting-tag b {
    display: inline-block;
    margin: 0 12px 8px 0;
    padding: 1px 14px;
    color: var(--ink);
    background: #ffffff;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    font-size: 16px;
}

.table-wrap {
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 18px;
}

.calc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 20px;
}

.calc-table th,
.calc-table td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--line);
    text-align: right;
    white-space: nowrap;
}

.calc-table th:first-child { text-align: left; }

.calc-table thead th {
    color: var(--muted);
    font-size: 16px;
    font-weight: 700;
}

.calc-table tbody td {
    font-family: var(--font-display);
    font-size: 20px;
}

.calc-table tr:last-child > * { border-bottom: 0; }
.calc-sum > * { background: #f4f6f8; }

.calc [data-step] { transition: opacity 0.3s ease; }
.calc [data-step].is-hidden { opacity: 0; }

.calc-note {
    min-height: 3.6em;
    margin: 18px 0 14px;
    color: var(--ink-soft);
    font-size: 19px;
    line-height: 1.8;
}

/* ---------- IIA・注意・まとめ ---------- */

.ratio-box {
    padding: 20px 26px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 18px;
}

.ratio-box__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0;
    padding: 6px 0;
    font-size: 19px;
}

.ratio-box__row b {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 400;
}

.ratio-box__caption {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 16px;
}

.caution {
    padding: 22px 26px;
    border: 2px dashed var(--c-bus);
    border-radius: 18px;
}

.caution p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 20px;
    line-height: 1.85;
}

.caution p + p { margin-top: 10px; }

.caution .caution__label {
    margin-bottom: 6px;
    color: #b85a1d;
    font-size: 16px;
    font-weight: 700;
}

.pitfalls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.pitfalls li {
    padding-top: 22px;
    border-top: 2px solid var(--ink);
}

.pitfalls__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 12px;
    font-size: 23px;
    font-weight: 900;
}

.pitfalls__head span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    color: #ffffff;
    background: var(--ink);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 15px;
}

.pitfalls li > p:last-child {
    margin: 0;
    color: var(--ink-soft);
    font-size: 19px;
    line-height: 1.85;
}

.summary-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sum;
}

.summary-list li {
    position: relative;
    padding: 10px 0 10px 46px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 20px;
    line-height: 1.7;
    counter-increment: sum;
}

.summary-list li::before {
    content: counter(sum, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 13px;
    color: var(--blue);
    font-family: var(--font-display);
    font-size: 16px;
}

.next-question {
    padding: 32px 34px;
    color: #ffffff;
    background: var(--ink);
    border-radius: 22px;
}

.next-question__label {
    margin: 0 0 10px;
    color: #9cc3df;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.next-question__text {
    margin: 0 0 24px;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.75;
}

.next-question .btn-primary {
    color: var(--ink);
    background: #ffffff;
}

.next-question .btn-arrow {
    color: #ffffff;
    background: var(--ink);
}

.refs {
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}

/* ---------- 下部の移動バー ---------- */

.pager {
    z-index: 30;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: min(520px, 100%);
    margin: 0 auto;
    padding: 5px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.pager__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.pager__btn--next {
    color: #ffffff;
    background: var(--ink);
    border-color: var(--ink);
}

.pager__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.pager__count {
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pager__count b {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 400;
}

.pager__title {
    margin-left: 10px;
    color: var(--ink-soft);
    font-weight: 700;
}

/* ========================================
   縦に流れる表示（スマホ・一覧で読む）
   作業面の寸法を一定の倍率で縮小して使う．
======================================== */

.is-flow .canvas {
    zoom: 0.74;
    padding: 56px 72px 56px;
}

.is-flow .panel-track {
    transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.24, 1), height 0.3s ease;
}

.is-flow .pager {
    position: sticky;
    bottom: 12px;
    margin-top: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.is-flow .lesson-top {
    margin-bottom: 10px;
}

.lesson.is-list .panel-track {
    flex-direction: column;
    height: auto !important;
    transform: none !important;
}

.lesson.is-list .panel {
    border-bottom: 1px solid var(--line);
}

.lesson.is-list .panel:last-child { border-bottom: 0; }

.lesson.is-list .pager,
.lesson.is-list .lesson-progress,
.lesson.is-list [data-next].btn-primary { display: none; }

/* スマホ幅：1列に並べ直す */
.is-narrow .lesson-top {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
}

.is-narrow .lesson-progress {
    grid-column: 1 / -1;
    grid-row: 2;
}

.is-narrow .canvas {
    zoom: 0.72;
    padding: 72px 30px 60px;
}

.is-narrow .split,
.is-narrow .split--cover {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
}

.is-narrow .side-label {
    top: 26px;
    left: 30px;
    right: auto;
    writing-mode: horizontal-tb;
    font-size: 15px;
}

.is-narrow .panel-title { font-size: 38px; }
.is-narrow .panel-title--big { font-size: 44px; }
.is-narrow .cover-title { font-size: 44px; }
.is-narrow .cover-bg-word { font-size: 120px; top: 70px; }
.is-narrow .prose { font-size: 23px; }
.is-narrow .dot-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.is-narrow .pitfalls { grid-template-columns: minmax(0, 1fr); }
.is-narrow .stripe--a { left: 30px; bottom: 20px; }
.is-narrow .stripe--b { right: 30px; top: 24px; }
.is-narrow .pager__title { display: none; }
.is-narrow .why__list,
.is-narrow .feedback,
.is-narrow .calc-note { min-height: 0; }

@media (prefers-reduced-motion: reduce) {
    .panel-track,
    .dot-grid i,
    .bar__fill { transition: none !important; }
}

/* ========================================
   追加の部品（全単元で共通）
   寸法はすべて作業面上の px．
======================================== */

:root {
    --c-bus2: #f2b07a;
    --c-grey: #9aa8b4;
    --c-green: #4f9a7a;
}

.sw--bus2, .bar__fill--bus2, .dot-grid i[data-mode="3"] { background: var(--c-bus2); }
.sw--grey, .bar__fill--grey { background: var(--c-grey); }
.sw--green, .bar__fill--green { background: var(--c-green); }

.split--wide-left { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.split--wide-right { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }

.col-lead--gap { margin-top: 26px; }

/* 横並びの選択肢（3つ程度） */
.option-list--row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.option-list--row button {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

[data-self="after"].option-list--row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 表のバリエーション */
.calc-table--text td {
    font-family: var(--font-jp);
    font-size: 19px;
    text-align: left;
    white-space: normal;
}

.calc-table--text th,
.calc-table--text thead th {
    text-align: left;
}

.calc-table--text td,
.calc-table--text th {
    line-height: 1.55;
}

.calc-table--mono td {
    font-family: var(--font-display);
    font-size: 19px;
}

.calc-table--compact th,
.calc-table--compact td {
    padding: 8px 16px;
    font-size: 17px;
}

.calc-table--sum tbody tr:last-child > * {
    background: #f4f6f8;
}

.calc-table tr.is-off > * {
    color: var(--muted);
    text-decoration: line-through;
    background: #f4f6f8;
}

.calc-table caption {
    padding: 12px 20px;
    color: var(--muted);
    font-size: 16px;
    font-weight: 700;
    text-align: left;
}

.calc-table b {
    font-family: var(--font-display);
    font-weight: 400;
}

/* 流れ図 */
.flow {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 0;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: flow;
}

.flow li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 26px 18px 18px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-right: 0;
}

.flow li:first-child { border-radius: 16px 0 0 16px; }
.flow li:last-child { border-right: 1px solid var(--line); border-radius: 0 16px 16px 0; }

.flow li:not(:last-child)::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: -14px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: #ffffff;
    background: var(--ink);
    border-radius: 50%;
    font-size: 14px;
    transform: translateY(-50%);
}

.flow b {
    font-size: 20px;
    font-weight: 900;
}

.flow span {
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.6;
}

.col .flow { margin-top: 0; }

/* 見出しと説明の組（縦に並べる） */
.kv {
    margin: 0;
    border-top: 2px solid var(--ink);
}

.kv div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.kv dt {
    font-size: 20px;
    font-weight: 900;
}

.kv dd {
    margin: 0;
    color: var(--ink-soft);
    font-size: 19px;
    line-height: 1.7;
}

/* 番号付きの手順 */
.steps-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: st;
}

.steps-list li {
    position: relative;
    padding: 16px 0 16px 52px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 20px;
    line-height: 1.7;
    counter-increment: st;
}

.steps-list li:first-child { border-top: 2px solid var(--ink); }

.steps-list li::before {
    content: counter(st);
    position: absolute;
    left: 0;
    top: 17px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #ffffff;
    background: var(--ink);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 14px;
}

/* 切り替えボタン */
.seg {
    margin: 0 0 18px;
}

.seg__label {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 16px;
    font-weight: 700;
}

.seg__buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 4px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 999px;
}

.seg__buttons button {
    padding: 9px 18px;
    color: var(--ink-soft);
    background: transparent;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

.seg__buttons button[aria-pressed="true"] {
    color: #ffffff;
    background: var(--ink);
}

/* 分類の演習 */
.sort-lab {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sort-row {
    padding: 14px 18px;
    background: #ffffff;
    border: 1.5px solid var(--line);
    border-radius: 14px;
}

.sort-row p {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
}

.sort-row__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sort-row__buttons button {
    padding: 6px 12px;
    color: var(--ink-soft);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.sort-row__buttons button[aria-pressed="true"] {
    color: #ffffff;
    background: var(--ink);
    border-color: var(--ink);
}

.sort-row.is-right { border-color: var(--blue); }
.sort-row.is-wrong { border-style: dashed; border-color: var(--c-bus); }
.sort-row.is-right p::after { content: "　○"; color: var(--blue); }
.sort-row.is-wrong p::after { content: "　×"; color: #b85a1d; }

.sort-lab .feedback { margin-top: 4px; }

/* 数値の表示 */
.stat-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 4px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 18px;
}

.stat-row div {
    padding: 18px 24px;
}

.stat-row div + div { border-left: 1px solid var(--line); }

.stat-row span {
    display: block;
    color: var(--muted);
    font-size: 16px;
    font-weight: 700;
}

.stat-row b {
    display: block;
    margin-top: 4px;
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 400;
}

.lab-stat {
    margin: 18px 0 0;
    color: var(--ink-soft);
    font-size: 18px;
}

.lab-stat b {
    margin: 0 18px 0 6px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
}

.btn-download {
    display: inline-block;
    margin-top: 18px;
    text-decoration: none;
}

.setting-tag--data b {
    color: #ffffff;
    background: var(--ink);
}

.setting-tag + .control,
.setting-tag + .prose { margin-top: 18px; }

.part-summary {
    margin-bottom: 22px;
    padding: 18px 22px;
    border: 1.5px solid var(--ink);
    border-radius: 16px;
}

.part-summary p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 18px;
    line-height: 1.75;
}

.part-summary .part-summary__label {
    margin-bottom: 6px;
    color: var(--blue);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.feedback--quiz { min-height: 5.4em; }

.panel-title sub,
.option-list sub { font-size: 0.65em; }

/* 縦に流れる表示（スマホ） */
.is-narrow .option-list--row,
.is-narrow [data-self="after"].option-list--row { grid-template-columns: minmax(0, 1fr); }
.is-narrow .flow { grid-auto-flow: row; }
.is-narrow .flow li { border-right: 1px solid var(--line); border-bottom: 0; border-radius: 0; }
.is-narrow .flow li:first-child { border-radius: 16px 16px 0 0; }
.is-narrow .flow li:last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 16px 16px; }
.is-narrow .flow li:not(:last-child)::after { content: "↓"; top: auto; bottom: -14px; right: 50%; transform: translateX(50%); }
.is-narrow .kv div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.is-narrow .stat-row { grid-template-columns: minmax(0, 1fr); }
.is-narrow .stat-row div + div { border-left: 0; border-top: 1px solid var(--line); }

.fx > span { min-width: 0; max-width: 100%; text-align: center; overflow-wrap: anywhere; }

.lab-stat--top { margin: 0 0 18px; }

.sort-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 14px;
    padding: 12px 16px;
}

.sort-row p { margin: 0; font-size: 18px; }
.sort-row__buttons { flex-wrap: nowrap; }
.is-narrow .sort-row { grid-template-columns: minmax(0, 1fr); }
.is-narrow .sort-row__buttons { flex-wrap: wrap; }

/* 二つのグループの棒グラフ */
.bars-title {
    margin: 0 0 10px;
    color: var(--ink-soft);
    font-size: 17px;
    font-weight: 700;
}

.bars + .bars-title { margin-top: 24px; }

.stat-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-row--3 b { font-size: 28px; }
.stat-row + .bars,
.stat-row + .why,
.stat-row + .predict-check { margin-top: 20px; }

/* 木構造（NL） */
.tree {
    margin: 0;
    padding: 18px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 18px;
}

.tree svg { display: block; width: 100%; height: auto; }
.tree__l { fill: none; stroke: var(--ink); stroke-width: 2; }
.tree__box { fill: #ffffff; stroke: var(--ink); stroke-width: 2; }
.tree__box--nest { fill: var(--ink); }
.tree__box--bus { fill: #fbe4d2; stroke: var(--c-bus); }
.tree__box--bus2 { fill: #fdf0e4; stroke: var(--c-bus2); }
.tree__t { fill: var(--ink); font-size: 17px; font-weight: 700; font-family: var(--font-jp); }
.tree__t--w { fill: #ffffff; }

/* 道路網（RL） */
.net {
    margin: 0 0 18px;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 18px;
}

.net svg { display: block; width: 100%; height: auto; }
.net__l { fill: none; stroke: var(--c-bike); stroke-width: 6; stroke-linecap: round; }
.net__t { fill: var(--ink); font-size: 18px; font-weight: 700; font-family: var(--font-jp); }
.net__n { fill: #ffffff; stroke: var(--ink); stroke-width: 3; }
.net__n--o { fill: var(--ink); }
.net__n--d { fill: var(--c-bus); stroke: var(--c-bus); }
.net__nt { fill: var(--ink); font-size: 20px; font-family: var(--font-display); }
.net__n--o + .net__nt,
.net__n--d + .net__nt { fill: #ffffff; }

/* 時間配分（MDCEV） */
.alloc { margin: 0 0 18px; }

.alloc__bar {
    display: flex;
    height: 54px;
    overflow: hidden;
    background: #eef1f4;
    border-radius: 14px;
}

.alloc__seg {
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    transition: width 0.25s ease;
}

.alloc__seg--home { background: var(--c-bus); }
.alloc__seg--shop { background: var(--c-bus2); color: var(--ink); }
.alloc__seg--park { background: var(--c-bike); }

/* モデル選択の結果カード（単元14） */
.result-card {
    padding: 26px 28px;
    background: #ffffff;
    border: 2px solid var(--ink);
    border-radius: 20px;
}

.result-card p { margin: 0; }

.result-card__label {
    color: var(--blue);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.result-card__title {
    margin: 6px 0 10px !important;
    font-size: 30px;
    font-weight: 900;
}

.result-card__text {
    color: var(--ink-soft);
    font-size: 19px;
    line-height: 1.75;
}

.result-card__data {
    margin: 14px 0 18px !important;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 17px;
    line-height: 1.7;
}

.result-card__data b {
    display: block;
    color: var(--muted);
    font-size: 15px;
}

.result-card .btn-ghost { display: inline-block; text-decoration: none; }

[data-issue-box] { margin-top: 8px; }

/* データの点検（単元15） */
.flag {
    padding: 4px 12px;
    color: var(--ink-soft);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.flag[aria-pressed="true"] {
    color: #ffffff;
    background: var(--c-bus);
    border-color: var(--c-bus);
}

.check-table tr.is-right > th:first-child::after { content: " ○"; color: var(--blue); }
.check-table tr.is-wrong > th:first-child::after { content: " ×"; color: #b85a1d; }
.check-table tr.is-wrong > * { background: #fdf3ec; }

.stack .chip-row { margin-top: 16px; }
.stack .table-wrap + .chip-row { margin-top: 18px; }

/* 見出しの折り返し：行の途中で単語を切らない */
.nb { white-space: nowrap; }
.panel-title,
.cover-title,
.question-line p,
.next-question__text,
.pitfalls__head,
.result-card__title {
    word-break: auto-phrase;
    text-wrap: balance;
}

/* ========================================
   単元を選ぶメニュー（どのステップからでも開ける）
======================================== */

.lesson-top { position: relative; }

.lesson-tools {
    display: flex;
    gap: 6px;
}

.mode-toggle[aria-expanded="true"] {
    color: #ffffff;
    background: var(--ink);
    border-color: var(--ink);
}

.unit-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    box-sizing: border-box;
    width: min(1180px, 100%);
    max-height: min(78vh, 620px);
    overflow-y: auto;
    padding: 18px 20px 16px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(12, 44, 71, 0.12);
}

.unit-menu__groups {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 18px;
}

.unit-menu__part {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.unit-menu__part span {
    width: 18px;
    height: 5px;
    border-radius: 3px;
    background: var(--line-basic);
}

.unit-menu__group--adv1 .unit-menu__part span { background: var(--line-adv1); }
.unit-menu__group--adv2 .unit-menu__part span { background: var(--line-adv2); }
.unit-menu__group--prac .unit-menu__part span { background: var(--line-prac); }

.unit-menu ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.unit-menu li a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 0 10px;
    padding: 6px 8px;
    color: var(--ink);
    border-radius: 10px;
    font-size: 14px;
    text-decoration: none;
}

.unit-menu li a:hover { background: var(--blue-pale); }

.unit-menu__num {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 10px;
}

.unit-menu li a.is-done .unit-menu__num {
    color: #ffffff;
    background: var(--blue);
    border-color: var(--blue);
}

.unit-menu li a[aria-current="page"] {
    background: var(--blue-pale);
    font-weight: 700;
}

.unit-menu li a[aria-current="page"] .unit-menu__num {
    color: #ffffff;
    background: var(--ink);
    border-color: var(--ink);
}

.unit-menu__name { font-weight: 700; }

.unit-menu__state {
    grid-column: 2;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.unit-menu__state:empty { display: none; }
.unit-menu__num { grid-row: span 2; }
.unit-menu__name { line-height: 1.45; }

.unit-menu__top {
    display: inline-block;
    margin-top: 12px;
    color: var(--blue);
    font-size: 14px;
    font-weight: 700;
}

.cover-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
}

.is-narrow .unit-menu__groups { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .unit-menu__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.is-narrow .unit-menu { width: 100%; }

/* 縦に読む流れ図（単元01「行動モデルの考え方」） */
.chain-v {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: chain;
}

.chain-v li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 0 26px 62px;
    counter-increment: chain;
}

.chain-v li:last-child { padding-bottom: 0; }

.chain-v li::before {
    content: counter(chain);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: #ffffff;
    background: var(--ink);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 16px;
}

.chain-v li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 44px;
    bottom: 4px;
    width: 2px;
    background: var(--line);
}

.chain-v li:last-child::before { background: var(--c-bus); }

.chain-v b {
    padding-top: 6px;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.5;
}

.chain-v span {
    color: var(--ink-soft);
    font-size: 19px;
    line-height: 1.7;
}

.chain-v + .col-note { margin-top: 26px; }

/* スマホ幅：単元名とボタンが重ならないようにする */
.is-narrow .lesson-crumb {
    min-width: 0;
    overflow: hidden;
    font-size: 11px;
}

.is-narrow .lesson-tools .mode-toggle {
    padding: 5px 10px;
    font-size: 12px;
}

/* 路線図：15駅なので，最後の駅で線を止める */
.route-map__line li:last-child::before { right: 50%; }

/* ---- まとめ：段落で書くまとめと，複数のリンク（2026-10-25 追加） ---- */
.summary-prose p {
    font-size: 20px;
}

.next-question__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.next-question .btn-ghost {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.55);
    background: transparent;
}

/* 説明文のすぐ後に操作部品が続くとき（2026-10-25 追加） */
.prose + .control,
.prose + .seg,
.prose + .col-lead,
.prose + .chip-row { margin-top: 22px; }

/* ===== 単元01：政策の問いと行動モデルの役割（2026-10-25 追加） ===== */
.policy-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.policy-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 22px 18px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-top: 5px solid var(--blue);
    border-radius: 16px;
}

.policy-card__q {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.55;
}

.policy-card__kind {
    align-self: flex-start;
    margin: 0;
    padding: 3px 12px;
    color: var(--ink);
    background: var(--blue-pale);
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
}

.policy-card dl { margin: 4px 0 0; }

.policy-card dl div {
    padding: 6px 0;
    border-top: 1px solid var(--line);
}

.policy-card dt {
    color: var(--muted);
    font-size: 15px;
    font-weight: 700;
}

.policy-card dd {
    margin: 2px 0 0;
    color: var(--ink-soft);
    font-size: 17px;
    line-height: 1.6;
}

/* 入力 → モデル → 出力 */
.model-flow {
    margin: 0;
    padding: 0;
    list-style: none;
}

.model-flow > li {
    position: relative;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.model-flow > li:first-child { border-top: 0; padding-top: 0; }

.model-flow__label {
    margin: 0;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.45;
}

.model-flow__label small {
    display: block;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.model-flow__body {
    margin: 0;
    color: var(--ink-soft);
    font-size: 18px;
    line-height: 1.6;
}

.model-flow__body b { color: var(--ink); }

.model-flow > li.is-model {
    margin: 4px 0;
    padding: 14px 16px;
    background: var(--blue-pale);
    border: 2px solid var(--blue);
    border-radius: 14px;
}

.model-flow > li.is-model + li { border-top: 0; }

.model-flow .fx { margin: 4px 0; }

/* 一日の時間の内訳（帯グラフ） */
.daybars { display: grid; gap: 16px; }

.daybar__title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
}

.daybar {
    display: flex;
    height: 52px;
    overflow: hidden;
    border-radius: 10px;
}

.daybar span {
    display: grid;
    place-items: center;
    min-width: 0;
    overflow: hidden;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    border-right: 2px solid #ffffff;
}

.daybar .d-sleep { background: #6d8597; }
.daybar .d-work { background: var(--ink); }
.daybar .d-commute { background: var(--c-bike); }
.daybar .d-house { background: var(--c-bus); }
.daybar .d-life { background: #9aa8b4; }
.daybar .d-free { background: var(--blue); }
.daybar .d-unknown {
    color: var(--ink);
    background: repeating-linear-gradient(45deg, #ffffff 0 6px, var(--blue-pale) 6px 12px);
    border: 2px dashed var(--blue);
}

.daybar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    color: var(--ink-soft);
    font-size: 15px;
}

.daybar-legend i {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    vertical-align: -1px;
    border-radius: 3px;
}

/* 時刻別の出発台数 */
.depart-chart { max-width: 600px; }
.depart-chart svg { display: block; width: 100%; height: auto; }
.depart-chart .dc-bar { fill: var(--c-bike); }
.depart-chart .dc-bar.is-over { fill: var(--c-bus); }
.depart-chart .dc-cap { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 5; }
.depart-chart text { fill: var(--ink-soft); font-family: var(--font-jp); font-size: 15px; }
.depart-chart .dc-axis { stroke: var(--line); stroke-width: 2; }

.is-narrow .policy-cards { grid-template-columns: minmax(0, 1fr); }
.is-narrow .model-flow > li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.prose + .kv { margin-top: 18px; }

/* ===== 単元00：一日の行動のタイムライン（2026-10-25 追加） ===== */
.day-line {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.day-line::before {
    content: "";
    position: absolute;
    left: 106px;
    top: 24px;
    bottom: 24px;
    width: 3px;
    background: var(--line);
}

.day-line li {
    position: relative;
    display: grid;
    grid-template-columns: 76px 54px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 4px 0;
}

.day-line__time {
    margin: 0;
    padding-top: 12px;
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.4;
    text-align: right;
}

.day-line__icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    background: #ffffff;
    border: 2px solid var(--line);
    border-radius: 50%;
}

.day-line__icon svg { width: 32px; height: 32px; }

.day-line li.is-key .day-line__icon { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-pale); }

.day-line__act {
    margin: 0;
    padding-top: 8px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
}

.day-line__tag {
    display: inline-block;
    margin: 4px 8px 0 0;
    padding: 3px 14px;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
}

.day-line__tag--choice { color: #ffffff; background: var(--blue); }
.day-line__tag--cond { color: var(--ink); background: #fbe3d2; }

.is-narrow .day-line::before { left: 89px; }
.is-narrow .day-line li { grid-template-columns: 56px 44px minmax(0, 1fr); gap: 12px; }
.is-narrow .day-line__icon { width: 44px; height: 44px; }
.is-narrow .day-line__icon svg { width: 26px; height: 26px; }
.is-narrow .day-line__time { font-size: 16px; padding-top: 10px; }
.is-narrow .day-line__act { font-size: 19px; padding-top: 6px; }
.policy-card__text {
    margin: 4px 0 0;
    color: var(--ink-soft);
    font-size: 18px;
    line-height: 1.75;
}
.method-box {
    padding: 18px 22px;
    background: var(--blue-pale);
    border-radius: 14px;
}
.method-box__title { margin: 0 0 6px; font-size: 16px; font-weight: 900; }
.method-box p { margin: 0 0 8px; color: var(--ink-soft); font-size: 17px; line-height: 1.7; }
[data-method-toggle] { margin-top: 14px; }
[data-stage-text] { margin-top: 14px; }
[data-lab="u01-newline"] .bar { grid-template-columns: 80px minmax(0, 1fr) 190px; }
[data-lab="u01-newline"] .bar__value { white-space: nowrap; font-size: 20px; }
.is-narrow [data-lab="u01-newline"] .bar { grid-template-columns: 76px minmax(0, 1fr) 128px; gap: 8px; }
.is-narrow [data-lab="u01-newline"] .bar__value { font-size: 13px; }

/* 政策カード：アイコンと，政策 → 選択 → 分かること の縦の流れ（2026-10-25 追加） */
.policy-card__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    background: var(--blue-pale);
    border-radius: 14px;
}

.policy-card__icon svg { width: 34px; height: 34px; }

.policy-flow {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.policy-flow li {
    position: relative;
    padding: 9px 14px;
    color: var(--ink-soft);
    background: #f3f5f7;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

.policy-flow li + li { margin-top: 22px; }

.policy-flow li + li::before {
    content: "↓";
    position: absolute;
    left: 50%;
    top: -21px;
    transform: translateX(-50%);
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
}

.policy-flow li.is-choice {
    color: #ffffff;
    background: var(--blue);
}
.policy-card__head {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}
.policy-card__head .policy-card__q { font-size: 21px; line-height: 1.5; }
.policy-flow li { padding: 7px 14px; }
.policy-flow li + li { margin-top: 18px; }
.policy-flow li + li::before { top: -18px; font-size: 15px; }

/* 単元01：新線の利用者数を見積もる3段階（2026-10-25 追加） */
.nf { margin: 0; padding: 0; list-style: none; }
.nf-step {
    position: relative;
    padding: 14px 18px 16px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 14px;
}
.nf-step + .nf-step { margin-top: 26px; }
.nf-step + .nf-step::before {
    content: "↓";
    position: absolute;
    left: 50%;
    top: -25px;
    transform: translateX(-50%);
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
}
.nf-step--model { background: var(--blue-pale); border: 2px solid var(--blue); }
.nf-step__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.4;
}
.nf-step__head span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: #ffffff;
    background: var(--ink);
    border-radius: 50%;
    font-size: 15px;
}
.nf-step__head em {
    padding: 2px 10px;
    color: #ffffff;
    background: var(--blue);
    border-radius: 999px;
    font-size: 14px;
    font-style: normal;
}
.nf-mode {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nf-mode li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 8px;
    align-items: center;
    padding: 6px 10px;
    background: #f3f5f7;
    border-radius: 10px;
}
.nf-mode__icon { grid-row: span 2; }
.nf-mode__icon svg { display: block; width: 34px; height: 34px; }
.nf-mode b { font-size: 17px; line-height: 1.3; }
.nf-mode li > span:last-child { color: var(--muted); font-size: 14px; line-height: 1.3; }
.nf-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.nf-chain b {
    padding: 5px 12px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 17px;
    line-height: 1.4;
}
.nf-step:not(.nf-step--model) .nf-chain b { background: #f3f5f7; border-color: transparent; }
.nf-chain b.is-fx { color: #ffffff; background: var(--blue); border-color: var(--blue); }
.nf-chain i { color: var(--muted); font-style: normal; font-weight: 700; }
.nf-note { margin: 8px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
.nf-people { display: inline-flex; gap: 2px; color: var(--c-rail); }
.nf-person svg { display: block; width: 20px; height: 20px; }
.is-narrow .nf-mode { grid-template-columns: minmax(0, 1fr); }
.nf-step__head { font-size: 21px; }
.nf-mode b { font-size: 19px; }
.nf-mode li > span:last-child { font-size: 15px; }
.nf-mode__icon svg { width: 40px; height: 40px; }
.nf-mode li { grid-template-columns: 40px minmax(0, 1fr); padding: 8px 12px; }
.nf-chain b { font-size: 18px; padding: 6px 12px; }
.nf-note { font-size: 17px; }
.nf-person svg { width: 24px; height: 24px; }

/* =====================================================================
   2026-10-25 追加：単元01の図の補足，単元02「効用からロジットモデルへ」，単元03の推定
   既存の部品は変えず，新しいクラスだけを追加する．
===================================================================== */

/* 路線図：14単元を7個ずつ2段に並べる */
.route-map__line { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.route-map__line li:nth-child(8n + 1)::before { left: 0; }
.route-map__line li:nth-child(8n)::before { right: 0; }
.route-map__line li:nth-child(7n + 1)::before { left: 50%; }
.route-map__line li:nth-child(7n)::before { right: 50%; }

/* 単元01：一人ひとりの確率と，合計の見込み人数 */
.nf-step__head em.is-plain { color: var(--muted); background: #f3f5f7; }
.nf-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.nf-pp { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nf-pp li { display: grid; justify-items: center; gap: 2px; color: var(--c-rail); }
.nf-pp small { color: var(--ink); font-family: var(--font-display); font-size: 15px; }
.nf-sum__total { display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: baseline; margin: 0; padding: 6px 14px; background: #f3f5f7; border-radius: 10px; }
.nf-sum__total span { color: var(--ink-soft); font-size: 16px; }
.nf-sum__total b { font-family: var(--font-display); font-size: 24px; font-weight: 400; }
.nf-sum__total small { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }

/* 単元01：記録 → 関係 → 予測 */
.rec-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0 0 16px; padding: 0; list-style: none; }
.rec-flow li { position: relative; padding: 10px 12px; color: var(--muted); background: #f3f5f7; border: 2px solid transparent; border-radius: 12px; transition: all 0.2s ease; }
.rec-flow li + li::before { content: "→"; position: absolute; left: -19px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; }
.rec-flow b { display: block; font-size: 17px; line-height: 1.4; }
.rec-flow span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; }
.rec-flow li.is-on { color: var(--ink); background: var(--blue-pale); border-color: var(--blue); }
.chart-limit { margin: 12px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.is-narrow .rec-flow { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.is-narrow .rec-flow li + li::before { content: "↓"; left: 50%; top: -17px; transform: translateX(-50%); }

/* 単元02：全体の簡略図（どの段階を説明しているか） */
.mmap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: mmap; }
.mmap li { position: relative; padding: 6px 8px 6px 30px; color: var(--muted); border-bottom: 3px solid var(--line); counter-increment: mmap; }
.mmap li::before { content: counter(mmap); position: absolute; left: 6px; top: 8px; display: grid; place-items: center; width: 18px; height: 18px; color: #ffffff; background: #b7c3cd; border-radius: 50%; font-size: 12px; font-weight: 700; }
.mmap b { display: block; font-size: 15px; line-height: 1.35; }
.mmap span { display: block; font-size: 13px; line-height: 1.35; }
.mmap li.is-done { color: var(--ink-soft); border-bottom-color: #9fbfd8; }
.mmap li.is-done::before { background: var(--blue); }
.mmap li.is-now { color: var(--ink); border-bottom-color: var(--ink); }
.mmap li.is-now::before { background: var(--ink); }
.is-narrow .mmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 単元02：三つの候補（全画面で同じ並び・色・名前） */
.mode-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.ms { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 8px 12px; background: #ffffff; border: 1px solid var(--line); border-top: 4px solid var(--c-rail); border-radius: 12px; }
.ms--bus { border-top-color: var(--c-bus); }
.ms--bike { border-top-color: var(--c-bike); }
.ms__icon { grid-row: span 3; }
.ms__icon svg { display: block; width: 40px; height: 40px; }
.ms b { font-size: 19px; line-height: 1.3; }
.ms__cond { color: var(--ink-soft); font-size: 16px; line-height: 1.35; }
.ms__q { color: var(--blue); font-family: var(--font-display); font-size: 17px; font-style: normal; }
.is-narrow .mode-strip { gap: 6px; }
.is-narrow .ms { grid-template-columns: minmax(0, 1fr); padding: 6px 8px; }
.is-narrow .ms__icon { display: none; }

/* 展開したロジット式 */
.lfx .fx { padding: 18px 12px; font-size: 26px; }
.lfx .fx__num, .lfx .fx__den { padding-left: 8px; padding-right: 8px; }
.lf-num { padding: 2px 6px; background: var(--blue-pale); border-radius: 6px; }
.lf-labels { display: grid; gap: 6px; margin: 10px 0 0; }
.lf-labels p { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
.lf-tag { display: inline-block; min-width: 3em; margin-right: 10px; padding: 1px 8px; color: var(--ink); border: 1px solid var(--ink); border-radius: 6px; font-size: 14px; font-weight: 700; text-align: center; }
.lf-tag--num { background: var(--blue-pale); border-color: var(--blue); }
.is-narrow .lfx .fx { font-size: 18px; }

/* 単元02：効用の大小を縦の位置で示す図（目盛りなし） */
.uf { padding: 14px 18px 16px; background: #ffffff; border: 1px solid var(--line); border-radius: 14px; }
.uf__who { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.uf__person svg { display: block; width: 22px; height: 22px; color: var(--ink); }
.uf__body { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; height: 260px; }
.uf__axis { position: relative; display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 0 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; text-align: right; border-right: 3px solid var(--ink); }
.uf__axis::before { content: ""; position: absolute; right: -9px; top: -4px; border: 7px solid transparent; border-bottom: 11px solid var(--ink); border-top: 0; }
.uf__marks { position: relative; margin: 0; padding: 0; list-style: none; }
.uf__mark { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: #f3f5f7; border-left: 5px solid var(--c-rail); border-radius: 8px; transition: top 0.35s ease; }
.uf__mark--bus { border-left-color: var(--c-bus); }
.uf__mark--bike { border-left-color: var(--c-bike); }
.uf__icon svg { display: block; width: 30px; height: 30px; }
.uf__mark b { font-size: 18px; }
.uf__u { margin-left: auto; font-family: var(--font-math); font-size: 20px; }
.uf__pick { display: none; padding: 1px 10px; color: #ffffff; background: var(--ink); border-radius: 999px; font-size: 14px; font-style: normal; font-weight: 700; }
.uf__mark.is-pick .uf__pick { display: inline-block; }
.uf__mark.is-pick { background: var(--blue-pale); }

/* 単元02：選択に関わる要因と，式の部分との対応 */
.fac { display: grid; gap: 14px; }
.fac__group { padding: 12px 16px 14px; background: #ffffff; border: 2px solid var(--blue); border-radius: 14px; }
.fac__group--un { border-style: dashed; border-color: var(--muted); }
.fac__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.fac__mark { padding: 1px 10px; color: #ffffff; background: var(--blue); border-radius: 999px; font-size: 14px; }
.fac__group--un .fac__mark { color: var(--ink-soft); background: #e4e9ee; }
.fac__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fac__chips li { padding: 4px 12px; background: var(--blue-pale); border-radius: 8px; font-size: 17px; }
.fac__group--un .fac__chips li { background: #f3f5f7; border: 1px dashed var(--muted); }
.fac__to { margin: 10px 0 0; color: var(--ink-soft); font-size: 16px; }
.fac__to b { margin-left: 6px; color: var(--ink); font-family: var(--font-math); font-size: 22px; font-weight: 400; }

/* 単元02：U＝V＋ε と V＝β_t t＋β_p p の対応 */
.ueq { display: grid; gap: 12px; padding: 16px 18px; background: #ffffff; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.ueq__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font-family: var(--font-math); font-size: 24px; }
.ueq__row--v, .ueq__row--e { padding-left: 18px; border-left: 3px solid var(--line); font-size: 22px; }
.ueq__lhs { min-width: 3.2em; }
.ueq__op { color: var(--ink-soft); }
.ueq__box, .ueq__term { display: inline-grid; justify-items: center; padding: 4px 12px; border-radius: 8px; line-height: 1.3; }
.ueq__box small, .ueq__term small { color: var(--ink-soft); font-family: var(--font-jp); font-size: 13px; }
.ueq__box--v { background: var(--blue-pale); border: 2px solid var(--blue); }
.ueq__box--e { background: #ffffff; border: 2px dashed var(--muted); }
.ueq__box--e.is-known { background: #f3f5f7; }
.ueq__term { background: var(--blue-pale); }
.ueq__term b { font-weight: 400; }
.ueq__chips { color: var(--ink-soft); font-family: var(--font-jp); font-size: 16px; }
.ueq + .symbol-list { margin-top: 12px; }

/* 単元02：Vを時間の項と費用の項に分けた横棒（負の値を0から左へ） */
.vtab + .vbars { margin-top: 14px; }
.vbar { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; align-items: center; }
.vbar + .vbar { margin-top: 10px; }
.vbar__name { font-size: 18px; font-weight: 700; white-space: nowrap; }
.vbar__track { display: flex; justify-content: flex-end; height: 22px; background: repeating-linear-gradient(90deg, transparent 0 calc(33.333% - 1px), var(--line) calc(33.333% - 1px) 33.333%); border-right: 3px solid var(--ink); }
.vbar__seg { display: block; height: 100%; transition: width 0.25s ease; }
.vbar__seg--t { background: var(--ink); }
.vbar__seg--p { background: repeating-linear-gradient(45deg, var(--blue) 0 5px, #9fbfd8 5px 10px); }
.vbars__axis { display: flex; justify-content: space-between; margin: 4px 0 0 112px; color: var(--muted); font-family: var(--font-display); font-size: 14px; }
.vbars__legend { display: flex; align-items: center; gap: 8px; margin: 6px 0 0 112px; color: var(--ink-soft); font-size: 15px; }
.vbars__key { display: inline-block; width: 22px; height: 12px; margin-left: 10px; }
.vbars__key--t { margin-left: 0; background: var(--ink); }
.vbars__key--p { background: repeating-linear-gradient(45deg, var(--blue) 0 5px, #9fbfd8 5px 10px); }

/* 単元02：V と U＝V＋ε（説明用の値） */
.ubar { display: grid; grid-template-columns: 100px minmax(0, 1fr) 96px; gap: 12px; align-items: center; }
.ubar + .ubar { margin-top: 12px; }
.ubar__name { font-size: 18px; font-weight: 700; white-space: nowrap; }
.ubar__track { position: relative; height: 22px; background: #eef1f4; border-radius: 4px; }
.ubar__fill { display: block; height: 100%; background: #9fb3c4; border-radius: 4px; transition: width 0.3s ease; }
.ubar.is-best .ubar__fill { background: var(--ink); }
.ubar__v { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 3px dashed var(--blue); }
.ubar__val { font-family: var(--font-display); font-size: 16px; text-align: right; white-space: nowrap; }
.ubar.is-best .ubar__val::after { content: " 最大"; color: var(--ink); font-family: var(--font-jp); font-size: 14px; font-weight: 700; }
.ubars__axis { display: flex; justify-content: space-between; margin: 4px 108px 0 112px; color: var(--muted); font-family: var(--font-display); font-size: 14px; }
.ubars + .table-wrap { margin-top: 12px; }
.ubars .bars__note { margin-top: 6px; color: var(--ink-soft); font-size: 15px; }
.ubars .base-mark { width: 0; height: 18px; border-left: 3px dashed var(--blue); background: none; }

/* 単元02：選ぶ本人と分析者 */
.persp { display: grid; gap: 12px; margin-bottom: 16px; }
.persp__row { display: grid; grid-template-columns: 96px auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px; background: #ffffff; border: 1px solid var(--line); border-radius: 12px; }
.persp__who { margin: 0; font-size: 17px; font-weight: 900; }
.persp__eq { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-math); font-size: 22px; }
.persp__res { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; }
.is-narrow .persp__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }

/* 補足（開閉） */
.aside { margin-top: 14px; padding: 10px 14px; background: #f6f8fa; border-radius: 10px; font-size: 16px; line-height: 1.7; }
.aside summary { color: var(--blue); font-weight: 700; cursor: pointer; }
.aside p { margin: 8px 0 0; color: var(--ink-soft); }

/* 単元02：100人の実演 */
.sim { margin-top: 14px; }
.sim .dot-grid { gap: 4px; }
.sim .legend { margin-top: 10px; font-size: 17px; }
.sim .legend b { font-size: 20px; }
.sim .lab__total { min-height: 0; margin-top: 8px; font-size: 15px; line-height: 1.6; }

/* 単元02：exp(V) の合計を帯で表す */
.expbar { margin-top: 16px; }
.expbar__title { margin: 0 0 6px; color: var(--ink-soft); font-size: 16px; }
.expbar__band { display: flex; height: 40px; overflow: hidden; border: 2px solid var(--ink); border-radius: 8px; }
.expbar__seg { display: grid; place-items: center; flex-basis: 0; min-width: 0; color: #ffffff; font-size: 15px; transition: flex-grow 0.25s ease; }
.expbar__seg--rail { background: var(--c-rail); }
.expbar__seg--bus { background: var(--c-bus); }
.expbar__seg--bike { background: var(--c-bike); }
.expbar__seg b { font-weight: 700; white-space: nowrap; }
.expbar__fx { margin: 8px 0 0; font-size: 16px; line-height: 1.6; }

/* 単元02・03：全体の流れ（条件 → V → U → P） */
.chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin: 0 0 16px; padding: 0; list-style: none; }
.chain--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chain li { position: relative; padding: 12px 14px; background: #ffffff; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: 12px; font-size: 17px; line-height: 1.55; }
.chain li + li::before { content: "→"; position: absolute; left: -21px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; }
.chain li p { margin: 0; }
.chain__h { margin-bottom: 4px !important; color: var(--blue); font-size: 15px; font-weight: 900; }
.chain__v { margin-top: 6px !important; font-family: var(--font-display); font-size: 16px; }
.chain__s { margin-top: 6px !important; color: var(--ink-soft); font-size: 15px; }
.chain i { font-family: var(--font-math); }
.chain-open { padding: 10px 14px; background: var(--blue-pale); border-left: 4px solid var(--ink); border-radius: 6px; }
.chain-open p { margin: 0; font-size: 17px; line-height: 1.6; }
.chain-open b { margin-right: 12px; }
.chain-open + .prose { margin-top: 14px; }
.is-narrow .chain, .is-narrow .chain--3 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.is-narrow .chain li + li::before { content: "↓"; left: 50%; top: -18px; transform: translateX(-50%); }

/* 単元03：係数と対数尤度のグラフ */
.llcurve { display: block; width: 100%; height: auto; background: #ffffff; border: 1px solid var(--line); border-radius: 12px; }
.llcurve text { fill: var(--ink-soft); font-family: var(--font-jp); font-size: 14px; }
.llcurve .llcurve__label { fill: var(--ink); font-weight: 700; }
.llcurve__grid { stroke: var(--line); }
.llcurve__axis { stroke: var(--ink); stroke-width: 2; }
.llcurve__line { fill: none; stroke: var(--blue); stroke-width: 3; }
.llcurve__best { stroke: var(--ink); stroke-dasharray: 5 5; }
.llcurve__dot { fill: var(--c-bus); stroke: #ffffff; stroke-width: 3; }
.llcurve + .stat-row { margin-top: 12px; }

/* 単元02：見出しの上の1行の簡略図（.mmap を kicker の中に置く） */
.kicker .mmap { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; letter-spacing: 0; }
.mmap__i { padding: 2px 10px; color: var(--muted); background: #f1f3f5; border-radius: 999px; font-size: 14px; font-weight: 700; }
.mmap__i.is-done { color: var(--blue); background: var(--blue-pale); }
.mmap__i.is-now { color: #ffffff; background: var(--ink); }
.uf + .fx--small { margin-top: 12px; }
[data-lab^="u02-"] .why, [data-lab^="u03-"] .why { margin-top: 14px; padding: 12px 18px; }
[data-lab^="u02-"] .why__list, [data-lab^="u03-"] .why__list { min-height: 5.3em; font-size: 17px; line-height: 1.6; }
.mmap__i { font-size: 15px; }
.sim .dot-grid { grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 4px; }
.plan4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.plan4 li { padding: 8px 12px; background: #f3f5f7; border-radius: 10px; font-size: 16px; line-height: 1.5; }
.plan4 b { margin-right: 6px; color: var(--blue); }
.is-narrow .plan4 { grid-template-columns: minmax(0, 1fr); }
[data-lab^="u02-"] .why__list, [data-lab^="u03-"] .why__list { min-height: 4.8em; }
.chip-row + .llcurve { margin-top: 12px; }
.llcurve { aspect-ratio: 560 / 210; }
.llcurve + .chip-row { margin-top: 12px; }
.sim__cap { margin: 0 0 8px; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.sim__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.sim__row .legend { margin: 0; }
.calc-table--tight th, .calc-table--tight td { padding-left: 8px !important; padding-right: 8px !important; }
.uf__body { grid-template-columns: 76px minmax(0, 1fr); }
.mmap__i { padding: 3px 12px; font-size: 16px; }
.is-narrow [data-lab="u02-v"] .calc-table td span { white-space: normal; }
.is-narrow [data-lab="u02-v"] .calc-table { font-size: 15px; }
/* スマートフォン：文章の表は折り返し，数値の多い表は文字を少し小さくして横に切れないようにする */
.is-narrow .calc-table--text th, .is-narrow .calc-table--text td { white-space: normal; }
.is-narrow .calc-table--tight { font-size: 14px; }
.is-narrow .calc-table--tight th, .is-narrow .calc-table--tight td { padding-left: 5px !important; padding-right: 5px !important; }
.is-narrow .calc-table--tight th, .is-narrow .calc-table--tight td { white-space: normal; }

/* 単元02「効用とは」：手段 → 本人の評価 → 効用の高低（2026-10-25 追加） */
.ustep { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.ustep > li { position: relative; }
.ustep > li + li::before { content: "↓"; position: absolute; left: 50%; top: -21px; transform: translateX(-50%); color: var(--muted); font-weight: 700; line-height: 1; }
.ustep__h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--ink-soft); font-size: 15px; font-weight: 700; }
.ustep__h span { display: grid; place-items: center; width: 22px; height: 22px; color: #ffffff; background: var(--ink); border-radius: 50%; font-size: 13px; }
.mode-strip--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.ustep__say { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; background: #ffffff; border: 1px solid var(--line); border-radius: 12px; font-size: 17px; line-height: 1.5; }
.ustep__say .uf__person svg { display: block; width: 26px; height: 26px; color: var(--ink); }
.uf--short { padding: 10px 16px 12px; }
.uf--short .uf__body { height: 130px; }
.uf--short .uf__mark { padding: 4px 12px; }
.ustep .fx--small { margin-top: 8px; padding: 10px; }

/* 単元02：記号の短い説明と，V の共通の表示（2026-10-25 追加） */
.vv { display: inline-block; padding: 0 4px; background: var(--blue-pale); border: 2px solid var(--blue); border-radius: 5px; line-height: 1.2; }
.lf-num { background: none; padding: 0; }
.symnote { display: grid; gap: 4px; margin: 10px 0 0; padding: 8px 12px; background: #f6f8fa; border-radius: 10px; }
.symnote div { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px; align-items: baseline; }
.symnote dt { font-family: var(--font-math); font-size: 18px; white-space: nowrap; }
.symnote dd { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.is-narrow .symnote div { grid-template-columns: minmax(0, 1fr); gap: 0; }
.ustep__rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; padding: 10px 14px; background: var(--blue-pale); border-left: 5px solid var(--ink); border-radius: 8px; font-size: 17px; }
.ustep__rule b { font-size: 17px; }
.ustep__pick { display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 14px; background: #ffffff; border: 2px solid var(--ink); border-radius: 12px; font-size: 18px; }
.ustep__pick b { font-size: 22px; }
.ustep__pick .ms__icon svg { display: block; width: 34px; height: 34px; }
.vlink { margin-top: 14px; padding: 10px 12px; background: #f6f8fa; border-radius: 12px; }
.vlink__h { margin: 0 0 4px; color: var(--ink-soft); font-size: 15px; }
.lfx--mini .fx { padding: 8px; border-top-width: 1px; font-size: 19px; background: transparent; }
.is-narrow .lfx--mini .fx { font-size: 14px; }
.ustep { gap: 16px; }
.ustep > li + li::before { top: -17px; }
.ustep__h { margin-bottom: 4px; }
.uf--short .uf__body { height: 108px; }
.ustep .fx--small { margin-top: 6px; padding: 6px; }
.ustep .symnote { margin-top: 6px; padding: 6px 10px; }

/* 単元02「条件と効用」：条件を一つ変えたときの効用の向き（2026-10-25 追加） */
.seg + .dirfig { margin-top: 14px; }
.dirfig { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 18px; align-items: stretch; padding: 14px 16px; background: #ffffff; border: 1px solid var(--line); border-radius: 14px; }
.dirfig__mode { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 19px; }
.dirfig__mode .ms__icon svg, .dirfig__mark .ms__icon svg { display: block; width: 30px; height: 30px; }
.dirfig__row { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 6px 0 0; padding: 8px 10px; background: #f3f5f7; border-radius: 8px; font-size: 16px; }
.dirfig__row b { font-size: 18px; }
.dirfig__row em { padding: 1px 8px; color: var(--muted); background: #ffffff; border-radius: 999px; font-size: 13px; font-style: normal; font-weight: 700; }
.dirfig[data-dir="time"] [data-row="time"], .dirfig[data-dir="fare"] [data-row="fare"] { background: var(--blue-pale); outline: 2px solid var(--blue); }
.dirfig[data-dir="time"] [data-row="time"] em, .dirfig[data-dir="fare"] [data-row="fare"] em { color: #ffffff; background: var(--ink); }
.dirfig__axis { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; height: 190px; }
.dirfig__track { position: relative; }
.dirfig__ghost, .dirfig__mark { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-size: 16px; font-weight: 700; transition: top 0.35s ease; }
.dirfig__ghost { top: calc(50% - 20px); color: var(--muted); border: 2px dashed #b7c3cd; font-weight: 400; visibility: hidden; }
.dirfig__mark { top: calc(50% - 22px); background: var(--blue-pale); border-left: 5px solid var(--c-rail); }
.dirfig[data-dir="time"] .dirfig__mark { top: 2%; }
.dirfig[data-dir="fare"] .dirfig__mark { top: 74%; }
.dirfig:not([data-dir="base"]) .dirfig__ghost { visibility: visible; }
.dirfig__arrow { position: absolute; right: 14px; width: 0; border-left: 3px solid var(--ink); transition: all 0.35s ease; visibility: hidden; }
.dirfig[data-dir="time"] .dirfig__arrow { visibility: visible; top: 20%; height: 22%; }
.dirfig[data-dir="fare"] .dirfig__arrow { visibility: visible; top: 56%; height: 18%; }
.dirfig__arrow::after { content: ""; position: absolute; left: -8px; border: 7px solid transparent; }
.dirfig[data-dir="time"] .dirfig__arrow::after { top: -10px; border-bottom: 10px solid var(--ink); border-top: 0; }
.dirfig[data-dir="fare"] .dirfig__arrow::after { bottom: -10px; border-top: 10px solid var(--ink); border-bottom: 0; }
.is-narrow .dirfig { grid-template-columns: minmax(0, 1fr); }

/* 単元02：大きく一行で示す式と，各項の直下の説明（2026-10-25 追加） */
.bigeq { display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: center; align-items: start; column-gap: 22px; margin: 26px 0 8px; }
.bigeq__term, .bigeq__op { display: grid; justify-items: center; text-align: center; }
.bigeq__t { margin: 0; height: 64px; display: flex; align-items: center; font-family: var(--font-math); font-size: 42px; line-height: 1.1; white-space: nowrap; }
.bigeq__t sub { font-family: var(--font-jp); font-size: 0.5em; }
.bigeq__op .bigeq__t { color: var(--ink-soft); }
.bigeq__d { max-width: 15em; margin: 8px 0 0; padding-top: 8px; border-top: 2px solid var(--ink); font-size: 19px; font-weight: 700; line-height: 1.5; }
.bigeq__term--v .bigeq__d { border-top-color: var(--blue); }
.bigeq__term--e .bigeq__d { border-top: 2px dashed var(--muted); }
.bigeq__s { max-width: 16em; margin: 4px 0 0; color: var(--ink-soft); font-size: 17px; line-height: 1.5; }
.bigeq__s a { color: var(--blue); }
.bigeq .vv { padding: 2px 10px; border-width: 3px; border-radius: 8px; }
.ee { display: inline-block; padding: 2px 10px; border: 3px dashed var(--muted); border-radius: 8px; line-height: 1.2; }
.bigeq--small { margin-top: 18px; }
.bigeq--small .bigeq__t { height: 46px; font-size: 30px; }
.bigeq .is-dim .bigeq__t { color: #9aa8b4; }
.bigeq-down { margin: 0; color: var(--blue); font-size: 26px; font-weight: 700; text-align: center; line-height: 1; }
.bigeq + .prose { margin-top: 18px; }
/* スマートフォン：横一列をやめ，各項と説明を縦に並べる（式は縮めない） */
.is-narrow .bigeq { grid-auto-flow: row; justify-content: stretch; row-gap: 4px; }
.is-narrow .bigeq__term { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 14px; text-align: left; }
.is-narrow .bigeq__term .bigeq__d, .is-narrow .bigeq__term .bigeq__s { grid-column: 2; max-width: none; }
.is-narrow .bigeq__term .bigeq__t { grid-row: span 2; font-size: 30px; height: auto; }
.is-narrow .bigeq__d { margin: 0; padding: 0 0 0 10px; border-top: 0; border-left: 2px solid var(--ink); font-size: 16px; }
.is-narrow .bigeq__term--v .bigeq__d { border-left-color: var(--blue); }
.is-narrow .bigeq__term--e .bigeq__d { border-left: 2px dashed var(--muted); }
.is-narrow .bigeq__s { padding-left: 12px; font-size: 14px; }
.is-narrow .bigeq__op .bigeq__t { height: auto; font-size: 24px; }
.is-narrow .bigeq--small .bigeq__t { font-size: 22px; }
.bigeq__t sub { vertical-align: -0.35em; margin-left: 1px; }
.bigeq__d { max-width: 18em; }
.bigeq__s { max-width: 20em; }
.bigeq--small { margin-top: 10px; margin-bottom: 0; }
.bigeq--small + .bigeq-down + .bigeq { margin-top: 6px; }
.bigeq__t { display: block; height: auto; min-height: 64px; line-height: 64px; }
.bigeq--small .bigeq__t { min-height: 46px; line-height: 46px; }
.is-narrow .bigeq__term .bigeq__t { line-height: 1.3; min-height: 0; }
.is-narrow .bigeq__op .bigeq__t { line-height: 1.2; min-height: 0; }
/* スマートフォンでも，強調のための小さな U＝V＋ε は横一列のまま */
.is-narrow .bigeq--small { grid-auto-flow: column; justify-content: center; column-gap: 10px; }
.is-narrow .bigeq--small .bigeq__term { display: grid; grid-template-columns: none; justify-items: center; text-align: center; }
.is-narrow .bigeq--small .bigeq__term .bigeq__t { grid-row: auto; }
.is-narrow .bigeq--small .bigeq__term .bigeq__d { grid-column: auto; padding: 4px 0 0; border-left: 0; border-top: 2px solid var(--blue); font-size: 14px; }
.is-narrow .bigeq--small .bigeq__t { font-size: 22px; line-height: 1.3; }
.bigeq__t { height: 64px; }
.bigeq--small .bigeq__t { height: 46px; }
.is-narrow .bigeq__t, .is-narrow .bigeq--small .bigeq__t { height: auto; }
.bigeq-down { margin-top: -4px; }

/* =====================================================================
   v2：サイドバー型の学習画面（2026-10-25 追加）
   ・左：サイドバー（ロゴ，ホーム，一覧で読む，単元一覧と現在の単元のステップ）．PCで232px，折りたたみ可．
   ・中央：高さ46pxの上部バー（単元名と細い進捗線），教材，高さ46pxの下部バー（前へ・番号・次へ）．
   ・教材は縮小せず実寸で表示する．入りきらないときはパネルの中を縦にスクロールする．
   ・以前の「作業面を画面に合わせて縮小する」方式（.is-fit）は v2 では使わない．
===================================================================== */
.v2-page { height: 100%; margin: 0; overflow: hidden; background: #f4f6f8; }
html:has(.v2-page) { height: 100%; scroll-padding-top: 0; }

.lesson.v2 {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
}
.lesson.v2.sb-closed { grid-template-columns: 0 minmax(0, 1fr); }

/* ---------- サイドバー ---------- */
.sb {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #ffffff;
    border-right: 1px solid var(--line);
}
.sb-closed .sb { visibility: hidden; border-right: 0; }
.sb__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 6px 14px; }
.sb__logo { display: block; }
.sb__logo img { display: block; width: auto; height: 30px; }
.sb__close, .tb__menu { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: var(--ink-soft); background: transparent; border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: 20px; cursor: pointer; }
.sb__close:hover, .tb__menu:hover { background: var(--blue-pale); }
.sb__tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px 12px 10px; border-bottom: 1px solid var(--line); }
.sb__home, .sb__mode { display: grid; place-items: center; padding: 7px 6px; color: var(--ink); background: #f3f5f7; border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.sb__mode[aria-pressed="true"] { color: #ffffff; background: var(--ink); }
.sb__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 8px 16px; }
.sb__part { display: flex; align-items: center; gap: 8px; margin: 12px 6px 4px; color: var(--muted); font-size: 13px; font-weight: 700; }
.sb__part span { width: 16px; height: 4px; border-radius: 2px; background: var(--line-basic); }
.sb__part--adv1 span { background: var(--line-adv1); }
.sb__part--adv2 span { background: var(--line-adv2); }
.sb__part--prac span { background: var(--line-prac); }
.sb__units, .sb__steps { margin: 0; padding: 0; list-style: none; }
.sb__units > li > a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; align-items: baseline; padding: 6px 8px; color: var(--ink); border-radius: 8px; font-size: 14px; line-height: 1.45; text-decoration: none; }
.sb__units > li > a:hover { background: #f3f5f7; }
.sb__num { color: var(--muted); font-family: var(--font-display); font-size: 12px; }
.sb__units > li.is-current > a { color: #ffffff; background: var(--ink); font-weight: 700; }
.sb__units > li.is-current > a .sb__num { color: #cfe0ee; }
.sb__steps { margin: 4px 0 8px 12px; padding-left: 8px; border-left: 2px solid var(--blue-pale); }
.sb__steps button { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px; width: 100%; padding: 4px 6px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 6px; font: inherit; font-size: 13.5px; line-height: 1.4; text-align: left; cursor: pointer; }
.sb__steps button:hover { background: #f3f5f7; }
.sb__stepnum { color: var(--muted); font-family: var(--font-display); font-size: 11px; line-height: 1.9; }
.sb__steps .is-done button { color: var(--ink-soft); }
.sb__steps .is-current button { color: var(--ink); background: var(--blue-pale); font-weight: 700; }
.sb__steps .is-current .sb__stepnum { color: var(--blue); }

/* ---------- 中央：上部バー・教材・下部バー ---------- */
.v2-main { display: grid; grid-template-rows: 46px minmax(0, 1fr) 46px; min-width: 0; min-height: 0; }
.tb { display: flex; align-items: center; gap: 10px; position: relative; padding: 0 14px; background: #ffffff; border-bottom: 1px solid var(--line); }
.tb__menu { display: none; flex-direction: column; gap: 4px; }
.tb__menu span { display: block; width: 16px; height: 2px; background: var(--ink); border-radius: 1px; }
.sb-closed .tb__menu { display: flex; align-items: center; justify-content: center; }
.tb__title { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.tb__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; }
.tb__bar span { display: block; width: 0; height: 100%; background: var(--blue); transition: width 0.3s ease; }

.v2 .stage { min-height: 0; border: 0; border-radius: 0; }
.v2 .panel-track { height: 100%; align-items: stretch; }
.v2 .panel { display: flex; flex-direction: column; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.v2 .canvas { width: 100%; height: auto; margin: auto 0; padding: 26px 40px 30px; overflow: visible; zoom: normal; }
.v2 .split { gap: 44px; max-width: 1480px; }
.v2 .stack { max-width: 1480px; }
.v2 .side-label, .v2 .stripe { display: none; }

.v2 .pager { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; height: 46px; margin: 0; padding: 0 12px; gap: 8px; background: #ffffff; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.v2 .pager__btn { padding: 6px 16px; font-size: 15px; border-radius: 8px; }
.v2 .pager__count { font-size: 14px; }
.v2 .pager__count b { font-size: 16px; }

/* 一覧で読む：パネルを縦に並べ，教材の領域全体をスクロールする */
.v2.is-list .stage { overflow-y: auto; }
.v2.is-list .panel-track { display: block; height: auto; transform: none !important; }
.v2.is-list .panel { height: auto; overflow: visible; border-bottom: 1px solid var(--line); }
.v2.is-list .pager { display: none; }
.v2.is-list .v2-main { grid-template-rows: 46px minmax(0, 1fr); }

/* 教材の幅が狭いPC：二分割を一列にする（文字は縮めない） */
.v2.is-one .split, .v2.is-one .split--cover { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.v2.is-one .split--wide-left, .v2.is-one .split--wide-right { grid-template-columns: minmax(0, 1fr) !important; }

/* ---------- PCの文字の大きさ（ブラウザ倍率100％で読める大きさ） ---------- */
.v2:not(.is-narrow) .kicker { margin-bottom: 10px; font-size: 16px; }
.v2:not(.is-narrow) .panel-title { margin-bottom: 18px; font-size: 32px; line-height: 1.4; }
.v2:not(.is-narrow) .panel-title--big { font-size: 38px; }
.v2:not(.is-narrow) .cover-title { font-size: 52px; }
.v2:not(.is-narrow) .cover-lead { font-size: 21px; }
.v2:not(.is-narrow) .cover-bg-word { opacity: 0.6; }
.v2:not(.is-narrow) .prose { font-size: 21px; line-height: 1.8; }
.v2:not(.is-narrow) .col-note { font-size: 18px; line-height: 1.75; }
.v2:not(.is-narrow) .calc-table { font-size: 19px; }
.v2:not(.is-narrow) .calc-table th, .v2:not(.is-narrow) .calc-table td { padding: 11px 14px; }
.v2:not(.is-narrow) .calc-table thead th { font-size: 16px; }
.v2:not(.is-narrow) .calc-table tbody td { font-size: 19px; }
.v2:not(.is-narrow) .fx { padding: 18px 16px; font-size: 38px; }
.v2:not(.is-narrow) .fx--small { font-size: 28px; }
.v2:not(.is-narrow) .lfx .fx { font-size: 30px; }
.v2:not(.is-narrow) .lfx--mini .fx { font-size: 22px; }
/* 補足は16px以上 */
.v2:not(.is-narrow) .mmap__i { font-size: 16px; }
.v2:not(.is-narrow) .symnote dt { font-size: 20px; }
.v2:not(.is-narrow) .symnote dd { font-size: 17px; }
.v2:not(.is-narrow) .ustep__h { font-size: 16px; }
.v2:not(.is-narrow) .ms__cond, .v2:not(.is-narrow) .ms__q { font-size: 16px; }
.v2:not(.is-narrow) .uf__axis { font-size: 16px; }
.v2:not(.is-narrow) .uf__who, .v2:not(.is-narrow) .ustep__say { font-size: 18px; }
.v2:not(.is-narrow) .fac__head { font-size: 19px; }
.v2:not(.is-narrow) .fac__chips li { font-size: 18px; }
.v2:not(.is-narrow) .fac__to, .v2:not(.is-narrow) .fac__mark { font-size: 17px; }
.v2:not(.is-narrow) .vbars__axis, .v2:not(.is-narrow) .ubars__axis { font-size: 16px; }
.v2:not(.is-narrow) .vbars__legend, .v2:not(.is-narrow) .ubars .bars__note { font-size: 17px; }
.v2:not(.is-narrow) .ubar__val { font-size: 17px; }
.v2:not(.is-narrow) .ubar__name, .v2:not(.is-narrow) .vbar__name { font-size: 19px; }
.v2:not(.is-narrow) .sim__cap, .v2:not(.is-narrow) .sim .lab__total, .v2:not(.is-narrow) .expbar__title, .v2:not(.is-narrow) .expbar__fx { font-size: 17px; }
.v2:not(.is-narrow) .expbar__seg { font-size: 16px; }
.v2:not(.is-narrow) .chain li { font-size: 18px; }
.v2:not(.is-narrow) .chain__h, .v2:not(.is-narrow) .chain__s, .v2:not(.is-narrow) .chain__v { font-size: 17px; }
.v2:not(.is-narrow) .persp__res, .v2:not(.is-narrow) .persp__who { font-size: 18px; }
.v2:not(.is-narrow) .ueq__box small, .v2:not(.is-narrow) .ueq__term small { font-size: 16px; }
.v2:not(.is-narrow) .dirfig__row { font-size: 17px; }
.v2:not(.is-narrow) .dirfig__row em, .v2:not(.is-narrow) .dirfig__ghost, .v2:not(.is-narrow) .dirfig__mark { font-size: 16px; }
.v2:not(.is-narrow) .rec-flow b { font-size: 18px; }
.v2:not(.is-narrow) .rec-flow span, .v2:not(.is-narrow) .chart-limit { font-size: 16px; }
.v2:not(.is-narrow) .nf-step__head { font-size: 20px; }
.v2:not(.is-narrow) .nf-note, .v2:not(.is-narrow) .nf-mode li > span:last-child, .v2:not(.is-narrow) .nf-sum__total span, .v2:not(.is-narrow) .nf-sum__total small, .v2:not(.is-narrow) .nf-pp small { font-size: 16px; }
.v2:not(.is-narrow) .policy-card__q { font-size: 21px; }
.v2:not(.is-narrow) .policy-card__kind, .v2:not(.is-narrow) .policy-flow li { font-size: 17px; }
.v2:not(.is-narrow) .why__label { font-size: 16px; }
.v2:not(.is-narrow) .why__list { font-size: 18px; }
.v2:not(.is-narrow) .bar__name { font-size: 19px; }
.v2:not(.is-narrow) .bar__value { font-size: 19px; }
.v2:not(.is-narrow) .bars-title, .v2:not(.is-narrow) .bars__note { font-size: 17px; }
.v2:not(.is-narrow) .control__label { font-size: 19px; }
.v2:not(.is-narrow) .setting-tag { font-size: 17px; }
.v2:not(.is-narrow) .legend { font-size: 18px; }
.v2:not(.is-narrow) .day-line__tag { font-size: 16px; }
.v2:not(.is-narrow) .symbol-list dd, .v2:not(.is-narrow) .kv dd { font-size: 18px; }
.v2:not(.is-narrow) .llcurve text { font-size: 18px; }
.v2:not(.is-narrow) .bigeq__t { font-size: 42px; }
.v2:not(.is-narrow) .bigeq--small .bigeq__t { font-size: 30px; }
.v2:not(.is-narrow) .bigeq__d { font-size: 19px; }
.v2:not(.is-narrow) .bigeq__s { font-size: 17px; }
.v2:not(.is-narrow) .feedback, .v2:not(.is-narrow) .calc-note { font-size: 18px; }
.v2:not(.is-narrow) .option-list button { font-size: 19px; }
.v2:not(.is-narrow) .refs { font-size: 16px; }

/* ---------- 狭い画面：サイドバーを重ねて開く ---------- */
@media (max-width: 899px) {
    .lesson.v2, .lesson.v2.sb-closed { grid-template-columns: minmax(0, 1fr); }
    .v2 .sb { position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); visibility: visible; transform: translateX(-102%); transition: transform 0.25s ease; box-shadow: none; }
    .v2.sb-open .sb { transform: none; box-shadow: 0 0 0 100vmax rgba(12, 44, 71, 0.0); }
    .v2 .tb__menu { display: flex; align-items: center; justify-content: center; }
    .sb-scrim { position: fixed; z-index: 55; inset: 0; background: rgba(12, 44, 71, 0.35); }
    .v2 .sb-scrim[hidden] { display: none; }
    .sb__units > li > a, .sb__steps button { font-size: 15px; }
}
/* スマホ：教材は従来の一列表示（縮小率を少し緩める） */
.v2.is-narrow .canvas { zoom: 0.8; padding: 22px 22px 28px; }
.v2.is-narrow .tb__title { font-size: 14px; }
.v2.is-narrow .pager__btn { padding: 6px 12px; }
/* v2：表は列の中で折り返し，横に切れないようにする */
.v2 .calc-table--text th, .v2 .calc-table--text td { white-space: normal; }
.v2 .calc-table thead th { white-space: normal; }
.v2:not(.is-narrow) .calc-table--tight th, .v2:not(.is-narrow) .calc-table--tight td { padding: 10px 8px !important; }
.v2:not(.is-narrow) .calc-table--compact th, .v2:not(.is-narrow) .calc-table--compact td { padding-left: 10px; padding-right: 10px; }
.v2 .cover-title .nb { white-space: normal; }
.v2 .cover-bg-word { max-width: 100%; overflow: hidden; }
.v2 .calc-table th, .v2 .calc-table td { white-space: normal; }
.v2:not(.is-narrow) .calc-table th, .v2:not(.is-narrow) .calc-table td { padding-left: 10px; padding-right: 10px; }
.sb__units > li > a { font-size: 15px; }
.sb__steps button { font-size: 14.5px; }
.v2:not(.is-narrow) [data-lab^="u02-"] .calc-table tbody th:first-child { white-space: nowrap; }
.v2:not(.is-narrow) .fx--small { font-size: 25px; }

/* =====================================================================
   v2 スライド表示の調整（2026-10-25 追加，後から書くので上の v2 の規則より優先）
   ・1枚のスライド＝教材領域の高さ − 上部バー − 下部バー．スライド表示では縦スクロールを出さない．
   ・左メニュー208px，上下バー42px．
   ・PC：見出し30px（低い画面28px），本文19px（低い画面18px）．図の説明16〜18px．
   ・全体の縮小（zoom・scale）は使わない．収まらない画面は内容の配置と分量で調整する．
===================================================================== */
.lesson.v2 { grid-template-columns: 208px minmax(0, 1fr); }
.v2-main { grid-template-rows: 42px minmax(0, 1fr) 42px; }
.v2.is-list .v2-main { grid-template-rows: 42px minmax(0, 1fr); }
.sb__head { padding: 6px 6px 4px 12px; }
.sb__logo img { height: 24px; }
.sb__close, .tb__menu { width: 30px; height: 30px; }
.sb__tools { gap: 4px; padding: 2px 10px 8px; }
.sb__home, .sb__mode { padding: 5px 4px; font-size: 13px; }
.sb__units > li > a { grid-template-columns: 22px minmax(0, 1fr); padding: 5px 6px; font-size: 14px; }
.sb__steps button { font-size: 13.5px; padding: 3px 5px; }
.tb { padding: 0 12px; }
.tb__title { font-size: 14px; }
.v2 .pager { height: 42px; }
.v2 .pager__btn { padding: 5px 14px; font-size: 14px; }

/* スライド表示：パネルは教材領域の高さちょうど．縦スクロールを出さない（PC）． */
.v2:not(.is-list):not(.is-narrow) .panel { overflow: hidden; }
.v2:not(.is-narrow) .canvas { padding: 14px 32px 16px; }
.v2:not(.is-narrow) .split { gap: 32px; }

/* 文字：見出し・本文・図の優先順位 */
.v2:not(.is-narrow) .kicker { margin-bottom: 6px; font-size: 14px; letter-spacing: 0.08em; }
.v2:not(.is-narrow) .panel-title { margin-bottom: 12px; font-size: 30px; line-height: 1.35; }
.v2:not(.is-narrow) .panel-title--big { font-size: 32px; }
.v2:not(.is-narrow) .cover-title { margin-bottom: 14px; font-size: 44px; }
.v2:not(.is-narrow) .cover-lead { margin-bottom: 18px; font-size: 19px; line-height: 1.7; }
.v2:not(.is-narrow) .prose { font-size: 19px; line-height: 1.65; }
.v2:not(.is-narrow) .prose p + p { margin-top: 8px; }
.v2:not(.is-narrow) .col-note { margin-top: 10px; font-size: 16px; line-height: 1.6; }
.v2:not(.is-narrow) .col-lead { margin-bottom: 8px; font-size: 17px; }
.v2:not(.is-narrow) .calc-table { font-size: 17px; }
.v2:not(.is-narrow) .calc-table th, .v2:not(.is-narrow) .calc-table td { padding: 7px 10px; }
.v2:not(.is-narrow) .calc-table thead th { font-size: 15px; }
.v2:not(.is-narrow) .calc-table tbody td { font-size: 17px; }
.v2:not(.is-narrow) .fx { padding: 12px 12px; font-size: 32px; }
.v2:not(.is-narrow) .fx--small { margin-top: 10px; font-size: 23px; }
.v2:not(.is-narrow) .lfx .fx { font-size: 26px; }
.v2:not(.is-narrow) .why { margin-top: 10px; padding: 10px 14px; border-radius: 12px; }
.v2:not(.is-narrow) .why__label { margin-bottom: 2px; font-size: 14px; }
.v2:not(.is-narrow) .why__list { min-height: 0 !important; font-size: 16px; line-height: 1.55; }
.v2:not(.is-narrow) .bar + .bar { margin-top: 10px; }
.v2:not(.is-narrow) .bar { grid-template-columns: 96px minmax(0, 1fr) 84px; gap: 10px; }
.v2:not(.is-narrow) .bar__name, .v2:not(.is-narrow) .bar__value { font-size: 17px; }
.v2:not(.is-narrow) .bar__track { height: 18px; }
.v2:not(.is-narrow) .bars-title, .v2:not(.is-narrow) .bars__note { font-size: 15px; }
.v2:not(.is-narrow) .control + .control { margin-top: 10px; }
.v2:not(.is-narrow) .control__label { margin-bottom: 4px; font-size: 17px; }
.v2:not(.is-narrow) .control__label output { font-size: 19px; }
.v2:not(.is-narrow) .chip-row { gap: 8px; margin-top: 10px; }
.v2:not(.is-narrow) .chip { padding: 6px 14px; font-size: 15px; }
.v2:not(.is-narrow) .seg { margin-bottom: 10px; }
.v2:not(.is-narrow) .seg button { padding: 6px 14px; font-size: 15px; }
.v2:not(.is-narrow) .option-list { gap: 8px; }
.v2:not(.is-narrow) .option-list button { padding: 10px 16px; font-size: 17px; }
.v2:not(.is-narrow) .option-list button b { font-size: 18px; }
.v2:not(.is-narrow) .feedback, .v2:not(.is-narrow) .calc-note { min-height: 0; margin-top: 8px; font-size: 16px; line-height: 1.6; }
.v2:not(.is-narrow) .setting-tag { font-size: 16px; line-height: 1.6; }
.v2:not(.is-narrow) .setting-tag b { margin-bottom: 4px; font-size: 14px; }
.v2:not(.is-narrow) .caution { padding: 12px 16px; }
.v2:not(.is-narrow) .caution p { font-size: 17px; line-height: 1.6; }
.v2:not(.is-narrow) .flow { margin-top: 12px; }
.v2:not(.is-narrow) .flow li { padding: 10px 14px 10px 12px; }
.v2:not(.is-narrow) .flow b { font-size: 17px; }
.v2:not(.is-narrow) .flow span { font-size: 16px; }
.v2:not(.is-narrow) .kv div { gap: 12px; padding: 7px 0; }
.v2:not(.is-narrow) .kv dt { font-size: 16px; }
.v2:not(.is-narrow) .kv dd { font-size: 16px; line-height: 1.55; }
.v2:not(.is-narrow) .symbol-list { margin-top: 8px; }
.v2:not(.is-narrow) .symbol-list div { gap: 12px; padding: 6px 0; }
.v2:not(.is-narrow) .symbol-list dt { font-size: 21px; }
.v2:not(.is-narrow) .symbol-list dd { font-size: 16px; line-height: 1.55; }
.v2:not(.is-narrow) .steps-list li { padding: 8px 0 8px 42px; font-size: 17px; line-height: 1.55; }
.v2:not(.is-narrow) .summary-prose { font-size: 18px; }
.v2:not(.is-narrow) .next-question { padding: 16px 20px; }
.v2:not(.is-narrow) .next-question__text { margin-bottom: 12px; font-size: 19px; line-height: 1.6; }
.v2:not(.is-narrow) .refs { margin-top: 10px; font-size: 14px; line-height: 1.55; }
.v2:not(.is-narrow) .lab { padding: 12px 14px; }
.v2:not(.is-narrow) .bubble { padding: 14px 18px; font-size: 18px; line-height: 1.65; }
.v2:not(.is-narrow) .question-line { margin-top: 14px; padding-top: 10px; }
.v2:not(.is-narrow) .question-line p { font-size: 20px; line-height: 1.5; }
.v2:not(.is-narrow) .btn-primary { padding: 6px 6px 6px 20px; font-size: 16px; }
.v2:not(.is-narrow) .btn-ghost { padding: 6px 14px; font-size: 15px; }
.v2:not(.is-narrow) .mode-icons figure svg { width: 64px; }
.v2:not(.is-narrow) .legend { margin-top: 8px; font-size: 16px; }
.v2:not(.is-narrow) .legend b { font-size: 18px; }
.v2:not(.is-narrow) .lab__total { min-height: 0; font-size: 15px; line-height: 1.55; }
/* 単元02・03の図 */
.v2:not(.is-narrow) .mmap__i { padding: 2px 10px; font-size: 14px; }
.v2:not(.is-narrow) .symnote { margin-top: 6px; padding: 6px 10px; }
.v2:not(.is-narrow) .symnote dt { font-size: 18px; }
.v2:not(.is-narrow) .symnote dd { font-size: 15px; line-height: 1.5; }
.v2:not(.is-narrow) .bigeq { margin: 14px 0 4px; }
.v2:not(.is-narrow) .bigeq__t { font-size: 40px; }
.v2:not(.is-narrow) .bigeq__d { font-size: 17px; }
.v2:not(.is-narrow) .bigeq__s { font-size: 15px; }
.v2:not(.is-narrow) .bigeq--small .bigeq__t { font-size: 26px; height: 40px; line-height: 40px; min-height: 40px; }
.v2:not(.is-narrow) .uf__who, .v2:not(.is-narrow) .ustep__say { font-size: 16px; }
.v2:not(.is-narrow) .ustep__h { font-size: 14px; }
.v2:not(.is-narrow) .ms { padding: 6px 10px; }
.v2:not(.is-narrow) .ms b { font-size: 17px; }
.v2:not(.is-narrow) .ms__cond, .v2:not(.is-narrow) .ms__q { font-size: 15px; }
.v2:not(.is-narrow) .ms__icon svg { width: 32px; height: 32px; }
.v2:not(.is-narrow) .fac__head { font-size: 16px; }
.v2:not(.is-narrow) .fac__chips li { font-size: 16px; }
.v2:not(.is-narrow) .fac__to, .v2:not(.is-narrow) .fac__mark { font-size: 15px; }
.v2:not(.is-narrow) .vbar__name, .v2:not(.is-narrow) .ubar__name { font-size: 16px; }
.v2:not(.is-narrow) .vbars__axis, .v2:not(.is-narrow) .ubars__axis, .v2:not(.is-narrow) .vbars__legend, .v2:not(.is-narrow) .ubars .bars__note, .v2:not(.is-narrow) .ubar__val { font-size: 14px; }
.v2:not(.is-narrow) .vbar + .vbar, .v2:not(.is-narrow) .ubar + .ubar { margin-top: 6px; }
.v2:not(.is-narrow) .sim__cap, .v2:not(.is-narrow) .expbar__title, .v2:not(.is-narrow) .expbar__fx { font-size: 15px; }
.v2:not(.is-narrow) .chain li { padding: 8px 10px; font-size: 16px; }
.v2:not(.is-narrow) .chain__h, .v2:not(.is-narrow) .chain__s, .v2:not(.is-narrow) .chain__v { font-size: 15px; }
.v2:not(.is-narrow) .persp__res, .v2:not(.is-narrow) .persp__who { font-size: 16px; }
.v2:not(.is-narrow) .dirfig__row { font-size: 15px; }
.v2:not(.is-narrow) .rec-flow b { font-size: 16px; }
.v2:not(.is-narrow) .rec-flow span, .v2:not(.is-narrow) .chart-limit { font-size: 14px; }
.v2:not(.is-narrow) .nf-step { padding: 8px 12px 10px; }
.v2:not(.is-narrow) .nf-step + .nf-step { margin-top: 18px; }
.v2:not(.is-narrow) .nf-step__head { margin-bottom: 6px; font-size: 17px; }
.v2:not(.is-narrow) .day-line__act { font-size: 18px; }
.v2:not(.is-narrow) .day-line__tag { font-size: 14px; }
.v2:not(.is-narrow) .llcurve text { font-size: 15px; }
/* 低い画面（教材の高さ500px未満）：見出し28px・本文18px */
.v2.is-short:not(.is-narrow) .panel-title { font-size: 28px; margin-bottom: 8px; }
.v2.is-short:not(.is-narrow) .prose { font-size: 18px; line-height: 1.6; }
.v2.is-short:not(.is-narrow) .canvas { padding-top: 10px; padding-bottom: 10px; }
/* 単元01「三つの問い」：問いと関わる選択だけを，三枚横に並べる */
.pc2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.pc2__card { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: #ffffff; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: 12px; }
.pc2__q { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; font-size: 21px; font-weight: 900; line-height: 1.45; }
.pc2__icon svg { display: block; width: 36px; height: 36px; }
.pc2__c { margin-top: auto; padding: 10px 12px; background: var(--blue-pale); border-radius: 8px; }
.pc2__label { margin: 0 0 2px; color: var(--blue); font-size: 14px; font-weight: 700; }
.pc2__kind { margin: 0; font-size: 18px; font-weight: 900; }
.pc2__what { margin: 2px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
.is-narrow .pc2, .v2.is-one .pc2 { grid-template-columns: minmax(0, 1fr); }
/* v2 スライド：単元02の段階表示は二分割の上に一行で置く */
.kicker--wide { position: relative; z-index: 1; width: 100%; max-width: 1480px; margin: 0 auto 8px !important; }
.v2:not(.is-narrow) .kicker--wide .mmap__i { font-size: 13.5px; padding: 2px 9px; }
/* 高さを取る部品の余白を詰める */
.v2:not(.is-narrow) .stat-row div { padding: 8px 14px; }
.v2:not(.is-narrow) .stat-row span { font-size: 14px; }
.v2:not(.is-narrow) .stat-row b { margin-top: 0; font-size: 24px; }
.v2:not(.is-narrow) .lab-stat { margin-top: 8px; font-size: 16px; }
.v2:not(.is-narrow) .lab-stat b { font-size: 19px; }
.v2:not(.is-narrow) .lab-stat--top { margin-bottom: 8px; }
.v2:not(.is-narrow) .part-summary { margin-bottom: 10px; padding: 10px 14px; }
.v2:not(.is-narrow) .part-summary p { font-size: 16px; line-height: 1.6; }
.v2:not(.is-narrow) .part-summary .part-summary__label { margin-bottom: 2px; font-size: 14px; }
.v2:not(.is-narrow) .next-question__label { margin-bottom: 4px; font-size: 14px; }
.v2:not(.is-narrow) .result-card { padding: 12px 16px; }
.v2:not(.is-narrow) .result-card__title { margin: 2px 0 6px !important; font-size: 22px; }
.v2:not(.is-narrow) .result-card__text { font-size: 16px; line-height: 1.6; }
.v2:not(.is-narrow) .result-card__label { font-size: 14px; }
.v2:not(.is-narrow) .alloc { margin-bottom: 8px; }
.v2:not(.is-narrow) .alloc__bar { height: 40px; }
.v2:not(.is-narrow) .day-line li { grid-template-columns: 58px 40px minmax(0, 1fr); gap: 10px; padding: 1px 0; }
.v2:not(.is-narrow) .day-line__icon { width: 40px; height: 40px; }
.v2:not(.is-narrow) .day-line__icon svg { width: 24px; height: 24px; }
.v2:not(.is-narrow) .day-line__time { padding-top: 8px; font-size: 16px; }
.v2:not(.is-narrow) .day-line__act { padding-top: 6px; font-size: 17px; line-height: 1.4; }
.v2:not(.is-narrow) .day-line__tag { margin: 3px 6px 0 0; padding: 1px 8px; font-size: 14px; }
.v2:not(.is-narrow) .day-line::before { left: 87px; }
.v2:not(.is-narrow) .nf-step { padding: 6px 12px 8px; }
.v2:not(.is-narrow) .nf-step + .nf-step { margin-top: 16px; }
.v2:not(.is-narrow) .nf-step + .nf-step::before { top: -16px; font-size: 14px; }
.v2:not(.is-narrow) .nf-mode li { padding: 4px 8px; }
.v2:not(.is-narrow) .nf-mode__icon svg { width: 28px; height: 28px; }
.v2:not(.is-narrow) .nf-mode b, .v2:not(.is-narrow) .nf-chain b { font-size: 16px; }
.v2:not(.is-narrow) .nf-chain b { padding: 3px 8px; }
.v2:not(.is-narrow) .nf-note { margin-top: 4px; font-size: 15px; }
.v2:not(.is-narrow) .ustep { gap: 12px; }
.v2:not(.is-narrow) .ustep > li + li::before { top: -13px; font-size: 13px; }
.v2:not(.is-narrow) .ustep__say { padding: 6px 12px; }
.v2:not(.is-narrow) .uf--short { padding: 6px 12px 8px; }
.v2:not(.is-narrow) .uf--short .uf__body { height: 84px; }
.v2:not(.is-narrow) .uf__mark { padding: 3px 10px; }
.v2:not(.is-narrow) .uf__icon svg { width: 24px; height: 24px; }
.v2:not(.is-narrow) .uf__mark b { font-size: 16px; }
.v2:not(.is-narrow) .uf__u { font-size: 18px; }
.v2:not(.is-narrow) .uf__who { margin-bottom: 2px; }
.v2:not(.is-narrow) .ustep__rule, .v2:not(.is-narrow) .ustep__pick { padding: 6px 12px; font-size: 16px; }
.v2:not(.is-narrow) .ustep__pick b { font-size: 19px; }
.v2:not(.is-narrow) .dirfig { padding: 10px 12px; }
.v2:not(.is-narrow) .dirfig__axis { height: 150px; }
/* 低い画面：さらに余白を詰める（文字は見出し28px・本文18pxを下限にする） */
.v2.is-short:not(.is-narrow) .canvas { padding: 8px 28px 8px; }
.v2.is-short:not(.is-narrow) .kicker { margin-bottom: 4px; }
.v2.is-short:not(.is-narrow) .kicker--wide { margin-bottom: 6px !important; }
.v2.is-short:not(.is-narrow) .cover-title { font-size: 40px; margin-bottom: 10px; }
.v2.is-short:not(.is-narrow) .cover-lead { font-size: 18px; margin-bottom: 12px; }
.v2:not(.is-narrow) .mode-icons { gap: 20px; }
.v2:not(.is-narrow) .mode-icons figure svg { width: 52px; }
.v2:not(.is-narrow) .col--end { gap: 14px; }
.v2:not(.is-narrow) .cover-meta div { padding: 8px 0; }

/* =====================================================================
   v2 スライド表示の調整 2（2026-10-25 追加）
   ・単元02の段階表示は上部バーへ移す（panel.js が .tb__map を作る）．入りきらない幅ではスライド内に残す．
   ・収まらないパネルだけ縦スクロールを許す（is-over）．内容を切り落とさないための安全策．
   ・表紙の背景文字は装飾なので，スライドの高さに含めない．
===================================================================== */
.tb__map { flex: 0 1 auto; min-width: 0; margin-left: auto; }
.tb__map[hidden] { display: none; }
.tb__map .mmap { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; }
.tb__map .mmap__i { padding: 2px 9px; font-size: 13.5px; white-space: nowrap; }
.v2.has-tbmap:not(.is-list):not(.is-narrow) .kicker--wide { display: none; }
.v2:not(.is-list):not(.is-narrow) .panel.is-over { overflow-y: auto; }
.v2:not(.is-narrow) .cover-bg-word { top: 0; bottom: 0; overflow: hidden; }
/* 単元02「効用とは」「効用最大化」：効用の高低の図と不等式を横に並べる */
.ustep__pair { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; align-items: center; }
.ustep__pair .fx--small { margin-top: 0 !important; }
.is-narrow .ustep__pair { grid-template-columns: minmax(0, 1fr); }
.v2.has-tbmap:not(.is-list):not(.is-narrow) .kicker--map { display: none; }
/* 単元02：表の行の高さとグラフの間隔を詰める（数値は17px のまま） */
.v2:not(.is-narrow) [data-lab^="u02-"] .calc-table th, .v2:not(.is-narrow) [data-lab^="u02-"] .calc-table td { padding-top: 5px !important; padding-bottom: 5px !important; }
.v2:not(.is-narrow) [data-lab^="u02-"] .table-wrap + .vbars, .v2:not(.is-narrow) [data-lab^="u02-"] .table-wrap + .expbar { margin-top: 10px; }
.v2:not(.is-narrow) [data-lab^="u02-"] .control + .table-wrap { margin-top: 10px; }
.v2:not(.is-narrow) [data-lab^="u02-"] .seg + .ubars { margin-top: 0; }
.v2:not(.is-narrow) [data-lab^="u03-"] .calc-table th, .v2:not(.is-narrow) [data-lab^="u03-"] .calc-table td { padding-top: 5px !important; padding-bottom: 5px !important; }
.v2:not(.is-narrow) .calc-table caption { padding-top: 6px; padding-bottom: 4px; }
.v2:not(.is-narrow) .calc-table--text th, .v2:not(.is-narrow) .calc-table--text td { padding-top: 6px; padding-bottom: 6px; }
.v2:not(.is-narrow) .llcurve + .chip-row { margin-top: 6px; }
/* 2日分の選択：二つの切り替えを横に並べる */
.seg-pair { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 6px 20px; margin-top: 12px; }
.seg-pair .col-lead { margin: 0 0 4px; }
.seg-pair .seg { margin-bottom: 0; }
.is-narrow .seg-pair { grid-template-columns: minmax(0, 1fr); }
/* 単元12「記録の点検」：表の値を1行に収める */
.v2:not(.is-narrow) .check-table th, .v2:not(.is-narrow) .check-table td { white-space: nowrap; padding: 6px 8px; font-size: 16px; }
.v2:not(.is-narrow) .check-table .flag { padding: 4px 10px; font-size: 15px; white-space: nowrap; }
/* 余白の調整：本文と操作部品の間，空の判定欄，保存ボタン */
.v2:not(.is-narrow) .prose + .control, .v2:not(.is-narrow) .setting-tag + .control, .v2:not(.is-narrow) .fx + .control { margin-top: 12px; }
.v2:not(.is-narrow) .predict-check:empty { margin: 0; }
.v2:not(.is-narrow) .btn-download { margin-top: 10px; }
.v2.is-short:not(.is-narrow) .calc-table--text th, .v2.is-short:not(.is-narrow) .calc-table--text td { padding-top: 5px; padding-bottom: 5px; }
.v2:not(.is-narrow) [data-lab="u03-five"] .calc-table td, .v2:not(.is-narrow) [data-lab="u03-five"] .calc-table th { padding-top: 4px !important; padding-bottom: 4px !important; }
.predict-check[hidden] { display: none !important; }
/* 単元01：図の段の間隔を詰める */
.v2.is-short:not(.is-narrow) .nf-step + .nf-step { margin-top: 12px; }
.v2.is-short:not(.is-narrow) .nf-step + .nf-step::before { top: -13px; }
.v2:not(.is-narrow) .rec-flow { margin-bottom: 10px; }
.v2:not(.is-narrow) .method-box + .btn-ghost, .v2:not(.is-narrow) [data-method-toggle] { margin-top: 8px; }
/* 数値の表：セルの中で折り返さない（列幅が足りるときに使う） */
.v2:not(.is-narrow) .calc-table--nowrap th, .v2:not(.is-narrow) .calc-table--nowrap td { white-space: nowrap; }
.v2:not(.is-narrow) [data-lab="u03-five"] .why__list { min-height: 0; }
.v2.is-short:not(.is-narrow) .canvas { padding-top: 6px; padding-bottom: 6px; }
/* 単元01「現状と開業後」：計算方法を開いたときは，流れの図と切り替えを隠して同じ場所に表示する */
.v2:not(.is-narrow):not(.is-list) [data-lab="u01-newline"]:has(.method-box:not([hidden])) .rec-flow,
.v2:not(.is-narrow):not(.is-list) [data-lab="u01-newline"]:has(.method-box:not([hidden])) .seg { display: none; }
.v2:not(.is-narrow) .method-box { padding: 12px 16px; }
.v2:not(.is-narrow) .method-box p { font-size: 16px; line-height: 1.6; }
/* 単元12「記録の点検」：表を広く取り，答え合わせの結果はボタンの横と下に短く示す */
.v2:not(.is-narrow):not(.is-one) .split:has([data-lab="u15-check"]) { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
.check-run { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.check-run__sum { margin: 0; color: var(--ink); font-size: 17px; font-weight: 700; }
.check-run__sum:empty { display: none; }
.v2:not(.is-narrow) [data-lab="u15-check"] .feedback { margin-top: 6px; font-size: 16px; line-height: 1.55; }
/* 予想の答え合わせは短く1〜2行で示す */
.v2:not(.is-narrow) .predict-check { margin-top: 10px; padding-top: 6px; font-size: 16px; line-height: 1.55; }
.v2:not(.is-narrow) .stat-row + .predict-check { margin-top: 10px; }
.v2:not(.is-narrow) .prose + .seg { margin-top: 12px; }
.check-note { display: inline-block; margin-right: 1em; }
.v2:not(.is-narrow) .check-table .flag { padding: 2px 10px; line-height: 1.5; } .v2:not(.is-narrow) .check-table th, .v2:not(.is-narrow) .check-table td { padding-top: 5px; padding-bottom: 5px; }
.v2.is-narrow .mode-icons { flex-wrap: wrap; gap: 14px; } .v2.is-narrow .mode-icons svg { width: 48px; height: auto; }



/* =====================================================================
   v2 紙面表示（2026-10-25 追加）
   ・背景の上に白い紙面を1枚ずつ置き，横に送る（紙面と紙面の間にすき間を取る）．
   ・紙面は幅1160pxまで．紙面の外と内に余白を取る．全ページ同じ高さ．
   ・文字：見出し26px，本文16px，図の説明・表14〜15px．（ブラウザ100％での大きさ）
   ・収まらないときだけ紙面の中を縦にスクロール（is-over）．
===================================================================== */
.lesson.v2 .stage { background: #e8edf2; background-image: none; }
.lesson.v2:not(.is-narrow):not(.is-list) .panel { padding: 16px clamp(20px, 3vw, 44px); overflow: hidden; }
.lesson.v2:not(.is-narrow) .canvas {
    display: flex; flex-direction: column; justify-content: safe center;
    width: 100%; max-width: 1160px; margin: 0 auto; padding: 30px 56px;
    background: #ffffff; border: 1px solid #d9e1e8; border-radius: 14px;
    box-shadow: 0 1px 2px rgba(12, 44, 71, 0.04), 0 6px 20px rgba(12, 44, 71, 0.05);
    overflow: hidden;
}
.lesson.v2:not(.is-narrow):not(.is-list) .canvas { flex: 1 1 auto; height: auto; min-height: 0; }
.lesson.v2.is-short:not(.is-narrow):not(.is-list) .panel { padding-top: 10px; padding-bottom: 10px; }
.lesson.v2.is-short:not(.is-narrow) .canvas { padding: 20px 48px; }
.lesson.v2:not(.is-narrow):not(.is-list) .panel.is-over .canvas { overflow-y: auto; }
.lesson.v2.is-list:not(.is-narrow) .panel { padding: 14px clamp(20px, 3vw, 44px); border-bottom: 0; }
.lesson.v2:not(.is-narrow) .split, .lesson.v2:not(.is-narrow) .stack { max-width: none; }
.lesson.v2:not(.is-narrow) .split { gap: 40px; }
.lesson.v2:not(.is-narrow) .kicker--wide { max-width: none; }
/* 見出しへ移したフォーカスの枠は表示しない（読み上げのためのフォーカス） */
.v2 [tabindex="-1"]:focus { outline: none; }

/* ---------- 文字の大きさ ---------- */
.lesson.v2:not(.is-narrow) .kicker { font-size: 13px; margin-bottom: 6px; }
.lesson.v2:not(.is-narrow) .panel-title { font-size: 26px; line-height: 1.4; margin-bottom: 14px; }
.lesson.v2:not(.is-narrow) .panel-title--big { font-size: 28px; }
.lesson.v2:not(.is-narrow) .cover-title { font-size: 36px; margin-bottom: 16px; }
.lesson.v2:not(.is-narrow) .cover-lead { font-size: 16px; line-height: 1.8; }
.lesson.v2:not(.is-narrow) .prose, .lesson.v2:not(.is-narrow) .summary-prose { font-size: 16px; line-height: 1.8; }
.lesson.v2:not(.is-narrow) .prose p + p { margin-top: 10px; }
.lesson.v2:not(.is-narrow) .col-note { font-size: 14px; line-height: 1.65; }
.lesson.v2:not(.is-narrow) .col-lead { font-size: 15px; }
.lesson.v2:not(.is-narrow) .calc-table, .lesson.v2:not(.is-narrow) .calc-table tbody td { font-size: 15px; }
.lesson.v2:not(.is-narrow) .calc-table thead th, .lesson.v2:not(.is-narrow) .calc-table caption { font-size: 13px; }
.lesson.v2:not(.is-narrow) .fx { font-size: 26px; }
.lesson.v2:not(.is-narrow) .fx--small { font-size: 20px; }
.lesson.v2:not(.is-narrow) .lfx .fx { font-size: 22px; }
.lesson.v2:not(.is-narrow) .lfx--mini .fx { font-size: 18px; }
.lesson.v2:not(.is-narrow) .bigeq__t { font-size: 34px; }
.lesson.v2:not(.is-narrow) .bigeq--small .bigeq__t { font-size: 22px; height: 34px; line-height: 34px; min-height: 34px; }
.lesson.v2:not(.is-narrow) .bigeq__d { font-size: 15px; }
.lesson.v2:not(.is-narrow) .bigeq__s { font-size: 13.5px; }
.lesson.v2:not(.is-narrow) .bigeq-down { font-size: 20px; }
.lesson.v2:not(.is-narrow) .symnote dt { font-size: 16px; }
.lesson.v2:not(.is-narrow) .symnote dd { font-size: 14px; }
.lesson.v2:not(.is-narrow) .symbol-list dt { font-size: 18px; }
.lesson.v2:not(.is-narrow) .symbol-list dd, .lesson.v2:not(.is-narrow) .kv dt, .lesson.v2:not(.is-narrow) .kv dd { font-size: 14.5px; }
.lesson.v2:not(.is-narrow) .why__label { font-size: 13px; }
.lesson.v2:not(.is-narrow) .why__list { font-size: 14.5px; line-height: 1.6; }
.lesson.v2:not(.is-narrow) .control__label { font-size: 15px; }
.lesson.v2:not(.is-narrow) .control__label output { font-size: 16px; }
.lesson.v2:not(.is-narrow) .bar__name, .lesson.v2:not(.is-narrow) .bar__value { font-size: 15px; }
.lesson.v2:not(.is-narrow) .vbar__name, .lesson.v2:not(.is-narrow) .ubar__name { font-size: 14.5px; }
.lesson.v2:not(.is-narrow) .bars-title, .lesson.v2:not(.is-narrow) .bars__note { font-size: 13.5px; }
.lesson.v2:not(.is-narrow) .setting-tag, .lesson.v2:not(.is-narrow) .feedback, .lesson.v2:not(.is-narrow) .calc-note,
.lesson.v2:not(.is-narrow) .predict-check, .lesson.v2:not(.is-narrow) .lab-stat, .lesson.v2:not(.is-narrow) .legend { font-size: 14.5px; }
.lesson.v2:not(.is-narrow) .setting-tag b { font-size: 13px; }
.lesson.v2:not(.is-narrow) .lab-stat b, .lesson.v2:not(.is-narrow) .legend b { font-size: 16px; }
.lesson.v2:not(.is-narrow) .option-list button { font-size: 15px; }
.lesson.v2:not(.is-narrow) .option-list button b { font-size: 16px; }
.lesson.v2:not(.is-narrow) .next-question__text { font-size: 16px; }
.lesson.v2:not(.is-narrow) .bubble { font-size: 16px; }
.lesson.v2:not(.is-narrow) .question-line p { font-size: 17px; }
.lesson.v2:not(.is-narrow) .caution p, .lesson.v2:not(.is-narrow) .steps-list li, .lesson.v2:not(.is-narrow) .method-box p { font-size: 15px; }
.lesson.v2:not(.is-narrow) .flow b { font-size: 15px; }
.lesson.v2:not(.is-narrow) .flow span { font-size: 14px; }
.lesson.v2:not(.is-narrow) .refs { font-size: 13px; }
.lesson.v2:not(.is-narrow) .seg button, .lesson.v2:not(.is-narrow) .chip, .lesson.v2:not(.is-narrow) .btn-ghost { font-size: 14px; }
.lesson.v2:not(.is-narrow) .btn-primary { font-size: 15px; }
.lesson.v2:not(.is-narrow) .pc2__q { font-size: 18px; }
.lesson.v2:not(.is-narrow) .pc2__kind { font-size: 16px; }
.lesson.v2:not(.is-narrow) .pc2__what { font-size: 14px; }
.lesson.v2:not(.is-narrow) .policy-card__q { font-size: 18px; }
.lesson.v2:not(.is-narrow) .policy-card__kind, .lesson.v2:not(.is-narrow) .policy-card__text { font-size: 15px; }
.lesson.v2:not(.is-narrow) .ustep__say, .lesson.v2:not(.is-narrow) .ustep__rule, .lesson.v2:not(.is-narrow) .ustep__pick, .lesson.v2:not(.is-narrow) .uf__who { font-size: 14.5px; }
.lesson.v2:not(.is-narrow) .ustep__pick b, .lesson.v2:not(.is-narrow) .uf__u { font-size: 16px; }
.lesson.v2:not(.is-narrow) .uf__mark b { font-size: 14.5px; }
.lesson.v2:not(.is-narrow) .uf__axis, .lesson.v2:not(.is-narrow) .ustep__h { font-size: 13px; }
.lesson.v2:not(.is-narrow) .ms b { font-size: 15px; }
.lesson.v2:not(.is-narrow) .ms__cond, .lesson.v2:not(.is-narrow) .ms__q { font-size: 13.5px; }
.lesson.v2:not(.is-narrow) .ms__icon svg { width: 28px; height: 28px; }
.lesson.v2:not(.is-narrow) .fac__head, .lesson.v2:not(.is-narrow) .fac__chips li { font-size: 14.5px; }
.lesson.v2:not(.is-narrow) .fac__to, .lesson.v2:not(.is-narrow) .fac__mark { font-size: 13.5px; }
.lesson.v2:not(.is-narrow) .persp__res, .lesson.v2:not(.is-narrow) .persp__who { font-size: 14.5px; }
.lesson.v2:not(.is-narrow) .persp__eq { font-size: 18px; }
.lesson.v2:not(.is-narrow) .ueq__box small, .lesson.v2:not(.is-narrow) .ueq__term small { font-size: 13.5px; }
.lesson.v2:not(.is-narrow) .chain li { font-size: 14.5px; }
.lesson.v2:not(.is-narrow) .chain__h, .lesson.v2:not(.is-narrow) .chain__s, .lesson.v2:not(.is-narrow) .chain__v { font-size: 13.5px; }
.lesson.v2:not(.is-narrow) .dirfig__row, .lesson.v2:not(.is-narrow) .dirfig__row em, .lesson.v2:not(.is-narrow) .dirfig__ghost, .lesson.v2:not(.is-narrow) .dirfig__mark { font-size: 13.5px; }
.lesson.v2:not(.is-narrow) .dirfig__mode { font-size: 16px; }
.lesson.v2:not(.is-narrow) .nf-step__head { font-size: 15px; }
.lesson.v2:not(.is-narrow) .nf-mode b, .lesson.v2:not(.is-narrow) .nf-chain b, .lesson.v2:not(.is-narrow) .rec-flow b { font-size: 14.5px; }
.lesson.v2:not(.is-narrow) .nf-note, .lesson.v2:not(.is-narrow) .rec-flow span, .lesson.v2:not(.is-narrow) .chart-limit { font-size: 13px; }
.lesson.v2:not(.is-narrow) .day-line__act { font-size: 15.5px; }
.lesson.v2:not(.is-narrow) .day-line__time { font-size: 14.5px; }
.lesson.v2:not(.is-narrow) .day-line__tag { font-size: 13px; }
.lesson.v2:not(.is-narrow) .result-card__title { font-size: 19px; }
.lesson.v2:not(.is-narrow) .result-card__text, .lesson.v2:not(.is-narrow) .result-card__data, .lesson.v2:not(.is-narrow) .part-summary p { font-size: 14.5px; }
.lesson.v2:not(.is-narrow) .stat-row b { font-size: 20px; }
.lesson.v2:not(.is-narrow) .stat-row span { font-size: 13px; }
.lesson.v2:not(.is-narrow) .check-run__sum { font-size: 15px; }
.lesson.v2:not(.is-narrow) .check-table th, .lesson.v2:not(.is-narrow) .check-table td { font-size: 14.5px; }
.lesson.v2:not(.is-narrow) .check-table .flag { font-size: 13px; }
.lesson.v2:not(.is-narrow) [data-lab="u15-check"] .feedback { font-size: 14px; }
.lesson.v2:not(.is-narrow) .expbar__seg, .lesson.v2:not(.is-narrow) .alloc__seg { font-size: 13.5px; }
.lesson.v2:not(.is-narrow) .sim__cap, .lesson.v2:not(.is-narrow) .sim .lab__total, .lesson.v2:not(.is-narrow) .expbar__title, .lesson.v2:not(.is-narrow) .expbar__fx, .lesson.v2:not(.is-narrow) .lab__total { font-size: 13.5px; }
.lesson.v2:not(.is-narrow) .llcurve text { font-size: 14px; }
.lesson.v2:not(.is-narrow) .ratio-box__row, .lesson.v2:not(.is-narrow) .word-formula { font-size: 17px; }
.lesson.v2:not(.is-narrow) .ueq__row { font-size: 20px; }
.lesson.v2:not(.is-narrow) .ueq__row--v, .lesson.v2:not(.is-narrow) .ueq__row--e { font-size: 18px; }
.lesson.v2:not(.is-narrow) .net__nt, .lesson.v2:not(.is-narrow) .lab__title { font-size: 16px; }
.lesson.v2:not(.is-narrow) .net__t, .lesson.v2:not(.is-narrow) .tree__t, .lesson.v2:not(.is-narrow) .model-flow__body, .lesson.v2:not(.is-narrow) .model-flow__label { font-size: 15px; }
.lesson.v2:not(.is-narrow) .pitfalls__head { font-size: 18px; }
.lesson.v2:not(.is-narrow) .mode-icons figure svg { width: 48px; }
.lesson.v2:not(.is-narrow) .mode-icons figcaption { font-size: 14px; }
.lesson.v2:not(.is-narrow) .cover-meta dt, .lesson.v2:not(.is-narrow) .cover-meta span { font-size: 13px; }
.lesson.v2:not(.is-narrow) .cover-meta dd, .lesson.v2:not(.is-narrow) .cover-meta b { font-size: 18px; }
.lesson.v2.is-short:not(.is-narrow) .panel-title { font-size: 24px; margin-bottom: 10px; }
.lesson.v2.is-short:not(.is-narrow) .cover-title { font-size: 32px; }
.lesson.v2.is-short:not(.is-narrow) .prose { font-size: 15.5px; line-height: 1.7; }
/* 紙面の余白の調整（紙面の外は細く，紙面の中を広く） */
.lesson.v2:not(.is-narrow):not(.is-list) .panel { padding: 14px clamp(16px, 2.2vw, 32px); }
.lesson.v2:not(.is-narrow) .canvas { padding: 26px 48px; }
.lesson.v2.is-short:not(.is-narrow):not(.is-list) .panel { padding-top: 8px; padding-bottom: 8px; }
.lesson.v2.is-short:not(.is-narrow) .canvas { padding: 16px 44px; }
/* まとめ・図の文字（紙面表示） */
.lesson.v2:not(.is-narrow) .summary-prose p { font-size: 16px; }
.lesson.v2:not(.is-narrow) .next-question { padding: 18px 22px; border-radius: 16px; }
.lesson.v2:not(.is-narrow) .next-question__label { margin-bottom: 4px; font-size: 13px; }
.lesson.v2:not(.is-narrow) .next-question__text { margin-bottom: 12px; font-size: 16px; line-height: 1.65; }
.lesson.v2:not(.is-narrow) .next-question .btn-primary { padding: 4px 4px 4px 16px; font-size: 14.5px; }
.lesson.v2:not(.is-narrow) .next-question .btn-arrow { width: 34px; height: 34px; font-size: 18px; }
.lesson.v2:not(.is-narrow) .next-question__links { gap: 8px; }
.lesson.v2:not(.is-narrow) .nf-mode li { display: flex; align-items: center; gap: 8px; padding: 4px 10px; }
.lesson.v2:not(.is-narrow) .nf-mode__icon svg { width: 24px; height: 24px; }
.lesson.v2:not(.is-narrow) .nf-step { padding: 6px 12px 8px; }
.lesson.v2:not(.is-narrow) .nf-pp small, .lesson.v2:not(.is-narrow) .nf-sum__total span, .lesson.v2:not(.is-narrow) .nf-sum__total small { font-size: 13px; }
.lesson.v2:not(.is-narrow) .nf-sum__total b { font-size: 20px; }
.lesson.v2:not(.is-narrow) .nf-person svg { width: 20px; height: 20px; }
.lesson.v2.is-short:not(.is-narrow) .canvas { padding: 14px 44px; }
.lesson.v2.is-short:not(.is-narrow) .kicker { margin-bottom: 4px; }
.lesson.v2.is-short:not(.is-narrow) .panel-title { margin-bottom: 8px; }
.lesson.v2.is-short:not(.is-narrow) .prose p + p { margin-top: 8px; }
/* 紙面表示：図の部品を詰める（低い画面で1枚に収めるため） */
.lesson.v2:not(.is-narrow) .day-line li { grid-template-columns: 52px 32px minmax(0, 1fr); gap: 10px; }
.lesson.v2:not(.is-narrow) .day-line__icon { width: 32px; height: 32px; }
.lesson.v2:not(.is-narrow) .day-line__icon svg { width: 18px; height: 18px; }
.lesson.v2:not(.is-narrow) .day-line__time { padding-top: 6px; }
.lesson.v2:not(.is-narrow) .day-line__act { padding-top: 5px; }
.lesson.v2:not(.is-narrow) .day-line::before { left: 77px; }
.lesson.v2:not(.is-narrow) .prose + .col-lead { margin-top: 12px; }
.lesson.v2:not(.is-narrow) .ustep { gap: 10px; }
.lesson.v2:not(.is-narrow) .ustep > li + li::before { top: -11px; font-size: 11px; }
.lesson.v2:not(.is-narrow) .ustep__h { margin-bottom: 4px; }
.lesson.v2:not(.is-narrow) .uf--short .uf__body { height: 74px; }
.lesson.v2:not(.is-narrow) .uf__mark { padding: 2px 10px; }
.lesson.v2:not(.is-narrow) .ms { padding: 5px 10px; }
.lesson.v2:not(.is-narrow) .nf-step + .nf-step { margin-top: 12px; }
.lesson.v2:not(.is-narrow) .nf-step + .nf-step::before { top: -13px; }
.lesson.v2:not(.is-narrow) .nf-step__head { margin-bottom: 4px; }
.lesson.v2:not(.is-narrow) .nf-chain b { padding: 2px 8px; }
.lesson.v2:not(.is-narrow) .result-card { padding: 10px 14px; }
.lesson.v2:not(.is-narrow) .result-card__title { margin: 2px 0 4px !important; }
.lesson.v2:not(.is-narrow) .rec-flow { gap: 16px; }
.lesson.v2:not(.is-narrow) .rec-flow li { padding: 8px 10px; }
.lesson.v2:not(.is-narrow) .prose + .btn-ghost { margin-top: 12px; }
/* 紙面表示：個別の画面の調整 */
.lesson.v2:not(.is-narrow) .day-line__icon { width: 28px; height: 28px; }
.lesson.v2:not(.is-narrow) .day-line__icon svg { width: 16px; height: 16px; }
.lesson.v2:not(.is-narrow) .day-line li { grid-template-columns: 52px 28px minmax(0, 1fr); padding: 0; }
.lesson.v2:not(.is-narrow) .day-line__time { padding-top: 4px; }
.lesson.v2:not(.is-narrow) .day-line__act { padding-top: 3px; line-height: 1.4; }
.lesson.v2:not(.is-narrow) .day-line__tag { margin-top: 2px; line-height: 1.45; }
.lesson.v2:not(.is-narrow) .day-line::before { left: 75px; }
.lesson.v2:not(.is-narrow) .uf--short .uf__body { height: 66px; }
.lesson.v2:not(.is-narrow) .ustep__say { padding: 4px 10px; }
.lesson.v2:not(.is-narrow) .ustep .fx--small { padding: 8px; }
.lesson.v2:not(.is-narrow):not(.is-one) .split[data-lab="u02-dir"] { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
.lesson.v2:not(.is-narrow):not(.is-one) .split:has(.calc-table--plan) { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
.lesson.v2:not(.is-narrow) [data-lab="u06-models"] .calc-table th, .lesson.v2:not(.is-narrow) [data-lab="u06-models"] .calc-table td { padding-top: 5px; padding-bottom: 5px; }
.lesson.v2:not(.is-narrow) .nf-step { padding: 5px 12px 6px; }
.lesson.v2:not(.is-narrow) .nf-note { margin-top: 2px; }
.lesson.v2:not(.is-narrow) .expbar__fx { margin-top: 4px; }
.lesson.v2:not(.is-narrow) .control + .chip-row { margin-top: 8px; }
.lesson.v2:not(.is-narrow) .calc-table tbody th { font-size: 14.5px; }
.lesson.v2:not(.is-narrow) .lab-stat--top { margin-bottom: 4px; }
.lesson.v2:not(.is-narrow) .bars-title { margin-bottom: 6px; }
.lesson.v2:not(.is-narrow) .ustep { gap: 8px; }
.lesson.v2:not(.is-narrow) .ustep > li + li::before { top: -9px; font-size: 10px; }
.lesson.v2:not(.is-narrow) .ustep__h { margin-bottom: 2px; }
/* 単元02「効用とは」：手段のカードを1行にし，効用の図の高さを戻す */
.lesson.v2:not(.is-narrow) .ustep .mode-strip--2 .ms { display: flex; align-items: center; gap: 8px; padding: 4px 10px; }
.lesson.v2:not(.is-narrow) .ustep .mode-strip--2 .ms__cond { margin: 0; white-space: nowrap; }
.lesson.v2:not(.is-narrow) .uf--short .uf__body { height: 78px; }
/* 単元02「条件と効用」：条件の行は「項目と状態」の下に値を1行で置く（狭い列でも値が折り返さない） */
.lesson.v2:not(.is-narrow) .dirfig { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 10px 12px; }
.lesson.v2:not(.is-narrow) .dirfig__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label tag" "value value"; gap: 0 6px; padding: 5px 8px; }
.lesson.v2:not(.is-narrow) .dirfig__row > span { grid-area: label; }
.lesson.v2:not(.is-narrow) .dirfig__row > b { grid-area: value; font-size: 15px; white-space: nowrap; }
.lesson.v2:not(.is-narrow) .dirfig__row > em { grid-area: tag; }
.lesson.v2:not(.is-narrow) .dirfig__axis { grid-template-columns: 48px minmax(0, 1fr); gap: 6px; height: 140px; }
.lesson.v2:not(.is-narrow) .dirfig__ghost, .lesson.v2:not(.is-narrow) .dirfig__mark { padding: 4px 8px; gap: 6px; }
.lesson.v2:not(.is-narrow) .dirfig__mark .ms__icon svg { width: 22px; height: 22px; }
.lesson.v2:not(.is-narrow) .dirfig__mode .ms__icon svg { width: 24px; height: 24px; }
.lesson.v2:not(.is-narrow) .seg + .dirfig { margin-top: 8px; }
.lesson.v2:not(.is-narrow) .dirfig__axis { height: 150px; }
/* 低い画面：操作のある画面の表と説明を詰める */
.lesson.v2.is-short:not(.is-narrow) [data-lab] .calc-table th, .lesson.v2.is-short:not(.is-narrow) [data-lab] .calc-table td { padding-top: 4px !important; padding-bottom: 4px !important; }
.lesson.v2.is-short:not(.is-narrow) .why { margin-top: 8px; padding: 8px 12px; }
.lesson.v2.is-short:not(.is-narrow) .alloc__bar { height: 32px; }
.lesson.v2.is-short:not(.is-narrow) .option-list { gap: 6px; }
.lesson.v2.is-short:not(.is-narrow) .option-list button { padding: 8px 14px; }
.lesson.v2:not(.is-narrow) .method-box { padding: 10px 14px; }
.lesson.v2:not(.is-narrow) .method-box p { line-height: 1.55; }
.lesson.v2.is-short:not(.is-narrow) .stat-row div { padding: 6px 12px; }

/* =====================================================================
   全単元（単元01で試して決定）：紙の外側の余白を広げ，文字を一段小さくする（2026-10-25 追加）
   本文14px，見出し21px（低い画面20px），図の説明12.5〜13px．よければ全単元へ広げる．
===================================================================== */
.lesson.v2[data-unit]:not(.is-narrow):not(.is-list) .panel { padding: 22px clamp(40px, 7vw, 120px); }
.lesson.v2.is-short[data-unit]:not(.is-narrow):not(.is-list) .panel { padding-top: 14px; padding-bottom: 14px; }
.lesson.v2[data-unit]:not(.is-narrow) .canvas { padding: 26px 44px; }
.lesson.v2.is-short[data-unit]:not(.is-narrow) .canvas { padding: 18px 40px; }
.lesson.v2[data-unit]:not(.is-narrow) .split { gap: 36px; }
.lesson.v2[data-unit]:not(.is-narrow) .kicker { font-size: 12px; }
.lesson.v2[data-unit]:not(.is-narrow) .panel-title { font-size: 21px; line-height: 1.45; margin-bottom: 12px; }
.lesson.v2[data-unit]:not(.is-narrow) .panel-title--big { font-size: 22px; }
.lesson.v2.is-short[data-unit]:not(.is-narrow) .panel-title { font-size: 20px; margin-bottom: 10px; }
.lesson.v2[data-unit]:not(.is-narrow) .cover-title { font-size: 30px; }
.lesson.v2.is-short[data-unit]:not(.is-narrow) .cover-title { font-size: 28px; }
.lesson.v2[data-unit]:not(.is-narrow) .cover-lead, .lesson.v2[data-unit]:not(.is-narrow) .prose, .lesson.v2[data-unit]:not(.is-narrow) .summary-prose, .lesson.v2[data-unit]:not(.is-narrow) .summary-prose p, .lesson.v2.is-short[data-unit]:not(.is-narrow) .prose { font-size: 14px; line-height: 1.85; }
.lesson.v2[data-unit]:not(.is-narrow) .col-note, .lesson.v2[data-unit]:not(.is-narrow) .chart-limit, .lesson.v2[data-unit]:not(.is-narrow) .nf-note, .lesson.v2[data-unit]:not(.is-narrow) .bars__note, .lesson.v2[data-unit]:not(.is-narrow) .bars-title { font-size: 12.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .calc-table, .lesson.v2[data-unit]:not(.is-narrow) .calc-table tbody td, .lesson.v2[data-unit]:not(.is-narrow) .calc-table tbody th { font-size: 13.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .calc-table thead th { font-size: 12px; }
.lesson.v2[data-unit]:not(.is-narrow) .pc2__q { font-size: 16px; }
.lesson.v2[data-unit]:not(.is-narrow) .pc2__kind { font-size: 14px; }
.lesson.v2[data-unit]:not(.is-narrow) .pc2__what, .lesson.v2[data-unit]:not(.is-narrow) .pc2__label { font-size: 12.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .pc2__icon svg { width: 30px; height: 30px; }
.lesson.v2[data-unit]:not(.is-narrow) .pc2__q { grid-template-columns: 30px minmax(0, 1fr); }
.lesson.v2[data-unit]:not(.is-narrow) .nf-step__head { font-size: 13.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .nf-mode b, .lesson.v2[data-unit]:not(.is-narrow) .nf-chain b, .lesson.v2[data-unit]:not(.is-narrow) .rec-flow b { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .rec-flow span, .lesson.v2[data-unit]:not(.is-narrow) .nf-pp small, .lesson.v2[data-unit]:not(.is-narrow) .nf-sum__total span, .lesson.v2[data-unit]:not(.is-narrow) .nf-sum__total small { font-size: 12px; }
.lesson.v2[data-unit]:not(.is-narrow) .nf-sum__total b { font-size: 18px; }
.lesson.v2[data-unit]:not(.is-narrow) .nf-step__head em { font-size: 12px; }
.lesson.v2[data-unit]:not(.is-narrow) .bar__name, .lesson.v2[data-unit]:not(.is-narrow) .bar__value { font-size: 13.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .seg button, .lesson.v2[data-unit]:not(.is-narrow) .chip, .lesson.v2[data-unit]:not(.is-narrow) .btn-ghost { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .btn-primary { font-size: 14px; }
.lesson.v2[data-unit]:not(.is-narrow) .method-box p, .lesson.v2[data-unit]:not(.is-narrow) .kv dt, .lesson.v2[data-unit]:not(.is-narrow) .kv dd, .lesson.v2[data-unit]:not(.is-narrow) .method-box__title { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .option-list button { font-size: 14px; }
.lesson.v2[data-unit]:not(.is-narrow) .option-list button b { font-size: 14px; }
.lesson.v2[data-unit]:not(.is-narrow) .feedback, .lesson.v2[data-unit]:not(.is-narrow) .calc-note, .lesson.v2[data-unit]:not(.is-narrow) .why__list { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .question-line p { font-size: 15px; }
.lesson.v2[data-unit]:not(.is-narrow) .next-question__text { font-size: 14px; }
.lesson.v2[data-unit]:not(.is-narrow) .next-question__label { font-size: 12px; }
.lesson.v2[data-unit]:not(.is-narrow) .next-question .btn-primary { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .refs { font-size: 12px; }
.lesson.v2[data-unit]:not(.is-narrow) .mode-icons figure svg { width: 40px; }
.lesson.v2[data-unit]:not(.is-narrow) .mode-icons figcaption { font-size: 12.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .cover-meta dt, .lesson.v2[data-unit]:not(.is-narrow) .cover-meta span { font-size: 12px; }
.lesson.v2[data-unit]:not(.is-narrow) .cover-meta dd, .lesson.v2[data-unit]:not(.is-narrow) .cover-meta b { font-size: 16px; }
.lesson.v2[data-unit]:not(.is-narrow) .bubble { font-size: 14px; }
.lesson.v2[data-unit]:not(.is-narrow) .flow b { font-size: 13.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .flow span, .lesson.v2[data-unit]:not(.is-narrow) .steps-list li, .lesson.v2[data-unit]:not(.is-narrow) .setting-tag { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .policy-card__q { font-size: 16px; }
.lesson.v2[data-unit]:not(.is-narrow) .policy-card__kind, .lesson.v2[data-unit]:not(.is-narrow) .policy-card__text { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow):not(.is-one) .split[data-lab="u01-newline"] { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.lesson.v2[data-unit]:not(.is-narrow) .rec-flow { gap: 14px; margin-bottom: 8px; }
.lesson.v2[data-unit]:not(.is-narrow) .rec-flow li { padding: 6px 9px; }
.lesson.v2[data-unit]:not(.is-narrow) .option-list--row button { padding: 6px 10px; }
.lesson.v2[data-unit]:not(.is-narrow) .option-list--row button span { font-size: 12.5px; }

/* =====================================================================
   全単元（単元01で試して決定）：サイドバーを軽くする（2026-10-25 追加）
   ・ChatGPTのサイドバーに近い軽さ：薄いグレーの背景，太字や濃い塗りを使わない，項目は1行36px前後．
   ・文字：単元13px，ステップ12px，見出しラベル11.5px．太さは通常（現在地だけ少し太く）．
===================================================================== */
.lesson.v2[data-unit] .sb { background: #f9f9f9; border-right: 1px solid #ececec; }
.lesson.v2[data-unit] .sb__head { padding: 8px 8px 6px 14px; }
.lesson.v2[data-unit] .sb__logo img { height: 20px; opacity: 0.9; }
.lesson.v2[data-unit] .sb__close { width: 28px; height: 28px; color: #8a8f98; font-size: 16px; border-radius: 6px; }
.lesson.v2[data-unit] .sb__close:hover { background: #ececec; }
.lesson.v2[data-unit] .sb__tools { display: block; padding: 2px 8px 8px; border-bottom: 0; }
.lesson.v2[data-unit] .sb__home, .lesson.v2[data-unit] .sb__mode { display: flex; align-items: center; width: 100%; padding: 8px 10px; color: #0d0d0d; background: transparent; border: 0; border-radius: 8px; font-size: 13px; font-weight: 400; line-height: 20px; text-align: left; }
.lesson.v2[data-unit] .sb__home:hover, .lesson.v2[data-unit] .sb__mode:hover { background: #ececec; }
.lesson.v2[data-unit] .sb__mode[aria-pressed="true"] { color: #0d0d0d; background: #e8edf2; font-weight: 600; }
.lesson.v2[data-unit] .sb__nav { padding: 4px 8px 16px; }
.lesson.v2[data-unit] .sb__part { gap: 6px; margin: 14px 10px 4px; color: #8a8f98; font-size: 11.5px; font-weight: 400; letter-spacing: 0.02em; }
.lesson.v2[data-unit] .sb__part span { width: 10px; height: 3px; }
.lesson.v2[data-unit] .sb__units > li > a { grid-template-columns: 20px minmax(0, 1fr); gap: 4px; padding: 8px 10px; color: #0d0d0d; border-radius: 8px; font-size: 13px; font-weight: 400; line-height: 20px; }
.lesson.v2[data-unit] .sb__units > li > a:hover { background: #ececec; }
.lesson.v2[data-unit] .sb__num { color: #9aa0a8; font-family: inherit; font-size: 11px; }
.lesson.v2[data-unit] .sb__units > li.is-current > a { color: #0d0d0d; background: #ececec; font-weight: 600; }
.lesson.v2[data-unit] .sb__units > li.is-current > a .sb__num { color: #6b7280; }
.lesson.v2[data-unit] .sb__steps { margin: 2px 0 6px 18px; padding-left: 6px; border-left: 1px solid #e3e3e3; }
.lesson.v2[data-unit] .sb__steps button { grid-template-columns: 18px minmax(0, 1fr); gap: 2px; padding: 6px 8px; color: #4b5563; border-radius: 6px; font-size: 12px; font-weight: 400; line-height: 18px; }
.lesson.v2[data-unit] .sb__steps button:hover { background: #ececec; }
.lesson.v2[data-unit] .sb__stepnum { color: #a3a8b0; font-family: inherit; font-size: 10.5px; line-height: 18px; }
.lesson.v2[data-unit] .sb__steps .is-done button { color: #4b5563; }
.lesson.v2[data-unit] .sb__steps .is-current button { color: #0d0d0d; background: #e8edf2; font-weight: 600; }
.lesson.v2[data-unit] .sb__steps .is-current .sb__stepnum { color: var(--blue); }

/* =====================================================================
   全単元（単元01で試して決定）：中身もサイドバーと同じ軽い見た目にする（2026-10-25 追加）
   ・文字は端末の標準フォント（Windows：Segoe UI＋游ゴシック UI／メイリオ，Mac：ヒラギノ）．
   ・文字色はほぼ黒（#0D0D0D），補足は灰色．太字は600まで，ラベル類は500．
   ・背景は薄いグレー，紙面は白に細い線だけ（影なし）．紺は図の色と操作ボタンの要所に残す．
===================================================================== */
.lesson.v2[data-unit] {
    --font-jp: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo UI", Meiryo, system-ui, sans-serif;
    --font-display: var(--font-jp);
    --ink: #0d0d0d; --ink-soft: #2f2f2f; --muted: #8a8a8a; --line: #e5e5e5; --blue-pale: #eef2f6; --paper: #ffffff;
    font-family: var(--font-jp); color: #0d0d0d;
}
.lesson.v2[data-unit] :is(button, input, select) { font-family: inherit; }
.lesson.v2[data-unit] .stage { background: #f3f3f3; }
.lesson.v2[data-unit]:not(.is-narrow) .canvas { border-color: #e8e8e8; box-shadow: none; border-radius: 12px; }
.lesson.v2[data-unit] .tb { border-bottom-color: #ececec; }
.lesson.v2[data-unit] .tb__title { font-weight: 600; font-size: 13.5px; }
.lesson.v2[data-unit] .tb__bar span { background: #8a8a8a; }
.lesson.v2[data-unit].v2 .pager { border-top-color: #ececec; }
.lesson.v2[data-unit] .v2-main .pager__btn { font-weight: 500; border-radius: 999px; }
.lesson.v2[data-unit] .v2-main .pager__count b { font-weight: 600; }
/* 太さ：見出し・強調は600，ラベル・ボタンは500 */
.lesson.v2[data-unit] .v2-main :is(.panel-title, .cover-title, .cover-title .nb, .nf-step__head, .nf-step__head span, .pc2__q, .pc2__q span, .pc2__kind, .method-box__title, .question-line p, .next-question__text, .bar__name, b, strong, th, dt) { font-weight: 600; }
.lesson.v2[data-unit] .v2-main :is(.kicker, .col-lead, .bars-title, .pc2__label, .next-question__label, .question-line__label, figcaption, .nf-step__head em, button, .btn-primary, .btn-ghost, .chip) { font-weight: 500; }
.lesson.v2[data-unit] .v2-main :is(dd, .nf-chain i) { font-weight: 400; }
/* 色：見出しの上のラベルは灰色，本文はほぼ黒 */
.lesson.v2[data-unit] .v2-main .kicker { color: #8a8a8a; letter-spacing: 0.04em; }
.lesson.v2[data-unit] .v2-main .prose, .lesson.v2[data-unit] .v2-main .cover-lead { color: #0d0d0d; }
.lesson.v2[data-unit] .v2-main .col-note, .lesson.v2[data-unit] .v2-main .chart-limit, .lesson.v2[data-unit] .v2-main .nf-note { color: #6b6b6b; }
.lesson.v2[data-unit] .v2-main .pc2__card { border-color: #e5e5e5; border-top: 3px solid var(--blue); border-radius: 10px; }
.lesson.v2[data-unit] .v2-main .pc2__c { background: #f7f7f8; }
.lesson.v2[data-unit] .v2-main .pc2__label { color: var(--blue); }
.lesson.v2[data-unit] .v2-main .nf-step { border-color: #e5e5e5; }
.lesson.v2[data-unit] .v2-main .nf-step--model { background: #f5f8fb; border-color: #c9d9e7; }
.lesson.v2[data-unit] .v2-main .rec-flow li { border-color: #d5dee6; }
.lesson.v2[data-unit] .v2-main .next-question { background: #f7f7f8; color: #0d0d0d; border: 1px solid #e5e5e5; }
.lesson.v2[data-unit] .v2-main .next-question__label { color: #8a8a8a; }
.lesson.v2[data-unit] .v2-main .next-question .btn-primary { color: #ffffff; background: var(--ink); }
.lesson.v2[data-unit] .v2-main .next-question .btn-arrow { color: var(--ink); background: #ffffff; }
.lesson.v2[data-unit] .v2-main .next-question .btn-ghost { color: #0d0d0d; border-color: #d0d0d0; }
/* 全単元：見出しは元の書体・紺・太さに戻し，背景は前の薄い水色に戻す */
.lesson.v2[data-unit] .v2-main :is(.panel-title, .cover-title, .cover-title .nb) { color: #0c2c47; font-family: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; font-weight: 900; }
.lesson.v2[data-unit] .stage { background: #e8edf2; }

/* =====================================================================
   全単元：単元01の文字の大きさ（本文14px）に合わせて，ほかの部品も一段小さくする（2026-10-25 追加）
===================================================================== */
.lesson.v2[data-unit]:not(.is-narrow) .fx { font-size: 23px; }
.lesson.v2[data-unit]:not(.is-narrow) .fx--small { font-size: 18px; }
.lesson.v2[data-unit]:not(.is-narrow) .lfx .fx { font-size: 19px; }
.lesson.v2[data-unit]:not(.is-narrow) .lfx--mini .fx { font-size: 16px; }
.lesson.v2[data-unit]:not(.is-narrow) .bigeq__t { font-size: 30px; }
.lesson.v2[data-unit]:not(.is-narrow) .bigeq--small .bigeq__t { font-size: 20px; height: 30px; line-height: 30px; min-height: 30px; }
.lesson.v2[data-unit]:not(.is-narrow) .bigeq__d { font-size: 13.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .bigeq__s { font-size: 12.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .bigeq-down { font-size: 18px; }
.lesson.v2[data-unit]:not(.is-narrow) .symnote dt { font-size: 15px; }
.lesson.v2[data-unit]:not(.is-narrow) .symnote dd { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .symbol-list dt { font-size: 16px; }
.lesson.v2[data-unit]:not(.is-narrow) .symbol-list dd, .lesson.v2[data-unit]:not(.is-narrow) .kv dt, .lesson.v2[data-unit]:not(.is-narrow) .kv dd { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .why__label { font-size: 12px; }
.lesson.v2[data-unit]:not(.is-narrow) .why__list { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .control__label { font-size: 14px; }
.lesson.v2[data-unit]:not(.is-narrow) .control__label output { font-size: 15px; }
.lesson.v2[data-unit]:not(.is-narrow) .vbar__name, .lesson.v2[data-unit]:not(.is-narrow) .ubar__name { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .vbars__axis, .lesson.v2[data-unit]:not(.is-narrow) .ubars__axis, .lesson.v2[data-unit]:not(.is-narrow) .vbars__legend, .lesson.v2[data-unit]:not(.is-narrow) .ubars .bars__note, .lesson.v2[data-unit]:not(.is-narrow) .ubar__val { font-size: 12px; }
.lesson.v2[data-unit]:not(.is-narrow) .setting-tag, .lesson.v2[data-unit]:not(.is-narrow) .predict-check, .lesson.v2[data-unit]:not(.is-narrow) .lab-stat, .lesson.v2[data-unit]:not(.is-narrow) .legend, .lesson.v2[data-unit]:not(.is-narrow) .feedback, .lesson.v2[data-unit]:not(.is-narrow) .calc-note, .lesson.v2[data-unit]:not(.is-narrow) .lab__total { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .setting-tag b { font-size: 12px; }
.lesson.v2[data-unit]:not(.is-narrow) .lab-stat b, .lesson.v2[data-unit]:not(.is-narrow) .legend b { font-size: 14px; }
.lesson.v2[data-unit]:not(.is-narrow) .caution p, .lesson.v2[data-unit]:not(.is-narrow) .steps-list li { font-size: 13.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .ustep__say, .lesson.v2[data-unit]:not(.is-narrow) .ustep__rule, .lesson.v2[data-unit]:not(.is-narrow) .ustep__pick, .lesson.v2[data-unit]:not(.is-narrow) .uf__who, .lesson.v2[data-unit]:not(.is-narrow) .uf__mark b { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .ustep__pick b, .lesson.v2[data-unit]:not(.is-narrow) .uf__u { font-size: 14px; }
.lesson.v2[data-unit]:not(.is-narrow) .uf__axis, .lesson.v2[data-unit]:not(.is-narrow) .ustep__h { font-size: 12px; }
.lesson.v2[data-unit]:not(.is-narrow) .ms b { font-size: 13.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .ms__cond, .lesson.v2[data-unit]:not(.is-narrow) .ms__q { font-size: 12.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .fac__head, .lesson.v2[data-unit]:not(.is-narrow) .fac__chips li { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .fac__to, .lesson.v2[data-unit]:not(.is-narrow) .fac__mark { font-size: 12.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .persp__res, .lesson.v2[data-unit]:not(.is-narrow) .persp__who { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .persp__eq { font-size: 16px; }
.lesson.v2[data-unit]:not(.is-narrow) .ueq__box small, .lesson.v2[data-unit]:not(.is-narrow) .ueq__term small { font-size: 12.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .chain li { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .chain__h, .lesson.v2[data-unit]:not(.is-narrow) .chain__s, .lesson.v2[data-unit]:not(.is-narrow) .chain__v { font-size: 12.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .dirfig__row, .lesson.v2[data-unit]:not(.is-narrow) .dirfig__row em, .lesson.v2[data-unit]:not(.is-narrow) .dirfig__ghost, .lesson.v2[data-unit]:not(.is-narrow) .dirfig__mark { font-size: 12.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .dirfig__row > b { font-size: 13.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .dirfig__mode { font-size: 14px; }
.lesson.v2[data-unit]:not(.is-narrow) .day-line__act { font-size: 14px; }
.lesson.v2[data-unit]:not(.is-narrow) .day-line__time { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .day-line__tag { font-size: 12px; }
.lesson.v2[data-unit]:not(.is-narrow) .result-card__title { font-size: 17px; }
.lesson.v2[data-unit]:not(.is-narrow) .result-card__text, .lesson.v2[data-unit]:not(.is-narrow) .result-card__data, .lesson.v2[data-unit]:not(.is-narrow) .part-summary p { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .stat-row b { font-size: 18px; }
.lesson.v2[data-unit]:not(.is-narrow) .stat-row span { font-size: 12px; }
.lesson.v2[data-unit]:not(.is-narrow) .check-run__sum { font-size: 14px; }
.lesson.v2[data-unit]:not(.is-narrow) .check-table th, .lesson.v2[data-unit]:not(.is-narrow) .check-table td { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .check-table .flag { font-size: 12px; }
.lesson.v2[data-unit]:not(.is-narrow) [data-lab="u15-check"] .feedback { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .expbar__seg, .lesson.v2[data-unit]:not(.is-narrow) .alloc__seg { font-size: 12.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .sim__cap, .lesson.v2[data-unit]:not(.is-narrow) .sim .lab__total, .lesson.v2[data-unit]:not(.is-narrow) .expbar__title, .lesson.v2[data-unit]:not(.is-narrow) .expbar__fx { font-size: 12.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .llcurve text { font-size: 13px; }
.lesson.v2[data-unit]:not(.is-narrow) .ratio-box__row, .lesson.v2[data-unit]:not(.is-narrow) .word-formula { font-size: 15px; }
.lesson.v2[data-unit]:not(.is-narrow) .ueq__row { font-size: 18px; }
.lesson.v2[data-unit]:not(.is-narrow) .ueq__row--v, .lesson.v2[data-unit]:not(.is-narrow) .ueq__row--e { font-size: 16px; }
.lesson.v2[data-unit]:not(.is-narrow) .net__nt, .lesson.v2[data-unit]:not(.is-narrow) .lab__title { font-size: 14px; }
.lesson.v2[data-unit]:not(.is-narrow) .net__t, .lesson.v2[data-unit]:not(.is-narrow) .tree__t, .lesson.v2[data-unit]:not(.is-narrow) .model-flow__body, .lesson.v2[data-unit]:not(.is-narrow) .model-flow__label { font-size: 13.5px; }
.lesson.v2[data-unit]:not(.is-narrow) .pitfalls__head { font-size: 16px; }
.lesson.v2[data-unit]:not(.is-narrow) .stat-row div { padding: 6px 12px; }
.lesson.v2[data-unit] .tb__map .mmap__i { font-size: 12px; font-weight: 500; }
/* 太さ（全単元の部品） */
.lesson.v2[data-unit] .v2-main :is(.chain__h, .persp__who, .result-card__title, .day-line__act, .word-formula, .llcurve__label, .net__t, .tree__t) { font-weight: 600; }
.lesson.v2[data-unit] .v2-main :is(caption, .dirfig__row em, .uf__pick, .bubble p, .bigeq__d, .caution__label, .fac__head, .part-summary__label, .persp__res, .result-card__label, .ustep__h, .ustep__h span, .uf__who span, .why__label, .alloc__seg, .day-line__tag, .dirfig__mark, .fac__mark, .mmap__i, .ubar__name, .vbar__name, summary) { font-weight: 500; }
.lesson.v2[data-unit] .v2-main .why__label { color: #6b6b6b; }
/* 単元02「分析者から見る」：結果の文は式の下に置く（狭い列で縦に折り返さない） */
.lesson.v2[data-unit]:not(.is-narrow) .persp__row { grid-template-columns: 76px minmax(0, 1fr); gap: 4px 12px; padding: 10px 12px; }
.lesson.v2[data-unit]:not(.is-narrow) .persp__res { grid-column: 2; }
.lesson.v2[data-unit]:not(.is-narrow) .persp { gap: 8px; margin-bottom: 10px; }
/* 低い画面：紙の上下の余白は控えめにし，左右の余白を保つ */
.lesson.v2.is-short[data-unit]:not(.is-narrow):not(.is-list) .panel { padding-top: 10px; padding-bottom: 10px; }
.lesson.v2.is-short[data-unit]:not(.is-narrow) .canvas { padding: 14px 40px; }
.lesson.v2[data-unit]:not(.is-narrow):not(.is-one) .split:has(.calc-table--plan) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.lesson.v2.is-short[data-unit]:not(.is-narrow) .ustep { gap: 6px; }
.lesson.v2.is-short[data-unit]:not(.is-narrow) .ustep > li + li::before { top: -8px; }
.lesson.v2.is-short[data-unit]:not(.is-narrow) .why { margin-top: 6px; }
.lesson.v2[data-unit]:not(.is-narrow) .check-table th, .lesson.v2[data-unit]:not(.is-narrow) .check-table td { padding-left: 6px; padding-right: 6px; }
.lesson.v2[data-unit]:not(.is-narrow) .check-table .flag { padding: 2px 8px; }
.lesson.v2[data-unit]:not(.is-narrow):not(.is-one) .split:has([data-lab="u15-check"]) { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
.lesson.v2.is-short[data-unit]:not(.is-narrow) .vbar + .vbar { margin-top: 4px; }

/* =====================================================================
   全単元：上部バー・下部バー・サイドバーの操作部品をChatGPTに近い軽さにそろえる（2026-10-26 追加）
   ・線の細いアイコン（サイドバーの開閉），飾りの線は使わない．
   ・単元名は14px・太さ500，位置（基礎編・単元番号）は灰色．
===================================================================== */
.ico-sidebar { display: block; width: 20px; height: 20px; }
.lesson.v2[data-unit] .tb { gap: 6px; padding: 0 12px 0 8px; background: #ffffff; border-bottom: 1px solid #ececec; }
.lesson.v2[data-unit] .tb__menu, .lesson.v2[data-unit] .sb__close { width: 32px; height: 32px; padding: 0; color: #5d5d5d; background: transparent; border: 0; border-radius: 8px; }
.lesson.v2[data-unit] .tb__menu:hover, .lesson.v2[data-unit] .sb__close:hover { color: #0d0d0d; background: #ececec; }
.lesson.v2[data-unit] .tb__title { gap: 8px; margin-left: 4px; font-size: 14px; font-weight: 500; color: #0d0d0d; }
.lesson.v2[data-unit] .tb__crumb { color: #8a8a8a; font-weight: 400; }
.lesson.v2[data-unit] .tb__name { overflow: hidden; text-overflow: ellipsis; }
.lesson.v2[data-unit] .tb__bar { height: 2px; }
.lesson.v2[data-unit] .tb__bar span { background: #b4c2cf; }
.lesson.v2[data-unit] .tb__map .mmap { gap: 2px; }
.lesson.v2[data-unit] .tb__map .mmap__i { padding: 3px 9px; color: #8a8a8a; background: transparent; font-weight: 400; }
.lesson.v2[data-unit] .tb__map .mmap__i.is-done { color: #5d5d5d; background: transparent; }
.lesson.v2[data-unit] .tb__map .mmap__i.is-now { color: #0d0d0d; background: #ececec; font-weight: 500; }
/* 下部バー */
.lesson.v2[data-unit] .pager { padding: 0 12px; background: #ffffff; border-top: 1px solid #ececec; }
.lesson.v2[data-unit] .pager__btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; color: #0d0d0d; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 999px; font-size: 13.5px; font-weight: 500; box-shadow: none; }
.lesson.v2[data-unit] .pager__btn:hover:not(:disabled) { background: #f3f3f3; }
.lesson.v2[data-unit] .pager__btn--next { color: #ffffff; background: #0d0d0d; border-color: #0d0d0d; }
.lesson.v2[data-unit] .pager__btn--next:hover:not(:disabled) { background: #2f2f2f; }
.lesson.v2[data-unit] .pager__btn:disabled { color: #b4b4b4; background: #ffffff; border-color: #ececec; }
.lesson.v2[data-unit] .pager__btn--next:disabled { color: #ffffff; background: #cfcfcf; border-color: #cfcfcf; }
.lesson.v2[data-unit] .pager__count { color: #8a8a8a; font-size: 13px; }
.lesson.v2[data-unit] .pager__count b { color: #0d0d0d; font-size: 13.5px; font-weight: 500; }
/* サイドバーの頭 */
.lesson.v2[data-unit] .sb__head { padding: 6px 6px 4px 14px; }
/* 教材の中のボタンも同じ形にそろえる（黒の丸型，矢印は飾りの円なし） */
.lesson.v2[data-unit] .v2-main .btn-primary { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; color: #ffffff; background: #0d0d0d; border: 0; border-radius: 999px; font-size: 14px; font-weight: 500; box-shadow: none; }
.lesson.v2[data-unit] .v2-main .btn-primary:hover { background: #2f2f2f; }
.lesson.v2[data-unit] .v2-main .btn-primary .btn-arrow { width: auto; height: auto; color: inherit; background: transparent; font-size: 15px; }
.lesson.v2[data-unit] .v2-main .next-question .btn-primary { color: #ffffff; background: #0d0d0d; }
.lesson.v2[data-unit] .v2-main .next-question .btn-arrow { color: inherit; background: transparent; }
.lesson.v2[data-unit] .v2-main .btn-ghost { height: 32px; padding: 0 14px; color: #0d0d0d; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 999px; font-weight: 500; }
.lesson.v2[data-unit] .v2-main .btn-ghost:hover { background: #f3f3f3; }
/* 狭い画面：サイドバーは重ねて開くので，中央を全幅にする（208px の列指定が後から効いていたのを直す） */
@media (max-width: 899px) {
    .lesson.v2, .lesson.v2.sb-closed { grid-template-columns: minmax(0, 1fr); }
}
/* 上部バーの内容で中央の幅が広がらないようにする（入りきらない段階表示は panel.js がスライド内へ戻す） */
.lesson.v2 .v2-main { grid-template-columns: minmax(0, 1fr); }
.lesson.v2 .tb { min-width: 0; overflow: hidden; }
/* 教材の列が狭いとき（ウィンドウが狭いPC）：図の横並びを縦に戻して文字が細かく折り返さないようにする */
.lesson.v2[data-unit]:not(.is-narrow) .split > .col { container-type: inline-size; }
@container (max-width: 400px) {
    .ustep__pair { grid-template-columns: minmax(0, 1fr) !important; }
    .ustep .mode-strip--2 { grid-template-columns: minmax(0, 1fr); }
}
.lesson.v2[data-unit]:not(.is-narrow):not(.is-list) .panel { padding-left: clamp(16px, calc(9vw - 30px), 120px); padding-right: clamp(16px, calc(9vw - 30px), 120px); }
/* 単元02「自分で選ぶ」：条件を表示したまま選ぶ（手段・時間・費用を1行に） */
.option-list--cond { display: grid; gap: 8px; }
.option-list--cond button { display: grid; grid-template-columns: 14px minmax(0, 1fr) 5em 5em; align-items: center; gap: 10px; padding: 10px 14px; text-align: left; }
.option-list--cond button b { font-size: inherit; }
.option-list--cond button span:not(.sw) { color: var(--ink-soft); font-variant-numeric: tabular-nums; text-align: right; }
.is-narrow .option-list--cond button { grid-template-columns: 14px minmax(0, 1fr) auto auto; }
.lesson.v2[data-unit]:not(.is-narrow):not(.is-one) .split[data-lab="u01-newline"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* 単元02「効用とは」：左右余白を半分にし，効用図へ横幅を配分する */
.lesson.v2[data-unit]:not(.is-narrow):not(.is-list) section.panel[data-title="効用とは"] {
    padding-left: clamp(8px, calc(4.5vw - 15px), 60px);
    padding-right: clamp(8px, calc(4.5vw - 15px), 60px);
}

.lesson.v2[data-unit]:not(.is-narrow):not(.is-one) section[data-title="効用とは"] .split--wide-right {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
}

.lesson.v2[data-unit]:not(.is-narrow) section[data-title="効用とは"] .ustep__pair {
    grid-template-columns: minmax(0, 1.75fr) minmax(9.5em, 0.65fr);
    gap: 8px;
}

.lesson.v2[data-unit]:not(.is-narrow) section[data-title="効用とは"] .ustep__pair .fx--small {
    padding: 4px;
    font-size: 15px;
    line-height: 1.3;
}

.lesson.v2[data-unit]:not(.is-narrow) section[data-title="効用とは"] .ustep__pair .fx--small > span {
    max-width: none;
    white-space: nowrap;
    overflow-wrap: normal;
}

.lesson.v2[data-unit]:not(.is-narrow) section[data-title="効用とは"] .uf__mark b,
.lesson.v2[data-unit]:not(.is-narrow) section[data-title="効用とは"] .uf__u {
    white-space: nowrap;
}

/* 単元02「効用最大化」：効用の比較から選択までを一つの図で示す（枠は薄い1px，区切りは余白） */
.umax { width: 100%; max-width: 640px; margin: 14px auto 0; padding: 14px 20px 12px; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 12px; }
.umax__who { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: #3d3d3d; font-size: 14px; font-weight: 500; }
.umax__who svg { display: block; width: 18px; height: 18px; color: #5d5d5d; }
.umax__body { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
.umax__axis { position: relative; display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 2px 14px 2px 0; color: #8a8a8a; font-size: 12px; line-height: 1.4; text-align: right; }
.umax__axis::after { content: ""; position: absolute; top: 2px; bottom: 2px; right: 0; width: 1.5px; background: #b9b9b9; }
.umax__axis::before { content: ""; position: absolute; top: -2px; right: -4px; border: 5px solid transparent; border-bottom: 7px solid #b9b9b9; border-top: 0; }
.umax__rows { display: grid; gap: 34px; margin: 0; padding: 0; list-style: none; }
.umax__row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #f7f7f8; border: 1px solid transparent; border-radius: 10px; font-size: 15px; }
.umax__row b { font-weight: 600; }
.umax__icon svg { display: block; width: 24px; height: 24px; }
.umax__u { color: #3d3d3d; font-family: var(--font-math); font-size: 17px; }
.umax__row.is-pick { background: #eef3f8; border-color: #c9d9e7; }
.umax__pick { margin-left: auto; color: #5d5d5d; font-size: 13.5px; font-style: normal; }
.umax__pick strong { color: #0c2c47; font-weight: 600; }
.umax__eq { margin: 12px 0 0; color: #0d0d0d; font-family: var(--font-math); font-size: 20px; text-align: center; }
.is-narrow .umax__pick { flex-basis: 100%; margin-left: 34px; }
.is-narrow .umax__row { flex-wrap: wrap; }
.umax__body { grid-template-columns: 84px minmax(0, 1fr); } .umax__axis { white-space: nowrap; }
/* 「効用最大化」：文章は左，図は右．右の列では図を列幅いっぱいに */
.split .umax { max-width: none; margin-top: 0; }
.split .umax__pick { flex-basis: 100%; margin-left: 34px; }
.split .umax__row { flex-wrap: wrap; row-gap: 2px; }
.umax__pick strong { white-space: nowrap; }
/* 単元02「効用とは」：条件・Aさんの評価・効用の高低を一つの図で上から順に（番号・太い枠なし） */
.utl__cond { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 10px; padding: 0 0 10px; list-style: none; border-bottom: 1px solid #eeeeee; color: #3d3d3d; font-size: 13.5px; }
.utl__cond li { display: flex; align-items: center; gap: 8px; }
.utl__cond b { color: #0d0d0d; font-weight: 600; }
.utl__say { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; color: #3d3d3d; font-size: 13.5px; line-height: 1.6; }
.utl__say svg { display: block; width: 18px; height: 18px; margin-top: 2px; color: #5d5d5d; }
.umax--util .umax__rows { gap: 18px; }
.umax--util .umax__row { padding: 7px 14px; }
.umax--util .umax__eq { margin-top: 8px; font-size: 18px; }
.utl__note { margin: 8px 2px 0; color: #6b6b6b; font-size: 12.5px; line-height: 1.6; }
.split .umax--util { max-width: none; }
.umax--util .umax__who span { display: none; }
/* 単元02「Vを計算する」：前の画面の式を主役にし，係数の意味を各項の直下に置く */
.vcalc[data-mode="sym"] [data-num] { display: none !important; }
.vcalc[data-mode="num"] [data-sym] { display: none !important; }
.vcalc__eq { margin: 6px 0 0 !important; }
.vcalc__term .bigeq__d b { color: #0c2c47; font-weight: 600; }
.vcalc__coef { margin: 6px 0 0; padding: 6px 10px; color: #3d3d3d; background: #f7f7f8; border-radius: 8px; font-size: 13px; line-height: 1.55; text-align: center; }
.vcalc__total .bigeq__t b { color: #0c2c47; }
.vcalc__ctrl { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 24px; max-width: 760px; margin: 14px auto 0; }
.vcalc__ctrl .control { margin: 0 !important; }
.vcalc__ctrl .btn-primary { align-self: center; }
.vcalc__msg { min-height: 1.6em; max-width: 760px; margin: 8px auto 0; color: #0d0d0d; font-size: 14px; line-height: 1.6; text-align: center; }
.vcalc__foot { max-width: 820px; margin: 8px auto 0; color: #6b6b6b; font-size: 12.5px; line-height: 1.6; text-align: center; }
.is-narrow .vcalc__ctrl { grid-template-columns: minmax(0, 1fr); }
.lesson.v2[data-unit]:not(.is-narrow) .vcalc__eq .bigeq__t { height: 46px; line-height: 46px; font-size: 28px; }
.lesson.v2[data-unit]:not(.is-narrow) .vcalc__coef { margin-top: 4px; padding: 4px 10px; }
.lesson.v2[data-unit]:not(.is-narrow) .vcalc__ctrl { margin-top: 10px; }
.lesson.v2[data-unit]:not(.is-narrow) .vcalc__msg { margin-top: 6px; }
.lesson.v2[data-unit]:not(.is-narrow) .vcalc__foot { margin-top: 4px; }
.lesson.v2[data-unit]:not(.is-narrow) .vcalc__coef { white-space: nowrap; }
.lesson.v2[data-unit]:not(.is-narrow) .vcalc__eq { gap: 0 10px; }
.lesson.v2[data-unit]:not(.is-narrow) .vcalc__eq .bigeq__t { min-height: 0; }
.lesson.v2[data-unit]:not(.is-narrow) .vcalc__eq .bigeq__d { margin-top: 2px; padding-top: 4px; border-top: 1.5px solid #c9c9c9; font-size: 13.5px; }

/* =====================================================================
   単元02 画面11〜18（εからロジットモデルへ，2026-10-26 追加）
   ・「基本の説明／数式・理論」の切り替え（.th，js/theory.js）．ほかの単元でも data-theory があれば使える．
   ・e2- で始まる部品は単元02の画面11〜18だけで使う．
===================================================================== */
.th { position: static; }
.th__tabs { position: absolute; top: 12px; right: 16px; z-index: 2; display: inline-flex; padding: 2px; background: #f3f5f7; border: 1px solid #e3e8ed; border-radius: 999px; }
.th__tabs button { padding: 3px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 12px; font-weight: 500; line-height: 1.6; cursor: pointer; }
.th__tabs button[aria-pressed="true"] { background: var(--ink); color: #ffffff; }
.th__tabs button:focus-visible, .th__nav button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.th .stack > .panel-title, .th .split > .col:first-child > .panel-title:only-of-type { padding-right: 0; }
.th .stack > .panel-title { padding-right: 190px; }
.th__basic[hidden], .th__theory[hidden], .th__page[hidden] { display: none !important; }

.panel.is-theory .canvas { justify-content: flex-start !important; }
.th.is-theory { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.th__theory { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.th__head { display: flex; align-items: baseline; gap: 10px; margin: 0 200px 8px 0; padding-bottom: 8px; border-bottom: 1px solid #e3e8ed; }
.th__label { color: var(--blue); font-size: 12px; font-weight: 500; white-space: nowrap; }
.th__head b { color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.4; }
.th__pages { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.th__page { max-width: 860px; }
.th__ptitle { margin: 2px 0 6px; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.5; }
.th__ptitle:focus { outline: none; }
.th-p { margin: 0 0 6px; color: #1f2d3a; font-size: 13.5px; line-height: 1.75; }
.th-math { margin: 4px 0 8px; overflow-x: auto; overflow-y: hidden; }
.th-math .katex-display { margin: 0.35em 0; }
.th-math .katex { font-size: 1.12em; }
.th .katex { color: var(--ink); }
.th-p .katex, .th-defs .katex, .th-sym .katex { font-size: 1.05em; }
.th-defs { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0 0 8px; padding: 0; list-style: none; color: var(--ink-soft); font-size: 12.5px; line-height: 1.7; }
.th-sym { border-collapse: collapse; margin: 4px 0 8px; font-size: 12.5px; line-height: 1.5; }
.th-sym th, .th-sym td { padding: 4px 10px; border-bottom: 1px solid #e8ecf0; text-align: left; vertical-align: top; }
.th-sym thead th { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.th-sym tbody th { color: var(--ink); font-weight: 500; white-space: nowrap; }
.th-sym--wide { width: 100%; max-width: 760px; font-size: 13px; }
.th-sym--wide tbody th { white-space: normal; width: 34%; }
.th-sym2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.th-sym2 .th-sym { width: 100%; }
.th-live { margin: 0 0 8px; padding: 6px 10px; background: #f5f8fb; border-radius: 6px; color: var(--ink-soft); font-size: 12.5px; }
.th__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e3e8ed; }
.th__nav button { padding: 4px 12px; border: 1px solid #d9e1e8; border-radius: 999px; background: #ffffff; color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.th__nav button:disabled { color: #b4bec8; cursor: default; }
.th__back { background: #f3f5f7 !important; }
.th__pager { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.th__count { min-width: 3em; color: var(--muted); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.th__dots { display: none; }
.th__key { flex-basis: 100%; margin-top: -4px; color: #98a6b3; font-size: 11px; text-align: right; }
.th__key:empty { display: none; }
.is-narrow .th__tabs { position: static; align-self: flex-end; margin: 0 0 12px auto; }
.is-narrow .th { display: flex; flex-direction: column; }
.is-narrow .th .stack > .panel-title, .is-narrow .th__head { padding-right: 0; margin-right: 0; }
.is-narrow .th-sym2 { grid-template-columns: minmax(0, 1fr); }
.is-narrow .th__key { display: none; }

/* 共通の小部品 */
.e2-next { margin: 12px 0 0; padding-left: 10px; border-left: 2px solid var(--blue); color: var(--ink-soft); font-size: 13.5px; line-height: 1.7; }
.e2-badge { display: inline-block; margin: 0 0 6px; padding: 1px 10px; background: var(--blue-pale); border-radius: 999px; color: #2e6286; font-size: 11.5px; font-weight: 500; line-height: 1.7; }
.e2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.e2-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; }
.e2-ctrl .btn-ghost, .e2-ctrl .btn-primary { min-height: 0; padding: 6px 16px; font-size: 13px; }
.e2-ctrl .btn-ghost--sm, .e2-ctrl .btn-primary--sm { padding: 5px 14px; font-size: 12.5px; }
.e2-ctrl button:disabled { opacity: 0.4; cursor: default; }
.e2-ctrl__group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.e2-ctrl__label { color: var(--muted); font-size: 12px; }
.e2-msg { min-height: 3.4em; margin: 4px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.e2-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.e2-term { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid #e8ecf0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.7; }
[data-e2] .chip { padding: 3px 12px; font-size: 12.5px; }
[data-e2] .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #ffffff; }
[data-e2] .chip:disabled { opacity: 0.4; cursor: default; }

/* 画面11：U＝V＋ε（εが主役） */
.lesson.v2[data-unit] .e2-eq { margin: 14px 0 2px; column-gap: 26px; }
.e2-eq .bigeq__d { max-width: 13em; }
.e2-eq__u .bigeq__d, .e2-eq__v .bigeq__d { color: var(--ink-soft); }
.e2-eq__u .bigeq__t, .e2-eq__v .bigeq__t { color: #4a6073; }
.e2-eq__e .bigeq__d { color: var(--ink); font-weight: 700 !important; }
.e2-eq__e .ee { background: #f3f7fb; }
.e2-val { display: grid; justify-items: center; gap: 0; margin: 6px 0 0; }
.e2-val b { color: var(--ink); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.e2-val span { color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.e2-eq__e .e2-val b { color: var(--blue); }
.e2-factors { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; margin: 6px 0 0; padding: 0; list-style: none; color: var(--ink); font-size: 13px; font-weight: 500; }
.e2-factors li + li::before { content: "／"; margin: 0 2px; color: var(--muted); font-weight: 400; }

/* 画面12・13：分布の図 */
.e2-cap { margin: 0 0 2px; color: var(--ink); font-size: 13px; font-weight: 700; }
.e2-dens { display: block; width: 100%; height: auto; overflow: visible; }
.e2-dens__curve { fill: none; stroke: var(--ink); stroke-width: 2; }
.e2-dens__area { fill: rgba(63, 127, 169, 0.26); stroke: var(--blue); stroke-width: 1; }
.e2-dens__axis, .e2-dens__tick { stroke: #9aa8b4; stroke-width: 1; }
.e2-dens__tl { fill: var(--muted); font-size: 11px; }
.e2-dens__ax, .e2-dens__ay { fill: var(--muted); font-size: 11px; }
.e2-dens__lab { fill: var(--ink); font-size: 13.5px; font-weight: 700; }
.e2-dens__lead { stroke: var(--blue); stroke-width: 1; stroke-dasharray: 3 3; }
.e2-range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; }
.e2-range__label { margin-right: 2px; color: var(--muted); font-size: 12px; }
.e2-assume { margin: 10px 0 0; }
.e2-assume div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 10px; padding: 5px 0; border-top: 1px solid #e8ecf0; }
.e2-assume dt { color: var(--ink); font-size: 13px; font-weight: 700; }
.e2-assume dd { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.e2-mini { margin: 0 0 4px; }
.e2-dens--mini { max-height: 92px; }
.e2-mini__cap { margin: 0; color: var(--muted); font-size: 11.5px; text-align: right; }
.e2-dens__m { stroke-width: 2.5; }
.e2-dens__m--rail { stroke: var(--c-rail); }
.e2-dens__m--bus { stroke: var(--c-bus); }
.e2-dens__m--bike { stroke: var(--c-bike); }
.e2-dens__d--rail { fill: var(--c-rail); }
.e2-dens__d--bus { fill: var(--c-bus); }
.e2-dens__d--bike { fill: var(--c-bike); }

/* 画面13：V・ε・U の表 */
.e2-utab th small, .e2-ttab th small { display: block; color: var(--muted); font-size: 10.5px; font-weight: 400; line-height: 1.3; white-space: nowrap; }
.e2-utab thead th { vertical-align: bottom; }
.e2-utab td, .e2-utab th { font-variant-numeric: tabular-nums; }
.e2-pick { visibility: hidden; display: inline-block; padding: 0 8px; background: var(--ink); border-radius: 999px; color: #ffffff; font-size: 11.5px; font-style: normal; font-weight: 500; line-height: 1.7; }
.e2-utab tr.is-pick .e2-pick { visibility: visible; }
.e2-utab tr.is-pick > * { background: #eef3f8; }
.e2-utab tr.is-pick [data-uu] { color: var(--ink); }

/* 画面14：集計 */
.e2-last { min-height: 3.2em; margin: 0 0 6px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.6; }
.e2-marks { margin: 0 0 6px; }
.e2-marks__grid { display: grid; grid-template-columns: repeat(50, minmax(0, 1fr)); gap: 2px; }
.e2-marks__grid i { display: block; aspect-ratio: 1; border-radius: 2px; background: #eef1f4; }
.e2-marks__grid i[data-mode="0"] { background: var(--c-rail); }
.e2-marks__grid i[data-mode="1"] { background: var(--c-bus); }
.e2-marks__grid i[data-mode="2"] { background: var(--c-bike); }
.e2-marks__cap { margin: 2px 0 0; color: var(--muted); font-size: 11.5px; text-align: right; }
.e2-share { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.e2-share__bar { position: relative; width: 70px; height: 8px; background: #eef1f4; border-radius: 4px; overflow: hidden; }
.e2-share__bar span { position: absolute; inset: 0 auto 0 0; width: 0; }
[data-tb="0"] { background: var(--c-rail); }
[data-tb="1"] { background: var(--c-bus); }
[data-tb="2"] { background: var(--c-bike); }
.e2-ttab tr.is-hit > * { background: #eef3f8; }
.e2-total { margin: 4px 0 0; color: var(--ink-soft); font-size: 12.5px; }
.e2-total span { margin-left: 8px; color: var(--muted); font-size: 11.5px; }

/* 画面15：ロジットの式 */
.e2-logit { display: grid; grid-template-columns: minmax(0, 1fr) 190px; align-items: center; gap: 22px; margin: 10px 0 6px; }
.e2-logit__fx .lfx .fx { white-space: nowrap; }
.lesson.v2[data-unit]:not(.is-narrow) .e2-lfx .fx { font-size: 22px; padding: 8px 8px; }
.e2-logit__lab { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 4px 0 0; color: var(--ink-soft); font-size: 12.5px; }
.e2-logit__lab .vv { border-width: 1.5px; }
.e2-logit__side { padding: 8px 0 8px 16px; border-left: 1px solid #e3e8ed; }
.e2-logit__h { margin: 0 0 4px; color: var(--muted); font-size: 11.5px; }
.e2-logit__vals { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.7; font-variant-numeric: tabular-nums; }
.e2-logit__vals b { color: var(--ink); font-weight: 500; }
.e2-logit__n { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.e2-logit__arrow { margin: 6px 0 0; color: var(--blue); font-size: 12.5px; font-weight: 500; }
.e2-point { margin: 8px 0 0; padding: 8px 12px; background: #f5f8fb; border-radius: 8px; color: var(--ink); font-size: 13.5px; line-height: 1.7; }

/* 画面16：段階的な計算 */
.e2-calcfx { margin: 8px 0 0; min-width: 0; }
.lesson.v2[data-unit]:not(.is-narrow) .e2-calcfx .fx { flex-wrap: nowrap; gap: 8px; padding: 6px 0; border-top: 0; border-bottom: 0; background: transparent; font-size: 16px; white-space: nowrap; }
.e2-calcfx .fx__num, .e2-calcfx .fx__den { padding-left: 6px; padding-right: 6px; }
.e2-calcfx .fx__num { padding-bottom: 4px; }
.e2-calcfx .fx__den { padding-top: 4px; border-radius: 6px; }
.e2-calcfx .vv { border-width: 1.5px; }
.e2-calcfx [data-calc-part] { transition: background-color 0.25s ease, box-shadow 0.25s ease; }
.e2-calcfx .is-calc-active { background: #e6eef6; box-shadow: 0 0 0 2px rgba(63, 127, 169, 0.38); border-radius: 6px; animation: e2-calc-flash 0.35s ease-out; }
@keyframes e2-calc-flash {
    from { background: #ffffff; box-shadow: 0 0 0 0 rgba(63, 127, 169, 0); }
    to { background: #e6eef6; box-shadow: 0 0 0 2px rgba(63, 127, 169, 0.38); }
}
@media (prefers-reduced-motion: reduce) {
    .e2-calcfx .is-calc-active { animation: none; }
}
.is-narrow .e2-calcfx .fx { flex-wrap: nowrap; gap: 6px; padding: 6px 0; border-top: 0; border-bottom: 0; background: transparent; font-size: 14px !important; white-space: nowrap; }
.e2-ctab td, .e2-ctab th { font-variant-numeric: tabular-nums; transition: background-color 0.25s ease; }
.e2-calc[data-step="1"] .e2-ctab tbody tr:not(:last-child) td:nth-child(3),
.e2-calc[data-step="2"] .e2-ctab tbody tr:last-child td:nth-child(3),
.e2-calc[data-step="3"] .e2-ctab tbody tr:first-child td:nth-child(3),
.e2-calc[data-step="3"] .e2-ctab tbody tr:last-child td:nth-child(3),
.e2-calc[data-step="3"] .e2-ctab tbody tr:first-child td:nth-child(4),
.e2-calc[data-step="4"] .e2-ctab tbody tr:nth-child(2) td:nth-child(3),
.e2-calc[data-step="4"] .e2-ctab tbody tr:last-child td:nth-child(3),
.e2-calc[data-step="4"] .e2-ctab tbody tr:nth-child(2) td:nth-child(4),
.e2-calc[data-step="5"] .e2-ctab tbody tr:nth-child(3) td:nth-child(3),
.e2-calc[data-step="5"] .e2-ctab tbody tr:last-child td:nth-child(3),
.e2-calc[data-step="5"] .e2-ctab tbody tr:nth-child(3) td:nth-child(4),
.e2-calc[data-step="6"] .e2-ctab tbody td:nth-child(4) { background: #e6eef6; }
.e2-calc__res { visibility: hidden; margin: 10px 0 0; color: var(--ink); font-size: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.e2-calc__res span { font-size: 14px; font-weight: 700; }
.e2-calc__res b { font-weight: 700; }
.e2-calc[data-step="3"] .e2-calc__res,
.e2-calc[data-step="4"] .e2-calc__res,
.e2-calc[data-step="5"] .e2-calc__res,
.e2-calc[data-step="6"] .e2-calc__res { visibility: visible; }
.e2-calc[data-step="6"] .e2-calc__res { padding: 8px 10px; background: #f5f8fb; border-radius: 8px; font-size: 15px; line-height: 1.6; }
.e2-calc[data-step="6"] .e2-calc__res span { color: var(--blue); font-size: 12px; font-weight: 500; }
.e2-calc[data-step="6"] .e2-calc__res b { font-weight: 600; }
/* 画面17：バスの運賃 */
.e2-busfx { margin: 0 0 8px; padding: 8px 12px; border: 1px solid #e3e8ed; border-radius: 10px; }
.e2-busfx__eq { margin: 0; color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.e2-busfx__eq .vv { border-width: 1.5px; }
.e2-busfx__fare { padding: 0 4px; background: #fdf0e6; border-radius: 4px; color: #b45a1c; }
.e2-busfx__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.e2-busfx__ctrl label { color: var(--muted); font-size: 12px; }
.e2-busfx__ctrl input[type="range"] { flex: 1 1 140px; min-width: 120px; accent-color: var(--c-bus); }
.e2-ftab td, .e2-ftab th { font-variant-numeric: tabular-nums; }
.e2-ftab tr.is-changed > * { background: #fdf6f0; }
.e2-base { color: var(--muted); }
[data-fd][data-dir="up"] { color: #2e6286; font-weight: 500; }
[data-fd][data-dir="down"] { color: #9a4b16; font-weight: 500; }

/* 画面18：まとめの式 */
.e2-chain { margin: 0 0 12px; padding: 0; list-style: none; }
.e2-chain li { display: grid; grid-template-columns: 7em minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px solid #e8ecf0; }
.e2-chain li:last-child { border-bottom: 1px solid #e8ecf0; }
.e2-chain__h { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.e2-chain__f { color: var(--ink); font-size: 14px; line-height: 1.6; }
.e2-chain__f small { display: block; color: var(--ink-soft); font-size: 11.5px; line-height: 1.5; }
.e2-chain__f .vv, .e2-chain__f .ee { border-width: 1.5px; }
/* 画面11〜18：高さの調整（1270×480 の実表示で収める） */
.lesson.v2[data-unit]:not(.is-narrow) .e2-eq .bigeq__t { min-height: 46px; line-height: 46px; }
.e2-eq .bigeq__d { max-width: none; white-space: nowrap; margin-top: 4px; padding-top: 4px; }
.lesson.v2[data-unit] [data-e2="11"] .prose p { margin-bottom: 6px; }
.e2-ttab th, .e2-ttab td, .e2-utab th, .e2-utab td, .e2-ctab th, .e2-ctab td, .e2-ftab th, .e2-ftab td { padding-top: 4px !important; padding-bottom: 4px !important; }
.th__basic > .split > .col:last-child > .next-question:first-child { margin-top: 0; }
[data-theory] .th__basic > .split > .col:last-child > .e2-chain:first-child { margin-top: 30px; }
.lesson.v2[data-unit] .v2-main .th__basic .next-question { padding: 12px 16px; border-radius: 12px; }
.lesson.v2[data-unit] .v2-main .th__basic .next-question__text { margin-bottom: 10px; font-size: 13.5px; font-weight: 500; line-height: 1.7; }
.lesson.v2[data-unit] [data-e2] .chip { padding: 3px 12px; font-size: 12.5px; line-height: 1.6; }
.lesson.v2[data-unit] [data-e2] .e2-ctrl .btn-ghost, .lesson.v2[data-unit] [data-e2] .e2-ctrl .btn-primary { padding: 5px 14px; font-size: 13px; line-height: 1.5; }
.th-refs { margin: 10px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.6; }
.lesson.v2[data-unit] .v2-main .th__basic .next-question__text { max-width: none; }
.lesson.v2[data-unit] .v2-main .th__basic .next-question__text { text-wrap: pretty; }
[data-theory] .th__basic > .split > .col:last-child > .e2-chain:first-child { margin-top: 26px; }
.e2-chain li { padding: 3px 0; gap: 8px; grid-template-columns: 6em minmax(0, 1fr); }
.e2-chain__h { font-size: 11px; }
.e2-chain__f { font-size: 13.5px; line-height: 1.5; }
.e2-chain__f small { font-size: 11px; line-height: 1.45; }
.lesson.v2[data-unit] .v2-main .th__basic .next-question__links { margin-top: 0; }
.lesson.v2[data-unit] .v2-main .th__basic .next-question { padding: 10px 16px; }
.lesson.v2[data-unit] .v2-main .th__basic .next-question__text { margin-bottom: 8px; }
.lesson.v2[data-unit] .e2-eq { margin: 8px 0 0; }
.e2-val { margin-top: 2px; }
.e2-factors { margin-top: 3px; }
[data-e2="11"] .e2-next { margin-top: 8px; }
.lesson.v2[data-unit] .e2-eq .bigeq__d { margin-top: 0; }
/* 補足：縦の間隔を詰め，キー操作の案内はページ送りと同じ行に置く */
.th-p { margin-bottom: 4px; line-height: 1.7; }
.th-math { margin: 2px 0 4px; }
.th-math .katex-display { margin: 0.2em 0; }
.th-defs { margin-bottom: 4px; }
.th-sym th, .th-sym td { padding: 3px 10px; }
.th__head { margin-bottom: 6px; padding-bottom: 6px; }
.th__nav { margin-top: 6px; padding-top: 6px; }
.th__key { flex-basis: auto; order: 1; margin: 0 0 0 auto; text-align: right; }
.th__pager { order: 2; }
.th__nav:has(.th__key:not(:empty)) .th__pager { margin-left: 0; }
.th__basic > .split > .col:last-child { padding-top: 26px; }
[data-theory] .th__basic > .split > .col:last-child > .e2-chain:first-child { margin-top: 4px; }
.th__basic > .split > .col:last-child:has(> .e2-chain) { padding-top: 22px; }
.th__tabs { top: 9px; }
.th__tabs button { line-height: 1.5; }
.e2-ftab th, .e2-ftab td, .e2-ttab td, .e2-ctab td, .e2-utab td { white-space: nowrap; }
.e2-ftab thead th { font-size: 11.5px; }
.e2-logit__vals { font-size: 12px; line-height: 1.55; }
.e2-ftab { font-size: 12.5px; }
.e2-ftab th, .e2-ftab td { padding-left: 6px !important; padding-right: 6px !important; }
.e2-ftab thead th small { display: block; color: var(--muted); font-size: 10px; font-weight: 400; }
.e2-utab th small { white-space: normal; }
.e2-utab th, .e2-utab td { padding-left: 8px !important; padding-right: 8px !important; }
.lesson.v2[data-unit] [data-e2="17"] .why { margin-top: 8px; padding: 8px 12px; }
.lesson.v2[data-unit] [data-e2="17"] .why__list li { line-height: 1.6; }
[data-e2="17"] .e2-next { margin-top: 8px; }
.e2-pick { white-space: nowrap; }
.e2-utab th small { white-space: nowrap; }
.e2-ttab thead th { font-size: 11.5px; white-space: nowrap; }
.e2-assume div { grid-template-columns: 4.5em minmax(0, 1fr); }
.e2-utab .e2-pick { margin-left: 4px; }
.e2-utab th, .e2-utab td { padding-left: 6px !important; padding-right: 6px !important; }
.e2-utab th small { font-size: 10px; }
/* 画面11〜18：狭い画面 */
.e2-logit__fx { min-width: 0; overflow-x: auto; }
.is-narrow .e2-logit { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.is-narrow .e2-logit__side { padding: 8px 0 0; border-left: 0; border-top: 1px solid #e3e8ed; }
.is-narrow .e2-lfx .fx { font-size: 13px !important; padding: 6px 2px !important; }
.v2.is-narrow .panel.is-theory .canvas { margin-top: 0; }
.is-narrow .e2-val { justify-items: start; }
.is-narrow .e2-factors { justify-content: flex-start; }
.is-narrow .e2-busfx__eq { font-size: 14px; white-space: normal; }
.lesson.v2[data-unit]:not(.is-narrow):not(.is-one) .u03-records { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.lesson.v2[data-unit]:not(.is-narrow) .u03-records__fx { margin: 10px 0; padding: 9px 12px; border-top-width: 1px; font-size: 18px; }
.lesson.v2[data-unit]:not(.is-narrow) .u03-records__intro { margin-bottom: 6px; }
.lesson.v2[data-unit]:not(.is-narrow) .u03-records .calc-table th,
.lesson.v2[data-unit]:not(.is-narrow) .u03-records .calc-table td { padding: 5px 7px; white-space: nowrap; }
.lesson.v2[data-unit]:not(.is-narrow) .u03-records .col-note { margin-top: 7px; }
.is-narrow .e2-lfx .fx { font-size: 14px !important; }
.is-narrow .th-p { font-size: 16px; }
.is-narrow .th-defs, .is-narrow .th-sym, .is-narrow .th-live, .is-narrow .th-refs { font-size: 14.5px; }
.is-narrow .th__head b { font-size: 18px; }
.is-narrow .th__ptitle { font-size: 16px; }
.is-narrow .th__nav button { font-size: 14px; }
.is-narrow .th__tabs button { font-size: 13px; }

/* =====================================================================
   単元02 画面A〜E（εから確率分布へ，2026-10-26 夜 追加）
   画面Aの帯＝人数比，画面Cの領域＝大小関係（幅は量を表さない），画面Dの棒＝計算した確率．
===================================================================== */
.e2-main { margin: 10px 0 0; color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.7; }
.e2-note2 { margin: 4px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.65; }
.e2-ex { display: inline-block; margin: 6px 0 0; padding: 1px 10px; background: #f3f5f7; border-radius: 999px; color: var(--muted); font-size: 11.5px; line-height: 1.7; }
.th-cap { margin: -2px 0 8px; color: var(--ink-soft); font-size: 12.5px; text-align: center; }

/* 画面A：記録したこと／記録していないこと */
.e2a { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 0; margin: 12px 0 0; background: #f7f9fb; border-radius: 10px; }
.e2a > div { padding: 12px 16px; }
.e2a__not { border-left: 1px solid #e3e8ed; }
.e2a__h { margin: 0 0 8px; color: var(--ink-soft); font-size: 12.5px; font-weight: 600; }
.e2a__bar { display: flex; height: 34px; border-radius: 4px; overflow: hidden; }
.e2a__seg { display: flex; align-items: center; justify-content: center; flex-basis: 0; color: #ffffff; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.e2a__seg--rail { background: var(--c-rail); }
.e2a__seg--bus { background: var(--c-bus); }
.e2a__scale { display: flex; justify-content: space-between; margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.e2a__txt { margin: 6px 0 0; color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: 0.02em; }

/* 画面B：不等式（上下で対応） */
.e2b { margin: 10px 0 0; padding: 10px 16px 8px; background: #f7f9fb; border-radius: 10px; }
.e2b__seg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.e2b__seg button, .e2d__seg button { padding: 5px 14px; border: 1px solid #cdd6df; border-radius: 999px; background: #ffffff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.e2b__seg button[aria-pressed="true"], .e2d__seg button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #ffffff; }
.e2b__seg button[aria-pressed="true"]::before, .e2d__seg button[aria-pressed="true"]::before { content: "✓ "; }
.e2b__seg button:focus-visible, .e2d__seg button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.e2b__seg .e2-ex { margin: 0 0 0 auto; }
.e2b__eq { margin: 6px 0 0; }
.e2b__row { display: grid; grid-template-columns: minmax(0, 1fr) 3em minmax(0, 1fr); align-items: center; }
.e2b__l { justify-self: end; }
.e2b__r { justify-self: start; }
.e2b__op { justify-self: center; color: var(--blue); }
.e2b__row .katex { font-size: 1.75em; white-space: nowrap; }
.e2b__row--u .katex { font-size: 1.55em; }
.e2b__sub { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.e2b__row--lab { margin-top: 2px; color: var(--ink-soft); font-size: 12.5px; }
.e2b__row--lab .e2b__l, .e2b__row--lab .e2b__r { padding-top: 3px; border-top: 1px solid #c9d4de; }

/* 画面C：境界の左右（幅は量を表さない） */
.e2c__def { margin: 8px 0 0; color: var(--ink-soft); font-size: 13px; }
.e2c__def .katex { font-size: 1.1em; color: var(--ink); }
.e2c { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); margin: 8px 0 0; padding-top: 16px; }
.e2c__side { padding: 10px 18px; background: #f7f9fb; }
.e2c__side--l { border-radius: 10px 0 0 10px; text-align: right; }
.e2c__side--r { border-radius: 0 10px 10px 0; }
.e2c__h { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; }
.e2c__who { margin: 2px 0 0; color: var(--ink-soft); font-size: 13px; }
.e2c__q { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.e2c__mid { position: relative; background: var(--ink); }
.e2c__dv { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); color: var(--ink); white-space: nowrap; }
.e2c__dv .katex { font-size: 1.05em; }
.e2c__axis { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 3px 0 0; color: var(--muted); font-size: 11.5px; }
.e2c__cap { margin: 4px 0 0; color: var(--ink-soft); font-size: 12.5px; }

/* 画面D：二つのモデルの計算結果 */
.e2d { margin: 10px 0 0; padding: 10px 16px; background: #f7f9fb; border-radius: 10px; }
.e2d__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.e2d__cond { margin: 0; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.e2d__cond span { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
.e2d__seg { display: flex; gap: 8px; }
.e2d__h { margin: 8px 0 4px; color: var(--ink-soft); font-size: 12.5px; font-weight: 600; }
.e2d__row { display: grid; grid-template-columns: 5em minmax(0, 1fr) 4.2em; align-items: center; gap: 10px; margin: 4px 0; }
.e2d__name { color: var(--ink); font-size: 13px; font-weight: 600; }
.e2d__track { position: relative; height: 16px; background: #e6ebf0; border-radius: 3px; }
.e2d__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--blue); border-radius: 3px; transition: width 0.3s ease; }
.e2d__row:nth-child(2) .e2d__fill { background: var(--ink); }
.e2d__ref { position: absolute; top: -3px; bottom: -3px; left: 70%; width: 0; border-left: 1px dashed var(--muted); }
.e2d__val { color: var(--ink); font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.e2d__scale { display: flex; justify-content: space-between; margin: 0 calc(4.2em + 10px) 0 calc(5em + 10px); color: var(--muted); font-size: 11px; }
.e2d__say { min-height: 1.6em; margin: 4px 0 0; color: var(--ink); font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .e2d__fill { transition: none; } }

/* 画面E：設定・推定・比較（縦に続けて読む） */
.e2e { margin: 10px 0 0; padding: 0; list-style: none; }
.e2e li { display: grid; grid-template-columns: 7em minmax(0, 1.05fr) minmax(0, 1fr); align-items: baseline; gap: 14px; padding: 7px 0; border-top: 1px solid #e3e8ed; }
.e2e li:last-child { border-bottom: 1px solid #e3e8ed; }
.e2e li + li .e2e__k::before { content: "↓ "; color: var(--blue); }
.e2e__k { color: var(--blue); font-size: 13px; font-weight: 600; }
.e2e__m { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.6; }
.e2e__s { color: var(--ink-soft); font-size: 12.5px; line-height: 1.6; }

/* 画面（εの例でUを比べる）：値の種類の区別 */
.e2-kinds { margin: 6px 0 0; }
.e2-kinds div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 8px; padding: 2px 0; }
.e2-kinds dt { color: var(--ink); font-size: 12px; font-weight: 600; }
.e2-kinds dd { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }

/* 狭い画面 */
.is-narrow .e2a { grid-template-columns: minmax(0, 1fr); }
.is-narrow .e2a__not { border-left: 0; border-top: 1px solid #e3e8ed; }
.is-narrow .e2b__row .katex { font-size: 1.25em; }
.is-narrow .e2b__row { grid-template-columns: minmax(0, 1fr) 2em minmax(0, 1fr); }
.is-narrow .e2b__seg .e2-ex { margin-left: 0; }
.is-narrow .e2e li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.is-narrow .e2d__row { grid-template-columns: 4.2em minmax(0, 1fr) 4em; }
.is-narrow .e2d__scale { margin: 0 calc(4em + 10px) 0 calc(4.2em + 10px); }

/* 「一覧で読む」：補足も本文の後に続けて読めるようにする */
.lesson.is-list .th__basic[hidden], .lesson.is-list .th__page[hidden] { display: block !important; }
.lesson.is-list .th__theory[hidden] { display: flex !important; }
.lesson.is-list .th__tabs, .lesson.is-list .th__nav { display: none !important; }
.lesson.is-list .th__theory { margin-top: 18px; padding-top: 12px; border-top: 1px solid #e3e8ed; }
.lesson.is-list .th__page + .th__page { margin-top: 10px; }
.e2b__row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 22px; }
.e2b__row--lab { column-gap: 22px; }
.e2c__side { padding: 7px 18px; }
[data-e2="C"] .e2-main { margin-top: 8px; }
[data-e2="C"] .e2-next { margin-top: 8px; }
[data-e2="16"] .e2-dens--mini, .e2-urow .e2-dens--mini { max-height: 78px; }
/* 画面A〜E：スマートフォンでは図の中の文字を大きくする（紙面全体が0.8倍で表示されるため） */
.is-narrow .e2b__row .katex { font-size: 1.5em; }
.is-narrow .e2b__seg button, .is-narrow .e2d__seg button { font-size: 15px; }
.is-narrow .e2b__sub, .is-narrow .e2b__row--lab, .is-narrow .e2c__cap, .is-narrow .e2c__axis, .is-narrow .e2d__scale, .is-narrow .e2a__scale { font-size: 14px; }
.is-narrow .e2-main { font-size: 17px; }
.is-narrow .e2-note2, .is-narrow .e2-next, .is-narrow .e2c__def, .is-narrow .e2c__who, .is-narrow .e2c__q { font-size: 15.5px; }
.is-narrow .e2c__h, .is-narrow .e2d__cond, .is-narrow .e2d__name, .is-narrow .e2d__val, .is-narrow .e2d__say, .is-narrow .e2d__h, .is-narrow .e2a__h { font-size: 16px; }
.is-narrow .e2a__seg { font-size: 16px; }
.is-narrow .e2e__k, .is-narrow .e2e__s { font-size: 15px; }
.is-narrow .e2e__m { font-size: 16.5px; }
.is-narrow .e2-ex { font-size: 13px; }
[data-e2="14"] .e2-term { margin-top: 8px; padding-top: 6px; }

/* =====================================================================
   単元02：本編を短くし，εの詳しい説明を共有の補足へ（2026-10-26 夜 追加）
   ・本編の「εについて詳しく」「なぜ確率で表せるのか」で，同じ画面の中に補足を開く（js/theory.js）．
   ・補足の上部に「補足」「項目」「本編に戻る」，下部に小ページの「戻る／続き」．
===================================================================== */
.e3-more { margin: 10px 0 0; text-align: right; }
.e3-morebtn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border: 1px solid #b9c9d8; border-radius: 999px; background: #f3f7fb; color: #2e6286; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.e3-morebtn::before { content: "?"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #2e6286; color: #ffffff; font-size: 11px; font-weight: 700; }
.e3-morebtn:hover { background: #e6eef6; }
.e3-morebtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.e3-logit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px; margin: 10px 0 4px; }
.e3-logit__fx { min-width: 0; overflow-x: auto; }
.e3-logit__fx .fx { white-space: nowrap; }
.lesson.v2[data-unit]:not(.is-narrow) .e3-lfx .fx { font-size: 24px; padding: 8px 6px; }
.e3-vlist { margin: 0; padding: 8px 14px; background: #f7f9fb; border-radius: 10px; font-variant-numeric: tabular-nums; }
.e3-vlist__h { margin-bottom: 2px; color: var(--muted); font-size: 11.5px; }
.e3-vlist div:not(.e3-vlist__h) { display: grid; grid-template-columns: 5em auto; gap: 8px; font-size: 13.5px; }
.e3-vlist dt { color: var(--ink); }
.e3-vlist dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }
.e3-labs { display: flex; flex-wrap: wrap; gap: 2px 24px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.e3-labs .vv { border-width: 1.5px; }
.e3-assume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 10px 0 0; padding: 8px 14px; background: #f3f7fb; border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0; }
.e3-assume p { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.6; }

/* 共有の補足 */
.th.is-theory > .th__theory--host { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.th.is-theory:has(> .th__theory--host) > .th__tabs { display: none; }
.supp { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.supp[hidden] { display: none !important; }
.supp__head { flex-wrap: wrap; align-items: center; margin-right: 0 !important; }
.supp__menu { display: flex; flex-wrap: wrap; gap: 4px; }
.supp__menu button { padding: 3px 10px; border: 1px solid #d9e1e8; border-radius: 999px; background: #ffffff; color: var(--ink-soft); font: inherit; font-size: 12px; font-weight: 500; line-height: 1.5; cursor: pointer; }
.supp__menu button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #ffffff; }
.supp__menu button:focus-visible, .supp__back:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.supp__back { margin-left: auto; padding: 4px 14px; border: 1px solid #d9e1e8; border-radius: 999px; background: #f3f5f7; color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.supp__nav { justify-content: flex-end; }
.supp__nav .th__key { order: 0; margin: 0 auto 0 0; text-align: left; }
.supp__nav .th__pager { order: 1; margin-left: 0; }
.th__sub { margin-left: 10px; color: var(--ink-soft); font-size: 12.5px; font-weight: 500; }
.th__pager [hidden] { display: none !important; }
.sp-uve { margin: 2px 0 8px; }
.sp-flow { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 8px 0 0; }
.sp-flow__in { display: grid; gap: 6px; }
.sp-box { padding: 8px 12px; background: #f7f9fb; border-radius: 8px; }
.sp-box p { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.6; }
.sp-box .sp-box__h { color: var(--blue); font-size: 12px; font-weight: 600; }
.sp-box--out { background: #eef3f8; }
.sp-box .sp-box__s { color: var(--ink-soft); font-size: 12px; }
.sp-flow__arrow { margin: 0; color: var(--blue); font-size: 20px; }
.sp-roles { margin-top: 6px; }
.sp-sim { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.sp-sim .e2-msg { min-height: 0; }
.sp-kind { margin: 4px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.sp-sim .e2-last { min-height: 2.6em; }
.sp-dist { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 20px; align-items: start; }
.supp .e2-dens--mini { max-height: 70px; }
.supp-home[hidden] { display: none !important; }
.lesson.is-list .supp-home { display: block; margin: 24px 0; padding: 20px 24px; background: #ffffff; border: 1px solid #d9e1e8; border-radius: 12px; }
.lesson.is-list .supp-home::before { content: "補足（読まなくても本編は進めます）"; display: block; margin-bottom: 8px; color: var(--blue); font-size: 13px; font-weight: 600; }
.lesson.is-list .supp__menu, .lesson.is-list .supp__back, .lesson.is-list .supp__nav { display: none !important; }
.lesson.is-list .th__theory[data-th-host] { display: none !important; }
.is-narrow .e3-logit { grid-template-columns: minmax(0, 1fr); }
.is-narrow .e3-lfx .fx { font-size: 14px !important; padding: 6px 2px !important; }
.is-narrow .sp-flow, .is-narrow .sp-sim, .is-narrow .sp-dist { grid-template-columns: minmax(0, 1fr); }
.is-narrow .sp-flow__arrow { transform: rotate(90deg); justify-self: center; }
.is-narrow .supp__menu button { font-size: 14px; }
.is-narrow .e3-morebtn, .is-narrow .supp__back { font-size: 15px; }
.is-narrow .e3-assume p { font-size: 16px; }
.is-narrow .e3-labs, .is-narrow .sp-box p { font-size: 15px; }
.supp .sp-sim .e2-last { min-height: 0; margin-bottom: 4px; }
.supp .e2-dens--mini { max-height: 64px; }

/* 単元02 画面11：ランダム効用最大化（1枚で示し，詳細は補足．2026-10-26 夜 追加） */
.e4 { display: grid; grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr); align-items: center; gap: 16px; margin: 10px 0 0; padding: 10px 16px; background: #f7f9fb; border-radius: 10px; }
.e4__tab { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.e4__tab th, .e4__tab td { padding: 4px 8px; border-bottom: 1px solid #e3e8ed; text-align: right; }
.e4__tab thead th { color: var(--ink); font-weight: 600; vertical-align: bottom; }
.e4__tab thead th small { display: block; color: var(--muted); font-size: 10.5px; font-weight: 400; white-space: nowrap; }
.e4__tab thead th:first-child, .e4__tab tbody th { text-align: left; }
.e4__tab tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.e4__tab .vv, .e4__tab .ee { border-width: 1.5px; }
.e4-q { color: var(--blue); font-weight: 600; }
.e4__arrow { margin: 0; color: var(--blue); font-size: 22px; }
.e4__out { text-align: center; }
.e4__h { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; }
.e4__fx { margin: 4px 0; overflow-x: auto; }
.e4__fx .katex { font-size: 1.05em; }
.e4__fx .katex-display { margin: 0.2em 0; }
.e4__s { margin: 0; color: var(--ink-soft); font-size: 12.5px; }
.e4__more { margin-top: 10px; }
.e4__more p { font-weight: 500; font-size: 13.5px; }
.is-narrow .e4 { grid-template-columns: minmax(0, 1fr); }
.is-narrow .e4__arrow { transform: rotate(90deg); justify-self: center; }
.is-narrow .e4__tab { font-size: 15px; }
.is-narrow .e4__h { font-size: 16px; }
.is-narrow .e4__s, .is-narrow .e4__more p { font-size: 15px; }
.e4 { margin-top: 8px; padding: 6px 16px; }
.e4__tab th, .e4__tab td { padding: 3px 8px; }
.e4__more { margin-top: 8px; padding: 6px 14px; }
[data-e4="rum"] .prose p { margin-bottom: 6px; }
/* 補足：各項目の冒頭の「問い」（本編のどこで生じる疑問か） */
.sp-q { display: flex; gap: 10px; align-items: baseline; margin: 0 0 8px; padding: 6px 12px; background: #f3f7fb; border-radius: 8px; color: var(--ink); font-size: 13.5px; line-height: 1.65; }
.sp-q__k { flex: none; padding: 0 8px; border-radius: 999px; background: var(--blue); color: #ffffff; font-size: 11.5px; font-weight: 600; line-height: 1.7; }
.is-narrow .sp-q { font-size: 15.5px; }
.supp__nav .supp__back { margin-left: 0; order: 0; }
.supp__nav .th__key { order: 1; margin: 0 0 0 auto; }
.supp__nav .th__pager { order: 2; }
.supp__menu button { padding: 3px 9px; }

/* =====================================================================
   単元02 付録（1枚）：誤差項εと選択確率（2026-10-27 追加）
   ・本編を読むのに必須ではない．紙面の中を縦に読み進める（収まらない分は紙面の中でスクロール）．
===================================================================== */
.e3-more a.e3-morebtn, .e3-assume a.e3-morebtn { text-decoration: none; }
.e3-morebtn[href]::before { content: "→"; background: transparent; color: #2e6286; width: auto; height: auto; font-size: 13px; }
.ax-kicker { color: var(--blue); }
.ax-lead { margin: 0 0 8px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.7; }
.ax-toc { position: sticky; top: -1px; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 6px; padding: 6px 0; background: #ffffff; border-bottom: 1px solid #e3e8ed; }
.ax-toc a { padding: 2px 10px; border: 1px solid #d9e1e8; border-radius: 999px; color: var(--ink-soft); font-size: 12px; text-decoration: none; }
.ax-toc a:hover { background: #f3f7fb; }
.ax-toc a:focus-visible, .ax-back:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ax-back { margin-left: auto; padding: 3px 12px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: #ffffff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ax-back[hidden] { display: none; }
.ax-sec { padding: 10px 0 6px; border-top: 1px solid #eef1f4; }
.ax-sec:first-of-type { border-top: 0; }
.ax-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--ink); font-size: 15.5px; font-weight: 700; }
.ax-h:focus { outline: none; }
.ax-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-pale); color: #2e6286; font-size: 12px; font-weight: 700; }
.ax-p { margin: 0 0 6px; color: #1f2d3a; font-size: 14px; line-height: 1.8; max-width: 52em; }
.ax-sec .th-math { margin: 4px 0 8px; overflow-x: auto; overflow-y: hidden; }
.ax-sec .th-math .katex { font-size: 1.1em; }
.ax-sec .ax-p .katex { font-size: 1.05em; }
.ax-fig { max-width: 520px; margin: 4px 0 8px; padding: 8px 12px; background: #f7f9fb; border-radius: 10px; }
.lesson.v2[data-unit] [data-appx-panel] .panel-title { margin-bottom: 4px; }
.is-narrow .ax-p { font-size: 16px; }
.is-narrow .ax-lead { font-size: 15px; }
.is-narrow .ax-h { font-size: 17px; }
.is-narrow .ax-toc a, .is-narrow .ax-back { font-size: 14px; }
.ax-fig { max-width: 440px; }

/* ========================================
   単元03 演習：観光目的地選択モデル（2026-10-27 追加．js/u03-exercise.js）
   - すべて .xq / [data-xq-panel] の下に限定．他の単元には影響しない．
   - 本文14px，四つの式は18px．式は左端と等号でそろえ，枠は付けず薄い区切り線で読み分ける．
   - 今回追加する項は，淡い青の背景と下線（色だけに頼らない）．
======================================== */
[data-xq-panel] .panel-title { margin-bottom: 6px; }
.xq-prog { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.xq-prog li { display: inline-flex; align-items: center; gap: 5px; }
.xq-prog__n { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid #c5d3df; border-radius: 50%; font-size: 11px; }
.xq-prog .is-done .xq-prog__n { background: var(--blue-pale); border-color: var(--blue-pale); color: var(--ink); }
.xq-prog .is-cur { color: var(--ink); font-weight: 600; }
.xq-prog .is-cur .xq-prog__n { background: var(--ink); border-color: var(--ink); color: #fff; }

.xq { font-size: 14px; line-height: 1.7; color: var(--ink); }
.xq-grid { display: grid; grid-template-columns: minmax(250px, 30fr) 70fr; gap: 0 28px; align-items: start; }
.xq-side .prose p { margin: 0 0 8px; font-size: 14px; line-height: 1.75; }
.xq-side .setting-tag { margin: 6px 0 8px; }
.xq-main { min-width: 0; }
.xq-vars { margin: 6px 0 8px; padding: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; }
.xq-vars div { display: grid; grid-template-columns: 3.4em 1fr; gap: 8px; padding: 2px 0; }
.xq-vars dt { font-family: var(--font-math); font-size: 15px; }
.xq-vars dd { margin: 0; line-height: 1.6; }
.xq-task { margin: 6px 0; font-size: 13.5px; color: var(--ink-soft); }
.xq-supps { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 8px 0 0; font-size: 13px; }
.xq-supps__h { color: var(--muted); font-size: 12px; }
.xq-link { padding: 0; color: var(--blue); background: none; border: 0; border-bottom: 1px solid currentColor; font: inherit; cursor: pointer; }
.xq-link:hover { color: var(--ink); }
.xq-base { margin: 8px 0 4px; font-size: 13.5px; }
.xq-base select, .xq-person select { margin-left: 6px; padding: 3px 6px; border: 1px solid #b8c8d6; border-radius: 6px; background: #fff; font: inherit; color: var(--ink); }

.xq-tabs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-bottom: 8px; }
.xq-seg { display: inline-flex; border: 1px solid #b8c8d6; border-radius: 8px; overflow: hidden; }
.xq-tab { padding: 4px 12px; color: var(--ink-soft); background: #fff; border: 0; border-left: 1px solid #d6e0e9; font: inherit; font-size: 13px; cursor: pointer; }
.xq-tab:first-child { border-left: 0; }
.xq-tab[aria-pressed="true"] { color: #fff; background: var(--ink); }
.xq-seg--mode .xq-tab[aria-pressed="true"] { color: var(--ink); background: var(--blue-pale); }
.xq-help { display: none; margin: 0 0 8px; font-size: 13px; color: var(--ink-soft); }
.xq[data-mode="text"] .xq-help { display: block; }
.xq code { padding: 0 4px; background: #f1f4f7; border-radius: 4px; font-size: 0.95em; }

.xq-btn { padding: 6px 16px; color: var(--ink); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.xq-btn--p { color: #fff; background: var(--ink); }
.xq-btn--s { padding: 2px 10px; font-size: 13px; }
.xq-btn:disabled { color: #9aa9b6; background: #f3f5f7; border-color: #c9d3dc; cursor: not-allowed; }
.xq-btn[aria-pressed="true"] { color: #fff; background: var(--ink); }
.xq-ctrl { margin: 8px 0 0; }
.xq-ctrl--seg { display: flex; gap: 6px; margin: 0 0 6px; }

/* 四つの式 */
.xq-eqs-block { display: grid; grid-template-columns: max-content max-content 1fr; font-family: var(--font-math); font-size: 18px; line-height: 1.5; }
.xq-row { display: contents; }
.xq-row > * { padding: 7px 0; border-bottom: 1px solid #e3e9ef; }
.xq-row:last-child > * { border-bottom: 0; }
.xq-lhs { padding-right: 4px; white-space: nowrap; }
.xq-lhs sub, .xq-t sub, .xq-rhs sub { font-family: var(--font-jp); font-size: 0.62em; }
.xq-sample { margin-left: 6px; padding: 0 5px; font-family: var(--font-jp); font-size: 11px; color: var(--muted); border: 1px solid #d0dae3; border-radius: 4px; vertical-align: 2px; }
.xq-eqs { padding: 7px 10px; }
.xq-rhs { min-width: 0; }
.xq-t { white-space: nowrap; }
.xq-t.is-new, .xq-slot.is-new { background: #eaf2f9; box-shadow: inset 0 -2px 0 var(--blue); border-radius: 3px; padding: 0 3px; }
.xq-zero small { font-family: var(--font-jp); font-size: 12px; color: var(--muted); }
.xq-slot { padding: 0 6px; color: var(--ink); background: #fff; border: 1px dashed var(--blue); border-radius: 4px; font: inherit; cursor: pointer; }
.xq-slot.is-empty { color: var(--blue); }
.xq-slot:focus-visible, .xq-t[role="button"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.xq-menu { position: absolute; z-index: 30; display: grid; min-width: 220px; margin-top: 4px; padding: 4px; background: #fff; border: 1px solid #b8c8d6; border-radius: 8px; box-shadow: 0 4px 14px rgba(12, 44, 71, 0.12); font-family: var(--font-jp); font-size: 14px; }
.xq-menu button { display: flex; justify-content: space-between; gap: 14px; padding: 5px 10px; text-align: left; background: #fff; border: 0; border-radius: 5px; font: inherit; color: var(--ink); cursor: pointer; }
.xq-menu button:hover, .xq-menu button:focus { background: var(--blue-pale); outline: none; }
.xq-menu i { font-family: var(--font-math); font-size: 16px; }
.xq-menu small { color: var(--muted); font-size: 12px; }
.xq-rhs { position: relative; }
.xq-row--text .xq-in { display: grid; gap: 2px; padding: 5px 0; }
.xq-in input { width: 100%; padding: 4px 8px; border: 1px solid #b8c8d6; border-radius: 6px; font-family: ui-monospace, Consolas, monospace; font-size: 14px; color: var(--ink); }
.xq-in input:focus { outline: 2px solid var(--blue); outline-offset: 0; }
.xq-prev { font-size: 15px; color: var(--ink-soft); min-height: 1.4em; }
.xq-val { ruby-position: over; }
.xq-val rt { font-family: var(--font-jp); font-size: 10px; color: var(--muted); }
.xq-val rt i, .xq-val rt sub { font-size: 1em; }
.is-numeric .xq-row > * { padding-top: 12px; }
.xq-legend { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.xq-legend__mark { display: inline-block; width: 22px; height: 12px; background: #eaf2f9; box-shadow: inset 0 -2px 0 var(--blue); border-radius: 2px; }

/* メッセージと操作の帯 */
.xq-msgs { margin-top: 6px; }
.xq-err { margin: 6px 0 0; padding: 6px 12px 6px 26px; font-size: 13.5px; color: #7a2e12; background: #fbf3ef; border-left: 3px solid #c0663b; }
.xq-err li + li { margin-top: 3px; }
.xq-ok { margin: 6px 0 0; padding: 6px 12px; font-size: 13.5px; background: #f1f6fa; border-left: 3px solid var(--blue); }
.xq-stale { margin: 0 0 6px; padding: 5px 12px; font-size: 13.5px; background: #f6f6f3; border-left: 3px solid #8a96a0; }
.xq-msg, .xq-note { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
.xq-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.xq-k { margin: 0 6px 0 0; font-size: 13px; color: var(--ink-soft); }
.xq-k b { font-size: 15px; color: var(--ink); }
.xq-status { flex: 1 1 200px; margin: 0; font-size: 13px; color: var(--ink-soft); }

/* 表 */
.xq-person { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13.5px; }
.xq-person__n { color: var(--muted); font-size: 12.5px; }
.xq-data { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.xq-data caption { caption-side: top; text-align: left; font-size: 12.5px; color: var(--muted); padding-bottom: 2px; }
.xq-data th, .xq-data td { padding: 4px 8px; text-align: right; border-bottom: 1px solid #e3e9ef; white-space: nowrap; }
.xq-data thead th { font-weight: 600; font-size: 12.5px; color: var(--ink-soft); border-bottom: 1px solid #c9d5df; }
.xq-data th:first-child { text-align: left; }
.xq-data tr.is-chosen { background: #f1f6fa; }
.xq-data--dum { margin-top: 8px; }
.xq-data--dum td { text-align: center; }
.xq-data--dum td:last-child { text-align: left; }
.xq-data .is-fixed { color: var(--muted); }
.xq-allcols { overflow-x: auto; max-width: 100%; }
.xq-data--all { font-size: 12px; }
.xq-data--all th, .xq-data--all td { padding: 3px 6px; }
.xq-load { margin: 4px 0; font-size: 12.5px; color: var(--muted); }
.xq-dl { margin: 4px 0 0; }

/* 結果 */
.xq-res { display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); gap: 0 24px; align-items: start; }
.xq-h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.xq-coefs { margin: 0; padding: 0; list-style: none; }
.xq-coefs li { padding: 5px 0; border-bottom: 1px solid #e3e9ef; }
.xq-coefs.is-stale { opacity: 0.6; }
.xq-coef { display: block; font-family: var(--font-math); font-size: 16px; }
.xq-coef sub { font-family: var(--font-jp); font-size: 0.65em; }
.xq-int { display: block; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.xq-old { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
.xq-old i { font-family: var(--font-math); }
.xq-ll { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); }
.xq-ll b { color: var(--ink); }

/* 確認カード・補足 */
.xq-confirm p, .xq-supp p { margin: 0 0 8px; font-size: 14px; }
.xq-confirm .xq-data, .xq-supp .xq-data { margin: 4px 0 8px; }
.xq-supp h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.xq-supp h3:focus { outline: none; }
.xq-gdemo { margin: 8px 0; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.xq-gdemo input[type="range"] { vertical-align: middle; width: 160px; }
.xq-data small { margin-left: 4px; color: var(--muted); font-size: 11.5px; }

/* 振り返り */
.xq--review .xq-res { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
.xq-review .xq-t[role="button"] { cursor: pointer; border-bottom: 1px dotted var(--blue); }
.xq-review .xq-t[role="button"]:hover { background: var(--blue-pale); }
.xq-sum { margin: 8px 0 0; font-size: 13px; }
.xq-sum div { display: grid; grid-template-columns: 11em 1fr; gap: 8px; padding: 3px 0; border-bottom: 1px solid #e3e9ef; }
.xq-sum dt { color: var(--ink-soft); }
.xq-sum dd { margin: 0; }
.xq-pick { min-height: 3em; margin-top: 8px; font-size: 13.5px; }
.xq-pick p { margin: 0; padding: 6px 10px; background: #f1f6fa; border-left: 3px solid var(--blue); }
.xq-free { margin: 10px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; }
.xq-free legend { padding: 0 4px; font-size: 13px; font-weight: 600; }
.xq-free label { display: inline-flex; align-items: center; gap: 4px; margin: 0 12px 4px 0; }
.xq-free .xq-btn { margin-top: 4px; }
.xq-eqs-block--free { display: grid; margin-top: 6px; font-size: 15px; }

/* 狭い画面：上下に組み替える．式だけは必要なら横に移動できる */
.lesson.is-narrow .xq-grid, .lesson.is-narrow .xq-res, .lesson.is-narrow .xq--review .xq-res { grid-template-columns: minmax(0, 1fr); }
.lesson.is-narrow .xq-side { margin-bottom: 8px; }
.lesson.is-narrow .xq-eqs-block { font-size: 16px; overflow-x: auto; }
.lesson.is-narrow .xq-data { display: block; overflow-x: auto; }
.lesson.is-narrow .xq-sum div { grid-template-columns: 1fr; gap: 0; }
@media (max-width: 1180px) { .lesson:not(.is-narrow) .xq-grid { grid-template-columns: minmax(230px, 27fr) 73fr; gap: 0 20px; } }
.xq-intro { max-width: 62em; margin: 0 0 10px; font-size: 14px; line-height: 1.75; color: var(--ink); }
.xq-data--left td:last-child { text-align: left; }
.xq-math { margin: 6px 0 0; font-size: 13.5px; }
.xq-math summary { color: var(--blue); cursor: pointer; }
.xq-math .katex-display { margin: 6px 0; font-size: 1.05em; overflow-x: auto; }
.kicker .xq-prog { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.xq-prog > span { display: inline-flex; align-items: center; gap: 5px; }
.xq-prog__h { margin-right: 2px; color: var(--ink-soft); }
.xq-ctrl--row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.xq-ctrl--row .xq-note { flex: 1 1 260px; margin: 0; }
.xq-confirm .xq-data th, .xq-confirm .xq-data td, .xq-supp .xq-data th, .xq-supp .xq-data td { padding-top: 3px; padding-bottom: 3px; }
.xq-bar[hidden], .xq [hidden] { display: none; }
.xq-gdemo--plain { margin: 0; padding: 0; border: 0; }
.xq-ctrl--row .xq-btn { flex: 0 0 auto; }
.xq-tabs { margin-bottom: 6px; }
.xq-intro { margin-bottom: 8px; }
.xq-ctrl--row > span { flex: 1 1 auto; }
/* 結果・補足を開いた段階：説明列を畳み，式と結果に横幅を渡す */
.xq.is-wide .xq-grid { grid-template-columns: minmax(0, 1fr); }
.xq.is-wide .xq-side { display: none; }
.xq-eqs-block { max-width: 100%; overflow-x: auto; }
.xq-res2 .xq-ctrl--seg { align-items: center; flex-wrap: wrap; }
.xq-base2 { margin-left: auto; font-size: 13px; }
.xq-base2 select { margin-left: 6px; padding: 2px 6px; border: 1px solid #b8c8d6; border-radius: 6px; background: #fff; font: inherit; color: var(--ink); }
.xq-res2 .xq-h4 { margin-top: 8px; }
.xq-res2 .xq-coefs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 20px; }
.xq-res2 .xq-coefs li { padding: 3px 0 5px; }
.xq-res2 .xq-ll { margin-top: 4px; line-height: 1.7; }
.xq-res2 .xq-ll .xq-link { margin-left: 8px; }
.xq-data th small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.xq-tabs__extra { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.xq-tabs__extra .xq-base2 { margin-left: 0; }
.xq-h4 span { font-weight: 400; color: var(--muted); font-size: 12px; }
.is-numeric .xq-row > * { padding-top: 10px; padding-bottom: 5px; }
.xq-res2 .xq-eqs-block { font-size: 17px; }
.xq-row > * { padding: 5px 0; }
.xq-eqs { padding: 5px 10px; }
.is-numeric .xq-row > * { padding-top: 9px; padding-bottom: 3px; }
.xq-res2 .xq-coefs li { padding: 2px 0 4px; }
.xq-res2 .xq-h4 { margin-top: 6px; }
.xq-row--text .xq-in { grid-template-columns: minmax(170px, 44%) 1fr; align-items: center; gap: 4px 14px; }
.xq-row--text .xq-prev { font-size: 15px; }
.lesson.is-narrow .xq-row--text .xq-in { grid-template-columns: minmax(0, 1fr); }
.xq-rv .xq-eqs-block { margin-top: 4px; }
.xq-rv .xq-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.xq-rv .xq-sum div { grid-template-columns: max-content 1fr; }
.xq-rv--cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
.xq-rv--cmp .xq-free { margin-top: 0; }
.xq--review .xq-data th { white-space: normal; }
.lesson.is-narrow .xq-rv .xq-sum, .lesson.is-narrow .xq-rv--cmp { grid-template-columns: minmax(0, 1fr); }
.xq-supp__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
.xq-supp__cols .xq-note { margin-top: 0; }
.lesson.is-narrow .xq-supp__cols { grid-template-columns: minmax(0, 1fr); }
.xq-supp__back { float: right; margin: 0 0 4px 12px; }
.xq-supp .xq-data th, .xq-supp .xq-data td { padding-top: 2px; padding-bottom: 2px; }
.xq-main { position: relative; }
.xq-menu { margin-top: 0; }
.xq-warn { margin: 6px 0 0; padding: 6px 12px; font-size: 13.5px; background: #f6f6f3; border-left: 3px solid #8a96a0; }
.xq-warn p { margin: 0 0 2px; }
.xq-warn ul { margin: 0; padding-left: 18px; }
.xq-slot--prev { padding: 0 3px; border: 1px dotted #b8c8d6; background: #fff; }
.xq-slot--prev:hover { border-color: var(--blue); background: #f5f8fb; }
.xq-slot--prev .xq-t { padding: 0; }
.xq-row--text .xq-in { grid-template-columns: minmax(170px, 40%) minmax(0, 1fr); }
.xq-row--text .xq-prev { min-width: 0; line-height: 1.6; }
.xq-row--text .xq-prev .xq-t { display: inline-block; }
.xq-fit { margin-top: 2px; }
.xq-cmp { display: block; color: var(--ink-soft); }
.xq-ll .xq-link + .xq-link { margin-left: 14px; }
.xq-fx { margin: 6px 0 8px; padding: 6px 12px; font-family: var(--font-math); font-size: 15px; line-height: 1.8; background: #f5f8fb; border-left: 3px solid var(--blue-pale); }
.xq-how { margin: 6px 0; padding-left: 18px; font-size: 14px; line-height: 1.75; }
.xq-how li { margin-bottom: 6px; }
.xq-how i, .xq-how sub { font-family: var(--font-math); }
.xq-unc { display: block; font-size: 12.5px; color: var(--muted); }
/* 段階1：文章は上にまとめ，記録の表は横幅いっぱいに使う */
.xq-intro + .xq-intro { margin-top: -2px; }
.xq-datanote { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 13px; color: var(--ink-soft); }
.xq-datanote__tag { flex: 0 0 auto; padding: 1px 10px; font-size: 12px; font-weight: 600; color: #fff; background: var(--ink); border-radius: 999px; }
.xq--s1 .xq-data { font-size: 14px; }
.xq--s1 .xq-data th, .xq--s1 .xq-data td { padding: 6px 14px; }
.xq--s1 .xq-data--all { font-size: 12.5px; }
.xq--s1 .xq-data--all th, .xq--s1 .xq-data--all td { padding: 4px 8px; }
.xq-person__h { margin-right: 2px; color: var(--ink-soft); }
.xq-person select { margin-left: 0; }
.xq--s1 .xq-person { margin-bottom: 8px; }

/* 単元04 演習の進め方（2026-10-27）：流れ図（.xf）と，段階ごとに式が育つ図（.xg） */
.xf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 30px; row-gap: 0; margin: 14px 0 6px; }
.xf__row { display: contents; list-style: none; }
.xf__step { position: relative; padding: 12px 14px; border: 1px solid #c9d5df; border-radius: 10px; background: #fff; }
.xf__step:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -24px; transform: translateY(-50%); font-size: 18px; color: var(--blue); }
.xf__h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
.xf__n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; }
.xf__d { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-soft); }
.xf__loop { grid-column: 2 / 5; position: relative; height: 34px; margin: 0 12% 0 12%; }
.xf__loopline { position: absolute; inset: 0 0 10px 0; border: 1.5px solid var(--blue); border-top: 0; border-radius: 0 0 12px 12px; }
.xf__loopline::before { content: ""; position: absolute; left: -6.5px; top: -2px; border: 6px solid transparent; border-bottom: 8px solid var(--blue); border-top: 0; }
.xf__looptxt { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding: 0 10px; background: #fff; font-size: 13px; color: var(--blue); white-space: nowrap; }
.xf__note { margin: 12px 0 0; font-size: 13px; color: var(--ink-soft); }
.xg { margin: 10px 0 0; border-top: 1px solid #e3e9ef; }
.xg__row { display: grid; grid-template-columns: 10em minmax(0, 1fr) 17em; gap: 0 18px; align-items: center; padding: 10px 0; border-bottom: 1px solid #e3e9ef; }
.xg__st { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.xg__st b { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.xg__eq { margin: 0; font-family: var(--font-math); font-size: 19px; white-space: nowrap; overflow-x: auto; }
.xg__eq sub { font-family: var(--font-jp); font-size: 0.6em; }
.xg__new { padding: 0 3px; background: #eaf2f9; box-shadow: inset 0 -2px 0 var(--blue); border-radius: 3px; }
.xg__d { margin: 0; font-size: 13px; color: var(--ink-soft); }
.lesson.is-narrow .xf { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
.lesson.is-narrow .xf__step:not(:last-child)::after { content: "↓"; top: auto; bottom: -21px; right: auto; left: 50%; transform: translateX(-50%); }
.lesson.is-narrow .xf__loop { grid-column: 1; height: auto; margin: 0; }
.lesson.is-narrow .xf__loopline { display: none; }
.lesson.is-narrow .xf__looptxt { position: static; transform: none; display: block; text-align: center; white-space: normal; }
.lesson.is-narrow .xg__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.xq-stats { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 8px 0 0; padding: 6px 0; border-top: 1px solid #e3e9ef; }
.xq-stats div { display: flex; align-items: baseline; gap: 8px; }
.xq-stats dt { font-size: 12.5px; color: var(--muted); }
.xq-stats dd { margin: 0; font-size: 13.5px; }
.xq-stats dd b { font-size: 15px; }
.xq-stats dd small { margin-left: 6px; font-size: 11.5px; color: var(--muted); }
.xq-old { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }
.xq-ll .xq-link { margin-left: 12px; }
/* 単元04「この演習でやること」：旅行者と四つの観光地の図を工程図の上に置く */
.xf__scene { margin: 4px 0 6px; text-align: center; }
.xf__scene img { display: inline-block; width: auto; max-width: 100%; height: auto; max-height: 190px; }
.lesson.is-short .xf__scene img { max-height: 140px; }
[data-xf-panel] .xq-intro { margin-bottom: 4px; }
[data-xf-panel] .xf { margin-top: 6px; }
.xf__scene img { max-height: 176px; }
.lesson.is-short .xf__scene img { max-height: 112px; }

/* 2026-10-27 準備中の単元（発展編・実践編）：リンクを外し，薄く表示する．ページを開いたときは準備中の表示を重ねる */
.sb__units .is-draft .sb__off { display: flex; align-items: baseline; gap: 0; padding: 7px 10px; font-size: 13px; line-height: 1.45; color: #a3adb6; cursor: default; }
.sb__units .is-draft .sb__num { color: #b8c0c7; }
.sb__soon { margin-left: 6px; padding: 0 6px; font-size: 10.5px; font-weight: 500; color: #8a96a0; border: 1px solid #d3d9de; border-radius: 999px; }
.unit-menu .is-draft > span { display: flex; align-items: baseline; gap: 8px; opacity: 0.5; cursor: default; }
.route-map__line .is-draft span { opacity: 0.45; cursor: default; }
.draft-gate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: rgba(232, 237, 242, 0.96); }
.draft-gate__box { max-width: 520px; padding: 32px 36px; text-align: left; background: #fff; border: 1px solid #d6dee6; border-radius: 14px; }
.draft-gate__kicker { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.draft-gate__title { margin: 0 0 10px; font-size: 21px; line-height: 1.5; color: #0c2c47; }
.draft-gate__text { margin: 0 0 18px; font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
/* トップページ */
.station.is-draft .station__off { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box; padding: 18px 18px 16px; color: var(--ink); background: #f7f8fa; border: 1.5px dashed var(--line); border-top: 6px solid #cfd6dc; border-radius: 16px; cursor: default; }
.station.is-draft .station__off > * { opacity: 0.55; }
.station.is-draft .station__meta { opacity: 1; color: #6b7f90; }
.part__soon { display: inline-block; margin: 10px 0 0; padding: 4px 12px; font-size: 13px; color: #3a5266; background: #eef2f6; border-radius: 999px; }
.sb__units > li.is-draft > .sb__off, .lesson.v2[data-unit] .sb__units > li.is-draft > .sb__off { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px; align-items: baseline; padding: 8px 10px; font-size: 13px; line-height: 20px; color: #a3adb6; }
.sb__units > li.is-draft .sb__num { font-family: inherit; font-size: 11px; color: #b8c0c7; }