/* ==========================================================================
   AEOS — お問い合わせフォーム（Contact Form 7）の状態の見た目。フロントページだけで読み込む（functions.php）。
   根拠：2026-10-02 指示 Stage 4「Two elements the static design doesn't have and that need styling to match: the response
        message (.wpcf7-response-output) and per-field validation tips (.wpcf7-not-valid-tip). Design success and error
        states consistent with the palette; don't ship CF7 defaults」「CF7 adds its own classes to inputs — accommodate them
        alongside the existing selectors rather than replacing them」。
   CF7 の既定の CSS（contact-form-7/includes/css/styles.css）はフロントページでは読み込まない（functions.php で外す）。
   そのうち動作に必要な規則（読み上げ用の領域を隠す、隠しフィールドを隠す、結果が出るまで結果の欄を隠す、送信中だけ印を出す、
   動きを減らす設定）は、ここに同じ働きで置き直した。色・枠は AEOS の配色で作り直した（青・緑・赤・黄の枠は使わない）。
   静止状態（何も送信していない状態）の見た目は静的版と同一：ここの規則は結果・エラー・送信中の状態でだけ見える。
   入力欄・ラベル・ボタンの見た目は css/style.css の既存の規則（.form-field input など）がそのまま効く。CF7 が足すクラス
   （wpcf7-form-control など）はその横に並ぶだけで、既存の規則は書き換えていない。

   コントラスト（sRGB の相対輝度で計算、2026-10-02）：
     成功の文字 #1F5468 / 空色 #DDEEF5          6.98:1（4.5 以上）
     エラーの文字 #243640 / 橙淡 #F6C9A6        8.24:1（必須バッジと同じ組み合わせ）
     項目の下の注意 #A94B25 / 白のカード        5.64:1
     入力欄のエラーの輪 #A94B25 / 空色の入力欄  4.74:1（非文字 3.0 以上）
     送信中の印 #A94B25 / 白のカード            5.64:1（橙 #E9854A は 2.65:1 で非文字 3.0 に届かないため使わない）
   ========================================================================== */

/* ---- CF7 の動作に必要な規則（CF7 6.1.7 の styles.css と同じ働き） ---- */
.wpcf7 .screen-reader-response{
  position:absolute; overflow:hidden;
  clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; width:1px; margin:-1px; padding:0; border:0;
  word-wrap:normal !important; word-break:normal !important;
}
.wpcf7 .hidden-fields-container{ display:none; }
.wpcf7-form-control-wrap{ position:relative; }
/* CF7 は入力欄を <span class="wpcf7-form-control-wrap"> で包む。静的版では <input>/<textarea> が .form-field（縦の flex）の
   直接の子＝ブロック扱いだが、包まれると span の中の行内要素になり、文字の下の余白の分だけ 1 項目あたり約 2px 高くなる
   （2026-10-02 実測：1440px でフォームが 753.25 → 761.64px）。包みを縦の flex にして、入力欄を静的版と同じブロック扱いに戻す。
   注意（.wpcf7-not-valid-tip）はその下に並ぶ。 */
.contact-form .wpcf7-form-control-wrap{ display:flex; flex-direction:column; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output{ display:none; }
.wpcf7 [inert]{ opacity:.5; }

/* ---- 項目ごとの注意（.wpcf7-not-valid-tip）：入力欄のすぐ下、濃橙の 14px（読む文字の最小。V8 T7-7） ---- */
.contact-form .wpcf7-not-valid-tip{
  display:block;
  margin-top:6px;
  font-size:14px; line-height:1.6; font-weight:500;
  color:var(--orange-ink);
}
/* エラーのある入力欄：空色の面はそのまま、内側に 2px の濃橙の輪（枠線ではなく影。静止時の「枠なし」T5 を崩さない）。
   フォーカスしたときは既存の .form-field input:focus（白の面＋橙のリング）を出す：この規則の詳細度（0,3,0 以上）は
   :focus の規則（0,2,1）より高いので、:not(:focus) でフォーカス中を外す。 */
.contact-form .form-field .wpcf7-not-valid:not(:focus){
  box-shadow:inset 0 0 0 2px var(--orange-ink);
}

/* ---- 送信の結果（.wpcf7-response-output）：ボタンの下に角丸の面。枠・罫は使わない（T5） ---- */
.contact-form .wpcf7-response-output{
  margin:clamp(18px,2.2vw,24px) 0 0;
  padding:14px 18px;
  border:0;
  border-radius:12px;
  font-size:15px; line-height:1.7;
}
/* 成功：空色の面に深空色の太字（6.98:1） */
.wpcf7 form.sent .wpcf7-response-output{
  background:var(--sky);
  color:var(--heading-2);
  font-weight:700;
}
/* 入力の不備・送信の失敗・迷惑と判定：橙淡の面にインク（8.24:1。「必須」バッジと同じ色の組み合わせ） */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{
  background:var(--orange-light);
  color:var(--ink);
  font-weight:500;
}

/* ---- 送信中の印（CF7 のスクリプトが has-spinner のボタンの後ろに足す span.wpcf7-spinner） ----
   静止時は visibility:hidden で場所だけ取る（ボタンの横、高さはボタンより小さいので並びは変わらない）。 */
.contact-form .wpcf7-spinner{
  visibility:hidden;
  display:inline-block;
  width:22px; height:22px;
  border-radius:50%;
  border:3px solid rgba(169,75,37,.2);
  border-top-color:var(--orange-ink);
  animation:aeos-cf7-spin .8s linear infinite;
}
.wpcf7 form.submitting .wpcf7-spinner{ visibility:visible; }
/* 送信中はボタンを押せない見た目に（CF7 は二重送信を受け付けないが、押せる見た目のままだと分かりにくい） */
.wpcf7 form.submitting .btn-solid{ opacity:.7; cursor:progress; transform:none; }
@keyframes aeos-cf7-spin{ to{ transform:rotate(360deg); } }
@keyframes aeos-cf7-blink{ 50%{ opacity:.25; } }
/* 動きを減らす設定：回転をやめ、ゆっくり明滅させる（CF7 の既定と同じ考え方） */
@media (prefers-reduced-motion: reduce){
  .contact-form .wpcf7-spinner{ animation:aeos-cf7-blink 2s ease-in-out infinite; }
}