@charset "utf-8";


#iframe_movieArea{
position:fixed;
bottom:0px;
left:10px;
margin:0% 0 5%;
border:1px solid #039;
z-index:90;
}

#movieArea a{
display:block;
width:90%;
margin:10px auto -30px;
text-align:center;
}

#sb-title, #sb-title-inner {
  height: 26px!important;
  line-height:26px!important;
  position: absolute!important;
  bottom: -5px!important;
  width: 100%!important;
  font-size: 14px!important;
}

/*----------------------------------------
	style
----------------------------------------*/

body{
background-image:url("../img/bg.jpg");
background-size:120%;
background-position:center top;
background-repeat:no-repeat;
background-attachment:fixed;
background-color:#000;
}

#wrapper{
	float:right;
	width:600px;
	background-image:none;
	background-repeat:no-repeat;
	background-color:rgba(0,0,20,0.6);
	background-position:center;
	margin:0 5% 0 0%;
	overflow:hidden;
	border-right:1px solid #036;
	border-left:1px solid #036;
	}


#content{
	position:relative;
	width:100%;
	background-image:url("../img/base.jpg");
	background-position:0px 30%;
	margin:0 auto 0;
}



/*--------characters--------*/


#characters #wrapper{
margin-top:0;
/*background-image:url("../img/characters/bg.jpg");*/
background-position:center top;
background-size:100%;
}

#characters #contents{
padding:5% 4% 20%;
color:#fff;
line-height:160%;
}

#characters #contents .title{

width:100%;
margin:0 auto 0;
}

.mainImage{

width:100%;
margin:0 auto 0;
}





#characters .btn_back{
font-size:16px;
display:block;
border-radius:20px;
color:#fff;
background-color:#666;
text-decoration:none;
padding:8px 25px 8px 30px;
display:inline-block;
position:relative;
margin:15px 0 10px 10px;
}

#characters .btn_back:after{
display: block;
position: absolute;
top: 50%;
left: 10px;
width: 12px;
height: 12px;
margin-top: -8px;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
content: "";
}


#characters #contents .box.new .image:after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url(../img/characters/plate_new.png);
background-size:100%;
background-repaet:none;
 pointer-events: none;
}

#characters #contents .readText{
font-size:17px;
font-weight:bold;
color:#eee;
margin:0 0 20px;
line-height:1.6;
padding:0px 0 0;
}

#characters #contents .readText a{
color:#09d;
text-decoration:none;
}

.tab{
  text-align:center;
  margin-bottom:20px;
}

.r1 .tab a:nth-of-type(2){
  opacity:0.6;
}

.r2 .tab a:nth-of-type(1){
  opacity:0.6;
}

.tab a:hover{
  opacity:1!important;
}

.r1 .tab{
  border-bottom:4px solid #D4B251;
}


.r2 .tab{
  border-bottom:4px solid #B2B2B2;
}

.top3{
  border-bottom:1px solid #D4B250;
  padding:20px 0;
}

.top3 .name{
  color:#fff;
  font-size:30px;
  font-weight:800;
}

.top3 .name img{
  width:50px;
  margin-bottom:-15px;
}

.top3 .left{
  float:left;
  color:#fff;
  width:63%;
}

.top3 .left .coment{
  color:#000;
  font-weight:800!important;
  margin-top:6%;
  background-color:rgba(255,255,255,0.6);
  border-radius:8px;
  padding:12px;
}

.top3 .charaicon{
  width:32%;
  float:right;
  margin-top:3%;
}

.top6 .box{
  width:32%;
  float:left;
  margin-left:2%;
  margin-top:4%;
}

.top6 .box:nth-of-type(1){
  margin-left:0px;
}

.top6 .name{
  color:#fff;
  font-size:21px;
  text-align:center;
  font-weight:800;
}

.top6 .name span{
  color:#D4B250;
  font-size:21px;
}

.top6 .name span:after{
  content:' ';
}

.top6 .charaicon{
  width:100%;
  float:right;
  margin-top:3%;
}

.top6{
  border-bottom:1px solid #D4B250;
  padding:0 0 5%;
}


.top10 .box{
  width:23.4%;
  float:left;
  margin-left:2%;
  margin-top:4%;
}

.top10 .box:nth-of-type(1){
  margin-left:0px;
}

.top10 .name{
  color:#fff;
  font-size:16px;
  text-align:center;
  font-weight:800;
}

.top10 .name span{
  color:#D4B250;
  font-size:16px;
}

.top10 .name span:after{
  content:' ';
}

.top10 .charaicon{
  width:100%;
  float:right;
  margin-top:3%;
}

.top10{
  border-bottom:1px solid #D4B250;
  padding:0 0 5%;
}

.top11o{
padding:4% 0 0;
}

.top11o .name{
padding:4% 0 0;
}

.top11o .name{
padding:0% 0 0;
}

.top11o .name .sub{
color:#aaa;
font-size:10px;
line-height:1;
}

.top11o .box:nth-of-type(2n+1){
  margin-left:0px;
}

.top11o .box{
  width:49%;
  float:left;
  margin-left:2%;
  margin-top:4%;
}

.top11o .name{
  color:#fff;
  font-size:14px;
  text-align:left;
  font-weight:400;
}

.top11o .name span{
  color:#D4B250;
  font-size:14px;
}
.top11o .name span:after{
  content:' ';
}

.staffcoment{
  color:#fff;
  padding:5%;
  border:1px solid #999;
  margin:10% 0 0;
}

.clearfix:after{
  content:'';
  display:block;
  clear:both;
}

/*------spec------*/


#sns{
	position:relative;
	width:100%;
	height:45px;
	margin:0 auto 0px;
	font-size:18px;
	line-height:0%;
	padding:12px 0 4px;
	text-align:center;
}

#sns a img{
	width:40px;
	height:40px;
}


.bnr_tieup{
	background-image:none;
	width:90%;
	height:auto;
	display:block;
	margin:4% auto 5%;
}

.bnr_tieup img{
	width:100%;
}


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

#footer{
	position:relative;
	width:100%;
	margin:0 auto 0;
	padding:0 0 20px;
	color:#fff;
	font-size:7px;
	text-align:center;

	overflow:hidden;
	background-image:url("../img/bg_footer.png");
	background-size:180%;
	background-repeat:no-repeat;
	background-position:center 30%;
	z-index:100;
}

#footer p{
	font-weight:300;
	font-size:8px;
	line-height:150%;
	color:#fff;
	width:90%;
	margin:0 auto 0;
	}

#footer .ktlogo{
	width:15%;
	display:block;
	bottom:0px;
	margin:15px auto 10px;
}

#footer .bnr{
	width:45%;
	margin:60px auto 5px;
	display:block;
	float:none;
}

#footer .bnr.right{
	width:45%;
	margin:5px 0 10px 12px;
	display:block;
	float:left;
}

#footer .bnr img{
	width:100%;
	display:block;
}

a.mo:hover{
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}

.noizAnim{
	display:none;
}


.hide_pc{display:block;}
.hide_sp{display:none;}


#preregistCount .box.active .name{
display:block;
font-size:38px;
font-weight:bold;
color:#fff;
text-shadow: 0px 0px 10px #09f;
margin:4% 0 0 3%;
float:left;
}



#pickupBanner{
width:60%;
position:fixed;
bottom:1%;
left:1%;
z-index:200;
}

#pickupBanner img{
display:block;
position:relative;
width:100%;
opacity:0;
top:80px;
}



.bnrArea a{
  width:250px;
  max-width:90%;
}

.bnrArea{
  padding:40px 0 0;
  text-align:center;
}

.flexbox{
  display:flex;
  justify-content:space-between;
	flex-direction: row;
	flex-wrap: wrap;
}

.link_log{
  width:90%;
  margin:50px auto 0;
}

.link_log h4{
  color:#09d;
  font-weight:800;
  text-align:center;
  font-size:20px;
  border-bottom:1px solid #09d;
  padding-bottom:6px;
}

.link_log a{
  /*width:49%;*/
	flex: auto;
	min-width: 110px;
  border:1px solid #09d;
  box-sizing:border-box;
  display:block;
  padding:18px 10px 15px;
  text-align:center;
  font-size:20px;
  font-weight:800;
  background-color:#fff;
  border-radius:5px;
  text-decoration:none;
  color:#05133c;
  line-height:90%!important;
}

.link_log a span{
  font-size:10px;
  color:#666;
}


@media screen and (min-width: 1201px) {

#wrapper{
float:right;
width:600px;
background-image:none;
background-repeat:no-repeat;
background-color:rgba(0,0,20,0.6);
background-position:center;
margin:0 10% 0 0%;
overflow:hidden;
border-right:1px solid #036;
border-left:1px solid #036;
}

body{
background-image:url("../img/bg.jpg")!important;
background-size:115%;
background-color:#000;
}

}


@media screen and (max-width: 1000px) {

#wrapper{
float:right;
width:600px;
background-image:none;
background-repeat:no-repeat;
background-color:rgba(0,0,20,0.6);
background-position:center;
margin:0 0% 0 0%;
overflow:hidden;
border-right:1px solid #036;
border-left:1px solid #036;
}

}

 @media (min-width: 601px) and (max-width: 950px) {

body{
background-image:url("../img/bg_m.jpg")!important;
background-color:#000;
}




#wrapper{
width:580px!important;
float:none;
background-image:none;
background-repeat:no-repeat;
background-color:rgba(0,0,20,0.6);
background-position:center;
margin:0 auto 0;
overflow:hidden;
border-right:1px solid #036;
border-left:1px solid #036;
}

}






/*----------------------------------------
	for SP
----------------------------------------*/

@media screen and (max-width: 950px) {

body{
background-image:none;
background-color:#000;
}

#wrapper{
	position:relative;
	width:100%;
	background-image:none;
	background-repeat:no-repeat;
	background-color:#070b16;
	margin:0 auto 0;
	box-shadow: 0px 0px 10px;
	overflow:hidden;
	}


#content{
	position:relative;
	width:100%;
	background-image:url("../img/base.jpg");
	background-position:0px 30%;
	margin:0 auto 0;
}


.bg_main_sp{
	display:block;
	width:100%;
}


/*------bgm------*/


#bgm{
	position:absolute;
	top:0;
	right:0;
	width:30%;
}

#bgm .bg_bgm{
	width:100%;
}

#bgm .bgm1{
	position:absolute;
	top:3px;
	left:45%;
	width:23%;
}

#bgm .bgm2{
	position:absolute;
	top:3px;
	left:71%;
	width:23%;
}

#bgm .bgm1 img,
#bgm .bgm2 img{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
}

#bgm .bgm_on{
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	}

/*------logo------*/


h1{	display:block;
	width:98%;
	height:auto;
	margin:-280% 0 0% 0
}

h1 img{
	width:100%;
}

#producer{
display:block;
width:50%;
margin:3% auto 0;
}


/*------date------*/


#date{
	position:relative;
	width:100%;
	margin:7% 0 0%;
}

#date:after {
  content: "";
  display: block;
  clear: both;
}


#date .date_text{
position:relative;
display:block;
width:95%;
margin:0 auto 3%;
}

#date .btn_ios img,
#date .btn_android img,
#date .btn_mygc img,
#date .btn_ym img{
	width:100%;
}

#date .btn_ios{
	width:50%;
	display:block;
	position:relative;
	float:left;
	margin: 0 0 0% 3%;
}

#date .btn_android{
	width:42.8%;
	display:block;
	position:relative;
	float:left;
	margin: 0 0 0% 1.5%;
}

#date .btn_mygc{
	width:40%;
	display:block;
	position:relative;
	float:left;
	margin: 3% 0 0% 10%;
}

#date .btn_ym{
  width:40%;
	display:block;
	position:relative;
	float:left;
	margin: 3% 0 0% 1%;
}



.btn_preregist{
display:block;
width:100%;
margin:0 auto 0;
}

.btn_preregist img{
width:100%;
}



.btn_count{
display:block;
width:90%;
margin:-2% auto 5%;
}

.btn_count img{
width:100%;
}



#topics{
width:90%;
margin:4% auto 8%;
position:relative;

padding:2.8% 0.5% 0.5%;
}

#topics flexslider{
width:100%;
}

.flex-control-nav{
bottom: -15%!important;
}


/*------screenshots------*/


#screenshots{
width:90%;
margin:30px auto 60px;
border:1px solid #06a;
z-index:10;
position:relative;
}

#screenshots .flex-control-nav{
bottom: -5%!important;
}




h3{
margin:10% 0 15px 0px;
width:98%;
}

h3 img{
width:100%;
}

p.text{
display:block;
width:92%;
margin:0 auto 0;
color:#fff;
font-weight:300;
font-size:14px;
line-height:160%;
}


img.intro{
display:block;
width:92%;
margin:10% auto 0;
}


h4.intro{
display:block;
width:91%;
margin:4% auto 0;
color:#fff;
font-size:20px;
font-weight:bold;
text-shadow: 0px 0px 10px #09f;
}

p.intro{
width:91%;
display:block;
color:#fff;
font-weight:300!important;
line-height:170%;
margin:3% auto 0;
}

a.intro{
width:90%;
display:block;
margin:5% auto 0;
}

a.intro img{width:100%;}




/*------spec------*/


#spec{
	position:relative;
	width:80%;
	margin:50px auto 0;
	border:1px solid #15436b;
	padding:5% 5% 5%;
	color:#fff;
	background-color:transparent;
	background-color:rgba(0,0,20,0.2);

}

.ajust_5em_out{
	display:block;
	margin-left:10em;
	line-height:170%;
	font-size:10px;
	}

.ajust_5em_in{
	margin-left:-10em;
	color:#fff;
	font-size:10px;
	}

#sns{
	position:relative;
	width:100%;
	height:45px;
	margin:0 auto 0px;
	font-size:18px;
	line-height:0%;
	padding:12px 0 4px;
	text-align:center;
}

#sns a img{
	width:40px;
	height:40px;
}


.bnr_tieup{
	background-image:none;
	width:90%;
	height:auto;
	display:block;
	margin:4% auto 5%;
}

.bnr_tieup img{
	width:100%;
}


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

#footer{
	position:relative;
	width:100%;
	margin:0 auto 0;
	padding:0 0 20px;
	color:#fff;
	font-size:7px;
	text-align:center;

	overflow:hidden;
	background-image:url("../img/bg_footer.png");
	background-size:180%;
	background-repeat:no-repeat;
	background-position:center 30%;
	z-index:100;
}

#footer p{
	font-weight:300;
	font-size:8px;
	line-height:150%;
	color:#fff;
	width:90%;
	margin:0 auto 0;
	}

#footer .ktlogo{
	width:15%;
	display:block;
	bottom:0px;
	margin:15px auto 10px;
}

#footer .bnr{
	width:45%;
	margin:60px auto 5px;
	display:block;
	float:none;
}

#footer .bnr.right{
	width:45%;
	margin:5px 0 10px 12px;
	display:block;
	float:left;
}

#footer .bnr img{
	width:100%;
	display:block;
}

a.mo:hover{
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}

.noizAnim{
	display:none;
}


.hide_pc{display:block;}
.hide_sp{display:none;}


#preregistCount .box.active .name{
display:block;
font-size:38px;
font-weight:bold;
color:#fff;
text-shadow: 0px 0px 10px #09f;
margin:4% 0 0 3%;
float:left;
}



#pickupBanner{
width:60%;
position:fixed;
bottom:1%;
left:1%;
z-index:200;
}

#pickupBanner img{
display:block;
position:relative;
width:100%;
opacity:0;
top:80px;
}



}







@media screen and (max-width: 600px) {


#movieArea{
position:relative;
width:95%;
margin: 0 auto 10px;
}

#movieArea a{
display:block;
}

#movieArea img{
width:100%;
}

#iframe_movieArea{
display:none;
}

#bnr_preregist{
display:block;
width:100%;
margin:0 auto 0;
background-image:url("../img/preregist.png");
background-repeat:no-repeat;
background-size:100%;
}

#bnr_preregist a{
display:block;
width:45%;
float:left;
margin:27% 0 5% 3%;
}

#bnr_preregist a img{
width:100%;
}


#bnr_preregist .btn_pr_mail{
display:block;
}

#bnr_preregist .btn_pr_twitter{
display:block;
margin-left:4%;
}



.btn_twitter{
position:relative;
display:block;
width:95%;
padding:2% 0 2%;
text-align:center;
font-weight:bold;
color:#fff;
text-decoration:none;
font-size:18px;
background-color:#058;
border-radius:20px;
border:1px soid #09d;
margin:0 auto 0;
}

#preregistCount .box.active{
padding:5% 3% 3%;
width:94%;
}

#preregistCount .box.active img.pic{
margin:5% 0 0;
display:block;
width:100%;
float:none;
}


#preregistCount .box.active .icon{
display:block;
position:absolute;
top:-3%;
left:-3%;
}

#preregistCount .box.active .num{
display:block;
font-size:23px;
font-weight:bold;
color:#ea6900;
float:left;
margin:-3% 3% 0 18%;
}

#preregistCount .box.active .num br {
display:none;
}

#preregistCount .box.active .num span{
font-size:12px;
font-weight:bold;
color:#ea6900;
margin:0 0 0;
line-height:200%;
}


#preregistCount .box.log .name{
display:block;
font-size:30px;
font-weight:bold;
color:#fff;
text-shadow: 0px 0px 10px #09f;
margin:4% 0 0 13%;
float:left;
}

#preregistCount .box.active .name{
display:block;
font-size:40px;
font-weight:bold;
color:#fff;
text-shadow: 0px 0px 10px #09f;
margin:4% 0 0 17%;
float:left;
}

#preregistCount .box.active .name span{
font-size:20px;
font-weight:bold;
color:#fff;
text-shadow: 0px 0px 10px #09f;
}


#preregistCount .box .num{
display:block;
font-size:17px;
font-weight:bold;
color:#ea6900;
float:left;
margin:-3% 3% 0 0%;
}

#preregistCount .box .num span{
font-size:8px;
font-weight:bold;
color:#ea6900;
margin:0 0 0;
line-height:200%;
}


#pickupBanner{
width:100%;
position:fixed;
bottom:0%;
left:0%;
z-index:300;
}

#pickupBanner img{
display:block;
position:relative;
width:100%;
opacity:0;
top:80px;
}

.tab{
  text-align:center;
  margin-bottom:20px;
}

.tab a{
  display:inline-block;
  width:48%;
}

.tab a img{
  display:inline-block;
  width:100%;
}

.top3{
  position:relative;
}


.top3 .name{
  color:#fff;
  font-size:30px;
  font-weight:800;
}

.top3 .name img{
  width:40px;
}

.top3 .left{
  float:left;
  color:#fff;
  width:65%;
}

.top3 .left .coment{
  color:#000;
  font-weight:800!important;
  margin-top:7%;
  background-color:rgba(255,255,255,0.6);
  border-radius:8px;
  padding:12px;
  font-size:12px;
  line-height:1.4;

}

.top3 .charaicon{
  width:32%;
  float:right;
  margin-top:0%;
  position:absolute;
  right:0px;
  top:10%;
}

.top3 .name{
  color:#fff;
  font-size:30px;
  font-weight:400;
  line-height:1;

}

.top3 .name img{
  width:40px;
  display:inline-block;
  margin-bottom:-10px;
}


.top6 .name{
  color:#fff;
  font-size:12px;
  text-align:center;
  font-weight:800;
  line-height:1.3;
}

.top6 .name span{
  color:#D4B250;
  font-size:10px;
}

.top6 .name span:after{
  content: "\A" ;
	white-space: pre ;
}



.top10 .name{
  color:#fff;
  font-size:12px;
  text-align:center;
  font-weight:800;
  line-height:1.3;
  padding:0 0 5%;
}

.top10 .name span{
  color:#D4B250;
  font-size:10px;
}

.top10 .name span:after{
  content: "\A" ;
	white-space: pre ;
}



.top11o .name{
  color:#fff;
  font-size:13px;
  text-align:left;
  font-weight:400;
}

.top11o .name span{
  color:#D4B250;
  font-size:12px;
}
.top11o .name span:after{
  content:' ';
}


.top11o .box{
  width:49%;
  float:left;
  margin-left:2%;
  margin-top:4%;
}

.top11o .box:nth-of-type(3n+1){
  margin-left:2%;
}

.top11o .box:nth-of-type(2n+1){
  margin-left:0px;
}



}




/*------noiz effect------*/

.noizAnim{
	width:94%;
	height: 1px;
    	background: url(../img/logo.png) 0 0 no-repeat;
			background-size:100%;
    	position: relative;
			margin:0 auto 0;
}