/* eigo 練習帳 — 画面の見た目（パソコン・iPhone・Android 共通） */
:root{
  --bg:#EEF1F4; --surface:#FFFFFF; --ink:#15202A; --muted:#5A6875; --line:#D3DAE1;
  --accent:#1D3F66; --accent-soft:#E2E9F2;
  --red:#D2322B; --red-dim:#F4DAD8; --green:#17915A; --green-dim:#D5EEDF;
  --warn:#F1E3C6; --amber:#B7791F; --amber-dim:#F7EBD3;
  --role0:#B8305F; --role1:#1D3F66; --role2:#1E5B4C; --role3:#7A4B12;
  --en:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --ja:"Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E141A; --surface:#16202A; --ink:#E6ECF1; --muted:#95A4B2; --line:#2A3845;
    --accent:#8DB4E2; --accent-soft:#1C2C3D;
    --red:#FF5E52; --red-dim:#3B1D1B; --green:#3DD68C; --green-dim:#133526;
    --warn:#3A3120; --amber:#F2B84B; --amber-dim:#352A14;
    --role0:#F07AA3; --role1:#8DB4E2; --role2:#7CCBB3; --role3:#E0B070;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E141A; --surface:#16202A; --ink:#E6ECF1; --muted:#95A4B2; --line:#2A3845;
  --accent:#8DB4E2; --accent-soft:#1C2C3D;
  --red:#FF5E52; --red-dim:#3B1D1B; --green:#3DD68C; --green-dim:#133526;
  --warn:#3A3120; --amber:#F2B84B; --amber-dim:#352A14;
  --role0:#F07AA3; --role1:#8DB4E2; --role2:#7CCBB3; --role3:#E0B070;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ja);font-size:15px;line-height:1.7;
  padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--accent)}
h1,h2,h3{text-wrap:balance;margin:0}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--ink)}
button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted)} .small{font-size:12px}
.empty{color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:10px;padding:16px}

/* ---------- ヘッダー ---------- */
header.site{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink);min-width:0}
.brand-mark{font-family:var(--en);font-weight:800;font-stretch:72%;font-size:26px;line-height:1;letter-spacing:-.01em}
.brand-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gnav{display:flex;gap:4px;flex-shrink:0}
.gnav a{font-size:14px;font-weight:700;text-decoration:none;color:var(--muted);padding:6px 10px;border-radius:8px}
.gnav a.on{color:var(--ink);background:var(--accent-soft)}
.flash{max-width:1100px;margin:12px auto 0;padding:10px 14px;background:var(--green-dim);border-radius:8px;font-size:14px;width:calc(100% - 32px)}
@media (max-width:420px){ .brand-sub{display:none} }

/* ---------- ボタン・フォーム ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--accent);background:var(--accent);color:var(--surface);
  border-radius:8px;padding:9px 18px;font-weight:700;font-size:15px;text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.sm{padding:5px 12px;font-size:13px}
.linkbtn{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;font-size:12px}
.linkbtn.armed{color:var(--red)}
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);font-weight:500}
.form input:not([type=radio]):not([type=checkbox]):not([type=file]),.form select,.form textarea,.inline input,.inline select,.tbl select{
  font-size:16px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface);width:100%}
.form textarea{resize:vertical;line-height:1.6}
.form .btn{align-self:flex-start}
.err{margin:0;padding:10px 12px;background:var(--red-dim);color:var(--ink);border-radius:8px;font-size:14px}
fieldset.vis{border:1px solid var(--line);border-radius:10px;padding:8px 14px 12px;margin:0;display:flex;flex-direction:column;gap:6px}
fieldset.vis legend{font-size:13px;color:var(--muted);padding:0 4px}
fieldset.vis label{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:14px}
.inline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0}
.inline input,.inline select{width:auto;min-width:0;flex:1 1 140px;font-size:15px;padding:6px 10px}
.inline .num{flex:0 0 76px}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);line-height:1.6}
.b-priv{background:var(--amber-dim);color:var(--amber)}
.b-mem{background:var(--green-dim);color:var(--green)}
.b-queue{background:var(--amber-dim);color:var(--amber)}
.b-done{background:var(--green-dim);color:var(--green)}
.star{border:0;background:none;font-size:22px;line-height:1;padding:4px 6px;color:var(--line);-webkit-text-stroke:1px var(--muted)}
.star.on{color:var(--amber);-webkit-text-stroke:0}
.pill{border:1px solid var(--accent);background:var(--accent);color:var(--surface);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700}
.pill.ghost{background:transparent;color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{font-size:13px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);color:var(--ink);text-decoration:none;background:var(--surface)}
.chips a.hl{background:var(--accent);border-color:var(--accent);color:var(--surface);font-weight:700}

/* ---------- ログイン ---------- */
.authbox{max-width:420px;margin:40px auto;padding:24px 20px;background:var(--surface);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:14px}
.authbox h1{font-size:22px}
@media (max-width:460px){ .authbox{margin:16px;} }

/* ---------- 教材一覧 ---------- */
.libwrap{max-width:1100px;margin:0 auto;padding:12px 16px 40px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.libtop{display:flex;gap:8px;min-width:0}
.searchbar{display:flex;gap:6px;flex:1;min-width:0}
.searchbar input{flex:1;min-width:0;font-size:16px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.searchbar .btn,.fopen{padding:9px 12px;flex-shrink:0}
.fopen{position:relative;gap:4px}
.fcount{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:var(--surface);font-size:11px;padding:0 5px}
/* 絞り込み：スマホは下から出るシート */
.fback{position:fixed;inset:0;z-index:30;background:rgba(10,20,30,.45)}
.ffilter{position:fixed;z-index:31;left:0;right:0;bottom:0;max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;background:var(--surface);
  border-radius:16px 16px 0 0;border-top:2px solid var(--ink);box-shadow:0 -10px 30px -12px rgba(10,20,30,.45);transform:translateY(105%);transition:transform .22s ease;visibility:hidden}
body.fopen .ffilter{transform:none;visibility:visible}
body.fopen{overflow:hidden}
.ffhead{position:relative;display:flex;align-items:baseline;gap:10px;padding:14px 48px 8px 16px;border-bottom:1px solid var(--line)}
.ffhead b{font-size:16px}
.ffbody{overflow:auto;padding:6px 16px 10px;display:flex;flex-direction:column;gap:4px;overscroll-behavior:contain}
.fstep{border:0;margin:0;padding:8px 0;border-bottom:1px dashed var(--line);min-width:0}
.fstep:last-child{border-bottom:0}
.fstep legend{padding:0;margin-bottom:6px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px}
.sn{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--surface);font-size:11px;font-family:var(--en)}
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchips label{position:relative;cursor:pointer}
.fchips input{position:absolute;opacity:0;pointer-events:none}
.fchips span{display:inline-flex;align-items:center;gap:6px;font-size:14px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);line-height:1.4}
.fchips .n{font-style:normal;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.fchips input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:700}
.fchips input:checked + span .n{color:inherit;opacity:.75}
.fchips input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.fchips label.zero span{opacity:.45}
.fchips .lvc.lv-beginner input:checked + span{background:var(--green);border-color:var(--green)}
.fchips .lvc.lv-intermediate input:checked + span{background:var(--amber);border-color:var(--amber)}
.fchips .lvc.lv-advanced input:checked + span{background:var(--red);border-color:var(--red)}
.fsubhint{margin:0}
.ffoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 12px);border-top:1px solid var(--line)}
.btn.go{flex:0 1 240px;padding:12px 18px;font-size:16px}
.btn.go .gonum{font-weight:500;opacity:.85;font-size:13px}
.btn.go.none{opacity:.5}
.results{display:flex;flex-direction:column;gap:10px;min-width:0}
.reshead h1{font-size:18px;display:flex;align-items:baseline;gap:8px}
.rescount{font-size:13px;color:var(--muted);font-weight:500}
.applied{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.achip{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:3px 6px 3px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent);text-decoration:none;font-weight:700}
.achip b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--surface);font-size:12px;line-height:1}
.applied .clear{font-size:12px;color:var(--red);margin-left:4px}
/* 教材カード：スマホは横長の行（表紙は小さく）で、1画面に何本も見えるように */
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:0}
.card-a{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;padding:10px 38px 10px 10px;text-decoration:none;color:var(--ink);height:100%}
.card .star{position:absolute;top:4px;right:2px;font-size:20px}
.card-a .cover{display:block;width:84px;aspect-ratio:4/3;align-self:start;overflow:hidden;border-radius:8px;background:var(--accent-soft)}
.cbody{display:flex;flex-direction:column;gap:1px;min-width:0}
.card-a .tags{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0}
.crumb{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 0}
.ct{font-family:var(--en);font-weight:800;font-stretch:84%;font-size:18px;line-height:1.15;margin-top:2px;overflow-wrap:anywhere}
.cs{font-weight:700;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.ck{display:none}
.cmeta{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11px;color:var(--muted);margin-top:2px;align-items:center}
.prow{display:flex;align-items:center;gap:8px;margin-top:4px}
.pbar{display:block;height:5px;border-radius:3px;background:var(--line);overflow:hidden;flex:1}
.pbar i{display:block;height:100%;background:var(--green)}
.pnum{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
@media (min-width:640px){
  .cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
  .card-a{grid-template-columns:1fr;gap:6px;padding:0 0 12px}
  .card-a .cover{width:auto;aspect-ratio:2/1;border-radius:11px 11px 0 0}
  .cbody{padding:0 40px 0 14px}
  .card .star{top:auto;bottom:6px;right:6px}
  .ct{font-size:20px}
  .ck{display:block;font-size:12px;color:var(--muted)}
}
@media (min-width:900px){
  .libwrap{grid-template-columns:270px minmax(0,1fr);align-items:start}
  .libtop{grid-column:1 / -1}
  .fopen,.libwrap .fback,.ffhead .wpx{display:none!important}
  .ffilter{position:sticky;top:72px;left:auto;right:auto;bottom:auto;max-height:calc(100vh - 92px);transform:none;visibility:visible;border:1px solid var(--line);border-radius:12px;box-shadow:none;z-index:1}
  .ffhead{padding-right:16px;flex-direction:column;gap:0}
  .ffoot{padding-bottom:12px}
  .btn.go{flex:1}
}

/* ---------- マイページ・管理 ---------- */
.mewrap{max-width:900px;margin:0 auto;padding:16px 16px 80px;display:flex;flex-direction:column;gap:22px}
.mehead{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.mehead h1,.mewrap > h1{font-size:22px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stats div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column}
.stats b{font-family:var(--en);font-size:30px;font-weight:800;font-stretch:80%;line-height:1.1;font-variant-numeric:tabular-nums}
.stats span{font-size:12px;color:var(--muted)}
.mesec{display:flex;flex-direction:column;gap:10px;scroll-margin-top:70px}
.mesec h2{font-size:18px;border-bottom:2px solid var(--ink);padding-bottom:6px}
.mesec h2 small{font-size:13px;color:var(--muted);font-weight:500}
.mlist,.mine{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mlist li,.mine li{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.mlist a{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);flex:1 1 220px;min-width:0}
.mt{font-weight:700;color:var(--ink)} .ms{font-size:12px;color:var(--muted)}
.mlist .pbar{flex:1 1 120px;margin:0}
.visform{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;width:100%}
.visform label{display:flex;align-items:center;gap:4px}
.wordlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.wordlist li{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 8px 8px 10px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.wordlist .we{font-family:var(--en);font-weight:600;font-size:17px}
.wordlist .wj{font-size:14px;flex:1 1 160px}
.wordlist .wx{font-size:12px;color:var(--muted);flex-basis:100%;padding-left:40px}
.wordlist .star{margin-left:auto}
.wordlist.quiz .wj{color:transparent;background:var(--line);border-radius:4px;cursor:pointer}
.wordlist.quiz .wj.show{color:inherit;background:none}
.wbtn{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;flex:1 1 200px;text-align:left;border:0;background:none;padding:0}
.say{width:32px;height:32px;border-radius:50%;border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent);font-size:12px;flex-shrink:0}
.wtools{display:flex;gap:8px}
.acc{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.qitem{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.qitem h3{font-size:15px}
.qbody{white-space:pre-wrap;font-size:13px;max-height:320px;overflow:auto;background:var(--bg);padding:10px;border-radius:8px}
.tablewrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px;background:var(--surface)}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
.tbl select{font-size:13px;padding:5px 6px;min-width:130px}
.catedit{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.catedit ul{list-style:none;padding-left:22px;margin:0}
code{font-family:ui-monospace,Menlo,monospace;background:var(--bg);padding:1px 6px;border-radius:4px}

/* ---------- 教材プレーヤー ---------- */
.crumbs{max-width:760px;margin:0 auto;padding:12px 16px 0;font-size:12px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.wrap{max-width:760px;margin:0 auto;padding-inline:16px;padding-block:12px 80px;display:flex;flex-direction:column;gap:28px}
.top{display:flex;flex-direction:column;gap:12px}
.tophead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.eyebrow{margin:0;font-size:12px;color:var(--muted);letter-spacing:.04em}
.top h1{font-family:var(--en);font-weight:800;font-stretch:72%;font-size:clamp(40px,11vw,68px);line-height:.95;letter-spacing:-.01em}
.top h1 small{display:block;font-family:var(--ja);font-weight:700;font-size:.36em;letter-spacing:.02em;margin-top:.35em;font-stretch:100%}
.ownline{margin:0}
.lead{margin:0;max-width:62ch;color:var(--muted)}
.lead b{color:var(--ink);font-weight:700}
.lead.tip{font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.meter{margin:6px 0 0;display:flex;flex-direction:column;gap:4px}
.meter svg{width:100%;height:auto;display:block}
.meter figcaption{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}

.bar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 58px);z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;box-shadow:0 6px 18px -12px rgba(10,20,30,.35)}
.lamps{display:flex;gap:10px}
.lamp{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--muted);letter-spacing:.06em}
.lamp i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);background:var(--bg);transition:background .15s, box-shadow .15s}
.lamp.red.on i{background:var(--red);border-color:var(--red);box-shadow:0 0 12px var(--red)}
.lamp.green.on i{background:var(--green);border-color:var(--green);box-shadow:0 0 12px var(--green)}
.lamp.white.on i{background:var(--amber);border-color:var(--amber);box-shadow:0 0 12px var(--amber)}
.status{min-width:0;display:flex;flex-direction:column;gap:4px}
.status p{margin:0;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status .now{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gap{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.gap span{display:block;height:100%;width:0;background:var(--green)}

.settings{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px 14px}
.settings summary{padding:8px 0;font-weight:700;font-size:14px;cursor:pointer}
.setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 20px;padding:4px 0 14px}
.set .lab{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;letter-spacing:.04em}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;background:var(--surface);padding:6px 12px;font-size:13px;font-variant-numeric:tabular-nums;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--surface);font-weight:700}
.settings select{font-size:13px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);width:100%}
.warn{margin:0 0 12px;padding:8px 12px;border-radius:8px;background:var(--warn);font-size:13px}

#body{display:flex;flex-direction:column;gap:28px}
section{display:flex;flex-direction:column;gap:14px;scroll-margin-top:140px}
.sechead{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:10px;border-bottom:2px solid var(--ink);padding-bottom:8px}
.sechead h2{font-size:20px;font-weight:700}
.sechead p{margin:2px 0 0;font-size:13px;color:var(--muted);max-width:60ch}
.secbtns{display:flex;gap:8px;flex-wrap:wrap}
.group{display:flex;flex-direction:column;gap:10px}
.group h3{font-size:14px;color:var(--muted);font-weight:700;letter-spacing:.04em;margin-top:6px}
ol.lines,ul.lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.line{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px 12px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s, box-shadow .2s;scroll-margin-top:150px}
.line.is-playing{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.lhead{display:flex;justify-content:space-between;align-items:center;min-height:24px;margin:-4px -6px -6px 0}
.lhead .star{font-size:18px}
.who{display:inline-block;font-family:var(--en);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:1px 8px;border-radius:4px;border:1px solid currentColor;color:var(--role1)}
.who.Mia{color:var(--role0)} .who.Anna{color:var(--role1)}
.en-text{font-family:var(--en);font-weight:600;font-size:clamp(19px,5vw,24px);line-height:1.35;margin:0;transition:filter .2s}
.en-text .w{cursor:pointer;border-radius:3px;-webkit-tap-highlight-color:transparent}
.en-text .w:hover{background:var(--accent-soft)}
.en-text .w.gl{text-decoration:underline dotted var(--muted);text-underline-offset:4px;text-decoration-thickness:1.5px}
.en-text .ph{text-decoration:underline solid var(--amber);text-underline-offset:5px;text-decoration-thickness:2px;border-radius:3px}
.en-text .ph.sel,.en-text .w.sel{background:var(--amber-dim)}
.ja{margin:0;font-size:14px;color:var(--ink)}
.exp{margin:0;font-size:13px;color:var(--muted);padding-left:10px;border-left:2px solid var(--line)}
.exp b,.why b[lang],.expd b,.wpnote b{font-family:var(--en);font-weight:600;color:var(--ink)}
.expd{margin:0;font-size:13px;color:var(--muted);padding-left:10px;border-left:2px dashed var(--line)}
.expd summary{cursor:pointer;color:var(--amber);font-weight:700;font-size:12px;letter-spacing:.04em}
.expd p{margin:6px 0 2px;line-height:1.8}
.speaking{border-left-color:var(--amber)!important;color:var(--ink)!important}
.acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.act{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:6px 12px;font-size:13px;font-weight:500}
.act svg{width:14px;height:14px;fill:currentColor}
.act.rep{border-color:var(--green);color:var(--green)}
.act.exp-btn{border-color:var(--amber);color:var(--amber)}
.act.mic{border-color:var(--accent);color:var(--accent)}
.done{margin-left:auto;font-size:12px;color:var(--green);font-weight:700}
.chainrow{display:flex;flex-wrap:wrap;gap:6px;font-family:var(--en);font-size:12px;color:var(--muted)}
.chainrow span{padding:1px 6px;border-radius:4px;background:var(--bg)}
.chainrow span.cur{background:var(--green-dim);color:var(--ink)}
.pron{margin:0;font-size:13px;padding:6px 10px;border-radius:8px;background:var(--bg)}
.pron.pass{background:var(--green-dim)} .pron.fail{background:var(--red-dim)}
.pron b{margin-right:6px}
.pron mark{background:var(--red);color:#fff;border-radius:3px;padding:0 3px}
.pron .miss{font-family:var(--en)}
body.hide-en .line .en-text:not(.reveal){filter:blur(7px);cursor:pointer}
body.hide-ja .line .ja{display:none}

.q .en-text .blank{display:inline-block;min-width:3.2em;border-bottom:2px solid var(--muted);text-align:center;color:var(--accent)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{font-family:var(--en);font-weight:700;font-size:15px;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:6px 16px;min-width:64px}
.opt.ok{background:var(--green);border-color:var(--green);color:var(--surface)}
.opt.ng{background:var(--red-dim);border-color:var(--red);color:var(--red)}
.opt:disabled{cursor:default}
.why{margin:0;font-size:13px}
.why > b:first-child{color:var(--green)}
.why.miss > b:first-child{color:var(--red)}
.qscore{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

.chset{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px 20px}
.chcard{background:var(--surface);border:2px solid var(--ink);border-radius:12px;padding:18px 16px;display:flex;flex-direction:column;gap:12px;min-height:250px}
.chmeta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.chask{margin:0;font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.06em}
.chja{margin:0;font-size:clamp(19px,5vw,25px);font-weight:700;line-height:1.5}
.chen{margin:0;font-family:var(--en);font-weight:600;font-size:clamp(18px,4.8vw,23px);line-height:1.35;min-height:1.3em;padding-top:10px;border-top:1px dashed var(--line)}
.chen.hidden{color:var(--muted);letter-spacing:.2em}
.chhint{margin:0;font-family:var(--en);font-size:15px;color:var(--amber)}
.grade{display:flex;flex-wrap:wrap;gap:8px}
.grade button{flex:1 1 90px;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:10px 8px;font-weight:700;font-size:14px}
.grade .g-ok{border-color:var(--green);color:var(--green)}
.grade .g-meh{border-color:var(--amber);color:var(--amber)}
.grade .g-ng{border-color:var(--red);color:var(--red)}
.foot{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}

/* 単語のポップアップ（スマホは下から、パソコンは語の近くに） */
.wpop{position:fixed;z-index:40;left:0;right:0;bottom:0;background:var(--surface);border-top:2px solid var(--ink);
  border-radius:16px 16px 0 0;padding:16px 18px calc(env(safe-area-inset-bottom,0px) + 16px);box-shadow:0 -10px 30px -12px rgba(10,20,30,.45);
  display:flex;flex-direction:column;gap:8px;max-height:70vh;overflow:auto}
.wpop.float{bottom:auto;right:auto;border:2px solid var(--ink);border-radius:12px;box-shadow:0 12px 30px -12px rgba(10,20,30,.45)}
.wpop[hidden]{display:none}
.wpx{position:absolute;top:6px;right:8px;border:0;background:none;font-size:24px;line-height:1;color:var(--muted);padding:6px}
.wpen{margin:0;font-family:var(--en);font-weight:700;font-size:26px;line-height:1.15;padding-right:34px}
.wpbtns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wpbtns #wpFav{display:inline-flex;align-items:center;gap:2px}
.wpja{margin:0;font-size:17px;font-weight:700}
.wpja .pos{font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 6px;margin-right:8px;vertical-align:2px}
.wpnote{margin:0;font-size:13px;color:var(--muted)}
.wpparts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.wchip{font-family:var(--en);font-size:14px;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:2px 10px}
.wpex{margin:0;font-family:var(--en);font-size:14px;color:var(--muted)}
.wpdict{margin:0;font-size:12px}
@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }

/* パスワードを仮に戻す */
.resetbox{background:var(--amber-dim);border:2px solid var(--amber);border-radius:10px;padding:12px 16px;display:flex;flex-direction:column;gap:4px}
.resetbox p{margin:0}
.temppw code{font-size:26px;font-weight:700;letter-spacing:.08em;padding:4px 12px;background:var(--surface);user-select:all}
.resetpw summary{cursor:pointer;font-size:12px;color:var(--accent)}
.resetpw form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}

/* v3：表紙・レベル・新着・サムネール */
.card-a .cover img{width:100%;height:100%;object-fit:cover;display:block}
.newb{font-family:var(--en);font-size:11px;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--red);border-radius:4px;padding:1px 7px}
.lvb{display:inline-block;font-size:11px;font-weight:700;border-radius:4px;padding:1px 8px;border:1px solid currentColor;line-height:1.6}
.lv-beginner{color:var(--green)} .lv-intermediate{color:var(--amber)} .lv-advanced{color:var(--red)}
.hero{border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:var(--accent-soft);border:1px solid var(--line)}
.hero img{width:100%;height:100%;object-fit:cover;display:block}
.eyebrow .lvb{vertical-align:1px}
.upthumb{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#fff;flex-shrink:0}
.qitem .upthumb{float:right;margin-left:12px;width:96px;height:96px}
.thumbprev{display:flex;align-items:center;gap:12px}
.thumbprev[hidden]{display:none}
.thumbprev img{width:120px;height:120px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#fff}

/* v4：スマホで収まる大きさ・メニューと再開・全文・最初から順番に */
.wrap{gap:22px}
.top h1{font-size:clamp(30px,9vw,60px);overflow-wrap:anywhere}
.titlerow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}
.titlerow .hero{width:96px;aspect-ratio:4/3;border-radius:10px;margin-top:4px}
@media (min-width:700px){ .titlerow .hero{width:200px;aspect-ratio:16/9} }
.lead{font-size:14px}
.meter{margin-top:2px}
/* 固定の操作欄：ランプ・状態・メニュー／再開／止める */
.bar{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:8px 10px}
.barbtns{display:flex;gap:6px}
.bbtn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:54px;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:5px 8px;font-weight:700;font-size:11px;line-height:1.2}
.bbtn svg{width:14px;height:14px;fill:currentColor}
.bbtn:disabled{opacity:.38;cursor:default}
#menuBtn{border-color:var(--accent);color:var(--accent)}
#resumeBtn:not(:disabled){border-color:var(--green);color:var(--green);background:var(--green-dim)}
.bbtn.stop:not(:disabled){border-color:var(--red);color:var(--red)}
@media (max-width:560px){
  .bar{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  .barbtns{grid-column:1 / -1}
  .bbtn{flex:1;flex-direction:row;gap:6px;font-size:13px;padding:6px 8px}
  .lamps{gap:6px}
  .lamp i{width:16px;height:16px}
  .lamp{font-size:9px}
}
/* この教材のメニュー（スマホは下から、広い画面は右上） */
.mback{z-index:44}
.lmenu{position:fixed;z-index:45;left:0;right:0;bottom:0;max-height:85vh;max-height:85dvh;overflow:auto;background:var(--surface);border-top:2px solid var(--ink);
  border-radius:16px 16px 0 0;padding:0 0 calc(env(safe-area-inset-bottom,0px) + 12px);box-shadow:0 -10px 30px -12px rgba(10,20,30,.45)}
.lmenu[hidden],.mback[hidden]{display:none}
body.mopen{overflow:hidden}
.lmhead{position:relative;padding:14px 48px 10px 16px;border-bottom:1px solid var(--line);font-size:16px}
.lmnote{margin:10px 16px 0;padding:10px 12px;border-radius:10px;background:var(--green-dim);font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.lmnote b{display:block;font-size:11px;color:var(--green);letter-spacing:.06em}
.lmnote .pill{margin-top:8px}
.lmlist{list-style:none;margin:6px 0 0;padding:0 8px}
.lmlist button{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:12px 8px;font-size:15px;font-weight:700}
.lmlist small{font-size:12px;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.lmfoot{display:flex;gap:18px;padding:12px 16px 0;font-size:14px}
@media (min-width:720px){
  .lmenu{left:auto;right:16px;top:70px;bottom:auto;width:360px;border:2px solid var(--ink);border-radius:14px;max-height:calc(100vh - 90px)}
}
/* 全文を読む */
.rsec .sechead h2{font-size:20px}
.ftitle{margin:0;font-family:var(--en);font-weight:800;font-size:20px;line-height:1.25}
.fulltext{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px 16px 10px}
.fpara{padding:10px 0;border-bottom:1px dashed var(--line)}
.fpara:last-child{border-bottom:0}
.fphead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.fphead h3{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.03em}
.fphead .act{padding:3px 10px;font-size:12px;flex-shrink:0}
.ftext{margin:0;font-family:var(--en);font-size:17px;line-height:1.75}
.ftext .en-text{font-size:inherit;font-weight:500;line-height:inherit;border-radius:4px;scroll-margin-top:170px}
.ftext .fs.is-playing{background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-soft)}
.fja{display:none;margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.8}
.fulltext.show-ja .fja{display:block}
.fexp{display:none;margin:10px 0 2px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;font-size:14px;line-height:1.8;scroll-margin-top:170px}
.fexp.live,.fulltext.show-exp .fexp{display:block}
.fexp.live{background:var(--accent-soft)}
.fexp .fexen{margin:0;font-family:var(--en);font-size:14px;font-weight:600}
.fexp .fexja{margin:2px 0 6px;font-size:13px;color:var(--muted)}
.fexp .exp{margin:4px 0}
.fexp .expd{margin-top:4px}
/* 最初から順番に */
.rset{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;gap:10px 18px}
.rctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.story{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rpara{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.03em;margin:8px 0 0}
.chunk{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px 10px 8px;scroll-margin-top:170px;transition:border-color .2s, box-shadow .2s}
.cnum{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--bg);font-family:var(--en);font-size:12px;font-weight:700;padding:0;color:var(--muted)}
.cin{display:flex;flex-direction:column;gap:6px;min-width:0}
.chunk .en-text{font-size:clamp(17px,4.6vw,21px)}
.chunk.future .en-text{color:var(--muted)}
.chunk.future .ja,.chunk.future .exp,.chunk.future .expd,.chunk.past .exp,.chunk.past .expd{display:none}
.chunk.past{background:var(--bg)}
.chunk.past .en-text{font-size:16px}
.chunk.past .ja{font-size:12px;color:var(--muted)}
.chunk.cur{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.chunk.cur .cnum{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.chunk.is-playing{border-color:var(--accent)}
.rnav:empty{display:none}
.fsubset[hidden]{display:none}
section{scroll-margin-top:190px}
.chunk,.ftext .en-text{scroll-margin-top:200px}
@media (min-width:561px){ section{scroll-margin-top:150px} }
.pill{display:inline-flex;align-items:center;gap:6px}
.pill svg{width:13px;height:13px;fill:currentColor}

/* v5：題材の出どころとねらい */
.upform .srchead{margin:6px 0 -4px;font-weight:700;font-size:14px}
fieldset.purpose .pgroup{display:flex;flex-direction:column;gap:6px;font-size:14px;padding:2px 0}
fieldset.purpose .pgroup > span{padding-left:26px}
fieldset.purpose .pchoice{display:flex;flex-wrap:wrap;gap:8px;padding-left:26px}
fieldset.purpose .pchoice label{border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 8px}
fieldset.purpose .pchoice label:has(input:checked){border-color:var(--ink);font-weight:700}
.upsrc{display:block;overflow-wrap:anywhere}
.upsrc a{color:inherit}
/* v5：質問に答える・役になって話す・出典 */
.qa-q{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-left:3px solid var(--role2);border-radius:6px;background:rgba(127,127,127,.08)}
.qa-q .qtext{margin:0;font-family:var(--en);font-size:16px;line-height:1.5}
.qa-q .ja{margin:0}
.who.Q{color:var(--role2)} .who.A{color:var(--role3)}
.line.qa-hide > .en-text, .line.qa-hide > .ja, .line.qa-hide > .exp, .line.qa-hide > .expd{filter:blur(7px);user-select:none;pointer-events:none}

body.qa-ja .line.qa-hide > .ja{filter:none;user-select:auto;pointer-events:auto}
.line.rp-mine > .en-text{filter:blur(7px);user-select:none}
.line.rp-mine{border-color:var(--role2)}
.act.qa{font-weight:700}
.srcs ul{margin:0;padding-left:18px;font-size:13px;line-height:1.8;overflow-wrap:anywhere}
.srcs a{color:inherit}

/* 声をよくする（2026-09-29） */
.vgbtn{margin-top:8px}
.vgpop{position:fixed;inset:0;z-index:50;background:rgba(10,20,30,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.vgpop[hidden]{display:none}
.vgbox{position:relative;background:var(--surface);border:2px solid var(--ink);border-radius:12px;max-width:560px;width:100%;max-height:88vh;overflow:auto;padding:20px 18px 18px}
.vgbox h2{font-size:1.2rem;margin:0 32px 10px 0}
.vgbox h3{font-size:1.05rem;margin:16px 0 6px}
.vgnow{font-size:.95rem;line-height:1.7;margin:0 0 10px}
.vgbtns{display:flex;flex-wrap:wrap;gap:8px}
.vgsteps{padding-left:1.4em;line-height:1.75;margin:0}
.vgsteps li{margin:0 0 6px}
.vgnote{font-size:.9rem;opacity:.8;margin:10px 0 0}


/* ---------- 2026-09-29：作った人・関連する教材・改訂／カスタマイズ版・表紙の変更・単語の見せ方 ---------- */
.b-who{background:var(--surface);color:var(--muted);border:1px solid var(--line)}
.b-base{background:var(--accent-soft);color:var(--accent)}
.pill.sm{padding:4px 11px;font-size:12px;text-decoration:none}
.ownline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.related{margin:4px 0 2px}
.related.bottom{border-top:1px solid var(--line);padding-top:12px;margin-top:8px}
.relhead{margin:0 0 6px;font-weight:700;font-size:14px}
.relrow{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.relbtn{flex:0 0 168px;scroll-snap-align:start;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;min-height:88px}
.relbtn:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.relbtn:focus-visible{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.relbtn img,.relbtn .relno{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--accent-soft);display:block;margin-bottom:4px}
.relbtn .relt{font-weight:700;font-size:13px;line-height:1.35;font-family:var(--en)}
.relbtn .rels{font-size:12px;color:var(--ink);line-height:1.35}
.relbtn .relw{font-size:11px;color:var(--accent);margin-top:auto;padding-top:2px}
@media (min-width:700px){ .relbtn{flex-basis:200px} }
.mine .lcover{width:64px;height:48px;border-radius:8px;border:1px solid var(--line);background:var(--accent-soft);overflow:hidden;flex-shrink:0}
.mine .lcover img{width:100%;height:100%;object-fit:cover;display:block}
.mine .lacts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.coverform{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.filebtn{cursor:pointer}
.coverUploadTools{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.coverGenPanel{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:rgba(10,20,30,.72)}
.coverGenPanel[hidden]{display:none}
.coverGenCard{width:min(900px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 20px 60px rgba(0,0,0,.32)}
.coverGenCard canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;border:1px solid var(--line);border-radius:10px;background:#fff}
.coverGenActions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:12px}
.coverGenActions .coverCancelBtn{margin-left:4px}
.linkbtn.small{font-size:12px}
.wtools{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px}
.wordlist.hide-ja .wj:not(.show),.wordlist.hide-en .we:not(.show){color:transparent;background:var(--line);border-radius:4px;cursor:pointer;user-select:none}
.wordlist.hide-en .we:not(.show){min-width:96px}
.wordlist.hide-ja .wj:not(.show){min-width:96px;min-height:1.4em}
.secbtns .small{align-self:center}
#baseHint{margin:-6px 0 0}

/* 教材一覧：常に見える並べ替え（スマホは横スクロール） */
.sortbar{display:flex;align-items:center;gap:8px;min-width:0}
.sortlabel{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--muted)}
.sortscroll{display:flex;gap:7px;min-width:0;overflow-x:auto;padding:2px 2px 7px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.sortopt{display:inline-flex;flex:0 0 auto;align-items:stretch;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.sortopt a{display:inline-grid;place-items:center;color:var(--ink);text-decoration:none;line-height:1.2}
.sortname{padding:7px 10px 7px 13px;font-size:13px;font-weight:700}
.sortarrow{min-width:29px;padding:7px 5px;border-left:1px solid var(--line);font-family:var(--en);font-size:13px;color:var(--muted)!important}
.sortopt.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.sortopt.on .sortname{background:var(--accent);color:var(--surface)}
.sortopt.on .sortarrow.on{background:var(--accent-soft);color:var(--accent)!important;font-weight:800}
@media (max-width:420px){.sortbar{align-items:flex-start;flex-direction:column;gap:2px}.sortscroll{width:100%}}

/* v10 下書き・ゴミ箱（マイページ） */
.b-draft{background:#fff3cd;color:#8a5a00}
.stateform{display:inline-flex;gap:6px;align-items:center;margin:0}
.linkbtn.danger{color:var(--red)}
.trash{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.trash summary{cursor:pointer;font-weight:700}

/* v10 声の選び方・設定への近道 */
.voiceset .vrow{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap}
.voiceset .vrow label{min-width:2.5em;font-weight:700;font-size:13px}
.voiceset .vrow select{flex:1 1 180px;min-width:0;max-width:100%}
.voiceset .vauto{margin:6px 0 0}
.voiceset .vauto .vtry{margin-left:4px}
.settings.floating{position:fixed;z-index:70;top:var(--settop,64px);left:50%;transform:translateX(-50%);width:min(760px,calc(100vw - 24px));max-height:calc(100vh - var(--settop,64px) - 16px);overflow:auto;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.22)}
.settings .setclose{display:none}
.settings.floating .setclose{display:block;position:sticky;top:0;margin:0 0 6px auto;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-weight:700;cursor:pointer;z-index:1}

/* v11 題材アップロード欄の「この教材を：下書きへ／ゴミ箱へ」 */
.basestate{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 2px}

/* v11 上のメニューの「練習の設定」と、教材ページ以外で開く設定の窓 */
.gnav .gnavset{border:0;background:none;font:inherit;font-size:inherit;font-weight:inherit;color:inherit;padding:inherit;cursor:pointer;white-space:nowrap}
.gspop{position:fixed;inset:0;z-index:80;background:rgba(15,25,40,.38);display:grid;place-items:start center;padding:64px 12px 12px;overflow:auto}
.gspop[hidden]{display:none}
.gsbox{width:min(760px,100%);background:var(--surface);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.25);padding:14px 16px 18px}
.gshead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.gshead h2{font-size:17px;margin:0}
.gspop .setclose{display:block;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-weight:700;cursor:pointer}

/* v12（2026-10-01）上の欄：速さをいつでも調整／最初へ・解説・次へ／再開と止めるは同じ場所で入れ替わる */
.bar{grid-template-columns:auto minmax(0,1fr) auto;row-gap:8px}
.bar.running #resumeBtn{display:none}
.bar:not(.running) #stopBtn{display:none}
.bbtn{min-width:52px}
#nextBtn:not(:disabled),#firstBtn:not(:disabled){color:var(--ink)}
#expBtn:not(:disabled){border-color:var(--amber);color:var(--ink)}
#expBtn.on{background:var(--amber);color:#1b1b1b}
.speed{grid-column:1 / -1;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;column-gap:8px;border-top:1px solid var(--line);padding-top:7px}
.speed .splab{font-size:12px;font-weight:700;color:var(--muted)}
.speed .spstep{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:18px;font-weight:700;line-height:1;padding:0}
.speed input[type=range]{width:100%;min-width:0;margin:0;accent-color:var(--accent);height:28px}
.speed .spval{min-width:9.5em;text-align:right;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.speed .spends{grid-column:3;display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:-4px;padding:0 2px}
.speed .spends span:last-child{margin-right:13%}
@media (max-width:860px){
  .bar{grid-template-columns:auto minmax(0,1fr)}
  .barbtns{grid-column:1 / -1}
  .bbtn{flex:1 1 0;min-width:0;flex-direction:column;gap:1px;font-size:10.5px;padding:6px 2px;white-space:nowrap}
  .bbtn svg{width:15px;height:15px}
  .barbtns{gap:4px}
}
@media (max-width:560px){
  .speed{column-gap:6px}
  .speed .spval{min-width:0;font-size:12px}
}
section{scroll-margin-top:240px}
.chunk,.ftext .en-text{scroll-margin-top:250px}
.line{scroll-margin-top:230px;scroll-margin-bottom:24px}
@media (min-width:861px){ section{scroll-margin-top:190px} .line{scroll-margin-top:180px} }

/* v12 練習の設定：パソコンでも選択肢が折り返して崩れないように */
.setgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px 22px;align-items:start}
.seg{max-width:100%}
.seg button{white-space:nowrap;flex:1 0 auto}
.set.voiceset{grid-column:1 / -1}
.set .setnote{margin:4px 0 0}
.settings.floating{padding:6px 18px 14px}
.settings.floating summary{list-style:none;padding:10px 0 8px;font-size:16px;cursor:default;pointer-events:none}
.settings.floating summary::-webkit-details-marker{display:none}
.settings.floating .setclose{position:absolute;top:10px;right:14px;margin:0}
.settings.floating{overflow:auto}
.gsbody .set:has([data-gset="rate"]){grid-column:1 / -1}

/* v12 作った人で絞る・自分だけのカテゴリ */
.bylink{cursor:pointer;text-decoration:none}
.bylink:hover{border-color:var(--accent);color:var(--accent)}
.bylink:focus-visible{border-color:var(--accent);color:var(--accent)}
.pcbar{display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:2px}
.pcchip{display:inline-flex;flex:0 0 auto;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:6px 12px;font-size:13px;font-weight:700;color:var(--ink);text-decoration:none}
.pcchip small{font-weight:400;color:var(--muted)}
.pcchip i{font-style:normal;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.pcchip.on{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.pcchip.on small,.pcchip.on i{color:var(--surface)}
.pcchip.edit{border-style:dashed;font-weight:400;color:var(--muted)}
@media (max-width:420px){.pcbar{align-items:flex-start;flex-direction:column;gap:2px}}
.pclist{list-style:none;margin:10px 0;padding:0;display:grid;gap:6px}
.pclist label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-weight:700}
.pclist label small{margin-left:auto;font-weight:400}
.pclist input{width:18px;height:18px}
.pcnew{display:flex;gap:8px;margin:8px 0 12px}
.pcnew input{flex:1;min-width:0;font-size:16px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.pcbox{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:8px 12px;margin:8px 0}
.pcbox summary{cursor:pointer;font-weight:700}
.pcbox summary small{font-weight:400;color:var(--muted);margin-left:6px}
.pcshare{border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:flex;flex-wrap:wrap;gap:6px 14px}
.pcshare legend{font-size:12px;color:var(--muted);padding:0 4px}
.pcshare .chk{display:inline-flex;align-items:center;gap:5px;font-weight:400}
.pclessons{list-style:none;padding:0;margin:8px 0;display:grid;gap:4px}
.pclessons li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;border-top:1px solid var(--line);padding:6px 0}
.pclessons li .stateform{margin-left:auto}
.pcnewform{margin-top:10px}
.form .pcshare .chk{display:inline-flex;flex-direction:row;align-items:center;gap:6px;width:auto}
.pcshare .chk input{width:18px;height:18px;margin:0}


.toc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 12px 14px}
.tochead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 10px;font-size:15px}
.tochead span{font-size:12px;color:var(--muted)}
.toclist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.tocit{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:1px;align-items:center;min-height:56px;height:100%;box-sizing:border-box;
  padding:9px 10px 11px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);text-decoration:none;overflow:hidden;-webkit-tap-highlight-color:transparent}
.tn[hidden]{display:none}
.tn{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:var(--ink);color:var(--surface);font-size:12px;font-weight:700;font-family:var(--en);line-height:1}
.tocit .tn{grid-row:1 / 3}
.tocit .tt{font-size:14px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.tocit.x .tt{grid-row:1 / 3}
.tocit .tc{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.3}
.tocit .tp{position:absolute;left:0;right:0;bottom:0;height:3px}
.tocit .tp i{display:block;height:100%;width:0;background:var(--accent);opacity:.75;transition:width .3s ease}
.tocit:hover{border-color:var(--accent)}
.tocit.on{border-color:var(--accent);background:var(--surface);box-shadow:inset 3px 0 0 var(--accent)}
.tocit.x .tn{background:var(--accent-soft);color:var(--accent)}
.tocit.hl{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.tocit.hl .tn{background:var(--surface);color:var(--accent)}
@media (max-width:560px){
  .toc{padding:10px 10px 12px}
  .toclist{grid-template-columns:1fr 1fr;gap:6px}
  .tocit{min-height:52px;padding:8px 8px 10px;column-gap:8px}
  .tocit .tt{font-size:13px}
  .tochead span{display:none}
}
/* 上の欄の一段目：いまの章（押すと章の一覧）・通し方の切り替え・設定 */
.flowrow{grid-column:1 / -1;display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--line);min-width:0}
.chapbtn{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 7px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font-size:14px;font-weight:700;text-align:left;cursor:pointer}
.chapbtn .tn{min-width:24px;height:24px;font-size:11.5px}
.chapbtn .cbt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chapbtn svg{flex:none;width:14px;height:14px;color:var(--muted)}
.chapbtn:hover{border-color:var(--accent)}
.flowseg{flex:none;display:flex;height:40px;border:1.5px solid var(--accent);border-radius:10px;overflow:hidden;background:var(--surface)}
.flowseg button{border:0;background:none;color:var(--accent);font-size:13px;font-weight:700;padding:0 11px;white-space:nowrap;cursor:pointer}
.flowseg button + button{border-left:1.5px solid var(--accent)}
.flowseg button[aria-pressed="true"]{background:var(--accent);color:var(--surface)}
.gearbtn{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);cursor:pointer}
.gearbtn svg{width:18px;height:18px;fill:currentColor}
#prevBtn:not(:disabled),#setBtn{color:var(--ink)}
@media (max-width:420px){
  .flowrow{gap:6px}
  .flowseg button{padding:0 8px;font-size:12.5px}
  .chapbtn{gap:6px;padding:0 8px 0 6px;font-size:13px}
}
/* この教材のメニュー：番号つきで、いま見ている章に印 */
.lmlist button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.lmlist .tn{min-width:24px;height:24px;font-size:11.5px}
.lmlist .tn.none{visibility:hidden}
.lmlist .mt{min-width:0}
.lmlist button.on{background:var(--accent-soft);border-radius:8px}
/* 章へ飛んだ時、上の欄に隠れない位置で止める（欄の高さは player.js が測る） */
section,.toc{scroll-margin-top:calc(var(--barh,170px) + 74px)}
.line{scroll-margin-top:calc(var(--barh,170px) + 66px)}
.chunk,.ftext .en-text{scroll-margin-top:calc(var(--barh,170px) + 80px)}

/* v15-D：一覧の見出しの「お気に入りだけ」切り替え */
.reshead .rhrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.reshead .rhrow h1{min-width:0}
.favtoggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.favtoggle .favmark{font-size:20px;line-height:1;color:var(--muted)}
.favtoggle:hover{border-color:var(--amber)}
.favtoggle.on{background:var(--amber-dim);border-color:var(--amber);color:var(--ink)}
.favtoggle.on .favmark{color:var(--amber)}
.favtoggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:520px){.favtoggle{font-size:15px}}
/* v15-B 限定公開（共有コード）：公開範囲の3択・コードの欄・「コードを入れる」 */
.b-lim{background:var(--accent-soft);color:var(--accent)}
.visform .vislab{font-size:12px;color:var(--muted);flex-basis:100%;line-height:1.3}
.visform label{cursor:pointer}
.sharebox{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 12px;border:1px dashed var(--accent);border-radius:10px;background:var(--accent-soft)}
.sharebox .shl{font-size:12px;color:var(--muted)}
.sharecode{font-family:var(--en);font-weight:800;font-size:20px;letter-spacing:.08em;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:2px 10px;user-select:all;-webkit-user-select:all}
.sharebox .shrenew{margin-left:auto}
.sharebox .shnote{flex-basis:100%;margin:0;line-height:1.5}
.pcbox .pcvis{margin:4px 0 8px}
.pcbox .sharebox{margin:0 0 8px}
.codeenter > summary{list-style:none;cursor:pointer;align-self:flex-start;display:inline-flex}
.codeenter > summary::-webkit-details-marker{display:none}
.codeenter[open] > summary{background:transparent;color:var(--accent)}
.codeform{margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.codeform > label{font-size:13px;color:var(--muted)}
.coderow{display:flex;gap:8px;align-items:stretch}
.form .coderow input{flex:1 1 auto;min-width:0;width:auto;font-family:var(--en);font-size:18px;letter-spacing:.06em;text-transform:uppercase}
.coderow .btn{flex:none;align-self:auto}
.codemsg{margin:0;font-size:14px;color:var(--muted)}
.codemsg.bad{padding:8px 12px;border-radius:8px;background:var(--red-dim);color:var(--ink)}
.codepeek{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 12px;border-radius:10px;background:var(--green-dim)}
.codepeek .cpname{margin:0;font-weight:700;flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.codepeek .cpacts{display:flex;align-items:center;gap:12px}
.codelist li .mt{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
.codelist li .stateform{margin-left:auto}
.codelist li.off{opacity:.75}
.codelist li.off .badge.b-priv{white-space:normal}
@media (max-width:420px){
  .sharecode{font-size:18px}
  .sharebox .shrenew{margin-left:0}
}
/* v15-C 題材アップロード：前回の設計・複数ファイル・ねらいのカード・ボリューム */
.prevdesign[hidden]{display:none}
.pdbox{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;background:var(--accent-soft);padding:12px 14px;display:flex;flex-direction:column;gap:8px;color:var(--ink);font-size:14px}
.pdbox .pdhead{margin:0;line-height:1.6}
.pdbox .pdhead .small{display:block}
.pdgrid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0}
.pdgrid dt{color:var(--muted);font-size:12.5px;white-space:nowrap;padding-top:1px}
.pdgrid dd{margin:0;overflow-wrap:anywhere}
.pdsub{margin:4px 0 0;font-weight:700;font-size:13px}
.pdsecs{margin:0;padding-left:1.6em;display:flex;flex-direction:column;gap:2px}
.pdsecs li{display:flex;justify-content:space-between;gap:10px}
.pdsecs li small{color:var(--muted);white-space:nowrap}
.pdfiles{margin:0;padding-left:1.2em;overflow-wrap:anywhere}
.pdfiles small,.pdhist li{color:var(--muted)}
.pdhist summary{cursor:pointer;font-size:13px;font-weight:700}
.pdhist ul{margin:6px 0 0;padding-left:1.2em;font-size:12.5px;display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}

.fpick{display:flex;flex-direction:column;gap:8px}
.fpick .flabel{margin:0;font-size:13px;color:var(--muted);font-weight:500}
.form .fdrop{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;min-height:76px;padding:12px 14px;
  border:2px dashed var(--line);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer;text-align:center}
.fdrop:hover,.fdrop.over{border-color:var(--accent);background:var(--accent-soft)}
.fdrop:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.fdrop .fdrop-in{display:none;flex-direction:column;align-items:center;gap:2px}
.fdrop .fdrop-in svg{width:24px;height:24px;fill:var(--accent)}
.fdrop .fdrop-in b{font-size:15px;color:var(--accent)}
.fpick.js .fdrop input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.fpick.js .fdrop .fdrop-in{display:flex}
.fpick.full .fdrop{opacity:.55}
.fmeter{margin:0;font-size:13px;display:flex;flex-wrap:wrap;align-items:center;gap:2px 0}
.fmeter[hidden]{display:none}
.fmeter span:not(.fmbar){color:var(--muted)}
.fmbar{flex:1 0 100%;height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:4px}
.fmbar i{display:block;height:100%;background:var(--accent);border-radius:inherit}
.fgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.fgrid:empty{display:none}
.fitem{position:relative;display:flex;flex-direction:column;gap:2px;padding:6px 6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-width:0}
.fthumb{display:grid;place-items:center;aspect-ratio:4/3;border-radius:7px;overflow:hidden;background:var(--bg);font-family:var(--en);font-weight:800;font-size:15px;letter-spacing:.02em;color:var(--muted)}
.fthumb img,.fthumb canvas{width:100%;height:100%;object-fit:cover;display:block}
.fthumb.k-pdfimg{position:relative;background:#fff;border:1px solid var(--line)}
.fthumb.k-pdfimg img{object-fit:contain;object-position:center top}
.fthumb .ftag{position:absolute;left:4px;bottom:4px;padding:0 6px;border-radius:4px;background:var(--red);color:#fff;font-size:10.5px;line-height:1.6;letter-spacing:.04em}
.fthumb.loading .fk::after{content:"…"}
/* aspect-ratio を読めないブラウザ（Safari 14 以前）：padding-top で 4:3 の枠を作る */
@supports not (aspect-ratio: 4 / 3){
  .fthumb{display:block;position:relative;height:0;padding-top:75%}
  .fthumb > img,.fthumb > canvas,.fthumb > .fk{position:absolute;top:0;left:0;width:100%;height:100%}
  .fthumb > .fk{display:flex;align-items:center;justify-content:center}
}
.fthumb.k-pdf{background:var(--red-dim);color:var(--red)}
.fthumb.k-doc{background:var(--accent-soft);color:var(--accent)}
.fthumb.k-txt{background:var(--green-dim);color:var(--green)}
.fthumb.k-img{background:var(--amber-dim);color:var(--amber)}
.fname{font-size:12.5px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.fsize{font-size:11.5px;color:var(--muted);line-height:1.3}
.fx{position:absolute;top:2px;right:2px;width:30px;height:30px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  font-size:18px;line-height:1;display:grid;place-items:center;padding:0;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.fx:hover{border-color:var(--red);color:var(--red)}
.ferr{margin:0;padding:8px 12px;border-radius:8px;background:var(--red-dim);color:var(--ink);font-size:13px}
.ferr[hidden]{display:none}
.upsend{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.upprog{display:flex;align-items:center;gap:10px;flex:1 1 220px;min-width:0}
.upprog[hidden]{display:none}
.upbar{flex:1 1 auto;height:8px;border-radius:999px;background:var(--line);overflow:hidden;min-width:80px}
.upbar i{display:block;height:100%;width:0;background:var(--green);transition:width .2s}
#upErr[hidden]{display:none}

fieldset.purpose2,fieldset.volbox{border:1px solid var(--line);border-radius:10px;padding:8px 12px 12px;margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
fieldset.purpose2 legend,fieldset.volbox legend{font-size:13px;color:var(--muted);padding:0 4px}
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (min-width:760px){ .pcards{grid-template-columns:repeat(4,minmax(0,1fr))} }
.form .pcard,.form .vopt,.form .pseg-o{position:relative;cursor:pointer;color:var(--ink);font-weight:400}
.form .pcard{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 12px 12px;min-height:118px;
  border:1.5px solid var(--line);border-radius:12px;background:var(--surface);transition:border-color .15s,background .15s}
.pcard .pc-ic{width:26px;height:26px;fill:var(--accent);flex:none}
.pcard b{font-size:15px;line-height:1.35}
.pcard small{font-size:12px;line-height:1.5;color:var(--muted)}
.pcard:hover{border-color:var(--accent)}
.pcard.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.pcard:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
/* :has を読めないブラウザ（iOS Safari 15.3 以前）では :has の規則が丸ごと捨てられるので、.on（upload.js が付ける）の規則とは分けて書く */
.pcard.on::after{content:"✓";position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:999px;
  background:var(--accent);color:var(--surface);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.pcard:has(input:checked)::after{content:"✓";position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:999px;
  background:var(--accent);color:var(--surface);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
fieldset.purpose2.js .pcard:not(.on)::after{content:none}
.pcard.kf,.vopt.kf,.pseg-o.kf{outline:2px solid var(--accent);outline-offset:2px}
.pcard:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.vopt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.pseg-o:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.pdepth{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:10px;background:var(--accent-soft);border:1px solid var(--line)}
.pdepth[hidden]{display:none}
.pdepth-q{font-size:13px;font-weight:700;color:var(--ink)}
.pseg{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--accent);border-radius:10px;overflow:hidden;background:var(--surface)}
.form .pseg-o{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:8px 6px;text-align:center}
.pseg-o + .pseg-o{border-left:1.5px solid var(--accent)}
.pseg-o b{font-size:15px;color:var(--accent)}
.pseg-o small{font-size:11.5px;color:var(--muted);line-height:1.4}
.pseg-o.on{background:var(--accent)}
.pseg-o.on b,.pseg-o.on small{color:var(--surface)}
.vseg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.form .vopt{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface)}
.vopt b{font-size:15px}
.vopt small{font-size:12px;line-height:1.5;color:var(--muted)}
.vopt:hover{border-color:var(--accent)}
.vopt.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.vopt:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
@media (max-width:560px){
  .vseg{grid-template-columns:1fr}
  .form .vopt{flex-direction:row;align-items:baseline;gap:10px}
  .vopt b{flex:none;width:3.6em}
  .form .pcard{min-height:0;padding:10px}
  .pcard .pc-ic{width:22px;height:22px}
  .pcard b{font-size:14px;word-break:keep-all;overflow-wrap:anywhere}
  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .fitem{padding:4px 4px 6px}
  .fthumb{font-size:12.5px}
  .fname{font-size:11.5px}
  .fx{width:28px;height:28px;font-size:16px}
}
/* v15-C 受付箱：複数ファイルと前回の設計 */
.qfiles{margin:0 0 6px;padding-left:1.2em;font-size:13px;overflow-wrap:anywhere}
.qdesign{margin:4px 0;font-size:13px}
.qdesign summary{cursor:pointer;font-weight:700}
.qdesign ol{margin:2px 0 4px;padding-left:1.6em}
/* v15-A（2026-10-02）教材プレーヤー：設定の窓・再生欄の繰り返し／シャッフル・丸を押して一部だけ・カードを押して読む・次の教材へ */
/* 設定の窓（教材の画面もほかの画面も同じ形）：スマホは下から出るシート、パソコンは中央の窓。背景（欄外）を押すと閉じる */
body.setopen{overflow:hidden}
.setpop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(10,20,30,.48)}
.setpop[hidden]{display:none}
.setsheet{position:relative;display:flex;flex-direction:column;width:min(760px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
  background:var(--surface);color:var(--ink);border-radius:16px;box-shadow:0 24px 60px -20px rgba(0,0,0,.5);overflow:hidden}
.sethead{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 20px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
.sethead h2{font-size:20px;font-weight:700;line-height:1.3}
.setsub{margin:2px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.setx{flex:none;height:38px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-weight:700;font-size:14px;color:var(--ink)}
.setx:hover{border-color:var(--accent)}
.setbody{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 20px 8px}
.setbody .warn{margin:14px 0 0}
.setgrp{display:block;padding:18px 0 8px;border-bottom:1px solid var(--line);scroll-margin-top:0}   /* section の共通の形（縦並び・間）を使わない */
.setgrp:last-child{border-bottom:0}
.setgrp h3{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--accent);display:flex;align-items:center;gap:8px}
.setgrp h3::after{content:"";flex:1;height:1px;background:var(--accent-soft)}
.setdesc{margin:3px 0 4px;font-size:12px;color:var(--muted);line-height:1.6}
.setrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 20px;padding:11px 0;border-top:1px dashed var(--line)}
.setdesc + .setrow,h3 + .setrow{border-top:0}
.setlab{display:flex;flex-direction:column;gap:1px;min-width:0}
.setlab .lab{display:block;margin:0;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:0}
.setlab .hint,.setsheet .voiceset .hint{font-size:12px;color:var(--muted);line-height:1.55}
.setsheet .seg{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;border:0;border-radius:0;overflow:visible;max-width:100%}
.setsheet .seg button{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);padding:6px 14px;font-size:13px;line-height:1.45;white-space:nowrap}
.setsheet .seg button:last-child{border-right:1px solid var(--line)}
.setsheet .seg button:hover{border-color:var(--accent)}
.setsheet .seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--surface);font-weight:700}
.setsheet .voiceset{display:flex;flex-direction:column;gap:6px;padding:4px 0 10px}
.setsheet .voiceset .vauto{margin:0}
.setsheet .voiceset .vgbtn{align-self:flex-start}
.setsheet select{font-size:14px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);width:100%}
.setfoot{flex:none;display:flex;align-items:center;gap:10px;padding:12px 20px calc(env(safe-area-inset-bottom,0px) + 12px);border-top:1px solid var(--line);background:var(--bg)}
.setmsg{flex:1 1 auto;min-width:0;font-size:12px;font-weight:700;color:var(--green)}
.setreset{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;color:var(--muted)}
.setreset:hover{color:var(--red);border-color:var(--red)}
.setfoot .pill{flex:none}
.vgpop{z-index:95;top:0;right:0;bottom:0;left:0}   /* 「声をよくする」の窓は設定の窓の上に（inset を知らない古い Safari でも全面に） */
/* スマホ：下から出るシート（高さは画面の 86%）。上に暗い欄外が見え、そこを押すと閉じる。上端に持ち手と「閉じる」、下に「既定に戻す」と「閉じる」 */
@media (max-width:640px){
  .setpop{padding:0;align-items:flex-end;justify-content:stretch}
  .setsheet{width:100%;height:86vh;height:86dvh;max-height:none;border-radius:18px 18px 0 0;box-shadow:0 -12px 32px -10px rgba(0,0,0,.45);animation:setup .22s ease-out}
  .sethead{position:relative;padding:22px 16px 10px}
  .sethead::before{content:"";position:absolute;top:8px;left:50%;width:42px;height:5px;margin-left:-21px;border-radius:3px;background:var(--line)}
  .setbody{padding:0 16px 12px}
  .setfoot{padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 10px)}
  .setrow{grid-template-columns:1fr;gap:7px}
  .setsheet .seg{justify-content:flex-start}
  .setsheet .seg button{padding:7px 14px;font-size:14px}
}
@keyframes setup{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
/* 再生欄の丸（解説／お手本／あなた）：押すと、いまの文のその部分だけ */
.lamps button.lamp{border:0;background:none;padding:2px 2px 0;margin:0;border-radius:8px;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
.lamps button.lamp:hover i{border-color:var(--accent)}
.lamps button.lamp:focus-visible i{border-color:var(--accent)}   /* :focus-visible を読めないブラウザで :hover まで捨てられないよう分ける */
.lamps button.lamp:active i{transform:scale(.9)}
/* 再生欄の下の段：1文リピート・全体リピート・シャッフル（音楽プレーヤーのように）と速さ */
.tailrow{grid-column:1 / -1;display:flex;align-items:center;gap:14px;min-width:0;border-top:1px solid var(--line);padding-top:7px}
.tailrow .speed{flex:1 1 auto;min-width:0;grid-column:auto;border-top:0;padding-top:0}
.pmodes{flex:none;display:flex;gap:4px}
.mbtn{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--muted);font-size:12px;font-weight:700;line-height:1;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.mbtn svg{flex:none;width:17px;height:17px;fill:currentColor}
.mbtn b{font-weight:inherit}
.mbtn:hover{border-color:var(--accent);color:var(--ink)}
.mbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--surface)}
@media (max-width:560px){
  .tailrow{gap:8px}
  .pmodes{gap:3px}
  .mbtn{flex-direction:column;justify-content:center;gap:2px;height:42px;min-width:40px;padding:0 5px;font-size:9.5px}
  .mbtn b{display:none}
  .tailrow .speed{grid-template-columns:auto minmax(0,1fr) auto;column-gap:5px;row-gap:0}
  .tailrow .speed .splab,.tailrow .speed .spends{display:none}
  .tailrow .speed .spval{grid-column:1 / -1;grid-row:2;text-align:center;font-size:11px;line-height:1.2;min-width:0}
  .tailrow .speed .spstep{width:30px;height:30px}
  .tailrow .speed input[type=range]{height:24px}
}
/* 例文カード：何もない所を押すと、その文を読む */
#body .line:not(.q){cursor:pointer;-webkit-tap-highlight-color:transparent}
#body .line:not(.q) .en-text,#body .line:not(.q) .ja{cursor:inherit}
.act.cnext{margin-left:0}
/* 次の教材へ移ったが、端末に自動再生を止められた時の大きなボタン */
.gobig{position:fixed;z-index:60;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);display:flex;align-items:center;gap:12px;
  max-width:calc(100vw - 32px);padding:16px 26px;border:0;border-radius:999px;background:var(--accent);color:var(--surface);font-size:18px;font-weight:700;box-shadow:0 14px 34px -10px rgba(10,20,30,.55)}
.gobig svg{flex:none;width:22px;height:22px;fill:currentColor}
.gobig span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.3;min-width:0}
.gobig small{font-size:12px;font-weight:500;opacity:.85;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* v15-E マイページの見た目（挨拶と今日の一歩・成績の4つ・上に留まる節のタブ・アイコン付きの見出し・続きからの表紙）。body.mepage の中だけ */
body.mepage{--me-hdr:53px;--me-tabs:50px}
body.mepage .mewrap{max-width:960px;gap:28px}
:where(body.mepage) .ic{display:block;width:100%;height:100%}
/* 色の組（線の絵・代わりの表紙・見出しの印） */
body.mepage .t-acc,body.mepage .tone0{--c:var(--accent)}
body.mepage .t-grn,body.mepage .tone1{--c:var(--green)}
body.mepage .t-amb,body.mepage .tone2{--c:var(--amber)}
body.mepage .t-rose,body.mepage .tone3{--c:var(--role0)}
body.mepage .t-teal,body.mepage .tone4{--c:var(--role2)}
body.mepage .tone5{--c:var(--role3)}
body.mepage .t-mut{--c:var(--muted)}
/* 挨拶と今日の一歩 */
.mehero{display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(140deg,var(--accent-soft) 0%,var(--surface) 62%)}
body.mepage .mehead{align-items:flex-start}
.mehead .hello{min-width:0}
.mehead .hdate{margin:0;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em}
body.mepage .mehead h1{font-size:23px;line-height:1.35;margin:2px 0 0;overflow-wrap:anywhere}
.mehead h1 .nw{display:inline-block}
.mehead .hsub{margin:4px 0 0;font-size:14px;color:var(--muted)}
.mehead form{flex:none;padding-top:2px}
.mestep{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-areas:"cv bd" "go go";gap:12px 14px;align-items:center;padding:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);
  box-shadow:0 10px 26px -18px rgba(10,20,30,.45);transition:border-color .15s,box-shadow .15s}
.mestep:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),0 10px 26px -18px rgba(10,20,30,.45)}
.mestep .mscover{grid-area:cv;align-self:start}
.msbody{grid-area:bd;display:flex;flex-direction:column;gap:2px;min-width:0}
.mskick{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--amber)}
.mskick .ic{width:15px;height:15px}
.mst{font-family:var(--en);font-weight:800;font-stretch:84%;font-size:20px;line-height:1.2;overflow-wrap:anywhere}
.mestep.first .mst{font-family:var(--ja);font-stretch:normal;font-size:18px}
.mss{font-size:13px;font-weight:700;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.msprog{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:6px}
.msprog .pbar{height:7px;border-radius:4px;max-width:260px;flex:1 1 90px;min-width:90px}
.msnum{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.msgo{grid-area:go;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:999px;
  background:var(--accent);color:var(--surface);font-weight:700;font-size:15px;white-space:nowrap}
.msgo span{font-size:12px}
/* 表紙（小・大）と、表紙の無い時の代わりの絵 */
.mthumb,.mscover{display:grid;place-items:center;overflow:hidden;border-radius:9px;background:var(--accent-soft);flex:none}
.mthumb{width:72px;aspect-ratio:4/3}
.mscover{width:100%;aspect-ratio:4/3;border-radius:11px}
.mthumb img,.mscover img{width:100%;height:100%;object-fit:cover;display:block}
.mthumb.ph,.mscover.ph,body.mepage .mine .lcover.ph{color:var(--c,var(--accent));background:var(--accent-soft);
  background:linear-gradient(140deg,color-mix(in srgb,var(--c,var(--accent)) 24%,var(--surface)),color-mix(in srgb,var(--c,var(--accent)) 7%,var(--surface)));
  align-content:center;gap:0;text-align:center;line-height:1}
.mine .lcover.ph{display:grid;place-items:center}
.mine .lcover.ph b{font-family:var(--en);font-weight:800;font-size:22px;line-height:1}
.mine .lcover.ph small{display:none}
.mthumb.ph b,.mscover.ph b{font-family:var(--en);font-weight:800;font-stretch:84%;font-size:26px;line-height:1}
.mscover.ph b{font-size:44px}
.mthumb.ph small,.mscover.ph small{display:block;margin-top:3px;max-width:92%;font-size:9px;font-weight:700;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mscover.ph small{font-size:11px;margin-top:6px}
.mscover.ph .ic{width:42%;height:auto}
/* マイページの「コードを入れる」：隠した確かめ欄は隠したままに（display:flex が hidden に勝っていた） */
body.mepage .codepeek[hidden]{display:none}
/* 成績の4つ */
.mestats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mestats .st:last-child:nth-child(odd){grid-column:1/-1}   /* 2026-10-05：発音チェックの合格率を外して3つに。スマホの2列では3つ目を横いっぱいに */
.mestats .st{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.mestats .t-rep{--c:var(--accent)} .mestats .t-done{--c:var(--green)} .mestats .t-les{--c:var(--amber)} .mestats .t-pron{--c:var(--role0)}
.mestats .sic{flex:none;width:40px;height:40px;padding:9px;border-radius:50%;color:var(--c);background:var(--accent-soft);background:color-mix(in srgb,var(--c) 15%,var(--surface))}
.mestats .stx{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.mestats .stx b{font-family:var(--en);font-size:28px;font-weight:800;font-stretch:80%;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--ink)}
.mestats .stx > span{font-size:12px;color:var(--muted)}
.mestats .stx small{font-size:11px;color:var(--muted)}
.mestats .sbar{display:block;height:5px;width:100%;max-width:140px;margin:5px 0 1px;border-radius:3px;background:var(--line);overflow:hidden}
.mestats .sbar i{display:block;height:100%;background:var(--c);border-radius:3px}
.mestats .sring{flex:none;position:relative;width:44px;height:44px;display:grid;place-items:center;color:var(--c)}
.mestats .sring svg:not(.ic){position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.mestats .sring circle{fill:none;stroke-width:4}
.mestats .sring .rbg{stroke:var(--line)}
.mestats .sring .rfg{stroke:var(--c);stroke-linecap:round}
.mestats .sring > .ic{width:20px;height:20px}
/* 節のタブ：上に留まる。スマホは横に流れる */
.metabs{position:sticky;top:var(--me-hdr);z-index:15;margin:-12px -16px -14px;background:var(--bg)}
.metabs.stuck{box-shadow:0 8px 16px -14px rgba(10,20,30,.5);border-bottom:1px solid var(--line)}
.metabs .mtin{display:flex;gap:6px;overflow-x:auto;padding:8px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.metabs .mtin::-webkit-scrollbar{display:none}
.metabs a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px 0 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.metabs a .ic{width:16px;height:16px;color:var(--muted)}
.metabs a em{font-style:normal;font-size:11px;font-weight:700;line-height:1;padding:3px 6px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-variant-numeric:tabular-nums}
.metabs a.hl{border-color:var(--accent);color:var(--accent);font-weight:700}
.metabs a.hl .ic{color:var(--accent)}
.metabs a:hover{border-color:var(--accent)}
.metabs a.on{background:var(--accent);border-color:var(--accent);color:var(--surface);font-weight:700}
.metabs a.on .ic{color:var(--surface)}
.metabs a.on em{background:var(--surface);color:var(--accent)}
/* 節の見出し：アイコン付き・区切りを明確に */
body.mepage .mesec{scroll-margin-top:calc(var(--me-hdr) + var(--me-tabs) + 10px)}
body.mepage .mesec h2{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:19px;line-height:1.3;border-bottom:1px solid var(--line);padding:0 0 10px}
body.mepage .mesec h2 .shic{flex:none;width:34px;height:34px;padding:7px;border-radius:10px;color:var(--c);background:var(--accent-soft);background:color-mix(in srgb,var(--c) 15%,var(--surface))}
body.mepage .mesec h2 small{font-size:12px;font-weight:700;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:1px 9px;font-variant-numeric:tabular-nums}
/* 空の時の案内 */
body.mepage .empty{display:flex;align-items:flex-start;gap:12px;margin:0;padding:14px 16px;border-radius:12px;line-height:1.7;font-size:14px}
body.mepage .empty .eic{flex:none;width:34px;height:34px;padding:7px;border-radius:50%;color:var(--accent);background:var(--accent-soft)}
/* 続きから・お気に入り教材：表紙つきの行（行のどこを押しても開く） */
body.mepage .mrows li{display:block;padding:0;border-radius:12px;transition:border-color .15s}
body.mepage .mrows li:hover{border-color:var(--accent)}
body.mepage .mrows a{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px 10px 10px;color:var(--ink);text-decoration:none}
.mrows .mrb{display:flex;flex-direction:column;min-width:0;gap:1px}
.mrows .mt{font-family:var(--en);font-weight:800;font-stretch:88%;font-size:16px;line-height:1.25;overflow-wrap:anywhere}
.mrows .ms{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrows .prow{margin-top:5px}
.mrows .pbar{max-width:220px;min-width:48px}
.mrows .pnum{white-space:nowrap}
.mrows .mgo{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:11px}
@media (min-width:640px){
  .mehero{padding:22px 24px}
  body.mepage .mehead h1{font-size:26px}
  .mestep{grid-template-columns:200px minmax(0,1fr) auto;grid-template-areas:"cv bd go";gap:18px;padding:14px}
  .mestep .mscover{align-self:center;aspect-ratio:16/10}
  .mst{font-size:24px}
  .mestats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mestats .st:last-child:nth-child(odd){grid-column:auto}
  .metabs{margin:-14px 0 -16px}
  .metabs .mtin{padding:8px 0}
  body.mepage .mrows a{grid-template-columns:96px minmax(0,1fr) auto;gap:14px}
  .mrows .mthumb{width:96px}
}
@media (min-width:960px){
  .metabs .mtin{flex-wrap:wrap}
}
@media (max-width:639px){
  .mehero{padding:14px 14px 14px}
  body.mepage .mehead h1{font-size:21px}
}
@media (max-width:380px){
  .mestats .st{padding:10px;gap:9px}
  .mestats .sic{width:34px;height:34px;padding:7px}
  .mestats .stx b{font-size:24px}
}

/* v15 仕上げ：color-mix を読めない古い Safari（iOS 16.1 以前）では、var() 入りの color-mix が使う時に無効になり背景が消えるので、淡い地へ戻す。
   aspect-ratio を読めない Safari 14 では、表紙の枠の高さを固定値で作る */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .mthumb.ph,.mscover.ph,body.mepage .mine .lcover.ph{background:var(--accent-soft)}
  .mestats .sic,body.mepage .mesec h2 .shic{background:var(--accent-soft)}
}
@supports not (aspect-ratio: 4 / 3){
  .mthumb{height:54px}
  .mscover{min-height:120px}
  .mscover img{height:auto;max-height:220px}
}
/* v16（2026-10-02）上の欄の二段目：流す言葉（英語だけ／英＋日本語訳）と解説（あり／なし）を別々に。一段目の右に発音チェックの入切 */
.moderow{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--line);min-width:0}
.moderow .flowseg{height:38px;min-width:0}
.moderow .flowseg button{flex:1 1 0;min-width:0;padding:0 6px;overflow:hidden;text-overflow:ellipsis}
.pronbtn{flex:none;display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 11px 0 9px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--muted);font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer}
.pronbtn svg{width:17px;height:17px;flex:none}
.pronbtn[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--surface)}
.pronbtn:hover{border-color:var(--green)}
.ja.speaking,.fexja.speaking{border-left:3px solid var(--amber);padding-left:8px;color:var(--ink)}
@media (max-width:420px){
  .moderow{gap:6px}
  .moderow .flowseg button{font-size:12.5px;padding:0 4px}
  .pronbtn{padding:0 8px 0 7px;font-size:12.5px}
}
/* 管理者のチェックモード（一覧の上の帯。管理者にしか出ない） */
.admbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:4px 0 10px;padding:10px 12px;border:1.5px dashed var(--amber);border-radius:10px;background:var(--amber-dim)}
.admbar .admlab{font-size:13px;font-weight:700;color:var(--ink)}
.admbar .admseg{display:inline-flex;border:1.5px solid var(--amber);border-radius:999px;overflow:hidden}
.admbar .admseg a{display:inline-flex;align-items:center;min-height:36px;padding:0 13px;font-size:13px;font-weight:700;color:var(--ink);text-decoration:none}
.admbar .admseg a + a{border-left:1.5px solid var(--amber)}
.admbar .admseg a[aria-current="true"]{background:var(--amber);color:var(--surface)}
.admbar form{display:inline-flex;align-items:center;gap:6px;margin:0}
.admbar select{min-height:36px;max-width:220px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:13px;padding:0 8px}
.admbar .admnote{flex-basis:100%;font-size:12px;color:var(--muted)}
.badge.b-adm{background:var(--amber-dim);color:var(--amber);border:1px solid var(--amber)}

/* v17（2026-10-02）：教科書の形の設問（書く・並べかえ・1語つけ足し） */
body.hide-en .line.q .en-text.qask{filter:none;cursor:auto}
.qtype{display:inline-block;align-self:flex-start;font-size:11px;line-height:1.6;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:0 9px}
.q .wblank{font-family:var(--en);font-weight:700;font-size:max(16px,.9em);color:var(--accent);background:transparent;border:0;border-bottom:2px solid var(--accent);border-radius:0;padding:0 2px;margin:0 3px;text-align:center;min-width:3ch;max-width:70vw;outline:none}
.q .wblank:focus{background:var(--accent-soft)}
.q .built{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;vertical-align:middle;min-height:1.6em;min-width:7em;border-bottom:2px solid var(--muted);padding:2px 0}
.q .built .ph0{font-family:var(--ja,inherit);font-weight:400;font-size:13px;color:var(--muted)}
.tiles{display:flex;flex-wrap:wrap;gap:8px}
.tile{font-family:var(--en);font-weight:700;font-size:15px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:6px 14px;min-width:44px;min-height:36px}
.tile.x{border-style:dashed;border-color:var(--accent)}
.tile:disabled{opacity:.28;cursor:default}
.q .built .tile{font-size:inherit;padding:2px 10px;min-height:0;background:var(--surface)}
.addw{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.addw input{font-family:var(--en);font-weight:600;font-size:16px;border:1px solid var(--line);border-radius:8px;padding:5px 9px;width:8.5em;background:var(--bg);color:var(--ink)}
.addw input.need{border-color:var(--red)}
.qbtns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.qhint{font-size:13px;color:var(--muted)}
.yours{margin:0;font-size:13px;color:var(--muted)}
.yours span{font-family:var(--en);font-weight:600;color:var(--red);text-decoration:line-through}


/* A2：章の頭から（いま見ている章を頭から）／A1：章の操作（章の見出しのボタンを章の途中でも上の欄に） */
.chapgo,.chapops{flex:none;display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 11px 0 9px;border:1.5px solid var(--accent);border-radius:10px;background:var(--accent);color:var(--surface);font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer}
.chapgo svg,.chapops svg{width:15px;height:15px;flex:none;fill:currentColor}
.chapgo:disabled{opacity:.35;cursor:default}
.chapops{background:var(--bg);color:var(--accent)}
.chapops[aria-expanded="true"]{background:var(--accent-soft)}
.chapgo.pulse{animation:chgo 1.1s ease-in-out 3}
@keyframes chgo{0%,100%{box-shadow:0 0 0 0 var(--accent)}50%{box-shadow:0 0 0 5px var(--accent-soft)}}
@media (prefers-reduced-motion: reduce){ .chapgo.pulse{animation:none;outline:3px solid var(--amber)} }
.secmenu{grid-column:1 / -1;display:flex;flex-direction:column;gap:6px;padding:2px 0 8px;border-bottom:1px solid var(--line);min-width:0}
.secmenu[hidden]{display:none}
.secmenu .smhead{margin:0;display:flex;align-items:center;gap:6px;font-size:13px;min-width:0}
.secmenu .smhead b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.secmenu .smhead .tn{min-width:22px;height:22px;font-size:11px}
.secmenu .smhead .tn:empty{display:none}
.secmenu .secbtns{gap:6px}
.secmenu .pill{padding:6px 12px}
@media (max-width:560px){
  .chapgo,.chapops{padding:0 8px;gap:4px;font-size:12px}
  .chapops span{display:none}
  .chapops{width:40px;justify-content:center;padding:0}
}
.chapgo i{font-style:normal}
@media (max-width:420px){ .chapgo .cgx{display:none} }
@media (max-width:340px){ .chapgo span{display:none} .chapgo{width:40px;justify-content:center;padding:0} }

/* B4：いま読んでいる文の線を太く */
.line.is-playing,.line.q-active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent),inset 6px 0 0 var(--accent),0 10px 24px -14px var(--accent)}
.chunk.is-playing{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent),inset 6px 0 0 var(--accent)}
.ftext .fs.is-playing{background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent);border-radius:4px}
/* B3：読んでいる単語を追って光らせる */
.en-text .w.kw,.chen .w.kw,.qtext .w.kw{background:var(--amber-dim);box-shadow:0 2px 0 var(--amber);color:var(--ink);border-radius:3px;transition:background .08s}

/* C9：質問の和訳の「ヒント」 */
.qhintbtn{border:1px solid var(--amber);background:transparent;color:var(--amber);border-radius:999px;padding:1px 10px;font-size:12px;font-weight:700;margin-left:6px;vertical-align:1px;cursor:pointer}
.qhinttx{color:var(--amber);font-weight:700}
/* D13：クイズのカードの「次へ」 */
.qnav{justify-content:flex-end}
.qnextbtn{margin-left:auto}
.q .acts .cnext{margin-left:0}
/* F16：英訳チャレンジの答え（隠している間は押すと出る） */
.chen.hidden[data-act]{cursor:pointer;border:1.5px dashed var(--accent);border-radius:10px;padding:10px 12px;color:var(--accent);text-align:center}
.chen.hidden[data-act]:hover,.chen.hidden[data-act]:focus-visible{background:var(--accent-soft);outline:none}
.chen.hidden[data-act]::after{content:'押すと答え';display:block;letter-spacing:normal;font-family:var(--ja,inherit);font-size:12px;font-weight:700;color:var(--muted);margin-top:2px}
/* G18：マイクが使えず止めた時の「発音」 */
.pronbtn.blocked{border-color:var(--red);color:var(--red);border-style:dashed}

/* req19（2026-10-03）：いま選んでいる通し方（章の見出しの「通しで聞く／解説つきで通す／全部リピート」）に印。押していない方は枠だけ */
.pill.tmode.mode-on{background:var(--accent);color:var(--surface);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.pill.tmode.mode-on::before{content:"✓";font-weight:800;margin-right:2px}
/* 問題の章の見出し：1問目から・まだの問題へ・答えを全部隠す と正解の数 */
.qsecbtns{align-items:center}
.qsecbtns .qscore{margin-left:auto}
.pill.armed{background:var(--red, #c0392b);border-color:var(--red, #c0392b);color:#fff}
.line.q{cursor:pointer}
.line.q input,.line.q .tile,.line.q button{cursor:auto}
.line.q button,.line.q .tile{cursor:pointer}

/* 2026-10-03：設定のいちばん下の「eigo について」と、日本語の声の試聴 */
.setabout{margin:28px 0 6px;text-align:center;font-size:12px;line-height:1.6}
.setabout a{color:inherit;opacity:.62;text-decoration:underline;text-underline-offset:2px}
.setabout a:hover{opacity:1}
.jatry{margin-top:8px}
.about{max-width:720px;margin:0 auto;padding:24px 16px 64px;line-height:1.8}
.about h1{font-size:1.5rem;margin:8px 0 16px}
.about h2{font-size:1.15rem;margin:32px 0 8px}
.about h3{font-size:1rem;margin:20px 0 6px}
.about .credits{padding-left:1.2em;margin:8px 0}
.about .back{margin-top:40px}


/* 対訳の順・解説の詳しさ（英日対訳／解説ありを選んでいる時だけ、その下に小さく） */
.moderow .subseg{display:flex;align-items:center;gap:6px;min-width:0}
.moderow .subseg[hidden]{display:none}
#jaOrderSeg{grid-column:1}
#expLvSeg{grid-column:2}
.moderow .subseg .sublab{flex:none;font-size:11px;font-weight:700;color:var(--muted)}
.moderow .subseg .seg{flex:1 1 auto;flex-wrap:nowrap;min-width:0;border-color:var(--accent);border-radius:8px}
.moderow .subseg .seg button{flex:1 1 0;min-width:0;padding:4px 6px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--accent);border-right-color:var(--accent)}
.moderow .subseg .seg button[aria-pressed="true"]{color:var(--surface)}
/* 連続再生 */
.bbtn.auto[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--surface)}
/* 速さのつまみを長く（パソコンでは下の段の残りの幅をすべて使い、狭い時は一段下へ回る） */
.tailrow{flex-wrap:wrap;row-gap:8px}
.tailrow .speed{flex:1 1 340px}
.tailrow .speed input[type=range]{min-width:150px}
.speed .spends span:last-child{margin-right:22%}
@media (max-width:560px){
  .tailrow .speed{flex:1 1 220px}
  .tailrow .speed input[type=range]{min-width:120px}
}
/* 章の操作：見出しの右に「次の章へ」、最初から順番にの設定 */
.secmenu .smhead .smnext{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;font-size:12px}
.secmenu .smhead .smnext svg{width:12px;height:12px;fill:currentColor}
.secmenu .smrset{width:100%;margin-top:4px;padding:8px 10px;gap:8px 14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.secmenu .smrset .lab{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:3px}
/* 答えも含めて通す（入の時に印） */
.pill.tqauto[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent);font-weight:700}
.pill.tqauto svg{width:11px;height:11px;fill:currentColor;margin-right:3px;vertical-align:-1px}
/* 質問の答えを待っている：ぼかした答えを押すと先へ */
.line.qa-hide{cursor:pointer}
/* 全文：英日対訳の時は和訳の段を見せる（「和訳を隠す」で隠せる）。読んでいる文の和訳に印 */
body.lang-ej .fulltext:not(.no-ja) .fja{display:block}
.fulltext.no-ja .fja{display:none}
.fja .fjs{border-radius:3px;transition:background .2s}
.fja .fjs.speaking{background:var(--amber-dim);color:var(--ink)}


/* 見出しの段：章を選ぶ・頭から・次の章・章の操作（≡）。発音は下の「繰り返し・速さ」へ移した */
.chapops:disabled{opacity:.35;cursor:default}
@media (max-width:560px){ #secMenuBtn span{display:none} #secMenuBtn{padding:0 10px} .chapops.chapnext span{display:inline} .chapops.chapnext{width:auto;padding:0 9px 0 7px} .chapgo{padding:0 9px 0 7px} }
/* 畳む／広げる見出し */
.foldbar{grid-column:1 / -1;display:flex;align-items:center;gap:8px;width:100%;min-width:0;height:30px;margin:-4px 0;padding:0 4px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--muted);font-size:12px;font-weight:700;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.foldbar .fl{flex:none;color:var(--ink)}
.foldbar .fs{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.foldbar svg{flex:none;width:14px;height:14px;transition:transform .15s}
.foldbar[aria-expanded="true"] svg{transform:rotate(180deg)}
.foldbar[aria-expanded="true"] .fs{visibility:hidden}
.foldbar:hover .fl{color:var(--accent)}
.foldbar.tail{border-bottom:0;border-top:1px solid var(--line)}
.foldbar.tail + .tailrow{border-top:0;padding-top:0}
.moderow[hidden],.tailrow[hidden]{display:none}
/* いま流れているものの段を一行に：状態と文を横に並べ、進み具合の線は下端に重ねる */
.status{flex-direction:row;align-items:baseline;gap:8px;position:relative;padding-bottom:6px}
.status p{flex:0 1 auto;max-width:45%;font-size:13px}
.status .now{flex:1 1 0;min-width:0;font-size:12.5px}
.status .gap{position:absolute;left:0;right:0;bottom:0;height:3px}
.lamps{gap:6px}
.lamp i{width:16px;height:16px}
.lamp{font-size:9.5px}
/* 繰り返し・速さ：発音と解説もここへ */
.mbtn:disabled{opacity:.38;cursor:default}
.mbtn#pronBtn[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--surface)}
.mbtn#pronBtn.blocked{opacity:.5}
@media (max-width:860px){
  .tailrow{flex-wrap:wrap;row-gap:6px}
  .tailrow .pmodes{flex:1 1 100%}
  .tailrow .pmodes .mbtn{flex:1 1 0;min-width:0}
  .tailrow .speed{flex:1 1 100%}
}
@media (max-width:560px){
  .lamp i{width:14px;height:14px}
  .lamp{font-size:9px}
}


.gnav .gnavset{border:1.5px solid var(--accent);border-radius:8px;padding:4px 10px;color:var(--accent);font-weight:700;background:var(--surface)}
.gnav .gnavset:hover{background:var(--accent);color:var(--surface)}


/* 章の操作の見出し「〇〇の操作」：「の操作」が一字ずつ縦に折れないように（章の名前のほうを「…」で縮める） */
.secmenu .smhead > .small{flex:none;white-space:nowrap}
/* 対訳の順・解説の詳しさ：「ふつう｜詳しく｜両方」が「ふ…」「詳…」と切れないように。字の幅を確保し、狭い画面では一つずつ段を分ける */
.moderow .subseg .seg button{flex:1 0 auto;min-width:max-content;padding:4px 8px;text-overflow:clip}
@media (max-width:560px){ #jaOrderSeg,#expLvSeg{grid-column:1 / -1} }
/* 書く欄で打っている間（スマホ）は、上の欄を貼りつけず、問題と書く欄とキーボードを並べて見せる */
body.typing .bar{position:relative;top:auto}
/* fix1330：英語のキーボードの切り替え方（打っている間だけ出る注釈） */
/* fix1347：日本語が入った時だけ出る一行 */
.kbtip{margin:4px 0 0;font-size:12px;line-height:1.5;color:var(--accent)}


.top .lead{margin:10px 0 0}
.top .ownline{margin:10px 0 0}
.top .actline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:8px 0 0}
.top .meter{margin:14px 0 0;gap:6px}
.top .meter figcaption{align-items:baseline}
.top .meter .mlab{font-weight:700;color:var(--ink);margin-right:8px}
.top .meter figcaption .linkbtn{font-size:12px;white-space:nowrap}
.hdrfold{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 20px;margin:10px 0 0;font-size:13px}
.hdrfold details{min-width:0}
.hdrfold details[open]{flex-basis:100%}
.hdrfold summary{cursor:pointer;list-style:none;color:var(--muted);font-weight:700;padding:4px 0;user-select:none}
.hdrfold summary::-webkit-details-marker{display:none}
.hdrfold summary::before{content:'';display:inline-block;width:0;height:0;margin-right:7px;vertical-align:1px;border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
.hdrfold details[open] > summary::before{transform:rotate(90deg)}
.hdrfold summary:hover{color:var(--ink)}
.howto p{margin:4px 0 6px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 12px;line-height:1.7}
.related.top{margin:0}
.related.top .relrow{margin-top:6px}


.top .leadrow{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:10px 0 0}
.top .leadrow .lead{margin:0}
@media (min-width:700px){ .top .leadrow{grid-template-columns:minmax(0,1fr) 200px;gap:20px;align-items:start} }
.quickgo{display:flex;flex-wrap:wrap;gap:8px}
@media (min-width:700px){ .quickgo{flex-direction:column;flex-wrap:nowrap} }
.qg{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:12px;border:1.5px solid var(--accent);background:var(--surface);color:var(--accent);font:inherit;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;line-height:1.25;text-align:left;flex:1 1 auto}
.qg[hidden]{display:none}
.qg svg{width:16px;height:16px;fill:currentColor;flex:0 0 auto}
.qg small{display:block;font-weight:500;font-size:11px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.qg-start{background:var(--accent);color:#fff}
.qg-start:hover{filter:brightness(1.08)}
.qg-resume:hover,.qg-next:hover{background:var(--accent-soft)}
.qg:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}
.related.top{margin:14px 0 0}
.related.top .relhead{margin:0 0 6px}
.relrow.marquee{overflow-x:hidden;scroll-snap-type:none;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
.relrow.marquee.grab{cursor:grabbing}
.relrow.marquee .relbtn{scroll-snap-align:none}

/* fix1552：設問の進め方（答えてから進む／答えも含めて通す）の段。章の操作の中で一行を占め、押すといまの問題から始まる */
.qmodeset{flex-basis:100%;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-width:0}
.qmodeset .lab{font-size:13px;font-weight:700}
.qmodeseg button{padding:8px 14px;font-size:14px;display:inline-flex;align-items:center;gap:4px}
.qmodeseg svg{width:12px;height:12px;flex:none}
.qmodehint{font-size:12px}
@media (max-width:420px){.qmodeseg{flex:1 1 auto}.qmodeseg button{flex:1 1 0;justify-content:center;padding:8px 8px}.qmodehint{display:none}}
.gnav .gnavlec.lecon{background:var(--accent);color:var(--surface)}
.gnavlec .pk{margin-right:2px}
.lecture-tip{position:fixed;z-index:10000;max-width:min(340px,calc(100vw - 16px));padding:9px 13px;border-radius:10px;background:var(--ink);color:var(--surface);font-size:14px;line-height:1.6;font-weight:500;box-shadow:0 6px 20px rgba(20,24,50,.28);pointer-events:none}
.lecture-tip[hidden]{display:none}
.lecture-tip::after{content:"";position:absolute;left:var(--ax,20px);width:10px;height:10px;background:var(--ink);transform:translateX(-50%) rotate(45deg)}
.lecture-tip[data-side=below]::after{top:-4px}
.lecture-tip[data-side=above]::after{bottom:-4px}

.brand-demo{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:#ff7a66;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;line-height:1.7;vertical-align:middle;white-space:nowrap}

/* 2026-11-02 設定画面を本番と同じ構成に（押しボタン式。窓の外の設定欄にも同じ形を使う） */
.settings .seg{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;border:0;border-radius:0;overflow:visible;max-width:100%}
.settings .seg button{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);padding:6px 14px;font-size:13px;line-height:1.45;white-space:nowrap}
.settings .seg button:last-child{border-right:1px solid var(--line)}
.settings .seg button:hover{border-color:var(--accent)}
.settings .seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--surface);font-weight:700}
.settings>summary{cursor:pointer}.global-settings>summary{display:none}.settings .voiceset{padding:10px 0;display:grid;gap:10px}.settings .voiceset .hint{font-size:12px;color:var(--muted);line-height:1.55}
/* 2026-11-03 設定画面の崩れを直す：選択肢が多い行はラベルの下にボタンを並べる／ラベル列は最低幅を持つ／窓の中の二重の枠を外す */
.setrow{grid-template-columns:minmax(150px,1fr) minmax(0,auto)}
.setrow .seg{min-width:0}
.setrow-wide{grid-template-columns:minmax(0,1fr)}
.setrow-wide .seg{justify-content:flex-start}
.global-settings{background:none;border:0;border-radius:0;padding:0}
.setrow .setlab{flex:1 1 150px}
.setrow-wide{flex-direction:column;align-items:stretch}
.setrow-wide .setlab{flex:0 0 auto}
.setrow-wide .seg{align-self:flex-start}