/*
 * お問い合わせ・資料請求フォーム（Contact Form 7 + Confirm Plus）の見た目を旧フォーム（MW WP Form）に合わせる。
 * 入力欄そのものの見た目はテーマ（common.css の body#contact #contents form …）のまま使う。
 * ここで直すのは、CF7・Confirm Plus が出す HTML が MW WP Form と違うところ
 */

/* ---------- 入力画面 ---------- */

/* 入力エラーのメッセージは engawa-forms.js が項目名の前に写す（CF7 が欄の後ろに出すものは隠す） */
.wpcf7 .wpcf7-not-valid-tip {
	display: none;
}

/* 入力エラーの欄の赤枠（テーマの .form_error に、CF7 の選択欄・チェックボックスの囲みを足す） */
body#contact #contents form .form_error dd .checkbox_block,
body#contact #contents form .form_error dd.checkbox_block {
	border-color: #e2041b;
}

/* 同意のチェック。テーマはチェックボックスを label.checkbox からの位置で置き、チェックの印を白い影で隠しているので、
   CF7 が間に入れる要素（position: relative）を位置の基準にしない */
.wpcf7 .agreement label.checkbox .wpcf7-form-control-wrap {
	position: static;
}

/* 選択肢の並び（テーマの MW WP Form 用の指定と同じ形） */
.wpcf7 .wpcf7-list-item {
	margin: 0;
}
.wpcf7 .checkbox_block .wpcf7-list-item {
	display: block;
}
.wpcf7 .checkbox_block.checkbox_horizontal .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
}
.wpcf7 .checkbox_block.checkbox_horizontal .wpcf7-list-item {
	width: 50%;
}
body#contact #contents .wpcf7 .checkbox_block.checkbox_horizontal .wpcf7-list-item:nth-last-child(-n+2) label {
	border-bottom: none;
}
body#contact #contents .wpcf7 .checkbox_block.checkbox_horizontal .wpcf7-list-item:nth-child(even) label {
	border-left: 1px solid #e2e2e2;
}
/* ラジオボタン。テーマはチェックボックス以外のすべての input に入力欄の見た目（幅 100%・枠）を付けているので、元に戻す */
body#contact #contents .wpcf7 form dd input[type="radio"] {
	-webkit-appearance: auto;
	appearance: auto;
	width: auto;
	padding: 0;
	border: none;
}
.wpcf7 .checkbox_block .wpcf7-list-item input[type="checkbox"],
.wpcf7 .checkbox_block .wpcf7-list-item input[type="radio"] {
	margin-right: 0.5em;
}

/* 送信中の表示（ボタンの位置がずれないよう、流れから外す） */
.wpcf7 .formbutton .wpcf7-spinner {
	position: absolute;
	margin: 14px 0 0 12px;
}

/* 送信結果のメッセージ。入力エラーはページ上部（.errormessage）と各欄に出すので、ここには出さない */
.wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 10px;
	text-align: center;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output {
	display: none;
}

/* 完了ページへ移るまでの間 */
.wpcf7.engawa-forms-leaving {
	visibility: hidden;
}

/* Turnstile（人の操作かの確認）は送信ボタンの上に中央寄せ */
.wpcf7 .wpcf7-turnstile {
	margin: 0 0 30px;
	text-align: center;
}

/* ---------- 確認画面（Confirm Plus） ---------- */

/* 入力欄は表示しない（Confirm Plus は見えなくするだけで場所が残るため、確認画面の下に空白ができる） */
.wpcf7 form.wpcf7cp-form-hide {
	display: none;
}
.wpcf7 div#wpcf7cpcnf {
	position: static;
}

/* 項目ごとの枠（旧フォームの確認画面と同じ） */
.wpcf7 div#wpcf7cpcnf table,
.wpcf7 div#wpcf7cpcnf tbody,
.wpcf7 div#wpcf7cpcnf tr,
.wpcf7 div#wpcf7cpcnf th,
.wpcf7 div#wpcf7cpcnf td {
	display: block;
	width: 100%;
}
.wpcf7 div#wpcf7cpcnf table {
	margin: 0;
}
.wpcf7 div#wpcf7cpcnf tr {
	margin: -1px 0 0;
	border: 1px solid #e2e2e2;
}
.wpcf7 div#wpcf7cpcnf th,
.wpcf7 div#wpcf7cpcnf td {
	border: none;
	font-weight: normal;
	line-height: inherit;
}
.wpcf7 div#wpcf7cpcnf th {
	padding: 10px 10px 5px;
	color: #04345b;
}
.wpcf7 div#wpcf7cpcnf td {
	padding: 0 10px 10px;
}

/* ボタン（旧フォームと同じく「送信する」「修正する」の順） */
.wpcf7 div.wpcf7cp-btns {
	flex-direction: row-reverse;
	justify-content: center;
	gap: 20px;
	margin-top: 40px;
}
.wpcf7 div.wpcf7cp-btns button {
	margin: 0;
	padding: 10px 40px;
	font-size: 24px;
	line-height: 1.2em;
	color: #ffffff;
	font-family: "Noto Serif JP", serif;
	background: #c2ad5d;
	border: 2px solid #c2ad5d;
	border-radius: 0;
	cursor: pointer;
	transition: 0.4s;
}
.wpcf7 div.wpcf7cp-btns button:hover {
	color: #c2ad5d;
	background: #ffffff;
}
.wpcf7 div.wpcf7cp-btns button:disabled {
	opacity: 0.5;
	cursor: wait;
}

@media only screen and ( max-width: 640px ) {
	.wpcf7 div.wpcf7cp-btns {
		gap: 2vw;
		margin-top: 8vw;
	}
	.wpcf7 div.wpcf7cp-btns button {
		padding: 2vw 4vw;
		font-size: 1.333em;
	}
}