/* ============================================================
   BackStage 大運動会2026 ユーザー向けサイト
   世界観: 青春・アツさ・運動会・体育・POP
   - 紺(#1A1F71)は縁取り・文字色のみ。背景には敷かない
   - 背景はセクションごとに切替 =「運動会のプログラムが進む」縦の流れ
   ============================================================ */

:root {
  --navy: #1A1F71;
  --red: #E8322F;
  --red-aa: #D42824; /* WCAG AA確保用。小さめの赤文字はこちらを使う(#E8322Fは実測3.94〜4.26で僅か未達) */
  --red-light: #F0524F;
  --yellow: #FFD400;
  --blue: #2F6FE8;
  --sky: #6EC9FF;
  --white: #fff;
  --team-aka: #E53935;
  --team-ao: #1E88E5;
  --team-ki: #FDD835;
  --team-midori: #43A047;
  --team-daidai: #FB8C00;
  --team-murasaki: #8E24AA;
  /* 万国旗ガーランド(6チームカラーの三角旗・データURI SVG) */
  --garland: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cpath d='M0 8 H240' stroke='%231A1F71' stroke-width='5'/%3E%3Cg stroke-linejoin='round'%3E%3Cpath d='M2 8 H38 L20 50 Z' fill='%23E53935' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M42 8 H78 L60 50 Z' fill='%231E88E5' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M82 8 H118 L100 50 Z' fill='%23FDD835' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M122 8 H158 L140 50 Z' fill='%2343A047' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M162 8 H198 L180 50 Z' fill='%23FB8C00' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M202 8 H238 L220 50 Z' fill='%238E24AA' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M2 8 H38 L20 50 Z' fill='%23E53935' stroke='%231A1F71' stroke-width='3'/%3E%3Cpath d='M42 8 H78 L60 50 Z' fill='%231E88E5' stroke='%231A1F71' stroke-width='3'/%3E%3Cpath d='M82 8 H118 L100 50 Z' fill='%23FDD835' stroke='%231A1F71' stroke-width='3'/%3E%3Cpath d='M122 8 H158 L140 50 Z' fill='%2343A047' stroke='%231A1F71' stroke-width='3'/%3E%3Cpath d='M162 8 H198 L180 50 Z' fill='%23FB8C00' stroke='%231A1F71' stroke-width='3'/%3E%3Cpath d='M202 8 H238 L220 50 Z' fill='%238E24AA' stroke='%231A1F71' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  --font-pop: "Mochiy Pop One", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.75;
  background: var(--white);
  overflow-x: clip; /* 装飾のはみ出しで横スクロールを出さない */
}

h1, h2, h3, h4 { font-family: var(--font-pop); font-weight: 400; }

section {
  position: relative;
  overflow: clip;
  padding: clamp(64px, 12vw, 120px) 20px;
  scroll-margin-top: 72px; /* 固定ヘッダーの高さ分。メニューからのジャンプで見出しが隠れない */
}

.wrap { max-width: 1080px; margin-inline: auto; position: relative; }

/* ---- 万国旗ガーランド(セクション上端の区切り) ---- */
.garland-top::before,
footer.garland-top::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 52px;
  background-image: var(--garland);
  background-repeat: repeat-x;
  background-size: auto 52px;
  pointer-events: none;
  z-index: 2;
}

/* ---- 縁取り文字(三層重ね): 紺の外フチ→白の中フチ→本体色 ---- */
.stroke2 {
  position: relative;
  z-index: 0;
  display: inline-block;
}
.stroke2::before,
.stroke2::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  width: 100%;
  color: transparent;
  pointer-events: none;
}
.stroke2::before {
  -webkit-text-stroke: 14px var(--navy);
  text-shadow: 3px 3px 0 var(--navy), -3px 3px 0 var(--navy), 3px -3px 0 var(--navy), -3px -3px 0 var(--navy);
  z-index: -2;
}
.stroke2::after {
  -webkit-text-stroke: 7px var(--white);
  z-index: -1;
}

/* ---- セクション見出し(英語eyebrow+日本語ポップ体) ---- */
h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  margin-bottom: clamp(36px, 7vw, 60px);
}
h2 .en {
  font-family: var(--font-pop);
  font-size: clamp(0.72rem, 2.4vw, 0.9rem);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: var(--white);
  background: var(--navy);
  border-radius: 999px;
  padding: 6px 20px;
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--navy);
}
h2 .h2-jp {
  font-size: clamp(1.9rem, 7.4vw, 3.2rem);
  color: var(--red);
  transform: rotate(-2deg);
  line-height: 1.3;
}
h2 .h2-jp.jp-onred { color: var(--yellow); }
h2 .h2-jp.jp-onsky { color: var(--blue); }

/* ---- ステッカー風カード(白フチ+紺アウトライン) ---- */
.card {
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 18px;
  box-shadow: 0 0 0 6px var(--white), 0 6px 0 6px rgba(26, 31, 113, 0.25);
  padding: 26px 22px;
  position: relative;
}

/* ============================================================
   HERO: 黄色ハーフトーン+四隅ステッカー
   ============================================================ */
#hero {
  position: relative; /* 内部の.sticker/.sparkをこのセクション基準に固定(位置%指定がドキュメント全体基準にならないように) */
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(14px, 3vw, 22px);
  background-color: var(--yellow);
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.6) 20%, transparent 21%),
    radial-gradient(circle at 50% 20%, #FFE45C 0%, var(--yellow) 70%);
  background-size: 14px 14px, cover;
}

.sticker {
  position: absolute;
  width: clamp(64px, 14vw, 120px);
  height: auto;
  filter: drop-shadow(0 4px 0 rgba(26, 31, 113, 0.2));
  z-index: 1;
}
.sticker-flag      { top: 4%;  left: 3%;  transform: rotate(-12deg); }
.sticker-megaphone { top: 5%;  right: 3%; transform: rotate(10deg); }
.sticker-trophy    { bottom: 9%; left: 4%;  transform: rotate(8deg); }
.sticker-cone      { bottom: 8%; right: 4%; transform: rotate(-8deg); }

.spark {
  position: absolute;
  color: var(--white);
  text-shadow: 2px 2px 0 rgba(26, 31, 113, 0.25);
  font-size: clamp(1.2rem, 3vw, 2rem);
  animation: twinkle 2.4s ease-in-out infinite;
  pointer-events: none;
}
.spark-1 { top: 22%; left: 16%; }
.spark-2 { top: 34%; right: 14%; animation-delay: 0.8s; }
.spark-3 { bottom: 24%; right: 26%; animation-delay: 1.6s; }
@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}

#hero h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.4vw, 18px);
  z-index: 3;
}
.hero-sub {
  font-family: var(--font-pop);
  font-size: clamp(0.9rem, 3vw, 1.3rem);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--navy);
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 10px;
  padding: 4px 18px;
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 rgba(26, 31, 113, 0.25);
}
/* ロゴ(支給デザインPNG)。旧テキストタイトル(.hero-main)を置き換え */
.hero-logo {
  width: min(88vw, 660px);
  height: auto;
  filter: drop-shadow(0 8px 0 rgba(26, 31, 113, 0.18));
}

.hero-period {
  font-family: var(--font-pop);
  font-size: clamp(1.5rem, 6vw, 2.6rem);
  color: var(--navy);
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 16px;
  padding: 8px 26px;
  transform: rotate(1.5deg);
  box-shadow: 0 0 0 5px var(--white), 0 6px 0 5px rgba(26, 31, 113, 0.25);
  z-index: 3;
}
.hero-period span { font-size: 0.55em; }

/* 主キャッチ(フライヤーの帯に相当): 全6チーム対抗×7日間の本気バトル */
.hero-battle {
  font-family: var(--font-pop);
  font-size: clamp(1.15rem, 4.6vw, 2rem);
  color: var(--red);
  transform: rotate(-1.5deg);
  line-height: 1.5;
  z-index: 3;
}

.hero-copy {
  font-weight: 700;
  font-size: clamp(0.95rem, 3.4vw, 1.2rem);
  color: var(--navy);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 6px 20px;
  z-index: 3;
}

.hero-scroll {
  font-family: var(--font-pop);
  font-size: clamp(0.8rem, 2.6vw, 1rem);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--navy);
  margin-top: clamp(6px, 2vw, 16px);
  animation: bounce 1.6s ease-in-out infinite;
  z-index: 3;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* ============================================================
   COUNTDOWN: 青ハーフトーン(電光スコアボードの気分)
   ============================================================ */
#countdown {
  background-color: var(--blue);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.28) 20%, transparent 21%);
  background-size: 14px 14px;
  text-align: center;
}

.cd-status {
  font-family: var(--font-pop);
  font-size: clamp(1rem, 3.6vw, 1.4rem);
  color: var(--navy);
  background: var(--yellow);
  border: 3px solid var(--navy);
  border-radius: 999px;
  display: inline-block;
  padding: 6px 24px;
  margin-bottom: 24px;
  transform: rotate(-1.5deg);
  box-shadow: 0 0 0 4px var(--white), 0 5px 0 4px rgba(26, 31, 113, 0.3);
}
.cd-status:empty { display: none; }

.cd-panel {
  max-width: 640px;
  margin-inline: auto;
  background: var(--white);
  border: 4px solid var(--navy);
  border-radius: 22px;
  box-shadow: 0 0 0 7px var(--white), 0 8px 0 7px rgba(26, 31, 113, 0.3);
  padding: clamp(20px, 5vw, 36px) clamp(12px, 4vw, 28px);
}
.cd-panel[hidden] {
  display: none;
}
.cd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 2vw, 16px);
}
.cd-grid[hidden] {
  display: none;
}
.cd-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #FFF7CC;
  border: 3px solid var(--navy);
  border-radius: 14px;
  padding: clamp(10px, 2.6vw, 18px) 4px;
}
.cd-grid b {
  font-family: var(--font-pop);
  font-weight: 400;
  font-size: clamp(1.7rem, 7.4vw, 3.2rem);
  color: var(--navy);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cd-grid span {
  font-family: var(--font-pop);
  font-size: clamp(0.62rem, 2vw, 0.8rem);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: var(--red-aa);
}

/* ============================================================
   ABOUT: 白地+万国旗
   ============================================================ */
#about {
  background-color: var(--white);
  background-image: radial-gradient(circle, rgba(47, 111, 232, 0.08) 20%, transparent 21%);
  background-size: 18px 18px;
  padding-top: clamp(96px, 16vw, 150px); /* ガーランドの下に余白 */
}

/* ---- 6チームチップ(フライヤーの組バッジ列) ---- */
.team-intro {
  text-align: center;
  margin-bottom: clamp(48px, 9vw, 80px);
}
.team-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 2vw, 14px);
  margin-bottom: clamp(16px, 3vw, 24px);
}
/* スマホ幅は5+1の中途半端な折返しになりやすいので3個×2段に揃える */
@media (max-width: 719px) {
  .team-chips {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
  }
  .team-chips li { text-align: center; }
}
.team-chips li {
  font-family: var(--font-pop);
  font-size: clamp(0.9rem, 3.2vw, 1.15rem);
  color: var(--white);
  border: 3px solid var(--navy);
  border-radius: 999px;
  padding: 4px 18px;
  box-shadow: 0 0 0 3px var(--white), 0 3px 0 3px rgba(26, 31, 113, 0.2);
}
.chip-aka      { background: var(--team-aka); }
.chip-ao       { background: var(--team-ao); }
.chip-ki       { background: var(--team-ki); }
.team-chips .chip-ki { color: var(--navy); } /* 黄背景に白文字はコントラスト不足のため紺 */
.chip-midori   { background: var(--team-midori); }
.chip-daidai   { background: var(--team-daidai); }
.chip-murasaki { background: var(--team-murasaki); }
.team-intro-copy {
  font-weight: 700;
  font-size: clamp(0.95rem, 3.4vw, 1.15rem);
}
.team-intro-copy strong { color: var(--red-aa); }

.mission-title {
  text-align: center;
  font-size: clamp(1.2rem, 4.4vw, 1.7rem);
  color: var(--navy);
  margin-bottom: clamp(28px, 5vw, 40px);
}
.mission-title span {
  display: block;
  font-size: 0.65em;
  color: var(--red);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
.mission-lead {
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.9rem, 3.2vw, 1.05rem);
  margin-bottom: clamp(28px, 5vw, 40px);
}

.mission-cards {
  display: grid;
  gap: clamp(24px, 4vw, 28px);
}
.card.mission { padding-top: 26px; text-align: center; overflow: clip; }
.card.mission h4 {
  font-size: clamp(1.1rem, 3.8vw, 1.3rem);
  color: var(--navy);
  margin-bottom: 6px;
}

/* フライヤー風のカラーアクセント(左上の三角) */
.card.mission::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 34px;
  height: 34px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.mission-aka::before { background: var(--team-aka); }
.mission-ao::before  { background: var(--team-ao); }
.mission-ki::before  { background: var(--team-ki); }

/* 日次目標の大きな数字(フライヤーの「12時間/日」) */
.mission-target {
  font-family: var(--font-pop);
  font-size: clamp(2rem, 8vw, 2.8rem);
  line-height: 1.2;
  margin: 4px 0 6px;
}
.mission-target span {
  font-size: 0.45em;
  color: var(--navy);
}
.mission-aka .mission-target b { font-weight: 400; color: var(--red-aa); }
.mission-ao .mission-target b  { font-weight: 400; color: var(--blue); }
.mission-ki .mission-target b  { font-weight: 400; color: #B8860B; }
.mission-note {
  font-size: clamp(0.8rem, 2.8vw, 0.9rem);
  line-height: 1.7;
}
.mission-outro {
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.95rem, 3.4vw, 1.15rem);
  margin-top: clamp(28px, 5vw, 40px);
}
/* 重点ミッションの伏線: 概念の初出はミッション紹介の文脈に置き、
   ポイントのしくみ側の紺ブロック(詳細)が唐突に見えないようにする */
.mission-featured-hint {
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.9rem, 3.2vw, 1.05rem);
  line-height: 1.8;
  margin-top: clamp(12px, 2.5vw, 18px);
}
.mission-featured-hint .hint-fire {
  font-family: var(--font-pop);
  font-size: clamp(1rem, 3.6vw, 1.2rem);
  color: var(--red-aa);
}

/* ============================================================
   CAMPAIGN: ユーザー還元(まいにち通話キャンペーン)。緑ドットの白背景
   ============================================================ */
/* BONUS〜FAQが白背景続きにならないよう、キャンペーンだけ黄ハーフトーン
   (ヒーロー/RESULTSと同じチラシ地。白カード・赤バーストが跳ねる) */
#campaign {
  position: relative; /* 内部の.campaign-burstをこのセクション基準に固定 */
  background-color: var(--yellow);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.6) 20%, transparent 21%);
  background-size: 18px 18px;
  padding-top: clamp(96px, 16vw, 150px); /* ガーランドの下に余白 */
  text-align: center;
}

.campaign-catch {
  font-family: var(--font-pop);
  font-size: clamp(1.2rem, 4.8vw, 1.8rem);
  line-height: 1.5;
  color: var(--navy); /* 黄地に紺(9.7:1) */
  margin-bottom: 8px;
}
/* キャッチの決め文句に白マーカー(黄地でも沈まないチラシの手塗り感) */
.campaign-catch .marker {
  color: var(--red-aa); /* 白マーカー上で5.09:1 */
  background: linear-gradient(transparent 12%, var(--white) 12%, var(--white) 94%, transparent 94%);
  padding-inline: 6px;
}

/* スマホだけ改行(キャッチを2行に) */
.sp-only { display: none; }
@media (max-width: 560px) {
  .sp-only { display: inline; }
}

.campaign-period {
  font-weight: 700;
  font-size: clamp(0.9rem, 3.2vw, 1.05rem);
  margin-bottom: clamp(28px, 5vw, 40px);
}
.campaign-period b { color: var(--red-aa); }

.campaign-cards {
  position: relative;
  display: grid;
  gap: clamp(22px, 4vw, 28px);
  max-width: 980px;
  margin: 0 auto clamp(28px, 5vw, 40px);
  padding-top: clamp(48px, 9vw, 56px); /* バーストの上半分のはみ出し分 */
}
@media (min-width: 720px) {
  .campaign-cards { grid-template-columns: repeat(3, 1fr); }
  /* デスクトップは3列になるため、右端置きだとカード③のタグに被る。
     ボーナスの話なのでカード②(いくらもらえる?)の右肩に掛ける。
     左位置は「カード②の右端(=2列分+gap28px) - 星の大部分」を列幅から算出 */
  .campaign-burst {
    top: -34px; /* 上4分の3は黄背景、下4分の1だけカードの肩に乗る(タグと重ねない) */
    right: auto;
    left: calc((100% - 56px) * 2 / 3 + 28px - 88px);
  }
}

/* 「最大450CP還元!」スターバースト(チラシの爆発シール) */
/* カード1枚目の右上フチにまたがるように置く(メダルピンと同じ「貼った」見え方。
   カード内に乗り込みすぎると衝突して見えるので、上下ほぼ半々にする) */
.campaign-burst {
  position: absolute;
  top: 0; /* padding-top(48-56px)のカード上端に対し、96-120pxの星が上下ほぼ半々でまたがる */
  right: clamp(2px, 1.5vw, 12px);
  z-index: 2;
  display: grid;
  place-content: center;
  width: clamp(96px, 20vw, 120px);
  aspect-ratio: 1;
  background: var(--red-aa); /* 白文字で全サイズAA(5.09:1)を確保 */
  clip-path: polygon(50.0% 0.0%, 57.8% 10.8%, 69.1% 3.8%, 72.2% 16.7%, 85.4% 14.6%, 83.3% 27.8%, 96.2% 30.9%, 89.2% 42.2%, 100.0% 50.0%, 89.2% 57.8%, 96.2% 69.1%, 83.3% 72.2%, 85.4% 85.4%, 72.2% 83.3%, 69.1% 96.2%, 57.8% 89.2%, 50.0% 100.0%, 42.2% 89.2%, 30.9% 96.2%, 27.8% 83.3%, 14.6% 85.4%, 16.7% 72.2%, 3.8% 69.1%, 10.8% 57.8%, 0.0% 50.0%, 10.8% 42.2%, 3.8% 30.9%, 16.7% 27.8%, 14.6% 14.6%, 27.8% 16.7%, 30.9% 3.8%, 42.2% 10.8%);
  filter: drop-shadow(0 4px 0 rgba(26, 31, 113, 0.25));
  transform: rotate(8deg);
  font-family: var(--font-pop);
  color: var(--white);
  text-align: center;
  line-height: 1.15;
  animation: burst-pulse 2.2s ease-in-out infinite;
  pointer-events: none;
}
.campaign-burst i { font-style: normal; font-size: clamp(0.62rem, 1.6vw, 0.74rem); }
.campaign-burst b { font-weight: 400; font-size: clamp(1rem, 2.8vw, 1.3rem); color: var(--white); }
@keyframes burst-pulse {
  0%, 100% { transform: rotate(8deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.06); }
}

.campaign-card { text-align: center; overflow: clip; } /* 角三角を角丸内に収める(missionと同じ) */
/* ミッションカードと同じチームカラーの折り返し角(統一感+にぎやかし) */
.campaign-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 34px;
  height: 34px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.cc-aka::before { background: var(--team-aka); }
.cc-ao::before  { background: var(--team-ao); }
.cc-ki::before  { background: var(--team-ki); }
.campaign-card h3 { margin-bottom: 14px; }
.campaign-tag {
  display: inline-block;
  font-family: var(--font-pop);
  font-size: clamp(0.85rem, 3vw, 0.95rem);
  color: var(--navy);
  background: var(--yellow);
  border: 3px solid var(--navy);
  border-radius: 999px;
  padding: 4px 16px;
}

/* 後半戦「追加発表!」の煽りバナー(前半戦の内容はそのまま・下に追加告知として目立たせる) */
.campaign-announce {
  display: inline-block;
  font-family: var(--font-pop);
  font-size: clamp(0.95rem, 3.4vw, 1.15rem);
  color: var(--white);
  background: var(--red-aa);
  border: 3px solid var(--navy);
  border-radius: 999px;
  padding: 6px 22px;
  margin: clamp(40px, 7vw, 56px) 0 12px;
  transform: rotate(-2deg);
}
.campaign-announce b { font-weight: 400; }
.cp-answer {
  font-family: var(--font-pop);
  font-size: clamp(1.05rem, 3.8vw, 1.25rem);
  line-height: 1.5;
  color: var(--navy);
  margin-bottom: 10px;
}
.cp-answer b { font-weight: 400; color: var(--red-aa); }
.cp-answer .cp-num { font-size: 1.7em; }
.cp-sub {
  font-size: clamp(0.8rem, 2.8vw, 0.9rem);
  line-height: 1.8;
}
.cp-sub b { color: var(--red-aa); }

/* こまかいルール(折りたたみ) */
.campaign-details {
  max-width: 760px;
  margin-inline: auto;
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 16px;
  box-shadow: 0 0 0 5px var(--white), 0 5px 0 5px rgba(26, 31, 113, 0.2);
  overflow: clip;
  text-align: left;
}
.campaign-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-weight: 700;
  color: var(--navy);
}
.campaign-details summary::-webkit-details-marker { display: none; }
.campaign-details summary::after {
  content: "▾";
  margin-left: auto;
  transition: transform 0.2s ease;
}
.campaign-details[open] summary::after { transform: rotate(180deg); }
.campaign-details summary:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.campaign-details-body {
  padding: 0 18px 18px;
  font-size: clamp(0.85rem, 3vw, 0.95rem);
  line-height: 1.9;
}
.campaign-details-body p { margin-top: 12px; }
.campaign-details-body a {
  color: var(--blue);
  font-weight: 700;
  text-underline-offset: 3px;
}

.campaign-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
.campaign-table th {
  font-family: var(--font-pop);
  font-weight: 400;
  font-size: clamp(0.8rem, 2.8vw, 0.9rem);
  color: var(--white);
  background: var(--navy);
  padding: 8px 10px;
}
.campaign-table td {
  border: 2px solid rgba(26, 31, 113, 0.25);
  padding: 8px 10px;
}
.campaign-table td b { color: var(--red-aa); }
.campaign-table-max td { background: #FFF7CC; }

/* ============================================================
   TEAMS: チームカラー6色の斜めストライプ(淡色)
   ============================================================ */
#teams {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)),
    repeating-linear-gradient(135deg,
      var(--team-aka) 0 64px,
      var(--team-ao) 64px 128px,
      var(--team-ki) 128px 192px,
      var(--team-midori) 192px 256px,
      var(--team-daidai) 256px 320px,
      var(--team-murasaki) 320px 384px);
  padding-top: clamp(96px, 16vw, 150px);
  text-align: center;
}

/* チーム発表前のフォールバック(吹き出しステッカー風) */
.team-fallback {
  position: relative;
  display: inline-block;
  font-family: var(--font-pop);
  font-size: clamp(1.15rem, 4.6vw, 1.7rem);
  color: var(--navy);
  background: var(--white);
  border: 4px solid var(--navy);
  border-radius: 22px;
  padding: clamp(22px, 5vw, 34px) clamp(28px, 7vw, 56px);
  box-shadow: 0 0 0 7px var(--white), 0 8px 0 7px rgba(26, 31, 113, 0.25);
  transform: rotate(-1.5deg);
  margin-bottom: 10px;
}
.team-fallback::after {
  /* 吹き出しのしっぽ */
  content: "";
  position: absolute;
  bottom: -19px;
  left: 24%;
  width: 26px;
  height: 26px;
  background: var(--white);
  border-right: 4px solid var(--navy);
  border-bottom: 4px solid var(--navy);
  transform: rotate(45deg) skew(12deg, 12deg);
  box-shadow: 6px 6px 0 0 var(--white);
}

.team-fallback[hidden] {
  display: none;
}

/* ---- キャストグリッド: 丸型写真+番号バッジ+名前の3列 ----
   9人チームが3×3で揃うよう常に3列・720px中央寄せ(参照モックと同形)。 */
.cast-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2.6vw, 18px);
  max-width: 720px;
  margin-inline: auto;
}
.cast-grid[hidden] { display: none; }
.cast-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: clamp(16px, 4vw, 24px) 8px clamp(12px, 3vw, 18px);
  font: inherit;
  color: var(--navy);
  text-align: center;
  background: var(--white);
  border: 4px solid var(--navy);
  border-radius: clamp(16px, 3vw, 22px);
  box-shadow: 0 5px 0 rgba(26, 31, 113, 0.25);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cast-card:hover,
.cast-card:focus-visible {
  transform: translateY(-3px);
  outline: 3px solid var(--tc);
  outline-offset: 2px;
}
/* タブ切替で描画されるたびに少しずつ遅れてポップインする(--pop-iはJSがカード連番を渡す)。
   reveal系(.anim-item)のtransitionはhover用transitionを上書きしてしまうため、
   カード個々の出現は独立したanimationで行う(transitionとは競合しない) */
@media (prefers-reduced-motion: no-preference) {
  .cast-card {
    animation: cast-pop 0.5s cubic-bezier(0.22, 1.1, 0.34, 1) backwards;
    animation-delay: calc(var(--pop-i, 0) * 45ms);
  }
  @keyframes cast-pop {
    from { opacity: 0; translate: 0 26px; scale: 0.96; }
  }
}
.cast-card:active { transform: translateY(1px) scale(0.98); }
/* 丸写真はリング(白フチ+チームカラー)込みでカード内に余白が残るサイズに抑える
   (スマホ幅でカードの縁とパツパツにならないように) */
.cast-card img {
  width: clamp(58px, 18.5vw, 104px);
  height: clamp(58px, 18.5vw, 104px);
  border-radius: 50%;
  object-fit: cover;
  background: var(--white);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 3px var(--tc), 0 3px 0 2px rgba(26, 31, 113, 0.25);
}
.cast-card:hover img,
.cast-card:focus-visible img {
  box-shadow: 0 0 0 3px var(--navy), 0 0 0 6px var(--tc), 0 3px 0 2px rgba(26, 31, 113, 0.25);
}
.cast-card-name {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 長い名前(2行)のカードと高さが揃うよう、名前欄は常に2行分確保する */
  min-height: calc(2 * 1.3em);
  font-size: clamp(0.66rem, 2.4vw, 0.82rem);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
/* ---- 全チーム一気見: チームカラーの帯見出し+グリッドを縦に並べる ---- */
.team-all-view {
  display: grid;
  gap: clamp(22px, 4vw, 34px);
  max-width: 720px;
  margin-inline: auto;
}
.team-all-view[hidden] { display: none; }
.team-block-title {
  margin: 0 0 clamp(14px, 3vw, 20px);
  padding: 12px 20px;
  background-color: var(--tc);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.4) 20%, transparent 21%);
  background-size: 12px 12px;
  border: 4px solid var(--navy);
  border-radius: 16px;
  box-shadow: 0 0 0 4px var(--white), 0 6px 0 3px rgba(26, 31, 113, 0.28);
  color: var(--white);
  /* このサイズのMochiy Pop Oneにwebkit-text-strokeを掛けると「組」等の細い画がつぶれるため縁取りは付けない */
  text-align: center;
  font-size: clamp(1.15rem, 4.4vw, 1.5rem);
  line-height: 1.3;
}
/* 黄組は明るい背景に白文字だとコントラスト不足のため紺文字 */
.team-block[style*="#FDD835"] .team-block-title {
  color: var(--navy);
}

/* 番号バッジ(01〜)。左上に重ねるステッカー風 */
.cast-number {
  position: absolute;
  z-index: 1;
  left: clamp(6px, 1.6vw, 10px);
  top: clamp(6px, 1.6vw, 10px);
  display: grid;
  place-items: center;
  width: clamp(26px, 7vw, 34px);
  height: clamp(26px, 7vw, 34px);
  font-family: var(--font-pop);
  font-size: clamp(0.62rem, 2vw, 0.78rem);
  background: var(--yellow);
  border: 2px solid var(--navy);
  border-radius: 50%;
}

/* role(運営リーダー等)バッジ。番号バッジと対にして右上に重ねるステッカー風 */
.cast-role-badge {
  position: absolute;
  z-index: 1;
  right: clamp(6px, 1.6vw, 10px);
  top: clamp(6px, 1.6vw, 10px);
  font-size: clamp(0.55rem, 1.7vw, 0.66rem);
  font-weight: 700;
  color: var(--white);
  background: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1.4;
}

/* ============================================================
   POINTS: ABOUT内のサブブロック(控えめ・ミッション欄と同じ作法)
   ============================================================ */
.about-points {
  margin-top: clamp(48px, 9vw, 80px);
  scroll-margin-top: 72px; /* ナビからのアンカージャンプで固定ヘッダーに隠れない */
}

/* リード(フライヤー: 大差で勝ってもボーナスは同じ→大逆転あり) */
.points-catch {
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.95rem, 3.4vw, 1.15rem);
  line-height: 1.9;
  margin: 0 auto clamp(28px, 5vw, 40px);
  max-width: 640px;
}
.points-catch strong { color: var(--red-aa); }

/* ポイントの式: 各1pt + 順位ボーナス = 合計ptで優勝 */
.points-formula {
  display: grid;
  justify-items: stretch;
  gap: clamp(10px, 2.4vw, 16px);
  max-width: 560px;
  margin: 0 auto clamp(32px, 6vw, 44px);
}
.pf-item,
.pf-total { text-align: center; }
/* ①のミッション行: 「1ミッション=1行」で目標とptが1行で完結する。
   左上の色三角はミッションカード(.card.mission::before)のミニ版 */
.pf-rows {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}
.pf-row {
  position: relative;
  overflow: clip;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 12px;
  padding: 8px 12px;
  text-align: left;
}
.pf-row::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 14px;
  height: 14px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.pf-row.pf-m-aka::before { background: var(--team-aka); }
.pf-row.pf-m-ao::before  { background: var(--team-ao); }
.pf-row.pf-m-ki::before  { background: var(--team-ki); }
.pf-row-icon { font-size: 1.5rem; text-align: center; }
.pf-row-pts {
  font-family: var(--font-pop);
  font-size: clamp(0.85rem, 3.2vw, 1rem);
  color: var(--navy);
}
.pf-row-pts b { font-weight: 400; color: var(--red-aa); }

/* ②の表彰台: 🥈🥇🥉の段差で順位ボーナスを運動会らしい絵にする */
.pf-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.pf-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  width: 86px;
  border: 3px solid var(--navy);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  font-family: var(--font-pop);
  color: var(--navy);
  padding: 6px 4px 8px;
  background: #FFF7CC;
}
.pf-step b { font-weight: 400; color: var(--red-aa); font-size: 1.15rem; }
.pf-step-1 { height: 96px; background: #FFE45C; }
.pf-step-2 { height: 78px; }
.pf-step-3 { height: 64px; background: var(--white); }
.pf-podium-base { border-top: 3px solid var(--navy); margin-top: -1px; }
/* ②カード最下部のミッション名タグ: ミッションカードの枠(左上色三角)のミニ版で
   「この3つそれぞれに表彰台がある」ことを示す */
.pf-mission-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.pf-mtag {
  position: relative;
  overflow: clip;
  display: inline-block;
  font-size: clamp(0.68rem, 2.4vw, 0.78rem);
  font-weight: 700;
  color: var(--navy);
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 10px;
  padding: 3px 10px;
}
.pf-mtag::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 10px;
  height: 10px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.pf-mtag.pf-m-aka::before { background: var(--team-aka); }
.pf-mtag.pf-m-ao::before  { background: var(--team-ao); }
.pf-mtag.pf-m-ki::before  { background: var(--team-ki); }
/* 重点ミッションの2倍告知: ②カードの右上に貼るステッカー(ヒーローのステッカー意匠の親戚) */
.pf-x2sticker {
  position: absolute;
  top: -14px;
  right: -8px;
  z-index: 1;
  transform: rotate(6deg);
  font-family: var(--font-pop);
  font-size: clamp(0.7rem, 2.6vw, 0.8rem);
  line-height: 1.4;
  text-align: center;
  color: var(--white);
  background: var(--red);
  border: 2px solid var(--white);
  border-radius: 12px;
  padding: 6px 10px;
  box-shadow: 0 0 0 2px var(--red), 0 4px 0 rgba(0, 0, 0, 0.18);
}
/* ①②のラベル: ミッションカードの見出しと同じ素のポップ体(バッジにしない) */
.pf-label {
  display: block;
  font-family: var(--font-pop);
  font-size: clamp(1.1rem, 3.8vw, 1.3rem);
  color: var(--navy);
  margin-bottom: 6px;
}
.pf-value {
  font-family: var(--font-pop);
  font-size: clamp(1.3rem, 5vw, 1.8rem);
  color: var(--navy);
  line-height: 1.4;
}
.pf-value b { font-weight: 400; color: var(--red-aa); }
.pf-note {
  font-size: clamp(0.78rem, 2.7vw, 0.88rem);
  line-height: 1.8;
  margin-top: 6px;
}
/* ※注記(タイ・実績0の扱い): 本文より一段小さく・薄くして主張を抑える */
/* 細則(※注記): カードには入れず、セクション末尾にまとめて小さく置く */
.points-fineprint {
  max-width: 560px;
  margin: clamp(14px, 3vw, 20px) auto 0;
  font-size: clamp(0.68rem, 2.3vw, 0.76rem);
  line-height: 1.7;
  color: rgba(26, 31, 113, 0.72);
  font-weight: 400;
  text-align: left;
}
/* ※項目ごとに段落を分け、間に一呼吸の余白を入れる(brの壁より読みやすく) */
.points-fineprint p {
  margin: 0.55em 0 0;
}
/* 「2位＝2pt」等の数値ペアが行頭行末で泣き別れしないようにする */
.points-fineprint .fp-nowrap {
  white-space: nowrap;
}
/* 細則の小見出し: どのカードの補足かを示す */
.points-fineprint .fineprint-title {
  font-weight: 700;
  color: var(--navy);
}
/* 注記内のミッション名強調(黄)。白背景で読めるよう mission-ki の数字と同じ濃い黄を使う */
.points-fineprint .note-mission-ki {
  color: #B8860B;
  font-weight: 700;
}
.pf-op {
  font-family: var(--font-pop);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  color: var(--navy);
  text-align: center;
  line-height: 1;
}
.pf-total { background: #FFF7CC; }
.pf-total-sub {
  font-weight: 700;
  font-size: clamp(0.85rem, 3vw, 0.95rem);
}
.pf-total-main {
  font-family: var(--font-pop);
  font-size: clamp(1.4rem, 5.6vw, 2rem);
  color: var(--red-aa);
  line-height: 1.4;
}

/* 斜めバッジ: 日替わり重点ミッションは順位ボーナス×2 */
.points-note {
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.9rem, 3.2vw, 1.05rem);
  margin-top: clamp(20px, 4vw, 28px);
}
.points-note strong { color: var(--red-aa); }


/* ============================================================
   HALF TIME: 紅白幕(運動会テントの垂れ幕)
   ============================================================ */
/* 昼下がりの学校: #scheduleと同じ空のレシピ+校舎の遠景SVG(紅白幕から変更 2026-08-09) */
#halftime {
  position: relative;
  background:
    radial-gradient(ellipse 130px 46px at 18% 10%, rgba(255, 255, 255, 0.9) 60%, transparent 61%),
    radial-gradient(ellipse 170px 56px at 82% 16%, rgba(255, 255, 255, 0.85) 60%, transparent 61%),
    radial-gradient(ellipse 110px 40px at 55% 6%, rgba(255, 255, 255, 0.8) 60%, transparent 61%),
    linear-gradient(180deg, var(--sky) 0%, #A8DEFF 55%, #D8F1FF 100%);
}
/* 校舎の遠景シーン(SVGはヒーローのステッカーと同じ白フチ+紺線の作法) */
.sc-scene {
  position: relative;
  max-width: 620px;
  margin: 0 auto -6px;
}
.sc-svg {
  display: block;
  width: 100%;
  height: auto;
}
/* 校庭の地面(セクション全幅に伸ばす。body側はoverflow-x:clip対策済み) */
.sc-ground {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  bottom: 0;
  height: 30px;
  background: linear-gradient(180deg, #EFDFAF 0%, #E4CE96 100%);
  border-top: 3px solid rgba(26, 31, 113, 0.25);
  z-index: -1;
}

.halftime-card {
  max-width: 620px;
  margin-inline: auto;
  background: var(--white);
  border: 4px solid var(--navy);
  border-radius: 22px;
  box-shadow: 0 0 0 7px var(--white), 0 8px 0 7px rgba(26, 31, 113, 0.3);
  padding: clamp(26px, 6vw, 44px) clamp(20px, 5vw, 40px);
  text-align: center;
}
.halftime-date {
  font-family: var(--font-pop);
  color: var(--red);
  font-size: clamp(2.2rem, 9vw, 3.6rem);
  line-height: 1.2;
  margin-bottom: 10px;
}
.halftime-date b { font-weight: 400; }
.halftime-date span { font-size: 0.5em; color: var(--navy); }
.halftime-date i {
  font-style: normal;
  display: block;
  font-size: 0.42em;
  color: var(--navy);
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}
.halftime-copy {
  font-weight: 700;
  font-size: clamp(0.95rem, 3.4vw, 1.15rem);
  color: var(--navy);
}

/* クイズの配点チップ(フライヤー: 1位+8pt〜4位以下+2pt) */
.quiz-points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 2vw, 12px);
  margin-top: clamp(18px, 4vw, 26px);
}
.quiz-points li {
  font-family: var(--font-pop);
  font-size: clamp(0.95rem, 3.4vw, 1.15rem);
  color: var(--red-aa);
  background: #F6FFE0;
  border: 3px solid var(--navy);
  border-radius: 12px;
  padding: 6px 14px;
}
.quiz-points b {
  font-weight: 400;
  color: var(--navy);
  margin-right: 0.35em;
}
.quiz-add {
  font-weight: 700;
  font-size: clamp(0.9rem, 3.2vw, 1.05rem);
  color: var(--navy);
  margin-top: clamp(14px, 3vw, 20px);
}
.quiz-note {
  font-size: clamp(0.75rem, 2.6vw, 0.85rem);
  line-height: 1.8;
  color: var(--navy);
  margin-top: clamp(12px, 2.6vw, 18px);
}

/* ============================================================
   SURVIVAL: 濃赤+集中線(緊張感)
   ============================================================ */
/* 夕暮れのグラウンド: 放射光線(当選演出に見える)をやめ、
   夕方の最終競技=決戦の空気にする(2026-08-09) */
#survival {
  position: relative;
  overflow: clip; /* 遠近トラックの変形はみ出しを抑える */
  background:
    /* 夕日 */
    radial-gradient(circle at 74% 20%, #FFF6CE 0 24px, rgba(255, 246, 206, 0.45) 25px 44px, transparent 45px),
    /* たなびく夕雲 */
    radial-gradient(ellipse 150px 30px at 22% 14%, rgba(255, 235, 200, 0.65) 60%, transparent 61%),
    radial-gradient(ellipse 110px 24px at 48% 24%, rgba(255, 224, 180, 0.5) 60%, transparent 61%),
    /* 地平線の照り返し */
    radial-gradient(ellipse 90% 26% at 50% 30%, rgba(255, 214, 130, 0.55) 0%, transparent 70%),
    /* 夕焼けの空 */
    linear-gradient(180deg, #F98A3C 0%, #FFAA55 40%, #FFD489 100%);
  text-align: center;
}
#survival .wrap { position: relative; z-index: 1; }
/* 陸上トラック(背景そのもの): セクションの中に立っているイメージ。
   縦のレーンラインをrotateXで倒し、見出しの下(地平線)から手前へ
   走路が広がるパースを作る。生存ライン=ゴールテープが境目 */
.sv-track {
  position: absolute;
  left: -46%;
  right: -46%;
  bottom: -10px;
  height: 88%;
  background:
    /* 地平線ぎわは夕空に溶かして「遠く」を出す(硬い水平線を作らない) */
    linear-gradient(180deg, rgba(255, 170, 85, 0.95) 0%, rgba(255, 170, 85, 0.4) 10%, transparent 24%),
    /* 奥行きの目盛り(横縞。奥ほど詰まって見える) */
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0 34px, transparent 34px 68px),
    /* レーンライン(縦の白線。パースで奥に収束する) */
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(255, 255, 255, 0.85) 118px 127px),
    linear-gradient(180deg, #C93A32 0%, #BC2222 100%);
  transform: perspective(560px) rotateX(54deg);
  transform-origin: 50% 100%;
  pointer-events: none;
}

.survival-lead {
  display: block; /* .stroke2のinline-blockを打ち消し、カードと横並びにしない */
  font-family: var(--font-pop);
  font-size: clamp(1.5rem, 6.4vw, 2.6rem);
  color: var(--yellow);
  transform: rotate(-2deg);
  margin-bottom: clamp(20px, 4vw, 30px);
  line-height: 1.4;
}
.survival-copy {
  display: inline-block;
  font-weight: 700;
  font-size: clamp(1rem, 3.8vw, 1.3rem);
  color: var(--navy);
  background: var(--white);
  border: 4px solid var(--navy);
  border-radius: 18px;
  padding: clamp(18px, 4vw, 28px) clamp(22px, 6vw, 44px);
  box-shadow: 0 0 0 6px var(--white), 0 7px 0 6px rgba(26, 31, 113, 0.3);
  transform: rotate(1deg);
}
.survival-copy strong { color: var(--red-aa); }

/* ---- 生存ライン: 石灰の白線の上はSAFE、下は白旗で脱落(2026-08-09) ---- */
.sv-field {
  max-width: 560px;
  margin: 0 auto clamp(18px, 4vw, 26px);
  padding: 0 16px;
}
/* ゴールテープ: 切れるか切れないかの境目。両端の支柱に張られた白テープに
   「生存ライン 累積10pt」を書く */
.sv-goaltape {
  position: relative;
  margin: 4px 6px;
  height: clamp(26px, 5.4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(-45deg, rgba(232, 50, 47, 0.16) 0 10px, transparent 10px 20px),
    var(--white);
  border: 3px solid var(--navy);
  border-radius: 6px;
  transform: rotate(-1.2deg);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22);
}
/* テープの両端の支柱 */
.sv-goaltape::before, .sv-goaltape::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 9px;
  height: clamp(48px, 9vw, 56px);
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 5px;
}
.sv-goaltape::before { left: -12px; }
.sv-goaltape::after { right: -12px; transform: rotate(1.5deg); }
.sv-goaltape-label {
  font-family: var(--font-pop);
  font-size: clamp(0.8rem, 3vw, 0.95rem);
  color: var(--red-aa);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.sv-bibs-up, .sv-bibs-down {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 3vw, 18px);
}
.sv-bibs-up { align-items: flex-end; padding-bottom: 6px; }
/* ゼッケン(白いビブス。肩ひもは::before/::after) */
.sv-bib {
  position: relative;
  width: clamp(64px, 17vw, 84px);
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 8px 8px 12px 12px;
  padding: 16px 6px 8px;
  font-family: var(--font-pop);
  text-align: center;
  color: var(--navy);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}
.sv-bib::before, .sv-bib::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 14px;
  height: 10px;
  background: var(--white);
  border: 3px solid var(--navy);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.sv-bib::before { left: 8px; }
.sv-bib::after { right: 8px; }
.sv-bib b {
  display: block;
  font-weight: 400;
  font-size: clamp(1rem, 3.6vw, 1.2rem);
  line-height: 1.1;
}
.sv-bib span {
  display: block;
  font-size: 0.62rem;
  margin-top: 2px;
  letter-spacing: 0.08em;
}
/* 脱落側: 暗転させず「白旗+しょんぼり傾き」で運動会らしい敗退感に */
.sv-bibs-down { padding-top: 14px; align-items: flex-start; }
.sv-bib-out {
  opacity: 0.9;
  transform: rotate(-7deg) translateY(6px);
  background: #EFEFEF;
}
.sv-bib-out2 { transform: rotate(5deg) translateY(13px); }
.sv-whiteflag {
  position: absolute;
  top: -20px;
  right: -10px;
  font-size: 1.1rem;
  transform: rotate(12deg);
}
.sv-stamp {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-family: var(--font-pop);
  font-size: 0.9rem;
  color: var(--red);
  border: 3px solid var(--red);
  border-radius: 6px;
  padding: 1px 8px;
  background: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}
.sv-under {
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  font-size: clamp(0.78rem, 2.8vw, 0.88rem);
  margin-top: 10px;
}

/* ============================================================
   SCHEDULE: 青空×陸上トラックの白レーン
   ============================================================ */
#schedule {
  background:
    /* 雲 */
    radial-gradient(ellipse 130px 46px at 18% 12%, rgba(255, 255, 255, 0.9) 60%, transparent 61%),
    radial-gradient(ellipse 170px 56px at 82% 20%, rgba(255, 255, 255, 0.85) 60%, transparent 61%),
    radial-gradient(ellipse 110px 40px at 55% 7%, rgba(255, 255, 255, 0.8) 60%, transparent 61%),
    /* 青空 */
    linear-gradient(180deg, var(--sky) 0%, #A8DEFF 55%, #D8F1FF 100%);
}
#schedule::after {
  /* 画面下部の陸上トラック(白レーンライン入り) */
  content: "";
  position: absolute;
  left: -5%; right: -5%; bottom: -14px;
  height: clamp(90px, 16vw, 150px);
  background:
    repeating-linear-gradient(100deg,
      transparent 0 72px,
      rgba(255, 255, 255, 0.9) 72px 78px),
    linear-gradient(180deg, var(--red-light), var(--red));
  border-top: 6px solid var(--white);
  transform: skewY(-2deg);
  pointer-events: none;
}
#schedule .wrap { z-index: 1; padding-bottom: clamp(80px, 14vw, 130px); }

.timeline {
  list-style: none;
  max-width: 640px;
  margin-inline: auto;
  display: grid;
  gap: clamp(20px, 4vw, 26px);
  position: relative;
  padding-left: 8px;
}
.timeline::before {
  /* レーンをつなぐ白の破線(トラックのセンターライン) */
  content: "";
  position: absolute;
  top: 20px; bottom: 20px;
  left: clamp(44px, 10vw, 58px);
  border-left: 5px dashed var(--white);
  z-index: 0;
}
.timeline li {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 3vw, 22px);
  position: relative;
  z-index: 1;
}
.tl-date {
  flex: none;
  width: clamp(76px, 17vw, 100px);
  text-align: center;
  font-family: var(--font-pop);
  font-size: clamp(1.05rem, 3.8vw, 1.4rem);
  line-height: 1.25;
  color: var(--red);
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 12px;
  padding: 8px 4px;
  box-shadow: 0 0 0 4px var(--white), 0 4px 0 4px rgba(26, 31, 113, 0.25);
  transform: rotate(-2deg);
}
.tl-date i {
  font-style: normal;
  display: block;
  font-size: 0.62em;
  color: var(--navy);
}
/* 2日またぎのバッジ(DAY5): 幅は他の日と同じにして本文カードの左端を揃える。
   日付(大)→時刻(小)の縦積みで両日付を同じ大きさ・色に(インライン併記ははみ出すためNG) */
.tl-date-span .tl-d {
  display: block;
  line-height: 1.15;
}
.tl-date-span .tl-d + .tl-d {
  margin-top: 4px;
}
.tl-body {
  position: relative; /* DAYステッカーの基準 */
  flex: 1;
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 16px;
  box-shadow: 0 0 0 5px var(--white), 0 5px 0 5px rgba(26, 31, 113, 0.25);
  padding: 14px 18px;
}
/* 各日カードの右上に貼るDAYステッカー(②カードの🔥2倍ステッカーと同系の意匠) */
.tl-day-sticker {
  position: absolute;
  top: -12px;
  right: -6px;
  transform: rotate(6deg);
  font-family: var(--font-pop);
  font-size: clamp(0.7rem, 2.5vw, 0.8rem);
  letter-spacing: 0.06em;
  color: var(--white);
  background: var(--red);
  border: 2px solid var(--white);
  border-radius: 999px;
  padding: 3px 12px;
  box-shadow: 0 0 0 2px var(--red), 0 3px 0 rgba(0, 0, 0, 0.18);
}
.tl-body h3 {
  font-size: clamp(1.05rem, 3.8vw, 1.25rem);
  color: var(--navy);
  margin-bottom: 2px;
}
.tl-body p { font-size: clamp(0.85rem, 3vw, 0.95rem); }
.tl-final .tl-body { background: #FFF7CC; }
.tl-final .tl-body h3 { color: var(--red); }
/* フェーズ色分け: 前半(DAY1-3)=淡青 / 中間(DAY4)=淡赤 / 後半(DAY5-7)=淡黄。
   ミッションの赤青黄と同系の3色で、大会の流れが色で読めるようにする */
.tl-phase1 .tl-body { background: #EAF4FE; }
.tl-phase3 .tl-body { background: #FFF7CC; }
/* DAY4(脱落判定デー): 唯一の淡赤カードで警戒感を出して目立たせる */
.tl-judge .tl-body { background: #FFE9E9; }
.tl-judge .tl-body h3 { color: var(--red); }
/* 中間発表クイズ配信の告知行: 太字ポップ体+赤で単独強調 */
.tl-quiz {
  font-family: var(--font-pop);
  color: var(--red-aa);
  font-size: clamp(0.9rem, 3.2vw, 1.05rem);
  margin-top: 8px;
}

/* ============================================================
   BONUS: キャストイベント特典(自遊空間掲出)
   ============================================================ */
#bonus {
  position: relative; /* 内部の.bonus-trophy/.bonus-sparkをこのセクション基準に固定 */
  background-color: var(--white);
  background-image: radial-gradient(circle, rgba(232, 50, 47, 0.07) 20%, transparent 21%);
  background-size: 18px 18px;
  padding-top: clamp(96px, 16vw, 150px); /* ガーランドの下に余白 */
  text-align: center;
}

/* 賞品感: 浮遊トロフィー(RESULTSと同じfloaty)+スパーク */
.bonus-trophy {
  top: 6%;
  right: 4%;
  transform: none;
  animation: floaty 3s ease-in-out infinite;
}
.bonus-spark-1 { top: 14%; left: 8%; color: var(--yellow); text-shadow: 2px 2px 0 rgba(26, 31, 113, 0.2); }
.bonus-spark-2 { bottom: 18%; right: 10%; color: var(--yellow); text-shadow: 2px 2px 0 rgba(26, 31, 113, 0.2); animation-delay: 1.2s; }

.bonus-lead {
  font-weight: 700;
  font-size: clamp(1rem, 3.8vw, 1.3rem);
  margin-bottom: clamp(32px, 6vw, 48px);
}
.bonus-lead strong { color: var(--red-aa); }

.bonus-cards {
  display: grid;
  gap: clamp(40px, 7vw, 48px); /* メダル(上へ22px+縁取り)がぶつからない間隔 */
  max-width: 880px;
  margin: 26px auto clamp(28px, 5vw, 40px); /* 1枚目のメダルのはみ出し分 */
  text-align: left;
}
.bonus-cards h3 {
  text-align: center;
  font-size: clamp(1.15rem, 4.2vw, 1.4rem);
  margin-bottom: 12px;
}
/* 表彰リボン: カード上辺中央に金/銀メダルを掛けて「賞品」に見せる */
.bonus-win,
.bonus-second { padding-top: 44px; }
.bonus-win::before,
.bonus-second::before {
  position: absolute;
  top: -22px;
  left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 3px solid var(--navy);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--white), 0 4px 0 4px rgba(26, 31, 113, 0.2);
  font-size: 1.3rem;
  line-height: 1;
}
.bonus-win::before { content: "👑"; background: var(--yellow); }
.bonus-second::before { content: "🥈"; background: #E4E7EC; }
.bonus-win { background: #FFF7CC; }
.bonus-win h3 { color: #A8720A; }
.bonus-second { background: #F4F5F7; }
.bonus-second h3 { color: #5B6470; }
.bonus-cards ul {
  list-style: none;
  display: grid;
  gap: 8px;
}
.bonus-cards li {
  position: relative;
  padding-left: 1.2em;
  font-size: clamp(0.9rem, 3.2vw, 1rem);
}
.bonus-cards li::before {
  content: "●";
  position: absolute;
  left: 0;
  font-size: 0.7em;
  top: 0.45em;
}
.bonus-win li::before { color: #A8720A; }
.bonus-second li::before { color: #5B6470; }
.bonus-cards strong { color: var(--red-aa); }
.bonus-second strong { color: var(--navy); }

.bonus-note {
  font-size: clamp(0.8rem, 2.8vw, 0.9rem);
  line-height: 1.9;
  max-width: 720px;
  margin-inline: auto;
}

/* ============================================================
   FAQ: よくある質問(青ドットの白背景+アコーディオン)
   ============================================================ */
#faq {
  background-color: var(--white);
  background-image: radial-gradient(circle, rgba(47, 111, 232, 0.07) 20%, transparent 21%);
  background-size: 18px 18px;
  padding-top: clamp(96px, 16vw, 150px); /* ガーランドの下に余白 */
}

.faq-list {
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  gap: clamp(14px, 3vw, 18px);
}

.faq-item {
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 16px;
  box-shadow: 0 0 0 5px var(--white), 0 5px 0 5px rgba(26, 31, 113, 0.2);
  overflow: clip;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  font-weight: 700;
  font-size: clamp(0.9rem, 3.2vw, 1rem);
  line-height: 1.7;
  color: var(--navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "Q";
  flex: 0 0 auto;
  font-family: var(--font-pop);
  font-size: 0.85rem;
  line-height: 1;
  color: var(--white);
  background: var(--red-aa); /* 白文字×#E8322FはAA僅か未達(root付記参照)のためAA確保色 */
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  margin-top: 0.15em;
}
.faq-item summary::after {
  content: "▾";
  margin-left: auto;
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item summary:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }

.faq-a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 18px 16px;
  font-size: clamp(0.85rem, 3vw, 0.95rem);
  line-height: 1.9;
}
.faq-a::before {
  content: "A";
  flex: 0 0 auto;
  font-family: var(--font-pop);
  font-size: 0.85rem;
  line-height: 1;
  color: var(--white);
  background: var(--blue);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  margin-top: 0.3em;
}

/* ============================================================
   RESULTS: 黄ハーフトーン+優勝カップ
   ============================================================ */
#results {
  background-color: var(--yellow);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.6) 20%, transparent 21%);
  background-size: 14px 14px;
  padding-top: clamp(96px, 16vw, 150px);
  text-align: center;
}
.results-trophy {
  position: static;
  width: clamp(90px, 20vw, 140px);
  margin-bottom: 10px;
  animation: floaty 3s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}
.results-soon {
  font-family: var(--font-pop);
  font-size: clamp(1.7rem, 7vw, 2.8rem);
  color: var(--navy);
  transform: rotate(-2deg);
  margin-bottom: 14px;
}
.results-note {
  display: inline-block;
  font-weight: 700;
  color: var(--navy);
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 999px;
  padding: 8px 24px;
  box-shadow: 0 0 0 4px var(--white), 0 4px 0 4px rgba(26, 31, 113, 0.2);
}

/* ============================================================
   ARCHIVE: 配信アーカイブ・Xで話題になったニュース(2026-08-24運営指示)
   ============================================================ */
#archive {
  text-align: center;
  padding-top: clamp(70px, 12vw, 110px);
}
.archive-subheading {
  font-family: var(--font-pop);
  font-size: clamp(1.1rem, 3.4vw, 1.4rem);
  color: var(--navy);
  margin: 0 0 14px;
}
.archive-subheading span {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  margin-top: 4px;
}
.archive-subheading:not(:first-of-type) { margin-top: 34px; }
.archive-videos {
  display: grid;
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 760px) {
  .archive-videos { grid-template-columns: repeat(2, 1fr); }
}
.archive-video-label {
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
}
.archive-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 3px solid var(--navy);
  border-radius: 18px;
  overflow: hidden;
  background: var(--navy);
  box-shadow: 0 0 0 5px var(--white), 0 5px 0 5px rgba(26, 31, 113, 0.2);
}
.archive-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.archive-news {
  display: grid;
  gap: 18px;
  max-width: 480px;
  margin: 0 auto;
}
.archive-news-card {
  display: block;
  border: 3px solid var(--navy);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 5px var(--white), 0 5px 0 5px rgba(26, 31, 113, 0.2);
  transition: transform 0.15s ease;
}
.archive-news-card img {
  display: block;
  width: 100%;
  height: auto;
}
.archive-news-card:hover,
.archive-news-card:focus-visible {
  transform: translateY(-2px) scale(1.01);
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.archive-news-card:active { transform: translateY(1px) scale(0.99); }

/* ============================================================
   LIVE: 本日の特典達成状況(速報・renderLiveが描画)+参加キャストのX実況
   ============================================================ */
#live {
  background-color: var(--sky);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 20%, transparent 21%);
  background-size: 14px 14px;
  padding-top: clamp(70px, 12vw, 110px);
  text-align: center;
}
.live-lead {
  max-width: 560px;
  margin: 0 auto 22px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.7;
}
.live-unofficial {
  display: inline-block;
  color: var(--red-aa);
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 1px 12px;
}
/* 既知の落とし穴対策: [hidden] を display で必ず上書きさせない */
.live-note[hidden],
.live-soon[hidden],
.live-updated[hidden],
.live-tabgroup[hidden] {
  display: none;
}

/* ---- ブラウザのタブ風UI: 地続きの台紙(.live-tab-panel)にタブが刺さっている見た目 ----
   選択中タブ = 台紙と同じ白+下端ボーダーを消して継ぎ目を消す(=手前・地続き)。
   未選択タブ = 淡色+下端ボーダーを残し、台紙の縁より一段奥に見せる(=背景寄り)。
   これでブラウザの実タブと同じ「選択中が最前面」の力関係になる */
.live-tabgroup { max-width: 960px; margin: 0 auto 40px; }
.live-tab-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 6px;
  padding: 0 4px;
}
/* 総合順位タブの直後に挟む改行スペーサー。flex-basis:100%で強制的に次段へ送る */
.live-tab-break { flex-basis: 100%; height: 0; }
/* ミッション3タブは自動折り返しに任せず、常に同じ段へ均等幅で収める(狭い画面向け) */
@media (max-width: 520px) {
  .live-tab-mission {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 0.68rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.live-tab {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--navy);
  background: color-mix(in srgb, var(--sky) 55%, white);
  border: 3px solid var(--navy);
  border-radius: 14px 14px 0 0;
  padding: 8px 16px;
  cursor: pointer;
  position: relative;
  z-index: 0;
  transition: background 0.15s ease;
}
.live-tab small {
  display: block;
  font-weight: 500;
  font-size: 0.75em;
  opacity: 0.8;
}
.live-tab:hover { background: color-mix(in srgb, var(--sky) 30%, white); }
.live-tab:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
/* 「現在の順位」は金色で特別感を出す(2026-08-16運営要望)。
   タブは選択中も金色を保ち、パネル(ランキング面)の背景も金のグラデにする */
.live-tab-gold {
  background: linear-gradient(180deg, #FFE873 0%, #F7C948 100%);
}
.live-tab-gold:hover { background: linear-gradient(180deg, #FFF0A0 0%, #FFDD66 100%); }
.live-tab-gold[aria-selected="true"] {
  background: linear-gradient(180deg, #FFEfa0 0%, #FFE167 100%);
  border-bottom-color: #FFE998;
}
.live-tab-panel.live-panel-gold {
  background: linear-gradient(180deg, #FFF3C8 0%, #FFE79A 100%);
}
.live-tab[aria-selected="true"] {
  background: var(--white);
  border-bottom-color: var(--white);
  margin-bottom: -3px;
  padding-bottom: 11px;
  z-index: 2;
}
.live-tab-panel[hidden] { display: none; }
.live-tab-panel {
  position: relative;
  z-index: 1;
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 0 18px 18px 18px;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  text-align: left;
  box-shadow: 0 0 0 5px var(--white), 0 5px 0 5px rgba(26, 31, 113, 0.2);
}
@media (min-width: 760px) {
  .live-tab-panel { grid-template-columns: repeat(2, 1fr); }
}

/* ---- 総合順位タブの行(ミッションタブの.live-teamと見た目を揃える) ---- */
.live-team.is-yesterday.is-eliminated { filter: grayscale(1) opacity(0.6); }
.live-y-pt {
  font-family: var(--font-pop);
  font-size: 1.3rem;
  color: var(--navy);
}
.live-y-pt small { font-size: 0.6em; font-weight: 500; margin-left: 2px; }
.live-y-stamp {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--white);
  background: var(--navy);
  border-radius: 999px;
  padding: 1px 8px;
}

/* ---- 中間早押しクイズタブの行(正解数+獲得ptの2枠。ミッションタブの.live-teamと台紙を共有) ---- */
.live-quiz-row {
  display: flex;
  gap: 10px;
}
.live-quiz-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: #E7ECFB;
  border: 1.5px solid var(--navy);
  border-radius: 12px;
  padding: 8px 6px;
  color: var(--navy);
}
.live-quiz-stat b { font-family: var(--font-pop); font-size: 1.3rem; }
.live-quiz-stat small { font-size: 0.7rem; font-weight: 500; opacity: 0.8; }
.live-quiz-stat.is-pt { background: color-mix(in srgb, var(--tc) 18%, white); }

/* 配信アーカイブへのリンクカード(中間発表クイズタブの最後・全チーム分の下)。
   2列グリッドでも常に全幅で出したいので明示的にgrid-column: 1/-1を指定 */
.live-archive-card {
  grid-column: 1 / -1;
  display: block;
  position: relative;
  border: 3px solid var(--navy);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 0 0 5px var(--white), 0 5px 0 5px rgba(26, 31, 113, 0.2);
  transition: transform 0.15s ease;
}
.live-archive-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.live-archive-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 16px 12px;
  background: linear-gradient(0deg, rgba(26, 31, 113, 0.88) 0%, rgba(26, 31, 113, 0) 100%);
  color: var(--white);
  font-family: var(--font-pop);
  font-size: clamp(0.95rem, 3.4vw, 1.1rem);
  text-align: center;
}
.live-archive-card:hover,
.live-archive-card:focus-visible {
  transform: translateY(-2px) scale(1.01);
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.live-archive-card:active { transform: translateY(1px) scale(0.99); }
.live-soon {
  font-family: var(--font-pop);
  font-size: clamp(1.4rem, 6vw, 2.2rem);
  color: var(--navy);
  transform: rotate(-2deg);
  margin-bottom: 12px;
}
.live-note {
  display: inline-block;
  font-weight: 700;
  color: var(--navy);
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 999px;
  padding: 8px 24px;
  box-shadow: 0 0 0 4px var(--white), 0 4px 0 4px rgba(26, 31, 113, 0.2);
  margin-bottom: 40px;
}
.live-team {
  background: var(--white);
  border: 3px solid var(--navy);
  border-top: 8px solid var(--tc);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 0 0 5px var(--white), 0 5px 0 5px rgba(26, 31, 113, 0.2);
}
/* 実数値0=順位対象外(既存の順位ボーナス規則と統一)。判定できるが目立たせすぎない */
.live-team.is-unranked { opacity: 0.75; }
.live-team-head {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.live-rank {
  font-family: var(--font-pop);
  font-size: 0.95rem;
  color: var(--white);
  background: var(--tc);
  border-radius: 999px;
  padding: 3px 12px;
}
.live-rank-1 { background: #FFD400; color: var(--navy); }
.live-rank-2 { background: #C9CFE0; color: var(--navy); }
.live-rank-3 { background: #E0A360; color: var(--navy); }
.live-rank-none {
  background: var(--white);
  color: var(--navy);
  border: 1.5px solid var(--navy);
  opacity: 0.7;
}
.live-team-name {
  flex: 1;
  font-family: var(--font-pop);
  font-size: 1.1rem;
  color: var(--navy);
}
/* キャストの顔アイコンを丸く重ねて表示(mp-boardの.mp-facesと同系統・重なり付き) */
.live-team-faces {
  display: flex;
  width: 100%;
}
.live-team-faces img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1.5px var(--navy);
  background: #eee;
  margin-left: -9px;
}
.live-team-faces img:first-child { margin-left: 0; }
.live-mission-row {
  display: grid;
  grid-template-columns: 1fr auto 22px;
  align-items: center;
  gap: 8px;
  color: var(--navy);
}
.live-bar {
  height: 12px;
  background: #E7ECFB;
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  overflow: hidden;
}
.live-bar-fill {
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--tc);
}
.live-mission-val {
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.live-mission-val small { font-weight: 500; font-size: 0.85em; }
.live-check { font-size: 1rem; text-align: center; }
.live-mission-row.is-cleared .live-mission-val { color: var(--red-aa); }
.live-updated {
  display: block;
  width: fit-content;
  margin: 0 auto 4px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 5px 16px;
}
.live-updated-note {
  font-weight: 500;
  font-size: 0.85em;
  opacity: 0.75;
  margin-left: 6px;
}

/* 本日の重点ミッション(pt2倍)の掲示カード。DAYトラッカーのすぐ下に出す。
   ミッション紹介カード(.card.mission)と同じ意匠: 白カード+左上三角+ミッション色の大文字。
   三角の色は既存の .mission-aka/-ao/-ki ::before ルールをそのまま流用する */
.live-focus {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 14px;
}
.live-focus[hidden] { display: none; }
.live-focus-card {
  display: block;
  position: relative;
  overflow: clip;
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(26, 31, 113, 0.25);
  padding: 0 0 10px;
  text-align: center;
}
/* 見出しは黄色の帯で目立たせる(「本日の重点ミッション」の視認性が最重要・2026-08-16運営要望) */
.live-focus-head {
  display: block;
  background: var(--yellow);
  border-bottom: 2px solid var(--navy);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--navy);
  padding: 6px 24px;
}
/* カード本体(白い面)。三角アクセントは無し(2026-08-16運営判断・ミッション色は名前の文字色で表現) */
.live-focus-body {
  display: block;
  padding: 14px 34px 0;
}
.live-focus-name {
  display: block;
  font-family: var(--font-pop);
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  line-height: 1.3;
  color: var(--navy);
}
.live-focus-card.mission-aka .live-focus-name { color: var(--red-aa); }
.live-focus-card.mission-ao .live-focus-name  { color: var(--blue); }
.live-focus-card.mission-ki .live-focus-name  { color: #B8860B; }
.live-focus-x2 {
  display: block;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--navy);
}
/* 重点ミッションが無い日の告知(例: 中間発表クイズの配信告知)。
   カード自体は既存の重点ミッションカードと共通(ラベルは変えない・2026-08-19運営要望)。
   告知文は「今日はポイント2倍!」より長いため折り返しを許可する */
.live-focus-x2.notice {
  font-family: inherit;
  font-size: clamp(0.85rem, 3.2vw, 1rem);
  font-weight: 700;
  white-space: normal;
}
.live-notice-link {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-pop);
  font-size: clamp(0.95rem, 3.4vw, 1.1rem);
  color: var(--white);
  background: var(--blue);
  text-decoration: none;
  border-radius: 999px;
  padding: 8px 22px;
  border: 3px solid var(--navy);
  box-shadow: 0 4px 0 rgba(26, 31, 113, 0.25);
  transition: transform 0.15s ease;
}
.live-notice-link:hover,
.live-notice-link:focus-visible {
  transform: translateY(-2px) scale(1.02);
  outline: 2px solid var(--white);
  outline-offset: 2px;
}
.live-notice-link:active { transform: translateY(1px) scale(0.99); }
/* 配信開始時刻(live_from)を過ぎたら赤く光らせて「配信中」感を出す */
.live-notice-link.is-live {
  background: var(--red);
  animation: notice-live-pulse 1.6s ease-in-out infinite;
}
@keyframes notice-live-pulse {
  0%, 100% { box-shadow: 0 4px 0 rgba(26, 31, 113, 0.25), 0 0 0 0 rgba(232, 50, 47, 0.5); }
  50% { box-shadow: 0 4px 0 rgba(26, 31, 113, 0.25), 0 0 0 8px rgba(232, 50, 47, 0); }
}

/* 開催日程トラッカー(DAY1〜7)。過去=紺塗り・今日=黄色で強調・未来=薄く */
.cd-day-strip {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 14px;
}
.cd-day-strip[hidden] { display: none; }
.day-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 10px;
  padding: 4px 7px;
  min-width: 46px;
  line-height: 1.2;
  font-family: var(--font-pop);
}
.day-chip b { font-size: 0.72rem; font-weight: 800; }
.day-chip small { font-size: 0.62rem; font-weight: 700; opacity: 0.85; }
.day-chip.is-past {
  background: var(--navy);
  color: var(--white);
  /* is-pastはbutton要素(タップ可能)。span版と見た目を揃えるためデフォルトを打ち消す */
  margin: 0;
  cursor: pointer;
}
.day-chip.is-past:hover { background: #2A3190; }
.day-chip.is-past:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
/* クリックして表示中の日(is-selected): 押しっぱなし状態がわかるよう青枠で強調。
   is-todayの黄色(=開催中の今日)と混同しないよう別の色にする */
.day-chip.is-past.is-selected {
  background: var(--blue);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--blue);
  transform: scale(1.1);
}
.day-chip.is-today {
  background: var(--yellow);
  transform: scale(1.18);
  box-shadow: 0 3px 0 rgba(26, 31, 113, 0.35);
  z-index: 1;
  /* is-todayもbutton要素(タップでライブ表示に戻るタブとして機能する) */
  margin: 0;
  cursor: pointer;
}
.day-chip.is-today:hover { background: #FFE066; }
.day-chip.is-today:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
/* is-todayが選択中(=ライブ表示を見ている)ときも、is-pastの選択枠と同じ青リングで
   示す。背景は黄色のまま(常時表示の「今日」印と選択状態を両方伝える) */
.day-chip.is-today.is-selected {
  box-shadow: 0 3px 0 rgba(26, 31, 113, 0.35), 0 0 0 3px var(--white), 0 0 0 5px var(--blue);
}
.day-chip.is-future { opacity: 0.45; }
/* 「結果発表」チップ(DAY7の隣。最終結果確定後にrenderResultsが追加する) */
.day-chip.is-results {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px var(--yellow);
}
.day-chip.is-results.is-selected {
  background: var(--blue);
  box-shadow: 0 0 0 2px var(--yellow), 0 0 0 5px var(--blue);
  transform: scale(1.1);
}
@media (max-width: 480px) {
  .cd-day-strip { gap: 4px; }
  .day-chip { min-width: 40px; padding: 3px 4px; border-radius: 8px; }
  .day-chip b { font-size: 0.6rem; }
  .day-chip small { font-size: 0.54rem; }
}

/* タブパネル先頭の注釈(総合順位=昨日まで/ミッション=本日ぶん、の区別を明示する)。
   パネルは2列グリッドのため、全幅の帯(grid-column: 1/-1)にしないと注釈が
   1マス目扱いになり1位カードが右へ押し出される */
.live-panel-note {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  opacity: 0.9;
  text-align: center;
  line-height: 2;
}
/* 注釈内の配分表示: 順位はランキングバッジと同じ金銀銅、pt数値は太字で強調 */
.live-panel-note .note-rank {
  display: inline-block;
  font-family: var(--font-pop);
  font-size: 0.9em;
  border-radius: 999px;
  padding: 1px 8px;
  margin: 0 2px;
  color: var(--navy);
}
.live-panel-note .note-rank-1 { background: #FFD400; }
.live-panel-note .note-rank-2 { background: #C9CFE0; }
.live-panel-note .note-rank-3 { background: #E0A360; }
.live-panel-note .note-pt {
  font-weight: 800;
  font-size: 0.95em;
}
/* バッジ+pt数値のペアは途中で改行させない(折り返しは「・」の位置のみ) */
.live-panel-note .note-pair { white-space: nowrap; }

/* ---- 順位カード→チーム表示(メンバー一覧)ドリルダウン ---- */
.live-team[data-team] { cursor: pointer; }
.live-team[data-team]:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 45%, white); }
.live-team[data-team]:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
/* パネル(台紙)を隠して代わりに出すため、台紙と同じ白カードの見た目を持たせる */
.live-team-detail {
  position: relative;
  z-index: 1;
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 0 18px 18px 18px;
  padding: 16px;
}
.live-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.live-detail-back {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--navy);
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
}
.live-detail-back:hover { background: color-mix(in srgb, var(--sky) 30%, white); }
.live-detail-title {
  font-family: var(--font-pop);
  font-size: 1.05rem;
  color: var(--tc, var(--navy));
  -webkit-text-stroke: 0.5px var(--navy);
}
/* DAYチップから過去日の最終結果を開いた時のバナー(戻るボタン+タイトル)。
   .live-detail-head/.live-detail-back/.live-detail-titleと同じ意匠で揃える */
.live-day-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.live-day-banner[hidden] { display: none; }
.live-day-back {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--navy);
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
}
.live-day-back:hover { background: color-mix(in srgb, var(--sky) 30%, white); }
.live-day-title {
  font-family: var(--font-pop);
  font-size: 1rem;
  color: var(--navy);
}
.live-roster {
  display: grid;
  gap: 8px;
}
.live-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 2.5px solid var(--navy);
  border-left: 8px solid var(--tc, var(--navy));
  border-radius: 12px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--font-body);
}
.live-member-row:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 45%, white); }
.live-member-row:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.live-member-row img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  object-fit: cover;
  background: var(--white);
}
.live-cast-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-member-role {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--yellow);
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.live-member-arrow {
  font-weight: 800;
  color: var(--navy);
  opacity: 0.6;
}
/* チーム表示のメンバー行はキャストグリッドと同じ流儀で連番遅延ポップイン */
@media (prefers-reduced-motion: no-preference) {
  .live-member-row {
    animation: cast-pop 0.45s cubic-bezier(0.22, 1.1, 0.34, 1) backwards;
    animation-delay: calc(var(--pop-i, 0) * 40ms);
  }
}
/* チーム公式Xリストへのリンク(チーム表示の下部) */
.live-x-list {
  margin-top: 12px;
  text-align: center;
}
.live-x-list a {
  display: inline-block;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--white);
  background: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 7px 20px;
  text-decoration: none;
}
.live-x-list a:hover { background: #2A3190; }

.live-x-title {
  font-family: var(--font-pop);
  font-size: clamp(1.1rem, 3.4vw, 1.4rem);
  color: var(--navy);
  margin-bottom: 14px;
}
.live-x-title span {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  margin-top: 4px;
}
.live-x-embed {
  max-width: 480px;
  margin: 0 auto;
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 5px 0 rgba(26, 31, 113, 0.2);
}
/* widgets.jsが未読込/失敗のときは元の<a>が残る。ボタン状に見せてリンクとして機能させる */
.live-x-embed a.twitter-timeline {
  display: block;
  font-weight: 700;
  color: var(--navy);
  padding: 30px 10px;
}
.live-x-fallback {
  margin-top: 14px;
  font-weight: 700;
}
.live-x-fallback a { color: var(--navy); }

/* ============================================================
   BACKSTAGE: アプリ紹介+DL導線(運営判断 2026-08-11)
   #resultsの黄色の後は白ドットで落ち着かせ、ページの締めにする
   ============================================================ */
#backstage {
  background-color: var(--white);
  background-image: radial-gradient(circle, rgba(47, 111, 232, 0.07) 20%, transparent 21%);
  background-size: 18px 18px;
  padding-top: clamp(96px, 16vw, 150px); /* ガーランドの下に余白 */
}

.backstage-panel {
  max-width: 760px;
  margin-inline: auto;
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 16px;
  box-shadow: 0 0 0 5px var(--white), 0 5px 0 5px rgba(26, 31, 113, 0.2);
  padding: clamp(24px, 6vw, 44px);
}

.backstage-logo {
  display: block;
  width: min(300px, 72%);
  height: auto;
  margin: 0 auto clamp(20px, 4vw, 28px);
}

.backstage-panel p {
  font-size: clamp(0.9rem, 3.2vw, 1rem);
  margin-bottom: 1em;
}

.backstage-catch {
  font-weight: 700;
}

.backstage-stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: clamp(20px, 4vw, 28px);
}

.store-badge {
  display: block;
  transition: transform 150ms ease;
}
.store-badge:hover { transform: translateY(-3px); }
.store-badge:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
  border-radius: 8px;
}
.store-badge img {
  display: block;
  height: 56px;
  width: auto;
}

/* ---- 公式リンク集(X・公式HP・採用情報など。ルキチャレVol13と同内容) ---- */
.backstage-links {
  max-width: 760px;
  margin: clamp(20px, 4vw, 28px) auto 0;
  display: grid;
  gap: 10px;
}
.backstage-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 12px;
  box-shadow: 0 0 0 4px var(--white), 0 4px 0 4px rgba(26, 31, 113, 0.15);
  color: var(--navy);
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(0.85rem, 3vw, 0.95rem);
  transition: transform 150ms ease;
}
.backstage-links a:hover { transform: translateY(-2px); }
.backstage-links a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.bs-link-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
}
.bs-link-ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 7px;
}
.bs-link-ico--svg svg {
  width: 24px;
  height: 24px;
  fill: var(--navy);
}
.bs-link-txt { line-height: 1.5; }

/* ============================================================
   フッター
   ============================================================ */
footer {
  position: relative;
  overflow: clip;
  background: var(--white);
  text-align: center;
  padding: 90px 20px 40px;
  font-family: var(--font-pop);
  font-size: 0.85rem;
  color: var(--navy);
}

/* ============================================================
   キャストプロフィールモーダル(Task M2 → EVO風の角丸ポップアップ)
   スマホ=100dvw×100dvh完全テイクオーバー・PC(720px〜)=90vw/90vh級の大型センターカード
   世界観: チームカラーの放射バースト+ハーフトーン(pv-preview-03踏襲)。EVOの黒×金は持ち込まず
   青春・アツさ・POPのまま「大きく・ドラマチックに」を実現する
   ============================================================ */
#cast-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  /* モバイルでも全画面にせず、オーバーレイの余白を残してポップアップ感を出す */
  padding: clamp(14px, 4vw, 40px);
}
/* 既知の落とし穴対策: [hidden] を display で必ず上書きさせない */
#cast-modal[hidden] {
  display: none;
}

.cast-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 31, 113, 0.7);
}

/* ---- ダイアログ本体: 角丸カードのポップアップ ----
   モバイルも全画面にせず、角丸+紺ボーダー+白リングでオーバーレイから浮かせる。
   背景はチームカラーの放射バースト(::before)+ハーフトーン(::after)を全面に敷く。
   color-mix()未対応の古いブラウザでは::beforeの背景宣言ごと無効になり、
   base の background-color(var(--tc))だけが残るフォールバックになる */
/* 背景(放射バースト+ハーフトーン)はダイアログ自身のbackgroundで敷く。
   疑似要素の絶対配置だとスクロールコンテナ内でコンテンツと一緒に流れ、
   下部が地色だけの無地になって「柄が見切れる」ため。
   background-attachment: scroll(既定)なので、スクロールしても柄は常に見える範囲を埋める */
.cast-modal-dialog {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--tc, var(--red));
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.22) 20%, transparent 21%),
    repeating-conic-gradient(from 0deg at 50% 34%,
      rgba(255, 255, 255, 0.16) 0deg 12deg, transparent 12deg 24deg);
  background-size: 16px 16px, 100% 100%;
  background-position: 0 0, center top;
  background-repeat: repeat, no-repeat;
  border-radius: clamp(22px, 6vw, 40px);
  border: 4px solid var(--navy);
  box-shadow: 0 0 0 5px var(--white), 0 24px 60px rgba(0, 0, 0, 0.4);
  animation: cm-zoom-in 0.36s cubic-bezier(0.22, 1.1, 0.34, 1) both;
}
@keyframes cm-zoom-in {
  from { transform: scale(0.72); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ✕はカード右上に貼り付け(sticky)。カード内スクロールしても常に見え、
   タップ44px以上を保証。オーバーレイタップ・Escでも閉じられる */
.cast-modal-close {
  position: sticky;
  top: 12px;
  display: block;
  margin: 12px 12px -60px auto; /* 下マージンで自身の高さを打ち消し、本文のレイアウトに影響させない */
  z-index: 3;
  min-width: 48px;
  min-height: 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid var(--navy);
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-pop);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--white), 0 4px 0 rgba(26, 31, 113, 0.35), 0 6px 18px rgba(0, 0, 0, 0.25);
}
.cast-modal-close:hover,
.cast-modal-close:focus-visible {
  background: var(--yellow);
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
.cast-modal-close:active { transform: translateY(1px); }

.cast-modal-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(10px, 2.2vw, 16px);
  /* 上は✕ボタン(48px+マージン)ぶんを確保 */
  padding: clamp(66px, 14vw, 90px) clamp(20px, 6vw, 44px) clamp(28px, 6vw, 48px);
}

/* ---- 立ち絵: 主役として画面の40〜50%程度の高さ。白フチ+紺アウトラインのステッカー風は維持 ---- */
.cast-modal-portrait {
  position: relative;
  flex: none;
  width: clamp(220px, 46vh, 420px);
  height: clamp(220px, 46vh, 420px);
  border-radius: 50%;
  background: #FFF7CC;
  border: 6px solid var(--navy);
  box-shadow:
    0 0 0 7px var(--white),
    0 0 0 13px var(--tc, var(--yellow)),
    0 10px 0 8px rgba(26, 31, 113, 0.3),
    0 18px 44px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(4px, 1.4vw, 10px);
}
.cast-modal-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--white);
}
.cast-modal-spark {
  position: absolute;
  z-index: 2;
}
.cast-modal-spark.cm-spark-1 { top: -6%; left: -8%; }
.cast-modal-spark.cm-spark-2 { bottom: -2%; right: -10%; animation-delay: 1.1s; }

/* ---- 立ち絵モード(.has-portrait): teams.json の portrait がある場合。
   円形クロップをやめ、透過PNGの縦長立ち絵をそのまま主役にする。
   立ち絵が無いキャストは従来の円形ステッカー風のまま(220pxサムネを引き伸ばさない) ---- */
.cast-modal-body.has-portrait .cast-modal-portrait {
  width: 100%;
  max-width: 100%;
  height: clamp(240px, 45dvh, 520px);
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: hidden; /* portrait_styleで拡大した分は枠で切る(装飾スパークのはみ出しも同時に抑止) */
}
/* 横長・正方形の立ち絵でもcontainでレターボックスさせ、はみ出しを防ぐ */
.cast-modal-body.has-portrait .cast-modal-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  /* 白フチの代わりに、チームカラー背景から立ち絵を浮かせる影 */
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35));
}

.cast-modal-info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.2vw, 16px);
  width: 100%;
  max-width: 640px;
}

.cast-modal-team-badge {
  display: inline-block;
  font-family: var(--font-pop);
  font-size: clamp(0.85rem, 2.6vw, 1.05rem);
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: var(--white);
  background: var(--navy);
  border: 3px solid var(--white);
  border-radius: 999px;
  padding: 6px 22px;
  box-shadow: 0 0 0 3px var(--tc, var(--navy)), 0 4px 0 rgba(0, 0, 0, 0.2);
  transform: rotate(-2deg);
}

/* role(運営リーダー等・任意)。チームバッジの直後に控えめな縁取りのみのピルで添える */
.cast-modal-role-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: clamp(0.7rem, 2.2vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--navy);
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 3px 14px;
}

/* ---- 名前: EVOの「本気」級の存在感。既存.stroke2(紺→白の二重縁取り)を継承する ----
   縁の太さはem指定(=文字サイズに追従)。fontはclampで画面幅により2.2rem〜4.4remまで
   変動するため、px固定だと小さい画面側で縁が相対的に太くなりすぎ、画数の多い字が
   つぶれて見える不具合があった(海鈴なぎ 等)。基準の.stroke2(9px/4px相当)より
   縁自体を細くしないと、最大サイズでも密な画の字はつぶれて見えたため0.06em/0.028emに調整 */
.cast-modal-name {
  font-size: clamp(2.2rem, 11vw, 4.4rem);
  color: var(--white);
  line-height: 1.25;
  word-break: break-word;
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.18));
}
.cast-modal-name.stroke2::before {
  -webkit-text-stroke-width: 0.06em;
  text-shadow: 0.02em 0.02em 0 var(--navy), -0.02em 0.02em 0 var(--navy), 0.02em -0.02em 0 var(--navy), -0.02em -0.02em 0 var(--navy);
}
.cast-modal-name.stroke2::after {
  -webkit-text-stroke-width: 0.028em;
}

/* ---- 意気込み: 吹き出し風(pointsセクションの吹き出しと同じ作法) ---- */
.cast-modal-comment {
  position: relative;
  font-weight: 700;
  font-size: clamp(1rem, 3.4vw, 1.2rem);
  color: var(--navy);
  background: var(--white);
  border: 4px solid var(--navy);
  border-radius: 22px;
  box-shadow: 0 0 0 6px var(--white), 0 8px 0 6px rgba(0, 0, 0, 0.22);
  padding: clamp(18px, 4vw, 26px) clamp(20px, 5vw, 30px);
  width: 100%;
  margin-top: 4px;
  white-space: pre-line; /* フォーム回答の意気込みは改行込みで書かれているため、改行を潰さず表示する */
}
/* 吹き出しのしっぽ(立ち絵の方を向く): ナビ色の三角(大)+白の三角(小)を
   重ねて縁取り付きの三角にする(rotate/skewより誤差の出ない定番手法) */
.cast-modal-comment::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid var(--navy);
}
.cast-modal-comment::after {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 14px solid var(--white);
}

.cast-modal-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: clamp(6px, 1.6vw, 12px);
}
.cast-modal-links a {
  display: block;
  font-family: var(--font-pop);
  font-size: clamp(1rem, 3.8vw, 1.2rem);
  text-decoration: none;
  border-radius: 999px;
  padding: clamp(14px, 3.6vw, 18px) 22px;
  min-height: 44px;
  border: 4px solid var(--navy);
  box-shadow: 0 0 0 4px var(--white), 0 6px 0 rgba(0, 0, 0, 0.28);
  transition: transform 0.15s ease;
}
.cast-modal-links a:hover,
.cast-modal-links a:focus-visible {
  transform: translateY(-2px) scale(1.02);
  outline: 3px solid var(--white);
  outline-offset: 2px;
}
.cast-modal-links a:active { transform: translateY(1px) scale(0.99); }
.cast-modal-link-app {
  color: var(--white);
  background: var(--red);
}
.cast-modal-link-x {
  color: var(--navy);
  background: var(--white);
}
.cast-modal-link-free {
  color: var(--white);
  background: var(--blue);
}

body.cast-modal-open,
body.nav-open {
  overflow: hidden;
}

@media (min-width: 720px) {
  #cast-modal {
    padding: clamp(16px, 4vw, 40px);
  }
  .cast-modal-dialog {
    width: 92vw;
    height: 90vh;
    max-width: 1080px;
    max-height: 900px;
    border-radius: 40px;
    border: 6px solid var(--navy);
    box-shadow: 0 0 0 8px var(--white), 0 24px 60px rgba(0, 0, 0, 0.4);
  }
  /* EVO風2カラム: 左=立ち絵(または円形)・右=バッジ/名前/意気込み/リンク。
     縦積み(モバイル)のflexからgridへ切り替える */
  .cast-modal-body {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    justify-items: center;
    column-gap: clamp(24px, 4vw, 48px);
    text-align: left;
    padding: clamp(20px, 3vw, 36px) clamp(32px, 5vw, 64px);
  }
  .cast-modal-portrait {
    width: clamp(180px, 32vh, 300px);
    height: clamp(180px, 32vh, 300px);
    margin-bottom: 0;
  }
  /* 立ち絵はダイアログ(90vh)から✕ボタン・余白を引いた高さまで大きく */
  .cast-modal-body.has-portrait .cast-modal-portrait {
    height: min(72vh, 680px);
  }
  .cast-modal-info {
    align-items: flex-start;
    text-align: left;
  }
  /* 吹き出しのしっぽを上向き→左向き(立ち絵の方)に付け替える */
  .cast-modal-comment::before {
    top: 26px;
    left: -20px;
    transform: none;
    border-left: none;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 20px solid var(--navy);
  }
  .cast-modal-comment::after {
    top: 30px;
    left: -13px;
    transform: none;
    border-left: none;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 14px solid var(--white);
  }
  /* リンクは右カラム内で縦積み(左揃え) */
  .cast-modal-links {
    flex-direction: column;
    align-items: stretch;
    max-width: 420px;
  }
  .cast-modal-links a { text-align: center; }
}

/* ============================================================
   オープニング: ローディング→青空の幕が上へ上がる
   main.jsのsetupOpening()が進捗を刻み、完了で.is-openを付与→ノード削除。
   reduce設定時はJS側で演出せず即削除する
   ============================================================ */
#opening {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* 青空+雲(#scheduleと同じ空の作法)。屋外グラウンドの空気感 */
  background:
    radial-gradient(ellipse 120px 42px at 12% 14%, rgba(255, 255, 255, 0.9) 60%, transparent 61%),
    radial-gradient(ellipse 160px 54px at 39% 30%, rgba(255, 255, 255, 0.85) 60%, transparent 61%),
    radial-gradient(ellipse 150px 50px at 65% 10%, rgba(255, 255, 255, 0.88) 60%, transparent 61%),
    radial-gradient(ellipse 110px 40px at 88% 24%, rgba(255, 255, 255, 0.8) 60%, transparent 61%),
    radial-gradient(ellipse 130px 44px at 24% 56%, rgba(255, 255, 255, 0.7) 60%, transparent 61%),
    radial-gradient(ellipse 100px 36px at 78% 50%, rgba(255, 255, 255, 0.7) 60%, transparent 61%),
    linear-gradient(180deg, var(--sky) 0%, #A8DEFF 55%, #D8F1FF 100%);
  transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
}
#opening.is-open { transform: translateY(-103%); }

.opening-loader {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transition: opacity 0.25s ease;
}
#opening.is-open .opening-loader { opacity: 0; }
.opening-logo {
  width: min(60vw, 260px);
  height: auto;
  filter: drop-shadow(0 5px 0 rgba(26, 31, 113, 0.25));
  animation: opening-throb 1.2s ease-in-out infinite;
}
@keyframes opening-throb {
  0%, 100% { scale: 1; }
  50% { scale: 1.05; }
}
.opening-text {
  font-family: var(--font-pop);
  font-size: clamp(0.85rem, 3vw, 1.05rem);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--white);
  background: var(--navy);
  border-radius: 999px;
  padding: 6px 22px;
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--navy);
}
/* 下部の芝生+白レーン(アウトドア感) */
.opening-ground {
  position: absolute;
  left: -5%; right: -5%; bottom: -12px;
  height: clamp(70px, 12vh, 120px);
  background:
    repeating-linear-gradient(100deg,
      transparent 0 64px,
      rgba(255, 255, 255, 0.85) 64px 70px),
    linear-gradient(180deg, #58B94C, #3E9C43);
  border-top: 5px solid var(--white);
  transform: skewY(-2deg);
  pointer-events: none;
}

/* 進捗バー=トラック。ランナーが%に合わせて走る */
.opening-track-wrap {
  position: relative;
  width: min(420px, 72vw);
}
.opening-runner {
  position: absolute;
  bottom: calc(100% - 8px);
  left: 0;
  width: 58px;
  height: 58px;
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 0 rgba(26, 31, 113, 0.25));
  animation: runner-bob 0.34s ease-in-out infinite;
}
/* 開催日以降のSDイラスト版は少し大きめ(setupOpeningが切り替える) */
.opening-runner-img {
  width: 74px;
  height: auto;
}
.opening-runner[hidden] { display: none; }
@keyframes runner-bob {
  0%, 100% { translate: 0 0; rotate: 2deg; }
  50% { translate: 0 -5px; rotate: -3deg; }
}
/* 脚を腰(46,58)を軸に前後へ振る(SVG版のみ) */
.opening-runner .r-leg-f,
.opening-runner .r-leg-b {
  transform-box: view-box;
  transform-origin: 46px 58px;
  animation: runner-legs 0.34s ease-in-out infinite;
}
.opening-runner .r-leg-b { animation-delay: -0.17s; }
@keyframes runner-legs {
  0%, 100% { transform: rotate(14deg); }
  50% { transform: rotate(-18deg); }
}
.opening-track {
  width: 100%;
  height: 24px;
  padding: 4px;
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 999px;
  box-shadow: 0 0 0 4px var(--white), 0 4px 0 4px rgba(26, 31, 113, 0.25);
  overflow: hidden;
}
.opening-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: repeating-linear-gradient(135deg,
    var(--yellow) 0 14px,
    #FFE45C 14px 28px);
  border: 2px solid var(--navy);
  box-sizing: border-box;
}
.opening-percent {
  font-family: var(--font-pop);
  font-size: 1rem;
  color: var(--navy);
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 999px;
  padding: 2px 16px;
  box-shadow: 0 3px 0 rgba(26, 31, 113, 0.25);
}
.opening-sub {
  font-family: var(--font-pop);
  font-size: clamp(0.8rem, 2.8vw, 0.95rem);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: var(--navy);
}
.op-spark-1 { top: 20%; left: 14%; }
.op-spark-2 { top: 30%; right: 12%; animation-delay: 0.8s; }
.op-spark-3 { bottom: 22%; left: 22%; animation-delay: 1.6s; }

/* ---- 紙吹雪(扉オープン時にJSが生成・約3.5秒で撤去) ---- */
.opening-confetti {
  position: fixed;
  inset: 0;
  z-index: 150;
  overflow: hidden;
  pointer-events: none;
}
.opening-confetti span {
  position: absolute;
  top: -6vh;
  width: 10px;
  height: 16px;
  border-radius: 2px;
  border: 2px solid rgba(26, 31, 113, 0.35);
  animation: confetti-fall linear both;
}
.opening-confetti span:nth-child(odd) {
  width: 15px;
  height: 9px;
  border-radius: 999px;
}
@keyframes confetti-fall {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(115vh) translateX(-9vw) rotate(680deg); opacity: 0; }
}
.opening-confetti span:nth-child(3n) {
  animation-name: confetti-fall-r;
}
@keyframes confetti-fall-r {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(115vh) translateX(9vw) rotate(-620deg); opacity: 0; }
}

/* ---- 扉が開いた後の「集合」アニメーション ----
   body.opening-play が付いたらヒーローの各要素が四方から飛んできて集合する。
   既存のtransform(回転)と衝突しないよう、独立プロパティtranslate/scaleのみ動かす。
   reduce設定時はopening-play自体を付けないが、メディアクエリでも二重に防ぐ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fly-in {
    from { opacity: 0; translate: var(--fx, 0) var(--fy, 30vh); scale: 0.5; }
    to   { opacity: 1; translate: 0 0; scale: 1; }
  }
  @keyframes logo-pop {
    0%   { opacity: 0; translate: 0 7vh; scale: 0.3; }
    70%  { opacity: 1; translate: 0 -8px; scale: 1.08; }
    100% { opacity: 1; translate: 0 0; scale: 1; }
  }
  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  body.opening-play .sticker-flag      { --fx: -45vw; --fy: -30vh; animation: fly-in 0.7s cubic-bezier(0.22, 1.1, 0.34, 1) 0.30s both; }
  body.opening-play .sticker-megaphone { --fx: 45vw;  --fy: -30vh; animation: fly-in 0.7s cubic-bezier(0.22, 1.1, 0.34, 1) 0.42s both; }
  body.opening-play .sticker-trophy    { --fx: -45vw; --fy: 30vh;  animation: fly-in 0.7s cubic-bezier(0.22, 1.1, 0.34, 1) 0.54s both; }
  body.opening-play .sticker-cone      { --fx: 45vw;  --fy: 30vh;  animation: fly-in 0.7s cubic-bezier(0.22, 1.1, 0.34, 1) 0.66s both; }
  body.opening-play .hero-logo   { animation: logo-pop 0.75s cubic-bezier(0.22, 1.1, 0.34, 1) 0.15s both; }
  body.opening-play .hero-sub    { --fx: 0; --fy: -10vh; animation: fly-in 0.55s cubic-bezier(0.22, 1.1, 0.34, 1) 0.55s both; }
  body.opening-play .hero-battle { --fx: 0; --fy: 8vh; animation: fly-in 0.55s cubic-bezier(0.22, 1.1, 0.34, 1) 0.62s both; }
  body.opening-play .hero-period { --fx: 0; --fy: 9vh; animation: fly-in 0.55s cubic-bezier(0.22, 1.1, 0.34, 1) 0.70s both; }
  body.opening-play .hero-copy   { --fx: 0; --fy: 7vh; animation: fly-in 0.55s cubic-bezier(0.22, 1.1, 0.34, 1) 0.85s both; }
  body.opening-play .hero-scroll {
    animation:
      fade-in 0.5s ease 1.05s both,
      bounce 1.6s ease-in-out 1.55s infinite;
  }
}

/* 読込中は背面のスクロールを止める(JSが付与し、扉オープン時に外す) */
body.opening-lock { overflow: hidden; }

/* ============================================================
   固定ヘッダー+ハンバーガーメニュー
   カウントダウンセクションを通過したらスライドイン(main.jsが.is-visibleを付与)
   ============================================================ */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 3px solid var(--navy);
  box-shadow: 0 4px 0 rgba(26, 31, 113, 0.15);
  transform: translateY(-110%);
  visibility: hidden;
  transition: transform 0.35s ease, visibility 0s linear 0.35s;
}
#site-header.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.35s ease;
}
.site-header-logo { display: block; line-height: 0; }
.site-header-logo img {
  display: block;
  height: clamp(36px, 7vw, 46px);
  width: auto;
}

/* ハンバーガーボタン(開くと✕に変形) */
.nav-toggle {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 3px solid var(--navy);
  background: var(--yellow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(26, 31, 113, 0.25);
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: var(--white);
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
.nav-toggle:active { transform: translateY(1px); }
.nav-toggle-bar {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ドロワーメニュー(右からスライドイン・黄ハーフトーンの世界観) */
#site-nav {
  position: fixed;
  inset: 0;
  z-index: 50;
}
#site-nav[hidden] { display: none; }
.site-nav-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 31, 113, 0.55);
}
.site-nav-panel {
  position: absolute;
  top: 0; right: 0;
  height: 100dvh;
  width: min(340px, 84vw);
  overflow-y: auto;
  background-color: var(--yellow);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.6) 20%, transparent 21%);
  background-size: 14px 14px;
  border-left: 4px solid var(--navy);
  box-shadow: -8px 0 24px rgba(26, 31, 113, 0.3);
  padding: calc(76px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom));
  animation: nav-slide-in 0.28s ease both;
}
@keyframes nav-slide-in {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.site-nav-list {
  list-style: none;
  display: grid;
  gap: 14px;
}
.site-nav-list a {
  display: block;
  font-family: var(--font-pop);
  font-size: 1.05rem;
  color: var(--navy);
  text-decoration: none;
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 14px;
  padding: 10px 18px;
  box-shadow: 0 4px 0 rgba(26, 31, 113, 0.25);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.site-nav-list a:hover,
.site-nav-list a:focus-visible {
  transform: translateY(-2px);
  background: #FFF7CC;
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
.site-nav-list a:active { transform: translateY(1px); }
.nav-en {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  color: var(--red-aa);
}

/* ============================================================
   スクロール連動の出現アニメーション
   main.jsがIntersectionObserverで .anim-item / .anim-in を付与する。
   JS無効・IO未対応・reduce設定時はクラス自体を付けないので常に表示される。
   transformは既存の回転デザインと衝突するため、独立プロパティの
   translate / scale を使う(未対応ブラウザではopacityのみ効く)
   ============================================================ */
.anim-item {
  opacity: 0;
  translate: 0 26px;
  scale: 0.96;
  transition:
    opacity 0.55s ease,
    translate 0.6s cubic-bezier(0.22, 1.1, 0.34, 1),
    scale 0.6s cubic-bezier(0.22, 1.1, 0.34, 1);
}
.anim-item.anim-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* ============================================================
   レスポンシブ(PC幅)
   ============================================================ */
@media (min-width: 720px) {
  .mission-cards { grid-template-columns: repeat(3, 1fr); }
  .bonus-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   アニメーションを減らす設定の尊重
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-scroll, .spark, .results-trophy { animation: none; }
  .live-notice-link.is-live { animation: none; }
  .bonus-trophy, .campaign-burst { animation: none; }
  .cast-modal-dialog { animation: none; }
  .site-nav-panel { animation: none; }
  #site-header { transition: none; }
  #opening { transition: none; }
  .opening-logo { animation: none; }
  .opening-runner,
  .opening-runner .r-leg-f,
  .opening-runner .r-leg-b { animation: none; }
  /* 念のためのCSS側ガード(JS側でもreduce時はクラスを付けない) */
  .anim-item {
    opacity: 1;
    translate: none;
    scale: none;
    transition: none;
  }
}

/* ---- 結果ボード(renderResultsが描画・#resultsとカウントダウン欄で共用) ----
   案F: 矢羽根バナー(白リング+紺縁)をヘッダーに、白パネルでキャストの顔+
   芝生レーンを走る鉢巻ランナー(累計pt)+日別ptをぶら下げるチームブロック */
#results .results-note[hidden],
#results .results-soon[hidden] {
  display: none;
}
/* RESULTSセクションは一時非表示(結果はカウントダウン欄に表示するため。
   復活させるときはこのルールを消し、ナビの結果発表リンクを戻す) */
#results {
  display: none;
}
.mp-board {
  max-width: 720px;
  margin: 6px auto 22px;
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 22px;
  padding: 8px 22px 14px;
  box-shadow: 0 5px 0 rgba(26, 31, 113, 0.25);
  text-align: left;
}
#results .results-board {
  margin-bottom: 26px;
}
#countdown .cd-standings.mp-board {
  margin-top: 24px;
  box-shadow: 0 0 0 4px var(--white), 0 5px 0 4px rgba(26, 31, 113, 0.3);
}
/* カウントダウン欄の一番上に速報(renderLiveがcd-standingsと同じ方式でミラー) */
#countdown .cd-live-updated.live-updated {
  margin: 20px auto 0;
}
#countdown .cd-live-tabgroup.live-tabgroup {
  margin: 12px auto 0;
}
.mp-board .mp-row { margin: 20px 0; }
/* 結果ボードの下に残すLIVE表示(①②③タブ)。上に区切り線を入れて
   総合順位の一覧とひと目で区別できるようにする(2026-08-24運営指示) */
.mp-board .cd-result-live {
  margin: 12px 0 4px;
  padding-top: 20px;
  border-top: 3px dashed var(--navy);
}
/* DAYごとの切替ピル(見た目はcd-day-stripの.day-chipを踏襲。ただしis-past/is-today/
   is-resultsと同じ状態クラスは使わず、ここ専用のクリック配線と衝突しないようにする) */
.mp-board .cd-result-live-daypick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 24px 0 0;
}
.mp-board .rlive-day-btn {
  background: var(--navy);
  color: var(--white);
  cursor: pointer;
}
.mp-board .rlive-day-btn:hover { background: #2A3190; }
.mp-board .rlive-day-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.mp-board .rlive-day-btn.is-selected {
  background: var(--blue);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--blue);
  transform: scale(1.1);
}
/* 結果ボード内の別枠に置く個人(キャスト単体)ランキング(2026-08-24運営指示)。
   囲み枠を1段足して「チーム結果とは別枠」であることを見た目でも示す */
.mp-board .ip-board {
  margin: 24px 0 4px;
  padding: 18px 12px 14px;
  border: 3px solid var(--navy);
  border-radius: 18px;
  background: #F5F6FF;
}
.mp-board .ip-heading {
  font-family: var(--font-pop);
  font-size: 1.05rem;
  color: var(--navy);
  text-align: center;
  margin: 0 0 12px;
}
.mp-board .ip-heading small {
  display: block;
  font-size: 0.6em;
  font-weight: 700;
  opacity: 0.75;
  margin-top: 2px;
}
/* .live-tab-panelは2カラムグリッド(.live-team用)なので、個人ランキングの
   縦並びリストは常に全幅を使うようgrid-columnを明示する */
.mp-board .ip-panel-body {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 配信の.row-pillと同じく、枠(行)自体をチームカラーの地にする
   (2026-08-24運営指示「配信の時のように、枠の中自体に色を入れて」)。
   顔アイコン側は既に白地+リングで独立して見やすくしてあるため、行の地に色を
   入れても立ち絵の視認性は損なわない */
.mp-board .ip-row {
  display: grid;
  grid-template-columns: 34px 60px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 2px solid var(--navy);
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 55%), var(--tc);
  font-family: var(--font-body);
  text-align: left;
  width: 100%;
  cursor: pointer;
}
div.ip-row { cursor: default; }
.mp-board .ip-row:hover { filter: brightness(1.06); }
.mp-board .ip-row:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.mp-board .ip-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  background: var(--white);
  font-family: var(--font-pop);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--navy);
}
.mp-board .ip-row[data-rank="1"] .ip-rank { background: #FFD400; }
.mp-board .ip-row[data-rank="2"] .ip-rank { background: #C9CFE0; }
.mp-board .ip-row[data-rank="3"] .ip-rank { background: #E0A360; }
/* 立ち絵の顔部分をクリップし、メンバー紹介(.cast-card img)と同じ「白地+チームカラーの
   縁取りリング」の枠にする(2026-08-24運営指示「メンバー紹介のところみたいに、枠をつけて」。
   チームカラーを地の塗りにすると主張が強く立ち絵が見づらかったための変更)。
   object-position: center 15% は配信の.row-portraitと同じ位置指定(立ち絵は頭が上寄り
   のため、これで顔だけが円の中に収まる)。
   立ち絵/画像が無いキャストだけ.ip-dotのチーム色塗りにフォールバックする */
.mp-board .ip-face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 15%;
  background: var(--white);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 3px var(--tc), 0 3px 0 2px rgba(26, 31, 113, 0.25);
}
.mp-board .ip-dot { background: var(--tc); }
/* 行の地がチームカラーになったため、.mp-name/.mp-ptと同じ「白文字+紺の縁取り」に
   して読みやすくする。フォントサイズも配信同様、はっきり大きく見えるようにする
   (2026-08-24運営指示「同じ感じでフォント自体を大きくしたい」) */
.mp-board .ip-name {
  font-family: var(--font-pop);
  font-size: clamp(1rem, 4.4vw, 1.2rem);
  font-weight: 700;
  color: var(--white);
  -webkit-text-stroke: 1.2px var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mp-board .ip-value {
  font-family: var(--font-pop);
  font-size: clamp(1.1rem, 4.6vw, 1.35rem);
  font-weight: 800;
  color: var(--white);
  -webkit-text-stroke: 1.2px var(--navy);
  white-space: nowrap;
}
.mp-board .ip-value small { font-size: 0.65em; margin-left: 1px; }
.mp-board .mp-row.is-eliminated {
  filter: grayscale(1) opacity(0.65);
}
/* 矢羽根バナー(白リング→紺→チームカラーの三層) */
.mp-board .mp-banner {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 4px 0 rgba(26, 31, 113, 0.3));
}
.mp-board .mp-ring {
  clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 24px 100%, 0 50%);
  background: var(--white);
  padding: 3px;
}
.mp-board .mp-outer {
  clip-path: polygon(23px 0, calc(100% - 23px) 0, 100% 50%, calc(100% - 23px) 100%, 23px 100%, 0 50%);
  background: var(--navy);
  padding: 3px;
}
.mp-board .mp-inner {
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 22px 100%, 0 50%);
  background: var(--tc);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 40px 12px 36px;
  min-height: 54px;
}
.mp-board .mp-rank {
  font-family: var(--font-pop);
  font-size: clamp(1.25rem, 4.6vw, 1.55rem);
  line-height: 1;
  color: var(--white);
  -webkit-text-stroke: 1.4px var(--navy);
}
.mp-board .mp-name {
  flex: 1;
  font-family: var(--font-pop);
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  line-height: 1.2;
  color: var(--white);
  -webkit-text-stroke: 1.3px var(--navy);
  white-space: nowrap;
}
.mp-board .mp-pt {
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 3px 16px;
  font-weight: 700;
  font-size: clamp(1.1rem, 4vw, 1.25rem);
  color: var(--navy);
}
.mp-board .mp-pt small { font-size: 0.7em; margin-left: 1px; }
/* バナーの下にぶら下がる白パネル */
.mp-board .mp-body {
  position: relative;
  margin: -12px 22px 0;
  padding: 20px 14px 10px;
  background: var(--white);
  border: 3px solid var(--navy);
  border-top: none;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 4px 0 rgba(26, 31, 113, 0.22);
}
.mp-board .mp-faces {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 4px 4px;
}
.mp-board .mp-faces img {
  width: clamp(38px, 8vw, 46px);
  height: clamp(38px, 8vw, 46px);
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 2px solid var(--navy);
  box-shadow: 0 0 0 2px var(--white);
  background: #eee;
}
/* 顔ぶれタップでプロフィールモーダルを開く(他の日の表示と同様) */
.mp-board .mp-face {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  line-height: 0;
}
.mp-board .mp-face:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.mp-board .mp-stamp {
  position: absolute;
  right: 14px; top: 10px;
  z-index: 3;
  font-family: var(--font-pop);
  color: var(--red);
  border: 3px solid var(--red);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  padding: 0 10px;
  rotate: -8deg;
  font-size: 1.05rem;
}
.mp-board .mp-legend {
  color: var(--navy);
  opacity: 0.8;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  margin-top: 12px;
}
@media (max-width: 560px) {
  .mp-board { padding: 4px 12px 10px; }
  .mp-board .mp-inner { padding: 10px 30px 10px 26px; gap: 10px; }
  .mp-board .mp-body { margin: -12px 14px 0; padding: 18px 10px 8px; }
}