/* ========================================
   Contact
======================================== */

.dd-contact {
	color: #081923;
}


/* ========================================
   Hero
======================================== */

/* .contact-hero {
	background:
		linear-gradient(
			135deg,
			#edf8fc 0%,
			#dceef8 100%
		);
	padding: clamp(80px, 10vw, 140px) 24px;
} */
 .contact-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 520px;
	padding: 80px 24px;
	overflow: hidden;
	isolation: isolate;
}
.contact-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.contact-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 54%;
}

.contact-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;

	background: linear-gradient(
		90deg,
		rgb(8 25 35 / 72%) 0%,
		rgb(8 25 35 / 45%) 55%,
		rgb(8 25 35 / 20%) 100%
	);
}

.contact-hero__inner {
	width: min(1120px, 100%);
	margin: 0 auto;
	color: #fff;
}

.contact-hero__en {
	color: rgb(255 255 255 / 75%);
}

.contact-hero h1,
.contact-hero__lead {
	color: #fff;
}

.contact-hero__lead {
	margin: 0;
	font-size: clamp(17px, 2vw, 21px);
	line-height: 2;
}


/* ========================================
   Common
======================================== */

.contact-container {
	width: min(1040px, calc(100% - 48px));
	margin-inline: auto;
}


/* ========================================
   Intro
======================================== */

.contact-intro {
	padding: clamp(72px, 9vw, 120px) 0 48px;
	text-align: center;
}

.contact-intro h2 {
	margin: 0 0 30px;
	font-size: clamp(26px, 3vw, 38px);
	letter-spacing: 0.04em;
}

.contact-intro p {
	margin: 0;
	font-size: 17px;
	line-height: 2.2;
}


/* ========================================
   Form
======================================== */

.contact-form-section {
	padding: 40px 0 120px;
}

.contact-form {
	padding: clamp(36px, 5vw, 64px);
	border-radius: 24px;
	background: #f7fbfd;
	box-shadow: 0 18px 50px rgb(8 25 35 / 7%);
}

.contact-field {
	margin-bottom: 36px;
}

.contact-field label {
	display: block;
	margin-bottom: 12px;
	font-size: 16px;
	font-weight: 700;
}

.contact-required,
.contact-optional {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 10px;
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 11px;
	line-height: 1.4;
}

.contact-required {
	background: #142b3c;
	color: #fff;
}

.contact-optional {
	background: #e3e8eb;
	color: #52616a;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
	width: 100%;
	border: 1px solid #ccd8df;
	border-radius: 8px;
	background: #fff;
	padding: 16px 18px;
	color: #081923;
	transition:
		border-color .2s ease,
		box-shadow .2s ease;
}

.contact-field input,
.contact-field select {
	min-height: 58px;
}

.contact-field textarea {
	resize: vertical;
	line-height: 1.8;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
	border-color: #285570;
	outline: none;
	box-shadow: 0 0 0 3px rgb(40 85 112 / 10%);
}


/* ========================================
   Privacy
======================================== */

.contact-privacy {
	margin: 48px 0 40px;
	text-align: center;
}

.contact-privacy label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}

.contact-privacy input {
	width: 20px;
	height: 20px;
}

.contact-privacy a {
	font-weight: 700;
}


/* ========================================
   Submit
======================================== */

.contact-submit {
	text-align: center;
}

/* Contact Form 7 の送信ボタン */
.contact-submit .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: min(360px, 100%);
	min-height: 64px;
	padding: 16px 30px;

	border: 2px solid transparent;
	border-radius: 8px;

	background: #b9dc50;
	color: #181818;

	font-weight: 700;
	cursor: pointer;

	transition:
		transform .2s ease,
		border-color .2s ease,
		background-color .2s ease,
		opacity .2s ease;
}

.contact-submit .wpcf7-submit:hover {
	transform: translateY(-2px);
	border-color: currentColor;
}


/* プライバシーポリシー未同意時 */
.contact-submit .wpcf7-submit:disabled {
	background: #dfe5e8;
	color: #8a959b;
	border-color: transparent;
	cursor: not-allowed;
	transform: none;
	opacity: 1;
}


/* disabled時はhoverさせない */
.contact-submit .wpcf7-submit:disabled:hover {
	transform: none;
	border-color: transparent;
}


/* ========================================
   Mobile
======================================== */

@media (max-width: 767px) {

	.contact-hero {
		padding: 64px 24px;
	}

	.contact-hero__lead br,
	.contact-intro br {
		display: none;
	}

	.contact-container {
		width: min(100% - 32px, 960px);
	}

	.contact-intro {
		padding-top: 56px;
		text-align: left;
	}

	.contact-form-section {
		padding-bottom: 80px;
	}

	.contact-form {
		padding: 28px 20px;
		border-radius: 16px;
	}

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

	.contact-privacy {
		text-align: left;
	}

	.contact-privacy label {
		align-items: flex-start;
	}

}

/* ========================================
   Contact デザイン統一
======================================== */

/* 同意チェックの直前に置く、旧サイトと同じ高さの説明欄。 */
.contact-personal-information {
 height: 262px;
 overflow-y: auto;
 padding: 16px 20px;
 margin: 28px 0 0;
 border: 1px solid #d5d9dc;
 background: #fff;
 color: #333;
 font-size: 14px;
 line-height: 1.65;
 text-align: left;
 scrollbar-gutter: stable;
}
.contact-personal-information h2,
.contact-personal-information__body h3 {
 margin: 0 0 6px;
 padding: 0;
 border: 0;
 font-size: 14px;
 line-height: 1.65;
 letter-spacing: normal;
}
.contact-personal-information__body h3 { margin-top: 18px; }
.contact-personal-information__body p { margin: 0; font-size: 14px; line-height: 1.65; }
.contact-personal-information__opening { padding-top: 16px; text-align: center; }
.contact-personal-information__ending { padding-top: 16px; text-align: right; }
.contact-personal-information__office { margin-top: 18px; }
.contact-personal-information a { color: #245978; text-decoration: underline; overflow-wrap: anywhere; }
.contact-personal-information + .contact-privacy { margin-top: 20px; }


/* ----------------------------------------
   Heroタイトル
   会社案内の「会社案内」とサイズを統一
---------------------------------------- */

.contact-hero h1 {
	margin: 0 0 32px;
	font-size: clamp(36px, 4vw, 60px);
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.4;
}


/* CONTACT の文字との間隔 */
.contact-hero__en {
	margin: 0 0 16px;
}


/* ----------------------------------------
   Intro
---------------------------------------- */

.contact-intro {
	text-align: left;
}


/* 「まずは、お話をお聞かせください。」
   会社案内のセクションタイトルと統一 */
.contact-intro h2 {
	border-left: 7px solid #abc900;
	padding: 5px 0 5px 22px;

	margin: 0 0 40px;

	font-size: clamp(24px, 2.5vw, 32px);
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.4;
}


/* 説明文も左揃え */
.contact-intro p {
	margin: 0;
	font-size: 17px;
	line-height: 2.2;
	text-align: left;
}