/* CONTACT — the appended form (+ その他 route + header-CTA hide) only.
 *
 * The page renders on the canon common stylesheet (template-contact.php is in
 * usohonto_lab_chrome_templates()), so the hero "Let's make it real.", the
 * 01 / CONTACT「対話の入口を、選ぶ。」heading, the four windows and the dark
 * closing quote all come from tokens.css / base.css / components.css /
 * pages.css — this file adds NO rules for them. It styles only #contact-form:
 * a form that reads as one more band of the same page — no card, no rounded
 * box, no input boxes; every control is a single hairline underline. Japanese
 * labels kept quiet in the site sans. Canon tokens only.
 */

/* the header's "Contact ↗" is redundant on this page — hide it here only */
body.uc-contact-page .header-contact { display: none; }
body.uc-contact-page .mobile-menu nav a:last-child { display: none; }

/* CONTACT-only heading tweaks (canon .section-header h2 / .contact-option h2
   are shared — scope every override to .contact-page so About / Works keep
   theirs). Font sizes only. */

/* the section header is just the "01 / CONTACT" label now (the heading and the
   sub-line were removed). Close the gap to the windows to an appropriate amount
   — canon's var(--space-24) was tuned for a header with an h2. */
.contact-page .contact-grid {
	margin-top: clamp(2rem, 4.5vw, 3rem);
}

/* the four window headings — a little smaller than canon
   (was clamp(1.8rem, 2.8vw, 3.3rem)). */
.contact-page .contact-option h2 {
	font-size: clamp(1.55rem, 2.35vw, 2.75rem);
}

/* HERO 下の本文（4カテゴリー / その他 / フォーム）を、他ページと同じ本文グリッド
   左端に揃える。section-header は 23% ガターの grid を持つので、その下の本文も
   同じ 23% に置く。canon .card-list の margin ラダーをそのまま流用（個別 margin
   は足さない・この一容器のみ）。HERO と黒ゾーンは全幅のまま。 */
.contact-page .contact-body { margin-left: 23%; }
@media (max-width: 62rem) { .contact-page .contact-body { margin-left: 22%; } }
@media (max-width: 45rem) { .contact-page .contact-body { margin-left: 0; } }

/* ── full-bleed archive photograph — between the form and the dark closing
   section. Left/right edge to edge (direct child of <main>, no .container,
   no gutter, no max-width). The file is 1800×480 (15:4) and used as delivered:
   width:100% + height:auto keeps 15:4 at every viewport width with no stretch
   and no extra crop; the width/height attrs reserve the box so nothing shifts.
   margin:0 and the dark section's lack of top margin leave no gap between the
   two. No border, radius, text, scrim, colour shift or motion. ───────────── */
.contact-photo {
	margin: 0;
	width: 100%;
}
.contact-photo img {
	display: block;
	height: auto;
	width: 100%;
}

/* ── "その他" — a small, quiet route under the 2×2 windows (the grid itself
   is untouched) ──────────────────────────────────────────────────────── */
.contact-other {
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}
.contact-other a {
	border-bottom: 1px solid currentColor;
	color: var(--color-muted);
	display: inline-flex;
	font-size: var(--text-small);
	gap: var(--space-3);
	padding-bottom: var(--space-1);
	transition: color var(--duration-fast) var(--ease);
}
.contact-other a:hover { color: var(--color-ink); }

/* ── the form as another band under the 2×2 windows ────────────────────── */
#contact-form {
	border-top: var(--border);              /* same hairline the page uses between bands */
	margin-top: clamp(3rem, 6vw, 4.5rem);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	scroll-margin-top: 6rem;                 /* land clear of the fixed header on the jump */
}
.contact-form__eyebrow {
	color: var(--color-muted);
	margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
}

.contact-slip {
	margin-left: 0;
	max-width: 40rem;
}

.contact-field {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}
.contact-field + .contact-field { margin-top: clamp(2.5rem, 5.5vw, 4rem); }

.contact-field__label {
	align-items: baseline;
	display: flex;
	gap: var(--space-4);
}
.contact-field__name {
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: 1rem;       /* 16px — the field name, a step up from the marker */
	letter-spacing: 0.04em;
}
.contact-field__req {
	color: var(--color-muted);
	font-family: var(--font-sans);
	font-size: 0.8125rem;  /* 13px — 必須 / 任意, one step down from the name */
	letter-spacing: 0.04em;
}

.contact-field__control {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--color-line);
	border-radius: 0;
	color: var(--color-ink);
	display: block;
	font: inherit;
	font-size: var(--text-body);   /* 16px */
	line-height: var(--leading-body);
	margin-top: var(--space-3);
	padding: var(--space-2) 0;
	width: 100%;
}
textarea.contact-field__control {
	min-height: 8.5rem;
	resize: vertical;
}
.contact-field__control:hover { border-bottom-color: var(--color-muted); }
.contact-field__control:focus {
	border-bottom-color: var(--color-ink);
	border-bottom-width: 2px;
	outline: none;
}
/* keyboard users keep the shared, clearly visible focus ring */
.contact-field__control:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 6px;
}

/* 相談種別 — a bare underlined select, not a boxed dropdown */
.contact-select {
	display: block;
	position: relative;
}
select.contact-field__control {
	cursor: pointer;
	font-size: 0.9375rem;   /* 15px — "選択してください" / 選択値: a touch below the text inputs */
	padding-right: 1.5rem;
}
select.contact-field__control:invalid { color: var(--color-muted); }   /* nothing chosen yet */
.contact-select::after {
	border-bottom: 1px solid var(--color-muted);
	border-right: 1px solid var(--color-muted);
	content: "";
	height: 0.45rem;
	margin-top: -0.35rem;
	pointer-events: none;
	position: absolute;
	right: 0.15rem;
	top: 50%;
	transform: rotate(45deg);
	width: 0.45rem;
}

/* honeypot — off-screen, not display:none */
.contact-hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
}

/* field-level error — beside its own control, with how to fix it. Set in the
   site accent (deep teal-green), not alarm red, to stay in the page's
   register; meaning is still carried by the text + aria-invalid. */
.contact-field__error {
	color: var(--color-accent);
	font-size: 0.875rem;   /* 14px */
	line-height: 1.5;
	margin-top: var(--space-3);
}
.contact-field--invalid .contact-field__control {
	border-bottom-color: var(--color-accent);
}

/* whole-submit failure (nonce expired, etc.) */
.contact-alert {
	border-left: 2px solid var(--color-accent);
	color: var(--color-ink);
	font-size: 0.875rem;   /* 14px */
	line-height: 1.6;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	padding-left: var(--space-4);
}

/* ── foot of the slip: data note + send ───────────────────────────────── */
.contact-slip__foot {
	display: grid;
	gap: var(--space-8);
	margin-top: clamp(2.75rem, 5.5vw, 4rem);
}
.contact-slip__note {
	color: var(--color-muted);
	font-size: 0.9375rem;   /* 15px */
	line-height: 1.7;
	margin: 0;
	max-width: 32rem;
}
.contact-send {
	align-items: center;
	align-self: start;
	background: var(--color-ink);
	color: var(--color-white);
	display: inline-flex;
	font-family: var(--font-mono);
	font-size: 0.8125rem;   /* 13px */
	gap: var(--space-8);
	letter-spacing: var(--tracking-label);
	min-height: 3.5rem;
	padding: 0 var(--space-6);
	text-transform: uppercase;
	transition:
		background var(--duration-fast) var(--ease),
		padding var(--duration-fast) var(--ease);
}
.contact-send:hover {
	background: var(--color-accent);
	padding-inline: var(--space-8);
}

/* acknowledgement — replaces the form in place after a good send */
.contact-ack { max-width: 34rem; }
.contact-ack p { line-height: var(--leading-body); margin: 0; }
.contact-ack p + p { margin-top: var(--space-4); }
.contact-ack__mark {
	color: var(--color-ink);
	font-size: clamp(1.15rem, 1.6vw, 1.45rem);
	font-weight: 440;
	letter-spacing: var(--tracking-heading);
	margin-bottom: var(--space-6) !important;
}

@media (max-width: 45rem) {
	.contact-slip,
	.contact-slip__note,
	.contact-ack { max-width: none; }
	.contact-send { justify-content: space-between; width: 100%; }
}