:root{--bg:#faf9fb;--ink:#2b2430;--muted:#7a7080;--card:#fff;--line:#eadff0;--n:#7e57c2;--s:#e77a9b;--h:#5aa9d6;--k:#8a7d5a;--accent:#7e57c2;--page:#2b2430;--radius:18px}
*{box-sizing:border-box}body{margin:0;font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;background:var(--bg);color:var(--ink);line-height:1.7}
a{color:inherit;text-decoration:none}
header.site{position:sticky;top:0;z-index:20;background:rgba(250,249,251,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.nav{display:flex;align-items:center;gap:14px;padding:12px 0;flex-wrap:wrap}
.logo{font-weight:900;font-size:22px}.logo{display:inline-flex;align-items:center}.dots{display:inline-flex;gap:4px;margin-left:9px}.dots i{width:8px;height:8px;border-radius:50%}.dots i:nth-child(1){background:var(--n)}.dots i:nth-child(2){background:var(--s)}.dots i:nth-child(3){background:var(--h)}
.nav nav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.nav nav a{padding:7px 11px;border-radius:999px;font-size:14px}.nav nav a:hover,.nav nav a.on{background:#f2e9fb}
.hero{padding:44px 0 22px;text-align:center}.hero h1{font-size:clamp(30px,6vw,52px);margin:0 0 10px}.hero p{color:var(--muted);margin:0 auto;max-width:640px;line-height:1.8}
.searchbox{display:flex;gap:8px;max-width:680px;margin:22px auto 0}.searchbox input{flex:1;padding:14px 16px;border:2px solid var(--line);border-radius:999px;font-size:16px;background:#fff}
button,.btn{border:0;background:var(--page);color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;cursor:pointer;font-size:15px}
button.sub,.btn.sub{background:#fff;color:var(--ink);border:2px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:18px 0 40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:0 4px 14px rgba(120,80,40,.05)}
.card h3{margin:6px 0 8px;font-size:17px;line-height:1.5}.card p{color:var(--muted);font-size:14px;line-height:1.7;margin:6px 0}
.chip{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;margin-right:5px}
.g-乃木坂46{background:var(--n)}.g-櫻坂46{background:var(--s)}.g-日向坂46{background:var(--h)}.g-欅坂46{background:var(--k)}.g-けやき坂46{background:#6a9a8b}
.tag{display:inline-block;background:#f1eafd;color:#6540a5;padding:2px 8px;border-radius:999px;font-size:12px;margin:2px 3px 2px 0}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.filters select,.filters input{padding:10px 12px;border:2px solid var(--line);border-radius:12px;background:#fff;font-size:14px}
section.page{padding:28px 0 8px}h2.title{font-size:28px;margin:0 0 6px}.lead{color:var(--muted);line-height:1.8}
.count{color:var(--muted);font-size:14px;margin:10px 0}
dialog{border:0;border-radius:20px;max-width:720px;width:94%;padding:24px}dialog::backdrop{background:rgba(40,20,10,.45)}
ol.setlist{line-height:2;padding-left:22px}
footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--muted);font-size:13px;line-height:1.8;margin-top:30px}
.quiz-opt{display:block;width:100%;text-align:left;margin:8px 0;background:#fff;color:var(--ink);border:2px solid var(--line)}
.quiz-opt.correct{background:#e5f7e8;border-color:#5cb85c}.quiz-opt.wrong{background:#fde8e8;border-color:#e57373}
.score{font-size:20px;font-weight:900}
.slot{display:inline-flex;min-width:110px;min-height:44px;border:2px dashed var(--line);border-radius:12px;align-items:center;justify-content:center;margin:4px;padding:6px;background:#fff}
textarea{width:100%;min-height:150px;border:2px solid var(--line);border-radius:12px;padding:12px;font-family:inherit}
.empty{border:2px dashed var(--line);border-radius:var(--radius);padding:26px;text-align:center;color:var(--muted);background:#fff;margin:18px 0 40px;line-height:1.9}
html{scroll-behavior:smooth}
::selection{background:#e8dbf7}
img{max-width:100%}
.logo{letter-spacing:.04em}
:focus-visible{outline:3px solid #caa6e8;outline-offset:2px}
.searchbox input:focus{border-color:var(--accent);outline:none}
.filters select:focus,.filters input:focus{border-color:var(--accent);outline:none}
.card{transition:transform .18s ease,box-shadow .18s ease}
@media(hover:hover){a.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(120,80,40,.10)}}
button,.btn{transition:filter .15s ease}
button:hover,.btn:hover{filter:brightness(1.06)}
@media(max-width:640px){.nav{gap:8px}.nav nav{flex-wrap:nowrap;overflow-x:auto;width:100%;margin-left:0;padding:2px 0 6px;scrollbar-width:none}.nav nav::-webkit-scrollbar{display:none}.nav nav a{white-space:nowrap;padding:9px 12px;background:#fff;border:1px solid var(--line)}.nav nav a.on{background:#f2e9fb}.hero{padding:30px 0 14px}h2.title{font-size:24px}}

.grad{color:var(--n);animation:groupcycle 9s ease-in-out infinite}

body[data-group="乃木坂46"]{--page:var(--n)}
body[data-group="櫻坂46"]{--page:var(--s)}
body[data-group="日向坂46"]{--page:var(--h)}
body[data-group="欅坂46"]{--page:var(--k)}
body[data-group="けやき坂46"]{--page:#6a9a8b}
h2.title{border-left:6px solid var(--page);padding-left:12px}
.card{border-left:5px solid var(--line)}
.card:has(.g-乃木坂46){border-left-color:var(--n)}
.card:has(.g-櫻坂46){border-left-color:var(--s)}
.card:has(.g-日向坂46){border-left-color:var(--h)}
.card:has(.g-欅坂46){border-left-color:var(--k)}
.card:has(.g-けやき坂46){border-left-color:#6a9a8b}
@keyframes groupcycle{0%,30%{color:var(--n)}36%,63%{color:var(--s)}69%,96%{color:var(--h)}100%{color:var(--n)}}
@media(prefers-reduced-motion:reduce){.grad{animation:none}}

.g-坂道AKB{background:#d24a43}
body[data-group="坂道AKB"]{--page:#d24a43}
.card:has(.g-坂道AKB){border-left-color:#d24a43}
.tabs{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;margin:16px 0 2px;padding-bottom:6px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:#fff;color:var(--ink);border:2px solid var(--line);white-space:nowrap;padding:9px 14px}
.tabs button.on{background:var(--page);border-color:var(--page);color:#fff}

.fwrap{background:#f7f4fb;border-radius:14px;padding:14px 8px;overflow:hidden}
.frow{display:flex;justify-content:center;gap:.45em;flex-wrap:nowrap;margin:6px 0;font-size:13px;overflow-x:auto;scrollbar-width:none}
.frow::-webkit-scrollbar{display:none}
.fm{background:#fff;border:.15em solid var(--line);border-radius:999px;padding:.26em .62em;font-size:1em;white-space:nowrap;flex:none}
.fm.ctr{background:var(--page);border-color:var(--page);color:#fff;font-weight:700}
.g-坂道選抜{background:#2f9e8f}
body[data-group="坂道選抜"]{--page:#2f9e8f}
.card:has(.g-坂道選抜){border-left-color:#2f9e8f}

.tabhint{color:var(--muted);font-size:12px;align-self:center;white-space:nowrap}