/* 生成AI研修の教材一式の体験版。色は common/base.css のトークンだけを使う */
.at { max-width: 1180px; margin: 0 auto; padding: 20px var(--gutter) 64px; }

/* 見たい所を選ぶ（1〜4） */
.at-tabs { display: flex; align-items: center; gap: 10px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; width: fit-content; max-width: 100%; margin: 0 auto 22px; box-shadow: var(--shadow-s); }
.at-tabs button { display: flex; align-items: center; gap: 8px; padding: 7px 16px 7px 8px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.at-tabs button:hover { background: var(--sunken); color: var(--ink); }
.at-tabs .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); font-size: 13px; }
.at-tabs button[aria-current="step"] { background: var(--brand); color: #fff; }
.at-tabs button[aria-current="step"] .n { background: var(--accent); color: #fff; }
.at-tabs-line { width: 18px; height: 2px; background: var(--line-2); flex: none; }

.view-head { max-width: 780px; margin-bottom: 18px; }
.view-head h2 { font-size: 24px; font-weight: 800; line-height: 1.4; }
.view-lead { margin-top: 6px; color: var(--ink-2); line-height: 1.85; }

/* 1. 教材一式 */
.mat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mat-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px 16px 14px; box-shadow: var(--shadow-s); min-width: 0; }
.mat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mat-kind { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.mat-kind.k-pptx { background: var(--accent-soft); color: var(--accent-deep); }
.mat-kind.k-docx { background: var(--brand-soft); color: var(--brand-2); }
.mat-kind.k-xlsx { background: var(--ok-soft); color: var(--ok); }
.mat-no { font-size: 22px; font-weight: 800; color: var(--line-2); line-height: 1; }
.mat-card h3 { font-size: 17px; font-weight: 800; line-height: 1.45; }
.mat-desc { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); line-height: 1.75; flex: 1; }
.mat-who { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.mat-who span { display: inline-block; margin-right: 8px; padding: 0 7px; border-radius: 4px; background: var(--sunken); font-weight: 700; font-size: 11.5px; }
.mat-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mat-btns .btn { text-decoration: none; }
.mat-size { font-weight: 500; font-size: 12px; opacity: .8; margin-left: 2px; }

.flow-card { margin-top: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 18px 20px; box-shadow: var(--shadow-s); }
.flow-card h3 { font-size: 17px; font-weight: 800; }
.flow-lead { margin-top: 2px; font-size: 13.5px; color: var(--ink-3); }
.flow { list-style: none; margin: 12px 0 0; display: grid; gap: 2px; }
.flow-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 220px 48px; align-items: center; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--line); }
.flow-row:first-child { border-top: 0; }
.flow-t { font-weight: 700; color: var(--ink-3); font-size: 13.5px; }
.flow-m b { display: block; font-size: 14.5px; }
.flow-m small { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.flow-bar { height: 10px; background: var(--sunken); border-radius: 5px; overflow: hidden; }
.flow-bar i { display: block; height: 100%; background: var(--brand-2); border-radius: 5px; min-width: 6px; }
.flow-row.big .flow-bar i { background: var(--accent); }
.flow-row.rest .flow-bar i { background: var(--line-2); }
.flow-row.rest .flow-m b { color: var(--ink-3); font-weight: 600; }
.flow-min { text-align: right; font-size: 13px; color: var(--ink-2); }

/* 2. スライド */
.sl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.sl-stage { position: relative; aspect-ratio: 16 / 9; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; box-shadow: var(--shadow); }
.sl-stage img { width: 100%; height: 100%; object-fit: contain; }
.sl-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(22, 36, 44, .55); color: #fff; backdrop-filter: blur(4px); }
.sl-arrow:hover { background: rgba(22, 36, 44, .78); }
.sl-arrow:disabled { opacity: 0; pointer-events: none; }
.sl-arrow.prev { left: 10px; } .sl-arrow.next { right: 10px; }
.sl-arrow .ico { width: 22px; height: 22px; margin: auto; }
.sl-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.sl-bar .btn { min-width: 96px; }
.sl-count { font-weight: 800; font-size: 16px; color: var(--ink-2); }
.sl-render { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
.sl-side { display: grid; gap: 14px; min-width: 0; }
.sl-note { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-m); padding: 14px 16px; box-shadow: var(--shadow-s); }
.sl-note-h { font-size: 12px; font-weight: 800; color: var(--accent-deep); letter-spacing: .04em; }
.sl-note-title { margin-top: 4px; font-weight: 800; font-size: 15.5px; line-height: 1.5; }
.sl-note-time { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.sl-note-body { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); line-height: 1.85; }
.sl-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sl-thumbs button { position: relative; border-radius: 6px; overflow: hidden; border: 2px solid transparent; background: var(--surface); box-shadow: var(--shadow-s); aspect-ratio: 16 / 9; }
.sl-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.sl-thumbs button .num { position: absolute; left: 0; bottom: 0; min-width: 18px; padding: 0 4px; font-size: 10.5px; font-weight: 800; line-height: 16px; text-align: center; background: rgba(22, 36, 44, .72); color: #fff; border-top-right-radius: 5px; }
.sl-thumbs button:hover { border-color: var(--line-2); }
.sl-thumbs button[aria-current="true"] { border-color: var(--accent); }

/* 3. 練習問題 */
.pr-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start; }
.pr-menu { display: grid; gap: 8px; position: sticky; top: 16px; }
.pm { display: flex; align-items: center; gap: 12px; text-align: left; padding: 11px 12px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-s); }
.pm:hover { border-color: var(--line-2); }
.pm.on { border-color: var(--brand-2); box-shadow: 0 0 0 2px var(--brand-soft); }
.pm-n { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--sunken); color: var(--ink-3); font-weight: 800; font-size: 13px; }
.pm.on .pm-n { background: var(--brand); color: #fff; }
.pm.done .pm-n { background: var(--ok-soft); color: var(--ok); }
.pm-t { min-width: 0; flex: 1; }
.pm-t b { display: block; font-size: 14px; line-height: 1.4; }
.pm-t small { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.pm-done { color: var(--ok); font-weight: 800; }

.px { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px 22px 20px; box-shadow: var(--shadow-s); min-width: 0; }
.px-kicker { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-size: 12px; font-weight: 800; }
.px-title { margin-top: 8px; font-size: 20px; font-weight: 800; line-height: 1.5; }
.px-lead { margin-top: 6px; color: var(--ink-2); font-size: 14px; line-height: 1.85; }
.px-box { margin-top: 16px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); min-width: 0; }
.px-box h4 { font-size: 13px; font-weight: 800; color: var(--ink-2); margin-bottom: 8px; }
.px-note { margin-bottom: 10px; font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
.memo { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13.5px; line-height: 1.85; color: var(--ink); max-height: 260px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px 14px; }
.facts { margin: 0; padding-left: 1.2em; font-size: 13.5px; line-height: 1.85; }
.facts li { padding-left: 2px; }

/* 選んで答える行 */
.qrows { list-style: none; margin: 16px 0 0; display: grid; gap: 10px; }
.qrow { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "n t o" ". w w"; align-items: center; gap: 6px 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.qrow.is-ok { border-color: var(--ok); background: var(--ok-soft); }
.qrow.is-ng { border-color: var(--bad-line); background: var(--bad-soft); }
.q-n { grid-area: n; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); color: var(--ink-3); font-weight: 800; font-size: 13px; }
.q-t { grid-area: t; font-weight: 600; line-height: 1.6; }
.qrow .opts { grid-area: o; }
.qrow .q-why { grid-area: w; }
.opts { display: flex; gap: 6px; }
.opt { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 78px; min-height: 46px; padding: 4px 10px; border-radius: var(--r-s); border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink-2); line-height: 1.25; transition: background .12s, border-color .12s, color .12s; }
.opt b { font-size: 16px; font-weight: 800; }
.opt small { font-size: 10.5px; font-weight: 600; opacity: .85; white-space: nowrap; }
.opt:hover:not(:disabled) { background: var(--sunken); }
.opt:disabled { cursor: default; }
.three .opt.o0.on, .three .opt.o0.right { background: var(--brand-soft); border-color: var(--brand-2); color: var(--brand-2); }
.three .opt.o1.on, .three .opt.o1.right { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.three .opt.o2.on, .three .opt.o2.right { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); }
.two .opt { min-width: 64px; }
.two .opt.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.two .opt.right { box-shadow: 0 0 0 2px var(--ok); }
.opt.o-n { min-width: 120px; }
.opt.o-n.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.opt.o-n.right { box-shadow: 0 0 0 2px var(--ok); }
/* 選んだ状態をはっきり：色を塗りつぶし、チェックを付ける */
.opt.on b::before { content: "✓ "; }
.three .opt.o0.on { background: var(--brand-2); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 2px var(--brand-soft); }
.three .opt.o1.on { background: var(--warn); border-color: var(--warn); color: #fff; box-shadow: 0 0 0 2px var(--warn-soft); }
.three .opt.o2.on { background: var(--bad); border-color: var(--bad); color: #fff; box-shadow: 0 0 0 2px var(--bad-soft); }
.opt.on small { opacity: 1; }
.opts:has(.on) .opt:not(.on):not(.right) { opacity: .6; }
.q-why { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.q-why b { color: var(--ink); }
.mk { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; margin-top: 2px; }
.mk.ok { background: var(--ok); } .mk.bad { background: var(--bad); }

/* 文を選ぶ */
.sents { list-style: none; margin: 0; display: grid; gap: 8px; }
.sent { border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--surface); padding: 0; overflow: hidden; }
.sent.is-ok { border-color: var(--ok); background: var(--ok-soft); }
.sent.is-ng { border-color: var(--bad-line); background: var(--bad-soft); }
.sent-b { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; }
.sent-b:disabled { cursor: default; }
.sent-box { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; border: 2px solid var(--line-2); background: var(--surface); display: grid; place-items: center; }
.sent-box svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sent-b.on .sent-box { background: var(--brand); border-color: var(--brand); }
.sent-b.on .sent-box svg { opacity: 1; }
.sent-b.on { background: var(--brand-soft); }
.sent.is-ok .sent-b.on, .sent.is-ng .sent-b.on { background: transparent; }
.sent-t { line-height: 1.7; font-size: 14.5px; }
.sent .q-why { padding: 0 14px 12px 48px; }

/* 課題2：宿題の表 */
.mn { display: grid; gap: 8px; }
.mn-row { display: grid; grid-template-columns: minmax(0, 1fr) 132px 132px; align-items: center; gap: 6px 10px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.mn-row.mn-head { background: transparent; border: 0; padding: 0 12px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.mn-row.is-ok { border-color: var(--ok); background: var(--ok-soft); }
.mn-row.is-ng { border-color: var(--bad-line); background: var(--bad-soft); }
.mn-t { font-weight: 600; line-height: 1.6; font-size: 14.5px; }
.mn-f { display: block; margin: 0; }
.mn-f i { display: none; font-style: normal; font-size: 11.5px; color: var(--ink-3); font-weight: 700; }
.mn select, .num-in input { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--surface); font-size: 14.5px; }
.mn-row .q-why { grid-column: 1 / -1; }

/* 課題3：表 */
.tbl-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); }
.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.tbl th { background: var(--brand); color: #fff; font-weight: 700; text-align: left; padding: 7px 10px; white-space: nowrap; font-size: 12.5px; }
.tbl td { padding: 7px 10px; border-top: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl .c { width: 34px; padding-right: 0; }
.tbl .none { color: var(--ink-3); font-size: 12px; }
.tbl tr.pick { cursor: pointer; }
.tbl tr.pick:hover td { background: var(--sunken); }
.tbl tr.pick.on td { background: var(--brand-soft); }
.tbl tr.pick.on .sent-box { background: var(--brand); border-color: var(--brand); }
.tbl tr.pick.on .sent-box svg { opacity: 1; }
.tbl tr.pick.dup td { box-shadow: inset 0 -2px 0 var(--accent); }
.tbl .sent-box { display: inline-grid; vertical-align: middle; margin: 0; }
.tidy-box { margin-top: 14px; }
.qs { display: grid; gap: 18px; }
.qq { padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.qq.is-ok { border-color: var(--ok); background: var(--ok-soft); }
.qq.is-ng { border-color: var(--bad-line); background: var(--bad-soft); }
.qq-h { font-weight: 700; line-height: 1.7; font-size: 14.5px; }
.qq-sub { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
.qq .opts { margin-top: 10px; }
.qq .q-why { margin-top: 8px; }
.num-in { display: flex; align-items: center; gap: 8px; margin-top: 10px; max-width: 280px; }
.num-in input { font-size: 16px; text-align: right; font-feature-settings: "tnum"; }
.num-in span { font-weight: 700; color: var(--ink-2); }

/* 答え合わせ */
.px-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.px-need { flex: 1 1 260px; display: grid; gap: 3px; font-size: 13px; color: var(--ink-2); line-height: 1.6; text-align: left; }
.px-need b { font-size: 15px; font-weight: 800; color: var(--accent-deep); }
.px-bar { display: block; height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; margin-top: 2px; }
.px-bar u { display: block; height: 100%; background: var(--accent); text-decoration: none; }
.btn.is-wait { opacity: .6; }
.need { animation: need 2.2s ease-out; }
@keyframes need { 0%, 60% { box-shadow: 0 0 0 3px var(--accent); background: var(--accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
.px-result { margin-top: 18px; padding: 16px 18px; border-radius: var(--r-m); border: 1.5px solid var(--warn-line); background: var(--warn-soft); }
.px-result.perfect { border-color: var(--ok); background: var(--ok-soft); }
.px-score { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.px-score b { font-size: 24px; font-weight: 800; }
.px-result.perfect .px-score b { color: var(--ok); }
.px-result.partial .px-score b { color: var(--warn); }
.px-score span { font-weight: 700; color: var(--ink-2); }
.px-compare { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.px-point { margin-top: 12px; padding: 12px 14px; background: var(--surface); border-radius: var(--r-s); border: 1px solid var(--line); }
.px-point h4 { font-size: 12.5px; font-weight: 800; color: var(--accent-deep); }
.px-point p { margin-top: 4px; font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }
.px-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* 4. 効果測定 */
.ef-sample { font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }
.ef-h { margin: 22px 0 10px; font-size: 18px; font-weight: 800; }
.ef-note { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
.ef-note.first { margin-top: 0; margin-bottom: 10px; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.metric { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 14px 16px 12px; box-shadow: var(--shadow-s); min-width: 0; }
.m-head { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.m-head h4 { font-size: 14.5px; font-weight: 800; line-height: 1.5; }
.m-change { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 12px; font-weight: 800; }
.bars { display: grid; gap: 6px; margin-top: 12px; }
.bar { display: grid; grid-template-columns: 52px minmax(0, 1fr) 54px; align-items: center; gap: 8px; font-size: 12.5px; }
.bar-l { color: var(--ink-3); font-weight: 700; }
.bar-t { height: 14px; background: var(--sunken); border-radius: 7px; overflow: hidden; }
.bar-t i { display: block; height: 100%; background: var(--line-2); border-radius: 7px; }
.bar.s1 .bar-t i { background: var(--brand-2); }
.bar.s2 .bar-t i { background: var(--accent); }
.bar-v { text-align: right; font-weight: 800; }
.m-see { margin-top: 10px; font-size: 12px; color: var(--ink-3); line-height: 1.65; }

.time-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px; box-shadow: var(--shadow-s); }
.inputs { padding: 14px 16px; border-radius: var(--r-m); background: var(--warn-soft); border: 1.5px solid var(--warn-line); align-self: start; }
.in-h { font-weight: 800; font-size: 13.5px; color: var(--warn); }
.in { display: block; margin-top: 12px; }
.in span { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.in input { width: 100%; height: 42px; margin-top: 4px; padding: 0 12px; border: 1.5px solid var(--warn-line); border-radius: var(--r-s); background: var(--surface); font-size: 17px; font-weight: 800; text-align: right; font-feature-settings: "tnum"; }
.in small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
.in-dummy { margin-top: 12px; font-size: 12px; color: var(--ink-3); line-height: 1.6; }
.results { margin: 0; display: grid; gap: 0; align-content: start; }
.results > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); }
.results > div:first-child { border-top: 0; }
.results dt { font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.5; }
.results dt small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.results dd { margin: 0; text-align: right; white-space: nowrap; }
.results dd b { font-size: 20px; font-weight: 800; }
.results dd span { margin-left: 4px; font-size: 12px; color: var(--ink-3); }
.results .hl { background: var(--paper); border-radius: var(--r-s); border-top: 0; margin-top: 4px; padding: 10px 12px; }
.results .hl dd b { font-size: 24px; color: var(--accent-deep); }

.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.bars-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 6px 18px 16px; box-shadow: var(--shadow-s); }
.hbars { list-style: none; margin: 0; display: grid; gap: 12px; }
.hbars li { display: grid; grid-template-columns: 124px minmax(0, 1fr) 46px; grid-template-areas: "l t v" ". s s"; align-items: center; gap: 2px 10px; font-size: 13.5px; }
.hb-l { grid-area: l; font-weight: 600; }
.hb-t { grid-area: t; height: 12px; background: var(--sunken); border-radius: 6px; overflow: hidden; }
.hb-t i { display: block; height: 100%; background: var(--brand-2); border-radius: 6px; }
.hbars li b { grid-area: v; text-align: right; }
.hbars li small { grid-area: s; font-size: 12px; color: var(--ink-3); line-height: 1.5; }

.sheet-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.sheet-tabs button { padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--surface); font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.sheet-tabs button[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.tbl.sheet { font-size: 12.5px; }
.tbl.sheet td { white-space: nowrap; }
.tbl-wrap:has(.sheet) { max-height: 420px; overflow: auto; }
.tbl.sheet th { position: sticky; top: 0; }
.ef-dl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.ef-dl a { text-decoration: none; }
.ef-dl span { font-size: 12.5px; color: var(--ink-3); }

@media (max-width: 1000px) {
  .mat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sl-grid { grid-template-columns: minmax(0, 1fr); }
  .sl-thumbs { display: flex; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .sl-thumbs button { flex: none; width: 120px; }
  .pr-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pr-menu { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-card, .two-col { grid-template-columns: minmax(0, 1fr); }
  .flow-row { grid-template-columns: 44px minmax(0, 1fr) 150px 44px; }
}
@media (max-width: 640px) {
  .btn, .at .btn-s { min-height: 44px; }
  .mat-btns .btn { flex: 1 1 auto; justify-content: center; }
  .sl-arrow { width: 44px; height: 44px; }
  .px-need { flex-basis: 100%; }
  .at { padding-top: 14px; }
  .at-tabs { gap: 2px; padding: 4px; width: 100%; justify-content: space-between; margin-bottom: 18px; }
  .at-tabs button { flex-direction: column; gap: 2px; padding: 5px 4px; font-size: 11.5px; flex: 1; border-radius: 14px; }
  .at-tabs-line { width: 6px; }
  .view-head h2 { font-size: 20px; }
  .view-lead { font-size: 14px; line-height: 1.8; }
  .mat-grid { grid-template-columns: minmax(0, 1fr); }
  .flow-card { padding: 14px; }
  .flow-row { grid-template-columns: 38px minmax(0, 1fr) 40px; grid-template-areas: "t m min" ". b b"; gap: 4px 8px; }
  .flow-t { grid-area: t; } .flow-m { grid-area: m; } .flow-min { grid-area: min; } .flow-bar { grid-area: b; }
  .sl-arrow { width: 44px; height: 44px; }
  .sl-bar .btn { min-width: 0; flex: 1; }
  .sl-count { flex: none; }
  .pr-menu { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pm { padding: 9px 12px; }
  .pm-t small { display: none; }
  .px { padding: 16px 14px 14px; border-radius: var(--r-m); }
  .px-title { font-size: 18px; }
  .px-box { padding: 12px; }
  .qrow { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "n t" "o o" "w w"; }
  .qrow .opts { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
  .qrow .opts.two { --cols: 2; }
  .opt { min-width: 0; padding: 4px 6px; }
  .opt small { white-space: normal; text-align: center; }
  .mn-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mn-row.mn-head { display: none; }
  .mn-t { grid-column: 1 / -1; }
  .mn-f i { display: block; margin-bottom: 2px; }
  .mn select { font-size: 16px; height: 42px; }
  .num-in input { font-size: 16px; height: 42px; }
  .sent .q-why { padding-left: 14px; }
  .opt.o-n { min-width: 0; flex: 1; }
  .tbl .hm { display: none; }
  .tbl td { white-space: normal; }
  .tbl.sheet td { white-space: nowrap; }
  .qq .opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .px-foot { justify-content: stretch; }
  .px-foot .btn, .px-btns .btn { width: 100%; }
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .time-card { padding: 12px; }
  .results dd b { font-size: 18px; }
  .results .hl dd b { font-size: 21px; }
  .in input { font-size: 16px; }
  .hbars li { grid-template-columns: 100px minmax(0, 1fr) 42px; }
  .bars-card { padding: 4px 14px 14px; }
  .ef-dl .btn { width: 100%; }
}
.tbl td.r, .tbl td:first-child { white-space: nowrap; }

/* 問題の上の「残り◯問」の帯。押すと、下の「答え合わせ」へ移る（長い問題でも探さずに行ける） */
.px-jump { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; padding: 8px 12px; border-radius: var(--r-m); background: var(--accent-soft); border: 1px solid var(--accent); }
.px-jump[hidden] { display: none; }
.px-jump small { flex-basis: 100%; order: 3; font-size: 12.5px; color: var(--ink-2); }
.px-jump b { font-size: 14px; font-weight: 800; color: var(--accent-deep); }
.px-jump .btn { min-height: 44px; }
@media (max-width: 640px) { .px-jump .btn { width: 100%; } }