@charset "UTF-8";
/* ===========================================================
   お問い合わせフォームの送信まわり（261010 新設）。contact.html だけが読む。
   既存のフォームの見た目（page-info.css）は変えず、エラー・送信中・完了の表示だけを足す。
   エラー色 #9C3A2C はショップ（テーマ gengen-f の commerce.css）のエラーと同じ。
   灰面 #EBE9E4 上で 5.67:1、紙白 #FCFAF8 上で 6.6:1。
   =========================================================== */

/* 迷惑送信対策の欄（人には見せない・読み上げない） */
.gg-hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}

#contact-form[hidden],#contact-done[hidden],.form-status[hidden],.form .field-err[hidden]{display:none!important}

/* 各欄の案内（入力内容に不足があるとき） */
.form .field-err{margin-top:.55rem;font-size:.82rem;line-height:1.8;letter-spacing:.04em;color:#9C3A2C}
.form input[aria-invalid="true"],.form select[aria-invalid="true"],.form textarea[aria-invalid="true"]{border-color:#9C3A2C}
.form input[type=checkbox][aria-invalid="true"]{outline:1px solid #9C3A2C;outline-offset:2px}
.form .agree + .field-err{margin-top:.2rem}

/* 送信ボタン上のお知らせ（入力不足・送信失敗） */
.form-status{margin-top:2.2rem;padding:16px 20px;background:var(--white);border-left:3px solid #9C3A2C;color:var(--sumi);font-size:.88rem;line-height:1.9;letter-spacing:.04em}
.form .submit .btn[disabled]{opacity:.65;cursor:default}

/* 受付完了（フォームと入れ替わる） */
.form-done{max-width:760px;margin:0 auto;padding:64px 32px;background:var(--white);border:1px solid var(--line-2);text-align:center}
.form-done:focus{outline:none}
.form-done h2{font-family:var(--f-min);font-weight:500;font-size:clamp(1.15rem,2vw,1.4rem);letter-spacing:.14em;line-height:1.8;color:var(--sumi);margin-bottom:1rem}
.form-done p{font-size:.95rem;line-height:2;color:var(--sub)}
.form-done p span{display:inline-block}   /* 狭い画面では読点の後で折り返す */

@media (max-width:768px){
  .form-status{margin-top:1.8rem}
  .form-done{padding:44px 20px}
}