@charset "UTF-8";
/* ==========================================================================
   style.css — Pixelart LP (METAL SLUG 30th / PIXEL MISSION CAMPAIGN)
   実装: component-builder
   出典: Figma 9xIW2YmijXIbMg3K8giqEx / PC `1:2` (1440x5689) / SP `27:78` (390x4757)

   --------------------------------------------------------------------------
   実装方針
   --------------------------------------------------------------------------
   1. tokens.css の値は一切書き換えない（@import して参照するのみ）。
   2. Figma は Auto-layout がほぼ皆無で全子要素が絶対配置のため、
      00_plan.md §4 の方針で **セクション単位に構造化**した。
      ・セクションは通常フローで縦積み（`.sec`）
      ・セクション内は写真グリッド=grid、フォーム=行グループ、箇条書き=リスト等に再解釈
      ・座標が意味を持つ装飾（スプライト・L字コーナー・背景タイル・帯）は絶対配置のまま
   3. 座標は `calc(<Figmaのページ絶対Y>px - var(--secN))` の形で書き、
      Figma の値をそのまま追える形にしてある。
   4. 画像の表示サイズは assets/SCALING.md の実測値をそのまま px 指定。
      倍率が非整数（3.62/3.02 等）なのは意図であり丸めない。
      **縦横で倍率が違うため width / height を必ず両方指定**（height:auto 禁止）。
   ========================================================================== */

@import url("tokens.css");


/* ==========================================================================
   0. 本ファイルローカルの補正値
   ========================================================================== */
:root {
  /* セクション原点（Figma ページ絶対Y）。PC = 00_plan.md §2 の分割 */
  --sec1: 0px;
  --sec2: 860px;
  /* コンテンツ追記分（キャンペーン概要 / 作品例 / 応募規約） */
  --insert-overview: 892px; /* 概要本文の追記高さ（カード基準）+ コンセプト見出し+42 + mosaicバナー(上56 + 画像360 + 下24) */
  --insert-rules: 490px;    /* 応募条件パネル内の追記高さ */
  --insert-terms: 430px;    /* 規約ブロック分 + フォーム見出し+70 */
  /* 概要CTA〜ENTRYカードの追加余白 */
  --gap-after-overview: 0px;
  /* フォーム注釈とメール欄の余白（SPで使用） */
  --gap-after-form-hint: 0px;
  /* 投稿写真: 注釈の下にエラーを置く行ぶん。メール欄以降を下げる */
  --space-photo-error-slot: 24px;
  /* sec2 と sec3（応募条件）の間の余白 */
  --gap-before-rules: 80px;
  /* 応募条件以降だけ上下。負の値で上へ（カード位置は変わらない） */
  --pull-rules: -80px;
  /* rules-text と rules-examples の間の追加余白 */
  --gap-rules-examples: 80px;
  /* 写真グリッドをさらに下げる追加余白 */
  --gap-photo-grid: 60px;
  /* sec3（応募条件）と sec4（注意事項）の間の余白 */
  --gap-before-notice: 160px;
  /* ご応募の注意事項パネル高さ（枠・塗りを同じ値に） */
  --panel-notice2-h: 460px;
  /* sp-eri を下げる追加オフセット（パネル拡大に合わせて調整） */
  --nudge-sp-eri: 100px;
  /* sec4（注意事項）と sec5（フォーム）の隙間。負の値で詰める */
  --pull-form: -300px;
  /* 送信ボタン〜フッタの隙間。負の値で詰める（ボタン位置は変えない） */
  --pull-footer: -60px;
  /* 送信ボタン下の余白（フッタだけ下げる。同意〜送信の間隔は変えない） */
  --extend-after-submit: 80px;
  /* フッタシャッター差替え後: SNS〜credit を上へ詰める（負で上げる） */
  --nudge-footer-stack: -80px;
  --shift-after-overview: calc(var(--insert-overview) + var(--gap-after-overview) + var(--pull-rules) + var(--gap-before-rules));
  --shift-after-rules: calc(var(--shift-after-overview) + var(--insert-rules));
  --shift-after-notice: calc(var(--shift-after-rules) + var(--gap-before-notice));
  --shift-after-form: calc(var(--shift-after-notice) + var(--pull-form));
  --shift-after-terms: calc(var(--shift-after-form) + var(--insert-terms));
  --shift-after-footer: calc(var(--shift-after-terms) + var(--pull-footer) + var(--extend-after-submit));
  /* 注意: --secN に insert を足すだけでは、中の abs 要素は
     calc(FigmaY - var(--secN)) で相殺されページ位置が変わらない。
     下げる対象の --y に + var(--shift-after-*) を付けること。 */
  --sec3: calc(1900px + var(--shift-after-overview));
  --sec4: calc(2960px + var(--shift-after-notice));
  --sec5: calc(4180px + var(--shift-after-form));
  --sec6: calc(5262px + var(--shift-after-footer));
  --page-height: calc(5689px + var(--shift-after-footer) + var(--nudge-footer-stack));

  /* ------------------------------------------------------------------
     NOTE: tokens.css の `--space-card-gap: 47px` は算出誤り。
     ENTRY カードの実測は left 197 / 755・幅 507 なので
     755 - (197 + 507) = **51px** が正しい。
     トークン値は書き換えず、ここで実測値を定義して使用する。
     （00_plan.md §4 の「gap = 47px」も同じ誤り）
     ------------------------------------------------------------------ */
  --space-card-gap-actual: 51px;
}

@media (max-width: 767px) {
  :root {
    --sec1: 0px;
    --sec2: 700px;
    --insert-overview: 640px; /* 440 + mosaicバナー(上32 + 画像155 + 下13) */
    /* SP: 写真グリッド位置（日英で本文長が違うため Y のみ言語別。下余白は共通） */
    --photo-grid-y: 3240px;
    --photo-grid-h: 349px; /* 111×3行 + gap 8×2 */
    --pad-rules-after-photos: 40px; /* 写真下端〜パネル下端 */
    /* panel起点(2072-1880=192) + 枠基本高326=518 */
    --insert-rules: calc(
      var(--photo-grid-y) + var(--gap-photo-grid) + var(--photo-grid-h)
      - 1880px - 518px + var(--pad-rules-after-photos)
    );
    --insert-terms: 382px;
    --pull-rules: -60px;
    --gap-before-rules: 80px;
    --gap-before-notice: -40px;
    /* SP: 本文〜作品例の実余白（位置の基準Yは下の .rules-examples で調整） */
    --gap-rules-examples: -30px;
    /* SP: 写真グリッドを下げる */
    --gap-photo-grid: 10px;
    --panel-notice2-h: 590px;
    --pull-form: -480px;
    --pull-footer: -40px;
    /* SP: フォーム注釈（2行）とメール欄の余白 */
    --gap-after-form-hint: 36px;
    /* SP: 送信ボタンが切れないようフッタだけ下げる */
    --extend-after-submit: 120px;
    /* SP: フッタ SNS〜credit を上へ詰める */
    --nudge-footer-stack: -48px;
    /* SP: 概要CTA〜ENTRYカードの余白 */
    --gap-after-overview: 80px;
    /* SP: sp-marco を下げる追加オフセット（ENTRY01 上端に追従。EN と同式） */
    --nudge-sp-marco: calc(var(--insert-overview) + var(--gap-after-overview) + 30px);
    /* SP: sp-moo を上げる / sp-eri を下げる */
    --nudge-sp-moo: -370px;
    --nudge-sp-eri: 600px;
    --sec3: calc(1880px + var(--shift-after-overview));
    --sec4: calc(2450px + var(--shift-after-notice));
    --sec5: calc(3700px + var(--shift-after-form));
    --sec6: calc(4480px + var(--shift-after-footer));
    --page-height: calc(4757px + var(--shift-after-footer) + var(--nudge-footer-stack));

    --space-card-gap-actual: 65px;  /* SP: 1471 - (1074 + 332) = 65 */
  }

  /* EN SP: 概要の改行増分に合わせ、CTA〜ENTRYカードの余白を確保 */
  html[lang="en"] {
    --insert-overview: 710px; /* 510 + mosaicバナー(上32 + 画像155 + 下13) */
    --gap-after-overview: 110px;
    /* ENTRY01 上端付近に marco を追従（JA: insert+gap+30 = 550） */
    --nudge-sp-marco: calc(var(--insert-overview) + var(--gap-after-overview) + 30px);
    /* EN: 英文作品例の末尾に合わせる（写真下のパネル余白は JA と同じ --pad-rules-after-photos） */
    --photo-grid-y: 3120px;
    /* EN SP: Important 本文が収まるよう枠を伸ばし、eri を下端に追従 */
    --panel-notice2-h: 620px;
    --nudge-sp-eri: 630px;
    /* EN SP: Important〜ENTRY FORM の間を +20px */
    --pull-form: -460px;
  }
}


/* ==========================================================================
   1. リセット / ベース
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  overflow-x: hidden;   /* 390px 未満のビューポートでも横スクロールを出さない */
  /* Chromium 既定の text-spacing-trim: normal は「。（」等の連続約物を半角分詰めるが、
     Figma は詰めない。space-all で Figma と同じ全角送りに揃える（qa_report_1 low-1）。 */
  text-spacing-trim: space-all;
}

img { border: 0; }

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Figma にインタラクション用のバリアントは1件も存在しないため hover/active は定義しない。
   アクセシビリティのため focus-visible のみ最小限で付与する（静止画の差分には影響しない）。 */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-accent-cyan);
  outline-offset: 2px;
}


/* ==========================================================================
   2. レイアウト土台
   PC/SP とも Figma のフレーム幅で固定し中央寄せ。
   Figma のフレームは子要素をクリップするため `overflow:hidden` で再現する
   （背景タイル・シャッター画像のはみ出しがここで切られる）。
   768〜1439px は pc-fit.js + scale で横幅に収める（横スクロールなし）。
   ========================================================================== */
.page {
  position: relative;
  width: var(--layout-width);
  height: var(--page-height);
  margin: 0 auto;
  overflow: hidden;
}

/* タブレット〜小さめ PC: 1440 固定をビューポート幅へ等比縮小（assets/js/pc-fit.js）
   - origin は top left。幅超過時 margin:auto は左寄せになるため top center だと
     左に余白・右が欠ける。
   - 倍率は JS が無次元の --pc-fit-scale を渡す。
   - 高さは .page-fit を視覚サイズに切り詰め（transform 後のフッタ下余白対策）。 */
.page-fit {
  width: 100%;
}

html.is-pc-fit .page-fit {
  overflow: hidden;
  /* JS が height を上書き。未適用時のフォールバック */
  height: calc(var(--page-height) * var(--pc-fit-scale));
}

html.is-pc-fit .page {
  margin-left: 0;
  margin-right: 0;
  transform: scale(var(--pc-fit-scale));
  transform-origin: top left;
}

.sec { position: relative; }
.sec1 { height: calc(var(--sec2) - var(--sec1)); }
.sec2 { height: calc(var(--sec3) - var(--sec2)); }
.sec3 { height: calc(var(--sec4) - var(--sec3)); }
.sec4 { height: calc(var(--sec5) - var(--sec4)); }
.sec5 { height: calc(var(--sec6) - var(--sec5)); }
.sec6 { height: calc(var(--page-height) - var(--sec6)); }

/* 絶対配置の共通ハンドル。--x/--y/--w/--h を各クラスで与える。
   カスタムプロパティは継承するため、`.abs` 自身で毎回リセットしておかないと
   親（.card / .panel / .fm-row 等）のサイズが子に漏れる。 */
.abs {
  --x: 0px;
  --y: 0px;
  --w: auto;
  --h: auto;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
}
.abs > picture,
picture.abs { display: block; }
/* <picture> は自身に高さを持たないため 100%/100% で親の実寸を引き継がせる。
   これをしないと内側 img の height:100% が auto に落ちて縦倍率がずれる。 */
.abs > picture:not([class]) { width: 100%; height: 100%; }
.abs > picture > img,
picture.abs > img,
.abs > img:only-child { display: block; width: 100%; height: 100%; }

/* PC / SP 出し分け（Figma で構造そのものが異なる箇所のみ使用） */
.sp-only { display: none; }
@media (max-width: 767px) {
  .pc-only { display: none; }
  .sp-only { display: revert; }
  li.sp-only, p.sp-only { display: block; }
  span.sp-only { display: inline; }
  br.sp-only { display: inline; }
  img.sp-only { display: block; }
}

/* Figma 上で手動改行＋行頭スペースが入っているテキスト */
.sp-pre { white-space: pre-wrap; }

/* ピクセルアートのスプライト。SCALING.md §0：sprites/ の7点のみ pixelated。
   写真・背景は縮小表示なので付けない（付けるとジャギる） */
.sprite {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
}


/* ==========================================================================
   3. 共通コンポーネント
   ========================================================================== */

/* -- セクション見出しのシアン枠バッジ ------------------------------------ */
.badge-box { border: var(--border-accent); }
.badge-label { pointer-events: none; }

/* -- パネル（カード大枠・応募条件大枠・注意事項枠） -----------------------
   Figma は「塗りの矩形」と「線の矩形」が別ノードで数px ずれている。
   1px 一致のため塗り(.panel-fill/.card-fill)と線(.panel-frame/.card-frame)を
   別要素で再現する。                                                        */
.panel, .card { position: absolute; }
.panel-fill, .card-fill { background: var(--color-bg-panel); }
.panel-frame, .card-frame { inset: 0; border: var(--border-accent); }

/* 白影は ENTRY カード2枚と応募条件の大枠のみ。注意事項の2枠には付かない */
.card-fill,
.panel-rules .panel-fill { box-shadow: var(--shadow-panel); }

/* -- シアンL字コーナー ----------------------------------------------------
   Figma は 507x405 の枠を 46x46 のマスクで切って L 字だけ見せている
   （左上 = mask-position -6,-7 / 右下 = mask-position 467,366）。
   ここでは 46x46 の overflow:hidden コンテナ＋2辺だけ枠線を持つ 40x39 の箱で
   等価に再現する。外向きの発光だけがコンテナ内に残り、マスク外は切られる。 */
.lc {
  width: 46px;
  height: 46px;
  overflow: hidden;
  pointer-events: none;
}
.lc > i {
  position: absolute;
  display: block;
  width: 40px;
  height: 39px;
  box-shadow: var(--shadow-corner-glow);
}
.lc-tl > i {
  left: 6px; top: 7px;
  border-top: var(--border-accent-l);
  border-left: var(--border-accent-l);
}
.lc-br > i {
  left: 0; top: 0;
  border-right: var(--border-accent-l);
  border-bottom: var(--border-accent-l);
}

/* -- 平行四辺形ボタン -----------------------------------------------------
   CSS の skew では 1px 一致しないため、Figma 書き出しの SVG を画像のまま使う（確定方針）。 */
.pbtn { position: absolute; display: block; }
.pbtn-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pbtn-label {
  position: absolute;
  display: block;
  left: var(--x, 0);
  top: var(--y, 0);
  width: var(--w, auto);
  height: var(--h, auto);
}
.pbtn-label > img { display: block; width: 100%; height: 100%; }
.pbtn-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}


/* ==========================================================================
   4. 背景レイヤー（ページ絶対座標）
   ========================================================================== */
.bg-layer { position: absolute; inset: 0; }

.bg-kv {
  --x: 0px;
  --y: 0px;
  --w: 1440px;
  --h: 860px;
  opacity: var(--opacity-hero-tile);
  background-image: url("assets/images/kv-bg.jpg");
  background-image: image-set(url("assets/images/kv-bg.webp") type("image/webp"),
                              url("assets/images/kv-bg.jpg")  type("image/jpeg"));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.bg-concept {
  --x: -267px;
  --y: var(--sec2);
  --w: 1909px;
  /* sec2 先頭〜末尾（--sec3）まで追従 */
  --h: calc(var(--sec3) - var(--sec2));
  opacity: var(--opacity-concept-bg);
  object-fit: cover;
  object-position: top center;
}

/* PC 15:24。背景が既に #000 のため視覚上は無変化 */
.bg-form-black { --x: 1px; --y: calc(4415px + var(--shift-after-form)); --w: 1439px; --h: 1201px; background: var(--color-bg-form-section); }


/* ==========================================================================
   5. 01 HERO
   ========================================================================== */
.snklogo   { --x: 22px;  --y: 24px; --w: 88.8px; --h: 21.8px; }
.snklogo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-logo { --x: 468px; --y: 98px; --w: 504px;  --h: 519px; }

/* election の header-menu に準拠（JPN / ENG のみ、CN なし）
   PC はヘッダー中央配置（election の space-between + ロゴ同幅スペーサーと同趣旨） */
.lang-switch {
  --x: 50%; --y: 15px; --w: auto; --h: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.lang-switch-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin: 0;
  padding: 5px 0;
  list-style: none;
}
.lang-switch-link {
  display: block;
  box-sizing: border-box;
  width: 72px;
  border: 1px solid #ffffde;
  color: #ffffde;
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  text-align: center;
  padding: 4px 0;
}
.lang-switch-link:hover,
.lang-switch-link.is-active {
  background: #ffffde;
  color: #000;
}
.lang-switch-link.is-active {
  pointer-events: none;
}

/* EN ページ用（PC）。SP は日本語と同じ上ラベル配置のためここでは上書きしない */
@media (min-width: 768px) {
  html[lang="en"] .fm-req { --w: 88px; }
  /* 左カラムを広げ、REQUIRED をラベル末尾直後へ（Email Address の重なり解消） */
  html[lang="en"] .fm-row-1,
  html[lang="en"] .fm-row-2,
  html[lang="en"] .fm-row-3 { --x: 620px; }
  html[lang="en"] .fm-row-1 .fm-label,
  html[lang="en"] .fm-row-2 .fm-label,
  html[lang="en"] .fm-row-3 .fm-label { --x: -292px; }
  html[lang="en"] .fm-row-1 .fm-req { --x: -220px; }
  html[lang="en"] .fm-row-2 .fm-req { --x: -145px; }
  html[lang="en"] .fm-row-3 .fm-req { --x: -180px; }
  html[lang="en"] .fm-row-1 .fm-input { --w: 403px; }
  html[lang="en"] .fm-row-2 .fm-input { --w: 493px; }
  html[lang="en"] .fm-row-3 .fm-input { --w: 492px; }
  html[lang="en"] .fm-row-1 .fm-error { --w: 403px; }
  html[lang="en"] .fm-error { --w: 493px; }
  html[lang="en"] .form-hint { --x: 620px; }
  html[lang="en"] .fm-filebtn { --x: 414px; }
}

.tagline {
  --x: 38px; --y: 588px;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-tagline);
  line-height: normal;
  letter-spacing: var(--letter-spacing-tagline);
  white-space: nowrap;
  text-shadow: var(--shadow-text-glow);
}

.hero-bands { width: 0; height: 0; }
.band-pc1 { --x:   0px; --y: 650px; --w: 486px; --h: 70px; }
.band-pc2 { --x:  50px; --y: 650px; --w: 486px; --h: 70px; }
.band-pc3 { --x:  -3px; --y: 732px; --w: 486px; --h: 70px; }
.band-pc4 { --x: 457px; --y: 732px; --w: 486px; --h: 70px; }

/* 日本語のみの見出し・送信ボタン（数字・英語を含む見出しは SVG のまま） */
.heading-text {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.15;
  letter-spacing: 0.04em;
}
.h-rules.heading-text,
.h-notice.heading-text,
.h-notice-shooting.heading-text,
.h-notice-posting.heading-text {
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  text-align: center;
  white-space: nowrap;
}
.h-rules.heading-text,
.h-notice.heading-text {
  font-size: 42px;
  line-height: 1.2;
  letter-spacing: 0.08em;
}
.heading-text--sub {
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.08em;
}
.heading-text--btn {
  color: var(--color-accent-cyan);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* 見出しの left/top は旧 fonts.md §3（インク境界基準）の値をそのまま使う */
.h-hero-band  { --x: 37.25px;   --y: 662.2px;  --w: 872px; --h: 128px; }
.hero-vlabel  { --x: 1406.9px;  --y: 297.49px; --w: 12px;  --h: 190px; }

/* 塗りは枠の内側にセンタリング（枠 227×221 / 塗り 221×217 → inset 3px / 2px） */
.hero-oct-fill    { --x: 1150px; --y: 577px; --w: 221px; --h: 217px; }
.hero-oct-outline { --x: 1147px; --y: 575px; --w: 227px; --h: 221px; }

/* 「募集期間」「公開予定」バッジ。Figma は hug の Auto-layout。
   実寸は 00_reference_pc.png / _sp.png の枠線から実測（PC 72x25 / SP 56x19）。 */
.hero-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-accent);
  color: var(--color-accent-cyan);
  font-family: var(--font-badge);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-badge-label);
  line-height: 1;
  white-space: nowrap;
}
.hero-badge-1 { --x: 1226px; --y: 617px; --w: 72px; --h: 25px; }
.hero-badge-2 { --x: 1226px; --y: 709px; --w: 72px; --h: 25px; }
/* EN: ENTRY PERIOD / RELEASE DATE は日本語より長いため hug + 中央寄せ */
html[lang="en"] .hero-badge-1,
html[lang="en"] .hero-badge-2 {
  --x: 1262px;
  --w: max-content;
  padding-inline: 10px;
  box-sizing: border-box;
  transform: translateX(-50%);
}

.hero-date-1 { --x: 1195.89px; --y: 649.95px; --w: 131px; --h: 35px; }
.hero-date-2 { --x: 1216.89px; --y: 744.77px; --w: 90px;  --h: 18px; }

/* 「▶」差し替えSVGは右向き（8×15）。回転不要 */
.hero-arrow { --x: 1255px; --y: 667px; --w: 8px; --h: 15px; }
.hero-arrow > i {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
}
.hero-arrow > i > img { display: block; width: 100%; height: 100%; }

/* SP の日付ボックス（PC は八角形。構造が異なる） */
.hero-datebox {
  --x: 37px; --y: 555px; --w: 310px; --h: 80px;
  background: var(--color-bg-overlay);
  border: var(--border-mint);
}


/* ==========================================================================
   6. 02 CONCEPT + ENTRY
   ========================================================================== */
.bb-concept { --x: 584px;    --y: calc(973px - var(--sec2));    --w: 271px; --h: 31px; }
.bl-concept { --x: 595.09px; --y: calc(982.51px - var(--sec2)); --w: 249px; --h: 12px; }
/* 差し替えSVG: 734×123 → 701×165（2行→3行） */
.h-concept  { --x: 355.09px; --y: calc(1029.54px - var(--sec2)); --w: 701px; --h: 165px; }

/* 見出し高さ増分(+42)に合わせ応募期間〜概要を下げる */
.ep-label { --x: 476.16px; --y: calc(1241.22px - var(--sec2)); --w: 78px;  --h: 19px; }
.ep-date  { --x: 572.92px; --y: calc(1234.31px - var(--sec2)); --w: 354px; --h: 24px; }
.ep-arrow { --x: 741.74px; --y: calc(1242.49px - var(--sec2)); --w: 19px;  --h: 10px; }

.campaign-overview {
  --x: 230px;
  --y: calc(1362px - var(--sec2));
  --w: 980px;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body-36);
  letter-spacing: var(--letter-spacing-body);
  text-align: center;
}
.campaign-overview p + p { margin-top: 1em; }
.campaign-overview__cta {
  margin-top: 1.2em;
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-cyan);
}

/* mosaic プロジェクトバナー（概要本文の末尾に追加）。
   .campaign-overview は絶対配置のためカード側 --y は動かない。
   この占有高さぶんを :root の --insert-overview に加算済み（上32/56 + 画像 + 下余白）。 */
.mosaic-banner { margin-top: 56px; }
.mosaic-banner-img {
  display: block;
  width: 720px;
  height: 360px; /* 2:1（実寸 1200×600） */
  margin-inline: auto;
}

/* ENTRY カード：枠(1:143 / 1:144)の矩形を .card の実体とする。
   カード2の left は カード1 left + 幅 + var(--space-card-gap-actual) = 197+507+51 = 755 */
.card   { --y: calc(1360px + var(--insert-overview) + var(--gap-after-overview) - var(--sec2)); --w: 507px; --h: 405px; }
.card-1 { --x: 197px; }
.card-2 { --x: calc(197px + 507px + var(--space-card-gap-actual)); }

/* 塗りは枠より外側にずれている（Figma のブレ。1px 一致のため個別に再現） */
.card-1 .card-fill { --x: -6px; --y: -6px; --w: 517px; --h: 415px; }
.card-2 .card-fill { --x: -4px; --y: -6px; --w: 517px; --h: 415px; }

.card .lc-tl { --x: -6px; --y: -8px; }
.card .lc-br { left: auto; top: auto; right: -7px; bottom: -6px; }

.card-1 .card-badge { --x: 207px;    --y: -48px;   --w: 93px;  --h: 88px; }
.card-2 .card-badge { --x: 204px;    --y: -48px;   --w: 93px;  --h: 88px; }
.card-1 .card-title { --x: 186.61px; --y: 53.61px; --w: 131px; --h: 31px; }
.card-2 .card-title { --x: 90.67px;  --y: 53.61px; --w: 328px; --h: 31px; }

.card-list {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body-35);
  letter-spacing: var(--letter-spacing-body);
}
/* EN: "- " ぶら下げで改行後の先頭を文字位置に揃える */
html[lang="en"] .card-list > li {
  padding-left: 0.85em;
  text-indent: -0.85em;
}
html[lang="en"] .rules-text > p {
  padding-left: 0.85em;
  text-indent: -0.85em;
}
html[lang="en"] .rules-examples__list > li {
  padding-left: 0.85em;
  text-indent: -0.85em;
}
html[lang="en"] .rules-examples__note {
  padding-left: 0.7em;
  text-indent: -0.7em;
}
.card-list-1 { --x: 34px; --y: 122px; --w: 434px; }
.card-list-2 { --x: 38px; --y: 122px; --w: 434px; }

.pbtn-1 { --x: 108px; --y: 273px; --w: 274px; --h: 68px; }
.pbtn-2 { --x: 103px; --y: 273px; --w: 304px; --h: 68px; }
.pbtn-1 .pbtn-label { --x: 67.95px; --y: 23.08px; --w: 138px; --h: 22px; }
.pbtn-2 .pbtn-label { --x: 48.85px; --y: 23.08px; --w: 205px; --h: 22px; }

.sp-shori2 { --x: 148px;  --y: calc(1077px - var(--sec2)); --w: 98px;  --h: 174px; }
.sp-marco  { --x: 1163px; --y: calc(1095px - var(--sec2)); --w: 105px; --h: 138px; transform: scaleX(-1); }


/* ==========================================================================
   7. 03 応募条件 ENTRY RULES
   ========================================================================== */
.bb-rules { --x: 658px;    --y: calc(2018px + var(--shift-after-overview) - var(--sec3));    --w: 124px; --h: 31px; }
.bl-rules { --x: 670.49px; --y: calc(2027.51px + var(--shift-after-overview) - var(--sec3)); --w: 100px; --h: 12px; }
.h-rules  { --x: 608.88px; --y: calc(2074.07px + var(--shift-after-overview) - var(--sec3)); --w: 222px; --h: 51px; }

.rules-lead {
  --x: 609px; --y: calc(2152px + var(--shift-after-overview) - var(--sec3));
  font-size: var(--font-size-body);
  line-height: var(--line-height-body-34);
  white-space: nowrap;
}
/* EN: 英文が長いためページ中央揃え */
html[lang="en"] .rules-lead {
  --x: 720px;
  transform: translateX(-50%);
  text-align: center;
}

.panel-rules { --x: 187px; --y: calc(2233px + var(--shift-after-overview) - var(--sec3)); --w: 1066px; --h: calc(800px + var(--insert-rules)); }
/* 影は .panel-fill 側。枠の --h を変えたらこちらも同じ値に揃える */
.panel-rules .panel-fill { --x: 7px; --y: 0; --w: 1059px; --h: calc(800px + var(--insert-rules)); }
.panel-rules .lc-tl { --x: -6px; --y: -8px; }
.panel-rules .lc-br { left: auto; top: auto; right: -7px; bottom: -7px; }

.rules-text {
  --x: 230px; --y: calc(2294px + var(--shift-after-overview) - var(--sec3)); --w: 980px;
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-34);
}
.rules-text > p {
  margin: 0;
  white-space: normal;
}
.rules-text > p + p { margin-top: 0.4em; }

.rules-examples {
  --x: 230px;
  --y: calc(2460px + var(--shift-after-overview) + var(--gap-rules-examples) - var(--sec3));
  --w: 980px;
  font-size: var(--font-size-body);
  line-height: 1.55;
}
.rules-examples__title {
  margin: 0 0 0.6em;
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
}
.rules-examples__note {
  margin: 0.5em 0;
  opacity: 0.9;
}
.rules-examples__list {
  margin: 0.4em 0 0.8em;
}
.rules-examples__titles {
  margin-top: 0.4em;
  line-height: 1.4;
}

/* -- 写真グリッド PC:3列×2行 / SP:2列×3行 --------------------------------
   位置: --y（下の --gap-photo-grid で上下調整）
   画像は object-fit: contain で全体を表示（トリミングしない） */
.photo-grid {
  --x: 240px;
  --y: calc(2401px + var(--shift-after-rules) + var(--gap-rules-examples) + var(--gap-photo-grid) - var(--sec3));
  display: grid;
  grid-template-columns: repeat(3, var(--layout-cell-width));
  grid-auto-rows: var(--layout-cell-height);
  gap: var(--space-grid-gap);
}

.cell {
  position: relative;
  overflow: hidden;
  width: var(--layout-cell-width);
  height: var(--layout-cell-height);
}
.cell > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  image-rendering: var(--img-render-photo);
}
.cell-1 > img,
.cell-2 > img,
.cell-3 > img,
.cell-4 > img,
.cell-5 > img,
.cell-6 > img { --iw: auto; --ih: auto; --ix: 0; --iy: 0; }
.cell-3       { width: 305px; margin-left: -1px; }
.cell-6       { height: 225px; }

.sp-fio  { --x: 240px;  --y: calc(2153px + var(--shift-after-overview) - var(--sec3)); --w: 87px;  --h: 104px; }
.sp-tama { --x: 1094px; --y: calc(2120px + var(--shift-after-overview) - var(--sec3)); --w: 118px; --h: 134px; transform: scaleX(-1); }


/* ==========================================================================
   8. 04 ご応募の注意事項 NOTICE
   ========================================================================== */
.bb-notice { --x: 681px;    --y: calc(3071px + var(--shift-after-notice) - var(--sec4));    --w: 79px;  --h: 31px; }
.bl-notice { --x: 694.49px; --y: calc(3080.51px + var(--shift-after-notice) - var(--sec4)); --w: 53px;  --h: 12px; }
.h-notice  { --x: 498.86px; --y: calc(3126.81px + var(--shift-after-notice) - var(--sec4)); --w: 447px; --h: 51px; }

.panel-notice1 { --x: 187px; --y: calc(3243px + var(--shift-after-notice) - var(--sec4)); --w: 1066px; --h: 218px; }
.panel-notice1 .panel-fill { --x: 1px; --y: 0; --w: 1066px; --h: 218px; }
.panel-notice1 .lc-tl { --x: -6px; --y: -10px; }
.panel-notice1 .lc-br { left: auto; top: auto; right: -7px; bottom: -8px; }

.panel-notice2 { --x: 187px; --y: calc(3243px + var(--shift-after-notice) - var(--sec4)); --w: 1066px; --h: var(--panel-notice2-h); }
.panel-notice2 .panel-fill { --x: 1px; --y: 1px; --w: 1066px; --h: var(--panel-notice2-h); }
.panel-notice2 .lc-tl { --x: -6px; --y: -8px; }
.panel-notice2 .lc-br { left: auto; top: auto; right: -7px; bottom: -8px; }

.h-notice-shooting { --x: 635.7px;  --y: calc(3290.58px + var(--shift-after-notice) - var(--sec4)); --w: 172px; --h: 31px; }
.h-notice-posting  { --x: 635.74px; --y: calc(3540.64px + var(--shift-after-notice) - var(--sec4)); --w: 172px; --h: 31px; }

.notice-text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body-36);
}
.notice-text-1 { --x: 229px; --y: calc(3345px + var(--shift-after-notice) - var(--sec4)); white-space: nowrap; }
.notice-text-2 { --x: 229px; --y: calc(3300px + var(--shift-after-notice) - var(--sec4)); --w: 985px; }
.notice-text-2 > p { white-space: normal; margin: 0 0 0.55em; }
/* EN: ・の幅ぶんぶら下げインデント（全角スペース回避） */
html[lang="en"] .notice-text-2 > p:not(.notice-foot) {
  padding-left: 1em;
  text-indent: -1em;
}
.notice-foot { margin-top: 1em !important; opacity: 0.9; }

.is-hidden { display: none !important; }

.sp-moo { --x: 240px;  --y: calc(3114px + var(--shift-after-notice) - var(--sec4)); --w: 166px; --h: 163px; }
.sp-eri { --x: 1058px; --y: calc(3550px + var(--shift-after-notice) + var(--nudge-sp-eri) - var(--sec4)); --w: 156px; --h: 142px; }


/* ==========================================================================
   9. 05 ENTRY FORM
   ========================================================================== */
/* フォーム上端シャッター（表示: shutter_upper.png / 3000×427） */
.ft-shutter { --x: -18px; --y: calc(4262px + var(--shift-after-form) - var(--sec5)); --w: 1458px; --h: 207px; }

.bb-form { --x: 664px;    --y: calc(4524px + var(--shift-after-form) - var(--sec5));    --w: 119px; --h: 31px; }
.bl-form { --x: 676.49px; --y: calc(4533.51px + var(--shift-after-form) - var(--sec5)); --w: 93px;  --h: 12px; }
/* 差し替えSVG: 609×50 → 721×120（1行→2行） */
.h-form  { --x: 363.06px; --y: calc(4577.38px + var(--shift-after-form) - var(--sec5)); --w: 721px; --h: 120px; }

/* 見出し高さ増分(+70)に合わせリード文を下げる */
.form-lead {
  --x: 460px; --y: calc(4740px + var(--shift-after-form) - var(--sec5));
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
  white-space: nowrap;
}
html[lang="en"] .form-lead {
  --x: 720px;
  transform: translateX(-50%);
  text-align: center;
}

/* 行の原点は入力欄の左上。ラベル・「必須」は行原点からの相対で置く
   （Figma 上で行ごとに 1〜2px ずれているため個別値） */
.fm-row   { width: 0; height: 0; }
.fm-row-1 { --x: 561px; --y: calc(4876px + var(--shift-after-form) - var(--sec5)); }
.fm-row-2 { --x: 561px; --y: calc(4963px + var(--space-photo-error-slot) + var(--shift-after-form) - var(--sec5)); }
.fm-row-3 { --x: 561px; --y: calc(5050px + var(--space-photo-error-slot) + var(--shift-after-form) - var(--sec5)); }

.fm-label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body-lg);
  white-space: nowrap;
}
.fm-row-1 .fm-label { --x: -233px; --y: 8px; line-height: var(--line-height-tight); }
.fm-row-2 .fm-label { --x: -233px; --y: 6px; line-height: normal; }
.fm-row-3 .fm-label { --x: -233px; --y: 6px; line-height: normal; }

.fm-req {
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-required);
  color: var(--color-required);
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-required);
  line-height: var(--line-height-tight);
  --w: 62px; --h: 26px;
}
.fm-row-1 .fm-req { --x: -145px; --y: 6px; }
.fm-row-2 .fm-req { --x: -92px;  --y: 7px; }
.fm-row-3 .fm-req { --x: -108px; --y: 8px; }

/* FIXME(figma): 入力欄は Figma 上で bg:#fff + border:1px dashed #fff。
   白地に白の破線のため枠線が見えない。意図か不明だが Figma のまま再現している。 */
.fm-input {
  background: var(--color-bg-input);
  border: var(--border-input);
  border-radius: var(--radius-none);
  color: var(--color-text-on-input);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  padding: 0 4px;
  --x: 0; --y: 0; --h: 37px;
}
.fm-row-1 .fm-input { --w: 462px; }
.fm-row-2 .fm-input { --w: 552px; }
.fm-row-3 .fm-input { --w: 551px; }

/* 実ファイル選択用。見た目は fm-input + fm-filebtn 側で再現する */
.fm-file-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fm-error {
  --x: 0;
  --y: 40px;
  --w: 552px;
  --h: auto;
  color: var(--color-required);
  font-family: var(--font-body);
  font-size: var(--font-size-required);
  line-height: 1.4;
  pointer-events: none;
}
.fm-row-1 .fm-error {
  --w: 462px;
  /* 注釈（form-hint）の下にエラーを表示 */
  --y: calc(40px + var(--space-photo-error-slot));
}

.form-hint {
  --x: 561px;
  --y: calc(4918px + var(--shift-after-form) - var(--sec5));
  --w: 552px;
  color: var(--color-text-primary);
  font-size: var(--font-size-required);
  line-height: 1.4;
  opacity: 0.85;
}

.terms {
  /* 左端＝項目名、右端＝入力欄と同じ */
  --x: 328px;
  --y: calc(5150px + var(--space-photo-error-slot) + var(--shift-after-form) - var(--sec5));
  --w: 785px;
  color: var(--color-text-primary);
}
.terms__heading {
  margin: 0 0 10px;
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
}
.terms__box {
  max-height: 220px;
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--color-accent-cyan);
  background: rgba(0, 0, 0, 0.55);
  font-size: 12px;
  line-height: 1.7;
}
.terms__box a { color: var(--color-accent-cyan); text-decoration: underline; }
.terms__title { font-weight: var(--font-weight-bold); margin-bottom: 0.8em; }
.terms__box h4 { margin: 1em 0 0.4em; font-size: 12px; }
.terms__box p,
.terms__box ol,
.terms__box ul { margin: 0 0 0.6em; }
.terms__box ol,
.terms__box ul { padding-left: 1.4em; }
.terms__box ul { list-style-type: disc; }
.terms__paren { list-style-type: decimal; }
.terms__agree {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: var(--font-size-body);
  cursor: pointer;
}
.terms__agree input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent-cyan);
}
.terms .fm-error {
  position: static;
  display: block;
  margin-top: 6px;
}

.inputItemDataTextError {
  outline: 2px solid var(--color-required);
  outline-offset: 1px;
}

.fm-filebtn {
  --x: 473px; --y: -1px; --w: 78px; --h: 37px;
  background: var(--color-bg-file-button);
  color: var(--color-text-on-input);
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-file-btn);
  line-height: normal;
  text-align: left;
  /* <button> の内容は UA が content-box 内で縦中央寄せするため padding-top だけでは
     半分しか効かない。中央寄せを明示し、下 padding でテキスト中心を
     枠上端 +17.5px に合わせる（qa_report_1 mid-3） */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 2px 10px;
  white-space: nowrap;
}

.pbtn-submit { --x: 568px; --y: calc(5102px + var(--shift-after-terms) - var(--sec5)); --w: 304px; --h: 68px; }
.pbtn-submit .pbtn-label {
  --x: 0;
  --y: 0;
  --w: 100%;
  --h: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-jump { --x: 164px; --y: calc(4195px + var(--shift-after-form) - var(--sec5)); --w: 131px; --h: 134px; }


/* ==========================================================================
   10. 06 FOOTER
   ========================================================================== */
.footer-band    { --x: 0;      --y: calc(5337px + var(--shift-after-footer) + var(--nudge-footer-stack) - var(--sec6)); --w: 1440px; --h: 215px; }
/* フッタ上端シャッター（表示: ft_shutter.png / 2976×500） */
.shutter-upper  { --x: -205px; --y: calc(5262px + var(--shift-after-footer) - var(--sec6)); --w: 1682px; --h: 283px; }
/* SNS 3件（X / Facebook / TikTok）。vote と同リンク。ハンドルは HTML テキストで言語切替 */
.sns-row {
  --x: 0;
  --y: calc(5527px + var(--shift-after-footer) + var(--nudge-footer-stack) - var(--sec6));
  --w: 1440px;
  --h: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  z-index: 2;
}
.sns {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffe1;
  text-decoration: none;
  white-space: nowrap;
}
.sns-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.sns-label {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* 旧 footer_snk_credit.png をロゴSVG＋テキストに分離（解像度対策）
   背景は SNS と同じフッター帯色（--color-bg-footer）に揃える
   SNS 下端（約 +26px）より下から開始してリンク表示が隠れないようにする */
.footer-credit {
  --x: 0; --y: calc(5562px + var(--shift-after-footer) + var(--nudge-footer-stack) - var(--sec6)); --w: 1440px; --h: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-sizing: border-box;
  background: var(--color-bg-footer);
  pointer-events: none;
}
.footer-credit-logo {
  display: block;
  width: 100px;
  height: 24.5px;
}
.footer-credit-copy {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
}


/* ==========================================================================
   11. SP（〜767px）
   PC と座標・サイズが異なるものだけ上書きする。
   ========================================================================== */
@media (max-width: 767px) {

  /* -- 背景 -------------------------------------------------------------- */
  .bg-kv { --x: 0px; --y: -8px; --w: 1300px; --h: 731.639px; }
  /* .bg-concept は --sec2〜--sec3 に連動（PCと同定義） */

  /* -- 01 HERO ----------------------------------------------------------- */
  .snklogo   { --x: 12px; --y: 14px; --w: 53px;  --h: 13px; }
  .hero-logo { --x: 70px; --y: 68px; --w: 251px; --h: 258px; }

  .lang-switch {
    --y: 10px;
  }
  .lang-switch-menu {
    gap: 5px;
    padding: 0;
  }
  .lang-switch-link {
    width: 45px;
    font-size: 16px;
    line-height: 0.9375;
    padding: 3px 0;
  }

  /* EN SP: 日本語同様にラベル上＋入力下。REQUIRED は英ラベル幅に合わせて右へ */
  html[lang="en"] .fm-req { --w: 72px; }
  html[lang="en"] .fm-row-1 .fm-req { --x: 55px; }
  html[lang="en"] .fm-row-2 .fm-req { --x: 130px; }
  html[lang="en"] .fm-row-3 .fm-req { --x: 90px; }

  .tagline {
    --x: 196px; --y: 374px;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .band-sp1 { --x:  94px; --y: 404px; --w: 202px;     --h: 32px; }
  .band-sp2 { --x:  84px; --y: 440px; --w: 223.084px; --h: 32px; }
  .band-sp3 { --x: 117px; --y: 477px; --w: 157px;     --h: 32px; }

  .h-hero-band { --x: 93px;     --y: 410.88px; --w: 205px; --h: 92px; }
  .hero-vlabel { --x: 135.93px; --y: 525.82px; --w: 119px; --h: 8px; }

  .hero-badge-1 { --x: 62px; --y: 571px; --w: 56px; --h: 19px; }
  .hero-badge-2 { --x: 62px; --y: 600px; --w: 56px; --h: 19px; }
  /* EN SP: 長いラベルに合わせて枠を広げ、日付を右へ退避 */
  html[lang="en"] .hero-badge-1,
  html[lang="en"] .hero-badge-2 {
    --x: 48px;
    --w: auto;
    padding-inline: 8px;
    box-sizing: border-box;
    transform: none;
  }
  html[lang="en"] .hero-date-1 { --x: 168px; }
  html[lang="en"] .hero-date-2 { --x: 168px; }
  html[lang="en"] .hero-arrow { --x: 240px; }

  .hero-date-1 { --x: 126.89px; --y: 573.51px; --w: 121px; --h: 12px; }
  .hero-date-2 { --x: 129.89px; --y: 602.51px; --w: 71px;  --h: 12px; }

  .hero-arrow { --x: 200px; --y: 573px; --w: 8px; --h: 15px; }

  /* -- 02 CONCEPT + ENTRY ------------------------------------------------ */
  .bb-concept { --x: 107px;    --y: calc(758px - var(--sec2));    --w: 177px; --h: 23px; }
  .bl-concept { --x: 117.06px; --y: calc(765.82px - var(--sec2)); --w: 156px; --h: 8px; }
  /* 差し替えSVG: 238×97 → 322×91 */
  .h-concept  { --x: 34px;  --y: calc(798.77px - var(--sec2)); --w: 322px; --h: 91px; }

  .ep-label { --x: 171.9px;  --y: calc(928.93px - var(--sec2)); --w: 47px;  --h: 12px; }
  .ep-date  { --x: 88.35px;  --y: calc(955.64px - var(--sec2)); --w: 215px; --h: 15px; }
  .ep-arrow { --x: 190.33px; --y: calc(958.49px - var(--sec2)); --w: 8px;   --h: 10px; }

  .campaign-overview {
    --x: 40px;
    --y: calc(1060px - var(--sec2));
    --w: 310px;
    font-size: var(--font-size-body);
  }

  .mosaic-banner { margin-top: 32px; }
  .mosaic-banner-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 600;
  }

  /* SP は横並び→縦積み。カード2は カード1 下端 + var(--space-card-gap-actual) */
  .card   { --x: 40px; --w: 310px; }
  .card-1 { --y: calc(1074px + var(--insert-overview) + var(--gap-after-overview) - var(--sec2)); --h: 332px; }
  .card-2 { --y: calc(1074px + var(--insert-overview) + var(--gap-after-overview) + 332px + var(--space-card-gap-actual) - var(--sec2)); --h: 326px; }

  .card-1 .card-fill { --x: 0;   --y: -6px; --w: 310px; --h: 341px; }
  .card-2 .card-fill { --x: 3px; --y: 0;    --w: 310px; --h: 323px; }

  .card .lc-br { right: -7px; bottom: -8px; }

  .card-1 .card-badge { --x: 113px;    --y: -40px;   --w: 93px;  --h: 88px; }
  .card-2 .card-badge { --x: 113px;    --y: -40px;   --w: 93px;  --h: 88px; }
  .card-1 .card-title { --x: 114.38px; --y: 58.88px; --w: 82px;  --h: 20px; }
  .card-2 .card-title { --x: 52.42px;  --y: 58.88px; --w: 205px; --h: 20px; }

  /* 手動改行は <li class="sp-pre"> 側で pre-wrap 指定。<ul> には当てない（上と同じ理由） */
  .card-list-1 { --x: 19px; --y: 102px; --w: auto; }
  .card-list-2 { --x: 38px; --y: 101px; --w: auto; }

  /* SP カード1 のボタンだけ 207x52（Figma は PC と同じ Rectangle 38 を縮小配置） */
  .pbtn-1 { --x: 52px; --y: 220px; --w: 207px; --h: 52px; }
  .pbtn-2 { --x: 36px; --y: 214px; --w: 239px; --h: 52px; }
  .pbtn-1 .pbtn-label { --x: 47px;    --y: 17.52px; --w: 113px; --h: 18px; }
  .pbtn-2 .pbtn-label { --x: 35.51px; --y: 17.52px; --w: 168px; --h: 18px; }

  /* EN SP: リスト改行増分 → カード高さ／ボタン位置を下げて余白確保 */
  html[lang="en"] .card-1 {
    --h: 365px;
  }
  html[lang="en"] .card-1 .card-fill {
    --h: 374px;
  }
  html[lang="en"] .card-2 {
    --y: calc(1074px + var(--insert-overview) + var(--gap-after-overview) + 365px + var(--space-card-gap-actual) - var(--sec2));
    --h: 365px;
  }
  html[lang="en"] .card-2 .card-fill {
    --h: 362px;
  }
  html[lang="en"] .pbtn-1,
  html[lang="en"] .pbtn-2 {
    --y: 265px;
  }

  .sp-shori2 { --x: 29px;  --y: calc(1744px + var(--insert-overview) + var(--gap-after-overview) - var(--sec2)); --w: 69px; --h: 122px; }
  html[lang="en"] .sp-shori2 {
    --y: calc(1744px + var(--insert-overview) + var(--gap-after-overview) + 80px - var(--sec2));
  }
  .sp-marco  { --x: 258px; --y: calc(1012px + var(--nudge-sp-marco) - var(--sec2)); --w: 79px; --h: 104px; }

  /* -- 03 応募条件 -------------------------------------------------------- */
  .bb-rules { --x: 149px;    --y: calc(1929px + var(--shift-after-overview) - var(--sec3));    --w: 93px;  --h: 23px; }
  .bl-rules { --x: 163.93px; --y: calc(1936.82px + var(--shift-after-overview) - var(--sec3)); --w: 63px;  --h: 8px; }
  .h-rules  { --x: 139.44px; --y: calc(1964.54px + var(--shift-after-overview) - var(--sec3)); --w: 111px; --h: 26px; }

  .rules-lead { --x: 105px; --y: calc(2002px + var(--shift-after-overview) - var(--sec3)); }
  html[lang="en"] .rules-lead {
    --x: 195px;
    transform: translateX(-50%);
    text-align: center;
    line-height: 1.35;
  }

  .panel-rules { --x: 40px; --y: calc(2072px + var(--shift-after-overview) - var(--sec3)); --w: 310px; --h: calc(326px + var(--insert-rules)); }
  .panel-rules .panel-fill { --x: 2px; --y: 0; --w: 310px; --h: calc(323px + var(--insert-rules)); }
  .panel-rules .lc-tl { --x: -7px; --y: -8px; }
  .panel-rules .lc-br { right: -7px; bottom: -7px; }

  .rules-text {
    --x: 64px; --y: calc(2102px + var(--shift-after-overview) - var(--sec3)); --w: 262px;
    font-size: var(--font-size-body);
    line-height: var(--line-height-body-36);
  }
  .rules-text > p { white-space: normal; }

  /* 改行後の rules-text 高さに合わせ、基準Yを 2280→2460 に下げたうえで余白は --gap-rules-examples */
  .rules-examples {
    --x: 64px;
    --y: calc(2460px + var(--shift-after-overview) + var(--gap-rules-examples) - var(--sec3));
    --w: 262px;
  }

  /* SP: 2列×3行・セルを拡大（PCは3×2のまま）
     写真位置は --photo-grid-y（日英別）。パネル下余白は --pad-rules-after-photos で共通化 */
  .photo-grid {
    --x: 40px;
    --y: calc(var(--photo-grid-y) + var(--shift-after-overview) + var(--gap-photo-grid) - var(--sec3));
    --layout-cell-width: 151px;
    --layout-cell-height: 111px;
    grid-template-columns: repeat(2, var(--layout-cell-width));
    gap: 8px;
  }

  .cell-3 {
    width: var(--layout-cell-width);
    margin-left: 0;
  }
  .cell-6 {
    width: var(--layout-cell-width);
    height: var(--layout-cell-height);
    margin-left: 0;
    margin-top: 0;
  }

  .sp-fio  { --x: 29px;  --y: calc(2009px + var(--shift-after-overview) - var(--sec3)); --w: 53px; --h: 65px; }
  .sp-tama { --x: 291px; --y: calc(1997px + var(--shift-after-overview) - var(--sec3)); --w: 73px; --h: 83px; }

  /* -- 04 注意事項 -------------------------------------------------------- */
  .bb-notice { --x: 168px;    --y: calc(2488px + var(--shift-after-notice) - var(--sec4));    --w: 59px;  --h: 23px; }
  .bl-notice { --x: 180.93px; --y: calc(2495.82px + var(--shift-after-notice) - var(--sec4)); --w: 33px;  --h: 8px; }
  .h-notice  { --x: 90.92px;  --y: calc(2528.27px + var(--shift-after-notice) - var(--sec4)); --w: 215px; --h: 25px; }

  .panel-notice1 { --x: 40px; --y: calc(2588px + var(--shift-after-notice) - var(--sec4)); --w: 310px; --h: 310px; }
  .panel-notice1 .panel-fill { --x: 1px; --y: 0; --w: 310px; --h: 310px; }
  .panel-notice1 .lc-tl { --x: -7px; --y: -8px; }
  .panel-notice1 .lc-br { right: -7px; bottom: -7px; }

  .panel-notice2 { --x: 40px; --y: calc(2588px + var(--shift-after-notice) - var(--sec4)); --w: 310px; --h: var(--panel-notice2-h); }
  .panel-notice2 .panel-fill { --x: 0; --y: 0; --w: 310px; --h: var(--panel-notice2-h); }
  .panel-notice2 .lc-tl { --x: -6px; --y: -8px; }
  .panel-notice2 .lc-br { right: -7px; bottom: -9px; }

  .h-notice-shooting { --x: 141.44px; --y: calc(2624.86px + var(--shift-after-notice) - var(--sec4)); --w: 108px; --h: 20px; }
  .h-notice-posting  { --x: 141.46px; --y: calc(2993.9px + var(--shift-after-notice) - var(--sec4));  --w: 108px; --h: 20px; }

  .notice-text-1  { --x: 65px; --y: calc(2670px + var(--shift-after-notice) - var(--sec4)); --w: 260px; white-space: normal; }
  .notice-text-1b { position: absolute; left: 0; top: calc(2763px - 2674px); width: 260px; }
  .notice-text-2  { --x: 65px; --y: calc(2635px + var(--shift-after-notice) - var(--sec4)); --w: 260px; white-space: normal; }

  .sp-moo { --x: 47px;  --y: calc(2922px + var(--shift-after-notice) + var(--nudge-sp-moo) - var(--sec4)); --w: 91px; --h: 89px; }
  .sp-eri { --x: 266px; --y: calc(2565px + var(--shift-after-notice) + var(--nudge-sp-eri) - var(--sec4)); --w: 80px; --h: 73px; }

  /* -- 05 ENTRY FORM ------------------------------------------------------ */
  .ft-shutter { --x: -100px; --y: calc(3777px + var(--shift-after-form) - var(--sec5)); --w: 808px; --h: 115px; }

  .bb-form { --x: 160px;    --y: calc(3950px + var(--shift-after-form) - var(--sec5));    --w: 71px;  --h: 23px; }
  .bl-form { --x: 166.93px; --y: calc(3957.82px + var(--shift-after-form) - var(--sec5)); --w: 58px;  --h: 8px; }
  /* 差し替えSVG: 293×24 → 333×56（1行→2行） */
  .h-form  { --x: 28.5px;  --y: calc(3990.55px + var(--shift-after-form) - var(--sec5)); --w: 333px; --h: 56px; }

  .form-lead {
    --x: 200px; --y: calc(4067px + var(--shift-after-form) - var(--sec5));
    transform: translateX(-50%);
    text-align: center;
    /* white-space:nowrap を維持すること。normal にすると絶対配置の
       shrink-to-fit 幅が「390 - left(200) = 190px」に頭打ちされ、
       2行の想定が3行に折り返す。改行は <br>（Figma の改行位置）で入れている。 */
  }
  html[lang="en"] .form-lead {
    --x: 195px;
  }

  .fm-row-1 { --x: 40px; --y: calc(4192px + var(--shift-after-form) - var(--sec5)); }
  .fm-row-2 { --x: 40px; --y: calc(4287px + var(--gap-after-form-hint) + var(--space-photo-error-slot) + var(--shift-after-form) - var(--sec5)); }
  .fm-row-3 { --x: 40px; --y: calc(4382px + var(--gap-after-form-hint) + var(--space-photo-error-slot) + var(--shift-after-form) - var(--sec5)); }

  .fm-row-1 .fm-label { --x: 0; --y: -36px; line-height: var(--line-height-tight); }
  .fm-row-2 .fm-label { --x: 0; --y: -32px; line-height: var(--line-height-tight); }
  .fm-row-3 .fm-label { --x: 0; --y: -32px; line-height: var(--line-height-tight); }

  .fm-req { --w: 44px; --h: 26px; }
  .fm-row-1 .fm-req { --x: 74px;  --y: -41px; }
  .fm-row-2 .fm-req { --x: 113px; --y: -37px; }
  .fm-row-3 .fm-req { --x: 100px; --y: -37px; }

  .fm-input { --h: 28px; }
  .fm-row-1 .fm-input { --w: 232px; }
  .fm-row-2 .fm-input { --w: 310px; }
  .fm-row-3 .fm-input { --w: 310px; }

  .fm-filebtn { --x: 242px; --y: 0; --w: 68px; --h: 28px; padding: 0 0 1px 10px; }

  .fm-error { --y: 32px; --w: 310px; }
  /* SP: 注釈2行の直後（PCより詰める） */
  .fm-row-1 .fm-error {
    --w: 232px;
    --y: 72px;
  }

  .form-hint {
    --x: 40px;
    --y: calc(4227px + var(--shift-after-form) - var(--sec5));
    --w: 310px;
  }

  .terms {
    --x: 40px;
    --y: calc(4472px + var(--gap-after-form-hint) + var(--space-photo-error-slot) + var(--shift-after-form) - var(--sec5));
    --w: 310px;
  }
  .terms__box { max-height: 200px; }

  .pbtn-submit { --x: 76px; --y: calc(4422px + var(--gap-after-form-hint) + var(--shift-after-terms) - var(--sec5)); --w: 239px; --h: 52px; }
  .pbtn-submit .pbtn-label {
    --x: 0;
    --y: 0;
    --w: 100%;
    --h: 100%;
  }

  .h-rules.heading-text,
  .h-notice.heading-text {
    font-size: 22px;
  }
  .heading-text--sub {
    font-size: 18px;
  }
  .heading-text--btn {
    font-size: 16px;
  }

  .sp-jump { --x: 40px; --y: calc(3730px + var(--shift-after-form) - var(--sec5)); --w: 82px; --h: 84px; }

  /* -- 06 FOOTER ---------------------------------------------------------- */
  .footer-band   { --x: -14px;  --y: calc(4549px + var(--shift-after-footer) + var(--nudge-footer-stack) - var(--sec6)); --w: 420px; --h: 129px; }
  .shutter-upper { --x: -205px; --y: calc(4486px + var(--shift-after-footer) - var(--sec6)); --w: 956px; --h: 161px; }
  .sns-row {
    --x: 0;
    --y: calc(4654px + var(--shift-after-footer) + var(--nudge-footer-stack) - var(--sec6));
    --w: 390px;
    --h: 40px;
    flex-wrap: wrap;
    gap: 10px 16px;
  }
  .sns-icon {
    width: 16px;
    height: 16px;
  }
  .sns-label {
    font-size: 11px;
  }
  .footer-credit {
    --x: 0;
    --y: calc(4688px + var(--shift-after-footer) + var(--nudge-footer-stack) - var(--sec6));
    --w: 390px;
    --h: 72px;
    gap: 8px;
  }
  .footer-credit-logo {
    width: 72px;
    height: 17.7px;
  }
  .footer-credit-copy {
    font-size: 10px;
    letter-spacing: 0.02em;
    white-space: normal;
    max-width: 300px;
  }
}


/* ==========================================================================
   12. 送信完了ポップアップ
   ========================================================================== */
.entry-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}
.entry-modal[hidden] {
  display: none;
}

.entry-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-bg-overlay);
  cursor: pointer;
}

.entry-modal-dialog {
  position: relative;
  z-index: 1;
  width: 560px;
  max-width: 100%;
}

.entry-modal-panel {
  position: relative;
  padding: 40px 48px 44px;
  text-align: center;
  box-sizing: border-box;
}

.entry-modal-fill {
  position: absolute;
  inset: 0;
  background: #0a0a0a;
  pointer-events: none;
}

.entry-modal-frame {
  position: absolute;
  inset: 0;
  border: var(--border-accent);
  pointer-events: none;
}

.entry-modal-panel .lc-tl {
  position: absolute;
  left: -6px;
  top: -8px;
}
.entry-modal-panel .lc-br {
  position: absolute;
  right: -7px;
  bottom: -7px;
  left: auto;
  top: auto;
}

.entry-modal-badge-wrap,
.entry-modal-title,
.entry-modal-lead,
.entry-modal-body,
.entry-modal-btn {
  position: relative;
  z-index: 1;
}

.entry-modal-badge-wrap {
  position: relative;
  width: 160px;
  height: 31px;
  margin: 0 auto 28px;
}

.entry-modal-badge-box {
  position: absolute;
  inset: 0;
  border: var(--border-accent);
}

.entry-modal-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--color-accent-cyan);
  font-family: var(--font-badge);
  font-weight: var(--font-weight-bold);
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1;
}

.entry-modal-title {
  margin: 0 0 20px;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: 0.06em;
}

.entry-modal-lead {
  margin: 0 0 16px;
  color: var(--color-accent-cyan);
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.entry-modal-body {
  margin: 0 0 36px;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: 1.8;
}

.entry-modal-btn {
  position: relative;
  display: block;
  width: 304px;
  height: 68px;
  margin: 0 auto;
}

.entry-modal-btn-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-cyan);
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: 18px;
  letter-spacing: 0.08em;
  line-height: 1;
  padding-bottom: 2px;
}

body.is-entry-modal-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  .entry-modal {
    padding: 20px 12px;
  }

  .entry-modal-dialog {
    width: 310px;
  }

  .entry-modal-panel {
    padding: 28px 20px 32px;
  }

  .entry-modal-badge-wrap {
    width: 120px;
    height: 23px;
    margin-bottom: 20px;
  }

  .entry-modal-badge {
    font-size: 10px;
  }

  .entry-modal-title {
    margin-bottom: 14px;
    font-size: 22px;
  }

  .entry-modal-lead {
    margin-bottom: 12px;
    font-size: 15px;
  }

  .entry-modal-body {
    margin-bottom: 28px;
    font-size: 13px;
    line-height: 1.85;
  }

  .entry-modal-btn {
    width: 239px;
    height: 52px;
  }

  .entry-modal-btn-label {
    font-size: 15px;
  }
}

.top-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.top-modal.is-open {
  display: flex;
}

.top-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.top-modal__body {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 600px;
}

.top-modal__img {
  display: block;
  width: 100%;
  height: auto;
}

.top-modal__close {
  position: absolute;
  top: -40px;
  right: 0;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 2;
}

.top-modal__close::before,
.top-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.top-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}