*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color:#111;
  background:#d9d9d9;
}

/* 上部ナビ */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  padding:10px 14px;
  background: linear-gradient(#f5f5f5,#d7d7d7);
  border-bottom:1px solid #bdbdbd;
}
.nav{
  max-width: 1100px;
  margin:0 auto;
}
.nav a{
  margin-right:14px;
  text-decoration:none;
  color:#111;
  font-weight:700;
}

/* main.png 全幅表示（ナビの下全体） */
.hero{
  background:#0000;
}
.hero-img{
  width:100%;
  height:auto;
  display:block;
}

/* 3カラム本体 */
.layout{
  max-width: 1100px;
  margin: 14px auto 24px;
  padding: 0 12px;
  display:grid;
  grid-template-columns: 220px 1fr 260px;
  gap: 14px;
}

.panel{
  background: rgba(255,255,255,.92);
  border:1px solid #cfcfcf;
  border-radius:12px;
  padding:12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.bigbtn{
  width:100%;
  margin-bottom:10px;
  padding:12px 10px;
  border-radius:12px;
  border:1px solid #7aa6ff;
  background:#2f6fff;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

/* お知らせ */
.tabs{ display:flex; gap:8px; margin:10px 0; flex-wrap:wrap; }
.tab{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #bbb;
  background:#f6f6f6;
  cursor:pointer;
  font-weight:700;
}
.tab.is-active{ background:#2f6fff; border-color:#2f6fff; color:#fff; }

.list{ list-style:none; padding:0; margin:0; }
.list li{ padding:8px 0; border-top:1px solid #e6e6e6; }
.list li:first-child{ border-top:0; }
.date{
  display:inline-block;
  width:100px;
  color:#666;
  font-variant-numeric: tabular-nums;
}

/* コミュニティリンク */
.links{ display:flex; gap:10px; flex-wrap:wrap; }
.pill{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #bbb;
  background:#fff;
  text-decoration:none;
  color:#111;
  font-weight:700;
}

/* ランキング */
.rank{ margin:0; padding-left:20px; }
.rank li{ padding:6px 0; }

/* スマホ */
@media (max-width: 920px){
  .layout{ grid-template-columns: 1fr; }
}