/* ===============================
   contact-flow: 予約成立までのステップ
   SP: 縦積みリスト（丸数字 + ラベル + 右へ伸びる点線）
   PC: 横一列4ステップ（点線で接続、ラベルは丸の下）
   =============================== */

.contact-flow {
	padding-block: var(--space-7);
}

.contact-flow__list {
	display: grid;
	gap: var(--space-5);
}

.contact-flow__step {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

/* 右へ伸びる点線 */
.contact-flow__step::after {
	content: "";
	flex: 1;
	border-top: 1px dashed var(--color-border);
}

.contact-flow__num {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-7);
	height: var(--space-7);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-bg);
	color: var(--color-text-muted);
	font-size: var(--fs-body);
	line-height: var(--lh-tight);
}

.contact-flow__step--current .contact-flow__num {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text-inverse);
}

.contact-flow__label {
	font-size: var(--fs-body);
	letter-spacing: 0.05em;
	line-height: var(--lh-tight);
}

.contact-flow__step--current .contact-flow__label {
	color: var(--color-text);
}

/* ===============================
   md: 768px〜（横一列・丸の下にラベル）
   =============================== */

@media (min-width: 768px) {
	.contact-flow {
		padding-block: var(--space-9);
	}

	.contact-flow__list {
		display: flex;
		gap: 0;
	}

	.contact-flow__step {
		position: relative;
		flex: 1;
		flex-direction: column;
		gap: var(--space-4);
	}

	/* 接続線: 前のステップの丸中心から自分の丸中心まで */
	.contact-flow__step::after {
		content: none;
	}

	.contact-flow__step + .contact-flow__step::before {
		content: "";
		position: absolute;
		top: var(--space-6); /* 丸(48px)の中心 */
		right: 50%;
		width: 100%;
		border-top: 1px dashed var(--color-border);
	}

	.contact-flow__num {
		position: relative;
		z-index: 1;
		width: var(--space-9);
		height: var(--space-9);
		font-size: var(--fs-body-pc);
	}

	.contact-flow__label {
		text-align: center;
	}
}