.hcl-contact {
	width: min(var(--hcl-wrap), calc(100% - var(--hcl-gutter)));
	margin: 0 auto;
	color: var(--hcl-page-ink);
}

.hcl-contact__hero {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.hcl-contact__hero-copy {
	position: relative;
	z-index: 2;
	padding: 80px 0 48px;
}

.hcl-contact__hero-copy h1 {
	margin: 0;
	font-family: "Noto Serif JP", "Yu Mincho", serif;
	font-weight: 400;
	letter-spacing: 0.08em;
}

.hcl-contact__rule {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 280px;
	margin: 28px 0 22px;
	color: var(--hcl-page-gold);
}

.hcl-contact__rule i {
	display: block;
	width: 14px;
	height: 14px;
	border: 1px solid currentColor;
	border-radius: 50%;
	box-shadow: inset 0 0 0 3px rgba(184, 137, 50, 0.18);
}

.hcl-contact__rule span {
	display: block;
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}

.hcl-contact__hero-copy p {
	margin: 0;
	max-width: var(--hcl-body-max);
	color: var(--hcl-page-text);
	font-size: var(--hcl-body);
	letter-spacing: 0.02em;
	line-height: var(--hcl-body-lh);
}

.hcl-contact__hero-visual {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 48%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}

.hcl-contact__hero-visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 60%;
}

.hcl-contact__board {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(250px, 0.72fr);
	gap: 72px 80px;
	align-items: start;
	width: 100%;
	margin: 0 auto;
	padding: 36px 0 120px;
}

.hcl-contact__form-wrap h2 {
	margin: 0 0 40px;
	padding-left: 14px;
	border-left: 1px solid var(--hcl-page-gold);
	color: var(--hcl-page-ink);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.12em;
}

.hcl-contact__field {
	margin: 0 0 32px;
}

.hcl-contact__field label,
.hcl-contact__label {
	display: block;
	margin: 0 0 12px;
	font-size: 13px;
	letter-spacing: 0.06em;
}

.hcl-contact__field em,
.hcl-contact__field b {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 7px 0;
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	vertical-align: 1px;
}

.hcl-contact__field em {
	background: var(--hcl-page-gold);
	color: #fffaf2;
}

.hcl-contact__field b {
	background: #d8d0c4;
	color: #5c564e;
}

.hcl-contact__field input,
.hcl-contact__field select,
.hcl-contact__field textarea {
	width: 100%;
	padding: 16px 18px;
	border: 1px solid var(--hcl-page-line);
	border-radius: 0;
	background: rgba(255, 255, 255, 0.78);
	color: inherit;
	font: inherit;
	font-size: 14px;
}

.hcl-contact__field select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, #8a8176 50%), linear-gradient(135deg, #8a8176 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.hcl-contact__field textarea {
	min-height: 200px;
	resize: vertical;
}

.hcl-contact__field input:focus,
.hcl-contact__field select:focus,
.hcl-contact__field textarea:focus {
	outline: 2px solid var(--hcl-page-gold);
	outline-offset: 1px;
}

.hcl-contact__field small {
	display: block;
	margin-top: 12px;
	color: #8a8176;
	font-size: 12px;
	line-height: 1.7;
}

.hcl-contact__names {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.hcl-contact__agree {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 12px 0 40px;
	font-size: 13px;
	line-height: 1.8;
}

.hcl-contact__agree input {
	margin-top: 4px;
}

.hcl-contact__agree a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hcl-contact__actions {
	display: flex;
	justify-content: center;
	gap: 16px;
}

.hcl-contact__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: min(100%, 360px);
	min-height: 56px;
	border: 0;
	background: #8d6a2f;
	color: #fffaf2;
	font: inherit;
	font-size: 15px;
	letter-spacing: 0.08em;
	cursor: pointer;
}

.hcl-contact__submit:hover {
	background: #7a5b27;
}

.hcl-contact__back {
	min-height: 52px;
	padding: 0 22px;
	border: 1px solid var(--hcl-page-line);
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.hcl-contact__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hcl-contact__review h3,
.hcl-contact__done strong {
	display: block;
	margin: 0 0 18px;
	font-family: "Noto Serif JP", serif;
	font-size: 22px;
	font-weight: 500;
}

.hcl-contact__review dl {
	margin: 0 0 28px;
}

.hcl-contact__review dl > div {
	padding: 12px 0;
	border-bottom: 1px solid var(--hcl-page-line);
}

.hcl-contact__review dt {
	margin: 0 0 4px;
	color: var(--hcl-page-gold);
	font-size: 12px;
	letter-spacing: 0.08em;
}

.hcl-contact__review dd {
	margin: 0;
	white-space: pre-wrap;
	line-height: 1.85;
}

.hcl-contact__done p,
.hcl-contact__alert {
	color: var(--hcl-page-text);
	line-height: 1.9;
}

.hcl-contact__alert {
	margin: 0 0 22px;
	color: #9a4a32;
}

.hcl-contact__side {
	padding-left: 48px;
	border-left: 1px solid var(--hcl-page-line);
}

.hcl-contact__side section {
	margin: 0 0 44px;
}

.hcl-contact__side h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.hcl-contact__side svg {
	width: 18px;
	height: 18px;
	color: var(--hcl-page-gold);
}

.hcl-contact__side p,
.hcl-contact__side address,
.hcl-contact__side li {
	margin: 0 0 10px;
	color: var(--hcl-page-text);
	font-size: 13px;
	font-style: normal;
	line-height: 2;
}

.hcl-contact__side em,
.hcl-contact__side p span {
	color: var(--hcl-page-gold);
	font-style: normal;
}

.hcl-contact__side ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hcl-contact__shops {
	padding: 32px 28px;
	border: 1px solid rgba(184, 137, 50, 0.38);
	background:
		radial-gradient(circle at 100% 0, rgba(184, 137, 50, 0.12), transparent 42%),
		rgba(255, 252, 247, 0.7);
}

.hcl-contact__shops strong {
	display: block;
	margin: 0 0 12px;
	font-size: 15px;
	letter-spacing: 0.06em;
}

.hcl-contact__shops p {
	margin: 0 0 20px;
}

.hcl-contact__shops a {
	color: var(--hcl-page-gold);
	font-size: 13px;
	letter-spacing: 0.06em;
}

@media (max-width: 980px) {
	.hcl-contact__hero,
	.hcl-contact__board {
		width: 100%;
	}

	.hcl-contact__hero {
		display: flex;
		flex-direction: column;
	}

	.hcl-contact__hero-visual {
		position: relative;
		order: -1;
		width: 100%;
		height: 180px;
		-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
	}

	.hcl-contact__hero-copy {
		padding: 36px 0 28px;
	}

	.hcl-contact__board {
		grid-template-columns: 1fr;
		gap: 56px;
		padding: 20px 0 88px;
	}

	.hcl-contact__side {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid var(--hcl-page-line);
		padding-top: 40px;
	}

	.hcl-contact__names {
		grid-template-columns: 1fr;
	}

	.hcl-contact__submit {
		min-width: 0;
		width: 100%;
	}
}