/* ==========================================================
   予約・求人フォーム（/reservation・/recruit だけが読む）。docs/form-redesign.md 2 章
   見た目は既存ページと同じ言語: 白黒・角丸 0・影なし・1px 罫線。値は common.css の :root トークン、無い値だけ --form-*
   GTM 計測のため .Form_btm_list > p > a.c-btn-consent（TEL・LINE）の構造・class・文言・href は変えないこと（見た目だけここで決める）
   ========================================================== */
:root{
  --form-label-w:220px;   /* PC のラベル列 */
  --form-input-h:48px;    /* 入力の高さ */
  --form-err:#a4161a;     /* 状態色はこの 1 色だけ（エラー）。brand-16 の暫定 */
  --form-scroll-h:240px;  /* プライバシーポリシーのスクロール枠 */
  --form-check:18px;      /* ラジオ・チェックの大きさ */
}
.f-wrap{max-width:960px;margin:0 auto}

/* 導入文・必須バッジ */
.f-intro{text-align:center;font-size:var(--fs-14);line-height:var(--lh-190)}
.f-intro p + p{margin-top:var(--sp-4)}
.f-req{display:inline-block;margin-left:var(--sp-8);padding:0 var(--sp-6);background:var(--b);color:var(--w);font-size:var(--fs-10);font-weight:700;letter-spacing:var(--ls-10);line-height:var(--lh-190);vertical-align:middle;white-space:nowrap}
.f-intro .f-req{margin-left:0}

/* TEL・LINE（凍結 F-11・F-12） */
.Form_btm_list{display:flex;justify-content:center;gap:var(--sp-16);margin:var(--sp-32) 0 var(--sp-56)}
.Form_btm_list p{flex:0 1 320px;min-width:0}
.Form_btm_list .c-btn-consent{display:block;padding:var(--sp-16) var(--sp-12);border:1px solid var(--b);background:var(--w);color:var(--b);text-align:center;font-size:var(--fs-12);font-weight:600;letter-spacing:var(--ls-10);transition:all .3s}
.Form_btm_list .c-btn-consent.callbtn{background:var(--b);color:var(--w)}
.Form_btm_list .c-btn-consent:hover{background:var(--b);color:var(--w);opacity:1}
.Form_btm_list .c-btn-consent.callbtn:hover{background:var(--w);color:var(--b)}

/* 節（fieldset）と小見出し（legend） */
.f-form{margin-top:var(--sp-24)}
.f-sec{border:0;margin:var(--sp-56) 0 0;padding:0;min-width:0}
.f-sec.f-sec--cont,.f-sec:first-child{margin-top:0}  /* 見出しなしの節は前の節の続き（768px 以下の .f-sec より強く） */
.f-legend{float:left;width:100%;padding:0 0 var(--sp-12);border-bottom:1px solid var(--b);font-size:var(--fs-16);font-weight:700;letter-spacing:var(--ls-10);line-height:var(--lh-150)}
.f-sec:last-of-type{border-bottom:1px solid var(--b-15)}

/* 項目行: PC はラベル 220px／入力の 2 列。区切りは「表示中の行の後ろ」にだけ線（先頭の非表示行で線が二重にならないように） */
.f-row{clear:both;display:grid;grid-template-columns:var(--form-label-w) minmax(0,1fr);gap:var(--sp-24);padding:var(--sp-20) 0}
.f-sec > .f-row:not([hidden]) ~ .f-row,
.f-sec > .f-row:not([hidden]) ~ .f-repeat > .f-row,
.f-sec--cont > .f-row{border-top:1px solid var(--b-15)}
.f-sec > .f-row:not([hidden]) ~ .f-row--note,
.f-sec > .f-row:not([hidden]) ~ .f-repeat > .f-row--add{border-top:0;padding-top:0}
.f-label{display:block;padding-top:var(--sp-12);font-size:var(--fs-14);font-weight:700;letter-spacing:var(--ls-8);line-height:var(--lh-160)}
.f-field{min-width:0}
.f-row--note .f-field,.f-row--add .f-field{grid-column:2}
.f-row--head,.f-row--box{display:block}
.f-subhead{font-size:var(--fs-14);font-weight:700;letter-spacing:var(--ls-8)}
.f-box{padding:var(--sp-16) var(--sp-20);border:1px solid var(--b);font-size:var(--fs-13);line-height:var(--lh-180)}

/* 入力: 1px 罫線・角丸 0・高さ 48px・文字 16px（iOS のズーム防止）・フォーカスは 2px の黒枠 */
.f-input,.f-select{display:block;width:100%;height:var(--form-input-h);padding:0 var(--sp-14);border:1px solid var(--b-42);border-radius:0;background:var(--w);color:var(--b);font-family:inherit;font-size:var(--fs-16);letter-spacing:var(--ls-4);-webkit-appearance:none;appearance:none}
.f-input::placeholder,.f-textarea::placeholder{color:var(--b-42)}
.f-textarea{height:auto;padding:var(--sp-12) var(--sp-14);line-height:var(--lh-170);resize:vertical}
.f-select{padding-right:var(--sp-36);cursor:pointer;
  background:linear-gradient(45deg,transparent 50%,var(--b) 50%) calc(100% - 20px) 50%/6px 6px no-repeat,
             linear-gradient(135deg,var(--b) 50%,transparent 50%) calc(100% - 14px) 50%/6px 6px no-repeat,var(--w)}
.f-input[type="date"]{line-height:var(--form-input-h)}
.f-input[type="date"]::-webkit-date-and-time-value{text-align:left}
.f-input:focus,.f-select:focus{outline:2px solid var(--b);outline-offset:-2px}
.f-file{display:block;max-width:100%;padding:var(--sp-8) 0;font-family:inherit;font-size:var(--fs-14)}
.f-file::file-selector-button{margin-right:var(--sp-12);padding:var(--sp-10) var(--sp-18);border:1px solid var(--b);border-radius:0;background:var(--w);color:var(--b);font-family:inherit;font-size:var(--fs-12);font-weight:600;letter-spacing:var(--ls-10);cursor:pointer}
.f-file:focus-visible{outline:2px solid var(--b);outline-offset:2px}

/* ラジオ・チェック: 素の input（accent-color）＋ラベル。横並びで折り返し */
.f-choices{display:flex;flex-wrap:wrap;gap:var(--sp-10) var(--sp-28);padding-top:var(--sp-10)}
.f-choice{display:inline-flex;align-items:flex-start;gap:var(--sp-8);font-size:var(--fs-15);line-height:var(--lh-160);cursor:pointer}
.f-choice input{flex:none;width:var(--form-check);height:var(--form-check);margin:var(--sp-3) 0 0;accent-color:var(--b);cursor:pointer}
.f-choice input:focus-visible{outline:2px solid var(--b);outline-offset:2px}

/* 1 行に複数の入力（姓・名／年・月・日／日付・時間／勤務先・期間・内容） */
.f-multi{display:flex;flex-wrap:wrap;gap:var(--sp-12) var(--sp-16)}
.f-part{flex:1 1 140px;min-width:0}  /* 375px 幅でも 2 つ横に並ぶ幅 */
.f-part--wide{flex-basis:100%}
.f-part--unit{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-14)}
.f-part--unit .f-select{width:auto}
.f-sub{display:block;margin-bottom:var(--sp-6);font-size:var(--fs-12);font-weight:700;letter-spacing:var(--ls-8)}
.f-help{margin-top:var(--sp-8);color:var(--b-60);font-size:var(--fs-12);line-height:var(--lh-170)}
.f-row--note .f-help{margin-top:0}

/* 職歴の追加ボタン */
.f-add{font-family:inherit}

/* 注意事項・プライバシーポリシー・キャンセルポリシー */
.f-policy{margin-top:var(--sp-56)}
.f-policy-title{margin-bottom:var(--sp-16);padding-bottom:var(--sp-12);border-bottom:1px solid var(--b);font-size:var(--fs-16);font-weight:700;letter-spacing:var(--ls-10);line-height:var(--lh-150)}
.f-policy-body{font-size:var(--fs-13);line-height:var(--lh-190)}
.f-policy-body p + p,.f-policy-body dl + p,.f-policy-body p + dl{margin-top:var(--sp-12)}
.f-policy-body h4{margin-top:var(--sp-16);font-size:var(--fs-13);font-weight:700}
.f-policy-body dt{margin-top:var(--sp-8);font-weight:700}
.f-scroll{max-height:var(--form-scroll-h);overflow-y:auto;padding:var(--sp-16) var(--sp-20);border:1px solid var(--b-15)}
.f-scroll:focus-visible{outline:2px solid var(--b);outline-offset:-2px}

/* 同意・送信・お知らせ */
.f-consent{display:flex;flex-direction:column;align-items:center;margin-top:var(--sp-40)}
.f-consent .f-choices{align-items:center;gap:var(--sp-10);padding-top:0}
.f-submit{margin-top:var(--sp-32);text-align:center}
.f-btn{min-width:300px;font-size:var(--fs-13)}
.f-notice{max-width:600px;margin:var(--sp-20) auto 0;font-size:var(--fs-14);font-weight:700;line-height:var(--lh-170)}
.f-notice:not(:empty){padding:var(--sp-16) var(--sp-20);border:1px solid var(--b)}
.f-notice:empty{display:none}

/* 未入力の必須項目 */
.f-err{margin-top:var(--sp-6);color:var(--form-err);font-size:var(--fs-12);font-weight:700}
.f-field > .f-err ~ .f-err{display:none}  /* 年・月・日のように行の下にまとめた表示は 1 行だけ */
.f-input[aria-invalid="true"],.f-select[aria-invalid="true"]{border-color:var(--form-err)}
.f-choices.is-invalid .f-choice{color:var(--form-err)}

@media (max-width:768px){
  .Form_btm_list{gap:var(--sp-10);margin:var(--sp-24) 0 var(--sp-40)}
  .Form_btm_list p{flex:1 1 0}
  .Form_btm_list .c-btn-consent{padding:var(--sp-14) var(--sp-6);font-size:var(--fs-11);letter-spacing:var(--ls-4)}
  .f-intro{text-align:left}
  .f-sec{margin-top:var(--sp-40)}
  .f-row{grid-template-columns:minmax(0,1fr);gap:var(--sp-10);padding:var(--sp-16) 0}
  .f-label{padding-top:0}
  .f-row--note .f-field,.f-row--add .f-field{grid-column:1}
  .f-choices{gap:var(--sp-8) var(--sp-20);padding-top:0}
  .f-policy{margin-top:var(--sp-40)}
  .f-scroll{padding:var(--sp-12) var(--sp-14)}
  .f-btn{width:100%;min-width:0}
}