.contact-concept-page {
	background: var(--surface-alt);
}

.contact-concept-hero {
	position: relative;
	overflow: hidden;
	min-height: clamp(520px, 42vw, 650px);
	background: var(--surface-dark);
	color: var(--on-dark);
}

.contact-concept-hero-inner {
	display: grid;
	grid-template-columns: minmax(360px, 0.82fr) minmax(0, 1.18fr);
	min-height: inherit;
}

.contact-concept-hero-copy {
	position: relative;
	z-index: 2;
	align-self: center;
	padding-block: clamp(86px, 10vw, 144px);
}

.contact-concept-hero-en {
	margin: 0;
	font: 700 clamp(5.4rem, 8.6vw, 8.2rem) / 0.84 var(--font-en);
	letter-spacing: 0;
	white-space: nowrap;
}

.contact-concept-hero h1 {
	margin: clamp(30px, 3vw, 46px) 0 0;
	font-size: clamp(2.1rem, 3vw, 3.4rem);
	line-height: 1.25;
}

.contact-concept-hero-accent {
	display: block;
	width: 72px;
	height: 3px;
	margin-top: clamp(24px, 2.5vw, 36px);
	background: var(--green);
}

.contact-concept-symbol {
	position: relative;
	min-width: 0;
	min-height: inherit;
}

.contact-concept-symbol-letter {
	position: absolute;
	top: 50%;
	right: clamp(-54px, -3vw, -22px);
	font: 700 clamp(25rem, 40vw, 38rem) / 0.78 var(--font-en);
	color: transparent;
	-webkit-text-stroke: 1px var(--line-dark);
	transform: translateY(-46%);
}

.contact-concept-symbol-rule {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: clamp(68px, 6.2vw, 94px);
	background: var(--green);
	transform: translateY(-50%);
}

.contact-concept-symbol-rule::after {
	content: "";
	position: absolute;
	top: 50%;
	right: clamp(22px, 3vw, 42px);
	width: 16px;
	height: 16px;
	background: var(--surface-dark);
	transform: translateY(-50%);
}

.contact-concept-symbol-node {
	position: absolute;
	right: 3%;
	width: 14px;
	height: 14px;
	background: var(--on-dark);
}

.contact-concept-symbol-node-a {
	top: 24%;
}

.contact-concept-symbol-node-c {
	top: 73%;
}

.contact-concept-label {
	margin: 0;
	font: 600 var(--label) / 1.2 var(--font-en);
	letter-spacing: 0.08em;
	color: var(--green-deep);
}

.contact-concept-form-head h2 {
	margin: 24px 0 0;
	font-size: clamp(2.4rem, 3.5vw, 3.9rem);
	line-height: 1.28;
}

.contact-concept-form-head h2 span {
	display: block;
	white-space: nowrap;
}

.contact-concept-form-section {
	padding-block: clamp(96px, 11vw, 168px);
	background: var(--surface-alt);
}

.contact-concept-form-layout {
	display: grid;
	grid-template-columns: minmax(260px, 0.66fr) minmax(0, 1.34fr);
	gap: clamp(72px, 11vw, 168px);
}

.contact-concept-form-head {
	position: sticky;
	top: 120px;
	align-self: start;
}

.contact-concept-form-head > p:not(.contact-concept-label) {
	max-width: 28rem;
	margin: 34px 0 0;
	font-size: 15px;
	line-height: 2;
	color: var(--ink-soft);
}

.contact-concept-response-note {
	margin-top: clamp(56px, 7vw, 96px);
	padding-top: 22px;
	border-top: 1px solid var(--line-strong);
}

.contact-concept-response-note .contact-concept-response-label {
	margin: 0 0 12px;
	font: 600 11px / 1 var(--font-en);
	letter-spacing: 0.08em;
	color: var(--ink);
}

.contact-concept-response-note p:last-child {
	margin: 0;
	font-size: 13px;
	line-height: 1.9;
	color: var(--ink-faint);
}

.contact-concept-form {
	border-top: 1px solid var(--ink);
}

.contact-form-host {
	min-width: 0;
}

.contact-form-host .wpcf7-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-form-host .wpcf7-form > p {
	min-width: 0;
	margin: 0;
	padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.4vw, 30px);
	border-bottom: 1px solid var(--line-strong);
}

.contact-form-host .wpcf7-form > p:first-of-type,
.contact-form-host .wpcf7-form > p:nth-of-type(n + 4) {
	grid-column: 1 / -1;
}

.contact-form-host .wpcf7-form > p:nth-of-type(3) {
	border-left: 1px solid var(--line-strong);
}

.contact-form-host .wpcf7-form > p:nth-last-of-type(2) {
	padding-block: 20px;
}

.contact-form-host .wpcf7-form > p:last-of-type {
	padding: 20px 0 0;
	border-bottom: 0;
}

.contact-form-host .wpcf7-form label {
	display: grid;
	gap: 16px;
	font-size: 14px;
	font-weight: 700;
}

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

.contact-form-host :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
	width: 100%;
	padding: 15px 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	font: 500 16px / 1.6 var(--font-jp);
}

.contact-form-host textarea {
	min-height: 120px;
	resize: vertical;
}

.contact-form-host input[type="submit"] {
	width: 100%;
	min-height: 68px;
	margin-top: 0;
	padding-inline: 30px;
	border: 0;
	border-radius: 0;
	background: var(--surface-dark);
	color: var(--on-dark);
	font: 700 15px / 1.4 var(--font-jp);
	cursor: pointer;
}

.contact-form-host .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.contact-form-host .wpcf7-acceptance label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.6;
	cursor: pointer;
}

.contact-form-host .wpcf7-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--green-deep);
}

.contact-form-host .wpcf7-acceptance .wpcf7-list-item-label {
	display: inline;
}

.contact-form-host .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 24px 0 0;
	padding: 16px 18px;
	border: 1px solid var(--line-strong);
	font-size: 14px;
	line-height: 1.8;
}

.contact-form-host .wpcf7-not-valid-tip {
	display: block;
	margin-top: 8px;
	color: var(--error);
	font-size: 12px;
}

.contact-form-placeholder {
	min-height: 340px;
	padding: clamp(38px, 5vw, 70px) clamp(20px, 3vw, 42px);
	border-bottom: 1px solid var(--line-strong);
}

.contact-form-placeholder-title {
	margin: 0;
	font-size: clamp(1.4rem, 2vw, 2rem);
	font-weight: 700;
	line-height: 1.6;
}

.contact-form-placeholder > p:not(.contact-form-placeholder-title) {
	max-width: 36rem;
	margin: 18px 0 0;
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 2;
}

.contact-form-placeholder .contact-form-placeholder-admin {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	color: var(--ink-faint);
	font-size: 12px;
}

.contact-concept-form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-concept-form-row .contact-concept-field + .contact-concept-field {
	border-left: 1px solid var(--line);
}

.contact-concept-field {
	padding: clamp(28px, 3.4vw, 44px) clamp(20px, 3vw, 42px);
	border-bottom: 1px solid var(--line-strong);
}

.contact-concept-field label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: 700;
}

.contact-concept-field label span,
.contact-concept-field label em {
	font: 600 10px / 1 var(--font-jp);
	font-style: normal;
	letter-spacing: 0;
}

.contact-concept-field label span {
	color: var(--green-deep);
}

.contact-concept-field label em {
	color: var(--ink-faint);
}

.contact-concept-field input,
.contact-concept-field select,
.contact-concept-field textarea {
	width: 100%;
	padding: 15px 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	font: 500 16px / 1.6 var(--font-jp);
}

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

.contact-concept-consent {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 30px 0 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--ink-soft);
	cursor: pointer;
}

.contact-concept-consent input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	accent-color: var(--green-deep);
}

.contact-concept-consent a {
	color: var(--ink);
	font-weight: 700;
	text-underline-offset: 0.24em;
}

.contact-concept-submit {
	display: grid;
	grid-template-columns: 1fr 76px;
	align-items: center;
	width: 100%;
	min-height: 84px;
	margin-top: 34px;
	padding: 0 0 0 30px;
	border: 0;
	border-radius: 0;
	background: var(--surface-dark);
	color: var(--on-dark);
	font: 700 15px / 1.4 var(--font-jp);
	text-align: left;
	cursor: pointer;
	overflow: hidden;
}

.contact-concept-submit-arrow {
	display: grid;
	place-items: center;
	align-self: stretch;
	background: var(--green);
	color: var(--green-ink);
	font: 600 22px / 1 var(--font-en);
	transition: transform 0.25s var(--ease);
}

.contact-concept-submit:hover .contact-concept-submit-arrow {
	transform: translateX(5px);
}

@media (max-width: 1040px) {
	.contact-concept-hero-inner {
		grid-template-columns: minmax(300px, 0.88fr) minmax(0, 1.12fr);
	}

	.contact-concept-form-layout {
		grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr);
		gap: 64px;
	}
}

@media (max-width: 760px) {
	.contact-concept-hero {
		min-height: 500px;
	}

	.contact-concept-hero-inner {
		grid-template-columns: 1fr;
	}

	.contact-concept-hero-copy {
		align-self: end;
		padding-block: 84px 72px;
	}

	.contact-concept-hero-en {
		font-size: clamp(4.5rem, 23vw, 6rem);
	}

	.contact-concept-hero h1 {
		font-size: 2.2rem;
	}

	.contact-concept-symbol {
		position: absolute;
		inset: 0 0 0 42%;
	}

	.contact-concept-symbol-letter {
		right: -88px;
		font-size: 23rem;
	}

	.contact-concept-symbol-rule {
		left: 25%;
		height: 54px;
		top: 37%;
	}

	.contact-concept-symbol-node-a,
	.contact-concept-symbol-node-c {
		display: none;
	}
	.contact-concept-form-layout {
		grid-template-columns: 1fr;
		gap: 54px;
	}

	.contact-concept-form-head h2 {
		font-size: 2.55rem;
	}

	.contact-concept-form-head {
		position: static;
	}

	.contact-form-host .wpcf7-form {
		grid-template-columns: 1fr;
	}

	.contact-form-host .wpcf7-form > p,
	.contact-form-host .wpcf7-form > p:first-of-type,
	.contact-form-host .wpcf7-form > p:nth-of-type(n + 4) {
		grid-column: 1;
		padding: 16px 0;
	}

	.contact-form-host .wpcf7-form label {
		gap: 10px;
	}

	.contact-form-host :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
		padding-block: 10px;
	}

	.contact-form-host textarea {
		min-height: 100px;
	}

	.contact-form-host .wpcf7-form > p:nth-of-type(3) {
		border-left: 0;
	}

	.contact-form-host .wpcf7-form > p:last-of-type {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.contact-concept-response-note {
		margin-top: 42px;
	}

	.contact-concept-form-row {
		grid-template-columns: 1fr;
	}

	.contact-concept-form-row .contact-concept-field + .contact-concept-field {
		border-left: 0;
	}

	.contact-concept-field {
		padding-inline: 0;
	}

	.contact-concept-submit {
		grid-template-columns: 1fr 68px;
		padding-left: 22px;
	}
}

@media (max-width: 460px) {
	.contact-concept-hero-en {
		font-size: 4.35rem;
	}

	.contact-concept-hero h1 {
		font-size: 2rem;
	}

	.contact-concept-form-head h2 {
		font-size: 2.1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.contact-concept-submit-arrow {
		transition: none;
	}
}