:root {
  /* 白と紺(販売ページとそろえる。2026-10-09)。ダークは設定で選べる */
  --paper:#f4f6fa; --surface:#fff; --ink:#14213d; --sub:#5a6478; --line:#dfe3ea;
  --accent:#1d3461; --accent-soft:#e8eef8; --on-accent:#fff;
  --red:#b0413e; --btn:#eceff5; --btn-press:#e0e5ee;
  --mincho:"BIZ UDPMincho","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --gothic:"BIZ UDPGothic","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  color-scheme:light; box-sizing:border-box;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --paper:#0f1524; --surface:#182036; --ink:#e6ebf5; --sub:#a3aec4; --line:#2c3754;
    --accent:#8fb0e8; --accent-soft:#1e2a47; --on-accent:#0f1524;
    --red:#ff7b6e; --btn:#1e2740; --btn-press:#27324f; color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --paper:#0f1524; --surface:#182036; --ink:#e6ebf5; --sub:#a3aec4; --line:#2c3754;
  --accent:#8fb0e8; --accent-soft:#1e2a47; --on-accent:#0f1524;
  --red:#ff7b6e; --btn:#1e2740; --btn-press:#27324f; color-scheme:dark;
}
*,*::before,*::after {box-sizing:inherit}
html {min-height:100%; -webkit-text-size-adjust:100%; scroll-padding-top:70px}
body {margin:0; min-height:100vh; padding-bottom:env(safe-area-inset-bottom,0px); background:var(--paper); color:var(--ink); font:16px/1.6 var(--gothic)}
button,input {font:inherit; color:inherit}
button {touch-action:manipulation}
button:disabled {cursor:wait}
a {color:inherit; overflow-wrap:anywhere}
:focus-visible {outline:3px solid var(--sub); outline-offset:4px}
[hidden] {display:none!important}
.sr-only {position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.wrap {max-width:38rem; margin:0 auto; padding:0 20px}
.bar {position:sticky; top:0; z-index:5; padding-top:env(safe-area-inset-top,0px); background:var(--paper); border-bottom:1px solid var(--line)}
.bar .wrap {display:flex; align-items:center; gap:14px; min-height:58px}
.bar h1 {flex:1; font-size:17px; font-weight:700; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.count {font-size:14px; font-variant-numeric:tabular-nums; color:var(--sub); white-space:nowrap}
.icon-btn {display:grid; place-items:center; width:42px; height:42px; flex:none; margin:0 -6px; padding:10px; background:none; border:0; border-radius:8px; cursor:pointer; color:var(--sub)}
.icon-btn:hover {color:var(--ink); background:var(--btn)}
.icon-btn svg {width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.progress {height:3px; background:var(--line)}
.progress i {display:block; height:100%; width:0; background:var(--accent); transition:width .2s}
.status {margin:18px 0 0; padding:12px 14px; background:var(--btn); border-radius:10px; font-size:14px; overflow-wrap:anywhere}
.status.err {border-left:3px solid var(--red)}
.home {padding:8px 0 40px}
.list {list-style:none; margin:0; padding:0}
.list li {border-bottom:1px solid var(--line)}
.row {width:100%; display:flex; align-items:center; gap:16px; background:none; border:0; padding:18px 4px; text-align:left; cursor:pointer}
.row:hover {background:var(--surface)}
.row .name {flex:1; font-size:18px; font-weight:700}
.row .meta {font-size:14px; color:var(--sub); font-variant-numeric:tabular-nums}
.row svg {width:18px; height:18px; flex:none; fill:none; stroke:var(--sub); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.opts {display:grid; gap:18px; margin-top:28px}
.home-scope {margin:16px 0 20px}
.shuffle-actions {padding:0 0 24px; border-bottom:1px solid var(--line)}
.shuffle-count {font-size:14px; color:var(--sub); margin:8px 0 16px; line-height:1.7}
.topic-picker {margin-top:18px; border:1px solid var(--line); border-radius:12px; padding:0 16px; background:var(--surface)}
.topic-picker summary {min-height:54px; padding:14px 0; font-weight:700; cursor:pointer}
.topic-picker[open] {padding-bottom:16px}
.topic-toolbar {display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line)}
.topic-toolbar .link-btn {color:var(--sub); font-size:14px}
.topic-choices {list-style:none; padding:0; margin:0}
.topic-choices li {border-bottom:1px solid var(--line)}
.topic-choices label {display:flex; align-items:center; gap:12px; min-height:52px; cursor:pointer; padding:10px 0}
.topic-choices input {width:20px; height:20px; margin:0; flex:none; accent-color:var(--accent)}
.topic-name {flex:1; font-size:16px; overflow-wrap:anywhere}
.topic-choices .meta {font-size:14px; color:var(--sub); white-space:nowrap}
.home-heading {font-size:16px; margin:24px 0 12px}
.question-topic {font-size:14px; color:var(--sub); margin:0 0 12px}
.seg {display:flex; background:var(--btn); border-radius:10px; padding:3px}
.seg button {flex:1; min-height:44px; padding:10px 8px; border:0; background:none; border-radius:8px; font-size:15px; color:var(--sub); cursor:pointer}
.seg button[aria-pressed="true"] {background:var(--surface); color:var(--ink); font-weight:700; box-shadow:0 1px 2px #141e321f}
.resume {display:flex; align-items:center; gap:12px; width:100%; margin:14px 0 8px; padding:15px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); text-align:left; cursor:pointer}
.resume>span:first-child {font-weight:700; white-space:nowrap}
.resume-detail {flex:1; font-size:13px; color:var(--sub); overflow-wrap:anywhere}
.quiz {padding:24px 0 40px}
.q-text {font-family:var(--mincho); font-size:19px; line-height:2; letter-spacing:.02em; margin:0 0 28px; min-height:6em; white-space:pre-line; overflow-wrap:anywhere}
.q-text:focus {outline:none}
.answer-btns {display:grid; grid-template-columns:1fr 1fr; gap:12px}
.mark-btn {display:grid; place-items:center; height:88px; border:1px solid var(--line); border-radius:14px; background:var(--surface); cursor:pointer; transition:background .12s}
.mark-btn:hover {background:var(--btn)}
.mark-btn:active {background:var(--btn-press)}
.mark-btn svg {width:44px; height:44px; fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round}
.mark-btn:disabled {cursor:default; opacity:.35}
.mark-btn.chosen {opacity:1; border:2px solid var(--accent)}
.mark-btn.chosen.miss {border-color:var(--red)}
.result {margin-top:28px; padding-top:24px; border-top:1px solid var(--line)}
.verdict {margin:0 0 20px}
.stamp {width:74px; height:74px; color:var(--accent)}
.stamp path,.stamp circle {fill:none; stroke:currentColor; stroke-width:6; stroke-linecap:round; stroke-linejoin:round}
.stamp .draw {stroke-dasharray:140; stroke-dashoffset:140; animation:draw .4s ease-out forwards}
@keyframes draw {to {stroke-dashoffset:0}}
.fix {font-family:var(--mincho); font-size:18px; line-height:1.9; margin:0 0 24px; overflow-wrap:anywhere; white-space:pre-line}
.fix .arrow {color:var(--sub); padding:0 .3em}
.fix .to {font-weight:700}
.note {font-size:16px; line-height:1.85; margin:-12px 0 24px; color:var(--sub); white-space:pre-line; overflow-wrap:anywhere}
.fix[hidden]+.note {margin-top:0}
.primary,.secondary {width:100%; min-height:54px; padding:12px 16px; border-radius:12px; font-size:17px; cursor:pointer}
.primary {border:0; background:var(--accent); color:var(--on-accent); font-weight:700}
.primary:hover {opacity:.9}
.primary:disabled,.secondary:disabled,.link-btn:disabled {opacity:.6; cursor:wait}
.secondary {border:1px solid var(--line); background:var(--surface); font-size:16px; margin-top:10px}
.done {padding:48px 0; text-align:left}
.score {font-family:var(--mincho); font-size:44px; font-weight:700; margin:0 0 32px; font-variant-numeric:tabular-nums}
.score span {font-size:20px; font-weight:400; color:var(--sub); margin-left:.3em}
.panel {padding:32px 0 40px}
.panel h2 {font-family:var(--mincho); font-size:22px; margin:0 0 14px}
.panel p {color:var(--sub); margin:0 0 16px}
.field {width:100%; min-height:54px; border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:0 16px; margin-bottom:12px; font:18px/1.6 ui-monospace,monospace; letter-spacing:.04em}
.sec {border-top:1px solid var(--line); padding:22px 0}
.sec.first {padding-top:0; border:0}
.panel .setting-heading {font-family:var(--gothic); font-size:16px; margin:0 0 8px}
.license {padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:10px; color:var(--ink)!important; overflow-wrap:anywhere}
.link-btn {background:none; border:0; padding:10px 0; color:var(--accent); text-decoration:underline; cursor:pointer; font-size:15px; min-height:44px}
.file-label {display:block; margin:20px 0 8px; font-size:15px}
input[type="file"] {max-width:100%; width:100%; padding:8px 0; color:var(--sub); font-size:14px}
.panel .small {font-size:12.5px; color:var(--sub); line-height:1.8; margin:8px 0}
.credit {font-size:12.5px; line-height:1.9}
.edition {margin-top:20px!important}
.action-link {display:block; text-align:center; text-decoration:none; margin-bottom:16px}
.account-link {display:inline-block; padding:8px 0}
.auth-tabs {margin:18px 0 8px}
.auth-field {font-family:var(--gothic); font-size:16px; letter-spacing:normal}
.email-preference{display:flex;align-items:center;gap:8px;font-size:14px}.email-preference input{width:20px;height:20px;flex:none}.material-item{padding:20px 0;border-bottom:1px solid var(--line)}.material-item h3{font-size:16px;margin:0}.material-item p{font-size:12px}.material-item a{display:inline-block;margin:8px 18px 0 0;font-size:14px}#legacyKeyDetails{margin-top:20px}#legacyKeyDetails summary{font-size:13px;min-height:44px;padding:10px 0}
.account-password {margin-top:12px}
.account-password summary {cursor:pointer; min-height:44px; padding:10px 0; font-size:14px}
.key-output {height:150px; padding:12px; font-size:14px; line-height:1.8; resize:vertical; margin-top:8px}
.license-list {margin-top:12px}
.license-row {padding:14px 0; border-bottom:1px solid var(--line)}
.license-row p {margin:0; font-size:14px; color:var(--ink)}
.license-row .link-btn {font-size:13px; min-height:40px}
@media (min-width:640px) {.q-text {font-size:20px}}
@media (max-width:390px) {.wrap {padding:0 16px} .row .name {font-size:16px} .bar h1 {font-size:16px}}
@media (prefers-reduced-motion:reduce) {.stamp .draw {animation:none; stroke-dashoffset:0} .progress i {transition:none}}

/* 講義の動画(購入した教材の画面) */
.lecture{margin-top:12px}
.lecture video{display:block;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px}
.lecture-now{font-size:14px!important;font-weight:700;margin:10px 0 4px;color:var(--ink)}
.lecture-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lecture-nav button{min-height:40px;padding:6px 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:14px;cursor:pointer}
.lecture-nav button:disabled{opacity:.4;cursor:default}
.lecture-auto{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:12px;color:var(--sub)}
.lecture-auto input{width:18px;height:18px}
.lecture-total{font-size:12px!important;color:var(--sub);margin:10px 0 0}
.lecture-toc{margin-top:6px;border-top:1px solid var(--line)}
.lecture-group{border-bottom:1px solid var(--line)}
.lecture-group summary{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:4px;font-size:15px;font-weight:700;cursor:pointer}
.lecture-count{font-size:12px;font-weight:400;color:var(--sub);font-variant-numeric:tabular-nums}
.lecture-group ol{margin:0 0 8px;padding:0;list-style:none}
.lecture-group li{display:flex;margin:0;padding:0;align-items:center;gap:4px;border-top:1px solid var(--line)}
.lecture-play{flex:1;text-align:left;background:none;border:0;padding:10px 4px;font-size:14px;color:var(--ink);cursor:pointer}
.lecture-mark{flex:none;padding:0;min-height:0;width:28px;height:28px;margin-left:2px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);font-size:14px;line-height:1;cursor:pointer}
.lecture-group li.done .lecture-play{color:var(--sub)}
.lecture-group li.done .lecture-mark{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.lecture-group li.on .lecture-play{font-weight:700;color:var(--ink)}
.lecture-group li.on .lecture-play::before{content:"▶ "}
.lecture-credit{font-size:11px!important;color:var(--sub);margin:12px 0 0}

/* 教材の本棚(2026-10-09。1つの教材を1枚のカードに) */
.shelf{padding:8px 0 48px}
.shelf-subject{margin-top:20px}
.shelf-heading{font-size:15px;font-weight:700;color:var(--sub);letter-spacing:.06em;margin:0 0 10px}
.cards{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){.cards{grid-template-columns:1fr 1fr}.card-main{grid-column:1/-1}}
.card{padding:14px 16px 6px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink)}
.card-main{border:2px solid var(--accent)}
.card-title{font-size:17px;font-weight:700;line-height:1.5;margin:0 0 6px;overflow-wrap:anywhere}
.card-main .card-title{font-size:19px}
.row-study,.row-open{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 0;background:none;border:0;border-top:1px solid var(--line);color:var(--ink);text-align:left;text-decoration:none;font:inherit;cursor:pointer}
.card-title+.row-study,.card-title+.row-file .row-open{border-top:0}
.row-file{display:flex;align-items:stretch;border-top:1px solid var(--line)}
.card-title+.row-file{border-top:0}
.row-file .row-open{flex:1;border-top:0}
.row-text{flex:1;display:flex;flex-direction:column;min-width:0}
.row-main{font-size:15px;font-weight:700;overflow-wrap:anywhere}
.row-study .row-main{color:var(--accent)}
.row-sub{font-size:12px;color:var(--sub)}
.row-arrow{color:var(--accent);font-weight:700}
.row-save{flex:none;display:grid;place-items:center;padding:0 4px 0 14px;color:var(--accent);font-size:13px;font-weight:700;text-decoration:none}
.row-study:hover .row-main,.row-open:hover .row-main{text-decoration:underline}
.card-kind{flex:none;display:inline-block;min-width:56px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.card-kind.kind-xls{background:#e3f1e8;color:#1d6b45}
.card-kind.kind-video{background:#efe9fb;color:#5a3d99}
:root[data-theme="dark"] .card-kind.kind-xls{background:#173326;color:#8fd6ae}
:root[data-theme="dark"] .card-kind.kind-video{background:#2a2246;color:#c3b2f0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card-kind.kind-xls{background:#173326;color:#8fd6ae}:root:not([data-theme="light"]) .card-kind.kind-video{background:#2a2246;color:#c3b2f0}}
.shelf-notice{margin:16px 0 4px;padding:14px 16px;border-radius:12px;background:var(--accent-soft);font-size:14px}
.shelf-notice p{margin:0}
.shelf-empty{padding:28px 0}
.shelf-empty p{color:var(--sub);margin:0 0 16px}
.shelf-more{display:block;margin-top:28px;font-size:14px;color:var(--accent)}
.shelf-empty .primary{display:flex;align-items:center;justify-content:center;text-decoration:none}