:root{
  --bg:#faf9f6; --surface:#ffffff; --surface2:#f3f1ec; --ink:#1d1c1a; --ink2:#4a4741; --muted:#8a857c;
  --line:#e6e2d9; --line2:#d6d0c4;
  --accent:#2f5bd3; --accent-ink:#ffffff; --accent-soft:#e9effd; --accent-line:#c9d6f7;
  --warm:#d9480f; --warm-soft:#fff1e8; --warm-line:#ffd3b8;
  --good:#2b8a3e; --good-soft:#e9f7ec; --bad:#c92a2a; --bad-soft:#fdecec;
  --gold:#e8a200;
  --r:14px; --r-sm:9px;
  --shadow:0 1px 2px rgba(20,18,12,.05),0 4px 16px rgba(20,18,12,.05);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  --en:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#15161a; --surface:#1d1f24; --surface2:#25272d; --ink:#ecebe7; --ink2:#c4c1ba; --muted:#8d8a84;
    --line:#2e3037; --line2:#3b3e46;
    --accent:#7f9dff; --accent-ink:#0f1320; --accent-soft:#232b40; --accent-line:#34406a;
    --warm:#ff8a4c; --warm-soft:#2d221b; --warm-line:#57382a;
    --good:#69db7c; --good-soft:#1c2a20; --bad:#ff8787; --bad-soft:#2e1d1f;
    --shadow:0 1px 2px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.7;overflow-x:hidden}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;cursor:pointer}
input{font:inherit}
[hidden]{display:none!important}
.wrap{max-width:980px;margin:0 auto;padding:0 18px}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;height:60px}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:800;letter-spacing:.02em;white-space:nowrap;font-size:15px}
.brand:hover{text-decoration:none}
.brand .logo{width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:15px;font-weight:900;font-family:var(--en)}
.brand small{display:block;font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.08em;line-height:1}
.top .search{flex:1;max-width:460px;margin-left:auto}
.top nav{display:flex;gap:2px}
.top nav a{color:var(--ink2);padding:6px 10px;border-radius:8px;font-size:13px;white-space:nowrap}
.top nav a:hover{background:var(--surface2);text-decoration:none}
.top nav a.on{color:var(--accent);font-weight:700}

.mnav{display:none}

/* ---------- search ---------- */
.search{position:relative}
.search form{display:flex;align-items:center;background:var(--surface);border:1.5px solid var(--line2);border-radius:999px;padding:0 6px 0 16px;transition:border-color .15s,box-shadow .15s}
.search form:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);height:40px;font-size:16px}
.search .go{border:0;background:var(--accent);color:var(--accent-ink);border-radius:999px;height:32px;padding:0 14px;font-weight:700;font-size:13px}
.search.big form{padding:0 8px 0 22px;border-width:2px;box-shadow:var(--shadow)}
.search.big input{height:58px;font-size:19px}
.search.big .go{height:44px;padding:0 22px;font-size:15px}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.12);overflow:hidden;z-index:50;max-height:70vh;overflow-y:auto}
.sugg a{display:flex;align-items:baseline;gap:10px;padding:9px 16px;color:var(--ink);border-bottom:1px solid var(--line)}
.sugg a:last-child{border-bottom:0}
.sugg a:hover,.sugg a.sel{background:var(--accent-soft);text-decoration:none}
.sugg .w{font-weight:700;font-family:var(--en)}
.sugg .j{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.sugg .h{font-size:11px;color:var(--warm);font-weight:700;white-space:nowrap}

/* ---------- common ---------- */
main{min-height:70vh;padding:22px 0 40px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.muted{color:var(--muted)}
.small{font-size:13px}
.en{font-family:var(--en)}
h1,h2,h3{line-height:1.35;margin:0}
.sec-t{font-size:13px;font-weight:800;color:var(--muted);letter-spacing:.08em;margin:30px 0 10px;display:flex;align-items:center;gap:8px}
.sec-t::after{content:"";flex:1;height:1px;background:var(--line)}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:1px 9px;border-radius:999px;background:var(--surface2);color:var(--ink2);border:1px solid var(--line);white-space:nowrap;line-height:1.7}
.badge.lv1,.badge.lv2{background:var(--good-soft);color:var(--good);border-color:transparent}
.badge.lv3{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.badge.lv4,.badge.lv5{background:var(--warm-soft);color:var(--warm);border-color:transparent}
.badge.lv6,.badge.lv7{background:var(--surface2);color:var(--muted)}
.badge.reg{font-size:10.5px;padding:0 7px}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);background:var(--surface);border-radius:999px;padding:5px 14px;font-size:13px;color:var(--ink2);white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.btn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.icon{width:36px;height:36px;padding:0;justify-content:center;font-size:16px}
.loading{padding:60px 0;text-align:center;color:var(--muted)}
.spin{display:inline-block;width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite;vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:8px 16px;border-radius:999px;font-size:13px;z-index:99;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1}
mark{background:linear-gradient(transparent 55%,color-mix(in srgb,var(--gold) 45%,transparent) 55%);color:inherit;padding:0 1px}

/* ---------- home ---------- */
.hero{text-align:center;padding:44px 0 10px}
.hero .kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--warm);background:var(--warm-soft);border-radius:999px;padding:3px 12px;margin-bottom:14px}
.hero h1{font-size:clamp(28px,5.4vw,46px);font-weight:900;letter-spacing:.01em}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p.lead{color:var(--ink2);margin:10px auto 26px;max-width:600px;font-size:15.5px}
.hero .search{max-width:640px;margin:0 auto}
.tries{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.tries a{font-size:13.5px;padding:4px 13px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink2)}
.tries a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.stats{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin:30px 0 6px}
.stats div{text-align:center}
.stats b{display:block;font-size:24px;font-weight:900;font-family:var(--en);letter-spacing:-.01em}
.stats span{font-size:12px;color:var(--muted)}
.tip-card{background:var(--warm-soft);border:1px solid var(--warm-line);border-radius:var(--r);padding:18px 22px;margin-top:10px}
.tip-card .lbl{font-size:12px;font-weight:800;color:var(--warm);letter-spacing:.08em}
.tip-card .w{font-size:22px;font-weight:800;font-family:var(--en);color:var(--ink)}
.tip-card p{margin:6px 0 8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tile{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;color:var(--ink);transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-1px)}
.tile .ic{font-size:22px}
.tile h3{font-size:16px;margin:6px 0 2px}
.tile p{margin:0;font-size:13px;color:var(--muted);line-height:1.6}
.tile .n{font-family:var(--en);font-weight:800;color:var(--accent)}

/* ---------- word page ---------- */
.whead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin-bottom:6px}
.whead h1{font-size:clamp(34px,6vw,52px);font-weight:800;font-family:var(--en);letter-spacing:-.015em;line-height:1.1;word-break:break-word}
.whead .ipa{color:var(--muted);font-family:var(--en);font-size:15px}
.whead .acts{margin-left:auto;display:flex;gap:6px}
.wbadges{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.wja{font-size:18px;font-weight:700;margin:6px 0 2px}
.wja-more{margin:4px 0 0;padding:0;list-style:none;color:var(--ink2);font-size:14px}
.wja-more li{padding:2px 0 2px 22px;position:relative}
.wja-more li::before{content:attr(data-n);position:absolute;left:0;top:4px;font-size:10.5px;font-weight:700;color:var(--muted);background:var(--surface2);border-radius:5px;width:16px;text-align:center;line-height:16px}
.toggle{background:none;border:0;padding:0;color:var(--accent);font-size:13px}
.redirect{font-size:13px;color:var(--muted);margin-bottom:6px}

.uroko{margin:20px 0 6px;border:1.5px solid var(--warm-line);background:var(--surface);border-radius:18px;overflow:hidden}
.uroko>.hd{display:flex;align-items:center;gap:10px;background:var(--warm-soft);padding:10px 18px;font-weight:800;color:var(--warm);font-size:14px}
.uroko>.hd .sub{color:var(--muted);font-weight:600;font-size:12px}
.uroko .bd{padding:6px 18px 16px}
.u-row{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line)}
.u-row:last-child{border-bottom:0}
.u-row>.k{font-size:12px;font-weight:800;color:var(--muted);padding-top:3px;letter-spacing:.04em}
.u-row>.k i{font-style:normal;display:block;font-size:18px;line-height:1.1;margin-bottom:2px}
.u-row>.v{min-width:0}
@media (max-width:600px){.u-row{grid-template-columns:1fr;gap:4px}.u-row>.k i{display:inline;margin-right:4px;font-size:14px}}
.img-line{font-size:16px;font-weight:700;color:var(--ink)}
.para{display:grid;gap:8px}
.para .p{display:grid;grid-template-columns:190px 1fr;gap:4px 14px;align-items:baseline;padding:8px 12px;border-radius:var(--r-sm);background:var(--surface2)}
.para .p .en{font-weight:800;font-size:16px}
.para .p .en a{color:var(--ink)}
.para .p .en a:hover{color:var(--accent)}
.para .p .ja{font-weight:700;font-size:14px}
.para .p .nu{grid-column:2;color:var(--ink2);font-size:13.5px;line-height:1.6}
@media (max-width:600px){.para .p{grid-template-columns:1fr}.para .p .nu{grid-column:1}}
.pp{border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line)}
.pp .s,.pp .x{padding:9px 14px;font-family:var(--en);font-size:15px}
.pp .s{background:var(--surface2)}
.pp .x{background:var(--accent-soft)}
.pp .lab{display:block;font-family:var(--font);font-size:10.5px;font-weight:800;color:var(--muted);letter-spacing:.06em}
.pp .x .lab{color:var(--accent)}
.pp .arrow{text-align:center;font-size:12px;color:var(--muted);background:var(--surface);line-height:22px}
.pp .j{padding:7px 14px;font-size:13px;color:var(--ink2);border-top:1px solid var(--line)}
.trap{color:var(--ink)}
.chips-s{display:flex;flex-wrap:wrap;gap:6px}
.chips-s a,.chips-s span{font-size:13.5px;padding:2px 11px;border-radius:999px;background:var(--surface2);color:var(--ink2);border:1px solid var(--line)}
.chips-s a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.chips-s .j{color:var(--muted);font-size:12px;margin-left:4px}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:26px 0 0;overflow-x:auto;scrollbar-width:none;position:sticky;top:60px;background:var(--bg);z-index:20}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:none;padding:10px 14px;font-weight:700;color:var(--muted);border-bottom:2.5px solid transparent;white-space:nowrap;font-size:14.5px}
.tabs button b{font-family:var(--en);font-weight:700;font-size:12px;margin-left:5px;color:var(--muted);background:var(--surface2);border-radius:999px;padding:0 7px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.tabs button.on b{background:var(--accent-soft);color:var(--accent)}
.filters{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:12px 0 6px}
.seg{display:inline-flex;background:var(--surface2);border-radius:999px;padding:3px;gap:2px}
.seg button{border:0;background:none;border-radius:999px;padding:3px 11px;font-size:12.5px;color:var(--ink2);white-space:nowrap}
.seg button.on{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.filters .lbl{font-size:11.5px;color:var(--muted);font-weight:700;margin-right:-8px}
.filters input.ff{border:1px solid var(--line2);background:var(--surface);border-radius:999px;padding:3px 12px;font-size:13px;color:var(--ink);width:150px;outline:0}
.filters input.ff:focus{border-color:var(--accent)}

.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:8px;padding:8px 0}
.chip{position:relative;display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 12px 7px 14px;color:var(--ink);min-width:0;transition:border-color .12s,background .12s}
.chip:hover{border-color:var(--accent);text-decoration:none;background:var(--accent-soft)}
.chip::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);opacity:var(--o,.2)}
.chip .w{display:block;font-weight:700;font-family:var(--en);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .j{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:1.5em}
.chip.s5 .w{color:var(--ink)}
.chip.cur{border-color:var(--warm-line)}
.chip.cur::after{content:"入試";position:absolute;right:6px;top:6px;font-size:9.5px;font-weight:800;color:var(--warm);background:var(--warm-soft);border-radius:5px;padding:0 4px;line-height:1.5}
.more{display:block;margin:10px auto 0}
.empty{padding:28px;text-align:center;color:var(--muted)}

.sense{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px 18px;margin-top:10px}
.sense .hd{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.sense .n{font-family:var(--en);font-weight:800;color:var(--accent)}
.sense .jl{font-weight:800}
.sense .def{font-family:var(--en);color:var(--ink2);font-size:14px;margin:2px 0 6px}
.sense .ex{font-family:var(--en);color:var(--muted);font-size:13.5px;font-style:italic;margin-bottom:6px}
.sense .rl{font-size:11.5px;font-weight:800;color:var(--muted);margin:8px 0 4px}

.exs{list-style:none;padding:0;margin:10px 0 0}
.exs li{padding:12px 16px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);margin-bottom:8px}
.exs .e{font-family:var(--en);font-size:15.5px}
.exs .j{color:var(--ink2);font-size:13.5px}
.exs .src{float:right;font-size:10.5px;color:var(--muted)}

.ng-link{display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);color:var(--ink);margin-top:8px}
.ng-link:hover{border-color:var(--accent);text-decoration:none}
.ng-link .t{font-weight:700}
.ng-link .q{font-size:12.5px;color:var(--muted)}

/* ---------- nuance ---------- */
.nu-q{font-size:15px;color:var(--ink2);margin:6px 0 16px;padding-left:12px;border-left:3px solid var(--warm)}
.nu-table{display:grid;gap:10px}
.nu-w{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;display:grid;grid-template-columns:150px 1fr 150px;gap:4px 16px;align-items:start}
.nu-w .en{font-weight:800;font-size:18px}
.nu-w .ja{font-size:13px;font-weight:700;color:var(--ink2)}
.nu-w .nu{font-size:14px;color:var(--ink)}
.meter{font-size:10.5px;color:var(--muted);font-weight:700;margin-bottom:3px}
.bar{height:6px;background:var(--surface2);border-radius:9px;overflow:hidden;margin:2px 0 6px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:9px}
.bar.f i{background:var(--warm)}
@media (max-width:680px){.nu-w{grid-template-columns:1fr}}
.point{background:var(--accent-soft);border-radius:var(--r);padding:14px 18px;margin:16px 0}
.point b{color:var(--accent)}
.box-tip{background:var(--warm-soft);border-radius:var(--r);padding:14px 18px;margin:12px 0}
.box-tip b{color:var(--warm)}
.box-trap{background:var(--bad-soft);border-radius:var(--r);padding:14px 18px;margin:12px 0}
.box-trap b{color:var(--bad)}
.list{display:grid;gap:8px}
.li{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink)}
.li:hover{border-color:var(--accent);text-decoration:none}
.li .t{font-weight:700;flex:1;min-width:0}
.li .s{font-size:12.5px;color:var(--muted);display:block;font-weight:400}
.forms{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.forms .f{padding:12px 16px}
.forms .f+.f{border-top:1px solid var(--line)}
.forms .f .e{font-family:var(--en);font-size:16px;font-weight:600}
.forms .f .j{font-size:13.5px;color:var(--ink2)}
.forms .eq{text-align:center;color:var(--accent);font-weight:800;font-size:13px;background:var(--accent-soft);line-height:24px}
.trapc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px}
.trapc .jp{font-size:12px;color:var(--muted);font-weight:700}
.trapc .wr{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:2px 0 6px}
.trapc .x{color:var(--bad);font-weight:700;text-decoration:line-through;text-decoration-thickness:1.5px;font-family:var(--en)}
.trapc .o{color:var(--good);font-weight:800;font-family:var(--en);font-size:17px}
.trapc .why{font-size:14px}
.trapc .ex{font-family:var(--en);font-size:14px;color:var(--ink2);margin-top:6px}
.cols2{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}

/* ---------- quiz ---------- */
.quiz{max-width:640px;margin:0 auto}
.q-prog{height:6px;background:var(--surface2);border-radius:9px;overflow:hidden;margin-bottom:18px}
.q-prog i{display:block;height:100%;background:var(--accent);transition:width .3s}
.q-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px}
.q-sent{font-family:var(--en);font-size:18px;line-height:1.6;margin:8px 0}
.q-sent u{text-decoration:none;background:var(--accent-soft);color:var(--accent);font-weight:800;padding:0 4px;border-radius:5px}
.q-opts{display:grid;gap:8px;margin-top:16px}
.q-opts button{text-align:left;border:1.5px solid var(--line2);background:var(--surface);border-radius:12px;padding:12px 16px;font-family:var(--en);font-size:16px;font-weight:600}
.q-opts button:hover:not(:disabled){border-color:var(--accent)}
.q-opts button.ok{border-color:var(--good);background:var(--good-soft);color:var(--good)}
.q-opts button.ng{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
.q-opts button .j{display:block;font-family:var(--font);font-size:12px;font-weight:600;opacity:.8}
.q-exp{margin-top:14px;padding:12px 16px;background:var(--surface2);border-radius:12px;font-size:14px}
.big-score{font-size:56px;font-weight:900;font-family:var(--en);color:var(--accent);line-height:1}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);padding:26px 0 34px;margin-top:30px;color:var(--muted);font-size:13px}

footer.site .harada{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--ink);font-size:14px;border:1px solid var(--line2);border-radius:999px;padding:6px 16px;background:var(--surface)}
footer.site .harada:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
footer.site nav{display:flex;flex-wrap:wrap;gap:6px 16px}
footer.site nav a{color:var(--muted)}
.prose h2{font-size:18px;margin:26px 0 8px}
.prose p,.prose li{color:var(--ink2)}

/* ---------- speak buttons ---------- */
.spk{border:0;background:none;padding:0 3px;font-size:14px;line-height:1;cursor:pointer;opacity:.55;vertical-align:baseline;transition:opacity .15s,transform .15s}
.spk:hover{opacity:1;transform:scale(1.15)}
.spk.playing,.btn.playing{opacity:1;animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.18)}}

/* =====================================================================
   シェル（ヘッダー・ハンバーガー・ドロワー・検索オーバーレイ・上へ戻る）
   ===================================================================== */
.ibtn{display:none;width:42px;height:42px;border:0;background:none;border-radius:12px;place-items:center;color:var(--ink);flex:none;-webkit-tap-highlight-color:transparent}
.ibtn:active{background:var(--surface2)}
.ibtn svg,.mnav svg,.totop svg,.dr-search svg,.hc-go svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brand .txt{line-height:1.25}
.brand .txt small{font-size:10px;color:var(--accent);font-weight:800;letter-spacing:.04em;margin-bottom:1px}
.hero-title{display:block;width:fit-content;margin:0 auto;color:var(--ink)}
.hero-title:hover{text-decoration:none;opacity:.88}
.hero-sub{font-size:15px;font-weight:800;color:var(--accent);letter-spacing:.06em;margin-bottom:2px}

.drawer-bg{position:fixed;inset:0;background:rgba(10,10,14,.42);z-index:80;opacity:0;transition:opacity .25s}
body.drawer-open .drawer-bg{opacity:1}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(86vw,340px);background:var(--bg);z-index:90;transform:translateX(-102%);transition:transform .26s cubic-bezier(.2,.8,.2,1);overflow-y:auto;overscroll-behavior:contain;padding:calc(8px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom));box-shadow:4px 0 30px rgba(0,0,0,.18);visibility:hidden}
body.drawer-open .drawer{transform:none;visibility:visible}
body.drawer-open,body.sov-open{overflow:hidden}
.dr-head{display:flex;align-items:center;justify-content:space-between;height:52px}
.dr-head .ibtn{display:grid}
.dr-search{display:flex;align-items:center;gap:10px;width:100%;border:1.5px solid var(--line2);background:var(--surface);border-radius:999px;padding:0 16px;height:46px;color:var(--muted);font-size:15px;margin:6px 0 4px;text-align:left}
.dr-search svg{width:20px;height:20px}
.dr-t{font-size:11.5px;font-weight:800;color:var(--muted);letter-spacing:.1em;margin:18px 6px 6px}
.dr-i{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:12px;color:var(--ink);min-height:52px}
.dr-i:hover,.dr-i:active{background:var(--surface2);text-decoration:none}
.di{width:34px;height:34px;border-radius:10px;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:800;font-size:17px;flex:none}
.dl{flex:1;font-weight:700;font-size:15px;line-height:1.35}
.dl small{display:block;font-weight:500;font-size:12px;color:var(--muted)}
.dn{font-family:var(--en);font-size:12px;font-weight:700;color:var(--muted);background:var(--surface2);border-radius:999px;padding:1px 8px}
.dr-set{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px;font-weight:700;font-size:14px}
.dr-set .seg button{padding:5px 12px;font-size:13px}
.dr-harada{display:block;margin:14px 0 0;padding:14px 16px;border-radius:14px;background:var(--accent-soft);color:var(--ink);border:1px solid var(--accent-line)}
.dr-harada:hover{text-decoration:none}
.dr-harada b{display:block;color:var(--accent);font-size:16px}
.dr-harada span{display:block;font-size:12.5px;color:var(--ink2);line-height:1.6;margin-top:2px}

.sov{position:fixed;inset:0;z-index:95;background:var(--bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
.sov[hidden]{display:none!important}
.sov-top{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line)}
.sov-top .ibtn{display:grid}
.sov-top #sovSearch{flex:1}
.sov .sugg{position:fixed;left:0;right:0;top:calc(62px + env(safe-area-inset-top));bottom:0;max-height:none;border-radius:0;border:0;box-shadow:none;border-top:1px solid var(--line)}
.sov .sugg a{padding:14px 18px;min-height:52px;align-items:center}
.sov-body{flex:1;overflow-y:auto;padding:4px 16px 30px}

.totop{position:fixed;right:18px;bottom:24px;z-index:45;width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);background:var(--surface);color:var(--accent);display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.14);opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .2s,transform .2s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:active{transform:scale(.94)}

/* フッターの原田英語カード */
footer.site .wrap{display:block}
.harada-card{display:block;background:var(--surface);border:1.5px solid var(--accent-line);border-radius:18px;padding:18px 22px;color:var(--ink);margin-bottom:18px;transition:border-color .15s,box-shadow .15s}
.harada-card:hover{text-decoration:none;border-color:var(--accent);box-shadow:var(--shadow)}
.hc-kicker{display:block;font-size:12px;font-weight:700;color:var(--muted)}
.hc-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;font-size:21px;font-weight:900;color:var(--ink);margin:2px 0 6px}
.hc-go{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:800;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:4px 12px 4px 14px}
.hc-go svg{width:16px;height:16px}
.hc-desc{display:block;font-size:13.5px;color:var(--ink2);line-height:1.75}
.foot-bottom{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center}
.foot-bottom nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.foot-bottom nav a{color:var(--muted)}
.spk{min-width:30px;min-height:30px}

/* =====================================================================
   タブレット・スマホ
   ===================================================================== */
@media (max-width:900px){
  .top nav{display:none}
  .ibtn{display:grid}
  .top .wrap{height:56px;gap:4px;padding:0 6px}
  .top .search{display:none!important}
  .brand{flex:1;justify-content:center;font-size:15px;min-width:0}
  .brand .txt{display:block;text-align:center}
  .top .brand .logo{display:none}
  .tabs{top:56px}
}
@media (max-width:760px){
  .wrap{padding:0 14px}
  main{padding:14px 0 30px}

  /* 下のタブバー */
  .mnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;background:var(--surface);border-top:1px solid var(--line);height:calc(60px + env(safe-area-inset-bottom));padding:4px 6px env(safe-area-inset-bottom);box-shadow:0 -4px 18px rgba(0,0,0,.05)}
  .mnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;font-weight:700;color:var(--muted);border-radius:12px;line-height:1.2}
  .mnav a:hover{text-decoration:none}
  .mnav a svg{width:23px;height:23px}
  .mnav a.on{color:var(--accent)}
  .mnav a.on svg{stroke-width:2.4}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .totop{bottom:calc(76px + env(safe-area-inset-bottom));right:14px}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}

  /* ホーム */
  .hero{padding:18px 0 4px}
  .hero .kicker{font-size:11px;margin-bottom:10px}
  .hero-sub{font-size:13px}
  .hero h1{font-size:clamp(24px,7.2vw,32px);letter-spacing:0;white-space:nowrap}
  .hero p.lead{font-size:14px;margin:8px auto 18px;text-align:left}
  .search.big form{padding:0 6px 0 18px}
  .search.big input{height:52px;font-size:16px}
  .search.big .go{height:40px;padding:0 16px;font-size:14px}
  .tries{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:14px -14px 0;padding:0 14px 4px;scrollbar-width:none}
  .tries::-webkit-scrollbar{display:none}
  .tries a{flex:none;padding:7px 15px;font-size:14px}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0 0}
  .stats div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 6px}
  .stats b{font-size:21px}
  .stats span{font-size:11px}
  .tip-card{padding:14px 16px}
  .tip-card .w{font-size:20px}
  .grid{grid-template-columns:1fr 1fr;gap:8px}
  .tile{padding:12px 13px;border-radius:14px}
  .tile .ic{font-size:18px}
  .tile h3{font-size:14.5px;margin:2px 0}
  .tile p{font-size:11.5px;line-height:1.5}
  .sec-t{margin:22px 0 8px}

  /* 単語ページ */
  .whead{gap:4px 10px}
  .whead h1{font-size:38px}
  .whead .acts{margin-left:0;width:100%;display:grid;grid-template-columns:repeat(4,44px) 1fr;gap:8px;margin-top:8px;order:5}
  .whead .acts .btn.icon{width:44px;height:44px;font-size:18px}
  .whead .acts #bSave{height:44px;justify-content:center;font-size:14px}
  .wja{font-size:16.5px}
  .uroko{margin:16px -4px 4px;border-radius:16px}
  .uroko>.hd{padding:10px 14px;font-size:13.5px;flex-wrap:wrap;gap:2px 8px}
  .uroko .bd{padding:2px 14px 12px}
  .u-row{padding:12px 0}
  .para .p{padding:10px 12px;gap:2px}
  .para .p .en{font-size:16.5px}
  .pp .s,.pp .x{padding:9px 12px;font-size:15px}
  .tabs{margin:20px -14px 0;padding:0 8px}
  .tabs button{padding:12px 11px;font-size:14px}
  .filters{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px;padding:10px 14px 6px;scrollbar-width:none;gap:8px}
  .filters::-webkit-scrollbar{display:none}
  .filters>*{flex:none}
  .seg button{padding:6px 11px;font-size:13px}
  .filters input.ff{width:140px;padding:6px 12px;font-size:16px}
  .chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .chip{padding:8px 10px 8px 13px;min-height:54px}
  .chip .w{font-size:15px}
  .chip .j{font-size:11.5px}
  .chip.cur::after{top:4px;right:4px;font-size:9px}
  .more{width:100%;justify-content:center;height:46px;font-size:14px}
  .sense{padding:12px 14px}
  .ng-link{padding:12px 14px}
  .exs li{padding:12px 14px}

  /* 一覧・使い分け・構文・ワナ */
  .li{min-height:56px;padding:10px 14px}
  .nu-w{grid-template-columns:1fr;padding:12px 14px}
  .nu-w>div:last-child{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center}
  .nu-w .meter,.nu-w .bar{margin:0}
  .cols2{grid-template-columns:1fr}
  .forms .f{padding:12px 14px}
  .forms .f .e{font-size:15.5px}

  /* クイズ */
  .q-card{padding:16px;border-radius:16px}
  .q-sent{font-size:17px}
  .q-opts button{padding:14px 16px;min-height:56px;font-size:16px}
  #bSfx{float:none!important;display:inline-flex;margin:0 0 8px}

  /* フッター */
  footer.site{padding:18px 0 22px;margin-top:10px}
  .harada-card{padding:16px 18px}
  .hc-name{font-size:19px}
  .foot-bottom{flex-direction:column;align-items:flex-start}
}

/* ---------- クイズ: 制限時間バー ---------- */
.q-settings{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px 14px;margin:6px 0 14px}
.qs-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 0}
.qs-row+.qs-row{border-top:1px dashed var(--line)}
.qs-l{font-weight:700;font-size:14px}
.q-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.q-head b{color:var(--ink);font-size:15px}
.q-prog{margin-bottom:10px}
.q-timer{display:flex;align-items:center;gap:10px;margin:0 0 12px;--tc:var(--good)}
.q-timer.warn{--tc:#e8a200}
.q-timer.danger{--tc:var(--bad)}
.q-tbar{flex:1;height:12px;background:var(--surface2);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.q-tbar i{display:block;height:100%;width:100%;background:var(--tc);border-radius:99px;transform-origin:left center;transition:background-color .3s}
.q-sec{font-family:var(--en);font-weight:800;font-size:15px;color:var(--tc);min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
.q-timer.danger .q-sec{animation:pulse .5s ease-in-out infinite}
#bSfx{float:none}

/* ---------- 英英の定義 ---------- */
.wen{display:flex;flex-direction:column;gap:3px;margin:4px 0 6px;font-family:var(--en);font-size:14.5px;color:var(--ink2);line-height:1.55}
.wen-i{display:flex;align-items:baseline;gap:8px}
.wen-i .badge{flex:none;font-family:var(--font);font-size:10.5px;padding:0 7px}
.endef{margin:10px 0 4px;display:grid;gap:8px}
.endef-t{font-size:11.5px;font-weight:800;color:var(--muted);letter-spacing:.08em}
.endef-i{display:grid;grid-template-columns:auto auto 1fr;gap:6px 10px;align-items:start;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm)}
.endef-i .n{font-family:var(--en);font-weight:800;color:var(--accent);font-size:14px;line-height:1.7}
.endef-i .badge{margin-top:3px}
.endef-i .b{min-width:0}
.endef-i .en{font-family:var(--en);font-size:15.5px;color:var(--ink);line-height:1.55}
.endef-i .j{font-size:13px;font-weight:700;color:var(--ink2);margin-top:2px}
.endef-i .ex{font-family:var(--en);font-size:13px;color:var(--muted);font-style:italic;margin-top:2px}
@media (max-width:600px){.endef-i{grid-template-columns:auto 1fr}.endef-i .badge{grid-column:2;justify-self:start}.endef-i .b{grid-column:1/-1}}

.badge.toeic{background:#e3fafc;color:#0b7285;border-color:transparent}
@media (prefers-color-scheme:dark){.badge.toeic{background:#12333a;color:#66d9e8}}

.targets{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:-12px 0 20px}
.tg{font-size:12px;font-weight:800;padding:2px 11px;border-radius:999px;color:#fff;background:var(--ink2)}
.tg.a{background:var(--warm)}.tg.b{background:var(--accent)}
@media (max-width:760px){.targets{margin:-6px 0 16px}}

.faq{margin-top:26px}
.faq summary{cursor:pointer;font-size:13px;font-weight:800;color:var(--muted);letter-spacing:.08em;list-style:none;display:flex;align-items:center;gap:8px}
.faq summary::before{content:"▸";font-size:12px}
.faq[open] summary::before{content:"▾"}
.faq summary::after{content:"";flex:1;height:1px;background:var(--line)}
.faq .card{margin-top:10px}
.faq .sec-t{margin-top:16px}

.chip.cur.tc{border-color:#99e9f2}
.chip.cur.tc::after{content:"TOEIC";color:#0b7285;background:#e3fafc}

.foot-bottom nav{max-width:100%}
.foot-bottom nav a{font-size:13px;padding:2px 0}