/* sample4: M-111（絞り込みのビュートランジション）とページの小さな補助 */
.vt-item {
	view-transition-class: s4card;
}
::view-transition-group(.s4card) {
	animation-duration: 0.45s;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(.s4card):only-child {
	animation: 0.2s ease-in both s4-vt-leave;
}
::view-transition-new(.s4card):only-child {
	animation: 0.35s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both s4-vt-enter;
}
@keyframes s4-vt-leave {
	to {
		opacity: 0;
		scale: 0.94;
	}
}
@keyframes s4-vt-enter {
	from {
		opacity: 0;
		translate: 0 16px;
	}
}
/* ページ全体のクロスフェードは出さない */
::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
}
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}