:root {
	--timePC:4.8s;
	--timeSP:4.5s;
}

.mv {
	width: 100vw;
    height: 45vw;
	position:relative;
	overflow:hidden;
	backface-visibility:hidden;
}



#final {
	position: absolute;
	top: 0;
    left: 0;
    width: 100vw;
	height:45vw;
	z-index:3;
	background:url("../anime_img/bg_pc.png") no-repeat left top;
	background-size:100vw;
	backface-visibility:hidden;	
	overflow:hidden;
}

#item01 {
	position: absolute;
    top: 3.02vw;
    left: 42.95vw;
    width: 14.08vw;
	height:auto;
	z-index:1;
	animation-name: animation-item01;
    animation-duration: var(--timePC);
	animation-fill-mode: forwards;
}
@keyframes animation-item01 {	
    0%{
        bottom: 0;
        opacity: 0;
    }
    85%{
        opacity: 0;
		animation-timing-function: ease-in;
	}	
	100%{
        opacity: 1;
	}
}	
	
	
	
#item01 img {
	width:100%;
	height:auto;
}

#bgGrad.bgGradPC {
	position: absolute;
    top:-65vw;
    left: 42.95vw;
	width:14.08vw;
	height:104.25vw;
	background:url("../anime_img/bg_grad.png") no-repeat top center;
	background-size:100vw;
	z-index:2;
	opacity: 0;
	animation-name: animation-bgGradPC;
    animation-duration: var(--timePC);
	animation-fill-mode: forwards;
	backface-visibility:hidden;	
	overflow:hidden;
}
@keyframes animation-bgGradPC{
    0%{
        top: 3vw;
        opacity: 1;
    }
	20%{
        top: -15vw;
        opacity: 1;
    }
    40%{
        top: -63vw;
        opacity: 1;
    }
    50%{

        opacity: 0;
    }
    51%{
        opacity: 0;
    }
	100%{
        opacity: 0;
	}
}


#item00 {
	position: absolute;
    top: 3.02vw;
    left: 42.92vw;
    width: 14.2vw;
	height:auto;
	z-index:1;
	animation-name: animation-item00;
    animation-duration: var(--timePC);
	animation-fill-mode: forwards;	
}
@keyframes animation-item00{
    0%{
        opacity: 0;
    }
    40%{
        opacity: 0;
		animation-timing-function: ease-out;
    }
    60%{
        opacity: 1;
    }
    85%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}



#item02 {
	position: absolute;
    top: 13.9vw;
    left: 45.02vw;
    width: 9.96vw;
	height:auto;
	z-index:1;
	animation-name: animation-item02PC;
    animation-duration: var(--timePC);
	opacity: 0;
}	

@keyframes animation-item02PC{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0;
		animation-timing-function: ease-in;
    }
    58%{
        opacity: 1;
    }
    75%{
        opacity: 1;
		animation-timing-function: ease-in;
    }
    82%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}





#item03 {
	position: absolute;
    top: 22.5vw;
    left: 31.7vw;	
    width:32.2vw;	
	z-index:12;
	animation-name: animation-item03PC;
    animation-duration: var(--timePC);
	opacity: 0;
}
@keyframes animation-item03PC{
    0%{
        top: 30vw;
        left: 50vw;			
        width:0;
        opacity: 1;		
    }
    52%{
        top: 30vw;
        left: 50vw;			
        width:0;
        opacity: 1;	
		animation-timing-function: ease-out;
    }	
    58%{
        top: 24vw;
        left: 37vw;				
        width:24vw;
        opacity: 1;	
    }	
    75%{
        top: 24vw;
        left: 37vw;				
        width:24vw;
        opacity: 1;	
		animation-timing-function: ease-in;
    }
    82%{
        top: 22.5vw;
        left: 31.7vw;			
        width:32.2vw;
        opacity: 0;
    }

    100%{
        top: 22.5vw;
        left: 31.7vw;			
        width:32.2vw;
        opacity: 0;
    }
}

.frame {
	position:absolute;
	top:0;
	left:0;
	width:100vw;
	height:45vw;
	background:url("../anime_img/frame.png") no-repeat left top;
	background-size:100vw;
	z-index:4;
	backface-visibility:hidden;	
	overflow:hidden;
}	
	
.animeFruits {
	position:absolute;
	height:auto;
    animation-duration: var(--timePC);
	backface-visibility:hidden;	
	overflow:hidden;
}
#moon {
    top: 8.65vw;
    left: 35.28vw;
    width: 5.49vw;
	animation-name: animation-moon;
    animation-duration: var(--timePC);
	z-index:6;
}
@keyframes animation-moon{
    0%{
        opacity: 0;
    }
    40%{
        opacity: 0;
		animation-timing-function: ease-out;
    }
    50%{
        opacity: 0.4;
		animation-timing-function: ease-out;
    }
    60%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}	
#sale {
    top: 19.3vw;
    left: 23.1vw;
    width: 8.06vw;
	animation-name: animation-sale;
	z-index:6;
}
@keyframes animation-sale{
    0%{
        opacity:0;
    }
    85%{ /* スタート */
        opacity:0;
		animation-timing-function: ease-in;
    }		
    100%{
        opacity:1;
    }
}	

#to_story {
        top: 29.57vw;
        left: 65.89vw;
        width: 15.1vw;
	animation-name: animation-to_story;
	z-index:6;
}
@keyframes animation-to_story{
    0%{
        opacity:0;
    }
    85%{ /* スタート */
        opacity:0;
		animation-timing-function: ease-in;
    }		
    100%{
        opacity:1;
    }
}			

#to_insta {
    top: 14vw;
    left: 62.36vw;
    width: 14.88vw;
	animation-name: animation-to_insta;
	z-index:6;
}
@keyframes animation-to_insta{
    0%{
        opacity:0;
    }
    85%{ /* スタート */
        opacity:0;
		animation-timing-function: ease-in;
    }		
    100%{
        opacity:1;
    }
}		

#lf001 {
    top: 25.4vw;
    left: 47vw;
    width: 2.58vw;
	animation-name: animation-lf001;
	z-index:6;
		opacity:0;
}
@keyframes animation-lf001{
    0%{
        top: 25.4vw;
        left: 47vw;
        width: 2.58vw;
    }
    7%{
        top: 25.4vw;
        left: 47vw;
        width: 2.58vw;
    }	
    8%{ /* 左回転スタート */
        top: 25.4vw;
        left: 47vw;
        transform: rotate(0);
		animation-timing-function: ease-in;
    }		
    24%{ /* 左回転おわり */
        top: 27.4vw;
        left: 47vw;
        transform: rotate(-25deg);
		animation-timing-function: ease-out;
    }
    27%{ /* 右回転スタート */
        top: 27.4vw;
        left: 47vw;
        transform: rotate(-25deg);
		animation-timing-function: ease-in;
    }
    30%{ /* 消滅開始 */
		opacity:1;
    }
    40%{ /* 右回転おわり */
        top: 25.4vw;
        left: 47vw;
        transform: rotate(0);
		opacity:0;
		animation-timing-function: ease-in;
    }
    100%{
		opacity:0;
    }
}			
	
#lf002 {
    top: 18.25vw;
    left: 50.4vw;
    width:4.5vw;
	animation-name: animation-lf002;
	z-index:6;
	opacity:0;
}
@keyframes animation-lf002{
    0%{
        top: 18.25vw;
        left: 50.4vw;
        width: 4.5vw;
    }
    7%{
        top: 18.25vw;
        left: 50.4vw;
        width: 4.5vw;
    }	
    8%{ /* 右回転スタート */
        top: 18.25vw;
        left: 50.4vw;
        width: 4.5vw;
		transform: rotate(0);
		animation-timing-function: ease-in;
    }		
    25%{ /* 右回転おわり */
        top: 22vw;
        left: 50vw;
		transform: rotate(22deg);
		animation-timing-function: ease-out;
    }
    27%{ /* 左回転スタート */
        top: 22vw;
        left: 50vw;
		transform: rotate(22deg);
    }
    32%{ /* 消滅開始 */
		opacity:1;
        left: 50vw;
    }
    40%{ /* 左回転おわり */
        top: 20vw;
        left: 50.4vw;
		transform: rotate(1deg);
		opacity:0;
    }
    100%{
		opacity:0;
    }
}		









	
#bt001 {
    top:32.75vw;
    left:1.83vw;
    width: 13vw;
	animation-name: animation-bt001;
	z-index:6;
}
@keyframes animation-bt001{
    0%{
        top:40vw;
        left:6vw;
        width:11vw;	
    }
    56%{
        top:40vw;
        left:6vw;
        width:11vw;	
    }	
    57%{ /* スタート */
        top:40vw;
        left:6vw;
        width:11vw;	
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top:32.75vw;
        left:1.83vw;
        width:13vw;	
    }
    100%{
        top:32.75vw;
        left:1.83vw;
        width:13vw;	
    }
}		
	
#bt002 {
	top:35.8vw;
	left: 14.8vw;
    width: 7.58vw;
	animation-name: animation-bt002;
	z-index:7;
}
@keyframes animation-bt002{
    0%{
        top:42vw;
        left:17vw;
        width:7vw;
    }
    56%{
        top:42vw;
        left:17vw;
        width:7vw;
    }	
    57%{ /* スタート */
        top:42vw;
        left:17vw;
        width:7vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top:35.8vw;
        left:14.8vw;
        width:7.58vw;
    }
    100%{
        top:35.8vw;
        left:14.8vw;
        width:7.58vw;
    }
}			
		
#bt003 {
	top: 38vw;
    left: 25.6vw;
    width: 7vw;
	animation-name: animation-bt003;
	z-index:7;
}
@keyframes animation-bt003{
    0%{
        top: 43vw;
        left: 30vw;
        width: 5.5vw;
    }
    56%{
        top: 43vw;
        left: 30vw;
        width: 5.5vw;
    }	
    57%{ /* スタート */
        top: 43vw;
        left: 30vw;
        width: 5.5vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: 38vw;
        left: 25.6vw;
        width: 7vw;
    }
    100%{
        top: 38vw;
        left: 25.6vw;
        width: 7vw;
    }
}				
	
#bt004 {
	top:38.5vw;
	left:27.9vw;
	width:8.6vw;
	animation-name: animation-bt004;
	z-index:7;
}
@keyframes animation-bt004{
    0%{
        top:43vw;
        left:34vw;
        width:7vw;
    }
    56%{
        top:43vw;
        left:34vw;
        width:7vw;
    }	
    57%{ /* スタート */
        top:43vw;
        left:34vw;
        width:7vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top:38.5vw;
        left:27.9vw;
        width:8.6vw;
    }
    100%{
        top:38.5vw;
        left:27.9vw;
        width:8.6vw;
    }
}			
	
	
#bt005 {
	top: 38.5vw;
	left: 58vw;
	width: 8.9vw;
	animation-name: animation-bt005;
	z-index:6;
}
@keyframes animation-bt005{
    0%{
        top:43vw;
        left:52vw;
        width:7vw;
    }
    56%{
        top:43vw;
        left:52vw;
        width:7vw;
    }	
    57%{ /* スタート */
        top:43vw;
        left:52vw;
        width:7vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top:38.5vw;
        left:58vw;
        width:8.9vw;
    }
    100%{
        top:38.5vw;
        left:58vw;
        width:8.9vw;
    }
}	
	
#bt006 {
	top: 38.5vw;
	left: 79.6vw;
	width: 6.25vw;
	animation-name: animation-bt006;
	z-index:6;
}
@keyframes animation-bt006{
    0%{
        top: 43vw;
        left: 70vw;
        width:5vw;
    }
    56%{
        top: 43vw;
        left: 70vw;
        width:5vw;
    }	
    57%{ /* スタート */
        top: 43vw;
        left: 70vw;
        width:5vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: 38.5vw;
        left: 79.6vw;
        width:6.25vw;
    }
    100%{
        top: 38.5vw;
        left: 79.6vw;
        width:6.25vw;
    }
}		
#bt007 {
	top: 32.5vw;
	left: 82.7vw;
	width: 10vw;
	animation-name: animation-bt007;
	z-index:6;
}
@keyframes animation-bt007{
    0%{
        top: 40vw;
        left: 76vw;
        width:8vw;
    }
    56%{
        top: 40vw;
        left: 76vw;
        width:8vw;
    }	
    57%{ /* スタート */
        top: 40vw;
        left: 76vw;
        width:8vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: 32.5vw;
        left: 82.7vw;
        width:10vw;
    }
    100%{
        top: 32.5vw;
        left: 82.7vw;
        width:10vw;
    }
}		
#bt008 {
	top: 35.8vw;
	left: 89.75vw;
	width: 9vw;
	animation-name: animation-bt008;
	z-index:6;
}
@keyframes animation-bt008{
    0%{
        top: 43vw;
        left: 85vw;
        width:8vw;
    }
    56%{
        top: 43vw;
        left: 85vw;
        width:8vw;
    }	
    57%{ /* スタート */
        top: 43vw;
        left: 85vw;
        width:8vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: 35.8vw;
        left: 89.75vw;
        width:9vw;
    }
    100%{
        top: 35.8vw;
        left: 89.75vw;
        width:9vw;
    }
}		


#to_story_sp {
        top: 125vw;
        left: 72vw;
        width: 27vw;
	animation-name: animation-bt007sp;
	z-index:6;
}
@keyframes animation-bt007sp{
    0%{
        opacity:0;
    }
    85%{ /* スタート */
        opacity:0;
		animation-timing-function: ease-out;
    }		
    100%{
        opacity:1;
    }
}			

#to_insta_sp {
    top: 66vw;
    left: 71vw;
    width: 30.16vw;
	animation-name: animation-to_insta_sp;
	z-index:6;
}
@keyframes animation-to_insta_sp{
    0%{
        opacity:0;
    }
    85%{ /* スタート */
        opacity:0;
		animation-timing-function: ease-out;
    }		
    100%{
        opacity:1;
    }
}		
	
#sale_sp {
    top: 41vw;
    left: 76.29vw;
    width: 18.57vw;
	animation-name: animation-sale_sp;
	z-index:6;
}
@keyframes animation-sale_sp{
    0%{
        opacity:0;
    }
    85%{ /* スタート */
        opacity:0;
		animation-timing-function: ease-out;
    }		
    100%{
        opacity:1;
    }
}			
	
#tp001 {
    top: -0.9vw;
    left: 2vw;
    width: 7vw;
	animation-name: animation-tp001;
	z-index:6;
}

@keyframes animation-tp001{
    0%{
        top: -3vw;
        left: 6vw;
        width: 6.4vw;
    }
    56%{
        top: -3vw;
        left: 6vw;
        width: 6.4vw;
    }	
    57%{ /* スタート */
        top: -3vw;
        left: 6vw;
        width: 6.4vw;
		animation-timing-function: ease-out;
		transition:all .1s ease;
    }	
    70%{ /* おわり 64% */
        top: -0.9vw;
        left: 2vw;
        width: 7vw;
    }
    100%{
        top: -0.9vw;
        left: 2vw;
        width: 7vw;
    }

}	
#tp002 {
    top: 2.16vw;
    left: 12.8vw;
    width: 9.25vw;
	animation-name: animation-tp002;
	z-index:6;
}
@keyframes animation-tp002{
    0%{
        top: -3vw;
        left: 18vw;
        width: 8.4vw;
    }
    56%{
        top: -3vw;
        left: 18vw;
        width: 8.4vw;
    }	
    57%{ /* スタート */
        top: -3vw;
        left: 18vw;
        width: 8.4vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: 2.16vw;
        left: 12.8vw;
        width: 9.25vw;
    }
    100%{
        top: 2.16vw;
        left: 12.8vw;
        width: 9.25vw;
    }
}	
#tp003 {
    top: -3vw;
    left: 28vw;
    width: 9.9vw;
	animation-name: animation-tp003;
	z-index:6;
}
@keyframes animation-tp003{
    0%{
        top: -6vw;
        left: 35vw;
        width: 8.4vw;
    }
    56%{
        top: -6vw;
        left: 35vw;
        width: 8.4vw;
    }	
    57%{ /* スタート */
        top: -6vw;
        left: 35vw;
        width: 8.4vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: -3vw;
        left: 28vw;
        width: 9.9vw;
    }
    100%{
        top: -3vw;
        left: 28vw;
        width: 9.9vw;
    }
}		
#tp004 {
    top: -1vw;
    left: 57.4vw;
    width: 8.83vw;
	animation-name: animation-tp004;
	z-index:6;
}
@keyframes animation-tp004{
    0%{
        top: -4vw;
        left: 54vw;
        width: 7.5vw;
    }
    56%{
        top: -4vw;
        left: 54vw;
        width: 7.5vw;
    }	
    57%{ /* スタート */
        top: -4vw;
        left: 54vw;
        width: 7.5vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: -1vw;
        left: 57.4vw;
        width: 8.83vw;
    }
    100%{
        top: -1vw;
        left: 57.4vw;
        width: 8.83vw;
    }
}			
#tp005 {
    top: -0.8vw;
    left: 65.2vw;
    width: 5.7vw;
	animation-name: animation-tp005;
	z-index:6;
}
@keyframes animation-tp005{
    0%{
        top: -1vw;
        left: 62vw;
        width: 4.5vw;
    }
    56%{
        top: -1vw;
        left: 62vw;
        width: 4.5vw;
    }	
    57%{ /* スタート */
        top: -1vw;
        left: 62vw;
        width: 4.5vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: -0.8vw;
        left: 65.2vw;
        width: 5.7vw;
    }
    100%{
        top: -0.8vw;
        left: 65.2vw;
        width: 5.7vw;
    }
}			
	
#tp006 {
    top: 1.66vw;
    left: 76.1vw;
    width: 8.6vw;
	animation-name: animation-tp006;
	z-index:6;
}
@keyframes animation-tp006{
    0%{
        top: -2vw;
        left: 70vw;
        width: 7.5vw;
    }
    56%{
        top: -2vw;
        left: 70vw;
        width: 7.5vw;
    }	
    57%{ /* スタート */
        top: -2vw;
        left: 70vw;
        width: 7.5vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: 1.66vw;
        left: 76.1vw;
        width: 8.6vw;
    }
    100%{
        top: 1.66vw;
        left: 76.1vw;
        width: 8.6vw;
    }
}			
#tp007 {
    top: -1.4vw;
    left: 86.1vw;
    width: 6.75vw;
	animation-name: animation-tp007;
	z-index:6;
}
@keyframes animation-tp007{
    0%{
        top: -2.5vw;
        left: 82vw;
        width: 5.5vw;
    }
    56%{
        top: -2.5vw;
        left: 82vw;
        width: 5.5vw;
    }	
    57%{ /* スタート */
        top: -2.5vw;
        left: 82vw;
        width: 5.5vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: -1.4vw;
        left: 86.1vw;
        width: 6.75vw;
    }
    100%{
        top: -1.4vw;
        left: 86.1vw;
        width: 6.75vw;
    }
}				
#tp008 {
    top: -0.8vw;
    left: 92.8vw;
    width: 9.5vw;
	animation-name: animation-tp008;
	z-index:6;
}
@keyframes animation-tp008{
    0%{
        top: -2vw;
        left: 94vw;
        width:7.5vw;
    }
    56%{
        top: -2vw;
        left: 94vw;
        width:7.5vw;
    }	
    57%{ /* スタート */
        top: -2vw;
        left: 94vw;
        width:7.5vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: -0.8vw;
        left: 92.8vw;
        width:9.5vw;
    }
    100%{
        top: -0.8vw;
        left: 92.8vw;
        width:9.5vw;
    }
}				




	
#lf001sp {
        top: 24.6vw;
        left: 44.77vw;
        width: 16.4vw;
	animation-name: animation-lf001sp;
	z-index:6;
		opacity:0;
}
@keyframes animation-lf001sp{
    0%{
        top: 84.3vw;
        left: 33.6vw;
        width: 16.4vw;
    }
    7%{
        top: 84.3vw;
        left: 33.6vw;
        width: 16.4vw;
    }	
    8%{ /* 左回転スタート */
        top: 84.3vw;
        left: 33.6vw;
        transform: rotate(0);
    }		
    24%{ /* 左回転おわり */
        top: 86vw;
        left: 36vw;
        transform: rotate(-25deg);
    }
    27%{ /* 右回転スタート */
        top: 86vw;
        left: 36vw;
        transform: rotate(-25deg);
    }
    30%{ /* 消滅開始 */
		opacity:1;
    }
    40%{ /* 右回転おわり */
        top: 84.3vw;
        left: 33.6vw;
        transform: rotate(0);
		opacity:0;
    }
    100%{
		opacity:0;
    }
}			
	
#lf002sp {
    top: 61.3vw;
    left: 49.4vw;
    width: 18vw;
	animation-name: animation-lf002sp;
	z-index:6;
	opacity:0;
}
@keyframes animation-lf002sp{
    0%{
        top: 61.3vw;
        left: 49.4vw;
        width: 18vw;
    }
    7%{
        top: 61.3vw;
        left: 49.4vw;
        width: 18vw;
    }	
    8%{ /* 右回転スタート */
        top: 61.3vw;
        left: 49.4vw;
        width: 18vw;
		transform: rotate(0);
    }		
    25%{ /* 右回転おわり */
        top: 70vw;
        left: 48vw;
		transform: rotate(22deg);
    }
    27%{ /* 左回転スタート */
        top: 70vw;
        left: 48vw;
		transform: rotate(22deg);
    }
    32%{ /* 消滅開始 */
		opacity:1;
        left: 49vw;
    }
    40%{ /* 左回転おわり */
        top: 66vw;
        left: 49.4vw;
		transform: rotate(-7deg);
		opacity:0;
    }
    100%{
		opacity:0;
    }
}			
	
	
.scroll {
	animation-name: animation-scroll;
    animation-duration: var(--timePC);
	z-index:7;
    opacity:1;
}	
@keyframes animation-scroll{
    0%{
        opacity:0;
    }
    95%{ /* スタート */
        opacity:0;
    }		
    100%{
        opacity:1;
    }
}	






/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

@media screen and (max-width: 750px) {
.mv {
	width:100vw;
    height: 150.6vw;
	position:relative;
	overflow:hidden;
}



#final {
	position: absolute;
	top: 0;
    left: 0;
    width: 100vw;
	height:180vw;
	z-index:3;
	background:url("../anime_img/bg_sp.png") no-repeat left top;
	background-size:100vw;
	overflow:hidden;
}

#item01 {
	position: absolute;
	top: 18.4vw;
    left: 28.5vw;
    width: 43vw;
	height:auto;
	z-index:1;
	animation-name: animation-item01SP;
    animation-duration: var(--timeSP);
	animation-fill-mode: forwards;
}
@keyframes animation-item01SP {	
    0%{
        bottom: 0;
        opacity: 0;
    }
    85%{
        opacity: 0;
		animation-timing-function: ease-in;
	}	
	100%{
        opacity: 1;
	}
}	
	
	
	
#item01 img {
	width:100%;
	height:auto;
}

#bgGrad {
	position: absolute;
    top: -207vw;
    left: 0;
	width:100vw;
	height:345.6vw;
	background:url("../anime_img/bg_grad_sp.png") no-repeat top center;
	background-size:100vw;
	z-index:2;
	opacity: 1;
	animation-name: animation-bgGrad;
    animation-duration: var(--timeSP);
	animation-fill-mode: forwards;
}
@keyframes animation-bgGrad{
    0%{
        top: 17.8vw;
        opacity: 1;
    }
	20%{
        top: -40vw;
        opacity: 1;
    }
    25%{
        top: -107vw;
        opacity: 1;
    }
    40%{
        top: -215vw;
        opacity: 1;
    }
    50%{

        opacity: 0;
    }
    51%{
        opacity: 0;
    }
	100%{
        opacity: 0;
	}
}


#item00 {
	position: absolute;
    top: 17.6vw;
    left: 27.7vw;
    width: 44.5vw;
	height:auto;
	z-index:1;
	animation-name: animation-item00;
    animation-duration: var(--timeSP);
	animation-fill-mode: forwards;	
}
@keyframes animation-item00{
    0%{
        opacity: 0;
    }
    40%{
        opacity: 0;
		animation-timing-function: ease-out;
    }
    60%{
        opacity: 1;
    }
    85%{
        opacity: 1;
		animation-timing-function: ease-out;
    }
    100%{
        opacity: 0;
    }
}



#item02 {
	position: absolute;
    top: 49.68vw;
    left: 34.84vw;
    width: 30.32vw;
	height:auto;
	z-index:1;
	animation-name: animation-item02;
    animation-duration: var(--timeSP);
	opacity: 0;
}	

@keyframes animation-item02{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0;
		animation-timing-function: ease-in;
    }
    58%{
        opacity: 1;
    }
    75%{
        opacity: 1;
		animation-timing-function: ease-in;
    }
    82%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}

#item03 {
	position: absolute;
    width:90vw;
    left: 5vw;		
    top: 100vw;
	z-index:12;
	animation-name: animation-item03;
    animation-duration: var(--timeSP);
	opacity: 0;
}
@keyframes animation-item03{
    0%{
        width:31vw;
        top: 101.0vw;
        left: 33.16vw;	
        opacity: 0;		
    }
    52%{
        width:31vw;
        top: 101.0vw;
        left: 33.16vw;	
        opacity: 0;
		animation-timing-function: ease-out;
    }	
    58%{
        width:65.8vw;
        top: 90vw;		
        left: 13.26vw;
        opacity: 1;
    }		
    75%{
        width:65.8vw;
        top: 90vw;		
        left: 13.26vw;
        opacity: 1;
    }
    85%{
        width:90.3vw;
        top: 85.0vw;
		left: 2vw;		
        opacity: 0;
    }

    100%{
        opacity: 0;
    }
}

.frame {
	position:absolute;
	top:0;
	left:0;
	width:100vw;
	height:150.6vw;
	background:url("../anime_img/frame_sp.png") no-repeat left top;
	background-size:100vw;
	z-index:4;
}	
	
.animeFruits {
	position:absolute;
	height:auto;
    animation-duration: var(--timeSP);
}
	
	
#bt001sp {
    top:85vw;
    left:-3vw;
    width: 15vw;
	animation-name: animation-bt001sp;
	z-index:6;
}
@keyframes animation-bt001sp{
    0%{
        top:88vw;
        left:-4vw;
        width:11.22vw;	
    }
    56%{
        top:88vw;
        left:-4vw;
        width:11.22vw;
    }	
    57%{ /* スタート */
        top:88vw;
        left:-4vw;
        width:11.22vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top:85vw;
        left:-3vw;
        width:15vw;
    }
    100%{
        top:85vw;
        left:-3vw;
        width:15vw;
    }
}		
	
#bt002sp {
	top:88vw;
	left: -8vw;
    width: 23vw;
	animation-name: animation-bt002sp;
	z-index:7;
}
@keyframes animation-bt002sp{
    0%{
        top:92.34vw;
        left:-6.6vw;
        width:13.77vw;
    }
    56%{
        top:92.34vw;
        left:-6.6vw;
        width:13.77vw;
    }	
    57%{ /* スタート */
        top:92.34vw;
        left:-6.6vw;
        width:13.77vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top:88vw;
        left: -8vw;
        width: 23vw;
    }
    100%{
        top:88vw;
        left: -8vw;
        width: 23vw;
    }
}			
		
#bt003sp {
	top: 124.3vw;
    left: 3.8vw;
    width: 14vw;
	animation-name: animation-bt003sp;
	z-index:7;
}
@keyframes animation-bt003sp{
    0%{
        top: 126vw;
        left: -5vw;
        width: 12vw;
    }
    56%{
        top: 126vw;
        left: -5vw;
        width: 12vw;
    }	
    57%{ /* スタート */
        top: 126vw;
        left: -5vw;
        width: 12vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: 124.3vw;
        left: 3.8vw;
        width: 14vw;
    }
    100%{
        top: 124.3vw;
        left: 3.8vw;
        width: 14vw;
    }
}				
	
#bt004sp {
	top: 132vw;
	left: 22.14vw;
	width: 24vw;
	animation-name: animation-bt004sp;
	z-index:6;
}
@keyframes animation-bt004sp{
    0%{
        top:143vw;
        left:27vw;
        width:17.7vw;
    }
    56%{
        top:143vw;
        left:27vw;
        width:17.7vw;
    }	
    57%{ /* スタート */
        top:143vw;
        left:27vw;
        width:17.7vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: 132vw;
        left: 22.14vw;
        width: 24vw;
    }
    100%{
        top: 132vw;
        left: 22.14vw;
        width: 24vw;
    }
}			
	
	
#bt005sp {
	top: 133vw;
	left: 60.3vw;
	width: 23vw;
	animation-name: animation-bt005sp;
	z-index:6;
}
@keyframes animation-bt005sp{
    0%{
        top:144vw;
        left:58vw;
        width:18.5vw;
    }
    56%{
        top:144vw;
        left:58vw;
        width:18.5vw;
    }	
    57%{ /* スタート */
        top:144vw;
        left:58vw;
        width:18.5vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: 133vw;
        left: 60.3vw;
        width: 23vw;
    }
    100%{
        top: 133vw;
        left: 60.3vw;
        width: 23vw;
    }
}	
	
#bt006sp {
	top: 114vw;
	left: 84vw;
	width: 23vw;
	animation-name: animation-bt006sp;
	z-index:6;
}
@keyframes animation-bt006sp{
    0%{
        top: 120vw;
        left: 89vw;
        width:16.5vw;
    }
    56%{
        top: 120vw;
        left: 89vw;
        width:16.5vw;
    }	
    57%{ /* スタート */
        top: 120vw;
        left: 89vw;
        width:16.5vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: 114vw;
        left: 84vw;
        width: 23vw;
    }
    100%{
        top: 114vw;
        left: 84vw;
        width: 23vw;
    }
}		
#to_story_sp {
        top: 125vw;
        left: 72vw;
        width: 27vw;
	animation-name: animation-bt007sp;
	z-index:13;
}
@keyframes animation-bt007sp{
    0%{
        opacity:0;
    }
    85%{ /* スタート */
        opacity:0;
    }		
    100%{
        opacity:1;
    }
}			

#to_insta_sp {
    top: 66vw;
    left: 71vw;
    width: 30.16vw;
	animation-name: animation-to_insta_sp;
	z-index:6;
}
@keyframes animation-to_insta_sp{
    0%{
        opacity:0;
    }
    85%{ /* スタート */
        opacity:0;
    }		
    100%{
        opacity:1;
    }
}		
	
#sale_sp {
    top: 41vw;
    left: 76.29vw;
    width: 18.57vw;
	animation-name: animation-sale_sp;
	z-index:6;
}
@keyframes animation-sale_sp{
    0%{
        opacity:0;
    }
    85%{ /* スタート */
        opacity:0;
		animation-timing-function: ease-in;
    }		
    100%{
        opacity:1;		
    }
}			
	
#tp001sp {
    top: 2vw;
    left: -3.44vw;
    width: 13.14vw;
	animation-name: animation-tp001sp;
	z-index:6;
}
@keyframes animation-tp001sp{
    0%{
        top: -20vw;
        left: 5vw;
        width: 10vw;
    }
    56%{
        top: -20vw;
        left: 5vw;
        width: 10vw;
    }	
    57%{ /* スタート */
        top: -20vw;
        left: 5vw;
        width: 10vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: 2vw;
        left: -3.44vw;
        width: 13.14vw;
    }
    100%{
        top: 2vw;
        left: -3.44vw;
        width: 13.14vw;
    }
}	
#tp002sp {
    top: 5.56vw;
    left: 14.84vw;
    width: 21.9vw;
	animation-name: animation-tp002sp;
	z-index:6;
}
@keyframes animation-tp002sp{
    0%{
        top: -15.5vw;
        left: 21.6vw;
        width: 21.9vw;
    }
    56%{
        top: -15.5vw;
        left: 21.6vw;
        width: 21.9vw;
    }	
    57%{ /* スタート */
        top: -15.5vw;
        left: 21.6vw;
        width: 21.9vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: 5.56vw;
        left: 14.84vw;
        width: 21.9vw;
    }
    100%{
        top: 5.56vw;
        left: 14.84vw;
        width: 21.9vw;
    }
}	
#tp003sp {
    top: -10.8vw;
    left: 30.4vw;
    width: 21.4vw;
	animation-name: animation-tp003sp;
	z-index:6;
}
@keyframes animation-tp003sp{
    0%{
        top: -18vw;
        left: 38vw;
        width: 21.4vw;
    }
    56%{
        top: -18vw;
        left: 38vw;
        width: 21.4vw;
    }	
    57%{ /* スタート */
        top: -18vw;
        left: 38vw;
        width: 21.4vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: -10.8vw;
        left: 30.4vw;
        width: 21.4vw;
    }
    100%{
        top: -10.8vw;
        left: 30.4vw;
        width: 21.4vw;
    }
}		
#tp004sp {
    top: -6.5vw;
    left: 60.5vw;
        width: 18.1vw;
	animation-name: animation-tp004sp;
	z-index:6;
}
@keyframes animation-tp004sp{
    0%{
        top: -17vw;
        left: 53.6vw;
        width: 16vw;
    }
    56%{
        top: -17vw;
        left: 53.6vw;
        width: 16vw;
    }	
    57%{ /* スタート */
        top: -17vw;
        left: 53.6vw;
        width: 16vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: -6.5vw;
        left: 60.5vw;
        width: 18.1vw;
    }
    100%{
        top: -6.5vw;
        left: 60.5vw;
        width: 18.1vw;
    }
}			
#tp005sp {
    top: 6.9vw;
    left: 75.6vw;
    width: 21vw;
	animation-name: animation-tp005sp;
	z-index:6;
}
@keyframes animation-tp005sp{
    0%{
        top: -4vw;
        left: 72vw;
        width: 15vw;
    }
    56%{
        top: -4vw;
        left: 72vw;
        width: 15vw;
    }	
    57%{ /* スタート */
        top: -4vw;
        left: 72vw;
        width: 15vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: 6.9vw;
        left: 75.6vw;
        width: 21vw;
    }
    100%{
        top: 6.9vw;
        left: 75.6vw;
        width: 21vw;
    }
}			
	
#tp006sp {
        top: -4.5vw;
        left: 88.8vw;
        width: 16.6vw;
	animation-name: animation-tp006sp;
	z-index:6;
}
@keyframes animation-tp006sp{
    0%{
        top: -20vw;
        left: 70vw;
        width: 12vw;
    }
    56%{
        top: -20vw;
        left: 70vw;
        width: 12vw;
    }	
    57%{ /* スタート */
        top: -20vw;
        left: 70vw;
        width: 12vw;
		animation-timing-function: ease-out;
    }		
    70%{ /* おわり 64% */
        top: -4.5vw;
        left: 88.8vw;
        width: 16.6vw;
    }
    100%{
        top: -4.5vw;
        left: 88.8vw;
        width: 16.6vw;
    }
}			
	
#tp007sp {
    top: 32.26vw;
    left: 9.87vw;
    width: 14.09vw;
	animation-name: animation-moonSP;
	z-index:6;
}	
@keyframes animation-moonSP{
    0%{
        opacity: 0;
    }
    40%{
        opacity: 0;
		animation-timing-function: ease-out;
    }
    50%{
        opacity: 0.4;
		animation-timing-function: ease-out;
    }
    60%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}	
#lf001sp {
        top: 84.3vw;
        left: 33.6vw;
        width: 16.4vw;
	animation-name: animation-lf001;
	z-index:6;
		opacity:0;
}
@keyframes animation-lf001{
    0%{
        top: 84.3vw;
        left: 33.6vw;
        width: 16.4vw;
    }
    7%{
        top: 84.3vw;
        left: 33.6vw;
        width: 16.4vw;
    }	
    8%{ /* 左回転スタート */
        top: 84.3vw;
        left: 33.6vw;
        transform: rotate(0);
		animation-timing-function: ease-in;
    }		
    24%{ /* 左回転おわり */
        top: 86vw;
        left: 36vw;
        transform: rotate(-25deg);
		animation-timing-function: ease-out;
    }
    27%{ /* 右回転スタート */
        top: 86vw;
        left: 36vw;
        transform: rotate(-25deg);
		animation-timing-function: ease-in;
    }
    30%{ /* 消滅開始 */
		opacity:1;
    }
    40%{ /* 右回転おわり */
        top: 84.3vw;
        left: 33.6vw;
        transform: rotate(0);
		opacity:0;
    }
    100%{
		opacity:0;
    }
}			
	
#lf002sp {
    top: 61.3vw;
    left: 49.4vw;
    width: 18vw;
	animation-name: animation-lf002;
	z-index:6;
	opacity:0;
}
@keyframes animation-lf002{
    0%{
        top: 61.3vw;
        left: 49.4vw;
        width: 18vw;
    }
    7%{
        top: 61.3vw;
        left: 49.4vw;
        width: 18vw;
    }	
    8%{ /* 右回転スタート */
        top: 61.3vw;
        left: 49.4vw;
        width: 18vw;
		transform: rotate(0);
		animation-timing-function: ease-in;
    }		
    25%{ /* 右回転おわり */
        top: 70vw;
        left: 48vw;
		transform: rotate(22deg);
    }
    27%{ /* 左回転スタート */
        top: 70vw;
        left: 48vw;
		transform: rotate(22deg);
		animation-timing-function: ease-in;
    }
    32%{ /* 消滅開始 */
		opacity:1;
        left: 49vw;
    }
    40%{ /* 左回転おわり */
        top: 66vw;
        left: 49.4vw;
		transform: rotate(-7deg);
		opacity:0;
    }
    100%{
		opacity:0;
    }
}			
	
	
.scroll {
	animation-name: animation-scroll;
    animation-duration: var(--timeSP);
	z-index:7;
    opacity:1;
}	
@keyframes animation-scroll{
    0%{
        opacity:0;
    }
    95%{ /* スタート */
        opacity:0;
		animation-timing-function: ease-in;
    }		
    100%{
        opacity:1;
    }
}	
	
	
	
	
	
	
	
	
	
	
	
	



}