/* base.css — ルーキーチャレンジ ハブサイト 恒久ベーススタイル
   出典: docs/mock/rookie-challenge-hub-mock.html の style ブロックから移植
   HISTORY（テーマなし）とTOP（theme-vol13.css併用）が共有する。
   モック専用UI（.mockbar・ビュー切替）と未使用だった .hero-fr ブロック、
   モック内の孤立セレクタ（.status-line a）バグは除去済み。 */

/* ============================================================
   ベーストークンは vol.12/13 サイトの style.css / cast.css を継承。
   トップは「恒例イベント（シリーズ）」として打ち出す新構成:
   ① フランチャイズヒーロー（紺）→ ② バックナンバーが流れる帯
   → ③ スクロールで現れる NOW ON AIR（今開催中）
   ★印 = 新設コンポーネント
   ============================================================ */
:root {
  /* テーマ 8 変数（既定 = 緑黄軸・2026-09-03 確定。Vol テーマ .theme-volNN はこれを上書きするだけ） */
  --pop: #2f9e5f;        /* 主ボタン・見出し（若葉） */
  --tealband: #7cc242;   /* 帯・見出しバンド（黄緑） */
  --aqua2: #b7dd8a;      /* カード枠（淡い黄緑） */
  --mint2: #f6f8cf;      /* 背景アクセント（淡黄） */
  --lemon: #fdf78b;      /* 背景アクセント（レモン） */
  --coral: #ff7a76;      /* 警告・強調 */
  --ink2: #1f3b2e;       /* 文字色（深緑寄りの紺） */
  --font-pop: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;


  /* 意味色（テーマ非依存: メダル・MAX・達成） */
  --accent-red: #d9494b;     /* 告知画像の強調赤（優勝リボン・強調語）。テーマ非依存の意味色 */
  --accent-orange: #f2905f;  /* 告知画像のオレンジ（目標達成リボン） */
  --paper: #fdfcec;          /* 告知画像のクリーム地（EVENT INFO のカード地） */
  --gold: #ffd23e;
  --gold-deep: #d99a00;
  --gold-soft: #ffe98a;
  --gold-text: #a06f00;
  --yt-red: #ff0000; /* YouTube公式色（フッターの.foot-ico--yt専用。ブランド色でテーマに追従しない） */
  --white: #ffffff;
  --font-display: "Anton", Impact, sans-serif;
  --font-ui: "Inter", "Noto Sans JP", Arial, sans-serif;
  --font-ja: "Noto Sans JP", sans-serif;
  --radius: 18px;

  --header-h: 64px;
}

/* 派生・互換トークンは :root と body の両方に宣言する。
   カスタムプロパティは宣言された要素で解決されるため、:root だけに置くと Vol テーマ（.theme-volNN は body に付く）
   の --pop/--lemon 等の上書きを見ず、既定の若葉色のまま各所（丸サムネの縁・バッジ文字・ローマ字・ボタン等）に出てしまう
   （vol14 で発覚 2026-09-09）。body にも同じ宣言を置くことでテーマ変数に追従させる。値はここ1か所だけに書く */
:root, body {
  /* 派生トークン（テーマ変数から導出。直値を置かない） */
  --teal-text: color-mix(in srgb, var(--tealband) 62%, var(--ink2));
  --pop-soft: color-mix(in srgb, var(--pop) 9%, #ffffff);
  --pop-line: color-mix(in srgb, var(--pop) 28%, #ffffff);
  --pop-deep: color-mix(in srgb, var(--pop) 62%, var(--ink2));
  --mint-soft: color-mix(in srgb, var(--mint2) 45%, #ffffff);
  --ink-muted: color-mix(in srgb, var(--ink2) 48%, #ffffff);
  /* 旧ベーストークン（既存コンポーネント互換）。テーマ変数に追従する */
  --black: var(--pop);
  --green: var(--lemon);
  --mint: var(--mint2);
  --aqua: var(--aqua2);
  --ink: var(--ink2);
  --line: 2px solid var(--pop);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    linear-gradient(color-mix(in srgb, var(--pop) 22%, transparent) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, color-mix(in srgb, var(--pop) 18%, transparent) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--mint);
  color: var(--ink);
  font-family: var(--font-ui);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }


/* ---- home-nav ---- */
.home-nav {
  position: sticky; top: var(--header-h); z-index: 30;
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: 8px;
  padding: 10px max(14px, calc((100vw - 1120px) / 2));
  border-bottom: var(--line);
  background: rgba(255,255,255,.96);
}
.home-nav__brand {
  justify-self: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--black); font-size: clamp(13px,2vw,18px); font-weight: 900;
}
.home-nav__menu { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.home-nav__menu a, .home-nav__menu button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 8px 14px;
  border: var(--line); border-radius: 999px; background: var(--white);
  color: var(--black); font-family: var(--font-ui); font-size: 12px; font-weight: 900;
  letter-spacing: .04em; cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}
.home-nav__menu a:hover, .home-nav__menu button:hover { transform: translateY(-2px); background: var(--green); }
.home-nav__menu .is-here { background: var(--green); }


/* ============================================================
   ★② バックナンバーが「流れる」帯（カルーセル未満・自動フロー）
   ============================================================ */
.bn-band {
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--black);
  background: var(--white); padding: clamp(22px,3.4vw,40px) 0 24px;
}
.bn-intro { max-width: 1120px; margin: 0 auto 24px; padding: 0 clamp(18px,3vw,36px); text-align: center; }
.bn-intro__eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 900; letter-spacing: .14em; color: var(--teal-text); }
.bn-intro h2 {
  margin: 0 auto 10px; font-family: "M PLUS Rounded 1c","Noto Sans JP",sans-serif; font-weight: 900;
  font-size: clamp(20px,2.8vw,28px); color: var(--pop); line-height: 1.25;
}
.bn-intro p { max-width: 56ch; margin: 0 auto; font-family: "Noto Sans JP",sans-serif; font-weight: 700; font-size: 13px; line-height: 1.9; color: var(--ink2); }
.bn-intro p b { color: var(--pop); font-weight: 900; }
.bn-facts { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.bn-facts span {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px;
  border: 2px solid var(--aqua2); border-radius: 999px; background: var(--mint-soft);
  font-family: "Noto Sans JP",sans-serif; font-size: 11px; font-weight: 900; color: var(--teal-text);
}
.bn-facts span b { font-family: "M PLUS Rounded 1c","Noto Sans JP",sans-serif; font-size: 14px; color: var(--ink2); }
.bn-band__head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  max-width: 1120px; margin: 0 auto 14px; padding: 0 clamp(18px,3vw,36px);
}
.bn-cue {
  max-width: 1120px; margin: 14px auto 0; padding: 0 clamp(18px,3vw,36px); text-align: right;
  font-family: "M PLUS Rounded 1c","Noto Sans JP",sans-serif; font-weight: 900; font-size: 13px; color: var(--teal-text); letter-spacing: .04em;
}
.bn-cue a { color: inherit; text-decoration: none; }
.bn-cue a:hover { text-decoration: underline; }
.bn-viewport { overflow: hidden; }
/* BACK NUMBERS 横流し（2026-09-10 にネイティブスクロール方式へ変更・大会ページ LINEUP と同方式）
   トラック自体を横スクロール領域にし、portal.js（wireBnMarquee）が毎フレーム scrollLeft を進める。
   スマホのフリック・トラックパッドの横スクロールがそのまま効き、触ると自動送りが止まる。
   旧方式（CSS transform の marquee-left）は廃止。スクロールバーは非表示。 */
.bn-track {
  display: flex; gap: 12px; padding: 6px 12px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y; /* 横フリックを帯に、縦はページに（2026-09-15） */
  overscroll-behavior-x: contain;
}
.bn-track::-webkit-scrollbar { display: none; }
.bn-track > .bn-card { scroll-snap-align: start; }
/* ホバー停止は不採用（2026-09-01運営判断: 流れ続けてよい） */
/* バックナンバーはreduced-motionでも流す（2026-09-01運営判断: 装飾帯・横スクロール代替あり。手で動かせるため） */
.bn-card {
  flex: 0 0 auto; width: 240px;
  border: var(--line); border-radius: 14px; background: var(--white);
  padding: 0; display: grid; grid-template-rows: auto 1fr; overflow: hidden; cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}
.bn-card:hover { transform: translateY(-4px); background: var(--green); }
.bn-card .vol { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--black); }
.bn-card .date { font-family: var(--font-ja); font-size: 10.5px; font-weight: 900; opacity: .7; }
.bn-card .rec { margin-top: 6px; font-family: var(--font-ja); font-size: 10.5px; font-weight: 900; }
.bn-card .rec b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.bn-card .tag { width: fit-content; margin-top: 7px; border: var(--line); border-radius: 999px; padding: 1px 8px; font-size: 9.5px; font-weight: 900; background: var(--mint); }
.bn-card--next { background: var(--ink); color: #fff; border-color: var(--ink); }
.bn-card--next .vol { color: var(--green); }
.bn-card--next:hover { background: var(--ink); transform: translateY(-4px); }
/* 「一覧で見る」ボタン。ポータル（BACK NUMBERS）と大会ページ（LINEUP）の双方が使うため
   ここへ一本化した（レビュー指摘: portal.cssのみに定義されていたため大会ページで無効だった） */
.bn-listbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px;
  border: 2px solid var(--pop); border-radius: 999px; background: #fff; color: var(--pop);
  font-family: var(--font-pop); font-size: 12.5px; font-weight: 900; cursor: pointer; transition: transform 180ms ease, background 180ms ease;
}
.bn-listbtn[hidden] { display: none; } /* hidden 属性を display:inline-flex より優先（LINEUP の切替ボタンを UI から隠す用） */
.bn-listbtn:hover { transform: translateY(-2px); background: var(--lemon); }
.bn-listbtn:focus-visible { outline: 3px solid var(--tealband); outline-offset: 2px; }
.bn-listbtn[aria-pressed="true"] { background: var(--pop); color: #fff; }

/* ============================================================
   ★③ NOW ON AIR（スクロールで現れる今開催中ブロック）
   ============================================================ */
.now-ticker { overflow: hidden; border-bottom: 2px solid var(--black); background: var(--green); }
.now-ticker .ticker__track {
  display: flex; width: max-content; min-width: 200%; gap: 34px; padding: 10px 18px;
  font-family: var(--font-display); font-size: clamp(20px,3.2vw,44px); line-height: 1; white-space: nowrap;
  animation: marquee-left 24s linear infinite;
}
@keyframes marquee-left { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .now-ticker .ticker__track{animation:none} }

.now-section {
  padding: clamp(48px,7vw,100px) clamp(18px,3vw,36px);
  background:
    repeating-conic-gradient(from -12deg at 50% 30%, color-mix(in srgb, var(--aqua2) 22%, transparent) 0deg 7deg, rgba(255,255,255,.9) 7deg 12deg, color-mix(in srgb, var(--mint2) 85%, transparent) 12deg 19deg),
    var(--mint);
}
.now-section__inner { max-width: 1120px; margin-inline: auto; }
.section-head--inline { display: flex; align-items: flex-end; gap: clamp(12px,2vw,22px); flex-wrap: wrap; margin-bottom: 18px; }
.section-head--inline h2 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px,9vw,120px); line-height: .9; letter-spacing: -.02em; text-transform: uppercase;
}
.section-head--inline p { margin: 0 0 6px; width: fit-content; padding: 8px 10px; border: var(--line); border-radius: 999px; background: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px;
  padding: 7px 12px; border: var(--line); border-radius: 999px;
  background: var(--white); color: var(--black);
  font-size: 12px; font-weight: 900; line-height: 1; letter-spacing: .04em;
}
.badge--live { background: var(--green); }
.status-dot {
  display: inline-block; width: 9px; height: 9px;
  border: var(--line); border-radius: 50%; background: var(--pop);
  animation: status-pulse 1.8s ease-in-out infinite;
}
@keyframes status-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
/* 「開催中」は生放送の LIVE 表示のように、赤い点が光りながらはっきり点滅する（運営指示 2026-09-15）。
   対象: EVENT INFO の開催中バッジ・日程ピル横の「開催中！」スタンプ・ヘッダーの「vol.N 開催中」・ポータルの開催中バー/CTA */
.badge--live .status-dot, .rc-header__nav .is-live .status-dot, .rc-drawer .is-live .status-dot, .p-livebar .status-dot, .p-hero__cta:not(.p-hero__cta--result) .status-dot {
  background: var(--coral); border-color: color-mix(in srgb, var(--coral) 70%, #fff);
  animation: live-blink 1s steps(1, end) infinite, live-glow 1s ease-in-out infinite;
}
.status-stamp.is-live { animation: live-glow-stamp 1.6s ease-in-out infinite; } /* 開催中だけ（COMING SOON / RESULT のスタンプは光らせない） */
@keyframes live-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }
@keyframes live-glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--coral) 60%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--coral) 0%, transparent); } }
@keyframes live-glow-stamp { 0%, 100% { box-shadow: 0 6px 0 color-mix(in srgb, var(--ink2) 30%, transparent); } 50% { box-shadow: 0 6px 0 color-mix(in srgb, var(--ink2) 30%, transparent), 0 0 0 6px color-mix(in srgb, var(--coral) 45%, transparent); } }
@media (prefers-reduced-motion: reduce){ .status-dot, .status-stamp.is-live { animation: none } }

.now-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 14px; margin-top: 18px; }
@media (max-width: 860px) { .now-grid { grid-template-columns: 1fr; } }
.window-card { border: var(--line); border-radius: var(--radius); background: var(--white); }
.panel-title {
  margin: 0 0 12px; padding-bottom: 10px; border-bottom: var(--line);
  font-family: var(--font-ui); font-size: 15px; font-weight: 900; letter-spacing: .04em;
}
.now-live { padding: clamp(16px,2.6vw,26px); }
.digest-lead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 6px; }
.digest-lead b { font-family: var(--font-ja); font-size: 14px; font-weight: 900; }
.digest-num { font-family: var(--font-display); font-size: clamp(46px,7vw,84px); line-height: .95; }
.digest-num small { font-family: var(--font-ja); font-size: 15px; font-weight: 900; }
.digest-sub { margin: 10px 0 16px; font-family: var(--font-ja); font-size: 13px; font-weight: 900; line-height: 1.9; }
.digest-sub em { font-style: normal; color: var(--black); }
.mini-milestones { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.mini-ms {
  border: var(--line); border-radius: 12px; background: var(--white);
  padding: 8px 14px; text-align: center;
}
.mini-ms b { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--black); }
.mini-ms span { font-family: var(--font-ja); font-size: 10.5px; font-weight: 900; }
.mini-ms--goal { background: var(--green); }
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 10px 20px; border: var(--line); border-radius: 999px;
  background: var(--green); color: var(--black);
  font-family: var(--font-ui); font-size: 13px; font-weight: 900; cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}
.btn-pill--white { background: var(--white); }
.btn-pill:hover { transform: translateY(-3px); }
.btn-pill--white:hover { background: var(--green); }
.now-detail { padding: 14px; align-self: start; }
dl.event-dl { display: grid; gap: 12px; margin: 18px 0 6px; }
dl.event-dl div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding-bottom: 10px; border-bottom: var(--line); }
dl.event-dl dt { font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
dl.event-dl dd { margin: 0; font-size: 12px; font-weight: 900; }

/* ---- LINEUPプレビュー（NOW内） ---- */
.cast-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 22px; }
@media (max-width: 900px) { .cast-grid { grid-template-columns: repeat(2,1fr); } }
/* LINEUP カード: vol12/13 のレイアウト（番号・右上「話した？」・大きな丸サムネ・名前＋ローマ字。運営判断 2026-09-14） */
.cast-card {
  position: relative;
  display: grid; grid-template-rows: auto minmax(150px,1fr) auto; gap: 10px;
  min-height: 300px; padding: 16px; border: var(--line); border-radius: var(--radius); background: var(--white);
  transition: transform 180ms ease, background 180ms ease;
}
.cast-card.has-color:hover { background: var(--lemon); }
.cast-card__name { display: grid; gap: 2px; align-self: end; }
.cast-card__name small { display: block; margin: 0; color: var(--ink-muted); font-family: var(--font-ui); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.cast-card__prog { margin-top: 2px; }
.cast-card__prog .exp-head { margin: 0 0 4px; }
/* 「話した？」トグル（カード右上・リンク遷移はさせない） */
.talk-toggle {
  position: absolute; top: 10px; right: 10px; z-index: 3; padding: 4px 9px;
  border: var(--line); border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink2);
  font-family: var(--font-pop); font-size: 10px; font-weight: 900; line-height: 1; cursor: pointer;
  transition: transform 150ms ease, background 150ms ease;
}
.talk-toggle:hover { transform: translateY(-2px); }
.talk-toggle.is-on { background: var(--gold); color: var(--ink2); }
.cast-card.is-talked { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft), 0 0 18px 3px color-mix(in srgb, var(--gold) 65%, transparent); animation: talked-glow 1.8s ease-in-out infinite; }
@keyframes talked-glow {
  0%, 100% { box-shadow: 0 0 0 3px var(--gold-soft), 0 0 14px 2px color-mix(in srgb, var(--gold) 50%, transparent); }
  50% { box-shadow: 0 0 0 3px var(--gold-soft), 0 0 22px 5px color-mix(in srgb, var(--gold) 85%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .cast-card.is-talked { animation: none; } }
/* 見出し下: 進捗メーター＋ランダムボタン */
.talk-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 16px; }
.talk-progress {
  display: grid; gap: 6px; margin: 0; padding: 10px 16px 9px; width: min(320px, 100%);
  border: var(--line); border-radius: 22px; background: var(--white);
  font-family: var(--font-pop); font-size: 14px; font-weight: 900; color: var(--ink2);
}
.talk-progress__bar { display: block; width: 100%; height: 12px; overflow: hidden; border: var(--line); border-radius: 999px; background: #fff; }
.talk-progress__fill { display: block; height: 100%; width: 0%; border-radius: 999px; background: var(--green); transition: width .4s ease; }
.talk-progress.is-complete { background: var(--gold); }
.talk-progress.is-complete .talk-progress__fill { background: var(--pop); }
@media (hover: none) { .cast-card:hover, .cast-card.has-color:hover { background: var(--white); transform: none; } .cast-card.has-color:hover { background: radial-gradient(120% 80% at 50% 12%, color-mix(in srgb, var(--card-color) 30%, #fff), color-mix(in srgb, var(--card-color) 14%, #fff) 70%); } }
.cast-card:hover { background: var(--green); transform: translateY(-5px); }
/* テーマカラーを持つカードは、個人ページの立ち絵枠（cast.css .profile-hero__visual.has-color）と同じ
   「白と混ぜた淡いグラデーション」を背景にする（上部 30%・下部 14%）。色が無いカードは白のまま */
.cast-card.has-color {
  background: radial-gradient(120% 80% at 50% 12%,
    color-mix(in srgb, var(--card-color) 30%, #fff),
    color-mix(in srgb, var(--card-color) 14%, #fff) 70%);
}
.cast-card b {
  display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center;
  border: var(--line); border-radius: 50%; background: var(--green); font-size: 11px; font-weight: 900;
}
.cast-card span.face {
  align-self: center; justify-self: center; width: min(180px,86%); aspect-ratio: 1; margin: clamp(6px,1.2vw,14px) 0;
  border: var(--line); border-radius: 50%;
  background: var(--card-color, var(--aqua2));
  background: color-mix(in srgb, var(--card-color, var(--aqua2)) 34%, #ffffff);
}
.cast-card h3 { margin: 0; font-family: var(--font-ja); font-size: 18px; font-weight: 900; line-height: 1.2; }
.cast-card .romaji { display: block; margin-top: 4px; color: var(--aqua); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.career-tag {
  width: fit-content; margin-top: 2px; padding: 3px 10px;
  border: var(--line); border-radius: 999px; background: var(--white);
  font-family: var(--font-ja); font-size: 10.5px; font-weight: 900;
}
.lineup-more { display: flex; justify-content: center; margin-top: 18px; } /* 旧配置（ランダムボタンは .talk-row に移動・2026-09-14） */

/* ---- 汎用 section（LIVEビュー用） ---- */
.section { padding: clamp(48px,7vw,100px) clamp(18px,3vw,36px); }

/* ---- ★中間目標カード ---- */
.milestone-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
@media (max-width: 760px) { .milestone-grid { grid-template-columns: repeat(2,1fr); } }

/* ---- ★LIVEボード ---- */
.mode-switch { display: inline-flex; border: var(--line); border-radius: 999px; overflow: hidden; background: var(--white); }
.mode-switch button {
  border: none; background: var(--white); padding: 10px 20px;
  font-family: var(--font-ui); font-weight: 900; font-size: 13px; color: var(--ink); cursor: pointer;
}
.mode-switch button + button { border-left: var(--line); }
.mode-switch button[aria-pressed="true"] { background: var(--black); color: var(--white); }
.mode-switch button:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.upd-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 8px; }
.upd-row .stamp { font-family: var(--font-ja); font-weight: 900; font-size: 14px; }
.official-note {
  margin: 10px 0 0; padding: 14px 18px; border: var(--line); border-radius: 14px;
  background: var(--green); font-family: var(--font-ja); font-size: 13px; font-weight: 900;
}
.official-note[hidden] { display: none !important; }
/* イベント概要カード（EVENT INFO 左。運営判断 2026-09-14）: 告知画像の意匠に寄せる＝クリーム地・中央寄せ・赤の強調語 */
.now-live, .now-detail, .now-prizes__card { background: var(--paper); }
.now-live .overview-catch { font-size: 15px; color: var(--ink2); margin: 4px 0 8px; text-align: center; white-space: pre-line; }
.now-live .overview-line { margin: 0 0 6px; text-align: center; white-space: pre-line; }
.now-live .overview-note { margin: 10px 0 0; text-align: center; /* 2026-09-14: 左寄せ→他の行と同じ中央寄せ（運営指摘） */ font-family: var(--font-ja); font-size: 11.5px; font-weight: 700; line-height: 1.7; color: var(--ink2); white-space: pre-line; }
.now-live .overview-note .hl { color: var(--accent-red); font-style: normal; font-weight: 900; }
@media (max-width: 480px) { .now-live .overview-catch { font-size: 14px; } .now-live .overview-line { font-size: 12.5px; } .now-live .overview-note { font-size: 11px; } }
/* Lv ラダー（portal.css から移動・ポータル ABOUT と大会ページの概要カードで共用） */
.p-lv { display: grid; gap: 8px; margin-top: 2px; }
/* 10 帯は常に 5×2 段で並べる。ABOUT カードは最大でも 480px 程度で、10 帯を 1 行に並べると
   数字（300,000 MAX など）が読めない幅になるため、画面幅に依らず 2 段にそろえる */
.p-lv__row { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px; row-gap: 10px; align-items: end; }
.p-lv__step { display: grid; gap: 3px; align-content: end; text-align: center; }
.p-lv__bar { border-radius: 8px 8px 4px 4px; border: 2px solid var(--ink2); background: var(--lv, var(--aqua2)); }
.p-lv__step.is-max .p-lv__bar { background: repeating-linear-gradient(45deg, var(--gold) 0 8px, var(--gold-deep) 8px 16px); }
.p-lv__name { font-family: var(--font-pop); font-weight: 900; font-size: 10px; white-space: nowrap; color: #fff; background: var(--lv, var(--aqua2)); border-radius: 999px; padding: 1px 0; }
@media (max-width: 420px) { .p-lv__name { font-size: 8.5px; letter-spacing: -0.2px; } }  /* Lv.91〜100 が 1 行に収まる幅まで縮める */
.p-lv__step.is-max .p-lv__name { background: var(--gold); color: var(--ink2); }
.p-lv__val { font-family: var(--font-pop); font-weight: 900; font-size: 10px; color: var(--ink2); line-height: 1.2; }
.p-lv__note { margin: 0; font-family: var(--font-ja); font-weight: 700; font-size: 12.5px; line-height: 1.8; color: var(--ink2); }
.p-lv__note b { color: var(--pop); font-weight: 900; }
.now-live .overview-levels { margin-top: 12px; padding-top: 12px; border-top: 2px dashed color-mix(in srgb, var(--ink2) 20%, transparent); }
.now-live .overview-levels .overview-line { margin-bottom: 10px; }
.prize-pill a, .prize-note a, .overview-line a, .overview-catch a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.prize-pill a:hover, .prize-note a:hover { opacity: .75; }
.now-live .overview-catch .hl, .now-live .overview-line .hl { color: var(--accent-red); font-style: normal; font-weight: 900; }
/* 表彰・報酬（EVENT INFO の下・全幅）: 優勝＝赤リボン／目標達成＝オレンジリボン／副賞＝紺リボン＋丸枠ピル */
.event-dl div[hidden] { display: none; } /* 目標達成者／優勝者の行は新形式の表彰ブロックを使うとき hidden（display:grid が hidden 属性に勝っていた） */
.now-prizes { margin-top: 14px; margin-bottom: clamp(36px, 5vw, 64px); } /* ROOKIE LINEUP との間隔（運営指摘 2026-09-14「狭すぎ」） */
.now-prizes[hidden] { display: none; }
.now-prizes__card { padding: clamp(14px,2.4vw,24px); }
.prize-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px clamp(16px,3vw,36px); margin-top: 4px; }
.prize-col { display: grid; align-content: start; justify-items: center; gap: 12px; text-align: center; }
.prize-col--winner { border-right: 2px solid color-mix(in srgb, var(--ink2) 18%, transparent); padding-right: clamp(8px,2vw,24px); }
.prize-ribbon {
  margin: 0; width: min(100%, 320px); padding: 9px 30px; color: #fff; font-family: var(--font-pop); font-weight: 900;
  font-size: clamp(15px,1.6vw,20px); letter-spacing: .04em; line-height: 1.2;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
}
.prize-ribbon--winner { background: var(--accent-red); }
.prize-ribbon--goal { background: var(--accent-orange); }
.prize-ribbon--sub { background: var(--tealband); margin-top: 6px; }
.prize-ribbon .ico { vertical-align: -3px; margin-right: 2px; }
.prize-items { display: grid; justify-items: center; gap: 6px; }
.prize-pill {
  display: inline-block; padding: 8px 18px; border: 2.5px solid var(--accent-red); border-radius: 999px; background: #fff;
  color: var(--accent-red); font-family: var(--font-pop); font-weight: 900; font-size: 13.5px; line-height: 1.4; white-space: pre-line; /* event.json の \n で改行 */
}
.prize-col--goal .prize-pill { border-color: var(--accent-orange); color: var(--accent-orange); }
.prize-pill--big { font-size: clamp(22px,2.6vw,30px); padding: 6px 34px; letter-spacing: .06em; }
.prize-plus { display: block; color: var(--accent-red); font-family: var(--font-pop); font-weight: 900; font-size: 22px; line-height: 1; }
.prize-note { margin: 0; font-family: var(--font-ja); font-weight: 900; font-size: 13px; line-height: 1.7; color: var(--ink2); white-space: pre-line; }
.prize-note .hl, .prize-pill .hl { font-style: normal; font-weight: 900; color: var(--accent-red); }
.prize-note--sub { font-size: 12px; font-weight: 700; opacity: .85; margin-top: -4px; } /* リボン直下の注釈（優勝の定義など） */
.event-dl dd .hl { color: var(--accent-red); font-style: normal; font-weight: 900; }
@media (max-width: 640px) {
  .prize-grid { grid-template-columns: 1fr; }
  .prize-col--winner { border-right: 0; padding-right: 0; border-bottom: 2px solid color-mix(in srgb, var(--ink2) 18%, transparent); padding-bottom: 16px; }
}
.official-note.overview-note b { display: block; font-size: 12px; margin-bottom: 2px; }
.official-note.overview-note small { display: block; font-size: 10.5px; font-weight: 700; opacity: .7; margin-bottom: 6px; }
.badge--muted { background: #fff; color: var(--ink-muted); border-color: var(--ink-muted); }
.live-board { display: grid; gap: 12px; margin-top: 22px; }
.live-row {
  border: var(--line); border-radius: var(--radius); background: var(--white);
  padding: 14px 18px 12px; display: grid; gap: 7px;
  transition: transform 180ms ease;
}
.live-row:hover { transform: translateY(-4px); }
.live-row__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.live-no {
  display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center;
  border: var(--line); border-radius: 50%; background: var(--green);
  font-size: 11px; font-weight: 900;
}
.live-name { font-family: var(--font-ja); font-weight: 900; font-size: 15px; }
.goal-chip {
  font-family: var(--font-ja); font-size: 10.5px; font-weight: 900;
  border: var(--line); border-radius: 999px; background: var(--white); padding: 2px 10px;
}
.goal-chip.is-done { background: var(--green); }
.tick-labels { height: 18px; }
.goal-flag {
  position: absolute; top: -1px; transform: translateX(-50%);
  font-style: normal; font-size: 15px; line-height: 1; z-index: 2;
  filter: grayscale(1) opacity(.7);
}
.goal-flag.is-done { filter: none; }
.live-pass { display: flex; gap: 5px; flex-wrap: wrap; }
.pass-chip {
  font-family: var(--font-ui); font-size: 10px; font-weight: 900;
  border: var(--line); border-radius: 999px; background: var(--mint); padding: 1px 8px;
}
.live-bp { margin-left: auto; font-family: var(--font-display); font-size: 24px; font-variant-numeric: tabular-nums; }
.live-bp small { font-family: var(--font-ja); font-size: 11px; }
.progress { position: relative; height: 18px; border: var(--line); border-radius: 999px; overflow: hidden; background: var(--white); }
.progress span { display: block; width: 0; height: 100%; background: var(--green); transition: width .8s ease; }
.live-row.is-goal .progress span { background: repeating-linear-gradient(45deg, var(--green) 0 10px, var(--gold) 10px 20px); }
.progress i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--black); opacity: .45; }
.tick-labels { position: relative; height: 13px; font-size: 9.5px; font-weight: 900; color: var(--ink); opacity: .7; }
.tick-labels span { position: absolute; transform: translateX(-50%); letter-spacing: .04em; }
.live-next { font-family: var(--font-ja); font-size: 12.5px; font-weight: 900; }
.live-next b { color: var(--black); font-size: 15px; font-variant-numeric: tabular-nums; }
.live-note { margin-top: 18px; font-family: var(--font-ja); font-size: 11.5px; font-weight: 700; color: var(--ink); opacity: .75; }

/* ---- profile（cast.cssから移植） ---- */
.profile-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px max(18px, calc((100vw - 1120px)/2));
  border-bottom: var(--line); background: var(--black);
}
.profile-nav__logo { color: #fff; font-family: var(--font-display); font-size: 22px; letter-spacing: .04em; }
.profile-nav__back {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 10px 18px; border: var(--line); border-radius: 999px; background: var(--white);
  color: var(--black); font-size: 13px; font-weight: 900;
  transition: transform 180ms ease, background 180ms ease; cursor: pointer;
}
.profile-nav__back:hover { transform: translateY(-4px); background: var(--green); }

.profile-hero, .profile-pager, .career-wrap { width: min(1120px, calc(100% - 36px)); margin-inline: auto; }
.profile-hero {
  display: grid; grid-template-columns: minmax(200px,.6fr) minmax(0,1.4fr);
  gap: 18px; align-items: start; padding-top: clamp(22px,4vw,44px);
}
@media (max-width: 720px) { .profile-hero { grid-template-columns: 1fr; } }
.profile-hero__visual, .profile-hero__body, .profile-info__card {
  border: var(--line); border-radius: var(--radius); background: var(--white);
}
.profile-hero__visual {
  position: relative; display: grid; place-items: center; aspect-ratio: 21/34; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 12%, color-mix(in srgb, var(--tealband) 42%, #fff), color-mix(in srgb, var(--tealband) 20%, #fff) 70%);
}
.profile-no { position: absolute; top: 12px; left: 14px; font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--black); }
.profile-placeholder { text-align: center; font-weight: 900; color: var(--ink); opacity: .55; font-family: var(--font-ja); font-size: 12px; }
.profile-hero__body { padding: clamp(18px,3vw,30px); }
.profile-romaji { margin: 0; color: var(--aqua); font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.profile-hero h1 { margin: 4px 0 12px; font-family: var(--font-ja); font-size: clamp(28px,4vw,44px); font-weight: 900; line-height: 1.15; }
.profile-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.profile-info { display: grid; gap: 12px; }
.profile-info__card { padding: 14px 16px; }
.profile-info__card h2 { margin: 0 0 8px; padding-bottom: 8px; border-bottom: var(--line); font-family: var(--font-ui); font-size: 13px; font-weight: 900; letter-spacing: .05em; }
.profile-info__card p { margin: 0; font-family: var(--font-ja); font-size: 13px; font-weight: 700; line-height: 1.8; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.profile-actions .button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 10px 18px; border: var(--line); border-radius: 999px; background: var(--green);
  color: var(--black); font-size: 13px; font-weight: 900; transition: transform 180ms ease;
}
.profile-actions .button--x { background: #000; color: #fff; border-color: #000; }
.profile-actions .button:hover { transform: translateY(-4px); }
.profile-pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.profile-pager a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 10px 18px; border: var(--line); border-radius: 999px; background: var(--green);
  color: var(--black); font-size: 13px; font-weight: 900; transition: transform 180ms ease;
}
.profile-pager a:hover { transform: translateY(-4px); }
/* ランダムボタンのラベルは長短2種を持ち、狭幅では cast.css が短い方に切り替える */
.profile-pager .pager-label-short { display: none; }

/* ---- ★CAREER（出場歴） ---- */
.career-wrap { margin-top: clamp(28px,5vw,54px); }
.career-panel { border: var(--line); border-radius: var(--radius); background: var(--white); padding: clamp(18px,3vw,30px); }
.career-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.career-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(38px,6vw,72px); font-weight: 400; line-height: .9; letter-spacing: -.01em; }
.career-head p { margin: 0 0 6px; width: fit-content; padding: 8px 10px; border: var(--line); border-radius: 999px; background: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.career-summary { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 22px; }
.growth { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; align-items: end; height: 210px; margin: 8px 0 4px; }
.growth-col { display: grid; gap: 8px; align-content: end; text-align: center; height: 100%; }
.growth-bar {
  border: var(--line); border-radius: 12px 12px 6px 6px;
  background: color-mix(in srgb, var(--aqua) 40%, #ffffff);
  margin: 0 auto; width: 68%; min-height: 10px; align-self: end;
}
.growth-col.is-current .growth-bar { background: var(--green); }
.growth-val { font-family: var(--font-display); font-size: clamp(14px,2vw,20px); font-variant-numeric: tabular-nums; }
.growth-vol { font-family: var(--font-ja); font-size: 11px; font-weight: 900; }
.growth-note { font-family: var(--font-ja); font-size: 10px; font-weight: 700; opacity: .7; }
.career-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.career-list li {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: var(--line); border-radius: 14px; background: var(--white); padding: 12px 16px;
}
.career-list .v { font-family: var(--font-display); font-size: 18px; color: var(--black); min-width: 66px; }
.career-list .r { font-family: var(--font-ja); font-size: 13px; font-weight: 900; }
.career-list .p { margin-left: auto; font-family: var(--font-display); font-size: 19px; font-variant-numeric: tabular-nums; }
.career-list li.is-current { background: var(--mint); }

/* ---- FAQ / footer ---- */
.faq-panel { border: var(--line); border-radius: var(--radius); background: var(--white); padding: clamp(16px,3vw,30px); margin: 0 clamp(18px,3vw,36px) clamp(48px,7vw,100px); }
.faq-panel .section-head--inline h2 { font-size: clamp(40px,7vw,90px); }
.faq-list { display: grid; gap: 10px; }
.faq-list details { border: var(--line); border-radius: 14px; background: var(--white); overflow: hidden; }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 58px; padding: 14px 16px; font-family: var(--font-ui);
  font-size: 14px; font-weight: 900; cursor: pointer; list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; display: grid; place-items: center; width: 28px; height: 28px;
  border: var(--line); border-radius: 50%; background: var(--green); flex: 0 0 auto;
}
.faq-list details[open] summary::after { content: "-"; }
.faq-list p { margin: 0; padding: 0 16px 16px; font-size: 13px; font-weight: 700; line-height: 1.8; }
.site-footer {
  display: grid; gap: 14px; padding: clamp(18px,3vw,36px);
  background:
    linear-gradient(color-mix(in srgb, var(--pop) 18%, transparent) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg, color-mix(in srgb, var(--pop) 14%, transparent) 1px, transparent 1px) 0 0/48px 48px,
    var(--mint);
}
.footer-panel {
  display: grid; grid-template-columns: minmax(220px,.55fr) 1fr; gap: clamp(18px,4vw,44px);
  border: var(--line); border-radius: var(--radius); background: var(--white); padding: clamp(16px,3vw,30px);
}
@media (max-width: 720px) { .footer-panel { grid-template-columns: 1fr; } }
.footer-panel h2 { margin: 0; color: var(--black); font-family: var(--font-ja); font-size: clamp(24px,3vw,40px); font-weight: 900; }
.footer-copy p { margin: 0 0 10px; font-family: var(--font-ja); font-size: 13px; font-weight: 700; line-height: 1.8; }
.footer-copy strong { color: var(--black); font-weight: 900; }
.hashtag-panel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  border: var(--line); border-radius: var(--radius); background: var(--white); padding: clamp(16px,3vw,24px);
}
.hashtag-panel a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px;
  border-radius: 999px; background: #000; color: #fff;
  font-family: var(--font-ja); font-size: 13px; font-weight: 900; transition: transform 180ms ease;
}
.hashtag-panel a:hover { transform: translateY(-4px); }
.hashtag-panel .lbl { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ja); font-weight: 900; font-size: 14px; }
.hashtag-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #000; } /* X公式色 */
.hashtag-ico svg { width: 60%; height: 60%; fill: #fff; display: block; }

/* 旧 .reveal は本ファイル末尾の .anim-item へ統合（2026-09-04・JS側の置換はTask 4） */

/* ============================================================
   ★① オープニングアニメーション（その月のロゴが登場して幕が上がる）
   ============================================================ */
.opening {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; align-content: center; gap: 10px;
  /* ロゴ群を画面中央よりやや上に（ユーザー指摘 2026-09-05「ロゴもうちょい上」）。下側にゆとりを持たせる */
  padding-bottom: clamp(60px, 12vh, 140px);
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(100% 80% at 50% 20%, var(--pop-deep), transparent 65%),
    var(--ink);
  color: #fff; cursor: pointer;
  transition: transform .65s cubic-bezier(.7,0,.3,1);
}
.opening.is-done { transform: translateY(-102%); }
.opening[hidden] { display: none !important; }
.opening__burst {
  display: grid; place-items: center;
  width: clamp(150px,30vw,240px); aspect-ratio: 1;
  background: var(--green); color: var(--ink);
  border: 2px solid var(--ink);
  clip-path: polygon(50% 0,59% 25%,85% 15%,75% 41%,100% 50%,75% 59%,85% 85%,59% 75%,50% 100%,41% 75%,15% 85%,25% 59%,0 50%,25% 41%,15% 15%,41% 25%);
  font-family: var(--font-display); font-size: clamp(30px,6vw,48px);
  transform: scale(0) rotate(-24deg);
}
.opening.is-play .opening__burst { animation: op-burst .8s cubic-bezier(.34,1.56,.64,1) .15s forwards; }
@keyframes op-burst { 60% { transform: scale(1.14) rotate(6deg); } 100% { transform: scale(1) rotate(-6deg); } }
.opening__title {
  font-family: var(--font-display); font-size: clamp(40px,9vw,110px);
  line-height: .9; letter-spacing: -.02em; text-transform: uppercase; text-align: center;
  opacity: 0; transform: translateY(30px);
}
.opening__title .accent { color: var(--green); }
.opening.is-play .opening__title { animation: op-up .5s ease .7s forwards; }
.opening__sub {
  font-family: var(--font-ja); font-weight: 900; font-size: clamp(13px,2vw,18px);
  color: var(--green); letter-spacing: .12em;
  opacity: 0; transform: translateY(20px);
}
.opening.is-play .opening__sub { animation: op-up .5s ease 1.05s forwards; }
@keyframes op-up { to { opacity: 1; transform: translateY(0); } }
.opening__skip { position: absolute; bottom: 18px; right: 22px; font-family: var(--font-ja); font-size: 11px; font-weight: 700; opacity: .6; }
@media (prefers-reduced-motion: reduce) {
  .opening { display: none !important; }
}

/* ============================================================
   ★② PJCS風ヒーロー: 集合ビジュアル + 中央エンブレム + 開催日程
   ============================================================ */
.home-nav--dark { background: rgba(13,31,66,.97); border-bottom: 2px solid var(--ink); }
.home-nav--dark .home-nav__brand { color: #fff; }
.home-nav--dark .home-nav__menu a, .home-nav--dark .home-nav__menu button {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6);
}
.home-nav--dark .home-nav__menu a:hover, .home-nav--dark .home-nav__menu button:hover { background: var(--green); color: var(--ink); border-color: var(--green); }

.hero-pjcs { background: var(--white); border-bottom: 2px solid var(--ink); }
.group-stage { position: relative; overflow: hidden; background: #fff; }

/* ★画像スロット: Skillが月毎に差し替える素材の枠（モックでは点線プレースホルダ表示） */
.img-slot {
  display: grid; place-items: center; text-align: center; gap: 6px;
  border: 2px dashed color-mix(in srgb, var(--pop) 55%, transparent); border-radius: 12px;
  background:
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--pop) 5%, transparent) 0 14px, transparent 14px 28px),
    var(--pop-soft);
  color: var(--ink); font-family: var(--font-ja); font-weight: 900;
}
.img-slot .slot-name { font-size: clamp(15px,2.4vw,22px); }
.img-slot .slot-path { font-size: 10.5px; font-weight: 700; opacity: .6; font-family: ui-monospace, monospace; }
.img-slot .slot-desc { font-size: 11px; font-weight: 700; opacity: .75; max-width: 46ch; line-height: 1.7; }

/* 集合ビジュアル画像（横長1枚・PJCSのキービジュアル相当） */
.group-visual {
  width: 100%; aspect-ratio: 16 / 8.2; border-radius: 0; border-left: none; border-right: none; border-top: none;
}
/* ロゴ画像（集合ビジュアルの中央に重ねる・素材は別ファイル） */
.logo-overlay {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.logo-overlay .img-slot {
  width: clamp(160px,26vw,250px); aspect-ratio: 1.25; background: rgba(255,255,255,.88);
  filter: drop-shadow(0 5px 0 color-mix(in srgb, var(--ink2) 22%, transparent)); transform: rotate(-4deg);
}
/* オープニング内のロゴスロット（同じロゴ素材をOP演出で使い回す） */
.opening .img-slot {
  width: clamp(180px,30vw,280px); aspect-ratio: 1.25;
  background: rgba(255,255,255,.94); border-color: var(--green);
  transform: scale(0) rotate(-14deg);
}
.opening.is-play .img-slot { animation: op-burst .8s cubic-bezier(.34,1.56,.64,1) .15s forwards; }
.hero-date {
  text-align: center; padding: clamp(18px,3vw,32px) 18px clamp(22px,3.4vw,38px);
  background: var(--white);
}
.hero-date h1 {
  margin: 0; font-family: var(--font-ui); font-weight: 900; color: var(--ink);
  font-size: clamp(26px,4.6vw,46px); letter-spacing: .01em;
}
.hero-date .dateline {
  margin: 6px 0 0; font-family: var(--font-ja); font-weight: 900; color: var(--ink);
  font-size: clamp(16px,2.8vw,27px);
}
.hero-date__meta { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }



/* ★シリーズ実績の帯（恒例イベントの格を一行で） */
.series-strip {
  display: flex; align-items: center; justify-content: center; gap: 10px 22px; flex-wrap: wrap;
  background: var(--ink); color: #fff; padding: 12px 16px;
  font-family: var(--font-ja); font-size: 12px; font-weight: 900;
}
.series-strip b { font-family: var(--font-display); font-weight: 400; font-size: 19px; color: var(--green); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.series-strip .sep { opacity: .35; }

/* ★実画像版のOP・ヒーロー */
/* OP の演出順（ユーザー決定 2026-09-05: ルキチャレが主役・BackStage は最後に控えめに）:
   0.15s ROOKIE CHALLENGE ロゴがバウンド登場 → 1.05s その下に presented by BackStage（白ロゴ・小）が
   フェードイン。BackStage ロゴは背景（緑〜青）でも読めるよう白版（assets/brand/backstage-logo-white.png） */
.opening__logo {
  width: clamp(250px,48vw,500px); height: auto; transform: scale(0) rotate(-12deg); filter: drop-shadow(0 8px 0 rgba(0,0,0,.3));
  /* ロゴの絵柄（左の王冠・右の雷）は右に重心があるため、見た目の中央に合わせて少し左へ寄せる
     （ユーザー指摘 2026-09-05「ちょっとだけロゴを左に」） */
  position: relative; left: clamp(-14px, -1.6vw, -6px);
}
/* ロゴは水平で着地（ユーザー確認 2026-09-05「斜めにしなくてもいい」）。バウンド（scale の行き過ぎ）は残し、
   回転は登場時の -12deg から 0deg へ戻す。共通 op-burst（-6deg 着地）は他要素用に据え置き */
.opening.is-play .opening__logo { animation: op-logo-in .8s cubic-bezier(.34,1.56,.64,1) .15s forwards; }
@keyframes op-logo-in { 60% { transform: scale(1.14) rotate(3deg); } 100% { transform: scale(1) rotate(0deg); } }
.opening__brand { display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(22px, 3.2vh, 34px); opacity: 0; transform: translateY(12px); }
.opening__brand-by { font-family: var(--font-ui); font-weight: 700; font-size: clamp(10px,1.1vw,12px); letter-spacing: .12em; color: rgba(255,255,255,.75); text-transform: lowercase; }
.opening__brand img { display: block; width: clamp(90px,12vw,130px); height: auto; opacity: .92; filter: drop-shadow(0 1px 0 rgba(0,0,0,.2)); }
.opening.is-play .opening__brand { animation: op-up .45s ease 1.05s forwards; }
.opening__vol { font-family: var(--font-display); background: var(--green); color: var(--ink); border-radius: 999px; padding: 4px 20px; font-size: clamp(16px,2.6vw,24px); opacity: 0; transform: translateY(20px); }
.opening.is-play .opening__vol { animation: op-up .5s ease .8s forwards; }
.group-img { display: block; width: 100%; height: auto; }
.logo-overlay { place-items: end center; padding-bottom: 2.5%; }
.logo-img { width: clamp(180px,28vw,360px); height: auto; filter: drop-shadow(0 5px 0 color-mix(in srgb, var(--ink2) 25%, transparent)); }
.vol-pill { font-family: var(--font-display); background: var(--ink); color: var(--green); border-radius: 999px; padding: 3px 18px; font-size: clamp(13px,2vw,19px); letter-spacing: .04em; }
.group-caption { position: absolute; left: 10px; bottom: 8px; font-family: var(--font-ja); font-size: 10px; font-weight: 700; color: color-mix(in srgb, var(--ink2) 60%, transparent); background: rgba(255,255,255,.75); border-radius: 8px; padding: 2px 8px; }

/* --- バックナンバー: 各カードは「その月のテーマ色」を継承 --- */
.bn-card { border-top: 8px solid var(--vol-accent, var(--aqua2)); }
.bn-card .vol { color: var(--vol-accent, var(--black)); }
.bn-card .tag { background: color-mix(in srgb, var(--vol-accent, var(--aqua2)) 18%, #ffffff); }
.bn-card--next { border-top-color: var(--green); }
.sticky-cta {
  position: fixed; right: 18px; bottom: 18px; z-index: 20;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 12px 18px; border: 2px solid var(--pop); border-radius: 999px;
  background: #ffffff; color: var(--pop); font-size: 13px; font-weight: 900;
  font-family: "M PLUS Rounded 1c","Noto Sans JP",sans-serif;
  transition: transform 180ms ease, background 180ms ease;
}
.sticky-cta:hover { transform: translateY(-4px); background: var(--lemon); }
/* スマホは占有率を下げる（幅 41%→約 30%）。フッターのストアバッジが見えている間は render.js が is-hidden を付けて隠す（2026-09-15） */
@media (max-width: 640px) { .sticky-cta { min-height: 44px; padding: 9px 14px; font-size: 12px; right: 12px; bottom: 12px; } }
.sticky-cta { transition: transform 180ms ease, background 180ms ease, opacity 200ms ease; }
.sticky-cta.is-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }
.ico { display: inline-block; width: 18px; height: 24px; vertical-align: -6px; background: center / contain no-repeat; }
.ico-medal-gold { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 66%22%3E%0A%3Cpath d=%22M14 2 h9 v24 h-9 z%22 fill=%22%234f7df5%22 stroke=%22%231e4fd0%22 stroke-width=%222%22/%3E%0A%3Cpath d=%22M25 2 h9 v24 h-9 z%22 fill=%22%23ff6b6b%22 stroke=%22%23e05a4e%22 stroke-width=%222%22/%3E%0A%3Ccircle cx=%2224%22 cy=%2242%22 r=%2218%22 fill=%22%23ffd23e%22 stroke=%22%23d99a00%22 stroke-width=%223%22/%3E%0A%3Ccircle cx=%2224%22 cy=%2242%22 r=%2210%22 fill=%22%23ffe98a%22 stroke=%22none%22/%3E%0A%3C/svg%3E"); }
.ico-medal-orange { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 66%22%3E%0A%3Cpath d=%22M14 2 h9 v24 h-9 z%22 fill=%22%234f7df5%22 stroke=%22%231e4fd0%22 stroke-width=%222%22/%3E%0A%3Cpath d=%22M25 2 h9 v24 h-9 z%22 fill=%22%23ff6b6b%22 stroke=%22%23e05a4e%22 stroke-width=%222%22/%3E%0A%3Ccircle cx=%2224%22 cy=%2242%22 r=%2218%22 fill=%22%23ffb36b%22 stroke=%22%23d99a00%22 stroke-width=%223%22/%3E%0A%3Ccircle cx=%2224%22 cy=%2242%22 r=%2210%22 fill=%22%23ffd9ae%22 stroke=%22none%22/%3E%0A%3C/svg%3E"); }
.ico-medal-blue { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 66%22%3E%0A%3Cpath d=%22M14 2 h9 v24 h-9 z%22 fill=%22%238fd9ff%22 stroke=%22%232fa7d8%22 stroke-width=%222%22/%3E%0A%3Cpath d=%22M25 2 h9 v24 h-9 z%22 fill=%22%234f7df5%22 stroke=%22%231e4fd0%22 stroke-width=%222%22/%3E%0A%3Ccircle cx=%2224%22 cy=%2242%22 r=%2218%22 fill=%22%238fd9ff%22 stroke=%22%232fa7d8%22 stroke-width=%223%22/%3E%0A%3Ccircle cx=%2224%22 cy=%2242%22 r=%2210%22 fill=%22%23d4f1ff%22 stroke=%22none%22/%3E%0A%3C/svg%3E"); }
.ico-wakaba { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 50%22%3E%0A%3Cpath d=%22M6 4 L20 16 L34 4 L34 24 Q34 40 20 47 Q6 40 6 24 Z%22 fill=%22%23ffd23e%22 stroke=%22%231e4fd0%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%0A%3Cpath d=%22M20 16 L34 4 L34 24 Q34 40 20 47 Z%22 fill=%22%233ec46d%22 stroke=%22none%22/%3E%0A%3Cpath d=%22M6 4 L20 16 L34 4 L34 24 Q34 40 20 47 Q6 40 6 24 Z%22 fill=%22none%22 stroke=%22%231e4fd0%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%0A%3C/svg%3E"); width: 14px; height: 17px; vertical-align: -3px; }
.ico-crown { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 46%22%3E%0A%3Cpath d=%22M7 36 L11 10 L24 24 L32 5 L40 24 L53 10 L57 36 Z%22 fill=%22%23ffd23e%22 stroke=%22%23d99a00%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%0A%3Crect x=%228%22 y=%2235%22 width=%2248%22 height=%227%22 rx=%223.5%22 fill=%22%23ffd23e%22 stroke=%22%23d99a00%22 stroke-width=%222.5%22/%3E%0A%3Ccircle cx=%2232%22 cy=%2220%22 r=%223%22 fill=%22%23ff6b6b%22 stroke=%22none%22/%3E%0A%3C/svg%3E"); width: 24px; height: 17px; vertical-align: -2px; }
.live-row .crown { display: inline-block; width: 26px; height: 19px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 46%22%3E%0A%3Cpath d=%22M7 36 L11 10 L24 24 L32 5 L40 24 L53 10 L57 36 Z%22 fill=%22%23ffd23e%22 stroke=%22%23d99a00%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%0A%3Crect x=%228%22 y=%2235%22 width=%2248%22 height=%227%22 rx=%223.5%22 fill=%22%23ffd23e%22 stroke=%22%23d99a00%22 stroke-width=%222.5%22/%3E%0A%3Ccircle cx=%2232%22 cy=%2220%22 r=%223%22 fill=%22%23ff6b6b%22 stroke=%22none%22/%3E%0A%3C/svg%3E") center / contain no-repeat; align-self: center; }
.cast-card span.face {
  /* 顔画像（render.js が --face-img で渡す）の下に、個人ページの立ち絵枠（cast.css .profile-hero__visual.has-color）と
     同じグラデーションを敷く。色が無いカードは aqua2 ベースの同じ式にフォールバック */
  background-image:
    var(--face-img, none),
    radial-gradient(120% 80% at 50% 12%,
      color-mix(in srgb, var(--card-color, var(--aqua2)) 30%, #fff),
      color-mix(in srgb, var(--card-color, var(--aqua2)) 14%, #fff) 70%);
  background-size: cover, auto; background-position: top center, center; background-repeat: no-repeat;
  background-color: #fff;
}
.face-sm {
  display: inline-block; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--pop); background: #fff center / cover no-repeat; background-position: top center;
  vertical-align: middle; align-self: center;
}
.face-li { width: 26px; height: 26px; margin-right: 8px; vertical-align: -7px; }
.face-lg {
  display: inline-block; width: 54px; height: 54px; border-radius: 50%;
  border: 3px solid var(--gold); background: #fff center / cover no-repeat; background-position: top center;
}
.profile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* ステータス1行 + 説明1文（ヒーロー直下の情報整理・2026-09-01） */



.about-line {
  max-width: 56ch; margin: 14px auto 0;
  font-family: "Noto Sans JP",sans-serif; font-weight: 700;
  font-size: clamp(12.5px,1.9vw,15px); line-height: 1.9; color: var(--ink2);
}
.about-line b { color: var(--pop); font-weight: 900; }



.card-result { font-family: "M PLUS Rounded 1c","Noto Sans JP",sans-serif; font-weight: 900; font-size: 13px; color: var(--pop); margin-bottom: 4px; }

/* フッター（アイコン付きリンク一覧・ストアバッジ・BackStageロゴ）: 元はportal.cssのみに
   あったため大会ページ（templates/vol/*.tpl はbase/header/carousel.cssしか読まない）で
   ロゴ/アイコン画像が原寸巨大表示になっていた（コントローラ指摘）。base.cssへ一本化し、
   portal.css側の重複定義は削除した（ポータルの表示は不変）。border/border-radius は
   本ファイル末尾の共通ルール（.footer-links等の一括border指定）から引き継ぐ。 */
.footer-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 28px; background: #fff; padding: 6px clamp(16px,3vw,30px); }
.footer-links + .hashtag-panel { margin-top: clamp(22px, 3.5vw, 36px); } /* リンク集と「Xで検索」の間隔（運営指摘 2026-09-15「詰まりすぎ」） */
@media (max-width: 640px) { .footer-links { grid-template-columns: 1fr; } }
.footer-links a { display: flex; align-items: center; gap: 14px; min-height: 62px; border-bottom: 2px dashed var(--aqua2); font-family: var(--font-ja); font-size: 13.5px; font-weight: 900; color: var(--ink2);
  transition: transform 180ms ease, color 180ms ease; /* ホバーの右ずらし・色変化をなめらかに（運営指摘 2026-09-14: transition 未定義で瞬時に切り替わっていた） */ }
.footer-links a:hover { color: var(--pop); transform: translateX(4px); }
.footer-links a:nth-last-child(-n+2) { border-bottom: none; } /* 最終行2件（Wantedly・募集フォーム）は点線を消す（移設時に一度欠落・fix round 2で復元） */
@media (max-width: 640px) { .footer-links a:nth-last-child(2) { border-bottom: 2px dashed var(--aqua2); } } /* 1列レイアウトでは最終行1件のみが「最終」なので2件目に点線を戻す */
.foot-ico { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,.1); }
.foot-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foot-ico svg { width: 62%; height: 62%; display: block; }
.foot-ico--x { background: #000; border-color: #000; } /* X公式色 */
.foot-ico--x svg { fill: #fff; }
.foot-ico--yt { background: var(--yt-red); border-color: var(--yt-red); } /* YouTube公式色 */
.foot-ico--yt svg { width: 78%; height: 78%; fill: #fff; }
.footer-small { text-align: center; font-family: var(--font-ja); font-size: 11px; font-weight: 700; color: var(--ink-muted); padding: 4px 0 10px; }
/* BackStageロゴ・ストアバッジ（ポータルABOUT・大会ページ「BackStageとは」の両方が使う） */
.p-card__logo { width: min(240px, 64%); height: auto; margin: 2px 0 0; }
.p-stores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.store-badge { display: inline-flex; border-radius: 10px; transition: transform 180ms ease; }
.store-badge:hover { transform: translateY(-3px); }
.store-badge img { display: block; width: auto; }
.store-badge--ios img { height: 44px; }
.store-badge--android img { height: 58px; }
@media (max-width: 600px) {
  .logo-overlay { position: static; display: block; padding: 10px 0 0; text-align: center; background: #fff; }
  .logo-img { width: min(70vw, 300px); }
}


.date-wrap { position: relative; display: inline-block; margin-top: 14px; }
.date-wrap .date-pill { margin-top: 0; }
.status-stamp {
  position: absolute; right: -34px; top: -26px; z-index: 2;
  display: grid; place-items: center; width: 74px; height: 74px;
  background: var(--green); color: var(--ink2); border: 3px solid var(--ink2); border-radius: 50%;
  font-family: "M PLUS Rounded 1c","Noto Sans JP",sans-serif; font-weight: 900;
  font-size: 13px; line-height: 1.25; text-align: center; text-decoration: none;
  transform: rotate(10deg);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--ink2) 25%, transparent);
  transition: transform 180ms ease;
}
.status-stamp:hover { transform: rotate(6deg) scale(1.06); }
@media (max-width: 600px) { .status-stamp { right: -14px; top: -30px; width: 64px; height: 64px; font-size: 11.5px; } }
.now-grid.is-live { grid-template-columns: 1fr; }
.now-grid.is-live #nowRight { order: -1; }
#nowRight.is-live { grid-template-columns: repeat(2, minmax(0,1fr)); }
#nowRight.is-live > .info-label { grid-column: 1 / -1; }
@media (max-width: 860px) { #nowRight.is-live { grid-template-columns: 1fr; } }
.info-label {
  margin: 6px 0 0; font-family: "M PLUS Rounded 1c","Noto Sans JP",sans-serif; font-weight: 900;
  font-size: clamp(16px,2.2vw,21px); color: var(--pop);
}
.info-label[hidden] { display: none !important; }
.exp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 5px; }
.lv-badge {
  display: inline-flex; align-items: center; padding: 2px 11px; border-radius: 999px;
  background: var(--pop); color: #fff; border: 2px solid var(--ink2);
  font-family: "M PLUS Rounded 1c","Noto Sans JP",sans-serif; font-weight: 900; font-size: 12px;
}
.lv-badge.is-max { background: var(--gold); color: var(--ink2); border-color: var(--gold-deep); }
.exp-val { font-family: "M PLUS Rounded 1c","Noto Sans JP",sans-serif; font-weight: 900; font-size: 12.5px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.exp-bar { position: relative; height: 13px; border: 2px solid var(--ink2); border-radius: 999px; overflow: hidden; background: var(--pop-soft); margin-bottom: 5px; }
.exp-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--aqua2), var(--pop)); border-radius: 999px; transition: width .6s ease; }
.exp-bar.is-max span { background: repeating-linear-gradient(45deg, var(--gold) 0 10px, var(--gold-deep) 10px 20px); }
.stamp-row { display: flex; gap: 5px; margin: 2px 0 6px; }
.stamp {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 1px;
  min-width: 34px; padding: 2px 7px; border-radius: 999px;
  border: 2px solid var(--pop-line); background: var(--pop-soft); color: var(--ink-muted);
  font-style: normal; font-family: "M PLUS Rounded 1c","Noto Sans JP",sans-serif;
  font-weight: 900; font-size: 11px; line-height: 1.3;
}
.stamp small { font-size: 8.5px; }
.stamp.is-on { border-color: var(--pop); background: var(--pop-soft); color: var(--pop); }
.stamp.is-goal.is-on { border-color: var(--gold-deep); background: var(--gold-soft); color: var(--gold-text); }
.next-bar { position: relative; height: 12px; border: 2px solid var(--pop); border-radius: 999px; overflow: hidden; background: #fff; margin-bottom: 5px; }
.next-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--coral), var(--coral)); }
.next-label { font-family: "M PLUS Rounded 1c","Noto Sans JP",sans-serif; font-weight: 900; font-size: 11.5px; color: var(--ink2); }
.next-label b { color: var(--pop); font-size: 13px; font-variant-numeric: tabular-nums; }
/* 進捗ラベル内の <b>（残り BP・「帯が上がる」）は番号バッジ用 .cast-card b（丸・34px・枠・地色。theme-volNN.css でも上書き）の
   影響を受けないよう、詳細度を上げて通常のインライン強調に戻す（開催中に初めて表示される箇所。2026-09-14 ダミー確認で発覚） */
.cast-card div.next-label b {
  display: inline; width: auto; height: auto; padding: 0 2px; border: 0; border-radius: 0; background: transparent;
  color: var(--pop); font-size: 13px; font-weight: 900; line-height: inherit; white-space: nowrap;
}
.next-label--standby { color: var(--ink-muted); }
.card-result + .stamp-row { margin-top: 4px; }
.lv-badge--sm { font-size: 10.5px; padding: 1px 9px; justify-self: center; margin: 0 auto 2px; }
.growth-col .lv-badge--sm { width: fit-content; }
.bn-intro__more { margin-top: 10px !important; }
.bn-intro__more a { color: var(--pop); font-weight: 900; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.bn-thumb {
  display: block; width: 100%; margin: 0; aspect-ratio: 16/9;
  object-fit: cover; border-bottom: 2px solid var(--vol-accent, var(--aqua2));
}
.bn-body { padding: 9px 14px 12px; display: grid; gap: 3px; align-content: start; }
span.bn-thumb--next {
  display: grid; place-items: center; background: var(--ink2); color: var(--green);
  font-family: "M PLUS Rounded 1c","Noto Sans JP",sans-serif; font-weight: 900; font-size: 17px;
  text-align: center; line-height: 1.2; letter-spacing: .08em;
}

/* ============================================================
   新設ブロック（ポータル再設計モック v2 の _new.css:1-78 相当）
   既定テーマ（緑黄軸）の見出し・カード等の意匠を .theme-vol13 と
   同じ丸ゴ様式に揃える。共通ヘッダー/ドロワー（_new.css:79-157相当）は
   Task 3でpublic/css/header.cssへ切り出し済み。ポータルヒーロー等
   （_new.css:158以降）は後続タスクで導入する
   ============================================================ */

/* 共通ヘッダー（fixed・高さ --header-h）ぶんの余白と、ページ内アンカーの着地位置 */
body { padding-top: var(--header-h); }
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ---- デフォルトテーマの見出し・部品（vol13テーマと同じ丸ゴ様式をトークン経由で） ---- */
body {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--pop) 10%, transparent) 1.2px, transparent 1.4px) 0 0 / 22px 22px,
    var(--mint-soft);
  color: var(--ink2);
}
.section-head--inline h2, .career-head h2 {
  font-family: var(--font-pop); font-weight: 900; text-transform: none;
  letter-spacing: .01em; line-height: 1.05; color: var(--pop);
  font-size: clamp(30px,6vw,68px);
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
    -2px 0 0 #fff, 2px 0 0 #fff, 0 -2px 0 #fff, 0 2px 0 #fff, 0 5px 0 color-mix(in srgb, var(--pop) 22%, transparent);
}
.section-head--inline p, .career-head p {
  background: var(--tealband); color: #fff; border: none;
  font-family: var(--font-pop); letter-spacing: .06em;
}
.window-card, .cast-card, .career-panel, .faq-panel,
.footer-panel, .hashtag-panel, .bn-card, .footer-links,
.profile-hero__visual, .profile-hero__body, .profile-info__card {
  border: 3px solid var(--aqua2); border-radius: 22px;
}
.panel-title, .profile-info__card h2 {
  border-bottom: none; background: var(--tealband); color: #fff;
  border-radius: 10px; padding: 8px 12px; font-family: var(--font-pop); letter-spacing: .06em;
}
.badge { border: 2px solid var(--aqua2); font-family: var(--font-pop); }
.btn-pill { background: var(--pop); color: #fff; border: none; font-family: var(--font-pop); box-shadow: 0 4px 0 color-mix(in srgb, var(--pop) 30%, transparent); }
.btn-pill--white { background: #fff; color: var(--pop); border: 2px solid var(--pop); box-shadow: none; }
.hero-date { position: relative; background: transparent; }
.hero-lead {
  margin: 0 0 6px; font-family: var(--font-pop); font-weight: 900;
  font-size: clamp(13px,2vw,19px); color: var(--teal-text);
  text-shadow: -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px 1.5px 0 #fff;
}
.hero-date h1 {
  font-family: var(--font-pop); font-weight: 900; color: var(--pop);
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0 5px 0 color-mix(in srgb, var(--pop) 20%, transparent);
}
.date-pill {
  display: inline-block; margin-top: 14px; padding: 12px 26px;
  background: var(--pop); color: #fff; border-radius: 18px;
  font-family: var(--font-pop); font-weight: 900; font-size: clamp(17px,3vw,30px); letter-spacing: .04em;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--ink2) 25%, transparent);
}
.now-section { background: transparent; }
.now-ticker { background: var(--tealband); border-color: var(--pop); }
.ticker__track { color: #fff; font-family: var(--font-pop); font-weight: 900; letter-spacing: .04em; }
.bn-band { border-color: var(--aqua2); }
.official-note { background: var(--lemon); border: 2px solid var(--pop); border-radius: 16px; font-family: var(--font-pop); }
.cast-card b { background: var(--lemon); border: 2px solid var(--pop); }
.cast-card:hover { background: var(--lemon); }
.career-tag { border: 1.5px solid var(--tealband); font-family: var(--font-pop); }
.faq-list details { border: 2px solid var(--aqua2); border-radius: 16px; }
.faq-list summary { font-family: var(--font-pop); }
.faq-list summary::after { background: var(--lemon); border: 2px solid var(--pop); }
.event-dl div { border-bottom: 2px dashed var(--aqua2); }
.site-footer { background: transparent; }
.bn-card .vol, .career-list .p, .career-list .v, .growth-val { font-family: var(--font-pop); font-weight: 900; }
.career-list li { border: 2px solid var(--aqua2); }
.career-list li.is-current { background: var(--mint2); }
.growth-bar { background: color-mix(in srgb, var(--aqua2) 45%, #ffffff); border: 2px solid var(--tealband); }
.growth-col.is-current .growth-bar { background: var(--lemon); border-color: var(--pop); }
.opening { background:
  repeating-conic-gradient(from 0deg at 50% 46%, rgba(255,255,255,.14) 0deg 6deg, rgba(255,255,255,0) 6deg 12deg),
  radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--pop) 55%, #fff), transparent 70%),
  var(--pop); }
.opening__sub { color: #fff; }
.opening__vol { background: var(--lemon); color: var(--pop); font-family: var(--font-pop); }

/* ============================================================
   スクロール連動の出現アニメーション（大運動会 .anim-item / .anim-in を移植）
   Task 4 で導入予定の reveal.js が IntersectionObserver で付与する想定。
   JS 無効・IO 未対応・reduce 設定時はクラス自体を付けないので常に表示される。
   transform は既存の回転デザインと衝突しうるため独立プロパティ translate / scale を使う
   ============================================================ */
.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; }
/* 出現後のキャストカードはホバー用の transition（transform / background 180ms）を取り戻す。
   .anim-item の transition（opacity/translate/scale）が .cast-card の指定を上書きし、ホバーの持ち上がり・色変化が
   瞬時に切り替わって「アニメーションしていない」ように見えていた（運営指摘 2026-09-11・一覧表示を既定にして顕在化） */
.cast-card.anim-item.anim-in { transition: transform 180ms ease, background 180ms ease; }
@media (prefers-reduced-motion: reduce) {
  .anim-item { opacity: 1; translate: none; scale: none; transition: none; }
}

/* ---- シェア（share.js・大会ページのヒーロー下と個人ページのリンク欄下。運営決定 2026-09-15） ----
   色はテーマ変数（--pop/--ink2/--lemon）で解決するので月テーマにそのまま追従する */
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.share-row__label { font-family: var(--font-display); font-size: 13px; letter-spacing: .12em; color: var(--ink2); opacity: .75; }
.share-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px;
  border-radius: 999px; border: 2px solid var(--pop); background: var(--white); color: var(--pop);
  font-family: var(--font-pop, var(--font-ui)); font-size: 13px; font-weight: 900; line-height: 1;
  cursor: pointer; text-decoration: none; transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}
.share-btn:hover { transform: translateY(-2px); }
.share-btn--x { background: var(--ink2); color: var(--white); border-color: var(--ink2); }
.share-btn__icon { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }
.share-btn.is-done { background: var(--lemon); color: var(--ink2); border-color: var(--ink2); }
@media (prefers-reduced-motion: reduce) { .share-btn, .share-btn:hover { transition: none; transform: none; } }

.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.footer-brand .p-card__logo { width: min(240px, 100%); height: auto; }