:root { --text:#1f2937; --muted:#6b7280; --border:#e8ebf2; --primary:#2f6fed; --soft:#f6f8fc; }
* { box-sizing: border-box; }
body { margin:0; color:var(--text); background:#fff; line-height:1.8; font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif; }
a { color:var(--primary); }
.container { max-width:720px; margin:0 auto; padding:16px 16px 48px; }
.site-header { border-bottom:1px solid var(--border); padding:8px 16px; }
.brand { display:inline-flex; gap:8px; align-items:center; font-weight:900; font-size:1.2rem; color:var(--text); text-decoration:none; }
.site-footer { background:var(--soft); border-top:1px solid var(--border); padding:24px 16px; display:grid; gap:8px; justify-items:start; }
.site-footer nav { display:flex; gap:16px; flex-wrap:wrap; }
.site-footer a { color:var(--text); }
h1 { font-size:clamp(1.5rem,5.4vw,2rem); line-height:1.45; }
h2 { font-size:1.2rem; margin-top:1.8em; }
.hero { display:flex; gap:12px; align-items:center; padding:20px 0; }
.hero > div { flex:1; min-width:0; }
.hero h1 { margin:8px 0; }
.hero p { color:var(--muted); margin:0; }
.hero-mascot { width:110px; height:110px; flex-shrink:0; }
.eyebrow { display:inline-block; border:1px solid var(--border); border-radius:999px; padding:2px 12px; font-size:.8rem; font-weight:700; color:var(--primary); }
.hl { background:linear-gradient(transparent 62%, #ffe08a 62%); }
.card { border:1px solid var(--border); border-radius:16px; padding:4px 16px; margin:16px 0; box-shadow:0 2px 10px rgba(31,41,55,.06); }
.card h2 { margin-top:.8em; }
.notice { background:#fff8e1; border-radius:12px; padding:10px 14px; color:#7a5300; font-weight:700; }
.muted { color:var(--muted); font-size:.9rem; }
.info { border-collapse:collapse; width:100%; }
.info th, .info td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--border); vertical-align:top; }
.info th { width:7em; color:var(--muted); font-weight:700; }