@charset "UTF-8";

/* ===========================================================
   Contact Form 7 — 確認画面
   assets/jaii.css のトークン（--blue など）を前提にする。
   2026-09-04
   =========================================================== */

/* 確認画面の見出し */
.cf7-confirm-head{margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.cf7-confirm-head h3{font-family:var(--font-display);font-weight:900;font-size:19px;margin-bottom:8px}
.cf7-confirm-head p{font-size:14px;color:var(--ink-soft);margin:0}

/* 入力内容の一覧 */
.cf7-confirm-list{display:grid;grid-template-columns:200px 1fr;gap:0;margin:0}
.cf7-confirm-list dt,
.cf7-confirm-list dd{padding:16px 18px;border-bottom:1px solid var(--line);margin:0;font-size:15px}
.cf7-confirm-list dt{font-family:var(--font-display);font-weight:700;color:var(--blue-deep);background:var(--blue-tint)}
.cf7-confirm-list dd{white-space:pre-wrap;word-break:break-word}
.cf7-confirm-list dd.is-empty{color:var(--ink-soft)}

/* エラー表示 */
.cf7-confirm-alert{background:#FBE9EA;border:1px solid #E6B8BC;color:#B02A37;border-radius:10px;padding:13px 16px;font-size:14px;font-weight:700;margin-bottom:20px}

/* 未入力・形式エラーの項目 */
.field.cf7-field-error label{color:#B02A37}
.field.cf7-field-error input,
.field.cf7-field-error select,
.field.cf7-field-error textarea{border-color:#B02A37;background:#FDF5F5}

/* ボタン */
.cf7-to-confirm{cursor:pointer}
.cf7-back{cursor:pointer}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* 送信ボタンをモックアップの主ボタンと同じ見た目にする
   CF7 は .wpcf7-submit しか付与しないため、ここで定義する */
.wpcf7-form .wpcf7-submit{
  display:inline-block;
  background:var(--blue);
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15.5px;
  padding:15px 44px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  line-height:1;
  box-shadow:0 4px 14px rgba(22,104,199,.25);
  transition:background .2s,transform .15s;
}
.wpcf7-form .wpcf7-submit:hover{background:var(--blue-deep);transform:translateY(-1px)}
.wpcf7-form .wpcf7-submit:disabled{opacity:.6;cursor:wait;transform:none}

/* 選択肢（ラジオ・チェックボックス）
   CF7 は各選択肢を <label> で囲むため、.field label の見出しスタイルを
   そのまま受けてしまう。選択肢側は本文の書体に戻して横並びにする。
   2026-09-19 寄附フォームのラジオが見出しのように見える不具合を修正。 */
.field .wpcf7-radio,
.field .wpcf7-checkbox,
.field .wpcf7-acceptance{display:flex;flex-wrap:wrap;gap:10px 24px}
.field .wpcf7-list-item{margin:0}
.field .wpcf7-list-item label{display:inline-flex;align-items:center;gap:8px;margin:0;font-family:var(--font-body);font-weight:400;font-size:15px;cursor:pointer}
.field .wpcf7-list-item-label{line-height:1.6}
.field input[type="radio"],
.field input[type="checkbox"]{width:18px;height:18px;flex:0 0 auto;margin:0;padding:0}

/* 数値入力は幅いっぱいにする必要がない */
.field input[type="number"]{max-width:220px}

/* 送信中のスピナーの位置 */
.wpcf7-form .wpcf7-spinner{margin:0 0 0 12px;vertical-align:middle}

/* hidden 属性を確実に効かせる
   上の .wpcf7-form .wpcf7-submit や .btn-primary の display 指定より
   後に置き、同じ詳細度で上書きする。 */
.wpcf7-form [hidden],
.wpcf7-form .wpcf7-submit[hidden],
.wpcf7-form .cf7-to-confirm[hidden],
.wpcf7-form .cf7-back[hidden]{display:none}

@media (max-width:900px){
  .cf7-confirm-list{grid-template-columns:1fr}
  .cf7-confirm-list dt{border-bottom:0;padding-bottom:8px}
  .cf7-confirm-list dd{padding-top:8px}
  .form-actions{flex-direction:column;align-items:stretch}
  .wpcf7-form .wpcf7-submit{width:100%;padding:15px 20px}
}