@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:#efefef 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:#d4a659;
	font-size:12px;
	line-height:1.5;
	color:#000;
	overflow:hidden;
}
	#intro p.remain{
		background:#FFE1C2;
		border-bottom:1px #333 solid;
		clear:both;
		text-align:center;
		color:#333;
		font-size:16px;
		font-weight:bold;
		padding:5px 0px;
		white-space:nowrap;
		overflow:hidden;
		line-height:1!important;
	}
	#intro .bnr{
		position:absolute;
		left:0;
		top:0;
	}
	#intro h1{
		text-align:center;
		line-height:1;
		height:284px;
		overflow:hidden;
	}
	#intro .campaign{
		position:absolute;
		top:283px;
		left:0;
		width:320px;
		text-align:center;
		font-weight:bold;
		font-size:11.5px;
		color:#e40000;
	}
	#intro .tab{
		background:url(../images/intro/bg_tab.jpg) repeat-x top left;
		-webkit-background-size:85px 71px;
		-moz-background-size:85px 71px;
		-ms-background-size:85px 71px;
		background-size:85px 71px;
		padding-top:20px;
	}
	#intro .tab ul{
		display:block;
		padding:0 0 0 10px;
		height:51px;
		overflow:hidden;
	}
	#intro .tab li{
		display:inline;
	}
	#intro .tab li a{
		display:block;
		float:left;
		margin-right:10px;
	}
	#intro .tab li.start{
		display:inline-block;
		background: url(../images/loading_count.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:44px;
	}
	#intro .tab li a.startBtn{
		display:none;
	}
	#intro .startBtnDis{
		display:none;
	}
	#intro #howto{
		background:url(../images/bg.jpg) #f2e3d4;
		-webkit-background-size:57px 57px;
		-moz-background-size:57px 57px;
		-ms-background-size:57px 57px;
		background-size:57px 57px;
		clear:both;
		padding:13px 10px 10px 10px;
		color:#342e29;
		
	}
	#intro #howto .box{
		padding-bottom:12px;
	}
	#intro #howto .box .advice{
		height:50px;
		overflow:hidden;
		margin:0;
	}
	#intro #howto .box .charenge{
		height:53px;
		overflow:hidden;
		margin:0;
	}
	#intro #howto .box .txt{
		border:1px solid #403b36;
		padding:8px 6px 8px 10px;
		font-size:12px;
		line-height:21px;
		background:url(../images/intro/bg_howto_box.jpg) #fff;
		-webkit-background-size:57px 57px;
		-moz-background-size:57px 57px;
		-ms-background-size:57px 57px;
		background-size:57px 57px;
	}
	#intro #howto .box .txt .image{
		text-align:center;
		margin:5px 0 10px 0;
	}
	
	#intro #howto .box .red{
		color:#e45000;
	}
	#intro #howto .btnRanking{
		text-align:center;
		margin:5px 0 26px 0;
	}
	#intro #howto .rankingPoint h2{
		color:#b45a56;
		font-weight:bold;
		font-size:18px;
		margin-right:-10px;
	}
	#intro #howto .rankingPoint h2 img{
		padding-right:2px;
		position:relative;
		top:4px;
	}
	#intro #howto .rankingPoint h2 span{
		font-weight:normal;
		font-size:12px;
	}
	#intro #howto .rankingPoint table{
		width:auto;
		margin:10px 30px 10px 3px;
		float:left;
	}
	#intro #howto .rankingPoint th{
		font-weight:normal;
		padding:0 12px 7px 0;
	}
	#intro #howto .rankingPoint td{
		font-weight:bold;
		padding:0 0 7px 0;
	}
	#intro #howto .rankingPoint span{
		font-size:9px;
	}
	#intro #howto .rankingPoint .note{
		clear:both;
		margin:0 0 10px 5px;
		font-weight:bold;
	}
	#intro .environment h2{
		color:#b45a56;
		font-weight:bold;
		font-size:18px;
	}
	#intro .environment ul{
		text-align:left;
		margin:5px 0 0 0;
	}
	#intro .environment ul li{
		background:url(../images/intro/list_dot.gif) no-repeat 0 4px;
		-webkit-background-size:11px 11px;
		-moz-background-size:11px 11px;
		-ms-background-size:11px 11px;
		background-size:11px 11px;
		padding:0 0 0 12px;
	}
	#intro .environment .note{
		font-size:10px;
		padding: 5px 0 0 0;
	}
	
	#intro .copyright{
		font-size:7px;
		text-align: center;
		padding:35px 0 10px 0;
		line-height:1;
		color:#666;
	}


#game{
	display:none;
	position:absolute;
	top:0px;
	width:320px;
	height:416px;
	-webkit-background-size:320px 70px;
	-moz-background-size:320px 70px;
	-ms-background-size:320px 70px;
	background-size:320px 70px;
	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{
		font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	    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:url(../images/bg.jpg) #f2e3d4;
	-webkit-background-size:57px 57px;
	-moz-background-size:57px 57px;
	-ms-background-size:57px 57px;
	background-size:57px 57px;
	font-size:14px;
	line-height:1;
	color:#333;
	overflow:hidden;
}
	#end table{
		border-spacing:0;
		border-collapse:collapse;
	}
	#end .wrap{
		padding:10px;
	}
	#end #endHead{
		margin-bottom:6px;
	}
	#end #endHead h2{
		float:left;
		width:100px;
	}
	#end #endHead p{
		font-size:9px;
		color:#b45a56;
		height:15px;
		overflow:hidden;
		float:left;
		width:102px;
		padding-top:5px;
	}
	#end #endHead p:last-child{
		width:95px;
		white-space:nowrap;
	}
	#end #endHead span{
		padding-left:6px;
	}
	#end #endResult{
	}
	#end #endResult p{
		font-weight:bold;
		font-size:10px;
		margin-bottom:5px;
	}
	#end #endResult h2{
		height:35px;
		overflow:hidden;
	}
	#end .scoreHead {
		width:100%;
		margin-top:-1px;
	}
	#end .scoreHead th,#end .scoreHead td{
	}
	#end .scoreHead .scoreTr{
		border:1px solid #b45a56;
		background:#fff;
	}
	#end .scoreHead .totalTr{
		border:1px solid #b45a56;
	}
	#end .scoreHead .totalTr td{
		background: url(../images/end/score_bg.jpg) #b45a56 no-repeat left top;
		-webkit-background-size:298px 32px;
		-moz-background-size:298px 32px;
		-ms-background-size:298px 32px;
		background-size:298px 32px;
		color:#fff;
		font-weight:bold;
		height:32px;
		font-size:13px;
		text-align:right;
	}
	#end .scoreHead .totalTr .score{
		font-size:18px;
	}
	#end .scoreHead .scoreTr th{
		font-size:12px;
		padding:8px;
		color:#b45a56;
	}
	#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 #b45a56;
		color:#fff;
		height:44px;
		overflow:hidden;
	}
	#end .scoreHead .pointTr td{
		background:#b45a56 url(../images/end/bg_point.jpg) no-repeat top center;
		-webkit-background-size:298px 43px;
		-moz-background-size:298px 43px;
		-ms-background-size:298px 43px;
		background-size:298px 43px;
		font-weight:bold;
		font-size:18px;
		padding:0 10px 0 0;
		text-align:right;
	}
	#end .scoreHead .pointTr td span{
		font-size:32px;
	}
	
	#end .scoreMain {
		width:100%;
		font-weight:bold;
	}
	#end .scoreMain th {
		border:1px solid #b45a56;
		background:#f6d0c0;
		color:#b45a56;
		text-align:center;
		font-size:10px;
		padding:6px 10px;
		font-weight:normal;
	}
	#end .scoreMain td {
		border:1px solid #b45a56;
		background:#fff;
		text-align:center;
		font-size:10px;
		padding:6px 10px;
	}
	#end .scoreMain span{
		font-size:13px;
	}
	
	#end .scoreDetail{
		font-size:10px;
		border-bottom:1px solid #b45a56;
		border-right:1px solid #b45a56;
		border-left:1px solid #b45a56;
		border-radius:0 0 5px 5px;
		background:#fff;
		white-space: nowrap;
		color:#b45a56;
		margin-bottom:10px;
	}
	#end .scoreDetail table{
		width:100%;
	}
	#end .scoreDetail th{
		padding:6px 10px;
	}
	#end .scoreDetail td{
		padding:6px 10px 6px 0;
		text-align:right;
	}
	
	
	#end .message{
		width:300px;
		height:70px;
		overflow:hidden;
		background:url(../images/end/bg_leveltype.jpg) no-repeat top left;
		-webkit-background-size:300px 80px;
		-moz-background-size:300px 80px;
		-ms-background-size:300px 80px;
		background-size:300px 80px;
		padding:10px 0 0 25px;
	}
	#end .message p{
		color:#b45a56;
		font-size:15px;
		font-weight:bold;
		height:20px;
		margin:0;
		overflow:hidden;
	}
	#end .message p .txt{
		position:relative;
		top:-6px;
	}
	#end .message p .userName{
		font-size:14px;
		color:#38322d;
		display:inline-block;
		max-width:110px;
		overflow:hidden;
		white-space:nowrap;
		text-overflow: ellipsis;
	}
	
	#end .share{
		width:300px;
		position:relative;
		overflow:hidden;
		background:url(../images/end/bg_share.jpg) no-repeat top left;
		-webkit-background-size:300px 110px;
		-moz-background-size:300px 110px;
		-ms-background-size:300px 110px;
		background-size:300px 110px;
		height:110px;
	}
	#end .share form{
		display:inline;
	}
	#end .share button{
		border:none;
		background:none;
		margin:0;
		padding:0;
		display:inline;
	}
	#end .share ul{
		position:absolute;
		left:112px;
		top:42px;
		display:inline;
	}
	#end .share li{
		float:left;
		display:inline;
		margin-right:30px;
	}
	#end .campaignInfo{
		text-align:center;
		color:#e40000;
		font-weight:bold;
		font-size:11.5px;
		margin:0 -15px 10px -15px;
		line-height:1.3;
	}
	#end .campaignInfo span{
		font-size:10px;
		color:#555;
	}
	#end .campaignInfo strong{
		color:#890a08;
	}
	
	#end .scoreMonth{
		margin-bottom:15px;
	}
	#end .scoreMonth h2{
	
		height:29px;
		overflow:hidden;
	}
	#end .scoreMonth th{
		padding:6px 4px;
	}
	#end .scoreMonth td{
		padding:6px 4px;
	}
	
	#end #endRanking h2{
		background: url(../images/end/ttl_ranking_bg.jpg) #b45a56 no-repeat left top;
		-webkit-background-size:300px 35px;
		-moz-background-size:300px 35px;
		-ms-background-size:300px 35px;
		background-size:300px 35px;
		color:#fff;
		font-size:17px;
		padding:8px 0 0 36px;
		height:27px;
	}
	#end #endRanking h2 img{
		position:relative;
		top: 3px;
		padding:0 0 0 2px;
	}
	#end #endRanking table{
		clear:both;
		width:100%;
	}
	#end #endRanking td {
		border:1px solid #b45a56;
		background:#fff;
		font-size:13px;
		font-weight:bold;
		padding:5px;
	}
	#end #endRanking .rankTd{
		background:#f5cbba;
		text-align:center;
		width:25px;
		padding:0;
	}
	#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{
		font-size:7px;
		text-align: center;
		padding:35px 0 10px 0;
		line-height:1;
		color:#666;
	}

#ranking{
	display:none;
	position:absolute;
	width:320px;
	background:url(../images/bg.jpg) #f2e3d4;
	-webkit-background-size:57px 57px;
	-moz-background-size:57px 57px;
	-ms-background-size:57px 57px;
	background-size:57px 57px;
	font-size:14px;
	line-height:1;
	color:#333;
}
	#ranking table{
		border-spacing:0;
		border-collapse:collapse;
	}
	#ranking .wrap{
		padding:10px;
	}
	#ranking #rankingHead{
	}
	#ranking #rankingHead p{
		font-size:9px;
		color:#b45a56;
		height:15px;
		overflow:hidden;
	}
	#ranking #rankingHead p.right{
		margin-top:-15px;
		text-align:right;
		
	}
	#ranking #rankingHead span{
		font-weight:bold;
		padding-left:10px;
	}
	#ranking #rankingResult{
		margin-bottom:10px;
	}
	#ranking #rankingResult p{
		font-weight:bold;
		font-size:10px;
		margin-bottom:5px;
	}
	#ranking #rankingResult h2{
		height:29px;
		overflow:hidden;
	}
	#ranking .scoreHead {
		width:100%;
		margin-top:-1px;
	}
	#ranking .scoreHead th,#ranking .scoreHead td{
	}
	#ranking .scoreHead .scoreTr{
		border:1px solid #b45a56;
		background:#fff;
	}
	#ranking .scoreHead .totalTr{
		border:1px solid #b45a56;
	}
	#ranking .scoreHead .totalTr td{
		background: url(../images/end/score_bg.jpg) #b45a56 no-repeat left top;
		-webkit-background-size:298px 32px;
		-moz-background-size:298px 32px;
		-ms-background-size:298px 32px;
		background-size:298px 32px;
		color:#fff;
		font-weight:bold;
		height:32px;
		font-size:13px;
		text-align:right;
	}
	#ranking .scoreHead .totalTr .score{
		font-size:18px;
	}
	#ranking .scoreHead .scoreTr th{
		font-size:12px;
		padding:8px;
		color:#b45a56;
	}
	#ranking .scoreHead .scoreTr td{
		font-weight:bold;
		font-size:16px;
		padding:6px 8px;
		text-align:right;
	}
	#ranking .scoreHead .scoreTr .levelType{
		font-size:20px;
	}
	#ranking .scoreHead .pointTr{
		border:1px solid #b45a56;
		color:#fff;
		height:44px;
		overflow:hidden;
	}
	#ranking .scoreHead .pointTr td{
		background:#b45a56 url(../images/end/bg_point.jpg) no-repeat top center;
		-webkit-background-size:298px 43px;
		-moz-background-size:298px 43px;
		-ms-background-size:298px 43px;
		background-size:298px 43px;
		font-weight:bold;
		font-size:18px;
		padding:0 10px 0 0;
		text-align:right;
	}
	#ranking .scoreHead .pointTr td span{
		font-size:32px;
	}
	
	#ranking .scoreMain {
		width:100%;
		font-weight:bold;
	}
	#ranking .scoreMain th {
		border:1px solid #b45a56;
		background:#f6d0c0;
		color:#b45a56;
		text-align:center;
		font-size:10px;
		padding:10px 4px;
		font-weight:normal;
		width:25%;
		white-space: nowrap;
	}
	#ranking .scoreMain td {
		border:1px solid #b45a56;
		background:#fff;
		text-align:center;
		font-size:10px;
		padding:8px 6px;
	}
	#ranking .scoreMain span{
		font-size:13px;
	}
	#ranking .btnReflesh{
		text-align:center;
		margin:15px 0;
	}
	#ranking #rankingRanking h2{
		background: url(../images/end/ttl_ranking_bg.jpg) #b45a56 no-repeat left top;
		-webkit-background-size:300px 35px;
		-moz-background-size:300px 35px;
		-ms-background-size:300px 35px;
		background-size:300px 35px;
		color:#fff;
		font-size:17px;
		padding:8px 0 0 36px;
		height:27px;
	}
	#ranking #rankingRanking h2 img{
		position:relative;
		top: 3px;
		padding:0 0 0 2px;
	}
	#ranking #rankingRanking table{
		clear:both;
		width:100%;
	}
	#ranking #rankingRanking td {
		border:1px solid #b45a56;
		background:#fff;
		font-size:13px;
		font-weight:bold;
		padding:5px;
	}
	#ranking #rankingRanking .rankTd{
		background:#f5cbba;
		text-align:center;
		width:25px;
		padding:0;
	}
	#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{
		font-size:7px;
		text-align: center;
		padding:35px 0 10px 0;
		line-height:1;
		color:#666;
	}
	
	
#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:48px 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 .best{
		background-image:url(../images/socialbonus/mainimg_best.jpg);
	}
	#socialBonus .working{
		background-image:url(../images/socialbonus/mainimg_working.jpg);
	}
	#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;
}