/* =========================================================
   business-image-reveal
   BUSINESSページのメイン画像を、赤い幕の展開後に表示します。
   画像を囲む要素と赤い幕はJavaScript側で自動生成します。
   ========================================================= */

/* 対象画像だけ既存のAOSフェードインから外します。 */
.business_block > .img.is-aos-released {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	animation: none !important;
}

/* 画像へ重なるキャッチコピーは、赤い幕より手前に表示します。 */
.business_block .box {
	position: relative;
	z-index: 2;
}

.business-reveal {
	position: relative;
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	vertical-align: top;
	font-size: 0;
	line-height: 0;
	transform: none !important;
	transition: none !important;
}

/* JavaScriptが有効な場合だけ、幕が全面を覆うまで画像を隠します。 */
.business-reveal-enabled .business-reveal img {
	position: relative;
	z-index: 0;
	visibility: hidden;
	opacity: 1 !important;
	transition: none !important;
	animation: none !important;
}

.business-reveal-enabled .business-reveal.is-revealed img {
	visibility: visible;
	opacity: 1 !important;
}

/* 幕が全面を覆った瞬間に、フェードなしで画像を表示します。 */
.business-reveal-enabled .business-reveal.is-animating img {
	opacity: 1 !important;
	animation: businessImageShow 1.1s steps(1, end) forwards !important;
}

.business-reveal__curtain {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	background: var(--business-reveal-color, #b7183f);
	clip-path: inset(0 0 0 calc(100% - 40px));
	visibility: hidden;
	pointer-events: none;
	will-change: clip-path;
}

/* 展開とワイプを1本化し、つなぎ目の停止をなくします。 */
.business-reveal.is-animating .business-reveal__curtain {
	visibility: visible;
	animation: businessCurtainSequence 1.1s cubic-bezier(.77, 0, .175, 1) forwards;
}

.business-reveal.is-revealed .business-reveal__curtain {
	display: none;
}

@keyframes businessCurtainSequence {
	0% {
		clip-path: inset(0 0 0 calc(100% - 40px));
	}
	52% {
		clip-path: inset(0);
	}
	/* 全面を赤く覆った状態を少しだけ保ちます。 */
	68% {
		clip-path: inset(0);
	}
	100% {
		clip-path: inset(0 100% 0 0);
	}
}

@keyframes businessImageShow {
	0%, 51.999% {
		visibility: hidden;
	}
	52%, 100% {
		visibility: visible;
	}
}

@media (prefers-reduced-motion: reduce) {
	.business-reveal-enabled .business-reveal img {
		visibility: visible !important;
		opacity: 1 !important;
		animation: none !important;
	}

	.business-reveal__curtain {
		display: none;
	}
}