@charset "utf-8";

*{
	margin:0;
	padding:0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	/*font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;*/
	-webkit-text-size-adjust:100%;
}

p{
background-image:url(../images/000.png);	
}


body{
z-index : -1;
background-color:#000000;
}

/*画像のコピーガード*/
/*img {
  pointer-events: none; 
}*/


/*特定画像のみコピーガード*/
.copy-guard {
  pointer-events: none;
}






.fb_iframe_widget > span
{
  vertical-align: baseline !important;
}

#tweet{
	top:20px;
	left:550px;
	text-align:left;
	position:relative;
	z-index: 999;
}
	

.size16{
	line-height:25px;
	font-size:16px;
	letter-spacing:1px;
	text-align:left;
	color:#000000;
}

.size24{
	width:500px;
	min-width:500px;
	line-height:32px;
	font-size:23px!important;
	text-align:left;
	color:#000000;
}

#wrapper{
	width:100%;
	overflow:hidden;
	min-width:980px;
	position:relative;
}


#w1600{
	width: 1600px;
	position: relative;
	left: 50%;
	margin-left:-800px;
}


.w980{
	width:980px;
	margin:0 auto;
	position:relative;
}

#main{
	background-image:url(../images/main_img.png);
	background-color:#61bb2f;
	background-repeat:no-repeat;
	background-position:center;	
	position:relative;
	height:702px;

}

#co-logo{
	top:50px;
	left:30px;
	position:relative;
	margin-top:-16px;
}

#link_wrapper{
	z-index: 999;
	position:relative;
	text-align:right;
	margin-bottom:-180px;
}

ul { 
list-style-type: none; 
}


	
#title-wrapper{
	z-index : 999;
	position:relative;
	top:140px;
	text-align:center;
	}

.title{
	display:inline-block;
     }


#movie-wrapper .movie{
	position:relative;
	top:80px;
	z-index:999;
}




.movie{
	width:640px; height:360px;
	padding:1px;
	background-color:#007CFF;
	margin:0 auto 0;
}


#information{
	background-image:url(../images/bg_img_00.png);
	background-color:#e3caa5;
	background-repeat:no-repeat;
	background-position:center;	
	position:relative;
	height:869px;
	/*padding-top: 42px;*/
}

	#information-wrapper{
		/*top:37px;*/    /*topからの距離*/
		z-index:999;
		position:relative;
	}

	.information-list{
		text-align: center;
		background-color: #f7e5d2;
		width: 642px;
		height: 180px;
		margin:auto;
		border-radius: 10px;
		border:solid 5px #ccaa76;
		margin-bottom: 42px;
	}
		.information-header{
			padding:8px 0px;
			background-color: #3b1d08; 
			width:642px;
			height:32px; 
			border-radius: 5px 5px 0px 0px; 
			color:#f8f1dd;
			font-size:24px;
			font-weight: bold;
			vertical-align: middle;
		}

		.information-srcollbar {
	        overflow:auto;
	        width:612px;
	        height:115px;
	        padding:5px 15px 0px 5px;
	        margin-top:5px;
	        color:#000;
	        font-size:24px;
	        text-align: left;
	    }

		    .information-srcollbar::-webkit-scrollbar {
			    width: 10px;
			}
			/*スクロールバーの背景色・角丸指定*/
			.information-srcollbar::-webkit-scrollbar-track {
				border-radius: 10px;
				background: #d6bc96;
			}
			/*スクロールバーの色・角丸指定*/
			.information-srcollbar::-webkit-scrollbar-thumb {
			 	border-radius: 10px;
				background:#ab875d;
			}


	    .information-news{
	    	margin:5px 0px 10px 0px;
	    	line-height: 30px;
	    }

		    .information-time{
		    	padding:0px 45px;
		    	font-size:24px;
		    	font-weight: bold;
		    	color:#664026;
		    	display: inline-block;
		    	vertical-align: top;
		    }

		    .information-text{
		    	padding:0px 0px;
		    	font-size:20px;
		    	font-weight: bold;
		    	color:#000000;
		    	display: inline-block;
		    	word-wrap: break-word;
		    	width: 280px;
		    }

		    .information-text a{
		    	color:#df7300;
		    	outline: none!important;
		    	text-decoration: none;
		    }




	#information-pr-wrapper{
		height:487px;
		width:703px;
		margin:auto;
	}
		.pr-slide{
		position: absolute;
		top: 288px;
		left:  152px;
	}







#game{
	background-image:url(../images/bg_img_01.png);
	background-color: #61bb2f;
	background-repeat:no-repeat;
	background-position:center;	
	position:relative;
	height: 1975px;
}

	#game-wrapper{
		top:67px;
		z-index:999;
		position:relative;
	}

	.game_01 , .game_02 , .game_03{
		margin: 0 auto;
		text-align: center;
		position: relative;
		width: 601px;
	}

	.game-text{
		position: absolute; 
		top:  415px; 
		left: 60px;
		width:500px;		/*改行用のサイズ*/
		font-size:32px;
		line-height: 44px;
		color:#3b1d08;
		text-align: left;
		font-weight: bold;
		font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	}

	.game-movie{
		position: absolute;
		top: 110px;
		left:  35px;
	}


.section_title{
	position: absolute;
	top:-50px;
	left:190px;
  	z-index: 1000;
}

/*dl store*/
	.google-play{
		position: absolute;
		top:600px;
		left:214px;
	  	z-index: 1000;
	}
		.google-play2{
			position: absolute;
			top:210px;
			left:214px;
		  	z-index: 1000;
		}

	.app-store{
		position: absolute;
		top:610px;
		left:510px;
	  	z-index: 1000;
	}
		.app-store2{
			position: absolute;
			top:220px;
			left:510px;
		  	z-index: 1000;
		}

/*live-guide*/
.live-guide{
	position: absolute;
	top:610px;
	left:780px;
	z-index: 1000;
}


/*logo*/
.title-logo{
	position: absolute;
	top:40px;
	left:40px;
  	z-index: 1000;
}

/*TwitterLink*/
.twitter-link{
	position: absolute;
	top:520px;
	left:130px;
  	z-index: 1000;	
}


/*SNS share*/
.twitter{
	position: absolute;
	top:30px;
	left:720px;
	z-index: 1001;
}



/*language change*/
	.cp_ipselect {
		overflow: hidden;
		width: 127px;
		text-align: center;
		position: absolute;
		top:20px;
		left:830px;
		z-index: 1001;
	}
	.cp_ipselect select {
		width: 100%;
		padding-right: 1em;
		cursor: pointer;
		text-indent: 0.01px;
		text-overflow: ellipsis;
		border: none;
		outline: none;
		background: transparent;
		background-image: none;
		box-shadow: none;
		-webkit-appearance: none;
		appearance: none;
	}
	.cp_ipselect select::-ms-expand {
	    display: none;
	}
	.cp_ipselect.cp_sl {
		position: relative;
		border-radius: 10px;
		border: 3px solid #f39800;
	  	border-radius: 10px;
		background: #f7e5d2;
	}
	.cp_ipselect.cp_sl::before {
		position: absolute;
		top: 0.8em;
		right: 0.8em;
		width: 0;
		height: 0;
		padding: 0;
		content: '';
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-top: 6px solid #da3c41;
		pointer-events: none;
	}
	.cp_ipselect.cp_sl select {
		padding: 8px 38px 8px 8px;
		font-weight: bold;
		color: #7c6859;
	}



/*ユニットアイコンアニメ*/
.unit_00{
  background: url(../images/unit_img_00.png) no-repeat;
  width: 86px;
  height: 86px;
  animation: unitanim 1s steps(2) infinite;
  position: absolute;
  top: 1548px;
  left:880px;
  z-index: 1000;
}

.unit_01{
  background: url(../images/unit_img_01.png) no-repeat;
  width: 86px;
  height: 86px;
  animation: unitanim 1s steps(2) infinite;
  position: absolute;
  top: 198px;
  left:115px;
  z-index: 1000;
}


.unit_04{
  background: url(../images/unit_img_04.png) no-repeat;
  width: 86px;
  height: 86px;
  animation: unitanim 1s steps(2) infinite;
  position: absolute;
  top: 121px;
  left:20px;
  z-index: 1000;
}

.unit_05{
  background: url(../images/unit_img_05.png) no-repeat;
  width: 86px;
  height: 86px;
  animation: unitanim 1s steps(2) infinite;
  position: absolute;
  top: 588px;
  left:20px;
  z-index: 1000;
}

.unit_06{
  background: url(../images/unit_img_06.png) no-repeat;
  width: 86px;
  height: 86px;
  animation: unitanim 1s steps(2) infinite;
  position: absolute;
  top: 713px;
  left:60px;
  z-index: 1000;
}

.unit_07{
  background: url(../images/unit_img_07.png) no-repeat;
  width: 86px;
  height: 86px;
  animation: unitanim 1s steps(2) infinite;
  position: absolute;
  top: 973px;
  left:800px;
  z-index: 1000;
}

.unit_08{
  background: url(../images/unit_img_08.png) no-repeat;
  width: 86px;
  height: 86px;
  animation: unitanim 1s steps(2) infinite;
  position: absolute;
  top: 1038px;
  left:880px;
  z-index: 1000;
}

.unit_09{
  background: url(../images/unit_img_09.png) no-repeat;
  width: 86px;
  height: 86px;
  animation: unitanim 1s steps(2) infinite;
  position: absolute;
  top: 1453px;
  left:795px;
  z-index: 1000;
}

.unit_10{
  background: url(../images/unit_img_10.png) no-repeat;
  width: 86px;
  height: 86px;
  animation: unitanim 1s steps(2) infinite;
  position: absolute;
  top: 1642px;
  left:80px;
  z-index: 1000;
}

.unit_11{
  background: url(../images/unit_img_11.png) no-repeat;
  width: 86px;
  height: 86px;
  animation: unitanim 1s steps(2) infinite;
  position: absolute;
  top: 1768px;
  left:18px;
  z-index: 1000;
}

/*specエリアのユニットアイコンアニメ*/
.unit_00b{
  background: url(../images/unit_img_00.png) no-repeat;
  width: 86px;
  height: 86px;
  animation: unitanim 1s steps(2) infinite;
  position: absolute;
  top: 378px;
  left:340px;
  z-index: 1000;
}

.unit_01b{
  background: url(../images/unit_img_01.png) no-repeat;
  width: 86px;
  height: 86px;
  animation: unitanim 1s steps(2) infinite;
  position: absolute;
  top: 378px;
  left:410px;
  z-index: 1000;
}

.unit_02{
  background: url(../images/unit_img_02.png) no-repeat;
  width: 86px;
  height: 86px;
  animation: unitanim 1s steps(2) infinite;
  position: absolute;
  top: 378px;
  left:480px;
  z-index: 1000;
}

.unit_03{
  background: url(../images/unit_img_03.png) no-repeat;
  width: 86px;
  height: 86px;
  animation: unitanim 1s steps(2) infinite;
  position: absolute;
  top: 378px;
  left:550px;
  z-index: 1000;
}


/*informationエリアのユニットアイコンアニメ*/
.unit_00c{
  background: url(../images/unit_img_00.png) no-repeat;
  width: 86px;
  height: 86px;
  animation: unitanim 1s steps(2) infinite;
  position: absolute;
  top: -20px;
  left:260px;
  z-index: 1000;
}

.unit_01c{
  background: url(../images/unit_img_01.png) no-repeat;
  width: 86px;
  height: 86px;
  animation: unitanim 1s steps(2) infinite;
  position: absolute;
  top: -20px;
  left:330px;
  z-index: 1000;
}

.unit_02c{
  background: url(../images/unit_img_02.png) no-repeat;
  width: 86px;
  height: 86px;
  animation: unitanim 1s steps(2) infinite;
  position: absolute;
  top: -20px;
  left:550px;
  z-index: 1000;
}

.unit_03c{
  background: url(../images/unit_img_03.png) no-repeat;
  width: 86px;
  height: 86px;
  animation: unitanim 1s steps(2) infinite;
  position: absolute;
  top: -20px;
  left:620px;
  z-index: 1000;
}

 
	@keyframes unitanim {
	  to {
	    background-position: -172px 0;
	  }
	}






/* App download
------------------------------  */ 
	#smartphone{
		background: #000;
		padding:10px;
	}

	.download_erea{
		margin-top: 30px;
	    margin-bottom: 30px;
	}

	.app_icon{
		display: inline-block;
	    margin-right: 15px;
	    height: 105px;
	    vertical-align: top;
	    width: auto;
	}

	.app_text{
		text-align: left;
	    font: normal 65% sans-serif;
	    width: 100%;
	    color: #fff;
	}

	.app_container{
		text-align: center;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    max-width: 100%;
	    -webkit-box-align: start;
	    -ms-flex-align: start;
	    -ms-grid-row-align: flex-start;
	    align-items: flex-start;
	}

	.wrap_right{
	    display: inline-block;
	    vertical-align: top;
	}

	.wrap_icon {
	    text-align: left;
	    margin: 21px 0 0 0;
	}

	.wrap_icon a{
	    text-decoration: none;
	}






#movie2-wrapper{
	float:right;
	top:-170px;
	right:20px;
	z-index : 999;
	position:relative;
}

.movie2{
	width:480px; height:270px;
	padding:1px;
	background-color:#007CFF;
	margin:0 auto 0;
}




#spec{
	background-image:url(../images/bg_img_02.png);
	background-repeat:no-repeat;
	background-position:center;	
	position:relative;
	height:474px;
}

#spec h2{
	text-align:center;
	top:50px;
	position:relative;
	z-index:999;
}	

#spec-wrapper{
	z-index:999;
}

#spec-list{
	background-color: rgba(255,255,255,0.7);
	width:	694px;
	height: 274px;
	text-align: center;
	margin: 0 auto;
	position: relative;
	top:49px;
	border-radius: 30px;

}

#spec-text{
	float:left;
	top:30px;
	left:60px;
	position:relative;

}

#spec-img{
	float:left;	
	top:32px;
	left:32px;
	position:relative;
}

span {
	display: inline-block;
	width: 4em;
}



/* footer
------------------------------  */ 

#footer {
	width:100%;
	height:165px;
	max-height:300px;
	background-color:#3b1d08;
	color: #FFFFFF;
	text-align: center;
	padding-top: 29px;
}


.inline-block {
    text-align: center;
}

.inline-block li {
    display: inline-block;
}






/*test*/