/* ==========================================================================
   法人ページ — Component（Figma 09 Trial の「法人ページの部品」342:763）
   - c-business-marker（342:822）：調査写真の上の劣化箇所の印（青の丸の番号＋濃紺の札。飾り）
   - c-stepper-business：お問い合わせの手順（入力・確認・完了。濃紺の面の上。今の段は白い丸）
   - c-business-choice（342:853）：選択の札（チェックボックス・ラジオ。inc/forms/render.php の chip_class）。選んでいるものは濃紺＋チェック
   - 入力欄 c-business-input（342:844）・必須／任意の札 c-business-badge（342:831）は、フォームの仕組みのマークアップ（c-form-field）に
     project-contact.css で同じ見た目を当てている
   ========================================================================== */

/* ---------- c-business-marker ---------- */
.c-business-marker {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
}

.c-business-marker__no {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font: var(--text-en-label);
	letter-spacing: var(--ls-en-label);
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand);
	border: 2px solid var(--color-text-on-brand);
	border-radius: var(--radius-full);
}

.c-business-marker__label {
	padding: var(--space-2xs) var(--space-xs);
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
	color: var(--color-text-on-brand);
	white-space: nowrap;
	background: var(--color-bg-inverse-deep);
	border-radius: var(--radius-sm);
}

/* ---------- c-stepper-business ---------- */
.c-stepper-business {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.c-stepper-business__item {
	display: flex;
	align-items: center;
	gap: 10px; /* Figma の値 */
	color: var(--color-text-on-brand-muted);
}

.c-stepper-business__item + .c-stepper-business__item::before {
	width: 40px;
	height: 1px;
	margin-right: 2px; /* 線と丸のあいだ（10 − gap 12 + 線のまわりの 12 にそろえる） */
	content: "";
	background: var(--color-border-on-inverse-strong);
}

.c-stepper-business__no {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font: var(--text-en-label);
	letter-spacing: var(--ls-en-label);
	border: 1.5px solid var(--color-border-on-inverse-strong);
	border-radius: var(--radius-full);
}

.c-stepper-business__label {
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	white-space: nowrap;
}

.c-stepper-business__item.is-current,
.c-stepper-business__item.is-done {
	color: var(--color-text-on-brand);
}

.c-stepper-business__item.is-current .c-stepper-business__no {
	color: var(--color-text-navy);
	background: var(--color-bg-canvas);
	border-color: var(--color-bg-canvas);
}

.c-stepper-business__item.is-done .c-stepper-business__no {
	border-color: var(--color-text-on-brand);
}

/* ---------- c-business-choice（チェックボックス・ラジオの札） ---------- */
.c-business-choice {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	min-height: 45px; /* Figma：押せる高さ 45 */
	padding: var(--space-sm) var(--space-md);
	font: var(--text-label-m);
	letter-spacing: var(--ls-label-m);
	color: var(--color-text-primary);
	cursor: pointer;
	background: var(--color-bg-canvas);
	border: 1px solid var(--color-border-input);
	border-radius: var(--radius-sm);
}

/* 本物の入力欄は見えないように重ねる（キーボード・読み上げはこれを使う） */
.c-business-choice__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	opacity: 0;
}

/* 四角の箱（選ぶとチェック。色だけでなく形でも分かる） */
.c-business-choice__label::before {
	display: inline-block;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-right: var(--space-xs);
	vertical-align: -3px;
	content: "";
	background: var(--color-bg-canvas) center / 14px no-repeat;
	border: 1.5px solid var(--color-border-input);
	border-radius: var(--radius-sm);
}

.c-business-choice:has(:checked),
.c-business-choice.is-checked {
	color: var(--color-text-on-brand);
	background: var(--color-bg-inverse);
	border-color: var(--color-bg-inverse);
}

.c-business-choice:has(:checked) .c-business-choice__label::before,
.c-business-choice.is-checked .c-business-choice__label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e3340'%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"); /* c-icon/check（濃紺） */
	border-color: var(--color-bg-canvas);
}

.c-business-choice:has(:focus-visible) {
	outline: 3px solid var(--color-border-brand);
	outline-offset: 2px;
}

@media (hover: hover) {
	.c-business-choice:not(:has(:checked)):hover {
		border-color: var(--color-text-navy);
	}
}

/* ---------- SP（間の線を 24 に縮めて1行に収める。Figma 364:779） ---------- */
@media (max-width: 767px) {
	.c-stepper-business__item + .c-stepper-business__item::before {
		width: 24px;
	}
}

/* 幅の狭い SP（374px 以下）は、線と間をさらに詰める */
@media (max-width: 374px) {
	.c-stepper-business,
	.c-stepper-business__item {
		gap: 6px;
	}

	.c-stepper-business__item + .c-stepper-business__item::before {
		width: 12px;
		margin-right: 0;
	}
}