/* =========================================================
   TED HACK — STAGE × NOTEBOOK
   入り口はシンプル、中身は超絶。
   ========================================================= */
:root{
  --paper:#FFF8F0; --paper2:#FFEFDD; --card:#FFFFFF; --ink:#15141A; --ink2:#48465A; --mute:#7B7990; --line:#15141A;
  --dot:rgba(21,20,26,.07);
  --red:#E5322D; --red2:#FF5A4F; --sun:#FFC53D; --sky:#3B82F6; --mint:#14B87A; --grape:#7C5CFC; --pink:#FF5C93; --teal:#12B5C4;
  --red-s:#FFE1DE; --sun-s:#FFF1C7; --sky-s:#DDEAFF; --mint-s:#D5F6E7; --grape-s:#E9E3FF; --pink-s:#FFE0EB; --teal-s:#D3F4F7;
  --stage:#15141A; --stage2:#221F2B;
  --shadow:4px 4px 0 var(--line); --shadow-s:2px 2px 0 var(--line); --shadow-l:7px 7px 0 var(--line);
  --r:18px; --r-s:12px;
  --f-jp:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP","Yu Gothic",system-ui,sans-serif;
  --f-disp:"Outfit","Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  --f-logo:"Dela Gothic One","Zen Kaku Gothic New",sans-serif;
  --f-num:"Outfit","Zen Kaku Gothic New",sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#14131A; --paper2:#1C1B25; --card:#211F2C; --ink:#F6F2EA; --ink2:#CFCBDD; --mute:#9994B0; --line:#050409;
  --dot:rgba(255,255,255,.05);
  --red-s:#4B2225; --sun-s:#453C1B; --sky-s:#1D2E52; --mint-s:#153F34; --grape-s:#2E2557; --pink-s:#48213A; --teal-s:#123C45;
  --stage:#0B0A10; --stage2:#181620;
  --shadow:4px 4px 0 #000; --shadow-s:2px 2px 0 #000; --shadow-l:7px 7px 0 #000;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14131A; --paper2:#1C1B25; --card:#211F2C; --ink:#F6F2EA; --ink2:#CFCBDD; --mute:#9994B0; --line:#050409;
    --dot:rgba(255,255,255,.05);
    --red-s:#4B2225; --sun-s:#453C1B; --sky-s:#1D2E52; --mint-s:#153F34; --grape-s:#2E2557; --pink-s:#48213A; --teal-s:#123C45;
    --stage:#0B0A10; --stage2:#181620;
    --shadow:4px 4px 0 #000; --shadow-s:2px 2px 0 #000; --shadow-l:7px 7px 0 #000;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-jp);font-size:16px;line-height:1.85;
  background-image:radial-gradient(var(--dot) 1.2px,transparent 1.2px);background-size:22px 22px;overflow-x:clip;padding-bottom:78px}
@media(min-width:900px){body{padding-bottom:0}}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{line-height:1.35;margin:0}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:6px}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.narrow{max-width:800px;margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hide{display:none!important}
.mute{color:var(--mute)}
.num{font-family:var(--f-num);font-weight:800;letter-spacing:.01em}
.hl{background:linear-gradient(transparent 58%,var(--sun) 58%,var(--sun) 92%,transparent 92%);padding:0 .1em;color:inherit;font-weight:700}
mark.hl{color:inherit}
.hl-red{background:linear-gradient(transparent 58%,#FFB4AE 58%,#FFB4AE 92%,transparent 92%)}
.center{text-align:center}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2.5px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:14px;height:60px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--f-logo);font-size:20px;letter-spacing:.02em;white-space:nowrap}
.logo b{font-family:var(--f-jp);font-weight:900;font-size:.82em;background:var(--red);color:#fff;border:2.5px solid var(--line);border-radius:8px;padding:0 8px 1px;box-shadow:var(--shadow-s);transform:rotate(-2deg);display:inline-block}
.logo small{font-family:var(--f-jp);font-weight:700;font-size:10px;line-height:1.25;color:var(--mute);letter-spacing:0;display:block;white-space:nowrap}
@media(min-width:1000px){.logo small{font-size:11.5px}}
@media(max-width:359px){.logo small{display:none}}
.gnav{display:none;gap:4px;margin-left:auto;align-items:center}
@media(min-width:900px){.gnav{display:flex}}
.gnav a,.gnav button{text-decoration:none;font-weight:700;font-size:14.5px;padding:8px 12px;border-radius:999px;border:2px solid transparent;background:none}
.gnav a:hover,.gnav button:hover,.gnav a[aria-current]{border-color:var(--line);background:var(--card);box-shadow:var(--shadow-s)}
.hd-tools{display:flex;gap:6px;margin-left:auto}
@media(min-width:900px){.hd-tools{margin-left:8px}}
.ib{width:40px;height:40px;border-radius:12px;border:2px solid var(--line);background:var(--card);box-shadow:var(--shadow-s);display:grid;place-items:center;font-size:17px;padding:0}
.ib:active{transform:translate(2px,2px);box-shadow:none}
.xpchip{display:flex;align-items:center;gap:6px;border:2px solid var(--line);border-radius:999px;background:var(--sun);padding:3px 10px;font-weight:800;font-size:13px;box-shadow:var(--shadow-s);text-decoration:none;color:#15141A}
.xpchip .num{font-size:14px}
@media(max-width:420px){.xpchip .lbl{display:none}}

/* mega menu (もっと見る) */
.mm{position:fixed;inset:60px 0 0 0;background:rgba(21,20,26,.55);z-index:49;display:none;overflow:auto;padding:16px}
.mm.open{display:block}
.mm-in{max-width:980px;margin:0 auto;background:var(--paper);border:2.5px solid var(--line);border-radius:22px;box-shadow:var(--shadow-l);padding:18px}
.mm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.mm-grid a{display:flex;gap:10px;align-items:center;text-decoration:none;padding:10px 12px;border:2px solid var(--line);border-radius:14px;background:var(--card);font-weight:700;line-height:1.35}
.mm-grid a:hover{background:var(--sun-s);box-shadow:var(--shadow-s)}
.mm-grid a small{display:block;font-weight:500;color:var(--mute);font-size:12px}
.mm-grid a .em{font-size:22px}
.mm h4{font-family:var(--f-disp);font-size:15px;margin:14px 0 8px}
.mm h4:first-child{margin-top:0}

/* bottom nav (mobile) */
.bn{position:fixed;left:0;right:0;bottom:0;z-index:48;background:var(--card);border-top:2.5px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}
@media(min-width:900px){.bn{display:none}}
.bn a{display:flex;flex-direction:column;align-items:center;gap:0;padding:7px 2px 6px;text-decoration:none;font-size:11px;font-weight:700;color:var(--ink2)}
.bn a .e{font-size:22px;line-height:1.1}
.bn a[aria-current]{color:var(--red)}
.bn a[aria-current] .e{transform:translateY(-2px) scale(1.1)}

/* ---------- buttons / chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;text-decoration:none;border:2.5px solid var(--line);border-radius:14px;background:var(--card);padding:10px 18px;box-shadow:var(--shadow);transition:transform .08s,box-shadow .08s;line-height:1.3;cursor:pointer}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--line)}
.btn:active{transform:translate(3px,3px);box-shadow:none}
.btn.red{background:var(--red);color:#fff}
.btn.sun{background:var(--sun);color:#15141A}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.mint{background:var(--mint);color:#fff}
.btn.sm{padding:6px 12px;font-size:13.5px;border-radius:11px;box-shadow:var(--shadow-s)}
.btn.lg{padding:15px 26px;font-size:18px;border-radius:16px}
.btn[disabled]{opacity:.5;pointer-events:none}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:4px;border:2px solid var(--line);border-radius:999px;padding:2px 11px;font-size:13px;font-weight:700;background:var(--card);text-decoration:none;line-height:1.5;cursor:pointer}
button.chip:hover,a.chip:hover{background:var(--sun-s)}
.chip.on,.chip.on:hover{background:var(--ink);color:var(--paper)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.badge{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:800;border:2px solid var(--line);border-radius:8px;padding:0 7px;line-height:1.55;background:var(--card);white-space:nowrap}
.b-ja{background:var(--mint-s)}.b-nja{background:var(--paper2);color:var(--mute);border-style:dashed}
.b-ted{background:var(--red);color:#fff}.b-teded{background:var(--sun)}.b-tedx{background:var(--grape);color:#fff}.b-anim{background:#2f6fd6;color:#fff}.b-other{background:#555;color:#fff}
.b-viral{background:var(--pink);color:#fff}
.b-lv1{background:var(--mint-s)}.b-lv2{background:var(--sun-s)}.b-lv3{background:var(--red-s)}
.b-hall{background:linear-gradient(135deg,#FFD86B,#FFB020);color:#15141A}

/* ---------- section scaffolding ---------- */
main{min-height:60vh}
.sec{padding:34px 0}
.sec-h{display:flex;align-items:flex-end;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.sec-h h2{font-family:var(--f-disp);font-size:clamp(22px,4.2vw,32px);letter-spacing:.01em}
.sec-h p{margin:4px 0 0;color:var(--ink2);font-size:15px}
.eyebrow{display:inline-block;font-family:var(--f-num);font-weight:800;font-size:12px;letter-spacing:.14em;color:var(--red);text-transform:uppercase}
.crumb{font-size:13px;color:var(--mute);padding-top:14px}
.crumb a{text-decoration:none;color:var(--mute)}
.crumb a:hover{color:var(--red);text-decoration:underline}

/* page head */
.ph{padding-top:26px;padding-bottom:10px}
.ph h1{font-family:var(--f-disp);font-size:clamp(26px,5.4vw,44px);line-height:1.25;margin:6px 0 8px}
.ph .catch{font-size:clamp(15px,2.4vw,18px);color:var(--ink2);margin:0 0 6px;max-width:44em}
.ph .meta{display:flex;flex-wrap:wrap;gap:8px 14px;color:var(--mute);font-size:13.5px}

/* ---------- cards ---------- */
.card{background:var(--card);border:2.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
a.card{display:block;text-decoration:none}
a.card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.tile{display:flex;flex-direction:column;gap:4px;padding:16px;border:2.5px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);text-decoration:none;position:relative;transition:transform .08s,box-shadow .08s}
.tile:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.tile .em{font-size:32px;line-height:1.1}
.tile b{font-size:17px;line-height:1.35}
.tile span{font-size:13.5px;color:var(--ink2);line-height:1.55}
.tile .n{position:absolute;top:10px;right:12px;font-family:var(--f-num);font-weight:800;font-size:13px;color:var(--mute)}
.t-red{background:var(--red-s)}.t-sun{background:var(--sun-s)}.t-sky{background:var(--sky-s)}.t-mint{background:var(--mint-s)}.t-grape{background:var(--grape-s)}.t-pink{background:var(--pink-s)}.t-teal{background:var(--teal-s)}

/* ---------- video card ---------- */
.vgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}
.vc{display:flex;flex-direction:column;background:var(--card);border:2.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;position:relative;transition:transform .08s,box-shadow .08s}
.vc:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.vc .th{position:relative;aspect-ratio:16/9;background:#000;border-bottom:2.5px solid var(--line);overflow:hidden}
.vc .th img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.vc:hover .th img{transform:scale(1.05)}
.vc .th .dur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.82);color:#fff;font-size:12px;font-weight:700;border-radius:6px;padding:0 6px;font-family:var(--f-num)}
.vc .th .src{position:absolute;left:6px;top:6px}
.vc .th .seen{position:absolute;right:6px;top:6px;background:var(--mint);color:#fff;border:2px solid var(--line);border-radius:8px;font-size:11px;font-weight:800;padding:0 6px;display:none}
.vc.seen .th .seen{display:block}
.vc .bd{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.vc h3{font-size:16px;line-height:1.45}
.vc h3 a{text-decoration:none}
.vc h3 a::after{content:"";position:absolute;inset:0}
.vc .en{font-size:12px;color:var(--mute);line-height:1.4;font-family:var(--f-num);font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vc .ct{font-size:13.5px;color:var(--ink2);line-height:1.55}
.vc .bs{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:4px}
.vc .fav{position:absolute;z-index:2;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;border:2px solid var(--line);background:var(--card);font-size:16px;display:grid;place-items:center;padding:0}
.vc .fav.on{background:var(--pink)}
.vc .rk{position:absolute;left:0;top:0;z-index:2;font-family:var(--f-num);font-weight:900;font-size:22px;line-height:1;background:var(--sun);color:#15141A;border-right:2.5px solid var(--line);border-bottom:2.5px solid var(--line);border-radius:0 0 14px 0;padding:6px 12px 8px}
.vc .rk.r1{background:#FFD24A}.vc .rk.r2{background:#DDE3EA}.vc .rk.r3{background:#F0B989}

/* ---------- ranking list ---------- */
.rank{display:flex;flex-direction:column;gap:14px;counter-reset:rk;padding:0;margin:0;list-style:none}
.rank li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--card);border:2.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:12px 14px 12px 12px;position:relative;transition:transform .08s,box-shadow .08s}
.rank li:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.rank .no{font-family:var(--f-num);font-weight:900;font-size:clamp(30px,6vw,46px);line-height:1;width:1.5em;text-align:center;color:var(--ink)}
.rank li:nth-child(1) .no{color:#E9A300;font-size:clamp(38px,8vw,60px)}
.rank li:nth-child(2) .no{color:#8A96A8}
.rank li:nth-child(3) .no{color:#C0763A}
.rank .in{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:center;min-width:0}
@media(min-width:640px){.rank .in{grid-template-columns:200px 1fr}}
.rank .thm{aspect-ratio:16/9;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:#000;position:relative}
.rank .thm img{width:100%;height:100%;object-fit:cover}
.rank .tx{min-width:0}
.rank .tx h3{font-size:clamp(14.5px,2.4vw,18px);line-height:1.45}
.rank .tx h3 a{text-decoration:none}
.rank .tx h3 a::after{content:"";position:absolute;inset:0}
.rank .tx p{margin:2px 0 6px;font-size:13.5px;color:var(--ink2);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rank .bs{display:flex;flex-wrap:wrap;gap:5px}
.rank .val{font-family:var(--f-num);font-weight:800;color:var(--red);font-size:15px}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end;margin-bottom:22px}
@media(max-width:640px){.podium{grid-template-columns:1fr}}

/* ---------- hero (stage) ---------- */
.stage{position:relative;background:var(--stage);color:#F6F2EA;border-bottom:2.5px solid var(--line);overflow:hidden;isolation:isolate}
.stage::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;background:radial-gradient(ellipse 55% 60% at 50% 0%,rgba(229,50,45,.75),rgba(229,50,45,0) 70%);z-index:-1}
.stage::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1.4px,transparent 1.4px);background-size:26px 26px;z-index:-1;mask-image:linear-gradient(#000,transparent 85%)}
.hero{padding-top:44px;padding-bottom:46px;text-align:center}
.hero .eyebrow{color:#FFB4AE}
.hero h1{font-family:var(--f-disp);font-size:clamp(25px,7vw,60px);line-height:1.2;margin:10px 0 14px;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.hero h1 .hl{color:#15141A;text-shadow:none;background:linear-gradient(transparent 12%,var(--sun) 12%,var(--sun) 92%,transparent 92%);padding:0 .12em;border-radius:6px}
.hero h1 .hl,.hero h1 mark{-webkit-text-fill-color:#15141A}
.hero p.lead{font-size:clamp(15px,2.6vw,19px);color:#E8E2F2;max-width:34em;margin:0 auto 22px}
.steps3{display:grid;gap:14px;grid-template-columns:1fr;max-width:1000px;margin:0 auto;text-align:left}
@media(min-width:800px){.steps3{grid-template-columns:1.25fr 1fr 1fr}}
.st{background:var(--card);color:var(--ink);border:2.5px solid #000;border-radius:20px;box-shadow:5px 5px 0 #000;padding:16px;display:flex;flex-direction:column;gap:8px;position:relative}
.st .no{position:absolute;top:-14px;left:14px;background:var(--red);color:#fff;border:2.5px solid #000;border-radius:999px;width:34px;height:34px;display:grid;place-items:center;font-family:var(--f-num);font-weight:900}
.st h2{font-size:18px;padding-left:34px;font-family:var(--f-disp)}
.st p{margin:0;font-size:14px;color:var(--ink2);line-height:1.6}
.aud-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.aud-btns a{display:flex;flex-direction:column;align-items:center;gap:0;text-decoration:none;border:2.5px solid var(--line);border-radius:14px;padding:8px 6px;font-weight:800;font-size:14px;background:var(--sun-s);line-height:1.3;transition:transform .08s}
.aud-btns a:hover{transform:translateY(-2px);background:var(--sun)}
.aud-btns a .e{font-size:24px}

/* today's pick (in hero) */
.today .yt{border:2.5px solid var(--line);border-radius:14px;overflow:hidden}
.today h3{font-size:16px;line-height:1.5;margin:4px 0 0}

/* ---------- lite youtube ---------- */
.yt{position:relative;aspect-ratio:16/9;background:#000 center/cover no-repeat;cursor:pointer;display:block;width:100%;border:0;padding:0;overflow:hidden}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:opacity .2s,transform .3s}
.yt:hover img{opacity:1;transform:scale(1.02)}
.yt .play{position:absolute;inset:0;display:grid;place-items:center}
.yt .play i{width:74px;height:52px;border-radius:14px;background:var(--red);border:3px solid #000;display:grid;place-items:center;box-shadow:4px 4px 0 #000;transition:transform .1s}
.yt:hover .play i{transform:scale(1.08) rotate(-2deg)}
.yt .play i::after{content:"";border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff;margin-left:4px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed-note{font-size:12.5px;color:var(--mute);margin:6px 0 0}

/* ---------- article / prose ---------- */
.prose{font-size:16.5px;line-height:1.95}
.prose h2{font-family:var(--f-disp);font-size:clamp(21px,3.6vw,28px);margin:2.1em 0 .7em;padding-left:14px;border-left:8px solid var(--red);scroll-margin-top:76px}
.prose h3{font-size:clamp(17.5px,2.8vw,21px);margin:1.7em 0 .5em;padding:2px 0;border-bottom:3px dotted var(--line);scroll-margin-top:76px}
.prose p{margin:0 0 1.15em}
.prose ul,.prose ol{padding-left:1.4em;margin:0 0 1.3em}
.prose li{margin:.35em 0}
.prose a{color:var(--red);font-weight:700;text-underline-offset:3px}
.prose strong{font-weight:800}
.prose .tbl{overflow-x:auto;margin:0 0 1.4em;border:2.5px solid var(--line);border-radius:14px;box-shadow:var(--shadow-s);background:var(--card)}
.prose table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.6;min-width:520px}
.prose th{background:var(--ink);color:var(--paper);text-align:left;padding:8px 12px;font-weight:800;white-space:nowrap}
.prose td{padding:9px 12px;border-top:2px solid var(--dot);vertical-align:top}
.prose tr:nth-child(even) td{background:var(--paper2)}
@media(max-width:759px){.prose .tbl-2{overflow:visible}.prose .tbl-2 table,.prose .tbl-2 tbody,.prose .tbl-2 tr,.prose .tbl-2 td{display:block;width:100%;min-width:0}.prose .tbl-2 thead{display:none}.prose .tbl-2 tr+tr{border-top:2px solid var(--dot)}.prose .tbl-2 td{border:0;padding:0 14px 10px}.prose .tbl-2 td:first-child{padding:10px 14px 2px;font-size:12.5px;font-weight:800;color:var(--mute)}}
@media(max-width:759px){.prose .tbl.tbl-card{overflow:visible;border:0;box-shadow:none;background:none}.prose .tbl-card table,.prose .tbl-card tbody,.prose .tbl-card tr,.prose .tbl-card td{display:block;width:100%;min-width:0}.prose .tbl-card thead{display:none}.prose .tbl-card tr{background:var(--card);border:2.5px solid var(--line);border-radius:14px;box-shadow:var(--shadow-s);padding:10px 14px;margin:0 0 12px}.prose .tbl-card tr td,.prose .tbl-card tr:nth-child(even) td{background:none;border:0;padding:3px 0}.prose .tbl-card td:first-child{font-weight:900;font-size:16px;padding-bottom:6px;margin-bottom:4px;border-bottom:2px dashed var(--line)}.prose .tbl-card td:first-child:empty{display:none}.prose .tbl-card td[data-label]::before{content:attr(data-label);display:block;font-size:12px;font-weight:800;color:var(--mute)}}
.layout{display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){.layout.has-toc{grid-template-columns:minmax(0,1fr) 250px}}
.toc{position:sticky;top:76px;align-self:start;background:var(--card);border:2.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s);padding:14px 16px;font-size:13.5px;max-height:calc(100vh - 100px);overflow:auto}
.toc b{font-family:var(--f-disp);font-size:14px;display:block;margin-bottom:6px}
.toc a{display:block;text-decoration:none;padding:4px 0 4px 10px;border-left:3px solid var(--dot);color:var(--ink2);line-height:1.45}
.toc a:hover,.toc a.on{border-left-color:var(--red);color:var(--ink);font-weight:700}
.toc a.h3{padding-left:22px;font-size:12.5px}
@media(max-width:999px){.toc{position:static;max-height:none}.toc-wrap{order:-1}}

/* tldr / start */
.tldr{background:var(--sun-s);border:2.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 20px;margin:0 0 20px;position:relative}
.tldr h2{font-family:var(--f-disp)!important;font-size:16px!important;margin:0 0 6px!important;padding:0!important;border:0!important}
.tldr ol{margin:0!important;padding-left:1.5em!important;font-weight:700;font-size:16.5px}
.tldr li{margin:.2em 0!important}
.startbox{background:var(--red);color:#fff;border:2.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px;margin:0 0 26px;display:grid;gap:8px}
.startbox .eyebrow{color:#FFD3CF}
.startbox h2{font-family:var(--f-disp)!important;font-size:22px!important;margin:0!important;padding:0!important;border:0!important;color:#fff}
.startbox p{margin:0!important;font-size:16px}
.startbox .btn{justify-self:start;color:var(--ink)}
.startbox .tm{display:inline-block;background:#fff;color:var(--ink);border:2px solid var(--line);border-radius:999px;font-weight:800;font-size:12.5px;padding:0 10px;margin-left:8px;vertical-align:middle}

/* more (details) */
details.more{border:2.5px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-s);margin:0 0 18px}
details.more>summary{cursor:pointer;list-style:none;padding:13px 18px;font-weight:800;display:flex;align-items:center;gap:10px;line-height:1.4}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"＋";display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:15px;flex:none;transition:transform .2s}
details.more[open]>summary::before{content:"－"}
details.more>summary .lv{margin-left:auto;font-size:12px;font-weight:800;border:2px solid var(--line);border-radius:999px;padding:0 10px;background:var(--sky-s);white-space:nowrap}
details.more>.inner{padding:2px 18px 14px;border-top:2.5px dashed var(--dot)}
details.more>.inner>*:first-child{margin-top:1em}
details.more details.more{box-shadow:none;background:var(--paper)}

/* steps */
.steps{list-style:none;counter-reset:s;padding:0!important;margin:0 0 1.6em!important;display:grid;gap:12px}
.steps li{counter-increment:s;position:relative;background:var(--card);border:2.5px solid var(--line);border-radius:16px;box-shadow:var(--shadow-s);padding:12px 16px 12px 62px;margin:0!important}
.steps li::before{content:counter(s);position:absolute;left:14px;top:12px;width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;border:2.5px solid var(--line);display:grid;place-items:center;font-family:var(--f-num);font-weight:900;font-size:18px}
.steps b{display:block;font-size:16.5px}
.steps .tm{display:inline-block;margin-left:6px;font-size:12px;font-weight:800;background:var(--mint-s);border:2px solid var(--line);border-radius:999px;padding:0 9px;vertical-align:middle}
.steps p{margin:.2em 0 0!important;font-size:15px;color:var(--ink2)}

/* callout */
.callout{border:2.5px solid var(--line);border-radius:16px;padding:14px 18px 14px 58px;margin:0 0 1.5em;position:relative;background:var(--sky-s);box-shadow:var(--shadow-s)}
.callout::before{content:"💡";position:absolute;left:14px;top:12px;font-size:28px;line-height:1.2}
.callout.warn{background:var(--red-s)}.callout.warn::before{content:"⚠️"}
.callout.fun{background:var(--pink-s)}.callout.fun::before{content:"🎉"}
.callout.point{background:var(--sun-s)}.callout.point::before{content:"📌"}
.callout.exam{background:var(--grape-s)}.callout.exam::before{content:"🎯"}
.callout.tip{background:var(--mint-s)}.callout.tip::before{content:"💡"}
.callout b{display:block;margin-bottom:2px}
.callout p:last-child{margin:0}

/* compare */
.cmp{display:grid;gap:14px;grid-template-columns:1fr;margin:0 0 1.5em}
@media(min-width:700px){.cmp{grid-template-columns:1fr 1fr}}
.cmp>div{border:2.5px solid var(--line);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow-s)}
.cmp .good{background:var(--mint-s)}.cmp .bad{background:var(--red-s)}
.cmp b{display:block;font-size:16px;margin-bottom:4px}
.cmp ul{margin:0!important}

/* checklist */
.ck{border:2.5px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow-s);padding:12px 16px;margin:0 0 1.5em}
.ck>b{display:block;margin-bottom:6px;font-family:var(--f-disp);font-size:15px}
.ck label{display:flex;gap:10px;align-items:flex-start;padding:6px 0;cursor:pointer;line-height:1.55}
.ck input{width:22px;height:22px;accent-color:var(--red);flex:none;margin-top:2px}
.ck label:has(input:checked) span{text-decoration:line-through;color:var(--mute)}
.ck .prog{height:10px;border:2px solid var(--line);border-radius:999px;background:var(--paper2);overflow:hidden;margin-top:8px}
.ck .prog i{display:block;height:100%;width:0;background:var(--mint);transition:width .3s}

/* phrases */
.ph-list{display:grid;gap:8px;margin:0 0 1.5em}
.ph-list .it{display:flex;gap:10px;align-items:center;border:2.5px solid var(--line);border-radius:14px;background:var(--card);padding:8px 12px;box-shadow:var(--shadow-s)}
.ph-list .it .tx{flex:1;min-width:0}
.ph-list .en{font-weight:800;font-family:var(--f-num);font-size:16.5px;line-height:1.5}
.ph-list .ja{font-size:13.5px;color:var(--ink2)}
.ph-list button{flex:none}
.ph-list h4{font-family:var(--f-disp);font-size:15px;margin:0}

/* faq */
.faq details{border:2.5px solid var(--line);border-radius:14px;background:var(--card);margin:0 0 10px;box-shadow:var(--shadow-s)}
.faq summary{cursor:pointer;padding:11px 16px;font-weight:800;list-style:none;display:flex;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;background:var(--red);color:#fff;font-family:var(--f-num);font-weight:900;font-size:14px}
.faq .a{padding:0 16px 12px 52px;color:var(--ink2);font-size:15.5px}

/* quiz */
.qz{border:2.5px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow-s);padding:14px 16px;margin:0 0 1.5em}
.qz b{display:block;margin-bottom:8px}
.qz .ch{display:grid;gap:8px}
.qz .ch button{text-align:left;border:2.5px solid var(--line);border-radius:12px;background:var(--paper);padding:8px 12px;font-weight:700}
.qz .ch button:hover{background:var(--sun-s)}
.qz .ch button.ok{background:var(--mint);color:#fff}
.qz .ch button.ng{background:var(--red-s);text-decoration:line-through}
.qz .why{margin-top:8px;font-size:14.5px;color:var(--ink2);display:none}
.qz.done .why{display:block}

/* cta */
.cta{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:2.5px solid var(--line);border-radius:var(--r);background:var(--ink);color:var(--paper);box-shadow:var(--shadow);padding:16px 20px;margin:26px 0;text-decoration:none}
.cta b{font-size:18px;display:block;font-family:var(--f-disp)}
.cta small{color:var(--mute);font-size:14px}
.cta .btn{background:var(--red);color:#fff}

/* tabs */
.tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin}
.tabs button{flex:none;border:2.5px solid var(--line);border-radius:999px;background:var(--card);padding:6px 16px;font-weight:800;font-size:14.5px;box-shadow:var(--shadow-s)}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}

/* search / filters */
.searchbar{display:flex;gap:10px;background:var(--card);border:2.5px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:8px 8px 8px 16px;align-items:center}
.searchbar input{flex:1;border:0;background:none;font:inherit;font-size:17px;color:var(--ink);min-width:0;outline:none;padding:6px 0}
.filters{background:var(--card);border:2.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s);padding:14px 16px;margin:16px 0}
.filters .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0}
.filters .row>b{font-size:13px;color:var(--mute);min-width:5.5em}
select.sel{font:inherit;font-weight:700;border:2.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);padding:6px 10px}
.count{font-family:var(--f-num);font-weight:800}

/* misc blocks */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.kpi div{background:var(--card);border:2.5px solid var(--line);border-radius:16px;padding:12px;text-align:center;box-shadow:var(--shadow-s)}
.kpi b{display:block;font-family:var(--f-num);font-size:30px;line-height:1.1;font-weight:900}
.kpi span{font-size:12.5px;color:var(--mute)}
.note{font-size:13px;color:var(--mute);line-height:1.7}
.disc{background:var(--paper2);border:2px dashed var(--line);border-radius:14px;padding:12px 16px;font-size:13.5px;color:var(--ink2);line-height:1.75}
.bar{height:12px;border:2px solid var(--line);border-radius:999px;background:var(--paper2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--red)}
.more-btn{display:block;margin:22px auto 0}

/* detail page */
.vhead{display:grid;gap:22px;grid-template-columns:minmax(0,1fr);padding-top:18px;padding-bottom:8px}
@media(min-width:1000px){.vhead{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}}
.vplay{border:2.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;background:#000}
.vinfo h1{font-family:var(--f-disp);font-size:clamp(22px,4.4vw,32px);line-height:1.3;margin:6px 0 4px}
.vinfo .orig{font-family:var(--f-num);font-size:13.5px;color:var(--mute);line-height:1.5;margin:0 0 10px}
.vinfo .actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.stat-row{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.stat{border:2.5px solid var(--line);border-radius:14px;background:var(--card);padding:6px 12px;box-shadow:var(--shadow-s);line-height:1.3}
.stat b{display:block;font-family:var(--f-num);font-size:20px;font-weight:900}
.stat span{font-size:11.5px;color:var(--mute);font-weight:700}
.qbox{border:2.5px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow-s);padding:12px 16px;margin:0 0 14px}
.qbox h3{font-size:15px;font-family:var(--f-disp);margin:0 0 6px}
.qbox li{margin:.3em 0}
.qbox .ja,ul.dq .ja,ul.bq .ja,ul.aq .ja{color:var(--ink2);font-size:14px;display:block;margin-top:.15em}
.qbox .en{font-family:var(--f-num);font-weight:700}
.vocab-chips{display:flex;flex-wrap:wrap;gap:8px}
.vocab-chips .chip{cursor:pointer;flex-direction:column;align-items:flex-start;border-radius:12px;padding:3px 12px;line-height:1.35}
.vocab-chips .chip small{font-weight:500;color:var(--ink2)}
.deep{border:3px solid var(--line);border-radius:22px;background:linear-gradient(180deg,var(--pink-s),var(--card) 140px);box-shadow:var(--shadow-l);padding:8px 20px 20px;margin:24px 0}
.deep>h2{font-family:var(--f-disp);font-size:24px;margin:14px 0 4px}
.deep .lead{color:var(--ink2);font-size:14.5px}

/* footer */
.ft{background:var(--stage);color:#D9D4E8;margin-top:56px;border-top:2.5px solid var(--line);padding:38px 0 26px;font-size:14px}
.ft a{color:#F6F2EA;text-decoration:none}
.ft a:hover{text-decoration:underline;color:var(--sun)}
.ft .cols{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ft h4{font-family:var(--f-disp);font-size:14px;margin-bottom:8px;color:#fff}
.ft li{list-style:none;margin:5px 0}
.ft ul{padding:0;margin:0}
.ft .fine{border-top:1px solid rgba(255,255,255,.14);margin-top:24px;padding-top:16px;font-size:12.5px;line-height:1.85;color:#A8A2BD}

/* toast / confetti */
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(30px);opacity:0;background:var(--ink);color:var(--paper);border:2.5px solid var(--line);border-radius:14px;padding:10px 18px;font-weight:800;z-index:100;box-shadow:var(--shadow);transition:.25s;pointer-events:none;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:900px){.toast{bottom:30px}}
.cf{position:fixed;inset:0;pointer-events:none;z-index:120;overflow:hidden}
.cf i{position:absolute;top:-10px;width:10px;height:14px;animation:fall 1.8s ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.9}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* utilities for tools */
.panel{background:var(--card);border:2.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.field{display:grid;gap:4px;margin:0 0 12px}
.field label{font-weight:800;font-size:14px}
.field input,.field select,.field textarea{font:inherit;border:2.5px solid var(--line);border-radius:12px;padding:8px 12px;background:var(--paper);color:var(--ink);width:100%}
.field textarea{min-height:90px;resize:vertical}
.big-timer{font-family:var(--f-num);font-weight:900;font-size:clamp(56px,14vw,110px);line-height:1;letter-spacing:.02em}
@media print{.hd,.bn,.ft,.toc-wrap,.btn,.cta,.no-print{display:none!important}body{background:#fff;padding:0}.card,.panel{box-shadow:none}}

/* 見出しは Outfit(英数)＋Zen Kaku Gothic New(日本語) の極太。画数の多い漢字もつぶれない */
.hero h1,.ph h1,.sec-h h2,.prose h2,.st h2,.startbox h2,.tldr h2,.cta b,.deep>h2,.ck>b,.toc b,.mm h4,.ft h4,.ph-list h4,.qbox h3,.vinfo h1,.sm-h,[style*="var(--f-disp)"]{font-weight:900;letter-spacing:.01em}
.logo{font-weight:400}

.hero h1 .hl{white-space:nowrap;display:inline-block;line-height:1.15}

/* ランキング行：スマホでは縦積み（サムネを大きく、順位はバッジ化） */
@media(max-width:639px){
  .rank li{grid-template-columns:1fr;padding:12px;gap:0}
  .rank .no{position:absolute;left:18px;top:18px;z-index:2;width:auto;min-width:46px;padding:2px 10px 4px;border:2.5px solid var(--line);border-radius:12px;background:var(--sun);color:#15141A!important;font-size:26px!important;box-shadow:var(--shadow-s)}
  .rank .in{grid-template-columns:1fr;gap:10px}
  .rank .thm{border-radius:12px}
}

/* ヒーロー見出しの強調：赤地に白文字（黒つぶれ防止） */
.hero h1 .hl{background:var(--red)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:none!important;padding:0 .16em .04em;border-radius:12px;border:3px solid #000;box-shadow:4px 4px 0 #000;transform:rotate(-1.5deg)}

/* ページ先頭へ戻るボタン（下までスクロールしたら右下に出る） */
.totop{position:fixed;right:14px;bottom:84px;z-index:47;width:52px;height:52px;border-radius:50%;border:2.5px solid var(--line);background:var(--red);color:#fff;font-size:24px;font-weight:900;line-height:1;display:grid;place-items:center;box-shadow:var(--shadow);cursor:pointer;opacity:0;transform:translateY(16px) scale(.85);pointer-events:none;transition:opacity .2s,transform .2s;padding:0}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{transform:translateY(-2px)}
.totop:active{transform:translate(2px,2px);box-shadow:none}
.totop small{position:absolute;bottom:-1px;font-size:9px;letter-spacing:.02em;display:none}
@media(min-width:900px){.totop{bottom:28px;right:28px;width:56px;height:56px}}
@media print{.totop{display:none!important}}

/* 要約道場：練習問題ページ（スマホ最優先） */
.sm-page{max-width:760px;margin:0 auto;padding:0 16px}
.sm-h{font-family:var(--f-disp);font-weight:400;font-size:clamp(20px,4.6vw,26px);display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.sm-n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;border:2.5px solid var(--line);font-family:var(--f-num);font-weight:900;font-size:18px}
.passage{background:var(--card);border:2.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 18px 8px;margin:0 0 16px;font-family:Georgia,"Times New Roman",serif;font-size:17.5px;line-height:2}
.passage h3{font-size:19px;line-height:1.5;margin:0 0 .6em;font-family:var(--f-num);font-weight:800;border:0;padding:0}
.passage p{margin:0 0 1em}
@media(min-width:700px){.passage{padding:26px 30px 14px;font-size:18px}}

/* スマホ：タップしやすさ（指で押せる44px目安）と入力の自動ズーム防止 */
@media(max-width:899px){
  .chip{min-height:38px;padding:5px 14px;font-size:14px}
  button.chip,a.chip{display:inline-flex;align-items:center}
  .btn{min-height:44px}
  .btn.sm{min-height:38px}
  .ib{width:44px;height:44px}
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,.sel,.field input,.field select,.field textarea{font-size:16px!important;min-height:44px}
  textarea{min-height:110px}
  .tabs button{min-height:42px}
  .ck label{padding:9px 0}
  .ck input{width:26px;height:26px}
  details.more>summary{min-height:50px}
  .faq summary{min-height:48px}
  .vc .fav{width:42px;height:42px;font-size:19px}
}

/* スマホのヘッダー：メニュー(☰)が画面外に出ないよう、ロゴを詰めて検索/テーマ切替はメニューへ集約 */
@media(max-width:599px){
  .hd .wrap{gap:8px}
  .logo{font-size:18px;gap:6px}
  .logo b{padding:0 6px 1px}
  .logo small{font-size:9px}
  .xpchip{padding:3px 8px;gap:4px;font-size:12px}
  .xpchip .num{font-size:13px}
  .hd-tools{gap:4px}
  .hd-tools .ib:not([data-mm]){display:none}
}
@media(max-width:359px){.logo small{display:none}}

@media(max-width:420px){.xpchip .star{display:none}.logo small{font-size:8.5px}.logo{font-size:17px}}

/* コピーできるプロンプト枠 */
.promptbox{border:2.5px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow-s);padding:12px 14px;margin:0 0 1.5em}
.promptbox>b{display:block;margin-bottom:6px;font-size:15px}
.promptbox pre{white-space:pre-wrap;word-break:break-word;margin:0 0 10px;font-family:var(--f-jp);font-size:14.5px;line-height:1.75;background:var(--paper2);border:2px dashed var(--dot);border-radius:12px;padding:12px;max-height:340px;overflow:auto}

/* =========================================================
   目的ナビ（何を身につけたい？）／検索オーバーレイ／今日の1本
   ========================================================= */
.hero h1.q{font-size:clamp(34px,9.5vw,64px);margin:8px 0 8px;line-height:1.15}
.hero h1.q .hl{white-space:nowrap}
.hero p.lead{margin-bottom:20px}
.goals{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:980px;margin:0 auto;text-align:left}
@media(min-width:700px){.goals{grid-template-columns:repeat(4,1fr);gap:14px}}
.goal{display:flex;flex-direction:column;gap:2px;padding:14px 12px 12px;min-height:118px;border:3px solid #000;border-radius:18px;background:var(--card);color:var(--ink);text-decoration:none;box-shadow:4px 4px 0 #000;position:relative;transition:transform .08s,box-shadow .08s}
.goal:hover,.goal:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.goal:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.goal .e{font-size:30px;line-height:1.1}
.goal b{font-size:15.5px;line-height:1.35;font-weight:900;margin-top:2px}
.goal small{font-size:12px;color:var(--ink2);font-weight:700;line-height:1.4;margin-top:auto;padding-top:4px}
.goal::after{content:"→";position:absolute;right:10px;bottom:8px;font-weight:900;color:var(--mute);font-family:var(--f-num)}
.g-sky{background:var(--sky-s)}.g-red{background:var(--red-s)}.g-mint{background:var(--mint-s)}.g-grape{background:var(--grape-s)}
.g-pink{background:var(--pink-s)}.g-teal{background:var(--teal-s)}.g-sun{background:var(--sun-s)}.g-lime{background:#E8F7C8}
:root[data-theme="dark"] .g-lime{background:#2A3A17}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .g-lime{background:#2A3A17}}
.goals-l .goal{min-height:132px}
.goals-l .goal b{font-size:17px}
.goals-l{margin-bottom:8px}
/* ヒーロー内の検索ボタン */
.hs{display:flex;align-items:center;gap:12px;width:100%;max-width:980px;margin:16px auto 0;padding:12px 16px;border:3px solid #000;border-radius:16px;background:#fff;color:#15141A;text-align:left;box-shadow:4px 4px 0 #000;cursor:text}
.hs .ic{font-size:22px}
.hs .tx{font-weight:800;font-size:15.5px;display:flex;flex-direction:column;line-height:1.35}
.hs .tx em{font-style:normal;font-weight:500;font-size:13px;color:#6b6980}
@media(min-width:700px){.hs .tx{flex-direction:row;gap:14px;align-items:baseline}}
/* 今日の1本 */
.today{display:grid;gap:14px;grid-template-columns:1fr;border:2.5px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);padding:12px}
@media(min-width:700px){.today{grid-template-columns:minmax(0,340px) 1fr;gap:22px;padding:16px;align-items:center}}
.today-v .yt{width:100%;border-radius:12px;overflow:hidden}
.today-t{display:flex;flex-direction:column;gap:6px}
.today-t h3{font-family:var(--f-disp);font-size:20px;font-weight:900;margin:2px 0}
.today-t p{margin:0;color:var(--ink2);font-size:14.5px}
.today-t .btns{margin-top:6px}
.lnkrow{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:700px){.lnkrow{grid-template-columns:repeat(4,1fr)}}
.lnkrow a{display:flex;flex-direction:column;gap:0;padding:12px 14px;border:2.5px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none;box-shadow:var(--shadow-s);line-height:1.4}
.lnkrow a:hover{background:var(--sun-s)}
.lnkrow span{font-size:24px}.lnkrow b{font-size:15px}.lnkrow small{color:var(--mute);font-size:12.5px}
/* 目的ページの3ステップ */
.gsteps{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:1fr;gap:10px;counter-reset:none}
@media(min-width:700px){.gsteps{grid-template-columns:repeat(3,1fr)}}
.gsteps a{display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:12px 14px;border:2.5px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none;box-shadow:var(--shadow-s);height:100%}
.gsteps a:hover{background:var(--sun-s)}
.gsteps .no{grid-row:1/3;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;border:2px solid #000;display:grid;place-items:center;font-family:var(--f-num);font-weight:900;font-size:14px}
.gsteps .e{grid-row:1/3;font-size:24px}
.gsteps b{font-size:15px;line-height:1.35}
.gsteps small{color:var(--ink2);font-size:12.5px;line-height:1.4}
.list-h{font-family:var(--f-disp);font-weight:900;font-size:22px;margin:22px 0 12px}
.list-h small{display:block;font-family:var(--f-jp);font-weight:500;font-size:13px;color:var(--mute);margin-top:2px}
/* ヘッダーの検索ボタン */
.ib-search span{display:none;font-size:13px;font-weight:800;margin-left:4px}
@media(min-width:900px){.ib-search{width:auto;padding:0 14px;border-radius:999px}.ib-search span{display:inline}}
/* 検索オーバーレイ */
.sx{position:fixed;inset:0;z-index:100;background:rgba(21,20,26,.6);display:flex;justify-content:center;align-items:flex-start;padding:max(10px,env(safe-area-inset-top)) 10px 10px}
.sx[hidden]{display:none}
.sx-in{width:100%;max-width:680px;max-height:calc(100dvh - 24px);display:flex;flex-direction:column;background:var(--paper);border:3px solid var(--line);border-radius:20px;box-shadow:var(--shadow-l);overflow:hidden;margin-top:6px}
@media(min-width:700px){.sx{padding-top:9vh}}
.sx-bar{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-bottom:2.5px solid var(--line);background:var(--card)}
.sx-bar input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:17px;font-weight:700;color:var(--ink);outline:none;padding:6px 0}
.sx-x{border:2px solid var(--line);background:var(--card);border-radius:50%;width:34px;height:34px;font-size:14px;line-height:1}
.sx-list{overflow:auto;padding:4px 12px 14px;-webkit-overflow-scrolling:touch}
.sx-list h4{font-family:var(--f-disp);font-size:13.5px;margin:14px 0 6px;color:var(--ink2)}
.sx-r{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;text-decoration:none;border:2px solid transparent}
.sx-r:hover,.sx-r.on{background:var(--sun-s);border-color:var(--line)}
.sx-r .e{font-size:22px;flex:none;width:28px;text-align:center}
.sx-r .t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.sx-r .t b{font-size:15px}
.sx-r .t small{color:var(--mute);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-r .k{flex:none;font-size:11.5px;font-weight:800;padding:2px 8px;border:2px solid var(--line);border-radius:999px;background:var(--card)}
.sx-goals{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.sx-goals a{display:flex;align-items:center;gap:8px;padding:10px 12px;border:2.5px solid var(--line);border-radius:12px;background:var(--card);text-decoration:none;font-weight:800;font-size:14px;line-height:1.35}
.sx-goals a:hover{background:var(--sun-s)}
.sx-goals span{font-size:20px}
.sx-chips{display:flex;flex-wrap:wrap;gap:8px}
.sx-chips a{padding:6px 14px;border:2px solid var(--line);border-radius:999px;background:var(--card);text-decoration:none;font-weight:700;font-size:14px}
.sx-chips a:hover{background:var(--sun)}
.sx-all{display:block;margin:10px 4px 0;padding:12px;text-align:center;border:2.5px solid var(--line);border-radius:12px;background:var(--red);color:#fff;font-weight:900;text-decoration:none;box-shadow:var(--shadow-s)}
.sx-all.on{outline:3px solid var(--sky)}
.sx-none{padding:22px 8px;text-align:center}
.sx-none p{color:var(--mute);font-size:14px}
html.sx-open{overflow:hidden}
.hd-tools .ib.ib-search{display:grid}
@media(max-width:420px){.logo small{display:none}}
.hero h1.q{font-size:clamp(28px,8.4vw,60px);text-wrap:balance}
.hero p.lead,.goal b,.goal small,.today-t p{text-wrap:balance;line-break:strict}
.hero p.lead{font-size:clamp(14.5px,3.8vw,19px);margin-bottom:16px}
.hero{padding-top:30px;padding-bottom:30px}
.goals{gap:9px}
.goal{min-height:0;padding:12px 12px 10px}
.goal .e{font-size:26px}
.goal b{font-size:14.5px}
.goals-l .goal{min-height:120px;padding:16px 14px 12px}
.goals-l .goal .e{font-size:32px}
@media(min-width:700px){.goal{padding:16px 16px 12px;min-height:128px}.goal b{font-size:16.5px}.goal .e{font-size:32px}}
/* 目的ページ：3ステップは細い帯に（答えの動画を先に見せる） */
.gs-label{font-weight:900;font-size:13px;color:var(--mute);margin:0 0 6px}
.gsteps{grid-template-columns:repeat(3,1fr)!important;gap:8px;margin-bottom:6px}
.gsteps a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:8px 6px 8px;position:relative}
.gsteps .no{position:absolute;top:-9px;left:-6px;width:22px;height:22px;font-size:12px}
.gsteps .e{font-size:22px}
.gsteps b{font-size:12.5px;line-height:1.3;text-wrap:balance}
@media(min-width:700px){.gsteps b{font-size:14.5px}.gsteps a{flex-direction:row;justify-content:center;gap:10px;padding:10px 12px}}
.list-h{margin-top:14px!important}
.gnav a,.gnav button,.ib-search{white-space:nowrap}
.gnav{gap:2px}
@media(min-width:900px) and (max-width:1100px){.logo small{display:none}.gnav a,.gnav button{padding:8px 9px;font-size:14px}}
.ib-search{display:flex!important;align-items:center;justify-content:center}
@media(max-width:899px){.ib-search{width:40px}}
/* 画数の多い文字（英語・身につけたい）がつぶれないよう、強調バッジは太さ700＋字間を少し空ける */
.hero h1 .hl{font-weight:700!important;letter-spacing:.06em!important;-webkit-font-smoothing:antialiased}
.hero .eyebrow{text-transform:none;letter-spacing:.08em;font-size:13px}
.logo small{font-size:11px;color:var(--ink2);font-weight:700}
.hero h1 .hl{letter-spacing:.03em!important}
.hero h1.q{font-size:clamp(25px,7.3vw,60px)}
/* 狭めのPC幅（900〜1149px）でもヘッダーが1行に収まるように */
@media(min-width:900px) and (max-width:1149px){
  .hd .wrap{gap:8px}
  .logo small{display:none}
  .gnav a,.gnav button{padding:8px 8px;font-size:13.5px}
  .ib-search span{display:none}
  .ib-search{width:40px;padding:0}
  .xpchip .lbl,.xpchip .star{display:none}
}
.hd-tools .ib{flex:none}
.hd-tools .ib-search{flex-direction:row;gap:4px;white-space:nowrap}
.hd-tools .ib-search span{white-space:nowrap;margin:0}

.speaking{background:var(--sun)!important;transform:scale(1.06)}
/* ヘッダーが右にはみ出さないように：中くらいの幅は小さめ表示、広い画面はヘッダーだけ広げる */
@media(min-width:1150px) and (max-width:1279px){
  .hd .wrap{gap:8px}
  .logo small{display:none}
  .gnav a,.gnav button{padding:8px 9px;font-size:14px}
  .ib-search span{display:none}
  .hd-tools .ib-search{width:40px;padding:0}
  .xpchip .lbl,.xpchip .star{display:none}
}
@media(min-width:1280px){.hd .wrap{max-width:1360px}}
/* 動画カード：右下の♡ボタンとバッジが重ならないように、バッジ行の右側に♡の分の余白 */
.vc .bs{padding-right:44px;min-height:38px}
@media(max-width:639px){.vc .bs{padding-right:52px;min-height:46px}}
/* やり方の基本：1本を3回（観る→拾う→まねる）。tools/lib/howto.mjs */
.how3{list-style:none;padding:0!important;margin:0 0 1.4em!important;display:grid;gap:14px;grid-template-columns:1fr;counter-reset:none}
@media(min-width:760px){.how3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:760px){.how3.how5{grid-template-columns:1fr}}
.how3>li{background:var(--card);border:2.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s);padding:14px 16px;margin:0!important;position:relative;min-width:0}
.how3>li.h3-sky{border-top:10px solid var(--sky)}.how3>li.h3-sun{border-top:10px solid var(--sun)}.how3>li.h3-red{border-top:10px solid var(--red)}
.h3-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.3}
.h3-n{font-family:var(--f-num);font-weight:900;font-size:13px;background:var(--ink);color:var(--paper);border-radius:999px;padding:2px 10px}
.h3-e{font-size:24px}
.h3-top b{font-family:var(--f-disp);font-size:22px;font-weight:900}
.h3-top small{font-size:13px;color:var(--ink2);font-weight:700}
.h3-min{margin:.5em 0 .2em!important;font-size:13.5px;font-weight:800;color:var(--ink2)}
.how3 ul{margin:.2em 0 .5em!important;padding-left:1.2em!important}
.how3 ul li{font-size:15px;margin:.2em 0!important;line-height:1.7}
.h3-ok{margin:0!important;font-size:13.5px;font-weight:700;background:var(--mint-s);border:2px solid var(--line);border-radius:10px;padding:6px 10px;line-height:1.55}
.how3-c{max-width:980px;margin-left:auto!important;margin-right:auto!important}
.how3-c>li{padding:12px 14px}
@media(max-width:759px){.how3-c{gap:8px}.how3-c>li{border-top-width:2.5px!important;border-left-width:10px}.how3-c>li.h3-sky{border-left-color:var(--sky)}.how3-c>li.h3-sun{border-left-color:var(--sun)}.how3-c>li.h3-red{border-left-color:var(--red)}.how3-c>li.h3-sky,.how3-c>li.h3-sun,.how3-c>li.h3-red{border-top-color:var(--line)}}
.lvbox{background:var(--paper2);border:2.5px solid var(--line);border-radius:var(--r);padding:14px 14px 4px;margin:0 0 16px}
.lvbox h3{margin:0 0 2px!important;font-size:18px}
.lvrule{font-size:13.5px;color:var(--ink2);margin:0 0 10px!important;font-weight:700}
.lvbox .vgrid{margin-bottom:6px}
.lvmore{font-size:14.5px;font-weight:800;text-align:right;margin:4px 0 10px!important}
.road{list-style:none;padding:0!important;margin:0 0 1.6em!important;display:grid;gap:12px;border-left:4px solid var(--red);padding-left:16px!important}
.road li{background:var(--card);border:2.5px solid var(--line);border-radius:14px;box-shadow:var(--shadow-s);padding:12px 14px;margin:0!important;display:grid;gap:4px;position:relative}
.road li::before{content:"";position:absolute;left:-27px;top:16px;width:14px;height:14px;border-radius:50%;background:var(--red);border:2.5px solid var(--line)}
.road b{font-size:17px}
.road span{font-size:15px;line-height:1.65}
.road .rd-ok{font-size:14px;font-weight:700;background:var(--sun-s);border-radius:8px;padding:4px 8px}
.how-lead{font-size:18px;font-weight:800;line-height:1.7;margin:0 0 16px!important}
.how-note{font-size:15px;background:var(--sun-s);border:2px solid var(--line);border-radius:12px;padding:8px 12px;margin:0 0 8px!important}
.h3-top b{font-size:20px}
.h3-top small{flex-basis:100%}
/* 動画の下の案内（字幕・原文・確認） */
.vhelp{background:var(--card);border:2.5px solid var(--line);border-radius:var(--r-s);margin:12px 0 0;display:grid}
.vh-row{display:flex;gap:10px;padding:10px 14px;align-items:flex-start}
.vh-row+.vh-row{border-top:2px dashed var(--mute)}
.vh-ic{font-size:22px;line-height:1.4}
.vh-row>div>b{font-size:15px;display:block;line-height:1.5}
.vh-row em{font-style:normal;font-weight:800;color:var(--ink)}
.vh-row p{margin:2px 0 0;font-size:14.5px;line-height:1.65;color:var(--ink2)}
.vh-row small{display:block;font-size:12.5px;color:var(--mute);line-height:1.5;margin-top:4px}
.vh-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.vh-btns .btn{min-height:44px;width:auto;flex:0 0 auto;display:inline-flex;align-items:center}
.vh-row>div{min-width:0;flex:1}
/* 再生後のプレーヤー：サムネと同じ幅いっぱい・16:9 */
iframe.yt-f{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;background:#000}
.ytlink{margin-left:auto;text-decoration:none;background:#FF0033;color:#fff!important;border-color:var(--line)}
.row [data-quick]{margin-left:auto}.row [data-quick]+.ytlink{margin-left:0}
.vstat{display:inline-block;margin:10px auto 18px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.35);color:#fff;font-size:14px;line-height:1.6}
.vstat b{color:var(--sun)}

/* =========================================================
   ミッション（5ステップ）・入試コース30日・勉強法ライブラリ・サイト大全（2026-10）
   ========================================================= */
/* 5ステップの帯 */
.m5{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.m5 li{position:relative;display:flex;flex-direction:column;gap:2px;background:var(--card);border:2.5px solid var(--line);border-radius:16px;box-shadow:var(--shadow-s);padding:12px 14px 12px 50px;min-height:64px}
.m5 .n{position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-family:var(--f-num);font-weight:900;font-size:15px}
.m5 .e{font-size:20px;line-height:1}
.m5 b{font-size:15.5px;line-height:1.4}
.m5 small{font-size:13px;color:var(--ink2);line-height:1.5}
.m5 em{font-style:normal;font-size:12px;font-weight:800;color:var(--grape)}
:root[data-theme="dark"] .m5 em{color:#B9A6FF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .m5 em{color:#B9A6FF}}
.m5-s li{min-height:0;padding:9px 10px 9px 44px}
.m5-s .n{width:24px;height:24px;font-size:13px;top:9px}
.m5-v{margin:12px 0 16px}

/* ヒーローの「今日のミッション」カード */
.hero2{padding-bottom:36px}
.hero2 .lead{margin-bottom:18px}
.mission-today{max-width:560px;margin:0 auto 16px;text-align:left;background:var(--card);color:var(--ink);border:2.5px solid var(--line);border-radius:20px;box-shadow:7px 7px 0 #000;padding:16px 18px 18px}
.mt-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.mt-day{font-family:var(--f-num);font-weight:900;font-size:13px;letter-spacing:.06em;color:var(--red)}
.mt-day small{color:var(--mute)}
.mt-n{font-size:12px;font-weight:800;background:var(--sun);color:#15141A;border:2px solid var(--line);border-radius:99px;padding:0 10px}
.mt-t{font-family:var(--f-disp);font-size:clamp(19px,4.6vw,24px);line-height:1.4;margin:0;text-shadow:none}
.mt-m{margin:4px 0 12px;font-size:13.5px;color:var(--mute)}
.mt-btns .btn{width:100%}
.mt-s{margin:10px 0 0;font-size:12.5px;color:var(--ink2);text-align:center}
.hs-l{margin-top:14px}

/* コース：道のり・メーター */
.course-prog{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.course-prog{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.croad{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;align-content:start}
.croad i{aspect-ratio:1;border:2px solid var(--line);border-radius:8px;background:var(--card);font-style:normal;font-family:var(--f-num);font-size:12px;font-weight:800;display:grid;place-items:center;color:var(--mute)}
.croad i.rv{border-style:dashed}
.croad i.done{background:var(--mint);color:#fff;border-style:solid}
.croad i.now{background:var(--sun);color:#15141A;box-shadow:var(--shadow-s)}
.meters{display:grid;gap:8px}
.meter{display:grid;grid-template-columns:7.5em minmax(0,1fr) 3.2em auto;gap:8px;align-items:center;font-size:13.5px;font-weight:800}
.meter .bar{height:14px;border:2px solid var(--line);border-radius:99px;background:var(--card);overflow:hidden}
.meter .bar i{display:block;height:100%;width:0;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.meter .lv{font-family:var(--f-num);font-size:13px;text-align:right}
.meter .gain{font-family:var(--f-num);font-size:12px;color:#fff;background:var(--red);border-radius:99px;padding:0 7px}
@media (prefers-reduced-motion:reduce){.meter .bar i{transition:none}}
.cweek{margin:0 0 20px}
.cweek h3{font-family:var(--f-disp);font-size:18px;margin:0 0 8px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.cweek h3 small{font-family:var(--f-jp);font-size:13.5px;font-weight:500;color:var(--ink2)}
.cdays{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cd{display:grid;grid-template-columns:4.6em minmax(0,1fr) 28px;gap:10px;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:10px 12px}
.cd .no{font-family:var(--f-num);font-weight:900;font-size:12px;color:var(--mute)}
.cd .cd-t{display:flex;flex-direction:column;text-decoration:none;min-width:0}
.cd .cd-t b{font-size:15px;line-height:1.45}
.cd .cd-t small{font-size:12.5px;color:var(--mute)}
.cd .cst{width:24px;height:24px;border-radius:50%;border:2px solid var(--line)}
.cd.done{background:var(--mint-s)}
.cd.done .cst{background:var(--mint);border-color:var(--mint)}
.cd.done .cst::after{content:"✓";color:#fff;display:grid;place-items:center;font-weight:900;font-size:13px;height:100%}
.cd.now{background:var(--sun-s);box-shadow:var(--shadow-s)}
.cd.now .no{color:var(--red)}
.cd-r,.cd-g{border-style:dashed}
#review{background:var(--card);border:2.5px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:18px;margin:22px 0}
#review h2{font-family:var(--f-disp);font-size:22px;margin:0 0 10px}
.rv-steps{padding-left:1.3em;display:grid;gap:14px;margin:0 0 16px}
#review textarea{width:100%;font:inherit;font-size:16px;border:2.5px solid var(--line);border-radius:12px;padding:10px;background:var(--paper);color:var(--ink);margin-top:6px}
.rv-memos{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.rv-w{border-left:4px solid var(--grape);padding:4px 10px;margin:8px 0}
.rv-w small{color:var(--mute);display:block}
.rv-w p{margin:0;font-family:var(--f-num);font-weight:500}
.gr-cmp{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-top:16px}
.gr-cmp>div{border:2.5px solid var(--line);border-radius:14px;padding:12px;background:var(--paper)}
.gr-cmp>div:last-child{background:var(--mint-s)}
.gr-cmp small{font-weight:800;color:var(--ink2)}
.gr-cmp p{margin:4px 0 0}

/* ミッション本体（全画面） */
html.ms-open,html.ms-open body{overflow:hidden}
.ms{position:fixed;inset:0;z-index:200;background:var(--paper);display:flex;flex-direction:column}
.ms[hidden]{display:none}
.ms-hd{display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;border-bottom:2.5px solid var(--line);background:var(--paper)}
.ms-hd button{border:2px solid var(--line);background:var(--card);border-radius:12px;min-width:44px;height:44px;font-size:18px;font-weight:900}
.ms-bar{flex:1;display:flex;gap:5px}
.ms-bar i{flex:1;height:10px;border:2px solid var(--line);border-radius:99px;background:var(--card)}
.ms-bar i.on{background:var(--sun)}
.ms-bar i.done{background:var(--red)}
.ms-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ms-in-wrap{max-width:720px;margin:0 auto;padding:14px 16px 28px}
.ms-vid{position:sticky;top:0;z-index:2;background:var(--paper);padding-bottom:10px}
.ms-vid iframe{display:block;width:100%;aspect-ratio:16/9;border:2.5px solid var(--line);border-radius:14px;background:#000}
.ms-no{font-family:var(--f-num);font-weight:800;font-size:12.5px;letter-spacing:.1em;color:var(--mute);margin:4px 0 0}
.ms-t{font-family:var(--f-disp);font-size:clamp(22px,5.4vw,30px);line-height:1.35;margin:2px 0 10px}
.ms-t .tm,.lib-today h2 .tm{font-family:var(--f-num);font-size:13px;background:var(--ink);color:var(--paper);border:0;border-radius:7px;padding:1px 8px;margin-left:8px;vertical-align:4px}
.ms-ex{border:2.5px dashed var(--grape);background:var(--grape-s);border-radius:14px;padding:10px 12px;margin:0 0 14px;font-size:14px;line-height:1.6}
.ms-ex b{display:block;font-size:13px;color:var(--grape)}
:root[data-theme="dark"] .ms-ex b{color:#B9A6FF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ms-ex b{color:#B9A6FF}}
.qcard{background:var(--card);border:2.5px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.qcard .en{font-family:var(--f-num);font-weight:700;font-size:17px;line-height:1.45;flex:1 1 220px}
.qcard .ja{flex-basis:100%;font-size:13.5px;color:var(--mute)}
.ms-lb{display:block;font-weight:800;font-size:14px;margin:8px 0 4px}
.ms textarea,.ms-in{width:100%;font:inherit;font-size:16px;border:2.5px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card);color:var(--ink);margin:0 0 8px}
.ms-in{min-height:46px;font-family:var(--f-num)}
.ms-tip{background:var(--sky-s);border-radius:12px;padding:10px 12px;font-size:14.5px;margin:0 0 12px}
.ms-sub{font-size:13px;color:var(--ink2)}
.ms-voc,.ms-frames{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.ms-voc .chip{flex-direction:column;align-items:flex-start;border-radius:12px;padding:4px 10px;line-height:1.3}
.ms-voc .chip small{font-weight:500;font-size:11.5px;color:var(--mute)}
.ms-frames .chip{font-family:var(--f-num);font-weight:600;min-height:36px}
.ms-wc{text-align:right;font-size:13px;color:var(--mute);margin:0}
.ms-reps{display:flex;justify-content:center;gap:14px;margin:18px 0 8px}
.rep{width:78px;height:78px;border-radius:50%;border:3px solid var(--line);background:var(--card);font-family:var(--f-num);font-weight:900;font-size:28px;box-shadow:var(--shadow-s)}
.rep.on{background:var(--red);color:#fff}
.ms-ft{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));border-top:2.5px solid var(--line);background:var(--paper)}
.ms-ft[hidden]{display:none}
.ms-ft .btn{display:flex;width:100%;max-width:688px;margin:0 auto}
.ms-ft .btn:disabled{background:var(--paper2);color:var(--mute);box-shadow:none;opacity:1;pointer-events:auto;cursor:not-allowed}
.ms-clear{display:flex;flex-direction:column;gap:14px}
.stamp{width:128px;height:128px;margin:10px auto 0;border-radius:50%;border:5px solid var(--red);color:var(--red);display:grid;place-items:center;text-align:center;font-family:var(--f-num);font-weight:900;font-size:22px;line-height:1.1;transform:rotate(-10deg)}
@media (prefers-reduced-motion:no-preference){.stamp{animation:stampin .5s cubic-bezier(.2,1.6,.4,1)}}
@keyframes stampin{from{transform:rotate(-10deg) scale(2.2);opacity:0}to{transform:rotate(-10deg) scale(1);opacity:1}}
.ms-sumbox{background:var(--card);border:2.5px solid var(--line);border-radius:14px;padding:12px 14px}
.ms-sumbox>b{display:block;font-size:13.5px;color:var(--ink2);margin-bottom:4px}
.ms-sumbox>p{margin:0 0 8px;font-family:var(--f-num)}
.ms-endbtns{display:grid;gap:10px}
.ms-cday{margin:6px 0 0}

/* 動画ページの「こう勉強する」 */
.vmission{background:var(--sun-s);border:2.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:4px 18px 10px;margin:1.6em 0}
.vmission h2{margin-top:.9em!important}

/* 勉強法ライブラリ */
.worries{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));margin:0 0 30px}
.worry{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:2.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);text-decoration:none;background:var(--card)}
.worry .e{font-size:28px;line-height:1.1}
.worry b{font-size:16.5px;line-height:1.4}
.worry small{font-size:12.5px;color:var(--ink2)}
.worry.t-sun{background:var(--sun-s)}.worry.t-sky{background:var(--sky-s)}.worry.t-mint{background:var(--mint-s)}.worry.t-grape{background:var(--grape-s)}.worry.t-teal{background:var(--teal-s)}.worry.t-pink{background:var(--pink-s)}.worry.t-red{background:var(--red-s)}
.lib-q{font-family:var(--f-disp);font-size:clamp(22px,4.2vw,30px);margin:26px 0 12px}
.lib-base{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;background:var(--card);border:2.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s);padding:12px 16px;margin:0 0 30px}
.lib-base>p{flex:1 1 420px;min-width:0;margin:0;font-size:14.5px}
.lib-base>div>b{display:block;margin-bottom:8px}
.shelf{margin:0 0 28px;scroll-margin-top:76px}
.shelf h2{font-family:var(--f-disp);font-size:clamp(20px,3.6vw,26px);margin:0}
.shelf .note{margin:2px 0 10px}
.shelf-l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.shelf-l a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px;border:2px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none}
.shelf-l a:hover{box-shadow:var(--shadow-s)}
.shelf-l .no{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--f-num);font-weight:900;font-size:13px}
.shelf-l .tx{display:flex;flex-direction:column;min-width:0}
.shelf-l .tx b{font-size:15.5px;line-height:1.45}
.shelf-l .tx small{font-size:13px;color:var(--ink2)}
.shelf-l .lv{font-size:11.5px;font-weight:800;border:2px solid var(--line);border-radius:99px;padding:0 8px;white-space:nowrap}
.lib-30{background:var(--sun-s);border:2.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:6px 18px 12px;margin:10px 0 22px}
.lib-30 h2,.lib-today h2{margin:.7em 0 .5em!important}
.lib-30 dl{margin:0;display:grid;gap:10px}
.lib-30 dt{font-size:12.5px;font-weight:900;color:var(--ink2)}
.lib-30 dd{margin:0;font-size:16px;font-weight:700;line-height:1.65}
.lib-30 .ex dt{color:var(--grape)}
:root[data-theme="dark"] .lib-30 .ex dt{color:#B9A6FF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lib-30 .ex dt{color:#B9A6FF}}
.lib-today .tm2{font-style:normal;font-size:12px;font-weight:800;color:var(--mute);white-space:nowrap}
.lib-vid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);align-items:start;margin:12px 0}
@media(min-width:640px){.lib-vid{grid-template-columns:260px minmax(0,1fr)}}
.lib-vid p{margin:.3em 0 .8em;font-size:15px}
.lib-course{display:flex;flex-direction:column;gap:6px;align-items:flex-start;background:var(--ink);color:var(--paper);border:2.5px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:30px 0 10px}
.lib-course span{font-size:14px;opacity:.85}

/* 英語学習サイト大全 */
.sites{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
.site{background:var(--card);border:2.5px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s);padding:14px 16px;display:flex;flex-direction:column;gap:6px;scroll-margin-top:80px;min-width:0}
.site-h{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.site h3{font-size:17px;margin:0}
.site .bs{display:flex;flex-wrap:wrap;gap:5px}
.site p{margin:0;font-size:14.5px}
.site-how{margin:0;padding-left:1.3em;font-size:14px}
.site .site-tip,.site .site-ex{font-size:13.5px;border-radius:10px;padding:7px 10px}
.site-tip{background:var(--sun-s)}
.site-ex{background:var(--grape-s)}
.site-tip b,.site-ex b{display:block;font-size:12px}
.site .site-guide{font-size:13.5px;margin:0}
.site-guide a{display:flex;align-items:center;min-height:44px;padding:8px 12px;border:2px solid var(--line);border-radius:10px;background:var(--sky-s);font-weight:700;text-decoration:none;line-height:1.4}
.site-guide small{display:block;color:var(--mute);font-size:12px;margin-top:3px}
.lnkrow.lnk3{grid-template-columns:1fr;margin:8px 0}
@media(min-width:560px){.lnkrow.lnk3{grid-template-columns:repeat(3,1fr)}}
.sites-nav{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));margin:0 0 18px}
.sites-nav .chip{font-size:12.5px;padding:4px 10px;justify-content:flex-start}
/* コース選び（あなたは？） */
.mt-pick{padding:14px}
.mt-q{margin:0 0 8px;font-family:var(--f-disp);font-weight:900;font-size:20px;text-align:center;color:var(--ink)}
.cchoose{display:grid;gap:10px}
.cchoose .cc{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"e who" "e b" "e s";column-gap:10px;align-items:center;text-decoration:none;background:var(--paper);color:var(--ink);border:2.5px solid var(--line);border-radius:16px;box-shadow:var(--shadow-s);padding:10px 14px;text-align:left}
.cchoose .cc:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow)}
.cchoose .cc .e{grid-area:e;font-size:32px;line-height:1}
.cchoose .cc .who{grid-area:who;font-size:12px;font-weight:900;color:var(--red)}
.cchoose .cc b{grid-area:b;font-size:17px;line-height:1.35}
.cchoose .cc small{grid-area:s;font-size:12px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-chg{display:block;margin:10px auto 0;background:none;border:0;color:var(--mute);font-size:13px;text-decoration:underline;min-height:32px}
/* ホーム：「あなたは？」のタブ（常に表示） */
.ctabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 12px}
.ctab{display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 4px;border:2px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink2);text-decoration:none;font-size:12px;font-weight:800;line-height:1.3;text-align:center;min-height:52px;justify-content:center}
.ctab span{font-size:20px;line-height:1.1}
.ctab.on{background:var(--sun);color:#15141A;box-shadow:var(--shadow-s)}
.mt-body{border-top:2px dashed var(--line);padding-top:12px}
/* コース比較カード（/ted/course/ の「3つのコースのちがい」） */
.ccmp{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);margin:6px 0 14px}
@media(min-width:820px){.ccmp{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ccmp .cc{display:flex;flex-direction:column;align-items:stretch;text-decoration:none;color:var(--ink);padding:18px 18px 16px;transition:transform .08s}
.cc:hover{transform:translate(-1px,-1px)}
.cc-e{font-size:30px;line-height:1}
.cc-n{font-family:var(--f-disp);font-size:20px;line-height:1.35;margin:8px 0 6px}
.cc-who{align-self:flex-start;white-space:nowrap;font-size:13px;font-weight:800;background:var(--sun-s);border:2px solid var(--line);border-radius:999px;padding:1px 12px}
.cc-h{font-size:13px;font-weight:800;color:var(--mute);margin:14px 0 4px}
.cc-v{font-size:15px;line-height:1.65;margin:0}
.cc-l{margin:0;padding-left:1.2em;font-size:15px;line-height:1.75}
.cc-b{margin-top:auto;align-self:flex-start}
.ccmp .cc-l{margin-bottom:16px}

/* ---------- スマホのヘッダー（最終決定版：どの幅・文字サイズでも右端のボタンが切れない） ----------
   ロゴは縮んでよい／右のボタン群は絶対に縮まない・はみ出さない。XPバッジは下のナビ「マイ」にもあるので狭い幅では隠す */
@media(max-width:899px){
  .hd .wrap{gap:8px;padding-left:12px;padding-right:12px;max-width:100%;box-sizing:border-box}
  .logo{flex:0 1 auto;min-width:0;overflow:hidden;font-size:18px}
  .logo small{display:none}
  .hd-tools{flex:none;margin-left:auto;gap:6px;align-items:center}
  .hd-tools .ib{width:44px;height:44px;flex:none;font-size:19px}
  .hd-tools .ib-search{width:44px;padding:0}
  .hd-tools .ib-search span{display:none}
  .xpchip{flex:none;padding:3px 9px;gap:3px}
  .xpchip .lbl,.xpchip .star,.xpchip .num:last-child{display:none}
}
@media(max-width:899px) and (min-width:600px){.xpchip .star,.xpchip .num:last-child{display:inline}}
@media(max-width:399px){.xpchip{display:none}.logo{font-size:17px}}
.nb{display:inline-block}

/* ホーム：このサイトでできること */
.hm-hero .lead b.hm-n{color:var(--sun);font-size:1.15em}
.hs-hero{margin-top:18px;max-width:640px}
.hm-q{margin:22px 0 10px;font-weight:800;font-size:15px;color:#F6F2EA;letter-spacing:.04em}
.hm-can{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:880px;margin:0 auto 18px;text-align:left}
@media(min-width:760px){.hm-can{grid-template-columns:repeat(4,1fr);gap:14px}}
.hm-can a{display:flex;flex-direction:column;gap:2px;min-height:44px;padding:12px 12px 11px;border:3px solid #000;border-radius:16px;color:#15141A;text-decoration:none;box-shadow:4px 4px 0 #000;transition:transform .08s,box-shadow .08s}
.hm-can a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.hm-can .e{font-size:28px;line-height:1.1}
.hm-can b{font-size:15.5px;line-height:1.35}
.hm-can small{font-size:12.5px;color:#4a4858;line-height:1.4}
.hm-can .t-red{background:#FFD9D3}.hm-can .t-sky{background:#D6ECFF}.hm-can .t-mint{background:#D3F5E4}.hm-can .t-sun{background:#FFEFB8}
.hm-x{margin:4px 0 8px;font-size:13px;font-weight:700;color:#BDB8C8}
.hm-more{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:880px;margin:0 auto 18px}
.hm-more a{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 14px;border:2px solid #4a4658;border-radius:999px;background:var(--stage2);color:#F6F2EA;font-size:13.5px;font-weight:700;text-decoration:none}
.hm-more a:hover{border-color:#F6F2EA}
.hm-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,78%);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 14px;margin:0 -4px;overscroll-behavior-x:contain}
.hm-rail>.vc{scroll-snap-align:start}
@media(min-width:760px){.hm-rail{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);grid-auto-columns:auto;overflow:visible}}
.hm-course{max-width:880px;margin:0 auto}
#viral,#find,#method,#course{scroll-margin-top:64px}
/* 英語学習に効く洋楽（/ted/yogaku/） */
.sg-nav{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px}
.sg-nav .chip.on{background:var(--ink);color:var(--paper)}
.sg-h{margin:26px 0 4px;font-size:clamp(20px,3.6vw,26px)}
.sg-l{margin:0 0 12px;color:var(--ink2);font-size:14px}
.rank .tx .sg-ar{display:block;font-size:13px;font-weight:700;color:var(--mute)}
.rank .tx .sg-c{font-weight:800;color:var(--ink);-webkit-line-clamp:2}
.rank .tx .sg-pt{font-size:13.5px;-webkit-line-clamp:4}
.rank .tx .sg-pt b{display:inline-block;margin-right:6px;padding:0 6px;border-radius:6px;background:var(--mint-s);color:var(--ink);font-size:12px}
.sg .yt,.sg .sg-more{position:relative;z-index:1}
.sg .sg-more{display:inline-flex;align-items:center;min-height:36px;margin-top:4px;font-size:13px;font-weight:700}
.rank.rk-p li:nth-child(1) .no{color:var(--ink);font-size:clamp(30px,6vw,46px)}
.sg-mood{margin:6px 0 14px}.sg-mood .sg-nav{margin:10px 0 0}
.ft .sis{margin-top:24px}
.ft .sis ul{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.ft .sis li{margin:0}
.ft .sis a{display:flex;flex-direction:column;gap:2px;min-height:44px;padding:10px 14px;border:1.5px solid rgba(255,255,255,.18);border-radius:12px;background:var(--stage2)}
.ft .sis a:hover{text-decoration:none;border-color:var(--sun)}
.ft .sis small{font-size:12.5px;color:#A8A2BD}