/* 予約成立までの流れ。本文を縮小せず、4段階をコンパクトに並べる。 */
.contact-flow {
	padding-block: var(--space-4);
}

.contact-flow__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-2);
}

.contact-flow__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}

.contact-flow__num {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-6);
	height: var(--space-6);
	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__label {
	font-size: var(--fs-body);
	line-height: var(--lh-tight);
	text-align: center;
	overflow-wrap: anywhere;
}

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

@media (min-width: 768px) {
	.contact-flow__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.contact-flow__step {
		flex-direction: row;
		justify-content: center;
	}
}