@charset "UTF-8";

/* ==============================================
   Contact Form 7 Custom Styles
   ============================================== */

/* =========================================
     設定
     ========================================= */
:root {
	/* 落ち着いた赤色 (#b24040: 彩度を抑えた深めの赤) */
	--error-main-color: #EA0009;

	/* 薄い赤色 (入力欄の背景用) */
	--error-bg-color: #fff2f2;

	/* エラー文言の文字色 (白) */
	--error-text-color: #ffffff;
}


/* 冒頭のエラーメッセージ（文字）を非表示にする */
.wpcf7-not-valid-tip {
	display: none;
}

/* エラー時の枠線を赤くする */
.wpcf7-form-control.wpcf7-not-valid {
	border: 1px solid var(--error-main-color) !important;
	background-color: var(--error-bg-color) !important;
}

/* フォーム全体の囲みメッセージのデザイン */
.wpcf7-response-output {
	color: var(--error-main-color);
	margin: 1em 0;
}


/* 画面上方のエラーメッセージ(本来スクリーンリーダー用) */
.screen-reader-response {
	display: none;
}

/* エラーメッセージ（入力欄の下に出る文字）のデザイン */
.wpcf7-not-valid-tip {
	display: block !important;
	/* 以前の display:none を打ち消して表示させる */

	font-size: 13px;
	font-weight: bold;
	/* 太字 */
	color: var(--error-text-color);
	/* 文字は白 */
	background-color: var(--error-main-color);
	/* 背景は赤 */

	padding: 6px 12px;
	/* 内側の余白 */
	margin-top: 8px;
	/* 入力欄との距離 */
	border-radius: 4px;
	/* 角を丸く */
	position: relative;
	/* 吹き出しの矢印用 */
	line-height: 1.4;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	/* 少し影をつけて浮かせる */
}

/* 「吹き出し」の三角形を作る（上向きの矢印） */
.wpcf7-not-valid-tip::before {
	content: "";
	position: absolute;
	top: -6px;
	/* 本体の上に飛び出させる */
	left: 15px;
	/* 左端からの位置 */
	border-style: solid;
	border-width: 0 6px 6px 6px;
	/* 三角形のサイズ */
	border-color: transparent transparent var(--error-main-color) transparent;
	/* 赤い三角 */
}


/* telだけcssが効いていないのを修正 */
.field input[type=tel] {
	padding: 0 10px;
	background: #fff;
	border: 1px solid #d8d8d8;
	height: 35px;
	line-height: 33px;
	font-size: 1rem;
	border-radius: 4px;
}


/* --------------------------------------------------
   * 4. 送信完了画面の制御 (Switching)
   * -------------------------------------------------- */

/* デフォルト：完了メッセージは隠す */
.form-success {
	display: none;
}

/* 送信成功時：入力フォーム本体を隠す */
form.sent .form-body {
	display: none !important;
}

/* 送信成功時：完了メッセージを表示する */
form.sent .form-success {
	display: block !important;
}

/* お問い合わせフォームを隠す */
form.sent .mw_wp_form.mw_wp_form_input {
	display: none;
}