:root{
  /* ===== Tone ===== */
  --brand:#00313D;
  --bg:#EEF2F5;
  --text:#0E1418;
  --muted:rgba(14,20,24,.72);

  --kv-max-w:1100px;
  --pad:clamp(18px, 3vw, 32px);

  /* ヘッダー高さ：ロゴ＋2行テキストで余裕 */
  --header-h:76px;

  /* 角は基本ゼロ（必要ならボタンだけ少し） */
  --radius:0px;
  --radius-btn:10px;

  /* 線は細く、主張しない */
  --line:rgba(0,49,61,.12);

  --panel:#fff;
  --panel-soft:rgba(0,49,61,.045);

  /* 影は控えめ（面と余白で見せる） */
  --shadow:0 14px 44px rgba(0,49,61,.10);
  --shadow-soft:0 10px 26px rgba(0,49,61,.06);

  --btn:#4F6168;
  --btn-hover:#3F525A;

  /* WM：薄い朱（彩度落として、温度だけ足す） */
  --wm:rgba(176, 68, 44, 0.085);
  --wm-tip:rgba(176, 68, 44, 0.065);

  /* 余白の整流 */
  --sec-gap:clamp(56px, 6vw, 86px);
  --sec-head-top:clamp(34px, 4.6vw, 60px);
  --sec-head-bottom:clamp(18px, 2.4vw, 32px);

  /* ===== 流体フォント ===== */
  --brand-strong-fs: clamp(14px, 3.6vw, 18px);
  --brand-sub-fs: clamp(10px, 2.6vw, 12px);

  --kv-title-fs: clamp(22px, 6.2vw, 40px);
  --kv-sub-fs: clamp(12px, 3.2vw, 16px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
section{ margin:0; }

/* 画像の基本ルール（暴走は個別に止める） */
img{ max-width:100%; height:auto; display:block; }

.container{
  width:min(100%, var(--kv-max-w));
  margin:0 auto;
  padding:0 var(--pad);
}

/* ヘッダー分のアンカーずれ対策 */
[id]{ scroll-margin-top: calc(var(--header-h) + 14px); }

/* =========================
   Header（ここは一本化）
========================== */
.site-header{
  position:sticky;
  top:0;
  z-index:10000;
  height:var(--header-h);
  background:var(--brand);
}

.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* brand: ロゴ＋2行組 */
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:#fff;
  min-width:0;
}

.brand-logo{
  width:44px;
  height:44px;
  flex:0 0 auto;
  border-radius:999px;
}

.brand-text{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.brand-text strong{
  font-weight:900;
  letter-spacing:.03em;
  font-size: var(--brand-strong-fs);
  line-height:1.05;
}

.brand-sub{
  font-size: var(--brand-sub-fs);
  color:rgba(255,255,255,.78);
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.25;
  opacity:.85;
}

/* Desktop nav */
.nav{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav a{
  text-decoration:none;
  color:rgba(255,255,255,.88);
  font-weight:900;
  font-size:14px;
  letter-spacing:.04em;
  padding:10px 10px;
  border-radius:var(--radius-btn);
  transition:background .15s ease, color .15s ease;
  white-space:nowrap;
}
.nav a:hover{
  background:rgba(255,255,255,.14);
  color:#fff;
}

/* Hamburger button (mobile) */
.menu-btn{
  display:none;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  padding:10px;
  border-radius:var(--radius-btn);
  line-height:1;
  -webkit-tap-highlight-color: transparent;
}
.menu-btn:hover{ background:rgba(255,255,255,.10); }
.menu-btn:focus-visible{
  outline:2px solid rgba(255,255,255,.65);
  outline-offset:2px;
}
.menu-icon{ width:26px; height:18px; position:relative; display:block; }
.menu-icon span{
  position:absolute;
  left:0; right:0;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .2s ease, top .2s ease, opacity .2s ease;
}
.menu-icon span:nth-child(1){ top:0; }
.menu-icon span:nth-child(2){ top:8px; }
.menu-icon span:nth-child(3){ top:16px; }

.menu-btn[aria-expanded="true"] .menu-icon span:nth-child(1){ top:8px; transform:rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icon span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] .menu-icon span:nth-child(3){ top:8px; transform:rotate(-45deg); }

/* Mobile Nav Overlay */
.mobile-nav{
  position:fixed;
  inset:0;
  display:none;
  z-index:20000;
  place-items:center;
  padding:16px;
}
.mobile-nav.is-open{ display:grid; }

.mobile-nav-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}
.mobile-nav-panel{
  position:relative;
  width:min(520px, 100%);
  background:#fff;
  border-radius:var(--radius);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
  border:1px solid var(--line);
  overflow:hidden;
  z-index:1;
}
.mobile-nav-head{
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:.03em;
  color:rgba(0,49,61,.90);
  background:rgba(0,49,61,.035);
}
.mobile-nav-links{
  display:grid;
  gap:10px;
  padding:16px;
}
.mobile-nav-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:900;
  letter-spacing:.03em;
  color:#0E1418;
  padding:14px 12px;
  border-radius:var(--radius-btn);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 10px 24px rgba(0,49,61,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  text-align:center;
}
.mobile-nav-links a:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(0,49,61,.10);
  border-color:rgba(0,49,61,.18);
}
.mobile-nav-foot{
  padding:14px 16px 18px;
  display:flex;
  justify-content:center;
  border-top:1px solid var(--line);
  background:rgba(0,49,61,.02);
}
.mobile-close{
  padding:12px 22px;
  border-radius:var(--radius-btn);
  border:1px solid rgba(0,49,61,.18);
  background:transparent;
  cursor:pointer;
  font-weight:900;
  color:#0E1418;
  transition:background .15s ease, transform .15s ease;
}
.mobile-close:hover{
  background:rgba(0,49,61,.05);
  transform:translateY(-1px);
}

/* =========================
   KV
========================== */
.kv{
  position:relative;
  overflow:hidden;
  background:#000;
  aspect-ratio:16/9;
  min-height:320px;
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}
.kv .fade-layer{
  position:absolute; inset:0;
  background-position:center;
  background-size:cover;
  opacity:0;
  transition:opacity 1100ms ease;
  filter:saturate(1.04) contrast(1.02);
}
.kv .fade-layer.is-on{ opacity:1; }

.kv .collage{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  opacity:0;
  transform:scale(1.015);
  transition:opacity 700ms ease, transform 900ms ease;
}
.kv.is-collage .collage{ opacity:1; transform:scale(1); }
.kv.is-collage .fade-layer{ opacity:0 !important; }
.kv .collage .tile{ overflow:hidden; }
.kv .collage img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.04) contrast(1.02);
}

.kv::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 50% 42%, rgba(0,0,0,.46), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,0) 58%);
  pointer-events:none;
  opacity:.86;
}

.kv-copywrap{
  position:absolute;
  inset:0;
  z-index:7;
  display:grid;
  place-items:center;
  padding:0 var(--pad);
  text-align:center;
}
.kv-copyinner{ width:min(92%, 42rem); }
.kv-title{
  margin:0;
  color:#fff;
  font-weight:900;
  font-size: var(--kv-title-fs);
  line-height:1.06;
  letter-spacing:.01em;
  text-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:0;
  transform:translateY(6px) scale(.992);
  transition:opacity .7s ease, transform .8s ease;
}
.kv-sub{
  margin:14px 0 0;
  color:rgba(255,255,255,.92);
  font-weight:750;
  font-size: var(--kv-sub-fs);
  line-height:1.75;
  letter-spacing:.02em;
  text-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .6s ease, transform .8s ease;
}
.kv.is-text-title .kv-title{ opacity:1; transform:translateY(0) scale(1); }
.kv.is-text-sub .kv-sub{ opacity:1; transform:translateY(0); }

/* =========================
   Section title watermark
========================== */
.sec-head{
  position:relative;
  padding:var(--sec-head-top) 0 var(--sec-head-bottom);
  overflow:hidden;
}
.sec-wm{
  position:absolute;
  inset:auto 0 auto 0;
  top:clamp(8px, 1.5vw, 14px);
  display:flex;
  justify-content:center;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.sec-wm span{
  font-weight:900;
  letter-spacing:.10em;
  font-size:clamp(42px, 6.6vw, 88px);
  color:var(--wm);
  line-height:1;
  white-space:nowrap;
}
.sec-title{
  position:relative;
  z-index:1;
  margin:0;
  text-align:center;
  font-weight:900;
  letter-spacing:.02em;
  font-size:clamp(21px, 2.5vw, 33px);
  line-height:1.22;
}
.sec-intro{
  position:relative;
  z-index:1;
  margin:14px auto 0;
  max-width:62rem;
  text-align:center;
  color:rgba(14,20,24,.70);
  line-height:1.9;
  font-size:clamp(13px, 1.05vw, 16px);
}

/* =========================
   Section 02
========================== */
.sec-02{
  position:relative;
  width:100%;
  overflow:hidden;
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  background:#000;
}
.sec-02-media{ display:flex; width:100%; }
.sec-02-media img{
  width:50%;
  height:clamp(320px, 40vw, 540px);
  object-fit:cover;
  display:block;
}
.sec-02-overlay{
  position:absolute; inset:0;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  display:grid;
  place-items:center;
  padding:clamp(26px, 4vw, 64px);
  text-align:center;
}
.sec-02-box{ width:min(100%, 62rem); }
.sec-02-title{
  margin:0;
  font-size:clamp(22px, 2.7vw, 32px);
  line-height:1.2;
  font-weight:900;
  color:#0E1418;
}
.sec-02-lead{
  margin:14px 0 0;
  font-weight:800;
  color:rgba(14,20,24,.72);
  line-height:1.85;
  font-size:clamp(14px, 1.15vw, 18px);
}
.sec-02-snippet{
  margin:14px auto 0;
  line-height:1.95;
  color:rgba(14,20,24,.78);
  font-size:clamp(13px, 1.05vw, 16px);
  max-width:56rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  cursor:pointer;
  font-weight:900;
  letter-spacing:.02em;
  border-radius:var(--radius-btn);
  transition:transform .15s ease, filter .15s ease, box-shadow .2s ease, background .15s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.btn--more{
  margin-top:22px;
  padding:12px 26px;
  background:var(--btn);
  color:#fff;
}
.btn--more:hover{
  background:var(--btn-hover);
  transform:translateY(-1px);
  filter:brightness(1.06);
  box-shadow:0 12px 30px rgba(0,49,61,.16);
}

/* =========================
   Section 03（観戦Tips）
========================== */
.sec-03{
  width:100%;
  padding:0 0 var(--sec-gap);
  background:transparent;
}
.sec-03-grid{
  margin-top:clamp(10px, 2.4vw, 22px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(14px, 2.5vw, 26px);
}
.tip-group{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--panel);
  box-shadow:var(--shadow-soft);
}
.tip-group-head{
  padding:18px 18px;
  background:var(--panel-soft);
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:center;
  text-align:center;
}
.tip-group-title{
  margin:0;
  font-size:15px;
  letter-spacing:.06em;
  color:rgba(0,49,61,.86);
  font-weight:900;
}
.tip-list{
  padding:12px 12px 16px;
  display:grid;
  gap:12px;
}
.tip-btn{
  position:relative;
  width:100%;
  text-align:left;
  padding:18px 18px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:var(--radius-btn);
  box-shadow:0 10px 26px rgba(0,49,61,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
  -webkit-tap-highlight-color: transparent;
}
@media (hover:hover){
  .tip-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 34px rgba(0,49,61,.10);
    border-color:rgba(0,49,61,.18);
  }
}
.tip-btn::before{
  content: attr(data-wm);
  position:absolute;
  inset:-10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:clamp(46px, 6.6vw, 98px);
  letter-spacing:.02em;
  color:var(--wm-tip);
  pointer-events:none;
  z-index:0;
  transform:translateY(-2%);
  white-space:nowrap;
}
.tip-btn > *{ position:relative; z-index:1; }

.tip-title{
  font-weight:900;
  color:#0E1418;
  line-height:1.35;
  font-size:16px;
}
.tip-chev{
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:var(--radius-btn);
  display:grid;
  place-items:center;
  background:rgba(0,49,61,.08);
  color:rgba(0,49,61,.88);
}
.tip-chev::before{
  content:"›";
  font-size:24px;
  font-weight:900;
  line-height:1;
  transform:translateX(1px);
}

/* =========================
   Section 04（SCHEDULE）
========================= */
.sec-04{
  width:100%;
  padding:0 0 var(--sec-gap);
  background:transparent;
}
.schedule-loading{
  padding:22px 18px;
  text-align:center;
  font-weight:900;
  color:rgba(0,49,61,.62);
  border:1px dashed rgba(0,49,61,.22);
  background:rgba(0,49,61,.02);
}
.schedule-group{
  margin-top:clamp(28px, 3.6vw, 44px);
}
.schedule-group-title{
  font-weight:900;
  font-size:18px;
  margin:0 0 14px;
  letter-spacing:.04em;
  color:rgba(0,49,61,.90);
}

/* group layout */
.group-prelim,
.group-semi{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}
.group-final{
  display:flex;
  justify-content:center;
}

/* 予選：最後が1枚なら中央寄せ */
.group-prelim > .match-card:last-child:nth-child(odd){
  grid-column:1 / -1;
  max-width:620px;
  margin:0 auto;
  width:100%;
}
.group-final > .match-card{
  width:100%;
  max-width:620px;
}

/* responsive */
@media (max-width:1024px){
  .group-prelim,
  .group-semi{ grid-template-columns:1fr; }
  .group-prelim > .match-card:last-child:nth-child(odd){ max-width:none; }
  .group-final > .match-card{ max-width:none; }
}

/* =========================
   Match Card
========================= */
.match-card{
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,49,61,.06);
  padding:16px 16px 14px;
  display:grid;
  grid-template-rows:auto auto minmax(56px, auto) 34px;
  gap:10px;
}

.match-card.is-before{ opacity:.92; }
.match-card.is-live{
  border-color:rgba(176,68,44,.45);
  box-shadow:0 14px 34px rgba(176,68,44,.08);
}
.match-card.is-finished{
  background:#F6F8F9;
  border-color:rgba(0,49,61,.18);
  box-shadow:none;
}

.mc-top{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  color:rgba(14,20,24,.65);
  font-weight:900;
  letter-spacing:.03em;
}
.mc-datetime{
  font-size:15px;
  font-weight:900;
  letter-spacing:.04em;
  color:rgba(14,20,24,.92);
}
.mc-round{
  font-size:13px;
  font-weight:800;
  letter-spacing:.05em;
  color:rgba(0,49,61,.72);
}

.mc-end{
  font-size:12px;
  margin-top:-4px;
  font-weight:700;
  color:rgba(0,49,61,.65);
  letter-spacing:.05em;
  text-align:center;
}

.mc-teams{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  text-align:center;
}
.team{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:0;
}
.team.is-left{ justify-content:flex-end; text-align:right; }
.team.is-right{ justify-content:flex-start; text-align:left; }

.flag{
  width:34px;
  height:22px;
  object-fit:contain;
  flex:0 0 auto;
  display:block;
  border:0;
  border-radius:0;
}
.team-name{
  font-weight:900;
  font-size:22px;
  letter-spacing:.02em;
  line-height:1.1;
}
.vs{
  font-weight:900;
  color:rgba(0,49,61,.45);
  letter-spacing:.02em;
  font-size:16px;
}

.mc-score{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:28px;
  letter-spacing:.04em;
  color:rgba(0,49,61,.92);
  line-height:1;
}
.mc-score.is-empty{ color:rgba(0,49,61,.28); }

.mc-bottom{
  display:flex;
  justify-content:center;
  align-items:center;
}
.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:30px;
  padding:0 14px;
  border:1px solid rgba(0,49,61,.20);
  background:rgba(0,49,61,.04);
  color:rgba(0,49,61,.88);
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  white-space:nowrap;
}
.match-card.is-live .status-badge{
  background:rgba(176,68,44,.12);
  border-color:rgba(176,68,44,.55);
  color:rgba(176,68,44,.98);
}
.match-card.is-finished .status-badge{
  background:rgba(0,49,61,.08);
  border-color:rgba(0,49,61,.28);
  color:rgba(0,49,61,.88);
}

/* =========================
   Section 05（日本代表）
========================== */
.sec-05{
  width:100%;
  padding:0 0 var(--sec-gap);
  background:transparent;
}
.sec-05-lead{
  margin:0 auto;
  max-width:64rem;
  line-height:2.0;
  color:rgba(14,20,24,.82);
  text-align:left;
  font-size:16px;
}
.sec-05-hero{
  margin-top:22px;
  border:0;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:none;
  background:transparent;
  max-height:70vh;
}
.sec-05-hero img{
  width:100%;
  height:auto;
  max-height:70vh;
  object-fit:contain;
  display:block;
  background:transparent;
}
.profiles{
  margin-top:clamp(18px, 3vw, 26px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(14px, 2.5vw, 26px);
  align-items:stretch;
}
.player-card{
  border:1px solid rgba(0,49,61,.18);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:none;
  padding:clamp(26px, 3.2vw, 40px);
  display:flex;
  flex-direction:column;
  gap:18px;
}
.player-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.player-photo{
  width:min(260px, 72%);
  border-radius:var(--radius);
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
}
.player-photo img{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
}
.player-name{
  margin:0;
  font-weight:900;
  letter-spacing:.02em;
  font-size:16px;
  text-align:center;
  color:#0E1418;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.player-name .ja { font-weight:700; font-size:1.1rem; }
.player-name .en{
  font-size:0.85rem;
  letter-spacing:0.05em;
  opacity:0.7;
  font-family:'Inter', sans-serif;
}
.player-name .role{ font-size:0.8rem; opacity:0.6; }
.player-kicker{
  margin:2px 0 0;
  font-weight:900;
  font-size:18px;
  letter-spacing:.01em;
  text-align:center;
  width:100%;
  color:#0E1418;
}
.player-text{
  margin:0;
  color:rgba(14,20,24,.80);
  line-height:2.0;
  font-size:14px;
  white-space:pre-line;
  text-align:left;
}
.sec-05-close{
  margin:18px auto 0;
  max-width:64rem;
  color:rgba(14,20,24,.82);
  line-height:1.95;
  text-align:left;
  font-size:15px;
}

/* =========================
   Footer（ロゴ＋テキスト 1行）
========================== */
footer{
  padding:22px 0 34px;
  background:var(--brand);
}
.foot{
  color:#fff;
  font-size:12px;
  line-height:1.8;
  font-weight:800;
}
.foot-inner{
  display:flex;
  align-items:center;
  justify-content:center; /* 1行で中央 */
  gap:12px;
}
.foot-logo{
  width:44px;
  height:44px;
  flex:0 0 auto;
  border-radius:999px;
}
.foot a{
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.45);
  padding-bottom:1px;
  white-space:nowrap;
}
.foot a:hover{ border-bottom-color:#fff; }

/* =========================
   Modal
========================== */
.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
  place-items:center;
  padding:16px;
}
.modal.is-open{ display:grid; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}
.modal-panel{
  position:relative;
  width:min(680px, 100%);
  max-height:calc(90vh - 32px);
  margin:0;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:0 24px 64px rgba(0,0,0,.25);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
  z-index:1;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  gap:12px;
}
.modal-title{
  margin:0;
  font-size:16px;
  letter-spacing:.03em;
  font-weight:900;
  line-height:1.25;
  color:#0E1418;
}
.modal-close{
  border:0;
  background:transparent;
  font-size:22px;
  cursor:pointer;
  line-height:1;
}
.modal-body{
  padding:18px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  line-height:2.0;
  color:rgba(14,20,24,.86);
  font-size:14px;
}
.modal-body p{ margin:0 0 14px; }
.modal-foot{
  padding:18px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:center;
}
.btn-close{
  padding:12px 26px;
  border-radius:var(--radius-btn);
  border:1px solid rgba(0,49,61,.18);
  background:transparent;
  color:#0E1418;
  cursor:pointer;
  font-weight:900;
  transition:background .15s ease, transform .15s ease;
}
.btn-close:hover{
  background:rgba(0,49,61,.05);
  transform:translateY(-1px);
}

/* =================================================
   <=1024px：モバイルヘッダー（天地に余裕）
================================================== */
@media (max-width:1024px){
  :root{ --header-h:86px; }  /* ロゴ＋2行でも詰まらない */

  .nav{ display:none; }

  .header-inner{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 44px; /* brand | menu */
    align-items:center;
    column-gap:10px;
  }

  .brand-logo{ width:40px; height:40px; }

  .brand-sub{
    line-height:1.2;
    /* 省略で逃がさない：2行で見せる */
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }

  .menu-btn{
    display:grid;
    place-items:center;
    justify-self:end;
    width:44px;
    height:44px;
  }

  .sec-03-grid{ grid-template-columns:1fr; }
  .profiles{ grid-template-columns:1fr; }
  .tip-btn{ padding:16px 16px; }
  .sec-05-lead{ font-size:15px; }

  /* フッター1行をスマホでも維持（長い時は折り返し） */
  .foot-inner{
    flex-wrap:wrap;
    row-gap:10px;
  }
}

/* =================================================
   <=720px：KVの縦崩れ防止
================================================== */
@media (max-width:720px){
  .sec-02-media{ flex-direction:column; }
  .sec-02-media img{ width:100%; }

  .kv{
    min-height:0;
    height:auto;
    aspect-ratio:16/9;
  }
}

/* =================================================
   <=640px：本文は読むため左
================================================== */
@media (max-width: 639.98px){
  html, body{ overflow-x:hidden; }

  #team-japan .sec-05-lead,
  #team-japan .sec-05-close,
  #team-japan .player-text{
    text-align:left !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* ===== Section spacing ===== */
.sec-03 + .sec-04,
.sec-04 + .sec-05{
  margin-top:120px;
}
@media (max-width:768px){
  .sec-03 + .sec-04,
  .sec-04 + .sec-05{ margin-top:80px; }
}
@media (max-width: 768px){
  .sec-03,
  .sec-04,
  .sec-05{ margin-top: 80px; }
}

/* =========================
   モバイル：ヘッダー常時固定
========================= */
@media (max-width:1024px){
  .site-header{
    position:fixed;
    top:0; left:0; right:0;
    width:100%;
  }
  body{ padding-top: var(--header-h); }
}

/* ===== FIX: footer logo runaway (force) ===== */
footer .foot-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
}

footer .foot-logo{
  width:44px !important;
  height:44px !important;
  max-width:44px !important;
  max-height:44px !important;
  flex:0 0 44px !important;
  object-fit:contain !important;
  border-radius:999px !important;
}

/* どこかに footer img { width:100% } みたいなのがいても勝つ */
footer img{
  width:auto !important;
  height:auto !important;
  max-width:none !important;
}

/* ===== FIX: mobile header typography + 2-line layout ===== */
@media (max-width:1024px){
  :root{ --header-h:92px !important; }

  .brand-text strong{
    font-size:16px !important;
    line-height:1.1 !important;
  }
  .brand-sub{
    font-size:11px !important;
    line-height:1.25 !important;
    letter-spacing:.01em !important;
  }

  /* テキストが横幅いっぱい暴れないように */
  .brand{
    align-items:center !important;
    min-width:0 !important;
  }
  .brand-text{
    min-width:0 !important;
    max-width:calc(100vw - 44px - 40px - 32px) !important; /* menu+logo+paddingざっくり */
  }
}

/* =================================================
   OVERRIDE (Header + Footer) - paste at the very end
================================================== */

/* ---------- Header base ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:10000;
  background:var(--brand);
}

.header-inner{
  height:auto;
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#fff;
  min-width:0;
}

.brand-logo{
  width:44px !important;
  height:44px !important;
  flex:0 0 44px !important;
  object-fit:contain !important;
  border-radius:999px !important;
  display:block;
}

.brand-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.brand-text strong{
  font-weight:900;
  letter-spacing:.03em;
  line-height:1.1;
  font-size:16px;
  white-space:nowrap;
}

.brand-sub{
  margin-top:4px;
  font-size:12px;
  line-height:1.25;
  font-weight:700;
  color:rgba(255,255,255,.78);
  /* 2行までOK。長すぎたら省略 */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Desktop nav */
.nav{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav a{
  text-decoration:none;
  color:rgba(255,255,255,.88);
  font-weight:900;
  font-size:14px;
  letter-spacing:.04em;
  padding:10px 10px;
  border-radius:var(--radius-btn);
  transition:background .15s ease, color .15s ease;
  white-space:nowrap;
}
.nav a:hover{
  background:rgba(255,255,255,.14);
  color:#fff;
}

/* Hamburger */
.menu-btn{
  display:none;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  padding:10px;
  border-radius:var(--radius-btn);
  line-height:1;
  -webkit-tap-highlight-color: transparent;
}
.menu-btn:hover{ background:rgba(255,255,255,.10); }
.menu-btn:focus-visible{
  outline:2px solid rgba(255,255,255,.65);
  outline-offset:2px;
}

/* ---------- Mobile header layout ---------- */
@media (max-width:1024px){
  :root{ --header-h:92px; }

  .site-header{
    position:fixed;
    top:0; left:0; right:0;
    width:100%;
  }
  body { padding-top: 92px; }

  .header-inner{
    display:grid;
    grid-template-columns:auto 56px;
    align-items:center;
    gap:10px;
    padding:12px 0;
  }

  .nav{ display:none; }

  .menu-btn{
    display:grid;
    place-items:center;
    justify-self:end;
    width:56px;
    height:56px;
  }

  .brand-text strong{ font-size:16px; }
  .brand-sub{ font-size:11px; }
}

/* ---------- Footer (logo + one-line) ---------- */
.site-footer{
  padding:22px 0 34px;
  background:var(--brand);
}

.foot{
  display:flex;
  justify-content:center;
}

.foot-link{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:800;
  font-size:12px;
  line-height:1.4;
  white-space:nowrap;
}

.foot-logo{
  width:40px !important;
  height:40px !important;
  flex:0 0 44px !important;
  object-fit:contain !important;
  border-radius:999px !important;
  display:block !important;
}

/* “どこかの雑な指定”が footer の img を100%にしても封殺 */
.site-footer img{
  width:44px !important;
  height:44px !important;
  max-width:44px !important;
  max-height:44px !important;
}