/* ══════════════════════════════════════════════════════════════
   フォーム共通スタイル（お問い合わせ／新卒エントリー／中途エントリー）
   ⚠️各ページの末尾で読み込むこと（<link rel="stylesheet" href="_form.css"> を </body> 直前）。
     下層ページは head 内インライン＋body内 <style> の積み重ねなので、
     head で読むと後段のインライン指定に負ける（site.css の .form__* が残る）。
   ⚠️サイトの他パーツと同じ約束で組んでいる：
     ・罫線は 0.5px の細罫、角丸なし
     ・見出しラベルは和文ゴシック太字＋トラッキング
     ・アクセントと必須表示は var(--red)
     ・送信ボタンは共通 .btn（白地・赤枠・赤文字／ホバーで赤帯＋白文字）
   ══════════════════════════════════════════════════════════════ */

.form{max-width:900px;margin:0 auto}

/* ── 行：PCは「ラベル左／入力右」の2カラム。募集要項の表(.yoko-tbl)と同じ骨格 ── */
.form__row{display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);
  gap:clamp(14px,2vw,36px);align-items:start;
  padding:clamp(18px,2vw,26px) 0;border-bottom:0.5px solid var(--line,rgba(0,0,0,.14));margin:0}
.form__row:first-of-type{border-top:0.5px solid var(--line,rgba(0,0,0,.14))}

.form__label{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0;
  font-family:var(--jp);font-weight:700;letter-spacing:.06em;
  font-size:clamp(13.5px,1.08vw,16px);line-height:1.6;padding-top:.6em}
/* 必須／任意バッジ：赤タグ（ヒーローの部署タグと同じ質感） */
.form__label .req,.form__label .opt{font-family:var(--en);font-weight:700;
  font-size:10px;letter-spacing:.12em;line-height:1;padding:5px 8px;margin:0}
.form__label .req{background:var(--red);color:#fff}
.form__label .opt{background:transparent;color:rgba(0,0,0,.45);border:0.5px solid rgba(0,0,0,.28)}

/* ── 入力部品 ── */
.form__ctrl{width:100%;font-family:inherit;color:var(--ink);
  font-size:clamp(14px,1.1vw,16px);line-height:1.7;
  padding:14px 16px;border:0.5px solid rgba(0,0,0,.3);border-radius:0;background:#fff;
  transition:border-color .25s ease,box-shadow .25s ease}
.form__ctrl::placeholder{color:rgba(0,0,0,.32)}
.form__ctrl:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
textarea.form__ctrl{min-height:180px;resize:vertical}
.form__ctrl--s{max-width:220px}
.form__ctrl--m{max-width:420px}

/* セレクト：ネイティブ矢印を消して細い山形に差し替え */
select.form__ctrl{-webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23cc0700' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px}

/* 横に並べる小要素（生年月日・住所など） */
.form__inline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.form__inline .unit{font-size:13px;color:rgba(0,0,0,.6)}
.form__stack{display:grid;gap:10px}
.form__hint{margin:8px 0 0;font-size:12.5px;line-height:1.9;color:rgba(0,0,0,.55)}

/* ── ラジオ／チェックボックス：ネイティブを隠して自前で描く ──
   ⚠️input を display:none にするとキーボード操作できなくなるので、
     opacity:0 で残したうえで :focus-visible の見た目を用意する。 */
.form__radios{display:flex;flex-wrap:wrap;gap:12px 26px;padding-top:.35em}
.form__radios label,.form__check{position:relative;display:inline-flex;align-items:center;gap:10px;
  font-size:clamp(13.5px,1.05vw,15px);line-height:1.6;cursor:pointer}
.form__radios input,.form__check input,.form__agree input{position:absolute;opacity:0;width:0;height:0}
.form__radios label::before,.form__check::before,.form__agree::before{content:"";flex:none;
  width:18px;height:18px;border:0.5px solid rgba(0,0,0,.4);background:#fff;
  transition:border-color .2s ease,background .2s ease}
.form__radios label::before{border-radius:50%}
/* 選択された点／チェック */
.form__radios label::after,.form__check::after,.form__agree::after{content:"";position:absolute;
  left:5px;width:8px;height:8px;background:var(--red);opacity:0;transform:scale(.6);
  transition:opacity .2s ease,transform .2s ease}
.form__radios label::after{border-radius:50%}
.form__radios input:checked + span::before{}
.form__radios label:has(input:checked)::before,
.form__check:has(input:checked)::before,
.form__agree:has(input:checked)::before{border-color:var(--red)}
.form__radios label:has(input:checked)::after,
.form__check:has(input:checked)::after,
.form__agree:has(input:checked)::after{opacity:1;transform:scale(1)}
.form__radios label:has(input:focus-visible)::before,
.form__check:has(input:focus-visible)::before,
.form__agree:has(input:focus-visible)::before{box-shadow:0 0 0 3px rgba(204,7,0,.18)}

/* ── 同意・送信 ── */
.form__agree{position:relative;display:flex;align-items:center;gap:10px;cursor:pointer;
  margin:clamp(28px,3vw,44px) 0 0;font-size:clamp(13px,1.05vw,15px);justify-content:center}
.form__agree a{color:var(--ink);border-bottom:1px solid rgba(0,0,0,.4);padding-bottom:1px}
.form__agree a:hover{color:var(--red);border-color:var(--red)}
.form__submit{display:inline-flex;align-items:center;justify-content:center;gap:14px;
  margin:clamp(22px,2.4vw,34px) auto 0;min-width:min(320px,80%);
  padding:clamp(16px,1.7vw,22px) clamp(24px,2.6vw,40px);
  font-family:var(--jp);font-weight:700;letter-spacing:.08em;font-size:clamp(15px,1.3vw,18px)}
.form__lead{max-width:900px;margin:0 auto clamp(26px,3vw,44px);
  font-size:clamp(13.5px,1.08vw,16px);line-height:2.05;color:rgba(0,0,0,.75)}
.form__foot{max-width:900px;margin:clamp(20px,2.2vw,32px) auto 0;text-align:center;
  font-size:12.5px;line-height:1.9;color:rgba(0,0,0,.55)}

@media(max-width:820px){
  .form__row{grid-template-columns:1fr;gap:10px;padding:16px 0}
  .form__label{padding-top:0}
  .form__ctrl--s,.form__ctrl--m{max-width:none}
  .form__submit{width:100%;min-width:0}
}