/* ==========================================================================
   法人向けのお問い合わせ /business/contact/・/business/contact/thanks/（page-business-contact.php）
   Figma 09 Trial 342:765（入力。注記 353:1263）。確認・完了は Figma に画面がないので、塗装・防水のお問い合わせと同じ形を法人ページの見た目で
   - フォームのマークアップは inc/forms/render.php（c-form-field・c-checkbox・c-form-errors）。ここで .p-business-contact の中だけ、
     Figma の c-business-input（入力欄）・c-business-badge（必須・任意の札）の見た目にする。選択の札は component.css の c-business-choice
   ========================================================================== */

.p-business-contact {
	--contact-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666d79'%3E%3Cpath d='M5.3 8.3a1 1 0 0 1 1.4 0L12 13.6l5.3-5.3a1 1 0 1 1 1.4 1.4l-6 6a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E"); /* c-icon/chevron-down */
	--contact-icon-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3340' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' x2='12' y1='3' y2='15'/%3E%3C/svg%3E"); /* c-icon/upload */
	--contact-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20.7 5.3a1 1 0 0 1 0 1.4l-11 11a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.4L9 15.6 19.3 5.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E");
}

/* ---------- 見出し（濃紺の面）：パンくず・h1・リード・手順 ---------- */
.p-business-contact__head {
	--focus-color: var(--neutral-0);
	padding-block: 56px var(--space-4xl); /* 上 56 は Figma の値 */
	color: var(--color-text-on-brand);
	background: var(--color-bg-inverse);
}

.p-business-contact__head .l-container {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

.p-business-contact__head-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-lg) var(--space-2xl);
}

.p-business-contact__head-text {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.p-business-contact__title {
	font: var(--text-h1);
	letter-spacing: var(--ls-h1);
}

.p-business-contact__lead {
	max-width: 560px;
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-on-brand-muted);
}

/* ---------- 本文（淡いグレー）：左にフォーム、右に案内 ---------- */
.p-business-contact__body {
	padding-block: var(--space-5xl) var(--space-6xl);
	background: var(--color-bg-subtle);
}

.p-business-contact__layout {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3xl);
}

.p-business-contact__form {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-4xl);
	min-width: 0;
	padding: 56px; /* Figma の値 */
	background: var(--color-bg-canvas);
	border-radius: var(--radius-sm);
}

.p-business-contact__group {
	display: flex;
	flex-direction: column;
	gap: 28px; /* Figma の値 */
}

.p-business-contact__group-head {
	padding-bottom: var(--space-sm);
	font: var(--text-h3);
	letter-spacing: var(--ls-h3);
	color: var(--color-text-navy);
	border-bottom: 2px solid var(--color-bg-inverse);
}

.p-business-contact__row {
	display: flex;
	gap: var(--space-lg);
}

.p-business-contact__row > .c-form-field {
	flex: 1 1 0;
	min-width: 0;
}

/* ---------- 項目（c-form-field） ---------- */
.p-business-contact .c-form-field {
	display: flex;
	flex-direction: column;
	gap: 10px; /* Figma の値 */
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.p-business-contact .c-form-field__label-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs) var(--space-xs);
	padding: 0;
}

.p-business-contact .c-form-field__label {
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
	color: var(--color-text-primary);
}

/* 必須・任意の札（c-business-badge。色だけでなく文字で区別） */
.p-business-contact .c-form-field__badge {
	padding: var(--space-2xs) var(--space-xs);
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	white-space: nowrap;
	border-radius: var(--radius-sm);
}

.p-business-contact .c-form-field__badge--required {
	color: var(--color-text-on-brand);
	background: var(--color-bg-inverse);
}

.p-business-contact .c-form-field__badge--optional {
	color: var(--color-text-secondary);
	background: var(--color-bg-canvas);
	box-shadow: inset 0 0 0 1px var(--color-border-input);
}

.p-business-contact .c-form-field__label-note,
.p-business-contact .c-form-field__note,
.p-business-contact .c-form-field__chosen {
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
	color: var(--color-text-secondary);
}

/* 入力欄（c-business-input。白地・枠 color/border/input・角4・高さ 52。フォーカスは TRUSS ブルー 2px） */
.p-business-contact .c-form-field__field {
	display: block;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 0 var(--space-md);
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-primary);
	background: var(--color-bg-canvas);
	border: 1px solid var(--color-border-input);
	border-radius: var(--radius-sm);
	appearance: none;
}

.p-business-contact .c-form-field__field::placeholder {
	color: var(--color-text-tertiary);
	opacity: 1;
}

.p-business-contact .c-form-field__field:focus {
	border-color: var(--color-border-brand);
	box-shadow: inset 0 0 0 1px var(--color-border-brand);
}

.p-business-contact .c-form-field__field:focus-visible {
	outline: none;
}

.p-business-contact textarea.c-form-field__field {
	height: 200px;
	padding-block: var(--space-sm);
	resize: vertical;
}

.p-business-contact select.c-form-field__field {
	padding-right: 44px;
	background: var(--color-bg-canvas) var(--contact-icon-chevron) right 16px center / 20px no-repeat;
}

.p-business-contact input[type="date"].c-form-field__field {
	display: flex;
	align-items: center;
}

.p-business-contact input[type="date"].c-form-field__field::-webkit-calendar-picker-indicator {
	width: 20px;
	height: 20px;
	cursor: pointer;
	opacity: 0.7;
}

.p-business-contact .c-form-field.is-error .c-form-field__field {
	border-color: var(--color-action-cta);
	box-shadow: inset 0 0 0 1px var(--color-action-cta);
}

/* 単位（年・階建て・戸・棟） */
.p-business-contact .c-form-field__unit-row {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.p-business-contact .c-form-field__unit {
	flex-shrink: 0;
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-primary);
}

.p-business-contact__short .c-form-field__field {
	width: 160px;
}

/* 選択の札（c-business-choice）の並び */
.p-business-contact .c-form-field__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.p-business-contact .c-form-field.is-error .c-business-choice {
	border-color: var(--color-action-cta);
}

/* エラー */
.p-business-contact .c-form-field__error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-cta);
}

.p-business-contact .c-form-field__error-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	font-size: 12px;
	line-height: 1;
	color: var(--color-text-on-brand);
	background: var(--color-action-cta);
	border-radius: var(--radius-full);
}

.p-business-contact .c-form-errors {
	padding: 20px var(--space-lg);
	color: var(--color-text-cta);
	background: var(--color-bg-canvas);
	border: 2px solid var(--color-action-cta);
	border-radius: var(--radius-sm);
}

.p-business-contact .c-form-errors__title {
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
}

.p-business-contact .c-form-errors__list {
	margin-top: var(--space-xs);
	padding-left: 1.2em;
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	list-style: disc;
}

.p-business-contact .c-form-errors__item a {
	color: inherit;
}

/* ---------- ご相談の希望日時（第1〜第3希望の行。欄の名前は読み上げだけ） ---------- */
.p-business-contact__dates {
	gap: var(--space-sm);
}

.p-business-contact__date {
	display: flex;
	align-items: flex-start;
	gap: var(--space-md);
}

.p-business-contact__date-label {
	flex: 0 0 64px;
	align-self: center;
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-primary);
}

.p-business-contact .p-business-contact__date-field {
	flex: 1 1 0;
}

.p-business-contact .p-business-contact__time-field {
	flex: 0 0 220px;
}

.p-business-contact .is-label-hidden > .c-form-field__label-row {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
}

/* ---------- 資料の添付：破線の箱にファイルの入力欄を透明にして重ねる（選んだファイルは business-contact.js が下に並べる） ---------- */
.p-business-contact .c-form-field--file {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.p-business-contact .c-form-field--file > .c-form-field__label-row {
	grid-row: 1;
}

.p-business-contact .c-form-field--file > .c-form-field__files {
	grid-row: 2;
}

.p-business-contact .c-form-field__file-input,
.p-business-contact .c-form-field__meta {
	grid-row: 3;
	grid-column: 1;
}

.p-business-contact .c-form-field__file-input {
	z-index: 1;
	width: 100%;
	height: 100%;
	cursor: pointer;
	opacity: 0;
}

.p-business-contact .c-form-field__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px; /* Figma の値 */
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-navy);
	border: 1px dashed var(--color-border-input);
	border-radius: var(--radius-sm);
}

.p-business-contact .c-form-field__meta::before {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	content: "";
	background: var(--contact-icon-upload) center / contain no-repeat;
}

.p-business-contact .c-form-field--file:hover .c-form-field__meta {
	background: var(--color-bg-subtle);
}

.p-business-contact .c-form-field__file-input:focus-visible + .c-form-field__meta {
	outline: 3px solid var(--color-border-brand);
	outline-offset: 3px;
}

.p-business-contact .c-form-field__chosen {
	grid-row: 4;
}

.p-business-contact .c-form-field--file > .c-form-field__note {
	grid-row: 5;
}

.p-business-contact .c-form-field--file > .c-form-field__error {
	grid-row: 6;
}

/* 選んだファイル・受け取り済みのファイル（1つずつ取り消せる） */
.p-business-contact .c-form-field__files,
.p-business-contact__chosen-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.p-business-contact .c-form-field__file,
.p-business-contact__chosen-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2xs) var(--space-md);
	min-height: 44px;
	padding: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-md);
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-primary);
	background: var(--color-bg-subtle);
	border-radius: var(--radius-sm);
}

.p-business-contact .c-form-field__file-name,
.p-business-contact__chosen-name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.p-business-contact .c-form-field__file-remove,
.p-business-contact__chosen-remove {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	min-height: 36px;
	padding: 0 var(--space-sm);
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-navy);
	cursor: pointer;
	background: var(--color-bg-canvas);
	border: 1px solid var(--color-border-input);
	border-radius: var(--radius-sm);
}

/* ---------- 同意と送るボタン ---------- */
.p-business-contact__submit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xl);
	padding-top: var(--space-2xl);
	border-top: 1px solid var(--color-border-default);
}

.p-business-contact .c-form-field--agree {
	display: grid;
	grid-template-columns: minmax(0, max-content) max-content;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
}

.p-business-contact .c-form-field--agree > .c-form-field__note,
.p-business-contact .c-form-field--agree > .c-form-field__error {
	grid-column: 1 / -1;
	contain: inline-size;
}

.p-business-contact .c-checkbox {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	min-height: 44px;
	cursor: pointer;
}

.p-business-contact .c-checkbox__input {
	position: absolute;
	top: 50%;
	left: 0;
	width: 22px;
	height: 22px;
	margin: 0;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-50%);
}

.p-business-contact .c-checkbox__box {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: var(--color-bg-canvas);
	border: 1.5px solid var(--color-border-input);
	border-radius: var(--radius-sm);
}

.p-business-contact .c-checkbox__input:checked + .c-checkbox__box {
	background: var(--color-bg-inverse) var(--contact-icon-check) center / 16px no-repeat;
	border-color: var(--color-bg-inverse);
}

.p-business-contact .c-checkbox__input:focus-visible + .c-checkbox__box {
	outline: 3px solid var(--color-border-brand);
	outline-offset: 3px;
}

.p-business-contact .c-form-field.is-error .c-checkbox__box {
	border-color: var(--color-action-cta);
}

.p-business-contact .c-checkbox__label {
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
	color: var(--color-text-primary);
}

.p-business-contact .c-checkbox__label a {
	color: var(--color-text-brand);
	text-underline-offset: 0.2em;
}

.p-business-contact__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-md);
}

/* ---------- 右の案内 ---------- */
.p-business-contact__aside {
	display: flex;
	flex: 0 0 360px;
	flex-direction: column;
	gap: var(--space-lg);
	min-width: 0;
}

.p-business-contact__tel {
	--focus-color: var(--neutral-0);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--space-xl);
	color: var(--color-text-on-brand);
	background: var(--color-bg-inverse);
	border-radius: var(--radius-sm);
}

.p-business-contact__tel-label {
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-on-brand-muted);
}

.p-business-contact__tel-number {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font: var(--text-en-h3);
	letter-spacing: var(--ls-en-h3);
	color: inherit;
	white-space: nowrap;
	text-decoration: none;
}

.p-business-contact__tel-hours {
	font: var(--text-caption);
	letter-spacing: var(--ls-caption);
	color: var(--color-text-on-brand-muted);
}

.p-business-contact__guide {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	padding: var(--space-xl);
	background: var(--color-bg-canvas);
	border-radius: var(--radius-sm);
}

.p-business-contact__guide-head {
	padding-bottom: var(--space-sm);
	font: var(--text-h4);
	letter-spacing: var(--ls-h4);
	color: var(--color-text-navy);
	border-bottom: 2px solid var(--color-bg-inverse);
}

.p-business-contact__flow-step {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding-block: var(--space-sm);
	font: var(--text-body-bold);
	letter-spacing: var(--ls-body-bold);
	color: var(--color-text-primary);
}

.p-business-contact__flow-step + .p-business-contact__flow-step {
	border-top: 1px solid var(--color-border-default);
}

.p-business-contact__flow-no {
	flex-shrink: 0;
	font: var(--text-en-h3);
	letter-spacing: var(--ls-en-h3);
	color: var(--color-text-brand);
}

.p-business-contact__note {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border-default);
}

.p-business-contact__note-title {
	font: var(--text-h5);
	letter-spacing: var(--ls-h5);
	color: var(--color-text-navy);
}

.p-business-contact__note-text {
	font: var(--text-body-s);
	letter-spacing: var(--ls-body-s);
	color: var(--color-text-secondary);
}

@media (hover: hover) {
	.p-business-contact__tel-number:hover {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}
}

/* ---------- 確認・完了（白い面） ---------- */
.p-business-contact__panel {
	max-width: 880px;
	margin-inline: auto;
	padding: 56px;
	background: var(--color-bg-canvas);
	border-radius: var(--radius-sm);
}

.p-business-contact__confirm-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
}

.p-business-contact__confirm-lead {
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-secondary);
}

.p-business-contact__table {
	border-top: 2px solid var(--color-bg-inverse);
}

.p-business-contact__table-row {
	display: flex;
	gap: var(--space-lg);
	padding-block: var(--space-md);
	border-bottom: 1px solid var(--color-border-default);
}

.p-business-contact__table-label {
	flex: 0 0 200px;
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
	color: var(--color-text-navy);
}

.p-business-contact__table-value {
	flex: 1;
	min-width: 0;
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-primary);
	overflow-wrap: anywhere;
}

/* 主のボタン（送信する）を先に書いて、PC は右に（Tab の順は送信するが先） */
.p-business-contact__actions--confirm {
	flex-direction: row-reverse;
}

.p-business-contact__done {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-lg);
	text-align: center;
}

.p-business-contact__done-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	color: var(--color-text-on-brand);
	background: var(--color-bg-inverse);
	border-radius: var(--radius-full);
}

.p-business-contact__done-title {
	font: var(--text-h2);
	letter-spacing: var(--ls-h2);
	color: var(--color-text-navy);
}

.p-business-contact__done-text {
	font: var(--text-body);
	letter-spacing: var(--ls-body);
	color: var(--color-text-secondary);
}

.p-business-contact__actions--done {
	margin-top: var(--space-md);
}

/* ---------- 1199px 以下（仮） ---------- */
@media (max-width: 1199px) {
	.p-business-contact__layout {
		flex-direction: column;
		align-items: stretch;
	}

	.p-business-contact__aside {
		flex-basis: auto;
	}
}

/* ---------- SP（767px 以下。Figma 364:766・注記 364:1114） ---------- */
@media (max-width: 767px) {
	.p-business-contact__head {
		padding-block: var(--space-2xs) var(--space-2xl);
	}

	.p-business-contact__head .l-container {
		gap: var(--space-md);
	}

	.p-business-contact__head-row {
		flex-direction: column;
		align-items: stretch;
	}

	.p-business-contact__head-text {
		gap: var(--space-sm);
	}

	/* フォームの白い面は画面の幅いっぱい（内側の左右 20）。電話の箱とご相談の流れはその下に */
	.p-business-contact__body {
		padding-block: 0 var(--space-4xl);
	}

	.p-business-contact__body > .l-container {
		padding-inline: 0;
	}

	.p-business-contact__layout {
		gap: var(--space-2xl);
	}

	.p-business-contact__form,
	.p-business-contact__panel {
		gap: var(--space-2xl);
		padding: var(--space-2xl) 20px;
		border-radius: 0;
	}

	.p-business-contact__aside {
		padding-inline: 20px;
	}

	.p-business-contact__tel,
	.p-business-contact__guide {
		padding: var(--space-lg) 20px;
	}

	.p-business-contact__group {
		gap: var(--space-lg);
	}

	.p-business-contact__row {
		flex-direction: column;
		gap: var(--space-lg);
	}

	/* 数の欄（築年数・階数・戸数・管理物件数）は幅 120＋単位 */
	.p-business-contact .c-form-field__unit-row .c-form-field__field,
	.p-business-contact__short .c-form-field__field {
		width: 120px;
	}

	/* ご相談の希望日時：ラベルの下に日付と時間帯を横に2つ */
	.p-business-contact__date {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-xs) var(--space-xs);
	}

	.p-business-contact__date-label {
		grid-column: 1 / -1;
		align-self: start;
	}

	.p-business-contact .p-business-contact__date-field,
	.p-business-contact .p-business-contact__time-field {
		flex-basis: auto;
	}

	.p-business-contact select.c-form-field__field {
		padding-right: 36px;
		background-position: right 10px center;
	}

	.p-business-contact .c-form-field--agree {
		justify-content: start;
	}

	.p-business-contact__table-row {
		flex-direction: column;
		gap: var(--space-2xs);
	}

	.p-business-contact__table-label {
		flex-basis: auto;
	}

	.p-business-contact__actions,
	.p-business-contact__actions--confirm {
		flex-direction: column;
		align-items: stretch;
		align-self: stretch;
	}

	.p-business-contact__panel {
		margin-inline: 0;
	}
}