/* ==========================================================================
   Page: Contact
   ========================================================================== */

.contact-page {
	--contact-form-panel-top: min(12.5vw, 150px);
	--contact-form-panel-width: 1200px;
	--contact-form-panel-padding-top: 100px;
	--contact-form-panel-padding-bottom: 120px;
	--contact-form-label-width: 190px;
	--contact-form-badge-size: 54px;
	--contact-form-column-gap: 20px;
	--contact-form-control-width: 800px;
	--contact-form-control-height: 70px;
	--contact-form-row-gap: 40px;
	--contact-form-textarea-height: 280px;
	--contact-form-submit-top: 60px;
	--contact-form-submit-width: 320px;
	--contact-form-submit-height: 70px;

	padding-bottom: var(--cta-before-space);
	width: 100%;
}

.contact-page .c-simple-kv {
	--simple-kv-illust-width: min(11.9167vw, 143px);
	--simple-kv-illust-right: min(11.25vw, 135px);
}

.contact-form-section {
	width: min(100% - 100px, var(--contact-form-panel-width));
	margin: var(--contact-form-panel-top) auto 0;
	padding: var(--contact-form-panel-padding-top) 0 var(--contact-form-panel-padding-bottom);
	background: #f7f7f7;
}

.contact-form {
	display: grid;
	row-gap: var(--contact-form-row-gap);
	width: calc(var(--contact-form-label-width) + var(--contact-form-badge-size) + var(--contact-form-control-width) + (var(--contact-form-column-gap) * 2));
	margin-inline: auto;
}

.contact-form p {
	margin: 0;
}

.contact-form .wpcf7-form-control-wrap {
	display: block;
}

.contact-form__row {
	display: grid;
	grid-template-columns: var(--contact-form-label-width) var(--contact-form-badge-size) var(--contact-form-control-width);
	align-items: center;
	column-gap: var(--contact-form-column-gap);
}

.contact-form__row--message {
	align-items: start;
}

.contact-form__row--type {
	align-items: start;
}

.contact-form__row--type .contact-form__label-wrap {
	display: flex;
	align-items: center;
	min-height: var(--contact-form-badge-size);
}

.contact-form__row--message .contact-form__label-wrap,
.contact-form__row--message .contact-form__badge {
	margin-top: 9px;
}

.contact-form__label-wrap {
	min-width: 0;
}

.contact-form__label {
	display: block;
	color: #1d1d1d;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	font-feature-settings: "palt";
}

.contact-form__badge {
	display: grid;
	place-items: center;
	width: var(--contact-form-badge-size);
	height: var(--contact-form-badge-size);
	border-radius: 50%;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
}

.contact-form__row:not(.contact-form__row--message) .contact-form__badge {
	transform: translateY(3px);
}

.contact-form__badge--required {
	color: #fff;
	background: var(--color-link-blue);
}

.contact-form__badge--optional {
	color: var(--color-link-blue);
	background: #fff;
}

.contact-form__control-wrap {
	min-width: 0;
}

.contact-form__control-wrap--type {
	display: grid;
	row-gap: 20px;
}

.contact-form__type-options {
	display: flex;
	align-items: center;
	min-height: var(--contact-form-badge-size);
}

.contact-form__type-options .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 38px;
}

.contact-form__type-options .wpcf7-list-item {
	margin: 0;
}

.contact-form__type-options label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #1d1d1d;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	font-feature-settings: "palt";
}

.contact-form__type-options input[type="radio"] {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin: 0;
	accent-color: var(--color-link-blue);
}

.contact-form__detail-wrap {
	min-width: 0;
}

.contact-form__control {
	display: block;
	width: 100%;
	height: var(--contact-form-control-height);
	border: 1px solid #ccc;
	border-radius: 0;
	padding: 0 25px;
	color: #1d1d1d;
	background: #fff;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	font-feature-settings: "palt";
}

.contact-form__select {
	appearance: auto;
}

.contact-form__textarea {
	height: var(--contact-form-textarea-height);
	padding-top: 18px;
	resize: vertical;
}

.contact-form__submit-wrap {
	display: flex;
	justify-content: center;
	margin-top: calc(var(--contact-form-submit-top) - var(--contact-form-row-gap));
}

.contact-form__submit {
	display: grid;
	place-items: center;
	width: var(--contact-form-submit-width);
	height: var(--contact-form-submit-height);
	border: 0;
	border-radius: 0;
	color: #fff;
	background: #56c9bc;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color 0.45s ease;
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
	background: #1d1d1d;
}

@media (max-width: 1200px) {
	.contact-form-section {
		width: min(calc(100% - 100px), var(--contact-form-panel-width));
	}

	.contact-form {
		--contact-form-label-width: min(15.8333vw, 190px);
		--contact-form-control-width: calc(100vw - 100px - (var(--contact-form-label-width) + var(--contact-form-badge-size) + (var(--contact-form-column-gap) * 2)) - 120px);

		max-width: calc(100% - 120px);
	}
}

@media (max-width: 782px) {
	.contact-form-section {
		width: 100%;
		margin-top: 70px;
		padding: 70px 0 80px;
	}

	.contact-form {
		--contact-form-badge-size: 44px;
		--contact-form-control-height: 60px;
		--contact-form-row-gap: 20px;
		--contact-form-textarea-height: 320px;
		--contact-form-submit-width: 275px;
		--contact-form-submit-height: 60px;

		display: block;
		width: calc(100vw - 40px);
		width: calc(100dvw - 40px);
		max-width: 500px;
	}

	.contact-form__row {
		display: block;
	}

	.contact-form__row + .contact-form__row {
		margin-top: var(--contact-form-row-gap);
	}

	.contact-form__label-wrap {
		display: flex;
		align-items: center;
		min-height: var(--contact-form-badge-size);
	}

	.contact-form__label {
		font-size: 16px;
		line-height: 1.4;
	}

	.contact-form__badge {
		display: inline-grid;
		width: var(--contact-form-badge-size);
		height: var(--contact-form-badge-size);
		vertical-align: top;
		font-size: 12px;
	}

	.contact-form__row:not(.contact-form__row--message) .contact-form__badge {
		transform: none;
	}

	.contact-form__row {
		display: grid;
		grid-template-columns: auto var(--contact-form-badge-size) minmax(0, 1fr);
		justify-content: stretch;
		align-items: center;
		column-gap: 20px;
	}

	.contact-form__control-wrap {
		grid-column: 1 / -1;
		width: 100%;
		margin-top: 8px;
	}

	.contact-form__control-wrap--type {
		row-gap: 16px;
	}

	.contact-form__type-options {
		min-height: 0;
	}

	.contact-form__type-options .wpcf7-radio {
		display: grid;
		grid-template-columns: repeat(2, max-content);
		gap: 8px 32px;
	}

	.contact-form__type-options label {
		gap: 6px;
		font-size: 14px;
		line-height: 1.4;
	}

	.contact-form__type-options input[type="radio"] {
		width: 13px;
		height: 13px;
	}

	.contact-form__row--message .contact-form__label-wrap,
	.contact-form__row--message .contact-form__badge {
		margin-top: 0;
	}

	.contact-form__control {
		padding-inline: 24px;
		font-size: 16px;
		line-height: 1.4;
	}

	.contact-form__textarea {
		padding-top: 16px;
	}

	.contact-form__submit-wrap {
		margin-top: 40px;
	}

	.contact-form__submit {
		margin-inline: auto;
		font-size: 16px;
	}
}

@media (max-width: 600px) {
	.contact-page .c-simple-kv {
		--simple-kv-illust-top: 12px;
		--simple-kv-illust-right: 18px;
		--simple-kv-illust-width: 73px;
	}

	.contact-form-section {
		padding: 53px 0 50px;
	}
}