:root{
  --bg:#f7f8fb;
  --surface:#ffffff;
  --surface-2:#eef0f5;
  --text:#141a2e;
  --muted:#5a6178;
  --border:#dde1ea;
  --navy:#0a1f44;
  --navy-dark:#061633;
  --gold:#d1a24a;
  --gold-light:#f0d190;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Noto Sans JP","Hiragino Sans",-apple-system,sans-serif;
  line-height:1.7;
}
h1,h2,h3,.brand-text{font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;}
a{color:inherit;text-decoration:none;}

.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;background:var(--navy);color:#fff;
  position:sticky;top:0;z-index:10;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;}
.brand-badge{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy) 52%,#0f4a3f 74%,#1a8a1a 100%);
  color:var(--gold-light);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;flex:0 0 auto;
}
.site-nav{display:flex;gap:20px;}
.site-nav a{color:#cdd3e6;font-size:14px;font-weight:700;padding:6px 4px;border-bottom:2px solid transparent;white-space:nowrap;}
.site-nav a.active, .site-nav a:hover{color:#fff;border-bottom-color:var(--gold);}

/* 画面幅が狭いと.site-navのリンクが横並びのまま縮み、文字が1字ずつ折り返される
   (white-spaceだけでは防げない)ため、ヘッダー自体を2段に割ってナビを横スクロール可能にする。 */
@media (max-width:640px){
  .site-header{flex-wrap:wrap;row-gap:10px;padding:14px 16px;}
  .site-nav{flex-basis:100%;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .site-nav a{font-size:12.5px;padding:6px 8px;flex:0 0 auto;}
}

main{max-width:1000px;margin:0 auto;padding:0 24px 64px;}

.hero{padding:56px 0 40px;text-align:center;}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--gold);text-transform:uppercase;margin-bottom:14px;}
.hero h1{font-size:clamp(24px,4vw,36px);font-weight:900;margin:0 0 16px;text-wrap:balance;}
.hero-lede{color:var(--muted);max-width:520px;margin:0 auto 28px;font-size:14.5px;}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

.btn{display:inline-block;padding:12px 24px;border-radius:999px;font-weight:700;font-size:14px;}
.btn-primary{background:var(--navy);color:#fff;}
.btn-secondary{background:var(--surface);color:var(--navy);border:1px solid var(--border);}

.section{padding:32px 0;}
.section-title{font-size:18px;font-weight:800;margin:0 0 20px;padding-bottom:10px;border-bottom:2px solid var(--border);}

.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;}
.card h3{font-size:15px;margin:0 0 8px;}
.card p{font-size:13px;color:var(--muted);margin:0;}

.notice-card{background:var(--surface-2);border:1px dashed var(--border);border-radius:12px;padding:20px;color:var(--muted);font-size:13.5px;text-align:center;}

.news-list{display:flex;flex-direction:column;gap:16px;}
.news-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;cursor:pointer;}
.news-card:hover{border-color:var(--navy);}
.news-card .category{display:inline-block;font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px;}
.news-card .title{font-weight:800;font-size:16px;margin:0 0 8px;}
.news-card .excerpt{font-size:13px;color:var(--muted);margin:0;line-height:1.7;}
.news-card .meta{margin-top:10px;font-size:11.5px;color:var(--muted);}
.news-detail{display:none;}
.news-detail.active{display:block;}
.news-list.hidden{display:none;}
.back-link{display:inline-block;margin-bottom:16px;font-size:13px;color:var(--navy);font-weight:700;cursor:pointer;}
.news-detail .title{font-size:20px;font-weight:900;margin:0 0 12px;}
.news-detail .body{font-size:14.5px;line-height:1.9;white-space:pre-wrap;}
.news-detail .source{margin-top:20px;font-size:12px;color:var(--muted);}

.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px;}
.filter-bar select{padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface);font-size:13px;}
.toggle-filter{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;user-select:none;}
.toggle-filter input{accent-color:var(--navy);width:15px;height:15px;}
.badge-rep-candidate{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;color:var(--navy);background:var(--gold-light);border-radius:999px;padding:2px 8px;vertical-align:middle;}

.list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
.person-card, .team-card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:16px;display:flex;flex-direction:column;gap:4px;
}
.person-card .name-ja{font-weight:800;font-size:15px;}
.person-card .name-en{color:var(--muted);font-size:12px;}
.person-card .team{margin-top:8px;font-size:12.5px;color:var(--navy);font-weight:700;}
.team-card .team-name-ja{font-weight:800;font-size:15px;}
.team-card .league{color:var(--gold);font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.team-card .player-list{margin-top:10px;font-size:12.5px;color:var(--muted);}

.schedule-date-heading{font-size:14px;font-weight:800;color:var(--navy);margin:24px 0 10px;}
.schedule-date-heading:first-child{margin-top:0;}
.schedule-day-group{display:flex;flex-direction:column;gap:10px;}
.match-card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;display:flex;gap:16px;align-items:flex-start;
}
.match-time{font-weight:800;font-size:15px;color:var(--navy);flex:0 0 52px;}
.match-body{flex:1;}
.match-competition{font-size:11.5px;font-weight:700;color:var(--gold);letter-spacing:.03em;margin-bottom:4px;}
.badge-clash{background:var(--navy);color:#fff;border-radius:999px;padding:2px 8px;font-size:10.5px;font-weight:700;}
.match-teams{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap;}
.vs-sep{color:var(--muted);font-size:12px;font-weight:700;flex:0 0 auto;}
.team-slot{display:flex;flex-direction:column;min-width:0;}
.team-ours{background:var(--surface-2);border-radius:8px;padding:5px 10px;}
.team-ours .team-name{font-weight:900;font-size:15px;color:var(--navy);}
.team-players{font-size:10.5px;color:var(--gold);font-weight:700;margin-top:1px;}
.team-opponent{padding:5px 2px;}
.team-opponent .team-name{font-weight:600;font-size:13.5px;color:var(--muted);}
.match-providers{font-size:12.5px;color:var(--muted);}
.match-provider-link{color:var(--navy);font-weight:700;text-decoration:underline;}
.match-provider-unknown{color:var(--muted);}

.loading, .error-msg{color:var(--muted);font-size:13px;padding:20px 0;text-align:center;}
.error-msg{color:#a33;}

.site-footer{
  text-align:center;padding:28px;color:var(--muted);font-size:12px;
  border-top:1px solid var(--border);
}