@charset "utf-8";

.key-visual-shoe {
	z-index: 0;
}

.key-visual-shoe.has-layer img {
	opacity: 0;
}

.key-visual-shoe.has-layer img:nth-child(1) {
	animation: shoe1 4s 0.4s infinite steps(1);
}

@keyframes shoe1 {
	0%, 10% { opacity: 1 }
	10%, 60% { opacity: 0 }
	70%, 80% { opacity: 1 }
	80%, 100% { opacity: 0 }
}

.key-visual-shoe.has-layer img:nth-child(2) {
	animation: shoe2 4s 0.8s infinite steps(1);
}

@keyframes shoe2 {
	0%, 10% { opacity: 1 }
	10%, 50% { opacity: 0 }
	50%, 60% { opacity: 1 }
	60%, 100% { opacity: 0 }
}

.key-visual-shoe.has-layer img:nth-child(3) {
	animation: shoe3 4s 1.2s infinite steps(1);
}

@keyframes shoe3 {
	0%, 10% { opacity: 1 }
	10%, 30% { opacity: 0 }
	30%, 40% { opacity: 1 }
	40%, 100% { opacity: 0 }
}

.key-visual-shoe.has-layer img:nth-child(4) {
	animation: shoe4 4s 1.6s infinite steps(1);
}

@keyframes shoe4 {
	0%, 20% { opacity: 1 }
	20%, 100% { opacity: 0 }
}