/* ============================================================
   応募・お問い合わせフォーム（entry.html だけで読み込む）
   入力 → 確認 → 完了 の切り替えは entry-form.js。
   入力欄の文字は 16px 未満にしない（iPhone で入力時に画面が拡大されるため）。
   ============================================================ */

/* フォームのセクション。見出しは吊り札（.plate）を使わない素の h1 なので、間隔を詰める。
   ヘッダーは固定配置（本文の上に重なる）なので、上の余白はヘッダーの高さ＋28px にする */
.sec--form { gap: 24px; padding-top: calc(var(--header-h) + 28px); border-top: 0; }
.page-title {
  margin: 0;
  padding: 0 2px 8px;
  border-bottom: var(--line) solid var(--ink);
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .04em;
}

/* 手順・フォーム・確認・完了をまとめる入れ物 */
.entry { display: flex; flex-direction: column; gap: 28px; }

/* 画面の切り替えやエラーの項目へ移動したとき、固定ヘッダーの下に少し余白を残して止める
   （html の scroll-padding-top はセクションの上の線をヘッダーに合わせる値なので、そのままだと見出しが隠れる） */
.entry,
.field { scroll-margin-top: 16px; }

/* ------------------------------------------------------------
   手順の表示（1 入力 → 2 確認 → 3 完了）
   今いる手順は黒地、終わった手順は黄色にする
   ------------------------------------------------------------ */
.form-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 8px;
}
.form-steps li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  background: var(--paper);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4;
}
.form-steps li + li { border-left: 2px solid var(--ink); }
.form-steps li.is-done { background: var(--y); }
.form-steps li[aria-current="step"] { background: var(--ink); color: var(--y); }
.form-step-no {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-family: var(--f-display);
  font-size: 12px;
  line-height: 1;
}

/* ------------------------------------------------------------
   入力画面
   ------------------------------------------------------------ */
.form { display: flex; flex-direction: column; gap: 30px; }
.form-note { font-size: 14px; color: var(--steel); }
.form-note .badge { margin: 0 4px 0 0; }

/* 項目のひとまとまり。<fieldset> の既定の枠・余白を消す */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.field-label {
  display: block;
  margin-bottom: 2px;
  padding: 0;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.5;
}

/* 必須・任意の札 */
.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px 2px;   /* 字形が下寄りなので上を詰める */
  border: 2px solid var(--ink);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
  vertical-align: 2px;
}
.badge--req { background: var(--ink); color: var(--y); }
.badge--opt { background: var(--paper); color: var(--ink); }

/* 姓・名のように 2 つ並べる欄 */
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.field-sub { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-sub-label { font-size: 14px; font-weight: 700; }

/* 入力欄・選択欄 */
.input,
.select {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 10px 12px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 6px;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}
.input::placeholder { color: var(--steel); opacity: .6; }
/* フォーカス中は黄色の輪で囲む（キーボードでもタップでも出す） */
.input:focus,
.select:focus { outline: none; box-shadow: 0 0 0 4px var(--y); }
.textarea { min-height: 180px; resize: vertical; line-height: 1.7; }

/* 選択欄（▼の印は線 2 本で描く） */
.select {
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 19px center, right 13px center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.select:invalid { color: var(--steel); }   /* 「年を選ぶ」など未選択のときは薄く */
.select option { color: var(--ink); }

/* 生年月日：年は 1 行使い（和暦も出すため）、月・日はその下に並べる */
.field-birth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.field-birth-year { grid-column: 1 / -1; }

/* 入力エラーの欄 */
.input[aria-invalid="true"],
.select[aria-invalid="true"] { border-color: var(--error); background-color: #FFF4F5; }

/* 補足・文字数・エラーの文 */
.field-hint { font-size: 14px; line-height: 1.6; color: var(--steel); }
.field-count { font-size: 13px; color: var(--steel); text-align: right; font-variant-numeric: tabular-nums; }
.field-count.is-over { color: var(--error); font-weight: 700; }
.field-error { color: var(--error); font-size: 14px; font-weight: 700; line-height: 1.6; }

/* ------------------------------------------------------------
   選択肢（ラジオボタン）。枠全体を押せるようにし、選んだものを黄色にする
   ------------------------------------------------------------ */
.choices { display: flex; flex-direction: column; gap: 8px; }
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px;
  font-weight: 700;
  line-height: 1.45;
  cursor: pointer;
}
.choice-text { min-width: 0; word-break: auto-phrase; overflow-wrap: anywhere; }
.choice:has(input:checked) { background: var(--y); }
.choice:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.choice input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
}
.choice input:checked { background: var(--ink); box-shadow: inset 0 0 0 4px var(--paper); }
.choice input:focus-visible { outline: none; }
.choices:has([aria-invalid="true"]) .choice { border-color: var(--error); }

/* 「その他」を選んだときに出す入力欄 */
.field-other { margin-top: 4px; }

/* スパム避けの欄。画面外に置いて人には見せない（display: none だと自動入力ツールが避けるため） */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* フォーム全体へのお知らせ（入力エラーがある・送信に失敗した） */
.form-alert {
  padding: 12px 14px;
  background: #FFF4F5;
  color: var(--error);
  border: 2px solid var(--error);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

/* ボタンの並び。ボタンの厚み（--btn-depth: 7px）が下に出るので、間は広めにとる */
.form-actions { display: flex; flex-direction: column; gap: 20px; margin-top: 4px; }
.form-actions .btn { -webkit-appearance: none; appearance: none; width: 100%; }
.btn[aria-busy="true"],
.btn:disabled { opacity: .55; cursor: progress; }

/* ------------------------------------------------------------
   確認画面
   ------------------------------------------------------------ */
.confirm { display: flex; flex-direction: column; gap: 20px; }
.confirm-lead { font-weight: 700; outline: none; }
.confirm-list {
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px;
}
.confirm-list > div + div { border-top: 2px solid var(--ink); }
.confirm-list dt {
  padding: 6px 12px;
  background: var(--y);
  border-bottom: 2px solid var(--ink);
  font-size: 14px;
  font-weight: 900;
}
.confirm-list dd {
  margin: 0;
  padding: 10px 12px 12px;
  white-space: pre-wrap;   /* お問い合わせ内容の改行をそのまま出す */
  overflow-wrap: anywhere;
}
.confirm-sub { display: block; margin-top: 2px; font-size: 14px; color: var(--steel); }
.confirm-empty { color: var(--steel); }

/* ------------------------------------------------------------
   完了画面
   ------------------------------------------------------------ */
.complete { display: flex; flex-direction: column; gap: 16px; }
.complete-title { outline: none; }
.complete .btn { margin-top: 12px; }