/**
 * ご依頼の流れ（Flow）セクション（.flow）
 * ステップ本体のスタイルは assets/css/flow-step.css（共通コンポーネント）を参照。
 * ここでは並び（グリッド）とPCのみの矢印コネクターを定義する。
 */

.flow {
	background-color: var(--color-bg);
}

.flow__inner {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

/* モバイル: 6STEPを縦並び */
.flow__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

/* デスクトップ（769px以上）: 横並び＋矢印コネクター */
@media (min-width: 769px) {
	.flow__list {
		grid-template-columns: repeat(6, 1fr);
		gap: 16px;
	}

	.flow__list .flow-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 28px;
		right: -13px;
		width: 10px;
		height: 10px;
		border-top: 2px solid var(--color-navy);
		border-right: 2px solid var(--color-navy);
		transform: rotate(45deg);
	}
}