/* ============================================================
   コスプレイモードフェス LP 共通スタイル

   2026-09-20 に index.html のインライン <style> から切り出した。
   CMFグランプリの募集要項ページを追加して2ページ構成になるため、
   両ページで同じスタイルを使えるようにしたもの。

   【置き場所を変えないこと】
   このファイルは public/ の直下にある前提。CSS 内の url() は
   「このファイルからの相対パス」で解決されるため、階層を移すと
   背景画像（assets/03_… 等）が全部切れる。
   下位ディレクトリのページからは ../style.css で参照する。

   【変更したらバージョンを上げること】
   CSS はサーバー側で7日間キャッシュされる（Ngx_Cache_StaticMode）。
   参照側を style.css?v=2、?v=3 … と上げないと、既に見た人には
   古いCSSが使われ続ける。index.html と各ページの両方を直す。
   ============================================================ */
/* ============================================================
   §3 カラーシステム／§4 タイポグラフィ／§7 UIルール
   ============================================================ */
:root{
  --warm:#F6F2EA;      /* ベース背景 ウォームホワイト（SP仕様書の基準値） */
  --white:#FFFFFF;     /* 通常背景 */
  --red:#E52B3F;       /* メイン フェスレッド */
  --ink:#101923;       /* 文字・フッター インクネイビー */
  --teal:#39BDB5;      /* サブ ターコイズ */
  --blue:#246BDB;      /* アクセント コバルトブルー */
  --yellow:#FFD52A;    /* アクセント レモンイエロー */
  --violet:#8656D8;    /* 限定アクセント バイオレット */
  --muted:#5E6670;
  --rule:#101923;      /* 罫線は 1〜2px の ink */
  --hair:rgba(16,25,35,.14);
  --jp:'Noto Sans JP',system-ui,sans-serif;
  --en:'Fjalla One','Noto Sans JP',sans-serif;
  --r-lg:16px;         /* 基本角丸 14〜20px */
  --r-sm:10px;         /* 小型UI 8〜12px */
  --navh:68px;
  --cdh:92px;        /* 左上カウントダウンの実高（逃がし用） */
  --wrap:1240px;       /* §8 コンテンツ最大幅 1200〜1280px */
  /* 余白スケール（8px 刻み）。SP の縦リズムをこの単位に揃える */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:40px; --sp-6:48px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--navh) + 14px)}
body{font-family:var(--jp);font-weight:500;color:var(--ink);background:var(--warm);
  line-height:1.9;font-feature-settings:"palt";-webkit-font-smoothing:antialiased;
  padding-top:var(--navh);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:900;line-height:1.36}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}
.section{padding:5rem 0;position:relative}
@media (max-width:900px){.section{padding:3.4rem 0}}

/* ---- 見出し（§4 日本語ゴシック × 縦長英字の強いコントラスト） ---- */
.shead{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  border-bottom:2px solid var(--rule);padding-bottom:.75rem;margin-bottom:2rem}
/* 英字は赤。.sec-label を使うセクション（SHOOTING・EVENT CONTENTS・FAQ）が
   赤なので、サイト全体でそろえている（2026-10-25 指示）。
   以前は .shead 側だけ黒で、GUESTS / NEWS / 会場・ご案内 が浮いていた */
.shead .en{font-family:var(--en);font-size:clamp(1.5rem,3.6vw,2rem);letter-spacing:.015em;
  line-height:1;color:var(--red)}
.shead .ja{font-size:.86rem;font-weight:900;color:var(--muted)}

/* ---- ボタン（§7 赤地白字／ネイビー地白字。直線的な長方形・薄い角丸） ---- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:1.4rem;
  min-height:52px;padding:.9rem 1.2rem .9rem 1.45rem;border-radius:var(--r-sm);
  font-weight:900;font-size:.98rem;line-height:1;border:2px solid transparent;
  transition:background-color .18s,color .18s,border-color .18s}
.btn .ar{font-family:var(--en);font-size:1.1rem;transition:transform .18s}
.btn:hover .ar{transform:translateX(4px)}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--ink)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--red)}
.btn--outline{border-color:var(--rule);color:var(--ink);background:transparent}
.btn--outline:hover{background:var(--ink);color:var(--warm)}
.btn--onred{border-color:rgba(255,255,255,.9);color:#fff;background:transparent}
.btn--onred:hover{background:#fff;color:var(--red)}
.btn--sm{min-height:44px;font-size:.85rem;gap:.9rem;padding:.6rem .9rem .6rem 1.1rem}

/* ---- チップ（§7 カテゴリ識別に限定） ---- */
.chip{display:inline-block;font-size:.72rem;font-weight:900;line-height:1;
  padding:.4rem .7rem;border-radius:6px;color:#fff;white-space:nowrap}
.chip--red{background:var(--red)} .chip--teal{background:var(--teal)}
.chip--blue{background:var(--blue)} .chip--violet{background:var(--violet)}
.chip--yellow{background:var(--yellow);color:var(--ink)}

/* ---- 星／撮影ライトの記号（§2-4 細い線画・幾何学記号） ---- */
.mark{position:absolute;pointer-events:none;line-height:0;z-index:1}
.mark svg{display:block;width:100%;height:auto}

/* ============================================================
   §5.1 HEADER
   ============================================================ */
.hd{position:fixed;inset:0 0 auto;height:var(--navh);z-index:90;
  /* 区切り線は引かず、背景の面だけで区切る（スクロール時も線・影は出さない） */
  background:rgba(246,242,234,.94);backdrop-filter:blur(8px)}
.hd-in{max-width:var(--wrap);height:100%;margin:0 auto;padding:0 1.25rem;
  display:flex;justify-content:space-between;align-items:center;gap:1.6rem}
/* ロゴロックアップは画像を使わず CSS で組む。
   「COSPLAY MODE」は Fjalla One のインク色、その右に黒地の平行四辺形ボックス＋白字イタリック。
   ボックスを skewX(-8deg) で倒し、中の文字を skewX(8deg) で起こして読みやすさを保つ。
   ボックスとテキストは align-items:baseline でベースラインを揃える */
.wordmark{font-family:var(--en);font-size:1.18rem;letter-spacing:-.01em;white-space:nowrap;line-height:1;
  display:inline-flex;align-items:baseline;color:var(--ink);
  /* align-items:baseline なので min-height だとテキストが箱の上端に寄る。
     タップ領域は上下パディングで確保する */
  padding-block:.8rem}
.wordmark .fes{display:inline-block;background:var(--ink);color:var(--warm);
  font-style:italic;padding:.12em .32em .15em;margin-left:.3em;transform:skewX(-8deg)}
.wordmark .fes > span{display:inline-block;transform:skewX(8deg)}
/* SP 用のヘッダー内カウントダウン。箱は付けずインク色のテキストのみ。
   数字だけ Fjalla One（400 しか無いので font-weight は 400 のまま） */
.hd-cd{display:none;align-items:baseline;gap:.14rem;white-space:nowrap;
  line-height:1;color:var(--ink)}
.hd-cd i{font-style:normal;font-weight:900;font-size:.62rem;letter-spacing:.06em}
/* 数字だけにマーカー風の赤帯。text-decoration ではなくグラデーションの
   背景なので、桁数が変わってもインラインボックスの幅に自動で追従する */
.hd-cd b{font-family:var(--en);font-weight:400;font-size:1.05rem;letter-spacing:.01em;
  /* マーカー越しでも数字が読めるよう、帯は赤の 32% 濃度にする */
  background-image:linear-gradient(transparent 62%,rgba(229,43,63,.32) 62%,rgba(229,43,63,.32) 92%,transparent 92%)}
.hd-cd--today{font-weight:900;font-size:.8rem}
.hd-nav{display:flex;gap:1.6rem;margin-left:auto;font-size:.87rem;font-weight:900}
.hd-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px}
.hd-nav a::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.hd-nav a:hover::after{transform:scaleX(1)}
/* 横並びの3点メニュー。枠・背景は持たせず、見た目は小さいまま
   min-width/min-height 44px でタップ領域を確保する */
.hd-burger{display:none;margin-left:auto;align-items:center;justify-content:flex-end;
  min-width:44px;min-height:44px;padding:0;border:0;background:transparent;
  color:var(--ink);cursor:pointer}
.hd-burger .dots{display:block;position:relative;width:4px;height:4px;border-radius:50%;
  background:var(--ink)}
.hd-burger .dots::before,.hd-burger .dots::after{content:"";position:absolute;top:0;
  width:4px;height:4px;border-radius:50%;background:var(--ink)}
.hd-burger .dots::before{left:-9px} .hd-burger .dots::after{left:9px}
.hd-burger[aria-expanded="true"] .dots{background:var(--red)}
.hd-burger[aria-expanded="true"] .dots::before,
.hd-burger[aria-expanded="true"] .dots::after{background:var(--red)}
@media (max-width:1000px){
  :root{--navh:52px}   /* ロックアップを縮めたぶんヘッダーもスリムにする */
  .hd-nav{position:fixed;top:var(--navh);left:0;right:0;flex-direction:column;gap:0;
    background:var(--warm);border-bottom:1px solid var(--hair);padding:.4rem 1.25rem 1rem;
    display:none}
  .hd-nav.open{display:flex}
  .hd-nav a{min-height:52px;border-bottom:1px solid var(--hair)}
  .hd-nav a::after{display:none}
  .hd-burger{display:inline-flex}
  .hd-cta{display:none}
  .hd-nav .hd-cta-m{display:inline-flex;margin-top:.9rem}
  /* ロックアップは控えめに。左端に寄せるので .hd-in の左右パディングも 16px に落とす。
     FES. ボックスの padding は em 指定なので比例して縮む */
  .hd-in{padding:0 16px;gap:.7rem}
  .wordmark{font-size:14px;padding-block:15px}   /* 14 + 15*2 = 44px */
  /* 「あと95日」は主張を抑える。赤マーカーはそのまま */
  .hd-cd{color:rgba(16,25,35,.7)}
  .hd-cd b{font-size:11px}
  .hd-cd i{font-size:9px}
}
@media (min-width:1001px){.hd-nav .hd-cta-m{display:none}}

/* ============================================================
   §5.2 HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;background:var(--warm);
  /* -light は 03 の地色（#F8F1EA）だけを --warm(#FAF8F4) に合わせて持ち上げたもの。
     PC はこの画像が cover でヒーロー全面を覆うため、--warm だけ明るくしても
     初期表示のクリームが残ってしまう。赤いファセットは一切触っていない */
  background-image:url("assets/03_bg-hero-stage-facets-light.png");
  background-size:cover;background-position:right bottom;background-repeat:no-repeat}
.hero-in{position:relative;max-width:var(--wrap);margin:0 auto;padding:4.4rem 1.25rem 4.6rem;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:2.2rem;align-items:center}
/* 見出しの改行位置を固定する（指示書§4）。
   ブラウザに折り返しを任せると Safari と Chrome で字送りの丸めが違い、
   ぎりぎりの行が片方だけ1文字あふれる。PCは2行で固定、SPは1行のまま。
   .nb は「1日」のような数値＋助数詞が行またぎで分断されるのを防ぐ */
.br-pc{display:inline}
.nb{white-space:nowrap}
.hero-catch{font-size:clamp(2.15rem,5.2vw,3.6rem);letter-spacing:-.01em}
/* 「好き」は赤文字にせずインク色のまま、下部 30% に黄色のマーカー帯を敷く */
.hero-catch .q{
  background-image:linear-gradient(transparent 68%,var(--yellow) 68%,var(--yellow) 98%,transparent 98%)}
.hero-sub{font-size:clamp(.875rem,2.1vw,1.095rem);font-weight:900;margin-top:.85rem}
.hero-meta{margin-top:1.9rem;border-top:2px solid var(--rule);padding-top:1.1rem}
.hero-date{font-family:var(--en);font-size:clamp(2.3rem,5.4vw,3.1rem);line-height:1;letter-spacing:.01em}
.hero-date .dow{font-size:.5em;margin-left:.4rem}
.hero-venue{font-weight:900;font-size:clamp(.96rem,1.9vw,1.08rem);margin-top:.5rem}
.hero-note{font-size:.79rem;color:var(--muted)}
.hero-ctas{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.7rem}
.hero-logo picture{display:block}
.hero-logo img{width:100%;max-width:560px;margin-inline:auto}
/* 本文カラムの左端とカウントダウンが横に重なる幅では、上余白で逃がす。
   .hero-in の基本定義より後ろに置かないと基本側が勝つ */
@media (max-width:1000px){ .hero-in{padding-top:calc(var(--cdh) + 1.1rem)} }
.hero-facets{display:none}   /* 廃止（背景で表現する） */

/* ============================================================
   SCROLL インジケータ（SP のみ表示）
   線は薄いトラック。その中をインク色のドットが上から下へ降りる（2秒周期）。
   overflow:hidden でトラックの外に出たドットを隠し、上から入って
   下へ抜けるように見せる。SP では線がセクション境界を越えて
   ABOUT 側へ少し食い込む（下の @media 内を参照）
   ★ 基本定義はメディアクエリより前に置くこと。後ろに置くと SP 側の
     display:flex が基本の display:none に負けて表示されなくなる
   ============================================================ */
.scrollcue{display:none;flex-direction:column;align-items:center;gap:var(--sp-1);
  margin-top:1.6rem;font-family:var(--en);font-size:.72rem;letter-spacing:.22em;color:var(--muted)}
.scrollcue i{position:relative;width:1px;height:56px;background:var(--hair);
  display:block;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:16px;
  background:var(--ink);animation:cue 2s linear infinite}
@keyframes cue{
  0%  {transform:translateY(-16px)}
  100%{transform:translateY(56px)}
}

@media (max-width:900px){
  /* §8 SP：コピー → 日付・会場 → CTA → ロゴ の順。
     背景のファセットはロゴの下へ分離する。重ねるとロゴの mix-blend-mode:multiply が
     赤に反応し、白抜きの「COSPLAY MODE FES.」が消えるため */
  /* 右下に 26vw の帯として敷いていた背景画像は、左端が直線で切れて
     矩形の継ぎ目に見えていたので SP では出さない。稜線も敷かず、
     下に続くことは SCROLL インジケータだけで示す */
  /* SCROLL の線がヒーローの外へ出るので、はみ出しをクリップしない
     （SP は背景画像を出していないので overflow:hidden は不要） */
  .hero{background-image:none;padding-bottom:var(--sp-5);overflow:visible}
  /* カウントダウンをヘッダーに移したので、左上固定ウィジェットを避ける
     逃がし余白は不要になった。上端は通常の余白だけにする */
  .hero-in{grid-template-columns:1fr;gap:0;padding-inline:1.25rem;padding-bottom:0;
    padding-top:var(--sp-4)}
  /* 左上固定の黒箱は SP では出さず、ヘッダー内の「あと95日」に一本化する */
  .cd{display:none}
  /* カウントダウンは配置検討中のため一時非表示（HTML・日数計算の JS は温存）。
     復活させるときはこの display を inline-flex に戻すだけでよい */
  .hd-cd{display:none}
  .hd-in{gap:.65rem}
  .hero-catch{order:1} .hero-sub{order:2} .hero-logo{order:3} .hero-meta{order:4}
  .hero-ctas{order:5} .scrollcue{order:6;display:flex}
  /* プライマリCTAは赤の全幅ボタン */
  .hero-ctas{margin-top:1rem;flex-direction:column;align-items:stretch}
  .hero-ctas .btn{width:100%}
  .hero-note{color:var(--muted);font-size:.78rem;margin-top:.5rem;text-align:center}
  /* ヒーローの下パディング(--sp-5)を食い切って、さらに --sp-3 ぶん ABOUT 側へ
     線を食い込ませる。「線が次の章まで案内している」見た目にする。
     ABOUT の背景（後続の非配置要素）に塗り潰されないよう z-index を持たせる */
  .scrollcue{margin-top:var(--sp-4);position:relative;z-index:2;
    margin-bottom:calc((var(--sp-5) + var(--sp-3)) * -1)}
  .hero-copy{display:contents}
}

/* ============================================================
   §5.3 ABOUT
   ============================================================ */
/* ============================================================
   ▼▼ ABOUT 専用スタイル ▼▼
   モック design-reference/ref_about_v5.png 準拠。

   ★ 全体の本文設定（.sec-lead / body 等）を継承させない。
     フォントサイズ・ウェイト・行間・字送りはこのブロックで
     すべて明示している。全体改修のときにここを共通設定へ
     巻き込まないこと（過去に上書きされて空気感が崩れた）。
   ============================================================ */
/* 稜線ディバイダーを下端に重ねるので、その高さぶんの余白を確保する
   （旧 .facts-section から引き継いだ。仕様表を ABOUT に統合したため） */
.about{background:var(--warm);position:relative;overflow:hidden;
  padding-bottom:calc(3rem + var(--ridge))}
/* 英字ラベルの上の細い罫線（SPカンプ由来。三色バーとは別物） */
/* 英字ラベルの上の細い罫線（SPカンプ由来。三色バーとは別物）。
   SHOOTING の hr は .shoot-panel の子なので直子セレクタだけだと当たらず、
   UA既定のグレー inset 罫線が出てしまう。パネル内のぶんも明示する */
.shooting .wrap > .sec-rule,.shooting .shoot-panel > .sec-rule,
.location .wrap > .sec-rule{
  border:0;border-top:1px solid var(--hair);margin:0 0 var(--sp-3)}

/* eyebrow・見出し・末尾ロックは現状維持 */
.about-eyebrow{color:var(--red);font-weight:900;
  font-size:clamp(11px,2.9vw,12px);line-height:1}
/* 字送りは英字にだけ掛ける（和文に効かせると間延びする） */
.about-eyebrow .en{letter-spacing:.25em;white-space:nowrap}
.about-head{margin-top:var(--sp-2);font-size:clamp(28px,7.4vw,40px);line-height:1.35;
  font-weight:900;color:var(--ink)}

/* 三色バー：高さ4pxの繊細なバランス。赤48 ＋ 黄12 ＋ teal12、間隔6px。
   太くしたりダッシュ状に伸ばしたりしないこと（主張が強くなりモックから外れる） */
.about-bar{margin-top:var(--sp-3);display:flex;gap:6px}
.about-bar span{height:4px;display:block}
.about-bar span:nth-child(1){width:48px;background:var(--red)}
.about-bar span:nth-child(2){width:12px;background:var(--yellow)}
.about-bar span:nth-child(3){width:12px;background:var(--teal)}

/* 本文：太字にしない。15px / 行間2.0 / 字送り0.02em のゆったりした組み。
   clamp を使わず固定値にして、全体のフォントスケール変更に影響されないようにする */
.about-body{margin-top:var(--sp-4);max-width:34em}
.about-body p{font-weight:500;font-size:15px;line-height:2;letter-spacing:.02em;
  color:var(--ink)}
.about-body p + p{margin-top:var(--sp-3)}

/* 末尾ロック */
.about-lock{margin-top:var(--sp-5);font-family:var(--en);letter-spacing:.06em;
  font-size:clamp(17px,4.4vw,20px);line-height:1;color:var(--ink);
  /* 下に細罫線を敷いて仕様表への区切りにする */
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--hair)}
.about-lock .x{color:var(--red)}
/* ▲▲ ABOUT 専用スタイル ここまで ▲▲ */

/* 開催概要の仕様表。細罫線のみのミニマル表。ABOUT の末尾ロックの下に
   細罫線を敷いて区切りにするので、表側の border-top は持たせない */
.facts{margin-top:var(--sp-3);max-width:34em}
.facts dl{display:grid;grid-template-columns:7.5rem 1fr;gap:0;border-bottom:1px solid var(--hair)}
.facts dt{font-family:var(--en);font-size:.86rem;letter-spacing:.1em;color:var(--red);padding:.75rem 0}
.facts dd{font-weight:900;font-size:.93rem;padding:.75rem 0}
.facts .fact-sub{display:block;margin-top:.45rem;font-weight:500;font-size:.82rem;
  line-height:1.75;color:var(--ink)}
.facts .fact-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.6rem;
  min-height:44px;font-weight:900;font-size:.88rem;color:var(--red);text-decoration:none;
  border-bottom:2px solid var(--red)}
.facts .fact-link:hover .ar{transform:translateX(3px)}
.facts .fact-link .ar{transition:transform .2s ease}

/* ============================================================
   §5.4 SECTION DIVIDER（横幅いっぱい・セクション下端に重ねる）
   ============================================================ */
/* §5.4 セクション下端に position:absolute で重ねる。
   素材は 1774x887 なので全幅では高さ720pxになり、稜線の頂点が本文の背後まで届く。
   稜線の帯だけを切り出して重ね、その分の余白をセクション側に確保する */
.divider{position:absolute;left:0;right:0;bottom:0;height:var(--ridge);
  overflow:hidden;pointer-events:none;z-index:2}
.divider img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}
:root{--ridge:clamp(110px,18vw,260px)}

/* ============================================================
   共通：見出し行（英字ラベル ＋ 和文 ＋ 右へ伸びる細罫線）
   ABOUT / LOCATION で共有する。文字のスタイルは各セクション側で持つ
   ============================================================ */
.eyebrow-row{display:flex;align-items:center;gap:.7rem}
.eyebrow-row::after{content:"";flex:1;height:1px;background:var(--hair)}
.eyebrow-row .ja{font-size:.78rem;font-weight:900;color:var(--ink);
  letter-spacing:.02em;white-space:nowrap}

/* ============================================================
   共通：セクション見出しトリオ（英字ラベル / 見出し / リード）
   ============================================================ */
.sec-label{color:var(--red);font-weight:900;letter-spacing:.25em;
  font-size:clamp(11px,2.9vw,12px);line-height:1}
.sec-head{margin-top:var(--sp-2);font-size:clamp(26px,6.8vw,36px);line-height:1.35;
  font-weight:900;color:var(--ink)}
.sec-lead{margin-top:var(--sp-3);max-width:34em;font-size:clamp(15px,4vw,16px);line-height:1.6}

/* ============================================================
   共通：画像プレースホルダー（未配置でもレイアウトを崩さない）
   ============================================================ */
.ph{position:relative;aspect-ratio:var(--ar,3/2);overflow:hidden;background:#E8E2D6}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph::after{content:attr(data-ph);position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;text-align:center;padding:1rem;
  font-size:.72rem;font-weight:900;letter-spacing:.04em;color:#8A8172}
.ph:not(.ph--empty)::after{display:none}

/* ============================================================
   共通：横スクロールカルーセル（CSS Scroll Snap・自動再生なし）
   ============================================================ */
.car{position:relative}
.car-track{display:flex;gap:12px;overflow-x:auto;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.car-track > *{flex:0 0 var(--card,min(calc(82vw - 28px),380px));scroll-snap-align:start}
.car-foot{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:var(--sp-2)}
/* 横スクロールが発生しない幅ではドット・前後ボタンを出さない */
.car.is-static .car-foot{display:none}
/* スワイプヒント（カルーセル共通コンポーネント）。
   .car の最初の子として置くので、リード文とカード帯のあいだに出る。
   ★ 表示の条件は「画面幅」ではなく「実際に横スクロールするか」。
     幅で切ると 901〜1100px あたり（カードが収まらずスクロールは起きるが
     SPメディアクエリの外）でヒントだけ消えてしまう。
     既定を none にしてあるのは JS 実行前にPCで一瞬出るのを防ぐため */
.swipe-hint{display:none;align-items:center;gap:.55rem;margin-bottom:var(--sp-2)}
.car:not(.is-static) .swipe-hint{display:flex}
.car.is-static .swipe-hint{display:none}
.swipe-hint::before{content:"";flex:0 0 auto;width:40px;height:3px;background:var(--red)}
.swipe-hint > span{font-family:var(--en);font-size:11px;letter-spacing:.15em;
  line-height:1;color:rgba(16,25,35,.7)}
/* 濃紺地の MORE CONTENTS ではインク70%が読めないので白70%にする */
.contents .swipe-hint > span{color:rgba(255,255,255,.7)}
.car-dots{display:flex;gap:0;order:1}
/* 見た目は 8px の点だが、当たり判定は高さ 44px を確保する */
.car-dots .cdot{position:relative;width:24px;height:44px;padding:0;border:0;
  background:transparent;cursor:pointer}
.car-dots .cdot::after{content:"";position:absolute;left:50%;top:50%;
  width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:rgba(16,25,35,.22);transition:background-color .18s,transform .18s}
.car-dots .cdot.is-on::after{background:var(--red);transform:scale(1.25)}
/* 前後ボタンはカードの左右の縁に重ねる円形ボタン（カンプ準拠）。
   見た目は 34px の円だが、当たり判定は 44px を確保する */
.shoot-item,.mc-item,.loc-card{display:flex;flex-direction:column}
.shoot-item > .shoot-card,.mc-item > .mc-card,.loc-card > .loc-frame{flex:1}
/* 矢印はドットと同じ行に置く。カードに重ねるとピーク中のカードの
   見出しを隠してしまうため（カンプの位置より安全側に寄せた） */
.car-nav{display:contents}
.car-nav button{order:0;width:44px;height:44px;padding:0;border:0;background:transparent;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.car-nav [data-next]{order:2}
.car-nav button::before{content:"";position:absolute;width:34px;height:34px;border-radius:50%;
  background:var(--white);border:1px solid var(--hair)}
.car-nav button > span{position:relative;font-family:var(--en);font-size:.95rem;
  line-height:1;color:var(--ink)}
.car-nav button:disabled{opacity:0;pointer-events:none}
.contents .car-nav button::before{background:#1A2430;border-color:rgba(255,255,255,.28)}
.contents .car-nav button > span{color:#fff}
@media (prefers-reduced-motion:no-preference){.car-track{scroll-behavior:smooth}}

/* ============================================================
   SHOOTING EXPERIENCE（ファーストビューに次ぐ主役セクション）
   ============================================================ */
.shooting{background:var(--warm);position:relative;overflow:hidden}
/* 白パネルは撤去。ウォームホワイト地に直置き（2026-09-01 確定・
   design-reference/ref_shooting_target.png が正）。
   ★ .shoot-panel は「キャラの位置決めの基準」としてだけ残す。
     背景・罫線・角丸・padding を足さないこと。
   ★ キャラの見切れクリップは .shooting（セクション＝ビューポート幅）側の
     overflow:hidden で効かせる。ここに overflow:hidden を戻すと
     wrap の 20px 内側で切れてしまい、画面端まで抜けなくなる */
.shoot-panel{position:relative}
/* PNG の不透明コンテンツは canvas の左4.2%〜右94.0%（実測）。
   right の負値は「canvas を何%はみ出させるか」なので、実際に切れる量は
   その値から 6%（右の透明マージン）を引いたぶん。腕を切らない範囲に収める */
.shoot-figure{position:absolute;right:-8%;top:var(--sp-2);
  width:360px;pointer-events:none;z-index:1;display:block}
.shoot-figure img{width:100%;height:auto;object-fit:contain;display:block}
.shooting .wrap{position:relative;z-index:2}
/* キャラ（.shoot-figure は z-index:1）の足元をカード帯の背後に隠す */
#shooting .car{position:relative;z-index:2}
/* 見出し・リードがキャラと干渉しないよう測りを絞る */
.shooting .sec-head,.shooting .sec-lead{max-width:62%}
.shoot-card{background:var(--white);border:1px solid var(--rule);
  padding:1.15rem 1.15rem 1.25rem;display:flex;flex-direction:column}
.shoot-card .ico{color:var(--red)}
.shoot-card .ico svg{display:block;width:34px;height:34px}
.shoot-card h3{margin-top:.85rem;font-size:clamp(16px,4.4vw,18px);line-height:1.4}
.shoot-card p{margin-top:.5rem;font-size:15px;line-height:1.6;color:var(--muted)}

/* ============================================================
   LOCATION PREVIEW（写真カルーセル）
   ============================================================ */
/* 会場のビューを公開（2026-09-01）。非公開に戻す場合はここに display:none を足す。
   地色はウォームホワイト。カードの白いマットを浮かせるため */
.location{background:var(--warm)}
/* 参考画像の方向：白いマットに写真を落とし込み、四隅を斜めにカットする。
   clip-path は border を切ってしまうので、外枠／内側の二層で 1px の枠に見せる */
.loc-no,.shoot-no,.mc-no{display:block;font-family:var(--en);font-size:.9rem;
  letter-spacing:.1em;color:var(--red);margin-bottom:.4rem}
.contents .mc-no{color:var(--teal)}
.loc-frame{background:var(--hair);padding:1px;
  clip-path:polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px),
                   calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px)}
/* 白いマット（padding）は置かない。写真をフレームいっぱいに出す
   （2026-09-01 の指示。白い縁が入るとダサく見える） */
.loc-frame-in{position:relative;background:var(--white);padding:0;
  clip-path:polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px),
                   calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px)}
.loc-frame .ph{--ar:3/2}
/* 写真だけを見せるカード。キャプション・星・赤い楔は置かない
   （写真の邪魔になるため。2026-09-01 の指示） */
.loc-card{position:relative}
/* 参考画像どおり、前後ボタンは赤い丸としてカードの縁に重ねる。
   LOCATION のカードは上部が写真なので、重ねても見出しを隠さない
   （他のカルーセルは見出しが隠れるためドットと同じ行に置いている） */
.location .car-nav{display:block}
.location .car-nav button{position:absolute;top:calc(var(--trackH,220px) / 2 - 22px);z-index:3}
.location .car-nav [data-prev]{left:-10px}
.location .car-nav [data-next]{right:-10px}
.location .car-nav button::before{width:36px;height:36px;background:var(--red);border:0}
.location .car-nav button > span{color:#fff;font-size:1.05rem}
/* LOCATION も共通の見出し行パターンを使う（.eyebrow-row） */
.location .sec-label{white-space:nowrap}
/* 縦の余白を詰める。写真を主役にして見出しから写真までを短くする
   （参考画像の詰まったリズム。他セクションには効かせない） */
.location{padding-top:var(--sp-4);padding-bottom:var(--sp-4)}
/* LOCATION の上に空く帯は SHOOTING の下パディング。撮影体験→ロケーションは
   ひと続きの流れなので、ここも詰めて写真までの距離を短くする */
.shooting{padding-bottom:var(--sp-4)}
.location .wrap > .sec-rule{margin-bottom:var(--sp-1)}
.location .sec-head{margin-top:var(--sp-1)}
/* 見出しを外したぶん、リード文を太字にする（2026-09-01 の指示）。
   ★ モバイルでも1行で収まるサイズにする。この26文字は 23.525em 必要（実測）で、
     使える幅は 100vw - 40px。よって font-size ≤ (100vw - 40px)/23.525
     = 4.25vw - 1.7px。2%ほど余裕をみて 4.15vw - 1.7px にしてある。
     文言を変えたらこの係数を再計算すること（長くすると折り返す） */
.location .sec-lead{margin-top:var(--sp-2);font-weight:700;
  font-size:clamp(11px, calc(4.15vw - 1.7px), 16px)}
.location .car{margin-top:var(--sp-2)}
.location .car-foot{margin-top:var(--sp-1)}
/* 撮影ロケーションのページへのボタン（2026-09-30）。SP は全幅、PC は左寄せで幅を抑える */
.loc-more{margin-top:var(--sp-3)}
.loc-more .btn{width:100%;max-width:420px}

/* ============================================================
   MORE CONTENTS（濃紺基調・撮影体験より一段控えめ）
   ============================================================ */
.contents{background:var(--ink);color:#fff}
.contents .sec-label{color:var(--teal)}
.contents .sec-head{color:#fff}
.contents .sec-lead{color:#C4CAD2}
.contents .car-dots .cdot::after{background:rgba(255,255,255,.28)}
.contents .car-dots .cdot.is-on::after{background:var(--teal)}
.contents .car-nav button{border-color:rgba(255,255,255,.4);color:#fff}
/* 濃紺地の上に白いカードを置く（2026-09-01 の指示）。
   文字色は SHOOTING の .shoot-card と同じ（ink / --muted）に揃える */
.mc-card{background:var(--white);border:0;
  display:flex;flex-direction:column;overflow:hidden}
.mc-card .ph{--ar:4/3;background:#E7E3DA}
.mc-card .ph::after{color:var(--muted)}
.mc-body{padding:1.1rem 1.1rem 1.2rem}
.mc-body .chip{margin-bottom:.55rem}
.mc-body h3{font-size:clamp(16px,4.4vw,18px);line-height:1.4;color:var(--ink)}
.mc-body p{margin-top:.5rem;font-size:15px;line-height:1.6;color:var(--muted)}
.mc-note{margin-top:var(--sp-4);font-size:13px;color:#98A1AC}

/* ============================================================
   クロージングバナー：キャラクター集合画像
   ============================================================ */
/* 透過の切り抜き素材。枠や背景は付けず実比率のまま置く */
.cta-chars{display:block;margin-top:var(--sp-4);width:100%;height:auto}

/* ============================================================
   §5.5 EVENT CONTENTS
   ============================================================ */

/* ============================================================
   GUESTS（出演者）
   アニサマ2026 のアーティスト一覧を参考にした「写真＋ネームプレート」のグリッド。
   写真が主役なので、写真が無いあいだは星マークのプレースホルダーを出す。
   出演者が2名だけでも間延びしないよう、グリッドは中央寄せにしている
   ============================================================ */
.guests{background:var(--warm)}

/* SPは2列。固定幅で頭打ちにせず画面幅に追従させる（アニサマ2026 と同じ見え方）。
   ★ PC側のカラム数は minmax の「最大値」で決まる。minmax(150px,200px) と書くと
      200px で割られて 375px 幅が1列になるので、並べたい幅を最大値に書くこと
   ★ auto-fill ではなく auto-fit。auto-fill は余った空カラムを残すので、
      出演者が2名のとき justify-content:center が効かず左に寄る */
.g-grid{margin-top:var(--sp-4);display:grid;gap:10px;justify-content:center;
  grid-template-columns:repeat(2,minmax(0,1fr));
  /* ★ SPではカードを太らせたいので、.wrap の左右 20px から 8px ぶん食み出す。
     この分だけカードが広くなる（画面幅の 43% → 45%）。
     カルーセル（.car-track）でも同じやり方をしている */
  margin-inline:-8px;
  /* 想定外に長い名前が来ても行ごとの段差が出ないよう、全行を同じ高さにする */
  grid-auto-rows:1fr}
@media (min-width:600px){
  .g-grid{margin-inline:0;gap:12px;grid-template-columns:repeat(auto-fit,minmax(0,220px))}
}
/* 広い画面では1枚あたりを大きくする。220px のままだと5列に割れて小さく見える */
@media (min-width:1100px){
  .g-grid{grid-template-columns:repeat(auto-fit,minmax(0,268px))}
}
.g-card{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column}
/* ★ 写真は正方形。4:5 の縦長にするとカードが 1:1.64 になり、
   縦に伸びてスクロールが長くなるうえ、参考にしたアニサマ（1:1.22）より野暮ったい。
   比率を固定しているので画像が後から来ても崩れない */
.g-photo{aspect-ratio:1/1;background:var(--warm);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.g-photo img{width:100%;height:100%;object-fit:cover;display:block}
.g-photo.is-empty{background:var(--warm);
  background-image:radial-gradient(circle at 50% 42%,rgba(229,43,63,.07),transparent 62%)}
.g-mk{color:var(--red);opacity:.5}
.g-mk svg{display:block;width:44px;height:44px}
/* ネームプレート。カードの下端にべた塗りで敷く */
/* ★ 名前も肩書も1行に収まる大きさにしておく。行数が変わると、その人がいる行だけ
   カードが高くなって段差に見える。
   2行ぶんの高さを min-height で確保する手もあるが、1行の人のプレート下に
   空きが残って間延びするので、**収まる大きさにする方**を選んでいる。
   いちばん長い「SOLOMON STUDIO」で必要幅140px・使える幅135pxだったため、
   4.2vw → 3.8vw に下げた（375px でも余裕がある） */
.g-plate{flex:1;background:var(--ink);color:#fff;padding:.55rem .75rem .6rem}
.g-plate h3{font-size:clamp(14px,3.8vw,17px);line-height:1.35;letter-spacing:-.01em}
.g-role{margin-top:.12rem;font-size:clamp(11px,3vw,12px);font-weight:900;
  line-height:1.4;color:rgba(255,255,255,.66)}
/* カード全体がボタン。押すと紹介文のポップアップが開く。
   カード自体が 44px を大きく超えるのでタップ領域は十分（指示書§8） */
button.g-card{-webkit-appearance:none;appearance:none;font:inherit;text-align:left;
  cursor:pointer;transition:border-color .18s,transform .18s}
button.g-card:hover,button.g-card:focus-visible{border-color:var(--red);transform:translateY(-2px)}
button.g-card:hover .g-plate,button.g-card:focus-visible .g-plate{background:var(--red)}

/* ============================================================
   出演者の紹介ポップアップ（<dialog>）
   Esc で閉じる・背景を操作できない・フォーカスを閉じ込める、は
   <dialog>+showModal() がやってくれるので自前で書かない
   ============================================================ */
/* ★ margin:auto を明示する。リセットの * { margin:0 } が <dialog> 既定の
   margin:auto を打ち消して、上端に貼り付いてしまうため */
.g-modal{margin:auto;width:min(92vw,420px);max-height:86vh;padding:0;overflow:auto;
  border:1px solid var(--rule);border-radius:var(--r-lg);
  background:var(--white);color:var(--ink)}
.g-modal::backdrop{background:rgba(16,25,35,.62)}
.g-modal-x{position:sticky;top:10px;left:calc(100% - 54px);z-index:2;
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--hair);border-radius:50%;background:var(--white);
  color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none}
.g-modal-x svg{width:18px;height:18px;display:block}
.g-modal-x:hover,.g-modal-x:focus-visible{background:var(--ink);color:#fff}
/* 閉じるボタンが sticky で場所を取るぶん、写真を上へ戻す */
.g-modal-photo{margin-top:-54px;aspect-ratio:1/1;background:var(--warm);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.g-modal-photo img{width:100%;height:100%;object-fit:cover;display:block}
.g-modal-photo.is-empty{background:var(--warm)}
.g-modal-body{padding:var(--sp-3)}
.g-modal-role{font-size:11px;font-weight:900;letter-spacing:.1em;color:var(--red)}
.g-modal-name{margin-top:.3rem;font-size:clamp(20px,5.4vw,24px);line-height:1.35;
  letter-spacing:-.01em}
.g-modal-bio{margin-top:.75rem;font-size:14px;line-height:1.9;color:var(--muted)}
/* 44px のタップ領域を確保する（指示書§8） */
.g-modal-link{margin-top:var(--sp-3);display:inline-flex;align-items:center;gap:.35rem;
  min-height:44px;padding:0 1.1rem;border-radius:999px;
  background:var(--ink);color:#fff;font-size:14px;font-weight:900;text-decoration:none}
.g-modal-link:hover,.g-modal-link:focus-visible{background:var(--red)}
/* 1組で2アカウントあるとき。横に並べ、入りきらなければ折り返す */
.g-modal-links{display:flex;flex-wrap:wrap;gap:8px}
.g-modal-links .g-modal-link{margin-top:var(--sp-3)}
.g-note{margin-top:var(--sp-3);font-size:.93rem;color:var(--muted)}

/* 交通案内。路線名と所要時間を拾い読みできるよう、路線を見出しにした定義リスト */
.acc-route{margin:var(--sp-3) 0 var(--sp-2)}
.acc-route > div{padding:.7rem 0;border-top:1px solid var(--hair)}
.acc-route > div:last-child{border-bottom:1px solid var(--hair)}
.acc-route dt{font-size:12px;font-weight:900;letter-spacing:.06em;color:var(--red)}
.acc-route dd{margin-top:.2rem;font-size:14px;line-height:1.75}
.acc-route dd b{font-weight:900}
.acc-route .note{font-size:12px;color:var(--muted)}
@media (min-width:768px){
  /* 幅があるときは路線名を左、内容を右に置いて一覧として読ませる */
  .acc-route > div{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;align-items:baseline}
  .acc-route dd{margin-top:0}
}

/* ============================================================
   FAQ（イベント参加について）
   白地の ACCESS と赤地の CTA のあいだに入るので、地はウォームホワイト。
   質問が2件しかないのでアコーディオンにはしない（開く手間のほうが大きい）。
   CMFグランプリ固有の質問はグランプリページ側の「08 よくある質問」に置き、
   ここからはリンクで送る
   ============================================================ */
.faq{background:var(--warm)}
.faq-list{margin:var(--sp-4) 0 0}
.faq-item{background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:var(--sp-3)}
.faq-item+.faq-item{margin-top:10px}
.faq-item dt{font-size:clamp(15px,4vw,17px);font-weight:900;line-height:1.6}
/* 「Q.」は飾りなので赤。読み上げには余計なので CSS 側で出す */
.faq-item dt::before{content:"Q.";margin-right:.45em;color:var(--red);
  font-family:var(--en);font-weight:400}
.faq-item dd{margin:.55rem 0 0;font-size:14px;line-height:1.85;color:var(--muted)}
.faq-more{margin-top:var(--sp-3);font-size:14px}
/* 44px のタップ領域を確保する（指示書§8） */
.faq-more a{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;
  font-weight:900;color:var(--ink);text-decoration:none}
.faq-more a:hover,.faq-more a:focus-visible{color:var(--red)}

/* ============================================================
   §5.6 NEWS
   ============================================================ */
.news{background:var(--warm)}
/* .shead に 2px の下罫線があるので、リスト側の border-top は線が二重になる。
   罫線を外したぶん .shead の下余白も詰めて見出しとリストを近づける */
.news .shead{margin-bottom:.6rem}
.news-list{border-top:0}
.news-list a{display:flex;align-items:center;gap:1rem;padding:1.05rem .25rem;min-height:56px;
  border-bottom:1px solid var(--hair);min-height:44px;transition:background-color .18s}
.news-list a:hover{background:rgba(16,25,35,.035)}
/* ★ display:flex が hidden 属性の既定（display:none）を上書きしてしまうので、
   畳んだ項目を消すには明示が要る。これが無いと hidden を付けても見えたまま */
.news-list a[hidden]{display:none}
/* 件数が増えたので一段小さくした（2026-10-25 指示）。日付 .95→.86rem、見出し .93→.87rem */
.news-list time{font-family:var(--en);font-size:.86rem;color:var(--muted);min-width:5.4rem;white-space:nowrap}
.news-list .ttl{flex:1;font-weight:900;font-size:.87rem;line-height:1.6}
.news-list .ar{font-family:var(--en);color:var(--muted);transition:transform .18s}
.news-list a:hover .ar{transform:translateX(4px)}
/* 「過去のお知らせを見る」。44px のタップ領域を確保する（指示書§8） */
.news-more{display:flex;align-items:center;justify-content:center;gap:.4rem;
  width:100%;min-height:44px;margin-top:.9rem;padding:0 1rem;
  border:1px solid var(--rule);border-radius:999px;background:transparent;
  font-family:inherit;font-size:.86rem;font-weight:900;color:var(--ink);cursor:pointer;
  transition:background-color .18s,color .18s}
.news-more:hover,.news-more:focus-visible{background:var(--ink);color:#fff}
@media (max-width:640px){
  .news-list a{flex-wrap:wrap;gap:.4rem .7rem;padding:.8rem .2rem}
  .news-list .ttl{flex-basis:100%;font-size:.85rem}
  .news-list .ar{display:none}
}

/* ---- 公式X（Phase1 追加） ---- */
.xbox{margin-top:2.2rem;border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:1.5rem 1.4rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;background:var(--white)}
.xbox .lead{font-weight:900;font-size:.95rem}
.xbox .tag{font-family:var(--en);font-size:1.28rem;color:var(--red);display:block;letter-spacing:.01em}
.xbox .acts{display:flex;gap:.7rem;margin-left:auto;flex-wrap:wrap}
@media (max-width:820px){.xbox .acts{margin-left:0;width:100%;flex-direction:column}}

/* ============================================================
   §5.7 ACCESS・NOTICE
   ============================================================ */
.access{background:var(--white)}
/* 上の NEWS（ウォームホワイト）との色の境目に見出しが乗って見えていたので、
   2px だけ白の逃げを作る。そのぶん見出しと VENUE ボックスは近づける
   （2026-09-01 の指示。もとは HTML 側の style="padding-top:0" だった） */
.access{padding-top:2px}
.access .shead{margin-bottom:.8rem}
.acc-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:1.2rem}
.acc-box{border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.5rem 1.5rem;position:relative;overflow:hidden}
.acc-box .k{font-family:var(--en);font-size:.84rem;letter-spacing:.12em;color:var(--red);margin-bottom:.6rem}
.acc-box--full .acc-venue{font-size:clamp(20px,5.4vw,26px);line-height:1.35}
.acc-box--full .acc-addr{margin-top:.55rem;font-size:15px;line-height:1.6}
.acc-sep{border:0;border-top:1px solid var(--hair);margin:1.2rem 0 1.1rem}
.ft-sns{margin-top:1.1rem}
.ft-sns a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;color:#C4CAD2}
.ft-sns a:hover{color:#fff}
.ft-sns svg{width:18px;height:18px;display:block}
.ft-sns span{font-family:var(--en);font-size:.86rem;letter-spacing:.02em}
.acc-box h3{font-size:1.1rem}
.acc-box p{font-size:.9rem;margin-top:.4rem}
.acc-box .sm{font-size:.79rem;color:var(--muted);margin-top:.7rem}
@media (max-width:820px){.acc-grid{grid-template-columns:1fr}}

/* ============================================================
   §5.8 CTA
   ============================================================ */
.cta{position:relative;overflow:hidden;background:var(--red);color:#fff;isolation:isolate}
/* キャラ画像を全面に敷く */
.cta-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:right center;z-index:0}
/* スクリム：左下を濃く、右上へ抜ける。テキストは実DOM側に置く */
.cta::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top right,
    rgba(38,4,9,.94) 0%, rgba(58,7,14,.90) 26%,
    rgba(120,14,26,.62) 58%, rgba(180,24,38,.18) 100%)}
.cta-in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:4.6rem 1.25rem}
.cta-safe{width:52%}                       /* §5.8 左52%を安全領域にする */
.cta-eyebrow{font-family:var(--en);font-size:.9rem;letter-spacing:.3em;color:var(--yellow)}
.cta h2{font-size:clamp(1.9rem,4.6vw,2.9rem);margin-top:.5rem}
.cta-note{font-size:.92rem;font-weight:900;margin-top:.9rem}
.cta .btn{margin-top:1.6rem;width:100%}
.btn--white{background:#fff;color:var(--ink)}
.btn--white:hover{background:var(--ink);color:#fff}
@media (max-width:900px){
  /* §8 SP：画像が主役。テキストは左下のスクリムが濃い側に置く */
  .cta{min-height:480px;display:flex;align-items:flex-end}
  .cta-img{object-position:72% 18%}       /* キャラの顔が見える位置 */
  .cta-in{width:100%;padding:2.6rem 1.25rem 2.4rem}
  .cta-safe{width:100%}
}

/* ============================================================
   §5.9 FOOTER
   ============================================================ */
.ft{position:relative;color:#fff;background:var(--ink);
  background-image:url("assets/06_bg-footer-navy-turquoise.png");
  background-size:cover;background-position:right bottom;background-repeat:no-repeat}
/* 左のネイビー側にだけ薄くスクリムを掛ける。teal は右〜右下に残す */
.ft::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,
    rgba(16,25,35,.88) 0%, rgba(16,25,35,.70) 44%, rgba(16,25,35,0) 80%)}
.ft-in{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:3.4rem 1.25rem 1.6rem}
.ft-left{max-width:34rem}
.ft-logo{font-family:var(--en);font-size:clamp(1.5rem,4vw,2rem);line-height:1.18}
.ft-logo .fes{display:inline-block;background:var(--warm);color:var(--ink);
  padding:.02em .3em;font-style:italic}
.ft-nav{display:grid;grid-template-columns:repeat(2,minmax(0,7.5rem));gap:.1rem 1.5rem;
  margin-top:1.8rem;font-family:var(--en);font-size:.95rem;letter-spacing:.08em}
.ft-nav a{display:flex;align-items:center;min-height:44px;color:#C4CAD2}
.ft-nav a:hover{color:#fff}
.ft-rule{border:0;border-top:1px solid rgba(255,255,255,.24);margin:1.6rem 0 1.3rem}
.ft-date .d{font-family:var(--en);font-size:clamp(1.7rem,4.6vw,2.3rem);line-height:1.1}
.ft-date .d .dow{font-size:.56em;margin-left:.34rem}
.ft-date .v{font-size:.88rem;font-weight:900;margin-top:.15rem}
.ft-copy{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.16);
  max-width:var(--wrap);margin:0 auto;padding:1rem 1.25rem 1.6rem;font-size:.74rem;color:#B3BAC3}
@media (max-width:1000px){
  /* SP は横方向が大きく切り取られるので、teal が右端に残る位置に寄せる。
     テキストは左側なのでスクリムを少し強めて可読性を確保する */
  .ft{background-position:78% center}
  .ft::before{background:linear-gradient(to right,
    rgba(16,25,35,.93) 0%, rgba(16,25,35,.84) 52%, rgba(16,25,35,.28) 100%)}
  .ft-in{padding:2.6rem 1.25rem 1.2rem}
}

/* ============================================================
   常駐UI（Phase1 追加：機能維持・新トークンで再スタイル）
   ============================================================ */
/* カウントダウンは配置検討中のため PC/SP とも非表示。HTML と日数計算の JS は温存
   （CLAUDE.md「未確定・差し替え待ち」参照。復活時はこの display:none を外す） */
.cd{display:none}
.cd--restore{position:fixed;top:var(--navh);left:0;z-index:80;background:var(--ink);color:#fff;
  padding:.55rem 1.05rem .6rem .95rem;line-height:1.25}
.cd .lbl{display:block;font-size:.6rem;font-weight:900;letter-spacing:.16em;color:#AAB2BB}
.cd .row{display:flex;align-items:baseline;gap:.14rem}
.cd .num{font-family:var(--en);font-size:1.66rem;color:var(--yellow)}
.cd .unit{font-weight:900;font-size:.84rem}
.cd .hms{display:block;font-family:var(--en);font-size:.7rem;color:#8E959E;letter-spacing:.08em}
@media (max-width:560px){
  :root{--cdh:52px}   /* hh:mm:ss を隠すぶん低くなる（実測 50px ＋ 2px の余裕） */
  .cd{padding:.42rem .78rem .46rem .68rem}
  .cd .lbl{font-size:.52rem} .cd .num{font-size:1.3rem} .cd .hms{display:none}
}

/* ============================================================
   SP 表示の調整（指示書§8 スマートフォン方針）
   PC には効かせない。すべて 900px 以下のみ
   ============================================================ */
@media (max-width:900px){
  /* 2) ディバイダーは帯として使う（原寸の赤山にしない） */
  :root{--ridge:clamp(48px,14vw,90px)}

  /* --- ヒーロー：デザインボードのスマホモック準拠 --- */
  /* 1) 並び順：キャッチ → サブ → ロゴ → 日付ボックス → CTA → SCROLL */
  /* キャッチとサブは左寄せ。日付ボックスの中身は中央のまま（別軸で扱う） */
  .hero-catch,.hero-sub{text-align:left;padding-left:var(--sp-3)}
  /* カンプはキャッチ1行。1行で収まるサイズに落とし、PC用の改行は消す */
  .hero-catch{font-size:clamp(21px,6.2vw,27px)}
  .br-pc{display:none}
  /* 「キャッチ＋サブ＝ひとかたまり、その下にロゴ」が読み取れるリズムにする。
     キャッチ↔サブは --sp-2、サブ↔ロゴは --sp-4 */
  .hero-sub{margin-top:var(--sp-1)}

  /* 2) ボードのスマホモックではロゴがほぼ画面全幅まで来ていて、日付ボックスより
        一回り大きい。.hero-in の左右パディング(1.25rem)を打ち消して全幅に広げる。
        タブレット幅まで効くメディアクエリなので max-width で上限を切る。
        下端の黒帯「COSPLAY MODE FES. 2026」はロゴの一部なので切り落とさない
        （以前は aspect-ratio + object-fit で切っていたが、PC 側は帯が出ていて
         SP だけ欠けている状態だったため揃えた） */
  .hero-logo{margin:var(--sp-4) -1.25rem 0}
  .hero-logo img{width:100%;max-width:520px;margin-inline:auto}

  /* 3) 日付ボックスはデザインボード（design-reference/ref_design_v3.png のスマホモック）準拠。
        角丸は使わず、左上と右下を 20px 斜めにカットした形にする。
        地は専用素材 07 のローポリ赤ファセットを cover で敷き、その上に赤スクリムを 1 枚重ねて
        明るいファセットの上でも白文字が沈まないようにする。下地に --red を置いて、
        読み込み前でも赤が途切れないようにする。影は使わず印刷物のようにフラット。
        .hero-meta 自体は素のコンテナ。左右マージンは .hero-in の 1.25rem(=20px) に任せる */
  .hero-meta{margin-top:1.5rem;border-top:none;padding:0;background:none}
  .hero-plate{
    clip-path:polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
    background-color:var(--red);
    background-image:linear-gradient(rgba(176,31,51,.58),rgba(176,31,51,.58)),
      url("assets/07_bg-datebox-red-facets.png");
    background-size:auto, cover;
    background-position:center, center;
    background-repeat:no-repeat;
    color:#fff;text-align:center;
    padding:18px 16px 16px}
  /* 日付は英字コンデンス（Fjalla One）。SAT は日付より小さく、ベースラインは揃える */
  .hero-date{font-size:clamp(42px,12vw,58px);line-height:.92}
  .hero-date .dow{font-size:clamp(19px,5.2vw,27px);margin-left:.38rem;vertical-align:baseline}
  /* 会場名は日本語ゴシックの太字。日付との間隔は詰めて縦に間延びさせない */
  .hero-venue{margin-top:.25rem;font-size:clamp(19px,4.4vw,21px);line-height:1.3}
  /* （お台場）はボックス内では出さない。ボードのモックも入っておらず、
     320px 幅では 2 行に折り返して縦に間延びするため。
     PC 表示と、EVENT 概要の VENUE 行・ACCESS セクションには従来どおり残している */
  .hero-venue .loc{display:none}
  /* 「開催時間は後日発表」は赤いボックスの外へ。直下の小さな注記として中央に置く */

  /* ヒーローの下パディング(--sp-5)を食い切って、さらに --sp-3 ぶん ABOUT 側へ
     線を食い込ませる。「線が次の章まで案内している」見た目にする。
     ABOUT の背景（後続の非配置要素）に塗り潰されないよう z-index を持たせる */
    /* ヒーローは早く終わらせ、ABOUT はゆったり始める対比にする */
  .about{padding-top:var(--sp-6)}

  /* カルーセルは全幅で流す。トラックの左右パディングで本文の 20px に合わせ、
     scroll-padding-left でスナップ位置も揃える。カード幅は画面の約82%で
     次カードが 15〜18% 覗く（375/390/430 で実測 16〜17%） */
  .car-track{margin-inline:-1.25rem;padding:0 1.25rem .5rem;scroll-padding-left:1.25rem}
  /* SP は見切れる分があるので大きめに取る。
     右端で腕まで切れると見苦しいので -16% → -10% に寄せ、
     そのぶんサイズを 52vw → 58vw に上げた（2026-09-01 の指示） */
  .shoot-figure{width:58vw;right:-10%;top:var(--sp-2)}
  .shooting .sec-head,.shooting .sec-lead{max-width:58%}

  .car{--card:calc(82vw - 28px)}
  /* MORE CONTENTS は画面の約80%（覗き 17%）。PC では基本値の上限が効くよう
     インライン style ではなくここで指定する */
  #contents .car{--card:calc(80vw - 20px)}
  /* ラベル帯は PC のみ。SP はカード幅が足りない（過去の指示どおり） */
  .mc-body .chip{display:none}
  .car-track > *{flex-basis:var(--card)}
  /* ACCESS は 1 枚のフル幅カード */
  .acc-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scrollcue i{background:var(--muted)}
  .scrollcue i::after{display:none}
      *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important;
    animation-iteration-count:1 !important}
}


/* ============================================================
   CMFグランプリ 募集バナー（ヒーロー直下・受付期間中だけ出す）
   2026-09-28：濃いえんじの地をやめ、白い面を細い黒罫線で区切る形にした。
   読みやすさを優先（装飾ルール「細い黒罫線」）。赤は名称・ラベル・ボタンに絞る。
   ★ 比較した A 案（素材 07 の赤ローポリ地＋赤スクリム。ヒーローの日付ボックスと同じ）も
     好評だった。使いたくなったら git 履歴（コミット 21031f2 の style.css 末尾）に CSS がある
   ============================================================ */
.gp-banner{background:var(--warm);color:var(--ink);padding:var(--sp-4) 1.25rem}
.gp-banner-in{max-width:var(--wrap);margin:0 auto;
  background:#fff;border:2px solid var(--rule);border-radius:var(--r-lg);padding:var(--sp-4);
  display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap}
.gp-banner-copy{flex:1;min-width:min(100%,20rem)}
/* 名称ラベル。正式名称「CMFグランプリ」を日本語で出す。
   英字用の広い字間（.28em）は日本語だと間延びするので詰め、太さ 900 で名称として立たせる */
.gp-banner .eyebrow{font-family:var(--jp);font-size:clamp(.95rem,2.6vw,1.1rem);font-weight:900;
  letter-spacing:.06em;line-height:1.3;color:var(--red)}
.gp-banner h2{font-size:clamp(1.25rem,3.2vw,1.9rem);line-height:1.5;margin-top:.45rem}
/* 「エントリー受付中。」を途中で折らない（幅によって「エントリ／ー」と切れていた） */
.gp-banner h2 .nw{white-space:nowrap}
.gp-banner .term{font-family:var(--en);font-size:clamp(1.05rem,2.6vw,1.35rem);
  margin-top:var(--sp-2);display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
/* 「応募期間」ラベルは LP のメインの赤（--red）。
   白文字×--red は 4.0:1 なので、文字は 900 のまま少し大きくして読みやすさを補う */
.gp-banner .term .label{font-family:var(--jp);font-size:.78rem;font-weight:900;
  letter-spacing:.08em;background:var(--red);color:#fff;border-radius:4px;padding:.28rem .6rem}
.gp-banner .term .dow{font-size:.66em}
/* 日付は開始と終了のかたまりごとに折り返す（「23:59まで」だけが次の行に残らないように） */
.gp-banner .term .d{white-space:nowrap}
.gp-banner .term small{font-family:var(--jp);font-size:.7rem;font-weight:900;color:var(--muted);margin-left:.2rem}
.gp-banner .note{font-size:.83rem;color:var(--muted);margin-top:.5rem}
.btn--gpb{background:var(--red);color:#fff;border-color:transparent;white-space:nowrap}
.btn--gpb:hover{background:var(--ink)}
/* SP はカードにすると内側が狭くなり、見出しと日付が変な位置で折れる。
   画面幅いっぱいの白い帯（上下だけ黒罫線）にして文字幅を確保する */
@media (max-width:900px){
  .gp-banner{padding:var(--sp-3) 0}
  .gp-banner-in{border-width:2px 0;border-radius:0;padding:var(--sp-4) 1.25rem;gap:var(--sp-3)}
  .btn--gpb{width:100%}
}