@charset "UTF-8";
body{
	padding:0;
	margin:0;
	width:100%;
	height:100%;
	position:absolute;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color:black;
	-webkit-touch-callout:none;
  	-webkit-user-select:none;
}

input{padding:0;}

#wrapper{
	position:relative;
	width:100%;
	top:0;
	height:100%;
	min-height:640px;
	visibility:hidden;
	
	overflow:hidden;
	height:880px;
	/*overflow:hidden;*/
}

#header{
	background-color:blakc;
	width:640px;
	margin:0 auto;
	height:115px;
	padding-top:0px;
	position:relative;
	z-index:1;
	background-image:url(../img/gage_header.png);
	background-position:center;
	background-repeat:no-repeat;
}



#footer{
	background-color:black;
	width:640px;
	margin:0 auto;
	position:relative;
	z-index:1;
	/*
	bottom:0;*/
	height:129px;
	/*overflow:hidden;
	padding-top:10px;*/
	background-image:url(../img/gage_footer.png);
	background-position:center;
	background-repeat:no-repeat;
}

#container{
	position:relative;
	/*height:100%;*/
	height:880px;
}

#content{
	width:640px;
	height:640px;
	margin:0 auto;
	background-color:black;
	position:relative;
}

.score_block{padding-top:1px;}

#score1{
	width:66px;
	height:43px;
	position:absolute;
	left:24px;
	top:61px;
}

#score1 .num{
	width:33px;
	height:43px;
	/*border:solid red 1px;*/
	position:absolute;
	right:0;
	background-image:url(../img/numbers.png);
	background-size:100% 1000%;
	-webkit-transition:background-position 0.5s ease-in-out;
}


#score1 .num.notransition{
	-webkit-transition:none;
	background-position:0 43px
}
#score1 .num.ten{
	left:0;
	right:auto;	
}

#score1 .num.zero{background-position:0 0}
#score1 .num.one{background-position:0 -43px}
#score1 .num.two{background-position:0 -86px}
#score1 .num.three{background-position:0 -129px}
#score1 .num.four{background-position:0 -172px}
#score1 .num.five{background-position:0 -215px}
#score1 .num.six{background-position:0 -258px}
#score1 .num.seven{background-position:0 -301px}
#score1 .num.eight{background-position:0 -344px}
#score1 .num.nine{background-position:0 -387px}

#scoredino{
	width:512px;
	margin-left: 105px;
	margin-top:3px;
	padding-top:1px;
}

#scoredino .hit{
	width:60px;
	height:58px;
	margin-right:-9px;
	float:left;
	visibility:hidden;
}

#scoredino .hit.show{
	visibility:visible;
}

#scoredino .column{
	/*border:solid red 1px;*/
	padding-top:1px;
	position:relative;
}

#scoredino .column:nth-child(2){
	top:-12px;
}

#scoredino.twoline .column:nth-child(2){
	top:-34px;
}
#scoredino.threeline .column:nth-child(2){
	top:-42px;
}

#scoredino .column:nth-child(3){
	top:-68px;
}
#scoredino.threeline .column:nth-child(3){
		top:-84px;
}

#scoredino .column:nth-child(4){
	top:-126px;
}

#scoredino .hit.scene1{
	background-image:url(../img/hitdino1.png);}
#scoredino .hit.scene2{
	background-image:url(../img/hitdino2.png);}
#scoredino .hit.scene3{
	background-image:url(../img/hitdino3.png);}
	


#score2 .pose{
	position:absolute;
	width:133px;height:164px;
	top:-35px;
}

#score2 .pose .fig{
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	-webkit-transition:opacity 0.5s ease-in-out;
	opacity:0;
	background-image:url(../img/hp_gage_seet.png);
}

#score2 .pose .fig.show{opacity:1};

#score2 .pose .fig:nth-child(1){background-position:0 0;}
#score2 .pose .fig:nth-child(2){background-position:-133px 0;}
#score2 .pose .fig:nth-child(3){background-position:0 -164px;}
#score2 .pose .fig:nth-child(4){background-position:-133px -164px;}
#score2 .pose .fig:nth-child(5){background-position:0 -328px;}
#score2 .pose .fig:nth-child(6){background-position:-133px -328px;}
#score2 .pose .fig:nth-child(7){background-position:0 -492px;}
#score2 .pose .fig:nth-child(8){background-position:-133px -492px;}
#score2 .pose .fig:nth-child(9){background-position:0 -656px;}
#score2 .pose .fig:nth-child(10){background-position:-133px -656px;}

#score2{
	width:130px;
	height:43px;
	position:absolute;
}

#score2 .num{
	width:19px;
	height:25px;
	/*border:solid red 1px;*/
	position:relative;
	background-image:url(../img/numbers.png);
	background-size:100% 1000%;
	-webkit-transition:background-position 0.5s ease-in-out;
	float:left;
}

#score2 .num.ten{
	
}
#score2 .num{
	
}


#score2 .num.notransition{
	-webkit-transition:none;
	background-position:0 -250px
}

#score2 .var{
	width:57px;
	height:25px;
	margin-top:74px;
	margin-left:100px;	
}
#score2 .var .num.handred{
	margin-right:-3px;
	-webkit-transition:none;
}
#score2 .var.ten{
	width:38px;
	margin-left:118px;	
}
#score2 .var.one{
	width:19px;
	margin-left:130px;	
}
#score2 .ten .num.handred,
#score2 .one .num.handred,
#score2 .one .num.ten{
	display:none;	
}


#score2 .num.zero{background-position:0 0}
#score2 .num.one{background-position:0 -25px}
#score2 .num.two{background-position:0 -50px}
#score2 .num.three{background-position:0 -75px}
#score2 .num.four{background-position:0 -100px}
#score2 .num.five{background-position:0 -125px}
#score2 .num.six{background-position:0 -150px}
#score2 .num.seven{background-position:0 -175px}
#score2 .num.eight{background-position:0 -200px}
#score2 .num.nine{background-position:0 -225px}



#header .score_block{
	width:640px;	
	margin:0 auto;
	
}

#score3{
	position:absolute;
	right:20px;
	top:-33px;
	width:154px;
	height:154px;
}

#score3 .watch{
	position:absolute;
	width:100%;height:100%;
	background-image:url(../img/watch_base.png);
}

#score3 .var{
	position:absolute;
	width:100%;height:100%;
	background-image:url(../img/watch_needle.png);
	-webkit-transform-origin:50% 50%;
}

.title{
	float:left;	
}

.var{
	
}

/*
Loading....
*******************************/

#start_screen{
	width:281px;height:84px;
	position:absolute;
	left:50%;
	margin-left:-140px;
	top:50%;
	margin-top:-40px;
}

#start_screen,#loading{
	-webkit-transition:opacity 0.5s ease-in-out;
}

#start_screen.hide,#loading.hide{
	opacity:0;
}

#start_text,#loading{
	position:absolute;
	top:0;	
}

#start_text{
	visibility:hidden;
	-webkit-transition:opacity 1s ease-out;
}

#start_text.show{
	visibility:visible;
}

#start_text.hide{
	opacity:0;
}

#start_text div{
	/*display:block;*/
	position:absolute;
	top:0;
	opacity:0;
	-webkit-transition:opacity 0.5s ease-out;
}

#start_text.show .shine{
	opacity:1;
}

#start_text.show .text{
	opacity:1;
	/*-webkit-transition-delay:0.3s;*/
}

#movie{
	width:640px;
	height:640px;
	position:absolute;
	top:0;
}

#game_title{
	width:280px;height:84px;
	left:180px;
	top:270px;
	position:absolute;
	
	opacity:0;
}

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

#game_title img{
	-webkit-transition:opacity 0.5s ease-out;
}
#game_title.show{
	-webkit-animation:brink 2s ease-in-out infinite;
}
#game_title.hide img{
	opacity:0;
}

/*
スマホ横状態のとき
**********************************/
.yoko #container{
	height:640px;	
}
.yoko #header{
	position:absolute;
	text-align:center;
	height:100%;
	padding-top:0;
	right:0;
	background-image:url(../img/right_scoreback.jpg);
	background-position:center;
}

.yoko #header .score_block{
	width:200px;	
}


.yoko .yoko #footer{float:none;height:26px;margin-top:10px;}

.yoko #footer{
	position:absolute;
	text-align:center;
	bottom:auto;
	top:0;
	left:0;
	height:100%;
	padding-top:0px;
	background-image:url(../img/left_scoreback.jpg);
	background-position:center;
}

.yoko #score1{
	float:none;height:26px;
	position:absolute;
	top:36px;
	left:50%;
	margin-left:8px;
}


.yoko #footer #score2{
	left: 50%;
	margin-left:-95px;
	top:127px;
}

.yoko #footer #score3{
	position:absolute;
	top:auto;
	bottom:23px;
	left:50%;
	margin-left:-77px;
	margin-top:10px;
}

/*#scoredino .hit{
	width:60px;
	height:58px;
	margin-right:-9px;
	float:left;
	visibility:hidden;
}*/

.yoko #scoredino{
	width:153px;
	margin-top:80px;
	position: absolute;
	left: 50%;
	margin-left: -80px
}
.yoko #scoredino .hit{
	margin-bottom:-10px;
	/*margin-bottom:-16px;*/
}

.yoko #scoredino.twoline .hit{
	margin-bottom:-15px;
}

.yoko #scoredino.threeline .hit{
	margin-bottom:-21px;
}

.yoko #scoredino .column:after{
	content:normal;
}


.yoko #scoredino .column:nth-child(2){
	top:0px;
}

.yoko #scoredino .column:nth-child(3){
	top:0px;
}

.yoko #scoredino .column:nth-child(4){
	top:0px;
}


/*
画面のゆれ
***************************/

.canvas{
	
}

.canvas.move{
	-webkit-animation:gatagata 1s linear;
}

@-webkit-keyframes gatagata{
	
	0%{-webkit-transform:translate(0px,0px)}
	4%{-webkit-transform:translate(0px,0px)}
	
	5%{-webkit-transform:translate(4px,-4px)}
	9%{-webkit-transform:translate(4px,-4px)}
	
	10%{-webkit-transform:translate(2px,-18px)}
	23%{-webkit-transform:translate(2px,-8px)}
	
	24%{-webkit-transform:translate(0px,0px)}
	34%{-webkit-transform:translate(0px,0px)}
	
	35%{-webkit-transform:translate(-8px,4px)}
	53%{-webkit-transform:translate(-8px,4px)}
	
	54%{-webkit-transform:translate(0px,-7px)}
	63%{-webkit-transform:translate(0px,-7px)}
	
	64%{-webkit-transform:translate(-5px,3px)}
	78%{-webkit-transform:translate(-5px,3px)}
	
	79%{-webkit-transform:translate(-2px,-4px)}
	81%{-webkit-transform:translate(-2px,-4px)}
	
	82%{-webkit-transform:translate(0,0)}
	100%{-webkit-transform:translate(0,0)}
	
}

/*
ログイン
*******************************/

#login_box{
	width:320px;
	height:376px;
	border:solid 2px white;
	border-radius:6px;
	position:absolute;
	left:50%;
	margin-left:-162px;
	top:50%;
	margin-top:-198px;
	color:white;
	text-align:center;
}

#login_box [class^='message']{
	margin-bottom:3px;	
}

#login_box .message3{
	margin-bottom:-8px;
}

#login_box .input1,
#login_box .input2{
	width:160px;
	margin:0 auto 10px;
	padding-left:10px;
	padding-right:10px;
	background-color:white;
}
#login_box input{
	display:inline-block;
	width:160px;
	text-align:left;
	font-size:16px;
	border:none;
	outline: 0;
	position:relative;
	z-index:10;
}

#login_box .alerts{
	height:32px;
	margin:0 auto 10px;
	position:relative;
}

#login_box .alert1,
#login_box .alert2,
#login_box .alert3{
	position:absolute;
	top:0;
	width:100%;
	color:yellow;
	visibility:hidden;
	opacity:0;
	transition:opacity 1s ease-out;
}

#login_box .alert3{
	margin-top:-5px;
}

#login_box .alert1.show,
#login_box .alert3.show{
	visibility:visible;
	opacity:1;
}


#login_box .title,
#login_box .login_btn,
#login_box .regist_btn,
#regist .regist_btn{
	float:none;
	font-weight:bold;
	text-align:center;
	margin:15px auto 15px;
	background-color: gray;
	width:100px;
	height: 26px;
	padding-top:2px;
	border-radius: 4px;
	font-size:16px;
	line-height:26px;
	padding-left:10px;
	padding-right:10px;
	position:relative;
	z-index:10;
}

#login_box .login_btn{
	background-color:#88aaaa;
	position:relative;
	z-index:10;
}

#login_box .title{
	margin-top:30px;
}

#login .alert3{
	font-size:0.75em;
}

#login{transition:opacity 1s ease-out}

#login.hide{
	opacity:0;
}

#regist{
	display:none;
	position:absolute;
	left:50%;
	margin-left:-112px;
	transition:opacity 1s ease-out 0.5s;
	top: 25px;
}

#regist .regist_btn{
	background-color:#88aaaa;
}

#regist.show{
	display:block;
	opacity:1;
}

#regist .input2{
	margin-botto:15px;
}

#regist .alerts{
	height:48px;
	margin-bottom:25px;
}

#regist .alerts .alert1.show,
#regist .alerts .alert2.show{
	visibility:visible;
	opacity:1;
}

#regist .alerts .alert1.hide{
	opacity:0;
}

/*
result_box
********************/

#result_box{
	position:absolute;
	top:0;
	color:white;	
	width: 520px;
	padding:40px 60px;
}

#usr_ranking{
	color:#FF9;
}

#usr_ranking,
#top_ten{
	position:absolute;
	top:0;
	width:520px;
	padding-top:40px;
}

#usr_ranking,
#top_ten{
	opacity:0;
	-webkit-transition:opacity 1s ease-out;
}

#usr_ranking.show,
#top_ten.show{
	opacity:1;
}

#result_box table tr:first-child td:first-child{
	width:100%;text-align:center;
	font-weight: bold;
}

#result_box table td{
	text-align:right;
	height:2.5em;
}

#result_box table td:nth-child(1){
	width:3em;
}
#result_box table td:nth-child(2){
	width:4em;
}

#result_box table td:nth-child(3){
	width:6em;
}

#result_box table td:nth-child(4){
	width:10em;
	font-size:0.8em;
}
#result_box table td:nth-child(5){
	font-size:0.8em;
}

#usr_ranking .user{
	color:red;
}

#usr_ranking .next_btn{
	width:10em;
	text-align: center;
	padding:3px 6px;
	border-radius:14px;
	background-color:#69C;
	color:white;
	position:absolute;
	bottom:-80px;
	left:50%;
	margin-left:-5.3em;
}






.clearfix{
	
}

.clearfix:after{
	content:".";
	font-size:0;
	line-height:0;
	visibility:hidden;
	display:block;
	clear:both;
}