@charset "utf-8";


body {
	background-color:#000;
	color:#000;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
a{
	color:#fff;
	text-decoration:underline;
}
#wrapper{
	width:320px;
}
#footer{
	height:30px;
	background:#666;
}
#main{
	position:relative;
	width:320px;
	height:363px;
}
#loading{
	display:none;
	position:absolute;
	width:320px;
	height:416px;
	background:#000 url(../images/loading.gif) center center no-repeat;
	-webkit-background-size:40px 40px;
	-moz-background-size:40px 40px;
	-ms-background-size:40px 40px;
	background-size:40px 40px;
}

#intro{
	position:absolute;
	width:320px;
	background:#000;
	font-size:12px;
	line-height:1.5;
	color:#b5b5b5;
}
	#intro p.remain{
		background:#000;
		clear:both;
		text-align:center;
		color:#B5B5B5;
		font-size:16px;
		font-weight:bold;
		padding:5px 0px;
		white-space:nowrap;
		overflow:hidden;
		line-height:1!important;
	}
	#intro .ttl{
		text-align:center;
		height:356px;
		background:url(../images/intro/ttl.jpg) #000 no-repeat center 29px;
		-webkit-background-size:320px 334px;
		-webkit-background-size:320px 334px;
		-moz-background-size:320px 334px;
		-ms-background-size:320px 334px;
		background-size:320px 334px;
	}
	#intro .ttl p.campaign{
		color:#fff;
		font-size:11px;
		font-weight:bold;
		padding-top:2px;
		height:20px;
		white-space:nowrap;
		overflow:hidden;
		margin:0 5px;
	}
	#intro .descript p.campaign span{
		text-decoration:underline;
	}
	#intro .tab{
		margin-top:283px;
	}
	#intro .tab ul{
		display:block;
		padding:0 0 0 9px;
		height:43px;
		overflow:hidden;
	}
	#intro .tab li{
		display:inline;
	}
	#intro .tab li a{
		display:block;
		float:left;
		margin-right:3px;
	}
	#intro .tab li.start{
		display:inline-block;
		background: url(../images/loading.gif) center center no-repeat;
		-webkit-background-size:40px 40px;
		-moz-background-size:40px 40px;
		-ms-background-size:40px 40px;
		background-size:40px 40px;
		
		width:146px;
		height:43px;
	}
	#intro .tab li a.startBtn{
		display:none;
	}
	#intro .startBtnDis{
		display:none;
	}
	#intro #howto{
		background:#000;
		clear:both;
		padding:20px;
	}
	#intro #howto p{
		margin-bottom:1em;
	}
	#intro #howto h2{
		color:#962121;
		font-weight:bold;
		font-size:18px;
		margin-bottom:5px;
	}
	#intro #howto .btnRanking{
		margin:20px 0 10px 0;
	}
	#intro #howto .img{
		margin:3px 0 20px 0;
	}
	#intro #howto .rankingTtl{
		padding: 8px 0px 8px 23px;
		background:url(../images/intro/ico_p.gif) no-repeat 0px 10px;
		-webkit-background-size:22px 22px;
		-moz-background-size:22px 22px;
		-ms-background-size:22px 22px;
		background-size:22px 22px;
		font-weight:bold;
		font-size:16px;
		margin-right:-10px;
	}
	#intro #howto .rankingTtl span{
		font-size:12px;
		font-weight:normal;
	}
	
	#intro #howto .rankingPoint{
		width:auto;
		margin:0 0 15px 0;
	}
	#intro #howto .rankingPoint table{
		width:50%;
		float:left;
	}
	#intro #howto .rankingPoint th{
		font-weight:normal;
		padding:0 14px 3px 0;
	}
	#intro #howto .rankingPoint td{
		padding:0 30px 3px 0;
		font-weight:bold;
	}
	#intro #howto .rankingPoint span{
		font-size:9px;
	}
	#intro .environment ul{
		text-align:left;
		margin:0 0 10px 10px;
	}
	#intro .environment ul li{
		background:url(../images/intro/list_dot.gif) no-repeat 0 6px;
		-webkit-background-size:7px 3px;
		-moz-background-size:7px 3px;
		-ms-background-size:7px 3px;
		background-size:7px 3px;
		padding-left:10px;
	}
	#intro .environment .note{
		padding-left:10px;
	}
	
	#intro .copyright{
		color:#666;
		font-size:7px;
		text-align:center;
		margin:20px 0 5px 0;
		line-height:1;
	}


#game{
	display:none;
	position:absolute;
	top:0px;
	width:320px;
	height:416px;
	background:#000;
	user-select:none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	font-size:10px;
	line-height:1.2;
	overflow:hidden;
}
	#gameCanvas,
	#gameCanvas div,
	#gameCanvas img{
	    user-select:none;
	    -moz-user-select: none;
	    -khtml-user-select: none;
	    -webkit-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

#end{
	display:none;
	position:absolute;
	width:320px;
	background:#e7e3e3;
	font-size:14px;
	line-height:1;
	color:#000;
	overflow:hidden;
}
	#end table{
		border-spacing:0;
		border-collapse:collapse;
	}
	#end .wrap{
		padding:10px;
	}
	#end #endHead{
		background:#000;
		color:#e7e3e3;
		height:49px;
		border-bottom:1px solid #aa9035;
	}
	#end #endHead h2{
		float:left;
	}
	#end #endHead .right{
		float:right;
		width:120px;
		padding-top:11px;
	}
	#end #endHead p{
		height:13px;
	}
	#end #endHead p span{
		position:relative;
		top:-2px;
		display:inline-block;
		font-size:9px;
		padding-left:5px;
		text-align:left;
		width:90px;
		height:13px;
		overflow:hidden;
		white-space:nowrap;
		text-overflow: ellipsis;
	}
	#end #endResult .message{
		background:url(../images/end/message_bg.gif) no-repeat;
		-webkit-background-size:300px 18px;
		-moz-background-size:300px 18px;
		-ms-background-size:300px 18px;
		background-size:300px 18px;
		position:relative;
		height:18px;
		margin-bottom:9px;
	}
	#end #endResult .message p{
		position:absolute;
		top:0;
		left:146px;
		width:98px;
		text-align:center;
		font-size:14px;
		color:#962121;
		font-weight:bold;
	}
	#end .scoreHead {
		width:100%;
		margin-top:-1px;
	}
	#end .scoreHead th,#end .scoreHead td{
	}
	#end .scoreHead .scoreTr{
		border:1px solid #000;
		background:#fff;
	}
	#end .scoreHead .scoreTr th{
		font-size:12px;
		padding:8px;
	}
	#end .scoreHead .scoreTr td{
		font-weight:bold;
		font-size:16px;
		padding:6px 8px;
		text-align:right;
	}
	#end .scoreHead .scoreTr .levelType{
		font-size:20px;
	}
	#end .scoreHead .pointTr{
		border:1px solid #000;
		color:#aa9035;
		height:46px;
		overflow:hidden;
	}
	#end .scoreHead .pointTr th img{
		margin:0 5px 0 0;
		position:relative;
		top:3px;
	}
	#end .scoreHead .pointTr th{
		background:#000 url(../images/end/bg_point.gif) no-repeat top left;
		-webkit-background-size:289px 45px;
		-moz-background-size:289px 45px;
		-ms-background-size:289px 45px;
		background-size:289px 45px;
		font-size:20px;
		padding: 0 0 0 33px;
	}
	#end .scoreHead .pointTr td{
		background:#000 url(../images/end/bg_point.gif) no-repeat top right;
		-webkit-background-size:289px 45px;
		-moz-background-size:289px 45px;
		-ms-background-size:289px 45px;
		background-size:289px 45px;
		font-weight:bold;
		font-size:18px;
		padding:0 10px 0 0;
		text-align:right;
	}
	#end .scoreHead .pointTr td span{
		font-size:32px;
	}
	
	#end .scoreDetail{
		background:#fff;
		border:1px solid #000;
		margin-top:-1px;
		width:100%;
	}
	#end .scoreDetail th{
		font-size:10px;
		padding:7px 10px;
		white-space: nowrap;
	}
	#end .scoreDetail td{
		font-size:10px;
		text-align:right;
		padding:7px 10px 7px 0;
	}
	
	#end .scoreMain {
		width:100%;
		font-weight:bold;
	}
	#end .scoreMain th {
		border:1px solid #000;
		background:#bbb;
		text-align:center;
		font-size:10px;
		padding:10px 6px;
		font-weight:normal;
		width:50%;
	}
	#end .scoreMain td {
		border:1px solid #000;
		background:#fff;
		text-align:center;
		font-size:10px;
		padding:8px 6px;
	}
	#end .scoreMain span{
		font-size:13px;
	}
	
	#end .scoreMonth{
		width:100%;
		margin-bottom:15px;
	}
	#end .scoreMonth th.ttl{
		color:#fff;
		font-size:18px;
		padding:7px 34px;
		background:url(../images/end/ico_month.gif) #000 no-repeat 8px 6px;
		-webkit-background-size:98px 21px;
		-moz-background-size:98px 21px;
		-ms-background-size:98px 21px;
		background-size:98px 21px;
		text-align:left;
		
	}
	#end .scoreMonth th {
		border:1px solid #000;
		background:#bbb;
		text-align:center;
		font-size:10px;
		padding:10px 6px;
		white-space:nowrap;
		font-weight:normal;
		width:33%;
	}
	#end .scoreMonth tr:last-Child th{
		width:34%;
	}
	#end .scoreMonth td {
		border:1px solid #000;
		background:#fff;
		text-align:center;
		font-size:10px;
		padding:8px 6px;
	}
	#end .scoreMonth span{
		font-size:13px;
	}
	
	#end .share{
		height:55px;
		position:relative;
		border:1px solid #000;
		margin:-1px 0 15px 0;
		background:#bbb;
	}
	#end .share p{
		position:absolute;
		left:12px;
		top:18px;
		font-size:13px;
		font-weight:bold;
	}
	#end .share p img{
		position:relative;
	}
	#end .share form{
		display:inline;
	}
	#end .share button{
		border:none;
		background:none;
		margin:0;
		padding:0;
		display:inline;
	}
	#end .share ul{
		position:absolute;
		left:144px;
		top:8px;
		display:inline;
	}
	#end .share li{
		float:left;
		display:inline;
		margin-left:25px;
	}
	#end .campaignInfo{
		text-align:center;
		font-size:12px;
		color:#000;
		font-size:12px;
		margin:0 -15px 10px -15px;
		line-height:1.4;
	}
	#end .campaignInfo span{
		color:#c60000;
		font-weight:bold;
		text-decoration:underline;
	}
	#end .campaignInfo strong{
		color:#c60000;
	}
	#end #endRanking{
		clear:both;
		width:100%;
	}
	#end #endRanking th{
		border:1px solid #222;
		background:#000;
		color:#fff;
		font-size:17px;
		padding:10px 7px 10px 10px;
		background:url(../images/end/ico_rank.gif) #000 no-repeat 8px 10px;
		-webkit-background-size:197px 21px;
		-moz-background-size:197px 21px;
		-ms-background-size:197px 21px;
		background-size:197px 21px;
		
	}
	#end #endRanking th span{
		display:block;
		width:45px;
		padding-top:2px;
		text-align:right;
	}
	#end #endRanking th .left{
		float:left;
	}
	#end #endRanking th .descript{
		float:right;
		position:relative;
		top:0px;
	}
	#end #endRanking td {
		border:1px solid #000;
		background:#fff;
		font-size:13px;
		font-weight:bold;
		padding:5px;
	}
	#end #endRanking .rankTd{
		background:#bbb;
		text-align:center;
		width:25px;
	}
	#end #endRanking .scoreTd{
		text-align:right;
	}
	#end #endRanking .userName{
		display:block;
		width:160px;
		height:1.4em;
		overflow:hidden;
		white-space:nowrap;
		text-overflow: ellipsis;
	}
	#end .copyright{
		color:#666;
		font-size:7px;
		text-align:center;
		margin:20px 0 5px 0;
		line-height:1;
	}

#ranking{
	display:none;
	position:absolute;
	width:320px;
	background:#e7e3e3;
	font-size:14px;
	line-height:1;
	color:#000;
	overflow:hidden;
}
	#ranking table{
		border-spacing:0;
		border-collapse:collapse;
	}
	#ranking .wrap{
		padding:10px;
	}
	#ranking #rankingHead{
		background:#000;
		color:#e7e3e3;
		height:49px;
		border-bottom:1px solid #aa9035;
	}
	#ranking #rankingHead h2.ttl{
		width:83px;
		float:left;
	}
	#ranking #rankingHead .right{
		float:right;
		width:227px;
	}
	#ranking #rankingHead p{
		height:13px;
		width:50%;
		float:left;
	}
	#ranking #rankingHead p span{
		position:relative;
		top:-2px;
		display:inline-block;
		font-size:9px;
		padding-left:4px;
		text-align:left;
		width:85px;
		height:13px;
		overflow:hidden;
		white-space:nowrap;
		text-overflow: ellipsis;
	}
	#ranking #rankingResult .message{
		background:url(../images/end/message_bg.gif) no-repeat;
		-webkit-background-size:300px 18px;
		-moz-background-size:300px 18px;
		-ms-background-size:300px 18px;
		background-size:300px 18px;
		position:relative;
		height:18px;
		margin-bottom:9px;
	}
	#ranking #rankingResult .message p{
		position:absolute;
		top:0;
		left:146px;
		width:98px;
		text-align:center;
		font-size:14px;
		color:#962121;
		font-weight:bold;
	}
	#ranking .scoreMonth{
		width:100%;
		margin-bottom:15px;
	}
	#ranking .scoreMonth th.ttl{
		color:#fff;
		font-size:18px;
		padding:7px 34px;
		background:url(../images/end/ico_month.gif) #000 no-repeat 8px 6px;
		-webkit-background-size:98px 21px;
		-moz-background-size:98px 21px;
		-ms-background-size:98px 21px;
		background-size:98px 21px;
		text-align:left;
		
	}
	#ranking .scoreMonth th {
		border:1px solid #000;
		background:#bbb;
		text-align:center;
		font-size:10px;
		padding:10px 6px;
		white-space:nowrap;
		font-weight:normal;
		width:33%;
	}
	#ranking .scoreMonth tr:last-Child th{
		width:34%;
	}
	#ranking .scoreMonth td {
		border:1px solid #000;
		background:#fff;
		text-align:center;
		font-size:10px;
		padding:8px 6px;
	}
	#ranking .scoreMonth span{
		font-size:13px;
	}
	#ranking .btnReflesh{
		text-align:center;
		margin:20px 0;
	}
	
	#ranking #rankingRanking{
		clear:both;
		width:100%;
	}
	#ranking #rankingRanking th{
		border:1px solid #222;
		background:#000;
		color:#fff;
		font-size:17px;
		padding:10px 7px 10px 10px;
		background:url(../images/end/ico_rank.gif) #000 no-repeat 8px 10px;
		-webkit-background-size:197px 21px;
		-moz-background-size:197px 21px;
		-ms-background-size:197px 21px;
		background-size:197px 21px;
	}
	#ranking #rankingRanking th span{
		display:block;
		width:45px;
		padding-top:2px;
		text-align:right;
	}
	#ranking #rankingRanking th .left{
		float:left;
	}
	#ranking #rankingRanking th .descript{
		float:right;
		position:relative;
		top:0px;
	}
	#ranking #rankingRanking td {
		border:1px solid #000;
		background:#fff;
		font-size:13px;
		font-weight:bold;
		padding:5px;
	}
	#ranking #rankingRanking .rankTd{
		background:#bbb;
		text-align:center;
		width:25px;
	}
	#ranking #rankingRanking .scoreTd{
		text-align:right;
	}
	#ranking #rankingRanking .userName{
		display:block;
		width:160px;
		height:1.4em;
		overflow:hidden;
		white-space:nowrap;
		text-overflow: ellipsis;
	}
	#ranking .copyright{
		color:#666;
		font-size:7px;
		text-align:center;
		margin:20px 0 5px 0;
		line-height:1;
	}
	
	

#socialBonus{
	display:none;
	top:0;
	left:0;
	position:absolute;
	width:320px;
	background: rgba(0,0,0,0.6);
	font-size:12px;
	line-height:1.5;
	color:#333;
	z-index:100;
	text-align:center;
	height:416px;
}
	#socialBonus .wrap{
		width:250px;
		margin:100px auto 0 auto;
		text-align:left;
	}
	#socialBonus .head{
		
		width:246px;
		height:37px;
		border-top:2px solid #21b7ee;
		border-right:2px solid #21b7ee;
		border-left:2px solid #21b7ee;
		border-radius:4px 4px 0 0;
		background:url(../images/socialbonus/head_bg.gif) repeat-x;
		-webkit-background-size:1px 37px;
		-moz-background-size:1px 37px;
		-ms-background-size:1px 37px;
		background-size:1px 37px;
	}
	#socialBonus h2{
		float:left;
		margin:5px 0 0 8px;
	}
	#socialBonus .close{
		float:right;
		margin:5px 7px 0 0;
	}
	#socialBonus .main{
		width:246px;
		border-right:2px solid #21b7ee;
		border-left:2px solid #21b7ee;
		background:#222;
	}
	#socialBonus .mainImg{
		background-repeat:no-repeat;
		-webkit-background-size:246px 75px;
		-moz-background-size:246px 75px;
		-ms-background-size:246px 75px;
		background-size:246px 75px;
		text-align:center;
		font-weight:bold;
		padding-top:9px;
		height:66px;
		overflow:hidden;
		font-size:12px;
		color:#563107;
	}
	#socialBonus .mainImg strong{
		color:#e00000;
	}
	
	#socialBonus .levelup{
		background-image:url(../images/socialbonus/mainimg_levelup.gif);
	}
	#socialBonus .working{
		background-image:url(../images/socialbonus/mainimg_working.gif);
	}
	#socialBonus .point{
		height:30px;
		overflow:hidden;
		border-bottom:2px solid #3c3c3c;
	}
	#socialBonus .shareBody{
		margin:7px 11px 0 11px;
		background:#fff;
		border:1px solid #a8a8a8;
		border-radius:4px;
		padding:8px;
	}
	#socialBonus .img{
		width:66px;
		height:57px;
		overflow:hidden;
		float:left;
	}
	#socialBonus .txt{
		width:140px;
		float:left;
		font-size:8px;
	}
	#socialBonus .foot{
		width:246px;
		border-bottom:2px solid #21b7ee;
		border-right:2px solid #21b7ee;
		border-left:2px solid #21b7ee;
		border-radius:0 0 4px 4px;
		background:#222;
		padding-top:10px;
		padding-bottom:4px;
		text-align:center;
	}
	
	#socialBonus .shareBtn{
		width:218px;
		margin:0 auto;
	}
	#socialBonus .shareBtn li{
		display: inline;
	}
	#socialBonus .shareBtn li button{
		background:none;
		margin:0;
		padding:0;
		border:none;
		width:61px;
		display:block;
		margin-right:17px;
		margin-left: 25px;
		float:left;
	}
	#socialBonus .shareBtn li:last-child button{
		margin-right:0;
	}
	#socialBonus form{
		display:inline;
	}



#initData{
	display:none;
}