@charset "utf-8";

.key-visual-can-base,
.key-visual-can-water {
	z-index: 1;
}

.key-visual-can-base img {
	opacity: 0;
	animation: canBase1 5s infinite steps(1);
}

.key-visual-can-base img:nth-child(2) {
	animation: canBase2 5s infinite steps(1);
}

@keyframes canBase1 {
	0%, 10% { opacity: 1; }
	10%, 90% { opacity: 0; }
	90%, 100% { opacity: 1; }
}

@keyframes canBase2 {
	0%, 10% { opacity: 0; }
	10%, 90% { opacity: 1; }
	90%, 100% { opacity: 0; }
}

.key-visual-can-water img {
	opacity: 0;
}

.key-visual-can-water img:nth-child(1) {
	animation: canWater1 5s infinite steps(1);
}

@keyframes canWater1 {
	0%, 20% { opacity: 0; }
	20%, 50% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

.key-visual-can-water img:nth-child(2) {
	animation: canWater2 5s infinite steps(1);
}

@keyframes canWater2 {
	0%, 30% { opacity: 0; }
	30%, 60% { opacity: 1; }
	60%, 100% { opacity: 0; }
}

.key-visual-can-water img:nth-child(3) {
	animation: canWater3 5s infinite steps(1);
}

@keyframes canWater3 {
	0%, 40% { opacity: 0; }
	40%, 70% { opacity: 1; }
	70%, 100% { opacity: 0; }
}