:root{--bg:#0f1033;--bg2:#1b1c4a;--card:#22245a;--ink:#f5f1ff;--sub:#c9c3ea;--gold:#f3d38a;--pink:#f6b8d2;--line:#3a3c7a}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#0b0c2b 0%,#1b1c4a 60%,#2a2160 100%);color:var(--ink);font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;line-height:1.85}
a{color:var(--gold)}header.top{display:flex;align-items:center;gap:10px;padding:10px 16px;background:rgba(10,10,40,.85);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--line)}
header.top img{width:36px;height:36px;border-radius:50%}header.top a.brand{color:var(--ink);text-decoration:none;font-weight:700;letter-spacing:.05em}
header.top nav{margin-left:auto;font-size:13px}header.top nav a{margin-left:12px;color:var(--sub);text-decoration:none}
.hero{position:relative;max-width:1100px;margin:0 auto}.hero img{width:100%;height:auto;display:block;aspect-ratio:3/1;object-fit:cover}
.hero .ttl{position:absolute;left:5%;top:28%;text-shadow:0 2px 14px #120c3a}.hero h1{margin:0;font-size:clamp(22px,4.4vw,48px);color:#fff7e0}.hero p{margin:4px 0 0;font-size:clamp(12px,1.7vw,18px);color:#efe6ff}
main{max-width:860px;margin:0 auto;padding:16px}
.card{background:rgba(34,36,90,.82);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:16px 0;box-shadow:0 6px 24px rgba(0,0,0,.25)}
h2{font-size:22px;color:var(--gold);margin:0 0 8px}h3{font-size:18px;margin:0 0 4px}
.rank{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:12px 0;border-bottom:1px dashed var(--line)}.rank:last-child{border-bottom:0}
.num{font-size:22px;font-weight:700;color:var(--gold);text-align:center}.num small{display:block;font-size:22px;color:var(--pink)}
.meta{font-size:13px;color:var(--sub)}.letter{display:flex;gap:14px;align-items:flex-start}.letter img{width:72px;height:72px;border-radius:50%;flex:none;border:2px solid var(--gold)}
.signs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.signs a{display:block;text-align:center;padding:12px 6px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink)}
.signs a span{display:block;font-size:26px;color:var(--gold)}.cta{display:inline-block;background:linear-gradient(90deg,#f3d38a,#f6b8d2);color:#2a1a4a;font-weight:700;padding:10px 18px;border-radius:999px;text-decoration:none;margin-top:8px}
footer{max-width:860px;margin:24px auto;padding:16px;font-size:12px;color:var(--sub);text-align:center}footer a{color:var(--sub);margin:0 6px}
.note{font-size:12px;color:var(--sub)}ul.days{padding-left:1.2em}
.crumb{max-width:860px;margin:10px auto 0;padding:0 16px;font-size:12px;color:var(--sub)}.crumb a{color:var(--sub)}
.lead{font-size:17px;color:#fff7e0}.tease{background:rgba(246,184,210,.08);border:1px dashed var(--pink);border-radius:12px;padding:10px 14px;margin:8px 0}.tease b{color:var(--pink)}
.score{color:var(--gold);letter-spacing:.1em}.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}.grid2 a{display:block;padding:8px 10px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);font-size:14px}
table.moon{width:100%;border-collapse:collapse}table.moon td,table.moon th{border-bottom:1px solid var(--line);padding:6px;text-align:left;font-size:14px}
@media(max-width:640px){header.top nav{display:none}.hero .ttl{position:static;padding:12px 16px 0;text-shadow:none}.hero h1{font-size:26px}.hero p{font-size:14px;color:var(--sub)}.card{padding:14px}}