@charset "UTF-8";
/*
 * Contact Form 7 の見た目あわせ（2026-09-19）
 *
 * CF7 6.1.7 の実際の出力とプラグイン側CSSを、テスト環境で確認したうえで書いている。
 *
 *  ・入力欄は <span class="wpcf7-form-control-wrap"> で包まれる（span のままだと幅100%が効かない）
 *  ・ラジオ／同意チェックは <span class="wpcf7-list-item"><label> の形になる
 *  ・フォームの中身は wpautop に通るため <p> と <br> が入る
 *    （functions.php で切っているが、切れなかったときのためにCSS側でも打ち消す）
 *  ・プラグイン側の .wpcf7 form .wpcf7-response-output は詳細度 0,3,0 あるので、
 *    こちらは .contact-form-wrap .wpcf7 form … で上書きする
 *
 * style.css は静的サイトのSCSSから生成しているため、ここには追記せず別ファイルにしている。
 * 読み込みは Contact Form 7 が有効なときだけ（functions.php）。
 */

/* ---------- wpautop が入れる <p> と <br> を打ち消す ---------- */
.contact-form-wrap .wpcf7-form p {
  margin: 0;
}
.contact-form-wrap .contact-form__group > p > br,
.contact-form-wrap .contact-form__topics > p > br {
  display: none;
}

/* ---------- 入力欄の包み ---------- */
.contact-form-wrap .wpcf7-form-control-wrap {
  display: block;
}

/* CF7が付ける自前のクラスに負けないよう、テーマ側の見た目をここでも指定する */
.contact-form-wrap .wpcf7-form-control.contact-form__input,
.contact-form-wrap .wpcf7-form-control.contact-form__textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  font-size: 0.9375rem;
  font-family: inherit;
  color: #222222;
  background: #ffffff;
}
.contact-form-wrap .wpcf7-form-control.contact-form__textarea {
  min-height: 150px;
  resize: vertical;
}

/* ---------- ご用件（ラジオ） ----------
   縦に1つずつ並べる。値は page-overrides.css の
   「.contact-form__topics .contact-form__checkbox-label」（MTG#13・#14）と同じにしてある。 */
.contact-form__topics .wpcf7-radio {
  display: block;
}
.contact-form__topics .wpcf7-list-item {
  display: block;
  margin: 0;
}
.contact-form__topics .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.6rem;
  font-size: 0.8125rem;
  color: #4a4a4a;
  cursor: pointer;
}
/* 同意チェックは横並びのまま（style.css の .contact-form__checkbox-label と同じ） */
.contact-form__privacy .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: #4a4a4a;
  cursor: pointer;
}
/* プラグインがラベルの前後に入れる空白（content:" "）を止める。gap で間隔は取っている */
.contact-form-wrap .wpcf7-list-item-label::before,
.contact-form-wrap .wpcf7-list-item-label::after {
  content: none;
}
.contact-form-wrap input[type="radio"],
.contact-form-wrap input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #222222;
  flex: none;
}

/* ---------- プライバシーポリシーへの同意 ---------- */
.contact-form__privacy .wpcf7-list-item {
  display: inline-block;
  margin: 0;
}
.contact-form__privacy .wpcf7-list-item-label a {
  color: #222222;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

/* ---------- 送信ボタン ---------- */
.contact-form-wrap .wpcf7-submit {
  min-width: 240px;
  cursor: pointer;
}
.contact-form-wrap .wpcf7-spinner {
  margin: 0 0 0 12px;
  vertical-align: middle;
}

/* ---------- エラー・送信結果のことば ---------- */
/* サイトはモノトーンだが、エラーだけは気づけるよう赤を残す（2026-09-19） */
.contact-form-wrap .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: #a4261d;
}
.contact-form-wrap .wpcf7-form-control.wpcf7-not-valid {
  border-color: #a4261d;
}
.contact-form-wrap .wpcf7 form .wpcf7-response-output {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid #767676;
  border-radius: 3px;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: #4a4a4a;
}
.contact-form-wrap .wpcf7 form.invalid .wpcf7-response-output,
.contact-form-wrap .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-form-wrap .wpcf7 form.failed .wpcf7-response-output,
.contact-form-wrap .wpcf7 form.aborted .wpcf7-response-output,
.contact-form-wrap .wpcf7 form.spam .wpcf7-response-output {
  border-color: #a4261d;
  color: #a4261d;
}
.contact-form-wrap .wpcf7 form.sent .wpcf7-response-output {
  border-color: #222222;
  color: #222222;
}

/* ---------- フォームがまだ無いとき ---------- */
.contact-form-soon {
  margin: 0;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 2;
  color: #4a4a4a;
  letter-spacing: 0.04em;
}
.contact-form-soon__admin {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  background: #f5f5f5;
  border-radius: 3px;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: #767676;
  text-align: left;
}

/* ---------------------------------------------
   reCAPTCHA v3（2026-09-28）
   v3 は画面右下に固定のバッジを出す。このサイトは同じ位置に
   「今月のチラシ」（.flyer-dock / right:1.25rem bottom:1.25rem）を
   固定表示しているため、そのままだと重なって押せなくなる。

   ⚠️ バッジを隠す代わりに、フォームの下に
   「reCAPTCHA で保護されている」旨とGoogleの規約リンクを出している
   （haz_recaptcha_notice / inc/template-tags.php）。Googleの利用条件。
   どちらか片方だけ消さないこと。

   display:none ではなく visibility:hidden にする。
   完全に消すとトークンの取得に失敗する環境があるため。
   --------------------------------------------- */
.grecaptcha-badge {
  visibility: hidden;
}

.contact-form__recaptcha {
  margin: 1.5rem 0 0;
  font-size: 0.72rem;
  line-height: 1.9;
  color: #9a9a9a;
  text-align: center;
}
.contact-form__recaptcha a {
  color: #767676;
  text-decoration: underline;
}
.contact-form__recaptcha a:hover {
  color: #222;
}