/*
 * Contact Form 7 の出す HTML を、試作 v8 のフォームの見た目に合わせる。
 * base.css は試作から機械的に作るので直接は触らない。差分はここに書く。
 */

/* CF7 は <button> ではなく <input type="submit"> を出す */
form.f input[type=submit]{
  align-self:flex-start;font:inherit;font-weight:700;font-size:18px;min-height:56px;
  padding:12px 40px;border:0;border-radius:30px;background:var(--red);color:#fff;cursor:pointer;
}
form.f input[type=submit]:hover{filter:brightness(1.06)}

/* 項目の枠 */
form.f .wpcf7-form-control-wrap{display:block}
form.f p{margin:0}

/* ご用件のラジオ。試作の .opt と同じ見た目にする */
form.f .wpcf7-radio{display:flex;flex-wrap:wrap;gap:10px}
form.f .wpcf7-list-item{margin:0}
form.f .wpcf7-list-item label{
  display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 16px;
  border:2px solid var(--navy-line);border-radius:12px;font-size:16px;cursor:pointer;
}
form.f .wpcf7-list-item input[type=radio]{width:20px;height:20px;accent-color:var(--navy)}

/* 未入力・入力ちがいの知らせ */
form.f .wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:14.5px;font-weight:700;color:var(--red)}
form.f .wpcf7-not-valid{border-color:var(--red)}
form.f .wpcf7-response-output{
  margin:0;padding:14px 18px;border-radius:12px;border:2px solid var(--navy-line);
  font-size:15.5px;line-height:1.8;
}
form.f.invalid .wpcf7-response-output,
form.f.unaccepted .wpcf7-response-output,
form.f.failed .wpcf7-response-output{border-color:var(--red);color:var(--red)}

/* 送信中のぐるぐる */
form.f .wpcf7-spinner{margin:0 0 0 12px}

/* 送信できたら、CF7 の文言ではなく .done（試作と同じ文面）を見せる */
form.f.sent .wpcf7-response-output{display:none}