/* デモから抽出した @keyframes。値は他5ページのものを共通とする。
   トップ固有の差分（hZoom 1.11 / hFloat -12px）は page-top.css で
   sbZoomTop / sbFloatTop として別名定義する。同名の再定義は後勝ちで
   他ページに影響するため使わない。 */

@keyframes hMarq {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes hRise {
	from { transform: translateY(110%); }
	to { transform: translateY(0); }
}

@keyframes hFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes hFadeUp {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes hZoom {
	from { transform: scale(1.02); }
	to { transform: scale(1.1); }
}

@keyframes hFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@keyframes hLine {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes hClipUp {
	from { clip-path: inset(100% 0 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes hCue {
	0% { transform: translateY(-100%); }
	55% { transform: translateY(0); }
	100% { transform: translateY(100%); }
}

/* 動きを減らす設定のユーザーにはアニメーションを無効化する */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}