/* =====================================================================
   パチンコ愛 就活フェア2026 LP スタイルシート
   ※ Tailwind(CDN) と併用。ここには Figma 再現のための独自スタイルのみ置く。
   ※ 画像パスはこのファイル基準の相対（../img/...）。
   ※ 余白の規約・既知の落とし穴は SPEC.md（4章・8章）にまとまっている。ここのコメントは
     「その場で知らないと壊す」ことだけを書く方針。

   目次:
     01. ベース（html/body）
     02. 配色・グラデ ユーティリティ
     03. スクロールリビール（.js-reveal）
     04. ファーストビュー（.fv-*）
     05. セクション共通（.fair-rainbow）／③カードスライダー（.flow-*）
     06. 下部バンド（.band*）／虹ネオン縦線＋玉（.rainbow-deco）
     07. タイトル文字＝SVG角丸フチ（.t-svg / .ts-*）
     08. コンポーネント（.tag / .co-card / .faq-box / .sched__* / .join-step__* / .fair-cta-btn /
         .sticky-cta / .company-modal / .contest-modal）
     09. FVパーツアニメーション
     10. FAQ開閉 / reduced-motion
   ===================================================================== */

/* ===== 01. ベース ===== */
/* ルートrem＝1000px設計の16pxで全幅固定（旧: clamp(13px,1.6vw,16px)でSPを縮小 →「SP文字が小さい」FBで廃止）。
   → rem指定の打ち文字はSPでも設計原寸。レイアウト構造(grid列数/flex/%幅)は不変。
   --title-fs: SVGタイトル(.ts-*)共通サイズ。下限=「スペシャルゲスト」見出し(text-3xl=1.875rem)に一致させ、
   タイトルが打ち見出しより小さくならないようにする。境界余白計算(--cut-gap/--before-flip)もこの変数に同期。 */
html { font-size: 16px; scroll-behavior: smooth; --title-fs: clamp(1.875rem, 5.08vw, 50.8px); }
body { font-family: "Noto Sans JP", sans-serif; background: #0a0a0a; color: #fff; }

/* ===== 02. 配色・グラデ ユーティリティ（Figma カラー） ===== */
/* メインの虹グラデ #00A9DF→#EAFF12→#EA9612→#ED3412 */
/* 斜め掛け版（⑤企業カード・企業モーダルの枠／薄虹オーバーレイで共用） */
:root { --co-grad: linear-gradient(135deg, #00A9DF 0%, #EAFF12 40%, #EA9612 79%, #ED3412 100%); }
.fair-grad      { background: linear-gradient(90deg, #00A9DF 0%, #EAFF12 40%, #EA9612 79%, #ED3412 100%); }
.fair-grad-text {
  background: linear-gradient(90deg, #00A9DF 0%, #EAFF12 40%, #EA9612 79%, #ED3412 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ネオン発光テキスト（黄） */
.neon-yellow { color: #EAFF12; text-shadow: 0 0 10px rgba(234,255,18,.7); }

/* ===== 03. スクロールリビール =====
   任意の要素に class="js-reveal" を付けると下からフェードイン。
   data-reveal="left|right|zoom" で方向変更可。delay は style="--d:.15s"。 */
.js-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0s); }
.js-reveal[data-reveal="left"]  { transform: translateX(-28px); }
.js-reveal[data-reveal="right"] { transform: translateX(28px); }
.js-reveal[data-reveal="zoom"]  { transform: scale(.92); }
.js-reveal.is-visible { opacity: 1; transform: none; }

/* ===== 04. ファーストビュー（パーツ分解 / 絶対配置でパーツ別アニメ） =====
   ・背景: 他セクションと同じ繰り返し虹タイル（PC外側もこのタイルで拡張）。
   ・SPコンテンツ: 幅1000px(中央固定)のステージ。base(bg.webp)を基準サイズとし、
     各パーツ(hero/coming soon/CTA/日付…)を % 絶対配置 → 拡縮に追従。
   ・パーツ座標は img/parts/parts.json (原寸1000×959) を % 換算して出力。 */
.fv-sec {
  background: #1a0730 url("../img/sections/rainbow_tile.webp") center top / 100% auto repeat-y;
  /* 横=clip / 縦=visible（2026-07-03）: 「好きな業界で働こう」の文字下端はデザイン上
     FV/②の境界を約1.3%(ステージ幅比)またぐため、縦は切らない（②の黒の上に .fv-copy(z-index:3) が乗る）。
     横はヘッダー(min-width:660px)や catch の右はみ出しをクリップし続ける必要がある。
     ※ hidden と違い clip は visible と軸別に併用でき、スクロールコンテナにもならない。
       clip 未対応の旧ブラウザは直前の overflow:hidden にフォールバック（従来どおり下端が切れるだけ）。
       ヘッダー上側の黒ベタぶん(translateY(-48%))はページ上端(y<0)に逃げるので縦visibleでも見えない。 */
  overflow: hidden;
  overflow: clip visible;
}
.fv-stage {
  position: relative;
  width: 100%;
  max-width: 1000px;   /* = SPコンテンツ原寸幅 */
  margin: 0 auto;
  line-height: 0;
}
/* SP背景: 虹タイルの上に「白透かし」を重ねる（コンテンツ領域=SP幅のみ） */
.fv-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(255,255,255,.78);
}
/* 元の背景画像(bg.webp)はサイズ基準としてのみ使用し、ピクセル描画は消す */
.fv-stage__base { display: block; width: 100%; height: auto; visibility: hidden; }
.fv-part { position: absolute; display: block; }
.fv-cta-hit { position: absolute; display: block; z-index: 20;
  transform: translateX(var(--fv-cta-shift, 0)) scale(var(--fv-cta-scale, 1)); }
/* CTAが「SPだと小さい」FBで、SPのみ拡大。--fv-cta-scale / --fv-cta-shift は img(.fv-part.fv-cta の
   fvPopCta/fvPulseキーフレーム) と クリック領域(.fv-cta-hit) の両方に同じ値で効かせ、
   中心基準transform-originで位置ズレを防ぐ。
   拡大は中心基準なので、元の枠(stage 690〜954/1000)のままでは右が画面外に出る
   → --fv-cta-shift で左へ寄せてから拡大する。
   1.45倍・-18%（＝自幅264の-47.5）で 拍動(fvPulse最大1.1倍)込みの右端が stage 985/1000＝画面内に収まる。
   ※ 倍率を上げるときは shift も連動して深くすること（右端 = 822 + 264*shift + 264*scale*1.1/2 ≤ 1000）。
   1.7倍まで上げるとタイトルロゴ(mainlogo)の右下と重なるため 1.45 が上限。 */
@media (max-width: 767px) {
  .fv-stage { --fv-cta-scale: 1.45; --fv-cta-shift: -18%; }
}

/* 上部黒帯ヘッダー: 上半分はデザイン上の伸び(黒ベタ)なので上へ逃がしてクリップ */
.fv-header { transform: translateY(-48%);
  /* SPでロゴ文字が潰れるため下限幅を設ける（画面660px未満ではステージと一緒に縮まず一定サイズ）。
     位置は左上アンカーのまま右へはみ出し → .fv-sec の overflow:hidden でクリップ（右側は黒ベタなので無害）。
     ロゴの大きさ調整はこの min-width を変えるだけ。 */
  min-width: 660px; }
/* ヘッダー拡大（min-width:660px）で増えた可視高さのぶん、**ステージ全体を一律に下げる**。
   （旧: 被る4パーツだけ個別margin-topで逃がしていたが、パーツ同士の相対配置が崩れるため廃止。
   全体を下げれば FV 内部のレイアウトはデザイン原寸のまま保たれる。）
   下げ幅 = 拡大ヘッダーの可視高（660/1001×168×0.52 ≈ 57.6px 固定）
          − 比例時の可視高（1.001×168×0.52 = 8.74vw）。660px以上では負→max()で0（シフトなし）。
   ヘッダー自身は margin で打ち消してセクション上端に固定（黒帯が上に張り付いたまま中身だけ下がる。
   ステージ上に生じる隙間はヘッダーの黒帯が覆う）。ステージは in-flow なのでセクション高も自動で伸びる。 */
.fv-stage { margin-top: max(0px, calc(57.6px - 8.74vw)); }
.fv-header { margin-top: min(0px, calc(8.74vw - 57.6px)); }

/* イベント概要の黒パネル上端をFV下部へ延長:
   黒パネルの上辺は右上がりの斜め（右側が高い）で「好きな業界で働こう」にかかる。
   FV下端でこの斜め黒を作り、下の overview の黒と連結。
   ※ clip-path で下部だけを斜めに黒塗り（左:約100% / 右:約90% の対角線＝右上がり） */
.fv-blackpanel {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: #000; pointer-events: none;
  clip-path: polygon(0 99.9%, 100% 89.8%, 100% 100%, 0 100%);
}

/* ===== 05. セクション共通（FV以降） =====
   SP背景は「虹タイルの繰り返し」の上に、黒 or 薄虹透かしレイヤー(band-bg)が乗る構造。
   - .fair-rainbow : 虹タイル(rainbow_tile.webp/周期1080)を repeat-y。背景幅100%でPC拡張。
   ※ 旧 .sec / .sp-overlay / .ov-black / .sec__stage--overview は②③のバンド化(2026-07-02)で、
     .sec__stage / .sec__part / .sec__stage--flow は③カルーセルのフルコーディング化(2026-07-03)で廃止。 */
.fair-rainbow { position: relative; background: #1a0730 url("../img/sections/rainbow_tile.webp") center top / 100% auto repeat-y; }

/* ③マッチングフロー: バナー（タイトル部・2行）の下半分＋基準余白2remぶんだけカルーセルを下げる
   （バナー下端 ≈ section上端 + 40px(斜め中心) + 半高1.48×fs）。
   ※ stage側の margin-top だと margin collapse でセクション外（②との間）に逃げて
   斜め・バナーごと下へズレるため、必ずセクション側の padding-top で確保する。 */
.band--banner { padding-top: calc(40px + 1.48 * var(--title-fs) + 2rem); }

/* ②イベント概要 本文（2026-07-02 フロー化・remサイズ）
   ・旧: 黒台形ステージ(aspect-ratio固定)に%絶対配置＋2cqw → SPで7.8px相当まで縮み
     「本文も他と同じ大きさに」のFBで再設計（バンド化＝高さがコンテンツ追従なので文字を大きくできる）。
   ・font-size 1.25rem ＝ 元デザイン1000px時の20px（remは全幅16px固定なのでSPでも同サイズ）。
   ・グラデは「テキストブロック全体に一枚がけ」: background-clip:text はコンテナ背景を子孫テキスト全体で
     クリップするため、行やpタグをまたいで1枚のグラデが連続してかかる（行単位で塗りがリセットされない）。
     色は SP薄虹背景(.bg-light)と同じ4色構成（青→黄→橙→赤）の135deg斜め掛け。
   ・改行はPC/SPで別設計（data.php のマーカー \n=共通 / [pc]=PCのみ / [sp]=SPのみ）。
     SP(〜740px)は1行約14文字しか入らず設計改行のままだと「自動折返し＋強制改行」の二重改行で
     ガタつくため、PC改行(.br-pc)を無効化し句読点・文節単位のSP専用改行(.br-sp)に切り替える。 */
.ov-body { text-align: center; font-weight: 700; font-size: 1rem; line-height: 2.05;
  /* FV見出しが1行→2行化で2行目が下へ伸びるため、②説明文を下げて見出しとの余白を確保する（--title-fs連動でSP/PC比例）。
     --ov-top-gap を上げるほど見出しと説明文の余白が増える。 */
  --ov-top-gap: calc(0.8 * var(--title-fs));
  max-width: 600px; margin: var(--ov-top-gap) auto 0;
  background: linear-gradient(135deg, #00A9DF 0%, #EAFF12 40%, #EA9612 78%, #ED3412 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ov-body p + p { margin-top: 2.7em; } /* 段落間（元デザインの空き≈通常行間+1行分） */
@media (max-width: 740px) { .ov-body br.br-pc { display: none; } }
@media (min-width: 741px) { .ov-body br.br-sp { display: none; } }

/* --- ③マッチングフロー カードスライダー（slick.js・2026-07-03 フルコーディング化） ---
   旧: flow_card.webp 1枚画像＋矢印/ドット画像の静的モック → slick.js スライダー＋
   カード中身をコーディング（背景・枠線・バンド=CSS / 本文・タイトル=打ち文字 / スマホ=画像パーツ）。
   デザイン採寸値（flow_card.webp 2xソース実測・カード原寸 720×405@stage1000）:
   - 白カード: 角丸10px・影 / 内側7px(=0.97%)に 2px のグラデ枠線(#0F58E8→#ED42A0・角丸8px)
   - 下部バンド: 枠線の内側いっぱい・高さ≈47.5px・枠線と同じ90degグラデ
   - スマホ: 左55px(=7.6%)・幅193px(=26.8%・影余白込み)・上21.5px・下端はバンド上端でカット（接地）
   - 本文: #232323・太字・20px(@1000)・行間1.6 / バンド文字: 白・800・≈32px・丸数字≈28px */
.band > .band-inner.band-inner--flow { padding: 0; }
/* スライダー幅: PC=デザインどおり720px（stage比72%）。SPは可読性優先で85%
   （左端7.5%＝虹ネオン線＋玉の可動域(〜7.48%)ぎりぎり外側。88%だと玉がカードに隠れる） */
.flow-slider { width: min(85%, 720px); margin: 0 auto; }
/* カード高さ揃え: .slick-track → 末端まで Flex チェーンを途切れなくつなぐ
   （.slick-slide は素で display:block のため height が伝播しない。!important は slick.css の
   .slick-initialized .slick-slide{display:block} への上書き保険） */
.flow-slider .slick-track { display: flex; align-items: stretch; }
.flow-slider .slick-slide { display: flex !important; height: auto; float: none; }
.flow-slide { display: flex; width: 100%; }
/* 白カード（角丸・影・グラデ枠線ぶんの内側余白） */
.flow-card { display: flex; width: 100%; background: #fff; border-radius: 10px;
  padding: 0.97%; box-shadow: 2px 6px 10px rgba(0,0,0,.35); }
/* グラデ枠線（.faq-box と同じ二重グラデ技法: padding-box=白 / border-box=グラデ） */
.flow-card__frame { flex: 1; display: flex; flex-direction: column; min-width: 0;
  border: 2px solid transparent; border-radius: 8px;
  background: linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,#0F58E8,#ED42A0) border-box;
  overflow: hidden; /* バンドの下角を枠線の角丸でクリップ */ }
/* 本文エリア（スマホ＋テキスト）。バンドを除いた残り全高（flex:1）＝スマホの接地面 */
.flow-card__main { flex: 1; display: flex; align-items: center; }
/* スマホ: 元画像は下部の余白/ナビ部分を切り落として拡大表示（2026-07-06）。
   下端はフラットカットのままバンドに接地させ、上2角だけ実機の角丸に合わせて丸める
   （角丸%は画像ごとに高さが違うため index.php 側で getimagesize() から算出しインラインstyleで指定）。 */
.flow-card__phone { align-self: flex-end; width: 36%; margin-left: 6.5%; margin-top: 3%; }
.flow-card__text { flex: 1; margin: 6% 3.7% 6% 6.6%; color: #232323; font-weight: 700;
  font-size: 1rem; line-height: 1.6; }
/* 画像なしカード（②〜④）: テキストが唯一の子 → 左右対称マージンに */
.flow-card__text:only-child { margin-left: 6.6%; margin-right: 6.6%; }
@media (min-width: 768px) { .flow-card__text { font-size: 1.25rem; } } /* =デザイン20px@1000 */
/* 下部グラデバンド（枠線の内側いっぱい・角丸はframeのoverflowでクリップ） */
.flow-card__band { display: flex; align-items: center; justify-content: center; gap: .4em;
  background: linear-gradient(90deg,#0F58E8,#ED42A0); color: #fff; font-weight: 800;
  font-size: 1.5rem; line-height: 1.2; letter-spacing: .04em; padding: .3em .5em .34em; }
@media (min-width: 768px) { .flow-card__band { font-size: 2rem; } } /* =デザイン≈32px@1000 */
/* 丸数字: 白丸＋黒数字を mix-blend-screen → 白はそのまま・数字部分だけ下のバンドグラデが透ける
   （⑨曜日の黒丸×multiply の逆パターン。❶グリフはフォント依存のため使わない） */
.flow-num { display: inline-flex; align-items: center; justify-content: center;
  font-size: .62em; width: 1.42em; height: 1.42em; border-radius: 50%;
  background: #fff; color: #000; font-weight: 900; mix-blend-mode: screen; font-style: normal; }
/* 左右矢印: 白シェブロン（デザイン: カード左右外側・縦中央・約21×42px@1000）。
   left/right の % はスライダー幅(=カード幅)基準 → -4.7% ＝デザインの「カード端から-34px@720」 */
/* top はスライダー全高（カード＋ドット）基準の50%からドット行の半分(約18px)を引き、カードの縦中央に合わせる */
.flow-slider .slick-arrow { position: absolute; top: calc(50% - 18px); z-index: 5;
  width: clamp(14px, 2.9%, 21px); aspect-ratio: 1 / 2;
  padding: 0; border: 0; background: transparent; cursor: pointer; font-size: 0; }
.flow-slider .slick-prev { left: -4.7%; transform: translate(-50%,-50%); }
.flow-slider .slick-next { right: -4.7%; transform: translate(50%,-50%); }
.flow-slider .slick-arrow::before { content: ""; position: absolute; top: 50%; left: 50%;
  width: 74%; aspect-ratio: 1; border-top: 4px solid #fff; border-left: 4px solid #fff;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,.4)); }
.flow-slider .slick-prev::before { transform: translate(-30%,-50%) rotate(-45deg); }
.flow-slider .slick-next::before { transform: translate(-70%,-50%) rotate(135deg); }
/* 左矢印は狭い画面で虹ネオン縦線＋パチンコ玉(.rainbow-deco)に重なるため隠す。
   .rainbow-deco は最大1000px幅で中央寄せ＝画面が狭いほど玉が内側（右）に来て左矢印と衝突する。
   実測（玉の右端と左矢印の左端の距離）: 820px=-43 / 900px=-22 / 960px=+4 / 1000px以上=+21 → 960px未満で非表示。
   ※ slick は infinite:true ＝右矢印だけで一周でき、スワイプ・ドットも生きているので操作性は落ちない。
   ※ 幅を変えるなら .rainbow-deco の left 値（4.572%）と矢印の -4.7% を両方見ること。
   ※ !important 必須：slick.js が矢印に inline style（display:block）を書き込むため、CSSだけでは負ける。 */
@media (max-width: 959px) {
  .flow-slider .slick-prev { display: none !important; }
}
/* ページ送りドット（デザイン: 黒・14px・ピッチ38px・カード下24px）。非アクティブは薄く */
.flow-slider .slick-dots { display: flex; justify-content: center; align-items: center;
  gap: clamp(14px, 2.4vw, 24px); margin-top: 1.5rem; padding: 0; list-style: none; }
.flow-slider .slick-dots li { margin: 0; line-height: 0; }
.flow-slider .slick-dots button { display: block; width: clamp(9px, 1.4vw, 14px); aspect-ratio: 1;
  border-radius: 50%; border: 0; padding: 0; background: #000; opacity: .3; cursor: pointer; font-size: 0; }
.flow-slider .slick-dots .slick-active button { opacity: 1; }

/* ===== 06. 下部バンド（虹タイルの上に 薄虹/黒 オーバーレイ＋コンテンツをコーディング） ===== */
.band { position: relative; }
/* .band--cut（⑤⑪）は斜め黒(.band-title-cut)が前セクションへ80px食い込むため、
   前セクション側の内容(④の特典リスト末尾／⑩のLINE枠)とタイトルがほぼ密着してしまう。
   セクション自体に上マージンを足して前セクションとの間に素の虹タイルが見える余白を作る
   （前セクション側は触らない＝⑤⑪だけに影響を閉じる）。
   == マージン値の導出（目標: 前コンテンツ末尾→タイトル文字上端 = 基準余白2rem（⑨内space-y-8と同値）） ==
   タイトル文字上端 = セクション上端 - 40px(センター) - タイトル半高。タイトル半高 ≈ 0.96×フォントサイズ
   （.t-svg height = fs×vbh/100, vbh≈192 → 半高≈0.96fs。fs = .ts-3xl の var(--title-fs)）。
   前コンテンツ末尾→タイトル上端 = 前pb(3.6rem) + margin - 40px - 半高 = 2rem と置いて
   margin = 2rem + 40px + 0.96×var(--title-fs) - 3.6rem。タイトルがvwでスケールするためcalc必須
   （固定pxだとSPで合わせるとPCで詰まりすぎる）。--cut-gap は .band-title-cut-sp のbleed同期にも使用。 */
.band--cut { --cut-gap: calc(40px + 0.96 * var(--title-fs) - 1.6rem); margin-top: var(--cut-gap); }
/* オーバーレイ(黒/薄虹)はSP幅(1000px中央)のみ。外側はラッパーの虹タイルが見える(PC拡張) */
.band > .band-bg    { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1000px; z-index: 0; }

/* --- SP背景 左側の虹色ネオン縦線（FV下〜フッター上を1本で貫通）＋ パチンコ玉 ---
   縦線と玉は独立オブジェクト。縦線は .fair-rainbow 全高を貫く1本。
   玉はプログレスバー的に縦線上を上から下へ移動（縦位置はJSが整数pxで設定）。
   SP幅(1000px中央)に追従。z-index=2（黒の下辺張り出しbg(1)より上に出して線を隠さない）。 */
.rainbow-deco { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 1000px; z-index: 2; pointer-events: none; }
/* 連続縦線（content x45.72=4.572%）。細くても消えないよう clamp 幅＋発光グロー */
.rainbow-deco .deco-line { position: absolute; left: 4.572%; top: 0; bottom: 0; width: clamp(3px, .55%, 6px);
  border-radius: 4px;
  background: linear-gradient(180deg, #00A9DF 0%, #EAFF12 25%, #EA9612 60%, #ED3412 80%, #00A9DF 100%);
  box-shadow: 0 0 7px rgba(255,255,255,.55), 0 0 16px rgba(0,169,223,.55); }
/* 玉: 縦線中心(left≈2.28%)に重ねる。縦位置は JS が transform:translateY(整数px) で設定。
   ※ 小数pxだと drop-shadow が縁を1px欠く（サブピクセル）ため、JSで Math.round して整数pxスナップ配置する。
     top:0 はJS無効時のフォールバック。
   ※ 位置更新に top ではなく transform を使うのは、iOS Safari でスクロール中に
     drop-shadow(blur)の再描画が追い付かず古い位置の光が残像として残る不具合を避けるため
     （transformはGPU合成のみで完結しrepaintを伴わない）。will-changeで合成レイヤーを事前確保。 */
.rainbow-deco .deco-ball { position: absolute; left: 2.28%; top: 0;
  width: 5.2%; will-change: transform;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.7)) drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
/* 左右対称paddingで「中央寄せのまま幅を狭める」。左padが虹線＋玉(右端≈7.48%)を避ける（装飾と同じ1000px中央カラム%基準）。縦padはremでスケール
   ★padding の % は「自分の幅」ではなく **包含ブロック(.band=ビューポート全幅)** 基準で解決される。
     max-width:1000px で見た目の幅が止まっても padding だけ画面幅に比例して増え続け、
     内側のコンテンツ幅が 1920px=635px / 3840px=270px と縮んで改行位置がズレていた。
     → min(9.5%, 95px) で 1000px 到達時の値(95px)に頭打ち。
     1000px 未満(SP)は従来どおり 9.5%＝自分の幅の9.5%（この領域では包含ブロック幅＝自幅）。
     ※ 95px = 1000 × 9.5%。9.5% を変えるときは 95px も連動して変える。 */
.band > .band-inner { position: relative; z-index: 2; width: 100%; max-width: 1000px; margin: 0 auto; padding: 3.6rem max(1.75rem, min(9.5%, 95px)); }
/* 斜め境界タイトル(.title-plate)を持つセクション用（⑤⑦⑪・2026-07-02）:
   タイトルは斜めの直下/直上に来るため、本体側の上paddingは大きく縮めてよい
   （タイトルとの間隔は .title-plate 側のオフセットで調整するため、ここは本文開始位置の詰めのみ担当）。
   display:flow-root は「子要素の margin-top が親を突き抜けて外側に相殺（margin collapse）される」のを防止する
   （padding-topを0にしても子(mt-9等)のmarginがそのまま生きて意図通りの間隔になる。視覚的な副作用は無い）。 */
.band > .band-inner.band-inner--cut { padding-top: 0; display: flow-root; }
/* 反転パターン(⑦)専用: .title-plate--flip は section基準+59px付近まで文字が伸びる（通常パターンとは逆に
   section下方向にタイトルがあるため）。本文の子要素側マージン(mt-9等)だけでは足りずタイトルと重なるので
   ここで追加のクリアランスを確保する。 */
.band > .band-inner.band-inner--cut-flip { padding-top: 48px; display: flow-root; }
/* ===== セクション間余白の統一（2026-07-02）=====
   全セクション境界の「前コンテンツ末尾→次コンテンツ先頭」を基準余白26px
   （⑨内の開催日程⇔タイムスケジュール間隔 = Tailwind space-y-8 = 2rem）に揃える。
   平坦な連続バンド境界は「前の pb を 0 ＋ 次の pt を 2rem」の組で合計2remにする。
   - --tight-top   : 次セクション側（④⑥⑧⑨⑩）… pt 2rem
   - --tight-bottom: 前セクション側（⑤⑦⑧⑨）… pb 0（※④⑩は次が斜め.band--cutなのでpbは3.6remのまま＝
     .band--cut の --cut-gap 計算の前提。⑪はフッター前なので変更しない）
   - --before-flip : ⑥専用。次⑦のタイトルはセクション上端+40px-半高の位置に来るため、
     pb = 2rem - 40px + 半高 で「⑥末尾→⑦タイトル」= 基準余白2remになる。 */
.band > .band-inner.band-inner--tight-top { padding-top: 2rem; }
.band > .band-inner.band-inner--tight-bottom { padding-bottom: 0; }
.band > .band-inner.band-inner--before-flip { padding-bottom: max(0px, calc(0.96 * var(--title-fs) + 2rem - 40px)); }
/* --before-banner : ②専用。次③のマッチングバナーは2行SVG（半高≈1.48×fs・vbh実測297/2/100）が
   section上端+40px 中心に上へ張り出すため、pb = 2rem - 40px + 1.48×fs で
   「②本文末尾→バナー上端」= 基準余白2remになる。※バナーの行数を変えたら係数を再実測 */
.band > .band-inner.band-inner--before-banner { padding-bottom: max(0px, calc(1.48 * var(--title-fs) + 2rem - 40px)); }
/* 斜め台形カット（上辺）の描画は .band-bg（本体・フラット黒）ではなく専用の .band-title-cut に移譲。
   → 本体は常にフラット黒のまま、斜め＋タイトルは独立した「タイトル部」が全幅で担当する（下記07参照）。 */
/* 斜め台形カット（下辺）の描画は廃止（2026-07-02: ⑦の .band-title-cut--flip に統合・下記07参照）。
   → ⑥はフラット黒のみ。top:-1px だけ残す（前(上)の黒バンド(⑤企業)との1px継ぎ目を塞ぐため）。 */
.band--cut-down > .band-bg { top: -1px; }
/* FV黒↔②概要黒の境界の1px継ぎ目隠し: 高さ0ラッパー＋中央1000px幅の黒帯を境界へ跨がせる（PC側の虹タイルは無傷）。
   z-index:1 = 背景の虹より前・ただし玉/縦線(.rainbow-deco=z2)より後ろ（玉を隠さない） */
.seam-fix { position: relative; height: 0; z-index: 1; }
.seam-fix::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  top: -2px; height: 4px; width: 100%; max-width: 1000px; background: #000; }
.bg-black { background: #000; }
/* 薄虹色透かし（Figma #1:23 / fill_8de951d5＝90deg虹・opacity .8）。
   ④特典＋⑦⑧⑨⑩・フッターで使用（2026-07-02: 旧 .bg-red＝Figma準拠の薄赤#ED3412を廃止し、
   明色バンドのSP背景はすべてこの薄虹に統一。ユーザー指定「赤薄色SP背景→虹色透過に統一」）。 */
.bg-light { background: linear-gradient(90deg,#00A9DF 0%,#EAFF12 40%,#EA9612 78%,#ED3412 100%); opacity: .8; }
/* 薄虹色(明背景)上の白文字フッターの可読性確保 */
.band-inner--ftxt { text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.6); }

/* ===== 07. タイトル文字＝黒フチ角丸SVG（fair_title_svg で出力） =====
   -webkit-text-stroke は角を丸められないため SVG(paint-order+stroke-linejoin:round)で描画。
   表示サイズは --fs(目標フォントサイズ)、幅は viewBox から自動。長い行は max-width:100% で縮小フィット（xMidYMid meet）。
   skewX でイタリック感、drop-shadow で影。 */
.t-svg { display: inline-block; vertical-align: middle;
  /* SVG高さ = --fs × viewBox高さ/100（内部テキストは常に100px）。
     これで行数やフチのpaddingに関係なく“文字サイズ”を直接そろえられる。--vbh はJS(fitTitleSvg)が実測値をセット。 */
  height: calc(var(--fs, 24px) * var(--vbh, 190) / 100);
  width: auto; max-width: 100%; overflow: visible;
  font-size: var(--fs, 24px);            /* drop-shadow の em 基準（テキストは内部で100px固定） */
  transform: skewX(-19deg);
  filter: drop-shadow(0 .05em .05em rgba(0,0,0,.45)); }
.t-svg text { paint-order: stroke fill; } /* 保険（属性でも指定済） */
/* 特典テキストは金色（黄ではない）。IA素材 benefits.webp の実測色で横メタリックグラデ（#fairGold defs＝index.php内・④直前）。
   CSS fill が属性 fill="#fff" を上書き。色変更は #fairGold の stop を編集。 */
.t-svg.is-y text { fill: url(#fairGold); }
/* ④特典ブロックは「タイトルとは少し違う書体」の指定 → 斜体(skewX)を解除して直立に。
   height:auto＝サイズは幅駆動（コンテナ幅への縮小フィット）。
   幅は「フォントサイズ一回り小さく・ただしSPは100%のまま」のFB（2026-07-03）:
   SP=100%（グリフ≈15.4px@390）／PC(md〜)=85%（グリフ37.4→≈31.8px@1240の15%減）。 */
.t-straight .t-svg { height:auto; transform: none; width: 100%; }
@media (min-width: 768px) { .t-straight .t-svg { width: 85%; } }
/* サイズ＝目標フォントサイズ。タイトルは全て「イベントに参加するだけ」(バナー)と同一。
   min(vw,px)＝幅追従＋上限（バナーの 5.08cqw@stage1000px と一致）。 */
.ts-banner,
.ts-3xl,
.ts-2xl,
.ts-xl   { --fs: var(--title-fs); }        /* = clamp(1.875rem, 5.08vw, 50.8px)。下限はスペシャルゲスト見出しと同サイズ */
.ts-lg   { --fs: clamp(1rem, 4.5vw, 32px); } /* 特典リスト（現在は画像化して未使用。他で使う場合の基準サイズ） */
/* ④特典3項目＝焼き込み画像（打ち文字SVGはiOSのバージョンで文字が潰れるため 2026-08-17 に置換）。
   上限694px＝旧SVGの最長行(679px @PC1240)を画像の文字部の占有率(1622/1657)で割り戻した値＝見た目の文字サイズが元と同じ。
   画像下部の透明余白53pxはファイルを加工せず aspect-ratio(=文字部までの比)＋overflow:hidden で切る。 */
.benefit-img { width: min(100%, 694px); margin-inline: auto; aspect-ratio: 1657 / 345; overflow: hidden; }
.benefit-img img { display: block; width: 100%; height: auto; }
/* FV「好きな業界で働こう」（旧 copy_bottom.webp を打ち文字化・2026-07-03）:
   サイズは vw連動の幅指定（下記）＝セクションタイトル(ts-3xl)とグリフ同寸。height:auto(viewBoxのアスペクト比に従う)。
   回転 -1.8deg は元画像の実測値（上端/下端エンベロープの一次回帰がともに-1.82°）。rotate→skewX の順
   ＝「斜体文字のブロックごと回転」で元デザインの右上がり配置を再現。--fs は drop-shadow の em 基準のみ。 */
/* z-index:3 = 文字下端がFVセクション下端をまたぐ（②の黒に重なる設計）ため、後続の seam-fix(z1)・②band-inner(z2) より前面へ。
   flex+aspect-ratio = 「旧画像パーツ枠の幅フィット時のsvg箱」を基準枠として保持し（比847/191はJSフィット後のviewBox実測・
   文言を変えたら再実測）、拡大したsvgをその中心アンカーで上下左右へ均等にはみ出させる（枠の位置=デザイン位置を維持）。
   margin-top = 元画像はパーツ枠内で文字がやや上寄り（下側に影ぶん余白）→ アルファ重心の実測差ぶん上へ補正
   （元 -3.17%(枠幅比)。wrapperではmargin%の基準がステージ幅になるため ×枠幅49.9% = -1.582%）。 */
/* 2026-07-16: 見出しを1行→2行化。中央アンカーのsvgは2行ぶん高くなるため位置を調整。
   文字サイズは変えず、margin-topで見出しブロックの縦位置を決める。
   余白ノブ（②説明文の --ov-top-gap と対）:
     --fv-copy-top-gap : 上（mainlogoロゴ）との余白。上げるほど見出しが下へ動き上側の余白が増える。
   ※見出しが下へ動くと下の②説明文へ近づくので、必要なら --ov-top-gap も合わせて調整する。 */
.fv-copy { --fv-copy-top-gap: calc(0.6 * var(--title-fs));
  z-index: 3; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 847 / 191;
  margin-top: calc(-1.582% + -0.776 * var(--title-fs) + var(--fv-copy-top-gap)); }
/* サイズ＝「参加企業一覧」等のセクションタイトル(ts-3xl)とグリフ同寸に連動:
   ts-3xl のグリフ = 1.2×--title-fs（helpers.php で ts-3xl のみ ref=120 のため）。
   svg幅 = グリフ × vbW(847)/ref(100) = 8.47 × 1.2 × clamp(1.875rem,5.08vw,50.8px) = clamp(305px,51.6vw,516px)。
   ただし約386px未満はタイトル(ts-3xl)自体が max-width:100% で縮み始めるため、下限にも 79vw の頭打ちを
   入れて同じ縮み方で追従させる（79vw と 305px は 386px で交差＝連続。これが無いと極小幅で
   タイトルより大きくなりすぎ、②本文と重なる）。
   （旧: 幅100%=枠フィットのみ → SP390pxでグリフ24.6px vs タイトル35.5px と3割小さかった） */
.fv-copy .t-svg { width: clamp(min(79vw, 305px), 51.6vw, 516px); height: auto;
  max-width: none; /* ベース.t-svgのmax-width:100%を解除（枠より大きくはみ出させるため必須） */
  flex: none;      /* flexアイテムのshrinkで枠幅まで縮められるのを防止（これも必須） */
  transform: rotate(-1.8deg) skewX(-19deg); }
.ts-fv-copy { --fs: calc(1.2 * var(--title-fs)); } /* drop-shadowのem基準（≒実グリフサイズ。ts-3xl連動） */
/* ===== 斜め境界に乗るタイトル部（⑤⑦⑪で使用） =====
   斜め黒背景の描画とタイトルの合成をここに一本化する（本体側 .band-bg は常にフラット黒／上記06参照）。
   - .band-title-cut: 斜め黒背景そのもの。SP全幅(max-width:1000px中央)。
   - .band-title-cut-sp（通常パターン専用・2026-07-02追加）: 黒斜めの「上＝透過」部分に敷く虹色オーバーレイ。
     他セクション(③④等の.bg-light)と同じ`linear-gradient(90deg,...)`・opacity.8を、
     .band-title-cut と同じ範囲だが**クリップなしの別要素**として奥(z-index低)に敷く
     （clip-pathは要素の描画全体に効くため、1要素内で「上=グラデ／下=黒」の出し分けはできない→層を分ける）。
     反転パターン(⑦)は透過部分＝自セクションの .band-bg(.bg-light=薄虹)がそのまま透けるため専用レイヤー不要（対象外）。
   - .title-plate: 文字のみ（背景なし＝透明）。文字は必ず対角線の数式中心に置く（斜めの真ん中に来る＝ズレない）。
   2026-07-02: 当初bleed=44pxで実装したが、余白調整のため文字を斜めから離す（margin-top的な）対応をしたところ
   「文字が斜めの真ん中に来なくなった」というフィードバック→ **文字を動かして余白を作るのではなく、
   斜め自体を大きく(bleed 44→80px)して transition の間合いを広げる**方式に変更。これなら文字は常に
   （拡大した）斜めの数式中心のままで、かつ見た目の余白（上=斜めとの間・下=本文との間）も広がる。
   通常パターン（⑤⑪＝上が透過/下が黒。前セクションへ80px食い込む）:
     対角線 (0,80px)-(100%,0) は x=50%地点で y=40px（幅に依らず一定・线形補間）になるので、
     bleed(-80px)を足した -80+40=-40px に文字の中心を置けば、テキスト長や画面幅に関係なく必ず斜めの中央に一致する。
   反転パターン（⑦＝上が黒/下が透過。.band-title-cut--flip 併用。前セクション⑥は常にフラット黒でよい）:
     対角線 (0,0)-(100%,80px) は x=50%地点で y=40px（section基準・bleedなしの下方向）。 */
.band-title-cut {
  position: absolute; top: -80px; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 1000px; z-index: 1; pointer-events: none;
  background: #000;
  clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%);
}
/* bleedは黒(.band-title-cut)の80pxではなく .band--cut の margin-top(--cut-gap)に同期させる。
   マージンより深く重ねると前セクション自身の半透明オーバーレイ(④⑩の.bg-light)と二重に重なり、
   その部分だけ色が濃く(暗く)滲んで見える不具合があったため（半透明レイヤーのbleedは必ずmargin以下）。
   --cut-gap は親 .band--cut で定義（子へ継承）＝マージンを変えれば自動で追従する。 */
.band-title-cut-sp {
  position: absolute; top: calc(-1 * var(--cut-gap, 56px)); bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 1000px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, #00A9DF 0%, #EAFF12 40%, #EA9612 78%, #ED3412 100%);
  opacity: .8;
}
/* （旧 .band-title-cut-sp--red は廃止: ⑩が薄赤だった時代のFAQ用。全バンド薄虹統一により不要） */
.band-title-cut--flip {
  top: -80px; bottom: auto; height: 200px;
  clip-path: polygon(0 0, 100% 0, 100% 160px, 0 80px);
}
.title-plate { position: absolute; top: -40px; left: 50%; z-index: 4; pointer-events: none;
  transform: translate(-50%, -50%);
  /* width:max-content（2026-07-03）: 絶対配置×left:50% は shrink-to-fit の可用幅が「親幅−50%」＝半分に
     縛られ、文字数の多いタイトル（ステージコンテンツ=9文字）だけ .t-svg の max-width:100% で縮小フィットして
     他タイトルより小さくなっていた → 明示widthで解除（=常にグリフ1.2×--title-fs で他と同寸に）。
     ※ svgのCSS高さは--fs基準で不変のため、境界余白の計算(--cut-gap等)や縦中心はこの変更の影響を受けない。
     max-width:88% は極小幅(〜350px)での安全弁（③バナーと同基準・左の虹ネオン線を避ける） */
  width: max-content; max-width: 88%; }
.title-plate--flip { top: 40px; }
/* ③マッチングバナー用: 2行SVGでも translate(-50%,-50%) が高さ中心を斜めの数式中心に合わせる。
   幅は旧ステージ配置(width:88%)を踏襲＝SPは画面の88%・PCは880px上限（長辺は .t-svg の meet 縮小で収まる） */
.title-plate--banner { width: min(88%, 880px); text-align: center; }

/* ===== 08. コンポーネント ===== */
/* 黒地に虹グラデ文字のラベルタグ（プレゼン/クリエイティブ等）。
   左端は画像の縁に沿う直線、右端だけ斜めカット（旧: skewXで左右とも平行四辺形に傾けていたが、
   左端を画像端に密着させる都合で左だけ直線に戻し、右端のみclip-pathで斜めカットする形に変更）。 */
.tag { display: inline-block; background: #000; padding: .18em .9em; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
/* ⑤企業カードのグリッド（SP2列／PC3列＝Tailwind側で指定）。
   最終行に1枚だけ余るとき（今は企業5社＝PC3+2／SP2+2+1）は中央に置いて左寄りの孤立を避ける。
   PCは列数が3なので中央列へ移すだけでよいが、SPは2列＝中央の列が無いため
   両列にまたがらせてから1列ぶんの幅（gapの半分を引いた50%）に絞って中央寄せする。
   企業が増えて最終行が埋まるとどちらの規則も当たらない（通常の左寄せに戻る）。 */
@media (min-width: 640px) {
  .co-grid > :last-child:nth-child(3n+1) { grid-column: 2; }
}
@media (max-width: 639.98px) {
  .co-grid > :last-child:nth-child(2n+1) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .5rem); }
}
/* ⑤-2 ブース出展のグリッド（2026-09-18）。カード幅は参加企業と同じ＝PC3列ぶんのトラック幅のまま、
   2枚しかない行を中央寄せする（列トラックを3列時の幅に固定してから justify-content:center）。
   gapはTailwind側が sm=1rem／md=1.5rem なのでブレークポイントごとに同じ値で計算する。
   ★!important 必須＝Tailwind CDN(play版)は生成した<style>をhead末尾に挿す＝main.cssより後に来るため、
     同じ詳細度の sm:grid-cols-3 に負ける。 */
@media (min-width: 640px) {
  .co-grid--booth { grid-template-columns: repeat(2, calc((100% - 2rem) / 3)) !important; justify-content: center; }
}
@media (min-width: 768px) {
  .co-grid--booth { grid-template-columns: repeat(2, calc((100% - 3rem) / 3)) !important; }
}
/* 企業カード（黒地＋虹グラデ枠。上端の白帯にロゴ、その下に社名を白文字で置く。
   クリックで #company-modal を開くので button 要素にしている。
   角丸なし＝白帯を上端まで通すため。輪郭は虹枠3pxだけで作る。
   ★display:flex + justify-content:flex-start は必須。button は余った高さぶんコンテンツを
     「縦中央寄せ」するため、display:block のままだと社名が2行になるカード（=最も高いカード）に
     グリッドで引き伸ばされた他のカードで白帯が上端から浮く（1633px以上で「フィールズ株式会社」だけ
     2行になり、他3枚に10pxの隙間が出た実例あり）。 */
.co-card { position:relative; display:flex; flex-direction:column; justify-content:flex-start;
  width:100%; padding:.75rem; text-align:center; cursor:pointer;
  border:3px solid transparent;
  background: linear-gradient(#000,#000) padding-box, var(--co-grad) border-box;
  box-shadow: 0 0 12px rgba(0,169,223,.35);
  transition: transform .2s ease, box-shadow .2s ease; }
.co-card:hover { transform: translateY(-3px); box-shadow: 0 0 18px rgba(234,255,18,.45); }
/* 選択中（モーダルを開いているカード）はカード全体に薄虹を重ねる。
   inset は枠の内側=padding-box を覆う位置。白帯の上にも掛かるのが仕様 */
.co-card.is-active::after { content:""; position:absolute; inset:0;
  pointer-events:none; background: var(--co-grad); opacity:.32; }
/* ロゴの白帯（角丸台ではなく、カード上端＋左右いっぱいに抜ける白い帯）。
   ★角丸は付けない・ボーダーは下端の1pxだけ。ロゴ画像自体には角丸も枠も掛けない
     （ロゴ使用規約上、画像の角を丸めたり画像に枠を付けるのは不可）。
   上・左右の負マージンでカードの padding を打ち消し、虹枠の内側まで帯を伸ばす
   （上端は虹枠に直接接するので border-top は付けない＝枠が輪郭を兼ねる）。
   帯の比 15/7 は「カードを上端密着にする前の高さ(≈130px)」を保つための値
   （上 padding ぶん 12px を帯の高さに振り替えた。5/2 だとカードが12px低く詰まって見える）。 */
.co-card__logo-band { display:block; box-sizing:border-box; width:auto; margin:-.75rem -.75rem 0;
  aspect-ratio:15/7; padding:.5rem .75rem; flex:none; min-height:0;
  background:#fff; border-bottom:1px solid #000; }
/* ロゴは縦横比がバラバラ（横長〜縦長）なので帯の内側に contain で収める（素材側でも白背景を焼き込み済み） */
.co-card__logo { display:block; width:100%; height:100%; object-fit:contain; }
.co-logo { background:#00C7BF; color:#fff; }
/* ⑥スペシャルゲスト: 平行四辺形フレーム画像の横並び。
   画像の左右に斜辺ぶんの透過コーナー（画像幅の約22%）があるため、
   負マージンで隣同士を重ねて見た目の間隔を詰める（重なるのは透過部分のみ。
   -5.5%はコンテナ基準＝セル幅の約15%重なり。約-8.6%で斜辺同士が接触する）。 */
.guest-row > * { flex: 1 1 0; min-width: 0; }
.guest-row > * + * { margin-left: -5.5%; }
/* SP は4人並べると1枚が小さくなりすぎるので2列×2行に折り返す。
   重なりはセル幅比を横一列のときと揃える（セル幅の約22%）＝コンテナ基準では
   「2×カード幅 − 重なり = 100%」を解いて カード幅56.2% / 重なり12.4%。
   行同士は画像下の透過（画像高の約6%）があるぶん離れて見えるので負マージンで少し詰める。 */
@media (max-width: 640px) {
  .guest-row { flex-wrap: wrap; justify-content: center; }
  .guest-row > * { flex: 0 0 auto; width: 56.2%; }
  .guest-row > * + * { margin-left: 0; }
  .guest-row > *:nth-child(2n) { margin-left: -12.4%; }
  .guest-row > *:nth-child(n+3) { margin-top: -2%; }
}
/* 写真クリックで #guest-modal を開くため button 要素にしている。
   button の既定スタイル（枠・背景・padding）を消して、見た目は写真だけの状態を保つ。
   ホバーの浮き上がりは企業カード（.co-card）と揃える。 */
.guest-card { display:block; padding:0; background:none; border:none; cursor:pointer;
  transition: transform .2s ease, filter .2s ease; }
.guest-card:hover { transform: translateY(-3px); filter: drop-shadow(0 0 10px rgba(234,255,18,.45)); }
.guest-card:focus-visible { outline:2px solid #EAFF12; outline-offset:4px; }
/* FAQ: 虹枠ボックス（黒地＋グラデ境界） */
.faq-box { border:2px solid transparent; border-radius:14px;
  background: linear-gradient(#000,#000) padding-box, linear-gradient(180deg,#00C7BF,#ED42A0) border-box; }

/* ===== ⑭スケジュール（タイムライン・2026-07-27 新設） =====
   PC・SPとも縦並び（左に虹ライン＋ドット／右に日付・内容）。
   ※当初PC(md〜)は横並び（5列）にしていたが、1列≈141pxで説明文が語中で折り返され読みづらいとFB
     → 横並びを廃止し縦並びに一本化（PCは1行に収まるので強制改行も不要になった）。
   ラインは「ドットとドットの間」を各項目の ::after が繋ぐ方式にしている（1本の通し線だと最後のドットで
   止められず、末尾の文章の高さぶん線がはみ出すため）。項目数は data.php の $schedule_items。
   線の色は虹グラデを項目数で分割した“区間色”を nth-child で与える（既定色は青→黄。5項目想定）。 */
.sched__list { --sched-gap: 1.6rem; --sched-dot: 1rem; --sched-line: .25rem;
  position: relative; display: flex; flex-direction: column; gap: var(--sched-gap);
  padding: 0; margin-left: 0; list-style: none; padding-left: 2.2rem; }
.sched__item { position: relative; }
/* ドット（白丸＋発光）。SPは行の1文字目の高さに合わせる */
.sched__item::before { content: ""; position: absolute; z-index: 1;
  left: calc(-2.2rem + (1.1rem - var(--sched-dot) / 2)); top: .32rem;
  width: var(--sched-dot); height: var(--sched-dot); border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.85); }
/* 次のドットまでを繋ぐ線（最後の項目は線なし） */
.sched__item::after { content: ""; position: absolute;
  left: calc(-2.2rem + (1.1rem - var(--sched-line) / 2)); top: calc(.32rem + var(--sched-dot));
  bottom: calc(-1 * var(--sched-gap)); width: var(--sched-line); border-radius: 4px;
  background: linear-gradient(180deg, var(--seg-from, #00A9DF), var(--seg-to, #EAFF12)); }
.sched__item:last-child::after { display: none; }
/* 虹グラデ(#00A9DF→#EAFF12→#EA9612→#ED3412)を4区間に分割＝5項目で1本の虹に見える */
.sched__item:nth-child(1) { --seg-from: #00A9DF; --seg-to: #EAFF12; }
.sched__item:nth-child(2) { --seg-from: #EAFF12; --seg-to: #EA9612; }
.sched__item:nth-child(3) { --seg-from: #EA9612; --seg-to: #ED3412; }
.sched__item:nth-child(4) { --seg-from: #ED3412; --seg-to: #FF3E76; }
.sched__date { font-weight: 900; font-size: 1.25rem; line-height: 1.4; }
.sched__text { margin-top: .15rem; font-weight: 700; font-size: .95rem; line-height: 1.7; color: #fff; }
/* 補足（data.php の3つ目の要素）: 本文より一段落として読ませる小さめ・薄めの行 */
.sched__note { margin-top: .1rem; font-weight: 700; font-size: .8rem; line-height: 1.6; color: rgba(255,255,255,.7); }
@media (min-width: 768px) {
  /* PCは横幅に余裕があるので文字だけ少し大きく（レイアウトはSPと同じ縦並びのまま）。
     幅いっぱいの左端揃えだと右の余白ばかり目立つため、**リストを内容幅(max-content)にして
     ブロックごと中央寄せ**する（文字自体は左揃えのまま＝行頭が揃う）。
     ※ 最長項目より狭い画面では max-width:100% で通常の折返しに戻る。 */
  .sched__list { --sched-gap: 1.8rem; width: max-content; max-width: 100%; margin-inline: auto; }
  .sched__date { font-size: 1.375rem; }
  .sched__text { font-size: 1rem; }
}

/* ===== 来場予約特典バナー（2026-07-28 新設） ===== */
/* バナー画像は白地で自己完結しているため黒パネルには載せず、画像単体を中央に置く。
   幅は他セクションの黒パネルと揃うよう band-inner いっぱい（PCは 42rem で頭打ち）。 */
.bonus-banner { display: block; margin-inline: auto; max-width: 42rem; overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.35); }
.bonus-banner picture { display: block; }
.bonus-banner img { display: block; width: 100%; height: auto; }
@media (hover: hover) { .bonus-banner:hover { opacity: .9; } }
/* PC・SP出し分け版（2026-08-05）。SP画像は縦長（600×1290）で、幅いっぱいに広げると
   タブレット幅で極端に縦長になるため、768px未満は 24rem で頭打ちにする。
   768px以上は <picture> が横長のPC画像に切り替わるので、素の 42rem のままでよい。 */
@media (max-width: 767px) { .bonus-banner--split { max-width: 24rem; } }

/* ===== ⑬参加方法（3ステップ・2026-07-27 新設） ===== */
/* 丸数字: 虹グラデ地＋黒文字（⑨曜日バッジと同じ配色ロジック＝明色地に黒文字で視認性を確保） */
.join-step__num { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; font-weight: 900; font-size: 1.15rem; color: #000;
  background: linear-gradient(90deg, #00A9DF 0%, #EAFF12 40%, #EA9612 79%, #ED3412 100%);
  box-shadow: 0 0 8px rgba(255,255,255,.35); }
.join-step__title { font-weight: 900; font-size: 1.125rem; line-height: 1.5; color: #EAFF12; }
.join-step__body { margin-top: .3rem; font-weight: 700; font-size: .95rem; line-height: 1.8; color: #fff; }
/* 補足（data.php の3つ目の要素）: ⑭スケジュールの .sched__note と同じ扱い＝本文より小さめ・薄め */
.join-step__note { margin-top: .35rem; font-weight: 700; font-size: .8rem; line-height: 1.7; color: rgba(255,255,255,.7); }
/* 注記は複数行（data.php の $join_note を "\n" 区切りで記述）→ pre-line で行ごとに折り返す */
.join-note { margin-top: 1.5rem; font-weight: 700; font-size: .8rem; line-height: 1.7; color: rgba(255,255,255,.75);
  white-space: pre-line; }

/* ⑬参加方法: fairエントリーページへの導線ボタン。
   旧: CSS製の赤グラデ＋金枠ピル（テキスト「応募専用サイトへ」）
   → FV・追従フッターと同じ画像パーツ(img/parts/cta_entry.webp「エントリー（参加登録）はこちら」)に統一。
   画像は2行文言のため、追従フッター(min(50%,14rem))よりひとまわり大きい幅にする。 */
.fair-cta-btn { display:inline-block; width:min(88%, 22rem); margin-inline:auto;
  transition:transform .2s ease, filter .2s ease; }
.fair-cta-btn img { display:block; width:100%; height:auto; }
.fair-cta-btn:hover { transform:translateY(-2px) scale(1.03); filter:drop-shadow(0 6px 18px rgba(0,0,0,.5)); }

/* 追従フッターCTA: FVのCTAが画面外に出たら表示、⑩参加フォームの実ボタン(.js-entry-cta)が見えたら隠す（main.jsが.is-visible切替）。
   常に「今すぐ参加できる導線」を提示し続けるための固定バー。 */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: center;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(10,10,10,.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 -4px 14px rgba(0,0,0,.35);
  transform: translateY(100%); opacity: 0; pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}
.sticky-cta.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
/* FVと同じCTA画像(cta_entry.webp)をそのまま使用。2行文言になったぶん旧45%/13remから少し広げている。 */
.sticky-cta__btn { display:block; width: min(50%, 14rem); transition: transform .2s ease, filter .2s ease; }
.sticky-cta__btn img { display:block; width:100%; height:auto; }
.sticky-cta__btn:hover { transform:translateY(-2px) scale(1.03); filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }

/* 参加企業モーダル: 企業カードクリックで開く詳細（ロゴの白帯・企業名・求人一覧）。
   カードと同じトンマナ＝黒地＋虹グラデ枠・白文字で統一している。 */
/* 上paddingは×ボタン（パネル外・上辺の右）の逃げ場。下は通常の余白 */
.company-modal { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:3.5rem 1.5rem 1.5rem; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.company-modal.is-open { opacity:1; pointer-events:auto; }
.company-modal__overlay { position:absolute; inset:0; background:rgba(0,0,0,.8); }
/* ×をパネルの外に出すためのラッパー。パネルは overflow-y:auto なので、×をパネルの子にすると
   スクロール領域にクリップされる＝パネルの外側に置けない。ラッパー基準で絶対配置する。
   開くときの拡大アニメも「×＋パネル」をまとめて動かすためラッパー側に持たせている */
.company-modal__frame { position:relative; width:min(90%,26rem);
  transform:scale(.95); transition:transform .25s ease; }
.company-modal.is-open .company-modal__frame { transform:scale(1); }
.company-modal__panel { position:relative; width:100%; max-height:85vh; overflow-y:auto;
  color:#fff; border:3px solid transparent; /* 角丸なし＝カードと揃える（2026-08-05） */
  background: linear-gradient(#000,#000) padding-box, var(--co-grad) border-box;
  box-shadow: 0 0 24px rgba(0,169,223,.35);
  padding:0 1.5rem 1.5rem; text-align:center; }
/* パネルの外＝上辺のすぐ上・右端に置く */
.company-modal__close { position:absolute; top:-2.5rem; right:0; width:2.25rem; height:2.25rem;
  line-height:2.25rem; font-size:1.75rem; color:#fff; background:none; border:none; cursor:pointer; }
/* ロゴはカードと同じ「白帯」。パネル左右いっぱいに抜ける（負マージンでパネルの padding を打ち消す）。
   企業カードと同様に**パネル上端に密着**させる（パネルの padding-top を0にして実現。上端は虹枠が
   輪郭を兼ねるので border-top なし・下端の1pxだけ）。角丸なし。ロゴ画像には角丸も枠も掛けない（ロゴ使用規約）。
   高さは固定（パネル幅はカードの倍以上あるので、カードと同じ aspect-ratio では帯が巨大になる） */
.company-modal__media { position:relative; box-sizing:border-box; width:auto; height:7.5rem;
  margin:0 -1.5rem 1.25rem; padding:.75rem 1.5rem;
  background:#fff; border-bottom:1px solid #000; }
.company-modal__logo { display:block; width:100%; height:100%; object-fit:contain; }
/* ロゴ未設定・読込失敗時はカード面と同じプレースホルダ表示に切替（JSが .no-logo を付与） */
.company-modal__logo-fallback { display:none; }
.company-modal.no-logo .company-modal__logo { display:none; }
.company-modal.no-logo .company-modal__logo-fallback { display:flex; align-items:center; justify-content:center;
  text-align:center; width:100%; height:100%; margin:0; font-size:.9rem; }
.company-modal__name { font-weight:900; font-size:1.125rem; color:#fff; margin-bottom:1.25rem; }
/* 社名の直下に置く企業公式サイトへのリンク（別タブ）。矢印は擬似要素で付ける
   （テキストはJSが入れないので data 側に記号を持たせない）。
   リンクがある行は社名との間だけ詰め、下の余白（求人一覧まで）はリンク側が担う */
/* 企業公式サイトのリンク（1社=1本／2社で1カードの企業は縦に2本）。JSが中身を作るのでURL未設定なら :empty で消える */
.company-modal__name:has(+ .company-modal__sites:not(:empty)) { margin-bottom:.4rem; }
.company-modal__sites { display:flex; flex-direction:column; align-items:center; gap:.3rem; margin-bottom:1.25rem; }
.company-modal__sites:empty { display:none; }
.company-modal__site { display:inline-block; font-size:.85rem; font-weight:900;
  color:#EAFF12; text-decoration:underline; text-underline-offset:.2em; }
.company-modal__site::after { content:" ›"; }
/* 企業情報も求人も0件のときリンクの下に余白だけ残さない（社名側の同趣旨のルールと対）*/
.company-modal__sites:has(+ .company-modal__details:empty + .company-modal__jobs:empty) { margin-bottom:0; }
/* 企業情報（募集ポジション・勤務地・福利厚生）。JSが data-details から作るので未設定なら :empty で丸ごと消える。
   見出し＝虹グラデ文字／項目＝左寄せの点付きリスト（求人カードと違い枠は持たせない） */
.company-modal__details { display:flex; flex-direction:column; gap:1rem; margin-bottom:1.25rem; text-align:left; }
/* 公式サイトリンクとの間に区切り線。**パネル端まで伸ばさず左右を空ける**（端までだと枠と繋がって
   崩れて見える）。情報を持たない企業では線も出ないよう :not(:empty) に限定する */
.company-modal__details:not(:empty) { padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.25); }
.company-modal__details:empty { display:none; }
.company-modal__details:has(+ .company-modal__jobs:empty) { margin-bottom:0; }
.company-modal__detail-title { font-weight:900; font-size:.95rem; margin-bottom:.35rem; }
/* 見出し直下のリード文（例「職種によって勤務地の候補が異なる。」）。箇条書きの記号は付けない */
.company-modal__detail-lead { margin-bottom:.35rem; font-size:.85rem; font-weight:700; line-height:1.5;
  color:rgba(255,255,255,.9); }
.company-modal__detail-list { display:flex; flex-direction:column; gap:.25rem; }
.company-modal__detail-list li { position:relative; padding-left:.9rem; font-size:.85rem; font-weight:700;
  line-height:1.5; color:rgba(255,255,255,.9); }
.company-modal__detail-list li::before { content:""; position:absolute; left:0; top:.55em;
  width:.35rem; height:.35rem; background:#EAFF12; }
/* 正式版でない企業情報の最下部に出す「※サンプル」注記（情報の一部に見えないよう小さく・間隔も詰める） */
.company-modal__detail-badge { margin-top:-.5rem; font-size:.75rem; font-weight:900; color:#EAFF12; }
/* 企業情報の末尾の一文（「詳細につきましては、会場にて」など）。項目リストは左寄せだがこの一文だけ中央寄せ */
.company-modal__detail-note { font-size:.85rem; font-weight:900; line-height:1.5; color:#fff; text-align:center;
  white-space:pre-line; /* data.php の note の \n で改行する */ }
.company-modal__jobs { display:flex; flex-direction:column; gap:.7rem; text-align:left; }
/* 求人が0件のときは社名の下に余白だけが残らないようにする（代替文は出さない方針） */
.company-modal__jobs:empty { display:none; }
.company-modal__name:has(+ .company-modal__sites:empty + .company-modal__details:empty + .company-modal__jobs:empty) { margin-bottom:0; }
/* 求人カード（虹枠の入れ子。角丸なしでパネル・企業カードと揃える。現在はダミー表示・リンク先が決まったら a に差し替え） */
.company-modal__job { display:block; padding:.75rem 1rem; border:2px solid transparent;
  background: linear-gradient(#111,#111) padding-box, var(--co-grad) border-box; }
.company-modal__job-title { display:block; font-weight:900; font-size:.95rem; }
.company-modal__job-meta { display:block; margin-top:.2rem; font-size:.8rem; font-weight:700; color:rgba(255,255,255,.8); }
a.company-modal__job { transition:box-shadow .15s ease; }
a.company-modal__job:hover { box-shadow:0 0 12px rgba(234,255,18,.45); }
body.modal-open { overflow:hidden; }

/* ゲストモーダル: ×・開閉アニメは .company-modal をそのまま流用するが、
   **パネルの黒地・虹枠・paddingは打ち消す**。ゲスト写真は平行四辺形＋虹枠を焼き込み済みで、
   長方形の枠の中に斜めの写真を1枚置くと形がぶつかって見えるため、暗転オーバーレイの上に
   「写真＋SNSボタン」だけを浮かせる（写真の虹枠がそのまま輪郭を兼ねる＝⑥のページ上の見た目と連続する）。 */
.guest-modal .company-modal__panel { padding:0; border:none; background:none; box-shadow:none; }
/* パネルの黒地が無くなり背景ページが写真の周りに透けるので、暗転を企業モーダル(.8)より強める */
.guest-modal .company-modal__overlay { background:rgba(0,0,0,.92); }
/* 写真の下端＝焼き込みの名前タグ（原寸331pxのうち下71px）は**モーダルでは隠す**。
   タグは平行四辺形に合わせて左下に寄っているため、そのまま出すと名前だけが左斜め下にぶら下がって見える。
   代わりに下の .company-modal__name をグラデ文字で中央に置く。
   aspect-ratio 289/262 ＝ 写真の平行四辺形が終わる位置（y=257前後）で切る値。
   **ゲスト写真を差し替えたら、この比率をタグ直前の高さで取り直すこと。** */
.guest-modal__media { margin:0; overflow:hidden; aspect-ratio:289/262; }
.guest-modal__photo { display:block; width:100%; height:auto; }
/* 隠したタグの代わりの名前。元のタグが虹色だったので LP共通のグラデ文字（.fair-grad-text）で中央に置く。
   color:transparent は .company-modal__name の color:#fff に上書きされてしまうため、ここで戻す */
.guest-modal .company-modal__name { margin:.75rem 0 0; font-size:1.5rem; color:transparent; }
.guest-modal__sns { display:grid; grid-template-columns:1fr; gap:.7rem; }
/* SNSが1件も無いゲスト（URL未判明）は写真の下に余白だけ残さない＝企業モーダルの求人0件と同じ扱い */
.guest-modal__sns:not(:empty) { margin-top:1.25rem; }
.guest-modal__sns-link { text-align:center; }
/* SNSが4件以上（グループでメンバーごとにXがある場合）は縦積みだと写真＋名前と合わせて1画面に収まらないので
   2列＋ボタンを小さめにする。付与は main.js（件数判定）。最終行が1個だけになるときは中央に置く */
.guest-modal__sns--dense { grid-template-columns:repeat(2,1fr); gap:.5rem; }
/* 折り返した相方に高さを合わせる（gridの行は伸びるがブロックのaは内容高のままなので揃わない） */
.guest-modal__sns--dense .guest-modal__sns-link { display:flex; align-items:center; justify-content:center; height:100%; padding:.55rem .5rem; }
.guest-modal__sns--dense .company-modal__job-title { font-size:clamp(.75rem,3.6vw,.85rem); }
.guest-modal__sns--dense > li:last-child:nth-child(odd) { grid-column:1/-1; width:calc(50% - .25rem); justify-self:center; }

/* ⑦ステージ「プレゼン／クリエイティブ」カード: クリック可能であることを示す＋ボタン2種
   （カード自体は div。実トリガーは中の .stage-item__more ボタン＝入れ子ボタンを避けるためこの構造にしている） */
.stage-item--clickable { display:flex; width:100%; background:none; border:none; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; }
.stage-item--clickable:focus-visible { outline:2px solid #EAFF12; outline-offset:6px; border-radius:8px; }
/* ボタンは縦積み（「くわしく見る」の下に「サンプル」） */
.stage-item__actions { display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; margin-top:.6rem; }
.stage-item__more { display:inline-block; padding:.3em 1.1em; border:none; border-radius:999px;
  background:#000; color:#EAFF12; font-weight:900; font-size:.8rem; letter-spacing:.02em; cursor:pointer;
  transition:opacity .15s ease, transform .15s ease; }
.stage-item--clickable:hover .stage-item__more,
.stage-item__more:hover,
.stage-item__more:focus-visible { opacity:.8; }
.stage-item__more:hover { transform:translateY(-1px); }
/* サンプルは副次アクション＝白抜きで「くわしく見る」と区別する */
.stage-item__more--sample { background:#fff; color:#000; box-shadow:0 2px 6px rgba(0,0,0,.25); }

/* ⑦サンプルモーダルの中身（枠・開閉は .contest-modal と共通。ここは素材の並べ方だけ） */
.contest-modal--sample .contest-modal__panel { width:min(94%,42rem); }
.sample-list { display:flex; flex-direction:column; gap:1.5rem; }
@media (min-width: 768px) { .sample-list { display:grid; grid-template-columns:repeat(2,1fr); } }
/* 素材が1件だけの時は2カラムの左半分に寄って見えるので、1カラム扱いにして中央に置く */
@media (min-width: 768px) { .sample-list:has(> .sample-item:only-child) { grid-template-columns:minmax(0,26rem); justify-content:center; } }
.sample-item { min-width:0; }
/* 画像・動画・PDFサムネの見た目を統一（縦横比はバラバラなので contain で収める） */
.sample-item__media { display:block; width:100%; max-height:16rem; object-fit:contain;
  background:#f2f2f2; border-radius:10px; border:1px solid #e2e2e2; }
/* ポスター等の縦長画像（type=image）は16remだと極端に小さくなるので高さ上限を広げる。
   PDFサムネ（.sample-item__pdf の中）は「PDFを開く」ボタンと並ぶため素の16remのまま。 */
.sample-item > a:not(.sample-item__pdf) > .sample-item__media { max-height:28rem; }
.sample-item__pdf { display:block; position:relative; }
.sample-item__open { display:inline-flex; align-items:center; margin-top:.5rem; padding:.35em 1.1em;
  border-radius:999px; background:#000; color:#fff; font-weight:900; font-size:.8rem; }
.sample-item__pdf:hover .sample-item__open { opacity:.85; }
.sample-item__caption { margin-top:.5rem; font-size:.82rem; font-weight:700; line-height:1.6; color:#333; }
/* 差し替え前のダミー素材であることを明示（本番では素材ごと出力されない） */
.sample-item__dummy { display:inline-block; margin-left:.5em; padding:.15em .7em; border-radius:999px;
  background:#ffe8e8; color:#c00; font-size:.7rem; font-weight:900; }

/* ⑦ステージ大会詳細モーダル（プレゼン／クリエイティブ共通）: 参加企業モーダルと同じ黒オーバーレイ＋白パネルの
   視覚言語を踏襲した独立コンポーネント（内容が企業カードと異なり静的な複数セクションのため専用クラス。
   idは presen-modal / creative-modal の2枚だが構造・スタイルは共通のため単一クラスで対応。開閉JSはmain.jsで共通化・body.modal-openは.company-modalと共用） */
.contest-modal { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:1.5rem; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.contest-modal.is-open { opacity:1; pointer-events:auto; }
.contest-modal__overlay { position:absolute; inset:0; background:rgba(0,0,0,.75); }
.contest-modal__panel { position:relative; width:min(94%,34rem); max-height:85vh; overflow-y:auto;
  background:#fff; color:#000; border-radius:14px; padding:2.25rem 1.5rem 1.5rem; text-align:left;
  transform:scale(.95); transition:transform .25s ease; }
.contest-modal.is-open .contest-modal__panel { transform:scale(1); }
.contest-modal__close { position:absolute; top:.4rem; right:.6rem; width:2.25rem; height:2.25rem;
  line-height:2.25rem; font-size:1.5rem; color:#666; background:none; border:none; cursor:pointer; }
.contest-modal__title { font-weight:900; font-size:1.2rem; line-height:1.5; margin-bottom:.6rem; padding-right:1.5rem; }
.contest-modal__lead { font-weight:700; font-size:.92rem; line-height:1.8; margin-bottom:1.5rem; color:#333; }
.contest-modal__list { display:flex; flex-direction:column; gap:1.1rem; }
.contest-modal__row dt { display:inline-block; padding:.25em 1em; margin-bottom:.5em; border-radius:999px;
  background:#000; color:#fff; font-weight:900; font-size:.78rem; }
.contest-modal__row dd { font-size:.9rem; line-height:1.8; color:#222; white-space:pre-line; }

/* ===== ⑫フッターの h1（ページ唯一の実テキスト見出し） =====
   FVの見出しは画像の焼き込み文字しか無いため、フッターに打ち文字の h1 を置いてページ主題を示す。
   薄虹バンド上なので黒文字。フッターの他要素より一段大きいだけの控えめな扱いにして、
   デザイン上「主催表記のかたまりの見出し」に見えるようにする（隠さない・小さくし過ぎない）。 */
.footer-h1 { font-size:1.15rem; font-weight:900; color:#000; line-height:1.4; letter-spacing:.02em; }
.footer-h1__sub { margin-top:.35rem; font-size:.75rem; font-weight:700; color:rgba(0,0,0,.9); }

/* ===== ⑫フッターの運営元リンク・公式X（2026-08-06 新設） =====
   薄虹バンド上なので文字は黒。リンクだと分かるよう下線＋Xは黒ピルで面を作る。 */
.footer-org-link { font-size:.72rem; font-weight:700; color:#000; text-decoration:underline;
  text-underline-offset:.2em; }
.footer-org-link:hover { opacity:.7; }
.footer-x-link { display:inline-flex; align-items:center; gap:.4em; padding:.32em .9em; border-radius:999px;
  background:#000; color:#fff; font-size:.72rem; font-weight:700; line-height:1; }
.footer-x-link:hover { opacity:.8; }
.footer-x-link__icon { width:.95em; height:.95em; flex:none; }

/* ===== 09. FVパーツアニメーション =====
   初期は隠し、FVが見えたら .fv-stage.is-in が付与され各パーツが登場。
   style="--d:.2s" で遅延、data-anim で動きの種類を指定。 */
.fv-part { opacity: 0; will-change: transform, opacity; }
.is-in .fv-part {
  opacity: 1;
  /* 最終位置へ一直線・単調に着地（オーバーシュート無し）。終端で「カクン」と戻らない ease-out */
  animation: fvIn .6s ease-out both;
  animation-delay: var(--d, 0s);
}
.is-in .fv-part[data-anim="pop"]    { animation-name: fvPop; }
.is-in .fv-part[data-anim="left"]   { animation-name: fvLeft; }
.is-in .fv-part[data-anim="right"]  { animation-name: fvRight; }
.is-in .fv-part[data-anim="up"]     { animation-name: fvUp; }
.is-in .fv-part[data-anim="down"]   { animation-name: fvDown; }
@keyframes fvIn   { from{opacity:0} to{opacity:1} }
@keyframes fvPop  { 0%{opacity:0;transform:scale(.82)} 100%{opacity:1;transform:scale(1)} }
@keyframes fvLeft { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:none} }
@keyframes fvRight{ from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:none} }
@keyframes fvUp   { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:none} }
@keyframes fvDown { from{opacity:0;transform:translateY(-30px)} to{opacity:1;transform:none} }

/* coming soon / 旗ボックス: 影はCSS(drop-shadow=カード形状にクリップ) */
.fv-box { filter: drop-shadow(2px 3px 2.5px rgba(0,0,0,.45)); }
/* 登場後にふわふわ浮遊（連続） */
.is-in .fv-box { animation: fvIn .5s ease both, fvFloat 3.6s ease-in-out infinite; animation-delay: var(--d,0s), calc(var(--d,0s) + .5s); }
@keyframes fvFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* 参加企業ロゴの浮遊カード（2026-08-05）。「coming soon」ダミー枠(p_boxN.webp)と同じ
   「白カード＋角丸」をCSSで再現し、中にロゴを contain で収める。座標・浮遊・影は .fv-part/.fv-box と共通。
   ※カードは絶対配置なので padding の % は枠幅ではなく**ステージ幅(1000px)基準**になってしまう。
     内側の余白はロゴ側の width/height %（＝カード基準）で作ること。 */
/* ロゴ枠は描画順(z順)ではヒーロー写真・タイトルロゴより先＝下になるため、z-indexで前面へ出す。
   右中の枠(box8)がタイトルロゴの右下と重なりロゴが欠けるのを防ぐ目的（CTAのクリック領域 z:20 より下に置く）。 */
.fv-logo-card { background:#fff; border-radius:6%/11%; display:flex; align-items:center; justify-content:center; z-index:5; }
/* 縦長ロゴ（京楽）は高さ基準で収まるので、高さは枠いっぱい近く（90%）まで許して小さくなり過ぎるのを防ぐ */
.fv-logo-card img { display:block; width:84%; height:90%; object-fit:contain; }

/* CTA は登場後に拍動＋金色の発光で視線を誘導（2026-07-06: クリックを誘うアクションを強化）
   ※ `.fv-part.fv-cta` にして .fv-part[data-anim="pop"]（同じ要素にも当たる）より詳細度を上げる。
      .fv-cta 単体だと詳細度負けし animation-name が fvPop 1個に潰れて拍動が発火しない不具合があったため。 */
/* 拡大/左寄せの静止値。アニメ中はキーフレームが上書きし、prefers-reduced-motion(animation:none)でもこれが残る。 */
.fv-part.fv-cta { transform: translateX(var(--fv-cta-shift, 0)) scale(var(--fv-cta-scale, 1)); }
.is-in .fv-part.fv-cta { animation: fvPopCta .6s ease-out both, fvPulse 1.6s ease-in-out .8s infinite; }
/* 登場アニメは汎用fvPopではなくCTA専用。汎用fvPopの終端は scale(1) 固定で、
   fvPulseが始まる0.8秒までの間だけ等倍に戻ってしまい、拡大率が大きいほど「カクッ」と目立つため。 */
@keyframes fvPopCta {
  0%   { opacity:0; transform: translateX(var(--fv-cta-shift, 0)) scale(calc(var(--fv-cta-scale, 1) * .82)); }
  100% { opacity:1; transform: translateX(var(--fv-cta-shift, 0)) scale(var(--fv-cta-scale, 1)); }
}
@keyframes fvPulse {
  0%,100% { transform: translateX(var(--fv-cta-shift, 0)) scale(var(--fv-cta-scale, 1));                     filter: drop-shadow(0 0 0 rgba(255,220,0,0)); }
  50%     { transform: translateX(var(--fv-cta-shift, 0)) scale(calc(var(--fv-cta-scale, 1) * 1.1)); filter: drop-shadow(0 0 14px rgba(255,220,0,.9)); }
}

@media (prefers-reduced-motion: reduce) {
  .fv-part { opacity: 1 !important; animation: none !important; }
}

/* ===== 10. FAQ開閉 / reduced-motion =====
   grid-template-rows アニメ。CDN JIT非依存のため自前CSS。 */
.js-faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.js-faq-body.is-open { grid-template-rows: 1fr; }
.js-faq-body > div { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}