/* ================================================================
   スタガ！ | v2 デザイン言語（2026-07 刷新・KV主体「作品公式サイト」文法）
   トップ（index.html）用。カラーは旧style.cssと同一パレット、
   フォントは Zen Kaku Gothic New（全ページ v2-bridge.css で統一）。
   演出原則: 実データ・実状態に基づく動きのみ／常時ループは最小限。
================================================================ */
:root{
  --ink:#1E2952;
  --ink-mid:#4B5565;
  --ink-subtle:#667085;
  --coral:#FF2E88;
  --coral-dk:#E01872;
  --navy:#1E2952;
  --bg:#FFFFFF;
  --bg-subtle:#F4F6FB;
  --tint-blue:#EDF4FB;
  --gold:#FFD500; /* スコア・数値の第3色（既にsb-num/period-countで単発使用していた値をトークン化） */
  /* 出現・スコア系の統一イージング（easeOutExpo系: 速く入ってスッと止まる） */
  --ease-sport:cubic-bezier(0.16,1,0.3,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1); /* Framer風の軽いオーバーシュート */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.8;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
/* キーボード操作時のフォーカスリング（a11y。マウス操作では出ない）
   2026-08-14: ここに border-radius:4px を書いていたため、フォーカス時に
   ボタン自身の角丸（.menu-btn / .head-audition = 999px のピル）が4pxに潰れて
   「形が勝手に変わる」挙動になっていた。outline は要素の border-radius に
   自動で追従するので、ここで角丸を指定してはいけない */
a:focus-visible,button:focus-visible{outline:3px solid var(--coral);outline-offset:3px}

/* ===== 最小ヘッダー ===== */
.p-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 28px;
  transition:background .3s,box-shadow .3s,padding .35s var(--ease-sport);
}
.p-header.is-scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(30,41,82,.08);
  padding:12px 28px;
}
.p-header.is-shrunk{padding:9px 28px}
.p-header .logo{
  display:inline-flex;
  padding:8px 16px;
  background:rgba(255,255,255,.9);
  border-radius:12px;
  backdrop-filter:blur(6px);
  transition:background .3s,padding .35s var(--ease-sport),border-radius .35s var(--ease-sport);
}
.p-header.is-scrolled .logo{background:transparent;padding:8px 0}
.p-header.is-shrunk .logo{background:transparent;padding:5px 0;border-radius:10px}
.p-header .logo img{height:36px;width:auto;transition:height .35s var(--ease-sport)}
.p-header.is-shrunk .logo img{height:28px}
.p-header .head-right{display:flex;align-items:center;gap:16px}
.p-header .head-audition{
  white-space:nowrap;
  padding:10px 24px;
  border-radius:999px;
  background:var(--coral);
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  transition:transform .2s,box-shadow .2s,padding .35s var(--ease-sport),font-size .35s var(--ease-sport);
}
.p-header.is-shrunk .head-audition{padding:8px 20px;font-size:12px}
.p-header .head-audition:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(255,46,136,.35)}
.menu-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:0;
  background:rgba(255,255,255,.9);
  border-radius:999px;
  padding:10px 18px;
  font-family:inherit;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--ink);
  text-transform:uppercase;
  cursor:pointer;
  transition:padding .35s var(--ease-sport);
}
.p-header.is-shrunk .menu-btn{padding:8px 15px}
.menu-btn i{
  display:block;
  width:16px;
  height:2px;
  background:var(--ink);
  position:relative;
}
.menu-btn i::before,.menu-btn i::after{
  content:'';
  position:absolute;
  left:0;right:0;
  height:2px;
  background:var(--ink);
}
.menu-btn i::before{top:-5px}
.menu-btn i::after{top:5px}

/* ===== フルスクリーンメニュー ===== */
.menu-overlay{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(30,41,82,.98);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:84px 0 40px;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s;
}
@media(min-height:600px){
  .menu-overlay{justify-content:center;padding:0}
}
.menu-overlay.is-open{opacity:1;visibility:visible}
.menu-overlay a{
  color:#fff;
  font-size:clamp(22px,4vw,30px);
  font-weight:900;
  padding:10px 30px;
  letter-spacing:.04em;
  /* 2026-08-14: 未指定だと small(display:block) 内の英字が左寄せになり、
     日本語ラベルの中心から最大78pxずれていた（AUDITION等の長い項目ほど顕著） */
  text-align:center;
}
.menu-overlay a small{
  display:block;
  font-size:10px;
  font-weight:800;
  letter-spacing:.2em;
  color:var(--coral);
  text-transform:uppercase;
  /* letter-spacing は最後の文字の右にも入るため、その分だけ左に寄って見えるのを打ち消す */
  text-indent:.2em;
}
.menu-overlay a:hover{color:var(--coral)}
.menu-close{
  position:absolute;
  top:24px;
  right:28px;
  border:0;
  background:transparent;
  color:#fff;
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  cursor:pointer;
  padding:10px;
}

/* ===== FV ===== */
.fv{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--navy);
}
.fv-kv{position:absolute;inset:0}
.fv-kv img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* 2026-08-07: ケンバーンズ（26秒かけて1.12倍→等倍のズーム）を停止（inoue指示）。
     KVは静止させ、表示直後のピント合わせ（blurFocus）だけ残す。
     ズームが無くなったので transform-origin も不要になり削除 */
  animation:blurFocus 1s var(--ease-sport) both;
}
/* KV表示直後のピント合わせ演出（チェンソーマン/FF7 REBIRTH型・実ブラウザ確認済みの手法） */
@keyframes blurFocus{
  from{filter:blur(20px)}
  to{filter:blur(0)}
}
.fv::after{ /* B案採用: 白へのフェード自体はそのまま維持しつつ、上端をダイアゴナルカットに */
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:62%;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 34%,rgba(255,255,255,.92) 62%,#fff 100%);
  clip-path:polygon(0 16%,100% 0%,100% 100%,0% 100%);
  pointer-events:none;
}
.fv-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 28px 34px;
}
.fv-copy{
  font-size:clamp(40px,7.2vw,96px);
  font-weight:900;
  line-height:1.28;
  letter-spacing:.02em;
  color:var(--ink);
  text-shadow:
    0 0 14px rgba(255,255,255,.95),
    0 0 34px rgba(255,255,255,.9),
    0 0 70px rgba(255,255,255,.8);
}
.fv-copy .row{display:block}
.fv-copy .row b{color:var(--coral)}
/* 日本語組版3点セット（style.cssで実測検証済みの前例を移植。非対応ブラウザは宣言無視で無害）
   本文系 = pretty / 見出し系 = balance */
.fv-sub,.story-body,.support-card p,.cond-list li,.flow-body p,
.faq-a-inner,.final p,.aud-note,.news-row strong,.faq-q,
main p,main li{
  text-wrap:pretty;
  word-break:auto-phrase;
  line-break:strict;
}
/* ボタン・ラベル内の折返し禁止（「フォロ｜ー」2行折れ対策） */
.fv-copy,.story-copy,.sec-head-ja,.final h2,.audition-right h3,
.support-card h3,.flow-body h3{
  text-wrap:balance;
  word-break:auto-phrase;
  line-break:strict;
}
/* 中間幅で手動<br>を殺す（二重改行防止） */
.br-wide{display:none}
@media(min-width:901px){.br-wide{display:inline}}
.fv-sub{
  margin-top:14px;
  font-size:clamp(13px,1.6vw,16px);
  font-weight:700;
  color:var(--ink-mid);
  text-shadow:0 0 10px rgba(255,255,255,.9),0 0 26px rgba(255,255,255,.8);
}
.fv-eyebrow{display:inline-block;background:rgba(255,255,255,.68);padding:4px 14px;border-radius:999px;backdrop-filter:blur(2px)}
.fv-bottom{
  margin-top:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.fv-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 42px;
  border-radius:999px;
  background:var(--coral);
  color:#fff;
  font-size:15px;
  font-weight:900;
  letter-spacing:.06em;
  box-shadow:0 8px 28px rgba(255,46,136,.35);
  transition:transform .2s,box-shadow .2s;
}
.fv-cta:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,46,136,.45)}
.fv-trust{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  font-size:11px;
  font-weight:700;
  color:var(--ink-mid);
}
.fv-trust .pill{
  padding:5px 12px;
  border:1px solid rgba(30,41,82,.22);
  border-radius:999px;
  background:rgba(255,255,255,.75);
}
.fv-trust a.op{
  white-space:nowrap;
  text-decoration:underline;
  text-underline-offset:3px;
}
.fv-trust a.op:hover{color:var(--coral)}

/* ===== 共通セクション ===== */
.sec{padding:110px 28px}
.sec-inner{max-width:1080px;margin:0 auto}
.sec-tag{
  font-family:'Inter',sans-serif;
  font-size:clamp(46px,8vw,110px);
  font-weight:900;
  line-height:.9;
  letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:clamp(.6px,.14vw,1.4px) rgba(30,41,82,.18);
  text-transform:uppercase;
  user-select:none;
}
/* 2026-08-07: 半透明(6%)→不透明へ。VISION/ABOUTの帯の上端が見出しの中央を横切るため、
   半透明だと境目が文字の中を素通りして線に見える。濃さも上げて要素として立たせた
   （白地での対比 1.12 → 2.08）。全ページ共通 */
.sec-tag.fill{color:#A2B5D4;-webkit-text-stroke:0}
.sec-head-ja{
  margin-top:-0.6em;
  position:relative;
  font-size:clamp(22px,3.4vw,32px);
  font-weight:900;
}
.rv{opacity:0;transform:translateY(26px);transition:opacity .45s var(--ease-sport),transform .45s var(--ease-sport)}
.rv.on{opacity:1;transform:none}

/* ===== STORY ===== */
.story{padding:80px 28px;position:relative;overflow:hidden}   /* 2026-08-01 点線廃止に伴い詰めた（旧110/96） */
/* sticky演出はindex専用（.story--pin）。通常の.story（about等）は内容ぶんの高さ＝空白を作らない。
   ピン留め中はgridがビューポート全高＋中央寄せになるため「下だけ空白」が視界に入らない */
.story--pin{min-height:150vh;padding-top:0;padding-bottom:0}
.story--pin .story-grid{position:sticky;top:0;min-height:100vh;min-height:100svh;align-content:center}
/* 2026-07-31: 装飾MISSION（右端・150px上限の::before）を廃止し、他セクションと同じ
   .sec-tag 要素に統一（左端・110px上限・見出しが -0.6em 食い込む作法）。旧実装はgit履歴参照 */
.story .tag-wrap{max-width:1080px;margin:0 auto}
/* 2026-08-11: 他セクションはタグに見出しを重ねる設計（-10〜-19px）だが、VISIONは続くのが
   小さい見出しでなく大きな3行コピーのため同じ詰め方だと衝突する。110pxの英字に対し余白を確保 */
.story .story-grid{margin-top:34px}
@media(max-width:900px){.story .story-grid{margin-top:22px}}
.story-grid{
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:56px;
  align-items:center;
}
.story-copy{
  font-size:clamp(30px,4.8vw,52px);
  font-weight:900;
  line-height:1.42;
  letter-spacing:.01em;
  text-align:left;
}
.story-line{display:block}
/* 行の順次強調（dim→active）はsticky演出（.story--pin）専用。通常表示では常に全行フル表示 */
.story--pin .story-line{
  opacity:.55;
  transform:translateY(10px);
  transition:opacity .6s ease,transform .6s var(--ease-sport);
}
.story--pin .story-line.is-story-active{opacity:1;transform:none}
.story-copy .accent{
  color:var(--coral);
  position:relative;
  padding:0 .04em;
}
/* 2026-08-07: 「熱」の下線アニメ（story-draw）と、その代替だったピンク帯（accent::after）を
   まとめて削除（inoue指示）。.accent はコーラルの文字色だけを担う。旧実装はgit履歴参照 */
.story-body{
  font-size:14.5px;
  color:var(--ink-mid);
  line-height:2.4;
  text-align:left;
  border-left:2px solid var(--coral);
  padding-left:26px;
}
.story--pin .story-body{
  opacity:.62;
  transform:translateY(10px);
  transition:opacity .6s ease,transform .6s var(--ease-sport);
}
.story--pin .story-body.is-story-active{opacity:1;transform:none}

/* ===== NEWS =====
   STORY直後は巨大見出しの連打を避け、控えめなサイズでメリハリを作る */
#latest-news{padding-top:60px;padding-bottom:80px}   /* 2026-08-01 点線廃止に伴い詰めた */
#latest-news .sec-tag{font-size:clamp(26px,4vw,44px)}
#latest-news .sec-head-ja{margin-top:-.3em}
.news-list{margin-top:44px;border-top:1px solid rgba(30,41,82,.12)}
.news-row{
  display:grid;
  grid-template-columns:110px 90px minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:22px 6px;
  border-bottom:1px solid rgba(30,41,82,.12);
  transition:background .2s;
}
.news-row:hover{background:var(--bg-subtle)}
.news-row time{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;color:var(--ink-subtle)}
.news-row .cat{
  /* 2026-08-12: 矢印リボン型(clip-path)を廃止（inoue「形が微妙」）。
     左右が尖ると文字との間隔が詰まって窮屈に見えるため、素直な角丸に */
  justify-self:start;
  padding:4px 12px;
  border-radius:4px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  color:#fff;
  background:var(--coral);
}
.news-row strong{font-size:14px;font-weight:700}
/* 2026-08-12: カテゴリフィルタが効いていなかった修正。
   JS は row.hidden = true にしていたが、.news-row{display:grid} が
   hidden属性の display:none（UAスタイル）に勝って消えていなかった。
   .news-empty も同じ理由で hidden が効かないため合わせて指定する */
.news-row[hidden],.news-empty[hidden]{display:none}
.news-row .arw{font-family:'Inter',sans-serif;font-weight:900;color:var(--ink-subtle)}
.news-foot{
  /* 2026-08-12: 公式YouTubeカードを追加しX/YouTubeの2枚並びになったため、
     カード側をひとまとめにして「すべてのニュース→」と分離する */
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  margin-top:26px;
}
.news-more{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--ink-mid);
  text-decoration:underline;
  text-underline-offset:4px;
}
.news-more:hover{color:var(--coral)}

/* X フォローバナー（静的・数字は出さない） */


/* ===== AUDITION ===== */
.audition{background:var(--bg-subtle)}
.audition-box{
  margin-top:44px;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:0;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(30,41,82,.12);
}
.audition-left{
  padding:46px 44px;
  padding-top:72px;
  background:var(--navy);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  position:relative;
  overflow:hidden;
}
.audition-left::after{
  content:'1ST GEN';
  position:absolute;
  right:-8px;
  bottom:-14px;
  font-family:'Inter',sans-serif;
  font-size:84px;
  font-weight:900;
  color:rgba(255,255,255,.05);
  line-height:1;
}
.sb-top{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Inter',sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
}
.sb-top i{
  width:8px;height:8px;border-radius:50%;
  background:var(--coral);
}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.4}}
.sb-count{margin:22px 0 10px;display:flex;align-items:baseline;gap:10px}
.sb-count .label{font-size:13px;font-weight:700;color:rgba(255,255,255,.75)}
.sb-count .num{font-family:'Inter',sans-serif;font-size:64px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;color:var(--gold);position:relative;display:inline-block}
.sb-count .unit{font-size:15px;font-weight:700}
.sb-count.is-closed .num,.sb-count.is-closed .unit{display:none}
/* CountUp着地の軽いspring punch（実データのカウントダウンのみに適用・疑似ライブ演出ではない） */
@keyframes numPunch{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}}
[data-audition-count].is-punch .num{animation:numPunch .5s var(--ease-spring) both;display:inline-block}
.sb-foot{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.7)}
.sb-foot b{color:#fff}
.audition-right{
  padding:46px 44px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:18px;
  justify-content:center;
}
.audition-right h3{font-size:21px;font-weight:900}
.aud-points{display:flex;flex-wrap:wrap;gap:8px}
.aud-points span{
  padding:7px 14px;
  border:1px solid rgba(30,41,82,.16);
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:var(--ink-mid);
}
.aud-points span.free{border-color:var(--coral);color:var(--coral);font-weight:900}
.aud-cta{
  align-self:flex-start;
  display:inline-flex;
  padding:14px 36px;
  border-radius:999px;
  background:var(--coral);
  color:#fff;
  font-size:14px;
  font-weight:900;
  box-shadow:0 8px 24px rgba(255,46,136,.3);
  transition:transform .2s;
}
.aud-cta:hover{transform:translateY(-2px)}
/* 2026-08-10: 11px は小さすぎるとの指摘で 12.5px＋色を1段濃く（ink-subtle→ink-mid） */
.aud-note{font-size:12.5px;color:var(--ink-mid);line-height:2.05}
.aud-faq{
  font-size:12px;
  font-weight:700;
  color:var(--ink-mid);
  text-decoration:underline;
  text-underline-offset:4px;
}
.aud-faq:hover{color:var(--coral)}

/* ===== MOVIE（PV完成まで非表示。HTML側でコメントアウト） ===== */
.movie{background:var(--navy);color:#fff}
.movie-frame{
  margin-top:44px;
  aspect-ratio:16/9;
  max-width:840px;
  margin-left:auto;
  margin-right:auto;
  border-radius:16px;
  overflow:hidden;
  background:#000;
}
.movie-frame iframe{width:100%;height:100%;border:0}

/* ===== FINAL CTA ===== */
.final{
  position:relative;
  padding:160px 28px 130px;
  text-align:center;
  background:
    linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.96)),
    var(--bg-subtle);
  overflow:hidden;
}
.final::before{
  content:'JOIN US';
  position:absolute;
  left:50%;
  top:14px;
  transform:translateX(-50%);
  font-family:'Inter',sans-serif;
  font-size:clamp(70px,14vw,180px);
  font-weight:900;
  /* 2026-08-12: 旧 rgba(30,41,82,.05)。英字見出しを #A2B5D4 に濃くした際ここだけ
     取り残され、JOIN USだけ薄く見えていた（inoue指摘）。他セクションと同色に統一 */
  color:#A2B5D4;
  white-space:nowrap;
  line-height:1;
}
.final h2{position:relative;font-size:clamp(26px,4.4vw,42px);font-weight:900;line-height:1.6}
/* 2026-08-10: max-width 560px だと2行に割れるため 660px に（実測で640pxから1行） */
.final p{position:relative;margin:20px auto 34px;max-width:660px;font-size:14px;color:var(--ink-mid);line-height:2.2}
.final .fv-cta{position:relative}
.draw-cta-outline{overflow:visible}
.draw-cta-outline svg{
  position:absolute;
  inset:-5px;
  width:calc(100% + 10px);
  height:calc(100% + 10px);
  pointer-events:none;
  overflow:visible;
}
.draw-cta-outline rect{
  fill:none;
  stroke:var(--coral);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:520;
  stroke-dashoffset:520;
  transition:stroke-dashoffset 1s var(--ease-sport) .12s;
}
.draw-cta-outline.is-drawn rect{stroke-dashoffset:0}
.draw-cta-outline span{position:relative;z-index:1}
.final-company{
  position:relative;
  margin-top:38px;
  font-size:11px;
  color:var(--ink-subtle);
}
.final-company a{text-decoration:underline;text-underline-offset:3px}
.final-company a:hover{color:var(--coral)}

/* ===== FOOTER ===== */
.p-footer{
  padding:52px 28px 44px;
  background:var(--navy);
  color:rgba(255,255,255,.8);
  text-align:center;
  font-size:12px;
}
.p-footer .pf-logo img{height:44px;width:auto;margin:0 auto 22px;filter:brightness(0) invert(1)}
.p-footer nav{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.p-footer nav a:hover{color:#fff}
.p-footer .pf-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:20px;font-size:11px;color:rgba(255,255,255,.6)}
.p-footer .pf-links a:hover{color:#fff}
.p-footer .pf-copy{color:rgba(255,255,255,.55);line-height:2}

/* ===== FLOAT CTA ===== */
.float-cta{
  position:fixed;
  bottom:1.4rem;
  right:1.4rem;
  z-index:60;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .3s,transform .3s,visibility .3s;
  pointer-events:none;
}
.float-cta.is-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.float-cta a{
  display:inline-flex;
  align-items:center;
  padding:.8rem 1.6rem;
  background:var(--coral);
  color:#fff;
  border-radius:999px;
  font-weight:800;
  font-size:.85rem;
  box-shadow:0 6px 20px rgba(255,46,136,.4);
}

/* ===== ディテール（2026-07-06 ブラッシュアップ） ===== */

/* マーカー下線ホバー（蛍光ペン風・agehasprings型）
   resting時も細い下地を出してリンクと分かるように（タッチ端末対応） */
.mk-link{
  text-decoration:none;
  background-image:linear-gradient(transparent 90%,rgba(255,46,136,.4) 90%);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:left bottom;
  transition:background-image .3s ease;
}
.mk-link:hover{
  background-image:linear-gradient(transparent 62%,rgba(255,46,136,.26) 62%);
}

/* 遅延フェードシーケンス（GUNDAM型 stagger） */
.rv.on .news-row,
.rv.on .aud-points span{
  animation:childIn .5s var(--ease-sport) both;
}
@keyframes childIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
.rv.on .news-row:nth-child(1){animation-delay:.05s}
.rv.on .news-row:nth-child(2){animation-delay:.2s}
.rv.on .news-row:nth-child(3){animation-delay:.35s}
.rv.on .aud-points span:nth-child(1){animation-delay:.05s}
.rv.on .aud-points span:nth-child(2){animation-delay:.13s}
.rv.on .aud-points span:nth-child(3){animation-delay:.21s}
.rv.on .aud-points span:nth-child(4){animation-delay:.29s}
.rv.on .aud-points span:nth-child(5){animation-delay:.37s}
.rv.on .aud-points span:nth-child(6){animation-delay:.45s}

/* ホバーはopacity基調（フッター・オーバーレイ） */
.p-footer a{transition:opacity .25s ease}
.p-footer a:hover{opacity:.7;color:inherit}

/* FV回転バッジ（実情報のみ・GUNDAM型 15s） */
.fv-badge{
  position:absolute;
  right:88px;
  bottom:96px;
  z-index:3;
  width:118px;
  height:118px;
  pointer-events:none;
}
.fv-badge svg{
  width:100%;
  height:100%;
  animation:badgeSpin 18s linear;
  animation-iteration-count:1;
  animation-fill-mode:both;
}
.fv-badge text{
  font-family:'Inter',sans-serif;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  fill:var(--ink);
}
.fv-badge circle{fill:none;stroke:rgba(30,41,82,.25);stroke-width:1}
@keyframes badgeSpin{to{transform:rotate(360deg)}}
@media(max-width:900px){.fv-badge{display:none}}

/* 折返し禁止（pill・タグ類） */
.fv-trust .pill,.aud-points span{white-space:nowrap}

/* 募集終了状態のperiod-count（長文ラベルでgridを壊さない） */
.period-count.is-closed{max-width:220px}
.period-count.is-closed .label{white-space:normal;line-height:1.7}

/* Xフォローバナーの狭幅対応 */
@media(max-width:480px){
}

/* ドット区切り線（radial-gradient反復・画像不要） */
.dot-sep{
  height:5px;
  background:radial-gradient(circle,rgba(255,46,136,.4) 2px,transparent 2.5px) left center/22px 5px repeat-x;
  max-width:1080px;
  margin:0 auto;
}

/* ================================================================
   AUDITION ページ（v2）
================================================================ */
.fv--sub{min-height:82vh;min-height:82svh}
.fv--sub .fv-copy{font-size:clamp(30px,5.2vw,64px);line-height:1.4}
/* period-cardの-52px食い込みぶんの逃げ代（trust pill行を覆わないように） */
.fv--sub .fv-inner{padding-bottom:100px}

/* 募集期間カード（にじさんじVTA型） */
.period-card{
  max-width:calc(1080px + 56px);
  margin:-52px auto 0;
  position:relative;
  z-index:5;
  padding:0 28px;
}
.period-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;
  gap:26px;
  align-items:center;
  background:var(--navy);
  color:#fff;
  border-radius:16px;
  padding:30px 40px;
  box-shadow:0 20px 50px rgba(30,41,82,.25);
}
.period-block{display:flex;flex-direction:column;gap:2px}
.period-block small{
  font-family:'Inter',sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:.2em;
  color:var(--coral);
}
.period-block strong{
  font-family:'Inter',sans-serif;
  font-size:clamp(26px,3.6vw,40px);
  font-weight:900;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.period-block span{font-size:11px;color:rgba(255,255,255,.65)}
.period-arrow{
  font-family:'Inter',sans-serif;
  font-size:22px;
  font-weight:900;
  color:rgba(255,255,255,.4);
}
.period-count{
  justify-self:end;
  text-align:right;
  border-left:1px solid rgba(255,255,255,.18);
  padding-left:26px;
}
.period-count .label{display:block;font-size:11px;font-weight:700;color:rgba(255,255,255,.7)}
.period-count .num{
  font-family:'Inter',sans-serif;
  font-size:44px;
  font-weight:900;
  line-height:1.1;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
  /* 桁送りの .sb-cells(position:absolute) の基準になる。
     入れ忘れると基準が別の祖先へ飛び、数字が壊れて表示される
     （2026-08-02: .sb-count にだけ入れて audition 側を落としていた） */
  position:relative;
  display:inline-block;
}
.period-count .unit{font-size:13px;font-weight:700}
.period-count.is-closed .num,.period-count.is-closed .unit{display:none}

/* 待遇・サポート／活動内容カード */
.support-grid{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}
.support-card{
  background:#fff;
  border:1px solid rgba(30,41,82,.12);
  border-radius:14px;
  padding:26px 24px;
}

/* ===== entrance: support-card/flow-cardのspring stagger出現
   親(.rv)のfadeUpに乗せて、子カードが1枚ずつ弾みながら現れる。JS変更不要（既存.rv.onを流用） ===== */
@keyframes cardSpringIn{
  from{opacity:0;transform:translateY(24px) scale(.93)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.support-grid .support-card,.flow-list .flow-card{opacity:0;transform:translateY(24px) scale(.93)}
.support-grid.on .support-card,.flow-list.on .flow-card{
  animation:cardSpringIn .65s var(--ease-spring) both;
}
.support-grid.on .support-card:nth-child(1),.flow-list.on .flow-card:nth-child(1){animation-delay:.05s}
.support-grid.on .support-card:nth-child(2),.flow-list.on .flow-card:nth-child(2){animation-delay:.14s}
.support-grid.on .support-card:nth-child(3),.flow-list.on .flow-card:nth-child(3){animation-delay:.23s}
.support-grid.on .support-card:nth-child(4),.flow-list.on .flow-card:nth-child(4){animation-delay:.32s}
.support-grid.on .support-card:nth-child(5),.flow-list.on .flow-card:nth-child(5){animation-delay:.41s}

/* ===== カードホバー（spring浮き上がり。マウス追従スポットライトは2026-07-09にinoue判断で削除＝カーソル光彩却下に統一） ===== */
.support-card,.flow-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .5s var(--ease-spring),border-color .3s ease,box-shadow .4s var(--ease-spring);
}
.support-card:hover,.flow-card:hover{
  border-color:rgba(255,46,136,.45);
  transform:translateY(-9px) scale(1.03);
  box-shadow:0 26px 54px rgba(30,41,82,.18);
}
.support-card:active,.flow-card:active{transform:translateY(-3px) scale(.98)}
.support-card > *,.flow-card > *{position:relative;z-index:1}
.support-card .sc-num,.flow-num{transition:transform .4s var(--ease-spring)}
.support-card:hover .sc-num{transform:scale(1.3) rotate(-4deg)}
.flow-card:hover .flow-num{transform:scale(1.16) rotate(-3deg)}
@media(prefers-reduced-motion:reduce){
  .support-card,.flow-card,.support-card:hover,.flow-card:hover,
  .support-card .sc-num,.flow-card:hover .flow-num{transition:none;transform:none}
}
.support-card .sc-num{
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:900;
  letter-spacing:.1em;
  color:var(--coral);
}
/* カードアイコン（視覚的な差別化。カテゴリごとに違う線画を入れる） */
.card-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--bg-subtle);
  margin-bottom:14px;
}
.card-icon svg{width:22px;height:22px;stroke:var(--coral);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.support-card:hover .card-icon{background:rgba(255,46,136,.12)}

/* ===== 5枚カードの3+2中央寄せグリッド（6列トラックでnth-childを配置） ===== */
.support-grid.is-five{grid-template-columns:repeat(6,1fr)}
.support-grid.is-five .support-card:nth-child(1){grid-column:1/3}
.support-grid.is-five .support-card:nth-child(2){grid-column:3/5}
.support-grid.is-five .support-card:nth-child(3){grid-column:5/7}
.support-grid.is-five .support-card:nth-child(4){grid-column:2/4}
.support-grid.is-five .support-card:nth-child(5){grid-column:4/6}
@media(max-width:900px){
  .support-grid.is-five{grid-template-columns:repeat(2,1fr)}
  .support-grid.is-five .support-card:nth-child(n){grid-column:auto}
}
@media(max-width:560px){
  .support-grid.is-five{grid-template-columns:1fr}
}
.support-card h3{margin:10px 0 8px;font-size:16px;font-weight:900;line-height:1.6}
.support-card p{font-size:12.5px;color:var(--ink-mid);line-height:2}

/* 応募条件 3分類カード */
.req-lead{
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  /* 2026-08-12: 上を -6px → 36px（inoue指摘）。CREATOR/REQUIREMENTSだけ
     見出しにリード文が食い込んでいた。44pxは広すぎたため、MESSAGEと同じ36pxに統一。
     audition内の見出し直下ブロック（.support-grid / .flow-list / .faq-list / .cond-grid）も
     同じ36pxに揃えてある。PARTNERSHIPは横の画像との兼ね合いで現状維持（inoue判断） */
  margin:36px 0 26px;
  line-height:1.9;
}
.cond-grid{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  align-items:start;
}
.cond-card{
  background:#fff;
  border:1px solid rgba(30,41,82,.12);
  border-radius:14px;
  overflow:hidden;
}
.cond-card.must{border-top:4px solid var(--coral)}
.cond-card.want{border-top:4px solid var(--navy)}
.cond-card.etc{border-top:4px solid rgba(30,41,82,.25)}
.cond-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px 0;
  font-size:16px;
  font-weight:900;
}
.cond-head em{
  font-style:normal;
  font-family:'Inter',sans-serif;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  color:var(--ink-subtle);
  text-transform:uppercase;
}
.cond-list{padding:14px 22px 22px;display:grid;gap:10px}
.cond-list li{
  list-style:none;
  position:relative;
  padding-left:18px;
  font-size:13px;
  line-height:1.9;
  color:var(--ink-mid);
}
.cond-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:.75em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--coral);
}
.cond-card.want .cond-list li::before{background:var(--navy)}
.cond-card.etc .cond-list li::before{background:rgba(30,41,82,.35)}

/* 選考フロー（番号カード・スポーツ比喩） */
.flow-list{margin-top:36px;display:grid;gap:14px;position:relative}
.flow-card{
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  gap:22px;
  align-items:center;
  background:#fff;
  border:1px solid rgba(30,41,82,.12);
  border-radius:14px;
  padding:22px 26px;
}
.flow-num{
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--navy);
  color:#fff;
  border-radius:10px;
}
.flow-num b{
  font-family:'Inter',sans-serif;
  font-size:26px;
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.flow-num small{
  font-family:'Inter',sans-serif;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.12em;
  color:rgba(255,255,255,.65);
  margin-top:4px;
}
.flow-body .flow-tag{
  font-family:'Inter',sans-serif;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  color:var(--coral);
  text-transform:uppercase;
}
.flow-body h3{margin:4px 0 4px;font-size:17px;font-weight:900}
.flow-body p{font-size:12.5px;color:var(--ink-mid);line-height:1.9}
.flow-card.is-goal{
  background:var(--navy);
  color:#fff;
  border:0;
}
.flow-card.is-goal .flow-num{background:var(--coral)}
.flow-card.is-goal h3{color:#fff}
.flow-card.is-goal p{color:rgba(255,255,255,.75)}
.flow-notes{
  margin-top:26px;
  font-size:11.5px;
  color:var(--ink-subtle);
  line-height:2.1;
}
.flow-notes li{list-style:none}
/* 応募条件セクションのみ詰める（2026-08-10 inoue指示。注記が5件→1件になり余白が空いたため） */
#requirements{padding-top:56px;padding-bottom:44px}
#requirements .flow-notes{margin-top:18px}

/* FAQ（v2アコーディオン） */
.faq-list{margin-top:36px;display:grid;gap:12px}
.faq-item{
  background:#fff;
  border:1px solid rgba(30,41,82,.12);
  border-radius:12px;
  overflow:hidden;
}
.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 22px;
  border:0;
  background:transparent;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.faq-q .q-mark{
  flex:0 0 auto;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--navy);
  color:#fff;
  border-radius:8px;
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:900;
}
.faq-q .q-icon{
  margin-left:auto;
  flex:0 0 auto;
  width:14px;
  height:14px;
  position:relative;
}
.faq-q .q-icon::before,.faq-q .q-icon::after{
  content:'';
  position:absolute;
  inset:0;
  margin:auto;
  background:var(--coral);
  transition:transform .25s ease;
}
.faq-q .q-icon::before{width:14px;height:2px}
.faq-q .q-icon::after{width:2px;height:14px}
.faq-item.is-open .faq-q .q-icon::after{transform:rotate(90deg)}
.faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .3s ease;
}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a-inner{
  overflow:hidden;
  padding:0 22px;
  font-size:13px;
  color:var(--ink-mid);
  line-height:2.1;
}
.faq-item.is-open .faq-a-inner{padding-bottom:20px}

@media(max-width:780px){
  .period-inner{grid-template-columns:1fr;gap:14px;padding:26px 26px}
  .period-arrow{display:none}
  .period-count{justify-self:start;text-align:left;border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.18);padding-top:14px}
  .flow-card{grid-template-columns:64px minmax(0,1fr);padding:18px}
}

/* ================================================================
   サブページ共通（about / news / contact / guideline / 404）
================================================================ */
.page-hero{
  padding:150px 28px 30px;
  background:linear-gradient(to bottom,var(--bg-subtle),#fff);
}
.page-hero-inner{max-width:1080px;margin:0 auto}
.page-hero .sec-tag{font-size:clamp(40px,7vw,92px)}
.page-hero .page-note{
  margin-top:14px;
  max-width:640px;
  font-size:13.5px;
  color:var(--ink-mid);
  line-height:2.1;
  text-wrap:pretty;
  word-break:auto-phrase;
  line-break:strict;
}

/* Newsフィルタ */
.news-filter{
  display:flex;
  gap:8px;
  margin-top:22px;
}
.news-filter button{
  padding:8px 20px;
  border:1px solid rgba(30,41,82,.2);
  border-radius:999px;
  background:#fff;
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--ink-mid);
  cursor:pointer;
  transition:all .2s ease;
}
.news-filter button.active{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}
.news-empty{
  padding:40px 0;
  text-align:center;
  font-size:13px;
  color:var(--ink-subtle);
}

/* aboutブランドポスター（navyカード） */
.poster-card{
  background:
    linear-gradient(155deg,rgba(30,41,82,.72) 10%,rgba(30,41,82,.94) 60%,rgba(30,41,82,.98) 100%),
    url('../images/kv-main.jpg') center 20%/cover no-repeat,
    var(--navy);
  color:#fff;
  border-radius:16px;
  padding:34px 32px;
  min-height:340px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:18px;
  position:relative;
  overflow:hidden;
}
.poster-card::after{
  content:'STAGA!';
  position:absolute;
  right:-6px;
  bottom:-12px;
  font-family:'Inter',sans-serif;
  font-size:72px;
  font-weight:900;
  color:rgba(255,255,255,.06);
  line-height:1;
}
.poster-line{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  font-family:'Inter',sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--coral);
}
.poster-card strong{
  font-size:clamp(24px,3vw,32px);
  font-weight:900;
  line-height:1.6;
}
.poster-card p{
  font-size:12.5px;
  color:rgba(255,255,255,.75);
  line-height:2;
}

/* ガイドライン等の長文プローズ */
.prose{
  max-width:760px;
  margin:0 auto;
  font-size:14px;
  line-height:2.2;
  color:var(--ink-mid);
  text-wrap:pretty;
  word-break:auto-phrase;
  line-break:strict;
}
.prose h2{
  margin:46px 0 14px;
  font-size:19px;
  font-weight:900;
  color:var(--ink);
  padding-left:14px;
  border-left:4px solid var(--coral);
  line-height:1.6;
}
.prose p{margin:0 0 14px}
.prose strong{color:var(--ink)}
.prose ol{
  margin:0 0 14px;
  padding-left:0;
  counter-reset:proseNum;
  display:grid;
  gap:10px;
}
.prose ol li{
  list-style:none;
  position:relative;
  padding-left:34px;
  counter-increment:proseNum;
}
.prose ol li::before{
  content:counter(proseNum,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.35em;
  font-family:'Inter',sans-serif;
  font-size:11px;
  font-weight:900;
  color:var(--coral);
}
.prose .revised{
  margin-top:36px;
  font-size:12px;
  color:var(--ink-subtle);
}

/* オーディションカウントダウンの状態バッジ(受付開始前/受付中/受付終了)。
   絶対配置にすることで.audition-leftのflex子要素・.period-innerのgrid子要素を一切変更しない */
.audition-left,.period-inner{position:relative}
.state-badge{
  position:absolute;
  top:22px;right:26px;
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Inter',sans-serif;font-size:10px;font-weight:900;letter-spacing:.1em;
  padding:4px 12px;border-radius:999px;
  z-index:2;
}
.state-badge i{width:6px;height:6px;border-radius:50%;display:inline-block}
.state-badge.is-standby{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7)}
.state-badge.is-standby i{background:rgba(255,255,255,.5)}
.state-badge.is-live{background:rgba(255,46,136,.22);color:#ff9dc7;text-shadow:0 0 10px rgba(255,157,199,.6)}
.state-badge.is-live i{background:#ff9dc7;animation:dotPulse 1.4s ease-in-out infinite}
/* 受付中は募集期間(8/15-9/6)のあいだ常時立つ＝この点滅も常時走る。
   reduced-motion では止める（他の無限アニメと同じ扱い・2026-08-02） */
@media(prefers-reduced-motion:reduce){
  .state-badge.is-live i{animation:none}
}
.state-badge.is-ended{background:rgba(255,255,255,.08);color:rgba(255,255,255,.4)}
/* period-count内は通常フロー配置（絶対配置だとカウント列の右端(padding 40px)と14pxズレて密着するため） */
.period-count .state-badge{position:static;display:inline-flex;margin-bottom:8px}
@media(max-width:480px){
  .state-badge{top:12px;right:14px;font-size:9px;padding:3px 9px}
}

/* STATEMENT(Watch Party): KV写真の疑似パララックス流用（新規画像素材ゼロ）*/
.sec-watch-kv{
  position:relative;
  overflow:hidden;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:100px 28px;
}
.sec-watch-kv .watch-kv-bg{
  position:absolute;
  inset:-15% 0;
  background:url('../images/kv-main.jpg') center 30%/cover no-repeat;
  filter:grayscale(85%) contrast(1.05) brightness(.55);
  will-change:transform;
}
.sec-watch-kv .watch-kv-tone{
  position:absolute;
  inset:0;
  background:linear-gradient(155deg,rgba(30,41,82,.55) 10%,rgba(30,41,82,.82) 100%);
}
.sec-watch-kv .watch-kv-inner{
  position:relative;
  z-index:1;
}
@media(prefers-reduced-motion:reduce){
  .sec-watch-kv .watch-kv-bg{transform:none!important}
}

/* contactフォーム埋め込み（枠なしでページに直置き。フォーム自体は改造しない） */
.contact-embed{
  margin-top:28px;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.contact-embed iframe{
  display:block;
  width:100%;
  height:960px; /* フォーム1ページ目の実高に合わせる（長すぎると下に空白が出る）。フォーム改修時は実表示で再調整 */
  border:0;
}
.contact-note{
  margin-top:18px;
  font-size:12.5px;
  color:var(--ink-subtle);
  line-height:2.1;
}
.contact-note a{text-decoration:underline;text-underline-offset:3px}
.contact-note a:hover{color:var(--coral)}

/* 404 */
.nf{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:120px 28px 80px;
  text-align:center;
}
.nf-code{
  font-family:'Inter',sans-serif;
  font-size:clamp(110px,22vw,220px);
  font-weight:900;
  line-height:.9;
  color:rgba(30,41,82,.08);
}
.nf h1{margin:18px 0 10px;font-size:clamp(19px,2.6vw,24px);font-weight:900}
.nf p:not(.nf-code){max-width:480px;margin:0 auto 28px;font-size:13px;color:var(--ink-mid);line-height:2.1}

/* ===== Responsive ===== */
@media(max-width:780px){
  .sec{padding:72px 22px}
  .story{padding:56px 22px;min-height:auto}   /* 2026-08-01 点線廃止に伴い詰めた（旧72/44） */
  .story--pin{padding:76px 22px 44px;min-height:auto}
  .story--pin .story-grid{position:relative;top:auto;min-height:auto}
  .final{padding:84px 22px}
  .page-hero{padding:96px 22px 24px}
  .nf{padding:80px 22px 56px}
  .story-grid{grid-template-columns:1fr;gap:34px}
  .story-grid{position:relative;top:auto}
  .story-line,.story-body{opacity:1;transform:none}
  .audition-box{grid-template-columns:1fr}
  .news-row{grid-template-columns:86px minmax(0,1fr);grid-template-rows:auto auto}
  .news-row .cat{grid-row:1;grid-column:2;justify-self:end}
  .news-row strong{grid-column:1/-1}
  .news-row .arw{display:none}
  .fv-bottom{flex-direction:column;align-items:flex-start}
  .p-header{padding:14px 18px}
  .p-header.is-scrolled{padding:11px 18px}
  .p-header.is-shrunk{padding:9px 18px}
  /* モバイル初期表示（Safariツールバー表示中の縮小ビューポート）でヘッダーとFV先頭要素が重なる事故防止 */
  .fv-inner{padding-top:88px}
  .fv::after{height:78%}
  /* 説明文がKV画像の暗い部分に重なるとグローだけでは視認性不足なため、eyebrowと同じすりガラス地を敷く */
  .fv-sub:not(.fv-eyebrow){
    display:inline-block;
    background:rgba(255,255,255,.72);
    padding:7px 12px;
    border-radius:10px;
    backdrop-filter:blur(2px);
  }
  /* poster-cardのmin-height:340pxがデスクトップ2カラム基準の固定値のまま単カラムに残り、
     content(justify-content:flex-end)の上に背景だけの空白が生まれるため縮小 */
  .poster-card{min-height:220px;padding:26px 24px}
}
@media(max-width:480px){
  /* 巨大コピーの句中改行防止: 行の文字数から逆算（index=9字/audition=13字・letter-spacing分の係数込み） */
  .fv-copy{font-size:min(38px,calc((100vw - 60px) / 9.5))}
  .fv--sub .fv-copy{font-size:min(30px,calc((100vw - 60px) / 13.6))}
  .p-header .logo img{height:28px}
  .p-header.is-shrunk .logo img{height:24px}
  .p-header .logo{padding:6px 10px}
  .menu-btn{padding:9px 12px}
  .menu-btn .menu-label{display:none}
  .p-header .head-audition{
    padding:9px 16px;
    font-size:11.5px;
    white-space:nowrap;
  }
  .p-header .head-right{gap:8px}
}
@media(max-width:480px){
  /* audition FV: コンテンツ量が多く82vhだと上詰まりになる→画面いっぱいに戻して下寄せ・KVの見える領域を確保 */
  .fv--sub{min-height:100vh;min-height:100svh}
  /* 小見出しチップの「第/1期生」折返し防止（12pxなら320pxでも1行に収まる） */
  .fv-eyebrow{font-size:12px;padding:4px 10px;white-space:nowrap}
}
@media(max-width:359px){
  /* iPhone SE級: 巨大コピーの句中改行とCTAボタン内折返しを防ぐ（390px以上では発生しない） */
  .fv-copy{font-size:calc((100vw - 56px)/10)}
  .fv--sub .fv-copy{font-size:calc((100vw - 56px)/14.2)}
  .fv-cta{padding:14px 24px;font-size:13.5px;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fv-kv img,.sb-top i,.fv-badge svg,.rv.on .news-row,.rv.on .aud-points span{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .support-grid .support-card,.flow-list .flow-card{opacity:1;transform:none;animation:none}
  .support-card,.flow-card,.support-card:hover,.flow-card:hover{transition:none}
  .p-header,.p-header .logo,.p-header .logo img,.p-header .head-audition,.menu-btn,
  .story-line,.story-body,.draw-cta-outline rect{transition:none}
  .story,.story--pin{min-height:auto}
  .story-grid,.story--pin .story-grid{position:relative;top:auto;min-height:auto}
  .story-line,.story-body{opacity:1;transform:none}
  .draw-cta-outline rect{stroke-dashoffset:0}
}

/* ===== Phase12b: 見出しワイプリビール＋カウントダウン数字グロー（モック proto-scoreboard-motion.html 合意済み 2026-07-09） ===== */
/* 見出し=電光掲示板の走査線（左→右・表示時1回のみ。rvのJS発火に相乗り） */
.rv .sec-tag,.rv .sec-head-ja{clip-path:inset(0 100% 0 0)}
.rv.on .sec-tag,.rv.on .sec-head-ja{animation:wipeReveal .38s var(--ease-sport) forwards}
.rv.on .sec-head-ja{animation-delay:.08s}
@keyframes wipeReveal{to{clip-path:inset(0 0 0 0)}}
/* カウントダウン数字の一点グロー（ページ内1箇所のみ・点滅なし） */
.sb-count .num,.period-count .num{
  text-shadow:0 0 10px rgba(255,213,0,.24),0 0 22px rgba(255,213,0,.18);
  transition:text-shadow .28s ease;
}
.audition-left:hover .sb-count .num,
.period-inner:hover .period-count .num{
  text-shadow:0 0 14px rgba(255,213,0,.34),0 0 30px rgba(255,213,0,.22);
}
@media(prefers-reduced-motion:reduce){
  .rv .sec-tag,.rv .sec-head-ja{clip-path:none;animation:none}
  .sb-count .num,.period-count .num{transition:none}
}

/* 本文の太字化（2026-07-31 inoue指示「※がついていない本文は基本全て太字」）
   除外＝※注記(.flow-notes li)・キャプション(figcaption)・脚注(.final-company)・フッター */
.support-card p,.cond-list li,.flow-body p,.final p:not(.final-company),.faq-a-inner,
.story-body,.aud-note,.page-note,.about-note,.news-row strong{font-weight:700}
/* 脚注は .final p より詳細度を上げて指定を有効化（2026-07-31 監査で詳細度負けを検出） */
.final p.final-company{font-size:11px;color:var(--ink-subtle);margin-top:38px;font-weight:400}
/* FAQ閉状態を支援技術からも隠す（aria-expanded=false との整合） */
.faq-item:not(.is-open) .faq-a-inner{visibility:hidden}
.faq-item.is-open .faq-a-inner{visibility:visible}
/* 立ち絵の領域を先に確保してレイアウトシフトを防ぐ */
.about-fig img{aspect-ratio:913/1400;width:min(100%,365px)}
/* カード4枚が3+1で孤立する帯域を 2+2 に固定 */
@media(max-width:1115px){
  .support-grid:not(.is-five){grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .support-grid:not(.is-five){grid-template-columns:1fr}
}

/* ================================================================
   2026-07-30 トップ再編＋audition拡張
   - ABOUT: aboutページ解体→トップ統合（ピンストライプ地＋立ち絵。裁定=knowledge/2026-07-30-mission-about-merge.md）
   - PARTNERSHIP: データスタジアム連携（audition）
   - CREATOR: 担当クリエイター 大アイコン型（audition）
================================================================ */
/* ABOUT（index#about） */
.about-sec{position:relative;overflow:hidden;padding-top:80px;padding-bottom:80px}   /* 2026-08-01 下も80pxへ（旧110） */
.about-bg-stripes{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(30,41,82,.05) 0 2px,transparent 2px 30px)}
.about-bg-fade{position:absolute;inset:0;background:radial-gradient(110% 100% at 30% 40%,#fff 32%,rgba(255,255,255,0) 78%)}
.about-sec .sec-inner{position:relative}
/* 2026-08-01: 立ち絵を左・テキストを右へ反転し、列比を 0.8:1.2 でテキスト側を広げた。
   HTMLはテキストが先に書かれているので order で入れ替える（読み上げ順は元のまま） */
.about-grid{margin-top:6px;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
.about-copy-col{order:2}
.about-fig{order:1}
.about-copy-col{padding-top:110px}
.about-big{font-size:clamp(26px,3.2vw,38px);font-weight:900;line-height:1.55;letter-spacing:.05em}
.about-big b{color:var(--coral)}
.about-note{margin-top:22px;font-size:16px;line-height:2.15;color:var(--ink-mid)}
.about-sec .sec-inner > .rv,.about-big,.about-note{text-align:right}
.about-fig{margin:-70px 0 0;position:relative;text-align:center}
.about-fig img{position:relative;max-width:calc(100% - 28px);width:auto;height:auto;max-height:560px;display:block;margin:0 auto 0 28px;filter:drop-shadow(0 24px 42px rgba(30,41,82,.16))}
/* ===== VISION・ABOUT の帯（2026-08-07 inoue裁定 S1案） =====
   全幅・角丸なしの帯。上端が英字見出しのちょうど中央を横切り、下端はセクションの底まで。
   見出しの大きさは clamp で画面幅により変わるので、padding-top + 見出し高さ×0.5 で追従させる。
   高さの基準: .sec-tag は font-size clamp(46px,8vw,110px) / line-height .9 */
.story{--sec-pt:80px}
.about-sec{--sec-pt:80px}
.story::before,.about-sec::before{
  content:'';position:absolute;left:0;right:0;bottom:0;pointer-events:none;
  background:var(--bg-subtle);
  --tag-h:calc(clamp(46px,8vw,110px) * .9);
  top:calc(var(--sec-pt) + var(--tag-h) * .5);
}
/* 中身を帯より前に。見出しはさらに前に出して境目を隠す */
.story .tag-wrap,.story .story-grid,.about-sec .sec-inner{position:relative;z-index:1}
.story .sec-tag,.about-sec .sec-tag{position:relative;z-index:2}

.about-deco{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%) rotate(-6deg);font-family:'Inter',sans-serif;font-weight:900;font-size:clamp(64px,6.2vw,104px);line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,46,136,.17);letter-spacing:.03em;white-space:nowrap;pointer-events:none}
@media(max-width:900px){
  .about-sec{padding-top:56px;padding-bottom:56px}
  .about-grid{grid-template-columns:1fr}
  .about-copy-col{padding-top:0;order:1}       /* 縦積みでは元の順序（テキスト→立ち絵）に戻す */
  .about-fig{margin:6px 0 0;order:2}
  .about-fig img{margin:0 auto;max-height:460px;max-width:100%}
  .about-sec .sec-inner > .rv,.about-big,.about-note{text-align:left}
}
/* PARTNERSHIP（audition#partnership） */
.partner-sec{padding-top:0}
.partner-grid{margin-top:10px;align-items:center}
.partner-note{font-size:15px;line-height:2.1;color:var(--ink-mid);font-weight:700}
.partner-note+.partner-note{margin-top:14px}
.partner-fig{margin:0}
.partner-fig .p-logo{width:100%;height:auto;display:block;margin:0 0 18px}
.partner-fig .p-shot{width:100%;height:auto;border-radius:14px;border:1px solid rgba(30,41,82,.12);box-shadow:0 18px 40px rgba(30,41,82,.12)}
.partner-fig figcaption{margin-top:10px;font-size:11.5px;color:var(--ink-subtle);letter-spacing:.04em}
/* CREATOR（audition#creator） */
.creator-sec{padding-top:0}
.creator-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center;margin-top:48px}
.creator-grid a{text-decoration:none;color:inherit;display:block}
.creator-grid .cr-divide{border-left:1px solid rgba(30,41,82,.12)}
.creator-grid .cr-ava{position:relative;display:inline-block;width:min(100%,190px)}
.creator-grid .cr-ava img{width:100%;height:auto;aspect-ratio:1/1;border-radius:50%;object-fit:cover;border:1px solid rgba(30,41,82,.1);display:block}
.creator-grid .cr-x{position:absolute;right:4px;bottom:8px;width:42px;height:42px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;border:3px solid #fff;transition:background .25s ease}
.creator-grid a:hover .cr-x{background:var(--coral-dk)}
.creator-grid .cr-x svg{width:17px;height:17px;fill:#fff}
.creator-grid .cr-role{display:block;margin-top:16px;font-family:'Inter',sans-serif;font-weight:800;font-size:11px;letter-spacing:.14em;color:var(--coral-dk)}
.creator-grid .cr-name{display:block;margin-top:5px;font-size:17px;font-weight:900}
.creator-grid .cr-works{display:inline-block;margin-top:12px;font-size:11.5px;line-height:1.95;color:var(--ink-mid);text-align:left;letter-spacing:.02em}
/* 直下の span のみブロック化（2026-08-10修正: 子孫セレクタだと内側の
   white-space:nowrap スパンまでブロック化され、inline-block の shrink-to-fit 幅が
   最長nowrap語の幅（約117px）まで潰れて実績欄が過剰に折り返す） */
.creator-grid .cr-works > span{display:block}
@media(max-width:760px){
  .creator-grid{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .creator-grid .cr-divide{border-left:none}
}

/* ===== MEMBER（トップ・1期生メンバー予告の横マーキー） 2026-08-01 =====
   18競技×COMING SOON のカードが横に流れ続ける。手で掴んで動かすこともできる。
   実装メモは js/v2.js の同名セクションに。アイコンは images/sports/<競技名>.png */

/* マーキーを画面全幅に出すため、このセクションだけ .sec の横余白を持てない。
   その代わりを .sec-inner の padding で作るが、max-width にはその2倍を足しておく。
   1080px のままだと中身が 1080-56=1024px になり、見出しが他セクションより右へずれる。
   余白の値は上の .sec（28px／780px以下で22px）と必ず同じにすること */
.member-sec{--gutter:28px;padding:80px 0;overflow:hidden}
.member-sec .sec-inner{max-width:calc(1080px + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)}

/* 自動送りは transform で動かす。scrollLeft はデバイスピクセル格子（Retinaで0.5px）に
   丸められるため、1コマの移動量が 0.5px と 1.0px で揺れてカクつく。
   transform は小数のまま保持され、コンポジタ側で動くので均一に流れる */
.marquee{
  margin-top:56px;                          /* 見出し（MEMBER／メンバー）とカードの間 */
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;                       /* 縦のページスクロールは邪魔しない */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee.is-dragging{cursor:grabbing}
.marquee.is-dragging .member-card{user-select:none}
/* 2層に分ける: 外(track)＝手で掴んだ分のずれ / 内(loop)＝自動送り */
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-loop{display:flex;gap:20px;width:max-content;will-change:transform}
.marquee-loop.is-ready{animation:marqueeFlow var(--dur) linear infinite}
@keyframes marqueeFlow{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * var(--loop)),0,0)}
}

.member-card{
  flex:0 0 auto;width:216px;aspect-ratio:3/4.4;border-radius:16px;
  background:linear-gradient(160deg,#F4F6FB 0%,#EDF4FB 100%);
  border:1px solid rgba(30,41,82,.08);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  position:relative;overflow:hidden;
}
.member-card .mc-sport{
  position:absolute;top:18px;left:0;right:0;text-align:center;
  font-family:'Inter',sans-serif;font-weight:800;font-size:11px;letter-spacing:.16em;
  color:var(--coral-dk);
}
.member-card .mc-soon{
  font-family:'Inter',sans-serif;font-weight:900;font-size:20px;line-height:1.35;
  letter-spacing:.02em;color:rgba(30,41,82,.28);text-align:center;
}
/* 競技アイコン（inoue提供18点を透過化・余白正規化して配置）。
   元画像は1254px角・白背景・約700KBだったため128px角の透過PNGへ変換。
   ネイビー単色で書き出してあり、濃さはこの opacity だけで調整できる */
.member-card .mc-img{width:66px;height:66px;object-fit:contain;opacity:.42;flex:0 0 auto}
.member-card .mc-img.is-empty{opacity:0}   /* 画像が無い競技。並びを揃えるため場所だけ確保 */

@media(max-width:780px){
  .member-sec{--gutter:22px;padding:56px 0}   /* 上の .sec{padding:72px 22px} に合わせる */
}
@media(max-width:560px){.member-card{width:168px}}
@media(prefers-reduced-motion:reduce){
  .marquee-loop.is-ready{animation:none}     /* 自動送りを止める。手での操作は残る */
}

/* トップの縦リズム（2026-08-01 点線の仕切りを廃止したのに合わせて詰めた）。
   .audition は audition.html とも共用のため、MEMBERの直後という位置でトップだけに効かせる */
.member-sec + .audition{padding-top:80px}
#latest-news{padding-bottom:80px}
@media(max-width:780px){
  .member-sec + .audition{padding-top:56px}
  #latest-news{padding-bottom:56px}
}

/* ================================================================
   ページ遷移 — Cross-document View Transitions（ライブラリ不使用・2026-08-02）
   次のページが「星と同じ32°の斜辺」で前のページを拭って現れる。
   ・常時ループではなく遷移1回きり＝マーキー/星のスリットとは役割が別
   ・非対応ブラウザ（Firefox等）は @view-transition ごと無視され素の遷移に戻る
   ・傾き: tan(32°)=0.6249 → 62.49vh ずらすと斜辺が垂直から32.00°になる
     （ビューポート高が変わっても角度は保たれる）
================================================================ */
@view-transition{ navigation:auto }

:root{ --vt-dur:1200ms; --vt-slant:62.49vh }

::view-transition-group(root){ animation-duration:var(--vt-dur) }

/* UA既定の mix-blend-mode:plus-lighter を打ち消す。
   放置すると遷移中ずっと加算合成になり、ピンク #FF2E88 が色相ごと飛ぶ */
::view-transition-old(root),
::view-transition-new(root){ mix-blend-mode:normal }

/* 旧ページは沈ませない。透明にすると下地の白が透けて、
   消したかった「白い瞬断」が薄まった形で戻ってくる */
::view-transition-old(root){ animation:vtHold var(--vt-dur) linear both }
::view-transition-new(root){ animation:vtSlit var(--vt-dur) var(--ease-sport) both }
@keyframes vtHold{ from{opacity:1} to{opacity:1} }
@keyframes vtSlit{
  from{clip-path:polygon(0% 0%, 0% 0%,
        calc(0% - var(--vt-slant)) 100%, calc(0% - var(--vt-slant)) 100%)}
  to  {clip-path:polygon(0% 0%, calc(100% + var(--vt-slant)) 0%,
        100% 100%, calc(0% - var(--vt-slant)) 100%)}
}

/* ヘッダーはワイプに巻き込まない＝枠は在り続け、中身だけ入れ替わる */
.p-header{ view-transition-name:site-header }
::view-transition-group(site-header){
  animation-duration:320ms; animation-timing-function:var(--ease-sport);
}

@media(prefers-reduced-motion:reduce){
  @view-transition{ navigation:none }
  .p-header{ view-transition-name:none }
}

/* ================================================================
   カウントダウンの桁送り（スコアボード式・2026-08-02）
   数字を「1コマずつ送って止める」。十の位が先に止まり、一の位が最後に止まる。
   送りは必ず減る側（下へ）＝通過する数字が常に「これから通る残日数」になり、
   実在しない日数を見せない（js/v2.js 冒頭の演出原則に従う）
================================================================ */
/* ghost は箱とベースラインを作り、既存のグローも担当する。
   桁セルは overflow:hidden なのでセル側に text-shadow を置くと
   グローが矩形で切れて四角い縁が出る。文字色だけ透明にして分離する */
.sb-ghost{color:transparent}
.sb-cells{position:absolute;inset:0;display:flex}
.sb-digit{flex:1 1 0;position:relative;overflow:hidden}
.sb-strip{position:absolute;left:0;top:0;width:100%;transform:translateY(0);will-change:transform}
.sb-strip > i{
  display:block;
  height:var(--cell);
  line-height:var(--cell);    /* ghost と同じ行box高＝ベースラインが一致する */
  font-style:normal;
  text-align:center;
  text-shadow:none;           /* グローは ghost 側が持つ */
}
/* 転がっている間だけグローを一段強める（着地で戻る＝点滅ではない） */
[data-audition-count].is-rolling .num{
  text-shadow:0 0 14px rgba(255,213,0,.34),0 0 30px rgba(255,213,0,.22);
}
@media(prefers-reduced-motion:reduce){
  /* JS側で帯を組まず素のテキストを出すので、ここは保険 */
  .sb-strip{transition:none !important}
  [data-audition-count].is-rolling .num{text-shadow:none}
}

/* VISION・ABOUT の帯の起点（2026-08-07）。
   基本値 --sec-pt:80px は上の帯の定義側にあるため、狭い画面の上書きは
   必ずそれより後ろ＝ここに置くこと。手前のメディアクエリに書くと後勝ちで無効になる。
   値は各セクションの padding-top と必ず一致させる */
@media(max-width:900px){ .about-sec{--sec-pt:56px} }
@media(max-width:780px){ .story{--sec-pt:56px} }

/* 公式SNS（X / YouTube）を1つの箱にまとめる（2026-08-12 inoue指示）。
   カード2枚並べだと箱が2つ見えて散らかるため、1枚の枠の中で縦罫で仕切る */
.sns-box{
  display:flex;
  align-items:stretch;
  border:1px solid rgba(30,41,82,.16);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.sns-box:hover{border-color:var(--coral);box-shadow:0 6px 20px rgba(30,41,82,.08)}
.sns-item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  transition:background .2s;
}
.sns-item + .sns-item{border-left:1px solid rgba(30,41,82,.16)}   /* 仕切りの縦罫 */
.sns-item:hover{background:rgba(30,41,82,.04)}
.sns-item svg{width:18px;height:18px;fill:var(--ink);flex:0 0 auto}
.sns-meta{display:flex;flex-direction:column;line-height:1.4}
.sns-meta strong{font-size:13px;font-weight:900}
.sns-meta small{font-size:11px;color:var(--ink-subtle)}
@media(max-width:640px){
  .sns-box{flex-direction:column}          /* 狭い画面では縦積み。仕切りも横罫に切り替える */
  .sns-item + .sns-item{border-left:0;border-top:1px solid rgba(30,41,82,.16)}
}