@charset "utf-8";

#animation_body
{
	width:320px;
	height:320px;
	position:absolute;
	overflow:hidden;
	background:#f58ffb;
	display:none;
}

.gacha1
{
	width:320px;
	height:320px;
	background:url(../img/gacha1.png) no-repeat;
	position:absolute;
	top:0px;
	left:0px;
	opacity:0;
	-webkit-animation-name:stop;
	-webkit-animation-iteration-count:1;
	-webkit-animation-duration:1s;
	-webkit-transition-timing-function:linear;
}

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

.gacha2
{
	width:320px;
	height:320px;
	background:url(../img/gacha2.png) no-repeat;
	position:absolute;
	top:0px;
	left:0px;
	opacity:1;
	-webkit-animation-name:endless;
	-webkit-animation-iteration-count:1;
	-webkit-animation-duration:2s;
	-webkit-transition-timing-function:linear;
}

@-webkit-keyframes endless
{
	0%{opacity:0;}
	25%{opacity:0;}
	50%{opacity:1;}
	100%{opacity:1;}
}

.handle
{
	width:320px;
	height:320px;
	background:url(../img/handle2.png) no-repeat;
	position:absolute;
	top:109px;
	left:129px;
	opacity:1;
	-webkit-animation-name:handle;
	-webkit-animation-iteration-count:1;
	-webkit-animation-duration:4s;
	-webkit-transition-timing-function:linear;
	-webkit-transform-origin:29px 29px;
}

@-webkit-keyframes handle
{
	0%{opacity:0;}
	12%{opacity:0;}
	25%{opacity:1;}
	30%{opacity:1; -webkit-transform:rotate(0deg);}
	45%{opacity:1; -webkit-transform:rotate(180deg);}
	50%{opacity:1; -webkit-transform:rotate(180deg);}
	60%{opacity:1; -webkit-transform:rotate(360deg);}
	100%{opacity:1; -webkit-transform:rotate(360deg);}
}

.mask
{
	width:320px;
	height:320px;
	position:absolute;
	top:0px;
	left:0px;
	-webkit-mask-box-image:url(../img/mask.png);
	-webkit-mask-repeat:no-repeat;
}

.capsule
{
	width:61px;
	height:61px;
	position:absolute;
	top:235px;
	left:229px;
	background:url(../img/capsule.png) no-repeat;
	opacity:0;
	-webkit-animation-name:fall;
	-webkit-animation-iteration-count:1;
	-webkit-animation-duration:4s;
	-webkit-transition-timing-function:ease-out;
	-webkit-transform-origin:29px 29px;
}

@-webkit-keyframes fall
{
	0%{opacity:0; top:150px; left:229px;}
	59%{opacity:1; top:150px; left:229px;}
	60%{opacity:1; top:150px; left:229px; -webkit-transform:rotate(0deg);}
	70%{opacity:1; top:235px; left:229px; -webkit-transform:rotate(360deg);}
	75%{opacity:1; top:235px; left:229px; -webkit-transform:rotate(360deg);}
	80%{opacity:1; top:225px; left:229px; -webkit-transform:rotate(360deg);}
	83%{opacity:1; top:225px; left:229px; -webkit-transform:rotate(360deg);}
	84%{opacity:0; top:225px; left:229px; -webkit-transform:rotate(360deg);}
	100%{opacity:0; top:225px; left:229px; -webkit-transform:rotate(360deg);}
}

.capsule2
{
	width:61px;
	height:61px;
	position:absolute;
	top:80px;
	left:128px;
	background:url(../img/capsule.png) no-repeat;
	opacity:1;
	-webkit-animation-name:up;
	-webkit-animation-iteration-count:1;
	-webkit-animation-duration:4s;
	-webkit-transition-timing-function:linear;
	-webkit-transform-origin:29px 29px;
}

@-webkit-keyframes up
{
	0%{opacity:0; top:225px; left:229px;}
	83%{opacity:0; top:225px; left:229px;}
	84%{opacity:1; top:225px; left:229px;}
	100%{opacity:1; top:80px; left:128px;}
}

.star
{
	width:320px;
	height:320px;
	position:absolute;
	top:0px;
	left:0px;
	background:url(../img/star.png) no-repeat;
	opacity:1;
	-webkit-animation-name:star;
	-webkit-animation-iteration-count:1;
	-webkit-animation-duration:4.5s;
	-webkit-transition-timing-function:ease-out;
}

@-webkit-keyframes star
{
	0%{opacity:0; -webkit-transform:scale(0.2,0.2) rotate(0deg);}
	61%{opacity:0; -webkit-transform:scale(0.2,0.2) rotate(0deg);}
	100%{opacity:1; -webkit-transform:scale(1.0,1.0) rotate(360deg);}
}

.pushenter
{
	width:320px;
	height:320px;
	position:absolute;
	top:0px;
	left:0px;
	background:url(../img/pushenter.png) no-repeat;
	opacity:1;
	-webkit-animation-name:pushenter;
	-webkit-animation-iteration-count:1;
	-webkit-animation-duration:4.5s;
	-webkit-transition-timing-function:linear;
}

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

.gacha_bg
{
	width:320px;
	height:320px;
	position:absolute;
	top:0px;
	left:0px;
	background:url(../img/gacha_bg.png) no-repeat;
}