/* ゴロメディカ ishimoshi 医師模試 v3（ロゴ C3-2 に合わせて、v2 の案Bをさらに簡素に）
   要素を減らして揃える／色はロゴの深緑と赤いロ・墨・黄マーカーだけ／字はロゴと同じゴシック（Zen Kaku Gothic New）、数字と英字は Archivo
   （明朝は問題冊子と本の試し読み・苦手参考書だけ）／角は 6・12px／線は1px。
   色・字・余白はすべてこのファイルの変数とクラスで決める（画面の JS には色や大きさを書かない）。
   ダーク表示はいまは出さない（ライトだけ）。 */

:root {
  --bg: #ffffff;
  --bg-2: #f6f8f7;
  --bg-3: #edf2f1;
  --paper: #fbfaf6;
  --sheet: #fff;       /* 問題冊子の紙（本番の冊子は白） */
  --fg: #131d1c;
  --fg-2: #46524f;
  --fg-3: #6a7774;
  --line: #e4e9e8;
  --line-2: #cdd7d5;
  --accent: #0f4f4b;
  --accent-h: #0a3d3a;
  --brand: #0f4f4b;
  --brand-red: #d23c28;
  --accent-soft: #e8f1ef;
  --on-accent: #ffffff;
  --marker: #f7dd7c;
  --mk-cut: 60%;
  --gold: #f2c94c;
  --red: #c23f2f;
  --red-soft: #fbebe8;
  --grid: rgba(15, 90, 85, .075);
  --band-bg: #0f4f4b;
  --band-fg: #f3f7f6;
  --band-fg-2: #b9d2ce;
  --band-line: rgba(255, 255, 255, .16);
  --shadow: 0 1px 2px rgba(16, 42, 40, .05), 0 12px 32px -16px rgba(16, 42, 40, .22);
  --serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  /* 数字と英字（ロゴの ishimoshi と同じ）。かなと漢字はゴシックで出る */
  --num: "Archivo", "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;
  /* 問題冊子の本文（国試の冊子に近い、読みやすい明朝） */
  --book: "BIZ UDMincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  /* 解答用紙：朱の刷り色と、鉛筆で塗ったマーク */
  --ink: #c0503a;
  --ink-soft: rgba(192, 80, 58, .08);
  --pencil: #262421;
  --r: 6px;
  --r-lg: 12px;
  --head-h: 60px;
  color-scheme: light;
}
/* ダーク表示：いまは使わない（2026-10-19「一旦なし」）。戻すときのために変数だけ残す（data-gm-theme="dark" を付けたときだけ効く）。
   data-theme は使わない：Claude の画面などの外側が data-theme="dark" を付けると、サイトまで暗くなるため（2026-10-20） */
:root[data-gm-theme="dark"] {
  --brand: #ecebe7; --brand-red: #ff8a73;
  --bg: #151514; --bg-2: #1b1b19; --bg-3: #232321; --paper: #1a1a18; --sheet: #1a1a18;
  --fg: #ecebe7; --fg-2: #b3b1ab; --fg-3: #8b8982;
  --line: #2a2a27; --line-2: #3b3a37;
  --accent: #8dbfb3; --accent-h: #a9d2c8; --accent-soft: #1f2725; --on-accent: #111a18;
  --marker: rgba(222, 186, 92, .34); --mk-cut: 76%; --gold: #cdae62;
  --red: #e58b7d; --red-soft: #2d1f1c;
  --grid: rgba(255, 255, 255, .032);
  --band-bg: #1c2422; --band-fg: #ecebe7; --band-fg-2: #a7b3af; --band-line: rgba(255, 255, 255, .1);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px -16px rgba(0, 0, 0, .8);
  --ink: #d89582; --ink-soft: rgba(216, 149, 130, .1); --pencil: #e6e4de;
  color-scheme: dark;
}

/* ---------- 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 16px/1.75 var(--sans); letter-spacing: .02em;
  overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* ノッチの下（セーフエリア）を背景色で埋める */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); pointer-events: none; }
img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-h); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 700; letter-spacing: .01em; font-feature-settings: "palt"; line-height: 1.4; margin: 0; text-wrap: balance; word-break: auto-phrase; }
h1 { font-size: clamp(24px, 4.4vw, 30px); line-height: 1.35; }
h2 { font-size: clamp(20px, 3.4vw, 24px); }
h3 { font-size: 17px; }
p { margin: 0; }
ul, ol { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.num { font-family: var(--num); font-variant-numeric: tabular-nums; font-feature-settings: "palt"; }
.mk { background: linear-gradient(transparent var(--mk-cut), var(--marker) var(--mk-cut)); padding-inline: .05em; }
.ph { display: inline-block; }
.muted { color: var(--fg-3); }
.small { font-size: 13px; }
.xsmall { font-size: 12px; }
.nowrap { white-space: nowrap; }
.sr, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kicker, .eyebrow-k { font-size: 13px; font-weight: 500; letter-spacing: .14em; color: var(--accent); }
.lead { color: var(--fg-2); margin-top: 12px; max-width: 36em; }
.row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.row.between { justify-content: space-between; }
.mt-s { margin-top: 8px; } .mt { margin-top: 16px; } .mt-l { margin-top: 28px; }
.ok-text { color: var(--accent); } .ng-text { color: var(--red); }
@media (max-width: 639px) { .hide-sm { display: none !important; } }
@media (min-width: 640px) { .only-sm { display: none !important; } }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--bg); padding: 10px 14px; }
.skip:focus { left: 8px; top: 8px; }
.loading { padding: 72px 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: var(--fg-3); font-size: 14px; }
.loading .ld { display: inline-flex; gap: 8px; }
.loading .ld i { width: 10px; height: 15px; border-radius: 50%; border: 1.4px solid var(--accent); animation: ld-mark 1.2s ease-in-out infinite; }
.loading .ld i:nth-child(2) { animation-delay: .2s; }
.loading .ld i:nth-child(3) { animation-delay: .4s; }
@keyframes ld-mark { 0%, 100% { background: transparent; } 40%, 60% { background: var(--accent); } }
@media (prefers-reduced-motion: reduce) { .loading .ld i { animation: none; background: var(--accent-soft); } }

/* 左右の余白：16 / 24 / 32px（ノッチのある端末ではセーフエリア以上） */
.wrap {
  --gut: 16px;
  width: 100%; max-width: 1120px; margin-inline: auto;
  padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
}
@media (min-width: 640px) { .wrap { --gut: 24px; } }
@media (min-width: 960px) { .wrap { --gut: 32px; } }
.wrap.narrow, .narrow.wrap { max-width: 820px; }
.page { padding-block: 28px 56px; }
@media (min-width: 960px) { .page { padding-block: 44px 80px; } }
.page-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-h h1 { font-size: clamp(22px, 3.4vw, 30px); line-height: 1.35; }
.page-h p { font-size: 13px; color: var(--fg-3); margin-top: 4px; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; color: var(--fg-2); text-decoration: none; }
.back:hover { color: var(--fg); }

/* ---------- ボタン（1つの区画に塗りのボタンは1つ） ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: var(--r); border: 1px solid transparent;
  background: var(--accent); color: var(--on-accent);
  font: 500 15px/1 var(--sans); letter-spacing: .04em; text-decoration: none; text-align: center; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--accent-h); color: var(--on-accent); }
.btn-s, .btn.ghost { background: var(--bg); color: var(--fg); border-color: var(--line-2); }
.btn-s:hover, .btn.ghost:hover { background: var(--bg); color: var(--fg); border-color: var(--fg-3); }
.btn-g, .btn.text { background: transparent; color: var(--fg-2); border-color: transparent; padding-inline: 10px; }
.btn-g:hover, .btn.text:hover { background: transparent; color: var(--fg); }
.btn.danger { color: var(--red); }
.btn.sm, .btn.small { height: 34px; padding: 0 14px; font-size: 13px; }
.btn.sm::after, .btn.small::after { content: ""; position: absolute; inset: -5px 0; } /* 押せる範囲は44px */
.btn.block { display: flex; width: 100%; }
.btn .ar { transition: transform .15s; }
.btn:hover .ar { transform: translateX(2px); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn[disabled], .btn[aria-disabled="true"], .btn.disabled { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--accent); }
.btn-s[disabled]:hover, .btn.ghost[disabled]:hover { background: var(--bg); border-color: var(--line-2); }
.icon-btn {
  position: relative; border: 0; background: transparent; border-radius: var(--r);
  width: 40px; height: 40px; display: grid; place-items: center; color: var(--fg-2); flex: none;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn::after { content: ""; position: absolute; inset: -2px; }
.icon-btn:hover { color: var(--fg); background: var(--bg-2); }

/* 小さなラベル */
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 8px; border-radius: 4px; font-size: 12px; line-height: 1.4; letter-spacing: .04em; color: var(--fg-2); border: 1px solid var(--line-2); white-space: nowrap; font-family: var(--sans); font-weight: 400; }
.chip.ac, .chip.accent, .chip.ok { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
.chip.rd { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); background: var(--red-soft); }
.chip.warn { color: var(--fg); border-color: transparent; background: color-mix(in srgb, var(--marker) 70%, transparent); }
.tag { display: inline-flex; align-items: center; min-height: 20px; font-size: 11px; font-weight: 500; letter-spacing: .06em; padding: 0 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent); white-space: nowrap; font-family: var(--sans); }
.tag.soft { background: var(--accent-soft); color: var(--accent); }
.notice { border-left: 2px solid var(--gold); padding: 8px 0 8px 14px; font-size: 14px; color: var(--fg-2); }
.notice.accent { border-left-color: var(--accent); }

/* 本の □ ／ × */
.cb { position: relative; display: inline-block; width: 12px; height: 12px; border: 1.2px solid currentColor; border-radius: 1px; flex: none; vertical-align: -1px; }
.cb.sl::after { content: ""; position: absolute; left: 50%; top: -2px; width: 1.4px; height: 15px; background: currentColor; transform: translateX(-50%) rotate(40deg); }
.cbx { font: 700 14px/1 var(--sans); width: 13px; height: 13px; display: inline-grid; place-items: center; }

/* ---------- 入力 ---------- */
label { cursor: pointer; }
.field { display: grid; gap: 6px; min-width: 0; }
.lbl, .field > .lbl { font-size: 13px; color: var(--fg-2); }
select, input[type="text"], input[type="email"], input[type="search"], input[inputmode="numeric"], .input {
  width: 100%; max-width: 100%; height: 46px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg); color: var(--fg); font-size: 16px;
}
select { padding-right: 34px; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%), linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
select:focus, input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; flex: none; }

/* セグメント（短い選択肢：出題元・問題数・自信） */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--bg-3); border-radius: 8px; max-width: 100%; }
.seg > button, .seg > label {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r); background: none;
  font-size: 14px; color: var(--fg-2); white-space: nowrap; flex: none;
}
.seg > button::after, .seg > label::after { content: ""; position: absolute; inset: -4px 0; }
.seg > label input { position: absolute; opacity: 0; pointer-events: none; }
.seg > button[aria-pressed="true"], .seg > label:has(input:checked) { background: var(--bg); color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); font-weight: 500; }
.seg > label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg > button[disabled] { opacity: .55; cursor: default; }
.seg.full { display: flex; }
.seg.full > * { flex: 1 1 auto; }

/* マークシートの楕円 */
.ov {
  width: 24px; height: 32px; border-radius: 50%; border: 1.5px solid var(--fg-3);
  display: inline-grid; place-items: center; flex: none;
  font: 500 13px/1 var(--sans); color: var(--fg-2); letter-spacing: 0; text-transform: lowercase;
  transition: background-color .15s, border-color .15s, color .15s;
}

/* 縦に並ぶ選択（説明つき） */
.radios { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.radios label { display: flex; gap: 14px; align-items: center; min-height: 58px; padding: 10px 8px; border-bottom: 1px solid var(--line); transition: background-color .12s; }
.radios label:hover { background: var(--bg-2); }
.radios input { position: absolute; opacity: 0; pointer-events: none; }
.radios .ov { width: 18px; height: 26px; }
.radios label:has(input:checked) { background: var(--accent-soft); }
.radios label:has(input:checked) .ov { background: var(--accent); border-color: var(--accent); }
.radios label:has(input:checked) .t { font-weight: 500; }
.radios label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.radios .d { display: block; font-size: 13px; color: var(--fg-3); line-height: 1.6; }

/* ---------- ヘッダー（上に貼りつく・すりガラス） ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--brand); white-space: nowrap; }
.logo:hover { color: var(--brand); }
/* このゴシックは palt が効かないので、字間は手で詰める（メの前とィの前後） */
.logo b { font: 900 21px/1 var(--sans); letter-spacing: -.08em; }
.logo b .r { color: var(--brand-red); }
.logo b .k1 { margin-left: -.04em; }
.logo b .k2 { margin-left: -.1em; letter-spacing: -.12em; }
.logo i { width: 1.5px; height: 22px; background: var(--brand-red); }
.logo small { display: flex; flex-direction: column; gap: 3px; font: 900 10px/1 var(--sans); letter-spacing: .2em; }
.logo small [lang="en"] { font: 700 10px/1 var(--num); letter-spacing: .12em; }
@media (max-width: 419px) { .logo i, .logo small { display: none; } }

.sh {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(12px); backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--line);
}
.sh .wrap { display: flex; align-items: center; gap: 16px; height: var(--head-h); }
.s-nav { display: none; }
.s-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--fg-2); text-decoration: none; }
.s-nav a:hover { color: var(--fg); }
.s-nav a[aria-current] { color: var(--fg); font-weight: 500; box-shadow: inset 0 -2px 0 var(--accent); }
.sh .act { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.hd-cta { display: none !important; margin-right: 4px; }
body[data-route="top"] .hd-cta { display: inline-flex !important; }
/* トップだけ：ページ内の見出しへのリンク（できること・料金…）。ほかの画面はアプリのリンク */
.s-nav .tn, .hd-link { display: none !important; }
body[data-route="top"] .s-nav .tn { display: inline-flex !important; }
body[data-route="top"] .s-nav [data-nav] { display: none !important; }
.hd-link { align-items: center; min-height: 44px; padding: 0 10px; font-size: 14px; color: var(--fg-2); text-decoration: none; }
.hd-link:hover { color: var(--fg); }
@media (min-width: 960px) {
  body[data-route="top"] .hd-link { display: inline-flex !important; }
  body[data-route="top"] .s-nav .tn-m { display: none !important; }
}
[id="feat"], [id="price"], [id="book"], [id="faq"] { scroll-margin-top: calc(var(--head-h) + env(safe-area-inset-top, 0px)); }
@media (min-width: 960px) {
  .s-nav { display: flex; gap: 28px; margin-left: 12px; }
  .menu-btn { display: none !important; }
}
@media (max-width: 959px) {
  .s-nav.open {
    display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    padding: 4px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
  }
  .s-nav.open a { min-height: 52px; font-size: 15px; color: var(--fg); border-bottom: 1px solid var(--line); box-shadow: none; }
  body[data-route="top"] .s-nav.open a:last-child, body:not([data-route="top"]) .s-nav.open [data-nav="mypage"] { border-bottom: 0; }
}
body.exam-mode .sh, body.exam-mode .sf, body.print-mode .sh, body.print-mode .sf { display: none !important; }

/* フッター */
.sf { border-top: 1px solid var(--line); background: var(--bg-2); }
.sf .wrap { padding-block: 40px calc(48px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 14px; font-size: 13px; color: var(--fg-3); }
.sf nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.sf nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--fg-2); }
.sf nav a:hover { color: var(--fg); }
.sf p { line-height: 1.8; max-width: 60em; }

/* ---------- トップ ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(var(--paper), var(--bg) 92%); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 65% 20%, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse 90% 80% at 65% 20%, #000 35%, transparent 80%);
}
.hero .wrap { position: relative; display: grid; gap: 44px; padding-block: 48px 56px; }
.hero .wrap > * { min-width: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 14px 4px 4px; background: var(--bg); line-height: 1.4; max-width: 100%; }
.eyebrow i { font-style: normal; background: var(--gold); color: #1d1a0e; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.hero h1 { font-size: clamp(30px, 6.6vw, 48px); line-height: 1.32; letter-spacing: 0; margin-top: 22px; }
.hero .lead { margin-top: 20px; color: var(--fg-2); font-size: 16px; line-height: 1.85; max-width: 33em; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta-note { margin-top: 14px; font-size: 13px; color: var(--fg-3); }
@media (min-width: 640px) { .hero .lead { font-size: 17px; } }
@media (min-width: 1040px) {
  .hero .wrap { grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: center; padding-block: 88px 96px; }
  .hero h1 { font-size: clamp(30px, 4.2vw, 48px); }
}
@media (min-width: 1040px) { .hero .wrap { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; padding-block: 72px 80px; } }
.btn.btn-lg { height: 52px; padding-inline: 24px; font-size: 16px; }

/* 成績表（ヒーロー）：結果画面と同じ計算の値を、白い紙の成績表に */
.hcard { display: grid; gap: 18px; width: 100%; max-width: 620px; justify-self: center; min-width: 0; padding: 20px 18px 18px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(16, 42, 40, .05), 0 24px 48px -24px rgba(16, 42, 40, .3); }
@media (min-width: 640px) { .hcard { gap: 20px; padding: 26px 30px 24px; } }
.hc-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--fg); }
.hc-h b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font: 900 17px/1.3 var(--sans); letter-spacing: .06em; min-width: 0; }
.hc-h b span { font-weight: 500; font-size: 13px; letter-spacing: .02em; color: var(--fg-2); }
.hc-main { display: grid; gap: 16px; align-items: end; }
@media (min-width: 520px) { .hc-main { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; } }
.hcard .k { font-size: 13px; font-weight: 700; color: var(--fg-2); }
.hc-pass, .hc-dev { display: grid; gap: 8px; min-width: 0; align-content: end; }
.hc-pass > b { font: 700 clamp(72px, 19vw, 92px)/.9 var(--num); letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.hc-pass > b small { font-size: .4em; margin-left: 4px; }
.hc-pass .s { font-size: 13px; color: var(--fg-2); }
.hc-pass .s b { font: 700 13px var(--num); color: var(--fg); }
.hc-dev { padding-top: 14px; border-top: 1px solid var(--line); }
@media (min-width: 520px) { .hc-dev { padding: 0 0 0 22px; border-top: 0; border-left: 1px solid var(--line); } }
.hc-dev > b { font: 700 52px/.95 var(--num); font-variant-numeric: tabular-nums; }
.hc-dev svg.bell { margin-top: 0; }
.hc-dev svg.bell text { font-size: 13px; }
.hc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--line); }
.hc-stats > div { min-width: 0; padding: 12px; border-left: 1px solid var(--line); }
.hc-stats > div:first-child { padding-left: 0; border-left: 0; }
.hc-stats dt { font-size: 12px; line-height: 1.5; color: var(--fg-2); }
.hc-stats dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 4px 0 0; }
.hc-stats dd b { font: 700 24px/1.1 var(--num); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hc-stats dd small { font: 400 13px var(--sans); margin-left: 1px; }
.hc-stats .ok { font-size: 12px; font-weight: 700; color: var(--accent); }
@media (max-width: 479px) { .hc-stats > div { padding-inline: 8px; } .hc-stats dt { font-size: 11px; } .hc-stats dd b { font-size: 19px; } }
.hc-bands { display: grid; gap: 9px; }
.hc-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 72px; gap: 12px; align-items: center; font-size: 12px; color: var(--fg-2); }
.hc-row .num { font: 500 12px var(--num); text-align: right; white-space: nowrap; }
.hc-row.on { color: var(--fg); font-weight: 700; }
.hc-row.on .num { font-weight: 700; }
.hc-row .trk { height: 10px; }
.hc-row:not(.on) .trk .bd { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: none; }
.hc-row:not(.on) .trk .pt { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.hc-row .trk .bd { animation: hc-grow .8s cubic-bezier(.2, .8, .2, 1) calc(.3s + var(--i) * .25s) both; }
@keyframes hc-grow { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hc-f { font-size: 12px; line-height: 1.7; color: var(--fg-3); }
@media (prefers-reduced-motion: reduce) { .hc-row .trk .bd { animation: none; } }

/* 本番そっくりの冊子（トップ）：冊子の紙面と、横の解答用紙。2問だけ解ける */
.bks { border-top: 1px solid var(--line); }
.bks .wrap { display: grid; gap: 32px; }
.bks .wrap > * { min-width: 0; }
@media (min-width: 1040px) { .bks .wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; } }
.bks-t h2 { font-size: clamp(25px, 4.4vw, 38px); line-height: 1.4; margin-top: 10px; }
.bks-t p { margin-top: 14px; color: var(--fg-2); max-width: 30em; }
@media (min-width: 1040px) { .bks-t h2 { font-size: clamp(28px, 3vw, 34px); } }
.bks-keys { display: none; margin-top: 18px; font-size: 13px; color: var(--fg-2); line-height: 2; }
@media (hover: hover) and (pointer: fine) { .bks-keys { display: block; } }
.bks-keys .kg { display: inline-block; white-space: nowrap; margin-right: 14px; }
.bks-keys kbd { display: inline-block; min-width: 1.9em; padding: 2px 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; background: var(--bg); font: 500 12px/1.3 var(--sans); text-align: center; color: var(--fg); }
.bks-demo { display: grid; gap: 14px; }
.bks-demo > * { min-width: 0; }
@media (min-width: 720px) { .bks-demo { grid-template-columns: minmax(0, 1fr) 160px; align-items: start; } }
.bks-demo .booklet { padding: 20px 18px 18px; }
@media (min-width: 640px) { .bks-demo .booklet { padding: 24px 28px 20px; } }
.bks-demo .bk-head { margin-bottom: 20px; }
.bks-demo .booklet .qtext { font-size: 15.5px; line-height: 1.95; }
.bks-demo .booklet .ch { min-height: 38px; font-size: 15.5px; padding-block: 3px; }
.bks-demo .booklet .ch .ov { width: 28px; height: 28px; font-size: 15.5px; }
.bk-col { display: grid; gap: 10px; }
/* 1問ずつ：ページは同じ場所に重ね、いまのページだけ見せる（めくっても高さが変わらない） */
.bk-pages { display: grid; }
.bk-pages > section.q { grid-area: 1 / 1; align-content: start; }
.bks-demo .booklet .bk-pages > section.q + section.q { margin-top: 0; padding-top: 0; border-top: 0; }
.bk-pages > section.q:not(.on) { visibility: hidden; }
.bk-pages > section.q.on { animation: bk-turn .22s ease-out both; }
@keyframes bk-turn { from { opacity: 0; transform: translateX(10px); } }
@media (prefers-reduced-motion: reduce) { .bk-pages > section.q.on { animation: none; } }
.bks-demo .bk-foot { margin-top: 18px; }
.bk-nav { display: flex; justify-content: space-between; gap: 10px; }
.bks-demo .booklet .chs { margin-top: 8px; }
.bk-src { margin-top: 6px; font: 400 11px var(--sans); letter-spacing: .04em; color: var(--fg-3); }
.bk-sheet { display: grid; gap: 10px; align-content: start; padding: 14px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow); }
.bs-h { display: flex; justify-content: space-between; align-items: center; font: 500 12px var(--sans); letter-spacing: .14em; color: var(--ink); }
.bs-h b { display: grid; place-items: center; width: 24px; height: 24px; border: 1.2px solid var(--ink); border-radius: 2px; font: 700 13px var(--book); color: var(--ink); letter-spacing: 0; }
.bk-sheet .msr .n { cursor: default; }
.bk-sheet .msr .o[data-ml] { cursor: pointer; }
.bk-sheet .msr.off { opacity: .4; }
@media (max-width: 719px) { .bk-sheet .msr.off { display: none; } .bk-sheet .msrows { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 4px 12px; } }
.bk-sheet #bkCheck { width: 100%; }
.bs-f { font-size: 12px; line-height: 1.7; color: var(--fg-3); }
.bs-f b { color: var(--fg); }
.bs-f a { display: block; margin-top: 6px; font-weight: 700; }

/* 数字の帯（大きな数字） */
.bigf { padding-block: 64px 72px; border-top: 1px solid var(--line); }
.bigf-h { display: grid; gap: 14px; margin-bottom: 40px; }
@media (min-width: 960px) { .bigf-h { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: end; } }
.bigf-h h2 { font-size: clamp(26px, 4.6vw, 44px); line-height: 1.32; }
.bigf-h p { color: var(--fg-2); font-size: 15px; line-height: 1.85; }
.bigf-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; margin: 0; }
.bigf-l > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px 0 0 16px; border-top: 3px solid var(--fg); border-left: 1px solid var(--line); }
.bigf-l > div:nth-child(odd) { padding-left: 0; border-left: 0; }
.bigf-l > div:nth-child(even) { padding-left: 16px; }
.bigf-l dt { font-weight: 900; font-size: 15px; }
.bigf-l dd { margin: 0; }
.bigf-l .n { order: -1; font: 700 clamp(44px, 12vw, 64px)/.9 var(--num); letter-spacing: -.035em; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bigf-l .n small { margin-left: 4px; font: 700 .26em var(--sans); letter-spacing: 0; color: var(--fg); }
.bigf-l .d { font-size: 13px; line-height: 1.7; color: var(--fg-2); padding-right: 12px; }
@media (min-width: 960px) {
  .bigf-l { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bigf-l > div, .bigf-l > div:nth-child(odd), .bigf-l > div:nth-child(even) { padding: 22px 20px 0; border-left: 1px solid var(--line); }
  .bigf-l > div:first-child { padding-left: 0; border-left: 0; }
  .bigf-l dt { font-size: 16px; }
  .bigf-l .n { font-size: clamp(56px, 6.6vw, 80px); }
}

svg.ms { display: block; width: 100%; height: auto; overflow: visible; margin-inline: auto; }
svg.ms .o { fill: transparent; stroke: var(--line-2); stroke-width: 1; transition: fill .18s, stroke .18s; }
svg.ms .o.ok { fill: var(--accent); stroke: var(--accent); }
svg.ms .o.ng { fill: var(--red); stroke: var(--red); }
svg.ms a:hover .o { stroke: var(--fg); stroke-width: 1.5; }
svg.ms .bl { font: 700 10px var(--sans); fill: var(--fg); letter-spacing: .05em; }
svg.ms .hs { font: 500 7px var(--sans); fill: var(--fg-3); letter-spacing: .1em; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--fg-3); margin-top: 10px; }
.legend i { display: inline-block; width: 7px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--line-2); }
.legend i.ok { background: var(--accent); border-color: var(--accent); }
.legend i.ng { background: var(--red); border-color: var(--red); }

/* 合格可能性の帯（幅＝内側に濃い縁、中央の目盛り） */
.trk { position: relative; height: 8px; border-radius: 4px; background: var(--bg-3); }
.trk .bd { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: color-mix(in srgb, var(--accent) 34%, transparent); box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); transition: left .25s ease, width .25s ease; }
.trk .pt { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--accent); border-radius: 1px; transform: translateX(-1px); transition: left .25s ease; }
.trk.prog { height: 4px; }
.trk.prog .bd { left: 0; box-shadow: none; background: var(--accent); }
.axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--fg-3); margin-top: 6px; font-variant-numeric: tabular-nums; }


/* セクション */
.sec { padding-block: 64px; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec.tint { background: var(--bg-2); }
@media (min-width: 960px) { .sec { padding-block: 104px; } }
.sec-h { max-width: 640px; margin-bottom: 36px; }
.sec-h.c { margin-inline: auto; text-align: center; }
.sec-h h2 { font-size: clamp(25px, 4.4vw, 38px); line-height: 1.4; margin-top: 10px; }
.sec-h p { margin-top: 14px; color: var(--fg-2); }

.dots { display: flex; gap: 6px; }
.dots i { width: 20px; height: 3px; border-radius: 2px; background: var(--line-2); transition: background .2s; }
.dots i.on { background: var(--accent); }
.q-stem { padding: 22px 20px 18px; font-size: 17px; line-height: 1.85; font-weight: 500; }

/* 選択肢（解答画面・1問ためす・解説で共通） */
.chs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ch {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; align-items: center;
  width: 100%; min-height: 56px; padding: 12px 8px; background: none; border: 0; border-bottom: 1px solid var(--line);
  text-align: left; cursor: pointer; transition: background-color .12s; line-height: 1.6; font-size: 16px; color: var(--fg);
}
.ch:hover { background: var(--bg-2); }
.ch .tx { min-width: 0; }
.ch:hover .ov { border-color: var(--accent); color: var(--accent); }
.ch.sel, .ch[aria-checked="true"] { background: var(--accent-soft); }
.ch.sel .ov, .ch[aria-checked="true"] .ov { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chs.done .ch { cursor: default; }
.chs.done .ch:hover { background: none; }
.chs.done .ch[aria-checked="true"] { background: none; }
.chs.done .ch:hover .ov, .chs.done .ch[aria-checked="true"] .ov { border-color: var(--fg-3); color: var(--fg-2); background: none; }
.chs.done .ch.is-ok .ov, .chs.done .ch.is-ok:hover .ov { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chs.done .ch.is-ng { background: color-mix(in srgb, var(--red-soft) 70%, transparent); }
.chs.done .ch.is-ng .ov, .chs.done .ch.is-ng:hover .ov { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.ch .vd { font-size: 12px; font-weight: 500; letter-spacing: .04em; white-space: nowrap; }
.ch.is-ok .vd { color: var(--accent); }
.ch.is-ng .vd { color: var(--red); }
.ch .why { display: none; grid-column: 2 / 4; margin-top: 4px; font-size: 14px; line-height: 1.75; color: var(--fg-2); }
.chs.done .why { display: block; }
.ch[disabled] { cursor: default; opacity: 1; }

/* できること */
.feats { border-top: 1px solid var(--line); }
.feat { display: grid; gap: 28px; padding-block: 44px; border-bottom: 1px solid var(--line); }
.feat:last-child { border-bottom: 0; padding-bottom: 0; }
.feat > * { min-width: 0; }
@media (min-width: 960px) { .feat { grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; padding-block: 64px; } }
.feat-t .no { font: 700 13px var(--sans); color: var(--accent); letter-spacing: .14em; }
.feat-t h3 { font-size: clamp(22px, 3vw, 28px); line-height: 1.45; margin-top: 8px; }
.feat-t p { margin-top: 12px; color: var(--fg-2); max-width: 30em; }
.modes { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; max-width: 420px; }
.modes li { background: var(--bg); padding: 10px 14px; font-size: 13px; color: var(--fg-2); line-height: 1.5; min-width: 0; }
.modes b { display: block; font-size: 15px; color: var(--fg); font-weight: 500; }
.vis { min-width: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; }
@media (min-width: 640px) { .vis { padding: 28px; } }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 18px; min-width: 0; }
@media (min-width: 640px) { .card { padding: 22px 24px; } }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.card-h b { font: 700 16px/1.4 var(--sans); letter-spacing: .04em; }
.card-h span { font-size: 12px; color: var(--fg-3); }
.foot { font-size: 12px; color: var(--fg-3); margin-top: 14px; line-height: 1.7; }



.paper-wrap { display: grid; justify-items: center; }
/* 苦手参考書の実際の紙面（PDFの1ページの上の部分）。下はぼかして切る */
.paper-shot { position: relative; margin: 0; width: 100%; max-width: 480px; background: #fff; border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow); overflow: hidden; }
.paper-shot img { display: block; width: 100%; height: auto; }
.paper-shot::after { content: ""; position: absolute; inset: auto 0 0; height: 64px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.cb-l { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--fg-3); margin-top: 14px; justify-content: center; align-items: center; }
.cb-l span { display: inline-flex; align-items: center; gap: 6px; }

.wk { list-style: none; margin: 12px 0 0; padding: 0; }
.wk li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.wk .p { font: 700 18px/1 var(--num); font-variant-numeric: tabular-nums; }
.wk .p small { font-size: 11px; }
.wk .bar { display: block; height: 3px; background: var(--bg-3); border-radius: 2px; margin-top: 7px; overflow: hidden; }
.wk .bar i { display: block; height: 100%; background: var(--red); border-radius: 2px; }
.wk b { display: block; font-weight: 500; font-size: 15px; line-height: 1.5; }
.wk .s { display: block; font-size: 12.5px; color: var(--fg-3); line-height: 1.6; }
.wk li.skip { opacity: .62; }
.wk li.skip b { text-decoration: line-through; text-decoration-thickness: 1px; }
.wk li.skip .p { color: var(--fg-3); }
.wk li.skip em { font-style: normal; color: var(--accent); }


/* 無料の過去問（入口）：左に説明とボタン、右に4つの選び方（押すとそのまま開く） */
.pasts .wrap { display: grid; gap: 28px; }
.pasts .wrap > * { min-width: 0; }
@media (min-width: 960px) { .pasts .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; } }
.pasts-t h2 { font-size: clamp(24px, 4.2vw, 36px); line-height: 1.4; margin-top: 10px; }
@media (min-width: 960px) { .pasts-t h2 { font-size: clamp(26px, 2.6vw, 31px); } }
.pasts-t p { margin-top: 14px; color: var(--fg-2); max-width: 30em; }
.pasts-t .btn { margin-top: 24px; }
.pways { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--fg); }
.pways a { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; transition: background-color .12s; }
.pways a:hover { background: var(--bg-2); }
.pways .n { font: 700 34px/1 var(--num); letter-spacing: -.02em; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pways .n small { margin-left: 3px; font: 700 13px var(--sans); letter-spacing: 0; color: var(--fg); }
.pways .t { display: grid; gap: 2px; min-width: 0; }
.pways .t b { font-size: 16px; }
.pways .t span { font-size: 13px; line-height: 1.6; color: var(--fg-2); }
.pways .ar { color: var(--fg-3); transition: transform .12s, color .12s; }
.pways a:hover .ar { color: var(--accent); transform: translateX(3px); }
@media (max-width: 479px) { .pways a { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; } .pways .n { font-size: 26px; } }
.bk-buy { margin-top: 14px; font-size: 14px; color: var(--band-fg-2); }
.bk-buy a { color: var(--band-fg); font-weight: 700; text-underline-offset: 3px; }

/* 料金（おすすめは：スマホで先頭、PCで中央） */
.plans { display: grid; gap: 16px; }
@media (min-width: 960px) { .plans { grid-template-columns: 1fr 1.08fr 1fr; align-items: stretch; } }
.plan { position: relative; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; min-width: 0; }
.plan.is-rec { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); order: -1; margin-top: 10px; }
@media (min-width: 960px) { .plan.is-rec { order: 0; padding-block: 32px; margin-block: -8px; } }
.plan .rec-l { position: absolute; top: -11px; left: 24px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 500; letter-spacing: .08em; padding: 2px 10px; border-radius: 999px; }
.plan h3 { font: 500 15px var(--sans); color: var(--fg-2); letter-spacing: .04em; }
.price { margin-top: 10px; font: 700 40px/1 var(--sans); font-feature-settings: "palt"; letter-spacing: .01em; white-space: nowrap; }
.price small { font: 400 14px var(--sans); color: var(--fg-3); margin-left: 4px; }
.plan .sub { margin-top: 10px; font-size: 13px; color: var(--fg-3); line-height: 1.6; min-height: 1.6em; }
.plan ul { list-style: none; margin: 20px 0 24px; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 14px; }
.plan li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; line-height: 1.6; }
.plan li::before { content: ""; width: 12px; height: 7px; margin-top: 6px; border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg); }
.plan .btn { margin-top: auto; width: 100%; }
.subplans { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-top: 16px; }
@media (min-width: 640px) { .subplans { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); } }
.subplans > div { background: var(--bg); padding: 16px 20px; min-width: 0; }
.subplans b { font-weight: 500; font-size: 14px; }
.subplans .p { display: block; font: 700 22px/1.3 var(--sans); margin-top: 2px; color: var(--fg); }
.subplans span { display: block; font-size: 12px; color: var(--fg-3); line-height: 1.6; margin-top: 2px; }
.price-note { margin-top: 20px; font-size: 13px; color: var(--fg-2); display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: center; }
.price-note span { display: inline-flex; align-items: center; gap: 6px; }
.price-note span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex: none; }

/* 本の帯（表紙の深緑） */
.bookband { background: var(--band-bg); color: var(--band-fg); position: relative; overflow: hidden; }
.bookband::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 22px 22px; }
.bookband .wrap { position: relative; display: grid; gap: 36px; padding-block: 64px; align-items: center; }
.bookband .wrap > * { min-width: 0; }
@media (min-width: 960px) { .bookband .wrap { grid-template-columns: auto 1fr; gap: 72px; padding-block: 88px; } }
.bk-cover { display: block; width: 180px; height: auto; max-width: 100%; justify-self: center; border-radius: 2px 4px 4px 2px; box-shadow: 0 22px 48px -18px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1); }
@media (min-width: 760px) { .bk-cover { width: 240px; } }
.bookband .kicker { color: var(--gold); }
.bookband h2 { font-size: clamp(24px, 4vw, 34px); line-height: 1.45; margin-top: 10px; }
.bookband p { margin-top: 14px; color: var(--band-fg-2); max-width: 34em; }
.bookband a:not(.btn) { color: var(--band-fg); }
.code { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.code label { display: grid; gap: 6px; font-size: 12px; color: var(--band-fg-2); letter-spacing: .06em; max-width: 100%; }
.code input {
  width: 220px; max-width: 100%; height: 48px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--band-line);
  background: rgba(255,255,255,.07); color: var(--band-fg); font: 700 20px var(--num); letter-spacing: .28em; font-variant-numeric: tabular-nums;
}
.code input::placeholder { color: rgba(255,255,255,.3); }
.code input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--band-line); box-shadow: none; }
.code input[aria-invalid="true"] { border-color: #f3a497; }
.code .btn { height: 48px; background: var(--gold); color: #1d1a0e; }
.code .btn:hover { background: #f6d56d; color: #1d1a0e; }
.code .code-msg { flex-basis: 100%; max-width: none; font-size: 13px; color: var(--band-fg-2); min-height: 1.6em; margin-top: 0; }
.code .code-msg.is-err { color: #ffd0c8; }
.book-open { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 26px; }
.bookband .book-open .btn { background: var(--gold); color: #1d1a0e; }
.bookband .book-open span { font-size: 13px; color: var(--band-fg-2); }

/* 本の特典のコード欄（メニュー・開始ページ） */
.bookform { display: grid; gap: 8px; max-width: 440px; }
.bookform .in { display: flex; gap: 8px; }
.bookform .in .btn { flex: none; }
.bookform input { letter-spacing: .25em; font-family: var(--num); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 18px; }
.bookform .err, .bookform .code-msg { color: var(--red); font-size: 13px; min-height: 1.4em; }

/* よくある質問 */
.faq { max-width: 760px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 60px; padding: 14px 2px; cursor: pointer; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 9px; height: 9px; flex: none; border-right: 1.5px solid var(--fg-3); border-bottom: 1.5px solid var(--fg-3); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq details p { padding: 0 2px 20px; color: var(--fg-2); font-size: 15px; }

/* ---------- 一覧の行（メニュー・同じ論点の過去問など） ---------- */
.lg, .mgroup { margin-top: 32px; }
.lg > h2, .mgroup > h2 { font: 500 13px var(--sans); color: var(--fg-3); letter-spacing: .1em; margin-bottom: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.mgroup > h2 small { font-size: 12px; letter-spacing: .04em; color: var(--fg-3); font-weight: 400; }
.mrows { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.lrow, .mrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 10px; gap: 14px; align-items: center;
  min-height: 64px; padding: 14px 2px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
}
.lrow:hover, .mrow:hover { color: inherit; }
.lrow b, .mrow .nm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 500; font-size: 16px; line-height: 1.5; transition: color .15s; }
.lrow span.d, .mrow .ds { display: block; font-size: 13px; color: var(--fg-3); line-height: 1.6; margin-top: 1px; }
.lrow .m, .mrow .mt { font: 700 15px var(--num); color: var(--fg-2); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.lrow .m small, .mrow .mt small { font: 400 11px var(--sans); color: var(--fg-3); margin-left: 2px; }
.mrow .mt .chip { font-family: var(--sans); font-weight: 400; color: var(--accent); }
.lrow::after, .mrow::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--fg-3); border-top: 1.5px solid var(--fg-3); transform: rotate(45deg); transition: transform .15s, border-color .15s; }
.lrow:hover b, .mrow:hover .nm { color: var(--accent); }
.lrow:hover::after, .mrow:hover::after { transform: translateX(2px) rotate(45deg); border-color: var(--accent); }
.mrow[aria-disabled="true"] { opacity: .5; }
.lrows { border-top: 1px solid var(--line); }
button.lrow { width: 100%; background: none; border-width: 0 0 1px; border-style: solid; border-color: var(--line); text-align: left; font: inherit; color: inherit; }
.mbox { padding: 16px 2px; border-bottom: 1px solid var(--line); }

/* ---------- メニュー ---------- */
.mgrid { display: grid; gap: 32px; }
.mgrid > * { min-width: 0; }
@media (min-width: 960px) { .mgrid { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; } }
.resume { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); box-shadow: var(--shadow); margin-bottom: 8px; }
.resume .k { display: block; font-size: 12px; color: var(--accent); letter-spacing: .1em; font-weight: 500; }
.resume b { display: block; font: 700 18px/1.4 var(--sans); }
.resume .s { display: block; font-size: 13px; color: var(--fg-3); }
.resume .acts { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.resume .trk { grid-column: 1 / -1; margin-top: 8px; }
.srcbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 24px; }
.srcbar .lbl { font-weight: 500; font-size: 13px; color: var(--fg-3); letter-spacing: .1em; }
.srcbar .note { flex-basis: 100%; font-size: 12px; color: var(--fg-3); line-height: 1.7; }
.mside { display: grid; gap: 16px; }
@media (min-width: 960px) { .mside { position: sticky; top: calc(var(--head-h) + 24px); } }
.scard { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; background: var(--bg); min-width: 0; }
.scard h3 { font: 500 13px var(--sans); color: var(--fg-3); letter-spacing: .1em; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.scard .big { font: 700 34px/1.15 var(--sans); margin-top: 8px; font-feature-settings: "palt"; white-space: nowrap; }
.scard .big small { font-size: 16px; }
.scard .trk { margin-top: 12px; }
.scard p { margin-top: 8px; font-size: 14px; color: var(--fg-2); }
.kv { display: grid; grid-template-columns: 1fr 1fr; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.kv div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.kv dt { font-size: 11px; color: var(--fg-3); letter-spacing: .06em; }
.kv dd { margin: 2px 0 0; font: 700 18px var(--sans); }
.kv dd small { font: 400 11px var(--sans); color: var(--fg-3); margin-left: 2px; }
.scard .btn { width: 100%; margin-top: 16px; }
.scard .btn + .btn { margin-top: 8px; }
.boxes3 { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
.boxes3 div { display: grid; justify-items: center; gap: 6px; padding: 6px 0; }
.boxes3 div + div { border-left: 1px solid var(--line); }
.boxes3 b { font: 700 22px/1 var(--sans); }
.boxes3 span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-3); }

/* ---------- 開始ページ ---------- */
.startp { max-width: 760px; }
.startp h1 { margin-top: 4px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; margin: 22px 0 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.facts > div { background: var(--bg); padding: 14px 16px; min-width: 0; }
.facts dt { font-size: 11px; color: var(--fg-3); letter-spacing: .06em; }
.facts dd { margin: 2px 0 0; font: 700 18px/1.4 var(--sans); }
@media (max-width: 439px) { .facts { grid-template-columns: 1fr 1fr; } .facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.opts { display: grid; gap: 26px; margin-top: 28px; }
.opt > .lbl, .opt > legend { display: block; font-size: 13px; font-weight: 500; color: var(--fg-2); letter-spacing: .06em; margin-bottom: 10px; padding: 0; }
fieldset.opt { border: 0; padding: 0; margin: 0; min-width: 0; }
.opt .hint, p.hint, div.hint { font-size: 12px; color: var(--fg-3); margin-top: 8px; }
.two { display: grid; gap: 16px; }
.two > * { min-width: 0; }
@media (min-width: 600px) { .two { grid-template-columns: 1fr 1fr; } }
.start-cta { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.start-cta .btn:first-child { min-width: 200px; }
@media (max-width: 479px) { .start-cta .btn:first-child { flex: 1 1 100%; } }
.preview-box { background: var(--accent-soft); border-radius: var(--r-lg); padding: 18px 20px; margin-top: 4px; }
.preview-box p:first-child { font-weight: 500; }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pchips .chip { background: var(--bg); }
.pglist { list-style: none; padding: 0; margin: 0; max-height: 460px; overflow: auto; border-block: 1px solid var(--line); }
.pglist label { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--line); min-height: 56px; }
.pglist li:first-child label { border-top: 0; }
.pglist input { position: absolute; opacity: 0; pointer-events: none; }
.pglist .ov { width: 16px; height: 24px; }
.pglist label:has(input:checked) { background: var(--accent-soft); }
.pglist label:has(input:checked) .ov { background: var(--accent); border-color: var(--accent); }
.pglist label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.pglist .m { display: block; font-size: 12px; color: var(--fg-3); }

/* ---------- 解答画面 ---------- */
.xb { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.xb .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; min-height: 56px; gap: 10px; }
@media (min-width: 640px) { .xb .wrap { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; } }
.xb .t { min-width: 0; font-size: 13px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xb .t b { font: 700 15px var(--sans); color: var(--fg); margin-right: 8px; }
.xb .t .mt { display: none; }
@media (min-width: 640px) { .xb .t .mt { display: inline; } }
.xb .c { font: 700 16px var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.xb .c small { font: 400 12px var(--sans); color: var(--fg-3); margin-inline: 2px; }
.xb .r { display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
.timer { font: 500 15px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-right: 4px; }
.timer svg { width: 14px; height: 14px; color: var(--fg-3); flex: none; }
.timer.low { color: var(--red); }
.timer.low svg { color: var(--red); }
.xb .w-only { display: none; }
@media (min-width: 640px) { .xb .w-only { display: inline; } .xb .n-only { display: none; } }
@media (max-width: 379px) { .timer svg { display: none; } .xb .btn.sm { padding-inline: 8px; } }
.xprog { height: 2px; background: var(--bg-3); }
.xprog i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.xbody { display: grid; gap: 28px; padding-block: 28px 56px; }
.xbody > * { min-width: 0; }
@media (min-width: 960px) { .xbody { grid-template-columns: minmax(0, 1fr) 248px; gap: 56px; align-items: start; padding-block: 44px 80px; } }
.xmain { min-width: 0; max-width: 720px; }
.case { background: var(--bg-2); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 28px; font-size: 16px; line-height: 1.9; }
.case .lbl, .context .lbl { display: block; font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--accent); margin-bottom: 6px; }
.context { border-left: 2px solid var(--line-2); padding-left: 14px; margin-top: 16px; font-size: 15px; color: var(--fg-2); }
section.q + section.q { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line); }
.qhead { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.qno { font: 700 40px/1 var(--num); letter-spacing: -.01em; margin-right: 6px; font-variant-numeric: tabular-nums; }
.qno:focus { outline: none; }
.qhead .flag, .qhead .flagbtn { margin-left: auto; }
.flagbtn { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg); font-size: 13px; color: var(--fg-2); }
.flagbtn::after { content: ""; position: absolute; inset: -5px 0; }
.flagbtn svg { width: 14px; height: 14px; }
.flagbtn[aria-pressed="true"] { border-color: color-mix(in srgb, var(--gold) 70%, transparent); background: color-mix(in srgb, var(--gold) 18%, var(--bg)); color: var(--fg); }
.qtext, .stem { margin-top: 20px; font-size: 17px; line-height: 1.95; }
.qtext .ask, .stem .ask { display: block; margin-top: 10px; font-weight: 700; }
.xchs, .q .chs { margin-top: 24px; }
.calc { margin-top: 20px; }
.calc input { width: auto; min-width: 9ch; font: 700 22px var(--num); letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.checkrow { margin-top: 22px; }
.checkrow .btn { min-width: 160px; }
.xnav { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.xnav .btn { flex: 1; max-width: 200px; }
.src-note { font-size: 12px; color: var(--fg-3); margin-top: 14px; }
.src-note + .src-note.old-note { margin-top: 2px; }
.qpage .old-note { margin-top: 16px; }

/* 問題一覧（PC：右に貼りつく、スマホ：たたむ） */
.navi { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 16px; background: var(--bg); }
@media (min-width: 960px) { .navi { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow: auto; } }
.navi summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 52px; cursor: pointer; font-size: 14px; font-weight: 500; }
.navi summary::-webkit-details-marker { display: none; }
.navi summary span { font-size: 12px; color: var(--fg-3); font-weight: 400; }
.navi summary::after { content: ""; width: 7px; height: 7px; flex: none; border-right: 1.5px solid var(--fg-3); border-bottom: 1.5px solid var(--fg-3); transform: translateY(-2px) rotate(45deg); }
.navi[open] summary::after { transform: translateY(2px) rotate(225deg); }
.navi[open] { padding-bottom: 16px; }
.ngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 2px; margin-top: 4px; }
.ngrid button { position: relative; display: grid; place-items: center; height: 44px; padding: 0; border: 0; background: none; }
.ngrid button span { display: grid; place-items: center; width: 26px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); font: 500 10px/1 var(--sans); color: var(--fg-3); letter-spacing: 0; font-variant-numeric: tabular-nums; }
@media (min-width: 960px) and (pointer: fine) {
  .ngrid { grid-template-columns: repeat(8, 1fr); gap: 6px 4px; }
  .ngrid button { height: auto; }
  .ngrid button span { width: 100%; max-width: 26px; height: auto; aspect-ratio: 3 / 4; }
}
.ngrid .a span { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.ngrid .ok span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ngrid .ng span { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.ngrid .cur span { border: 1.5px solid var(--accent); color: var(--fg); font-weight: 700; }
.ngrid .f span::after { content: ""; position: absolute; top: calc(50% - 19px); right: calc(50% - 15px); width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1.5px var(--bg); }
@media (min-width: 960px) and (pointer: fine) { .ngrid .f span::after { top: -2px; right: calc(50% - 14px); } }
.nleg { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 14px; font-size: 11px; color: var(--fg-3); }
.nleg i { display: inline-block; width: 8px; height: 10px; border-radius: 50%; border: 1px solid var(--line-2); margin-right: 5px; vertical-align: -1px; }
.nleg i.a { background: var(--accent-soft); border-color: transparent; }
.nleg i.ok { background: var(--accent); border-color: var(--accent); }
.nleg i.ng { background: var(--red-soft); border-color: var(--red); }
.nleg i.f { width: 6px; height: 6px; background: var(--gold); border: 0; }
.keys { font-size: 11px; color: var(--fg-3); margin-top: 8px; }

/* 答え合わせ・解説 */
.feedback { margin-top: 24px; }
.yours { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding: 12px 16px; border-radius: 8px; background: var(--bg-2); font-size: 14px; }
.yours b { font-weight: 700; }
.yours .ng { color: var(--red); }
.yours .ok { color: var(--accent); }
.yours .vdt { font: 700 16px var(--sans); }
.yours .m { color: var(--fg-3); }
.point { margin-top: 20px; background: var(--accent-soft); border-radius: var(--r-lg); padding: 20px 22px; }
.point h2, .point .h { display: block; font: 700 13px var(--sans); letter-spacing: .16em; color: var(--accent); }
.point p { margin-top: 8px; font-size: 17px; line-height: 1.9; font-weight: 500; }
.point p + p { margin-top: 6px; }
.point .sub { font-size: 14px; font-weight: 400; color: var(--fg-2); }
/* ひっかけ：迷わせた理由。ポイントの箱の下に、左の赤い線だけで */
/* 新しい形の解説（lead）：箱にせず、読みものとして */
.ex-lead { margin-top: 22px; }
.ex-lead .h { display: block; font: 700 13px var(--sans); letter-spacing: .16em; color: var(--accent); }
.ex-lead p { margin-top: 8px; font-size: 16px; line-height: 1.95; }
.ex-lead p + p { margin-top: 10px; }
.ex-lead b, .xc .why b, .ch .why b { font-weight: 700; color: var(--fg); }
.trap { margin-top: 12px; padding: 4px 0 4px 16px; border-left: 2px solid var(--red); }
.trap .h { display: block; font: 700 13px var(--sans); letter-spacing: .16em; color: var(--red); }
.trap p { margin-top: 4px; font-size: 15px; line-height: 1.85; color: var(--fg-2); }
.pg-hist { margin-top: 12px; font-size: 13px; color: var(--fg-2); }
.pg-hist .k { font-weight: 500; color: var(--accent); margin-right: 8px; }
.pg-hist .xsmall { color: var(--fg-3); margin-left: 4px; }
.ex-notes { margin-top: 14px; display: grid; gap: 6px; font-size: 13px; color: var(--fg-3); }
.ex-notes .k { font-weight: 500; color: var(--accent); margin-right: 8px; }
.rel { margin-top: 32px; }
.rel h2, .rel h3 { font: 500 13px var(--sans); color: var(--fg-3); letter-spacing: .1em; margin-bottom: 4px; }
.rel .lrow b { font-size: 15px; }
.rel .lrows .lrow { min-height: 60px; }

/* 解説ページ */
.qpage { max-width: 820px; }
.kai-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.kai-h .pos { font: 700 15px var(--num); font-variant-numeric: tabular-nums; }
.qpage .qhead { margin-top: 8px; }
.qpage .yours { margin-top: 18px; }
.stem2 { margin-top: 20px; font-size: 15px; line-height: 1.95; color: var(--fg-2); }
.stem2 .ask { color: var(--fg); font-weight: 700; }
.qpage .case { font-size: 15px; color: var(--fg-2); margin: 20px 0 0; }
.xc-list { margin-top: 28px; border-top: 1px solid var(--line); }
.xc { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
/* 選択肢の記号は本番の冊子と同じ、囲まない a〜e（正解は深緑、まちがえて選んだものは赤） */
/* 選択肢の記号は本番の冊子どおり普通の文字（丸で囲まない） */
.xc .xl { width: 1.1em; text-align: center; font: 400 17px/1.45 var(--book); color: var(--fg-2); }
.xc.ok .xl { color: var(--accent); font-weight: 700; }
.xc.mine .xl { color: var(--red); font-weight: 700; }
.xc-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.xc-h b { font-size: 16px; font-weight: 700; }
.xc p { margin-top: 6px; font-size: 15px; line-height: 1.85; color: var(--fg-2); }
.xact { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 32px; }
.xact .row { gap: 12px; }
.qmeta { font-size: 13px; color: var(--fg-3); margin-top: 10px; }

/* モーダル・トースト */
.overlay { position: fixed; inset: 0; z-index: 70; background: rgb(10 17 16 / .45); display: grid; place-items: center; padding: 20px; }
.overlay.opaque { background: var(--bg); }
.dialog { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px 24px; width: min(460px, 100%); box-shadow: var(--shadow); }
.overlay.opaque .dialog { box-shadow: var(--shadow); }
.dialog h2 { font-size: 21px; }
.dialog .body { margin-top: 10px; font-size: 15px; color: var(--fg-2); }
.dialog .body strong { color: var(--fg); font-family: var(--sans); font-size: 17px; }
.dialog .acts { display: grid; gap: 8px; margin-top: 20px; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 80; background: var(--fg); color: var(--bg); padding: 10px 18px; border-radius: var(--r); font-size: 14px; max-width: calc(100vw - 32px); box-shadow: var(--shadow); }

/* ---------- 結果 ---------- */
.rgrid { display: grid; gap: 16px; }
.rgrid > * { min-width: 0; margin: 0 !important; }
@media (min-width: 960px) { .rgrid { grid-template-columns: 1fr 1fr; } }
.rcard { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; background: var(--bg); min-width: 0; }
@media (min-width: 640px) { .rcard { padding: 28px; } }
.rcard + .rcard, .rgrid + .rcard, .rcard + .rgrid, .rgrid + .next, .rcard + .next, .next + .rcard { margin-top: 16px; }
.rcard > h2, .rcard > .h { font: 500 13px var(--sans); color: var(--fg-3); letter-spacing: .1em; display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.rcard > h2 a, .rcard > h2 .chip { letter-spacing: 0; }
.pp { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-top: 10px; }
.pp b { font: 700 64px/1 var(--sans); letter-spacing: -.01em; }
.pp b small { font-size: 26px; margin-left: 2px; }
.pp span { font-size: 15px; color: var(--fg-2); }
.pp span .num { font-weight: 700; color: var(--fg); font-size: 18px; }
.rcard .trk { margin-top: 18px; height: 10px; }
.rcard .note { font-size: 12px; color: var(--fg-3); margin-top: 12px; line-height: 1.7; }
.crit { margin-top: 6px; }
.crow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; }
.crow:last-child { border-bottom: 0; padding-bottom: 0; }
.crow .nm { font-weight: 500; font-size: 15px; }
.crow .nm small { display: block; font-weight: 400; font-size: 12px; color: var(--fg-3); }
.crow .nm small b { font-weight: 500; color: var(--accent); }
.crow .nm small b.ng { color: var(--red); }
.crow .sc { font: 700 20px var(--num); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.crow .sc small { font: 400 12px var(--sans); color: var(--fg-3); margin-left: 2px; }
.crow .meter { grid-column: 1 / -1; position: relative; height: 4px; background: var(--bg-3); border-radius: 2px; margin-top: 4px; }
.crow .meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 2px; }
.crow .meter i.ng { background: var(--red); }
.crow .meter u { position: absolute; top: -4px; width: 1.5px; height: 12px; background: var(--fg); }
.dev { display: grid; gap: 4px; margin-top: 10px; }
.dev b { font: 700 44px/1 var(--sans); }
.dev span { font-size: 14px; color: var(--fg-2); }
svg.bell { display: block; width: 100%; height: auto; margin-top: 14px; overflow: visible; }
svg.bell .cv { fill: none; stroke: var(--fg-3); stroke-width: 1.2; }
svg.bell .rg { fill: color-mix(in srgb, var(--accent) 30%, transparent); }
svg.bell .me { stroke: var(--accent); stroke-width: 2; }
svg.bell .pl { stroke: var(--red); stroke-width: 1; stroke-dasharray: 3 3; }
svg.bell text { font: 400 9px var(--sans); fill: var(--fg-3); }
svg.bell text.r { fill: var(--red); }
svg.bell .ax { stroke: var(--line-2); stroke-width: 1; }
.fields { list-style: none; margin: 8px 0 0; padding: 0; }
.fields li { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; font-size: 14px; }
.fields li:last-child { border-bottom: 0; }
.fields .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fields .nm small { color: var(--fg-3); font-size: 12px; margin-left: 6px; }
.fields .nm b { font: 700 15px var(--sans); margin-right: 8px; }
.fields .v { font: 700 15px var(--num); text-align: right; font-variant-numeric: tabular-nums; }
.fields .meter { grid-column: 1 / -1; height: 3px; background: var(--bg-3); border-radius: 2px; overflow: hidden; }
.fields .meter i { display: block; height: 100%; background: var(--fg-3); border-radius: 2px; }
.fields li.low .meter i { background: var(--red); }
.fields li.low .v { color: var(--red); }
.more { margin-top: 6px; font-size: 13px; }
.more summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--fg-2); }
.recgrid { display: grid; gap: 20px; margin-top: 14px; }
.recgrid > * { min-width: 0; }
.recgrid > div:first-child { max-width: 420px; }
.recgrid svg.ms { margin-inline: 0; }
@media (min-width: 960px) { .recgrid { grid-template-columns: 400px minmax(0, 1fr); gap: 56px; align-items: center; } }
.next { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 960px) { .next { grid-template-columns: repeat(3, 1fr); } }
.next a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; background: var(--bg); padding: 18px 20px; min-height: 72px; text-decoration: none; color: inherit; transition: background-color .15s; }
.next a:hover { background: var(--bg-2); color: inherit; }
.next b { font-weight: 500; font-size: 15px; }
.next span { grid-column: 1; font-size: 12px; color: var(--fg-3); }
.next .ar { grid-row: 1 / 3; grid-column: 2; color: var(--accent); font-size: 18px; }
.next a.p { background: var(--accent); color: var(--on-accent); }
.next a.p span, .next a.p .ar { color: color-mix(in srgb, var(--on-accent) 78%, transparent); }
.next a.p:hover { background: var(--accent-h); }
.fix { list-style: none; padding: 0; margin: 8px 0 0; display: grid; }
.fix li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fix li:last-child { border-bottom: 0; }
.fix .th { font-weight: 500; }
.fix .th .no { font: 700 12px var(--sans); color: var(--accent); margin-right: 8px; }
.fix .why { grid-column: 1 / -1; font-size: 13px; color: var(--fg-3); }
.fix .gain { font: 700 15px var(--sans); color: var(--accent); white-space: nowrap; }
.fix .gain.ng-text { color: var(--red); }
.rcta { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
/* 無料の20問：今日の要点（番号の楕円が、正解なら塗り・不正解なら赤い枠） */
.page-h + .f20 { margin-top: 16px; }
.f20 + .rgrid { margin-top: 16px; }
.f20-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; }
.f20-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.f20-list li:last-child { border-bottom: 0; }
.f20-list .ov { width: 18px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 10px var(--sans); margin-top: 1px; border: 1px solid var(--line-2); color: var(--fg-3); }
.f20-list li.ok .ov { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.f20-list li.ng .ov { border: 1.5px solid var(--red); color: var(--red); }
.f20-list a { color: inherit; text-decoration: none; display: grid; gap: 2px; min-width: 0; }
.f20-list a b { font-weight: 500; line-height: 1.7; }
.f20-list a:hover b { color: var(--accent); }
.f20-list .d { font-size: 12px; color: var(--fg-3); }
.how { margin-top: 16px; font-size: 13px; color: var(--fg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 22px; }
.how + .rcard, .how + section { margin-top: 16px; }
@media (min-width: 640px) { .how { padding-inline: 28px; } }
.how summary { cursor: pointer; min-height: 56px; display: flex; align-items: center; color: var(--fg); font-weight: 500; }
.how p { padding-bottom: 10px; }
.how p:last-child { padding-bottom: 20px; }
.qlist { list-style: none; padding: 0; margin: 0; }
.qlist li { display: grid; grid-template-columns: 34px 24px minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.qlist li:last-child { border-bottom: 0; }
.qlist .i { color: var(--fg-3); font-variant-numeric: tabular-nums; font-size: 12px; }
.qlist .qmk { font: 700 16px var(--sans); }
.qlist .qmk.ok { color: var(--accent); }
.qlist .qmk.ng { color: var(--red); }
.qlist a { font-weight: 500; text-decoration: none; }
.qlist .pt { display: block; font-size: 12px; color: var(--fg-3); }
.qlist .ans { text-align: right; font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.qlist .ans b { color: var(--fg); font-weight: 500; }
@media (max-width: 519px) { .qlist li { grid-template-columns: 28px 22px minmax(0, 1fr); } .qlist .ans { grid-column: 3; text-align: left; } }
.block-h { font: 500 13px var(--sans); letter-spacing: .1em; margin: 22px 0 4px; color: var(--fg-3); }
.bottom-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* 数値の横並び（苦手分析・復習箱） */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-top: 20px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { background: var(--bg); padding: 16px 18px; min-width: 0; }
.stat .k { font-size: 11px; color: var(--fg-3); letter-spacing: .06em; }
.stat .v { font: 700 28px/1.3 var(--num); font-variant-numeric: tabular-nums; font-feature-settings: "palt"; }
.stat .v small { font: 400 12px var(--sans); color: var(--fg-3); margin-left: 2px; }
.stat .v .vs { display: block; font: 400 12px/1.4 var(--sans); color: var(--fg-3); }
.rcols { display: grid; gap: 16px; margin-top: 16px; }
.rcols > * { min-width: 0; margin: 0 !important; }
@media (min-width: 960px) { .rcols { grid-template-columns: 1fr 1fr; } }

/* チェックつきの行（苦手テーマ） */
.checks { list-style: none; padding: 0; margin: 0; }
.checks label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 4px; border-bottom: 1px solid var(--line); min-height: 56px; }
.checks label:hover { background: var(--bg-2); }
.checks input { margin-top: 3px; }
.checks .t { font-weight: 500; }
.checks .m { display: block; font-size: 12px; color: var(--fg-3); }
.no { font: 700 12px var(--sans); color: var(--accent); margin-right: 6px; }
.scroll-list { max-height: 560px; overflow: auto; border-top: 1px solid var(--line); margin-top: 12px; }

/* 一覧（復習箱・履歴） */
.rows { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.rows > li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.rows .bmk { font: 700 20px var(--sans); text-align: center; }
.rows .m { display: block; font-size: 12px; color: var(--fg-3); }
.rows .r { text-align: right; font-size: 12px; color: var(--fg-3); }
.rows.hist > li { grid-template-columns: minmax(0, 1fr) auto; }
.rows a.rowlink { color: var(--fg); text-decoration: none; font-weight: 500; display: inline-flex; min-height: 32px; align-items: center; }
.rows a.rowlink:hover { color: var(--accent); }

/* マイページ・規約 */
.form-grid { display: grid; gap: 14px; max-width: 460px; margin-top: 14px; }
.psec { padding-block: 30px; border-top: 1px solid var(--line); }
.psec:first-of-type { border-top: 0; padding-top: 12px; }
.psec h2 { font-size: 19px; }
.psec .desc { font-size: 13px; color: var(--fg-3); margin-top: 6px; }
.legal ul { margin-top: 10px; padding-left: 1.2em; }
.legal li { padding: 4px 0; }
.foot-note { font-size: 12px; color: var(--fg-3); margin-top: 16px; }

/* ---------- 苦手参考書（印刷） ---------- */
.print-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.pbook { max-width: 820px; }
.pbook .cover { padding-bottom: 18px; border-bottom: 2px solid var(--fg); }
.pbook .cover .kicker { display: block; margin-bottom: 6px; }
.pbook .cover h1 { font-size: clamp(26px, 5vw, 34px); }
.pbook .cover .for { margin-top: 8px; font-size: 14px; }
.pbook .cover .for b { background: linear-gradient(transparent 60%, var(--marker) 60%); }
.pbook .toc { list-style: none; padding: 0; margin: 14px 0 0; font-size: 13px; display: grid; gap: 2px; }
.ptheme { padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--line); }
.ptheme:first-of-type { border-top: 0; }
.ptheme h2 { font-size: 23px; }
.ptheme h2 .nm { background: linear-gradient(transparent 60%, var(--marker) 60%); }
.ptheme h2 .no { font-size: 15px; }
.ptheme .pmeta { font-size: 12px; color: var(--fg-3); margin-top: 4px; }
.ptheme h3 { font-size: 16px; margin: 18px 0 8px; display: flex; align-items: baseline; gap: 8px; }
.ptheme h3::before { content: ""; width: 3px; height: 14px; background: var(--accent); align-self: center; }
.checklist { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.checklist li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px dotted var(--line-2); break-inside: avoid; }
.checklist li::before { content: ""; width: 12px; height: 12px; border: 1.2px solid var(--fg); border-radius: 1px; margin-top: 6px; }
.checklist .src { color: var(--fg-3); font-size: 12px; }
.checklist .rep { color: var(--accent); font-size: 12px; font-weight: 500; margin-left: 4px; white-space: nowrap; }
.pwrong { padding: 12px 0; border-top: 1px solid var(--line); break-inside: avoid; font-size: 14px; }
.pwrong .h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-weight: 700; }
.pwrong .h .pt { font-weight: 400; color: var(--fg-3); }
.pwrong .boxes { font-weight: 400; color: var(--fg-3); font-size: 12px; white-space: nowrap; }
.pwrong ol { margin: 6px 0; padding-left: 1.6em; list-style: lower-alpha; }
.pwrong .pans { margin-top: 4px; }
.pwrong .pans strong { color: var(--red); }
.pwrong .exp { margin-top: 6px; font-size: 13px; }
.watermark { margin-top: 36px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--fg-3); text-align: center; }

@media print {
  html:root:not(#print-x), html:root[data-gm-theme]:not(#print-x) {
    --bg: #fff; --bg-2: #f6f8f7; --bg-3: #edf2f1; --paper: #fff; --fg: #111; --fg-2: #333; --fg-3: #555;
    --line: #c9d3d1; --line-2: #9fb0ad; --accent: #0f5a55; --accent-soft: #e8f1ef; --on-accent: #fff; --marker: #f7dd7c; --red: #c23f2f; --red-soft: #fbebe8;
    color-scheme: light;
  }
  @page { size: A4; margin: 14mm 14mm 20mm; }
  body { font-size: 10.5pt; line-height: 1.65; letter-spacing: 0; background: #fff; color: #111; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body::before { display: none; }
  .print-tools, .sh, .sf, .no-print { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .page { padding: 0; }
  a { color: inherit; text-decoration: none; }
  .ptheme { break-before: auto; }
  .ptheme h2, .ptheme h3 { break-after: avoid; }
  .checklist li, .pwrong { break-inside: avoid; }
}

/* ---------- 正誤表・お問い合わせ ---------- */
.errata { width: 100%; border-collapse: collapse; font-size: 14px; }
.errata th, .errata td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.errata th { font-size: 12px; font-weight: 500; color: var(--fg-3); letter-spacing: .06em; }
.psec:has(.errata) { overflow-x: auto; }
form.contact { display: grid; gap: 16px; max-width: 560px; }
form.contact textarea { width: 100%; min-height: 9em; resize: vertical; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper); }
form.contact textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
form.contact .err:empty { display: none; }
form.contact .err { color: var(--red); font-size: 14px; margin: 0; }

/* ---------- 別冊の画像（過去問の画像問題）と拡大表示：js/figures.js ----------
   画像そのものには色の反転・フィルターをかけない。ダーク表示でも、図のまわりは明るい静かな枠のまま。
   読み込めない図は、壊れた画像の印の代わりに破線の箱（.fig-missing）。 */
.figs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 12px; margin-top: 20px; }
.case + .figs { margin: -12px 0 28px; }
.qpage .case + .figs { margin: 14px 0 0; }
.fig { margin: 0; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 6px; }
.fig-btn { display: block; min-width: 0; max-width: 100%; padding: 6px; line-height: 0; border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; cursor: zoom-in; transition: border-color .15s; }
.fig-btn:hover { border-color: var(--accent); }
.fig-img { display: block; max-width: 100%; height: auto; max-height: min(72vh, 680px); object-fit: contain; background: #fff; }
.fig figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; font-size: 13px; line-height: 1.5; color: var(--fg-2); cursor: zoom-in; }
.fig-cap { font-weight: 500; color: var(--fg); }
.fig-more { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--fg-3); }
.fig-more svg { width: 14px; height: 14px; }
.fig-btn.is-missing { padding: 0; line-height: 1.6; cursor: default; border-style: dashed; background: var(--bg-2); }
.fig-btn.is-missing:hover { border-color: var(--line-2); }
.fig:has(.is-missing) figcaption { cursor: default; }
.fig:has(.is-missing) .fig-more { display: none; }
.fig-missing { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: min(420px, calc(100vw - 48px)); max-width: 100%; min-height: 150px; padding: 18px 16px; text-align: center; color: var(--fg-2); }
.fig-missing b { font-size: 14px; font-weight: 500; color: var(--fg); }
.fig-missing small { font-size: 12px; color: var(--fg-3); }

/* 拡大表示（全画面。背景は表示テーマによらず暗く、画像は白い紙のまま） */
html.fz-open, html.fz-open body { overflow: hidden; }
.fz { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; background: rgb(16 18 18); color: #f2f2ef; font-family: var(--sans); }
.fz-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px 16px; }
.fz-cap { margin: 0; min-width: 0; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fz-tools { display: flex; gap: 6px; flex: none; }
.fz-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid rgb(255 255 255 / .22); border-radius: var(--r); background: rgb(255 255 255 / .06); color: inherit; font-size: 20px; line-height: 1; }
.fz-b:hover { background: rgb(255 255 255 / .14); }
.fz-close .fz-ct { font-size: 14px; }
.fz-stage { position: relative; min-height: 0; overflow: hidden; display: grid; place-items: center; padding: 4px 12px; touch-action: none; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.fz.zoomed .fz-stage { cursor: grab; }
.fz-img { display: block; max-width: 100%; max-height: 100%; background: #fff; transform-origin: center; will-change: transform; -webkit-user-drag: none; }
.fz-nav { position: absolute; top: 50%; width: 44px; height: 64px; margin-top: -32px; border: 0; border-radius: var(--r); background: rgb(0 0 0 / .5); color: #fff; font-size: 30px; line-height: 1; }
.fz-prev { left: 8px; }
.fz-next { right: 8px; }
.fz-hint { margin: 0; padding: 6px 16px calc(10px + env(safe-area-inset-bottom, 0px)); font-size: 12px; color: rgb(255 255 255 / .66); text-align: center; }
.fz .fig-missing { width: min(420px, calc(100vw - 32px)); border: 1px dashed rgb(255 255 255 / .3); border-radius: var(--r-lg); color: rgb(255 255 255 / .8); }
.fz .fig-missing b { color: #fff; }
.fz .fig-missing small { color: rgb(255 255 255 / .62); }
.fz :focus-visible { outline-color: #fff; }
@media (max-width: 359px) { .fz-close .fz-ct { display: none; } }

/* ---------- 解説：出題のあとで変わった点（現在は…／補足） ---------- */
.now-note { margin-top: 12px; padding: 4px 0 4px 16px; border-left: 2px solid var(--gold); }
.now-note .h { display: block; font: 700 13px var(--sans); letter-spacing: .16em; color: var(--fg); }
.now-note p { margin-top: 4px; font-size: 15px; line-height: 1.85; color: var(--fg-2); }

/* ---------- 今日の学習（演習メニューの上） ---------- */
.page-h .srch-link { display: inline-flex; align-items: center; gap: 6px; }
.today { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); box-shadow: var(--shadow); overflow: hidden; }
.td-exam { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 4px 16px; padding: 16px 20px 14px; background: var(--paper); border-bottom: 1px solid var(--line); }
.td-exam .k { display: block; font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--accent); }
.td-exam b { display: block; font: 700 18px/1.3 var(--sans); margin-top: 2px; }
.td-exam b em { font-style: normal; font-size: 34px; color: var(--accent); margin: 0 4px; font-feature-settings: "palt"; }
.td-exam .d { font-size: 12px; color: var(--fg-3); }
.td-grid { display: grid; }
.td-grid > div { padding: 16px 20px; min-width: 0; }
.td-grid > div + div { border-top: 1px solid var(--line); }
@media (min-width: 640px) { .td-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .td-grid > div + div { border-top: 0; border-left: 1px solid var(--line); } }
.td-goal h2, .td-week h3 { font: 500 13px var(--sans); color: var(--fg-3); letter-spacing: .1em; margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.td-week h3 span { font-size: 12px; letter-spacing: .02em; color: var(--fg-2); }
.td-week h3 span b { font: 700 15px var(--sans); color: var(--fg); }
.td-n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
.td-n b { font: 700 34px/1.1 var(--sans); }
.td-n small { font-size: 14px; color: var(--fg-3); }
.td-goal .trk { margin-top: 10px; }
.td-set { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--fg-2); }
.td-set select { width: auto; min-height: 36px; padding-top: 0; padding-bottom: 0; }
.td-note { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--fg-3); }
.wkc { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 120px; }
.wkc li { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.wkc .n { font-size: 11px; line-height: 1.2; min-height: 13px; color: var(--fg-3); }
.wkc .col { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; min-height: 0; border-bottom: 1px solid var(--line-2); }
.wkc .bar { display: block; width: 100%; max-width: 22px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.wkc .d { font-size: 11px; color: var(--fg-3); line-height: 1.4; white-space: nowrap; }
.wkc li.t .bar { background: var(--accent); }
.wkc li.t .d, .wk li.t .n { color: var(--fg); font-weight: 500; }
.td-next { padding: 16px 20px 18px; border-top: 1px solid var(--line); }
.td-go { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 14px 18px; border-radius: var(--r); background: var(--accent); color: var(--on-accent); text-decoration: none; transition: background-color .15s; }
.td-go:hover { background: var(--accent-h); color: var(--on-accent); }
.td-go .k { grid-column: 1; font-size: 12px; letter-spacing: .1em; opacity: .8; }
.td-go b { grid-column: 1; font: 700 18px/1.45 var(--sans); }
.td-go .s { grid-column: 1; font-size: 13px; line-height: 1.6; opacity: .88; margin-top: 2px; }
.td-go .ar { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: 20px; transition: transform .15s; }
.td-go:hover .ar { transform: translateX(3px); }
.td-next #discard { margin-top: 8px; }
.td-more { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; font-size: 13px; }
.mbook > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 64px; padding: 14px 2px; cursor: pointer; }
.mbook > summary::-webkit-details-marker { display: none; }
.mbook > summary b { display: block; font-weight: 500; font-size: 16px; line-height: 1.5; }
.mbook > summary .s { display: block; font-size: 13px; color: var(--fg-3); line-height: 1.6; }
.mbook > summary .ar { font-size: 13px; color: var(--accent); white-space: nowrap; }
.mbook[open] > summary .ar { color: var(--fg-3); }
.mbook > .mt { padding: 0 2px 16px; }
.mrows > li:has(> .mbook) { border-bottom: 1px solid var(--line); }

/* ---------- ことばで探す（#/search） ---------- */
.icon-btn.srch-btn[aria-current] { color: var(--accent); }
@media (max-width: 419px) { body[data-route="top"] .srch-btn { display: none; } }
.srch-f { display: grid; gap: 12px; }
.srch-box { position: relative; }
.srch-box svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; }
.srch-box input { width: 100%; min-height: 52px; padding-left: 42px; font-size: 17px; }
.srch-opts { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 13px; color: var(--fg-2); }
.srch-opts label { display: inline-flex; align-items: center; gap: 8px; }
.srch-opts select { width: auto; max-width: min(62vw, 280px); min-height: 38px; padding-top: 0; padding-bottom: 0; }
.srch-opts .ck input { width: 18px; height: 18px; }
#srchOut { margin-top: 24px; }
.srch-empty p { font-size: 13px; color: var(--fg-3); letter-spacing: .06em; }
.srch-ex { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.srch-ex .chip { min-height: 34px; padding: 0 12px; font-size: 14px; background: var(--bg); cursor: pointer; }
.srch-ex .chip:hover { color: var(--accent); border-color: var(--accent); }
.srch-none { font-size: 14px; color: var(--fg-2); line-height: 1.8; }
.srch-sum { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding-bottom: 12px; }
.srch-sum p b { font: 700 26px var(--sans); }
.srch-sum p { font-size: 14px; color: var(--fg-2); }
.srch-sum .s { font-size: 13px; color: var(--fg-3); }
.srch-sum .btn .ar { margin-left: 6px; }
.srch-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.srch-list a { display: grid; gap: 4px; padding: 14px 2px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; min-width: 0; }
.srch-list a:hover .h b { color: var(--accent); }
.srch-list .h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.srch-list .h b { font: 700 15px var(--sans); transition: color .15s; }
.srch-list .h .m { font-size: 12px; color: var(--fg-3); }
.srch-list .t { font-size: 14px; line-height: 1.75; color: var(--fg-2); overflow-wrap: anywhere; }
.srch-list .c { display: grid; gap: 2px; font-size: 13px; color: var(--fg-2); }
.srch-list .p { font-size: 13px; color: var(--fg); line-height: 1.6; padding-left: 10px; border-left: 2px solid var(--line-2); }
.srch-list mark, .srch-list .h mark { background: linear-gradient(transparent var(--mk-cut), var(--marker) var(--mk-cut)); color: inherit; padding: 0 1px; }
.srch-more { margin-top: 16px; text-align: center; }

/* トップ：2回目からの人 */
.welcome { border-bottom: 1px solid var(--line); background: var(--accent-soft); }
.welcome .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding-block: 10px; }
.welcome p { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; font-size: 14px; }
.welcome p span { font-size: 13px; color: var(--fg-2); }
.welcome .btn .ar { margin-left: 4px; }

/* 結果：問題ごとの結果のしぼりこみ */
.qs .seg.qf { margin: 10px 0 4px; flex-wrap: wrap; }
.qs[data-show="ng"] .qlist li:not([data-r="ng"]), .qs[data-show="unsure"] .qlist li:not([data-lucky]) { display: none; }

/* 解答画面：スマホ・タブレットでは「前へ／次へ」を画面の下に固定（親指で届く位置） */
@media (max-width: 959px) {
  .xnav {
    position: sticky; bottom: 0; z-index: 15; margin-top: 24px;
    margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .xnav .btn { max-width: none; min-height: 48px; }
}

/* ---------- 解答画面：本番の問題冊子と解答用紙 ----------
   紙面：BIZ UD明朝・番号は左の余白・選択肢は「a　…」。選んだ字は鉛筆で丸をつけたように囲む。
   解答用紙：番号のマスだけ。PC は右に細く貼りつく（番号を押すとその問題。マークは問題の選択肢で）。問題を広く見せる。
   スマホは選択肢の下に、その問題の解答欄（朱の刷りの楕円）。 */
@media (min-width: 960px) {
  .exam-mode .xb .wrap, .exam-mode .xbody { max-width: 1180px; }
  .xbody { grid-template-columns: minmax(0, 1fr) 180px; gap: 32px; }
}
.xmain { max-width: 900px; }
.booklet { background: var(--sheet); border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow); padding: 18px 16px 14px; }
@media (min-width: 640px) { .booklet { padding: 28px 44px 18px; } }
.bk-head { display: flex; justify-content: space-between; gap: 12px; font: 400 12px/1.5 var(--book); color: var(--fg-3); letter-spacing: .06em; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 26px; min-width: 0; }
.bk-head span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-head .num { font-family: var(--book); flex: none; }
.bk-foot { text-align: center; font: 400 12px var(--book); color: var(--fg-3); margin-top: 30px; letter-spacing: .2em; }
.booklet .case { background: none; border-radius: 0; padding: 0; margin-bottom: 30px; font: 400 16.5px/2 var(--book); letter-spacing: .02em; }
.booklet .case .lbl { font: 400 15px/1.9 var(--book); letter-spacing: .02em; color: var(--fg); margin-bottom: 10px; }
.booklet section.q { position: relative; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); align-items: start; scroll-margin-top: 76px; }
.booklet section.q > * { grid-column: 2; min-width: 0; }
.booklet section.q > .qno { position: relative; grid-column: 1; grid-row: 1; font: 700 17px/2 var(--book); letter-spacing: 0; margin: 0; }
@media (max-width: 639px) { .booklet section.q { grid-template-columns: 2em minmax(0, 1fr); } }
.booklet section.q + section.q { margin-top: 40px; padding-top: 32px; border-top: 1px dashed var(--line-2); }
.booklet .context { font-family: var(--book); line-height: 2; margin-top: 0; margin-bottom: 14px; }
.booklet .qtext { margin-top: 0; font: 400 17px/2 var(--book); letter-spacing: .02em; }
.booklet .qtext .ask { margin-top: 4px; }
/* 連問：キーで答える問題に、番号の左へ朱の印 */
.booklet.multi section.q.on > .qno::before { content: ""; position: absolute; left: -12px; top: .5em; width: 3px; height: 1.05em; border-radius: 2px; background: var(--ink); }
@media (min-width: 640px) { .booklet.multi section.q.on > .qno::before { left: -22px; } }
/* 選択肢：冊子の「a　医薬品」。選ぶと字を鉛筆で囲む */
.booklet .chs { border-top: 0; margin-top: 14px; }
.booklet .ch { min-height: 46px; padding: 6px 10px 6px 2px; border-bottom: 0; border-radius: 4px; column-gap: 10px; font: 400 17px/1.8 var(--book); letter-spacing: .02em; }
.booklet .ch .ov { width: 30px; height: 30px; border: 1.5px solid transparent; font: 400 17px/1 var(--book); color: var(--fg); }
.booklet .ch:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.booklet .ch:hover .ov { border-color: var(--line-2); color: var(--fg); }
.booklet .ch[aria-checked="true"] { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.booklet .ch[aria-checked="true"] .ov { background: none; border-color: var(--pencil); color: var(--fg); font-weight: 700; }
.booklet .ch[aria-checked="true"] .tx { font-weight: 700; }
.booklet .ch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 選択肢の右端に、キーの番号（PCだけ）。選んだ行は濃く */
.ch .ck { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ch .ck { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; background: var(--bg); font: 500 11px/1 var(--sans); color: var(--fg-3); opacity: .7; transition: opacity .12s, color .12s, border-color .12s; }
  .ch:hover .ck { opacity: 1; color: var(--fg-2); }
  .ch[aria-checked="true"] .ck { opacity: 1; color: var(--fg); border-color: var(--fg-3); }
}
/* いま塗った楕円：鉛筆で塗ったように、少し大きく → もとの大きさ */
.o.just, .mko.just, .booklet .ch .ov.just { animation: pen-mark .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes pen-mark { 0% { transform: scale(1.28); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .o.just, .mko.just, .booklet .ch .ov.just { animation: none; } }
.booklet .ch .why, .booklet .ch .vd { font-family: var(--sans); letter-spacing: .02em; }
.booklet .chs.done .ch[aria-checked="true"] .tx { font-weight: 400; }
.booklet .feedback, .booklet .point p { font-family: var(--sans); }
/* スマホの解答欄（その問題の行だけ） */
.mstrip { display: flex; align-items: center; gap: 6px; margin-top: 16px; padding: 6px 10px; width: fit-content; max-width: 100%; border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); border-radius: 3px; flex-wrap: wrap; }
.mstrip .lb { font: 500 11px/1 var(--sans); color: var(--ink); letter-spacing: .12em; margin-right: 2px; }
.mstrip .n { font: 700 14px/1 var(--book); color: var(--ink); min-width: 2em; text-align: right; margin-right: 4px; }
.mko, .msr .o { display: inline-grid; place-items: center; padding: 0; background: none; border: 1.2px solid color-mix(in srgb, var(--ink) 75%, transparent); border-radius: 50%; color: var(--ink); font: 500 12px/1 var(--sans); text-transform: lowercase; transition: background-color .12s, border-color .12s, color .12s; }
.mko { position: relative; width: 26px; height: 34px; }
.mko::after { content: ""; position: absolute; inset: -5px -3px; }
.mko[aria-pressed="true"], .msr .o[aria-pressed="true"] { background: var(--pencil); border-color: var(--pencil); color: transparent; }
.mko[disabled], .msr .o[disabled] { cursor: default; }
@media (min-width: 960px) { .mstrip { display: none; } }
/* 右上の △・見直す（問題文の1行目の右に浮かせて、文はまわりを回り込む）。PC はキーの字を添える */
.qtop { float: right; display: flex; gap: 6px; margin: 0 0 0 14px; font: 400 13px/1 var(--sans); letter-spacing: 0; }
@media (max-width: 639px) { .qtop { gap: 5px; margin-left: 8px; } .qtop .flagbtn, .qtop .qtri { height: 30px; padding: 0 9px; } .qtop .kb { display: none; } }
.context > .qtop { margin-top: -2px; }
.qtri { position: relative; display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg); font: 700 14px/1 var(--sans); color: var(--fg-3); }
.qtri::after { content: ""; position: absolute; inset: -5px 0; }
.qtri[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, var(--bg)); }
/* 正解したとき：「△ なんとなく正解」に変えるボタン（記録したあとは字だけ残す） */
.yours .tribtn { position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 10px; margin-left: auto; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--bg); font: 500 13px/1 var(--sans); color: var(--fg-2); }
.yours .tribtn::after { content: ""; position: absolute; inset: -7px 0; }
.yours .tribtn[aria-pressed="true"] { border-style: solid; border-color: var(--ink); color: var(--ink); font-weight: 700; }
.yours .tribtn.fixed { border: 0; padding: 0; height: auto; font-weight: 700; color: var(--ink); }
.yours .tribtn.fixed::after { content: none; }
/* 解いた回数と直前3回（日付と ○・△・×） */
.xhist { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 10px; font: 400 12.5px/1.6 var(--sans); color: var(--fg-3); }
.xhist .h { display: inline-flex; align-items: baseline; gap: 4px; }
.xhist .h b { font-size: 14px; }
.xhist .ok { color: var(--accent); }
.xhist .tri { color: var(--ink); }
.xhist .ng { color: var(--red); }
/* 過去問の出典（公共データ利用規約の表示）：1行だけ小さく */
.pdl-note { margin-top: 18px; font-size: 11px; line-height: 1.6; color: var(--fg-3); text-align: center; }
.kb { display: none; margin-left: 6px; padding: 2px 4px; min-width: 1.4em; border: 1px solid var(--line-2); border-radius: 3px; font: 500 10px/1 var(--sans); color: var(--fg-3); background: var(--bg); letter-spacing: 0; }
.kb.on-accent { border-color: color-mix(in srgb, var(--on-accent) 45%, transparent); color: var(--on-accent); background: transparent; }
@media (hover: hover) and (pointer: fine) { .kb { display: inline-block; } }
.qtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.booklet .qtags + .src-note { margin-top: 8px; }
.booklet .calc .lbl { font-family: var(--sans); color: var(--ink); }
.booklet .calc input { border-color: color-mix(in srgb, var(--ink) 55%, transparent); background: var(--bg); }
/* 解答用紙（右・スマホは「解答用紙」を開く）：番号のマス。マークした問題は鉛筆色、答え合わせのあとは正解＝深緑・不正解＝赤、見直しは金の点、いまのページは枠 */
.msheet { margin-top: 2px; }
.nmap { list-style: none; margin: 0; padding: 10px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px 4px; border-top: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); }
.nmap li { position: relative; min-width: 0; }
.nmap button { display: grid; place-items: center; width: 100%; height: 28px; padding: 0; border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 3px; background: var(--bg); color: var(--ink); font: 500 11.5px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; }
.nmap button:hover { border-color: var(--ink); }
.nmap .a button { background: var(--pencil); border-color: var(--pencil); color: var(--bg); }
.nmap .ok button { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.nmap .ng button { background: var(--red-soft); border-color: var(--red); color: var(--red); font-weight: 700; }
.nmap .cur button { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--fg); font-weight: 700; }
.nmap .f::after { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1.5px var(--bg); pointer-events: none; }
@media (max-width: 959px) { .nmap { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 8px 6px; } .nmap button { height: 40px; font-size: 13px; } }
@media (min-width: 960px) {
  .navi { padding: 0 12px; }
  .navi summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; min-height: 0; padding-block: 12px 10px; }
  .navi summary span { grid-column: 1 / -1; grid-row: 2; }
  .navi .nleg { gap: 4px 10px; }
}
.nmap .t::before { content: "△"; position: absolute; left: -4px; top: -5px; z-index: 1; padding: 0 1px; border-radius: 2px; background: var(--bg); color: var(--ink); font: 700 10px/1.1 var(--sans); pointer-events: none; }
@media (max-width: 959px) { .nmap .t::before { font-size: 11px; left: -5px; top: -6px; } }
.nleg i.t { width: auto; height: auto; border: 0; border-radius: 0; font: 700 10px/1 var(--sans); font-style: normal; color: var(--ink); vertical-align: 0; }
/* なんとなく・勘：冊子の番号の下に△（鉛筆で書き込んだように） */
.booklet section.q.tri > .qno::after { content: "△"; display: block; margin-top: -2px; font: 700 13px/1 var(--sans); color: var(--ink); }
.nleg i.c { width: 11px; height: 11px; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent); }
.nleg i.c.a { background: var(--pencil); border-color: var(--pencil); }
.nleg i.c.ok { background: var(--accent); border-color: var(--accent); }
.nleg i.c.ng { background: var(--red-soft); border-color: var(--red); }
/* 回・ブロック別：参考書のテーマへ */
.rt-link { margin-top: 14px; font-size: 14px; }
.rt-link a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-bottom: 1px; }
.rt-link a:hover { border-bottom-color: var(--accent); }
.msrows { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); }
@media (min-width: 560px) { .msrows.two { columns: 2; column-gap: 10px; } }
.msr { display: flex; align-items: center; gap: 3px; padding: 2px 4px 2px 0; border-radius: 3px; break-inside: avoid; }
.msr .n { position: relative; flex: none; width: 26px; height: 30px; padding: 0 4px 0 0; border: 0; background: none; text-align: right; font: 500 11px/30px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; cursor: pointer; }
.msr .os, .msr .dg { display: flex; gap: 3px; }
.msr .o { width: 18px; height: 25px; font-size: 9.5px; }
.msr .dg i { display: grid; place-items: center; width: 18px; height: 24px; border: 1px solid color-mix(in srgb, var(--ink) 60%, transparent); border-radius: 2px; font: 700 12px var(--book); font-style: normal; color: var(--fg); }
.msr.cur { background: var(--ink-soft); }
.msr.cur .n { font-weight: 700; }
.msr.ok .n { color: var(--accent); font-weight: 700; }
.msr.ng .n { color: var(--red); font-weight: 700; }
/* 答え合わせのあと：塗ったマークは正解なら深緑・不正解なら赤。正解の楕円は深緑の枠 */
.msr.ok .o[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.msr.ng .o[aria-pressed="true"] { background: var(--red); border-color: var(--red); }
.msr .o.ans:not([aria-pressed="true"]) { border: 2px solid var(--accent); color: var(--accent); font-weight: 700; }
.msr.f .n::before { content: ""; position: absolute; left: 1px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
@media (max-width: 959px) { .msr .o { width: 22px; height: 30px; font-size: 11px; } .msr .n { height: 36px; line-height: 36px; width: 30px; } .msr .dg i { width: 22px; height: 30px; } }
.nleg i.pen { width: 8px; height: 11px; background: var(--pencil); border-color: var(--pencil); }
.nleg b { font-weight: 700; margin-right: 4px; }
.nleg b.ok { color: var(--accent); }
.nleg b.ng { color: var(--red); }
.keys { display: none; line-height: 1.8; }
@media (hover: hover) and (pointer: fine) { .keys { display: block; } }
.linkbtn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.keylist { display: grid; gap: 8px; margin: 0 0 14px; }
.keylist div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; align-items: baseline; }
.keylist dt { margin: 0; }
.keylist dd { margin: 0; font-size: 14px; }
.keylist kbd { display: inline-block; padding: 3px 7px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; font: 500 12px/1.2 var(--sans); background: var(--bg); color: var(--fg); }

/* ---------- 成績表（結果のいちばん上）：本の表紙と同じ深緑の方眼に、白い「総合判定」 ---------- */
.report {
  position: relative; border-radius: var(--r-lg); overflow: hidden; color: var(--band-fg); padding: 22px 18px 18px;
  background-color: var(--band-bg);
  background-image: linear-gradient(color-mix(in srgb, var(--band-fg) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--band-fg) 7%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
}
@media (min-width: 640px) { .report { padding: 30px 34px 24px; } }
.rp-h h1 { font: 700 21px/1.45 var(--sans); color: var(--band-fg); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.rp-h .k { font: 500 11px/1 var(--sans); letter-spacing: .24em; padding: 5px 6px 5px 9px; border: 1px solid color-mix(in srgb, var(--band-fg) 45%, transparent); border-radius: 2px; }
.rp-h p { margin-top: 6px; font-size: 13px; color: var(--band-fg-2); }
.rp-main { display: grid; gap: 18px; margin-top: 22px; align-items: center; }
@media (min-width: 640px) { .rp-main { grid-template-columns: 172px minmax(0, 1fr); gap: 30px; } }
.rp-grade { display: grid; justify-items: center; gap: 4px; padding: 14px 12px 16px; border-radius: 12px; background: var(--bg); color: var(--fg); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45); max-width: 220px; width: 100%; justify-self: center; }
.rp-grade .k { font: 500 11px/1 var(--sans); letter-spacing: .24em; color: var(--fg-3); }
.rp-grade b { font: 700 92px/1 var(--sans); color: var(--accent); letter-spacing: 0; animation: gm-stamp .6s cubic-bezier(.2, .8, .2, 1) .1s both; }
.rp-grade.g-C b, .rp-grade.g-D b, .rp-grade.g-E b { color: var(--fg); }
.rp-grade .l { font-size: 13px; font-weight: 500; color: var(--fg-2); }
.rp-grade.g-sess b { font: 700 64px/1.15 var(--num); color: var(--fg); animation: none; display: flex; align-items: baseline; }
.rp-grade.g-sess b small { font-size: 22px; margin-left: 2px; color: var(--fg-2); }
.rp-grade .dl { margin-top: 4px; background: var(--paper); color: var(--fg-2); }
.rp-grade .dl.up { color: var(--accent); }
.rp-pass.lite .pp b { font-size: 44px; }
.rp-careless { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--fg-2); padding: 8px 12px; border-left: 3px solid var(--marker); background: var(--paper); }
@keyframes gm-stamp { 0% { transform: scale(1.4) rotate(-8deg); opacity: 0; } 65% { transform: scale(.96) rotate(0); opacity: 1; } 100% { transform: scale(1); } }
.rp-pass { min-width: 0; }
.rp-pass .k { font-size: 12px; letter-spacing: .16em; color: var(--band-fg-2); }
.report .pp { margin-top: 4px; }
.report .pp b { color: var(--band-fg); font-size: 68px; }
.report .pp span { color: var(--band-fg-2); }
.report .pp span .num { color: var(--band-fg); }
.report .trk { margin-top: 14px; height: 10px; background: color-mix(in srgb, var(--band-fg) 16%, transparent); }
.report .trk .bd { background: color-mix(in srgb, var(--band-fg) 32%, transparent); box-shadow: inset 2px 0 0 var(--band-fg), inset -2px 0 0 var(--band-fg); }
.report .trk .pt { background: var(--gold); width: 3px; }
.rp-scale { position: relative; height: 18px; margin-top: 6px; }
.rp-scale span { position: absolute; transform: translateX(-50%); margin-left: 10%; font: 700 11px/18px var(--sans); color: var(--band-fg-2); opacity: .8; }
.rp-scale span.on { color: var(--gold); opacity: 1; }
.rp-say { margin-top: 10px; font-size: 14px; line-height: 1.75; color: var(--band-fg); }
.dl { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font: 500 12px/1 var(--sans); background: color-mix(in srgb, var(--band-fg) 12%, transparent); color: var(--band-fg-2); white-space: nowrap; }
.dl.up { color: var(--gold); }
.rp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--band-line); }
@media (min-width: 820px) { .rp-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rp-stats > div { min-width: 0; }
.rp-stats dt { font-size: 12px; letter-spacing: .12em; color: var(--band-fg-2); }
.rp-stats dd { margin: 2px 0 0; display: flex; align-items: baseline; gap: 2px; }
.rp-stats dd b { font: 700 32px/1.15 var(--sans); color: var(--band-fg); }
.rp-stats dd small { font-size: 14px; color: var(--band-fg-2); }
.rp-stats p { font-size: 11.5px; line-height: 1.6; color: var(--band-fg-2); margin-top: 2px; }
.rp-stats .sm { position: relative; display: block; height: 4px; margin-top: 8px; border-radius: 2px; background: color-mix(in srgb, var(--band-fg) 18%, transparent); }
.rp-stats .sm i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--band-fg); }
.rp-stats .sm i.ng { background: var(--gold); }
.rp-stats .sm u { position: absolute; top: -3px; width: 2px; height: 10px; background: var(--gold); transform: translateX(-1px); }
.report .ng-text { color: var(--gold); }
.rp-foot { display: grid; gap: 6px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--band-line); }
.rp-score { font-size: 14px; color: var(--band-fg); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rp-score b { font-size: 16px; }
.rp-next { font-size: 15px; color: var(--band-fg); }
.rp-next b { color: var(--gold); font-size: 17px; }
.rp-next span { font-size: 12px; color: var(--band-fg-2); margin-left: 4px; }
.rp-from { font-size: 12px; line-height: 1.7; color: var(--band-fg-2); }
.rp-from a { color: var(--band-fg); text-underline-offset: 3px; }
.report + .next { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .rp-grade b { animation: none; } }
.pp b .cnt { font: inherit; color: inherit; }

/* ---------- 計算問題の解き方（計算用紙の罫線に、手順の番号） ---------- */
.point.steps { background: var(--paper); border: 1px solid var(--line); }
.csteps { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: cs; font: 500 16px/1.7 var(--book); font-variant-numeric: tabular-nums; }
.csteps li { position: relative; padding: 6px 0 6px 2.2em; border-bottom: 1px dashed var(--line-2); }
.csteps li:not(.eq):not(.ans) { counter-increment: cs; }
.csteps li:not(.eq):not(.ans)::before { content: counter(cs); position: absolute; left: 0; top: 9px; width: 1.6em; height: 1.6em; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); font: 700 11px/1.5em var(--sans); text-align: center; }
.csteps li.eq { padding-left: 3.4em; color: var(--fg-2); }
.csteps li.ans { border-bottom: 0; padding-top: 10px; font-weight: 700; color: var(--accent); }
.point .formula { margin-top: 12px; font-size: 14px; line-height: 1.7; font-weight: 400; color: var(--fg-2); }
.point .formula .k { font-weight: 700; color: var(--accent); margin-right: 8px; }
.point .calc-more { margin-top: 14px; }
.calc-types .m { overflow-wrap: anywhere; }

/* ---------- 禁忌肢の候補（解答後に赤で止める・禁忌肢トレーニング） ---------- */
.kinki-stop, .kinki-ok { margin: 14px 0 18px; padding: 14px 16px 12px; border-radius: var(--r); border: 1px solid; }
.kinki-stop { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 45%, transparent); border-left: 4px solid var(--red); }
.kinki-ok { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); border-left: 4px solid var(--accent); }
.kk-h { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; letter-spacing: .02em; }
.kinki-stop .kk-h { color: var(--red); }
.kinki-ok .kk-h { color: var(--accent); }
.kk-mark { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 4px; font: 700 15px/1 var(--sans); border: 2px solid currentColor; transform: rotate(-4deg); }
.kk-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.kk-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.kk-list .ov { width: 18px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--sans); border: 1.5px solid currentColor; }
.kinki-stop .kk-list .ov { color: var(--red); }
.kinki-ok .kk-list .ov { color: var(--fg-3); }
.kk-tx { line-height: 1.75; min-width: 0; }
.kk-tx b { font-weight: 700; margin-right: .6em; }
.kk-n { margin: 10px 0 0; font-size: 12px; color: var(--fg-3); line-height: 1.7; }
.kk-tag { display: inline-block; vertical-align: 2px; margin-left: 8px; padding: 0 6px; border: 1px solid var(--red); border-radius: 3px; color: var(--red); font-size: 11px; line-height: 18px; font-weight: 500; }
.chs.done .ch.is-kk:not(.is-ng) .ov { border-color: var(--red); border-style: dashed; }
.kk-rep .kk-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; margin: 6px 0 4px; }
.kk-rep .kk-sum p { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.kk-rep .kk-sum .num { font: 700 34px/1 var(--sans); color: var(--red); }
.kk-rep .kk-sum p + p .num { color: var(--accent); }
.kk-rep.clean .kk-sum .num { color: var(--accent); }
.kk-rep .kk-sum .kk-say { flex-basis: 100%; color: var(--fg-2); font-size: 14px; }

/* キーボードの印（選択肢の 1〜5、自信・見直す・解答するのキー）：マイページの「演習の表示」で消せる。キー操作はそのまま使える */
.gm-nokeys .ch .ck, .gm-nokeys kbd.kb { display: none !important; }

/* 問題文・解説のコピーを防ぐ（入力欄と、特商法などの文面は選べる） */
.gm-nocopy body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.gm-nocopy input, .gm-nocopy textarea, .gm-nocopy [contenteditable], .gm-nocopy .allow-copy { -webkit-user-select: text; user-select: text; }
.gm-nocopy img { -webkit-user-drag: none; }
.tgl { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.tgl input { width: 18px; height: 18px; accent-color: var(--accent); }