@charset "utf-8";
.content{display: none;}
.content.ani{display: block;}

/* scene-01 */
.content.ani .cowboy_head_01{ -webkit-animation:2s ease TopBottom infinite; animation:2s ease TopBottom infinite;}
.content.ani .tree_01 p{ -webkit-transform:translateY(3.5rem); transform:translateY(3.5rem); -webkit-animation:2s BottomTop forwards; animation:2s BottomTop forwards;}
.content.ani .tree_01 .tree_01_02{ -webkit-animation-delay:.5s;  animation-delay:.5s;}
.content.ani .tree_01 .tree_01_03{ -webkit-animation-delay:.7s;  animation-delay:.7s;}
.content.ani .leaves p{ opacity:0; -webkit-transform:translateX(-1rem); transform:translateX(-1rem); z-index:7; -webkit-animation:5s Flutter linear forwards; animation:5s Flutter linear forwards;}
.content.ani .leaves p.leaves_01,.content.ani .leaves p.leaves_03{ -webkit-animation-delay:2.5s; }
.content.ani .leaves p.leaves_02,.content.ani .leaves p.leaves_04{ -webkit-animation-delay:2s; }
.content.ani .leaves p.leaves_03,.content.ani .leaves p.leaves_06{ -webkit-animation-delay:1s; }
.content.ani .cloud p{ opacity:0;}
.content.ani .cloud_01,.content.ani .cloud_03{ -webkit-transform:translateX(-2rem); transform:translateX(-2rem); -webkit-animation:1s 1s LeftRight forwards,1s 1s OpacityIn forwards; animation:1s 1s LeftRight forwards,1s 1s OpacityIn forwards;}
.content.ani .cloud_02{ -webkit-transform:translateX(2rem); transform:translateX(2rem); -webkit-animation:1s 1s RightLeft forwards,1s 1s OpacityIn forwards; animation:1s 1s RightLeft forwards,1s 1s OpacityIn forwards;}
.content.ani .talk_01{ opacity:0; -webkit-animation:1s zoomIn 2.5s forwards; animation:1s zoomIn 2.5s forwards; }
.content.ani .txt_01{ opacity:0; -webkit-animation:BottomTop3 2s 3.5s forwards,OpacityIn 2s 3.5s forwards; animation:BottomTop3 2s 3.5s forwards,OpacityIn 2s 3.5s  forwards;}
.content.ani .txt_02{ opacity:0; -webkit-animation:BottomTop3 2s 5s forwards,OpacityIn 2s 5s forwards; animation:BottomTop3 2s 5s forwards,OpacityIn 2s 5s forwards;}
.content.ani .crow{ -webkit-transform:translateX(-10rem); transform:translateX(-10rem); -webkit-animation:2s 6s linear LeftRight2 forwards; animation:2s 6s linear LeftRight2 forwards;}
.content.ani .spot span{ opacity:0; -webkit-animation:2.5s zoomIn forwards; animation:2.5s zoomIn forwards; }
.content.ani .spot span.spot_01{ -webkit-animation-delay:6.2s;}
.content.ani .spot span.spot_02{ -webkit-animation-delay:6.3s;}
.content.ani .spot span.spot_03{ -webkit-animation-delay:6.4s;}
.content.ani .spot span.spot_04{ -webkit-animation-delay:6.5s;}

/* scene-02 */
.content.ani .scene_02 .tree_03{ -webkit-transform:translateX(8rem); transform:translateX(8rem); -webkit-animation:.5s linear RightLeft2 forwards; animation:.5s linear RightLeft2 forwards;}
.content.ani .scene_02 .bridge,.content.ani .scene_02 .bridge_bar{ -webkit-transform:translateY(8rem); transform:translateY(8rem); -webkit-animation:.5s linear BottomTop2 forwards; animation:.5s linear BottomTop2 forwards;}
.content.ani .scene_02 .cowboy_02{ -webkit-transform:translateX(-2rem); transform:translateX(-2rem); -webkit-animation:1s LeftRight forwards; animation:1s LeftRight forwards;}
.content.ani .scene_02 .neighbor_01{ -webkit-transform:translateY(-8rem); transform:translateY(-8rem); -webkit-animation:1s TopBottom2 forwards; animation:1s TopBottom2 forwards;}
.content.ani .scene_02 .talk_02{ opacity:0; -webkit-animation:1s zoomIn 1s forwards; animation:1s zoomIn 1s forwards;}
.content.ani .scene_02 .talk_03{ opacity:0; -webkit-animation:1s zoomIn 6s forwards; animation:1s zoomIn 6s forwards;}
.content.ani .bird_01{ -webkit-animation:10s 2.5s RightLeft3 infinite forwards; animation:10s 2.5s RightLeft3 infinite forwards;}
.content.ani .bird_02{ -webkit-animation:10s RightLeft3 infinite forwards; animation:10s RightLeft3 infinite forwards;}
.content.ani .talk_02 p,.content.ani .talk_03 p{ opacity:0; -webkit-animation:1s 1.5s BottomTop3 forwards,1s 1.5s OpacityIn forwards; animation:1s 1.5s BottomTop3 forwards,.5s 1.5s OpacityIn forwards;}
.content.ani .talk_02 .talk_02_01{ -webkit-animation-delay:1.5s;}
.content.ani .talk_02 .talk_02_02{ -webkit-animation-delay:2.3s;}
.content.ani .talk_02 .talk_02_03{ -webkit-animation-delay:2.6s;}
.content.ani .talk_02 .talk_02_04{ -webkit-animation-delay:2.9s;}
.content.ani .talk_03 .talk_03_01{ -webkit-animation-delay:6.5s;}
.content.ani .talk_03 .talk_03_02{ -webkit-animation-delay:6.8s;}

/* scene-03 */
.content.ani .eyebrow_w_03,.content.ani .eyebrow_w_04{ -webkit-animation:.3s Bounce infinite; animation:.3s Bounce infinite;}
.content.ani .talk_02 .talk_02_07,.content.ani .talk_02 .talk_02_08{ opacity:0; -webkit-animation:.5s Shrink forwards,1s OpacityIn forwards; animation:.5s Shrink forwards,.5s OpacityIn forwards;}
.content.ani .talk_02 .talk_02_05{ -webkit-animation-delay:.5s;}
.content.ani .talk_02 .talk_02_06{ -webkit-animation-delay:1.3s;}
.content.ani .talk_02 .talk_02_07{ -webkit-animation-delay:1.6s;}
.content.ani .talk_02 .talk_02_08{ -webkit-animation-delay:1.9s;}
.content.ani .talk_02 .talk_02_09{ -webkit-animation-delay:2.2s;}
.content.ani .talk_03 .talk_03_03{ -webkit-animation-delay:.2s;}
.content.ani .talk_03 .talk_03_04{ -webkit-animation-delay:.5s;}
.content.ani .eye_n_05,.content.ani .eye_n_06{ -webkit-animation:.5s Shrink2 infinite; animation:.5s Shrink2 infinite;}
.content.ani .eye_n_06{ -webkit-animation-delay:.1s;}
.content.ani .btn_play{ opacity:0; -webkit-animation:.3s 6.5s Shrink3 forwards,.5s 6.5s Shrink2 infinite; animation:.3s 6.5s Shrink3 forwards,.5s 6.5s Shrink2 infinite;}


/* other */
.mscBtn{ -webkit-animation:2s linear Rotate360 infinite; animation:2s linear Rotate360 infinite;}


@-webkit-keyframes Rotate360{
	0%{ -webkit-transform:rotate(0); transform:rotate(0);}
	100%{ -webkit-transform:rotate(360deg); transform:rotate(360deg);}	
}	
@keyframes Rotate360{
	0%{ -webkit-transform:rotate(0); transform:rotate(0);}
	100%{ -webkit-transform:rotate(360deg); transform:rotate(360deg);}	
}


@-webkit-keyframes Shrink{
	0%{ -webkit-transform:scale(1.5); transform:scale(1.5);}
	100%{ -webkit-transform:scale(1); transform:scale(1);}	
}	
@keyframes Shrink{
	0%{ -webkit-transform:scale(1.5); transform:scale(1.5);}
	100%{ -webkit-transform:scale(1); transform:scale(1);}	
}

@-webkit-keyframes Shrink2{
	0%{ -webkit-transform:scale(1); transform:scale(1);}	
	50%{ -webkit-transform:scale(1.2); transform:scale(1.2);}
	100%{ -webkit-transform:scale(1); transform:scale(1);}	
}	
@keyframes Shrink2{
	0%{ -webkit-transform:scale(1); transform:scale(1);}	
	50%{ -webkit-transform:scale(1.2); transform:scale(1.2);}
	100%{ -webkit-transform:scale(1); transform:scale(1);}
}

@-webkit-keyframes Shrink3{
	0%{ -webkit-transform:scale(0.1); transform:scale(0.1); opacity:0;}
	100%{ -webkit-transform:scale(1); transform:scale(1); opacity:1;}	
}
	
@keyframes Shrink3{
	0%{ -webkit-transform:scale(0.1); transform:scale(0.1); opacity:0;}
	100%{ -webkit-transform:scale(1); transform:scale(1); opacity:1;}	
}

@-webkit-keyframes Bounce{
	0%{ -webkit-transform:translateY(0); transform:translateY(0);}
	50%{ -webkit-transform:translateY(-.05rem); transform:translateY(-.05rem);}
	100%{ -webkit-transform:translateY(0); transform:translateY(0);}	
}
	
@keyframes Bounce{
	0%{ -webkit-transform:translateY(0); transform:translateY(0);}
	50%{ -webkit-transform:translateY(-.05rem); transform:translateY(-.05rem);}
	100%{ -webkit-transform:translateY(0); transform:translateY(0);}	
}

@-webkit-keyframes OpacityIn{
	0%{ opacity:0;}	
	100%{ opacity:1;}	
}
@keyframes OpacityIn{
	0%{ opacity:0;}	
	100%{ opacity:1;}	
}

@-webkit-keyframes Flutter{
	0%{ -webkit-transform:translate(-.5rem,0); transform:translate(-.5rem,0); opacity:0;}
	5%{ -webkit-transform:translate(0rem,.3rem); transform:translate(0rem,.3rem); opacity:1;}
	10%{ -webkit-transform:translate(.5rem,6rem); transform:translate(.5rem,.6rem);}
	15%{ -webkit-transform:translate(1rem,.9rem); transform:translate(1rem,.9rem);}
	20%{ -webkit-transform:translate(1.5rem,1.2rem); transform:translate(1.5rem,1.2rem);}	
	25%{ -webkit-transform:translate(2rem,1.4rem); transform:translate(2rem,1.4rem);}
	30%{ -webkit-transform:translate(2.5rem,1.6rem); transform:translate(2.5rem,1.6rem);}	
	35%{ -webkit-transform:translate(3rem,1.8rem); transform:translate(3rem,1.8rem);}
	40%{ -webkit-transform:translate(3.5rem,2rem); transform:translate(3.5rem,2rem);}
	45%{ -webkit-transform:translate(4rem,2.2rem); transform:translate(4rem,2.2rem);}	
	50%{ -webkit-transform:translate(4.5rem,2.4rem); transform:translate(4.5rem,2.4rem);}	
	55%{ -webkit-transform:translate(5rem,2.5rem); transform:translate(5rem,2.5rem);}	
	60%{ -webkit-transform:translate(5.5rem,2.6rem); transform:translate(5.5rem,2.6rem);}	
	65%{ -webkit-transform:translate(6rem,2.7rem); transform:translate(6rem,2.7rem);}	
	70%{ -webkit-transform:translate(6.5rem,2.8rem); transform:translate(6.5rem,2.8rem);}	
	75%{ -webkit-transform:translate(7rem,2.9rem); transform:translate(7rem,2.9rem);}	
	80%{ -webkit-transform:translate(7.5rem,3rem); transform:translate(7.5rem,3rem);}	
	85%{ -webkit-transform:translate(8rem,3.1rem); transform:translate(8rem,3.1rem);}	
	90%{ -webkit-transform:translate(8.5rem,3.2rem); transform:translate(8.5rem,3.2rem);}	
	95%{ -webkit-transform:translate(9rem,3.3rem); transform:translate(9rem,3.3rem);}		
	100%{ -webkit-transform:translate(9.5rem,3.4rem); transform:translate(9.5rem,3.4rem);}	
}
@keyframes Flutter{
	0%{ -webkit-transform:translate(-.5rem,0); transform:translate(-.5rem,0); opacity:0;}
	5%{ -webkit-transform:translate(0rem,.3rem); transform:translate(0rem,.3rem); opacity:1;}
	10%{ -webkit-transform:translate(.5rem,6rem); transform:translate(.5rem,.6rem);}
	15%{ -webkit-transform:translate(1rem,.9rem); transform:translate(1rem,.9rem);}
	20%{ -webkit-transform:translate(1.5rem,1.2rem); transform:translate(1.5rem,1.2rem);}	
	25%{ -webkit-transform:translate(2rem,1.4rem); transform:translate(2rem,1.4rem);}
	30%{ -webkit-transform:translate(2.5rem,1.6rem); transform:translate(2.5rem,1.6rem);}	
	35%{ -webkit-transform:translate(3rem,1.8rem); transform:translate(3rem,1.8rem);}
	40%{ -webkit-transform:translate(3.5rem,2rem); transform:translate(3.5rem,2rem);}
	45%{ -webkit-transform:translate(4rem,2.2rem); transform:translate(4rem,2.2rem);}	
	50%{ -webkit-transform:translate(4.5rem,2.4rem); transform:translate(4.5rem,2.4rem);}	
	55%{ -webkit-transform:translate(5rem,2.5rem); transform:translate(5rem,2.5rem);}	
	60%{ -webkit-transform:translate(5.5rem,2.6rem); transform:translate(5.5rem,2.6rem);}	
	65%{ -webkit-transform:translate(6rem,2.7rem); transform:translate(6rem,2.7rem);}	
	70%{ -webkit-transform:translate(6.5rem,2.8rem); transform:translate(6.5rem,2.8rem);}	
	75%{ -webkit-transform:translate(7rem,2.9rem); transform:translate(7rem,2.9rem);}	
	80%{ -webkit-transform:translate(7.5rem,3rem); transform:translate(7.5rem,3rem);}	
	85%{ -webkit-transform:translate(8rem,3.1rem); transform:translate(8rem,3.1rem);}	
	90%{ -webkit-transform:translate(8.5rem,3.2rem); transform:translate(8.5rem,3.2rem);}	
	95%{ -webkit-transform:translate(9rem,3.3rem); transform:translate(9rem,3.3rem);}		
	100%{ -webkit-transform:translate(9.5rem,3.4rem); transform:translate(9.5rem,3.4rem);}	
}


@-webkit-keyframes BottomTop{
	0%{ -webkit-transform:translateY(3rem); transform:translateY(3rem);}	
	100%{ -webkit-transform:translateY(0); transform:translateY(0);}	
}
@keyframes BottomTop{
	0%{ -webkit-transform:translateY(3rem); transform:translateY(3rem);}	
	100%{ -webkit-transform:translateY(0); transform:translateY(0);}	
}

 
@-webkit-keyframes BottomTop2{
	0%{ -webkit-transform:translateY(8rem); transform:translateY(8rem);}
	100%{ -webkit-transform:translateY(0); transform:translateY(0);}
}

@keyframes BottomTop2{
	0%{ -webkit-transform:translateY(8rem); transform:translateY(8rem);}
	100%{ -webkit-transform:translateY(0); transform:translateY(0);}
}
@-webkit-keyframes BottomTop3{
	0%{ -webkit-transform:translateY(.2rem); transform:translateY(.2rem);}
	100%{ -webkit-transform:translateY(0); transform:translateY(0);}
}

@keyframes BottomTop3{
	0%{ -webkit-transform:translateY(.2rem); transform:translateY(.2rem);}
	100%{ -webkit-transform:translateY(0); transform:translateY(0);}
}

@-webkit-keyframes TopBottom{
	0%{ -webkit-transform:translateY(0); transform:translateY(0);}
	60%{ -webkit-transform:translateY(0); transform:translateY(0);}
	70%{ -webkit-transform:translateY(.05rem); transform:translateY(.05rem);}
    80%{ -webkit-transform:translateY(0); transform:translateY(0);}	
	90%{ -webkit-transform:translateY(.05rem); transform:translateY(.05rem);}
	100%{ -webkit-transform:translateY(0); transform:translateY(0);}
}
@keyframes TopBottom{
	0%{ -webkit-transform:translateY(0); transform:translateY(0);}
	60%{ -webkit-transform:translateY(0); transform:translateY(0);}
	70%{ -webkit-transform:translateY(.05rem); transform:translateY(.05rem);}
    80%{ -webkit-transform:translateY(0); transform:translateY(0);}	
	90%{ -webkit-transform:translateY(.05rem); transform:translateY(.05rem);}
	100%{ -webkit-transform:translateY(0); transform:translateY(0);}
}

@-webkit-keyframes TopBottom2{
	0%{ -webkit-transform:translateY(-10rem); transform:translateY(-10rem);}
	100%{ -webkit-transform:translateX(0); transform:translateY(0); }
}

@keyframes TopBottom2{
	0%{ -webkit-transform:translateY(-10rem); transform:translateY(-10rem);}
	100%{ -webkit-transform:translateY(0); transform:translateY(0);}
}


@-webkit-keyframes LeftRight{
	0%{ -webkit-transform:translateX(-2rem); transform:translateX(-2rem);}
	100%{ -webkit-transform:translateX(0); transform:translateX(0); }
}

@keyframes LeftRight{
	0%{ -webkit-transform:translateX(-2rem); transform:translateX(-2rem);}
	100%{ -webkit-transform:translateX(0); transform:translateX(0);}
}

@-webkit-keyframes LeftRight2{
	0%{ -webkit-transform:translateX(-8rem); transform:translateX(-8rem);}
	100%{ -webkit-transform:translateX(0); transform:translateX(0);}
}

@keyframes LeftRight2{
	0%{ -webkit-transform:translateX(-8rem); transform:translateX(-8rem);}
	100%{ -webkit-transform:translateX(0); transform:translateX(0);}
}

@-webkit-keyframes RightLeft{
	0%{ -webkit-transform:translateX(2rem); transform:translateX(2rem);}
	100%{ -webkit-transform:translateX(0); transform:translateX(0);}
}

@keyframes RightLeft{
	0%{ -webkit-transform:translateX(2rem); transform:translateX(2rem);}
	100%{ -webkit-transform:translateX(0); transform:translateX(0);}
}

@-webkit-keyframes RightLeft2{
	0%{ -webkit-transform:translateX(8rem); transform:translateX(8rem);}
	100%{ -webkit-transform:translateX(0); transform:translateX(0);}
}

@keyframes RightLeft2{
	0%{ -webkit-transform:translateX(8rem); transform:translateX(8rem);}
	100%{ -webkit-transform:translateX(0); transform:translateX(0);}
}

@-webkit-keyframes RightLeft3{
	0%{ -webkit-transform:translateX(0); transform:translateX(0);}
	100%{ -webkit-transform:translateX(-12rem); transform:translateX(-12rem);}
}

@keyframes RightLeft3{
	0%{ -webkit-transform:translateX(0); transform:translateX(0);}
	100%{ -webkit-transform:translateX(-12rem); transform:translateX(-12rem);}
}

@-webkit-keyframes zoomIn{

from {
	opacity: 0;
	-webkit-transform: scale3d(.1, .1, .1);
	transform: scale3d(.1, .1, .1);
}
50%,100%{
	opacity: 1;
}
}

@keyframes zoomIn{

from {
	opacity: 0;
	-webkit-transform: scale3d(.1, .1, .1);
	transform: scale3d(.1, .1, .1);
}
50%,100%{
	opacity: 1;
}
}