/* スマホの縦持ち・片手で読む前提。幅は最大520pxで、PCでも中央に縦長で出す */
:root {
  --ink: #222;
  --paper: #fffdf8;
  --bg: #efeae0;
  --muted: #6b6b6b;
  --accent: #2f4f8f;
  --mark: #ffe066;
  --radius: 14px;
  --tabs-h: 60px;
  --fs: 1; /* 文字の大きさ（その他 → 文字の大きさ で 0.9〜1.3） */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  font-weight: 500;
  line-height: 1.6;
  padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom) + 16px);
}
#app { max-width: 520px; margin: 0 auto; min-height: 100vh; background: var(--paper); }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
h1, h2 { line-height: 1.3; }

/* ---------- 共通部品 ---------- */
.card {
  display: block;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  margin: 14px 16px;
  padding: 14px 16px;
  box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none;
  color: inherit;
}
.card h2 { font-size: 16px; margin: 0 0 10px; }
.btn {
  display: block;
  text-align: center;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 2px 3px 0 var(--ink);
  cursor: pointer;
  width: 100%;
}
.btn.big { font-size: 17px; padding: 14px 18px; }
.btn.ghost { background: #fff; color: var(--ink); }
.btn:active { transform: translate(2px, 3px); box-shadow: none; }
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--c);
  border-radius: 6px;
  padding: 1px 7px;
  margin-right: 4px;
  vertical-align: 1px;
}
.lbl { font-size: 12px; color: var(--muted); font-weight: 800; }
.num { font-size: 30px; font-weight: 800; line-height: 1.1; }
.num small { font-size: 14px; }
.see {
  display: block;
  margin: 10px 0 0;
  padding: 10px 12px;
  background: #f1f5ff;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
}
.hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; }

/* 用語（黄色いマーカー）。button にしているのは、スマホでタップの対象として確実に拾われるため */
.term {
  background: linear-gradient(transparent 55%, var(--mark) 55%);
  border: 0;
  border-bottom: 1.5px dashed #b38f00;
  padding: 0 1px;
  margin: 0;
  font-weight: 800;
  cursor: pointer;
  line-height: inherit;
  font-size: inherit;
}
.term.big { font-size: 20px; }

/* ---------- 上のバー・下のタブ ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 12px 0 4px;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.back {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 34px;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
}
.tb-t { flex: 1; font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-n { font-weight: 800; font-size: 14px; }
.prog { position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; background: transparent; }
.prog i { display: block; height: 100%; width: 0; background: #ff9a3c; }

.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  background: #fff;
  border-top: 2px solid var(--ink);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs a {
  position: relative;
  flex: 1;
  max-width: 173px;
  height: var(--tabs-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  text-decoration: none;
}
.tabs a span { font-size: 22px; line-height: 1.1; }
.tabs a.on { color: var(--accent); }
.tabs i {
  position: absolute;
  top: 6px;
  left: calc(50% + 8px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  line-height: 18px;
  text-align: center;
}

/* ---------- ホーム ---------- */
.hero {
  display: flex;
  align-items: flex-end;
  background: linear-gradient(160deg, #2f4f8f, #4a74c9);
  color: #fff;
  padding: 18px 0 0 18px;
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
}
.hero-txt { flex: 1; padding-bottom: 18px; }
.hero h1 { font-size: 28px; margin: 0 0 6px; font-weight: 800; letter-spacing: 0.02em; }
.hero p { margin: 0; font-size: 13px; opacity: 0.9; }
.hero-ch { width: 140px; height: 150px; flex: none; }
.hero-ch .ch { width: 100%; height: 100%; display: block; }
.exam { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.exam-l { font-weight: 800; }
.exam .big { font-size: 30px; color: #e5484d; }
.exam-in { font-size: 13px; color: var(--muted); font-weight: 800; }
.exam-in input { font: inherit; padding: 6px 8px; border: 2px solid #ccc; border-radius: 8px; color: var(--ink); }
.today-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.today-row .btn { width: auto; flex: none; }
.next { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #ccc; font-weight: 800; text-decoration: none; font-size: 14px; }
.next.done { color: #2f9a5b; }
.bar-row { display: grid; grid-template-columns: 1fr 96px 40px; align-items: center; gap: 8px; margin: 8px 0; }
.bar-l { font-size: 14px; font-weight: 800; line-height: 1.25; }
.bar-l small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 500; }
.bar { height: 12px; background: #eee; border-radius: 6px; overflow: hidden; border: 1.5px solid var(--ink); }
.bar i { display: block; height: 100%; }
.bar-n { font-weight: 800; text-align: right; font-size: 14px; }
.tod p { margin: 6px 0 0; font-size: 14px; }
.list-h { font-size: 17px; margin: 22px 16px 4px; }
.eps { padding: 0 16px; }
.ep-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 10px 0;
  text-decoration: none;
  color: inherit;
  box-shadow: 3px 3px 0 var(--ink);
}
.ep-no { flex: none; width: 52px; height: 52px; border-radius: 10px; color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; border: 2px solid var(--ink); }
.ep-body { flex: 1; min-width: 0; }
.ep-t { font-weight: 800; font-size: 15.5px; }
.ep-s { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.ep-st { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11px; font-weight: 800; }
.ep-st .ok { color: #2f9a5b; }
.ep-st .sc { background: #fff1b8; border-radius: 6px; padding: 0 6px; }
.foot { font-size: 11px; color: var(--muted); margin: 20px 16px 8px; }

/* ---------- 漫画 ---------- */
.ep-head { padding: 22px 18px 18px; border-bottom: 3px solid var(--c); text-align: center; }
.ep-head-no { font-size: 13px; font-weight: 800; color: var(--c); }
.ep-head h1 { font-size: 24px; margin: 2px 0 8px; }
.ep-head .tip { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.manga { padding: 4px 12px 8px; }
.panel {
  position: relative;
  margin: 14px 0;
  border: 3px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  scroll-margin-top: 64px;
}
.panel.flash { animation: flash 1.6s ease-out 1; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 6px #ff9a3c; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* 吹き出しを上、キャラを下に置く。重ねないのは、セリフの長さが変わってもキャラの顔が隠れないようにするため */
.scene { display: flex; flex-direction: column; min-height: 250px; }
.scene .bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.narr {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  background: var(--ink);
  color: #fff;
  font-size: calc(13px * var(--fs));
  padding: 4px 12px;
  margin: 0 0 2px;
  max-width: 90%;
}
.bubs { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; padding: 12px 12px 14px; }
.cast { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; height: 150px; margin-top: auto; }
.actor { grid-row: 1; display: flex; justify-content: center; height: 150px; }
.actor.at-l { grid-column: 1; }
.actor.at-c { grid-column: 2; }
.actor.at-r { grid-column: 3; }
/* 1人だけのコマは少し大きく。上に食い出させると吹き出しと頭が約20px重なったので、枠ごと高くする */
.cast:has(.solo) { height: 170px; }
.actor.solo { grid-column: 1 / -1; height: 170px; }
.actor .ch { height: 100%; width: auto; max-width: 100%; display: block; }
.bg-night .narr { background: #fff; color: var(--ink); }

.bub {
  position: relative;
  max-width: 84%;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  padding: 9px 14px;
  font-size: calc(16px * var(--fs));
  line-height: 1.6;
}
.bub p { margin: 0; }
.bub.at-l { align-self: flex-start; }
.bub.at-r { align-self: flex-end; }
.bub.at-c, .bub.at-n { align-self: center; }
/* しっぽ：話者の立ち位置を向く */
.bub::before, .bub::after { content: ''; position: absolute; border-style: solid; }
.bub::before { bottom: -15px; border-width: 15px 9px 0; border-color: var(--ink) transparent transparent; }
.bub::after { bottom: -10px; border-width: 11px 6.5px 0; border-color: #fff transparent transparent; }
.bub.at-l::before { left: 26px; } .bub.at-l::after { left: 28.5px; }
.bub.at-r::before { right: 26px; } .bub.at-r::after { right: 28.5px; }
.bub.at-c::before { left: calc(50% - 9px); } .bub.at-c::after { left: calc(50% - 6.5px); }
.bub.at-n::before, .bub.at-n::after { display: none; }
/* 同じ人の吹き出しが続くとき、上の吹き出しのしっぽは消す（どちらが話しているか迷わないように） */
.bub.at-l:has(+ .bub.at-l)::before, .bub.at-l:has(+ .bub.at-l)::after,
.bub.at-r:has(+ .bub.at-r)::before, .bub.at-r:has(+ .bub.at-r)::after,
.bub.at-c:has(+ .bub.at-c)::before, .bub.at-c:has(+ .bub.at-c)::after { display: none; }

.bub.shout {
  font-size: calc(21px * var(--fs));
  font-weight: 800;
  border-width: 3.5px;
  border-radius: 8px;
  transform: rotate(-2deg);
  background: #fff;
  letter-spacing: 0.04em;
}
.bub.think { border-style: dashed; border-radius: 28px; background: #fbfbff; }
.bub.think::before, .bub.think::after {
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fff;
}
.bub.think::before { width: 12px; height: 12px; bottom: -16px; }
.bub.think::after { width: 7px; height: 7px; bottom: -26px; }
.bub.think.at-l::after { left: 20px; } .bub.think.at-r::after { right: 20px; }
.bub.think.at-c::after { left: calc(50% - 10px); }

/* 図解（ホワイトボード） */
.board { background: #fff; padding: 0 0 12px; }
.board-h { background: #333; color: #fff; font-weight: 800; padding: 6px 12px; font-size: 14px; }
.dg { display: block; width: 100%; height: auto; padding: 10px 10px 0; font-family: inherit; }
.cap { margin: 8px 14px 0; font-size: calc(14px * var(--fs)); font-weight: 800; text-align: center; }

/* 付箋 */
.note { padding: 14px 16px 12px; border-radius: 4px; transform: rotate(-0.6deg); }
.note.memo { background: #e9f7ff; }
.note.exam { background: #fff4b8; transform: rotate(0.5deg); }
.note-h { font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.note.exam .note-h { color: #c0392b; }
.note ul { margin: 0; padding-left: 1.2em; }
.note li { margin: 5px 0; font-size: calc(15px * var(--fs)); }

.ep-end { text-align: center; padding: 10px 24px 24px; }
.ep-end .btn { margin: 10px 0; }
.ep-end h2 { margin: 6px 0; }
.ep-end p { font-size: 14px; color: var(--muted); }
.end-ch { width: 110px; height: 120px; margin: 0 auto; }
.end-ch .ch { width: 100%; height: 100%; }

/* ---------- クイズ ---------- */
.quiz { padding: 16px; }
.q-meta { font-size: 12px; color: var(--muted); font-weight: 800; }
.q-text { font-size: calc(17px * var(--fs)); font-weight: 800; margin: 8px 0 16px; line-height: 1.7; white-space: pre-line; }
/* 擬似言語の問題は複数行で出す（本番と同じ見え方にするため）。問題文の中で 
 を使う */
.choices { display: flex; flex-direction: column; gap: 10px; }
.choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: calc(15.5px * var(--fs));
  line-height: 1.55;
  cursor: pointer;
  box-shadow: 2px 3px 0 var(--ink);
  min-height: 52px;
}
.choice .lab { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.choice:disabled { cursor: default; box-shadow: none; transform: translate(2px, 3px); color: var(--ink); }
.choice.right { background: #dff6e4; border-color: #1f8a46; }
.choice.right .lab { background: #1f8a46; }
.choice.wrong { background: #ffe1e1; border-color: #c62f2f; }
.choice.wrong .lab { background: #c62f2f; }
.fb { margin-top: 18px; border: 2px solid var(--ink); border-radius: var(--radius); padding: 12px 16px 16px; background: #fff; }
.fb.ok { background: #f2fbf4; }
.fb.ng { background: #fff6f0; }
.fb-row { display: flex; align-items: center; gap: 10px; }
.fb-ch { width: 64px; height: 70px; flex: none; }
.fb-ch .ch { width: 100%; height: 100%; }
.fb-h { font-size: 22px; font-weight: 800; }
.fb.ok .fb-h { color: #1f8a46; }
.fb.ng .fb-h { color: #c62f2f; }
.fb p { font-size: calc(15px * var(--fs)); margin: 8px 0 0; }
.fb .btn { margin-top: 14px; }
.result { padding: 16px; text-align: center; }
.result .card { text-align: left; margin: 16px 0; }
.result .btn { margin: 10px 0; }
.res-ch { width: 130px; height: 140px; margin: 0 auto; }
.res-ch .ch { width: 100%; height: 100%; }
.res-n { font-size: 44px; font-weight: 800; }

/* ---------- 復習 ---------- */
.rev { padding: 4px 0 8px; }
.rev-intro { display: flex; gap: 10px; align-items: center; margin: 12px 16px 4px; }
.rev-ch { width: 80px; height: 88px; flex: none; }
.rev-ch .ch { width: 100%; height: 100%; }
.rev-intro p { margin: 0; font-size: 14px; background: #fff; border: 2px solid var(--ink); border-radius: 14px; padding: 10px 12px; }
.rev-btn { display: flex; gap: 14px; align-items: center; }
.rev-btn .num { min-width: 70px; }
.rev-btn .desc { font-size: 13px; color: var(--muted); }
.rev-btn.off { opacity: 0.55; box-shadow: none; }

/* ---------- 用語集 ---------- */
.words { padding: 12px 16px; }
.search { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 12px; margin-bottom: 10px; }
.word { background: #fff; border: 2px solid var(--ink); border-radius: 12px; margin: 8px 0; padding: 0 14px; }
.word summary { padding: 12px 0; cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.word summary::-webkit-details-marker { display: none; }
.word summary b { font-size: 16px; }
.word summary small { color: var(--muted); font-size: 11px; }
.word p { margin: 0 0 4px; font-size: calc(14.5px * var(--fs)); }
.word .see { margin-bottom: 12px; }
.empty { color: var(--muted); text-align: center; }

/* ---------- 用語のポップアップ ---------- */
#sheet { position: fixed; inset: 0; z-index: 50; }
.sh-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 0.2s; }
.sh-card {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 520px;
  transform: translate(-50%, 100%);
  transition: transform 0.2s ease-out;
  background: #fff;
  border: 3px solid var(--ink);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  padding: 18px 20px calc(24px + env(safe-area-inset-bottom));
  max-height: 70vh;
  overflow: auto;
}
#sheet.open .sh-bg { opacity: 1; }
#sheet.open .sh-card { transform: translate(-50%, 0); }
.sh-x { position: absolute; right: 8px; top: 6px; width: 44px; height: 44px; border: 0; background: none; font-size: 28px; cursor: pointer; }
.sh-t { font-size: 20px; padding-right: 40px; }
.sh-y { font-size: 12px; color: var(--muted); }
.sh-body p { font-size: calc(16px * var(--fs)); margin: 10px 0 0; }

/* ---------- お話一覧（分野ごとに開閉） ---------- */
.list-h small { font-size: 12px; color: var(--muted); }
.field { margin: 10px 16px; border: 2px solid var(--ink); border-radius: var(--radius); background: #fff; box-shadow: 3px 3px 0 var(--ink); }
.field > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 8px 14px;
  cursor: pointer;
  border-left: 8px solid var(--c);
  border-radius: 12px;
}
.field > summary::-webkit-details-marker { display: none; }
.field > summary::after { content: '▼'; font-size: 12px; margin-left: 8px; transition: transform 0.15s; }
.field[open] > summary::after { transform: rotate(180deg); }
.f-name { font-weight: 800; font-size: 16px; flex: 1; }
.f-cnt { font-size: 12px; font-weight: 800; color: var(--muted); }
.field .eps { padding: 0 10px 4px; }
.chap { margin: 10px 12px 0; font-size: 12px; font-weight: 800; color: var(--c); border-bottom: 1.5px solid var(--c); padding-bottom: 2px; }
.field .ep-card { box-shadow: 2px 2px 0 var(--ink); margin: 8px 0; }

/* ---------- 楽しく続けるための仕掛け ---------- */
.rank {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 14px;
}
.rank small { font-size: 11px; opacity: 0.9; }
.streak { margin-top: 8px; font-size: 13px; font-weight: 800; color: #ffe08a; }
.stampbook h2 small { font-size: 12px; color: var(--muted); }
.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 6px; }
.stamp {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px dashed #ccc;
  font-size: 12px;
  font-weight: 800;
  color: #bbb;
  text-decoration: none;
}
.stamp.half { border: 2px solid var(--c); color: var(--c); }
.stamp.got { border: 2px solid var(--c); background: var(--c); color: #fff; font-size: 18px; transform: rotate(-8deg); box-shadow: 1px 2px 0 var(--ink); }
.combo {
  display: inline-block;
  margin-left: 8px;
  font-size: 14px;
  color: #fff;
  background: #ff9a3c;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0 10px;
  transform: rotate(-4deg);
  animation: pop 0.35s ease-out;
}
@keyframes pop { 0% { transform: scale(0.3) rotate(-4deg); } 70% { transform: scale(1.2) rotate(-4deg); } 100% { transform: scale(1) rotate(-4deg); } }
.rankup, .stamp-get {
  margin: 10px auto;
  display: inline-block;
  font-weight: 800;
  font-size: 18px;
  padding: 8px 18px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: #fff4b8;
  box-shadow: 3px 3px 0 var(--ink);
  animation: pop 0.45s ease-out;
}
.stamp-get { background: #ffe0ec; }
.result .rankup, .result .stamp-get { display: block; max-width: 280px; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i {
  position: absolute;
  top: -20px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  animation-name: fall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } .combo, .rankup, .stamp-get { animation: none; } }

/* ---------- その他・報告・ホーム画面への追加 ---------- */
.tabs a { max-width: 130px; }
.more { padding-bottom: 8px; }
.more p, .about li { font-size: 14px; }
.about h3 { font-size: 14px; margin: 14px 0 4px; }
.about ul { padding-left: 1.2em; margin: 0; }
.about li { margin: 4px 0; }
.build { color: var(--muted); font-size: 12px !important; }
.row2 { display: flex; gap: 8px; margin-top: 8px; }
.row2 .btn { flex: 1; font-size: 14px; padding: 10px 8px; }
.imp { margin-top: 12px; }
.imp summary { cursor: pointer; font-weight: 800; font-size: 14px; padding: 6px 0; }
.imp textarea, .rep textarea, .rep input, .rep select {
  width: 100%;
  font: inherit;
  font-size: 16px; /* 16px未満だとiPhoneが入力時に勝手に拡大する */
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  margin-top: 4px;
  background: #fff;
  color: var(--ink);
}
.seg { display: flex; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; }
.seg button { flex: 1; min-height: 44px; border: 0; border-left: 2px solid var(--ink); background: #fff; font-weight: 800; cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button.on { background: var(--accent); color: #fff; }
.fs-sample { margin-top: 12px; max-width: none; }
.howto { padding-left: 1.4em; font-size: 14px; }
.howto li { margin: 4px 0; }
.warn { background: #fff4b8; border-radius: 8px; padding: 8px 10px; }
.ok-line { color: #1f8a46; font-weight: 800; }
.install { position: relative; background: #eef4ff; }
.install p { font-size: 13px; margin: 6px 0 10px; }
.install .btn { width: auto; display: inline-block; padding: 8px 18px; font-size: 14px; }
.install .x { position: absolute; right: 4px; top: 2px; width: 44px; height: 44px; border: 0; background: none; font-size: 22px; cursor: pointer; }
.foot a { color: var(--accent); }
.rep-link { display: block; margin: 14px auto 0; background: none; border: 0; color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer; min-height: 44px; }
.rep label { display: block; font-weight: 800; font-size: 14px; margin: 12px 0 0; }
.rep-where { font-size: 13px; color: var(--muted); margin-top: 6px; }
.rep-opt { margin-top: 12px; border: 1.5px dashed #bbb; border-radius: 10px; padding: 4px 12px 10px; }
.rep-opt summary { cursor: pointer; font-weight: 800; font-size: 14px; padding: 8px 0; }
.rep-note { font-size: 12px !important; color: var(--muted); margin: 8px 0 0 !important; }
.rep .btn { margin-top: 14px; }
.rep-msg { margin-top: 10px; font-size: 14px; font-weight: 800; }
.rep-done { font-size: 16px !important; font-weight: 800; text-align: center; padding: 20px 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- 引き継ぎ番号 ---------- */
.more h3.step { font-size: 14px; margin: 16px 0 6px; }
.codebox { margin-top: 10px; text-align: center; background: #fff4b8; border: 2px solid var(--ink); border-radius: 12px; padding: 10px; }
.codebox .code { font-size: 36px; font-weight: 800; letter-spacing: 0.12em; font-family: ui-monospace, 'Consolas', monospace; }
.codebox p { margin: 4px 0 0; font-size: 13px; }
.recv input { flex: 1.3; font: inherit; font-size: 20px; letter-spacing: 0.1em; text-align: center; padding: 8px; border: 2px solid var(--ink); border-radius: 10px; min-width: 0; }
.recv .btn { flex: 1; }

/* ---------- 練習（模擬試験・用語クイズ・計算ドリル） ---------- */
.tabs a { max-width: 104px; }
.tabs a span { font-size: 20px; }
.small { font-size: 13px; color: var(--muted); }
.practice-link { display: flex; align-items: center; gap: 12px; background: #fff7e6; }
.practice-link .pl-ic { font-size: 30px; }
.practice-link b { display: block; font-size: 16px; }
.practice-link small { display: block; font-size: 12px; color: var(--muted); }
.practice-link .pl-go { margin-left: auto; font-size: 28px; color: var(--muted); }
.prac h3 { font-size: 14px; margin: 16px 0 6px; }
.mock-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.mode { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; text-decoration: none; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); text-align: center; padding: 6px 4px; }
.mode b { font-size: 14px; }
.mode small { font-size: 11px; color: var(--muted); }
.hist { width: 100%; border-collapse: collapse; font-size: 13px; }
.hist th, .hist td { border-bottom: 1px solid #eee; padding: 5px 4px; text-align: left; }
.hist .pass { color: #1f8a46; font-weight: 800; }
.hist .fail { color: #c0601a; font-weight: 800; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.row3 .btn, .row2 .btn { font-size: 14px; padding: 10px 6px; }
.f-btn { border-color: var(--c); color: var(--c); }
.drills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drill { display: flex; flex-direction: column; gap: 3px; border: 2px solid var(--ink); border-radius: 12px; padding: 8px 10px; text-decoration: none; color: var(--ink); background: #fff; min-height: 64px; box-shadow: 2px 2px 0 var(--ink); }
.drill b { font-size: 13.5px; line-height: 1.3; }
.drill small { font-size: 11px; color: var(--muted); }
.drill .tag { align-self: flex-start; }
/* 模擬試験 */
.mock-bar { gap: 10px; padding-left: 14px; }
.timer { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.timer.hurry { color: #e5484d; }
.mini-btn { width: auto; padding: 6px 12px; font-size: 13px; box-shadow: 1px 2px 0 var(--ink); }
.choice.picked { background: #e3f0ff; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.choice.picked .lab { background: var(--accent); }
.mock-nav { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 16px 0 8px; }
.mock-nav .btn { font-size: 14px; padding: 10px 4px; }
.mock-nav .btn:disabled { opacity: 0.4; }
.flag.on { background: #ffe1c2; }
.grid-wrap summary { cursor: pointer; font-weight: 800; font-size: 14px; padding: 8px 0; }
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.qn { height: 40px; border: 1.5px solid #bbb; border-radius: 8px; background: #fff; font-weight: 800; font-size: 13px; cursor: pointer; }
.qn.done { background: #d9ecff; border-color: var(--accent); }
.qn.flagged { box-shadow: 0 0 0 2px #ff9a3c inset; }
.qn.cur { outline: 3px solid var(--ink); }
/* 模擬試験の結果 */
.judge { display: inline-block; font-weight: 800; font-size: 20px; padding: 4px 18px; border: 2.5px solid var(--ink); border-radius: 999px; margin-top: 4px; }
.judge.pass { background: #dff6e4; color: #1f8a46; }
.judge.fail { background: #fff1d6; color: #c0601a; }
.res-n small { font-size: 16px; }
.scores h2 small { font-size: 11px; color: var(--muted); font-weight: 500; }
.sc-row { display: grid; grid-template-columns: 92px 1fr 46px; align-items: center; gap: 8px; margin: 10px 0; }
.sc-l { font-weight: 800; font-size: 14px; line-height: 1.2; }
.sc-l small { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }
.sc-bar { position: relative; height: 14px; background: #eee; border: 1.5px solid var(--ink); border-radius: 7px; overflow: hidden; }
.sc-bar i { display: block; height: 100%; }
.sc-bar .line { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #e5484d; }
.sc-n { font-weight: 800; text-align: right; }
.sc-n.low { color: #e5484d; }
.wq { border-top: 1px dashed #ddd; padding: 6px 0; }
.wq summary { cursor: pointer; font-size: 13.5px; line-height: 1.5; }
.wq p { font-size: 14px; margin: 6px 0; }