/* ============================================================
   お問い合わせフォーム 専用スタイル（2026-09-27 追加）

   【置き場所を変えないこと】public/ 直下（grandprix.css と同じ理由）
   【変更したらバージョンを上げること】参照側の contact.css?v= を上げる
   共通スタイル（style.css）には足さない。トップの表示に影響を出さないため。

   方針：ウォームホワイト地に白い入力欄。赤は必須マークと送信ボタンとエラーだけ。
   影は付けない（既存LPの方針）。
   ============================================================ */

/* ---- パンくず（grandprix.css と同じ見た目。こちらは grandprix.css を読まないので持つ） ---- */
.gp-crumb{background:var(--warm);border-bottom:1px solid var(--hair)}
.gp-crumb ol{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .5rem;
  padding:.5rem 0;margin:0;list-style:none;
  font-size:12px;font-weight:700;color:var(--muted)}
.gp-crumb a,.gp-crumb [aria-current="page"]{display:inline-flex;align-items:center;min-height:44px}
.gp-crumb a{color:var(--muted);text-decoration:none}
.gp-crumb a:hover{color:var(--red);text-decoration:underline}
.gp-crumb li+li::before{content:"／";margin-right:.5rem;color:var(--hair)}
.gp-crumb [aria-current="page"]{color:var(--ink)}

.br-pc{display:none}
@media (min-width:768px){ .br-pc{display:inline} }

/* ---- 本体 ---- */
.ct-main{background:var(--warm);padding:var(--sp-5) 0 var(--sp-6)}
.ct-main .wrap{max-width:720px}

.ct-head .en{font-family:var(--en);font-size:13px;letter-spacing:.22em;color:var(--red);line-height:1}
.ct-head h1{margin-top:.6rem;font-size:clamp(24px,6.4vw,34px);font-weight:900;line-height:1.35;color:var(--ink)}
.ct-head .lead{margin-top:var(--sp-2);font-size:clamp(13.5px,3.7vw,15px);line-height:1.85;color:var(--ink)}

.ct-notes{margin:var(--sp-3) 0 0;padding:1rem 1.1rem;list-style:none;
  background:var(--white);border:1px solid var(--hair);border-left:3px solid var(--ink);
  border-radius:var(--r-sm)}
.ct-notes li{font-size:clamp(12px,3.3vw,13px);line-height:1.75;color:var(--ink);
  padding-left:1em;text-indent:-1em}
.ct-notes li::before{content:"・"}
.ct-notes li:first-child{font-weight:900}
.ct-notes li+li{margin-top:.3rem}

/* ---- フォーム ---- */
.ct-form{margin-top:var(--sp-4)}
.ct-field+.ct-field{margin-top:var(--sp-3)}
.ct-field > label{display:flex;align-items:center;gap:.5rem;
  font-size:14px;font-weight:900;color:var(--ink)}
.ct-field .req,.ct-field .opt{display:inline-block;padding:.15rem .45rem;border-radius:4px;
  font-size:11px;font-weight:900;line-height:1.3}
.ct-field .req{background:var(--red);color:#fff}
.ct-field .opt{background:transparent;color:var(--muted);border:1px solid var(--hair)}

/* iOS で入力時に拡大されないよう、文字は 16px 以上にする */
.ct-field input[type="text"],.ct-field input[type="email"],.ct-field select,.ct-field textarea{
  display:block;width:100%;margin-top:.5rem;padding:.8rem .9rem;min-height:48px;
  font:inherit;font-size:16px;font-weight:500;line-height:1.6;color:var(--ink);
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-sm);
  appearance:none;-webkit-appearance:none}
.ct-field select{padding-right:2.4rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.ct-field textarea{min-height:10em;resize:vertical}
.ct-field input:focus-visible,.ct-field select:focus-visible,.ct-field textarea:focus-visible{
  outline:2px solid var(--red);outline-offset:1px}
/* 上の input[type="text"] などより強くするため、要素名＋属性で指定する */
.ct-field input[aria-invalid="true"],.ct-field select[aria-invalid="true"],.ct-field textarea[aria-invalid="true"]{
  border-color:var(--red);border-width:2px}

.ct-help{margin-top:.4rem;font-size:12px;line-height:1.7;color:var(--muted)}
.ct-err{margin-top:.4rem;font-size:12.5px;font-weight:900;line-height:1.6;color:var(--red)}
.ct-err::before{content:"✕ "}

.ct-agree{padding-top:var(--sp-1)}
.ct-check{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;cursor:pointer;
  font-size:14px;font-weight:900;color:var(--ink)}
.ct-check input{width:22px;height:22px;margin:0;accent-color:var(--red);flex:0 0 auto}
.ct-check a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ct-check a:hover{color:var(--red)}

.ct-submit{margin-top:var(--sp-4);width:100%;border:0;cursor:pointer;font:inherit;font-weight:900}
.ct-submit:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ct-submit:disabled{opacity:.6;cursor:wait}

/* 見えない入力欄（迷惑送信対策）。display:none だと無視する機械があるので画面外へ出す */
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- 完了・エラー画面 ---- */
.ct-done{text-align:left}
.ct-done .ct-help{margin-top:var(--sp-2)}
.ct-fail{margin:var(--sp-3) 0 0;padding:1rem 1.1rem;list-style:none;
  background:var(--white);border:1px solid var(--hair);border-left:3px solid var(--red);
  border-radius:var(--r-sm)}
.ct-fail li{font-size:14px;font-weight:900;line-height:1.7;color:var(--ink)}
.ct-fail li+li{margin-top:.4rem}
.ct-back{margin-top:var(--sp-4);width:100%;max-width:420px}