:root{
  --ink:#1f2933; --sub:#52606d; --line:#e4e7eb;
  --accent:#1f6feb; --bg:#fafbfc; --card:#fff;
}
*{box-sizing:border-box} 
body{margin:0;font-family:system-ui,"Hiragino Sans","Noto Sans JP",sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.7}
header{padding:48px 20px 28px;text-align:center;border-bottom:1px solid var(--line);background:#fff}
header h1{margin:0 0 6px;font-size:1.5rem}
header p{margin:0;color:var(--sub);font-size:.95rem}
nav{display:flex;gap:18px;justify-content:center;margin-top:18px;flex-wrap:wrap}
nav a{color:var(--accent);text-decoration:none;font-size:.92rem}
main{max-width:920px;margin:0 auto;padding:32px 20px 64px}
section{margin-bottom:48px}
section h2{font-size:1.2rem;border-left:4px solid var(--accent);padding-left:10px;margin-bottom:6px}
section .lead{color:var(--sub);margin:0 0 18px;font-size:.92rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column}
.card.ended{opacity:.62}
.card .flyer{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}
.card .body{padding:16px}
.card h3{margin:.2rem 0 .4rem;font-size:1.02rem}
.card .meta{color:var(--sub);font-size:.85rem;margin:.2rem 0}
.card .why{font-size:.92rem;margin:.3rem 0}
.badge{display:inline-block;font-size:.72rem;padding:2px 8px;border-radius:999px;background:#e4e7eb;color:#52606d}
.badge.up{background:#dbeafe;color:#1f6feb}
.btn{display:inline-block;margin-top:10px;padding:7px 14px;background:var(--accent);color:#fff;
  border-radius:8px;text-decoration:none;font-size:.88rem}
.empty{color:var(--sub)}
footer{border-top:1px solid var(--line);padding:24px 20px;text-align:center;color:var(--sub);font-size:.85rem;background:#fff}
footer a{color:var(--accent)}