/* フジゼミ 英語学習：スマホで使うことを最優先にした見た目 */
:root {
  --bg: #f7f7f5; --card: #fff; --line: #dcdcd6; --text: #222; --sub: #666;
  --accent: #1f5fa8; --accent-bg: #eaf1fa; --ok: #1a7a3c; --ng: #b3261e;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  font-size: 16px; line-height: 1.7; -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 12px 16px 40px; }
header { border-bottom: 1px solid var(--line); margin-bottom: 14px; padding-bottom: 8px; }
.brand { margin: 0; font-weight: bold; color: var(--accent); }
.nav { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 15px; margin-top: 4px; }
.nav a { color: var(--accent); text-decoration: none; }
.nav .logout { margin-left: auto; }
.nav .logout button { background: none; border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; font: inherit; font-size: 13px; color: var(--sub); cursor: pointer; }
.who { margin: 4px 0 0; font-size: 12px; color: var(--sub); }
h1 { font-size: 20px; margin: 6px 0 14px; }
h2 { font-size: 16px; margin: 0 0 10px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
label { display: block; font-size: 14px; color: var(--sub); margin-bottom: 12px; }
input, select { display: block; width: 100%; margin-top: 4px; padding: 11px 12px; font: inherit; font-size: 16px; color: var(--text); border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.btn { display: block; width: 100%; padding: 13px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font: inherit; font-weight: bold; cursor: pointer; margin-top: 6px; }
.small { font-size: 13px; color: var(--sub); }
.mono { font-family: Consolas, "Courier New", monospace; }
.flash { border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; font-size: 15px; }
.flash.ok { background: #e4f3e8; border: 1px solid #b6dcc1; }
.flash.ng { background: #fbe9e7; border: 1px solid #efc2bc; color: #6e1a13; }
.pwbox { background: #fff; border: 2px solid var(--ok); border-radius: 8px; padding: 10px 12px; margin: 10px 0 6px; }
.pwbox div { display: flex; gap: 12px; align-items: baseline; padding: 2px 0; }
.pwbox span { width: 6.5em; flex: 0 0 auto; font-size: 13px; color: var(--sub); }
.pwbox strong { font-size: 18px; word-break: break-all; }
.links { padding-left: 1.2em; }
.links a { color: var(--accent); }
.list { list-style: none; margin: 0; padding: 0; }
.list li { border-top: 1px solid var(--line); padding: 10px 0; }
.list li:first-child { border-top: 0; }
.row-main { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.tag { font-size: 12px; padding: 1px 8px; border-radius: 99px; background: #eee; color: #555; }
.tag.stop { background: #fbe9e7; color: var(--ng); }
.tag.me { background: var(--accent-bg); color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 6px; }
form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 4px 0 0; }
.small-btn { padding: 6px 12px; border: 1px solid var(--accent); border-radius: 6px; background: #fff; color: var(--accent); font: inherit; font-size: 14px; cursor: pointer; }
.small-select { display: inline-block; width: auto; margin: 0; padding: 5px 8px; font-size: 14px; }
.log .time { font-size: 13px; color: var(--sub); }
a { color: var(--accent); }

/* ---------- フェーズ2：単元の一覧・テスト・結果 ---------- */
.lead { font-size: 17px; margin: 0 0 12px; }
.row-link { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; text-decoration: none; color: var(--text); padding: 4px 0; }
.row-link strong { color: var(--accent); }
.units { list-style: none; margin: 0; padding: 0; }
.unit .btn { margin-top: 10px; text-align: center; text-decoration: none; }
.notice { background: #fff6d8; border: 1px solid #e6d189; border-radius: 8px; padding: 8px 12px; margin-top: 8px; font-size: 14px; }
.tag.pass { background: #e4f3e8; color: var(--ok); }
.tag.fail { background: #fbe9e7; color: var(--ng); }
.tag.doing { background: #fff2cc; color: #8a6d00; }
.bar { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--sub); margin-bottom: 8px; }
/* 進み具合の棒（style 属性は安全のための設定で止められるので、progress 要素の値で表す） */
.prog { display: block; width: 100%; height: 5px; margin: 0 0 14px; border: 0; border-radius: 3px; overflow: hidden; background: #e3e3dd; -webkit-appearance: none; appearance: none; }
.prog::-webkit-progress-bar { background: #e3e3dd; }
.prog::-webkit-progress-value { background: var(--accent); }
.prog::-moz-progress-bar { background: var(--accent); }
.shiji { background: var(--accent-bg); border-radius: 8px; padding: 10px 12px; font-size: 14px; color: #123d6e; margin-bottom: 14px; }
.wabun { font-size: 15px; color: var(--sub); margin-bottom: 6px; white-space: pre-wrap; }
.mondai { font-size: 19px; font-weight: bold; margin: 0 0 16px; word-break: break-word; white-space: pre-wrap; }
.choices { display: flex; flex-direction: column; gap: 8px; }
.choice { position: relative; display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 17px; line-height: 1.5; color: var(--text); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.choice b { color: var(--accent); flex: 0 0 auto; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.conf { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.conf p { margin: 0 0 8px; font-size: 14px; font-weight: bold; }
.conf-btn { display: block; width: 100%; text-align: left; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 8px; background: #fff; color: var(--accent); font: inherit; font-size: 15px; cursor: pointer; }
/* 選択肢を選ぶまでは、確かさのボタンを出さない（:has に対応していない古いブラウザでは最初から出る） */
@supports selector(:has(a)) {
  form:not(:has(input[name="choice"]:checked)) .conf { display: none; }
}
.score { text-align: center; }
.score .n { font-size: 40px; font-weight: bold; line-height: 1.3; }
.score .j { display: inline-block; margin: 4px 0 6px; padding: 4px 18px; border-radius: 99px; font-weight: bold; }
.j.pass { background: #e4f3e8; color: var(--ok); }
.j.fail { background: #fbe9e7; color: var(--ng); }
.j.near { background: #eef1f5; color: #33475b; }   /* 全範囲テスト：届かなかったとき（責めない色） */
.results .mark { font-weight: bold; font-size: 18px; }
.mark.o { color: var(--ok); } .mark.x { color: var(--ng); }
.rq { font-size: 15px; margin: 4px 0 6px; white-space: pre-wrap; word-break: break-word; }
.ra { font-size: 14px; margin: 0 0 6px; }
.ra .you { color: var(--ng); } .ra .cor { color: var(--ok); font-weight: bold; }
.kai { font-size: 14px; background: #fafaf8; border-left: 3px solid var(--line); padding: 8px 10px; white-space: pre-wrap; }
.hos { font-size: 13px; color: var(--sub); margin-top: 6px; padding-left: 10px; white-space: pre-wrap; }
.hos b { color: var(--accent); }

/* ---------- フェーズ3：弱点ボックス・日付を進める ---------- */
.shiftbar { background: #fff2cc; border: 2px solid #e0b400; color: #6b5300; border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; font-weight: bold; font-size: 14px; }
.wbcard .btn { margin-top: 10px; text-align: center; text-decoration: none; }
.drill-fb { text-align: center; }
.big-mark { font-size: 28px; font-weight: bold; margin: 6px 0; }
.big-mark.o { color: var(--ok); } .big-mark.x { color: var(--ng); }
.drill-msg { text-align: left; margin: 8px 0 0; }
.fb-choices { list-style: none; margin: 0 0 12px; padding: 0; }
.fb-choices li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; }
.fb-choices li b { color: var(--accent); }
.fb-choices li.right { border-color: var(--ok); background: #eef8f1; }
.fb-choices li.mine { border-color: var(--ng); background: #fdf1ef; }
a.btn { text-align: center; text-decoration: none; }

/* ---------- フェーズ4：ストップウォッチと勉強時間 ---------- */
.sw-time { font-size: 38px; font-weight: bold; font-variant-numeric: tabular-nums; text-align: center; margin: 4px 0; }
.btn.stop { background: #b3261e; }
.totals { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.totals div { flex: 1 1 28%; min-width: 92px; background: #fafaf8; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.totals span { display: block; font-size: 11px; color: var(--sub); white-space: nowrap; }
.totals strong { font-size: 16px; white-space: nowrap; }
.weekdays { list-style: none; margin: 0; padding: 0; }
.weekdays li { display: flex; justify-content: space-between; padding: 6px 4px; border-top: 1px solid var(--line); }
.weekdays li:first-child { border-top: 0; }
.weekdays li.today { font-weight: bold; }
details.fix summary { cursor: pointer; color: var(--accent); font-size: 14px; margin-top: 4px; }
details.fix form { margin-top: 8px; }
.twocol { display: flex; flex-wrap: wrap; gap: 8px; }
.twocol label { flex: 1 1 45%; min-width: 160px; }

/* ---------- フェーズ5：講師画面と教材の管理 ---------- */
.tag.idle { background: #ececec; color: #444; border: 1px solid #bbb; }
.ov { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 2px; font-size: 13px; color: var(--sub); }
.ov span { white-space: nowrap; }
.ov b { margin-left: 4px; font-size: 15px; color: var(--text); }
.ov b.warn { color: var(--ng); }
.tag.pub { background: #e4f3e8; color: var(--ok); }
input[type="file"] { padding: 8px; font-size: 14px; }
.report { margin: 6px 0 0; padding-left: 1.2em; font-size: 14px; overflow-wrap: anywhere; }
.steps { margin: 0 0 10px; padding-left: 1.4em; font-size: 14px; }

/* ---------- 追補5：あとで解く／まぐれ正解 ---------- */
form.later { margin-top: 10px; text-align: center; }
form.later .small-btn { width: 100%; padding: 10px; border-color: var(--line); color: var(--sub); }
.lucky-sum { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfbf9; text-align: left; }
.lucky-sum .small { margin-top: 2px; }
.tag.luck { background: #fff2cc; color: #8a6d00; }

/* ---------- 追補6：見直す ---------- */
label.flag { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfbf9; font-size: 14px; color: var(--text); }
label.flag input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.small-btn.keep { display: block; width: 100%; margin-top: 10px; padding: 10px; border-color: var(--line); color: var(--sub); }
.tag.rev { background: #e8eefb; color: #24488c; }

/* ---------- 2026-09-23：ホームの2つの入口／結果の問題と選択肢 ---------- */
.entry { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.entry-btn { display: block; padding: 18px 16px; border-radius: 10px; background: var(--accent); color: #fff; text-decoration: none; }
.entry-btn + .entry-btn { background: #fff; color: var(--accent); border: 2px solid var(--accent); }
.entry-name { display: block; font-size: 20px; font-weight: bold; }
.entry-sub { display: block; margin-top: 2px; font-size: 14px; opacity: .9; }
.doing-card strong { display: block; margin: 2px 0 6px; }
.results .rs { margin: 6px 0 2px; }
.results .fb-choices { margin: 6px 0 8px; }
.tag.mine-ok { background: #e4f3e8; color: var(--ok); }

/* ---------- 単元別の結果（2026-09-23） ---------- */
.pick summary { cursor: pointer; color: var(--accent); font-size: 15px; }
.picklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; margin: 10px 0; }
label.pickone { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 15px; color: var(--text); }
label.pickone input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
label.pickone .mono { margin-left: 6px; }

/* 単語テスト：確かさを聞かずに次へ（2026-09-23） */
.conf-btn.go-btn { text-align: center; font-weight: bold; background: var(--accent); color: #fff; }

/* ---------- 英単語の暗記（第6弾 フェーズ2） ---------- */
.mem-card { text-align: center; }
.mem-stage { font-weight: bold; color: var(--accent); margin: 0 0 6px; }
#mem-intro p { text-align: left; }
.mem-word { font-size: 34px; font-weight: bold; margin: 18px 0 20px; word-break: break-word; line-height: 1.3; }
.mem-choices { display: flex; flex-direction: column; gap: 10px; }
.mem-choice { display: block; width: 100%; padding: 15px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); font: inherit; font-size: 19px; cursor: pointer; touch-action: manipulation; }
.mem-choice:disabled { cursor: default; color: var(--text); }
.mem-choice.right { border-color: var(--ok); background: #eef8f1; box-shadow: inset 0 0 0 1px var(--ok); }
.mem-choice.mine { border-color: var(--ng); background: #fdf1ef; }
.mem-fb { min-height: 1.8em; margin-top: 12px; font-weight: bold; }
.mem-fb.o { color: var(--ok); } .mem-fb.x { color: var(--ng); }
.mem-next { margin-top: 12px; }
.mem-time { display: block; width: 100%; height: 6px; margin: 4px 0 0; border: 0; border-radius: 3px; overflow: hidden; background: #e3e3dd; -webkit-appearance: none; appearance: none; }
.mem-time::-webkit-progress-bar { background: #e3e3dd; }
.mem-time::-webkit-progress-value { background: #e0a100; }
.mem-time::-moz-progress-bar { background: #e0a100; }
.mem-list .mark { margin-right: 2px; }
.entry-btn.entry-word { background: #fff; color: var(--ok); border: 2px solid var(--ok); }

/* ---------- 英単語の演習（第6弾 フェーズ3） ---------- */
.pr-prompt { text-align: center; font-size: 22px; margin: 6px 0 18px; }
.pr-prompt.en { font-size: 30px; }
a.small-btn.pr-go { display: inline-block; margin-top: 6px; text-decoration: none; }
.pr-audio { text-align: center; margin: -8px 0 12px; }
.pr-play { margin: 4px 0 8px; }

/* ---------- 英単語のテスト（第6弾 フェーズ4） ---------- */
.wt-timer { text-align: right; font-size: 15px; margin: -6px 0 10px; color: var(--sub); }
.wt-timer strong { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--text); }
.wt-timer.warn strong { color: var(--ng); }
.pr-prompt.wt-sentence { font-size: 19px; text-align: left; }
.wt-void textarea { display: block; width: 100%; min-height: 3em; margin-top: 4px; padding: 8px; font: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: 8px; }

/* ---------- 今日の復習・英単語の入口（第6弾 フェーズ5） ---------- */
.review-card { text-align: center; }
.review-n { font-size: 18px; margin-bottom: 4px; }
.review-n strong { font-size: 26px; }
.words-units .btn.next-step { margin-top: 8px; }
.next-step-off { margin-top: 8px; padding: 11px; border: 1px dashed var(--line); border-radius: 8px; text-align: center; color: var(--sub); }
.words-links { margin-top: 6px; text-align: right; }
h3.sub { font-size: 14px; margin: 12px 0 4px; color: var(--sub); }
/* 英単語の「次は」（ホームの今日の復習のすぐ下。追補19の5） */
.word-next-card { border: 2px solid var(--ok); }
.btn.word-next-btn { background: var(--ok); font-size: 18px; padding: 16px 12px; margin-top: 8px; }
.word-next-label { margin-top: 8px; padding: 12px; border: 1px dashed var(--line); border-radius: 8px; text-align: center; font-weight: bold; }

/* ---------- 講師画面の英単語（第6弾 フェーズ6） ---------- */
.ov-words { border-top: 1px dashed var(--line); padding-top: 3px; }
.ov-label { font-weight: bold; color: var(--ok); }

/* ---------- 早見表（教材ごとの生徒×単元の合否。2026-09-25） ---------- */
.gridwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px -4px 0; }
table.grid { border-collapse: collapse; font-size: 14px; white-space: nowrap; }
table.grid th, table.grid td { border: 1px solid var(--line); padding: 3px 6px; text-align: center; min-width: 30px; }
table.grid thead th { background: #f0f0ec; font-weight: normal; }
table.grid .gname { position: sticky; left: 0; background: var(--card); text-align: left; font-weight: normal; z-index: 1; }
table.grid thead .gname, table.grid tfoot .gname { background: #f0f0ec; }
table.grid .gname .mono { margin-left: 6px; color: var(--sub); }
table.grid .gsum { font-weight: bold; }
table.grid td.gpass { color: var(--ok); background: #e4f3e8; font-weight: bold; }
table.grid td.gfail { color: var(--ng); background: #fbe9e7; }
table.grid td.gdoing { background: #fff2cc; }
table.grid .gdo { font-size: 11px; color: #8a6d00; margin-left: 2px; }
table.grid .gnp { display: block; font-size: 10px; color: var(--sub); line-height: 1; }
table.grid tfoot td, table.grid tfoot th { background: #f7f7f3; }

/* ---------- 暗記の「わからない」（第9弾 フェーズ2） ---------- */
.mem-choice.mem-dk { background: #fafaf8; color: var(--sub); border-style: dashed; font-size: 16px; }
/* 英単語の早見表（第9弾 フェーズ4） */
table.wgrid td.wg-cell { min-width: 120px; white-space: normal; vertical-align: top; }
table.wgrid td.wg-cell .tag { margin: 2px 0; }

/* ---------- ホームの英単語：番号付きのカード2枚（追補20の1） ---------- */
.word-card { border: 2px solid var(--ok); }
.word-card-head { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.word-no { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 20px; font-weight: bold; flex: none; }
.word-box-card { border-color: #e07b00; background: #fff6ea; }   /* 毎日やる場所なので橙で目立たせる（警告の赤にしない。追補20の追記） */
.word-box-card .word-no { background: #e07b00; }
.word-box-card .btn.word-next-btn { background: #c96a00; }
.word-box-ov { font-size: 15px; margin-top: 8px; }
.word-box-ov b { font-size: 20px; }
.btn.btn-sub { background: #fff; color: var(--text); border: 2px solid var(--line); }


/* カードで覚える（追補22）。表と裏を同じ升目に重ね、高さは長いほうに合わせる */
.wc-intro { text-align: center; }
.wc-card { perspective: 1200px; cursor: pointer; margin: 4px 0 12px; outline: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.wc-card:focus-visible .wc-face { box-shadow: 0 0 0 3px var(--accent-bg), 0 0 0 4px var(--accent); }
.wc-inner { display: grid; transition: transform .5s ease; transform-style: preserve-3d; }
.wc-card.flipped .wc-inner { transform: rotateY(180deg); }
.wc-face { grid-area: 1 / 1; min-height: 260px; padding: 22px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06); -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.wc-back { transform: rotateY(180deg); align-items: stretch; text-align: left; justify-content: flex-start; background: #fbfbf8; }
.wc-word { font-size: 34px; font-weight: bold; line-height: 1.3; word-break: break-word; margin-bottom: 18px; }
.wc-audio { border: 1px solid var(--line); border-radius: 20px; background: #fff; color: var(--accent); font: inherit; font-size: 15px; padding: 7px 16px; cursor: pointer; }
.wc-hint { margin: 18px 0 0; font-size: 13px; color: var(--sub); }
.wc-bword { font-size: 18px; font-weight: bold; color: var(--sub); margin-bottom: 8px; word-break: break-word; }
.wc-meaning { font-size: 26px; font-weight: bold; line-height: 1.35; margin-bottom: 6px; }
.wc-others { font-size: 15px; color: var(--sub); margin-bottom: 10px; }
.wc-ex { font-size: 17px; line-height: 1.5; border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; }
.wc-exja { font-size: 15px; color: var(--sub); line-height: 1.5; margin-top: 2px; white-space: pre-line; }
.wc-trivia { font-size: 14px; line-height: 1.6; background: var(--accent-bg); border-radius: 8px; padding: 8px 10px; margin-top: 12px; }
.wc-nav { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.wc-btn { padding: 12px 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font: inherit; font-size: 15px; cursor: pointer; touch-action: manipulation; }
.wc-btn:disabled { color: #b5b5b0; cursor: default; }
.wc-btn.wc-next { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: bold; }
.wc-end { text-align: center; }
.wc-link { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
  .wc-inner { transition: none; }
}

/* ---------- 英文読解レベル0 識別問題（v1仕様書 追補8。青系のカード・下線は今答える1か所だけ） ---------- */
.shk-home-card { border-color: #2b6cb0; background: #eef5fc; }   /* 英単語の②と同じ作り（枠と薄い地）で青系。フェーズCの判断1 */
.shk-home-card .word-card-head { color: #1c4f86; }
.shk-home-card .btn.word-next-btn { background: #2b6cb0; text-align: center; text-decoration: none; }
.shk-home-card .btn.btn-sub { text-align: center; text-decoration: none; }
.btn.shk-btn-sub { background: #fff; color: #2b6cb0; border: 1px solid #2b6cb0; text-align: center; text-decoration: none; }
.shk-box { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #9cbbe0; }
.shk-box-head { font-weight: bold; color: #1c4f86; }
.shk-sentence { font-weight: normal; }
.shk-passage { font-size: 17px; line-height: 1.9; margin: 0 0 16px; word-break: break-word; }
u.shk-ul { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; background: #fff1a8; color: #102a4c; font-weight: bold; padding: 0 2px; border-radius: 3px; }
.shk-kai { margin-top: 12px; font-size: 15px; background: #fafaf8; border-left: 3px solid #9cbbe0; padding: 8px 12px; }
.shk-kai p { margin: 6px 0; }
.shk-sent-small { font-size: 15px; }
.shk-yaku { color: var(--sub); }
.shk-wrong { margin: 2px 0 6px; padding-left: 1.2em; }
.shk-refs { margin-top: 10px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--sub); }
.shk-refs ul { margin: 4px 0 0; padding-left: 1.2em; }
.shk-refs u.shk-ul { font-weight: normal; padding: 0 1px; }
.shk-ref-no { display: inline-block; min-width: 3.5em; margin-right: 6px; color: #1c4f86; }

/* ---------- 教材の管理（2026-10-02 作り直し：上に固定の帯・種類ごとの開け閉め・まとめて選ぶ・確かめ） ---------- */
.mat-bar { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 2px solid var(--line); padding: 8px 0 8px; margin: 0 0 12px; }
.mat-bar-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.mat-count b { font-size: 18px; }
.mat-actions { margin-top: 6px; }
.mat-actions .small-btn { flex: 1 1 140px; padding: 9px 10px; font-weight: bold; }
.mat-actions .mat-go { background: var(--accent); color: #fff; }
.mat-actions .mat-stop { background: #fff; color: var(--accent); }
.mat-filter { margin-top: 6px; }
.mat-filter label { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--text); }
.mat-filter input, .mat-check input, .mat-all input { display: inline-block; width: auto; margin: 0; }
.mat-msg:empty { display: none; }
.mat-msg { margin: 8px 0 0; max-height: 30vh; overflow: auto; }
.mat-group > summary { cursor: pointer; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; align-items: baseline; font-weight: bold; font-size: 16px; list-style: revert; }
.mat-group[open] > summary { margin-bottom: 8px; }
.mat-all { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 6px; }
.mat-check { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--text); font-size: 15px; cursor: pointer; }
.mat-check input { margin-top: 5px; transform: scale(1.3); }
.mat-row > .small { margin-left: 28px; }
.ng-text { color: var(--ng); }
.mat-dialog { border: 1px solid var(--line); border-radius: 10px; padding: 16px; width: min(560px, calc(100vw - 32px)); max-height: 80vh; }
.mat-dialog::backdrop { background: rgba(0, 0, 0, .35); }
.mat-dialog-btns { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.mat-dialog-btns .btn { flex: 1; margin: 0; }
.mat-group > summary::-webkit-details-marker { display: none; }
.mat-gtitle::before { content: "▶"; display: inline-block; width: 1.4em; font-size: 12px; color: var(--accent); }
.mat-group[open] .mat-gtitle::before { content: "▼"; }

/* ---------- 識別問題のミニテストと講師の一覧（v1仕様書 追補9） ---------- */
.shk-test-card { border: 2px solid #2b6cb0; }
.shk-test-no { font-size: 15px; margin: 18px 0 6px; color: var(--sub); }
.shk-cells { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 4px 0 2px; font-size: 12px; }
.shk-cells-head { font-weight: bold; color: #1c4f86; margin-right: 2px; }
.shk-cell { border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; background: #fff; white-space: nowrap; }
.shk-cell b { margin-right: 4px; color: #1c4f86; }
.shk-cell.pass { border-color: var(--ok); background: #eef8f1; }
.shk-call { border: 2px solid #e07b00; background: #fff6ea; }
.shk-why { margin: 2px 0 0; padding-left: 1.2em; }

/* アカウントの管理（v1仕様書 追補10）：姓と名・学年と期限を横に並べる（スマホでは縦）、期限が近い印、削除の欄 */
.acc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 480px) { .acc-two { grid-template-columns: 1fr; } }
.tag.warn { background: #fff2cc; color: #8a6d00; }
details.acc-danger summary { color: var(--ng); }
.small-btn.danger { border-color: var(--ng); color: var(--ng); }
details.acc-edit, details.acc-danger, details.acc-transfer { margin-top: 6px; }

/* ---------- スタッフの画面（v1仕様書 追補11）：左の列にメニュー。PCとタブレット。生徒の画面は変えない ---------- */
body.staff { background: var(--bg); }
.staff .topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--line); margin: 0; }
.staff .topbar .brand { margin: 0; }
.staff .topbar .who { margin: 0 0 0 auto; }
.menu-toggle { position: absolute; left: -9999px; }
.menu-btn { display: none; cursor: pointer; border: 1px solid var(--line); border-radius: 6px; padding: 4px 12px; font-size: 14px; color: var(--accent); background: #fff; }
.shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: start; }
.side { background: #fff; border-right: 1px solid var(--line); padding: 12px 12px 24px; min-height: calc(100vh - 46px); font-size: 15px; }
.side-list { list-style: none; margin: 0 0 4px; padding: 0; }
.side-list a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--text); text-decoration: none; }
.side-list a:hover { background: var(--accent-bg); color: var(--accent); }
.side-head { margin: 12px 0 2px; padding: 0 10px; font-size: 12px; font-weight: bold; color: var(--sub); }
.side-gap { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.side-off { display: block; padding: 6px 10px; color: #aaa; font-size: 14px; }
.side-logout { margin: 12px 10px 0; }
.side-logout button { background: none; border: 1px solid var(--line); border-radius: 6px; padding: 5px 12px; font: inherit; font-size: 14px; color: var(--sub); cursor: pointer; }
.side-small { margin: 16px 10px 0; font-size: 12px; }
.main { padding: 14px 20px 40px; min-width: 0; max-width: 1100px; }
.staff .main > .card, .staff .main > form, .staff .main > p { max-width: 1060px; }
@media (max-width: 900px) {
  /* タブレットの縦など：メニューをたたむ（「メニュー」を押すと開く） */
  .menu-btn { display: inline-block; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .menu-toggle:checked ~ .shell .side { display: block; }
  .main { padding: 12px 14px 40px; }
}

/* 生徒の一覧・スタッフの一覧：表の形（横にはみ出さないよう、狭いときは操作を下の段に回す） */
.tbl-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin-bottom: 10px; }
.tbl-tools label { margin: 0; }
.tbl-tools input, .tbl-tools select { width: auto; min-width: 180px; padding: 7px 10px; font-size: 15px; }
.tbl-tools .small-btn { text-decoration: none; display: inline-block; }
.ptable { list-style: none; margin: 0; padding: 0; }
.ptable > li { border-top: 1px solid var(--line); padding: 8px 0; }
.prow { display: grid; grid-template-columns: minmax(120px, 1.4fr) minmax(90px, 1fr) 64px minmax(150px, 1.2fr) 70px 300px; gap: 4px 12px; align-items: center; }
.staff-table .prow { grid-template-columns: minmax(120px, 1.2fr) minmax(90px, 1fr) 110px minmax(130px, 1fr) 70px 400px; }
.prow.head { font-size: 13px; color: var(--sub); font-weight: bold; }
.prow.head a { color: var(--sub); text-decoration: none; }
.prow.head a.on { color: var(--accent); }
.prow .ops { display: flex; flex-wrap: wrap; gap: 4px 6px; justify-content: flex-end; }
.prow .ops a.small-btn, .ops form.inline { margin: 0; }
a.small-btn { text-decoration: none; display: inline-block; }
.small-btn.off { border-color: var(--line); color: #aaa; cursor: default; }
.prow .tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 8px; }
details.stu-prog { margin-top: 2px; }
details.stu-prog summary { cursor: pointer; font-size: 13px; color: var(--accent); }
@media (max-width: 1180px) {
  /* タブレットなど：操作のボタンを下の段に回す（横にはみ出さない） */
  .prow, .staff-table .prow { grid-template-columns: minmax(110px, 1.4fr) minmax(90px, 1fr) 90px minmax(150px, 1.2fr) 70px; }
  .prow .ops { grid-column: 1 / -1; justify-content: flex-start; }
  .prow.head .c-ops { display: none; }
}
@media (max-width: 620px) {
  .prow, .staff-table .prow { grid-template-columns: minmax(110px, 1.4fr) minmax(80px, 1fr) 90px; }
  .prow > .c-exp, .prow > .c-status { grid-column: span 1; }
  .prow .ops { grid-column: 1 / -1; justify-content: flex-start; }
  .prow.head .c-ops { display: none; }
}
.formcard { max-width: 640px; }
.soon { border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; color: var(--sub); font-size: 14px; margin-top: 14px; }
.btn.danger-btn { background: var(--ng); }
.prow .tag { white-space: nowrap; }
@media (max-width: 1180px) { .staff-table .prow { grid-template-columns: minmax(110px, 1.2fr) minmax(90px, 1fr) 130px minmax(140px, 1.1fr) 70px; } }
@media (max-width: 620px) { .staff-table .prow { grid-template-columns: minmax(110px, 1.4fr) minmax(80px, 1fr) 130px; } }

/* 項目別の一覧と、生徒の詳細の「進み具合のまとめ」（v1仕様書 追補12） */
table.pggrid td.pg-pass { color: var(--ok); background: #e4f3e8; font-weight: bold; }
table.pggrid td.pg-clear { color: #24488c; background: #e8eefb; }
table.pggrid td.pg-doing { color: #8a6d00; background: #fff2cc; }
table.pggrid td.pg-year, table.pggrid td.pg-last { font-size: 13px; color: var(--sub); }
.pg-legend { line-height: 1.9; }
.pg-key { display: inline-block; padding: 0 8px; border-radius: 4px; font-weight: bold; white-space: nowrap; }
.pg-key.pg-pass { color: var(--ok); background: #e4f3e8; }
.pg-key.pg-clear { color: #24488c; background: #e8eefb; }
.pg-key.pg-doing { color: #8a6d00; background: #fff2cc; }
table.pg-sum { border-collapse: collapse; font-size: 14px; width: 100%; }
table.pg-sum th, table.pg-sum td { border-bottom: 1px solid var(--line); padding: 5px 8px; text-align: center; white-space: nowrap; }
table.pg-sum thead th { background: #f0f0ec; font-weight: normal; font-size: 13px; }
table.pg-sum tbody th { text-align: left; font-weight: normal; white-space: normal; }

/* 学年を1つ上げる（追補14） */
table.yup { width: auto; min-width: 320px; margin-bottom: 10px; }
table.yup td { text-align: left; }
label.check { display: block; margin-top: 6px; font-weight: bold; }
label.check input { display: inline-block; width: auto; margin: 0 6px 0 0; vertical-align: middle; }

.envbar { background: #ffe0e0; border-color: #c62828; color: #7a1010; }
.wc-prior { font-size: 14px; color: var(--muted, #555); margin-top: 4px; }
.kb-card .review-n { margin-top: 12px; }
/* ホーム：教材の枠（2026-10-04）。4つの教材とも同じひな形（進める／特訓BOX）。色は教材ごとに1系統（--sc）。番号（①②）と②の橙はやめた */
.subj { margin: 20px 0 0; --sc: var(--accent); --sc-bg: var(--accent-bg); }
.subj-words { --sc: #1a7a3c; --sc-bg: #eaf5ee; }
.subj-kobun { --sc: #6a3fa0; --sc-bg: #f2ecf9; }
.subj-shk { --sc: #1c4f86; --sc-bg: #eaf1fa; }
.subj-v1 { --sc: #a85a00; --sc-bg: #fbf1e3; }
.subj-h { font-size: 17px; margin: 0 0 8px; padding: 2px 0 2px 10px; border-left: 6px solid var(--sc); color: var(--sc); }
.subj .subj-card { border: 2px solid var(--sc); background: #fff; padding: 14px; }
.subj-part-h { font-size: 15px; font-weight: bold; color: var(--sc); margin: 0 0 6px; }
.subj-part .btn { margin-top: 8px; }
.subj-part .btn.word-next-btn { background: var(--sc); }
.subj-part .word-next-label { margin-top: 8px; }
.subj-part .ov { margin: 0; }
.subj-box { background: var(--sc-bg); border-radius: 8px; padding: 12px; margin-top: 14px; }
.subj-alone { margin-top: 14px; }
.subj-alone .subj-box { margin-top: 0; }
.today-card { border: 2px solid var(--text); }
.today-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 18px; }
.today-list { list-style: none; margin: 8px 0 0; padding: 0; }
.today-list li { --sc: var(--accent); border-top: 1px solid var(--line); }
.today-list li.subj-words { --sc: #1a7a3c; } .today-list li.subj-kobun { --sc: #6a3fa0; } .today-list li.subj-shk { --sc: #1c4f86; } .today-list li.subj-v1 { --sc: #a85a00; }
.today-row { display: flex; align-items: center; gap: 10px; padding: 11px 2px; text-decoration: none; color: var(--text); }
.today-name { flex: 1 1 auto; font-weight: bold; color: var(--sc); border-left: 5px solid var(--sc); padding-left: 8px; }
.today-row b { font-size: 20px; white-space: nowrap; }
.today-go { flex: 0 0 auto; font-size: 13px; color: var(--sc); white-space: nowrap; }
.today-row.done { color: var(--sub); } .today-row.done b { font-size: 15px; font-weight: normal; } .today-row.done .today-go { color: var(--sub); }
.kb-prog { margin: 6px 0 2px; font-weight: bold; }
.kb-dots { letter-spacing: 3px; margin-right: 8px; color: #6a3fa0; }
.kb-sum h2 { margin-top: 0; }

/* 正解したら自動で次の問題へ（v1仕様書 追補17）。○だけの枠は、動き（autonext.js）が働いたときだけ出す */
.an-quick { display: none; }
body.an-on .an-quick { display: block; }
body.an-on .an-detail { display: none; }
.an-quick .small-btn { margin-top: 10px; padding: 9px 18px; }
body.an-wait .choice, body.an-wait .conf-btn { pointer-events: none; }

/* チェック方式（v1仕様書 追補19）：選択肢そのものが送るボタン。チェックの欄は、選択肢のすぐ下に、親指で押せる大きさで */
button.choice { width: 100%; text-align: left; font: inherit; font-size: 17px; line-height: 1.5; -webkit-appearance: none; appearance: none; touch-action: manipulation; }
button.choice:active { border-color: var(--accent); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); }
button.choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* チェックの見た目（決定メモ 16の1・2026-10-04 塾長決定）：□ は、選択肢と同じ枠の中の、一番下の行。
   選択肢は枠の中の行にし、丸数字と □ は同じ大きさ（32px四方）。□ の行が無い画面（英単語のテスト・特訓BOXなど）の選択肢も、同じ枠の形（決定メモ 18の3）。□ の行は、薄い色と太い線で選択肢と区切る。
   いちばん下の選択肢との間に、押しても何も起きないすき間を置く（押し間違いを減らす） */
.choices { gap: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.choices .choice { align-items: center; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 14px; }
.choices .choice b { flex: 0 0 32px; width: 32px; height: 32px; font-size: 30px; line-height: 32px; text-align: center; font-weight: normal; }
.choices .choice span { font-weight: bold; }
.choices .choice:last-child, .ckset .choice:nth-last-child(2) { border-bottom: 0; }
.choices label.choice:has(input:checked) { border-color: var(--line); box-shadow: inset 4px 0 0 var(--accent); }
.ck { position: relative; display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; align-items: center; align-content: center; margin: 12px 0 0; padding: 14px 14px 12px; min-height: 84px; border-top: 4px solid #d9a441; background: #fff8e8; color: var(--text); cursor: pointer; touch-action: manipulation; }
.ck input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ck-sq { position: relative; flex: 0 0 32px; width: 32px; height: 32px; border: 2px solid #8a6d3b; border-radius: 5px; background: #fff; }
.ck input:checked + .ck-sq { border-color: #c96a00; background: #c96a00; }
.ck input:checked + .ck-sq::after { content: ""; position: absolute; left: 9px; top: 2px; width: 9px; height: 18px; border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg); }
.ck input:focus-visible + .ck-sq { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 小さい字の2行は、□ の下まで幅を使う（スマホの幅で、かっこの行が2行に折れないように） */
.ck-text { display: contents; }
.ck-text b { display: block; grid-column: 2; font-size: 17px; line-height: 1.5; }
.ck-text small { display: block; grid-column: 1 / -1; font-size: 12px; line-height: 1.5; color: #5c5346; }
.ck-text b + small { margin: 6px 0 0 -0.5em; }
.ck:has(input:checked) { background: #ffe6b3; }
form.ck-mark { margin: 12px 0 14px; text-align: center; }
.ck-mark-btn { display: inline-block; padding: 11px 22px; font-size: 15px; font-weight: bold; border-color: #c96a00; color: #c96a00; background: #fffaf0; touch-action: manipulation; }
form.ck-mark .small { display: block; margin-top: 4px; }
.an-quick form.ck-mark { margin: 12px 0 0; }

/* 学習の進め方（v1仕様書 追補20）：右上の入口と、その場で重ねて出す枠 */
.brand-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.howto-link { flex: 0 0 auto; padding: 5px 12px; border: 1px solid var(--accent); border-radius: 99px; background: #fff; color: var(--accent); font-size: 13px; font-weight: bold; text-decoration: none; }
.howto-back { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; padding: 14px; }
.howto-back[hidden] { display: none; }
.howto-box { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 12px; padding: 18px 18px 16px; box-shadow: 0 6px 30px rgba(0, 0, 0, .3); }
.howto-box h2 { margin: 0 0 10px; font-size: 19px; }
.howto-list { margin: 0 0 12px; padding-left: 22px; font-size: 15px; line-height: 1.7; }
.howto-list li { margin-bottom: 8px; }
.howto-list ul { margin: 4px 0 0; padding-left: 18px; }
.howto-list ul li { margin-bottom: 2px; }
body.howto-on { overflow: hidden; }

/* 生徒ごと・単元ごとに開く設定（v1仕様書 追補18）：生徒の詳細の枠 */
.uo-h { margin: 14px 0 4px; font-size: 15px; }
.uo-list .ops { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.uo-list .ops form.inline { margin: 0; }

/* 字（フォント）（決定メモ 16の2）：新しい字＝Noto Sans JP（決まりは fonts.css）。届くまでは、うしろの端末の字で出る。
   f-w5＝本文を一段太く（400 → 500。太字は 700 のまま） */
body.f-noto { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif; }
body.f-noto.f-w5 { font-weight: 500; }
.fonttry { margin: 26px 0 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; background: #fff; font-size: 13px; color: var(--sub); display: flex; flex-wrap: wrap; gap: 4px 14px; }
@media print { .fonttry { display: none; } }

/* 動画・音声・PDF：見せる設定と、まとまりの中の項目（2026-10-05） */
.mg-bulk { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; margin-left: 10px; vertical-align: middle; }
.mg-bulk form.inline { margin: 0; }
.mset-ops { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.mset-ops form.inline { margin: 0; }

/* 動画・音声・PDF：生徒の入口・教材の一覧・項目の一覧と再生（2026-10-05） */
.subj-media { --sc: #0f6b6f; --sc-bg: #e6f3f3; }
.md-last { border: 2px solid var(--text); }
.md-last-link { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text); padding: 4px 0; }
.md-last-link strong { color: var(--accent); font-size: 17px; }
.md-sets li { padding: 0; }
.md-set { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 2px; text-decoration: none; color: var(--text); }
.md-set strong { flex: 1 1 100%; font-size: 16px; }
.md-set .md-go { margin-left: auto; color: #0f6b6f; font-size: 14px; white-space: nowrap; }
.md-sec { font-size: 15px; margin: 16px 0 2px; padding: 4px 8px; background: #e6f3f3; border-left: 5px solid #0f6b6f; border-radius: 2px; }
.md-items li { padding: 8px 0; }
.md-row { display: flex; align-items: center; gap: 10px; }
.md-title { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.md-title strong { flex: 1 1 100%; overflow-wrap: anywhere; }
.md-row .small-btn { flex: 0 0 auto; min-width: 76px; padding: 9px 10px; text-align: center; text-decoration: none; white-space: nowrap; }
.md-item.md-on { background: #e6f3f3; margin: 0 -8px; padding: 8px; border-radius: 8px; }
.md-player { margin-top: 8px; }
.md-player audio { width: 100%; display: block; }
.md-now { font-size: 13px; color: var(--sub); margin-bottom: 4px; overflow-wrap: anywhere; }
.md-player-btns { display: flex; gap: 8px; margin-top: 6px; }
.md-player-btns .small-btn { flex: 1 1 0; padding: 9px 6px; }
.md-player-btns .small-btn:disabled { border-color: var(--line); color: #aaa; cursor: default; }
.subj-media .btn.word-next-btn { background: var(--sc); }

/* ==========================================================================================
   スタッフの画面の枠・メニュー5つ・生徒の詳細の見出し・見せるもの（2026-10-05。見本＝見本_デモ画面_2026-10-05.html の形）
   幅が狭いとき（タブレットの縦・スマホ）は、メニューが上に折り返して並ぶ（押して開く形は、やめた）
   ========================================================================================== */
.staff .topbar { justify-content: space-between; padding: 10px 20px; gap: 4px 12px; }
.staff .topbar .brand { font-size: 17px; }
.staff .topbar .who { margin: 0 0 0 auto; font-size: 13px; }
.top-logout { margin: 0; }
.top-logout button { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; color: var(--sub); cursor: pointer; }
.shell { display: flex; flex-wrap: wrap; align-items: flex-start; }
.menu { flex: 1 1 170px; display: flex; flex-wrap: wrap; gap: 4px; padding: 16px 12px; }
.menu-item { flex: 1 1 150px; display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--text); text-decoration: none; box-sizing: border-box; }
.menu-item:hover { background: var(--accent-bg); }
.menu-item.on { font-weight: bold; color: #fff; background: var(--accent); }
.staff .main { flex: 999 1 520px; min-width: 0; max-width: 1100px; padding: 16px 20px 40px; }
.subnav { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 10px; }
.subnav a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--text); text-decoration: none; font-size: 14px; }
.subnav a.on { border-color: var(--text); background: var(--text); color: #fff; font-weight: bold; }
.staff .flash { font-size: 15px; }
.staff .flash.ok { font-weight: bold; color: #145a2e; background: #e6f4ea; border: 2px solid #2e8b57; border-radius: 12px; padding: 12px 18px; }
.staff .flash.ok .small, .staff .flash.ok p, .staff .flash.ok li { font-weight: normal; }
form.is-sent button[type="submit"] { opacity: .55; cursor: default; }
.set-list li { padding: 0; }
.set-row { display: flex; flex-direction: column; gap: 2px; padding: 12px 4px; text-decoration: none; color: var(--text); }
.set-row strong { color: var(--accent); font-size: 16px; }
@media (max-width: 700px) {
  .menu { padding: 8px 10px; gap: 4px; background: #fff; border-bottom: 1px solid var(--line); }
  .menu-item { flex: 1 1 auto; justify-content: center; min-height: 40px; padding: 0 10px; font-size: 14px; }
  .staff .main { padding: 12px 12px 40px; }
  .staff .topbar { padding: 8px 12px; }
}

/* 生徒の登録のあとの帯 */
.done-box { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; background: #e6f4ea; border: 2px solid #2e8b57; border-radius: 14px; margin-bottom: 14px; max-width: 640px; box-sizing: border-box; }
.done-box p { margin: 0; }
.done-head { font-size: 18px; font-weight: bold; color: #145a2e; }
.done-head::before { content: "✔ "; }
.done-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.done-acts .btn { margin: 0; width: auto; flex: 1 1 220px; text-align: center; text-decoration: none; }

/* 生徒の詳細：名札と、見出し4つ */
.who-card { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 14px 20px; font-size: 14px; color: var(--sub); }
.who-card .who-name { font-size: 22px; color: var(--text); }
.who-ok { font-size: 13px; font-weight: bold; color: #145a2e; background: #e6f4ea; padding: 2px 10px; border-radius: 10px; }
.st-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.st-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; font-weight: bold; color: var(--text); background: #fff; border: 1px solid #b5b2a8; border-radius: 22px; text-decoration: none; }
.st-tab.on { color: #fff; background: #22211f; border-color: #22211f; }

/* 見せるもの */
.sh-h { margin: 0; font-size: 16px; }
.sh-count { margin-left: 10px; font-size: 14px; font-weight: normal; color: var(--sub); }
.sh-now { display: flex; flex-direction: column; gap: 10px; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; background: #eef3fa; border: 1px solid #b9cde6; border-radius: 22px; }
.sh-kind { font-size: 12px; color: #3d5a80; }
.sh-cnm { margin-left: 6px; }
.sh-x { width: 36px; height: 36px; margin-right: -10px; border: 0; background: transparent; color: #3d5a80; font-size: 18px; line-height: 1; cursor: pointer; }
.sh-pick { padding: 0; }
.sh-head { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.sh-head .notice { margin: 0; }
.sh-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-cat { min-height: 44px; padding: 0 16px; font: inherit; font-weight: bold; color: var(--text); background: #fff; border: 1px solid #b5b2a8; border-radius: 10px; cursor: pointer; }
.sh-cat[aria-pressed="true"] { color: #fff; background: var(--accent); border-color: var(--accent); }
.sh-cat small { margin-left: 8px; font-size: 13px; font-weight: normal; }
.sh-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.sh-fld { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; color: var(--sub); }
.sh-fld.grow { flex: 1 1 200px; min-width: 0; }
.sh-fld select, .sh-fld input, .sh-grade select, .sh-copy select { width: auto; max-width: 100%; height: 44px; padding: 0 10px; font-size: 16px; border: 1px solid #b5b2a8; border-radius: 10px; background: #fff; box-sizing: border-box; }
.sh-fld.grow input { width: 100%; }
.sh-filters .small-btn { min-height: 44px; }
.small-btn.sh-plain { border-color: #b5b2a8; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; }
.small-btn.sh-plain.off { color: #999; border-color: var(--line); pointer-events: none; }
.sh-list { max-height: 372px; overflow-y: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sh-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 8px 20px; border-bottom: 1px solid #ebe9e3; background: #fff; }
.sh-row[hidden] { display: none; }
.sh-row.changed { background: #fff7e0; }
.sh-txt { flex: 1 1 240px; min-width: 0; }
.sh-nm { font-weight: bold; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.sh-meta, .sh-subj { font-size: 13px; color: var(--sub); }
.sh-state { width: 72px; text-align: right; font-size: 14px; font-weight: bold; color: var(--sub); }
.sh-state.on { color: var(--accent); }
.sh-grade { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 14px; font-weight: bold; color: var(--text); }
.sh-grade[hidden] { display: none; }
.sh-grade select.need { border: 2px solid #c2410c; }
input.sh-sw { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 52px; height: 30px; margin: 7px 4px; border-radius: 15px; background: #85827a; position: relative; cursor: pointer; }
input.sh-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px; background: #fff; transition: left .15s; }
input.sh-sw:checked { background: var(--accent); }
input.sh-sw:checked::after { left: 25px; }
input.sh-sw:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sh-empty { padding: 20px; color: var(--sub); }
.sh-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 20px; }
.sh-foot-copy { justify-content: flex-start; border-top: 1px solid var(--line); }
.sh-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sh-warn { font-size: 14px; font-weight: bold; color: #9a3412; }
.sh-warn[hidden] { display: none; }
.sh-chg { font-size: 14px; font-weight: bold; color: var(--sub); }
.sh-chg.some { color: #9a3412; }
.btn.sh-save { width: auto; margin: 0; min-height: 52px; padding: 0 24px; font-size: 17px; }
.btn.sh-save:disabled { background: #6f6c65; cursor: default; }
.sh-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.sh-copy label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--sub); }
.sh-note { padding: 12px 20px; margin: 0; }

/* ---------- 生徒の画面の帯・メニュー・いまどこ（2026-10-05 塾長決定＝決定メモ28・30。見本_生徒の画面_2026-10-05.html。部品は src/student_nav.php） ---------- */
header.sn-bar { position: -webkit-sticky; position: sticky; top: 0; z-index: 40; margin: 0; padding: 0; background: #fff; border-bottom: 1px solid #b5b2a8; }
.sn-in { max-width: 720px; margin: 0 auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.sn-row { display: flex; align-items: center; gap: 6px; }
.sn-sp { flex: 1 1 auto; }
.sn-b { flex: 0 0 auto; box-sizing: border-box; min-height: 48px; padding: 0 10px; display: inline-flex; align-items: center; gap: 3px; font: inherit; font-weight: bold; font-size: 15px; white-space: nowrap; text-decoration: none; color: #1f5fa8; background: #fff; border: 2px solid #1f5fa8; border-radius: 12px; cursor: pointer; }
.sn-b.sn-home { color: #fff; background: #1f5fa8; }
.sn-b.sn-mb { color: var(--text); border-color: #b5b2a8; }
.sn-b.off { color: #b5b2a8; background: #f1f0ec; border-color: #dcdcd6; cursor: default; }
.sn-b:focus-visible, .sn-mi:focus-visible { outline: 3px solid #262421; outline-offset: 2px; }
.sn-crumb { font-size: 13px; color: var(--sub); line-height: 1.5; }
.sn-crumb a { color: var(--sub); text-decoration: none; }
.sn-crumb b { color: var(--text); }
.sn-brand { font-weight: bold; font-size: 16px; color: #1f5fa8; }
.sn-lock { font-size: 14px; font-weight: bold; color: #b3261e; }
.sn-wrap { padding-top: 14px; }
.sn-hide { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.sn-menu > summary { list-style: none; }
.sn-menu > summary::-webkit-details-marker { display: none; }
.sn-sheet-back { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 45; background: rgba(20, 19, 17, .5); overflow-y: auto; }
.sn-sheet { max-width: 720px; margin: 0 auto; box-sizing: border-box; padding: 10px 16px 18px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.sn-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 18px; }
.sn-sec { margin-top: 4px; font-size: 13px; font-weight: bold; color: var(--sub); }
.sn-list { display: flex; flex-direction: column; }
.sn-mi { box-sizing: border-box; width: 100%; min-height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 4px; text-align: left; font: inherit; font-weight: bold; font-size: 16px; text-decoration: none; color: var(--sc, var(--text)); background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; cursor: pointer; }
.sn-mi.howto-link { color: var(--text); }
.sn-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 6px; background: var(--sc, #b5b2a8); }
.sn-r { margin-left: auto; font-weight: normal; color: var(--sub); }
.sn-logout { margin: 0; }
body.sn-on { overflow: hidden; }
/* いま受けられるテスト（ホームの一番上） */
.tbox { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; padding: 14px 16px; color: #fff; background: #262421; border-radius: 14px; }
.tbox h2 { margin: 0; font-size: 18px; line-height: 1.45; color: #fff; }
.tbox-tag { align-self: flex-start; padding: 1px 12px; font-size: 13px; font-weight: bold; color: #262421; background: #ffd84d; border-radius: 10px; }
.tbox-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; padding: 10px 12px; color: var(--text); background: #fff; border-radius: 10px; }
.tbox-t { flex: 1 1 170px; min-width: 0; }
.tbox-t b { display: block; line-height: 1.45; }
.tbox-take { flex: 0 0 auto; box-sizing: border-box; min-height: 50px; padding: 0 16px; display: inline-flex; align-items: center; font-weight: bold; font-size: 17px; white-space: nowrap; text-decoration: none; color: #262421; background: #ffd84d; border-radius: 10px; }
.tbox-more summary { min-height: 44px; display: flex; align-items: center; font-weight: bold; cursor: pointer; color: #ffd84d; }
.tbox-more .tbox-row { margin-top: 10px; }
/* ホームの教材の枠 */
.hm-title { font-size: 20px; margin: 18px 0 0; }
.subj.hm { margin-top: 12px; }
.hm-card { display: flex; flex-direction: column; gap: 10px; }
.hm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.hm-h { margin: 0; font-size: 17px; color: var(--sc); }
.hm-nw { white-space: nowrap; }
.hm-where { font-weight: bold; }
.hm-card .btn.word-next-btn { margin-top: 0; background: var(--sc); font-size: 17px; line-height: 1.4; padding: 13px 12px; text-align: center; text-decoration: none; box-sizing: border-box; }
.hm-card .word-next-label { margin-top: 0; }
.hm-more { align-self: flex-end; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; font-size: 14px; color: #1f5fa8; }
progress.hm-prog { display: block; width: 100%; height: 10px; margin: 0; border: 0; border-radius: 5px; overflow: hidden; background: #ebe9e3; -webkit-appearance: none; appearance: none; }
progress.hm-prog::-webkit-progress-bar { background: #ebe9e3; }
progress.hm-prog::-webkit-progress-value { background: var(--sc, #1a7a3c); }
progress.hm-prog::-moz-progress-bar { background: var(--sc, #1a7a3c); }
.today-row .today-go { min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; font-size: 15px; font-weight: bold; color: #fff; background: var(--sc); border-radius: 8px; }
.today-row.done .today-go { padding: 0; font-size: 14px; font-weight: normal; background: none; }
/* ステップ（覚える → 演習 → テスト） */
.stp { display: flex; align-items: stretch; gap: 4px; }
.stp-i { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 2px; text-align: center; color: var(--sub); background: #fff; border: 2px solid #dcdcd6; border-radius: 10px; }
.stp-n { font-size: 12px; }
.stp-nm { font-weight: bold; font-size: 16px; line-height: 1.3; }
.stp-v { font-size: 12px; font-weight: bold; line-height: 1.3; }
.stp-i.done { color: #145a2e; background: #eaf5ee; border-color: #1a7a3c; }
.stp-i.now { color: #fff; background: #1a7a3c; border-color: #1a7a3c; }
.stp-sep { flex: 0 0 auto; align-self: center; font-weight: bold; color: #b5b2a8; }
.stp.mini .stp-i { padding: 3px 2px; }
.stp.mini .stp-nm { font-size: 14px; }
/* 英単語：級の順番・級の道のり */
.wd-card { display: flex; flex-direction: column; gap: 10px; }
.wd-card h2 { margin: 0; }
.ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ladder-lv { padding: 4px 12px; font-size: 14px; font-weight: bold; color: var(--sub); background: #f1f0ec; border: 1px solid #dcdcd6; border-radius: 18px; }
.ladder-lv.now { color: #fff; background: #1a7a3c; border-color: #1a7a3c; }
.ladder-lv.done { color: #145a2e; background: #eaf5ee; border-color: #1a7a3c; }
.ladder-arrow { color: #b5b2a8; font-weight: bold; }
.path-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.path-head h2 { color: #1a7a3c; font-size: 17px; }
.path-info { display: flex; flex-wrap: wrap; gap: 0 12px; font-size: 13px; color: var(--sub); }
.path-info span { white-space: nowrap; }
ol.path { list-style: none; margin: 0; padding: 0; }
ol.path > li { position: relative; padding: 0 0 10px 44px; }
ol.path > li::before { content: ''; position: absolute; left: 15px; top: 34px; bottom: -2px; width: 2px; background: #b5b2a8; }
ol.path > li:last-child { padding-bottom: 0; }
ol.path > li:last-child::before { display: none; }
.path-num { position: absolute; left: 0; top: 6px; box-sizing: border-box; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 15px; color: var(--sub); background: #fff; border: 2px solid #b5b2a8; border-radius: 16px; }
ol.path > li.done > .path-num { color: #fff; background: #1a7a3c; border-color: #1a7a3c; }
ol.path > li.now > .path-num { color: #145a2e; border: 3px solid #1a7a3c; }
.path-b { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; text-align: left; text-decoration: none; color: var(--text); background: #fff; border: 1px solid #dcdcd6; border-radius: 10px; }
ol.path > li.now > .path-b { border: 3px solid #1a7a3c; }
.path-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: bold; }
.tag.here { color: #fff; background: #1a7a3c; }
.tag.ready { color: #262421; background: #ffd84d; }
.path-b .btn, .path-b .next-step-off { margin-top: 6px; }
.path-old > summary { min-height: 44px; display: flex; align-items: center; font-weight: bold; cursor: pointer; color: var(--sub); }
/* 単元の画面：グループの表 */
.gboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.gb { height: 42px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 15px; text-decoration: none; color: var(--sub); background: #fff; border: 1px solid #b5b2a8; border-radius: 8px; }
.gb.half { color: #145a2e; background: #eaf5ee; border-color: #1a7a3c; }
.gb.done { color: #fff; background: #1a7a3c; border-color: #1a7a3c; }
.gb.now { outline: 3px solid #262421; outline-offset: 1px; }
.gb-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--sub); }
.gb-legend span { display: inline-flex; align-items: center; gap: 5px; }
.gb-legend i { width: 16px; height: 16px; box-sizing: border-box; border: 1px solid #b5b2a8; border-radius: 4px; background: #fff; }
.gb-legend i.half { background: #eaf5ee; border-color: #1a7a3c; }
.gb-legend i.done { background: #1a7a3c; border-color: #1a7a3c; }
.gb-legend i.now { outline: 2px solid #262421; outline-offset: 1px; }
.wu-next .btn { margin-top: 0; background: #1a7a3c; font-size: 17px; padding: 14px 12px; text-align: center; text-decoration: none; box-sizing: border-box; }
.wu-next .btn.wu-test { background: #262421; }
.wu-next .next-step-off { margin-top: 0; }
/* 1問の画面の上の枠（単元・グループ・ステップ・残り） */
.wu-ctx { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.wu-ctx-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.wd-card .btn.next-step { background: #1a7a3c; text-align: center; text-decoration: none; box-sizing: border-box; }
.path-b .btn.next-step { font-size: 15px; padding: 10px; }