@charset "utf-8";
.loading_base {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: url("../images/scratch_bg_1.png") repeat 0 0;
		background: #fff;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
}
.loading_logo {
		width: 250px;
		position: relative;
		top: -50px;
}
.loading_logo img {
		width: 100%;
		height: auto;
}
.scratch_fv_main div.fv_logo-1, .scratch_fv_main div.fv_logo-2, .scratch_fv_main div.fv_logo-3, .scratch_fv_main div.fv_logo-4, .scratch_fv_main div.fv_logo-5, .scratch_fv_main div.fv_logo-6, .scratch_fv_main div.fv_logo-7, .scratch_fv_main div.fv_logo-8, .scratch_fv_main div.fv_logo-9, .scratch_fv_main div.fv_logo-10, .scratch_fv_main div.fv_logo-11, .scratch_fv_main div.fv_logo-12 {
		opacity: 0;
		transform: translateY(100px);
		transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
}
.scratch_fv_main div.fv_logo-1 {
		transition-delay: 0.5s;
}
.scratch_fv_main div.fv_logo-2 {
		transition-delay: 0.55s;
}
.scratch_fv_main div.fv_logo-3 {
		transition-delay: 0.6s;
}
.scratch_fv_main div.fv_logo-4 {
		transition-delay: 0.65s;
}
.scratch_fv_main div.fv_logo-5 {
		transition-delay: 0.7s;
}
.scratch_fv_main div.fv_logo-6 {
		transition-delay: 0.75s;
}
.scratch_fv_main div.fv_logo-7 {
		transition-delay: 0.8s;
}
.scratch_fv_main div.fv_logo-8 {
		transition-delay: 0.85s;
}
.scratch_fv_main div.fv_logo-9 {
		transition-delay: 0.9s;
}
.scratch_fv_main div.fv_logo-10 {
		transition-delay: 0.95s;
}
.scratch_fv_main div.fv_logo-11 {
		transition-delay: 1s;
}
.scratch_fv_main div.fv_logo-12 {
		transition-delay: 1.0s;
}
.fv_catch img {
		position: relative;
		z-index: 1;
		-webkit-mask-image: url("../images/scratch_fv_logo_mask.png");
		mask-image: url("../images/scratch_fv_logo_mask.png");
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		mask-size: 0 100%;
		-webkit-mask-size: 0 100%;
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
		transition: all 3s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: 1.2s;
}
.fvStart .fv_catch img {
		mask-size: 100% 100%;
		-webkit-mask-size: 100% 100%;
}
.fvStart .scratch_fv_main div {
		opacity: 1;
		transform: translateY(0px);
}
.fv_garland {
		opacity: 0;
		transform: translateY(-200px);
		transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
		transition-delay: 0.25s;
}
.fv_garland_l {
		transform: translateY(-300px) rotate(-19.75deg);
		transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fv_garland_r {
		transform: translateY(-300px) rotate(19.75deg);
		transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fvStart .fv_garland_l {
		transform: translateY(0px) rotate(-19.75deg);
}
.fvStart .fv_garland_r {
		transform: translateY(0px) rotate(19.75deg);
}
.fv_ribbon_upper, .fv_ribbon_bottom {
		transform: scale(0.5);
		opacity: 0;
		transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s;
		transition-delay: 0.5s;
}
.fvStart .fv_ribbon_upper, .fvStart .fv_ribbon_bottom {
		transform: scale(1);
		opacity: 1;
}
.scratch_fv::before {
		transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s;
		transition-delay: 0.5s;
		transform: scale(0.1);
}
.fvStart::before {
		transform: scale(1);
		opacity: 1;
}
.bounceOnce {
		animation-duration: 0.75s;
		animation-name: bounce;
		transform-origin: center bottom;
		animation-fill-mode: forwards;
}
@keyframes bounce {
		from, 20%, 53%, 80%, to {
				-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
		}
		40%, 43% {
				-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
				animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
				-webkit-transform: translate3d(0, -60px, 0);
				transform: translate3d(0, -60px, 0);
		}
		70% {
				-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
				animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
				-webkit-transform: translate3d(0, -30px, 0);
				transform: translate3d(0, -30px, 0);
		}
		90% {
				-webkit-transform: translate3d(0, -10px, 0);
				transform: translate3d(0, -10px, 0);
		}
}
.flipInX {
		animation: flipInX 0.6s ease-in forwards;
		backface-visibility: visible !important;
		transform-origin: center top;
}
.fvSwing .scratch_fv_main_outer {
		animation-duration: 0.75s;
		animation-name: bounce;
		transform-origin: center bottom;
		animation-fill-mode: forwards;
}
.fv_garland_l img, .fv_garland_r img {
		animation: flipInX 0.8s linear infinite;
		backface-visibility: visible !important;
		transform-origin: center top;
}
@media(max-width: 767px) {
		.fv_garland_l img, .fv_garland_r img {
				animation: flipInXSP 0.8s linear infinite;
		}
}
@keyframes flipInX {
		0% {
				transform: perspective(900px) rotateX(0deg);
		}
		25% {
				transform: perspective(900px) rotateX(10deg);
		}
		50% {
				transform: perspective(900px) rotateX(0deg)
		}
		75% {
				transform: perspective(900px) rotateX(-10deg)
		}
		100% {
				transform: perspective(900px) rotateX(0deg)
		}
}
@keyframes flipInXSP {
		0% {
				transform: perspective(900px) rotateX(0deg);
		}
		25% {
				transform: perspective(900px) rotateX(20deg);
		}
		50% {
				transform: perspective(900px) rotateX(0deg)
		}
		75% {
				transform: perspective(900px) rotateX(-20deg)
		}
		100% {
				transform: perspective(900px) rotateX(0deg)
		}
}
@keyframes star1 {
		0% {
				opacity: 1.0
		}
		30% {
				opacity: 0
		}
		70% {
				opacity: 1.0
		}
		100% {
				opacity: 0
		}
}
@keyframes star2 {
		0% {
				opacity: 1.0
		}
		40% {
				opacity: 0
		}
		50% {
				opacity: 1.0
		}
		100% {
				opacity: 0
		}
}
@keyframes star3 {
		0% {
				opacity: 0
		}
		50% {
				opacity: 1.0
		}
		80% {
				opacity: 0
		}
		100% {
				opacity: 1.0
		}
}
@media(max-width: 767px) {
		.loading_logo {
				width: 200px;
		}
}
/* =================== */
.scratch_present_corner_r-2, .scratch_present_corner_r-2 {
		opacity: 0;
		transform: translateY(300px);
		transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
		transition-delay: 0.2s;
}
.scratch_present_corner_r-1, .scratch_present_corner_r-1 {
		opacity: 0;
		transition: opacity 0.4s;
}
.active .scratch_present_corner_r-1, .active .scratch_present_corner_l-1 {
		opacity: 1;
}
.active .scratch_present_corner_r-2, .active .scratch_present_corner_l-2 {
		opacity: 1;
		transform: translateY(0);
}