/* ─────────────────────────────────────────────────────────────
   採用サイトからのエントリー（/apply/entry・/apply/entry/done）の、このページだけの見た目。
   土台は採用サイトの納品物 assets/recruit/site.css（Codex ASTRA 制作・値は直書き・CSS変数なし）。
   ここには site.css に無い部品だけを足す（区分のカード・機械よけ・受付画面の流れ・通知）。
   値は採用サイトと同じ: 本文 20px（モバイル 17px）／Navy #1D2D50・Orange #F48B21／余白 4 8 16 24 40 64／角丸 12・8。
   Google Fonts は読まない（.htaccess の CSP が style-src / font-src 'self' のため。書体は site.css が同梱の Noto Sans JP）。
   ───────────────────────────────────────────────────────────── */

/* ポータルの決め事（14px 未満の文字を使わない・ウェイトは 400/700）を、この画面に出る部品だけ上書きする */
.brand span, .breadcrumb, .footer-bottom, .required, .menu-toggle, .footer-nav a { font-size: 14px; }

/* 本文の幅はフォームに合わせて 760px。冒頭の帯（.en-band）は全幅のグレー、中身は本文と同じ幅にそろえる */
.en-main, .en-band .container { max-width: 808px; padding-left: 24px; padding-right: 24px; }
.en-intro { padding: 16px 0 0; }
.en-intro h1 { font-size: 60px; }
.en-lead { margin-top: 24px; line-height: 1.75; }
.en-lead b { color: #1D2D50; }

/* 一度だけ出す通知（土台の flash 部品。site.css の .form-errors と同じ見た目） */
.flash { margin: 0 0 40px; padding: 24px; border: 2px solid #1D2D50; border-radius: 12px; background: #f7f8f9; line-height: 1.75; font-weight: 700; color: #1D2D50; }
.flash-error::before { content: "!"; display: inline-flex; justify-content: center; align-items: center; border: 2px solid #1D2D50; border-radius: 50%; width: 24px; height: 24px; margin-right: 8px; }

/* 区分（応募する／まず話を聞く）はカードで選ぶ */
.en-fieldset { padding: 0; border: 0; min-width: 0; }
.en-modes { display: grid; grid-template-columns: 1fr; gap: 8px; }
/* site.css の .form-field label（display:block・700）より強くするため .form-field を付ける */
.form-field .en-choice {
  display: flex; align-items: flex-start; gap: 16px; margin: 0; padding: 16px 24px; min-height: 64px;
  font-weight: 400; color: #000000;
  border: 2px solid #e5e5e5; border-radius: 24px; background: #ffffff; cursor: pointer;
  transition: border-color .12s ease-out;
}
.form-field .en-choice:hover { border-color: #1D2D50; }
.form-field .en-choice input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: #1D2D50; }
.form-field .en-choice span b { display: block; font-size: 20px; color: #1D2D50; }
.form-field .en-choice span small { display: block; margin-top: 4px; font-size: 16px; color: #666666; line-height: 1.5; }
.form-field .en-choice:has(input:checked) { border-color: #1D2D50; background: #FFF4E6; }
.form-field .en-choice:has(input:focus-visible) { outline: 2px solid #F48B21; outline-offset: 2px; }

/* 入力欄（site.css に無いぶんを足す。値は採用サイトの規定） */
.form-field input[type="text"], .form-field input[type="email"], .form-field input[type="tel"],
.form-field select, .form-field textarea {
  display: block; width: 100%; min-height: 48px; padding: 12px 16px; font: inherit; color: #000000;
  background: #ffffff; border: 1px solid #999999; border-radius: 8px;
}
.form-field textarea { line-height: 1.5; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid #F48B21; outline-offset: 2px; border-color: #1D2D50; }
.form-field input[type="file"] { display: block; width: 100%; font: inherit; font-size: 16px; padding: 8px 0; }
.en-opt { display: inline-block; margin-left: 8px; padding: 4px 8px; border-radius: 4px; background: #f7f8f9; color: #666666; font-size: 14px; font-weight: 700; vertical-align: middle; }
.en-count { color: #666666; }

.en-agree { align-items: flex-start; line-height: 1.5; }
.en-agree input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: #1D2D50; }

/* 機械よけ（人には見えない） */
.en-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.en-submit { margin-top: 40px; }
.en-submit button { width: 100%; }
.en-alt { margin-top: 40px; }

/* 受付画面 */
.en-card { max-width: 760px; margin: 0 auto 40px; padding: 40px; border: 2px solid #1D2D50; border-radius: 24px; background: #ffffff; }
.en-h2 { font-size: 24px; letter-spacing: 0; margin-bottom: 16px; }
.en-steps { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: step; }
.en-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 4px 16px; padding: 16px 0; border-top: 1px solid #e5e5e5; counter-increment: step; }
.en-steps li:first-child { border-top: 0; padding-top: 0; }
.en-steps li::before { content: counter(step); grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #1D2D50; color: #ffffff; font-weight: 700; font-variant-numeric: tabular-nums; }
.en-steps li b { font-size: 20px; color: #1D2D50; }
.en-steps li span { font-size: 16px; color: #666666; line-height: 1.5; }
.en-warn { margin: 0 0 16px; padding: 16px; border: 2px solid #F48B21; border-radius: 8px; line-height: 1.5; }
.en-links { max-width: 760px; margin: 0 auto; }

@media (max-width: 767px) {
  .en-intro h1 { font-size: 36px; }
  .form-field .en-choice span b, .en-steps li b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .form-field .en-choice { transition: none; }
}