@charset "utf-8";
/*
 * お問い合わせフォーム（Contact Form 7）のスタイル
 *
 * これまでのフォームの見た目は mailform/mfp.statics/mailformpro.css にありました。
 * メールフォームプロを撤去したため、必要な分をこのファイルに作り直しています。
 * 色は既存サイトに合わせています（金 #ad7c20 / 赤 #e83a17 / 桃 #ff9999）。
 */


/*
 * 入力画面と確認画面の切り替えは hidden 属性で行っています。
 * reset.css が display を指定し直している要素があるため、念のため強制しています。
 */
.wpcf7 [hidden] {
	display: none !important;
}


/*******************************
入力項目のならび
*******************************/
.form-list {
	margin: 0 0 2rem;
}

.form-list dt {
	margin-top: 1.5rem;
	padding: 0.5rem 1rem;
	background: rgba(255, 223, 223, 1);
	font-weight: bold;
	font-size: 105%;
}

.form-list dd {
	margin: 0;
	padding: 1rem 0.25rem 0;
}

/* 画面が広いときは、項目名と入力欄を左右に並べる */
@media screen and (min-width: 768px) {
	.form-list {
		display: grid;
		grid-template-columns: 16rem 1fr;
		gap: 0;
		align-items: start;
	}

	.form-list dt {
		margin-top: 0;
		padding: 1.1rem 1rem;
		border-bottom: 1px solid #fff;
	}

	.form-list dd {
		padding: 1rem;
		border-bottom: 1px solid #eee;
	}
}

/* 「必須」「任意」のラベル */
.form-list .must,
.form-list .any {
	display: inline-block;
	margin-right: 0.5em;
	padding: 0.1em 0.6em;
	border-radius: 3px;
	color: #fff;
	font-size: 0.75rem;
	font-weight: normal;
	vertical-align: middle;
}

.form-list .must {
	background: #e83a17;
}

.form-list .any {
	background: #999;
}


/*******************************
入力欄
*******************************/
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.7em 0.8em;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	font-family: inherit;
	/* iOSで入力欄をタップしたときに画面が拡大するのを防ぐため、16px以上にしています。 */
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
}

.wpcf7 textarea {
	min-height: 12rem;
	resize: vertical;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: 2px solid #ad7c20;
	outline-offset: 1px;
	border-color: #ad7c20;
}

.wpcf7 ::placeholder {
	color: #aaa;
}

/*
 * 姓・名のように横に並べたい入力欄。
 *
 * 以前は flex-wrap で「入るときだけ2列」にしていましたが、
 * 12rem（192px）という最小幅がスマートフォンの画面幅より大きく、
 * 320〜414px幅ではほぼ縦積みになっていました。
 * 常に2列で並ぶよう、幅を折り返さないグリッドに変えています。
 */
.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

/*
 * Contact Form 7 が自動整形（wpautop_or_not）で <br> を挟み込むと、
 * その <br> がグリッドの1マスを占有し、2つ目の入力欄が次の行に落ちてしまう。
 * functions.php で自動整形自体を止めているが、万一のための保険として、
 * .form-row の中の <br> は表示上占有しないようにしておく。
 */
.form-row br {
	display: none;
}

/* CF7が各入力欄を <span class="wpcf7-form-control-wrap"> で包むため、
   はみ出さないようこの中の入力欄の幅も明示している。 */
.form-row .wpcf7-form-control-wrap {
	display: block;
	min-width: 0;
}

.form-row input {
	width: 100%;
}

/* チェックボックス・ラジオ */
.wpcf7 .wpcf7-checkbox,
.wpcf7 .wpcf7-radio {
	display: block;
}

.wpcf7 .wpcf7-list-item {
	display: block;
	margin: 0 0 0.5em;
}

.wpcf7 .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 0.6em;
	cursor: pointer;
	/*
	 * 指で押しやすい大きさを確保する。
	 * 44px は、スマートフォンで押し間違いが起きにくいとされる下限です。
	 * チェックボックスそのものではなく、文字を含むラベル全体を押せるようにしています。
	 */
	min-height: 44px;
	padding: 0.25rem 0;
}

.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.2em;
	flex-shrink: 0;
	accent-color: #ad7c20;
}

.form_remarks {
	margin-top: 0.5rem;
	font-size: 0.85rem;
}

.form_remarks a {
	color: #ad7c20;
	text-decoration: underline;
}


/*******************************
確認画面
*******************************/
.form-confirm__lead {
	margin-bottom: 1.5rem;
	padding: 0.75rem 1rem;
	background: #fff8e8;
	border-left: 4px solid #ad7c20;
	font-weight: bold;
}

.form-list--confirm dd {
	white-space: pre-wrap;
	word-break: break-word;
}

.form-list--confirm dd.is-empty {
	color: #999;
}


/*******************************
ボタン
*******************************/
.form-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 2rem;
	/*
	 * benefits.css の .tab_content が、PC幅では下側の余白を 0 にしている
	 * （padding: 2em 3em 0）ため、このボタンがタブの枠の底辺に直接くっついて見えていた。
	 * スマホ幅（768px以下）は .tab_content 側に 1em の余白があるため症状が出ない。
	 * .tab_content 自体は他の用途（LINEタブなど）にも影響するため触らず、
	 * ボタン側に下余白を持たせて解決している。
	 */
	margin-bottom: 2rem;
}

.wpcf7 .form-btn {
	min-width: 16rem;
	padding: 1em 2em;
	border: 2px solid #ff9999;
	border-radius: 10rem;
	background: #fff;
	color: #000;
	font-family: inherit;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	transition: 0.3s;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7 .form-btn:hover,
.wpcf7 .form-btn:focus {
	background: #ff9999;
	color: #fff;
}

/* 最終送信ボタンは、押すべきものだと分かるよう塗りつぶす */
.wpcf7 .form-btn--submit {
	background: #e83a17;
	border-color: #e83a17;
	color: #fff;
}

.wpcf7 .form-btn--submit:hover,
.wpcf7 .form-btn--submit:focus {
	background: #c62f10;
	border-color: #c62f10;
	color: #fff;
}

.wpcf7 .form-btn--back {
	border-color: #bbb;
}

.wpcf7 .form-btn--back:hover,
.wpcf7 .form-btn--back:focus {
	background: #bbb;
}

@media screen and (max-width: 700px) {
	.wpcf7 .form-btn {
		width: 100%;
		min-width: 0;
	}
}


/*******************************
エラー表示
*******************************/
/* 確認ボタンを押したときの簡易チェック */
.form-error {
	margin-top: 0.4rem;
	color: #e83a17;
	font-size: 0.85rem;
	font-weight: bold;
}

/* Contact Form 7 が出すメッセージ */
.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 0.4rem;
	color: #e83a17;
	font-size: 0.85rem;
	font-weight: bold;
}

.wpcf7 .wpcf7-not-valid {
	border-color: #e83a17;
	background: #fff5f3;
}

.wpcf7 .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 1rem;
	border: 2px solid #ad7c20;
	border-radius: 4px;
	text-align: center;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #e83a17;
	color: #e83a17;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #669966;
	color: #33682f;
	font-weight: bold;
}

/* 送信中のぐるぐる */
.wpcf7 .wpcf7-spinner {
	margin: 0 0 0 0.75rem;
}