:root{--bg:#07080F;--bg2:#0E1120;--pa:#111528;--ln:#232845;--ink:#E9ECF6;--mu:#8A91B4;--b0:#FF2E63;--b1:#FF6A3D;--b2:#B26BFF;--b3:#4D8DFF;--b4:#2EE6D6;--acc:#2EE6D6;--glow:0 0 18px;--num:'Oxanium','Zen Kaku Gothic New',sans-serif}
:root[data-theme="light"]{--bg:#F3F4F8;--bg2:#E8EAF2;--pa:#FFFFFF;--ln:#D6D9E6;--ink:#0D1022;--mu:#575E80;--b0:#D6164A;--b1:#D9481B;--b2:#7A35D9;--b3:#1F5FD6;--b4:#0E8F86;--acc:#0E8F86}
@media(prefers-color-scheme:light){:root:not([data-theme]){--bg:#F3F4F8;--bg2:#E8EAF2;--pa:#FFFFFF;--ln:#D6D9E6;--ink:#0D1022;--mu:#575E80;--b0:#D6164A;--b1:#D9481B;--b2:#7A35D9;--b3:#1F5FD6;--b4:#0E8F86;--acc:#0E8F86}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);background-image:linear-gradient(var(--bg2) 1px,transparent 1px),linear-gradient(90deg,var(--bg2) 1px,transparent 1px);background-size:48px 48px;color:var(--ink);font:500 16px/1.75 'Zen Kaku Gothic New',system-ui,sans-serif}
a{color:inherit}main{max-width:1040px;margin:0 auto;padding:0 14px 40px}
.b0{--c:var(--b0)}.b1{--c:var(--b1)}.b2{--c:var(--b2)}.b3{--c:var(--b3)}.b4{--c:var(--b4)}
/* ヘッダー */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--ln)}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font:800 18px var(--num);letter-spacing:.06em;white-space:nowrap}.logo b{color:var(--b0);font-weight:800;margin:0 3px}
.lg-b{fill:none;stroke:var(--b0);stroke-width:2.5}.lg-i{fill:var(--acc)}
.top nav{display:flex;align-items:center;gap:16px;font-size:14px;white-space:nowrap;overflow-x:auto}.top nav a{text-decoration:none;color:var(--mu)}.top nav a:hover{color:var(--ink)}
.thm{background:none;border:1px solid var(--ln);color:var(--ink);font-size:15px;width:32px;height:32px;cursor:pointer;border-radius:2px}
/* トップのヒーロー */
.hero{position:relative;margin:16px 0 18px;min-height:420px;display:grid;align-items:end;overflow:hidden;border:1px solid var(--ln);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px))}
.h-media{position:absolute;inset:0}.h-media img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1)}
.h-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,8,15,.94) 0%,rgba(7,8,15,.75) 45%,rgba(7,8,15,.15) 100%),linear-gradient(0deg,rgba(7,8,15,.9),transparent 50%)}
.h-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px}
.h-body{position:relative;padding:28px 28px 40px;color:#F1F3FA;max-width:640px}
.h-k{margin:0;font-size:14px;letter-spacing:.2em;color:#FF8FA9}
.h-pos{font:800 clamp(96px,18vw,168px)/.85 var(--num);color:var(--b0);text-shadow:0 0 30px rgba(255,46,99,.55);letter-spacing:-.02em}
.hero h1{margin:6px 0 10px;font:800 clamp(30px,5vw,48px)/1.1 var(--num);letter-spacing:.02em}.hero h1 a{text-decoration:none}
.h-st{display:grid;grid-template-columns:repeat(4,auto);gap:4px 22px;margin:0 0 12px}.h-st dt{font-size:12px;color:#A9B0D3}.h-st dd{margin:0;font:700 24px var(--num)}.h-st small{font-size:12px;margin-left:2px}
.hero .spk{position:absolute;left:0;right:0;bottom:0;height:14px;fill:var(--b0);opacity:.9}
.intro{font-size:15px;color:var(--mu);margin:0 0 18px}.intro b{color:var(--ink)}
/* 共通 */
.box{background:var(--pa);border:1px solid var(--ln);padding:16px 18px;margin:0 0 16px;border-radius:3px}
.box h2{margin:0 0 10px;font-size:18px;display:flex;align-items:center;gap:10px}.box h2:before{content:"";width:10px;height:10px;background:var(--acc);transform:rotate(45deg);flex:none}
.note,.upd{font-size:12.5px;color:var(--mu)}.lead{font-size:15.5px;line-height:1.9}
.tags{display:flex;flex-wrap:wrap;gap:5px}.tag{font-size:12px;padding:1px 7px;border:1px solid color-mix(in srgb,var(--c,var(--acc)) 70%,transparent);color:color-mix(in srgb,var(--c,var(--acc)) 85%,var(--ink));border-radius:2px;line-height:1.6;white-space:nowrap}
.hero .tag{color:#E9ECF6;border-color:rgba(255,255,255,.35)}
.dl{font-style:normal;font:700 12px var(--num);padding:0 4px}.dl.up{color:#38E07B}.dl.dn{color:#FF5C7A}
.more,.btn{display:inline-block;font-weight:700;padding:8px 14px;border:1px solid var(--acc);color:var(--acc);text-decoration:none;background:none;cursor:pointer;font-family:inherit;font-size:14px;border-radius:2px}
/* レベルの行 */
.lrs,.lst{display:flex;flex-direction:column}
.lr{position:relative;display:grid;grid-template-columns:56px 120px 1fr auto;gap:12px;align-items:center;padding:8px 6px;border-top:1px solid var(--ln);text-decoration:none}
div.lr{grid-template-columns:1fr 34px;padding:0;gap:0}div.lr>a{display:grid;grid-template-columns:56px 120px 1fr auto;gap:12px;align-items:center;padding:8px 6px;text-decoration:none}
.lr:hover{background:color-mix(in srgb,var(--c) 8%,transparent)}
.lr .pos{font:800 26px var(--num);color:var(--c);text-align:right}
.lr img,.lr .noimg{width:120px;height:68px;object-fit:cover;display:block;background:var(--bg2);clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.lr .nm{display:flex;flex-direction:column;min-width:0}.lr .nm b{font:700 17px var(--num);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lr .nm small{font-size:12px;color:var(--mu)}.lr .nm .tags{margin-top:3px}
.lr .st{display:flex;flex-direction:column;align-items:flex-end}.lr .st em{font:700 15px var(--num);font-style:normal;color:var(--mu)}.lr .st em small{font-size:10px;margin-left:2px}
.lr.done .pos:after{content:"✓";font-size:13px;color:#38E07B;margin-left:2px;vertical-align:top}
.ck{display:grid;place-items:center;cursor:pointer}.ck input{position:absolute;opacity:0}.ck span{width:20px;height:20px;border:2px solid var(--ln);display:block;transform:rotate(45deg)}.ck input:checked+span{background:#38E07B;border-color:#38E07B}.ck input:focus-visible+span{outline:2px solid var(--acc)}
/* 一覧のフィルター */
.phead h1{font:800 clamp(26px,4vw,36px)/1.2 'Zen Kaku Gothic New',var(--num);margin:22px 0 10px}.phead h1 small{display:block;font:600 14px var(--num);color:var(--mu);letter-spacing:.06em}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}.filters input[type=search],.filters select{font:inherit;font-size:15px;padding:8px 10px;background:var(--pa);color:var(--ink);border:1px solid var(--ln);border-radius:2px}.filters input[type=search]{flex:1;min-width:220px}
.hide{display:flex;align-items:center;gap:6px;font-size:14px}
.tagf{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.tagf button{font:inherit;font-size:13px;padding:3px 10px;background:none;color:var(--mu);border:1px solid var(--ln);cursor:pointer;border-radius:2px}.tagf button.on{background:var(--acc);border-color:var(--acc);color:#07080F;font-weight:700}
.cnt{font:700 14px var(--num);color:var(--mu)}.more2{margin:14px auto;display:block}
/* レベル詳細 */
.lv-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;margin:18px 0 14px;align-items:end}
.yt{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border:1px solid var(--ln);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.85}.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border:0;background:var(--c);color:#fff;font-size:30px;cursor:pointer;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:var(--glow) var(--c)}
.yt .cap{position:absolute;left:0;bottom:0;padding:4px 10px;font-size:12px;background:rgba(0,0,0,.65);color:#fff}
.yt.none{display:flex;align-items:flex-end}.yt.none .spk{width:100%;height:30px;fill:var(--c)}
.bigpos{font:800 clamp(64px,11vw,110px)/.9 var(--num);color:var(--c);text-shadow:0 0 24px color-mix(in srgb,var(--c) 50%,transparent)}.bigpos small{display:block;font-size:13px;letter-spacing:.2em;color:var(--mu);text-shadow:none}.bigpos .dl{font-size:20px;vertical-align:top}
.lv h1{font:800 clamp(28px,4.4vw,42px)/1.1 var(--num);margin:8px 0 6px;letter-spacing:.02em}.by{margin:0 0 8px;color:var(--mu);font-size:14px}
.crumbs{font-size:13px;color:var(--mu);margin:0}
.clr{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-weight:700;font-size:14px;padding:6px 12px;border:1px solid var(--ln);cursor:pointer}.clr input{width:18px;height:18px;accent-color:#38E07B}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0;margin:0}.facts div{padding:10px 12px;border-left:2px solid var(--ln);margin:0 0 8px}.facts dt{font-size:12px;color:var(--mu)}.facts dd{margin:0;font:700 18px var(--num)}
.cp{font:700 18px var(--num);background:none;border:0;color:var(--ink);cursor:pointer;padding:0}.cp i{font:500 11px 'Zen Kaku Gothic New';font-style:normal;margin-left:6px;padding:1px 6px;border:1px solid var(--acc);color:var(--acc)}.cp.ok i{background:var(--acc);color:#07080F}
.tdesc{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}.tdesc li{padding:8px 10px;border:1px solid var(--ln)}.tdesc b{margin-right:6px}.tdesc small{font:600 12px var(--num);color:var(--mu)}.tdesc span{display:block;font-size:13.5px;color:var(--mu)}
.pchart{margin:0}.pchart svg{width:100%;height:auto;display:block}.pchart .ln{fill:none;stroke:var(--c);stroke-width:3}.pchart .gl{stroke:var(--ln);stroke-dasharray:4 4}.pchart .ax{font:600 12px var(--num);fill:var(--mu)}.pchart figcaption{font-size:12px;color:var(--mu);text-align:right}
.recs{list-style:none;margin:0;padding:0}.recs li{display:grid;grid-template-columns:52px 1fr auto auto;gap:10px;padding:6px 4px;border-top:1px solid var(--ln);font-size:14.5px;align-items:center}.recs .rk{font:700 14px var(--num);color:var(--mu)}.recs .dt{font:600 13px var(--num);color:var(--mu)}.recs a{font-size:13px}
.mb{font-style:normal;font-size:11px;margin-left:6px;padding:0 5px;border:1px solid var(--b4);color:var(--b4)}
.jpn{padding:8px 12px;border-left:3px solid var(--b0);background:color-mix(in srgb,var(--b0) 8%,transparent)}
/* マイ記録 */
.mestat{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 16px}.mestat div{background:var(--pa);border:1px solid var(--ln);padding:12px 14px}.mestat span{display:block;font-size:12px;color:var(--mu)}.mestat b{font:800 40px/1.1 var(--num);color:var(--acc)}.mestat b.sm{font-size:18px;line-height:1.5}.mestat small{display:block;font-size:12px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 用語集 */
.gl{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}.gl div{padding:10px 12px;border:1px solid var(--ln)}.gl dt b{font-size:16px;margin-right:8px}.gl dt small{font:600 12px var(--num);color:var(--acc)}.gl dd{margin:4px 0 0;font-size:14px;color:var(--mu)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px}.cards a{display:block;padding:16px;border:1px solid var(--ln);background:var(--pa);text-decoration:none;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}.cards b{display:block;font-size:17px;color:var(--acc)}.cards span{font-size:13.5px;color:var(--mu)}
footer{max-width:1040px;margin:30px auto 0;padding:0 14px 40px;font-size:12.5px;color:var(--mu)}footer .spk{width:100%;height:10px;fill:var(--ln);display:block;margin-bottom:12px}footer a{margin-right:12px}
@media(max-width:760px){.lv-hero{grid-template-columns:1fr}.h-st{grid-template-columns:repeat(2,auto)}.mestat{grid-template-columns:1fr 1fr}.cards{grid-template-columns:1fr}
.lr,div.lr>a{grid-template-columns:40px 88px 1fr;gap:8px}.lr img,.lr .noimg{width:88px;height:50px}.lr .st{grid-column:3;flex-direction:row;gap:8px;align-items:center}.lr .pos{font-size:20px}
.recs li{grid-template-columns:44px 1fr auto}.recs li a:last-child{display:none}.hero{min-height:380px}.h-body{padding:20px 18px 34px}}
@media(prefers-reduced-motion:no-preference){.h-pos{animation:pulse .7s ease-out 1}@keyframes pulse{0%{opacity:0;transform:translateX(-12px)}100%{opacity:1;transform:none}}}