/* 2020ヒーローズ style*/
@charset "utf-8";
*{
	margin : 0;
	padding : 0;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	position: relative;
}

html {
    height: 0;
}

body {
	width: 100%;
	height:0;
	margin: 0px;
	padding: 0px;
	position: relative;
	overflow-x: hidden;
	background-color: #000000;

	
}

img {
    border-style:none;
}

a img {
    border-style:none;
}

.wrap {
	overflow: hidden;
	width: 100%;
	background-color: #f8003a;
	z-index: -1;
	-webkit-text-size-adjust: 100%;
}



/*---　ヘッダー　-------------------*/
.wrap_header {
	background-color: #000000;
	width:100%;
	z-index: 1;

}

.header_contents {
	background-color: #ffffff;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:5px;
	

}

.header_contents .whdc_logo{
	position: relative;
	margin-top:10px;
	padding-left: 50px;
}


/*---　アニメーション　-------------------*/
.wrap_canvas{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: -1;
	background-image: url("../images/top_still.png")
}

#canvas {
	background: #000000;
	text-align:center;
}


/*---　ゲームロゴ　-------------------*/
.wrap_logo {
	width:100%;
	margin-left: auto;
	margin-right: auto;
	/*text-align:center;*/
 	height:543px;
  	position: relative;
}

.game_logo {
	width: 916px;
	/*height: 111px;*/
  	padding-left:30px;
  	padding-right:20px;
	vertical-align:middle;
  	position: absolute;
  	top: 50%;
  	-webkit-transform: translateY(-50%);
  	-moz-transform:translateY(-50%);
     transform: translateY(-50%);
}


/*---　wrap_01　-------------------*/
.wrap_01 {
	width:100%;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	background: -moz-linear-gradient(to bottom,#f8003a 0%,#f8003a 2.1%,#191970 2.1%,#191970 100%);
	background: -webkit-linear-gradient(to bottom,#f8003a 0%,#f8003a 2.1%,#191970 2.1%,#191970 100%);
	background: linear-gradient(to bottom,#f8003a 0%,#f8003a 2.1%,#191970 2.1%,#191970 100%); 
}

.contents_01{
	width:1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top:-25px;
}


.DL_area01 a{
	display:block;
}

.DL_area01 .pf_01{
	position: relative;
	width:1000px;
}


.DL_area01 .appstore{
	position: absolute;
	bottom: 17px;
	left:80px;
}


.DL_area01 .googleplay{
	position: absolute;
	bottom: 17px;
	left:670px;
}



.DL_area02 {
	background-color: #191970;
	width:1000px;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-left: 10px;
	overflow: hidden;


}
.DL_area02 .Btn {
	position: relative;
	width: 320px;
	float:left;
	margin: 5px;
	
}

.DL_area02 .Btn a{
	display: block;
	
}

.DL_area02 .QR {
	position: absolute;
 right: 15px;
    bottom: 20px;
	
}

/*---　wrap_differential　-------------------*/
.wrap_differential {
	background: -moz-linear-gradient(to bottom,#191970 2.4%,#3434bc 2.4%,#3434bc);
	background: -webkit-linear-gradient(to bottom,#191970 2.4%,#3434bc 2.4%,#3434bc);
	background: linear-gradient(to bottom,#191970 2.4%,#3434bc 2.4%,#3434bc); 
	width:100%;
	/*margin-bottom:-10px;*/
}

/*---　wrap_02　-------------------*/
.wrap_02 {
	width:100%;
	margin-left: auto;
	margin-right: auto;
	background: -moz-linear-gradient(to bottom,#191970,#191970 68.6%,#3434bc 68.6%,#3434bc);  
	background: -webkit-linear-gradient(to bottom,#191970,#191970 68.6%,#3434bc 68.6%,#3434bc);  
	background: linear-gradient(to bottom,#191970,#191970 68.6%,#3434bc 68.6%,#3434bc); 

}

.contents_02_11card {
	width:1000px;
	margin-left: auto;
	margin-right: auto;


}

.Img_11card {
	width:1000px;
	height:1256px;
	position: relative;

}

.fadein {
	position: absolute;
    right: 0px;
    bottom: 0px;

}

.contents_02_game {
	width:1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top:-100px;

}

.Img_game{
	width:1000px;
	height:610px;
}




/*---　wrap_03　-------------------*/

.wrap_03 {
	width:100%;
	margin-left: auto;
	margin-right: auto;
	background-color: #000000;
	/*background: -moz-linear-gradient(to bottom,#000001 1%,#0035aa 5.5%,#0035aa 40%,#000035 68.6%,#3434bc 68.6%,#3434bc); 
	background: -webkit-linear-gradient(to bottom,#000001 1%,#0035aa 5.5%,#0035aa 40%,#000035 68.6%,#3434bc 68.6%,#3434bc); 
	background: linear-gradient(to bottom,#00030f ,#00030f 10%,#002ab4 20%,#05060b 30%); */
}

.contents_03_hcc {
	width:1000px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom:10px;

}


.Img_hcc {
  width: 1000px;
  height: 934px;
  position: relative;

 }


/*---　フッター　-------------------*/
.wrap_footer {
	background-color: #000000;
	width:100%;
	border-width: 2px;
	border-color: #191970;
	border-top-style: solid;
	font-size:0.9em;

}

.wrap_footer .footer_01{
	background-color: #000000;
	margin-left: auto;
	margin-right: auto;
	padding-top: 30px;
	padding-bottom: 20px;
	width: 950px;
	text-align:left;
	color:#ffffff;

}

.wrap_footer .footer_02{
	background-color: #000000;
	margin-left: auto;
	margin-right: auto;
	width: 950px;
	text-align:center;

}

.wrap_footer .footer_03{
	background-color: #000000;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 950px;
	text-align:left;
	color:#ffffff;

}

/* フェードインアニメ　*/
.fadein {
    opacity : 0;
    transform : translate(0, 80px);
    transition : all 1000ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

/* スマートフォンだけ以下を適用*/
@media screen and (min-width: 480px)  {
 html {
    font-size: 1rem;
  }

.wrap_canvas { 
 	width:100vw;
	height:auto;
  	}
}

@media screen and (min-width: 768px)  {
 html {
    font-size: 1.3rem;
  } 

.wrap_canvas { 
 	width:100vw;
	height:auto;
  	}
}