/* ═══════════════════════════════════════════════════════════════════
   apply.css — 応募フォーム（/apply/ → /apply/verify/ → /apply/thanks/）
   ───────────────────────────────────────────────────────────────────
   【UI方針】ポケットワークの応募フォーム（signup.pokewaku.com）に準じた
   「入力に特化したフォームUI」。構成の考え方だけを借り、色・書体・角丸は
   すべてリップルのデザイントークン（variables.css）で組む。
   ※ ポケワ自体は Next.js の専用アプリで、CF7 でも WordPress でもない。
     真似ているのは見た目と操作の流れだけ。

     ・ページ幅は 480px 上限の1カラム。左右に逃げ道（ナビ）を置かない。
     ・上部＝ロゴ＋ページ名だけの 54px バー（h1 を兼ねる）。
     ・その直下に「1 入力 → 2 確認 → 3 本人確認 → 4 完了」の線つきステップ。
     ・背景は水色。入力欄は背景の上に直接置き、白カードは
       「同意」「選択肢」「確認内容」など囲みたい所だけに使う。
     ・項目は「ラベル＋必須バッジ」を1行、その下に入力欄（間隔16px）。
       項目どうしは40px空ける（詰め込まない＝ポケワの一番の特徴）。

   クラス接頭辞
     .af-*  = APPLY FORM（ページ枠・ステップ・安心ポイント）
     .tk-*  = THANKS（完了ページ）
     .rf-*  = Ripple Form（フォーム本文。マークアップは page-*.php が出力）
═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   【2026-08-06 ブラッシュアップ】「テンプレっぽさ」を消す
   ───────────────────────────────────────────────────────────────────
   装飾を足すのではなく減らす方向で整理した。変えたのは craft だけで、
   色・書体・ピンクのCTAというブランド側は一切さわっていない。

     ① 影を全廃した。白カードが9箇所すべて同じ影で浮いていて、
        「どれが重要か」が読めない状態だったのがいちばんの原因。
        囲みが要る所は 1px の罫線で表す。
     ② 囲むのは「確認内容」「選択肢」「完了ページのお願い」だけ。
        注記・同意・個人情報の説明は、地の上に罫線で仕切って置く。
     ③ 左揃えに統一。フォームの本文を中央揃えにすると読みにくいうえ、
        「体裁だけ整えた画面」に見える。中央に置くのはCTAとステップだけ。
     ④ 記号の種類を減らした（✓丸／iマーク円／三角コネクタ／
        完了画面の大きなチェック円を廃止し、小さなドットに統一）。
     ⑤ 余白に強弱をつけた。以前は項目がすべて40px等間隔で、
        お名前とフリガナ（強く関連）も電話とメールも同じ距離だった。
═══════════════════════════════════════════════════════════════════ */
:root {
  --af-line:      rgba(120, 160, 195, 0.34);  /* 水色の地の上でも見える罫線 */
  --af-line-soft: rgba(120, 160, 195, 0.20);  /* 白の上に置く弱い罫線 */
  --af-gap-tight: 20px;   /* 関連の強い項目どうし（お名前 ↔ フリガナ） */
  --af-gap:       32px;   /* 通常の項目どうし */
  --af-gap-wide:  56px;   /* グループ／セクションどうし */
  --af-r:          8px;   /* 角丸は 8px に統一（バッジのみ 4px） */
  --af-guide-w:  280px;   /* 撮影例の見本画像の幅。説明文・注記もこの幅に揃える */
  /* 撮影ボタンの面。地（--bg1 #EBF3FA）よりひと段濃いアクア。
     このフォームでしか使わないのでここに置く（LPのトークンは汚さない）。 */
  --af-shot-bg:     #D6EFF7;
  --af-shot-bg-hov: #C2E6F3;
  /* 2026-08-07 コントラスト実測にもとづく最適化。
       枠 #0096C7 … 地 #EBF3FA に対して 3.03:1（WCAG 1.4.11 非文字の基準 3:1）
                    ＝「どこまでがボタンか」が見える最低ライン。
                    既存の --primary #00B4D8 は 2.20:1 で足りなかった。
       文字 #0069A0 … 面 #D6EFF7 に対して 4.97:1（WCAG 1.4.3 の基準 4.5:1）
                    直前の --primary-deep #0077B6 は 4.07:1 で未達だった。
     どちらもアクアの色相（190〜201°）の中に収めてあるので、
     D案の「同系色の濃淡」という性格は変わらない。 */
  --af-shot-line:     #0096C7;
  --af-shot-line-hov: #0077B6;
  --af-shot-text:     #0069A0;
  /* 水色の地 #EBF3FA の上で本文の基準（4.5:1）を満たす中間グレー。
     サイト共通の --text-sub #8F8F8F は 2.88:1 しかないので、
     応募フォームの中だけこちらを使う（LPのトークンは変えない）。 */
  --af-text-mid:  #6E6E6E;   /* 4.55:1 */
  --af-step-line: #C3CFDA;   /* 未到達の丸の細枠。数字そのものは上の色で読める */
  /* 水色の地 #EBF3FA の上に置くアクアの文字。
     サイト共通の --primary-deep #0077B6 は【白の上なら 4.88:1 で通るが】
     この画面の地の上では 4.35:1 しかなく、本文の基準 4.5:1（WCAG 1.4.3）に
     わずかに届かない。地の上に青文字を置くときはこちらを使う（5.31:1）。
     ※ 値は --af-shot-text と同じだが理由が別（あちらは撮影ボタンの面 #D6EFF7 の上）。
       片方を変えてももう片方は追従させないこと。 */
  --af-aqua-text: #0069A0;
}

/* 【縦の間隔スケール】使ってよい値はこれだけ（2026-08-06 全4画面を実測して統一）
     4px  … 行内の付随（項目名→値、見出し→説明の1行）
     6px  … 箇条書きの行間
     8px  … 密接な繰り返し・画像とその説明・ボタンの副操作
    12px  … 見出し → その説明文
    16px  … ラベル → 入力欄／入力欄 → 注記／主ボタン → 副ボタン
    20px  … 対になる項目どうし（--af-gap-tight）／OK例 ↔ NG例
    24px  … 説明文 → 次のブロック
    32px  … 項目どうし（--af-gap）
    56px  … かたまりどうし（--af-gap-wide）
   直した差分：ステップ直後 40/56 → 56、ラベル下 14/16 → 16、送信ブロック上 48 → 56、
   副ボタン 16/20 → 16、箇条書き 4/6 → 6、撮影ボタンの副操作 10 → 8、
   NGバッジ 5・ラベル 6 → 8、OK例↔NG例 22 → 20、完了カード 18/14 → 16。 */

/* ═══════════════════════════════════════════════════════════════════
   コントラストの是正（2026-08-08）
   ───────────────────────────────────────────────────────────────────
   6画面の文字を1つずつ実測したところ、補助テキストとバッジの大半が
   WCAG 1.4.3 の基準（本文4.5:1／大きな文字3:1）を割っていた。
   ★LPのトークンは変えない。応募フォームの4ページ（.af-body）だけで上書きする。
     LP側は写真や装飾の上に載る場面が多く、同じ値にすると別の破綻を招くため。

   直した内容と実測値（左が変更前）：
     補助テキスト全般  #8F8F8F 2.88:1 → #6E6E6E 4.55:1（水色地）/ 5.00:1（白地）
       ＝ .rf-note / .rf-sub__label / .rf-date__label / .rf-btn--skip /
          .tk-back / .rf-confirm-row__label / 入力欄のプレースホルダ など20か所
     「必須」バッジ    白/#E5487A 3.79:1 → 白/#C13565 5.30:1
     「OK」バッジ      白/#3ab54a 2.66:1 → 白/#1e6e2e 6.31:1
     流れの数字        白/#00B4D8 2.46:1 → 白/#0077B6 4.88:1
     本文中のリンク    #0077B6 4.34:1 → #0069A0 5.31:1
     エラーの注意文    #B94040 4.48:1 → #A83A3A 5.01:1（わずかに未達だった）

   ⚠️ LINEボタン（白/#06C755 = 2.26:1）だけは【意図的に直していない】。
     #06C755 はLINE公式の指定色で、友だち追加ボタンは白抜き文字での使用が
     ブランドガイドラインで定められている。色を変えるほうが問題になるため、
     ここは例外として残す。
═══════════════════════════════════════════════════════════════════ */
.af-body {
  --text-sub: #6E6E6E;   /* 元 #8F8F8F。この1行で20か所が一度に基準を満たす */
}
.af-body .rf-label__req { background: var(--accent-darker); }   /* 必須 */
.af-body .sg-badge--ok  { background: var(--green-darker); }    /* OK例 */
.af-body .tk-flow__num  { background: var(--primary-deep); }    /* 完了ページの1・2・3 */
.af-body .rf-privacy__body a,
.af-body .tk-info__body a,
.af-body .rf-lead a,
.af-body .tk-lead a,
.af-body .tk-card__body a { color: var(--af-aqua-text); }
.af-body .rf-notice { color: #A83A3A; }
/* 完了ページのカード内の強調（「提出用のURL」「LINE」）。
   #05A847 は 2.80:1 しかなかった。緑の系統は保ったまま濃い側へ（6.31:1）。 */
.af-body .tk-card__body strong { color: var(--green-darker); }

/* ═══════════════════════════════
   本文の両端そろえ（2026-08-08 ユーザー指示）
   ───────────────────────────────
   段落として2行以上になりうる文だけを対象にする。
   ・項目名・ラベル・バッジ・ボタン・確認画面の値は対象外
     （1行で終わるので両端そろえは効かず、意味も無い）。
   ・最終行は左に残る（両端そろえの仕様）。これは正しい挙動。
   ・line-break: strict … 句読点や小書き文字（ゃゅょっ）が行頭に来ないようにする。
     字間を伸ばす組みでは禁則が崩れると目立つので、必ずセットで指定する。
   ・word-break: normal … 英単語やURLを途中で切らない。ただし
     .tk-info__body のメールアドレスだけは元から折り返す指定があるので、
     長い1語のせいで1行だけ極端に伸びることは無い（実測で確認）。
   ⚠️ ここに足すときは「2行以上になる段落か」を確かめること。
     1行のラベルに入れても効果は無く、指定だけが増える。
═══════════════════════════════ */
.af-body .rf-lead,
.af-body .rf-privacy__body,
.af-body .rf-note,
.af-body .rf-submit__note,
.af-body .rf-guide__cap,
.af-body .rf-guide__captext,
.af-body .tk-lead,
.af-body .tk-info__body,
.af-body .tk-card__body,
.af-body .tk-card__note,
.af-body .tk-flow__d {
  text-align: justify;
  text-justify: inter-character;   /* 日本語は字間で伸縮させる（対応しない環境は既定の挙動） */
  word-break: normal;
  line-break: strict;
}

/* ═══════════════════════════════
   ページ全体 — 480px 1カラム
═══════════════════════════════ */
/* ═══ ヘッダー：ステッキを持ったキャラが見出しを指す（2026-08-07 ユーザー指示・C案）═══
   【幾何】画素解析で、sec-char-mechanism.webp のステッキ先端（キラキラ）は
   画像内の x=80% / y=37% にある。この2つの比率から見出しの位置を決めているので、
   キャラ画像を差し替えたら --af-tip-x / --af-tip-y を測り直すこと。

     --af-bar-h  … バーの高さ
     --af-char   … キャラの表示サイズ（画像は正方形）
     --af-char-x … 画面左端からキャラまでの余白

   キャラの上端をバー上端にそろえる → bottom: calc(バー高 - キャラ)。
   こうすると頭（しずくの先）が切れず、下にはみ出した分が本文側に重なる。
   はみ出した分は .af-main 側で逃げを作る（下の padding-top）。 */
:root {
  /* ステッキ先端（星）が画像の中のどこにあるか。画素解析で実測した比率。
     --af-tip-x は【幅】に対する比率、--af-tip-y は【高さ】に対する比率。
     2026-08-07 キャラ差し替えで 0.80/0.37 → 0.907/0.340 に更新。 */
  --af-tip-x: 0.907;
  --af-tip-y: 0.340;
  /* ══ バーの高さとキャラの大きさは【必ず セット で変えること】══
     ★キャラの大きさだけを変えることはできない。理由：
       ・見出しとひとことの縦位置はステッキ先端（キャラ高さの34%）に連動する。
         キャラを縮めても文字は 0.34×縮小分 しか上がらないのに、
         足元は縮小分そのまま上がる → 雲から浮く。
       ・そこでバーを下げると、今度は雲が上がってひとことに迫る。
       ＝「足元と雲の重なり」と「ひとこと下端→雲の余白」は同じ余裕を奪い合う。

     ══ さらに重要：この余裕は【画面が広いほど減る】══
       雲は画面の端から端まで伸びる（バーの全幅）が、キャラと見出しは
       最大375pxの箱に入って中央に置かれる。画面が広くなるほど、キャラは
       雲の山ではなく【谷寄り】に立つことになり、足元の重なりが減る。
       414pxが最悪で、そこでの余裕の合計はおよそ キャラ高 × 0.66 − 49。
         キャラ108 → 22px  … 重なり9 と 余白16 に分けられる
         キャラ100 → 17px  … 重なり7 と 余白11。ぎりぎり成立
         キャラ 88 → 9px   … 分けられない（実際に 414px で重なり0＝浮いた）
         キャラ 79 →  3px  … 論外
       ★雲の山を並べ替えても解決しない。雲の座標で見ると、キャラが立つ位置は
         375pxで x=38〜118、1280pxで x=181〜204 と大きく動くのに対し、
         ひとことは常に真ん中の山の上にある。1280pxのために 181〜204 を高くし、
         375pxのために 126〜345 を低くする必要があり、126〜205 が両方を
         要求されて矛盾する。＝並べ方の問題ではなく構造の問題。

     ══ 2026-08-08 ユーザー指示：キャラの大きさ【だけ】を変える ══
       見出しとひとことは動かさない。そのため下の --af-tip-left / --af-tip-top で
       ステッキ先端の位置を固定し、--af-char-x / --af-char-y をそこから逆算する形に
       変えた。この作りなら --af-char だけを書き換えれば文字は1pxも動かない。
       ⚠️ 代わりに、キャラが小さいほど足元は先端より上に来る（先端から下は
         キャラ高さの66%しかないため）。雲との重なりはその分だけ減る。
         実測（バー160・先端固定・ひとことはヘッダー内）：
           108px … 375px で重なり15px  414px で 9px
            79px … 375px で重なり−2px  414px で −17px ＝ 浮く
         浮かせたくない場合は、雲かバーではなくキャラの大きさで調整するしかない。
     ※ バーの高さは 2026-08-08「上部の余白を縮めて」×3回で 160 → 148 → 136 → 126px。
       同時に --af-tip-top も同じだけ引いてあるので、雲との関係は変わっていない。 */
  --af-bar-h: 126px;
  --af-char:   79px;
  /* キャラの表示幅。素材が 207x264 なので 高さ×0.784。
     ★以前の素材は正方形だったので「高さ×比率」で横位置を出せたが、
       いまは縦長なので必ずこの幅を使うこと。ここを高さのままにすると
       ステッキ先端と見出しが横にズレる。素材を替えたら係数も直す。 */
  --af-char-w: calc(var(--af-char) * 0.784);
  /* キャラをバー上端からどれだけ下げるか。見出し・ひとことも同じだけ下がる
     （3つの位置関係はステッキ先端を基準に決まっているので、まとめて動かす）。
     ★2026-08-08 から【自分で書く値ではなくなった】。下の --af-tip-top から逆算する。
       こうすると --af-char を変えても、ステッキ先端＝見出しとひとことの基準点が
       動かないので、文字は1pxもズレない。以前は逆で、キャラを縮めると
       見出しとひとことが道連れで動いていた。 */
  --af-char-y: calc(var(--af-tip-top) - var(--af-tip-y) * var(--af-char));
  /* 見出しのエコー（残像）のズレ幅。【現在は未使用】。
     2026-08-07：付ける → 控えめに(5/10→3/6px) → 白フチだけにする、と指示が進み、
     最終的に残像は出していない。戻す可能性があるので値だけ残してある
     （使い方は .af-bar__title の text-shadow のコメントに書いた）。 */
  --af-echo-1: 3px;
  --af-echo-2: 6px;
  /* 白と水色の境目の雲。SVGの高さと、弧が白いバーへ立ち上がる高さ。
     差（43-31=12px）は水色の上に重なるだけの余白（境目の隙間よけ）。
     ★form-header.php の viewBox（0 0 480 43）と baseline（y=31）に一致させること。
     🛑 この2つを含むヘッダーの数値は、2026-08-07 にユーザーが
        design-previews/header-editor.html で調整して確定させたもの。
        手で直さず、そのツールで調整して出力を貼り替えること。 */
  --af-cloud-h:    43px;
  --af-cloud-rise: 31px;
  /* ══ ステッキ先端の位置（この2つが見出し・ひとことの基準点）══
     2026-08-08 ユーザー指示「キャラの大きさだけを変える」に対応するため導入した。
     ・見出しとひとことの位置は、もともと「キャラの左上＋キャラ高さ×先端比率」で
       計算していた。そのためキャラを縮めると先端が動き、文字も一緒に動いていた。
     ・そこで【先端の絶対位置】を主にして、キャラの左上をそこから逆算する形に反転した。
       いまは --af-char をいくつにしても、見出しとひとことは動かない。
     ・横の値はキャラ108px時代の先端位置をそのまま引き継いでいる：
         30 + 0.907×(0.784×108) = 106.8px
     ★見出しとひとことを動かしたいときは、この2つを変えること
       （--af-char-x / --af-char-y はもう直接書かない）。

     ⚠️【--af-tip-top と --af-bar-h は必ず同じ量だけ動かすこと】
       雲はバーの下端を基準に置かれるので、先端だけを上げると
       中身（キャラ・見出し・ひとこと）と雲の関係が崩れる。
       両方を同じだけ引けば、雲との関係は1pxも変わらないまま
       上の白い余白とヘッダー全体の高さだけが減る。
       2026-08-08 ユーザー指示「上部の白背景の余白をすこし縮めて」×3回で
       82.7/160 →（−12）→ 70.7/148 →（−12）→ 58.7/136 →（−10）→ 48.7/126。
       キャラの頭の上の白は 55.8 → 43.8 → 31.8 → 21.8px。
       🛑【ここが下限】キャラの頭の上に21.8px、見出しの文字の上に33.2px。
         スマホは画面最上部が指のかかる帯なので、頭上は20px以上残すこと。
         これ以上詰めるなら、余白ではなくキャラの大きさか見出しの行の高さ（44px）
         を見直すほうが破綻しない。 */
  --af-tip-left: 106.8px;
  --af-tip-top:   48.7px;
  /* 箱の左端からキャラまでの余白。上の先端位置から逆算する。 */
  --af-char-x: calc(var(--af-tip-left) - var(--af-tip-x) * var(--af-char-w));
  /* 見出しとステッキ先端の関係（マイナス＝重なる／プラス＝先端の右に離れる）。
     見出しとひとことだけを左右に動かしたいときはここを変える。キャラは動かない。
     ⚠️ 大きくするほどステッキの先端と文字が離れる。「指している」見え方を
       保ったまま右へ寄せたい場合は、ここではなく --af-char-x を増やして
       キャラごと右へ動かすこと。 */
  --af-title-lap: 11px;
  /* 【2026-08-08 削除】--font-round（M PLUS Rounded 1c）はユーザー指示で全廃した。
     この4ページも LP と同じ3書体（Noto Sans JP / Open Sans / Caveat）だけを使う。
     functions.php の読み込みも撤去済み。理由は下の「書体」のコメントを参照。 */
}
.af-bar {
  position: relative;
  z-index: 10;
  height: var(--af-bar-h);
  background: var(--bg-white);
  /* 下の罫線は廃止。境目は雲（.af-bar__clouds）が受け持つ。 */
}
/* キャラ・見出し・ひとことを入れる箱。最大375px（スマホの幅）で中央寄せ。
   3つはこの箱を基準に絶対配置するので、画面が広くなっても
   スマホと同じ組み方のまま中央へ寄る。
   ★これが無いと3つはバーの左端に貼りつき、768px幅で左右が 5% : 95% まで偏る
     （2026-08-07 ユーザー指示「PCの位置をSPに合わせて」で追加）。
   ★雲はこの箱の外（.af-bar の直下）に置くこと。端から端まで伸ばすため。 */
.af-bar__inner {
  position: relative;
  z-index: 2;                     /* 雲(1)より上 */
  width: 100%;
  max-width: 375px;
  height: 100%;
  margin: 0 auto;
}

.af-bar__char {
  position: absolute;
  z-index: 2;                     /* 雲(1)より上、見出し(3)より下 */
  left: var(--af-char-x);
  /* 上端そろえ＋--af-char-y の分だけ下げる。bottom で指定すると
     （bottom は padding box 基準のため）頭が1px切れる。実測で確認済み。 */
  top: var(--af-char-y);
  display: block;
  width: auto;
  height: var(--af-char);
}
/* 見出し。ステッキ先端の高さに文字の中心を合わせ、先端に10px重ねる。
   flex の中央寄せをやめて絶対配置にしているのは、文字数が変わっても
   （「応募フォーム」「本人確認」「応募完了」）先端との関係を保つため。 */
.af-bar__title {
  position: absolute;
  z-index: 3;                     /* いちばん上。ステッキと重なる部分を白フェードで抜く */
  top:  calc(var(--af-char-y) + var(--af-tip-y) * var(--af-char) - 22px);
  left: calc(var(--af-char-x) + var(--af-tip-x) * var(--af-char-w) + var(--af-title-lap));
  margin: 0;
  /* 2026-08-08 ユーザー指示で丸ゴシックを全廃。書体は body から継承する（LPと同じ）。
     ★太さは 800 → 900。Noto Sans JP は 400/500/700/900 しか読み込んでいないので、
       800 のままだとブラウザが近い方へ寄せる（実際には900で描かれる）。
       どの太さで出るかをブラウザ任せにせず、読み込んでいる値を書いておく。 */
  font-size: 32px;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-heading);
  line-height: 44px;
  white-space: nowrap;
  color: var(--primary-deep);
  /* 文字のまわりに白いにじみ（2026-08-07 ユーザー指示）。
     ステッキの先端が文字に10px重なっているので、その部分の線を白で抜いて
     文字が手前に浮いて見えるようにする。内側から外側へ3段階でぼかしている。
     ※ 縁取り（袋文字）ではなくフェードなので、白地の上では効果が見えない。
       効くのはステッキ・キラキラと重なっているところだけ。 */
  /* 白フチ（8方向・2px）。2026-08-07 ユーザー指示で【白フチだけ】にした。
     ・白地の上では見えないが、ステッキと重なる部分で線を抜く役目がある
       （もともと入れていた白フェードの役割をこれが引き継いでいる）。
     ・text-shadow はレイアウトに影響しないので、右端の余白は見出しの実寸のまま。
     ※ 淡いアクアの残像（エコー）を右下に2段重ねていたが、指示により削除。
       戻す場合は下に2行足すだけでよい（--af-echo-1 / -2 は残してある）：
         var(--af-echo-1) var(--af-echo-1) 0 rgba(143,217,236,.55),
         var(--af-echo-2) var(--af-echo-2) 0 rgba(143,217,236,.22);
       text-shadow は「先に書いたものほど手前」なので、必ず白フチより後ろに置くこと。 */
  text-shadow:
    -2px -2px 0 var(--bg-white),  2px -2px 0 var(--bg-white),
    -2px  2px 0 var(--bg-white),  2px  2px 0 var(--bg-white),
     0   -2px 0 var(--bg-white),  0    2px 0 var(--bg-white),
    -2px  0   0 var(--bg-white),  2px  0   0 var(--bg-white),
    /* 白フチの外に落とす影（2026-08-07 ユーザー指示）。白フチより後ろに置くこと。
       影は文字の形から落ちるので、白フチ(2px)より大きくずらさないと隠れて見えない。
       そのため 3px 下げてある。色は黒ではなく紺寄り（水色の地になじませるため）。
       2段にして、近い影で輪郭を、遠い影でやわらかさを出している。
       ⚠️ 影が下へ届く距離（ずれ＋ぼかし）は、見出しとひとことの間隔（12px）以内に
         収めること。最初 0 5px 10px（＝15px）にして3px食い込んでいた（実測して直した）。 */
    0 2px 3px rgba(10, 60, 95, 0.24),
    0 4px 8px rgba(10, 60, 95, 0.13);
}
/* 見出しの下のひとこと（2026-08-07 ユーザー指示）。
   見出しと左を揃える。キャラの実シルエットはこの高さで右端112pxまでなので、
   見出しと同じ左位置（375px幅で136px）に置いても重ならない。
   ※ 出るのは指定されたページだけ。/apply/ のみで、本人確認・応募完了には
     この文面が合わないため入れていない（form-header.php の $sub）。 */
.af-bar__sub {
  position: absolute;
  z-index: 3;
  /* 2026-08-08 ユーザー指示で見出しに近づけた（+34px → +28px、6px詰めた）。
     ★行ボックスの隙間（12px）ではなく、実際の【文字の輪郭どうし】で判断すること。
       行の高さに余白（見出し44-32＝12px、ひとこと18-12＝6px）が含まれるので、
       箱の隙間12pxに対して、文字の間は21.5pxも空いていた。
       canvas の actualBoundingBox で実測：
         見出しの文字の下端 92.2px ／ ひとことの文字の上端 113.7px → 間 21.5px
       ひとことの行の高さ（18px）より広く、2つが別々の行に見えていた。

     【詰められる限界】見出しの影は文字の下端から12px下まで届く（0 4px 8px）。
       +28px なら文字の間は 15.5px なので、影の先端との余裕は 3.5px。
       これ以上詰めると影がひとことに掛かる。詰めたい場合は影のほうを先に縮めること。
     ※ 影の内側にある白フチ（2px）はさらに手前なので効かない。 */
  top:  calc(var(--af-char-y) + var(--af-tip-y) * var(--af-char) + 28px);
  /* 見出しと同じ式に +1px（2026-08-08 ユーザー指示）。
     見出しは32pxの太字、ひとことは12px。字面の左端は見出しのほうがわずかに
     内側に見えるので、数値をそろえると逆にひとことが出っ張って見える。
     ★見出しの位置を動かしたときは、この +1px も一緒に残すこと
       （式は共通なので、--af-char-x などを変えれば両方ついてくる）。 */
  left: calc(var(--af-char-x) + var(--af-tip-x) * var(--af-char-w) + var(--af-title-lap) + 1px);
  margin: 0;
  /* 書体は body から継承（2026-08-08 に丸ゴシックを全廃）。 */
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
  /* 2026-08-08 ユーザー指示でアクア(--primary-deep) → 黒（本文色）。
     ここの地は白いバーなので 12.63:1（基準4.5:1）。
     青(--primary-deep)のときは 4.88:1 で、通ってはいたがぎりぎりだった。
     ★これで見出し（濃い青・32px）と、ひとこと（黒・12px）の役割が色でも分かれる。 */
  color: var(--text);
}
/* ひとことの中の「5分」だけを立たせる（2026-08-08 ユーザー指示）。
   ★大きさは変えないこと。1行の中で文字サイズが混ざると行がガタつき、
     ベースラインもそろわない。太さと色だけで差をつける。
   ・太さ 800：見出しと同じ。丸ゴシックは 700 と 800 しか読み込んでいないので、
     700（地の文）に対して使える上の段はこれ1つだけ。
     ⚠️ --fw-black(900) を使わないこと。900は読み込んでいないので
       ブラウザが合成するか800に丸められ、環境で見え方が変わる。
   ・色 --accent-darker #C13565（2026-08-08 ユーザー指示で青 → ピンク）。
     白いバーの上で 5.30:1（基準4.5:1）。
     ⚠️ 明るいピンクは使えない。12pxの文字は太字でも「大きな文字」の緩和
       （太字なら18.66px以上）に当たらないので、4.5:1 を満たす必要がある。
       白の上での実測：
         --accent-mid    #FF6B9D … 2.69:1 ✗（ブランドピンク。面や飾りには使えるが文字は不可）
         --cta-form      #E86690 … 3.12:1 ✗
         --cta-form-drk  #CE5178 … 4.12:1 ✗（惜しいが未達）
         --accent-deep   #E5487A … 3.80:1 ✗（「必須」バッジの面の色。あれは
                                    白抜き文字なので成立している。文字色には流用できない）
         --accent-darker #C13565 … 5.30:1 ✓ ← これだけが通る
       ★「必須」バッジと同じピンクに見えるが別の値。バッジ側を変えても追従させないこと。
   ※ 読み上げでは <strong> として「ここが重要」と伝わる（見た目だけの強調にしない）。 */
.af-bar__sub-em {
  font-weight: 800;
  color: var(--accent-darker);
}

/* 白と水色の境目の雲。水色がバーの下端から上へ18px立ち上がる。
   SVGの baseline(y=18) をバーの下端に合わせるので、下へは 30-18=12px はみ出す
   （そこは水色の上に水色が重なるだけなので見えない。境目に隙間を作らないための保険）。
   currentColor で塗るので、地の色を変えたら color を合わせるだけでよい。 */
.af-bar__clouds {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--af-cloud-rise) - var(--af-cloud-h));   /* -12px */
  z-index: 1;                     /* キャラ(2)・見出し(3)より下に敷く */
  display: block;
  width: 100%;
  height: var(--af-cloud-h);
  color: var(--bg1);
  pointer-events: none;
}

.sec--apply,
.sec--thanks {
  background: var(--bg1);
  /* 上だけ、キャラがバーの下端からはみ出す分の逃げを持たせる。
     逃げが無いとキャラがステップ表示に乗る（実測でステップ1と 82x19px 重なった）。
     ★ただし最低 40px は必ず空ける。バーを高くしてキャラがはみ出さなくなると
       計算結果が 0 になり、ステップ表示が境目に貼りつく（実機で確認して直した）。
       この最低値が「ステップ表示を下げる量」そのもの。
       2026-08-07 ユーザー指示「もう少し下に」で 24→40px。
       雲は上へ立ち上がるので、こちら側の逃げには効かない。
     ★逃げは .af-main（白）ではなく水色のこちらに入れること。
       白側に入れると、境目の下にもう一段白い帯ができて
       「バーが二重」に見える（実機で確認して直した）。 */
  /* 左右 24 → 32px（2026-08-08 ユーザー指示「本文の両端の余白が狭い」）。
     ★本文だけを内側に寄せないこと。この画面は見出し・項目名・本文・選択肢の枠・
       撮影ボタンが【すべて同じ左端】でそろっている（実測で確認）。
       本文だけ動かすと、その1種類だけが列からはみ出して見える。
       広げるときは列ごと＝このパディングで広げる。
     ※ 375px幅で本文の幅は 327 → 311px。1行あたり約26文字で、
       日本語の読みやすい範囲（20〜40字）に収まっている。 */
  padding: max(calc(var(--af-char) - var(--af-bar-h) + 8px), 40px) 32px 64px;
}
.af-main .sec__inner,
.tk-main .sec__inner {
  max-width: 480px;
  margin: 0 auto;
}

/* ※ 応募系ページのフッター（著作権表記）はユーザー指示により廃止（2026-08-05）。
     ページの最下部はセクションの余白（padding-bottom）で終わる。 */

/* responsive.css が body に入れている「固定CTAぶんの下余白」を打ち消す。
   応募系ページには固定CTAが無いので、残すと最下部に白い帯として見えてしまう。 */
body.af-body { padding-bottom: 0; }

/* ══ 書体：LPと完全に同じにする（2026-08-08 ユーザー指示）══
   【経緯】
     08-07 「可愛いデザインに」で、この4ページだけ丸ゴシック
            （M PLUS Rounded 1c）を4書体目として追加した。
     08-08 本文が太くて読みにくいとの指摘。原因を調べたところ、
            functions.php がこの書体を【700 と 800 しか読み込んでいない】ため、
            font-weight:400 の本文が 700 の字形で描かれていた。
            実測（同じ文字列・13px）：Rounded 400 = 320.3px ／ Rounded 700 = 320.3px
            → 400と700で幅が1pxも変わらない＝400の字形が無い動かぬ証拠。
     08-08 いったん「本文だけLPと同じ書体」にしたあと、
            ユーザー指示で【丸ゴシックを全廃】。サイト本来の3書体
            （Noto Sans JP / Open Sans / Caveat）に戻した。

   ★この4ページに4書体目を足さないこと。足すなら必ず 400 も読み込むこと
     （読み込まない太さを指定しても、ブラウザが近い太さで描いてしまう）。
   ※ --font-round の定義と functions.php の読み込みも撤去済み。 */
.af-body,
.af-body input,
.af-body select,
.af-body textarea,
.af-body button { font-family: var(--font); }



/* ═══════════════════════════════
   ステップ（1 入力 → 2 送信完了 → 3 本人確認）
   数字の丸を背景色のリングで抜き、後ろに2pxの線を通す方式
═══════════════════════════════ */
.af-steps {
  /* ステップ表示と、その下の中身（お名前の入力項目など）の間隔。
     ※ 下の .rf は margin-top:56px を持っており、隣り合うマージンは相殺して
       大きい方が効く。つまりここを56px以下にしても56pxより狭くならない。
       広げたいときだけこの値を上げること。
     2026-08-07 ユーザー指示で 56 → 80 → 120px と広げたが、
     その空きに「入力項目」の見出しを入れたので 56px（--af-gap-wide）へ戻した。
     ★空きだけで間を取らないこと。間隔は見出しの上下マージンで作る。
       そうしないと、あとで文言や文字サイズを変えたときに間隔が崩れる。 */
  margin: 0 0 var(--af-gap-wide);
}

/* 【記録・現在は未使用】ひとことをステップ表示の直下に置く案（.af-time）を
   2026-08-08 に2度作ったが、いずれもユーザー指示でヘッダー内（.af-bar__sub）へ
   戻した。ここが定位置。戻す場合に必要だった値：
     .af-time { margin:0 0 56px; text-align:left;
                padding-left: calc(12.5% - 24.5px);   ← ステップ1「情報入力」の"情"に揃う
                font-size:12px; font-weight:700; line-height:1.85; color:var(--text); }
     .af-steps:has(+ .af-time) { margin-bottom:16px; }
   （ステップの4項目は親幅ちょうど1/4、ラベル「情報入力」は幅49pxでその中央） */

.af-steplist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.af-steplist__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;                        /* 情報入力／内容確認／本人確認／応募完了 の4段 */
  text-align: center;
  /* 未到達の文字色。--text-sub(#8F8F8F) は水色の地に対して 2.88:1 しかなく
     基準（4.5:1）に届かなかったので、フォーム用の中間グレーに変更。 */
  color: var(--af-text-mid);
}
/* 読み上げ専用テキスト（画面には出さない）。
   ステップの数字を✓に差し替えたぶん、何段目が完了なのかを言葉で渡すために使う。
   display:none だと読み上げソフトも読まないので、面積を潰して隠す方式にする。 */
.af-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 前の丸とつなぐ線（丸の後ろを通す） */
.af-steplist__item::before {
  content: '';
  position: absolute;
  top: 15px;
  right: 50%;
  z-index: 1;
  width: 100%;
  height: 2px;
  background: var(--gray-200);
}
.af-steplist__item:first-child::before { content: none; }
.af-steplist__item.is-done::before,
.af-steplist__item.is-current::before { background: var(--primary-deep); }

/* 未到達＝白い面に細枠。旧：グレーの塗り。
   白にしたのは「まだ触っていない」ことを面の有無で示すため
   （済＝塗り／未＝空、の対比が数える前に分かる）。 */
.af-steplist__num {
  position: relative;
  z-index: 2;
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  border: 4px solid var(--bg1);      /* 背景色で線を抜く＝リング */
  border-radius: 50%;
  background: var(--bg-white);
  box-shadow: inset 0 0 0 1.5px var(--af-step-line);
  color: var(--af-text-mid);
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 24px;
}
.af-steplist__text {
  margin-top: 8px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-body);
}
/* 副ラベル（旧「(あとでOK)」）。2026-08-07 の文言変更で現在は未使用。
   apply-steps.php の $steps に第2要素を入れれば再び出る。 */
.af-steplist__sub {
  display: block;
  font-weight: var(--fw-regular);
  font-size: var(--fs-2xs);
}
/* ── 3つの状態を見た目で分ける（2026-08-07 ユーザー選択・A案）──
   旧：到達済み（number <= current）に is-active を付けるだけだった。
       そのためステップ3にいると1・2・3が全部同じアクアで塗られ、
       「今どこにいるのか」が目で分からなかった（現在地は aria-current
       にしか入っておらず、これは読み上げソフト用で目には見えない）。
   新：済＝チェックの塗り／現在地＝数字の塗り＋外側のリング／未到達＝白に細枠。
       3つが面・中身・輪郭のどれを見ても違うので、数える前に分かる。 */
.af-steplist__item.is-done,
.af-steplist__item.is-current { color: var(--text); }
.af-steplist__item.is-done .af-steplist__num,
.af-steplist__item.is-current .af-steplist__num {
  background: var(--primary-deep);   /* 白文字とのコントラスト 4.87:1 */
  box-shadow: none;
  color: var(--white);
}
/* 現在地だけ、背景色のリングの外にもう一段うすいリングを重ねる。
   1つ目の影＝背景色で線を抜くリング（.af-steplist__num の border と同じ役目）、
   2つ目＝現在地であることを示す輪。border を太くすると丸の大きさが変わり、
   後ろを通る線の位置とずれるので影で足している。 */
.af-steplist__item.is-current .af-steplist__num {
  box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.28);
}
.af-steplist__item.is-current .af-steplist__text { color: var(--primary-darker); }


/* ═══════════════════════════════
   応募前の注記（3行）
   ※ 2026-08-06 ユーザー指示で中身を削除したため【現在は未使用】。
     戻す可能性があるので定義だけ残してある。
   ※ 旧：白カード＋大きな✓アイコン。生成LPで最も見かける形で、
     しかも「浮いたカード」が本題（フォーム）より目立っていた。
     カードと✓をやめ、上下の罫線で仕切った小さな注記に落とす。
     記号は .rf-guard と同じ小さなドットに統一（語彙を増やさない）。
═══════════════════════════════ */
.af-assure {
  list-style: none;
  margin: 0 0 var(--af-gap-wide);
  padding: 14px 0;
  border-top: 1px solid var(--af-line);
  border-bottom: 1px solid var(--af-line);
}
.af-assure__item {
  position: relative;
  padding-left: 14px;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--text-sub);
}
.af-assure__item + .af-assure__item { margin-top: 6px; }   /* .rf-guard__list と同値 */
.af-assure__item strong { font-weight: var(--fw-bold); color: var(--text); }
.af-assure__item::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
}


/* ═══════════════════════════════════════
   .rf — 応募フォーム本体（自社実装・CF7 不使用）
   マークアップは page-apply.php / page-verify.php が出力する。
═══════════════════════════════════════ */
.rf * { box-sizing: border-box; }

/* フォームの前に説明ブロックが来る画面（本人確認ページ）で、
   最初の項目が直前のカードにくっついてしまうのを防ぐ。
   入力ページ側は直前の要素が margin-bottom:40px を持つので、
   隣接マージンの相殺により見た目は変わらない。 */
.rf { margin-top: var(--af-gap-wide); }

/* 本人確認ページ用。1項目が「見本画像＋NG例3枚＋撮影ボタン」と大きいので、
   項目どうしも入力画面の32pxではなく「かたまりどうし」の56pxで離す。
   フォーム開始の間隔（.rf の56px）と同じ値にすることで、
   「身分証の種類」「証明書の撮影」「証明書と一緒に自撮り」の
   3項目の上の間隔がすべて揃う（2026-08-06 ユーザー指示）。 */
.rf--blocks .rf-box + .rf-box { margin-top: var(--af-gap-wide); }

/* 【2026-08-08 削除】ここで本人確認画面の項目名だけ 14px → 16px にしていた
   （08-06 ユーザー指示。見本画像が大きいので14pxでは負ける、という理由）。
   08-08 の指示「同じ項目のフォントサイズは5ページ統一」で外し、
   項目名は5ページとも 14px（--fs-base）にそろえた。
   戻す場合： .rf--blocks .rf-label { font-size: var(--fs-lg); } */

/* 画面に出さないボット判定用の入力欄 */
.rf-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 画面上部のお知らせ（エラーなど） */
.rf-notice {
  margin: 0 0 24px;
  padding: 12px 16px;
  border: 1px solid var(--danger-deep);
  border-radius: 8px;
  background: rgba(185, 64, 64, 0.06);
  color: var(--danger-deep);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-relaxed);
}

/* ── 画面の見出し ──
   中央揃え16pxだと「必要事項」も「本人確認のお願い」も同じ重さに見えて、
   画面の主題が立たなかった。左揃え18pxにして、リード文を直下に付ける。 */
.rf-section + .rf-section { margin-top: var(--af-gap-wide); }
.rf-section__title {
  margin: 0 0 12px;
  /* 2026-08-08 ユーザー指示で 18px → 17px（1px小さく）。
     --fs-xl(18px) から1px引く形で書いているのは17pxのトークンが無いため。
     素の 17px と書かずに calc にすることで「基準より1px小さい」という意図が残る。
     ★4画面の見出しはすべてこの値。完了ページの .tk-title も同じ式にしてある。
       片方だけ変えないこと（統一が崩れる）。 */
  font-size: calc(var(--fs-xl) - 1px);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  color: var(--text);
}
/* 見出しの直後にリード文が無く、いきなり項目が始まる画面（入力）だけ 24px 空ける。
   12px のままだと見出しが最初の項目名にくっついて、どちらも同じ強さに見える。
   ※ 隣り合うマージンは相殺するので、上の 12px と合わせて 24px になる。 */
.rf-section__title + .rf-section > .rf-box:first-child { margin-top: 24px; }

/* 入力画面の見出し「入力項目」だけの調整（2026-08-07 ユーザー指示）。
   ・中央揃え：このフォームは「中央に置くのはCTAとステップだけ」という方針で
     08-06 に左揃えへ統一した経緯がある。ここはその例外。
     全画面を中央にそろえたい場合は .rf-section__title 本体を直すこと。
   ・【2026-08-08 削除】以前はここで 17px（--fs-xl から1px引く）にしていたが、
     ユーザー指示「4ページの見出しのフォントサイズ統一」で外した。
     ＝このクラスはもう揃えの指定だけを持つ。大きさは .rf-section__title の18px。
   ※ 名前のとおり揃えだけのクラスになったので、他の見出しにも安全に使える。 */
.rf-section__title--center {
  text-align: center;
}
.rf-lead {
  margin: 0 0 24px;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--text-body);
}
.rf-lead strong { font-weight: var(--fw-bold); color: var(--accent-deep); }

/* ── 1項目 ──
   以前は全項目が40px等間隔で、関連の強さが読めなかった。
   通常32px／お名前↔フリガナのように対になる項目だけ20pxに詰める。 */
.rf-box + .rf-box { margin-top: var(--af-gap); }
.rf-box + .rf-box--tight { margin-top: var(--af-gap-tight); }

.rf-label {
  display: flex;
  align-items: flex-start;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-body);
  color: var(--text);
}
.rf-label__req,
.rf-label__opt {
  flex: 0 0 auto;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: var(--ls-label);
}
.rf-label__req { background: var(--accent-deep); color: var(--white); }
.rf-label__opt { background: var(--gray-100);   color: var(--text-sub); }

.rf-input { margin-top: 16px; }

/* ── 補足・注記（※つき） ── */
.rf-note {
  position: relative;
  margin: 16px 0 0;
  padding-left: 1em;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-sub);
}
.rf-note::before { content: '※'; position: absolute; top: 0; left: 0; }
.rf-note--ok { color: var(--green-darker); font-weight: var(--fw-bold); }

/* ── エラー文 ── */
.rf-tip {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--danger-deep);
}

/* ── 入力欄 ── */
.rf input[type="text"],
.rf input[type="email"],
.rf input[type="tel"],
.rf select {
  width: 100%;
  height: 44px;
  padding: 12px;
  font-family: var(--font);
  font-size: var(--fs-lg);        /* 16px：iOSで入力時に拡大しない最小サイズ */
  line-height: var(--lh-snug);
  color: var(--text);
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--af-r);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.rf textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  font-family: var(--font);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text);
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--af-r);
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.rf input:focus,
.rf select:focus,
.rf textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.15);
}
.rf ::placeholder { color: var(--text-sub); opacity: 0.55; }

/* エラーのある入力欄。詳細度を入力欄の基本ルール（.rf input[type="tel"] 等）に
   合わせておかないと枠の色が上書きされないので、要素名を必ず付けること。 */
.rf input.is-invalid,
.rf select.is-invalid,
.rf textarea.is-invalid { border-color: var(--danger-deep); }

.rf select {
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238F8F8F' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* ── 撮影例（parts/apply-shot-guide.php）──
   参考画像は運転免許証の見本（idcard.html と同じ素材）。
   自撮り例の人物はリップルのマスコット（実在の人物写真は使わない）。
   OK例・NG例とも同じ枠 .sg-frame を使い、NGは修飾クラスで表現する。 */
.rf-guide {
  /* 項目名から撮影例までの間隔（2026-08-06 ユーザー指示で 16 → 20 → 24px と2段階で広げた）。
     ⚠️「身分証の種類」のラベル下（.rf-input）は16pxのまま。
       撮影例は写真のかたまりで重いので、ここだけ広げている。 */
  margin-top: 24px;
  text-align: center;    /* 撮影例のかたまりは中央（2026-08-06 ユーザー指示） */
}

/* OK例は白いカードに入れず、背景の上にそのまま置く（2026-08-05 ユーザー指示）。 */
.rf-guide__fig {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
/* ── OK / NG のバッジ ──
   グループの見出しに付けるのをやめ、【写真1枚ずつに直接貼る】。
   見出し方式だと「OKの説明」と「NGの説明」が中央で隣り合い、
   どちらがどの写真の話なのか読み取れなかった（2026-08-06）。
   サイズも 9px → 13px（小さい写真は11px）に上げて、離れて見ても分かるようにした。 */
.sg-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  color: var(--white);
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: var(--ls-label);
}
.sg-badge--ok { background: var(--green-fresh); }
.sg-badge--ng { background: var(--danger-deep); }

/* 写真に重ねてよいのは大きいOK例だけ。証明書は枠の中央に置いてあり、
   左上の余白に載せても隠れるものが無い。 */
.sg-badge--overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;                      /* 反射(.is-glare)の白いグラデーションより前に出す */
}
/* OKバッジは【見えている絵の上端から8px内側】に置く。
   枠の上端から一律 8px にすると、透明帯のぶん位置が食い違って見える
   （証明書は絵の16px上に浮き、自撮りは1px上。2026-08-06 ユーザー指摘）。
     証明書：帯24px → 24+8＝32px
     自撮り：帯 9px →  9+8＝17px
   横位置は枠から8pxのまま。2つのバッジと説明文の左端がそろうため、
   絵の左端（証明書15px／自撮り44px）には合わせない。
   ⚠️画像を差し替えたら帯を測り直すこと。 */
.rf-guide[data-rf-guide-type="id"]     .sg-badge--overlay { top: 32px; }
.rf-guide[data-rf-guide-type="selfie"] .sg-badge--overlay { top: 17px; }

/* NGは写真の【外】、それぞれの写真の真上に置く（2026-08-06 ユーザー指示）。
   104pxしかない小さい写真に重ねると、見せたい失敗例そのものが隠れてしまう。 */
.sg-badge--sm {
  margin-bottom: 8px;   /* 写真とその説明は上下とも 8px で対称にする */
  padding: 2px 7px;
  font-size: var(--fs-2xs);
}

/* OK例（見本）は本文幅いっぱいだと主役になりすぎるので上限を付ける
   （2026-08-06 ユーザー指示「もう少し小さく」）。
   2枚とも同じ上限なので、証明書側と自撮り側の大きさは揃ったまま。
   NG例の小さい枠（.sg-frame--sm）は3列グリッド側で決まるので影響しない。 */
.rf-guide__fig .sg-frame {
  max-width: var(--af-guide-w);
  /* ブロック要素なので text-align では中央にならない。左右autoで寄せる。 */
  margin-left: auto;
  margin-right: auto;
}

/* 撮り方の指示文は【写真の上】（2026-08-06 ユーザー最終判断。下→上→下→上と往復した）。
   色は --text-sub(#8F8F8F) だと地の水色#EBF3FAに対して 2.8:1 しかなく読みにくいので
   本文色に上げてある（9.7:1）。この配色の変更は配置と関係なく維持する。 */
/* 説明文は見本画像と同じ幅の箱に入れ、その中で左揃えにする。
   中央揃えのままだと文字数の差（16文字と14文字）で行の開始位置が13pxずれ、
   2つの項目で説明文の位置が揃わない（2026-08-06 ユーザー指示）。
   箱の幅を画像と共通の --af-guide-w にしているので、
   説明文の左端は必ず画像の左端と一直線になる。 */
.rf-guide__cap {
  max-width: var(--af-guide-w);
  margin: 0 auto 8px;      /* 説明文が上、写真が下 */
  text-align: left;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--text-body);
}
.rf-guide__cap strong { font-weight: var(--fw-bold); color: var(--text); }

/* 証明書の見本だけ、説明文と注記を写真側へ寄せる。
   カードは横長（約1.55:1）なので 4:3 の枠に入れると【上下に約25pxずつ透明帯】ができ、
   そのままだと「説明文 → 見えているカード」が33pxになる（自撮り側は帯が無く8px）。
   帯のぶんだけ寄せて、見た目の間隔を自撮り側と同じ約8pxにそろえる。
     説明文（写真の上）… margin-bottom を負に
     注記　（写真の下）… margin-top を負に
   ※ 前提として5枚ともカードを縦中央に置き直してあり、帯は22.8〜26.4pxに収まる。
     画像を差し替えたら帯を測り直すこと（scratchpad の center-id-samples.php）。
   ⚠️ .sg-frame は position:relative なので、ただ寄せるだけだと
     枠の背景が文字の上に描かれて【文字が消える】。position+z-index で前に出すこと。 */
/* 見た目の間隔＝ margin-bottom ＋ 透明帯。証明書の帯は24pxなので
   20px 空けたいなら margin-bottom は 20−24＝−4px
   （2026-08-06 ユーザー指示で 8 → 16 → 20px と広げた）。 */
.rf-guide[data-rf-guide-type="id"] .rf-guide__cap {
  position: relative;
  z-index: 1;
  margin-bottom: -4px;
}
.rf-guide[data-rf-guide-type="id"] .rf-guide__note {
  position: relative;
  z-index: 1;
  margin-top: -16px;
}
/* 自撮り側は人物の頭上に約9pxの透明帯がある（イラストの上端＝髪の始まり）。
   20px 空けたいなら margin-bottom は 20−9＝11px。
   ⚠️写真の下に置いていた頃は下端に帯が無かった（体が下辺で切れている）ため
     この補正は不要だった。上に置いた今だけ必要。
   ※ いまは正の値なので重なりは起きないが、間隔を詰めると再び重なるので
     position+z-index は残してある（外すと文字が枠の背景に隠れる）。 */
.rf-guide[data-rf-guide-type="selfie"] .rf-guide__cap {
  position: relative;
  z-index: 1;
  margin-bottom: 11px;
}
/* OK例の説明のすぐ下に出る、身分証の種類ごとの注記。
   位置をここにしているのは［カメラで撮影］の上の間隔を2項目で揃えるため
   （NG例の後ろに置くと、注記の無い運転免許証のとき空白がボタンの上に残る）。 */
.rf-guide__note {
  max-width: var(--af-guide-w);   /* 説明文と同じ箱・同じ左端に揃える */
  margin: 8px auto 0;
  text-align: left;
  font-size: var(--fs-3xs);
  line-height: var(--lh-normal);
  color: var(--text-sub);
  /* 身分証の種類を切り替えたときに下の要素が上下しないよう、
     注記2行ぶんの高さを常に確保する（運転免許証は注記が無いため空になる）。 */
  min-height: calc(var(--fs-3xs) * var(--lh-normal) * 2);
}

/* ── 撮影枠 ── */
.sg-frame {
  position: relative;
  /* 枠はすべて 4:3 に統一（2026-08-06 ユーザー指示「画像サイズを同じに」）。
     素材が全部 700x525＝4:3 なので、枠を 4:3 にすれば
     「証明書の撮影」と「証明書と一緒に自撮り」の見本が完全に同じ大きさになる。
     旧 11:7 は証明書側だけ横長で、上下に余った水色のぶん中身が小さく見えていた。 */
  aspect-ratio: 4 / 3;
  background: var(--bg1);
  border-radius: var(--af-r);
  overflow: hidden;          /* 見切れ（.is-cut）はこれで切れる */
}
/* ══ NG例の枠＝四隅の白いカギ線（2026-08-06 ユーザー確定）══
   横20px・縦15px・太さ2.5px・白。枠が98x74で横が縦の1.33倍なので、
   カギ線も同じ1.33倍の横長にして形を合わせている。
   ※ OK例（280x210）にも同じカギ線を付けてみたが、ユーザー判断で戻した。
     カギ線が付くのはNG例だけ。
   ★写真はカギ線の【内側】にそろえる。線の太さぶん内側に .sg-frame__in を作り、
     画像はその中に入れる。線の内エッジと写真の外エッジがぴったり合う。
     ⚠️.sg-frame に padding を足す方法は効かない。画像は絶対配置なので
       padding box が基準になり、余白を足しても内側に入らない（実測で確認）。
   ⚠️白い線は【地の水色の帯の上】に乗るのでコントラストは1.12:1しかない。
     ユーザーに数値を示したうえで「白のまま」を選択した経緯がある。
     読みづらさを理由に色を変えないこと。輪郭の1pxの暗い縁だけが頼りなので、
     drop-shadow は外さない。 */
.sg-frame--sm {
  /* カギ線の太さ。写真の内寄せ量も同じ値なので、変えれば両方が追従する。
     ⚠️スマホ（高解像度）では 2.5px がそのまま出るが、PCの等倍表示では
       線だけ2pxに丸められる。そのぶん線の内側と写真の間に0.5pxの隙間が出るが、
       肉眼では分からない範囲なので許容している。 */
  --sg-mark: 2.5px;
  border: 0;
  overflow: visible;           /* 角丸で四隅のカギ線が切れないように */
}
.sg-frame--sm .sg-frame__in {
  position: absolute;
  inset: var(--sg-mark);
  overflow: hidden;            /* 見切れ・拡大した自撮りはこの内側で切る */
  border-radius: 5px;
  background: var(--bg1);
}
.sg-corners {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 0 1px rgba(20, 40, 60, 0.55));
}
.sg-corners span {
  position: absolute;
  box-sizing: border-box;
  width: 20px;
  height: 15px;
}
.sg-corners span:nth-child(1) { top: 0; left: 0;
  border-top: var(--sg-mark) solid var(--white); border-left: var(--sg-mark) solid var(--white); }
.sg-corners span:nth-child(2) { top: 0; right: 0;
  border-top: var(--sg-mark) solid var(--white); border-right: var(--sg-mark) solid var(--white); }
.sg-corners span:nth-child(3) { bottom: 0; left: 0;
  border-bottom: var(--sg-mark) solid var(--white); border-left: var(--sg-mark) solid var(--white); }
.sg-corners span:nth-child(4) { bottom: 0; right: 0;
  border-bottom: var(--sg-mark) solid var(--white); border-right: var(--sg-mark) solid var(--white); }

/* 見切れは横方向だけで見せる（縦もずらすと上辺が枠に接して意図が伝わらない）。
   はみ出す量は left で決まる：枠外に出る幅 ＝ 写真の幅 ×（left − 50%）。
   カードは画像の 5.5〜94.5% を占めるので、カード自体が欠ける割合は
     left 76% → カードの23%（旧・出すぎ）
     left 66% → カードの12%（2026-08-06 ユーザー指示で半分に減らした・現行）
   これ以上 50% に近づけると欠けが分からなくなる。 */
.sg-frame--sm .sg-card--fit.is-cut { left: 66%; top: 50%; }
/* NG例の画像は .sg-frame__in の中に入ったので、子セレクタ（>）ではなく
   子孫セレクタで指定する（OK例は画像が直下のままなので、どちらにも効く形にする）。 */
.sg-frame.is-blur img { filter: blur(2px); }
/* 反射は【カードの上だけ】に出す（2026-08-06 ユーザー指示）。
   写真の面いっぱいに光らせると、カードの外（透明な余白＝地の水色）まで
   光ってしまい「カードに反射した」ようには見えなかった。
   カード画像そのものをマスクに使えば、不透明な部分＝カードにだけ反射が乗る。
   身分証を切り替えたときは page-verify.php のJSが --sg-mask を貼り替える。 */
.sg-frame.is-glare .sg-frame__in::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask: var(--sg-mask) center / 100% 100% no-repeat;
          mask: var(--sg-mask) center / 100% 100% no-repeat;
  background: linear-gradient(112deg, transparent 26%, rgba(255,255,255,0.94) 38%, rgba(255,255,255,0.94) 52%, transparent 64%);
  pointer-events: none;
}

/* ※ 四隅の青いガイド線（.sg-corner）はユーザー指示により廃止（2026-08-05）。 */

/* 証明書（枠いっぱいに正面から）
   ※ box-shadow は付けない。画像の四隅が透明なので、影は「カードの形」ではなく
      画像の矩形の外側に出てしまい、半透明の四角い縁として見えるため。 */
.sg-card {
  position: absolute;
  display: block;
  height: auto;
}
/* 枠と素材がどちらも 4:3 なので、幅100%＝枠にぴったり収まる。
   自撮り例（.sg-selfie は object-fit:cover で枠いっぱい）と同じ大きさになる。 */
.sg-card--fit {
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}
.sg-card--fit.is-cut {
  left: 74%;                 /* 右へずらして枠から見切れさせる */
  top: 44%;
}

/* 自撮り例：1枚のイラスト（本人が証明書を顔の横に持っている）を枠いっぱいに敷く。
   NG例は同じ画像を拡大・移動して作る（画像を増やさない）。
   ※ 枠の 4:3 は .sg-frame の共通指定になったので、ここでは比率を指定しない。 */
.sg-selfie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 自撮りのNG例3枚は、同じイラストを寄せてトリミングして作る。
   ── なぜ拡大が要るか（2026-08-06 検証済み・蒸し返さないこと）──
   素材は1枚しかなく、顔は元画像の縦23〜63%、証明書は横21〜51%を占める。
   拡大せず translate でずらすだけでも顔／証明書は枠外に出せるが、
   その場合ずらしたぶん枠の半分近くが空になり、失敗例として読めない。
   枠を埋めたまま片方だけ外すには寄る（＝拡大する）しかない。
   ユーザー指示「サイズは小さくなってもNG画像が機能するように」に従い、
   3枚とも成立する最小の倍率 1.9 に揃える（2.0でも成立するが大きくなる）。
   ★倍率は3枚とも同じ。違うのは「枠に何を残すか」＝transform-origin だけ。 */
.sg-frame--sm.sg-frame--selfie .sg-selfie { transform: scale(1.9); }

/* 顔が枠の外：下端を基準にする（見えるのは元画像の y47%〜＝顎から下） */
.sg-selfie.is-noface { transform-origin: 50% 100%; }
/* 証明書が見切れている（2026-08-06 ユーザー指示「証明書が3分の1映らないくらい」）。
   証明書の実測位置＝元画像の x29.4〜49.9%（画素をスキャンして計測）。
   scale(1.9) では 枠の左端 = ox×(1−1/1.9)。
   ox=76% → 左端36.0% → 証明書の【32%＝ほぼ1/3】が枠外。顔は全部入る。
   ※ 100%（証明書がほぼ完全に消える）だと、ただの自撮り写真に見えてしまい
     「証明書が入っていない」ことに気づけない。少し見切れている方が伝わる。 */
.sg-selfie.is-nocard { transform-origin: 76% 40%; }
/* ぼやけている：失敗の理由はぼけだけなので、顔も証明書も枠に残す位置にする */
.sg-frame--selfie.is-blur .sg-selfie { transform-origin: 46% 40%; }

/* ── NG例（3つ並び）──
   3枚それぞれに .sg-badge--ng を貼るので、グループ見出しは置かない
   （置くと写真のバッジと説明が二重になり、かえって読みにくい）。 */
.rf-ng {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3枚の間隔（2026-08-06 ユーザー指示で 8px → 12px → 16px と2段階で広げた）。
     ⚠️広げるほど1列が縮む：gap8=104px / 12=101px / 16=98px / 20=96px / 24=93px。
       いちばん長いラベル「光が反射している」が93pxなので、
       【gap 20px が限界。24pxにすると必ず2行に折り返す】。
       さらに広げたい場合は先にラベルを短くすること。 */
  gap: 16px;
  list-style: none;
  margin: var(--af-gap-tight) 0 0;   /* OK例のかたまりと離す */
  padding: 0;
}
/* 自撮り側には「身分証ごとの注記」が無いぶん、その高さ（余白8px＋注記2行ぶん）を
   足して、説明文の下の間隔を証明書側と揃える（2026-08-06 ユーザー指示）。
   空の要素を1つ置くより、同じトークンから計算する方がズレない。 */
.rf-guide[data-rf-guide-type="selfie"] .rf-ng {
  margin-top: calc(var(--af-gap-tight) + 8px + var(--fs-3xs) * var(--lh-normal) * 2);
}
.rf-ng__item { text-align: center; }
/* 証明書のNGは、カードが枠の中で上下に約10pxの透明帯を作る（横長のカードを
   4:3 の枠に入れているため）。そのままだと「バッジ→見えているカード」も
   「カード→ラベル」も18pxになり、帯の無い自撮り側の8pxと揃わない
   （2026-08-06 ユーザー指示「NGの間隔を6つとも一致させて」）。
   ── ここにあった2つの補正は、NG例に枠を付けたことで不要になったので解除した ──
     ① 証明書側の枠を上下9pxずつ食い込ませる（透明帯ぶんの間隔差の打ち消し）
     ② 自撮り側の枠を 89.3% に縮める（見えている絵の大きさ合わせ）
   枠の縁が見えるようになった今は、間隔も大きさも【枠】を基準に揃うため、
   6枚とも同じ 104x78 の枠・バッジから8px・ラベルまで8px で一致する。
   ※ 枠の中では証明書（横長）の上下に余白が残るが、それは
     「カードを撮った写真」として自然な見え方なので補正しない。 */

/* ⚠️ラベルは【8文字まで】。3列なので1列あたり約103px、12px×8字＝98pxが上限。
   9文字以上は2行に折り返す（min-height で高さは揃うが見た目が悪い）。 */
.rf-ng__label {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  letter-spacing: var(--ls-body);
  color: var(--danger-deep);
  /* 「証明書が写っていない」だけ2行になるので、高さを確保して3列の下端を揃える */
  min-height: calc(var(--fs-xs) * 1.45 * 2);
}

/* ── 撮影ボタン（capture でカメラが直接起動する） ──
   実物の input[type=file] は隠し、ラベルをボタンに見せている。
   JSが無くてもラベルのタップでカメラ／ファイル選択が開く。
   ※ 旧：点線の枠（ドロップゾーン風）。ここはドラッグ&ドロップ領域ではなく
     ただのボタンなので、点線は意味を持たないうえ既製テンプレ感が出る。
     実線のアウトラインボタンに変更（2026-08-06）。 */
.rf-shot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  /* 淡いアクアの面（2026-08-07 ユーザー選択・D案）。
     送信ボタン（濃いアクアの塗りつぶし）と同系色の濃淡で組み、
     「淡い＝入力する操作／濃い＝確定する操作」を明るさの差で伝える。
     ※ 2026-08-06 のA案（アクアの塗りつぶし #00B4D8）から変更。
       A案は白文字とのコントラストが 2.46:1 しかなかった。
     ※ 枠は当初 transparent（D案どおり枠なし）だったが、面と地の差が
       1.07:1 しかなく輪郭が見えなかったため 3.03:1 の枠を入れた。
       トークン側に測定値の根拠を書いてある。 */
  background: var(--af-shot-bg);
  border: 1.5px solid var(--af-shot-line);
  border-radius: var(--af-r);
  color: var(--af-shot-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.rf-shot:hover,
.rf-shot:active { background: var(--af-shot-bg-hov); border-color: var(--af-shot-line-hov); }
/* エラー時は枠だけ赤にする。文字を赤にすると淡いアクアの面の上で
   読みにくいうえ、送信ボタンとの濃淡の関係も崩れるため。
   エラーの内容はボタン下の赤字（ripple_apply_tip）が伝える。 */
.rf-shot.is-invalid { border-color: var(--danger-deep); }
.rf-shot__icon {
  flex: 0 0 auto;
  display: block;
  width: 24px;
  height: 24px;
}
.rf-shot__icon svg { width: 100%; height: 100%; display: block; }

/* 実体の input は視覚的に隠す（キーボード操作は label 経由で届く） */
.rf-shot__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.rf-shot__input:focus-visible + .rf-shot__status,
.rf-shot__input:focus-visible ~ .rf-shot { outline: 2px solid var(--primary); }

/* ── ［ファイルを選択］ボタン（capture なし・控えめな見た目）──
   ［写真を撮る］は capture 付きでカメラ固定になるため、
   アルバムから選ぶ経路はこちらで用意する。2026-08-06 に一度1ボタンへ
   統合したが、ユーザー指示で元の2ボタン構成に戻した。 */
.rf-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 10px 16px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--af-r);
  color: var(--text-sub);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-snug);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.rf-pick:hover { background: var(--gray-100); border-color: var(--gray-300); color: var(--text); }
.rf-pick__icon {
  flex: 0 0 auto;
  display: block;
  width: 20px;
  height: 20px;
}
.rf-pick__icon svg { width: 100%; height: 100%; display: block; }

.rf-shot__status {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text-sub);
  word-break: break-all;
}
.rf-shot__status.is-done {
  position: relative;
  padding-left: 18px;
  font-weight: var(--fw-bold);
  color: var(--green-darker);
}
.rf-shot__status.is-done::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 13px;
  height: 13px;
  background-color: var(--green-fresh);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='3.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012.5l5.2%205.2L20%207'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='3.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012.5l5.2%205.2L20%207'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── 姓／名・セイ／メイ（小ラベルを左に置いて縦に積む） ── */
.rf-sub + .rf-sub { margin-top: 8px; }
.rf-sub {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.rf-sub__label {
  flex: 0 0 34px;
  width: 34px;
  margin-right: 12px;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
}
.rf-sub__input { flex: 1 1 auto; min-width: 0; }

/* ── 生年月日（選択肢の右に 年／月／日） ── */
.rf-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.rf-date__item { display: flex; align-items: center; }
.rf-date__item + .rf-date__item { margin-left: 16px; }
.rf-date__label {
  margin-left: 8px;
  /* 2026-08-08「同じ項目は5ページ統一」で 14px → 13px。
     入力欄に添える小ラベルという役割は .rf-sub__label（姓／名／セイ／メイ）と
     同じなので、そちらに合わせた。 */
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-sub);
}
.rf-date select.is-year  { width: 88px; }
.rf-date select.is-month,
.rf-date select.is-day   { width: 68px; }

/* ── 選択肢カード（経験・身分証の種類） ── */
.rf-choice__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px;
}
.rf-choice__item { width: 50%; padding: 0 4px; }
.rf-choice__list--stack { display: block; margin: 0; }
.rf-choice__list--stack .rf-choice__item { width: 100%; padding: 0; }
.rf-choice__list--stack .rf-choice__item + .rf-choice__item { margin-top: 8px; }

/* カード背景（白い面）は使わない（2026-08-06 ユーザー方針）。
   未選択＝枠だけ、選択済み＝アクアの枠＋淡いアクアの面、で区別する。
   枠線は --border(#E4EAF0) だと地の水色にほぼ埋もれるので --af-line を使う。 */
.rf-choice__label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 8px 8px 40px;
  background: transparent;
  border: 1px solid var(--af-line);
  border-radius: var(--af-r);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
/* 身分証の種類（縦積み）だけは1つずつ白いカードにする（2026-08-06 ユーザー指示）。
   5択を確実に見分けたい場面なので、「基本的にカード背景は使わない」方針の
   意図的な例外として扱う（＝あとで白を消さないこと）。枠線は付けない。 */
.rf-choice__list--stack .rf-choice__label {
  justify-content: flex-start;
  background: var(--bg-white);
}

/* 丸（外枠＋中の点）を疑似要素で描き、実物のラジオは隠す */
.rf-choice__label::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 1px solid var(--gray-300);
  border-radius: 50%;
  background: var(--bg-white);   /* ここは「カード」ではなく操作部品なので白のまま */
  pointer-events: none;
}
.rf-choice__label::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 17px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gray-200);
  pointer-events: none;
}
.rf-choice__label input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.rf-choice__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text);
}
/* ── 2026-08-08「同じ項目のフォントサイズは5ページ統一」の後始末 ──
   この2つは apply.css の外（サイト共通のCSS）で大きさが決まっていて、
   応募フォームの中だけ他とズレていた。共通側は触らず、ここで上書きする。
   ・同意チェックの文字：14px だった。役割は選択肢の文字（.rf-choice__name）と
     同じなので 13px にそろえる。
   ・LINEボタンの文字：18px だった。同じ画面の主ボタン（確認／応募する／
     写真を撮る）はすべて 16px なのでそろえる。
     ⚠️ .cta-txt はLPでも使っている共通クラス。必ず .af-body で囲って、
       応募フォームの4ページだけに効かせること。 */
.af-body .rf-check__name { font-size: var(--fs-sm); }
.af-body .cta-txt        { font-size: var(--fs-lg); }
.rf-choice__label:has(input:checked) {
  background: rgba(0, 180, 216, 0.14);   /* 白地をやめたぶん、選択済みの面は少し濃く */
  border-color: var(--primary);
}

/* 身分証の種類（縦積み）は枠線なし（2026-08-06 ユーザー指示）。
   全幅の行が縦に並び、左にラジオの丸が一列に揃うので、枠が無くても
   「選択肢の並び」として読める。選択済みは淡いアクアの面とアクアの点で示す。
   ※ border-width は 1px のまま透明にする。0 にすると選択時に行の高さが変わる。
   ※ :has の行（詳細度 0,2,1）より後ろかつ強く書かないと上書きできない。 */
.rf-choice__list--stack .rf-choice__label,
.rf-choice__list--stack .rf-choice__label:has(input:checked) {
  border-color: transparent;
}
.rf-choice__label:has(input:checked)::before { border-color: var(--primary); }
.rf-choice__label:has(input:checked)::after  { background: var(--primary); }
.rf-choice__label:has(input:focus-visible)::before {
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.3);
}

/* ── 個人情報の取り扱い（本人確認ページ） ──
   ※ 2026-08-06 ユーザー指示で中身を全削除したため【現在は未使用】。
     戻す可能性があるので定義だけ残してある。
   旧：白カード＋左3pxのアクセントバー＋影。読ませたいのは中身の3行なのに
   装飾のほうが強かった。上の罫線と小見出しだけで仕切る。 */
.rf-guard {
  padding: 16px 0 0;
  border-top: 1px solid var(--af-line);
}
.rf-guard__title {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.rf-guard__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rf-guard__list li {
  position: relative;
  padding-left: 14px;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--text-sub);
}
.rf-guard__list li + li { margin-top: 6px; }
.rf-guard__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
}
.rf-guard__list strong { font-weight: var(--fw-bold); color: var(--text); }

/* ── 同意 ──
   旧：白カード＋中央揃え。同意文を中央に置くのは読みにくいうえ、
   「規約の体裁」に見えない。罫線で仕切った左揃えのブロックにする。 */
.rf-privacy {
  margin-top: var(--af-gap-wide);
  padding: 20px 0 0;
  border-top: 1px solid var(--af-line);
}
.rf-privacy__body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--text);
}
.rf-privacy__body a {
  color: var(--primary-deep);
  font-weight: var(--fw-bold);
  text-decoration: underline;
}
.rf-privacy__check { margin-top: 16px; }

.rf-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 32px;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text);
  cursor: pointer;
}
.rf-check::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  background: var(--bg-white);   /* 白カードをやめたので、地の水色と同色だと消える */
  pointer-events: none;
}
.rf-check::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  width: 13px;
  height: 10px;
  background-color: var(--gray-300);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012.5l5.2%205.2L20%207'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012.5l5.2%205.2L20%207'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.rf-check input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.rf-check:has(input:checked)::before {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}
.rf-check:has(input:checked)::after { background-color: var(--white); }
.rf-check:has(input:focus-visible)::before { border-color: var(--accent-deep); }

/* ── 確認画面 ── */
/* 囲み（枠線）はなし。項目のあいだの区切り線だけで一覧として読ませる。
   囲みを外したぶん、左右の内側余白も 0 にして本文の左端に揃える
   ＝見出し「ご入力内容の確認」と項目名の頭が一直線になる（2026-08-06）。 */
.rf-confirm-list {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.rf-confirm-row { padding: 14px 0; }
.rf-confirm-row + .rf-confirm-row { border-top: 1px solid var(--af-line-soft); }
.rf-confirm-row__label {
  margin: 0 0 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-body);
  color: var(--text-sub);
}
.rf-confirm-row__value {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--text);
  word-break: break-all;
  white-space: pre-wrap;
}
.rf-confirm-row__value.is-empty {
  font-size: var(--fs-base);
  color: var(--text-sub);
}

/* ── ボタン ── */
.rf-submit { margin-top: var(--af-gap-wide); }
/* 【高さは 56px に統一】2026-08-07 実測して統一。
   直前まで同じ「フォームの主ボタン」なのに高さが4種類あった：
     写真を撮る/選ぶ 56.0（min-height 56）／確認・応募・提出 54.4（padding だけ）
     修正する 56.4（54.4＋枠1px×2）／LINEボタン 54.0（別クラス）
   54.4 は 8 の倍数から外れる（このプロジェクトは 8px グリッド）。
   タップ領域の最低寸法は Apple 44pt・Material 48dp・WCAG 2.5.5 の 44px なので
   どれも足りてはいたが、そろっていない理由は無いので 56px（8×7）に寄せた。
   display を flex にしているのは、min-height で伸びた分を上下に等分するため
   （block のままだと文字が上に寄る）。.rf-shot と同じ作りに合わせている。 */
.rf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  width: 100%;
  padding: 16px;
  font-family: var(--font);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  border-radius: var(--btn-r);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  -webkit-appearance: none;
  appearance: none;
}
/* ピンクの発光影＋ホバーで浮き上がる動きは、いかにも既製テンプレに見えるので廃止。
   面の色だけで反応させる（2026-08-06）。 */
/* 濃いアクアの塗りつぶし（2026-08-07 ユーザー選択・D案）。
   撮影ボタン（淡いアクアの面）と同系色の濃淡でそろえ、明るさの差だけで
   主従を伝える。白文字とのコントラストは 4.87:1（ピンクの 3.12:1 より読みやすい）。
   ⚠️ LPのCTAはピンク（--cta-form）のまま。トークンは変えていないので、
     フローティングCTA・LP内ボタンには影響しない。変わるのは応募フォームの
     主ボタン3つ（確認／この内容で応募する／証明書を提出する）だけ。 */
.rf-btn--next {
  color: var(--white);
  background: var(--primary-deep);
  border: 0;
}
.rf-btn--next:hover,
.rf-btn--next:active { background: var(--primary-darker); }
.rf-btn--back {
  margin-top: 16px;
  /* 枠1px×2のぶん padding を1px減らす。border-box なので、これをしないと
     中身の高さが 56.4px になって min-height:56px を超え、この1つだけ背が高くなる。 */
  padding: 15px 16px;
  color: var(--text);
  background: var(--bg-white);
  border: 1px solid var(--gray-300);
}
.rf-btn--back:hover { background: var(--gray-100); }

/* 「あとで提出する」＝主導線ではないので、小さなテキストリンクに見せる。
   （no-JS でも成立させるため要素は button のまま） */
.rf-btn--skip {
  display: block;
  width: auto;
  margin: 16px auto 0;   /* 確認画面の［修正する］と同じ間隔 */
  padding: 6px 12px;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--text-sub);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
}
.rf-btn--skip:hover { color: var(--text); background: none; }

.rf-submit__note {
  margin: 16px 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-sub);
}


/* ═══════════════════════════════
   LINE での応募（代替導線）
═══════════════════════════════ */
.af-alt {
  margin-top: var(--af-gap-wide);
  text-align: center;   /* ここはCTAブロックなので中央のままでよい */
}
.af-alt__label {
  margin: 0 0 12px;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  color: var(--text-sub);
}
/* LINEボタンは LP と共通の .btn--lg（padding 18px＝高さ54px）なので、
   そのままだと同じ画面の .rf-btn（56px）と2px違う。
   LP側のトークンは触らず、このボタンだけ 56px に合わせる。 */
.af-alt__btn { width: 100%; min-height: 56px; margin-bottom: 0; }


/* ═══════════════════════════════════════════════════════════════════
   応募完了ページ
═══════════════════════════════════════════════════════════════════ */

/* 【2026-08-08 撤去】ここで完了ページの本文だけ左右に21pxを足し、
   カードの中の文字（当時45px）に合わせていた。
   そのあと列全体を 24→32px に広げたため、完了ページだけ二重に内側へ寄り、
   本文の左端が 他4ページ32px / 完了ページ53px と食い違った（実測して発覚）。

   ユーザー選択（A案）により、この21pxを撤去して【5ページとも32px】にそろえた。
   ・ページをまたいだ一致を、1ページ内のカード内外の一致より優先する。
   ・カードの中の文字は 32+1+20＝53px のままだが、カードは枠で囲まれているので
     中身が内側にあることは自然に見える。
   戻す場合：.tk-complete, .tk-info__body, .tk-back に padding-left/right を付ける。 */
/* 旧：56pxの緑チェック円＋中央揃え。完了画面の定番すぎる形で、
   しかも「ご応募ありがとうございました」より記号のほうが目立っていた。
   円をやめ、見出しを一段大きくして言葉で完了を伝える（2026-08-06）。 */
.tk-title {
  margin: 0 0 12px;
  /* 2026-08-08 ユーザー指示「4ページの見出しのフォントサイズ統一」で
     22px（--fs-2xl）→ 18px（--fs-xl）、続けて「1px小さく」で 17px。
     統一前は 入力項目17 / ご入力内容の確認18 / 本人確認のお願い18 /
     ご応募ありがとうございました22 と3種類あった。
     ★.rf-section__title とまったく同じ式にしてある。片方だけ変えないこと。 */
  font-size: calc(var(--fs-xl) - 1px);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text);
}
.tk-lead {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--text-body);
}

/* ── 補足（自動返信メールの案内）── iマークの円は廃止 ── */
/* 補足のかたまり。2026-08-08 に位置が変わった：
   以前は「ご応募ありがとうございました」の直下（tk-complete の中）だったが、
   LINEの追加より前に読ませる情報ではないので、LINEカードの【下】へ移した。
   ・上の余白を 20 → 40px に。前がカード（枠つき）になったので、
     20pxだとカードの続きに見えてしまう（実測して調整）。
   ・囲みは付けない。読まなくても困らない情報だから。 */
.tk-info {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--af-line);
}
/* 補足が2段落になったので、段落どうしの間隔を足す（以前は1段落だけだった） */
.tk-info__body + .tk-info__body { margin-top: 12px; }
.tk-info__body {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-sub);
}
.tk-info__body strong { font-weight: var(--fw-bold); color: var(--text); }
/* 未提出であることを知らせる赤字（2026-08-08 ユーザー指示）。
   #A83A3A は水色の地 #EBF3FA の上で 5.61:1（基準4.5:1）。
   サイト共通の --danger-deep #B94040 は 4.48:1 でわずかに足りないので使わない
   （.af-body .rf-notice で使っている値と同じ）。 */
.tk-info__body strong.tk-alert { color: #A83A3A; }
.tk-info__body a { color: var(--primary-deep); font-weight: var(--fw-bold); text-decoration: underline; }

/* ── お願い（身分証／LINE友だち追加）── 面は塗らず枠だけ・左揃え ── */
.tk-request { margin-top: var(--af-gap-wide); }
.tk-card {
  padding: 20px 20px 18px;
  background: transparent;
  border: 1px solid var(--af-line);
  border-radius: var(--af-r);
}
.tk-card + .tk-card { margin-top: 16px; }

/* ── カードの面の色（2026-08-08 ユーザー選択）──
   上（身分証）＝白 ／ 下（LINE）＝ごく淡いグリーン。
   下だけ色を変えているのは、そのカードの中にある緑のボタンと系統をそろえ、
   「これはLINEの話」と面の色でも分かるようにするため。

   ★色は【地より必ず明るい側】にすること。
     地（--bg1 #EBF3FA）はすでに淡い色なので、そこから濃くすると
     文字とのコントラストが落ちる。実際、最初にLINEカードを #E4F6E9 で
     作ったところ本文が 4.28:1 になり基準（4.5:1）を割った。
     いまの #F2FCF4 は 4.86:1。白のカードは 5.10:1。
   ※ 地との明るさの差は 1.06〜1.12 と小さいが、1pxの枠があるので
     面としては見分けが付く（WCAG 1.4.11 は枠か面のどちらかが満たせばよい）。 */
.tk-card--id {
  background: var(--bg-white);
  border-color: rgba(120, 160, 195, 0.20);
}
.tk-card--line {
  /* 2026-08-08 ユーザー指示で 淡いグリーン #F2FCF4 → 白。
     見出し行に黄色の帯を入れたことで、面まで色を持たせる必要がなくなった。
     白に戻したことで本文・注記のコントラストは 4.86 → 5.10:1 に上がっている。
     ※ 枠は緑のまま。ボタンと合わせて「LINEの話」であることを示す役目が残るため。
       中立の色にしたい場合は rgba(120,160,195,0.20)（身分証カードと同じ）。 */
  background: var(--bg-white);
  border-color: rgba(30, 110, 46, 0.26);
}

/* ── LINEカードの見出し行を黄色の帯にする（2026-08-08 ユーザー選択・C案）──
   完了ページで一番して欲しいのがLINEの友だち追加なので、見出しの行だけを
   黄色で塗って「ここが要点」と面で示す。面（淡いグリーン）は現状のまま。

   ★カードいっぱいに広げる方法：カードの padding（20px）と同じだけ
     マイナスマージンで外へ押し出す。padding を変えたらこの -20px も直すこと。
   ★角丸はカードの内側の丸み（外周8px − 枠1px = 7px）に合わせる。
     ここを合わせないと、カードの丸い角から黄色の四角い角がはみ出す。
     overflow:hidden は使っていない（フォーカスの枠まで切ってしまうため）。

   【色】#FFE94D。文字（#3D3D3D）とのコントラストは 8.80:1（基準4.5:1）。
   ★黄色と緑が【縦に分かれて】置かれるのが要点。カード全体を黄色にすると
     緑のボタンが黄色の面の上に乗り、色が同じ枠内でぶつかる（比較して選定）。
   ※ 身分証カード（.tk-card--id）の見出しには当たらない。 */
.tk-card--line .tk-card__title {
  margin: -20px -20px 16px;
  padding: 14px 20px;
  background: #FFE94D;
  border-radius: calc(var(--af-r) - 1px) calc(var(--af-r) - 1px) 0 0;
  /* 2026-08-08 ユーザー指示で中央寄せ。
     帯として面いっぱいに敷いてあるので、左寄せだと右側だけ黄色が余って見える。
     ※ このフォームは「中央に置くのはCTAとステップだけ」という方針だが、
       ここは帯（面）に載る見出しなので例外にしている。
       カードの中の本文と注記は左寄せのまま（読む文なので動かさない）。 */
  text-align: center;
}
.tk-card__title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text);
}
.tk-card__body {
  margin: 12px 0 16px;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--text-sub);
}
.tk-card__body strong { font-weight: var(--fw-bold); color: var(--cta-line-drk); }
/* 完了ページのLINEボタン。
   【2026-08-08 経緯】
     ① フォーム4画面と同じ 幅100% × 高さ56px にそろえていた
     ② 「大きすぎる」→ 高さ48・文字15・光を弱める・幅を文字ぶん(213px)＋中央寄せ
     ③ 「もどして」→ ②を全部取り消して①へ
     ④ 「縦幅を小さくしたい」→【縦だけ】56 → 48px にした。いまここ。
        幅100%・文字16px・光・角丸は①のまま。横方向は一切触っていない。

   ★48pxが下限。タップ領域の最低寸法は Apple 44pt／Material 48dp／
     WCAG 2.5.5 の 44px。これ以上低くすると押し間違いが増える。
   ※ この画面のボタンだけ48pxになり、フォーム3画面の送信ボタン（56px）とは
     高さが違う。同じ画面に並ぶことは無いので不揃いには見えない。 */
.tk-card__btn {
  width: 100%;
  min-height: 48px;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 0;
}
.tk-card__note {
  margin: 16px 0 0;
  /* 2026-08-08「同じ項目は5ページ統一」で 11px → 12px。
     他の注記（.rf-note / .rf-submit__note / .tk-info__body / .tk-card__body /
     .tk-flow__d）がすべて 12px（--fs-xs）で、ここだけ1段小さかった。 */
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--text-sub);
}

/* ── この後の流れ ──【2026-08-08 現在このCSSは使われていません】
   page-thanks.php からマークアップごと削除しました（LINEへの導線に集中させるため）。
   戻すときのマークアップは page-thanks.php のコメントに残してあります。
   ここを消すかどうかは、戻す予定が無くなってから判断してください。 ──
   旧：番号つき白カードを下向き三角でつないだ形。カード＋三角は
   生成スライドの定番で、3枚とも同じ重さに見えて順序が読み取れなかった。
   番号を縦線でつなぐ素のタイムラインに変更（2026-08-06）。 */
.tk-flow__title {
  margin: var(--af-gap-wide) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--af-line);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text);
}
.tk-flow {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.tk-flow__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-bottom: 20px;
}
.tk-flow__item:last-child { padding-bottom: 0; }
/* 番号の丸から次の丸へ伸びる縦線 */
.tk-flow__item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 13px;                /* 28px の丸の中心 */
  top: 30px;
  bottom: 4px;
  width: 2px;
  background: var(--af-line);
}
.tk-flow__num {
  position: relative;        /* 縦線より前に出す */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-flat);
}
.tk-flow__text { flex: 1 1 auto; }
.tk-flow__t {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-body);
  color: var(--text);
}
.tk-flow__d {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--text-sub);
}

.tk-back {
  margin: var(--af-gap-wide) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
}
.tk-back a {
  color: var(--text-sub);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.tk-back a:hover { text-decoration: underline; }


/* ═══════════════════════════════════════
   狭い端末（〜359px）
═══════════════════════════════════════ */
@media (max-width: 359px) {
  .sec--apply,
  .sec--thanks { padding-left: 16px; padding-right: 16px; }
  .rf-date__item + .rf-date__item { margin-left: 8px; }
  .rf-date select.is-year { width: 78px; }
  .rf-date select.is-month,
  .rf-date select.is-day  { width: 60px; }

  /* ヘッダー：以前は320px幅で「応募フォーム」が右へはみ出していたため、
     キャラ・見出し・バーをまとめて小さくしていた。
     いまは通常幅のキャラ自体が小さくなり、はみ出さなくなっている（下記）。
     ⚠️ 同じ変数を2回書かないこと。かつて --af-char-y をこのブロックに
        二重定義していて後の値が勝ち、狭い端末だけキャラが雲から2px浮いていた。 */
  :root {
    /* 【2026-08-08 縮小】以前はここで キャラ100px / 下げ32px / 見出しの重なり14px /
       バー144px も上書きしていたが、削除して左余白だけにした。

       ・削除できた理由：見出しを28px→32pxに戻した際に測り直したところ、
         キャラ108pxのままでも 320px に収まることが分かった
         （見出しの右端 300.4px・ひとことの右端 271px／画面320px）。
       ・縦の数値（--af-char-y / --af-bar-h）は px なので画面幅では変わらない。
         雲の高さも43px固定。横方向は雲が縮む（preserveAspectRatio="none"）ぶん、
         キャラの位置では雲がむしろ高くなり、足元の重なりは通常幅より増える。

       残すのは横位置だけ。画面が55px狭いので、通常幅のままだと右がはみ出す。
       ★2026-08-08 から --af-char-x ではなく --af-tip-left を上書きすること。
         キャラの左上は先端から逆算する形になったので、ここで --af-char-x を
         書くと計算式ごと上書きしてしまい、キャラの大きさを変えたときに
         狭い端末だけ文字がズレる。
       値：見出しの左端 ＝ 先端 + 11px（--af-title-lap）。
           見出しの幅は201.6pxなので、右端 98.8+201.6＝300.4px（画面320px）。 */
    --af-tip-left: 87.8px;
  }
  /* 【2026-08-08 削除】ここで見出しを28px・ひとことを11px（--fs-2xs）に
     落としていたが、両方やめて通常幅と同じ 32px / 12px にした。

     ・落としていた理由は「320pxでは右がはみ出すため」。実測し直したところ
       32px/12px でも収まる（見出しの右端 296.7px・ひとことの右端 267.1px／画面320px）。
       ひとことの11pxは『17文字あるので』という理由だったが、文言が
       「かんたん5分で応募完了します♪」15文字に短くなった時点で前提が消えていた。
     ・28px はこのサイトの15段階スケールに無い値（--fs-3xl 26 と --fs-4xl 32 の間）で、
       ここだけ 28/11＝2.545、他は 32/12＝2.667 と【幅によって比率が変わって】いた。
       2.667 は黄金比の2乗（2.618）に近い意図した値なので、そちらに揃えた。
     ・ひとことの top の上書き（+32px）も削除。見出しが32pxに戻り、
       行の高さ（44px固定）も同じになったので、通常幅の +34px がそのまま正しい。
     ⚠️ 文言を長くするときは320pxでの右端を測り直すこと。いまの余裕は
       見出し 23px・ひとこと 53px。 */
  /* 見出しが28pxに小さくなるぶんのエコー調整。エコー自体を出さなくなったので
     現在は効いていない。戻すときのために値だけ残す。 */
  .af-bar__title { --af-echo-1: 2px; --af-echo-2: 5px; }
}


/* ═══════════════════════════════════════
   PC（1024px〜）
   サイドバーを出さないので、本文カラムを画面中央に置き直す
═══════════════════════════════════════ */
@media (min-width: 1024px) {
  /* メインコンテンツ列の外側は無地の白。
     responsive.css が body に敷いている PC 用背景画像（pc-bg.webp・淡ピンクの水面）を
     応募系ページだけ打ち消す。af-body は functions.php の body_class フィルタで付与。 */
  body.af-body {
    background: var(--bg-white);
  }

  /* responsive.css の .lp-main は3枚重ねのドロップシャドウで「浮いた1枚」に
     見せている（LPの意匠）。応募系は外が無地の白なので、そのまま出すと
     ただの浮いたカードになってしまう。影は消し、上のバーと同じ1pxの
     縦罫線でカラムの端を示す（2026-08-06）。 */
  .af-main.lp-main {
    width: 480px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: none;
    border-left: 1px solid var(--af-line-soft);
    border-right: 1px solid var(--af-line-soft);
  }
  .af-bar {
    width: 480px;
    max-width: 480px;
    margin: 0 auto;
    border-left: 1px solid var(--af-line-soft);
    border-right: 1px solid var(--af-line-soft);
  }
  /* PCでもキャラの逃げは必要なので padding-top は上書きしない。
     （以前は 32px にしていたが、それだとキャラがステップ表示に乗る） */
}