/* =========================
   CONTACT FV
========================= */
.contact-fv{
	position:relative;
	width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	background:var(--green2);
	padding:56px 20px;
	overflow:hidden;
}

.contact-fv__inner{
	position:relative;
	max-width:1100px;
	margin:0 auto;
	z-index:1;
}

.contact-fv__watermark{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	pointer-events:none;
	z-index:0;
}

.contact-fv__watermark img{
	display:block;
	height:auto;
	width:auto;
	max-width:none;
	max-height:220px;
	opacity:.06;
	filter:brightness(0) invert(1);
}

.contact-fv__copy{
	position:relative;
	padding-left:26px;
	z-index:1;
}

.contact-fv__copy::before{
	content:"";
	position:absolute;
	top:50%;
	left:0;
	width:2px;
	height:60px;
	background:rgba(255,255,255,.7);
	transform:translateY(-50%);
	border-radius:999px;
}

.contact-fv__title{
	margin:0;
	font-size:clamp(26px, 3.2vw, 38px);
	font-weight:800;
	line-height:1.3;
	letter-spacing:.04em;
	color:#fff;
}

.contact-fv__sub{
	margin:8px 0 0;
	font-size:11px;
	font-weight:700;
	letter-spacing:.22em;
	text-transform:uppercase;
	color:rgba(255,255,255,.75);
}

/* =========================
   CONTACT 本文
========================= */
.contact-content{
	padding:72px 20px 96px;
}

.contact-content__inner{
	max-width:860px;
	margin:0 auto;
}

.contact-head{
	text-align:center;
	margin-bottom:36px;
}

.contact-head__lead{
	margin:0;
	font-size:15px;
	line-height:2;
	color:#5f675f;
}

/* =========================
   CONTACT フォームヘッダ
========================= */
.contact-form-head{
	text-align:center;
	margin-bottom:28px;
}

.contact-form-head__title{
	margin:0 0 10px;
	font-size:clamp(24px, 3vw, 32px);
	font-weight:800;
	line-height:1.4;
	letter-spacing:.03em;
	color:#223127;
}

.contact-form-head__text{
	margin:0;
	font-size:14px;
	line-height:2;
	color:#5f675f;
}

/* =========================
   CONTACT フォーム本体
========================= */
.contact-form-box{
	padding:32px 32px 28px;
	background:#fff;
	border:1px solid #e3e7de;
	border-radius:22px;
	box-shadow:0 8px 20px rgba(0,0,0,.035);
}

.contact-form-box__cf7 p{
	margin:0;
	padding:0;
}

.contact-form-box__cf7 .wpcf7{
	margin:0;
}

.contact-form-box__cf7 .wpcf7-form{
	display:flex;
	flex-direction:column;
	gap:18px;
}

.contact-form-box__cf7 br{
	display:none;
}

.contact-form-box__cf7 input[type="submit"]{
	display:none;
}

.contact-form-box__cf7 p:has(.contact-form__submit-hidden){
	display:none;
}

.contact-field{
	display:block;
}

.contact-form-box__label{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
	margin:0 0 12px;
	font-size:15px;
	font-weight:800;
	line-height:1.6;
	color:#223127;
}

.contact-form-box__required,
.contact-form-box__optional{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:42px;
	height:22px;
	padding:0 8px;
	border-radius:999px;
	font-size:11px;
	font-weight:700;
	letter-spacing:.04em;
}

.contact-form-box__required{
	background:#35513e;
	color:#fff;
}

.contact-form-box__optional{
	background:#eef3eb;
	color:#46624d;
	border:1px solid #dbe5d9;
}

.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field input[type="tel"],
.contact-field textarea{
	-webkit-appearance:none;
	appearance:none;
	display:block;
	width:100%;
	border:1px solid #d7ddd4;
	border-radius:14px;
	background:#fcfdfb;
	padding:14px 16px;
	font-size:15px;
	line-height:1.7;
	color:#223127;
	outline:none;
	box-shadow:none;
	transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
	box-sizing:border-box;
}

.contact-field textarea{
	min-height:180px;
	resize:vertical;
}

.contact-field input[type="text"]:focus,
.contact-field input[type="email"]:focus,
.contact-field input[type="tel"]:focus,
.contact-field textarea:focus{
	border-color:#7f9786;
	background:#fff;
	box-shadow:0 0 0 4px rgba(53,81,62,.08);
}

.contact-field input::placeholder,
.contact-field textarea::placeholder{
	color:#9aa59b;
}

.contact-field .wpcf7-not-valid-tip{
	margin-top:8px;
	font-size:12px;
	line-height:1.6;
	color:#b42318;
}

.contact-field .wpcf7-not-valid{
	border-color:#d92d20 !important;
	background:#fffafa;
}

.contact-form-box .wpcf7-response-output{
	margin:18px 0 0;
	padding:12px 14px;
	border-radius:12px;
	font-size:13px;
	line-height:1.8;
}

.contact-form-box .wpcf7 form.invalid .wpcf7-response-output,
.contact-form-box .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-form-box .wpcf7 form.payment-required .wpcf7-response-output{
	border:1px solid #f1c0c0;
	background:#fff7f7;
	color:#8a1c1c;
}

.contact-form-box .wpcf7 form.sent .wpcf7-response-output{
	border:1px solid #cfe3d5;
	background:#f6fbf7;
	color:#274430;
}

.contact-form__submit-hidden{
	display:none !important;
}

.contact-form-box__submit{
	margin-top:8px;
	text-align:center;
}

.contact-form-box__submit-btn{
	-webkit-appearance:none;
	appearance:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:220px;
	height:54px;
	padding:0 28px;
	border:none;
	border-radius:999px;
	background:var(--green2);
	color:#fff;
	font-size:15px;
	font-weight:700;
	letter-spacing:.04em;
	cursor:pointer;
	box-shadow:0 10px 24px rgba(0,0,0,.08);
	transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.contact-form-box__submit-btn:hover{
	transform:translateY(-2px);
	box-shadow:0 14px 28px rgba(0,0,0,.1);
}

.contact-form-box__submit-btn:active{
	transform:translateY(0);
}

.contact-form-box__submit-btn:disabled{
	opacity:.6;
	cursor:default;
	transform:none;
}

/* =========================
   SP
========================= */
@media screen and (max-width: 900px){
	.contact-fv{
		padding:42px 16px;
	}

	.contact-fv__watermark img{
		width:min(46vw, 220px);
		opacity:.05;
	}

	.contact-fv__copy{
		padding-left:20px;
	}

	.contact-fv__copy::before{
		height:50px;
	}

	.contact-fv__title{
		font-size:clamp(22px, 7vw, 30px);
	}

	.contact-fv__sub{
		font-size:10px;
		letter-spacing:.18em;
	}

	.contact-content{
		padding:56px 16px 74px;
	}

	.contact-head{
		margin-bottom:28px;
	}

	.contact-head__lead{
		font-size:14px;
		line-height:1.9;
	}

	.contact-form-head{
		margin-bottom:22px;
	}

	.contact-form-head__title{
		margin-bottom:8px;
		font-size:clamp(22px, 6vw, 28px);
	}

	.contact-form-head__text{
		font-size:13px;
		line-height:1.85;
	}

	.contact-form-box{
		padding:22px 16px 20px;
		border-radius:18px;
	}

	.contact-form-box__cf7 .wpcf7-form{
		gap:14px;
	}

	.contact-form-box__label{
		margin-bottom:10px;
		font-size:14px;
	}

	.contact-form-box__required,
	.contact-form-box__optional{
		min-width:38px;
		height:20px;
		padding:0 7px;
		font-size:10px;
	}

	.contact-field input[type="text"],
	.contact-field input[type="email"],
	.contact-field input[type="tel"],
	.contact-field textarea{
		padding:13px 14px;
		border-radius:12px;
		font-size:14px;
	}

	.contact-field textarea{
		min-height:160px;
	}

	.contact-form-box__submit{
		margin-top:6px;
	}

	.contact-form-box__submit-btn{
		width:100%;
		min-width:0;
		height:50px;
		font-size:14px;
	}
}

/* =========================
   CONTACT 確認画面
========================= */
.contact-confirm{
	margin-top:8px;
	padding:28px 28px 24px;
	background:#fcfdfb;
	border:1px solid #e3e7de;
	border-radius:20px;
	box-shadow:0 8px 20px rgba(0,0,0,.03);
}

.contact-confirm__inner{
	width:100%;
}

.contact-confirm__title{
	margin:0 0 20px;
	font-size:clamp(22px, 2.6vw, 28px);
	font-weight:800;
	line-height:1.45;
	letter-spacing:.03em;
	color:#223127;
	text-align:center;
}

.contact-confirm__list{
	display:flex;
	flex-direction:column;
	gap:14px;
}

.contact-confirm__row{
	display:grid;
	grid-template-columns:180px 1fr;
	gap:18px;
	padding:16px 18px;
	background:#fff;
	border:1px solid #e8ede5;
	border-radius:16px;
}

.contact-confirm__label{
	font-size:14px;
	font-weight:800;
	line-height:1.8;
	color:#35513e;
}

.contact-confirm__value{
	font-size:14px;
	line-height:1.9;
	color:#4f584f;
	word-break:break-word;
	white-space:pre-wrap;
}

.contact-confirm__actions{
	display:flex;
	justify-content:center;
	gap:14px;
	flex-wrap:wrap;
	margin-top:24px;
}

.contact-confirm__back,
.contact-confirm__submit{
	-webkit-appearance:none;
	appearance:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:220px;
	height:52px;
	padding:0 24px;
	border-radius:999px;
	font-size:15px;
	font-weight:700;
	letter-spacing:.04em;
	cursor:pointer;
	transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.contact-confirm__back{
	background:#fff;
	color:#35513e;
	border:1px solid #d7ddd4;
	box-shadow:0 6px 16px rgba(0,0,0,.04);
}

.contact-confirm__submit{
	border:none;
	background:var(--green2);
	color:#fff;
	box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.contact-confirm__back:hover,
.contact-confirm__submit:hover{
	transform:translateY(-2px);
}

.contact-confirm__back:active,
.contact-confirm__submit:active{
	transform:translateY(0);
}

.contact-confirm__submit:disabled{
	opacity:.6;
	cursor:default;
	transform:none;
}

.contact-confirm[hidden]{
	display:none !important;
}


/* =========================
   確認画面 送信中
========================= */
.contact-confirm__submit{
	position:relative;
	gap:10px;
}

.contact-confirm__submit-spinner{
	display:none;
	width:16px;
	height:16px;
	border:2px solid rgba(255,255,255,.35);
	border-top-color:#fff;
	border-radius:50%;
	animation:contactSpin .8s linear infinite;
	flex:0 0 16px;
}

.contact-confirm__submit.is-sending .contact-confirm__submit-spinner{
	display:inline-block;
}

.contact-confirm__submit.is-sending{
	opacity:.9;
	cursor:default;
}

@keyframes contactSpin{
	from{
		transform:rotate(0deg);
	}
	to{
		transform:rotate(360deg);
	}
}


/* =========================
   送信完了
========================= */
.contact-complete{
	margin-top:8px;
	padding:32px 28px 28px;
	background:#fff;
	border:1px solid #e3e7de;
	border-radius:20px;
	box-shadow:0 8px 20px rgba(0,0,0,.04);
	text-align:center;
}

.contact-complete__title{
	margin:0 0 16px;
	font-size:clamp(22px, 2.6vw, 28px);
	font-weight:800;
	color:#223127;
}

.contact-complete__text{
	margin:0 0 22px;
	font-size:14px;
	line-height:2;
	color:#5f675f;
}

.contact-complete__actions{
	margin-top:12px;
}

.contact-complete__btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:220px;
	height:52px;
	padding:0 24px;
	border-radius:999px;
	background:var(--green2);
	color:#fff;
	font-size:15px;
	font-weight:700;
	text-decoration:none;
	box-shadow:0 10px 24px rgba(0,0,0,.08);
	transition:transform .25s ease;
}

.contact-complete__btn:hover{
	transform:translateY(-2px);
}

.contact-complete[hidden]{
	display:none !important;
}

/* =========================
   SP
========================= */
@media screen and (max-width: 900px){
	.contact-confirm{
		margin-top:6px;
		padding:20px 16px 18px;
		border-radius:18px;
	}

	.contact-confirm__title{
		margin-bottom:16px;
		font-size:clamp(20px, 6vw, 24px);
	}

	.contact-confirm__list{
		gap:10px;
	}

	.contact-confirm__row{
		grid-template-columns:1fr;
		gap:6px;
		padding:14px 14px;
		border-radius:14px;
	}

	.contact-confirm__label{
		font-size:13px;
		line-height:1.7;
	}

	.contact-confirm__value{
		font-size:13px;
		line-height:1.8;
	}

	.contact-confirm__actions{
		gap:10px;
		margin-top:18px;
	}

	.contact-confirm__back,
	.contact-confirm__submit{
		width:100%;
		min-width:0;
		height:48px;
		font-size:14px;
	}

	.contact-complete{
		padding:24px 16px 20px;
		border-radius:18px;
	}

	.contact-complete__btn{
		width:100%;
		height:48px;
		font-size:14px;
	}
	
}