/* =====================================================================
   Contact Form 7 ×  will raise デザイン統合用の補正CSS
   元デザインの見た目を保ったままCF7の余分なマークアップを吸収します。
   ===================================================================== */

/* CF7がフィールドを包む <span class="wpcf7-form-control-wrap"> を
   ブロック化して、入力欄の width:100% を元通りに効かせる */
.contact__box-11 .wpcf7-form-control-wrap,
.sp-contact-m__box-10 .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* CF7が自動付与するマージン等をリセット（入力欄は元CSSのまま） */
.contact__sec .wpcf7-form-control,
.sp-contact-m__sec .wpcf7-form-control {
	margin: 0;
}

/* --- 同意チェックボックス（acceptance） ------------------------------ */
.contact__box-12 .wpcf7-form-control-wrap,
.sp-contact-m__box-11 .wpcf7-form-control-wrap {
	display: inline;
	width: auto;
}
.contact__box-12 .wpcf7-acceptance .wpcf7-list-item,
.sp-contact-m__box-11 .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
	display: inline;
}
.contact__box-12 .wpcf7-acceptance label,
.sp-contact-m__box-11 .wpcf7-acceptance label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: normal;
	margin: 0;
}
.sp-contact-m__box-11 .wpcf7-acceptance label {
	align-items: flex-start;
	gap: 8px;
}
/* acceptanceのチェックボックスを元の .contact__input-2 と同じ見た目に */
.contact__box-12 .wpcf7-acceptance input[type="checkbox"] {
	width: 15px; height: 15px; accent-color: #c2a25c; margin: 0;
}
.sp-contact-m__box-11 .wpcf7-acceptance input[type="checkbox"] {
	width: 15px; height: 15px; accent-color: #c2a25c; margin-top: 1px;
}
.contact__box-12 .wpcf7-list-item-label::before { content: none !important; }

/* --- 送信ボタン ----------------------------------------------------- */
/* [submit] に class:wr-cta class:contact__btn-2 を付けているので
   基本デザインは元CSSが適用されます。CF7スピナーだけ位置調整。 */
.wpcf7-spinner { margin: 0 0 0 10px; vertical-align: middle; }

/* --- バリデーション / 応答メッセージ -------------------------------- */
.wpcf7-not-valid-tip {
	color: #c0392b;
	font-size: 11.5px;
	margin-top: 6px;
	display: block;
	font-family: 'Noto Sans JP', sans-serif;
}
.contact__input.wpcf7-not-valid,
.contact__select.wpcf7-not-valid,
.sp-contact-m__input.wpcf7-not-valid,
.sp-contact-m__select.wpcf7-not-valid {
	border-color: #c0392b;
}
.wpcf7-response-output {
	margin: 18px 0 0 !important;
	padding: 12px 14px !important;
	font-size: 12.5px;
	line-height: 1.7;
	border-radius: 2px;
	font-family: 'Noto Sans JP', sans-serif;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	border-color: #c0392b; color: #c0392b;
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: #4a8f5b; color: #2f6b3e;
}

/* =====================================================================
   診断ページ（matching）のフォーム用 補正
   ===================================================================== */

/* ページ側の styled ボタンから送信するため、CF7の [submit] は隠す */
.wr-cf7-hidden-submit { display: none !important; }

/* 入力欄の width:100% を維持（CF7のラップspanをブロック化） */
.cform .field .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}
.cform .field .wpcf7-form-control { margin: 0; }

/* 同意チェックボックス（acceptance）を元のflexレイアウトに戻す */
.cform .privacy .wpcf7-form-control-wrap,
.cform .privacy .wpcf7-acceptance,
.cform .privacy .wpcf7-list-item {
	display: block;
	width: 100%;
	margin: 0;
}
.cform .privacy .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	cursor: pointer;
	font-weight: 400;
}
.cform .privacy .wpcf7-list-item-label::before { content: none !important; }

/* CF7標準のバリデーション文言を .field-err と同じ色味に */
.cform .wpcf7-not-valid-tip {
	color: #c2453f;
	font-size: 11px;
	margin-top: 6px;
	font-family: var(--jp-sans, 'Noto Sans JP', sans-serif);
}
.cform .field input.wpcf7-not-valid,
.cform .field select.wpcf7-not-valid { border-bottom-color: #c2453f; }

/* CF7応答メッセージ（サンクス遷移前の一瞬に出る場合の見た目） */
.cta-block .wpcf7-response-output { margin: 16px 0 0 !important; }
.cta-block .wpcf7-spinner { display: block; margin: 12px auto 0; }

/* =====================================================================
   Cloudflare Turnstile（CF7のインテグレーション機能が出力するウィジェット）
   [turnstile] タグを置いた位置に .wpcf7-turnstile が出力されます。
   ウィジェット本体はCloudflareのiframeなので、中身の見た目は変更不可。
   ここでは配置（中央揃え・余白）だけを調整しています。
   ===================================================================== */
.wpcf7-turnstile {
	display: flex;
	justify-content: center;
	margin: 26px 0 0;
}
/* Turnstileを包むラッパーを使う場合の余白調整 */
.contact__box-14,
.sp-contact-m__box-12 {
	margin-top: 26px;
}
.contact__box-14 .wpcf7-turnstile,
.sp-contact-m__box-12 .wpcf7-turnstile {
	margin-top: 0;
}
