/* ==========================================================================
   トップの Strength の図の動き（assets/js/corporate/strength.js が付けるクラス）
   - is-strength-ready: 動く前。工程の円弧と文字を薄く（0.25）、「同じ担当者が最後まで」を隠す
   - is-strength-lit: 丸が通った工程・最後の文
   - is-strength-running: 丸が回っている間
   - 動き終わったら JS がクラスと丸を外す（静止した図は project-top.css のまま）
   ========================================================================== */
.p-top-strength__cycle {
	--strength-track: 7.5%; /* 円弧の太さの半分（円弧の太さ 72px ÷ 円の直径 482px ÷ 2） */
	--strength-dot: 16px;
}

.p-top-strength__cycle.is-strength-ready .p-top-strength__step,
.p-top-strength__cycle.is-strength-ready .p-top-strength__step-label {
	opacity: 0.25;
	transition: opacity 0.4s ease-out;
}

.p-top-strength__cycle.is-strength-ready .p-top-strength__center-text {
	opacity: 0;
	transition: opacity 0.5s ease-out; /* その場でふわっと出る（浮き上がりはなし。2026-10-02 ユーザー） */
}

.p-top-strength__cycle.is-strength-ready .is-strength-lit {
	opacity: 1;
}

/*
 * 丸を載せた入れ物（円の直径の縦線。幅 0 なので、回っても円の外にはみ出さない＝横スクロールが出ない）と、
 * 丸（円弧の太さの真ん中を通る）
 */
.p-top-strength__runner {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 0;
	pointer-events: none;
}

.p-top-strength__runner-dot {
	position: absolute;
	top: var(--strength-track);
	left: 0;
	width: var(--strength-dot);
	height: var(--strength-dot);
	margin: calc(var(--strength-dot) / -2) 0 0 calc(var(--strength-dot) / -2);
	background: var(--color-bg-brand);
	border-radius: var(--radius-full);
	box-shadow:
		0 0 0 3px var(--color-bg-canvas),
		0 2px 8px rgb(21 37 48 / 0.3); /* 濃紺 #152530 の影（点いた青い円弧の上でも丸が見えるように） */
	opacity: 0;
	scale: 0.4;
	transition:
		opacity 0.3s ease-out,
		scale 0.3s ease-out;
}

.p-top-strength__cycle.is-strength-running .p-top-strength__runner-dot {
	opacity: 1;
	scale: 1;
}

@media (max-width: 767px) {
	.p-top-strength__cycle {
		--strength-track: 10%; /* SP の円弧（太さ 65px ÷ 直径 323px ÷ 2） */
		--strength-dot: 13px;
	}
}