/* ===============================
   standing-flow: ご相談から当日までの流れ
   =============================== */

.standing-flow {
	padding-block: var(--space-9);
	background: var(--color-bg-subtle);
}

/* ---- 見出し（飾り罫＋菱形） ---- */

.standing-flow__heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	font-size: var(--fs-h2-mobile);
	font-weight: var(--fw-medium);
	letter-spacing: 0.12em;
	line-height: var(--lh-tight);
}

.standing-flow__orn {
	flex: none;
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.standing-flow__orn::before {
	content: "";
	width: var(--space-7);
	border-top: 1px solid var(--color-accent);
}

.standing-flow__orn::after {
	content: "";
	width: var(--space-2);
	height: var(--space-2);
	border: 1px solid var(--color-accent);
	transform: rotate(45deg);
}

.standing-flow__orn--r {
	flex-direction: row-reverse;
}

/* ---- ステップカード（SP: 縦積み＋下向きシェブロン） ---- */

.standing-flow__steps {
	margin-top: var(--space-6);
	display: grid;
	gap: var(--space-7);
}

.standing-flow__step {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	background: var(--color-text-inverse);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

/* カード間の下向きシェブロン */
.standing-flow__step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(-1 * var(--space-6));
	width: var(--space-3);
	height: var(--space-3);
	border-right: 1px solid var(--color-accent);
	border-bottom: 1px solid var(--color-accent);
	transform: translateX(-50%) rotate(45deg);
}

.standing-flow__num {
	flex: none;
	display: grid;
	place-items: center;
	width: var(--space-6);
	height: var(--space-6);
	background: var(--color-accent);
	color: var(--color-text-inverse);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-medium);
	line-height: 1;
	border-radius: var(--radius-sm);
}

.standing-flow__label {
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	letter-spacing: 0.08em;
	line-height: var(--lh-tight);
}

/* ---- 金色ラインアイコン（CSS mask + currentColor） ---- */

.standing-flow__icon {
	flex: none;
	width: var(--space-7);
	height: var(--space-7);
	color: var(--color-accent);
	background-color: currentColor;
}

.standing-flow__icon--tel {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M6.8 4.2c.5-.5 1.3-.4 1.7.1l1.7 2.2c.3.5.3 1.1-.1 1.5l-1 1.1a12.8 12.8 0 0 0 5.8 5.8l1.1-1c.4-.4 1-.4 1.5-.1l2.2 1.7c.5.4.6 1.2.1 1.7l-1.2 1.2c-.5.5-1.2.7-1.9.5-5.4-1.6-9.6-5.8-11.2-11.2-.2-.7 0-1.4.5-1.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M6.8 4.2c.5-.5 1.3-.4 1.7.1l1.7 2.2c.3.5.3 1.1-.1 1.5l-1 1.1a12.8 12.8 0 0 0 5.8 5.8l1.1-1c.4-.4 1-.4 1.5-.1l2.2 1.7c.5.4.6 1.2.1 1.7l-1.2 1.2c-.5.5-1.2.7-1.9.5-5.4-1.6-9.6-5.8-11.2-11.2-.2-.7 0-1.4.5-1.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.standing-flow__icon--people {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.5 19c.6-3.2 2.8-5 5.5-5s4.9 1.8 5.5 5'/%3E%3Ccircle cx='16.8' cy='9' r='2.5'/%3E%3Cpath d='M16.3 14.3c2.3.2 3.8 1.7 4.3 4.2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.5 19c.6-3.2 2.8-5 5.5-5s4.9 1.8 5.5 5'/%3E%3Ccircle cx='16.8' cy='9' r='2.5'/%3E%3Cpath d='M16.3 14.3c2.3.2 3.8 1.7 4.3 4.2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.standing-flow__icon--doc {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h7l4 4v12H7V4Z'/%3E%3Cpath d='M14 4v4h4M10 12h5M10 15.5h5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h7l4 4v12H7V4Z'/%3E%3Cpath d='M14 4v4h4M10 12h5M10 15.5h5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.standing-flow__icon--calendar {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 2.8v4.4M16 2.8v4.4M8 14h.01M12 14h.01M16 14h.01M8 17h.01M12 17h.01'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 2.8v4.4M16 2.8v4.4M8 14h.01M12 14h.01M16 14h.01M8 17h.01M12 17h.01'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

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

	.standing-flow__heading {
		font-size: var(--fs-h2);
		gap: var(--space-4);
	}

	.standing-flow__orn::before {
		width: var(--space-11);
	}

	/* 4カード横並び＋右向きシェブロン */
	.standing-flow__steps {
		margin-top: var(--space-8);
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-8);
	}

	.standing-flow__step {
		flex-direction: column;
		justify-content: center;
		gap: var(--space-3);
		padding: var(--space-7) var(--space-4);
	}

	.standing-flow__step:not(:last-child)::after {
		left: auto;
		bottom: auto;
		top: 50%;
		right: calc(-1 * var(--space-6));
		border-right: none;
		border-bottom: none;
		border-top: 1px solid var(--color-accent);
		border-left: 1px solid var(--color-accent);
		transform: translateY(-50%) rotate(135deg);
	}

	.standing-flow__num {
		position: absolute;
		top: var(--space-3);
		left: var(--space-3);
	}

	.standing-flow__icon {
		width: var(--space-8);
		height: var(--space-8);
	}

	.standing-flow__label {
		font-size: var(--fs-body-pc);
		text-align: center;
	}
}