/* css/tokens.css */
/* ==========================================================================
   tokens.css — デザイントークン（CSS変数）
   正: SPEC.md §3 / CLAUDE.md「共有コントラクト」
   すべてのセクションCSSはこの変数を参照すること（色・フォントの直書き禁止）
   ========================================================================== */

:root {
  /* --- カラー --------------------------------------------------------- */
  --color-dark: #1F1F1F;          /* ベース背景（ダーク） */
  --color-text: #1F1F1F;          /* メインテキスト（濃） */
  --color-text-sub: #5C5B5B;      /* サブテキスト（グレー） */
  --color-accent-red: #F45D11;    /* アクセント朱（「頂点」等の見出し） */
  --color-accent-orange: #F4A632; /* アクセントオレンジ（CTA・カウントダウンバー） */
  --color-white: #FFFFFF;         /* 白 */

  /* --- タイポグラフィ ------------------------------------------------- */
  /* 和文：Figmaは 見出し=Hiragino Kaku Gothic StdN W8 / 本文=Hiragino Kaku Gothic ProN W6。
     ★重要: "Hiragino Kaku Gothic StdN" は W8 単一ウェイトのため、先頭に置くと
       font-weight が一切効かず全テキストが W8(Heavy) 固定になる不具合があった。
     → 同一書体でW0〜W9の全ウェイトを持つ "Hiragino Sans" を先頭にし、font-weight で
       W6(本文=600) / W8(見出し=800) を出し分ける（Figma忠実 かつ ウェイト可変）。
     ProN(旧Mac・W3/W6) → Noto Sans JP(非Mac/Webフォント・全ウェイト) をフォールバック。 */
  --font-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  /* 英字ディスプレイ：Dela Gothic One（Google Fonts） */
  --font-display: "Dela Gothic One", "Noto Sans JP", sans-serif;

  /* --- 本文フォントウェイト（ユーザー指定・意図的にFigma実値W6=600より軽い） --------
     ★注意（重要・削除/変更しないこと）: Figma上の本文は Hiragino W6=600 だが、
     ユーザーの明示指示で本文<p>は 500 に統一している。過去に「Figma忠実度チェック」
     の自動修正パスがこの差分を"バグ"と判定して 600 に戻してしまった実績があるため、
     本文の font-weight は必ずこの変数 var(--font-weight-body) 経由で指定し、
     直書き数値(600等)に「Figma準拠」目的で戻さないこと。変更する場合はこの1箇所のみ。 */
  --font-weight-body: 500;
}

/* css/base.css */
/* ==========================================================================
   base.css — モダンリセット + ベース + 共有ユーティリティ
   共有ユーティリティは .inner のみ（CLAUDE.md「共有コントラクト」）。
   他は各セクションCSSに閉じること。
   ========================================================================== */

/* --- モダンリセット --------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

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

body {
  min-height: 100vh;
  font-family: var(--font-jp);
  color: var(--color-text);
  background-color: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

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

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
}

/* 長い単語・URLで横スクロールが出ないように */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* --- 固定ヘッダー分のアンカーオフセット ------------------------------- */
/* ヘッダーは position:fixed で常に高さ70px（00-header.css）。
   アンカー着地（scroll-behavior:smooth / main.js の scrollIntoView）で
   セクション上端が y=0 に来ると固定ヘッダーの背後に隠れるため、
   全アンカー先セクションに scroll-margin-top を付与して着地位置を下げる。
   値 = ヘッダー70px + 余白16px。ヘッダー高さは全ブレークポイントで一定。 */
section[id] {
  scroll-margin-top: 86px;
}

/* --- 共有ユーティリティ ----------------------------------------------- */
/* .inner: コンテンツ幅の中央寄せ（唯一の共有レイアウトユーティリティ） */
.inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

/* 視覚的に隠す（スクリーンリーダーには読ませる） */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- フォーカス表示（キーボード操作時のみ） --------------------------- */
:focus-visible {
  outline: 3px solid var(--color-accent-orange);
  outline-offset: 2px;
}

/* --- モーション配慮 --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* css/sections/00-header.css */
/* ==========================================================================
   00-header — 固定ヘッダー
   Figma node 171:1036 実測値:
     - 背景 #1F1F1F（--color-dark） / 高さ 70px
     - 内側コンテンツ幅 1100px（1280基準・左右90pxマージン相当）
     - ロゴ 89×42 / ハンバーガー 46×24（stroke 3px 白ライン×3）
   ========================================================================== */

.s-header {
  position: fixed;
  inset: 0 0 auto 0;          /* 上部に固定・全幅 */
  z-index: 1000;
  background-color: var(--color-dark);
}

.s-header__inner {
  /* Figma 171:1038: 1280基準で left90px / width1100px（左右90pxマージン）。
     全幅バー内でロゴを x=90 に置くため、max-widthは全幅にし padding で左右90pxを取る。
     （旧実装は max-width:1100 + padding:90 で二重マージンになりロゴが x=180 にずれていた） */
  max-width: 1280px;
  height: 70px;
  margin-inline: auto;
  /* Figma 171:1038 は 1280基準で left90px / width1100px。ロゴ左端 x=90、
     ハンバーガー右端 x=1190（＝左右とも 90px インセットで左右対称）。
     左右パディングを同一 clamp にして Figma の対称マージンを再現する。 */
  padding-left: clamp(16px, 7vw, 90px);
  padding-right: clamp(16px, 7vw, 90px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- ロゴクラスタ（メインロゴ＋区切り線＋EGFロゴ） ---------------------- */
/* PC/tabletでは従来どおりメインロゴのみ表示。区切り線・EGFロゴはSP専用要素のため
   デフォルト非表示にし、sp/00-header.css でのみ表示へ切り替える（無回帰）。 */
.s-header__brand {
  display: flex;
  align-items: center;
  gap: 16px;                 /* メインロゴ／区切り線／EGFロゴの間隔 */
}

/* 区切り線＋EGFロゴ：PC/tablet でも表示（2026-07-14 ユーザー指示でヘッダーにEGFロゴ追加）。
   SP(≤767px)は sp/00-header.css が実寸(55×25 等)に上書きする。 */
.s-header__divider {
  display: block;
  flex-shrink: 0;
  width: 1px;
  height: 28px;
  background-color: var(--color-white);
}
.s-header__egf {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 34px;
}

/* --- ロゴ --------------------------------------------------------------- */
.s-header__logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

.s-header__logo img {
  width: 89px;
  height: 42px;
}
/* SP(≤767px)でのロゴ縮小は sp/00-header.css へ分離 */

/* --- ハンバーガー ------------------------------------------------------- */
.s-header__toggle {
  position: relative;
  z-index: 1010;             /* ドロワーより前面（×表示のため） */
  flex-shrink: 0;
  width: 46px;
  height: 24px;              /* Figma 171:1086: 46×24（3px×3本・間隔7.5px） */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}

.s-header__toggle-bar {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--color-white);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* 開いている時：3本線を×に変形（.is-open は JS が付与） */
/* 24px高・上下バー中心 ±10.5px を中央へ寄せて交差させる */
.s-header.is-open .s-header__toggle-bar:nth-child(1) {
  transform: translateY(10.5px) rotate(45deg);
}
.s-header.is-open .s-header__toggle-bar:nth-child(2) {
  opacity: 0;
}
.s-header.is-open .s-header__toggle-bar:nth-child(3) {
  transform: translateY(-10.5px) rotate(-45deg);
}
/* SP(≤767px)でのハンバーガー縮小・タップ領域拡張は sp/00-header.css へ分離 */

/* --- ドロワーナビ ------------------------------------------------------- */
/* ハンバーガーで開閉。閉時は hidden 属性（JSが付け外し）。
   開時は画面右からスライドインするダークパネル。 */
.s-header__nav {
  position: fixed;
  inset: 70px 0 0 auto;       /* ヘッダー下から下端まで */
  /* スクリム(::before z-index:999)より前面に置く。これが無いとスクリムが
     ナビリンクの上に乗り、実クリックを奪ってメニューを閉じるだけになる
     （＝リンクが機能しない不具合）。トグル(1010)より下に収める。 */
  z-index: 1005;
  width: min(360px, 80vw);
  background-color: var(--color-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* hidden 属性はデフォルトで display:none。開閉アニメを効かせるため、
   .is-open 時は表示しつつ transform で出し入れする。
   （hidden の付け外しは JS。display切替と transform を両立させる） */
.s-header__nav:not([hidden]) {
  transform: translateX(0);
}

.s-header__nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px clamp(20px, 6vw, 40px) 40px;
}

.s-header__nav-list a {
  display: flex;               /* 英語＋日本語を縦積みするため flex 化（2026-07-10） */
  padding: 14px 4px;
  color: var(--color-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.2s ease;
}

.s-header__nav-list a:hover {
  color: var(--color-accent-orange);
}

/* ドロワー項目：英語（Dela）＋小さく日本語（2026-07-10 ユーザー指示）。
   リンク/近日公開スパン共通のレイアウトを .s-header__nav-en / --ja で表現する */
.s-header__nav-list a,
.s-header__nav-guideline {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.s-header__nav-en {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.s-header__nav-ja {
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.55);
}
.s-header__nav-list a:hover .s-header__nav-ja { color: rgba(255, 255, 255, 0.8); }

/* 募集要項（PDF）: 通常はリンクだが、PDF未提供のため現状は非アクティブ「近日公開」。
   PDF設置後は index.html 等の <span class="s-header__nav-guideline--soon"> を
   <a class="s-header__nav-guideline" href="download/募集要項.pdf" target="_blank"> に置換する。 */
.s-header__nav-guideline {
  display: flex;
  padding: 14px 4px;
  color: var(--color-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: color 0.2s ease;
}
a.s-header__nav-guideline:hover { color: var(--color-accent-orange); }
.s-header__nav-guideline--soon { color: rgba(255, 255, 255, 0.5); cursor: default; }
.s-header__nav-guideline--soon .s-header__nav-ja { color: rgba(255, 255, 255, 0.4); }

/* CTA項目は英語＋日本語を中央寄せにする
   （.s-header__nav-list a の align-items:flex-start に詳細度で勝つため a. を付与） */
.s-header__nav-list a.s-header__nav-cta { align-items: center; }
.s-header__nav-cta .s-header__nav-ja { color: rgba(31, 31, 31, 0.7); }
.s-header__nav-cta:hover .s-header__nav-ja { color: rgba(255, 255, 255, 0.85); }

/* CTA（キープエントリー）だけオレンジのボタン調に */
.s-header__nav-cta {
  margin-top: 16px;
  border-bottom: none !important;
  text-align: center;
  background-color: var(--color-accent-orange);
  color: var(--color-dark) !important;
  border-radius: 999px;
  /* 他のnav項目・LPの見出しと同じ Dela Gothic One に揃える */
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

.s-header__nav-cta:hover {
  color: var(--color-white) !important;
  filter: brightness(0.95);
}

/* ドロワーを開いた時の背景スクリム（body直下にJSで .s-header--scrim を付ける想定はせず、
   簡潔化のため擬似要素で実装） */
.s-header.is-open::before {
  content: "";
  position: fixed;
  inset: 70px 0 0 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;               /* navより後ろ・本文より前 */
}

/* css/sections/01-hero.css */
/* ==========================================================================
   01-hero — Hero（Figma TOP0624 / 171:2 ヒーロー領域が正）
     2026-07-08 実データ再監査（get_metadata + get_design_context 171:982/992/1001/3/4）:
     - 横インセット: 本文 x=90 / 縦書き・CTA 右端 x=1190（=1280内で左右対称90px）。
       00-header（171:1038, s-header__inner）と同一の clamp(16px,7vw,90px)を採用
       ＝サイト内で確立済みの90pxマージン規約に合わせる（.innerの40px上限は使わない）。
     - 縦フロー実測(Frame201, 720px幅・全高620px): 見出し77 + gap58 + ロゴ340 +
       gap58 + ENTRY87 = 620px（Frame201高さと一致）。旧実装のgap65+margin-topは誤り。
     - コンテンツ先頭Y=140、Rectangle399(bg)上端=0 → ヘッダー直下からの上余白=70px
       （旧clamp上限52pxは誤り）。CTA下端=776、bg下端=832 → 下余白=56px。
     - 背景: Figmaの背景レイヤー（171:4 Mask group = ベージュ地 #f7f3ea +
       gareth-david写真を color-burn で焼き込んだクラフト紙ブラシ）を
       1枚にフラット書き出しした assets/hero-bg.webp（1280×762、171:4の実寸と一致）。
       近似(gradient/mix-blend-mode)は撤去し、単一 background-image に簡素化。
       style.css は public/css/ に出力されるため assets へは ../ で辿る。
     - ①見出し 64px / lh1.2 / Hiragino W8(=900) /「頂点」=朱 #F45D11 / tracking無し(0)
     - ②ロゴタイプ 720×340（assets/hero-logotype.svg）
     - ③ENTRY START(20px) / 2026.July(40px) Dela Gothic One / #5C5B5B / lh1.45(29px/58px実測) / tracking無し
     - ④右: 縦書きコピー（濃グレー箱・白字・右が高く左へ階段状）、列間gap実測8px
     - ⑤右下: 挑む CTA（オレンジ）/ tracking無し / lh1.45(58px実測)
   固定ヘッダー(70px)の下に来るため上部に余白を確保。
   ========================================================================== */

.s-hero {
  position: relative;
  background-color: #f7f3ea;            /* hero-bg.webp のベージュ地と同値（画像未読込時のフォールバック） */
  color: var(--color-text);
  padding-top: 70px;                    /* 固定ヘッダー分 */
  overflow: hidden;                     /* 背景のはみ出しを抑える */
}

/* --- 背景（Figma 171:4 をフラット化した1枚画像） ------------------------ */
.s-hero__bg {
  position: absolute;
  /* inset:0ではなく top:70pxで開始（=固定ヘッダー高と同値）。
     Figma実データ: Rectangle399(bg)は171:2内でy=0-832だが、この上端70pxは
     ヘッダー(171:1036, y=0-70)の領域に食い込むブリード分。次セクション
     02-countdownはy=832から開始=ヒーロー自身の実効領域はy=[70,832](762px、
     Mask groupの実寸と一致)。固定ヘッダーで隠れるy=0-70にbg画像の先頭行を
     割り当てず、ヘッダー直下(top:70px)からhero-bg.webpを開始することで
     ブラシ位置のズレ(旧inset:0だと画像が70px分上にズレて見えていた)を解消。 */
  top: 70px;
  right: 0;
  bottom: 0;
  left: 0;
  /* Figmaの背景レイヤーをそのまま焼き込んだ hero-bg.webp（1280×762）。
     近似合成をやめたため mix-blend-mode / opacity は不要。 */
  background-image: url("../assets/hero-bg.webp");
  /* ブラシ主役（上寄り〜中央）を常に見せる。cover でコンテンツ量や画面幅の
     変化に追従し、高さが伸びても隙間が出ない。 */
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

.s-hero__inner {
  position: relative;                   /* 縦書き・CTA の絶対配置基準 */
  z-index: 1;
  /* 横インセット: 00-header(s-header__inner)と同一のclamp(16px,7vw,90px)。
     Figma実測: 本文x=90 / 縦書き・CTA右端x=1190(=1280-90)、左右対称90px。
     .inner既定の40px上限では実データと合わないため、このセレクタで上書きする。 */
  padding-inline: clamp(16px, 7vw, 90px);
  /* 縦: 上70px(ヘッダー直下→見出し上端)/下56px(CTA下端→ヒーロー下端)実測。 */
  padding-top: clamp(40px, 5.5vw, 70px);
  padding-bottom: clamp(32px, 4.4vw, 56px);
  /* Figma実測: ヒーロー実効高762px（171:4 Mask groupの実寸）。 */
  min-height: clamp(420px, 59.6vw, 762px);
}

/* --- 左: メインコンテンツ縦積み --------------------------------------- */
.s-hero__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Figma実測(Frame201, 720px幅): 見出し77 + gap58 + ロゴ340 + gap58 + ENTRY87
     = 620px（Frame201の高さと一致）。見出し→ロゴ／ロゴ→ENTRYは同一の58px間隔
     （旧実装はgap65px+entry側margin-topの二重加算で非対称だった＝誤り）。 */
  gap: clamp(32px, 4.6vw, 58px);
  max-width: 760px;
}

/* --- ① メインコピー「愛媛の、頂点を獲れ。」 --------------------------- */
.s-hero__title {
  font-family: var(--font-jp);
  font-weight: 800;                       /* W8/Heavy 相当 */
  font-size: clamp(34px, 5vw, 64px);      /* PC 64px */
  line-height: 1.2;
  letter-spacing: normal;                 /* Figma実データにtracking指定なし（旧0.01emは誤り） */
  color: var(--color-text);               /* #1F1F1F */
  white-space: nowrap;
}

.s-hero__title-accent {
  color: var(--color-accent-red);         /* 「頂点」= 朱 #F45D11 */
}

/* --- ② EHIME CUP ロゴタイプ ------------------------------------------- */
.s-hero__logotype {
  width: 100%;
  max-width: 720px;
}

.s-hero__logotype img {
  width: 100%;
  height: auto;
}

/* --- ③ ENTRY START / 2026.July ---------------------------------------- */
.s-hero__entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* margin-topは付けない（Figma Frame200実測: ENTRY START高29px直後に
     2026.Julyが隙間なく続く=29+58=87で内包フレーム高と一致。旧margin-topは誤り）。
     .s-hero__mainのgap(58px)だけでロゴ→ENTRYの間隔を担う。 */
  font-family: var(--font-display);       /* Dela Gothic One */
  color: var(--color-text-sub);           /* #5C5B5B */
  /* Figma実測: leading-normalの実高さがlabel29px(=20*1.45)/date58px(=40*1.45)と一致。
     旧1.1は過小（前セッションの近似値、実データ未確認だった）。 */
  line-height: 1.45;
}

.s-hero__entry-label {
  font-size: clamp(15px, 1.6vw, 20px);    /* Figma 20px */
  letter-spacing: normal;                 /* Figma実データにtracking指定なし（旧0.02emは誤り） */
}

.s-hero__entry-date {
  font-size: clamp(30px, 3.2vw, 40px);    /* Figma 40px */
  letter-spacing: normal;                 /* Figma実データにtracking指定なし（旧0.01emは誤り） */
}

/* --- ④ 右: 縦書きコピー（濃グレー箱・白字・右が高く左へ階段状） -------- */
.s-hero__vtext {
  position: absolute;
  /* Figma実測: 縦書き(Frame198)・見出し(Frame201)は共にy=140で完全に同じ高さ
     から開始（差0px）。inner の padding-top と同一値を使い、どの画面幅でも
     見出しと揃うようにする。 */
  top: clamp(40px, 5.5vw, 70px);
  /* 右端インセットも本文左インセットと対称の90px（.s-hero__innerと同じ式）。 */
  right: clamp(16px, 7vw, 90px);
  display: flex;
  flex-direction: row-reverse;            /* DOM順=読み順(右→左)。先頭を右端に */
  align-items: flex-start;
  gap: clamp(6px, 0.65vw, 8px);          /* Figma実測: 列間gap 8px（旧上限10pxは誤り） */
  margin: 0;
}

.s-hero__vtext-col {
  writing-mode: vertical-rl;
  font-family: var(--font-jp);
  font-weight: 800;                       /* Figma: Hiragino W8 */
  font-size: clamp(15px, 1.6vw, 20px);    /* Figma 20px */
  line-height: 1.2;
  /* CSS縦書きは line-height が字送りに効かない。Figmaの leading1.2 相当
     （20px→約24px送り）を letter-spacing で再現し、箱の縦の伸びをFigmaに合わせる。 */
  letter-spacing: 0.2em;
  color: var(--color-white);
  background-color: #5c5b5b;              /* Figma実値（--color-text-sub） */
  padding: 8px;                           /* Figma p-8 */
}

/* 全列を上揃え（Figma準拠）。各列は本文長で高さが変わるが、上端は揃える。 */

/* --- ⑤ 右下: 挑む CTA -------------------------------------------------- */
/* Figma 171:1001: bg #F45D11 / Dela Gothic One 40px 白 / gap40 / px16 py8 / 角丸なし */
.s-hero__cta {
  position: absolute;
  /* 右端インセットは本文左インセットと対称の90px（.s-hero__innerと同じ式）。 */
  right: clamp(16px, 7vw, 90px);
  /* Figma実測: CTA(Frame18)下端776 / ヒーロー実効下端832 → 差56px。
     .s-hero__innerのpadding-bottomと同一値で揃える。 */
  bottom: clamp(32px, 4.4vw, 56px);
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 24px);          /* 文言12字化に伴い縮小（旧: Figma gap-40） */
  padding: clamp(10px, 1.3vw, 16px) clamp(14px, 2vw, 24px);  /* 文言12字化に伴い調整（旧: Figma py8 px16） */
  background-color: var(--color-accent-red);   /* Figma #F45D11 */
  color: var(--color-white);
  font-family: var(--font-display);     /* Figma Dela Gothic One */
  font-size: clamp(17px, 2.1vw, 27px);  /* 「まずは応募要項を受け取る」12字が収まるサイズ（旧40px） */
  line-height: 1.45;                    /* Figma実測: leading-normalの実高58px(=40*1.45) */
  letter-spacing: normal;               /* Figma実データにtracking指定なし（旧0.02emは誤り） */
  border-radius: 0;                     /* Figma: 角丸なし（直角） */
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.s-hero__cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.s-hero__cta:hover .s-hero__cta-arrow { transform: translateX(4px); }

/* SP専用CTA文言（「まずは応募要項を受け取る」）はPC/tabletではデフォルト非表示。
   sp/01-hero.css で --pc/--sp を入れ替える（無回帰）。 */
.s-hero__cta-label--sp {
  display: none;
}

/* 矢印＝Figmaの Union SVG（白の輪郭三角）。26.4×24 のアスペクトで表示 */
.s-hero__cta-arrow {
  flex: none;
  width: clamp(18px, 2vw, 26px);
  height: auto;
  transition: transform 0.2s ease;
}

/* --- タブレット（〜1024px）: 縦書きは縮小、CTAは維持 ------------------ */
@media (max-width: 1024px) {
  .s-hero__vtext-col { font-size: clamp(12px, 1.5vw, 15px); }
}

/* --- スマホ・狭幅（〜768px）: 縦書きを隠し、CTAを本文下に回す --------- */
@media (max-width: 768px) {
  .s-hero__title { white-space: normal; }

  .s-hero__vtext { display: none; }       /* 狭幅では縦書きコピーは非表示 */

  .s-hero__inner { min-height: 0; }

  .s-hero__cta {
    position: static;
    margin-top: clamp(24px, 5vw, 36px);
  }
}

/* css/sections/02-countdown.css */
/* ==========================================================================
   02-countdown — 応募締切カウントダウンバー
   Figma node 200:586（get_design_context実測・2026-07-08再確認）:
     - 背景 #F4A632（--color-accent-orange） / py-4px×2=8px + コンテンツ48px = 高さ56px
     - 中央寄せ 1行 / gap-24px（ラベルと数値グループ間）
     - フォント Hiragino W8（=800）
     - ラベル「応募締切まで」= 白 / 24px
     - 数値グループ = #1F1F1F / 数値32px・単位20px（単位は数値の右下へオフセット、gap-16pxで4組を横並び）
   横1本のバー。SPは数字を保ちつつ padding/gap を詰める。
   ========================================================================== */

/* 2026-07-09 仕様変更: 中央寄せ1行 → NEURON風の無限マーキー（index.htmlコメント参照）。
   ループ単位（.s-countdown__group）6連を translateX(0→-50%) で流す。
   トラックの50%＝グループ3つ分を移動すると先頭と同一の絵になり継ぎ目が出ない。
   さらに参考サイト同様、画面最下部に常時固定（position:fixed）で全ページに追従する。
   z-index はヘッダー/ドロワー（1000番台）より下・全セクション（0〜1）より上の900。
   最下部までスクロールした際にフッターの文字を隠さないよう、.s-footer 側で
   バー高ぶんの padding-bottom を追加している（フッター背景が暗色のため継ぎ目は不可視）。 */
.s-countdown {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background-color: var(--color-accent-orange);
  overflow: hidden;
}

.s-countdown__marquee {
  width: 100%;
  overflow: hidden;
}

.s-countdown__track {
  display: flex;
  width: max-content;
  /* 参考サイト（neuron-tokyo.jp）に合わせゆっくり流す（約45px/s） */
  animation: s-countdown-marquee 76s linear infinite;
}

@keyframes s-countdown-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 動きを抑えたい環境では停止（先頭ユニットが静止表示される） */
@media (prefers-reduced-motion: reduce) {
  .s-countdown__track { animation: none; }
}

/* ループ単位。baseline揃えの1行・折り返し禁止（マーキーの前提）。細身の帯 */
.s-countdown__group {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 1.6vw, 22px);
  padding-block: 8px;
  padding-right: clamp(14px, 1.6vw, 22px); /* 次グループとの間隔（末尾セパレータの後ろ） */
  white-space: nowrap;
  margin: 0;
}

/* ラベル「応募締切まで」= 白 */
.s-countdown__label {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: 0;
  color: var(--color-white);
}

.s-countdown__timer {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(8px, 1vw, 12px);
  color: var(--color-dark);            /* 数値・単位 = #1F1F1F */
}

.s-countdown__unit {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

/* 数値（ライブ更新） */
.s-countdown__num {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1;
  font-variant-numeric: tabular-nums;  /* 桁揺れ防止（マーキー幅の変動も防ぐ） */
}

/* 単位ラベル */
.s-countdown__suffix {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(10px, 1vw, 12px);
  line-height: 1;
  position: relative;
  top: 1px;
}

/* セパレータ「／」= 白 */
.s-countdown__sep {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(11px, 1.1vw, 14px);
  color: var(--color-white);
}

/* 締切日時（英字・Dela） */
.s-countdown__deadline {
  font-family: var(--font-display);
  font-size: clamp(11px, 1.2vw, 15px);
  letter-spacing: 0.02em;
  color: var(--color-dark);
}

/* タグライン = 白 */
.s-countdown__tagline {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(12px, 1.2vw, 15px);
  color: var(--color-white);
}

/* css/sections/03-prizes.css */
/* ==========================================================================
   03-prizes.css — PRIZES 賞金 ＋ MENTORING/伴走支援
   Figma node 171:7 実測値ベース
   ダーク背景 #1F1F1F / pt 100px / ブロック間 gap 80px
   ========================================================================== */

.s-prizes {
  background-color: var(--color-dark);
  color: var(--color-white);
  padding-top: clamp(60px, 8vw, 100px);      /* Figma pt-100 */
  /* 実測で再検証: pt100 + head447 + gap80 + band640 = 1267 = Figma総高と過不足なく一致。
     斜め帯のクリップは不要と判明したが、pbは0のまま（Figmaにpbの宣言なし）。 */
  padding-bottom: 0;
  overflow: hidden; /* 縦書きコピー等の絶対配置要素が極端な狭幅ではみ出す場合の保険 */
}

/* --- ヘッド（特大見出し＋縦書き＋リード） ------------------------------- */
/* get_design_context実測(171:2303): flex-col gap-[40px]（旧clampの68pxキャップは誤り。
   40pxはvw非依存の固定値としてFigmaで宣言されており、SP側も同じ40pxで一致）。 */
.s-prizes__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* 特大見出しと縦書きコピーの重ね合わせコンテナ。
   縦書き（絶対配置）はレイアウト高さに寄与しないため、
   min-height で縦書き分の高さを確保し、直下のリード文との重なりを防ぐ
   （Figmaでは PRIZES と縦書きが同一グリッドセルで、高い方＝縦書きが高さを決める）。 */
.s-prizes__display {
  position: relative;
  display: inline-block;
  max-width: 100%;
  /* get_metadata実測(171:10 Frame13): 縦書き列(7字, line-height 1.1)の実ボックス高さ=371px
     （旧336pxは font-size×文字数のみの概算で line-height 未考慮の誤り）。 */
  min-height: clamp(232px, 28.98vw, 371px);
}

/* 特大英字見出し「PRIZES」240px級。背景とほぼ同化するウォーターマーク表現。 */
.s-prizes__title {
  font-family: var(--font-display);
  /* Figma実値 240px。PC(1280px)で240pxに達するよう 18.75vw を採用。
     下限は375px幅で見切れないよう 2.5rem(40px)。
     15rem=240px を上限にして 1280px 超でも肥大化させない。 */
  font-size: clamp(2.5rem, 18.75vw, 15rem); /* 40px 〜 240px */
  line-height: 1;
  text-align: center;
  /* get_design_context上の塗り値は#1f1f1f（背景と同色）と報告されるが、
     Figma公式スクリーンショットを直接RGBサンプリングした実測値は #040404
     （背景#1F1F1F(31,31,31)に対し文字部分は一貫して(4,4,4)）。
     #1f1f1fそのままでは完全に不可視になり意図された「浮かび上がる」演出が消えるため、
     実測どおり #040404 を採用する。 */
  color: #040404;
  white-space: nowrap;
  /* get_design_context実測: grid内で PRIZES に mt-[43px]。
     縦書きコピー先頭を上端に、PRIZESを43px下げて重ねる。 */
  margin: 43px 0 0;
}

/* 朱の縦書きコピー（PRIZESの右上に重ねる） */
.s-prizes__vertical {
  position: absolute;
  /* Figma: PRIZES左端から ml-551px、上端(top:0)。display幅=PRIZES幅のため
     display左端からの実測551pxで一致（従来 43%≒509px は約49px左にずれていた）。
     1280px超では肥大化しないよう、vwと551pxの小さい方を採用。 */
  left: min(43.05vw, 551px);
  top: 0;
  display: flex;
  /* 縦書き2列は右→左に読む。DOM先頭「この舞台で、」を右列へ配置。 */
  flex-direction: row-reverse;
  gap: clamp(12px, 1.875vw, 24px); /* Figma 24px @1280 */
  color: var(--color-accent-red);
  font-family: var(--font-jp);
  font-weight: 800; /* Figma W8 */
  font-size: clamp(1.5rem, 3.75vw, 3rem); /* 24px 〜 48px */
  line-height: 1.1;
}

.s-prizes__vertical span {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* リード文 20px 中央 白（Figma W6=600・1行 nowrap） */
.s-prizes__lead {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: clamp(0.9375rem, 1.6vw, 1.25rem); /* 15px 〜 20px */
  line-height: 1.8;
  text-align: center;
  color: var(--color-white);
  /* Figmaは whitespace-nowrap の1行。PC/tablet幅では折返さない。
     max-width制約を外し、はみ出しは overflow:hidden(セクション)で吸収。 */
  max-width: 100%;
  white-space: nowrap;
}

/* SP実データ(284:5604)は3行を明示的な<br>で強制改行しているため、その<br>は
   PC/tablet(nowrap・1行)では非表示にし、SP側でのみ表示する（SP.mdのデフォルト非表示原則）。 */
.s-prizes__lead-break {
  display: none;
}

/* --- 斜め帯グラフィック（CSSグラデーション・完全レスポンシブ） --------------
   Figma node 171:4550（対角の下右三角形＋インナーシャドウの白グロー）は
   単純な幾何学形状（角から角への対角線＋グロー）のため、ラスター画像化すると
   ボックスの高さ（コンテンツ量・viewport幅で可変）とアスペクト比が変わるたびに
   対角線の角度が破綻/クリップされる。linear-gradient(to bottom right, …) は
   ボックスの実寸に応じて角度を自動計算し常に「左上角→右下角」を通るため、
   どんな高さでも対角シームが切れない（画像への焼き込みをやめ、これに置換）。 */
.s-prizes__band {
  position: relative;
  /* get_design_context実測(171:7): 外側flexコンテナ gap-[80px]（旧112pxキャップは誤り）。 */
  margin-top: 80px;
  background-color: var(--color-dark);
  background-image: linear-gradient(
    to bottom right,
    var(--color-dark) 0%,
    var(--color-dark) 42%,
    rgba(255, 255, 255, 0.08) 48%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.08) 52%,
    var(--color-dark) 58%,
    #161616 100%
  );
}

.s-prizes__band-inner {
  position: relative;
  /* get_metadata実測(171:4548 Group130): height=640px。
     section総高1267 = pt100 + head447 + gap80 + band640 で過不足なく一致するため、
     クリップは不要（旧615pxは誤った見積り）。 */
  min-height: 640px;
}

/* --- カード共通 --------------------------------------------------------- */
/* Figmaは要素ペアごとに間隔が異なる（uniform gapでは一致しない）:
   賞金カード: ラベル→金額 8px / 金額→説明 24px
   メンタリング: ラベル→見出し 0px / 見出し→説明 16px
   → gapは0にし、各要素の margin-top で個別指定する。 */
.s-prizes__card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 90%;
}

/* 賞金カード：左上（get_design_context実測 171:4551: ml-[90px] mt-[60px]）。 */
.s-prizes__card--prize {
  left: clamp(20px, 7vw, 90px);
  top: 60px;
  align-items: flex-start;
  text-align: left;
}
/* get_design_context実測: Frame313内 gap-[8px]（ラベル→金額）、
   Frame4551内 gap-[24px]（金額ブロック→説明）。line-heightをFigma実測比率に
   揃えたことでbox高が一致し、旧clamp(31px/46px)による水増しは不要になった。 */
.s-prizes__card--prize .s-prizes__amount { margin-top: 8px; }
.s-prizes__card--prize .s-prizes__desc { margin-top: 24px; }

/* メンタリングカード：右下。get_design_context実測(171:4564): ml-[550px] mt-[364px]、
   カード幅648px。band全幅1280からの右オフセット = 1280-550-648 = 82px
   （旧90pxは賞金カードの左90pxとの対称性を誤って仮定した値）。 */
.s-prizes__card--mentoring {
  right: clamp(20px, 6.4vw, 82px);
  top: 364px;
  align-items: flex-end;
  text-align: right;
}
/* get_design_context実測: Frame4565内はgapクラスなし＝ラベル→見出し 0px、
   Frame4564内 gap-[16px]（見出しブロック→説明）。 */
.s-prizes__card--mentoring .s-prizes__mentoring { margin-top: 0; }
.s-prizes__card--mentoring .s-prizes__desc { margin-top: 16px; }

/* --- ラベル（朱・両端に ‖ 風装飾） ------------------------------------- */
.s-prizes__label {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--color-accent-red);
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: clamp(0.875rem, 1.6vw, 1.25rem); /* 14px 〜 20px */
  /* get_metadata実測: ラベル行の実ボックス高= font-size×1.5（PC 30/20、SP 27/18で一致）。
     旧1.2ではbox高が詰まり、後続要素とのgap計算が実データとずれていた。 */
  line-height: 1.5;
}

/* ‖ 風の縦バー装飾（Figma imgFrame130 の代替：4×24px 相当を擬似要素で） */
.s-prizes__label::before,
.s-prizes__label::after {
  content: "";
  width: 4px;
  height: 1.2em;
  flex: none;
  /* 二重線風グラデーション（‖） */
  background: linear-gradient(
    to right,
    var(--color-accent-red) 0 1px,
    transparent 1px 3px,
    var(--color-accent-red) 3px 4px
  );
}

/* --- 賞金額 88px 朱 ---------------------------------------------------- */
.s-prizes__amount {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 9vw, 5.5rem); /* 44px 〜 88px */
  /* get_metadata実測: 金額テキストの実ボックス高= font-size×1.44（PC 127/88≈1.443、
     SP 58/40=1.45）。旧line-height:1ではラベル→金額のgapが実測より詰まって見えるため、
     margin-topを水増しする代償療法が行われていたが、正しくはこちらを実測比率に合わせる。 */
  line-height: 1.44;
  color: var(--color-accent-red);
  white-space: nowrap;
}

/* --- 説明文 16px 白 --------------------------------------------------- */
.s-prizes__desc {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: clamp(0.8125rem, 1.3vw, 1rem); /* 13px 〜 16px */
  line-height: 1.8;
  color: var(--color-white);
}

.s-prizes__desc--right {
  max-width: 648px;
}

/* --- MENTORING / 伴走支援 見出し ------------------------------------- */
.s-prizes__mentoring {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-accent-red);
  font-family: var(--font-jp);
  font-weight: 800;
}

/* get_metadata実測: MENTORING/伴走支援の実ボックス高= font-size×1.5（PC 81/54、SP 48/32で一致）。 */
.s-prizes__mentoring-en,
.s-prizes__mentoring-jp {
  font-size: clamp(2rem, 5.6vw, 3.375rem); /* 32px 〜 54px */
  line-height: 1.5;
  white-space: nowrap;
}

/* get_metadata実測: スラッシュの実ボックス高= font-size×1.625（PC 78/48）。 */
.s-prizes__mentoring-slash {
  font-size: clamp(1.75rem, 5vw, 3rem); /* 28px 〜 48px */
  line-height: 1.625;
}

/* ==========================================================================
   レスポンシブ
   --------------------------------------------------------------------------
   phone tier(≤767px) の上書きは src/css/sp/03-prizes.css に分離（SP.md 参照）。
   このファイルには PC(≥1280) / tablet(768–1279) の設計のみを残す。
   PRIZES は tablet 帯でも PC の斜め帯・絶対配置レイアウトをそのまま用いる
   （clamp によりカード位置・文字サイズが 768px まで安全に縮尺する）。
   ========================================================================== */

/* css/sections/04-why.css */
/* ==========================================================================
   04-why.css — WHY EHIME CUP？「頂上は、まだ空いている。」
   Figma node 171:2326 実測値ベース
   背景：Figmaの背景グループ（Mask group 171:2325＝岩壁クライマー写真＋
   セピア色面オーバーレイ）をそのままフラット書き出しした1枚の画像。
   可読性グラデ（左暗部）は画像側にベイク済みのため、CSSはグラデを持たず
   単一の background-image を cover 表示するだけに簡素化した。
   本文ブロック：left 90px / py 100px / 幅 1100px、本文段落 幅 836px。
   ========================================================================== */

.s-why {
  position: relative;
  background-color: var(--color-dark);
  color: var(--color-white);
  overflow: hidden;
  isolation: isolate; /* 背景レイヤーの重ね順を閉じる */
}

/* --- 背景レイヤー（Figma背景グループのフラット書き出し1枚） ------------- */
/* Figma Mask group 171:2325 を丸ごとフラット化した why-bg.webp を敷くだけ。
   写真本体（202:603 AdobeStock_1559873786＝尾根に立つ単独クライマー）と
   セピア色面オーバーレイ（171:4586）、左側の暗部（＝白／オレンジ文字の
   可読性）まで全て画像へベイク済み。よって CSS 側のグラデ・blend は不要。
   cover でクロップし、主役のクライマーが常に見えるよう center 配置にする
   （被写体は画面中央〜右寄りに位置するため center で参照どおり収まる）。 */
.s-why__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-dark);
  background-image: url("../assets/why-bg.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* --- コンテンツ ------------------------------------------------------- */
/* Figma: テキストブロックは left 90px / py 100px の左寄せ（中央寄せしない）。
   .inner の margin-inline:auto / padding-inline を打ち消し、
   1280基準で中央寄せ＋左90pxを実現する（max-width 1280 は維持）。 */
.s-why__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2.4vw, 24px);
  max-width: 1280px;
  margin-inline: auto;
  /* left 90px（PC実値）。padding-inline を左90px/右余白で上書き。 */
  padding-block: clamp(56px, 8vw, 100px);
  padding-inline: clamp(20px, 7vw, 90px) clamp(20px, 4vw, 40px);
  box-sizing: border-box;
  width: 100%;
}

/* 英字ラベル 24px 白 Dela Gothic
   Figma実値（get_design_context再確認済み）: tracking指定なし＝letter-spacing: normal。
   旧実装は0.02emを付与していたがFigma側に根拠がないため削除。 */
.s-why__eyebrow {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.5rem); /* 18px 〜 24px */
  line-height: 1.2;
  color: var(--color-white);
  letter-spacing: normal;
}

/* 大見出し 80px オレンジ Hiragino W8 / line-height 1.3 */
.s-why__title {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(2.5rem, 8vw, 5rem); /* 40px 〜 80px */
  line-height: 1.3;
  color: var(--color-accent-orange);
}

/* --- 本文ブロック（リード＋説明） ------------------------------------- */
.s-why__body {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.2vw, 40px);
  /* Figma: body ラッパ(171:4460)は container の flex 子として一律 gap 24px で並ぶ。
     追加の margin-top は付けない（付けると title 以降が縦にドリフトする）。 */
  color: var(--color-white);
  /* Figma: 本文段落 幅 836px。left90 と合わせ全体 ~926px に収める。 */
  max-width: 836px;
}

/* リード 24px W8 / line-height 2 */
.s-why__lead {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem); /* 18px 〜 24px */
  line-height: 2;
}

/* 本文 18px W6 / line-height 2 / 幅 836px
   Figma実値(get_design_context再確認済み) 171:48 は Hiragino W6（=600）だが、
   tokens.cssの --font-weight-body はユーザー明示指示で意図的に500に固定されている
   （tokens.css内コメント参照。自動修正で600へ戻さないこと）。本セクションもその
   共有トークンに従い var(--font-weight-body) を参照するのみで、直書きしない。 */
.s-why__text {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: clamp(0.9375rem, 1.6vw, 1.125rem); /* 15px 〜 18px */
  line-height: 2;
  max-width: 836px;
}

/* ==========================================================================
   レスポンシブ
   --------------------------------------------------------------------------
   phone tier(≤767px) の上書きは src/css/sp/04-why.css に分離（SP.md 参照）。
   このファイルには PC(≥1280) / tablet(768–1279) の設計のみを残す。
   tablet 帯では PC の背景（フラット書き出しの why-bg.webp 1枚）をそのまま
   使用する（clamp でテキストブロックの余白・文字が 768px まで安全に縮尺）。
   SP専用の背景差し替え（why-bg-sp.webp）と全幅化は sp/04-why.css が担う。
   ========================================================================== */

/* css/sections/05-entry.css */
/* ==========================================================================
   05-entry.css — KEEP ENTRY リード ＋ キープエントリーフォーム
   Figma node 171:4455 実測値ベース
   背景 #F7F3EA ＋ ブラシ質感テクスチャ / py 100px / コンテンツ幅 1100px
   見出し 100px 朱 Dela / 和文キャッチ 48px W8 / フォームカード 720px 白 p32
   ========================================================================== */

.s-entry {
  /* 背景はFigma(171:4423 Mask group)のブラシ質感を「そのままフラット書き出し」した
     1枚画像 entry-bg.webp を単純に敷くだけ（近似の gradient / mix-blend-mode /
     複数レイヤー重ねは全廃）。生成りベージュ地 #F7F3EA に、右上の斜めブラシと
     左辺〜左下の縦ブラシ帯が焼き込まれており、中央（見出し・フォーム）はクリームのまま。
     前景（見出し・ベネフィット・フォームカード）はHTML/CSSのライブ要素のまま重ねる。
     background-color はデコード前・cover 余白のフォールバック地色として残す。 */
  position: relative;
  background-color: #f7f3ea; /* フォールバック地色（画像未読込・余白時の下地） */
  background-image: url("../assets/entry-bg.webp");
  background-repeat: no-repeat;
  /* cover を基本とし、内容量やviewport幅で高さが変わっても隙間を出さない。
     主役のブラシは右上・左辺・左下の縁にあるため、上端寄せ（top）で
     top-right の斜めブラシと left band を常に見せる。 */
  background-position: top center;
  background-size: cover;
  color: var(--color-text);
  padding-block: clamp(56px, 8vw, 100px);
  overflow: hidden;
}

/* 中身は Figma の 1100px コンテンツ幅・左右90pxガター に合わせる。
   .inner（max-width1280 / padding40）だと 1200px幅になり参照より広く左寄りに
   なるため、ここで max-width:1100 に絞り、広い画面では padding を 0 にして
   中央寄せ＝左右90pxガターを再現（1280時 (1280-1100)/2=90px）。
   狭い画面では下のメディアクエリで通常のフルイド padding に戻す。
   position/z-index でテクスチャ（::before/::after）の上に本文を載せる。 */
.s-entry__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 40px);
}

/* 1180px 未満は .inner 相当のフルイド左右余白に戻す（狭幅で端に付かないように） */
@media (max-width: 1180px) {
  .s-entry__inner {
    padding-inline: clamp(20px, 4vw, 40px);
  }
}

/* --- 見出し＋リード ---------------------------------------------------- */
.s-entry__head {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vw, 24px);
}

/* 特大英字見出し「KEEP ENTRY」100px 朱 Dela Gothic One */
.s-entry__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 6.25rem); /* 40px 〜 100px */
  line-height: 1;
  color: var(--color-accent-red);
  margin: 0;
}

/* SP(284:5671)は「KEEP」「ENTRY」が別テキストの固定2行構成だが、PC/tablet(171:54)
   は1行の単一テキスト（825×100、1行）。この<br>はPC/tabletでは非表示にし、
   間の半角スペースのみを見せて元の「KEEP ENTRY」1行表示を再現する。
   SP側の表示切替は sp/05-entry.css で行う（Keep-Out: HTML構造はここでは変えない）。 */
.s-entry__title-break {
  display: none;
}

/* KEEP ENTRY 直下の小見出し（2026-07-17 追加）。本エントリーまでの流れを一言で示す。 */
.s-entry__subtitle {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(1rem, 1.9vw, 1.375rem);   /* 16px 〜 22px */
  line-height: 1.6;
  color: var(--color-text);
  padding-left: 12px;
  border-left: 5px solid var(--color-accent-red);
  margin-top: clamp(-8px, -0.8vw, -4px);      /* タイトルとの間隔を少し詰める */
}

/* 和文キャッチ 48px W8（Hiragino Sans W8=800）。
   Figmaは leading-[normal]（≈1.5）。以前 1.3 にしていたため縦が約29px詰まり、
   下段フォームが上に寄って参照とズレていた。normal 相当の 1.5 に合わせる。 */
.s-entry__catch {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(1.5rem, 4.4vw, 3rem); /* 24px 〜 48px */
  line-height: 1.5;
  color: var(--color-text);
}

/* リード 18px W6（Hiragino Sans W6=600 / line-height 2）。
   フォント修正でウェイトが効くようになったため Figma準拠の 600 に戻す。 */
.s-entry__note-lead {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: clamp(0.9375rem, 1.6vw, 1.125rem); /* 15px 〜 18px */
  line-height: 2;
  color: var(--color-text);
}

/* --- 下段：ベネフィット（左342px）＋ フォーム（右720px） --------------
   Figma実値(171:2333)には明示的な gap は無く、342px + 720px の固定幅ボックス2つを
   justify-content:space-between だけで並べている（1100px幅コンテナ内の
   残り38pxがそのまま隙間になる = 1100-342-720=38）。
   以前は gap:clamp(24-48px) を併用しており、48pxがspace-betweenの分配とは別に
   「最低保証の隙間」として効くため、1100px固定幅コンテナ(≥1180px viewport)では
   342+48+720=1110pxとなり10pxコンテナ幅をオーバーフローしていた
   （.s-entry の overflow:hidden でカード右端が見えない形で毎回10px欠けていた）。
   gapは撤廃し、justify-content:space-betweenのみに委ねる（768px以下の縦積み時の
   余白は下のメディアクエリで別途 gap を付与する）。 */
.s-entry__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- 左：ベネフィット訴求 --------------------------------------------- */
.s-entry__benefits {
  flex: 0 0 auto;
  width: 342px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 上下を細線で挟んだ見出し「名乗りを上げた人から、先に届く。」
   get_design_context(171:2331)で再確認: 実際は24px固定（旧実装の18pxは誤り。
   2行×24px×leading-1.4=67.2≈68pxがget_metadataのtext bbox高さ68と正確に一致）。 */
.s-entry__benefits-title {
  font-family: var(--font-display);
  font-size: 24px; /* Figma実値24px固定（get_design_context再確認） */
  line-height: 1.4;
  text-align: center;
  color: var(--color-text);
  white-space: nowrap;
  padding-block: 16px;
  border-top: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
}

.s-entry__benefits-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s-entry__benefit {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-jp);
  font-weight: 600; /* Figma W6 */
  font-size: 16px;
  /* leading-normal(get_design_context171:4439ほか) = 24/16 = 1.5（get_metadataの
     行高24pxと一致）。以前の1.4は誤り。 */
  line-height: 1.5;
  color: var(--color-text);
}

/* チェックアイコン（オレンジ） */
.s-entry__check {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--color-accent-orange);
}

/* --- 右：フォームカード ----------------------------------------------- */
.s-entry__card {
  flex: 0 0 auto;
  width: 720px;
  max-width: 100%;
  background-color: var(--color-white);
  padding: clamp(20px, 3vw, 32px);
}

/* --- サンクス表示（送信成功後） --------------------------------------- */
.s-entry__thanks {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  padding-block: clamp(16px, 3vw, 32px);
}

/* [hidden] は display 指定に負けるので、明示的に打ち消す
   （.s-entry__thanks / .s-entry__error / エラー時の hidden 要素すべてに効かせる） */
.s-entry [hidden] {
  display: none !important;
}

.s-entry__thanks-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem); /* 20px 〜 28px */
  line-height: 1.4;
  color: var(--color-accent-red);
}

.s-entry__thanks-text {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
}

/* --- 送信失敗時のエラーバナー（?entry_error=1 で JS が表示） ----------- */
.s-entry__banner-error {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
  padding: 16px 20px;
  border: 1px solid var(--color-accent-red);
  border-radius: 4px;
  background-color: #fff5f0;
}

.s-entry__banner-error-title {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-accent-red);
}

.s-entry__banner-error-text {
  font-family: var(--font-jp);
  font-weight: 600; /* 本文 W6 に統一 */
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
}

/* --- フォーム本体 ----------------------------------------------------- */
.s-entry__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.s-entry__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 各フィールド行（ラベル横並び / SPで縦積み） */
.s-entry__field {
  display: flex;
  align-items: center;
  gap: 16px;
  border: none; /* fieldset の既定枠を消す */
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* radio 行：ラベル「お住まいの地域」とラジオ群を1行に横並びにする。
   <fieldset><legend> は legend が既定でブロック化しフォーム上部に落ちるため、
   fieldset を通常フローに戻し、legend を float:left で左に出して
   ラジオ群（.s-entry__radios）をその右に回り込ませる（参照PNG準拠）。 */
.s-entry__field--radio {
  display: block; /* flex を解除して legend の回り込みを効かせる */
}

/* ラベル＋必須バッジのまとまり（幅180px固定） */
.s-entry__label-wrap {
  flex: 0 0 180px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.s-entry__label {
  font-family: var(--font-jp);
  font-weight: 600; /* Figma W6 */
  font-size: 16px;
  /* leading-normal(171:65ほか) = 24/16 = 1.5。以前の1.4は誤り。 */
  line-height: 1.5;
  color: var(--color-text);
}

/* fieldset の legend を左に float して幅180pxで固定。ラジオ群を右に回り込ませる。
   float 化により legend 内テキストの縦位置がラジオと揃うよう line-height を合わせる。 */
.s-entry__label--legend {
  float: left;
  width: 180px;
  padding: 0;
  margin-right: 16px;
}

/* ラジオ群は legend の右に配置。float の回り込みで1行に並ぶ。 */
.s-entry__field--radio .s-entry__radios {
  overflow: hidden; /* float をこのブロック内で完結させ縦位置を安定させる */
}

/* float 解除（エラー文が legend 下に潜り込まないように） */
.s-entry__field--radio .s-entry__error {
  clear: both;
}

/* 必須バッジ（オレンジ枠・角丸12px） */
.s-entry__required {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
  border: 1px solid var(--color-accent-orange);
  border-radius: 12px;
  color: var(--color-accent-orange);
  font-family: var(--font-jp);
  font-weight: 600; /* Figma W6 */
  font-size: 14px;
  letter-spacing: 0.08em; /* Figma tracking 1.12px @14px ≒ 0.08em */
  /* leading-normal(171:67) = 21/14 = 1.5。以前の1.6は誤り。 */
  line-height: 1.5;
}

/* 入力欄まわり（エラー文を下に置くため縦積み） */
.s-entry__control {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* テキスト入力欄（グレー地 #F0F0F0 ・枠 #B7B7B7 ・角丸4px） */
.s-entry__input {
  width: 100%;
  padding: 8px 24px;
  background-color: #f0f0f0;
  border: 1px solid #b7b7b7;
  border-radius: 4px;
  font-family: var(--font-jp);
  font-weight: 600; /* Figma W6（プレースホルダ「山田 太郎」等も W6） */
  font-size: 14px;
  /* leading-normal(171:69) = (37-16padding)/14 = 1.5。以前の1.6は誤り。 */
  line-height: 1.5;
  color: var(--color-text);
  /* マイクロインタラクション: フォーカスで枠色・地色・グローが滑らかに変化 */
  transition: border-color 0.2s ease, background-color 0.2s ease,
              box-shadow 0.2s ease;
}

.s-entry__input::placeholder {
  color: #b7b7b7;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.s-entry__input:hover {
  border-color: #9a9a9a;
}

.s-entry__input:focus {
  outline: none;                                   /* 既定リングは box-shadow で表現 */
  background-color: var(--color-white);            /* 地を白へ持ち上げ「入力中」を明示 */
  border-color: var(--color-accent-orange);
  box-shadow: 0 0 0 3px rgba(244, 166, 50, 0.22);  /* 橙のソフトなフォーカスグロー */
}

.s-entry__input:focus::placeholder {
  opacity: 0.5;                                    /* 入力開始でプレースホルダを控えめに */
}

/* フィールド行にフォーカスが入るとラベルを橙に（入力対象を強調） */
.s-entry__label { transition: color 0.2s ease; }
.s-entry__field:focus-within .s-entry__label {
  color: var(--color-accent-orange);
}

/* 入力エラー時の枠（JSが aria-invalid を付与） */
.s-entry__input[aria-invalid="true"] {
  border-color: var(--color-accent-red);
  background-color: #fff5f0;
}

/* --- 地域ラジオ ------------------------------------------------------- */
.s-entry__radios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.s-entry__radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* 実際の input は視覚的に隠し、カスタムマークで表現 */
.s-entry__radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* カスタムラジオ外枠（14px・黒枠） */
.s-entry__radio-mark {
  flex: none;
  position: relative;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-text);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ホバーで橙枠＋淡いグロー（押せる場所だと分かる） */
.s-entry__radio:hover .s-entry__radio-mark {
  border-color: var(--color-accent-orange);
  box-shadow: 0 0 0 3px rgba(244, 166, 50, 0.15);
}

/* 選択時の内側ドット（8px オレンジ）。チェックで弾むように出る */
.s-entry__radio-mark::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 10px;
  background-color: var(--color-accent-orange);
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);  /* バウンド */
}

.s-entry__radio input:checked + .s-entry__radio-mark {
  border-color: var(--color-accent-orange);
}
.s-entry__radio input:checked + .s-entry__radio-mark::after {
  transform: scale(1);
}

/* キーボードフォーカス表示 */
.s-entry__radio input:focus-visible + .s-entry__radio-mark {
  outline: 3px solid var(--color-accent-orange);
  outline-offset: 2px;
}

.s-entry__radio-text {
  font-family: var(--font-jp);
  font-weight: 600; /* Figma W6 */
  font-size: 16px;
  /* leading-normal(171:86ほか) = 24/16 = 1.5。以前の1.4は誤り。 */
  line-height: 1.5;
  color: var(--color-text);
}

/* --- エラーメッセージ ------------------------------------------------- */
.s-entry__error {
  font-family: var(--font-jp);
  font-weight: 600; /* 本文 W6 に統一 */
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-accent-red);
}

/* --- 注記＋送信ボタン ------------------------------------------------- */
.s-entry__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

/* プライバシーポリシー同意チェック（必須）。2026-07-10 追加。 */
.s-entry__field--consent {
  margin-top: 4px;
}
.s-entry__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: #5C5B5B;
}
.s-entry__consent input {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
}
.s-entry__consent-mark {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid #B7B7B7;
  border-radius: 4px;
  background: #fff;
  position: relative;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.s-entry__consent input:checked + .s-entry__consent-mark {
  border-color: var(--color-accent-red);
  background: var(--color-accent-red);
}
.s-entry__consent input:checked + .s-entry__consent-mark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.s-entry__consent input:focus-visible + .s-entry__consent-mark {
  outline: 2px solid var(--color-accent-red);
  outline-offset: 2px;
}
.s-entry__consent-text a {
  color: var(--color-accent-red);
  text-decoration: underline;
}

/* 注記 14px グレー #6B6B6B */
.s-entry__form-note {
  width: 100%;
  font-family: var(--font-jp);
  font-weight: 600; /* Figma W6 */
  font-size: 14px;
  line-height: 1.5;
  color: #6b6b6b;
}

/* 応募先フォームの案内（本エントリーは登録完了メールから）。2026-07-15 追加。
   問い合わせ削減のため、フォーム直下で少し強調して明示する。 */
.s-entry__form-note-em {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--color-accent-red);
  background: rgba(244, 93, 17, 0.06);
  color: var(--color-accent-red);
  font-weight: 700;
}

/* 送信ボタン（オレンジ地・白文字 Dela 24px ・矢印付き） */
.s-entry__submit {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  background-color: var(--color-accent-orange);
  color: var(--color-white);
  transition: filter 0.2s ease, transform 0.2s ease,
              box-shadow 0.2s ease;
}

.s-entry__submit:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(244, 166, 50, 0.35);   /* 浮き上がる影 */
}

.s-entry__submit:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 2px 6px rgba(244, 166, 50, 0.3);
}

/* 矢印がホバーで前進（送信＝進む を感じさせる） */
.s-entry__submit-arrow {
  transition: transform 0.2s ease;
}
.s-entry__submit:hover .s-entry__submit-arrow {
  transform: translateX(5px);
}

.s-entry__submit-text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem); /* 20px 〜 24px */
  /* leading-normal(171:99)。get_metadataの実測(テキスト高35px/24px=1.458)と、
     14-footer-cta.cssで既に採用済みの「Dela Gothic Oneのleading-normalは
     line-height:normalで実フォントメトリクスに委ねる」という既存規約に合わせる。
     以前の1.2は根拠のない決め打ちで、実測(約1.46)より大幅に詰まっていた。 */
  line-height: normal;
}

.s-entry__submit-arrow {
  flex: none;
  width: 18px;
  height: 16px;
  color: var(--color-white);
}

/* 送信中はボタンを無効表示 */
.s-entry__submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* 送信中のローディング表示（reCAPTCHAトークン取得〜遷移までの体感待ちを軽減）。
   矢印を隠してスピナーを回し、テキストは JS で「送信中…」に差し替える。
   （[disabled] と同詳細度のため、この is-loading ブロックを後に置いて勝たせる） */
.s-entry__submit.is-loading {
  opacity: 0.92;              /* disabled の 0.6 を上書き。作動中に見せる */
  cursor: progress;
  transform: none;           /* hover/activeの動きを止める */
  box-shadow: none;
}
.s-entry__submit.is-loading:hover {
  filter: none;
  transform: none;
  box-shadow: none;
}
.s-entry__submit.is-loading .s-entry__submit-arrow {
  display: none;             /* 矢印を隠してスピナーに置換 */
}
.s-entry__submit.is-loading::after {
  content: "";
  flex: none;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid currentColor;
  border-top-color: transparent;  /* 一部を透明にして回転を見せる */
  border-radius: 50%;
  animation: s-entry-spin 0.7s linear infinite;
}
@keyframes s-entry-spin {
  to { transform: rotate(360deg); }
}

/* --- ハニーポット（人間には非表示・ボット捕捉用） -------------------- */
.s-entry__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

/* --- タブレット 1180px 以下：ベネフィットとフォームを縦積み -------------
   ★バグ修正（最終検証で発見）: .s-entry__benefits(width:720px固定)は
   合計1062pxが必要なため、閾値が768pxのままだと769〜1142px幅の実タブレット
   （例: iPad系834px）で .s-entry__card がビューポート右端からはみ出し、
   ラジオ「県外」や送信ボタン等が画面外に隠れて見えなくなるバグがあった
   （実機/Playwright突合(834px幅)で確認・要修正）。
   1180pxは直上の .s-entry__inner 余白調整と同じ閾値に揃え、768–1179pxの
   tabletレンジ全体で確実に1カラム化する。
   ※ phone（≤767px）専用の細かな上書き（ラベル縦積み・入力16px・ラジオ
     タップ拡張・ボタン全幅など）は src/css/sp/05-entry.css に分離した。
     ここは tablet の見た目を担保する縦積みのみを残す（480以下の旧phone
     ブロックは sp/ へ移設済み）。 */
@media (max-width: 1180px) {
  .s-entry__body {
    flex-direction: column;
    align-items: stretch;
    /* 縦積み時のみ必要な垂直方向の余白。Figmaに一致するデータが無い純粋な
       レスポンシブ対応のため、以前 .s-entry__body の基本ルールにあった
       clamp値をそのままここに退避（横並び時の space-between とは無関係にする）。
       767px以下は sp/05-entry.css の値（32px固定）がカスケードで上書きする。 */
    gap: clamp(24px, 4vw, 48px);
  }
  .s-entry__benefits {
    width: 100%;
  }
  .s-entry__card {
    width: 100%;
  }
}

/* css/sections/06-flow.css */
/* ==========================================================================
   06-flow — FLOW タイムライン ＋ 審査基準4項目
   Figma node 37:5645（実測値ベース）
   ブレークポイント: 1280 / 768 / 480
   ========================================================================== */

.s-flow {
  background-color: var(--color-white);
  padding-block: clamp(60px, 8vw, 100px);
  /* Figma: FLOW見出しと各ステップの日付は #FF5500(#f50)。
     tokens の accent-red(#F45D11) とは別の鮮やかな朱で、トークン未定義のため
     セクション内ローカル変数として定義（tokens.css は触らない）。実測で確認済み。 */
  --flow-accent-vivid: #ff5500;
}

.s-flow__inner {
  /* Figma: 見出しブロック w-[1100px]・タイムライン/審査基準は w-full（=1100px列）。
     参照PNG(design-refs/06-flow.png)も1100px幅。他セクション(finalists/semifinalists/news)
     と同じ1100px中央ブロックに揃える。desktopでは .inner の内側paddingを0にして
     中身を1100px全幅で使い、カードを実値どおり540px（審査基準）にする。
     1180px以下では横ガターを復活させ詰まりを防ぐ。 */
  max-width: 1100px;
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

@media (max-width: 1180px) {
  .s-flow__inner {
    padding-inline: clamp(20px, 4vw, 40px);
  }
}

/* --- セクション見出し ------------------------------------------------- */
.s-flow__head {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.s-flow__title {
  font-family: var(--font-display);
  /* Figma 100px → SPで縮小 */
  font-size: clamp(3rem, 9vw, 6.25rem);
  line-height: 1;
  /* Figma実測 #FF5500 */
  color: var(--flow-accent-vivid);
}

.s-flow__subtitle {
  font-family: var(--font-jp);
  font-weight: 800;
  /* Figma 48px W8 */
  font-size: clamp(1.75rem, 4vw, 3rem);
  /* Figma leading-[normal]（CJK太字は約1.5相当）。ヘッダー縦リズムを実測に合わせる */
  line-height: 1.5;
  color: var(--color-text);
}

.s-flow__lead {
  font-family: var(--font-jp);
  /* Figma W6（Hiragino Sans で 600 が W6 相当） */
  font-weight: var(--font-weight-body);
  font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
  line-height: 2;
  color: var(--color-text);
}

/* --- タイムライン ----------------------------------------------------- */
.s-flow__timeline {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.s-flow__step {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 10px 40px;
  border: 2px solid var(--color-accent-red);
  border-radius: 10px;
}

/* メンタリング（塗りつぶし） */
.s-flow__step--mentoring {
  background-color: var(--color-accent-orange);
  border-color: var(--color-accent-orange);
}

.s-flow__step-label {
  flex-shrink: 0;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.s-flow__step-date {
  font-family: var(--font-display);
  font-size: 1.125rem; /* 18px */
  /* Figma leading-[normal]。get_metadata実測: ラベル枠内 date+name の高さ内訳が
     26px+29px=55pxで、date行だけ切り出すと26px → 26/18=1.444 */
  line-height: 1.444;
  /* Figma実測 #FF5500 */
  color: var(--flow-accent-vivid);
}

.s-flow__step-name {
  font-family: var(--font-display);
  font-size: 1.5rem; /* 24px */
  line-height: 1.2;
  color: var(--color-text);
}

/* メンタリング内のラベルは白 */
.s-flow__step--mentoring .s-flow__step-name {
  color: var(--color-white);
}

.s-flow__step-desc {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--font-jp);
  /* Figma W6 */
  font-weight: var(--font-weight-body);
  font-size: 1rem; /* 16px */
  /* Figma leading-[normal]。get_metadata実測: 1行=24px（24/16=1.5）、
     メンタリング2行=48px（48/2=24px/行）で同一比率 */
  line-height: 1.5;
  color: var(--color-text);
}

.s-flow__step--mentoring .s-flow__step-desc {
  color: var(--color-white);
}

/* ステップ間の下向き矢印 */
.s-flow__arrow {
  display: flex;
  justify-content: center;
}

.s-flow__arrow img {
  width: 14px;
  height: 8px;
}

/* --- 「募集締め切り」ステップ: SP限定（Figma SP node 284:5737 のみに存在。
   PC本体 TOP0624 node 37:5645 は get_metadata再確認済みでこのステップを含まない7ステップ
   構成のため、PC/tabletでは既定非表示にしTOP0624と完全一致させる。
   phone(≤767px)のみ src/css/sp/06-flow.css で表示・スタイル変更する） --- */
.s-flow__step--deadline,
.s-flow__arrow--deadline {
  display: none;
}

/* --- タイムライン↔審査基準 の縦線 ------------------------------------ */
.s-flow__connector {
  display: flex;
  justify-content: center;
}

.s-flow__connector img {
  width: 1px;
  height: 100px;
}

/* --- 審査基準 見出し -------------------------------------------------- */
.s-flow__criteria-head {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.s-flow__criteria-title {
  font-family: var(--font-display);
  /* Figma 48px */
  font-size: clamp(1.75rem, 4vw, 3rem);
  /* Figma leading-[normal]。get_metadata実測: テキスト枠高さ70px（70/48=1.458） */
  line-height: 1.458;
  color: var(--color-accent-red);
}

.s-flow__criteria-lead {
  font-family: var(--font-jp);
  /* Figma W6 */
  font-weight: var(--font-weight-body);
  font-size: 1rem; /* 16px */
  /* Figma leading-[normal]。get_metadata実測: テキスト枠高さ24px（24/16=1.5） */
  line-height: 1.5;
  color: var(--color-text);
}

/* --- 審査基準カード（2列 → SPで1列） --------------------------------- */
.s-flow__criteria-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  /* Figma: 各カードは内容量で独立して高さが決まる（行内で揃えない）。
     justify-between 相当。stretch にすると短いカードが伸びて実デザインと乖離。 */
  align-items: flex-start;
  justify-content: space-between;
}

.s-flow__criteria-card {
  /* 2列: (100% - gap) / 2 */
  flex: 1 1 calc(50% - 10px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 30px;
  border: 1px solid var(--color-accent-red);
  border-radius: 20px;
}

.s-flow__criteria-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.s-flow__criteria-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background-color: var(--color-accent-red);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1rem; /* 16px */
  line-height: 1;
}

.s-flow__criteria-name {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.5rem); /* 24px */
  /* Figma leading-[normal]。get_metadata実測: テキスト枠高さ35px（35/24=1.458） */
  line-height: 1.458;
  color: var(--color-text);
}

.s-flow__criteria-badge {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1rem; /* 16px */
  line-height: 1;
  color: var(--color-accent-red);
}

.s-flow__criteria-body {
  display: flex;
  align-items: center;
  gap: 24px;
}

.s-flow__criteria-desc {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--font-jp);
  /* Figma W6 */
  font-weight: var(--font-weight-body);
  font-size: 1rem; /* 16px */
  line-height: 1.8;
  color: var(--color-text);
}

.s-flow__criteria-icon {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
}

/* 走る人アイコンは Figma で左右反転（前を向く） */
.s-flow__criteria-icon--flip {
  transform: scaleX(-1);
}

/* --- CTA -------------------------------------------------------------- */
.s-flow__cta-wrap {
  display: flex;
  justify-content: center;
}

.s-flow__cta {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  padding: 8px 16px;
  background-color: var(--color-accent-red);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.5rem; /* 24px */
  /* Figma leading-[normal]。get_metadata実測: ボタン高さ51px - py16 = 35px（35/24=1.458） */
  line-height: 1.458;
  transition: opacity 0.2s ease;
}

.s-flow__cta:hover {
  opacity: 0.85;
}

.s-flow__cta-arrow {
  width: 15.4px;
  height: 14px;
  flex-shrink: 0;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

/* --- タブレット（768px以下） ----------------------------------------- */
@media (max-width: 768px) {
  .s-flow__step {
    /* ラベルと説明を縦積みに */
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 20px;
  }

  .s-flow__step-label {
    width: 100%;
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }

  /* 審査基準は1列に */
  .s-flow__criteria-card {
    flex: 1 1 100%;
  }

  .s-flow__cta {
    gap: 24px;
  }
}

/* --- phone（≤767px）は src/css/sp/06-flow.css に分離（差し替え可能設計） --- */

/* css/sections/07-warmup.css */
/* ==========================================================================
   07-warmup — WARM UP EVENTS リアル3 ＋ オンライン3（全6イベント）
   Figma node 171:300（実測値ベース）
   ダーク背景セクション。2カラム → SPで1カラム。
   ブレークポイント: 1280 / 768 / 480
   ========================================================================== */

.s-warmup {
  background-color: var(--color-dark);
  padding-block: clamp(60px, 8vw, 100px);
  color: var(--color-white);
}

.s-warmup__inner {
  /* Figma: フレーム px-[90px]（1280→内容1100px）。参照PNGも x90〜1189=1100px。
     他の px-90 セクション(semifinalists/partner/news)と同じく1100px中央ブロックに揃える。
     desktopでは .inner の内側paddingを0にして中身を1100px全幅で使い、
     2カラム(各520px+gap60=1100)を実値どおりにする。1180px以下は横ガター復活。 */
  max-width: 1100px;
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 6vw, 60px);
}

@media (max-width: 1180px) {
  .s-warmup__inner {
    padding-inline: clamp(20px, 4vw, 40px);
  }
}

/* --- セクション見出し ------------------------------------------------- */
.s-warmup__head {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.s-warmup__title {
  font-family: var(--font-display);
  /* Figma 100px（WARM UP / EVENTS 2行） → SPで縮小 */
  font-size: clamp(2.75rem, 9vw, 6.25rem);
  line-height: 1;
  color: var(--color-accent-red);
}

.s-warmup__subtitle {
  font-family: var(--font-jp);
  font-weight: 800;
  /* Figma 48px */
  font-size: clamp(1.75rem, 4vw, 3rem);
  /* Figma leading-[normal]。W8/48pxではブラウザのnormalが約1.5相当となり、
     Figmaと同じ行ボックス高（見出し下の余白）を再現。1.2固定だと見出し〜本文が
     約14px詰まり、以降の全カードが上方へドリフトしてバンド4-6の乖離が増える。 */
  line-height: normal;
  color: var(--color-white);
}

.s-warmup__lead {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
  line-height: 2;
  color: var(--color-white);
}

/* --- 2カラム --------------------------------------------------------- */
.s-warmup__cols {
  width: 100%;
  display: flex;
  gap: clamp(24px, 5vw, 60px);
  align-items: flex-start;
}

.s-warmup__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- カテゴリ見出しカード -------------------------------------------- */
.s-warmup__cat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s-warmup__cat-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px clamp(24px, 5vw, 60px);
  border-radius: 20px;
}

.s-warmup__col--real .s-warmup__cat-inner {
  background-color: var(--color-accent-red);
}

.s-warmup__col--online .s-warmup__cat-inner {
  background-color: var(--color-accent-orange);
}

.s-warmup__cat-title {
  font-family: var(--font-display);
  /* Figma 32px */
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.3;
  text-align: center;
  color: var(--color-white);
}

.s-warmup__cat-icon {
  /* Figma: size-[120px]（120×120の正方枠に、グラフィックを縦中央配置）。
     SVG本来のアスペクト比（chat 120×84.4 / laptop 120×90）で高さautoにすると
     枠が84〜90pxに縮み、カテゴリカード全体が約36px縮んで下段カードが上へドリフトする。
     120×120の枠を確保し object-fit:contain でグラフィックを中央に置いてFigmaの縦寸を再現。 */
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.s-warmup__cat-desc {
  width: 100%;
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: 1rem; /* 16px */
  line-height: normal; /* Figma leading-[normal] */
  color: var(--color-white);
}

/* カテゴリカード下の下向き矢印 */
.s-warmup__cat-arrow {
  width: 24px;
  height: 16px;
  margin-top: -1px; /* カードに食い込ませて連続させる */
}

/* --- イベントカード群 ------------------------------------------------ */
.s-warmup__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.s-warmup__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  background-color: var(--color-white);
  border: 1px solid var(--color-accent-red);
  border-radius: 10px;
}

.s-warmup__col--online .s-warmup__card {
  border-color: var(--color-accent-orange);
}

/* イベントバナー（カード先頭のサムネイル。2026-07-10 追加。
   PDXのイベントページ確定後は index.html の <div> を <a> に置換して下記ホバーが効く） */
.s-warmup__card-banner {
  display: block;
  margin-bottom: 12px;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;              /* 画像下の余白を消す */
}
.s-warmup__card-banner img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 921 / 451;     /* 読込前の高さ確保（CLS防止）。real01の450もほぼ同一 */
  object-fit: cover;
}
a.s-warmup__card-banner { transition: opacity 0.2s ease; }
a.s-warmup__card-banner:hover { opacity: 0.9; }

/* バナー画像を一時的に非表示＋トルツメ（2026-07-15：リアルイベントのバナー修正中で
   公開に間に合わないため）。バナー完成後は index.html の該当divから
   s-warmup__card-banner--hidden を外すだけで復帰する。 */
.s-warmup__card-banner--hidden { display: none; }

/* イベント詳細・申込（PTX）ボタン。2026-07-14 追加。
   PTX（イベント整理先）のページが未公開のため、現状は非アクティブ「近日公開」。
   公開後は index.html の <span class="s-warmup__card-btn s-warmup__card-btn--soon">
   を <a class="s-warmup__card-btn" href="PTX_EVENT_URL" target="_blank" rel="noopener"> に置換する。 */
.s-warmup__card-btn {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 6px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  background-color: var(--color-accent-red);
  color: var(--color-white);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.s-warmup__col--online .s-warmup__card-btn {
  background-color: var(--color-accent-orange);
  color: var(--color-dark);
}
a.s-warmup__card-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
/* 近日公開（PTX未公開）：クリック不可のグレー表示 */
.s-warmup__card-btn--soon,
.s-warmup__col--online .s-warmup__card-btn--soon {
  background-color: #e7e3da;
  color: #9a968d;
  cursor: default;
  pointer-events: none;
}

.s-warmup__card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.s-warmup__card-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 24px;
  border-radius: 30px;
  background-color: var(--color-accent-red);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1rem; /* 16px */
  line-height: normal; /* Figma leading-[normal] */
}

.s-warmup__col--online .s-warmup__card-tag {
  background-color: var(--color-accent-orange);
}

.s-warmup__card-date {
  font-family: var(--font-display);
  font-size: 0.875rem; /* 14px */
  line-height: normal; /* Figma leading-[normal] */
  color: var(--color-text);
}

/* 開催場所（リアルイベントのみ。日時メタの下・タイトルの上に1行） */
.s-warmup__card-place {
  font-family: var(--font-display);
  font-size: 0.875rem; /* 14px（日時と同トーン） */
  line-height: normal;
  color: var(--color-text-sub);
}

/* カードタイトル
   Figma（node 171:322 ほか）の実レンダリングは「白fill＋アクセント色の縁取り」。
   白背景カード上に白文字＋アクセントstrokeで抜き文字にする。
   stroke色はカラム別（リアル＝朱 / オンライン＝橙）でタグ・枠線と揃える。
   - paint-order:stroke fill でstrokeを文字の外側に描き、fillの白を侵食させない
   - -webkit-text-stroke 非対応環境向けに text-shadow 多重縁取りをフォールバック併記 */
.s-warmup__card-title {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.5rem); /* 24px */
  line-height: normal; /* Figma leading-[normal] */
  color: var(--color-white);
  /* リアルカラム（朱）のアウトライン。paint-order:stroke fill では stroke の外側半分
     しか見えないため、Figmaの太い縁取り（24px字に対し可視≈2px）に合わせて 4px 指定
     （可視≈2px）。旧1.5px＝可視0.75pxは細すぎた（ユーザー指摘）。 */
  -webkit-text-stroke: 4px var(--color-accent-red);
  paint-order: stroke fill;
  /* フォールバック（text-stroke非対応時の疑似縁取り・8方向・可視2px相当） */
  text-shadow:
    2px 0 0 var(--color-accent-red),
    -2px 0 0 var(--color-accent-red),
    0 2px 0 var(--color-accent-red),
    0 -2px 0 var(--color-accent-red),
    1.5px 1.5px 0 var(--color-accent-red),
    -1.5px 1.5px 0 var(--color-accent-red),
    1.5px -1.5px 0 var(--color-accent-red),
    -1.5px -1.5px 0 var(--color-accent-red);
}

.s-warmup__col--online .s-warmup__card-title {
  /* オンラインカラム（橙）のアウトライン（リアル列と同じ太さ・色だけ橙） */
  -webkit-text-stroke-color: var(--color-accent-orange);
  text-shadow:
    2px 0 0 var(--color-accent-orange),
    -2px 0 0 var(--color-accent-orange),
    0 2px 0 var(--color-accent-orange),
    0 -2px 0 var(--color-accent-orange),
    1.5px 1.5px 0 var(--color-accent-orange),
    -1.5px 1.5px 0 var(--color-accent-orange),
    1.5px -1.5px 0 var(--color-accent-orange),
    -1.5px -1.5px 0 var(--color-accent-orange);
}

/* -webkit-text-stroke が効く環境では text-shadow の疑似縁取りは不要（二重描画を防ぐ）。
   @supports で text-stroke 対応を検知できたら text-shadow を無効化する。 */
@supports ((-webkit-text-stroke: 1px black)) {
  .s-warmup__card-title {
    text-shadow: none;
  }
}

.s-warmup__card-desc {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: 1rem; /* 16px */
  line-height: normal; /* Figma leading-[normal] */
  color: var(--color-text);
}

/* --- フッターCTA ----------------------------------------------------- */
.s-warmup__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.s-warmup__foot-note {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: 1rem; /* 16px */
  line-height: normal; /* Figma leading-[normal] */
  text-align: center;
  color: var(--color-white);
}

.s-warmup__cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  background-color: var(--color-accent-orange);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.5rem; /* 24px */
  /* Figma実値: leading-[normal]（get_design_context確認。従来1.2は実値と不一致で
     ボタン高さがFigma実測51pxより低くなっていた） */
  line-height: normal;
  transition: opacity 0.2s ease;
}

.s-warmup__cta:hover {
  opacity: 0.85;
}

.s-warmup__cta-arrow {
  width: 15.4px;
  height: 14px;
  flex-shrink: 0;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

/* --- タブレット（768px以下）: 2カラム → 1カラム --------------------- */
@media (max-width: 768px) {
  .s-warmup__cols {
    flex-direction: column;
    gap: 40px;
  }

  .s-warmup__col {
    width: 100%;
  }
}

/* --- phone（≤767px）は src/css/sp/07-warmup.css に分離（差し替え可能設計） --- */

/* css/sections/08-mentors.css */
/* ==========================================================================
   08 MENTORS & JUDGES ＋ SPECIAL CONTENT
   Figma node 171:378 / SPEC.md §8
   色・フォントは tokens.css の変数のみ使用
   ========================================================================== */

.s-mentors {
  background-color: var(--color-white);
  color: var(--color-text);
  /* Figma: py-100 px-90（.inner 側で左右余白を取るため上下のみここで） */
  padding-block: clamp(56px, 8vw, 100px);
  overflow: hidden; /* カード横スクロールのはみ出しをセクション内に閉じる */
}

.s-mentors__inner {
  display: flex;
  flex-direction: column;
  /* Figma: head→cards→more は gap-40。more→SPECIAL は gap-80（下記 __special の margin で +40）。 */
  gap: clamp(28px, 3.2vw, 40px);
  /* Figma: フレーム px-90。この要素は .inner と同一（class併用）なので padding-inline は
     .inner の 40px を上書きする。よって合計 90px にするには 90px を直接指定する。 */
  padding-inline: clamp(20px, 7vw, 90px);
}

/* --- 見出しブロック --------------------------------------------------- */
.s-mentors__head {
  display: flex;
  flex-direction: column;
  /* 参照PNG実測: title→subtitle→lead 間は約24px */
  gap: clamp(16px, 2.5vw, 24px);
}

.s-mentors__title {
  font-family: var(--font-display);
  /* Figma 100px。SPで大幅縮小 */
  font-size: clamp(38px, 9vw, 100px);
  line-height: 1;
  color: var(--color-accent-red);
  word-break: break-word;
}

.s-mentors__subtitle {
  /* Figma 48px / W8（Heavy）/ leading-normal（get_design_context実値: leading-[normal]、固定値指定なし） */
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(24px, 4.5vw, 48px);
  line-height: normal;
  color: var(--color-text);
}

.s-mentors__lead-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.s-mentors__lead {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 2;
  color: var(--color-text);
}

/* 横スクロール操作ボタン */
.s-mentors__nav {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-shrink: 0;
}

.s-mentors__nav-btn {
  display: inline-flex;
  width: 33px;
  height: 33px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.s-mentors__nav-btn:hover {
  transform: translateY(-2px);
}

.s-mentors__nav-btn[disabled] {
  opacity: 0.3;
  cursor: default;
  transform: none;
}

.s-mentors__nav-btn img {
  width: 33px;
  height: 33px;
}

/* --- カード（Splide スライダー） --------------------------------------- */
/* .splide__track はセクション幅にフィット。Splide がスライド幅を perPage から
   算出しインライン設定するため、ここではカード幅を固定しない。 */
.s-mentors__slider {
  /* 端でフォーカスリングが見切れないよう、キーボード時のアウトライン用余白 */
  padding-block: 0;
}

/* 2026-07-21: メンター・審査員の人数が確定したため横スクロールを廃止し、
   全員が折り返しで一覧表示される中央寄せグリッドに変更（PC最大4列 / tablet3列 / SP2列）。 */
.s-mentors__slider .splide__track {
  overflow: visible;
}

.s-mentors__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;     /* 左揃え（2026-07-21 ユーザー指示） */
  gap: 24px;
}

/* キーボードでスライダーにフォーカスした際のアウトライン。 */
.s-mentors__slider .splide__track:focus-visible,
.s-mentors__slider:focus-visible {
  outline: 3px solid var(--color-accent-orange);
  outline-offset: -3px;
}

.s-mentors__card {
  /* 全員一覧グリッド：PCは1段4列。カード幅は列数から算出（4列 = 100%を4分割）。 */
  flex: 0 1 auto;
  width: calc((100% - 3 * 24px) / 4);
  max-width: 280px;
  opacity: 1;                       /* vendor .splide__slide{opacity:0} を打ち消す */
  background-color: var(--card-bg, var(--color-dark));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;                        /* Figma: card-top→figure→name-en = 24px */
  padding: 8px;
  color: var(--color-white);
}

/* 写真＋氏名ブロックのまとまり（Figma name-group 202:1246 = w-183 / gap-16） */
.s-mentors__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;                        /* Figma: photo→person = 16px */
  width: 100%;
  max-width: 183px;
}

/* 列数レスポンシブ：tablet 3列 / SP 2列（全員一覧・折り返し中央寄せ）。 */
@media (max-width: 1023px) {
  .s-mentors__card { width: calc((100% - 2 * 24px) / 3); }
}
@media (max-width: 767px) {
  .s-mentors__cards { gap: 14px; }
  .s-mentors__card { width: calc((100% - 14px) / 2); }
}

.s-mentors__card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.s-mentors__role {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: normal;             /* Figma実値: leading-[normal] */
  color: var(--color-white);
  white-space: nowrap;
}

.s-mentors__ehime {
  width: 55px;
  height: 26px;
  flex-shrink: 0;
}

/* 写真：Figmaのマスク 180×220（比率）。狭い列では幅に追従して縮小。 */
.s-mentors__photo {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 180 / 220;
  overflow: hidden;
}

.s-mentors__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.s-mentors__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 100%;
  gap: 0;                           /* Figma: name-jp→org 間隔は行送りのみ */
}

.s-mentors__name-jp {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: normal;              /* Figma: leading-normal */
}

.s-mentors__org {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: 14px;
  line-height: normal;              /* Figma実値: leading-[normal] */
}

.s-mentors__name-en {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: 12px;
  text-align: center;
  width: 100%;
}

/* --- MENTORS / JUDGES 2段レイアウト＋小見出し（2026-07-15 追加） --------- */
.s-mentors__group {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
}
.s-mentors__group-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-left: 14px;
  border-left: 6px solid var(--color-accent-red);
}
.s-mentors__group-en {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-text);
}
.s-mentors__group-ja {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(12px, 1.4vw, 14px);
  color: var(--color-text-sub);
}

/* --- 審査員（JUDGES）：見出しのみ強調し、カード配置はメンターと共通の横一列に統一
   （2026-08-14 ユーザー指示「メンター同様 横一列で」）。上位配置＋見出し拡大で差別化。 --- */
.s-mentors__group--judges .s-mentors__group-en {
  font-size: clamp(24px, 3.4vw, 36px);
}

/* --- TO BE ANNOUNCED 枠（各段末尾・今後追加を示す） --- */
.s-mentors__card--tba .s-mentors__card-top {
  height: 26px;                 /* 通常カードの role+logo 高さに合わせ写真位置を揃える */
}
.s-mentors__photo--tba {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ededed;
}
.s-mentors__tba-q {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 1;
  color: #1f1f1f;
}
.s-mentors__tba-label {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--color-white);
}

/* --- 続々追加告知 ----------------------------------------------------- */
.s-mentors__more {
  display: flex;
  flex-direction: column;
  gap: 0;                          /* Figma実値: 親div(171:535)にgapユーティリティなし=0 */
}

.s-mentors__more-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 25px);
  line-height: normal;              /* Figma実値: 親div leading-[normal] を継承 */
  color: var(--color-text);
}

.s-mentors__more-text {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: normal;              /* Figma実値: 親div leading-[normal] を継承 */
  color: var(--color-text);
}

/* --- SPECIAL CONTENT -------------------------------------------------- */
.s-mentors__special {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;                        /* Figma: banner→illust→desc = 32px */
  text-align: center;
  /* Figma: more→SPECIAL の間隔は gap-80。__inner gap(40) に +40 で合計80。 */
  margin-top: clamp(20px, 3.1vw, 40px);
}

/* 六角形バナー（Figma 660×100 の外枠SVGにテキストを重ねる） */
.s-mentors__special-banner {
  position: relative;
  width: min(660px, 100%);
  aspect-ratio: 660 / 100;
  display: grid;
  place-items: center;
}

.s-mentors__special-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.s-mentors__special-banner-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* Figma実値: テキストブロック448px / 六角形660px → 余白は片側(660-448)/2=106px=16.06% */
  padding-inline: 16%;
}

.s-mentors__special-label {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.2vw, 24px);
  line-height: normal;              /* Figma実値: 親div(171:541) leading-[normal] を継承 */
  color: var(--color-accent-orange);
}

.s-mentors__special-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 3vw, 32px);
  line-height: normal;              /* Figma実値: 親div(171:541) leading-[normal] を継承 */
  color: var(--color-text);
  white-space: nowrap;
}

.s-mentors__special-illust {
  width: min(520px, 90%);
  height: auto;
}

/* SP(≤767)専用に差し替える画像は、PC/tablet では非表示。
   phone では sp/08-mentors.css が PC版を隠し SP版を表示に切り替える
   （プロジェクト規約: 共有要素の追加は default 非表示にして SP でのみ表示）。 */
.s-mentors__special-frame--sp,
.s-mentors__special-illust--sp {
  display: none;
}

.s-mentors__special-desc {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 2;
  color: var(--color-text);
  max-width: 820px;
  text-align: left;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

/* タブレット（768–1279px。phone の上書きは css/sp/08-mentors.css に分離） */
@media (max-width: 768px) {
  .s-mentors__lead-row {
    align-items: flex-start;
  }

  /* ナビ矢印はタッチスワイプで代替できるため非表示（tablet/phone 共通） */
  .s-mentors__nav {
    display: none;
  }

  /* 六角形バナー内の長いタイトルは折り返し許可（tablet/phone 共通） */
  .s-mentors__special-title {
    white-space: normal;
  }
}

/* css/sections/09-semifinalists.css */
/* ==========================================================================
   09-semifinalists — SEMI FINALISTS
   Figma node 171:601 / 171:676
   背景 #f7f3ea / 見出し #f4a632（Dela Gothic One 100px）
   カード5列（207px・justify-between）→ 768で3列 → 480で2列
   ========================================================================== */

.s-semifinalists {
  background-color: #f7f3ea;
  /* Figma実測: セクション上端→見出し上端 ≈121px（1280時）。下は10-finalistsと背景連続のため控えめ。 */
  padding-block-start: clamp(60px, 9.4vw, 121px);
  padding-block-end: clamp(40px, 6vw, 60px); /* 区切り線への繋ぎ（下は控えめ） */
  overflow-x: clip; /* 極狭幅で見出し(Delaディスプレイ)が数px溢れて横スクロールが出るのを防ぐ */
}

/* 中央寄せコンテナ（Figmaのコンテンツ幅 1100px に合わせる）。
   .inner（max-width1280 / padding40）だと使用可能幅が1020pxに縮み参照より狭くなるため、
   05-entry と同方針: max-width1100 + padding0 で使用可能幅を1100pxに合わせる。
   1280時 (1280-1100)/2=90px の左右ガター＝Figma px-90 を再現。狭幅は下でフルイド復帰。 */
.s-semifinalists__inner {
  max-width: 1100px;
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 5vw, 60px);
}

/* 1180px 未満は .inner 相当のフルイド左右余白に戻す */
@media (max-width: 1180px) {
  .s-semifinalists__inner {
    padding-inline: clamp(20px, 4vw, 40px);
  }
}

/* --- 見出しブロック（gap 24px・中央揃え） ------------------------------ */
.s-semifinalists__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  width: 100%;
}

.s-semifinalists__title {
  font-family: var(--font-display);
  color: var(--color-accent-orange);
  /* Figma 100px → SPで縮小 */
  font-size: clamp(48px, 10vw, 100px);
  line-height: 1;
  display: flex;
  flex-direction: column;
}

.s-semifinalists__lead-title {
  font-family: var(--font-jp);
  font-weight: 800; /* Figma 見出し=Hiragino W8 → 800 */
  color: var(--color-text);
  font-size: clamp(24px, 4.5vw, 48px);
  /* Figma実測(171:679): 48px1行でテキストボックス高さ72px → 72/48=1.5。
     旧1.16は実測と不一致（get_metadata/get_design_context再確認で修正）。 */
  line-height: 1.5;
}

.s-semifinalists__lead {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  color: var(--color-text);
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 2;
  max-width: 1100px;
}

/* --- カードグリッド（20枠） -------------------------------------------- */
/* Figma(171:681): flex-wrap + justify-between + gap-y 16px、カード固定 w207px。
   1fr等分だとカード幅が207.2pxに膨らみ左右カードが数px横ずれする（差分ヒートで検出）。
   → Figmaと同じく固定207px + space-between で列間ギャップを均等配分（1100内で約16.25px）。 */
.s-semifinalists__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 16px;
  width: 100%;
}

.s-semifinalists__card {
  background-color: var(--color-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  /* Figma(171:689) 固定幅207px。1100/5=220 だが space-between で列間に約16pxが入る */
  width: 207px;
}

/* プレースホルダー（#f0f0f0 の箱に ? アイコンを重ねる。Figma 65.5×80px） */
.s-semifinalists__thumb {
  flex-shrink: 0;
  width: 65.5px;
  height: 80px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-semifinalists__thumb img {
  /* Figma: ?アイコン枠40pxに対しグリフは inset 20.27% → 実グリフ幅≈23.8px（SVG viewBox 23.79×40）。
     HTML属性 width=40 の横伸びを防ぐため、CSSで実アスペクト(23.8×40)を明示。 */
  width: 23.8px;
  height: 40px;
}

/* 発表後（写真入り）用: サムネ枠いっぱいに写真を敷く。
   TBA枠の ? img を <img class="s-semifinalists__thumb-photo"> の写真に差し替えるだけで移行可。 */
.s-semifinalists__thumb-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-semifinalists__name {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--font-jp);
  font-weight: 600; /* Figma TO BE ANNOUNCED=Hiragino W6 → 600 */
  font-size: 14px; /* Figma text-[14px] */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-white);
  /* 「TO BE」「ANNOUNCED」を <br> で2行固定。単語内では折り返さない */
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

/* --- レスポンシブ ------------------------------------------------------ */
/* tablet(768–1279): 固定207pxカードのflex-wrapで自動的に列数が減る（幅により3〜4列）。
   カードを可変にして3列で綺麗に割る。phone(≤767) は src/css/sp/09-semifinalists.css。
   このブロックは 768px 丁度で 3列を維持する（sp/ は max-width:767 なので 768 には効かない）。 */
@media (max-width: 1180px) {
  /* .inner復帰幅では固定207pxだと右に余白が偏るため、カードを伸縮させ均等3列に */
  .s-semifinalists__grid {
    justify-content: flex-start;
    gap: 16px;
  }
  .s-semifinalists__card {
    width: calc((100% - 32px) / 3);
  }
}

@media (max-width: 768px) {
  .s-semifinalists__card {
    width: calc((100% - 32px) / 3);
  }
}

/* css/sections/10-finalists.css */
/* ==========================================================================
   10-finalists — FINALISTS ＋ 詳細ページ導線
   Figma node 171:602（区切り線 171:675）
   背景 #f7f3ea（09と連続）/ 見出し #f45d11（Dela Gothic One 100px）
   カード6列（170px・justify-between）→ 768で3列 → 480で2列
   ========================================================================== */

.s-finalists {
  background-color: #f7f3ea;
  /* 09から背景連続。上は区切り線分の余白、下はセクション終端の余白100px */
  padding-block-start: clamp(40px, 6vw, 60px);
  padding-block-end: clamp(56px, 8vw, 100px);
  overflow-x: clip; /* 極狭幅で見出し(Delaディスプレイ)が数px溢れて横スクロールが出るのを防ぐ */
}

/* Figmaコンテンツ幅1100pxに合わせる。.inner の padding40 を打ち消し使用可能幅を1100pxに。
   09-semifinalists / 05-entry と同方針（1280時の左右90pxガター＝Figma px-90 再現）。 */
.s-finalists__inner {
  max-width: 1100px;
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 5vw, 60px);
}

/* 1180px 未満は .inner 相当のフルイド左右余白に戻す */
@media (max-width: 1180px) {
  .s-finalists__inner {
    padding-inline: clamp(20px, 4vw, 40px);
  }
}

/* --- 09との区切り線（縦線 100px / #6B6B6B / 2px） ---------------------- */
/* Figma実測(171:675): 09末尾→線頭=60px（.s-finalistsのpadding-block-startで確保）、
   線末尾→見出し頭=60px（.s-finalists__innerのgapで確保）。線自体は上下marginなしで
   ちょうど一致するため、margin-blockは付けない（付けると60+20=80pxに超過してしまう）。 */
.s-finalists__divider {
  width: 2px;
  height: clamp(60px, 8vw, 100px);
  background-color: #6b6b6b;
}

/* --- 見出しブロック（gap 30px・中央揃え） ------------------------------ */
.s-finalists__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma実測(171:603): title(h100,y0)→lead-title(y124)=24px、
     lead-title(h72,y124)→lead(y220)=24px。get_design_context確認済み(gap-24)。 */
  gap: 24px;
  text-align: center;
  width: 100%;
}

.s-finalists__title {
  font-family: var(--font-display);
  color: var(--color-accent-red);
  font-size: clamp(48px, 10vw, 100px);
  line-height: 1;
}

.s-finalists__lead-title {
  font-family: var(--font-jp);
  font-weight: 800; /* Hiragino W8 相当 */
  color: var(--color-text);
  font-size: clamp(24px, 4.5vw, 48px);
  /* Figma実測: テキストボックス高さ72px/フォント48px=1.5 */
  line-height: 1.5;
}

.s-finalists__lead {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  color: var(--color-text);
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 2;
  max-width: 1100px;
}

/* --- カードグリッド（6枠） --------------------------------------------- */
/* Figma: justify-between / 170px / 縦積み。6列想定 */
.s-finalists__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  width: 100%;
}

.s-finalists__card {
  background-color: var(--color-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma実測(get_design_context 171:616): px-8 py-16（card170×250、上下左右対称）、
     内側ラッパー(171:617)はgap-8。旧値(padding26/gap18)はx/y座標からの誤推定だったため
     get_design_contextで再確認し修正。 */
  gap: 8px;
  padding: 16px 8px;
}

/* プレースホルダー（#f0f0f0 130×160px に ? アイコン 80px を重ねる） */
.s-finalists__thumb {
  width: 100%;
  max-width: 130px;
  aspect-ratio: 130 / 160;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-finalists__thumb img {
  /* Figma実測: ?グリフは箱(130×160)内で約79px高×47px幅。svgのviewBoxが
     縦長(23.79×40)のため、正方形imgの高さで拘束すると meet で
     グリフ高=box高・グリフ幅≈box高×0.595 になる。box高80pxで
     グリフ≈80×48px → Figma(79×47)にほぼ一致。 */
  width: auto;
  height: 80px;
  max-width: none;
}

/* 発表後（写真入り）用: サムネ枠(130×160)いっぱいに写真を敷く。
   TBA枠の ? img を <img class="s-finalists__thumb-photo"> の写真に差し替えるだけで移行可。 */
.s-finalists__thumb-photo {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.s-finalists__name {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  /* Figma実測(171:625): テキスト箱42px(2行)÷14px=1.5。letter-spacingはFigma側に
     指定なしのため付けない（旧-0.01emを削除）。 */
  line-height: 1.5;
  color: var(--color-white);
  text-align: center;
  /* 「TO BE」「ANNOUNCED」を <br> で2行固定。単語内では折り返さない */
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

/* --- 詳細ページ導線バナー（Figma 171:666） ----------------------------- */
.s-finalists__banner {
  width: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-accent-red);
  border-radius: 20px;
  padding: 30px 40px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  /* Figma(171:666): gap指定なし。text と btn を justify-between で両端寄せ。
     gapを入れると横幅が足りずdesc(黒16px)が折り返すため0にする。 */
  gap: 0;
}

.s-finalists__banner-text {
  display: flex;
  flex-direction: column;
  /* Figma: テキストブロックは幅788px。desc(黒16px)を1行に収める。
     ブラウザのHiragino実測ではdesc1行に約790px必要なため、折返し回避で792pxに固定。
     使用可能幅1100→banner content1020。text792 + btn204 = 996 ≤ 1020、
     残り≈24pxはjustify-betweenで両端寄せ（Figmaのgap無し挙動）。
     中間幅(~1180px未満)と768px未満は下部メディアクエリで縮小/全幅化。 */
  flex: 0 0 792px;
  width: 792px;
  max-width: 792px;
  min-width: 0;
}

.s-finalists__banner-lead {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  color: var(--color-accent-red);
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.5;
}

.s-finalists__banner-desc {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  color: #000;
  font-size: 16px;
  /* Figma実測: 24px(1行)/16px=1.5 */
  line-height: 1.5;
  /* get_design_context(171:669)でPCのみ text-center 指定を確認（banner-leadは左寄せのまま） */
  text-align: center;
}

.s-finalists__banner-btn {
  flex-shrink: 0;
  background-color: var(--color-accent-orange);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  transition: opacity 0.2s ease;
}

.s-finalists__banner-btn:hover {
  opacity: 0.85;
}

/* 非アクティブ状態「近日公開」（2026-07-09 ユーザー指示。詳細ページ公開まで）。
   グレー塗り・白文字・ホバー変化なし・クリック不可 */
.s-finalists__banner-btn--disabled,
.s-finalists__banner-btn--disabled:hover {
  background-color: #B7B7B7;
  color: var(--color-white);
  opacity: 1;
  pointer-events: none;
  cursor: default;
}

.s-finalists__banner-btn span {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.6vw, 18px);
  /* Figma実測: 26px(1行)/18px=1.444 */
  line-height: 1.44;
  color: var(--color-white);
  white-space: nowrap;
}

.s-finalists__banner-arrow {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* --- レスポンシブ ------------------------------------------------------ */
/* 中間幅: .inner が1100px未満に縮み始める帯。バナーが横並びのまま
   テキスト790px固定だと溢れるため、テキストを可変にしてdescの折返しを許容。 */
@media (max-width: 1180px) and (min-width: 769px) {
  .s-finalists__banner-text {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }
}

/* tablet(768–1279): 6列→3列 ＋ バナー縦積み。phone(≤767) の再構成は
   src/css/sp/10-finalists.css に分離。このブロックは 768px 丁度で有効
   （sp/ は max-width:767 なので 768 には効かない）。 */
@media (max-width: 768px) {
  .s-finalists__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* バナーは縦積みに */
  .s-finalists__banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }

  /* 縦積み時はテキスト幅固定を解除して全幅（descは自然に折り返す） */
  .s-finalists__banner-text {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .s-finalists__banner-btn {
    align-self: stretch;
    justify-content: center;
  }
}

/* css/sections/11-ticket.css */
/* ==========================================================================
   11-ticket.css — TICKET（LIVE@松山 / ONLINE配信 の2枠＋予約CTA）
   Figma node: 171:841 実測値ベース
   背景: Figma背景グループ(朱#F45D11の色面 171:842 ＋ マスク済みブラシ 171:843)を
         フラット書き出しした1枚画像(ticket-bg.webp)に置換。
         乗算ブレンド・固定px高・グラデ近似は全廃。
   ========================================================================== */

.s-ticket {
  position: relative;
  overflow: hidden;
  /* 画像読込前フォールバック兼、画像上端の朱と同色（隙間が出ても色が繋がる） */
  background-color: var(--color-accent-red);
  /* Figma: py-100 / px-90（内側1100px幅に合わせて左右90px） */
  padding-block: clamp(56px, 8vw, 100px);
  padding-inline: clamp(20px, 7vw, 90px);
}

/* --- 背景（Figmaフラット書き出し1枚） -------------------------------------
   ticket-bg.webp = 朱の色面にブラシ(焦茶)を乗算焼き込み済みの完成背景。
   ブラシは画像下部から斜めに立ち上がる構図なので、下辺を基準に cover で敷く。
   これにより内容量やviewport幅で高さが変わっても、ブラシは常に下端に接し、
   上側の朱地が伸縮するだけで隙間が出ない（固定px高による欠けを解消）。 */
.s-ticket__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../assets/ticket-bg.webp");
  background-repeat: no-repeat;
  /* 下辺基準・cover。焦茶ブラシを常に下端へ固定し、上の朱地で高さを吸収する */
  background-position: center bottom;
  background-size: cover;
}

.s-ticket__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  /* Figma: 見出し群(TICKET+lead) → チケットリスト の間は gap-40。
     チケットリスト → CTA群 の間だけ 140（.s-ticket__cta の margin-top で足す）。
     Figmaは head+list を1グループ(gap-40)にまとめ、そのグループとCTAの間が140の構造。 */
  gap: clamp(28px, 4vw, 40px);
}

/* --- 見出し ------------------------------------------------------------- */
.s-ticket__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.s-ticket__title {
  font-family: var(--font-display);
  /* Figma 100px */
  font-size: clamp(48px, 9vw, 100px);
  line-height: 1;
  color: var(--color-white);
}

.s-ticket__lead {
  font-family: var(--font-jp);
  font-weight: 800; /* ヒラギノW8相当 */
  /* Figma 48px */
  font-size: clamp(24px, 4.4vw, 48px);
  /* Figma実測: 171:850 text bbox height=72(@48px) → 72/48=1.5。
     leading-[normal]は数値ではないため、bbox高さから逆算した実値1.5に修正（旧1.2は未計測の目分量値） */
  line-height: 1.5;
  color: var(--color-text); /* #1F1F1F（朱背景に濃色） */
}

/* --- チケット2枠リスト --------------------------------------------------- */
.s-ticket__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.s-ticket__divider {
  border: 0;
  /* Figma divider-line.svg = 白1px。朱背景で少しだけ透かして参照PNGの見え方に合わせる */
  border-top: 1px solid rgba(255, 255, 255, 0.85);
  width: 100%;
  margin: 0;
}

/* 1行（左:タイトル / 中:本文＋ピル / 右:予約ボタン） */
.s-ticket__row {
  display: flex;
  align-items: center;
  gap: 32px;
}

.s-ticket__rowHead {
  flex: 0 0 300px;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: var(--color-white);
}

.s-ticket__rowTitle {
  font-family: var(--font-display);
  /* Figma 40px */
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.2;
}

.s-ticket__rowSub {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: 18px;
  /* Figma実測: 171:856 text bbox height=27(@18px) → 27/18=1.5（旧1.3は未計測の目分量値） */
  line-height: 1.5;
}

.s-ticket__rowBody {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.s-ticket__desc {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 2;
  color: var(--color-white);
}

.s-ticket__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.s-ticket__pill {
  background-color: var(--color-white);
  color: var(--color-accent-red);      /* Figma実値 #F45D11（171:861等） */
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.4;
  padding: 4px 24px;
  border-radius: 30px;
  white-space: nowrap;
}

/* 予約ボタン（白背景・角丸なしのFigma準拠） */
.s-ticket__reserve {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background-color: var(--color-white);
  color: var(--color-accent-red);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.4;
  transition: opacity 0.2s ease;
}

.s-ticket__reserve:hover {
  opacity: 0.85;
}

/* 非アクティブ状態「近日公開」（2026-07-09 ユーザー指示。予約ページ公開まで）。
   半透明の白地・グレー文字・ホバー変化なし・クリック不可 */
.s-ticket__reserve--disabled,
.s-ticket__reserve--disabled:hover {
  background-color: rgba(255, 255, 255, 0.6);
  color: #8A8A8A;
  opacity: 1;
  pointer-events: none;
  cursor: default;
}

.s-ticket__reserveIcon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* --- 締めコピー＋CTA ---------------------------------------------------- */
.s-ticket__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  /* Figma実データ(171:846)は head+list を1グループ・CTAをもう1グループとする2階層
     flex(外側gap-140/内側head↔list gap-40)。本実装は.s-ticket__innerをフラット3兄弟
     (head/list/cta)にしているため、innerのgap(head↔list用、最大40)が list↔cta 間にも
     自動的に効いてしまう（flexboxのgapとmarginは相殺されず加算されるため、旧実装は
     40(gap)+140(margin-top)=180pxとFigmaの140pxより40px過大だった）。
     ここではFigmaが意図する「list↔cta間の合計140」からinnerのgap分を差し引いた差分のみを
     margin-topに載せることで、gapとの二重加算を解消し合計を厳密に140へ一致させる。 */
  margin-top: calc(clamp(64px, 11vw, 140px) - clamp(28px, 4vw, 40px));
}

.s-ticket__ctaCopy {
  font-family: var(--font-jp);
  font-weight: 800; /* W8相当 */
  font-size: clamp(24px, 4.4vw, 48px);
  /* Figma実測: 171:892 text bbox height=144(@48px・2行) → 144/2/48=1.5（旧1.2は未計測の目分量値） */
  line-height: 1.5;
  color: var(--color-white);
}

.s-ticket__ctaBtn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background-color: var(--color-accent-orange);
  color: var(--color-white);
  /* Figma: px-16 py-8 */
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.4;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.s-ticket__ctaBtn:hover {
  opacity: 0.92;
  transform: translateY(-2px);
}

.s-ticket__ctaIcon {
  width: 18px;
  height: 16px;
  flex-shrink: 0;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

/* --- タブレット（〜768px）: 予約ボタンを本文下に回す ---------------------- */
@media (max-width: 768px) {
  .s-ticket__row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
  }

  .s-ticket__rowHead {
    flex-basis: 100%;
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }

  .s-ticket__rowBody {
    flex-basis: 100%;
  }

  .s-ticket__reserve {
    /* 本文の下・左寄せに */
    align-self: flex-start;
  }
}

/* phone tier（≤767px）の上書きは src/css/sp/11-ticket.css に分離（build連結最後） */

/* css/sections/12-partner.css */
/* ==========================================================================
   12-partner.css — PARTNER CONTESTS（連携大会ロゴ枠 4×2＝8枠）
   Figma node: 171:1006 実測値ベース
   背景ダーク(#1F1F1F)・見出し朱・白ロゴカード(260x180 / radius10 / gap20)
   ========================================================================== */

.s-partner {
  background-color: var(--color-dark);
  /* Figma: py-100 / px-90（内側1100px幅に合わせて左右90px） */
  padding-block: clamp(56px, 8vw, 100px);
  padding-inline: clamp(20px, 7vw, 90px);
}

.s-partner__inner {
  max-width: 1100px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 40px; /* 見出し群 → グリッド */
}

/* --- 見出し ------------------------------------------------------------- */
.s-partner__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.s-partner__title {
  font-family: var(--font-display);
  /* Figma 100px（2行） */
  font-size: clamp(44px, 8vw, 100px);
  line-height: 1;
  color: var(--color-accent-red);
}

.s-partner__lead {
  font-family: var(--font-jp);
  font-weight: 800; /* W8相当 */
  /* Figma 48px, 実測box高さ72px=48px×1.5でline-height確定 */
  font-size: clamp(24px, 4.4vw, 48px);
  line-height: 1.5;
  color: var(--color-white);
}

.s-partner__desc {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 2;
  color: var(--color-white);
}

/* --- ロゴ枠グリッド ------------------------------------------------------ */
.s-partner__grid {
  display: grid;
  /* Figma: 4列 gap-20 */
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  /* 各セルを行の高さに引き伸ばさない（stretchだと一部のブラウザで
     aspect-ratio指定の写真枠が伸び、下の大会名テキストが潰れて消える不具合が出る）。
     2026-07-27 スマホ表示バグ対策。 */
  align-items: start;
}

/* 連携大会カード：素材（施設ロゴ or 会場写真）＋大会名。2026-07-23 リニューアル。
   大会ロゴが無い運用のため、白カードに素材を収め、その下に大会名を白字で添える。 */
.s-partner__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* カード全体を公式サイトへのリンクに。ホバーで軽く持ち上げる。 */
.s-partner__link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* hover演出はリンク（a）のみ。非リンクの --static カードには適用しない。 */
a.s-partner__link:hover {
  transform: translateY(-3px);
}
a.s-partner__link:hover .s-partner__media {
  opacity: 0.92;
}

/* 素材枠 = 白カード（Figma 260x180 / radius 10）。aspect-ratioで可変化 */
.s-partner__media,
.s-partner__slot {
  background-color: var(--color-white);
  border-radius: 10px;
  aspect-ratio: 260 / 180;
  /* 縦並びカード内で伸縮させない（伸びると大会名を潰す・上記グリッド対策とセット）。 */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 16px;
}

/* 大会名は潰さない（保険）。 */
.s-partner__cname {
  flex: 0 0 auto;
}

/* ロゴはカード内に収める（contain）。 */
.s-partner__media img,
.s-partner__slot img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* 会場写真はカードいっぱいに（cover）。 */
.s-partner__media--photo {
  padding: 0;
}
.s-partner__media--photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

/* 未確定枠（近日公開）：破線の薄いプレースホルダー。 */
.s-partner__media--soon {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
}

/* 大会名（白カード下・白字）。 */
.s-partner__cname {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-white);
  text-align: center;
}

/* 補足ノート。 */
.s-partner__note {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 24px;
}

/* ==========================================================================
   レスポンシブ（SPEC.md §2: 4列 → SPで2列）
   ========================================================================== */

/* --- タブレット（〜768px）: 3列 ------------------------------------------ */
@media (max-width: 768px) {
  .s-partner__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

/* phone tier（≤767px）の上書きは src/css/sp/12-partner.css に分離（build連結最後） */

/* css/sections/13-news.css */
/* ============================================================
   13-news : NEWS 一覧
   Figma node 171:898（実測値ベース）
   ============================================================ */

.s-news {
  /* Figma: px-[90px] py-[100px]。.inner(max1280) 内でさらに余白を持たせる */
  padding-block: clamp(56px, 8vw, 100px);
  background-color: var(--color-white);
  /* 記事間罫線色（参照PNG実測 ≈#8f8f8f）。--color-text を白と半々で混色 */
  --news-divider: color-mix(in srgb, var(--color-text) 50%, #fff);
}

/* Figma: 見出し・リストとも幅1100px、左右90pxガター（90+1100+90=1280）。
   .inner の max-width(1280) を 1100 に絞り中央ブロック化。desktopでは
   .inner の内側paddingを0にして中身を1100px全幅で使う。
   1180px以下では横ガターを復活させSPで詰まらないようにする。 */
.s-news__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 0;
}

@media (max-width: 1180px) {
  .s-news__inner {
    padding-inline: clamp(20px, 4vw, 40px);
  }
}

/* --- 見出し ------------------------------------------------- */
.s-news__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Figma実値: head→list gap 40px（Frame148 y=236 - head高196=40） */
  margin-bottom: 40px;
}

.s-news__en {
  font-family: var(--font-display);
  /* Figma 100px。SPで縮小 */
  font-size: clamp(48px, 9vw, 100px);
  line-height: 1;
  color: var(--color-accent-red);
}

.s-news__ja {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 48px);
  /* Figma実測: box高さ72px=48px×1.5でline-height確定（leading-normal, 12-partnerと同一パターン） */
  line-height: 1.5;
  color: var(--color-text);
}

/* --- 一覧 --------------------------------------------------- */
.s-news__list {
  /* コンテナ(.s-news__inner=1100px)いっぱい。Figma list幅1100px */
  width: 100%;
  /* 上端の区切り線。参照PNG実測 ≈#8f8f8f のグレー罫線 */
  border-top: 1px solid var(--news-divider);
}

.s-news__item {
  border-bottom: 1px solid var(--news-divider);
}

.s-news__link {
  display: grid;
  /* 日付 / タグ / 見出し(可変) / 矢印 */
  grid-template-columns: 120px 100px 1fr 16px;
  align-items: center;
  gap: 16px;
  /* Figma: 行ピッチ77px。padding-block を実測に合わせ調整（累積ズレ回避） */
  padding-block: 22.75px;
  color: var(--color-text);
  transition: opacity 0.2s ease;
}

.s-news__link:hover {
  opacity: 0.6;
}

/* 詳細ページの無いお知らせ（div運用）。リンクではないのでホバー・カーソルを無効化。
   2026-07-14 追加。詳細ページ用意時は <a class="s-news__link" href> に戻す。 */
.s-news__link--static { cursor: default; }
.s-news__link--static:hover { opacity: 1; }

.s-news__date {
  font-family: var(--font-jp);
  /* Figma: Hiragino W6 */
  font-weight: 600;
  font-size: 18px;
}

/* RELEASE タグ（ピル） */
.s-news__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  padding: 4px 8px;
  border-radius: 30px;
  background-color: var(--color-accent-red);
  color: var(--color-white);
  font-family: var(--font-jp);
  /* Figma: Hiragino W6 */
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}

.s-news__title {
  font-family: var(--font-jp);
  /* Figma: Hiragino W6 */
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
}

.s-news__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-accent-red);
}

/* --- レスポンシブ ------------------------------------------- */
/* tablet(768–1279)の挙動は従来どおり維持（この @media が正）。日付とタグを
   1段目、見出しを2段目に。phone tier(≤767px)の詰め・フォント最適化・
   タップ領域拡大は src/css/sp/13-news.css で上書きする（build連結で最後・
   カスケードで勝つ）。768px ちょうど（tablet端）は sp/(≤767) が当たらず不変。 */
@media (max-width: 768px) {
  .s-news__link {
    grid-template-columns: auto auto 1fr 16px;
    grid-template-areas:
      "date tag  .     arrow"
      "ttl  ttl  ttl   ttl";
    row-gap: 10px;
  }

  .s-news__date { grid-area: date; }
  .s-news__tag  { grid-area: tag; }
  .s-news__arrow { grid-area: arrow; align-self: start; }
  .s-news__title { grid-area: ttl; }
}

/* phone tier(≤767px)のフォント調整は SP.md の方針どおり src/css/sp/13-news.css が
   単一のソース（Figma実値18px/タグ幅100pxで統一済み）。旧・本ファイル内の
   @media(max-width:480px)（date/title 15px・タグ幅84px）はFigma実値と乖離した
   レガシー値で、sp/側の上書きにより実際には無効化されていたため削除。 */

/* css/sections/14-footer-cta.css */
/* ============================================================
   14-footer-cta : フッターCTA「頂点、空席。」
   Figma node 171:945（実測値ベース）
   背景 #f5efe1 + 金色ブラシテクスチャ（角）+ 2カラム構成
   ============================================================ */

/* --- 背景: Figma背景グループ(171:947)のフラット書き出し1枚 -------
   従来の gradient / mix-blend-color-burn / 2枚重ね(--tl/--br)近似を撤去し、
   Figmaの「クリーム地＋金茶ブラシ（左上ウェッジ・右下の戻り）」を焼いた
   単一画像(footer-cta-bg.webp)に統合。前景テキスト/ボタンはライブ要素のまま。
   cover でセクション高さ変化(コピー量・viewport)に隙間なく追従。
   position は主役の左上ウェッジと右下の戻りが常に見えるよう左上基準。 */
.s-footcta {
  position: relative;
  overflow: hidden;
  background-color: #f5efe1; /* 画像未読込時のフォールバック地色（rgb(245,239,225)） */
  background-image: url("../assets/footer-cta-bg.webp");
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
  padding-block: clamp(48px, 7vw, 84px);
}

/* --- 内側レイアウト（2カラム） ----------------------------- */
/* Figma実値: 見出し left=90px、右カラム left=523px（1280フレーム基準）。
   .inner の padding-inline(40) 前提で、desktopでは見出し列を固定幅にして
   右カラム開始位置を ~523px に合わせる。 */
.s-footcta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

/* --- 左：大見出し「頂点、空席。」 -------------------------- */
.s-footcta__lead {
  flex-shrink: 0;
  font-family: var(--font-jp);
  font-weight: 800;
  /* Figma 170px。SPで大幅縮小 */
  font-size: clamp(72px, 13vw, 170px);
  /* Figma実測: 「頂点、」top=102 / 「空席。」top=292 → 段間190px（170pxに対し約1.117）。
     line-height:1 だと段が詰まり空席が上へ寄るため 1.12 で段間をFigmaへ合わせる。 */
  line-height: 1.12;
}

/* desktop: Figmaの絶対座標(見出し left=90 / 右カラム left=523)を再現。
   .inner の padding-inline(40) を padding-left:90px で上書きし見出し左端を90pxへ。
   見出し列を 433px(=523-90) 固定にして右カラムを 523px から開始する。 */
@media (min-width: 901px) {
  .s-footcta__inner {
    /* .inner の padding-inline(40) を上書きし、Figmaの左90pxガターに合わせる */
    padding-left: 90px;
    gap: 0;
    align-items: flex-start;
  }
  /* 見出し列は Figma実値どおり 433px(=523-90) に固定。
     和文3emの見出しは箱幅を超えるが、超過分（読点・句点＝下段右）は
     overflow:visible で右へはみ出させ、右カラム上段の英字コピーとは
     y位置が離れているため視覚的に衝突しない（Figmaの絶対配置と同挙動）。 */
  .s-footcta__lead {
    width: 433px;
    overflow: visible;
  }
  .s-footcta__lead-red,
  .s-footcta__lead-dark {
    white-space: nowrap;
  }
  .s-footcta__body {
    padding-top: 6px;
  }
}

.s-footcta__lead-red,
.s-footcta__lead-dark {
  display: block;
}

.s-footcta__lead-red { color: var(--color-accent-red); }
.s-footcta__lead-dark { color: var(--color-text); }

/* --- 右：コピー＋ボタン ------------------------------------ */
.s-footcta__body {
  display: grid;
  /* 英字コピーを左に添え、日本語コピーを右に置く配置を近似 */
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: clamp(12px, 1.6vw, 20px);
}

/* SP専用の縦帯テキスト（.s-footcta__en-sp）はPC/tabletでは非表示。
   SP(≤767px)でのみ src/css/sp/14-footer-cta.css で縦書きバンドとして表示する。
   PCは下の .s-footcta__en（3行・横書き）が正。 */
.s-footcta__en-sp {
  display: none;
}

/* 英字コピー（Futura Bold → 太字sans-serifで代替） */
.s-footcta__en {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  font-family: "Futura", "Century Gothic", var(--font-jp);
  font-weight: 700;                       /* Futura Bold（英字アイキャッチ） */
  font-size: clamp(18px, 2.4vw, 32px);
  line-height: 1.26;
  color: var(--color-accent-orange);
  white-space: nowrap;
}

.s-footcta__copy1 {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(24px, 4vw, 54px);
  line-height: 1.2;
  color: var(--color-text);
}

.s-footcta__copy2 {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(26px, 4.6vw, 64px);
  line-height: 1.26;
  color: var(--color-text);
}

/* コピー各節を <span> で括り、節の途中（会お/う。始ま/る。）で
   折り返さないようにする。節と節の境界（読点後）でのみ改行を許す。 */
.s-footcta__nobr {
  white-space: nowrap;
}

/* --- CTAボタン「名乗りを上げる」 --------------------------- */
.s-footcta__btn {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 40px);
  padding: clamp(8px, 1vw, 12px) clamp(20px, 2.5vw, 32px);
  background-color: var(--color-accent-red);
  color: var(--color-white);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.s-footcta__btn:hover {
  background-color: var(--color-accent-orange);
  transform: translateY(-2px);
}

.s-footcta__btn-text {
  font-family: var(--font-display);
  /* 旧Figma 74px（7字「名乗りを上げる」基準）。12字「まずは応募要項を受け取る」への
     文言変更（2026-07-09）に伴い、ボタン全幅がFigmaの約676pxに収まるサイズへ縮小 */
  font-size: clamp(22px, 3.2vw, 44px);
  line-height: 1;
  white-space: nowrap;
}

.s-footcta__btn-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: clamp(24px, 3vw, 54px);
  height: auto;
}

.s-footcta__btn-arrow svg {
  width: 100%;
  height: auto;
}

/* --- レスポンシブ ------------------------------------------- */
/* タブレット以下：縦積み（左見出し→右コピー） */
@media (max-width: 900px) {
  .s-footcta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(24px, 4vw, 40px);
  }

  .s-footcta__body {
    width: 100%;
  }
}

/* tablet(601–900)の body 2カラム→1カラム化は従来どおり維持（この @media が正）。
   phone tier(≤767px)のフォント縮小・CTA全幅化・タップ領域拡大は
   src/css/sp/14-footer-cta.css で上書きする（build連結で最後・カスケードで勝つ）。
   ≤600 も下記ブロックと sp/ の両方が当たるが sp/ が後勝ちで最終描画を担う。
   768px ちょうど（tablet端）は sp/(≤767) が当たらないため従来描画で不変。 */
@media (max-width: 600px) {
  /* 英字コピーと日本語コピーを縦積みに */
  .s-footcta__body {
    grid-template-columns: 1fr;
  }

  .s-footcta__en   { grid-column: 1; grid-row: 1; }
  .s-footcta__copy1 { grid-column: 1; grid-row: 2; }
  .s-footcta__copy2 { grid-column: 1; grid-row: 3; }
  .s-footcta__btn   { grid-column: 1; grid-row: 4; }
}

/* --- desktop(≥901px) Figma実値ピン ---------------------------- */
/* clampのvw項は1280幅でも上限に届かず（例: btn-textは5vw=64pxで74px上限未満）、
   文字・ボタン・矢印がFigmaより小さくなる。ここで実測値へ固定する。
   ファイル末尾に置くのは、上のbase宣言（同一詳細度）へ確実に後勝ちさせるため。 */
@media (min-width: 901px) {
  /* Figma実測: 上余白 red top=102 / 下余白 btn bottom461→section562=101。約100pxで固定。 */
  .s-footcta { padding-block: 100px; }

  /* 見出しもclamp(72px,13vw,170px)だと1280pxで13vw=166.4pxに留まりFigmaの170pxへ
     届かない（他要素と同じ「clampがvw項で頭打ちにならない」不具合）ため固定する。 */
  .s-footcta__lead  { font-size: 170px; }
  .s-footcta__en    { font-size: 32px; }   /* Futura Bold 32 */
  .s-footcta__copy1 { font-size: 54px; }   /* 2027年3月… 54 */
  .s-footcta__copy2 { font-size: 64px; }   /* そう、…始まる。 64 */

  /* 右カラムの縦リズムをFigma実値へ。row-gapが大きいと各段が下へ累積し
     ボタン頂点がずれる。Figma実測（get_design_context再確認済み）:
     copy1 top=100 / copy2 top=240 / btn top=331（すべてsection top基準）。
     row1高さ=copy1 box高さ130（240-100-130=10）、row2高さ=copy2 box高さ81
     （331-240-81=10）と、どちらもgap=10で正確に一致するため row-gap:10px に修正
     （旧6pxはFigma実値では検証されておらず4px過小だった）。
     column-gapもFigma実値へ固定: en box(x523,w145)右端668、copy1 left680で
     実測gap=12px（base側のclamp(16px,2vw,32px)は1280pxで25.6pxとなり過大なため
     ここで上書き）。 */
  .s-footcta__body {
    column-gap: 12px;
    row-gap: 10px;
    padding-top: 0;
  }

  .s-footcta__btn {
    /* Figma: padding 12px 32px / gap 40px / bbox 675×130 */
    gap: 40px;
    padding: 12px 32px;
  }
  /* 旧Figma 74px（7字基準）→ 12字文言変更に伴い44pxへ（ボタン高さはpaddingで担保） */
  .s-footcta__btn-text  { font-size: 44px; line-height: normal; }
  .s-footcta__btn-arrow { width: 40px; }  /* 文字縮小に合わせ矢印も縮小（旧53.9px） */
}

/* css/sections/15-footer.css */
/* ============================================================
   15-footer : フッター（運営情報＋サイトマップ）
   Figma node 171:962（実測値ベース）
   dark地 #1f1f1f / px-90 py-32
   ============================================================ */

.s-footer {
  background-color: var(--color-dark);
  color: var(--color-white);
  padding-block: 32px;
  /* 最下部固定のマーキーバー（.s-countdown 約41px）に©表記が隠れないよう
     下だけ余白を追加（2026-07-09）。背景が暗色のため見た目の継ぎ目は出ない */
  padding-bottom: 80px;
}

.s-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(32px, 6vw, 80px);
}

/* Figma: フッターは px-90。.inner(padding40) を desktop で 90px に上書き。
   1180px以下では .inner の clamp ガター(20-40)に戻しSPで詰まらないように。 */
@media (min-width: 1181px) {
  .s-footer__inner {
    padding-inline: 90px;
  }
}

/* --- 左：運営情報 ------------------------------------------ */
.s-footer__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* 情報側は自然幅、サイトマップを右へ押し出す */
  flex: 1 1 auto;
  min-width: 0;
}

/* ロゴ＋運営事務局 */
.s-footer__brand {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.s-footer__logo {
  display: block;
  flex-shrink: 0;
}

.s-footer__logo img {
  width: 127px;
  height: 60px;
  object-fit: contain;
}

.s-footer__office {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-jp);
  font-weight: 600; /* Figma: Hiragino W6 */
  font-size: 14px;
  line-height: 1.5;
}

.s-footer__office a {
  transition: opacity 0.2s ease;
}
.s-footer__office a:hover { opacity: 0.7; }

/* 区切り線（Figma: 白1pxライン） */
.s-footer__hr {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

/* 主催・運営 */
.s-footer__org {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.s-footer__org-line {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-jp);
  font-weight: 600; /* Figma実測: Hiragino W6（get_design_context再確認、旧実装は誤って--font-weight-body=500だった） */
  font-size: 14px;
  line-height: 1.5;
}

.s-footer__powered {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  font-family: var(--font-jp);
  font-weight: 600; /* Figma実測: Hiragino W6（同上） */
  font-size: 12px;
  line-height: 1.5;
}

.s-footer__egf {
  /* 3段テキスト版（ヘッダーと統一・2026-07-15）。アスペクト比維持のため高さ基準 */
  width: auto;
  height: 34px;
  object-fit: contain;
}

.s-footer__copy {
  font-family: var(--font-jp);
  font-weight: 600; /* Figma実測: Hiragino W6（同上） */
  font-size: 12px;
  line-height: 1.5;
}

/* --- 右：サイトマップ -------------------------------------- */
.s-footer__sitemap {
  display: flex;
  gap: clamp(24px, 4vw, 40px);
  flex-shrink: 0;
  /* Figma: 左端に縦の区切り線 */
  padding-left: clamp(24px, 4vw, 40px);
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.s-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-jp);
  font-weight: 600; /* Figma: Hiragino W6 */
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
}

.s-footer__nav a {
  transition: color 0.2s ease;
}

.s-footer__nav a:hover {
  color: var(--color-accent-orange);
}

/* 募集要項（PDF）: フッターの近日公開表示（2026-07-10）。
   PDF設置後は <span class="s-footer__soon"> を <a href="download/募集要項.pdf" target="_blank"> に置換。 */
.s-footer__soon {
  color: rgba(255, 255, 255, 0.45);
  cursor: default;
}

/* --- レスポンシブ ------------------------------------------- */
/* tablet(768–1279)の挙動は従来どおり維持（この @media が正）。
   phone tier(≤767px)の詰め・サイトマップ1カラム化・タップ領域拡大は
   src/css/sp/15-footer.css で上書きする（build連結で最後・カスケードで勝つ）。
   ≤767 は下記 768ブロックと sp/ の両方が当たるが、sp/ が後勝ちで最終描画を担う。
   768px ちょうど（tablet端）は sp/(≤767) が当たらないため従来描画で不変。 */
@media (max-width: 768px) {
  .s-footer__inner {
    flex-direction: column;
    gap: 32px;
  }

  /* サイトマップは上部に縦線を持つ横並びへ */
  .s-footer__sitemap {
    width: 100%;
    padding-left: 0;
    padding-top: 24px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    gap: clamp(24px, 8vw, 60px);
  }
}

@media (max-width: 480px) {
  .s-footer__brand {
    gap: 20px;
  }

  .s-footer__nav {
    white-space: normal;
  }
}

/* css/sections/90-news-page.css */
/* ==========================================================================
   90-news-page — NEWS 記事詳細ページ（news.html 専用）
   デザインの正: design-refs/form-news.png / design-data/form-news.figma.md
   Figma node 205:1627（FORM0624 news variant）
   クラス接頭辞 .p-news（LPセクションの .s-* とは別名前空間）
   ※ index.html には出力されないが style.css には常に結合される。
     .p-news-page（body）配下のみに効くよう根本要素はページ限定にしている。
   ========================================================================== */

/* ページ背景: クリーム #f7f3ea ＋ 単一の背景画像 news-bg.webp。
   Figma(205:1627)のクリーム地＋テクスチャ3枚(gareth-david color-burn)を
   1枚のフラット画像に焼き込み済み（design-assets/form-news/flatten_bg_single.py）。
   `top center / 100% auto no-repeat` で上寄せに敷き、画像より下に伸びた
   可変高の領域はフォールバック地色 #f7f3ea で自然に continue させる。
   → 画面幅ごとに位置を動かす必要がなく、どの高さでも破綻しない。
   （旧: mix-blend-mode:color-burn の3枚imgはブラウザ差でグレー化するため撤去） */
.p-news-page {
  background-color: #f7f3ea;
  background-image: url("../assets/news-bg.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

.p-news {
  position: relative;
  /* 固定ヘッダー(70px)の下から開始。Figma: main top70 + py100 */
  padding-block: clamp(48px, 8vw, 100px);
  padding-top: calc(70px + clamp(48px, 8vw, 100px));
}

/* --- 記事エリアの中央寄せコンテナ ------------------------------------- */
.p-news__container {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
  align-items: center;
}

/* --- 見出し（NEWS / 最新情報） ----------------------------------------- */
.p-news__head {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 24px);
  align-items: center;
  text-align: center;
}

.p-news__en {
  font-family: var(--font-display);
  /* Figma 100px */
  font-size: clamp(56px, 11vw, 100px);
  line-height: 1;
  color: var(--color-accent-red);
  letter-spacing: 0.01em;
}

.p-news__ja {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.2;
  color: var(--color-text);
}

/* --- 記事本文カード ----------------------------------------------------
   Figma node 205:1843: カード幅1100px（見出し行にハグ）、本文テキストw820を
   items-center で中央寄せ＝カード内側左右に約140pxの余白。参照 form-news.png も
   カードの左右にゆとりがある見え方。コンテナ左右padding(40px)を負マージンで
   打ち消してカードを1100px幅に戻し、内側padピクセルを140pxまで広げて本文の
   左右余白を design-refs に一致させる（従来はpad最大90px＝余白が狭かった）。 */
.p-news__card {
  /* コンテナ左右padding(clamp 20–40px)を左右対称の負マージンで打ち消し、
     Figma実値のカード幅1100px（コンテナinner1020 + padding両側）へ戻す。
     負マージンが左右同値なのでカードは中央のまま左右均等に張り出す。
     狭い画面では負マージン量も縮み、自然に全幅へ収束する。 */
  width: calc(100% + (clamp(20px, 4vw, 40px) * 2));
  margin-inline: calc(clamp(20px, 4vw, 40px) * -1);
  background-color: var(--color-white);
  border: 3px solid var(--color-accent-red);
  border-radius: 20px;
  padding-block: clamp(40px, 6vw, 80px);
  /* 本文820px＋左右余白約140px≒カード1100px。従来はpad最大90pxで余白が狭かった。 */
  padding-inline: clamp(24px, 11vw, 140px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 60px);
  align-items: center;
}

/* 記事ヘッダー: RELEASEバッジ + タイトル2行 + 日付 */
.p-news__article-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* RELEASE バッジ（ピル） */
.p-news__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 30px;
  background-color: var(--color-accent-red);
  color: var(--color-white);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}

.p-news__title {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.5;
  color: var(--color-text);
}

.p-news__date {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-accent-red);
}

/* 縦区切り線（Figma: 高さ60px の縦線） */
.p-news__divider {
  display: block;
  width: 1px;
  height: 60px;
  background-color: var(--color-text);
}

/* --- 本文 -------------------------------------------------------------- */
.p-news__body {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
  width: 100%;
  /* Figma: 本文幅 w820（カード内側で中央寄せ） */
  max-width: 820px;
}

.p-news__block {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.p-news__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* H2見出し: 朱・20px */
.p-news__h2 {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: 20px;
  line-height: 2;
  color: var(--color-accent-red);
}

/* H3見出し: 濃・16px */
.p-news__h3 {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
}

/* 本文段落: 16px・leading2 */
.p-news__p {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
}

/* --- RECOMMEND（全幅・白地） ------------------------------------------- */
.p-news__recommend {
  position: relative;
  z-index: 1;
  background-color: var(--color-white);
  /* Figma: px90 py100（左右は inner 相当で吸収） */
  padding-block: clamp(56px, 8vw, 100px);
  margin-top: clamp(48px, 6vw, 80px);
}

.p-news__recommend-inner {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 40px);
}

.p-news__recommend-title {
  font-family: var(--font-jp);
  font-weight: 800;
  /* Figma 48px・黄オレンジ #f4a632 */
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.2;
  color: var(--color-accent-orange);
  text-align: center;
}

/* 関連記事リスト（13-news と同一構造） */
.p-news__recommend-list {
  border-top: 1px solid var(--color-text);
}

.p-news__rec-item {
  border-bottom: 1px solid var(--color-text);
}

.p-news__rec-link {
  display: grid;
  grid-template-columns: 120px 100px 1fr 16px;
  align-items: center;
  gap: 16px;
  padding-block: 20px;
  color: var(--color-text);
  transition: opacity 0.2s ease;
}

.p-news__rec-link:hover {
  opacity: 0.6;
}

.p-news__rec-date {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
}

/* RECOMMEND内のバッジは幅固定でグリッド列に収める */
.p-news__rec-tag {
  width: 100px;
  padding-inline: 8px;
}

.p-news__rec-ttl {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
}

.p-news__rec-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-accent-red);
}

/* --- レスポンシブ（tablet 768–1279px 相当のエッジのみ） -----------------
   phone tier(≤767px)の上書きは SP.md 規約に従い src/css/sp/90-news-page.css へ分離。
   ここでは tablet 幅で RECOMMEND 行が破綻しないための最小リフローだけを残す。 */
@media (max-width: 768px) {
  .p-news__rec-link {
    grid-template-columns: auto auto 1fr 16px;
    grid-template-areas:
      "date tag  .     arrow"
      "ttl  ttl  ttl   ttl";
    row-gap: 10px;
  }
  .p-news__rec-date { grid-area: date; }
  .p-news__rec-tag  { grid-area: tag; }
  .p-news__rec-arrow { grid-area: arrow; align-self: start; }
  .p-news__rec-ttl  { grid-area: ttl; }
}

/* css/sections/91-thanks-page.css */
/* ==========================================================================
   91-thanks-page.css — THANK YOU（キープエントリー送信完了ページ）
   LPトーンに合わせる: ベージュ地 #f7f3ea ＋ 金茶ブラシ ＋ Dela見出し(朱/橙)。
   .p-thanks-page（body）＋ .p-thanks（main）配下のみに適用。
   ========================================================================== */

.p-thanks {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 317px);   /* フッター(≒317px)を除いた高さで縦中央寄せ */
  padding: calc(70px + clamp(48px, 10vh, 120px)) clamp(20px, 6vw, 40px) clamp(48px, 10vh, 120px);
  background-color: #f7f3ea;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 背景の金茶ブラシ（heroと同じ焼き込み素材・multiply。淡く隅に効かせる） */
.p-thanks__bg {
  position: absolute;
  inset: 0;
  background-image: url("../assets/hero-texture-gold.webp");
  background-position: center 30%;
  background-size: 150% auto;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}

.p-thanks__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.4vw, 24px);
  animation: p-thanks-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes p-thanks-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .p-thanks__inner { animation: none; }
}

/* 特大 THANK YOU（2行・朱橙）。Dela Gothic One */
.p-thanks__en {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: clamp(56px, 12vw, 148px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--color-accent-red);       /* 朱 #F45D11 */
  margin-bottom: clamp(8px, 1.5vw, 16px);
}

/* 見出し「キープエントリーを受け付けました。」W8 */
.p-thanks__title {
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(20px, 3.2vw, 36px);
  line-height: 1.4;
  color: var(--color-text);
}

/* リード W6 */
.p-thanks__lead {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: clamp(14px, 1.7vw, 18px);
  line-height: 2;
  color: var(--color-text-sub);
}

.p-thanks__note {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: clamp(12px, 1.4vw, 14px);
  line-height: 1.8;
  color: #8a8785;
}

/* トップへ戻る CTA（橙・Dela） */
.p-thanks__btn {
  margin-top: clamp(12px, 2vw, 24px);
  display: inline-flex;
  align-items: center;
  padding: clamp(12px, 1.4vw, 16px) clamp(28px, 3.4vw, 48px);
  background-color: var(--color-accent-orange);
  color: var(--color-white);
  border-radius: 0; /* TOPのCTA（挑む/名乗りを上げる）と統一。Figma:角丸なし（直角） */
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.p-thanks__btn:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}

.p-thanks__btn:active {
  transform: translateY(0);
}

.p-thanks__btn-text {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.8vw, 20px);
  letter-spacing: 0.04em;
}

/* ページ側：フッターを最下部へ押し下げる（コンテンツが短くても足元が締まる） */
.p-thanks-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.p-thanks-page .s-footer {
  margin-top: auto;
}

/* ==========================================================================
   プライバシーポリシー（privacy.html）。2026-07-10 追加。
   thanks ページと同じベージュ地＋金茶ブラシのトーンを流用した読み物レイアウト。
   ========================================================================== */
.p-legal-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.p-legal-page .s-footer {
  margin-top: auto;
}

.p-legal {
  position: relative;
  padding: calc(70px + clamp(48px, 8vw, 96px)) 24px clamp(64px, 9vw, 120px);
  background-color: #f7f3ea;
  overflow: hidden;
}

.p-legal__bg {
  position: absolute;
  inset: 0;
  background-image: url("../assets/hero-texture-gold.webp");
  background-position: center top;
  background-size: 150% auto;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.35;
  pointer-events: none;
}

.p-legal__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
}

.p-legal__en {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1;
  color: var(--color-accent-red);
  letter-spacing: 0.02em;
}

.p-legal__title {
  margin-top: clamp(6px, 1vw, 12px);
  font-family: var(--font-jp);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.4;
  color: var(--color-text);
}

.p-legal__intro {
  margin-top: clamp(20px, 3vw, 32px);
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 2;
  color: var(--color-text-sub);
}

.p-legal__section {
  margin-top: clamp(28px, 4vw, 44px);
}

.p-legal__h2 {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
  color: var(--color-text);
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(31, 31, 31, 0.12);
  margin-bottom: 14px;
}

.p-legal__section p {
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 2;
  color: var(--color-text-sub);
}
.p-legal__section p + p {
  margin-top: 10px;
}

.p-legal__list {
  margin: 10px 0 0;
  padding-left: 1.4em;
  list-style: disc;
  font-family: var(--font-jp);
  font-weight: var(--font-weight-body);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.9;
  color: var(--color-text-sub);
}
.p-legal__list li {
  margin-top: 4px;
}

.p-legal__note {
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.6);
  border-left: 3px solid var(--color-accent-orange);
  font-size: clamp(13px, 1.5vw, 15px) !important;
  line-height: 1.9 !important;
  color: #6b6b6b !important;
}

.p-legal a {
  color: var(--color-accent-red);
  text-decoration: underline;
}

.p-legal__date {
  margin-top: clamp(32px, 5vw, 56px);
  font-family: var(--font-jp);
  font-size: 14px;
  color: #8a8785;
}

.p-legal__btn {
  margin-top: clamp(20px, 3vw, 32px);
  display: inline-flex;
  align-items: center;
  padding: clamp(12px, 1.4vw, 16px) clamp(28px, 3.4vw, 48px);
  background-color: var(--color-accent-orange);
  color: var(--color-white);
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.p-legal__btn:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}
.p-legal__btn-text {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.8vw, 20px);
  letter-spacing: 0.04em;
}

/* sp/00-header.css */
/* ==========================================================================
   sp/00-header — 固定ヘッダー（phone tier ≤767px）
   ---------------------------------------------------------------------------
   セクション: 00-header（固定ナビ：ロゴ＋ハンバーガー＋ドロワー）
   SP実データ（Figma v2 SPフレーム node 284:5358 / fileKey YPTo3Fa97PQ5CTvpY6NxfW）:
     - バー高さ 54px（内側コンテンツ left28/top13/w320、justify-between）
     - ロゴクラスタ（Frame366, gap16px）: メインロゴ60×28 + 区切り線(白1px×26px) + EGFロゴ55×25
     - ハンバーガー 30×18
   ※タップ領域は44px以上を確保（見た目の線は細いまま、::after で当たり判定を拡張）。
   ========================================================================== */

@media (max-width: 767px) {
  /* --- 背景：Figma実値 #1E1E1E（PCの#1F1F1Fとは1階調だけ異なる別値。
     get_design_context実測で確認済み。他セクションのSP実装（例: 03-prizes）でも
     同じ#1E1E1Eが暗背景の実値として確認されており、SP側の意図的な値と判断） --- */
  .s-header {
    background-color: #1e1e1e;
  }

  /* --- ヘッダーバー内側：Figma実値54px・左右余白は実測28px/27pxの左右対称値 ---- */
  /* get_metadata実測: inner x=28,w=320（frame幅375）→左28px・右27px。
     07-warmup.css で確認済みの同型実値(27.5px固定)に合わせ、対称値として採用。
     旧clamp(16px,5vw,24px)は375px基準で18.75pxにしかならず実値と乖離していたため修正。 */
  .s-header__inner {
    height: 54px;
    padding-inline: 27.5px;
  }

  /* ドロワーはヘッダー直下(54px)から下端まで。スクリムも同位置に合わせる */
  .s-header__nav {
    inset: 54px 0 0 auto;
    width: min(320px, 86vw);
  }
  .s-header.is-open::before {
    inset: 54px 0 0 0;
  }

  /* --- ロゴクラスタ：メインロゴ＋区切り線＋EGFロゴ（Figma実値） ----- */
  .s-header__brand {
    gap: 16px;                          /* Figma Frame366 gap-16 */
  }

  /* --- ロゴ：Figma実値60×28 --------------------------------------- */
  .s-header__logo img {
    width: 60px;
    height: 28px;
  }

  /* --- 区切り線：白1px×26px（Figma Vector38） ----------------------- */
  .s-header__divider {
    display: block;
    flex-shrink: 0;
    width: 1px;
    height: 26px;
    background-color: var(--color-white);
  }

  /* --- EGFロゴ（3段テキスト版・2026-07-15）。アスペクト比を保つため高さ基準 --- */
  .s-header__egf {
    display: block;
    flex-shrink: 0;
    width: auto;
    height: 22px;
  }

  /* --- ハンバーガー：Figma実値30×18。当たり判定は44px以上に拡張 ----- */
  /* 高さは20pxに設定（Figma実測の“インク実寸”に合わせる）。
     get_metadata: Frame192(30×18)内の3本線はy=0/9/18 に配置＝中心間9px、
     各線は太さ2pxでinset -5.56%(±1px)ぶん枠外へはみ出す→実際の描画範囲は
     y=-1〜19の20px。flexのspace-betweenで3本(各2px)を20pxに並べると
     中心が1/10/19px＝ちょうど9px間隔となりFigmaの線間隔と一致する。
     （旧18pxでは中心1/9/17＝8px間隔で1pxずつ詰まって見えていた不整合を修正） */
  .s-header__toggle {
    width: 30px;
    height: 20px;
  }
  /* バー太さ：Figma実値2px（PCの3pxから縮小）。
     get_design_context実測: Frame192のinset(-5.56%) × 高さ18px = 1px overflow
     → stroke中心配置なのでバー太さ = 1px×2 = 2px（PC側は-6.25%×24px=1.5px→3px と対応、比率も一致）。
     旧実装はbase側の3pxをそのまま継承しておりFigma実値と不一致だったため上書き。
     端部はFigmaのstroke(バットキャップ＝角)を再現するためborder-radius:0で角に戻す
     （base側は1px丸め。2px線では丸めると端が半円になり見た目が異なるため上書き）。 */
  .s-header__toggle-bar {
    height: 2px;
    border-radius: 0;
  }
  /* 透明な擬似要素で上下左右へタップ領域を広げる（44×44以上を確保） */
  .s-header__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
  }
  /* ×変形量：上下バーを箱の縦中心(20px→中心10px)へ寄せる。
     上バー中心1px→+9px、下バー中心19px→-9px で交差（高さ20pxに合わせ再計算） */
  .s-header.is-open .s-header__toggle-bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .s-header.is-open .s-header__toggle-bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* --- ドロワーナビ：リンクのタップ高44px以上・本文16px ------------- */
  .s-header__nav-list {
    padding: 20px clamp(20px, 6vw, 28px) 40px;
  }
  .s-header__nav-list a {
    padding: 15px 4px;                   /* 15+15+lh ≒ 46px でタップ領域十分 */
    font-size: 16px;
    line-height: 1.4;
  }
  /* CTA（キープエントリー）は塗りボタン。タップ高を確保しつつ視認性UP */
  .s-header__nav-cta {
    margin-top: 20px;
    padding: 16px;
    font-size: 16px;
  }
}

/* sp/01-hero.css */
/* ==========================================================================
   sp/01-hero — Hero（phone tier ≤767px）
   ---------------------------------------------------------------------------
   SP実データ（Figma v2 SPフレーム / fileKey YPTo3Fa97PQ5CTvpY6NxfW）
     本文フレーム 303:553（Frame 379, x=28 / w=320 / 内側は中央寄せ構成）:
       - 見出し(284:5446)         : 全幅・左寄せ・32px（1行「愛媛の、頂点を獲れ。」=320px）
       - ロゴタイプ(303:412)       : w=232 / 中央寄せ（frame内 x=44 左右余白44px）/ 縦長専用SVG
       - ENTRY(284:5497)          : Dela Gothic One / ENTRY START 14px + 2026.July 20px /
                                     #5c5b5b / 中央寄せ（frame x=95.5）/ 2行は密着（leading-normal）
       - CTA(284:5588)            : bg#f45d11 / 白 / Dela 18px「まずは応募要項を受け取る」/
                                     gap16 px16 py8 / Union矢印15.4×14 / 中央寄せ（frame x=19.8, w=280.4）
     縦リズム: 見出し→ロゴ16 / ロゴ→ENTRY16 / ENTRY→CTA8（Frameのy実測）
   背景: assets/hero-bg-sp.webp（750×1472, Figma 284:5441=写真をbeige#f7f3eaへcolor-burn
     焼込→フラット化。Rectangle397は矩形フルマスクのため写真テクスチャが全面に出る）。
     get_screenshot(284:5441)は写真がwhite上color-burnで白飛びして見えるだけで、実合成の
     正は design-refs/sp/01-hero.png。現webpはその金ブラシのトーン/分布と一致のため据え置き。
   ========================================================================== */

@media (max-width: 767px) {
  /* --- ヘッダー高さ：SP実ヘッダー54px（PC70pxを上書き） --- */
  .s-hero {
    padding-top: 54px;
  }

  /* --- 背景：SP専用の縦長背景（金ブラシ×beige color-burn） --- */
  .s-hero__bg {
    top: 54px;
    /* 金茶の温かみを保ちつつ、ごく薄いクリームウォッシュ(0.12)で「少し濃い」を軽減。
       0.34は薄すぎ(金茶が飛んだ)ため撤回し、Figmaの金茶トーンに寄せた微調整に留める。 */
    background-image:
      linear-gradient(rgba(247, 243, 234, 0.12), rgba(247, 243, 234, 0.12)),
      url("../assets/hero-bg-sp.webp");
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
  }

  /* --- inner：縦1カラム・全体中央寄せ。左右padはFigma本文フレームのx=28 ---
     子は .s-hero__main と .s-hero__cta（.s-hero__vtextはdisplay:noneでflow外）。
     ENTRY→CTAの8pxはこのgapで担う。 */
  .s-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-inline: 28px;
    padding-top: 50px;                    /* header下(54px)→見出し上端でFigma y=104に一致 */
    padding-bottom: 36px;
    min-height: 0;
  }

  /* --- main：見出し/ロゴ/ENTRYの縦積み。中央寄せ・列間16px --- */
  .s-hero__main {
    width: 100%;
    align-items: center;
    gap: 16px;                            /* 見出し→ロゴ16 / ロゴ→ENTRY16 */
    max-width: none;
  }

  /* --- ① 見出し：32px・左寄せ・1行（全幅にstretchして左端固定） --- */
  .s-hero__title {
    align-self: stretch;
    text-align: left;
    /* Figma実測: 見出し「愛媛の、頂点を獲れ。」=10字が本文フレーム320px幅=32pxに一致。
       左右pad28pxを差引いた実利用幅に10字を丁度収める式（上限32px＝Figma実値）。
       375pxで≈31.7px（32px相当）、狭幅でも1行を維持し横溢れさせない。 */
    font-size: min(calc((100vw - 58px) / 10), 32px);
    white-space: nowrap;
    line-height: 1.2;                     /* Figma box38/32≈1.19 */
    letter-spacing: 0;
  }

  /* --- ② ロゴタイプ：Figma実寸232px・中央寄せ（PCの100%/720pxを上書き） --- */
  .s-hero__logotype {
    width: 232px;
    max-width: 100%;
  }

  /* --- ③ ENTRY START / 2026.July：Figma実値・2行密着（margin撤去） ---
     ブロック自体はmainのalign-items:centerで中央寄せ、行内は左寄せ（Figma items-start）。 */
  .s-hero__entry-label {
    font-size: 14px;
  }
  .s-hero__entry-date {
    font-size: 20px;
    margin-top: 0;                        /* Figmaは2026.Julyが直後に密着（leading-normalが行間を担う） */
  }

  /* --- ⑤ CTA：文言差し替え＋中央寄せ（innerのalign-items:centerで中央）---
     幅はcontent実寸=280.4px（text217+gap16+arrow15.4+px16×2）でshrink-to-fit。
     sections@768のmargin-topは撤去し、innerのgap(8px)でENTRY→CTAを担う。 */
  .s-hero__cta-label--pc {
    display: none;
  }
  .s-hero__cta-label--sp {
    display: inline;
  }
  .s-hero__cta {
    position: static;
    margin-top: 0;
    font-size: 18px;                      /* Figma実値18px */
    gap: 16px;                            /* Figma gap-16 */
    padding: 8px 16px;                    /* Figma py8 px16 */
  }
  .s-hero__cta-arrow {
    width: 15.4px;                        /* Figma Union実値15.4×14 */
    height: 14px;
  }
}

/* sp/02-countdown.css */
/* ==========================================================================
   sp/02-countdown — 応募締切マーキーバー（phone tier ≤767px）
   ---------------------------------------------------------------------------
   2026-07-09 仕様変更: 旧SP専用の静的締切表示（.s-countdown__static）は廃止し、
   PC/SP共通のマーキー（css/sections/02-countdown.css）に統一。
   本体サイズは clamp で自動縮小されるため、SPでは余白と速度のみ微調整する。
   ========================================================================== */

@media (max-width: 767px) {
  .s-countdown__group {
    padding-block: 7px;
    gap: 12px;
    padding-right: 12px;
  }

  /* SPは1ループの実寸が短くなるぶん、体感速度（px/s）を合わせるため周期を調整 */
  .s-countdown__track {
    animation-duration: 56s;
  }
}

/* sp/03-prizes.css */
/* ==========================================================================
   sp/03-prizes.css — PRIZES セクションの phone tier(≤767px) 専用上書き
   --------------------------------------------------------------------------
   SP実データ（get_metadata/get_design_context再検証済み。Figma node 303:556 /
   fileKey YPTo3Fa97PQ5CTvpY6NxfW）:
   - 縦書きコピー「この舞台で、手に入るもの。」はSPでも横書き化せず縦書きのまま、
     PRIZES見出しに重ねる（PC同様のグリッド重ね配置。writing-mode:vertical-rlを維持）。
     Figma実測: PRIZES 70px・mt60.36px / 縦書き列 32px・左オフセット134px・列間gap24px。
   - PRIZES見出し色は、Figma公式スクリーンショットの直接RGBサンプリング実測値 #040404
     （背景 #1e1e1e に対しほぼ同化するウォーターマーク演出。get_design_context上の
     報告値#1f1f1fはそのままでは完全不可視になるため採用しない）。
   - 賞金額40px・MENTORING/伴走支援32px・スラッシュ30px・ラベル18px・本文16px・リード18px
     はいずれもFigma固定値（375px基準）。狭幅端末向けにclampで下限を確保しつつ実値に寄せる。
   - リード文はFigma上<br>による明示3行構成（.s-prizes__lead-breakで表示切替）。
   - MENTORING見出しはFigma上「MENTORING /」と「伴走支援」の縦積み2行構成（row-gap:0）。
   - 斜め帯の絶対配置レイアウトを解除し、賞金→メンタリングを縦積み（1カラム）。
     カード間ギャップ80px・見出し→カード間100pxは、各カード自身のpy-40が
     隣接ブロックと合算される構造を反映（詳細は各ルール直上のコメント参照）。
   実データ納品後の差し替えは【このファイルの中身だけ】（swap手順=SP.md）。
   ========================================================================== */

@media (max-width: 767px) {
  /* --- セクション余白 --- */
  /* pt-80pxはFigma実値(284:5598)。pb-60pxは誤り: この60pxはFrame305(見出しブロック)
     自身のpb-60であり、セクション全体の末尾ではない。セクション末尾の余白は
     メンタリングカード自身のpy-40（band-innerのpadding-block）で既に賄われており、
     ここでさらにpb-60を足すと二重に空くため0にする。 */
  .s-prizes {
    padding-top: 80px;
    padding-bottom: 0;
  }

  /* Figma実値: display→lead間 gap-40px（get_metadata確認） */
  .s-prizes__head {
    gap: 40px;
  }

  /* --- 特大見出し PRIZES ＋ 縦書きコピー：Figma実値に基づく重ね配置 --- */
  /* PRIZES(70px)と縦書き列(32px)は同一グリッドセルに重なる（PC同様の設計をSPでも維持）。
     .s-prizes__display は position:relative の重ね配置コンテナ（section CSS側で定義済み）。
     min-heightは縦書き列（最長7字×32px×lh1.1≒246px @375）の高さを確保し、直下のリード文と
     被らないようにする。 */
  .s-prizes__display {
    width: 100%;
    min-height: clamp(11.25rem, 65.6vw, 15.375rem); /* 180px〜246px @375 */
  }

  /* PRIZES: Figma実値70px @375（18.7vw）。
     色はFigma公式スクリーンショットの直接RGBサンプリング実測値 #040404
     （背景#1e1e1e(30,30,30)に対し文字部分は一貫して(4,4,4)。PCの#040404と同一値）。 */
  .s-prizes__title {
    font-size: clamp(2.75rem, 18.7vw, 4.375rem); /* 44px〜70px */
    max-width: 100%;
    color: #040404;
    margin-top: clamp(1.75rem, 16.1vw, 3.75rem); /* Figma mt-60.36px @375（16.1vw） */
  }

  /* 縦書きコピーはSPでも横書き化せず維持（section CSS の position:absolute /
     writing-mode:vertical-rl / flex-direction:row-reverse を継承）。
     位置・サイズのみ375px基準の実値へ再調整する。 */
  .s-prizes__vertical {
    left: clamp(5.625rem, 35.7vw, 8.375rem); /* Figma ml-134px @375（35.7vw） */
    top: 0;
    gap: clamp(1rem, 6.4vw, 1.5rem); /* Figma gap-24px @375（6.4vw） */
    font-size: clamp(1.375rem, 8.53vw, 2rem); /* 22px〜32px。Figma実値32px */
    line-height: 1.1;
  }

  /* --- リード文：Figma実値18px。全幅・中央、折返し許可 --- */
  /* Figma実データ(284:5604)は3文をそれぞれ<br>で強制改行した3行構成（自然折返しでは
     文の途中で改行される可能性がありFigmaの意図と一致しないため、HTML側に用意した
     .s-prizes__lead-break を表示してこの3行構成を再現する）。 */
  .s-prizes__lead {
    font-size: 1.125rem; /* 18px（Figma実値） */
    line-height: 1.9;
    max-width: 100%;
    padding-inline: 4px;
    white-space: normal; /* PC(nowrap)を上書き。SPは折返し許可（<br>で明示改行） */
  }
  .s-prizes__lead-break {
    display: inline;
  }

  /* --- 帯背景：PCの「1本の連続対角線グラデ」(linear-gradient to bottom right)は
         SP実データと不一致。Figma(get_screenshot/SVG実測)では、賞金カード(Vector34,
         284:5607)とメンタリングカード(Vector35, 284:5650)が【それぞれ独立して】
         「領域の上辺に沿った繊細な白グロー」を持つ（白0.2・offset dy40・blur40の
         インナーシャドウ相当。連続する斜め線ではない）。band.png のブライトネス実測でも
         各カード上辺で白≒0.17、左右対称(=水平グロー)、約90-100pxで消失を確認。
         よってここでPCのband対角グラデを無効化(flat dark)し、グローは各カードの
         ::before で上辺に個別付与する。--- */
  /* Figma実測: head(Frame305)末尾からband(Group137)まで60px @375。 */
  .s-prizes__band {
    margin-top: clamp(48px, 16vw, 60px);
    background-image: none;          /* PCの対角線グラデ(白すぎるグロー)を打ち消す */
    background-color: var(--color-dark);
  }
  /* Figma実測: 賞金領域(276px)とメンタリング領域(344px)は隙間なく密着し、各領域自身の
     py-40 が上下余白を作る。カード間の見た目80px = (賞金pb40 + メンタリングpt40)。
     よって band-inner は gap:0・padding:0 とし、余白は各カードの padding-block に一元化。 */
  .s-prizes__band-inner {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-block: 0;
  }

  /* --- カード：絶対配置解除・全幅・左寄せ・上辺グロー個別付与 --- */
  .s-prizes__card {
    position: relative;              /* ::before グローの基準。left/top はモディファイアでauto化 */
    width: 100%;
    max-width: 100%;
    gap: 0; /* Figma実値は一律16pxではなく「ラベル→金額/見出し=8px」「→説明=16px」の2段階 */
    padding-block: 40px; /* Figma py-40（各カードの上下余白を一元管理） */
  }
  /* 各カード上辺の繊細な白グロー（full-bleed=領域全幅=ビューポート全幅）。
     Figmaインナーシャドウ(白0.2/dy40/blur40)の見た目を、上辺からの縦グラデで再現。
     実測: 上辺で白≒0.17、約104pxで消失。テキストは z-index:1 で前面に置く。 */
  .s-prizes__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 104px;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.17) 0%,
      rgba(255, 255, 255, 0.13) 23%,
      rgba(255, 255, 255, 0.07) 50%,
      rgba(255, 255, 255, 0.02) 78%,
      rgba(255, 255, 255, 0) 100%
    );
  }
  .s-prizes__card > * {
    position: relative;
    z-index: 1;
  }
  /* Figma実測: ラベル行→金額(賞金)/MENTORING見出し(メンタリング) = 8px、
     その塊→説明文 = 16px（両カード共通のリズム）。 */
  .s-prizes__card--prize .s-prizes__amount,
  .s-prizes__card--mentoring .s-prizes__mentoring {
    margin-top: 8px;
  }
  .s-prizes__card--prize .s-prizes__desc,
  .s-prizes__card--mentoring .s-prizes__desc {
    margin-top: 16px;
  }
  .s-prizes__card--prize,
  .s-prizes__card--mentoring {
    /* PCの絶対配置オフセットを解除（position:relativeでは left/top が効いてしまうため） */
    left: auto;
    right: auto;
    top: auto;
    align-items: flex-start;
    text-align: left;
  }

  /* --- ラベル：Figma実値18px、装飾バーは詰める --- */
  .s-prizes__label {
    gap: 12px;
    font-size: 1.125rem; /* 18px（Figma実値） */
  }

  /* --- 賞金額：Figma実値40px @375（10.67vw）。360/375pxで全桁表示 --- */
  .s-prizes__amount {
    font-size: clamp(2rem, 10.67vw, 2.5rem); /* 32px〜40px */
  }

  /* --- 説明文：Figma実値16px、全幅 --- */
  .s-prizes__desc,
  .s-prizes__desc--right {
    font-size: 1rem; /* 16px（Figma実値） */
    line-height: 1.9;
    max-width: 100%;
  }

  /* --- MENTORING / 伴走支援：Figma実値32px。スラッシュのみ30px --- */
  /* get_design_context実測(284:5631): 「MENTORING /」行と「伴走支援」行はFigma上でも
     縦積み2行構成（flex-col、行間gapなし）。横方向(MENTORING⇔/)は8px。
     カード幅(約322px)に対し3要素の合計幅が収まらず自然に折返すため、行間だけ0に補正する
     （旧gap:6pxは行間にも6pxを持ち込み、Figmaの密着(0px)と食い違っていた）。 */
  .s-prizes__mentoring {
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 0;
  }
  .s-prizes__mentoring-en,
  .s-prizes__mentoring-jp {
    font-size: clamp(1.75rem, 8.53vw, 2rem); /* 28px〜32px（Figma実値32px @375） */
  }
  .s-prizes__mentoring-slash {
    font-size: clamp(1.625rem, 8vw, 1.875rem); /* 26px〜30px（Figma実値30px @375） */
  }
}

/* sp/04-why.css */
/* ==========================================================================
   sp/04-why.css — WHY EHIME CUP？ セクションの phone tier(≤767px) 専用上書き
   --------------------------------------------------------------------------
   SP方針（Figma SPノード 284:5652 / 背景マスク 284:5653 の get_screenshot を正とする）:
   - 背景は SP専用 why-bg-sp.webp。Figmaの変換値どおりに元写真
     (AdobeStock_1559873786, 4096×2304) を 375×813 ボックスへ配置して作り直したもの。
     元写真を container 1473×829・left -196・top 0 相当でクロップ（水平 13.3%〜38.8%,
     垂直 0〜98% の縦長スライス＝山頂が右上・左が暗部・手前の岩と1本のロープが下部）し、
     #a89b88 の multiply オーバーレイ（Figma Rectangle 400）を焼き込み済み。
     → CSSは単一画像を cover 表示するだけ。可読性用の暗部は写真＋multiply で担保
        （Figmaに存在しない暗色グラデは重ねない）。
     ※旧実装は元写真の全景（クライマー中央・山全体）を敷いており構図が誤り。
       正しくは縦長スライスのみ（クライマーはフレーム外）。
   - テキスト（文言・サイズ・行送り）はPCと共通。SPは Frame10(284:5657) の実測で上書きのみ:
     eyebrow 20px / title 32px(lh1.3) / lead 18px(lh2) / body 16px(lh2)、
     3要素間の gap は一律 16px、body 内 gap 24px、py 60px、padding-inline 28px。
   ========================================================================== */

@media (max-width: 767px) {
  /* --- 背景：SP専用クロップ画像を1枚 cover 表示（multiply 焼き込み済み） --- */
  .s-why__bg {
    background-image: url("../assets/why-bg-sp.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-blend-mode: normal;
  }

  /* --- コンテンツ：左右 28px / 上下 60px、3要素の縦間隔は一律 16px --- */
  .s-why__inner {
    gap: 16px;
    padding-block: 60px;
    padding-inline: 28px;
  }

  /* --- 英字ラベル：Figma実測 20px（Dela Gothic）。tracking なし＝letter-spacing: normal --- */
  .s-why__eyebrow {
    font-size: 1.25rem; /* 20px */
    letter-spacing: normal;
  }

  /* --- 大見出し：32px / line-height 1.3（PCと同値） --- */
  .s-why__title {
    font-size: 2rem; /* 32px */
    line-height: 1.3;
  }

  /* --- 本文ブロック：全幅化。lead/body の間隔 24px。
       Figma Frame10 は3要素とも一律 gap16px のため、body への追加 margin-top は付けない
       （旧実装の margin-top:8px は title→body を24pxにする Figma無根拠の差分だったため削除）。 --- */
  .s-why__body {
    gap: 24px;
    max-width: 100%;
  }

  /* --- リード：18px / line-height 2 --- */
  .s-why__lead {
    font-size: 1.125rem; /* 18px */
    line-height: 2;
  }

  /* --- 本文：16px / line-height 2 --- */
  .s-why__text {
    font-size: 1rem; /* 16px */
    line-height: 2;
    max-width: 100%;
  }
}

/* sp/05-entry.css */
/* ==========================================================================
   sp/05-entry.css — 05-entry「KEEP ENTRY」セクションの phone tier（≤767px）上書き
   --------------------------------------------------------------------------
   ■ このファイルの役割
     - phone（≤767px、実機375px主眼・360/390も担保）のSP設計をここに集約する。
     - build.py は sections/*.css の後ろに sp/*.css を連結するので、同一詳細度でも
       カスケードで確実に勝つ（!important 不要）。
     - PC(≥1280) / tablet(768–1279) の見た目は sections/05-entry.css が担い、
       このファイルは一切触らない（本ファイルは max-width:767px 内でのみ効く）。

   ■ SP方針の要約（2026-07-08 実データ確認後に更新。下部の「追記」も参照）
     - フォームは1カラム。ラベル→入力欄を縦積みにし、入力欄はフル幅。
     - 入力欄フォントは16px（iOS の自動ズーム防止のしきい値。Figma実値14pxからの
       意図的な逸脱・変更不要）。padding も 12px/16px に拡張しタップ高さを確保。
     - ベネフィット（フル幅）→フォームカードの縦積み順はそのまま自然に流す。
     - ラジオ4つ（東予/中予/南予/県外）は横並び1行のままタップ領域を44px以上に拡張。
     - CTAボタンは実データ通り中央寄せの等幅ピル（全幅ではない）。min-height:48pxで
       タップしやすさのみ確保。
     - 特大英字見出し KEEP ENTRY は実データ通り 40px 固定・「KEEP」「ENTRY」の
       強制2行（HTML側の<br class="s-entry__title-break">をここでのみ表示）。
       横スクロールは一切出さない。
     - 余白リズムは実データ（get_design_context 284:5663系列）の固定pxに合わせる。

   ■ 実SPデザイン反映メモ（design-data/sp/05-entry.md 準拠・2026-07-08確認）
     - 和文キャッチは実測20px固定に修正（従来clamp22-30pxはPC由来でやや大きめ）。
     - ベネフィット見出し前後の水平線（Vector31相当）は sections/05-entry.css の
       .s-entry__benefits-title に既存の border-top/border-bottom:1px で実装済み。
       phone側で打ち消していないため、そのままSPでも表示される（追加CSS不要・確認済み）。
     - 文言差異なし（PC/現行実装と完全一致）。

  ■ 2026-07-08 追記: get_design_context(284:5663)フル再確認による追加修正
     - このセクションのSP実データはほぼ全て「375px基準の固定px」であり、vw系clampの
       多くは実測値と食い違っていた（例: セクション上下余白は60px固定、実は
       clamp(40,12vw,56)では約45pxにしかならない等）。以下、固定値に寄せて修正。
     - KEEP ENTRY見出しはPC(1行825幅)と異なりSPでは「KEEP」「ENTRY」が別テキストの
       固定2行(40px)。sections/05-entry.css に追加した .s-entry__title-break
       （HTML側の<br>）をここでのみ表示させ、幅に関わらず必ず2行にする
       （従来はwrap依存で広めのphone幅だと1行になってしまっていた）。
     - ベネフィット見出しはSPでは1行構成（PC=2行）。HTML側の<br>はPC専用のため、
       ここでは br を非表示にして1行化する。
     - フォームカード内側 padding・フォーム内 gap 群は、PC値をそのまま縮小する
       という以前の推測ではなく、SP実データの値（32px / 16px 等）に合わせ直した。
     - 送信ボタンはSP実データでは全幅ではなく中央寄せの等幅ピル（PCと同じ padding）。
       以前の「全幅ボタン」はSPデザイン未納品時点の推測実装だったため、実データに
       合わせて中央寄せに戻す（min-height:48pxのタップ領域確保のみ維持）。
   ========================================================================== */

@media (max-width: 767px) {
  /* --- セクション余白＋背景位置 -----------------------------------------
     PCは py clamp(56,8vw,100)。phoneはさらに詰めて上下56px前後に。
     背景はSP専用書き出し画像 entry-bg-sp.webp（750x2148、Figma SPノード
     284:5663/284:5665実値ベースでPC同手法(gareth-david写真2枚をcolor-burn)を
     再現した専用アセット。PC用landscape画像(entry-bg.webp)をcoverで縦長に
     詰めていた旧実装は廃止。sections/05-entry.cssのcover指定はそのまま活用）。
     位置は左寄せ（top left）とし、右上の斜めブラシと左辺〜左下の縦ブラシ帯を
     画面内に収める（右上のクリーム側に見出し・フォームが載るので本文可読性も担保）。 */
  .s-entry {
    /* get_design_context(284:5669)実測: py-[60px]固定。旧clamp(40,12vw,56)は
       375px幅で約45pxにしかならず実データより15px近く狭かった。 */
    padding-block: 60px;
    background-image: url("../assets/entry-bg-sp.webp");
    background-position: top left;
  }

  /* --- 内側コンテナ ----------------------------------------------------
     get_design_context(284:5669)実測: left-[28px]固定（375px中央寄せで概ね対称）、
     見出しブロック↔フォームブロック間は gap-[24px]固定。 */
  .s-entry__inner {
    padding-inline: 28px;
    gap: 24px;
  }

  /* --- 見出し＋リード --------------------------------------------------- */
  /* Figma実値: gap-8px（get_metadata確認） */
  .s-entry__head {
    gap: 8px;
  }

  /* 特大英字見出し KEEP ENTRY。get_design_context(284:5671)実測: text-[40px]固定
     （wrap依存のclampではなく、常に「KEEP」「ENTRY」の固定2行構成）。
     line-height 1 は維持（leading-none）。 */
  .s-entry__title {
    font-size: 40px;
  }
  /* PC/tabletでは非表示にしている<br>をSPでのみ表示し、幅に関わらず必ず
     「KEEP」「ENTRY」の2行にする（従来はwrap依存で広めのphone幅だと1行に
     戻ってしまっていた）。 */
  .s-entry__title-break {
    display: block;
  }

  /* 和文キャッチ。実SP実測 20px 固定（design-data/sp/05-entry.md）。
     従来のclamp(22-30px)はPC由来でやや大きめだったため実値に合わせる。
     line-heightはget_design_context(284:5672)のleading-normal実測(1.5)に合わせる
     （PCの.s-entry__catchと同じ1.5。以前の1.4は誤り）。 */
  .s-entry__catch {
    font-size: 1.25rem; /* 20px */
    line-height: 1.5;
  }

  /* リード文。get_design_context(284:5673)実測: text-[16px]固定・leading-[2]固定
     （PCの18pxからの単純比例縮小ではなく、SP側の実データ通り16px/2に）。 */
  .s-entry__note-lead {
    font-size: 16px;
    line-height: 2;
  }

  /* --- 下段：ベネフィット→フォームの縦積み -----------------------------
     get_design_context(284:5674)実測: gap-[32px]固定（ベネフィットブロックと
     フォームカードの間）。以前のclamp(28,7vw,40)は375px幅で約28pxにしかならず
     実データ(32px)より狭かった。 */
  .s-entry__body {
    gap: 32px;
  }

  /* --- 左：ベネフィット -------------------------------------------------
     get_design_context(284:5675)実測: gap-[16px]固定（従来の14pxは誤り）。 */
  .s-entry__benefits {
    gap: 16px;
  }
  /* 見出し。get_design_context(284:5677)実測: text-[18px]固定・1行構成
     （PC(171:2331)は2行だが、SPは<br>の無い単一テキストの1行）。
     padding-block も 16px 固定（Vector31→text→Vector32 の間隔が
     get_metadataで16/16と実測でき、従来の14pxは誤り）。 */
  .s-entry__benefits-title {
    font-size: 18px;
    padding-block: 16px;
  }
  /* PC専用の<br>（.s-entry__catchとは別物、KEEP ENTRY用ではなくベネフィット
     見出し用）。SPでは1行構成のため、HTML内の<br>を非表示にして1行化する。
     Keep-Out: HTML自体は変更せず、SP側でのみ<br>を打ち消す。 */
  .s-entry__benefits-title br {
    display: none;
  }
  .s-entry__benefits-list {
    /* get_design_context(284:5679)実測: gap-[8px]固定（PCと同値。従来の10pxは誤り）。 */
    gap: 8px;
  }
  /* ベネフィット各行：チェック＋テキスト。
     get_design_context(284:5680/5685/5690)実測: 単数行・複数行いずれも
     items-center（アイコンは行の全高に対して中央寄せ）。gapは6px固定
     （PCと同値）。以前の align-items:flex-start + アイコンmargin-topの
     手動調整は、実データ（複数行でもcenter基準）とズレていたため撤廃する。 */
  .s-entry__benefit {
    gap: 6px;
    font-size: 16px;
    line-height: 1.5;
  }

  /* --- 右：フォームカード -----------------------------------------------
     get_design_context(284:5695)実測: p-[32px]固定（PCと同値。SP専用に
     縮小していた従来のclamp(18,5vw,24)は実データと不一致だった）。 */
  .s-entry__card {
    padding: 32px;
  }
  /* get_design_context(284:5696)実測: gap-[16px]固定（PCの24pxとは異なる
     SP専用の値。従来の20pxは誤り）。 */
  .s-entry__form {
    gap: 16px;
  }
  /* get_design_context(284:5697)実測: gap-[16px]固定（PCと同値のため、
     本来SP専用の上書きは不要。従来の18pxは誤りだったので削除する）。 */

  /* --- フィールド行：ラベル→入力を縦積み（1カラム） --------------------
     PC/tablet は横並び（ラベル180px + 入力）。phone はラベルを上に置き、
     入力欄をフル幅に。480以下の section CSS でも縦積みだが、phone専用に
     ここで統一して余白・幅を最終化する。 */
  .s-entry__field {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  /* ★バグ修正（最終検証で発見）: .s-entry__label-wrap の flex: 0 0 180px
     （sections/05-entry.css）はPCの横並び行で「幅180px固定」を意図した値。
     直上で .s-entry__field を flex-direction:column にしたことで、その
     flex-basis(180px)がメイン軸＝縦方向に適用されてしまい、ラベル＋必須
     バッジのブロックが高さ180pxに引き伸ばされ、ラベルと入力欄の間に
     巨大な空白ができていた（実機/Playwright突合で確認・要修正）。
     column方向では高さをコンテンツ依存に戻す。 */
  .s-entry__label-wrap {
    flex: 0 0 auto;
  }
  /* ラベル＋必須バッジは横並びのまま（入力欄の上に置く）。
     get_design_context(284:5699ほか)実測: SPでも w-[180px]固定でPCと同値
     （従来の flex:0 0 auto は誤り。180px固定のまま上書き不要のため削除）。 */
  .s-entry__label {
    font-size: 16px;
  }

  /* --- テキスト入力欄 ---------------------------------------------------
     ★重要：font-size は 16px 以上（iOS Safari の自動ズーム防止・意図的逸脱）。
     横paddingはFigma実値(284:5703 px-24)の24pxに合わせ、プレースホルダの
     左インセットを一致させる。縦paddingはタップ高さ48px確保のため12px維持
     （Figmaは8px/14pxで37px高だが、16pxフォント＋タップ性のための意図的逸脱）。 */
  .s-entry__input {
    width: 100%;
    padding: 12px 24px;
    font-size: 16px;
    line-height: 1.5;
  }

  /* --- ラジオ（お住まいの地域） ----------------------------------------
     fieldset の legend float を解除してラベルを1行上に。
     ラジオ4つは折返し可。各ラジオのタップ領域を44px以上に拡張し、
     指で押しやすい間隔（行12px・列20px）にする。 */
  .s-entry__field--radio {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .s-entry__label--legend {
    float: none;      /* 回り込み解除。ラベルを入力群の上に置く */
    width: auto;
    margin-right: 0;
    margin-bottom: 4px;
  }
  .s-entry__field--radio .s-entry__radios {
    overflow: visible; /* float 解除に伴い overflow:hidden は不要 */
  }
  /* Figma実値: 4つ横並び1行（東予/中予/南予/県外 各54px幅・gap12px）。
     get_metadata確認済み。2×2折返しはFigma実データと不一致だったため解除。 */
  .s-entry__radios {
    flex-wrap: nowrap;
    gap: 12px;
  }
  /* 各ラジオのマーク↔テキスト間はFigma実値(284:5716)の gap-8px に合わせる
     （従来の6pxはFigmaと2pxずれていた）。min-height:44pxはタップ領域確保のみ。
     375px時: 4×(14+8+32)+3×12=252px ≤ カード内幅255px で1行に収まる。 */
  .s-entry__radio {
    min-height: 44px;
    min-width: 0;
    gap: 8px;
    padding-block: 4px;
  }
  .s-entry__radio-text {
    font-size: 16px;
  }

  /* エラーメッセージは phone でも 13〜14px で可読に */
  .s-entry__error {
    font-size: 13px;
  }

  /* --- 注記＋送信ボタン -------------------------------------------------
     get_design_context(284:5730)実測: items-center・gap-[16px]固定。
     以前は「ボタンを全幅にする」ためalign-items:stretch+gap14pxにしていたが、
     実データはPC同様ボタンが中央寄せの等幅ピル（shrink-0）であり、全幅ボタンは
     SPデザイン未納品時点の推測実装だった。実データに合わせて中央寄せに戻す。 */
  .s-entry__foot {
    align-items: center;
    gap: 16px;
  }
  .s-entry__form-note {
    font-size: 13px;
    line-height: 1.6;
  }
  /* 送信ボタン。get_design_context(284:5732)実測: px-[16px] py-[8px]でPCと同じ
     padding、中央寄せの等幅ピル（全幅ではない）。min-height:48pxのタップ領域
     確保のみ実用上の理由で維持する（視覚幅には影響しない）。 */
  .s-entry__submit {
    min-height: 48px;
    padding: 12px 16px;
  }
  /* get_design_context(284:5733)実測: text-[20px]固定（PCの20〜24pxの
     clampとは異なりSPは20px固定。従来のclamp(20,5.5vw,24)は誤り）。 */
  .s-entry__submit-text {
    font-size: 20px;
  }

  /* --- サンクス／エラーバナー ------------------------------------------- */
  .s-entry__thanks {
    padding-block: clamp(12px, 4vw, 24px);
  }
  .s-entry__thanks-title {
    font-size: clamp(1.25rem, 5.5vw, 1.5rem); /* 20px 〜 24px */
  }
  .s-entry__thanks-text {
    font-size: 15px;
    line-height: 1.8;
  }
  /* バナー内の改行 <br> は phone で不自然になり得るが、HTMLは触らないため
     文字サイズ側で吸収（折返しは許容）。 */
  .s-entry__banner-error {
    padding: 14px 16px;
    margin-bottom: 20px;
  }
}

/* sp/06-flow.css */
/* ==========================================================================
   06-flow — SP（phone tier ≤767px）上書き
   セクション: FLOW タイムライン ＋ 審査基準4項目
   --------------------------------------------------------------------------
   SP方針の要約:
   - タイムラインは1カラム縦積み（section CSS の max-width:768 で既に縦積み化済み）。
     phoneでは日付ピル＝日付+項目名を横一列に収め、本文16pxで読みやすく。
     左右padding/gapを詰めて実機375pxで文字切れ・詰まりを解消。
   - 審査基準カードは1カラム（section CSS で既に100%化済み）。
     カード見出し（番号バッジ＋項目名＋＜配点2倍＞）は折返し許容、本文とアイコンは
     縦積み（アイコンを上・本文を下）にして横溢れを防ぐ。
   - CTA「名乗りを上げる」はタップ領域を確保（min-height 44px+・横幅ゆとり）。
   - 余白リズムはPCトークン感（gap 24pxベース）を phone では 20〜16px に圧縮。
   --------------------------------------------------------------------------
   ※実SPデザイン納品後は、このファイルの @media 中身だけを差し替える。
     PC/tablet（tokens.css / base.css / css/sections/06-flow.css）は触らない。
   ========================================================================== */

@media (max-width: 767px) {

  /* --- セクション全体の余白（Figma実値: py-60px固定。design_context確認済み） --- */
  .s-flow {
    padding-block: 60px;
  }

  .s-flow__inner {
    gap: 24px; /* Figma実値 gap-24px */
    padding-inline: 20px;
  }

  /* Figma実値: gap-8px（get_metadata実測。FLOW→subtitle→leadすべて8px間隔） */
  .s-flow__head {
    gap: 8px;
  }

  /* Figma実値20px固定（get_metadata確認。320px幅に単行で収まる） */
  .s-flow__subtitle {
    font-size: 1.25rem; /* 20px */
  }

  /* Figma実値40px固定（get_metadata確認。PC側clamp下限48pxより小さい実測値。
     色も#f45d11でPCの#FF5500とは異なる。get_design_context確認済み） */
  .s-flow__title {
    font-size: 2.5rem; /* 40px */
    color: var(--color-accent-red);
  }

  /* Figma実値16px固定（get_metadata確認。PC側clamp下限15pxはわずかに実値より小さい） */
  .s-flow__lead {
    font-size: 1rem; /* 16px */
  }

  /* --- タイムラインステップ（縦積みは section CSS 済み。phoneで詰める） --- */
  /* Figma実値: px-30 py-10（design_context確認済み） */
  .s-flow__step {
    gap: 8px;
    padding: 10px 30px;
  }

  /* Figma実データ（get_metadata: Frame331内 date y=0/h26 → name y=26/h29）では
     日付と項目名は【縦2段】。section CSSの768ブロックがrow化しているのを打ち消し、
     縦積み（date上・name下）に戻す。 */
  .s-flow__step-label {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  /* Figma実値18px（get_metadata確認。従来16pxは実値より小さかった）。
     色は#f45d11でPCの#FF5500とは異なる（get_design_context確認済み） */
  .s-flow__step-date {
    font-size: 1.125rem; /* 18px */
    color: var(--color-accent-red);
  }

  /* Figma実値24px（get_metadata確認。従来20pxは実値より小さかった） */
  .s-flow__step-name {
    font-size: 1.5rem; /* 24px */
  }

  /* Figma実値16px（get_metadata確認。従来15pxは実値より小さかった）。
     line-heightはsection CSS側で1.5に修正済み（24/16=1.5実測）のため継承、ここでは上書きしない */
  .s-flow__step-desc {
    font-size: 1rem; /* 16px */
  }

  /* 募集締め切りステップ（Figma SP node 284:5737のみに存在。PC本体(37:5645)には無いため
     PC/tabletでは既定非表示＝src/css/sections/06-flow.css。ここで表示に戻し、
     get_design_context確認済みの塗り背景＋白文字スタイルに変更する） */
  .s-flow__step--deadline {
    display: flex;
    background-color: var(--color-accent-red);
  }

  .s-flow__step--deadline .s-flow__step-name {
    color: var(--color-white);
  }

  .s-flow__arrow--deadline {
    display: flex;
  }

  /* 募集締め切りの日付装飾表示（Figma SP node 284:5749 / get_design_context確認済み）
     「2026 / 11 / 1 SUN 23:59 まで」。数字18px Hiragino W8 白、区切りは細く、
     SUN・まで は12px。名前「募集締め切り」との間隔はステップ基底の gap:8px を継承。 */
  .s-flow__deadline-date {
    display: flex;
    flex-wrap: nowrap; /* Figmaは1行。「まで」だけ2行目に落ちるのを防ぐ */
    align-items: baseline;
    white-space: nowrap;
    font-family: var(--font-jp);
    font-weight: 800; /* Hiragino W8 */
    line-height: 1.2;
    color: var(--color-white);
  }

  .s-flow__deadline-num {
    font-size: 1.125rem; /* 18px */
  }

  .s-flow__deadline-sep {
    font-size: 1.125rem; /* 18px */
    font-weight: 400; /* Figmaの細い斜線ベクター相当。数字より細く */
    margin: 0 2px;
  }

  .s-flow__deadline-unit {
    font-size: 0.75rem; /* 12px */
    margin-left: 4px;
    margin-right: 8px; /* 日付グループ間の間隔（nowrap維持のため詰める） */
  }
  /* 末尾「まで」は右マージン不要（詰めて1行維持を助ける） */
  .s-flow__deadline-unit:last-child {
    margin-right: 0;
  }

  /* ステップ間矢印はそのまま（14x8）。連続感のため間隔は timeline gap に従う */
  /* Figma実値: gap-8px（design_context確認済み） */
  .s-flow__timeline {
    gap: 8px;
  }

  /* --- タイムライン↔審査基準の縦線を短縮 -------------------------------- */
  /* Figma実値60px固定（get_metadata確認。従来64pxは実値より大きかった） */
  .s-flow__connector img {
    height: 60px;
  }

  /* --- 審査基準 見出し -------------------------------------------------- */
  .s-flow__criteria-head {
    gap: 8px;
  }

  /* Figma実値32px固定（get_metadata確認。PC側clamp下限28pxより小さい実測値） */
  .s-flow__criteria-title {
    font-size: 2rem; /* 32px */
  }

  /* Figma実値16px（get_metadata確認。従来15pxは実値より小さかった）。
     line-heightはsection CSS側で1.5に修正済み（24/16=1.5実測）のため継承、ここでは上書きしない */
  .s-flow__criteria-lead {
    font-size: 1rem; /* 16px */
  }

  /* --- 審査基準カード（1カラムは section CSS 済み。phoneで内側を最適化） --- */
  .s-flow__criteria-list {
    gap: 16px;
  }

  /* Figma実値: gap-16, px-30 py-24（get_design_context 284:5806/284:5840 確認済み） */
  .s-flow__criteria-card {
    gap: 16px;
    padding: 24px 30px;
  }

  /* 見出し行: Figma実データ（node 284:5868 のグリッド重ね）は
     「①バッジ＋項目名＋＜配点2倍＞」が【インライン連続】で流れ、項目名が2行に
     なるカード①では ＜配点2倍＞ が項目名の続き（2行目末尾）に付く。
     flex（各要素が独立ブロック→配点2倍が別行に落ちる）ではこれを再現できないため、
     phoneでは inline フロー（バッジ float:left、項目名と配点2倍は inline）に変える。
     → バッジに文字が回り込み、項目名の直後に配点2倍が続く（Figma一致）。 */
  .s-flow__criteria-card-head {
    display: block;
    gap: 0;
  }

  .s-flow__criteria-num {
    float: left;
    margin-top: 2px;
    margin-right: 8px;
  }

  /* 項目名は inline テキストとして流し、バッジに回り込ませる。Figma実値20px。 */
  .s-flow__criteria-name {
    display: inline;
    font-size: 1.25rem; /* 20px */
    line-height: 1.45;
    white-space: normal;
  }

  /* ＜配点2倍＞は項目名の直後に inline で続ける（別行に落とさない）。 */
  .s-flow__criteria-badge {
    display: inline;
    white-space: nowrap;
    margin-left: 6px;
  }

  /* 本文とアイコンを縦積み（アイコン上・本文下）にして横溢れを解消。
     Figma実値 gap-16, items-center（get_design_context 284:5806/284:5840 確認済み）。
     HTMLは desc→img 順のため column-reverse でアイコンを上に。 */
  .s-flow__criteria-body {
    flex-direction: column-reverse;
    align-items: center;
    gap: 16px;
  }

  /* Figma実値16px（get_metadata確認。従来15pxは実値より小さかった） */
  .s-flow__criteria-desc {
    flex: 0 0 auto;
    width: 100%;
    font-size: 1rem; /* 16px */
    line-height: 1.8;
  }

  /* Figma実値: size-80px固定（design_context確認済み。従来64pxは実値より小さかった） */
  .s-flow__criteria-icon {
    width: 80px;
    height: 80px;
  }

  /* --- CTA -------------------------------------------------------------- */
  /* Figma SP node 284:5884: full-widthバーではなく hug幅（約203px）の中央寄せピル。
     cta-wrap（section CSS: flex + justify-content:center）が hug ボタンを中央寄せする。
     ボタン高さ ≒ 45px（20px × line-height 1.458 + py16）で Figma実測45pxに一致。 */
  .s-flow__cta-wrap {
    width: 100%;
  }

  .s-flow__cta {
    /* Figma実値: gap-16px, px-16 py-8, font 20px（get_design_context 284:5884 確認済み） */
    gap: 16px;
    padding: 8px 16px;
    font-size: 1.25rem; /* 20px */
  }
}

/* sp/07-warmup.css */
/* ==========================================================================
   07-warmup — SP（phone tier ≤767px）上書き
   セクション: WARM UP EVENTS リアル3地域 ＋ オンライン3回（全6イベント）
   --------------------------------------------------------------------------
   SP方針の要約（2026-07-08 Figma実データ再突合済み）:
   - 2大カラム（リアル＝朱 / オンライン＝橙）は1カラム縦（section CSS の
     max-width:768 で既に縦積み化済み）。カラム間 gap は実値40px（PCの60pxより詰まる）。
   - 各カラムのカテゴリ見出しカード＋6イベントカードはそのまま1カラムで縦に並ぶ。
     phoneではカテゴリカードの左右paddingとアイコンサイズを縮小するが、イベントカード内の
     タグ/日付メタのpadding・gapはPCと同一値（横一列、狭い端末ではPC由来のflex-wrapで折返し）。
   - ダーク背景セクション。見出し WARM UP / EVENTS は実値40px固定（PCのclamp下限44pxとは別値）。
   - フッターCTA「名乗りを上げる」はFigma実値どおりコンテンツ幅（Frame幅203.4px）の
     center寄せボタン。padding/フォントサイズ以外はPCと同一。
   - line-height はほとんどの要素でPCと同一値（normal/1.3/2など）。font-sizeのみ縮小。
   - カテゴリアイコンは実SP実測 80×80 固定（design-data/sp/07-warmup.md）。
     文言差異なし（PC/現行実装と完全一致）。
   --------------------------------------------------------------------------
   PC/tablet（tokens.css / base.css / css/sections/07-warmup.css）は触らない。
   ========================================================================== */

@media (max-width: 767px) {

  /* --- セクション全体の余白（Figma実値: py-60px固定。design_context確認済み） --- */
  .s-warmup {
    padding-block: 60px;
  }

  /* Figma実値: gap-24px（get_metadata確認。従来32/40pxは実値より大きかった） */
  .s-warmup__inner {
    gap: 24px;
    padding-inline: 27.5px;
  }

  .s-warmup__head {
    gap: 8px;
  }

  /* Figma実値40px固定（get_design_context確認。leading-none 2行で高さ80pxのため
     100px→40pxへ縮小。従来PCのclamp下限44pxが適用されており実値と不一致だった） */
  .s-warmup__title {
    font-size: 2.5rem; /* 40px */
  }

  /* Figma実データは whitespace-nowrap で1行（テキスト幅334>コンテンツ枠320だが
     フレーム375内に収まる＝右マージンへわずかに食い込む）。実装も1行に固定する。
     横スクロール防止に、画面幅に対して溢れない上限を min() で担保。 */
  .s-warmup__subtitle {
    font-size: min(20px, calc((100vw - 32px) / 16.5));
    white-space: nowrap;
  }

  /* Figma実値16px・leading-[2]（get_design_context確認。PCと同一値。
     従来1.9は実値と不一致だった） */
  .s-warmup__lead {
    font-size: 1rem; /* 16px */
    line-height: 2;
  }

  /* --- 2カラム→1カラム（section CSS 済み）。
     Figma実値: gap-40px（get_design_context/get_metadata確認。Frame73の子
     Frame69(real,810) → Frame69(online, y=850) で 850-810=40。
     従来24pxは実値より小さく、リアル/オンライン間の余白が詰まっていた） */
  .s-warmup__cols {
    gap: 40px;
  }

  /* --- カテゴリ見出しカード（Figma実値: px-30 py-20） -------------------- */
  .s-warmup__cat-inner {
    gap: 8px;
    padding: 20px 30px;
  }

  /* Figma実値20px・leading-[1.3]（get_design_context確認。PCと同一値。
     従来1.35は実値と不一致だった） */
  .s-warmup__cat-title {
    font-size: 1.25rem; /* 20px */
    line-height: 1.3;
  }

  /* 実SP実測 80×80 固定（design-data/sp/07-warmup.md）。
     従来 width:96px のみの指定は height が section CSS の 120px のまま残り
     正方形が崩れていたため、width/height 双方を実値に揃える。 */
  .s-warmup__cat-icon {
    width: 80px;
    height: 80px;
  }

  /* Figma実値16px・leading-[normal]（get_design_context確認。PCと同一値。
     従来1.6は実値と不一致だった） */
  .s-warmup__cat-desc {
    font-size: 1rem; /* 16px */
    line-height: normal;
  }

  /* --- イベントカード群（Figma実値: gap-16px） ------------------------- */
  .s-warmup__cards {
    gap: 16px;
  }

  /* Figma実値: p-20px（均等）・内部gap4px。
     枠線: Figmaのstrokeは frame境界(x=27.5)中心に乗る1px指定だが、375px書き出しで
     x=27(約50%朱/暗)・x=28(約60%朱/白)へアンチエイリアスされ、視覚的に約2px幅の線として
     見える。ブラウザの crisp な border:1px は1デバイスpxのハード線となりFigmaより細く見え、
     ユーザー目視QAで「枠線が細すぎる」と指摘。SPは border-width:2px に上書きして見た目を合わせる
     （色/style はPCのまま。online列は border-color:橙 を継承）。 */
  .s-warmup__card {
    gap: 4px;
    padding: 20px;
    border-width: 2px;
  }

  /* タグ＋日付メタ: 横一列（狭ければ折返しはPC由来のflex-wrapで担保）。
     Figma実値16px（get_design_context確認。Frame64幅252=タグ128+gap+日付108から逆算。
     従来10pxは実値と不一致で、タグ枠の右にできる余白が詰まっていた） */
  .s-warmup__card-meta {
    gap: 16px;
  }

  /* Figma実値16px・横padding24px（get_design_context確認。PCと同一値。
     従来18pxは実値と不一致でタグ枠の横幅がFigma実測128pxより狭かった） */
  .s-warmup__card-tag {
    padding: 4px 24px;
    font-size: 1rem; /* 16px */
  }

  /* Figma実値24px・leading-[normal]（get_design_context確認。
     従来19px/line-height1.35は実値と不一致だった） */
  .s-warmup__card-title {
    font-size: 1.5rem; /* 24px */
    line-height: normal;
  }

  /* Figma実値16px・leading-[normal]（get_design_context確認。PCと同一値。
     従来15px/line-height1.65は実値と不一致だった） */
  .s-warmup__card-desc {
    font-size: 1rem; /* 16px */
    line-height: normal;
  }

  /* --- フッターCTA: タップ領域確保 ------------------------------------- */
  .s-warmup__foot {
    gap: 16px;
  }

  /* Figma実値16px・leading-[normal]（get_design_context確認。PCと同一値。
     従来15px/line-height1.7は実値と不一致だった）。
     ★配置修正: FigmaのSPフッター注記(node 284:5962)は full-width の左寄せテキストで、
     2文が改行なしで自然折返しして3行になる（get_design_context: <p>に text-align 指定なし=左、
     2文は inline <span> で連続）。PC由来の text-align:center は実値と不一致のため左寄せに上書き。
     幅は 320px(=inner幅)フルにしてFigmaの折返し位置に合わせる。 */
  .s-warmup__foot-note {
    font-size: 1rem; /* 16px */
    line-height: normal;
    text-align: left;
    width: 100%;
  }

  /* HTMLの <br>（PC/tabletでは中央寄せ2行を作るための強制改行）はSPでは無効化。
     Figma SPは改行なしの自然折返しのため、br を残すと「す。」「い。」の孤立行が出て
     Figmaの綺麗な3行折返しと崩れる。SPのみ br を display:none にして自然折返しへ。 */
  .s-warmup__foot-note br {
    display: none;
  }

  /* Figma実値: px-16 py-8（get_design_context確認。CTAはFrame幅203.4pxの
     コンテンツ幅ボタンで、footer内でcenter寄せ。PCと同一padding。
     従来 width:100%/min-height:48px/padding:12px24px は実値と不一致で、
     Figma上の帯幅よりだいぶ大きいボタンになっていた） */
  .s-warmup__cta {
    padding: 8px 16px;
    font-size: 1.25rem; /* 20px */
  }
}

/* sp/08-mentors.css */
/* ==========================================================================
   sp/08-mentors.css — 08 MENTORS & JUDGES ＋ SPECIAL CONTENT（phone tier）
   セクション名: メンター・審査員カード（Splideカルーセル）＋ SPECIAL CONTENT。
   SP方針の要約（2026-07-08 Figma実データ突合済み: PC node 171:378 / SP node 284:5980）:
     - phone(≤767px)専用の上書きを本ファイル1つの @media に集約（差し替え単位）。
     - カードは固定幅156px×2枚が320pxコンテナにぴったり収まるネイティブ横スクロール
       （旧「1枚チラ見せ」想定は実データと不一致だったため修正済み）。写真は180:220比率を
       維持しつつカード幅の81.8%（左右に余白あり、PCのフル幅とは異なる構図）。
     - 見出し／リード／告知／SPECIAL は縦積みのまま、余白リズムはFigma実測値（内部gap8〜16px、
       more→special間のみ40px）に合わせて詰める。
     - ナビ矢印(◀▶)はFigma SP実データに存在（リード文の下・右寄せ・カードの上）。section CSS の
       max-width:768 で非表示になっているのを phone で復活し、右寄せで配置する（33×33）。
     - SPECIAL CONTENT（坂本大典の道場）はFigma実データ上もPC/SP双方に存在するため実装対象。
   PC/tablet（css/sections/08-mentors.css）とHTML/JSは触らない。
   ========================================================================== */

@media (max-width: 767px) {
  /* --- セクション余白（他セクションのFigma実値py-60px固定パターンに準拠。
         mentorsノード単体は未確認だが同一クラスのclamp(48,12vw,64)が他5セクションで
         軒並みFigma実値60pxを下回っていたため、一貫性のため同様に60px固定へ）--- */
  .s-mentors {
    padding-block: 60px;
  }

  /* head→cards→more→special の縦リズム。
     Figma SPノード実測値(get_metadata/get_design_context): Frame148(head)末尾→Frame376(nav+cards)
     先頭=16px、cards→more=16px、より正確には親div(284:5982 head内 / 284:5980 全体)に
     gap-[8px]/明示的な数値のみ採用。more→special は 40px 実測（Frame191末尾792→Frame189先頭832）。 */
  .s-mentors__inner {
    gap: 16px;
    /* SP: カードを画面いっぱいに近づけるため左右余白を詰める（2026-07-23） */
    padding-inline: 16px;
  }

  /* Figma SP実データ: ナビ矢印（◀▶）はリード文の下・カードの上に、右寄せで表示される
     （Figma: リード末尾y252→矢印y268=16px / 矢印33×33 / 矢印はコンテナ右端に整列 x240+w80=320 /
     矢印→カード=16px）。section CSS の max-width:768 が display:none にしているのを phone で復活。
     PC の lead-row は「リード文 と 矢印」の横並び(space-between)だが、SPでは縦積みにして
     リード文の下に矢印を落とし、矢印だけを右端へ寄せる。 */
  .s-mentors__lead-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;                 /* リード→矢印 = 16px */
  }
  .s-mentors__nav {
    display: flex;
    justify-content: flex-end;  /* 矢印をカード右端に揃える */
  }

  .s-mentors__head {
    /* Figma実値: 284:5982 が gap-[8px]（title→subtitle→lead 全て8px間隔） */
    gap: 8px;
  }

  /* 見出し：Figma実値40px（284:5983、2行「MENTORS &」/「JUDGES」）。
     プロジェクト共通の校正規約（375pxでFigma値=40px、係数10.7vw・上限40px）に合わせる。
     旧12.5vw/上限48pxは375pxで46.9px=Figma及び同規約の隣接セクション(09/12/13)より約17%過大だった。 */
  .s-mentors__title {
    font-size: clamp(30px, 10.7vw, 40px);
    line-height: 1.05;
  }

  /* Figma実値20px（284:5984 text-[20px]）。規約に合わせ 5.33vw・上限20px（375pxで20px）。
     旧 5.5vw/上限24px は大画面でサブ見出しだけ肥大化し隣接セクションと不整合になる誤り。 */
  .s-mentors__subtitle {
    font-size: clamp(18px, 5.33vw, 20px);
    line-height: normal;              /* Figma実値: leading-[normal] */
  }

  /* Figma実値16px / leading-[2]（284:5986） */
  .s-mentors__lead {
    font-size: 16px;
    line-height: 2;
  }

  /* --- カード（横スクロール） ------------------------------------------- */
  /* Figma実値: カード幅固定156px。コンテナ幅320px内に156×2+gap8=320で2枚ぴったり
     収まる設計（1枚チラ見せ想定だった旧実装を修正）。
     section CSS 側の @media(max-width:480px) 等にある flex-basis(82%等)・gapは
     ここで上書きする（build連結でsp/が最後に来るため確実に勝つ）。 */
  .s-mentors__cards {
    gap: 8px;
    padding-inline-end: 0;
    /* 同じ行のカード高さを揃える（所属テキストの行数差で高さがずれるのを解消・2026-07-23）。 */
    align-items: stretch;
  }

  .s-mentors__card {
    /* 2列で行幅いっぱいに広げる（固定156pxをやめ、コンテナ幅を2分割・2026-07-23）。
       3人目など奇数の余りカードは左寄せ半幅（自然な2列レイアウト）。 */
    flex: 0 0 auto;
    width: calc((100% - 8px) / 2);
    max-width: none;
    gap: 8px;
    padding: 8px;
  }

  /* 写真＋氏名のまとまり（PCは固定183px）を phone ではカード幅いっぱいに広げる。
     これで内側の photo/person の width:100% が実際にカード幅(156px)へ追従する。 */
  .s-mentors__figure {
    width: 100%;
    /* Figma実値: figureブロック(303:239)自体の gap-[8px]（PCの16pxを継承させない） */
    gap: 8px;
  }

  /* 写真はカード幅に追従（PC 180×220 の縦横比を保持）。
     Figma実値: マスク114.545×140はfigure幅140の81.8%（9/11）で、
     PC(180/183≒フル幅)と異なり左右に余白がある構図。旧実装の100%指定は誤り。 */
  .s-mentors__photo {
    width: 81.82%;
    height: auto;
    aspect-ratio: 180 / 220;
  }

  .s-mentors__person {
    width: 100%;
  }

  /* カード幅が156pxに縮むため、ロール名とEHIMEロゴをFigma実値に合わせて縮小
     （PC値のままだとcard-top行がカード幅を超えて詰まる） */
  .s-mentors__role {
    font-size: 10px;
  }

  .s-mentors__ehime {
    width: 38px;
    height: 18px;
  }

  /* Figma実値: 氏名(303:245)は16px（PC24pxからの縮小）。leading-[normal]を継承。 */
  .s-mentors__name-jp {
    font-size: 16px;
    line-height: normal;
  }

  /* Figma実値: leading-[normal]（14pxサイズ自体はPCと同じで変更なし） */
  .s-mentors__org {
    line-height: normal;
  }

  /* --- 続々追加告知 --------------------------------------------------- */
  .s-mentors__more {
    /* Figma実値: 親div(284:6155)にgapユーティリティなし=0（旧6pxは誤り） */
    gap: 0;
  }

  .s-mentors__more-title {
    font-size: clamp(18px, 5.2vw, 22px);
    line-height: normal;              /* Figma実値: 親div leading-[normal] を継承 */
  }

  /* Figma実値16px（284:6157 text-[16px]。旧14pxは誤り）/ leading-[normal] */
  .s-mentors__more-text {
    font-size: 16px;
    line-height: normal;
  }

  /* --- SPECIAL CONTENT ------------------------------------------------ */
  .s-mentors__special {
    /* Figma実値: Frame189(284:6158)自体の gap-[16px]（旧24pxは誤り） */
    gap: 16px;
    /* more→special の間隔は実測40px。__inner の gap(16px、更新済み)に対し
       不足分24pxをここで足して合計40pxにする（PC側の「40+40=80」と同じ手法）。 */
    margin-top: 24px;
  }

  /* 六角形バナー：phone では横幅いっぱい。Figma実値は320×100（アスペクト比3.2:1）。 */
  .s-mentors__special-banner {
    width: 100%;
    aspect-ratio: 320 / 100;
  }

  /* 枠SVGはSP実データ版(320×100・均一4pxストローク)に差し替え。
     PC版(660×100)を width/height:100% でストレッチすると斜辺のストロークが不均一に細く
     なる（ユーザー指摘の「枠線の太さ」該当）ため、SP専用SVGで均一4pxを担保する。 */
  .s-mentors__special-frame--pc { display: none; }
  .s-mentors__special-frame--sp { display: block; }

  .s-mentors__special-banner-text {
    /* Figma実値: テキストブロック280px / 六角形320px → 片側余白(320-280)/2=20px=6.25% */
    padding-inline: 6.25%;
    gap: 0;                           /* Figma実値: label→title間はgapなし（leading-normalで密着） */
  }

  /* Figma実値: label/titleとも20px。白六角形内に必ず1行で収める必要があるため、
     プロジェクト共通の校正規約（375pxでFigma値=20px、係数5.33vw・上限20px＝隣接09/12/13と同一）に
     合わせる。旧PC比の6.25vwは375pxで23.4pxとなり六角形内で折り返す誤りだった。 */
  .s-mentors__special-label {
    font-size: clamp(18px, 5.33vw, 20px);
  }

  .s-mentors__special-title {
    /* section CSS の max-width:768 で white-space:normal 済み。 */
    font-size: clamp(18px, 5.33vw, 20px);
    line-height: normal;              /* Figma実値: leading-[normal] */
  }

  /* 装飾イラストはSP実データ版(206×120)に差し替え。PC版(横長512×245)とは構図が異なる
     （SPは人物とモニターが近接した縦寄り構図）ため、単純な縮小では一致しない。
     Figma実値: イラスト幅205 / フレーム320 = 64%、中央寄せ（左右に余白）。 */
  .s-mentors__special-illust--pc { display: none; }
  .s-mentors__special-illust--sp { display: block; }
  .s-mentors__special-illust {
    width: 64%;
    max-width: none;
    height: auto;
  }

  /* 説明文: Figma実値16px（284:6220）/ leading-[2]。横幅いっぱい・左寄せ維持。 */
  .s-mentors__special-desc {
    font-size: 16px;
    line-height: 2;
    max-width: 100%;
  }
}

/* sp/09-semifinalists.css */
/* ==========================================================================
   sp/09-semifinalists — SEMI FINALISTS（phone tier ≤767px）
   --------------------------------------------------------------------------
   SP方針の要約:
   - PC(5列)/tablet(3列, 768) は section CSS のまま。phone は 2列に再構成。
   - カードはFigma実データ通り横長(153.14×92.06px・サムネ左49×60+テキスト右)を維持。
     旧コメントには「縦積みへ切替」とあったが、get_metadata実測ではPCと同じ横並び
     構造だったため、下記カードCSSは横並びのまま（コメントのみ実態に合わせて訂正）。
   - 見出し(Delaディスプレイ)は clamp 下限で 375px でも溢れず、? は必ず読める。
   - 余白リズムは PC のトークン感（gap-24 見出し / py-100 系）を縮小継承。
   実SPデザイン納品後は、このファイルの中身だけを差し替える（PC/tablet と
   section CSS・HTML は触らない）。build 連結で sp/ は最後に来るため上書きが効く。
   ========================================================================== */

@media (max-width: 767px) {
  /* --- セクション余白: PC py-100 を phone 向けに詰める ------------------- */
  .s-semifinalists {
    padding-block-start: clamp(48px, 12vw, 72px);
    padding-block-end: clamp(32px, 7vw, 48px);
  }

  /* Figma実値: 見出し→グリッド間 gap-40px（get_metadata確認。従来clampは12px不足） */
  /* padding-inline: Frame153(293:6380) x=27.5, width=320（親幅375）→ 左右27.5px対称。
     旧clamp(16,5vw,24)は375pxで18.75pxとなり実測27.5pxと不一致（00-header/07-warmupと
     同じ「Frame76(09/10共通親)は27.5px固定」パターンに合わせて修正）。 */
  .s-semifinalists__inner {
    gap: 40px;
    padding-inline: 27.5px;
  }

  /* --- 見出しブロック（Figma実値: gap-8px） ----------------------------- */
  .s-semifinalists__head {
    gap: 8px;
  }

  /* SEMI / FINALISTS: Figma実値 text-[40px]（375px設計幅・Dela Gothic One）。
     旧clamp(40,13vw,56)は375pxで48.75pxとなりFigmaより約22%過大で、狭幅では
     FINALISTSが溢れてoverflow-x:clipで切れていた。375pxで40pxに一致し、
     それ以下はvwで縮小（320pxで≈34px・content265pxに収まる）、上限は40pxで固定。 */
  .s-semifinalists__title {
    font-size: clamp(30px, 10.7vw, 40px);
  }

  /* Figma実測(293:6383): 20px1行でテキストボックス高さ30px → 30/20=1.5。
     旧1.4は実測と不一致（get_design_context再確認で修正、PC側1.5と統一）。 */
  .s-semifinalists__lead-title {
    /* Figma実値 text-[20px]。375pxで20pxに一致するよう5.33vw。上限は22px
       （旧上限26pxは中〜大型端末でFigma20pxより過大だったため縮小）。 */
    font-size: clamp(18px, 5.33vw, 22px);
    line-height: 1.5;
  }

  /* リード: Figma実測(293:6384) text-[15px] leading-[2]（PC側と同じline-height:2）。
     旧14px/1.9は実測と不一致だったため修正。 */
  .s-semifinalists__lead {
    font-size: 15px;
    line-height: 2;
    text-align: center;
  }

  /* --- カードグリッド: 2列 ---------------------------------------------- */
  /* PCはflex-wrap+space-between。phoneは2列固定なのでjustifyを解除しgapで2列に。 */
  /* Figma実値: row-gap 16px（base側から継承、108.056-92.056=16で確認済み・再指定不要）。
     column-gap は実測13.73px（親幅320、カード幅153.14×2=306.27、残り13.73が列間）。
     旧・両方向gap16pxは列間だけ実測と不一致だったため column-gap のみ修正。 */
  .s-semifinalists__grid {
    justify-content: flex-start;
    column-gap: 13.73px;
  }

  /* Figma実データ: カード153.14×92.06px・横並び（アイコン左49×60＋テキスト右）。
     「2列だと文字が切れるため縦積みに変更」という旧判断はFigma実データ上は誤りだった
     （カード自体を横長にして横並びを維持する設計）ため、横並びに戻す。
     内訳の検算: 横=アイコン49+gap8+テキスト残り＋左右padding8×2=153（Figma153.14と一致）、
     縦=アイコン高60＋上下padding16×2=92（Figma92.06と一致）。 */
  .s-semifinalists__card {
    width: calc((100% - 13.73px) / 2); /* 2列（column-gap 13.73pxを差し引く。gap値と要一致） */
    flex-direction: row;
    align-items: center;
    padding: 16px 8px;
    gap: 8px;
  }

  .s-semifinalists__thumb {
    width: 49px;
    height: 60px;
  }

  .s-semifinalists__thumb img {
    /* アスペクト比はPC/tabletと同じ比率（横伸び防止）を維持。 */
    width: 17.85px;
    height: 30px;
  }

  .s-semifinalists__name {
    flex: 1 1 auto;
    min-width: 0;
    /* Figma実測(293:6393): text-[12px]（旧13pxは実測と不一致だったため修正）。
       widthはFigma上固定80pxだが、カード自体が可変幅のためここはflexのまま維持。 */
    font-size: 12px;
    /* Figma実測: テキストボックス高54px=3行×18px → line-height 1.5（旧1.3は不一致）。 */
    line-height: 1.5;
    text-align: left;
    /* Figmaは幅80px・word-break:break-word で「TO BE / ANNOUN / CED」の3行に折り返す。
       base側の keep-all（ANNOUNCEDを1語で保持）を上書きし、Figma同様に語中で折り返す。
       テキスト列は約80px（153-左右padding16-アイコン49-gap8）でFigmaと同幅、
       Hiragino Kaku Gothic系フォントもFigmaと一致するため同じ3行に割れる。 */
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* sp/10-finalists.css */
/* ==========================================================================
   sp/10-finalists — FINALISTS ＋ 詳細ページ導線（phone tier ≤767px）
   --------------------------------------------------------------------------
   SP方針の要約:
   - PC(6列)/tablet(3列, 768) は section CSS のまま。phone は 2列に再構成。
   - カードは元から縦積み（サムネ上+TO BE ANNOUNCED下）。潰さず ? を読ませる。
   - 見出し(Delaディスプレイ)は clamp 下限で 375px でも溢れない。
   - バナー: 768 で既に縦積み（section CSS）。phone では余白/角丸/本文サイズを詰め、
     CTA「詳細ページを見る」ボタンをタップ領域 44px+ に。
   - 余白リズムは PC のトークン感（gap-24 見出し / py-100 系）を縮小継承。
   実SPデザイン納品後は、このファイルの中身だけを差し替える（PC/tablet と
   section CSS・HTML は触らない）。build 連結で sp/ は最後に来るため上書きが効く。
   ========================================================================== */

@media (max-width: 767px) {
  /* --- セクション余白: PC py 系を phone 向けに詰める -------------------- */
  /* Figma実測(SP 293:6379): 09末尾→区切り線頭=24px。線自体はmargin無しなので
     この padding-block-start がそのまま「09との間隔」になる（get_metadata確認）。 */
  .s-finalists {
    padding-block-start: 24px;
    padding-block-end: clamp(48px, 12vw, 72px);
  }

  /* Figma実測(SP 293:6547): 見出し→グリッド間・グリッド→バナー間ともに gap-40px。 */
  .s-finalists__inner {
    gap: 40px;
    padding-inline: 27.5px; /* Figma実測: フレーム幅375、コンテンツ幅320の対称ガター */
  }

  /* 09との区切り線: Figma実測(293:6546)で高さ60px。
     区切り線→見出し間は本来24pxだが、.s-finalists__inner の gap(40px)が
     全ブロック共通のため、負のmarginで差分16pxを相殺し24pxに補正する。 */
  .s-finalists__divider {
    height: 60px;
    margin-bottom: -16px;
  }

  /* --- 見出しブロック（Figma実値: gap-8px） ----------------------------- */
  .s-finalists__head {
    gap: 8px;
  }

  /* Figma実測(293:6549): 40px・1行(leading-none)。旧clampは13vwで48px超に肥大していたため固定値化。
     w-full/text-center指定なし＝左寄せ（サブタイトル/リードのみ中央）。PC head の
     text-align:center を打ち消し、FINALISTSをコンテンツ左端に揃える。 */
  .s-finalists__title {
    font-size: 40px;
    text-align: left;
  }

  /* Figma実測(293:6550): 20px・1行(nowrap)。旧clampは26pxまで肥大していたため固定値化 */
  .s-finalists__lead-title {
    font-size: 20px;
    line-height: 1.5;
  }

  /* Figma実測(293:6551): 15px・leading-2（旧14px/1.9はいずれも実値と不一致） */
  .s-finalists__lead {
    font-size: 15px;
    line-height: 2;
    text-align: center;
  }

  /* --- カードグリッド: 2列 ---------------------------------------------- */
  /* Figma実測(293:6552): row-gap 16px（246-230）・column-gap 8px（164-156）で
     PC/tabletの16px一律とは異なる（get_metadata確認）。 */
  .s-finalists__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 8px;
  }

  .s-finalists__card {
    padding: 16px 8px; /* Figma実測(293:6553): px-8 py-16 */
  }

  /* Figma実値: サムネ113.75×140px（アスペクト比0.8125はsection CSSの130/160と同一のため
     aspect-ratioは変更不要。幅の上限だけFigma実値に近づける） */
  .s-finalists__thumb {
    max-width: 114px;
  }

  /* Figma実測(293:6557): ?アイコンは70×70（サムネ113.75幅に対しPCの0.875倍縮小）。
     指定なしだとsection CSSの80pxが残り相対的に大きく見えてしまう。 */
  .s-finalists__thumb img {
    height: 70px;
  }

  /* 旧13px上書きはFigma実値(14px)と不一致だったため撤去。line-height 1.5は
     section CSS側の修正値をそのまま継承する。 */

  /* --- 詳細ページ導線バナー（768 で縦積み済み。phone は詰め＋タップ確保） - */
  /* Figma実測(293:6613): p-30(四辺均等)・rounded-20（PC/tabletと同じ、旧16pxは誤り） */
  .s-finalists__banner {
    padding: 30px;
    gap: 16px;
  }

  /* Figma実測(293:6615): 18px・leading-normal。ブロック高108px÷4行÷18px=1.5 */
  .s-finalists__banner-lead {
    font-size: 18px;
    line-height: 1.5;
  }

  /* Figma実測(293:6616): 16px・leading-normal・左寄せ。ブロック高96px÷4行÷16px=1.5。
     text-alignはPC/tabletでcenterに変更したためSPでは左寄せに戻す。 */
  .s-finalists__banner-desc {
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
  }

  /* Figma実測(293:6617): ボタンは全幅ではなく内容幅(約188px)で左寄せ・高さ39px(px-16 py-8)。
     768のstretch/中央寄せ・旧SPのmin-height48/padding12を打ち消して内容幅の左寄せに戻す。 */
  .s-finalists__banner-btn {
    align-self: flex-start;
    justify-content: flex-start;
    min-height: 0;
    padding: 8px 16px;
  }

  .s-finalists__banner-btn span {
    font-size: 16px;
  }
}

/* sp/11-ticket.css */
/* ==========================================================================
   sp/11-ticket.css — TICKET セクションの phone tier（≤767px）専用上書き
   --------------------------------------------------------------------------
   SP方針の要約:
   - PC/tabletの3カラム行（左ラベル / 本文＋ピル / 予約ボタン）は section CSS の
     `@media (max-width:768px)` で既に1カラム縦積みになる。ここではその縦積みを
     phone実機向けに整える（中央寄せ・余白リズム・タップ領域）。
   - TICKET 2パネルはSP1カラム。予約ボタンはFigma実測(96×42)通りコンテンツ幅・中央寄せ
     （下部の挑戦者CTAボタンのみFigma実測通りフル幅）。
   - 見出しTICKET/締めコピーは実機幅で詰まらないようスケール下限を引き上げ、
     セクション上下パディングと群間gapを実機比率に圧縮。
   - 横スクロール皆無・文字切れ/被り解消。色は共有トークンのまま維持。
   注意: 実SPデザイン納品後は、このファイルの中身だけを Figma SPノード準拠に
         差し替える（section CSS / HTML / tokens は触らない）。
   ========================================================================== */

@media (max-width: 767px) {
  /* --- 背景: SP専用書き出し（ticket-bg-sp.webp）に差し替え --------------
     PC用ticket-bg.webp(1280x1152・横長)をそのままcoverで使うと、375px幅の
     縦長ボックスでは意図と違う部分が切り取られるため、SPノード(296:8043)の
     背景レイヤーをFigma実測位置で再合成した専用アセットに差し替える。
     生成方法: 色面(Rectangle 399, #F45D11)とマスク前の生ブラシテクスチャ
     (gareth-david写真レイヤー296:8283を単体書き出し)を、クリーンな余白帯
     (見出し群とCTA帯の間、テキストが被らない実測領域)から算出した実際の
     相対オフセットでmultiply合成（Figmaの「Mask group」直書き出しは
     空白/透過になる既知の制限の回避策）。ブラシは下端基準なので、
     PCと同じcenter bottom / coverを維持。 */
  .s-ticket__texture {
    background-image: url("../assets/ticket-bg-sp.webp");
    background-position: center bottom;
    background-size: cover;
  }

  /* --- セクション枠: 実機の上下余白を圧縮しつつリズムを保つ -------------
     SPノード(296:8043, 375px幅)実測: Frame77 padding-top/bottom=60/60,
     padding-left/right≈28/27(丸め誤差)。@375でちょうど実値になるよう
     vw係数を逆算（60/375=16vw, 28/375≈7.5vw）。旧係数(13vw/6vw)は@375で
     約48.75px/22.5pxにしかならず実値(60/28)に届いていなかった。 */
  .s-ticket {
    padding-block: clamp(44px, 16vw, 60px);
    padding-inline: clamp(20px, 7.5vw, 28px);
  }

  /* head↔list の間隔。SPノード実測: Frame157(head,h78)→Frame302(list,y102) の
     gap=24（旧clamp(48,13vw,72)は「head↔list→CTA」を1つのgapとして扱った
     誤った値。実データはFigma側でも2階層(head+list groupとCTA groupが別gap)
     なので、list↔cta間の追加距離は下の.s-ticket__cta margin-topで別途足す） */
  .s-ticket__inner {
    gap: clamp(16px, 6.4vw, 24px);
  }

  /* --- 見出し ---------------------------------------------------------- */
  .s-ticket__head {
    /* Figma実測: Frame157内 TICKET(h40)→lead(y48) のgap=8（旧16pxは未計測） */
    gap: 8px;
  }

  .s-ticket__title {
    /* Figma実値40px固定（旧clamp52-72pxはFigmaよりかなり大きかったため修正） */
    font-size: 40px;
  }

  .s-ticket__lead {
    /* Figma実値20px固定。320px等の極狭幅のみ僅かに縮める安全弁としてclamp化 */
    font-size: clamp(18px, 5vw, 20px);
    /* Figma実測: 296:8052 text bbox height=30(@20px) → 30/20=1.5（旧1.4は未計測） */
    line-height: 1.5;
  }

  /* --- チケット2枠リスト ----------------------------------------------
     Figma実測: Frame302内 divider→row→divider→row→divider は全て gap=24
     （旧28pxは未計測。値は.s-ticket__inner等の他gapとの類推による概算だった） */
  .s-ticket__list {
    gap: 24px;
  }

  /* 1枠内: ラベル → 本文 → 予約ボタン の縦積み（section側で既にwrap済み） */
  .s-ticket__row {
    gap: 16px;
  }

  /* ラベル群（LIVE @松山 / ONLINE配信 とサブコピー）はSPでは中央寄せ。
     tablet(@768)側で align-items:flex-start; text-align:left にしているが、
     Figma SPノード(296:8056/8075)は items-center・text-center・タイトルもサブも
     水平中央。ここでその左寄せを打ち消して中央寄せに戻す（PC/tabletは不変）。 */
  .s-ticket__rowHead {
    align-items: center;
    text-align: center;
  }

  .s-ticket__rowTitle {
    /* Figma実値32px（Dela Gothic, leading1.2）。@375で32pxに正確に届くよう係数調整 */
    font-size: clamp(26px, 8.5vw, 32px);
  }

  /* 本文/ピルの縦gap。Figma実測: Frame159(pills,h64)→desc(y72) の gap=8
     （PC/tabletは.s-ticket__rowBodyのgap:16pxを継承するが、SPは8pxが実値） */
  .s-ticket__rowBody {
    gap: 8px;
  }

  .s-ticket__rowSub {
    /* Figma実値18px・Hiragino W6（=600）。旧はtoken由来の500で細かったため実値に合わせる */
    font-size: 18px;
    font-weight: 600;
  }

  .s-ticket__desc {
    /* Figma実値16px・Hiragino W6（=600）・leading-2（行間2.0）。
       旧line-height1.9/weight500はFigma実測(2.0/W6)と不一致だったため合わせる */
    font-size: 16px;
    font-weight: 600;
    line-height: 2;
  }

  /* ピル: 折返し前提で行間 gap を確保。タップ余白も上げる。
     Figma SP実データでは見出し直下に「ピル→本文」の順で並ぶが、
     HTML(全ブレークポイント共通)は「本文→ピル」順のため、SPのみ
     flexのorderで表示順を入れ替える（.s-ticket__rowBodyは既存の
     display:flex; flex-direction:columnを利用。HTML/PC/tabletは触らない）。
     gapはFigma実測: Frame57→Frame58 のx方向gap=8、折返し時の行間(y方向)も
     Frame59のy方向gap=8で一致（旧10px/12pxは未計測の概算値）。 */
  .s-ticket__pills {
    gap: 8px;
    order: -1;
    /* Figma SP(296:8061/8080)は pills を justify-center。2行に折返した際も
       各行が水平中央に揃う（例: 3個目「観覧無料」「アーカイブあり」が2行目中央）。
       PC/tabletは左寄せ（section CSS）のまま、SPのみ中央寄せに上書き。 */
    justify-content: center;
  }

  .s-ticket__pill {
    /* Figma実値14px（旧13pxから実値に合わせる。色は既に白背景+accent-redで一致）。
       padding(4px 24px)はPC/tabletとFigma実測が完全一致(4px/24px)のため
       SP独自の上書き(6px 16px・未計測の概算値)は削除しPCの値をそのまま継承する。 */
    font-size: 14px;
  }

  /* 予約ボタン: Figma実測(296:8068)ではPCと同一サイズ(96×42・padding 8px/16px)で
     フル幅ではなくコンテンツ幅のまま中央寄せ（tablet側の align-self:flex-start を
     上書きし中央寄せのみ変更。サイズ関連(width/padding/font-size)はPCの値が
     実測と一致するため上書きしない＝旧「フル幅化」は未計測のUX判断で実データと不一致だった） */
  /* .s-ticket__row は横方向 flex-wrap のため align-self（縦軸）では中央に寄らない。
     予約ボタンは自身のラップ行で単独になるので margin-inline:auto で水平中央に寄せる。 */
  .s-ticket__reserve {
    align-self: center;
    margin-inline: auto;
  }

  /* --- 締めコピー＋CTA -------------------------------------------------
     内側(コピー↔ボタン)gapはFigma実測(296:8093): text(h84)→button(y108) の
     gap=24（旧20pxは未計測）。外側(list群↔cta群)の間隔はFigma実測で80だが、
     .s-ticket__inner の gap(head↔list用、最大24)が list↔cta 間にも自動で
     効いてしまう（PC同様、flexboxのgapとmarginは加算され相殺されないため）。
     ここではlist↔cta間の合計80からinnerのgap分を差し引いた差分のみを
     margin-topに載せ、二重加算を解消して合計を80へ一致させる。 */
  .s-ticket__cta {
    gap: 24px;
    margin-top: calc(clamp(48px, 21.4vw, 80px) - clamp(16px, 6.4vw, 24px));
  }

  .s-ticket__ctaCopy {
    /* Figma実値28px。375px幅でちょうど28pxになるよう係数調整、極狭幅は下限で保護 */
    font-size: clamp(22px, 7.5vw, 28px);
    /* Figma実測: 296:8094 text bbox height=84(@28px・2行) → 84/2/28=1.5（旧1.4は未計測） */
    line-height: 1.5;
  }

  /* CTAボタン: 実機幅でフル幅・タップ領域48px+・折返しても中央に収まる
     375px実機ではテキスト自然幅(約260px)に対し利用可能幅がわずか4px不足し、
     「…上げる」の「る」だけが2行目に孤立折返しするバグがあったため、
     gap/padding-inlineを詰めて1行に収める（font-size 20pxはFigma実値のため不変）。 */
  .s-ticket__ctaBtn {
    width: 100%;
    max-width: 360px;
    /* Figma SP(296:8095)は px-16 py-8・gap-16 で、テキストとarrowが
       ボタン内容幅ぴったり(=フル幅)に収まるレイアウト。すなわち
       「テキスト左端・arrow右端」= space-between の見た目。旧実装は
       justify-center（テキスト+arrowを中央で密着）で、Figmaの
       左テキスト/右arrowと配置が異なっていたため space-between に修正。 */
    justify-content: space-between;
    /* Figma実値 px-16 py-8（ボタン高さ約45px）。旧padding14px/min-height52pxは
       実測(py-8/h45)より高かったため実値に合わせる */
    padding: 8px 16px;
    gap: 8px;
    /* Figma実値20px */
    font-size: 20px;
    white-space: nowrap;
  }
}

/* sp/12-partner.css */
/* ==========================================================================
   sp/12-partner.css — PARTNER CONTESTS セクションの phone tier（≤767px）専用上書き
   --------------------------------------------------------------------------
   Figma SP実データ確認済み（node 296:8268, fileKey YPTo3Fa97PQ5CTvpY6NxfW, 375×874）:
   - Frame148(見出し) x=27.5 y=60 w=320 h=254 / Frame160(グリッド) x=27.5 y=338 w=320 h=476
     → padding-inline 27.5px対称、padding-block 60px対称、head→grid gap=338-(60+254)=24px
   - 見出し内gap: title(h80)→lead(y88)=8px, lead(h30,y88+30=118)→desc(y126)=8px（両方8px均等）
   - title: Dela Gothic One 40px #f45d11 line-height:1（2行, box80=40×2）
   - lead: Hiragino StdN W8 20px 白 line-height:1.5（単行, box30=20×1.5）
   - desc: Hiragino ProN W6 16px 白 line-height:2（4行, box128=16×2×4）
   - ロゴ枠: 150×104px・gap20px・2列4行、白背景・角丸10px（PC/tabletと共通のaspect-ratio 260/180で近似可、誤差0.15%のためoverride不要）
   注意: 実SPデザイン納品後は、このファイルの中身だけを Figma SPノード準拠に
         差し替える（section CSS / HTML / tokens は触らない）。
   ========================================================================== */

@media (max-width: 767px) {
  /* --- セクション枠: 実測値60px対称（375px基準、16vwで60px定点） -------- */
  .s-partner {
    padding-block: clamp(48px, 16vw, 60px);
    padding-inline: clamp(20px, 7.33vw, 27.5px);
  }

  /* 見出し群 → グリッド の間隔（実測24px） */
  .s-partner__inner {
    gap: 24px;
  }

  /* --- 見出し（実測: title→lead 8px, lead→desc 8px） -------------------- */
  .s-partner__head {
    gap: 8px;
  }

  .s-partner__title {
    /* Figma実値40px固定（375px基準、10.7vwで40px定点）。line-height:1は
       section CSS側で共通指定済みのため上書き不要。 */
    font-size: clamp(34px, 10.7vw, 40px);
  }

  /* Figma実値20px・line-height:1.5（単行表示、box幅280px<コンテナ幅320pxで
     余裕あり。旧実装は22pxへの誤った補正だったため実測値へ修正）。 */
  .s-partner__lead {
    font-size: clamp(18px, 5.33vw, 20px);
    line-height: 1.5;
  }

  /* Figma実値16px・line-height:2（4行, box128px = 16×2×4で確定） */
  .s-partner__desc {
    font-size: 16px;
    line-height: 2;
  }

  /* --- ロゴ枠グリッド: SP2列を確定（実測値150×104px・gap20pxと一致） ---- */
  .s-partner__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* カード比率: Figma SP実値150×104pxをそのまま指定（section CSSの
     260/180近似を上書きし、SPでは正確に150:104に）。 */
  .s-partner__media,
  .s-partner__slot {
    aspect-ratio: 150 / 104;
    padding: 12px;
  }
  .s-partner__media--photo { padding: 0; }
}

/* sp/13-news.css */
/* ============================================================
   13-news : NEWS 一覧 — phone tier（≤767px）SP上書き
   ------------------------------------------------------------
   SP方針の要約:
   - 1行(記事)を「日付＋タグ」を上段、見出しを下段に縦積みし、
     斜め矢印は右上に添える（PCの 4カラムグリッドをSPで2段組へ再構成）。
   - 見出しフォントは16px以上を確保（本文可読性）。日付/タグも詰まり回避。
   - 見出し英大文字 NEWS はセクション横幅に収める（clampの下限で処理済）。
   - タップ領域は行リンク全体が対象。padding-block を拡げ 44px+ を確保。
   ------------------------------------------------------------
   実デザイン納品後（2026-07-08以降）は、このファイルの中身だけを
   Figma の SPノード実値に差し替える（PC/tablet 側は一切触らない）。
   ============================================================ */

@media (max-width: 767px) {
  /* --- セクション余白：PCトークン感（py 100px）をSPで詰める ------ */
  /* Figma実値: py-60px固定（design_context確認済み） */
  .s-news {
    padding-block: 60px;
  }

  /* 横ガター: Figma実測 Frame148 x=27.5, width=320（親幅375）→ 左右27.5px対称。
     近隣SP（09/10/12/00/07）と揃え、12-partner同様のfluid化で狭幅端末も安全。 */
  .s-news__inner {
    padding-inline: clamp(20px, 7.33vw, 27.5px);
  }

  /* --- 見出し ------------------------------------------------- */
  /* Figma実値: head内gap-8px、head→一覧の間隔40px（get_metadata確認） */
  .s-news__head {
    gap: 8px;
    margin-bottom: 40px;
  }

  .s-news__en {
    /* Figma実値40px固定（SPノード296:8103, get_metadata確認済）。
       12-partnerと同一パターンでclamp化: 375px基準で上限40pxにキャップ */
    font-size: clamp(34px, 10.7vw, 40px);
  }

  .s-news__ja {
    /* Figma実値20px固定（SPノード296:8104, box高さ30px=20px×1.5で確認） */
    font-size: clamp(18px, 5.33vw, 20px);
  }

  /* --- 一覧行：日付+タグ / 見出し の2段組 -------------------- */
  .s-news__link {
    /* 上段: date tag ... arrow / 下段: title 全幅 */
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "date tag  .    arrow"
      "ttl  ttl  ttl  ttl";
    align-items: center;
    /* Figma実値: date-tag間gap8px（node 303:6）、header行→title間gap8px
       （Frame167 node 296:8108のflex-col gap-8）。旧12px/10pxは実値よりやや広め */
    column-gap: 8px;
    row-gap: 8px;
    /* Figma実測: 罫線ピッチ166px（Vector13 y=0 → Vector17 y=166）、
       記事コンテンツ高118px → 上下余白 各24px。行全体で44px+のタップ領域も満たす */
    padding-block: 24px;
  }

  .s-news__date {
    grid-area: date;
    /* Figma実値18px（PC baseと同値）。旧15pxはやや小さめだったため実値へ修正 */
    font-size: 18px;
    white-space: nowrap;
  }

  .s-news__tag {
    grid-area: tag;
    /* Figma実値: 幅100px固定（section CSSの480pxブロックで84pxに詰められて
       いたため、実値へ明示的に戻す。PC baseと同じ100px/14px/4px 8pxに揃える） */
    width: 100px;
    min-width: 0;
    padding: 4px 8px;
    font-size: 14px;
  }

  .s-news__arrow {
    grid-area: arrow;
    align-self: center;
    /* Figma実測: Group111 16×16、右端寄せ（x=304, 304+16=320）。行リンク全体が
       タップ対象のため矢印自体は実値16pxで揃える */
    width: 16px;
    height: 16px;
  }

  .s-news__title {
    grid-area: ttl;
    /* Figma実値18px（PC baseと同値）。旧16pxはやや小さめだったため実値へ修正 */
    font-size: 18px;
    /* Figma実測: title box 81px / 3行 = 27px = 18×1.5（旧1.6はやや広め） */
    line-height: 1.5;
  }
}

/* sp/14-footer-cta.css */
/* ============================================================
   14-footer-cta : フッターCTA「頂点、空席。」— phone tier（≤767px）SP上書き
   ------------------------------------------------------------
   SP方針の要約:
   - 大見出し「頂点、空席。」は縦2段を維持しつつ幅に収める（Figma実値100px固定）。
     句読点（読点・句点）が右にはみ出して切れないよう nobr制御を維持。
   - 右ブロック（日本語コピー＋CTA）は1カラム縦積み。
   - 装飾テキスト「Win the Top of Ehime!!」は、Figma SP(node 303:54)では
     2行「Win the Top / of Ehime!!」を90度回転させた右端の縦帯。PC用の
     .s-footcta__en は3行区切り(Win the / Top of / Ehime!!)で列区切りが異なるため、
     SP専用の2行要素 .s-footcta__en-sp（HTMLに追加・section CSSでdefault非表示）を
     writing-mode:vertical-rl で縦帯化し、PCの .s-footcta__en はSPでは非表示にする。
   - CTAボタン「名乗りを上げる」はSPで潰れず、タップ領域 44px+ を確保。
     ボタン内テキストは折り返さず、矢印▷は右に維持。
   - 背景ブラシ（金グランジ）は角配置のまま。SPでは主張を弱め本文優先。
   ------------------------------------------------------------
   実SPデザイン（Figma v2 fileKey YPTo3Fa97PQ5CTvpY6NxfW, SPフレーム 284:5277）
   準拠に更新済み（2026-07-08）。このファイルの中身だけを引き続き調整する
   （PC/tablet 側・HTMLは一切触らない）。
   ============================================================ */

@media (max-width: 767px) {
  /* --- 背景: SP専用テクスチャ書き出し ---------------------------
     PC用 footer-cta-bg.webp（1280×562横長）を cover のまま流用すると、
     375px縦長ボックスに詰めた際にPCの構図と全く違う部分が切り取られる。
     SPノード(296:8147, fileKey YPTo3Fa97PQ5CTvpY6NxfW)から専用に書き出した
     footer-cta-bg-sp.webp（750×932）に差し替える。 */
  .s-footcta {
    /* 金茶の温かみを保ちつつ、ごく薄いクリームウォッシュ(0.12)で「少し濃い」を軽減。
       0.34は薄すぎたため撤回。heroと同量(0.12)で統一。 */
    background-image:
      linear-gradient(rgba(247, 243, 234, 0.12), rgba(247, 243, 234, 0.12)),
      url("../assets/footer-cta-bg-sp.webp");
  }

  /* --- セクション余白 ---------------------------------------- */
  /* Figma実測（node 296:8147 = 375×466）: 見出し「頂点、」top=60px、
     ボタン下端=406px（=344+62）→ 下余白 466-406=60px。上下対称の60px。
     旧clamp(40,11vw,56)は375px時41pxで、見出しが上に寄り背景クロップもズレていた。 */
  .s-footcta {
    padding-block: 60px;
  }

  /* 縦積みは section CSS の max-width:900px で確立済み。
     Figma実測: コンテンツ左端 x=28px（見出し・コピー・ボタンすべてx=28）。
     .inner のpadding-inline(375pxで20px)を28pxへ上書きし左右ガターをFigmaへ合わせる
     （ボタン幅も 375-56=319px ≒ Figmaのボタン幅320pxに一致）。
     見出し(.s-footcta__lead)とコピー塊(.s-footcta__body)の縦間隔は、
     「空席。」box下端 60+104*2=268 → 「2027年3月、」top=272 で gap=4px。 */
  .s-footcta__inner {
    padding-inline: 28px;
    gap: 4px;
  }

  /* --- 左：大見出し「頂点、空席。」 -------------------------- */
  /* Figma実値: 「頂点、」「空席。」ともに100px固定・2段の行送り104px
     （「空席。」top16941.55 - 「頂点、」top16937.55... 実測差104px）。
     line-height 1.04 で段間をFigma実値へ合わせる。360/375/390で
     3文字(頂/点/、)nowrapが収まることを確認済み（section CSSの
     clamp下限84pxより実値100pxの方が大きいため、この上書きが必要）。 */
  .s-footcta__lead {
    font-size: 100px;
    line-height: 1.04;
  }
  /* 読点・句点で改行させず、各段を1行に保つ（切れ・被り防止） */
  .s-footcta__lead-red,
  .s-footcta__lead-dark {
    white-space: nowrap;
  }

  /* --- 右：日本語コピー＋ボタン（1カラム縦積み） ------------ */
  /* section CSS の max-width:600px と同じ1カラム化を phone tier で明示。
     Win the Top of Ehime!! (.s-footcta__en) は下記で position:absolute の
     独立要素として切り離すため、ここでは copy1/copy2/btn の3行のみ配置する。 */
  /* row-gapもget_metadata実測へ修正: copy1 bottom294→copy2 top298(gap4)、
     copy2 bottom336→btn top344(gap8)。row-gap:4pxとし、btnの既存
     margin-top:4px（下記）と合算して2つ目のgapを4+4=8pxに正しく再現する
     （旧clamp(12px,3.4vw,18px)は375px幅で12.75pxとなり両方とも過大だった）。 */
  .s-footcta__body {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  /* 装飾テキスト「Win the Top of Ehime!!」の縦帯。
     Figma SP(node 303:54)は 2行「Win the Top / of Ehime!!」を90度回転させた
     縦帯（右列=Win the Top、左列=of Ehime!!、右端x=347=28px from右端、top=見出しと同じ60px、
     幅70px・高さ190px、Futura Bold 28px #f4a632）。
     PC用の .s-footcta__en は3行「Win the / Top of / Ehime!!」で列区切りが異なるため
     SPでは隠し、専用の2行要素 .s-footcta__en-sp を writing-mode:vertical-rl で縦帯化する
     （vertical-rlは1行目を最右列に置くのでFigmaの列順と一致）。
     .s-footcta__inner(position:relative)基準の absolute。 */
  .s-footcta__en {
    display: none;
  }

  .s-footcta__en-sp {
    display: block;
    position: absolute;
    top: 0;
    right: 28px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: "Futura", "Century Gothic", var(--font-jp);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.26;
    color: var(--color-accent-orange);
    white-space: nowrap;
  }

  /* 「2027年3月、愛媛の頂点で会おう。」はdesign-refs/sp/14-footer-cta.pngでは
     単行表示。既存clamp(22-30px)のままだと375px幅で自然長443px相当となり
     コンテナ幅(320px)を超えて句の途中(「2027年3月、」の直後)で強制改行してしまう
     ため、単行に収まる18px程度へ縮小し、HTML内の<br>も無効化する
     （HTML/PC/tabletは触らずSPのみの上書き）。
     font-size: get_design_context実測は18px（node 303:48）。4.8vwで375px時に
     ちょうど18.0pxとなるよう調整（旧4.9vwは18.375pxとわずかに超過）。
     line-height: 実測は1.2（旧1.4は根拠なく設定されており段間が広がりすぎていた
     ため、box高さ22px=18*1.2の実値に合わせて修正）。 */
  .s-footcta__copy1 {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(16px, 4.8vw, 19px);
    line-height: 1.2;
  }
  .s-footcta__copy1 br {
    display: none;
  }

  /* 「そう、ここから始まる。」font-size実測30px（node 303:55）。Figmaは1行。
     ヒラギノなら30pxで1行に収まるが、フォント代替環境で幅が膨らむと2行に折返す。
     white-space:nowrap で1行を保証しつつ、min()で画面幅に対して溢れない上限に抑える
     （11字なので (100vw - 左右padding) / 11.2 を30pxの上限内でスケール）。 */
  .s-footcta__copy2 {
    grid-column: 1;
    grid-row: 2;
    white-space: nowrap;
    font-size: min(30px, calc((100vw - 60px) / 11.2));
    line-height: 1.26;
  }

  /* --- CTAボタン「名乗りを上げる」 -------------------------- */
  .s-footcta__btn {
    grid-column: 1;
    grid-row: 3;
    /* 横幅いっぱい寄りにして押しやすく。中身は中央寄せ */
    justify-self: stretch;
    justify-content: center;
    /* Figma実測gap=16px（node 303:56）。4.27vwで375px時にちょうど16.0px
       （旧4vwは15pxとわずかに過小）。padding(14px 20px)はFigma実値
       (py8/px16)より広いが、タップ領域44px+確保のための意図的な拡大
       （コメントの通り既存方針を維持）。 */
    gap: clamp(12px, 4.27vw, 20px);
    /* タップ領域 44px+ を確保（上下パディング増） */
    padding: 14px 20px;
    margin-top: 4px;
  }

  .s-footcta__btn-text {
    /* 旧実測32px（7字「名乗りを上げる」基準）→ 12字「まずは応募要項を受け取る」への
       文言変更（2026-07-09）に伴い縮小。375px時 5.4vw=20.25px で12字+矢印が1行に収まる。
       折り返し禁止維持。 */
    font-size: clamp(16px, 5.4vw, 26px);
    white-space: nowrap;
  }

  .s-footcta__btn-arrow {
    /* Figma実測 Union 24×21.818（node 303:58）。6.4vwで375px時にちょうど24.0px
       （旧6vwは22.5pxとやや過小）。 */
    width: clamp(22px, 6.4vw, 30px);
  }

  /* --- 背景：SP専用フラット画像(footer-cta-bg-sp.webp)に差し替え済み
     （本ファイル冒頭を参照）。position/size/repeatはPC共通ルール
     （background-size:cover / position:left top / no-repeat）を継承。 */
}

/* sp/15-footer.css */
/* ============================================================
   15-footer : フッター（運営情報＋サイトマップ）— phone tier（≤767px）SP上書き
   ------------------------------------------------------------
   SP方針の要約:
   - PCの「左:運営情報 / 右:サイトマップ」2カラム横並びを、phoneでは縦積みに。
   - サイトマップは2カラム→SP1カラム（2つの nav リストを縦に連結）。
     区切りは左縦線ではなく上の水平線に付け替える。
   - ロゴ＋事務局テキストは折り返し許容。文字は詰まらせない。
   - リンクのタップ領域を 44px 相当まで拡大（縦の余白を広げる）。
   - 横スクロール皆無（nowrap を解除して長いラベルも折り返す）。
   ------------------------------------------------------------
   実SPデザイン（Figma v2 fileKey YPTo3Fa97PQ5CTvpY6NxfW, node 296:8164）
   準拠で以下を追加（2026-07-08）:
   - サイトマップ（ナビ2列・10リンク）はSPフレーム終端まで確認しても
     Figma上に存在しない。HTMLは削除せず display:none で非表示化のみ行う
     （将来の仕様変更で復活させやすくするため）。
     → 意図的な削除か運営側の確認を推奨（申し送り事項）。
   - 運営事務局情報／主催・運営／POWERED BY EGF／コピーライトは
     Figma実データで右寄せ（text-right / justify-end）……と前回セッションでは
     get_design_context のTailwindクラスのみを根拠に判断していたが、
     下記2026-07-08再監査で誤りと判明（右寄せは誤り、実際は左寄せ）。

   2026-07-08 再監査（get_metadata/get_design_context 再実測 ＋ get_screenshot
   による目視確認で以下4件を修正）:
   - `.s-footer` の padding-block は 40px ではなく **24px** が正
     （Frame173 実測 py-[24px]。高さ計算でも 329(全体) − 281(中身Frame363) = 48 ÷ 2 = 24 で一致）。
   - `.s-footer__info` の縦gapはPCの24pxのままオーバーライドされていなかったが、
     SP実測（Frame363: 子要素間のy差分）は **16px** が正
     （logo+office 122 → hr 138 → org 154 → hr 247 → copy 263、すべて差16）。
   - `.s-footer__brand`（ロゴ＋運営事務局）はPCでは横並びだが、
     SP実測（Frame362: `flex flex-col gap-[16px] items-start justify-center`）は
     **縦積み**（ロゴが上・事務局テキストが下、gap16、左揃え）。
     旧実装はrowのまま`gap:20px`のみ上書きしていたため、テキスト幅の関係で
     flex-wrapによる折返しで偶然近い見た目になっていたが、gap値(20≠16)と
     構造（wrapによる折返し依存）の両方がFigma実値と不一致だった。
   - **前回セッションが追加した「右寄せ」系の上書き4件（office/org-line/
     powered/copy）はすべて誤りと判明したため撤去した。**
     get_design_context のコード出力は `text-right`/`justify-end` クラスを
     報告していたが、Figmaの当該ボックスはいずれも「hug contents」
     （内容ちょうどのサイズ）でスラック（余白）が無いため、そのクラスの
     有無で見た目が変わらない/検証できないケースだった。
     get_screenshot で node 296:8164 / 296:8215（office）／PC側 233:358 を
     直接ピクセル比較し、また design-refs/sp/15-footer.png（正式リファレンス
     画像）とも突き合わせた結果、実際は**全項目が左揃え**（ロゴ・事務局情報・
     主催運営・POWERED BY EGF・コピーライトすべて同じ左端に揃う）と確認。
     一方、現行実装は `.s-footer__org`/`.s-footer__info` が
     align-items:stretch（デフォルト）のため各行がフッター全幅にストレッチ
     され、「右寄せ」上書きを入れると実装上は本当に右へ寄ってしまい
     Figma実値と乖離する（Figmaはhug contentsで常に左端起点のため）。
     よって右寄せ上書きは全撤去し、デフォルト（左揃え）のままとする。
   実デザイン納品後は、このファイルの中身だけを
   Figma の SPノード実値に差し替える（PC/tablet 側は一切触らない）。
   ============================================================ */

@media (max-width: 767px) {
  /* --- 全体：縦積み ------------------------------------------ */
  .s-footer {
    padding-block: 24px; /* Figma実測 py-[24px]（旧: 40pxは誤り） */
  }

  .s-footer__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    /* Figma実測: コンテンツは幅320pxのブロックを375px枠に中央寄せ（左右27.5px余白）。
       .inner の左右20pxパディングを解除し、下記 .s-footer__info 側で320px中央寄せを作る。 */
    padding-inline: 0;
  }

  /* Figma実測（Frame363 = 296:8166）: 運営情報ブロックは w-[320px] を中央寄せ。
     旧実装は .inner の20pxパディングで左端フラッシュ・hrが約335px幅になり、
     Figma（内容がやや内側の中央320pxブロック・hr320px）と乖離していた。
     ユーザーQA「右寄せ配置」= この左端フラッシュを中央寄せブロックへ寄せる指摘。
     内容そのものはFigma通り左揃えのまま（info@/©等の短文は左端に揃う）。
     - 縦gapは16px（PCの24pxを上書き）。
     - 幅320px・中央寄せ。小型端末では左右最低20px確保のため min() でクランプ。 */
  .s-footer__info {
    gap: 16px;
    width: min(320px, 100% - 40px);
    margin-inline: auto;
  }

  /* --- 左：運営情報 ------------------------------------------ */
  /* Figma実測（Frame362）: ロゴ上・事務局テキスト下の縦積み、gap16、左揃え
     （旧: row+gap20pxはFigma不一致。wrapによる折返し依存だった） */
  .s-footer__brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* 運営事務局情報／主催運営／POWERED BY EGF／コピーライトはすべて左揃え
     （デフォルトのまま、上書き不要）。get_screenshotでの目視確認により、
     旧実装が追加していた text-align:right / justify-content:flex-end は
     全て誤りと判明したため撤去済み（詳細は上部コメント参照）。 */

  /* --- 右：サイトマップ -------------------------------------- */
  /* Figma SPフレーム（296:8164）はy=17343.55〜17673（SPフレーム終端）で
     ぴったり終わっており、サイトマップ（ナビ2列・10リンク）が存在しない。
     HTMLは削除せず display:none のみで非表示化する（将来の仕様変更・
     ナビ復活に備え、以下の詳細スタイルはそのまま温存）。
     申し送り: サイトマップをSPで非表示にした。Figma上に存在しないための
     対応だが、意図的な削除か確認推奨。 */
  .s-footer__sitemap {
    display: none;
    /* PCの「縦区切り線＋2カラム横並び」を、上の水平線＋1カラムへ再構成
       （display:none解除時にすぐ使えるよう温存） */
    flex-direction: column;
    width: 100%;
    gap: 0;
    padding-left: 0;
    padding-top: 24px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
  }

  /* 2つの nav リストを縦に連結し1カラム化。長いラベルも折り返し可 */
  .s-footer__nav {
    width: 100%;
    gap: 0;
    white-space: normal;
  }

  /* 各リンクを行ブロック化し、上下パディングでタップ領域 44px+ を確保 */
  .s-footer__nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .s-footer__nav a {
    display: block;
    padding-block: 13px;
    font-size: 15px;
  }

  /* 1つ目リストの最終行と2つ目リストの先頭で罫線が二重にならないよう、
     1つ目リストの最終 li は罫線を残し、リスト間の連続性を保つ。
     （2リストが縦に連なるので視覚的に1本の連続リストに見える） */
}

/* sp/90-news-page.css */
/* ==========================================================================
   sp/90-news-page — NEWS 記事詳細ページ（news.html）の phone tier（≤767px）上書き
   対応PC/tablet: css/sections/90-news-page.css（クラス接頭辞 .p-news）
   SP.md 規約:
     - ファイル内は単一の @media (max-width:767px){ ... } に閉じる
     - クラス名はPC共通。同一セレクタ・同一詳細度の上書きのみ（!important 不使用）
     - build.py 連結で sp/*.css が最後に載るためカスケードで勝つ
   SP方針（PC原則→SPでの再構成）:
     - 記事カードをフル幅化（左右余白を詰め、画面幅いっぱいに使う）
     - 本文段落は 16px を維持しつつ行間をやや詰め、日本語の可読性を確保
     - RECOMMEND（NEWS一覧）行は grid をやめて縦積みに整列
     - 見出し(NEWS/RECOMMEND)の巨大英字を SP 幅に収める
     - 背景テクスチャは主張を弱めて本文の可読性を優先
   ヘッダー/フッターは共通partial（sp/00-header・sp/15-footer 管轄）なので触れない。
   ========================================================================== */

@media (max-width: 767px) {
  /* --- ページ全体の縦余白（固定ヘッダー分は据え置き、上下パディングを圧縮） --- */
  .p-news {
    padding-block: 40px;
    padding-top: calc(70px + 40px);
  }

  /* コンテナ: 左右余白を詰めてカードをできるだけフル幅に。ブロック間の間隔も圧縮 */
  .p-news__container {
    padding-inline: 16px;
    gap: 36px;
  }

  /* --- 見出し（NEWS / 最新情報） --- */
  .p-news__head {
    gap: 8px;
  }
  .p-news__en {
    font-size: 52px;
  }
  .p-news__ja {
    font-size: 26px;
  }

  /* --- 記事本文カード: 画面左右に10pxのマージンを残す（ユーザー指定） ---
     コンテナ padding-inline は16px。カードを外側へ 6px 広げる（width +12px /
     margin-inline -6px）と、カード左右端が画面端から 16-6=10px の位置に来る。
     （旧: width +32px / margin -16px でフル幅=マージン0だった） */
  .p-news__card {
    width: calc(100% + 12px);
    margin-inline: -6px;
    border-width: 2px;
    border-radius: 14px;
    padding-block: 32px;
    padding-inline: 18px;
    gap: 32px;
  }

  /* 記事ヘッダー */
  .p-news__article-head {
    gap: 12px;
  }
  .p-news__title {
    font-size: 20px;
    line-height: 1.6;
  }
  .p-news__date {
    font-size: 16px;
  }
  .p-news__divider {
    height: 48px;
  }

  /* --- 本文: 段落 16px を維持しつつ行間を 1.9 に。見出しは SP 向けに調整 --- */
  .p-news__body {
    gap: 44px;
    /* PC の max-width:820px はカード内側幅に収める（フル幅化のため実質不要） */
    max-width: none;
  }
  .p-news__block {
    gap: 32px;
  }
  .p-news__section {
    gap: 12px;
  }
  .p-news__h2 {
    font-size: 18px;
    line-height: 1.8;
  }
  .p-news__h3 {
    font-size: 16px;
    line-height: 1.8;
  }
  .p-news__p {
    /* 本文は 16px を堅持（可読性要件）。行間のみやや詰める */
    font-size: 16px;
    line-height: 1.9;
  }

  /* --- RECOMMEND（NEWS一覧）: 縦積みに整列 --- */
  .p-news__recommend {
    padding-block: 48px;
    margin-top: 40px;
  }
  .p-news__recommend-inner {
    padding-inline: 16px;
    gap: 24px;
  }
  .p-news__recommend-title {
    font-size: 32px;
  }

  /* 1行を縦積みに: 日付＋バッジを上段、タイトルを下段。矢印は右端に添える。
     PC/tablet の grid を上書きし、areas を SP 向けに組み直す。 */
  .p-news__rec-link {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "date tag  arrow"
      "ttl  ttl  ttl";
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
    padding-block: 18px;
  }
  .p-news__rec-date {
    grid-area: date;
    font-size: 15px;
    white-space: nowrap;
  }
  .p-news__rec-tag {
    grid-area: tag;
    justify-self: start;
    width: auto;
    padding-inline: 10px;
    font-size: 12px;
  }
  .p-news__rec-arrow {
    grid-area: arrow;
    align-self: center;
  }
  .p-news__rec-ttl {
    grid-area: ttl;
    font-size: 15px;
    line-height: 1.6;
  }

  /* 背景は .p-news-page の単一 background-image（news-bg.webp）に一本化済み。
     `background-size: 100% auto` で画面幅に追従するためSP専用の上書きは不要。 */
}