:root{--navy:#1F3A5F;--teal:#1A9A8F;--blue:#19A9C9;--green:#3BAA4A;--coral:#F2594B;--orange:#F59A1B;--bg:#fff;--fg:#1f2937;--muted:#5b6575;--card:#f7f8fa}
@media (prefers-color-scheme:dark){:root{--bg:#111418;--fg:#e9edf2;--muted:#a7b0bd;--card:#1b2027;--navy:#cfe0f5}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;line-height:1.8}
.wrap{max-width:860px;margin:0 auto;padding:24px 16px 48px}
header{display:flex;align-items:center;gap:12px}header img{width:56px;height:56px;border-radius:50%}
.logo{font-size:28px;font-weight:900;letter-spacing:.04em}.logo span:nth-child(1){color:var(--blue)}.logo span:nth-child(2){color:var(--green)}.logo span:nth-child(3){color:var(--coral)}.logo span:nth-child(4){color:var(--orange)}
.stripe{height:10px;background:linear-gradient(90deg,var(--blue) 0 25%,var(--green) 25% 50%,var(--coral) 50% 75%,var(--orange) 75%);border-radius:5px;margin:16px 0 24px}
h1{font-size:clamp(22px,5vw,34px);color:var(--navy);margin:8px 0}h2{color:var(--navy);font-size:20px;margin-top:32px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.card{background:var(--card);border-radius:12px;padding:14px;border-top:6px solid}
.card b{font-size:18px}.c1{border-color:var(--blue)}.c2{border-color:var(--green)}.c3{border-color:var(--coral)}.c4{border-color:var(--orange)}
.badge{display:inline-block;background:var(--blue);color:#fff;border-radius:999px;padding:2px 12px;font-size:13px;font-weight:700}
.soon{display:inline-block;background:var(--muted);color:#fff;border-radius:999px;padding:2px 12px;font-size:13px}
a{color:var(--teal)}footer{margin-top:40px;font-size:13px;color:var(--muted);border-top:1px solid #8883;padding-top:16px}
ol,ul{padding-left:1.4em}