/* ==========================================
   CONTACT PAGE SPECIFIC STYLES
========================================== */

/* Header */
.contact-header {
	position: relative;
	height: calc(400px * var(--scale-factor));
	overflow: hidden;
}

.contact-header-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.contact-header-inner {
	display: flex;
	flex-direction: column;
	gap: calc(80px * var(--scale-factor));
	padding-top: calc(200px * var(--scale-factor));
}

.contact-heading {
	font-family: var(--font-dela);
	line-height: 1.2;
	letter-spacing: calc(4px * var(--scale-factor));
	color: #02060b;
}

.contact-heading-c {
	font-size: calc(128px * var(--scale-factor));
}

.contact-heading-rest {
	font-size: calc(96px * var(--scale-factor));
}

/* 見出し白縁（OFFICEと同様表現） */
.contact-heading .contact-heading-c,
.contact-heading .contact-heading-rest {
	-webkit-text-stroke: calc(3px * var(--scale-factor)) #ffffff;
	-webkit-text-fill-color: #02060b;
	paint-order: stroke fill;
	text-shadow:
		calc(1px * var(--scale-factor)) 0 0 #ffffff,
		-calc(1px * var(--scale-factor)) 0 0 #ffffff,
		0 calc(1px * var(--scale-factor)) 0 #ffffff,
		0 -calc(1px * var(--scale-factor)) 0 #ffffff,
		calc(1px * var(--scale-factor)) calc(1px * var(--scale-factor)) 0 #ffffff,
		calc(1px * var(--scale-factor)) -calc(1px * var(--scale-factor)) 0 #ffffff,
		-calc(1px * var(--scale-factor)) calc(1px * var(--scale-factor)) 0 #ffffff,
		-calc(1px * var(--scale-factor)) -calc(1px * var(--scale-factor)) 0 #ffffff;
}

/* Contact Section */
.contact {
	position: relative;
	background-color: var(--color-off-white);
	min-height: calc(1148px * var(--scale-factor));
	overflow: hidden;
}

.contact .container {
	position: relative;
}

.contact-decoration {
	position: absolute;
	bottom: 0;
	width: 100vw;
	height: calc(300px * var(--scale-factor));
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.contact-decoration img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.contact-content {
	display: flex;
	flex-direction: column;
	gap: calc(32px * var(--scale-factor));
	padding-top: calc(112px * var(--scale-factor));
	padding-bottom: calc(80px * var(--scale-factor));
}

/* 申し込みバリアント */
.contact .contact-title {
	color: var(--color-black);
}

.contact .btn-submit {
	background-color: var(--color-main-navy);
}

.contact .contact-content {
	padding-top: calc(112px * var(--scale-factor));
}

.contact-title {
	font-family: 'Hiragino Kaku Gothic StdN', 'Hiragino Kaku Gothic ProN', sans-serif;
	font-size: calc(48px * var(--scale-factor));
	line-height: 1.5;
	color: var(--color-black);
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: calc(24px * var(--scale-factor));
	max-width: calc(768px * var(--scale-factor));
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: calc(8px * var(--scale-factor));
	width: 100%;
}

.form-group-half {
	max-width: calc(372px * var(--scale-factor));
}

.form-label-row {
	display: flex;
	align-items: center;
	gap: calc(16px * var(--scale-factor));
}

.form-label {
	font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
	font-weight: 600;
	font-size: calc(24px * var(--scale-factor));
	color: #222222;
}

.badge-required {
	background-color: #c9171e;
	color: #fff;
	padding: calc(4px * var(--scale-factor)) calc(8px * var(--scale-factor));
	border-radius: calc(4px * var(--scale-factor));
	font-size: calc(16px * var(--scale-factor));
	font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
	font-weight: 600;
}

.badge-optional {
	background-color: #a8a8a8;
	color: #fff;
	padding: calc(4px * var(--scale-factor)) calc(8px * var(--scale-factor));
	border-radius: calc(4px * var(--scale-factor));
	font-size: calc(16px * var(--scale-factor));
	font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
	font-weight: 600;
}

.textarea {
	width: 100%;
	height: calc(180px * var(--scale-factor));
	border: calc(2px * var(--scale-factor)) solid #02060b;
	border-radius: calc(12px * var(--scale-factor));
	padding: calc(12px * var(--scale-factor));
	font-family: 'Mukta', 'Noto Sans JP', sans-serif;
	font-size: calc(16px * var(--scale-factor));
}

.input {
	width: 100%;
	border: calc(2px * var(--scale-factor)) solid #02060b;
	border-radius: calc(12px * var(--scale-factor));
	padding: calc(8px * var(--scale-factor)) calc(12px * var(--scale-factor));
	font-family: 'Mukta', 'Noto Sans JP', sans-serif;
	font-size: calc(16px * var(--scale-factor));
}

.count-row {
	display: flex;
	justify-content: flex-end;
	color: #a8a8a8;
	font-size: calc(16px * var(--scale-factor));
}

.form-action {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: calc(120px * var(--scale-factor));
}

.btn-submit {
	background-color: var(--color-main-navy);
	color: var(--color-white);
	border: calc(2px * var(--scale-factor)) solid var(--color-black);
	border-radius: calc(12px * var(--scale-factor));
	padding: calc(16px * var(--scale-factor)) calc(48px * var(--scale-factor));
	font-family: 'Hiragino Kaku Gothic StdN', 'Hiragino Kaku Gothic ProN', sans-serif;
	font-weight: 800;
	font-size: calc(24px * var(--scale-factor));
}

.form-note {
	color: var(--color-black);
	font-size: calc(16px * var(--scale-factor));
}

.policy-link {
	text-decoration: underline;
}

.form-help {
	font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
	font-size: calc(16px * var(--scale-factor));
	line-height: 1.5;
	color: var(--color-black);
}

@media (max-width: 600px) {
	.contact-header {
		height: auto;
		min-height: calc(260px * var(--scale-factor));
	}

	.contact-header-inner {
		gap: calc(40px * var(--scale-factor));
		padding-top: calc(120px * var(--scale-factor));
	}

	.contact-heading-c {
		font-size: calc(72px * var(--scale-factor));
	}

	.contact-heading-rest {
		font-size: calc(54px * var(--scale-factor));
	}

	.contact {
		min-height: auto;
		padding-bottom: calc(60px * var(--scale-factor));
	}

	.contact-title {
		font-size: var(--text-lg);
	}

	.form-group-half {
		max-width: 100%;
	}

	.form-note {
		font-size: var(--text-sm);
	}
}