/* =========================================================
   お問い合わせページ（/contact/）専用スタイル
   foundations は css/design-system.css、共通（.page-hero 含む）は css/lp.css を参照
   ========================================================= */

/* 導入 */
.contact-wrap{max-width:760px; margin-inline:auto;}
.contact-intro{text-align:center; margin-bottom:clamp(40px,6vw,64px);}
.contact-intro h2{font-size:clamp(24px,3.4vw,38px);}
.contact-intro .lead{max-width:34em; margin:20px auto 0; text-wrap:pretty;}

/* フォームカード */
.form-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); padding:clamp(28px,5vw,52px);}

/* フィールド */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px 22px;}
.form-grid .field.wide{grid-column:1/-1;}
.field{display:flex; flex-direction:column; gap:9px;}
.field label{display:flex; align-items:baseline; gap:8px;}
.field .lb{font-size:13px; font-weight:600; color:var(--ink-strong); letter-spacing:.04em;}
.field .req{font-size:11px; font-weight:500; color:var(--accent-ink); letter-spacing:.06em;}
.field .opt{font-size:11px; color:var(--muted); letter-spacing:.06em;}

/* 入力部品 */
.input{appearance:none; -webkit-appearance:none; width:100%; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 16px;
  font-family:var(--sans); font-size:15px; color:var(--ink-strong); line-height:1.7;
  transition:border-color .2s, box-shadow .2s;}
.input::placeholder{color:#a8a8b1;}
.input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint);}
.input:user-invalid{border-color:var(--accent-ink);}
textarea.input{min-height:190px; resize:vertical;}
select.input{padding-right:46px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232E3192' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;}

/* honeypot（視覚的に隠す。display:none だとボットが無視するため画面外へ） */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}

/* 送信まわり */
.form-actions{margin-top:36px; text-align:center;}
.form-actions .btn{min-width:240px; justify-content:center;}
.form-actions .btn:disabled{opacity:.55; cursor:default; transform:none; box-shadow:none;}
.form-note{font-size:12px; color:var(--muted); margin-top:18px; line-height:1.9;}

/* エラー表示 */
.form-error{margin-top:26px; background:color-mix(in oklab, var(--accent) 12%, #fff);
  border:1px solid var(--accent); border-radius:var(--r-md); color:var(--accent-ink);
  font-size:13px; line-height:1.9; padding:14px 18px;}

/* 送信完了 */
.form-done{text-align:center; padding:clamp(24px,4vw,40px) 8px;}
.form-done h2{font-size:clamp(22px,3vw,32px); margin-bottom:16px;}
.form-done p{font-size:14px; color:var(--muted); line-height:2;}
.form-done .btn{margin-top:30px;}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:700px){
  .form-grid{grid-template-columns:1fr; gap:20px;}
}