@charset "utf-8";




.info												{position:absolute; width:400px; left:255px; top:170px; border:6px solid #FFCD34; background:#FFF; padding:23px 29px 15px;}
.info dt											{float:left; width:400px; font:20px nbgM; color:#213F6E; line-height:25px; padding-bottom:2px;}
.info dd											{float:left; width:400px; font:15px nbgM; color:#222; line-height:20px;}
.info dd.btn										{width:247px; border-top:1px solid #D9D9D9; padding-top:10px; padding-left:153px; margin-top:10px;}
.info dd.btn a									{display:block; overflow:hidden; width:94px; height:39px; text-indent:-9999px; background:url("../image/inc/btn_pop_01.png") no-repeat;}



.wrong											{position:absolute; width:170px; left:380px; top:210px; border:6px solid #FFCD34; background:#FFF; padding:23px 29px 15px;}
.wrong dt										{float:left; width:170px; font:20px nbgM; color:#213F6E; line-height:25px; text-align:center; padding-bottom:2px;}
.wrong dd										{float:left; width:170px; font:15px nbgM; color:#222; line-height:20px;}
.wrong dd.btn									{width:132px; border-top:1px solid #D9D9D9; padding-top:10px; padding-left:38px; margin-top:5px;}
.wrong dd.btn a								{display:block; overflow:hidden; width:94px; height:39px; text-indent:-9999px; background:url("../image/inc/btn_pop_01.png") no-repeat;}



.correct											{position:absolute; width:300px; left:305px; top:190px; border:6px solid #FFCD34; background:#FFF; padding:23px 29px 15px;}
.correct dt										{float:left; width:300px; font:20px nbgM; color:#213F6E; line-height:25px; padding-bottom:2px;}
.correct dd										{float:left; width:300px; font:15px nbgM; color:#222; line-height:20px;}
.correct dd.btn								{width:197px; border-top:1px solid #D9D9D9; padding-top:10px; padding-left:103px; margin-top:10px;}
.correct dd.btn a								{display:block; overflow:hidden; width:94px; height:39px; text-indent:-9999px; background:url("../image/inc/btn_pop_01.png") no-repeat;}



canvas											{position:absolute; left:0; top:0; background:transparent; z-index:1;}
canvas img										{z-index:200;}

#content-3										{position:relative; float:left; width:986px; height:586px; background:url("../image/action_03/bg_01.png") no-repeat;}
#content-3 dt									{position:absolute; width:840px; height:30px; left:73px; top:98px; font:17px nbgM; color:#222; line-height:20px; background:url("../image/inc/bullet_01.png") 0 6px no-repeat; padding-left:10px;}
#content-3 dd									{position:absolute;}



#content-3 .ball								{width:155px; height:154px; left:72px; bottom:62px; text-indent:-9999px; background:url("../image/action_03/img_ball.png") no-repeat; cursor:pointer; z-index:200;}
#content-3 .ball-shadow					{width:175px; height:35px; left:57px; bottom:46px; text-indent:-9999px; background:url("../image/action_03/img_shadow.png") no-repeat;}
#content-3 .goal								{width:230px; height:250px; right:112px; top:187px; z-index:300;}
#content-3 .goal-area						{width:230px; height:250px; right:112px; top:187px; text-indent:-9999px; z-index:250;}

#content-3 .gauge							{height:25px; left:303px; bottom:111px; text-indent:-9999px; background:url("../image/action_03/img_gauge.png") no-repeat;}

@-webkit-keyframes myfirstkeyframe {
	0% {width:0px;}
	100% {width:256px;}
}
@-moz-keyframes myfirstkeyframe {
	0% {width:0px;}
	100% {width:256px;}
}
@-o-keyframes myfirstkeyframe {
	0% {width:0px;}
	100% {width:256px;}
}
@keyframes myfirstkeyframe {
	0% {width:0px;}
	100% {width:256px;}
}

#content-3 .gauge { 
	-webkit-animation: myfirstkeyframe ease-in 2s 1 forwards; 
	-moz-animation: myfirstkeyframe ease-in 2s 1 forwards; 
	-o-animation: myfirstkeyframe ease-in 2s 1 forwards; 
	animation: myfirstkeyframe ease-in 2s 1 forwards; 
}


#content-3 .button									{cursor:pointer;}