/*-----------------------------------------------------*/
/* MV
/*-----------------------------------------------------*/
/* ボールの挙動 */
.animation-zoomIn {
    animation: zoomIn 1s cubic-bezier(0.1, 0.85, 0.25, 1) forwards;
    will-change: transform, opacity;
}
@keyframes zoomIn {
    0% {
        transform: translate(-100vw, -100vh) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(0, 0) scale(0.7);
        opacity: 0.9;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
}
@media screen and (max-width: 800px) {
	@keyframes zoomIn {
		0% {
			transform: translate(-100vw, -150vh) scale(0);
			opacity: 0;
		}
		50% {
			transform: translate(-50%, -50%) scale(0.7);
			opacity: 0.9;
		}
		100% {
			transform: translate(-50%, -50%) scale(1);
			opacity: 1;
		}
	}
}
/* 「来場スタンプ」「キャンペーン」 */
.animation-scaleFirst {
    animation: scale 1s cubic-bezier(0.1, 0.85, 0.25, 1) 1s both;
    will-change: transform, opacity;
}
/* 「最大2000円分クーポンプレゼント」 */
.animation-scaleNext {
    animation: scale 1.1s cubic-bezier(0.1, 0.85, 0.25, 1) 2s both;
    will-change: transform, opacity;
}
@keyframes scale {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
}
/* 「期間」 */
.animation-fadeIn {
	animation: fadeIn 0.5s ease-in-out 1.2s both;
    will-change: transform, opacity;
}
@keyframes fadeIn {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

/*-----------------------------------------------------*/
/* STEP
/*-----------------------------------------------------*/
/* 背景の雲（左） */
.animation-float {
	animation: float 5s ease-in-out infinite;
}
@keyframes float {
	0% {
		transform: translateY(-15%);
	}
	50% {
		transform: translateY(15%);
	}
	100% {
		transform: translateY(-15%);
	}
}
/* 背景の雲（右） */
.animation-float-delay {
	transform: translateY(0);
	animation: float-delay 5s ease-in-out 2s infinite;
}
@keyframes float-delay {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(15%);
	}
	100% {
		transform: translateY(0);
	}
}
/* 背景の雲（下） */
.animation-move {
	animation: move 150s linear infinite;
}
@keyframes move {
    0% {
        transform: translateX(0) translateY(0);
    }
    20% {
        transform: translateX(-40%) translateY(-35px);
    }
    40% {
        transform: translateX(-80%) translateY(25px);
    }
    50% {
        transform: translateX(-100%) translateY(-10px);
    }
    70% {
        transform: translateX(-60%) translateY(35px);
    }
    90% {
        transform: translateX(-20%) translateY(-30px);
    }
    100% {
        transform: translateX(0) translateY(0);
    }
}