/* ===== page-form.css ｜ お問い合わせフォーム共通（事業・サービス／採用／資料請求。Figma 14486:42266 / 42323 / 42340）=====
   デザイン言語: 色/書体トークンは base.css。下層FVはタイトル小 .lfv--s、コンテンツ幅1200中央（--pad-side）、送信は共通ボタン .btn。
   フォーム部品（ラベル＋必須バッジ／入力枠 白bg・枠#c2cde0・r5・px20 py16／同意チェック／送信）をここで一本化し、4ページで読み込む。 */

/* --- セクション: bg base3 / px120 / pb160 / 中身は縦積み gap64 中央 --- */
.form-sec{width:100%;padding:0 var(--pad-side) var(--sp-section-gap);background:var(--c-base3);overflow:hidden}
.form-sec__inner{display:flex;flex-direction:column;align-items:center;gap:64px;width:100%}

/* --- フォーム本体: 幅885 / 項目間 gap40 --- */
.form{display:flex;flex-direction:column;align-items:flex-start;gap:40px;width:885px;max-width:100%}
.form__field{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}
.form__head{display:flex;align-items:center;gap:8px}
.form__label{font-size:var(--fs-body-m);font-weight:500;line-height:26px;letter-spacing:.16px;white-space:nowrap}
/* バッジ: px6 pb1 r3 / 14px Medium lh1.6 白字 / 必須=accent 任意=#96989c */
.form__badge{display:inline-flex;align-items:center;justify-content:center;padding:0 6px 1px;background:var(--c-accent);border-radius:var(--r-s);color:var(--c-inverse);font-size:14px;font-weight:500;line-height:1.6;letter-spacing:.14px;white-space:nowrap}
.form__badge--opt{background:#96989c}
.form__box{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%}

/* --- 入力枠（Component 34）: 白bg / 枠 #c2cde0 / r5 / px20 py16 / 文字16px。Figma は枠線内側描画＋行高26px丸めで外寸58px → padding15＋lh26＋border1 で合わせる --- */
.form__input{display:block;width:100%;padding:15px 20px;background:var(--c-base);border:1px solid var(--c-border);border-radius:var(--r-m);color:var(--c-text);font-family:inherit;font-size:var(--fs-body-m);font-weight:400;line-height:26px;letter-spacing:.16px;-webkit-appearance:none;appearance:none;outline:0}
.form__input::placeholder{color:var(--c-gray);opacity:1}
.form__input:focus{border-color:var(--c-main);box-shadow:0 0 0 3px rgba(21,73,160,.18)}
/* select: pl20 pr16 ＋ シェブロン12×15（img/ic_chevron.svg）を右端に。標準の矢印は appearance:none で消す */
.form__input--select{height:58px;padding-right:36px;background-image:url("../img/ic_chevron.svg");background-repeat:no-repeat;background-position:right 16px center;background-size:12px 15px;cursor:pointer}
.form__input--select:invalid{color:var(--c-text)}   /* 「選択してください」も本文色（Figma） */
/* textarea: 高さ220固定、上寄せ */
.form__input--textarea{height:220px;resize:vertical;overflow:auto}
.form__hint{width:100%;color:var(--c-gray);font-size:var(--fs-body-m);font-weight:400;line-height:26px;letter-spacing:.16px}

/* --- 同意＋送信（Figma 14486:42280）: 縦積み gap48 中央。上のフォーム群との間は64（項目gap40＋24） --- */
.form__foot{display:flex;flex-direction:column;align-items:center;align-self:center;gap:48px;margin-top:24px}
/* 同意（Component 26）: 24pxチェック ＋ 18px Medium。チェックは appearance:none で Figma の見た目（白bg 枠#c2cde0 r3）を再現 */
.form__agree{display:flex;align-items:center;gap:12px;cursor:pointer}
.form__agree-input{flex:none;width:24px;height:24px;margin:0;background:var(--c-base);border:1px solid var(--c-border);border-radius:var(--r-s);accent-color:var(--c-main);-webkit-appearance:none;appearance:none;cursor:pointer}
.form__agree-input:checked{background-color:var(--c-main);border-color:var(--c-main);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:20px 20px}
.form__agree-input:focus-visible{outline:2px solid var(--c-main2);outline-offset:2px}
.form__agree-text{font-size:18px;font-weight:500;line-height:1.6;letter-spacing:.18px;white-space:nowrap}
.form__agree-text a{color:var(--c-text-sub);text-decoration:underline;text-underline-position:from-font}
.form__agree-text a:hover{text-decoration:none}
/* 送信ボタン: 共通 .btn。同意チェック前は Figma のグレー状態（bg/枠 #aeb1b7・矢印 bar #aeb1b7 / chev #767b85）。JSなし・:has() で切替 */
.form__submit{font-family:inherit}
.form:has(.form__agree-input:not(:checked)) .form__submit{background:#aeb1b7;border-color:#aeb1b7}
.form:has(.form__agree-input:not(:checked)) .form__submit .btn__arrow .ic-bar{fill:#aeb1b7}
.form:has(.form__agree-input:not(:checked)) .form__submit .btn__arrow .ic-chev{stroke:#767b85}
.form__submit:focus-visible{outline:2px solid var(--c-main2);outline-offset:2px}

/* ===== SP（768px以下）: SPカンプ無し → ラベル→入力（幅100%・高さ48以上・16px）→同意→ボタン幅100% =====
   入力枠は 16px 固定（iOS のフォーカスズーム回避）。padding 12+16、行高 26 で外寸 52px。 */
@media (max-width:768px){
  .form-sec__inner{gap:var(--sp-under-btn)}
  .form{gap:32px}
  .form__field{gap:8px}
  .form__label{line-height:1.6;letter-spacing:.15px;white-space:normal}
  .form__badge{font-size:12px;letter-spacing:.12px}
  .form__input{min-height:52px;padding:12px 16px;font-size:16px;letter-spacing:.16px}
  .form__input--select{height:52px;padding-right:36px}
  .form__input--textarea{height:180px}
  .form__hint{font-size:var(--fs-body-s);line-height:1.6;letter-spacing:.12px}
  .form__foot{width:100%;gap:32px;margin-top:8px}
  .form__agree{align-items:flex-start}
  .form__agree-input{margin-top:1px}
  .form__agree-text{font-size:16px;letter-spacing:.16px;white-space:normal}
  /* 送信ボタン: 幅100%、ラベル左・アイコン右端（TOP-SP の button と同じ内側配置） */
  .form__submit{width:100%;justify-content:space-between;gap:16px}
}
/* 送信処理（contact-send.php）用: ハニーポット欄は画面外へ（人には見えず、機械的な投稿だけが埋める） */
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}