@charset "utf-8";
/* ===================================================================
   contact.css  —  お問い合わせ（contact）※ns-metal仕様を踏襲・onoue px化
   デザイン幅: PC=1440 / SP=375 ／ 単位: px ／ アクセント: 緑 #165126/#235a32
   ※ eyecatch / pan は共通（admin.css）。フォームはCF7＋html_class="contactform"
=================================================================== */

/* ヒーロー背景 */
.eyecatch_inc .eye_img{
	background-image: url(../img/contact/eye01.jpg);
}
@media only screen and (max-width: 767px){
	.eyecatch_inc .eye_img{
		background-image: url(../img/contact/eye01_sp.jpg);
	}
}

/* エラー表示で高さが変わってもJSのスムーススクロールが打ち消されないように */
html{ overflow-anchor: none; }

/* フォーム設置エリア（セクション＝contents01） */
.contents01{
	padding: 6rem 0 15.3rem;
}
/* CF7の<form>に html_class="contactform" が付く＝798px中央 */
.contactform{
	width: 79.8rem;
	margin: 0 auto;
}

/* ---- 行（ラベル上・入力下の縦積み） ---- */
.contactform_row + .contactform_row{
	margin-top: 4.2rem;
}
.contactform_head{
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 1.5rem;
}
.contactform_label{
	font-size: 1.6rem;
	line-height: 1;
	letter-spacing: calc((40/1000)*1em);
	color: #2b2b2b;
}
.contactform_req{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0 0.6rem;
	height: 2.2rem;
	background: #b90001;
	font-size: 1.1rem;
	line-height: 1;
	letter-spacing: calc((40/1000)*1em);
	color: #ffffff;
}

/* ---- 入力欄 ---- */
.contactform_field{ width: 100%; }
.contactform_field input,
.contactform_field textarea{
	width: 100%;
	height: 6rem;
	padding: 0 2rem;
	border: 1px solid #aaaaaa;
	border-radius: 0.4rem;
	background: #ffffff;
	font-size: 1.5rem;
	letter-spacing: calc((20/1000)*1em);
	color: #2b2b2b;
}
/* 電話番号は短い入力幅（設計324px） */
.contactform_row_tel .contactform_field input{
	width: 32.4rem;
}
.contactform_field textarea{
	height: 26rem;
	min-height: 26rem;   /* 自動伸長の下限＝初期高さ */
	padding: 1.6rem 2rem;
	line-height: 2.7rem;
	resize: none;
	overflow: hidden;
}
.contactform_field input::placeholder,
.contactform_field textarea::placeholder{
	color: #aaaaaa;
}
.contactform_field .wpcf7-form-control-wrap{ display: block; }
/* CF7標準のエラーチップは非表示（表示は .contactform_error に統一） */
.wpcf7-not-valid-tip{ display: none !important; }
/* 送信成功時：完了メッセージを出さずサンクスへ遷移するため非表示 */
.wpcf7-form.sent .wpcf7-response-output{ display: none; }

/* ---- エラーメッセージ（文言は js/contact.js の MESSAGES で変更可） ---- */
.contactform_error{
	display: none;
	margin-top: 0.8rem;
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: calc((20/1000)*1em);
	color: #c33;
}
.contactform_error.is-show{ display: block; }
.contactform_field input.is-error,
.contactform_field textarea.is-error{ border-color: #c33; }

/* ---- 個人情報同意ボックス ---- */
.contactform_privacy{
	margin-top: 5.6rem;
	padding: 3rem 3.3rem;
	background: #f2f5f3;
}
.contactform_privacy_lead{
	display: flex;
	align-items: center;
	gap: 0;
	font-size: 1.5rem;
	line-height: 2.4rem;
	letter-spacing: calc((20/1000)*1em);
	color: #2b2b2b;
}
.contactform_privacy_link{
	text-decoration: underline;
	text-underline-offset: 0.3rem;
	color: #165126;
}
.contactform_privacy_check{
	margin-top: 1.5rem;
}
.contactform_privacy_check .wpcf7-list-item{ margin: 0; }
.contactform_privacy_check label{
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	cursor: pointer;
}
.contactform_privacy_check input[type="checkbox"]{
	width: 2.2rem;
	height: 2.2rem;
	accent-color: #235a32;
}
.contactform_privacy_check .wpcf7-list-item-label{
	font-size: 1.5rem;
	letter-spacing: calc((20/1000)*1em);
	color: #2b2b2b;
}

/* ---- Turnstile（同意と確認ボタンの間・中央） ---- */
.contactform_turnstile{
	margin-top: 4rem;
	display: flex;
	justify-content: center;
}
.contactform_turnstile .cf-turnstile{
	max-width: 30rem;
	margin-inline: auto;
}

/* ---- 確認画面へ進む ボタン（緑アウトライン 229×49・case戻ると同型） ---- */
.contactform_submit{
	margin-top: 6rem;
	text-align: center;
}
.contactform_submit_btn{
	width: 22.9rem;
	height: 4.9rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background: #ffffff;
	border: 1px solid #165126;
	border-radius: 2.5rem;
	font-size: 1.4rem;
	letter-spacing: calc((20/1000)*1em);
	color: #165126;
	cursor: pointer;
	transition: all .3s;
}
.contactform_submit_btn:hover{
	background: #165126;
	color: #ffffff;
}
.contactform_submit_btn:disabled{
	opacity: .4;
	cursor: not-allowed;
}
.contactform_submit_btn:disabled:hover{
	background: #ffffff;
	color: #165126;
}
/* 送信・戻る（確認画面でのみ表示） */
.contactform_actions{ display: none; }
.contactform_back_btn{
	background: #ffffff;
	border-color: #999999;
	color: #2b2b2b;
}
.contactform_back_btn:hover{
	background: #999999;
	color: #ffffff;
}

/* ===================================================================
   確認画面（form に .is-confirm）
=================================================================== */
.contactform.is-confirm .contactform_field input,
.contactform.is-confirm .contactform_field textarea{
	border: 0;
	padding-left: 0;
	padding-right: 0;
}
/* 電話番号も確認画面では自動幅にせず全幅（横スクロール防止） */
.contactform.is-confirm .contactform_row_tel .contactform_field input{
	width: 100%;
}
.contactform.is-confirm .contactform_row{
	border-bottom: 1px solid #dddddd;
	padding-bottom: 1.4rem;
}
.contactform.is-confirm .contactform_field input::placeholder,
.contactform.is-confirm .contactform_field textarea::placeholder{
	color: transparent;
}
.contactform.is-confirm .contactform_privacy_check{ pointer-events: none; }
.contactform.is-confirm .contactform_error{ display: none; }
.contactform.is-confirm .contactform_confirm_btn{ display: none; }
.contactform.is-confirm .contactform_actions{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
}

/* ===================================================================
   SP  @media (max-width:767px) ※SPデザイン無→PC踏襲で最低限
=================================================================== */
@media only screen and (max-width: 767px){
	.contents01{
		padding: 4rem 0 8rem;
	}
	.contactform{
		width: 100%;
		padding: 0 2.8rem;
	}
	.contactform_row + .contactform_row{
		margin-top: 2.8rem;
	}
	.contactform_field input,
	.contactform_field textarea{
		height: 5.2rem;
	}
	/* 電話番号もSPは全幅 */
	.contactform_row_tel .contactform_field input{
		width: 100%;
	}
	.contactform_field textarea{
		height: 20rem;
		min-height: 20rem;
	}
	.contactform_privacy{
		margin-top: 4rem;
		padding: 2.4rem 2rem;
	}
	.contactform_turnstile{
		margin-top: 3.2rem;
	}
	.contactform_turnstile .cf-turnstile{
		max-width: none;
	}
	.contactform_submit{
		margin-top: 4rem;
	}
}