:root{
  --bg:#faf7f2; --ink:#33302b; --accent:#6d4fa1; --accent2:#b392e0;
  --card:#fff; --line:#e6ddf0; --muted:#7a736a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;line-height:1.8}
header{background:linear-gradient(135deg,#4b3670,#6d4fa1);color:#fff;padding:18px 16px}
header .inner,main,footer .inner{max-width:760px;margin:0 auto}
header a{color:#fff;text-decoration:none;font-weight:700;font-size:1.15rem}
header p{margin:2px 0 0;font-size:.82rem;opacity:.85}
nav.crumbs{font-size:.82rem;color:var(--muted);margin:14px 0}
nav.crumbs a{color:var(--accent);text-decoration:none}
main{padding:0 16px 32px}
h1{font-size:1.55rem;line-height:1.45;margin:.2em 0 .4em}
h2{font-size:1.15rem;border-left:5px solid var(--accent);padding-left:10px;margin:1.6em 0 .6em}
.card-visual{background:linear-gradient(160deg,#efe8fa,#fff);
  border:2px solid var(--accent2);border-radius:14px;text-align:center;padding:26px 10px;margin:16px 0}
.card-visual .num{font-size:.9rem;letter-spacing:.3em;color:var(--accent)}
.card-visual .symbol{font-size:3.2rem;line-height:1.2}
.card-visual .en{letter-spacing:.25em;font-weight:700;color:var(--accent)}
.kw{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0}
.kw div{flex:1;min-width:220px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.kw h3{margin:0 0 6px;font-size:.95rem;color:var(--accent)}
.kw ul{margin:0;padding-left:1.1em}
.advice{background:#fdf6e3;border:1px solid #f0dfa8;border-radius:10px;padding:12px 16px}
.ad{background:#fff;border:2px dashed #c9c2d4;color:#9a93a8;text-align:center;
  padding:18px 8px;border-radius:8px;font-size:.8rem;margin:22px 0}
.note-banner{display:block;background:var(--accent);color:#fff;text-decoration:none;
  border-radius:10px;padding:14px 16px;text-align:center;font-weight:700;margin:22px 0}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:24px;font-size:.9rem}
.pager a{color:var(--accent);text-decoration:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:16px 0}
.grid a{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:16px 10px;text-align:center;text-decoration:none;color:var(--ink)}
.grid a .s{font-size:1.7rem;display:block}
.grid a small{color:var(--muted)}
.coming{opacity:.55}
footer{background:#efeaf6;color:var(--muted);font-size:.8rem;padding:20px 16px;margin-top:10px}
.lead{font-size:1.02rem}
.card-img{max-width:220px;width:60%;height:auto;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.15)}