/* Common 
=================================================*/
body {
	min-width: 320px;
	margin: 0;
	padding: 0;
	color: #fff;
	background: #fff;
	font-size: 16px;
	font-size: 1.6rem;
	font-family:'微軟正黑體', 'Microsoft JhengHei', 'PMingLiU', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	overflow: hidden; /*横いっぱい*/
	word-wrap: break-word; /*折り返し*/
 }

html{
	font-size: 62.5%;
	overflow: auto;/*横いっぱい*/
}

a{
	color: #ff00c5;
	text-decoration: underline;
}

a:hover{
	color: #fff;
	text-decoration: none;
}

p{
	text-align: left;
}

img{
	width: 100%;
	height: auto;
}


.M_T1em{
	margin-top: 1em !important;
}
.M_T2em{
	margin-top: 2em !important;
}

.box_up{
	display: block;
}




/* SP （画面480px以下）
=================================================*/
.pc_only{display: none;}
.sp_only{display: block;}

.wrap_title{
	width: 100%;
	height: auto;
}
/* header (SP)
--------------------------------------------------- */
header{
	width: 100%;
	height: auto;
	background: #fff;
	box-shadow: 0px 6px 3px -3px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 6px 3px -3px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 6px 3px -3px rgba(0,0,0,0.3);
	position: relative;
	z-index: 1000;
}

header .header{
	width: 100%;
	margin: 0;
}

header .float_left{
	float: left;
	width: 40%;
}
header .float_right{
	float: right;
	width: 40%;
}
/* web manual (PC)
--------------------------------------------------- */
.wrap_webmanual{
	background: url(../img/nav_bnr_bg.png) no-repeat top center #808033;
	height: auto;
	width: 100%;
	margin: 0;
	padding: 2px 0 0;
	border-top: 3px #fff solid;
	border-bottom: 3px #fff solid;
	}
.wrap_webmanual ul{
		width: 95%;
		height: auto;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
.wrap_webmanual ul li{
	margin: 0 2px;
	}

.wrap_webmanual ul li img{
		width: 100%;
	}

/* nav (SP)
--------------------------------------------------- */
.wrap_nav{
	background: url(../img/nav_bg_sp.jpg) no-repeat top center #fff;
	height: 80px;
	width: 100%;
	margin: 0 0;
	}
.wrap_nav ul{
		width: 90%;
		height: 80px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
.wrap_nav ul li{
	margin: 0 10px;
	z-index: 1001;
	
	}

.wrap_nav ul li img{
		
	}
/* main 
--------------------------------------------------- */
.main_sp{
	width: 100%;
	height: auto;
	display: block;
}




/* Youtube 
--------------------------------------------------- */
.video_box{
	width: 95%;
	margin: 0 auto 30px;
	padding: 0;
	border: 2px solid #ff00c5;
	box-shadow:0px 0px 6px #000;
	}

.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
	z-index: 0;
}

/* mov 
--------------------------------------------------- */
.wrap_mov{
	background-image: url(../img/mov_bg.jpg);
	background-position: center top;
	height: auto;
	padding: 0 0 1em;
	border-bottom: #ff0ac5 3px solid;
	margin-bottom: 2px;
	}



/* chara 
--------------------------------------------------- */
.wrap_chara{
	background: url(../img/chara_bg.jpg) #ff0080;
	height: auto;
	padding: 0 0 1em 0;
	margin-bottom: 0;
	border-top:3px rgba(0,0,0,0.50) solid;
	position: relative;
	}

/* DLC 
--------------------------------------------------- */
.wrap_dlc{
	background: url(../img/dlc_bg.jpg) #231815;
	height: auto;
	padding: 0 0 1em 0;
	margin-bottom: 0;
	border-top:3px rgba(0,0,0,0.50) solid;
	position: relative;
	}

/* whats  system
--------------------------------------------------- */
.wrap_whats{
	background: url(../img/whats_bg.jpg) #ff0080;
	height: auto;
	padding: 1em 0;
	margin: 0 auto;
	border-top:3px rgba(0,0,0,0.50) solid;
	position: relative;
	}
.wrap_system{
	background: url(../img/system_bg.jpg) #000;
	background-attachment: fixed;
	background-position: center top;
	height: auto;
	padding: 1em 0;
	margin: 0 auto;
	border-top:3px rgba(0,0,0,0.50) solid;
	position: relative;
	}
.whats, .system{
	width: 95%;
	text-align: center;
	margin: 0 auto;
}

.whats p, .system p{
		text-align: left;
		font-size: 110%;
		line-height: 1.2em;
		margin-bottom: 1em;
		
	}
.system h3{
		color: #ffff00;
		text-align: left;
		font-size: 170%;
		line-height: 1.2em;
		margin-bottom: 0;
		font-weight: bold;
	}
.system h4{
		color: #00ff00;
		text-align: left;
		font-size: 120%;
		line-height: 1.2em;
		margin-bottom: 0.5em;
		font-weight: bold;
	}

.ss_box > div img{
	width: 100%;
	margin: 0 auto 0.5em;
	border: 1px #FFF solid;
	cursor: none;
	pointer-events: none;
	}



/* spec 
--------------------------------------------------- */
.wrap_spec{
	background-image: url(../img/spec_bg.jpg);
	background-position: center top;
	height: auto;
	padding: 1em 0;
	text-align: center;
	}

/* footer 
--------------------------------------------------- */
footer{
	text-align: center;
	margin: 0 auto ;
	position: static;
	width: 100%;
	height: auto;
	padding: 0 0 1em;
	background: #fff;
	}
.footer_link{width: 100%; background: #26005b; margin: 0; padding: 2em 0;}
.footer_link ul{width: 95%; margin: 0 auto;text-align: center;}
.footer_link ul li{
		display: inline-block;
		font-weight: bold;
		font-size: 100%;
		color: #ff00c5;
		line-height: 1.5em;
	}
.footer_link ul li:nth-child(1){
  word-wrap: break-word;
  white-space: normal;
  display: block;	
}

.footer_link ul li.pc_only{
	display: none;
}

.footer_txt{width: 95%; background: #fff; padding: 1em 0; margin: 0 auto;}
.footer_txt p{text-align: center; font-size: 80%; line-height: 1.4em; color: #444;}




/* Tablet （画面481px以上1023以下）
=================================================*/
@media screen and (min-width:481px) {
}


/* PC 画面サイズ1024px以上
=================================================*/
@media screen and (min-width: 1024px) { 

	
.main_sp,
.sp_only{display: none;}
.pc_only{display: block;}
	
a:hover img {
opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);	/* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}
 
a img {
-webkit-transition: opacity 3s ease-out;
-moz-transition: opacity 3s ease-out;
-ms-transition: opacity 3s ease-out;
transition: opacity 3s ease-out;
}

p{
	font-size: 120%;
	line-height: 1.4em;
	}

.wrap_mov,
.wrap_spec,
.wrap_chara,
.wrap_dlc,
.wrap_whats,
.wrap_system{
	background-repeat: no-repeat;
	background-position: top center;
	width: 100%;
	text-align: center;
	border-top:2px #000 solid;
	border-bottom: 3px solid #ff0080;
	}
	
.wrap_main{
	background-repeat: no-repeat;
	background-position: top center;
	width: 100%;
	text-align: center;
	border-bottom: 3px solid #ff0080;
	}
	
.wrap_title{
	width: 1000px;
	height: auto;
	margin: 0 auto;
}
	
.ss_box{
	width: 100%;
	margin: 0 auto;
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
	padding: 0 0 2em;
	}
	
.ss_box > div{
	width: 49%;
	}
.ss_box > div img{
	width: 100%;
	border: 1px #FFF solid;
	pointer-events:auto;
	cursor: pointer;
	}
	
/* header (PC)
--------------------------------------------------- */
header{
	width: 100%;
	height: auto;
}

header .header{
	min-width: 1000px;
	height: 50px;
	margin: 0 auto;
}
header .header img{
	width: auto;

}
/* web manual (PC)
--------------------------------------------------- */
.wrap_webmanual{
	height: 120px;
	width: 100%;
	margin: 0;
	padding:0;
	}
.wrap_webmanual ul{
		width: 1000px;
		height: auto;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
.wrap_webmanual ul li{
	margin: 0 2px;
	z-index: 1001;
	
	}

.wrap_webmanual ul li img{
		width: auto;
	}

/* nav (PC)
--------------------------------------------------- */
.wrap_nav{
	background: url(../img/nav_bg.png) no-repeat top center #fff;
	height: 100px;
	width: 100%;
	}
.wrap_nav ul{
		width: 1000px;
		height: 100px;
		margin: 0 auto;
		display: flex;
		justify-content: center;/* webマニュアルがない場合　flex-start */
		align-items: center;
	}
.wrap_nav ul li{
	margin: 0 20px;
	z-index: 1001;
	
	}
/*.wrap_nav ul li:last-child(){
		margin: 0;
	}*/
.wrap_nav ul li img{
		width: auto;
	}
/* main (PC)
--------------------------------------------------- */
.wrap_main{
	/*background-image: url(../img/home_main_bg.jpg);*/
	height: auto;
	}
	.main_pc{
		display: block;
		width: 1420px;
		height: auto;
		margin: 0 auto;
		text-align: center;
		position: relative;
	}
	.mainvisual_pc{
	width: 100%;
		height: 860px;
		background: url(../img/home_main_pc.jpg) no-repeat top center;
	}
	
/* キャラ個別　.main_pc{
		display: block;
		width: 1420px;
		height: auto;
		margin: 0 auto;
		text-align: center;
		position: relative;
	}
/*ティザーと同じ.main_pc{
	background-image: url(../img/main_01.jpg);
	background-repeat: no-repeat;
	background-position: top center;
		display: block;
		width: 1000px;
		height: 865px;
		margin: 0 auto;
		text-align: center;
		position: relative;
	}*/

	.main_logo{
		width: 600px;
		height: 220px;
		position: absolute;
		top:620px;
		left: 360px;
		z-index: 110;
	}
	
	.catchphrase{
		width: 960px;
		height: 80px;
		position: absolute;
		top:490px;
		left: 230px;
		z-index: 110;
	}
	
	.btn_shokaitokuten{
		position: absolute;
		top:650px;
		right: 100px;
		z-index: 1000;
	}
	.btn_dlc{
		position: absolute;
		top:600px;
		left: 70px;
		z-index: 1000;
		width: 250px;
		height: 250px;
	}
	


/* news (PC)
--------------------------------------------------- */

.news{
	text-align: left;
	font-weight: bold;
	line-height: 1.4em;
	background: none;
	border-top:none;
	border-bottom: none;
	padding: 0;
	
	}

.news .date{
		color: #ff00c5;
		font-size: 110%;
	}
.news .txt{
		color: #444;
		font-size: 110%;
		width: 720px;
	}

/* mov  (PC)
--------------------------------------------------- */
.wrap_mov{
	background-image: url(../img/mov_bg.jpg);
	background-attachment: fixed;
	background-position: center top;
	height: auto;
	padding: 0 0 1em;
	}
	
.video_box{
	width: 100%;
	}
.video_title{
		width: 1000px;
		margin: 0 auto 1em;
	}
.wrap_mov .ss_box{
		width: 1100px;
		margin: 0 auto;
	}
	
.wrap_mov .ss_box >div{/*動画1本*/
		width: 80%;
	}
/* chara  (PC)
--------------------------------------------------- */
.wrap_chara{
	background: url(../img/chara_bg.jpg) #ff0080 no-repeat;
	height: 1300px;/*2段は1900px*/
	padding:0;
	position: relative;
	}
	
	
.wrap_chara:after {
    content:"";
    display:block;
    clear:both;
	}
.chara_mov_btn{
		width: 390px;
		height: 219px;
		position: absolute;
		top:470px;
		right: 46px;
		/*border: 1px solid #fff; 位置確認用 */
		z-index: 2222;
		
	}
.chara_mov_btn2{
		width: 390px;
		height: 219px;
		position: absolute;
		top:530px;
		right: 46px;
		/*border: 1px solid #fff; 位置確認用 */
		z-index: 2222;
		
	}
.chara_mov_btn iframe{
	pointer-events: none !important;
	border: 1px #fff solid;
	width: 100%;
	height: 100%;
	}
.wrap_chara a:hover{
		background: rgba(255,255,255,0.5);
	}
/* DLC  (PC)
--------------------------------------------------- */
.wrap_dlc{
	background: url(../img/dlc_bg.jpg) #231815 no-repeat;
	height: 1200px;/*2段は1900px*/
	padding:0;
	position: relative;
	}
/* whats system (PC)
--------------------------------------------------- */
.whats, .system{
	width: 1000px;
	margin: 0 auto;
	}
	
.whats p, .system p{
		text-align: left;
		font-size: 140%;
		line-height: 1.2em;
		margin-bottom: 1em;
		
	}



/* spec  (PC)
--------------------------------------------------- */
.wrap_spec{
	background-image: url(../img/spec_bg.jpg);
	height: auto;
	padding: 50px 0;
	}

.spec{
		text-align: center !important;
		margin: 0 auto;
		width: 1000px;
	}


/* footer  (PC)
--------------------------------------------------- */
.footer_link{width: 100%; background: #26005b; margin: 0; padding: 2em 0;}
.footer_link ul{width: 1000px; margin: 0 auto;text-align: center;}
.footer_link ul li{
		display: inline-block;
		font-weight: bold;
		font-size: 120%;
		color: #ff00c5;
	}
.footer_link ul li:nth-child(1){
  white-space: nowrap !important;
	word-wrap:none !important;
	display: inline-block;
}
.footer_link ul li.pc_only{
	display: inline-block;
	}
	
}