/* 会員フォーム部品（template-parts/member/field.php・progress.php）。会員登録・マイページ・アカウント設定で共用。
   デザイン 06-register §0・§2・§3。SP 基準、768px 以上で PC。 */

/* ---- 進捗 2 段（入力 ▶ 完了。Figma SP 159.5×40・矢印 16 / PC 330×40） ---- */
.c-progress { display: flex; align-items: center; justify-content: center; gap: 0; width: 100%; margin: 0; padding: 0; list-style: none; }
.c-progress__step {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; flex: 0 1 159.5px; min-width: 0; min-height: 40px; padding: 2px 0; /* 320px 幅では縮める（2×159.5+矢印 16 = 335 > 本体 280） */ border: 1px solid var(--jn-color-secondary); border-radius: 4px;
  background: var(--jn-color-white); color: var(--jn-color-secondary);
  font-size: 14px; font-weight: 700; line-height: 19.6px; letter-spacing: 1.4px; text-align: center;
}
.c-progress__en { font-size: 11px; font-weight: 400; line-height: 14px; letter-spacing: 0; } /* 日本語の下に英語（UX r3 L2） */
.c-progress__step.is-current { background: var(--jn-color-secondary); color: var(--jn-color-white); }
.c-progress__arrow { display: flex; flex: 0 0 16px; width: 16px; height: 16px; color: var(--jn-color-secondary); }
.c-progress__arrow svg { width: 100%; height: 100%; }

/* 見出しの英語は h1 の 700 を継がず細字（お問い合わせ .p-contact__heading-en と同じ） */
.c-heading .c-mf__en { font-weight: 400; }
/* 見出しアイコンはお問い合わせと同じ鉛筆（icons/pen.svg = template-parts/contact/heading.php の SVG。pixel-compare-b2 M1） */
.c-heading__icon.jn-icon--pen { color: var(--jn-color-primary); }

/* ---- 全体の注意帯 ---- */
.c-mf-notice { margin: 0; padding: 12px 16px; border-radius: 4px; font-size: 14px; line-height: 1.6; }
.c-mf-notice--error { border: 1px solid var(--jn-color-primary); color: var(--jn-color-primary); background: var(--jn-color-white); }
.c-mf-notice--info { border: 1px solid var(--jn-color-secondary); color: var(--jn-color-secondary); background: var(--jn-color-white); }

/* ---- 項目 ---- */
.c-mf-list { display: flex; flex-direction: column; gap: 40px; }
.c-mf, .c-mf__confirm { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.c-mf__confirm { margin-top: 16px; }
.c-mf__head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 4px; min-height: 22px; }
.c-mf__label { color: var(--jn-color-text-strong); font-size: 16px; font-weight: 500; line-height: 22.4px; letter-spacing: 0.8px; }
.c-mf--file .c-mf__label { font-size: 14px; font-weight: 700; line-height: 24.5px; letter-spacing: 0; }
.c-mf__en { color: var(--jn-color-text); font-size: 12px; line-height: 16.8px; }
.c-mf__badge {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 41px; height: 21px; padding: 2px 8px; border: 1px solid var(--jn-color-primary); border-radius: 4px;
  background: var(--jn-color-primary); color: var(--jn-color-white);
  font-size: 12px; font-weight: 700; line-height: 16.8px; letter-spacing: 0.6px; white-space: nowrap;
}
.c-mf[data-jn-mf="last_name"] .c-mf__badge { width: 43px; height: 22px; font-size: 13px; line-height: 18.2px; letter-spacing: 0.65px; } /* 名前だけ Figma 13px・43×22（pp2 forms2#R3） */
.c-mf__badge--optional { background: var(--jn-color-white); color: var(--jn-color-primary); font-weight: 500; }
.c-mf__body { min-width: 0; }

.c-mf__input, .c-mf__select, .c-mf__textarea {
  box-sizing: border-box; width: 100%; margin: 0; border: 1px solid var(--jn-color-border); border-radius: 4px;
  background: var(--jn-color-white); color: var(--jn-color-text-strong);
  font: inherit; font-size: 16px; font-weight: 400; line-height: 25.6px; letter-spacing: 0.8px;
}
.c-mf__input { height: 42px; padding: 8px 16px; }
/* placeholder は #CCC（Figma 06 §0。--jn-color-placeholder は画像の仮枠の地 #D9D9D9 なので文字色に使わない。pp forms M4） */
.c-mf__input::placeholder, .c-mf__textarea::placeholder { color: var(--jn-color-border); opacity: 1; }
.c-mf__textarea { height: 120px; padding: 8px 16px; border-color: #ddd; resize: vertical; }
.c-mf__input:focus-visible, .c-mf__select:focus-visible, .c-mf__textarea:focus-visible {
  outline: 2px solid var(--jn-color-focus); outline-offset: 1px; /* リングは全体既定の --jn-color-focus 1 色（teal #34BFBD は白地 2.25:1 で 3:1 未満。UX r5 M1/M2） */
}
.c-mf__input.is-error, .c-mf__select.is-error, .c-mf__textarea.is-error { border-color: var(--jn-color-primary); }

.c-mf__pair { display: flex; flex-direction: column; gap: 16px; }
.c-mf__pair-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.c-mf__sublabel { color: var(--jn-color-text); font-size: 12px; font-weight: 500; line-height: 16.8px; letter-spacing: 0.6px; }

.c-mf__select-wrap { position: relative; display: block; width: 100%; }
/* 矢印は細い線の V 字（Figma 06 セレクト。塗りの ▼ ではない。pixel-compare-b2 M2） */
.c-mf__select-wrap::after {
  content: ""; position: absolute; top: 50%; right: 19px; box-sizing: border-box; width: 7.5px; height: 7.5px; margin-top: -5.5px;
  border-right: 2px solid var(--jn-color-text-muted); border-bottom: 2px solid var(--jn-color-text-muted); /* V 幅 10・高さ 6、#666 相当の濃さ（Figma 06 セレクト。pp2 forms R2） */
  transform: rotate(45deg); pointer-events: none;
}
.c-mf__select { height: 42px; padding: 8px 40px 8px 16px; appearance: none; -webkit-appearance: none; cursor: pointer; }
/* 未選択（「--選択してください--」「----」）は placeholder と同じ #CCC、選択後は通常色（Figma 06。pp forms M5）。開いた一覧の選択肢は通常色のまま */
.c-mf__select:has(option[value=""]:checked) { color: var(--jn-color-border); }
.c-mf__select option { color: var(--jn-color-text-strong); }

.c-mf__date { display: flex; flex-direction: column; gap: 16px; }
.c-mf__date-unit { display: flex; align-items: center; gap: 8px; }
.c-mf__date-unit .c-mf__select-wrap { flex: 0 0 140px; width: 140px; }
.c-mf__date-suffix { flex: 0 0 16px; width: 16px; color: var(--jn-color-text-strong); font-size: 16px; line-height: 32px; }

.c-mf__choices { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 16px; }
.c-mf__choice { display: inline-flex; align-items: center; gap: 8px; color: var(--jn-color-text-muted); font-size: 14px; font-weight: 500; line-height: 18.2px; letter-spacing: 0.7px; cursor: pointer; }
.c-mf__choices--radio .c-mf__choice { gap: 10px; color: #191919; font-weight: 400; line-height: 19.6px; }
.c-mf__choice input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--jn-color-primary); }
.c-mf__choice input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--jn-color-primary); }

.c-mf__file { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px 16px; }
.c-mf__file-btn {
  display: inline-flex; flex: none; align-items: center; justify-content: space-between; gap: 16px; box-sizing: border-box;
  min-width: 180px; max-width: 100%; height: 38px; padding: 8px 16px; white-space: nowrap; /* 日英併記（UX r3 L3）で幅は文言に合わせる。320px でも 1 行に収まる（実測 230px） */ border: 1px solid var(--jn-color-border); border-radius: 4px;
  background: var(--jn-color-white); color: var(--jn-color-text); font-size: 14px; line-height: 22.4px; letter-spacing: 0.7px; cursor: pointer;
}
.c-mf__file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* focus-within だとクリックでも枠が出るので、キーボード時（:focus-visible）だけボタンに枠 */
.c-mf__file:has(.c-mf__file-input:focus-visible) .c-mf__file-btn { outline: 2px solid var(--jn-color-focus); outline-offset: 1px; }
/* ボタン右のピンクの＋（Figma 06 ファイル選択。pixel-compare-b2 M3） */
.c-mf__file-btn-text { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; }
.c-mf__file-btn-en { font-size: 12px; }
.c-mf__file-plus { position: relative; flex: none; width: 12px; height: 12px; }
.c-mf__file-plus::before, .c-mf__file-plus::after { content: ""; position: absolute; inset: 5.25px 0; background: var(--jn-color-primary); }
.c-mf__file-plus::after { inset: 0 5.25px; }
.c-mf__file-name { flex: 0 1 auto; min-width: 0; color: var(--jn-color-text); font-size: 14px; line-height: 22.4px; letter-spacing: 0.7px; word-break: break-all; }

/* 同意の行は 679 幅・中央（06 PC 同意 [380.5 679×29]。pixel-triage A8） */
.c-mf__agree { display: flex; align-items: flex-start; gap: 10px; max-width: 679px; margin-inline: auto; color: var(--jn-color-text-strong); font-size: 14px; line-height: 25.2px; letter-spacing: 0.7px; cursor: pointer; }
/* 同意のチェックは 24×24 白地・1px #CCC・r2、チェック時はティール地に白のレ点（Figma 06。お問い合わせ page-contact.css の .p-contact__consent と同じ。pp forms M6）。
   input のまま appearance だけ外すので Tab・Space の操作とフォーカスリングはそのまま */
.c-mf__agree-box {
  flex: 0 0 24px; box-sizing: border-box; width: 24px; height: 24px; margin: 0;
  appearance: none; -webkit-appearance: none;
  background: var(--jn-color-white); border: 1px solid var(--jn-color-border); border-radius: 2px; cursor: pointer;
}
.c-mf__agree-box:checked {
  background: var(--jn-color-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 20px no-repeat;
  border-color: var(--jn-color-secondary);
}
.c-mf__agree-box:focus-visible { outline: 2px solid var(--jn-color-focus); outline-offset: 2px; }
.c-mf__agree-box[aria-invalid="true"] { border-color: var(--jn-color-primary); }
/* base.css の word-break: keep-all だと SP でリンク・読点ごとに細切れ（4 行）になる。Figma どおり通常の折返し（pixel-compare-b2 M9） */
.c-mf__agree-text { min-width: 0; word-break: normal; line-break: strict; }
.c-mf__agree-text a { color: var(--jn-color-contact); text-decoration: underline; }

.c-mf__help { margin: 0; color: var(--jn-color-text); font-size: 12px; font-weight: 400; line-height: 19.2px; white-space: normal; }
.c-mf--password .c-mf__help, .c-mf--file .c-mf__help { font-weight: 350; }
.c-mf--password .c-mf__help { margin-top: 7px; } /* Figma は入力欄→注記の字面 21（メールは 13。pp2 forms2#R6） */
.c-mf__error { margin: 0; color: var(--jn-color-primary); font-size: 14px; font-weight: 700; line-height: 1.5; }
.c-mf__error[hidden] { display: none; }

/* SP の入力欄はタップ領域 44px（UX r2a M-D）。/login/ の .p-login__input（SP 44・PC 42）と同じ境界で、画面ごとでなく共通の .c-mf 側で揃える */
@media (max-width: 767px) {
  .c-mf__input, .c-mf__select { height: 44px; min-height: 44px; }
  .c-mf__file-btn { height: 44px; min-width: 180px; padding: 2px 20px 2px 16px; line-height: 18px; } /* CR r3 L-4: 同じ画面のタップ対象を 44px に揃える。幅は Figma SP の 180、＋は右端から 20（pp4 E1 #1） */
  /* SP は英語をボタン内 2 段目にして「選択されていません」をボタンの右に置く（Figma SP。pixel-compare-b2 M3） */
  .c-mf__file-btn-text { flex-direction: column; align-items: flex-start; }
  .c-mf__file-btn-sep { display: none; }
  .c-mf__file-btn-en { font-size: 11px; line-height: 14px; letter-spacing: 0; }
  .c-mf__file-name { font-size: 14px; line-height: 19.6px; letter-spacing: 0.7px; word-break: normal; overflow-wrap: anywhere; } /* Figma SP は 14px（pp4 E1 #3） */
}

@media (min-width: 768px) {
  .c-progress { gap: 8px; }
  .c-progress__step { flex: 1 1 0; }
  .c-progress__arrow { flex-basis: 24px; width: 24px; height: 24px; }
  .c-mf__pair { flex-direction: row; }
  .c-mf__pair-item { flex: 0 1 342px; width: 342px; }
  .c-mf--select .c-mf__select-wrap { width: 280px; }
  .c-mf__date { flex-direction: row; gap: 16px; }
  .c-mf__date-unit .c-mf__select-wrap { flex-basis: 198.67px; width: 198.67px; }
  .c-mf__textarea { height: 90px; }
  .c-mf__agree { font-size: 16px; line-height: 28.8px; letter-spacing: 0.8px; }
}

/* 英語の併記を別の行に出す（見出し・項目名・完了画面。UX r2a M-B） */
.c-mf__en--block { display: block; }
.c-mf__en--text { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; line-height: 1.6; }

/* ハイコントラスト表示（forced-colors）では背景画像のレ点が消えるので、チェック済みの箱だけ色を固定する（UX pp1 M2） */
@media (forced-colors: active) {
  .c-mf__agree-box:checked { forced-color-adjust: none; }
}