@charset "utf-8";
/* ==================================================================
CSS information
style info :ゲートページ用
================================================================== */


html{background:#141414;}
body {
background:#141414;
height:auto;
}
#footer{border-bottom:0px;}

/* --------------------------------------------------------
#contents
-------------------------------------------------------- */
#contents { min-height:0; }

.sp { display:none;}
/* --------------------------------------------------------
#copyright
-------------------------------------------------------- */
@media screen and (min-width: 769px) { /* PC用の記述 */
#copyright { margin-top:-1em;}
}

/* --------------------------------------------------------
#mainvisual
-------------------------------------------------------- */
#mainvisual { width:100%; display:block; position:relative; }
#mainvisual { background:url(../_img/bac.jpg) no-repeat top left; background-size:cover; }


#gz { display:block; width:100%; position:relative; }
#tpp { display:block; width:100%; position:relative; border-bottom:1px solid #666;}

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

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

#tpp .logo { width:90%; height:auto; text-align:center; margin:-30px auto 0;}


.btn { text-align:center; width:100%;  height:auto; display:inline-block; }
.btn .set .btn a {  display:block; }
.btn a img { width:100%; height:auto; }

/*#tpp .set { width:56.357%; height:auto; text-align:center; position:absolute; top:11.9%; right:1.3%;background:#f0f; }*/
#tpp .set { width:56.357%; height:auto; text-align:center; position:absolute; top:0; right:1.3%;}
#tpp .set .btn { width:100%; max-width: 32%; height:auto; margin-bottom: 3%; }
#tpp .set .date { margin:0 auto 2%;width:100%;}
#tpp .set .date img{width:90%;}
#tpp .set #special_banner a{border:none;overflow:hidden;outline:none;}
#tpp .set #special_banner a img{margin:-23px auto 10px;width:45%;height:auto;}
#tpp .set #special_banner a:hover img { filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;}


/*
#tpp .orderbtnbox { width: 64.5%; margin: 0 auto; padding-bottom: 1.5%; font-size: 0; }
#tpp .orderbtnbox div , #tpp .orderbtnbox p { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

#tpp .orderbtnbox .box { display: inline-block; width: 47.8%; border: 3px solid #780005; background-color: rgba(0, 0, 0, 0.70); padding-bottom: 2.1%;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#tpp .orderbtnbox .box:first-child { margin-right: 2.2%; }
#tpp .orderbtnbox .box:last-child { margin-left: 2.2%; }

#tpp .orderbtnbox .textBox { display: inline-block; width: 100%; text-align: center; padding:0 5%;}
#tpp .orderbtnbox .textBox img { width:100%; height:auto; }
#tpp .orderbtnbox .btnBox { display: inline-block; width: 100%; text-align: center; padding:0 5%;}
#tpp .orderbtnbox .btnBox a { display: block;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

#tpp .orderbtnbox .btnBox img { width:100%; height:auto; }
*/

#gz .set { width:37.857%; height:auto; text-align:center; position:absolute; top:0%; right:10.785%; }
#gz .set .btn { width:100%; max-width:40%; height:auto; }



@media screen and (max-width: 768px) { /* 768px以下の記述 */
.pc { display:none; }
.sp { display:block; }

#tpp .logo { width:100%;margin-bottom:3%; }

#tpp .set { width:100%; height:auto; text-align:center; position:absolute; top: 40%; right:0%; text-align:center; padding-bottom:9.5%; padding-left: 5%;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#tpp .set .btn { width:39.718%; max-width:100%; height:auto; }

#tpp .set .date { width: 80%; text-align: center; margin:0 auto 2%;}
#tpp .set #special_banner img{margin:-23px auto 10px;width:52%;height:auto;}

#tpp .orderbtnbox { width: 80.0%; padding-bottom: 1.5%;}
#tpp .orderbtnbox .box { width: 47.8%; border: 2px solid #780005; padding-bottom: 2.1%;}
#tpp .orderbtnbox .box:first-child { margin-right: 2.2%; }
#tpp .orderbtnbox .box:last-child { margin-left: 2.4%; }



#gz .set { width:100%; height:auto; text-align:center; position:absolute; top: auto; right:0%; bottom:0%; text-align:center; padding-bottom:9.5%; 
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#gz .set .btnBox { margin-left:6%;}
#gz .set .btn { width:36.718%; max-width:100%; height:auto; }

}







/*

#tpp .set { width:56.357%; height:auto; text-align:center; position:absolute; top:20%; left:3.3%; }



.releasedate{margin:0 0 5% 0;}
.releasebtnbox{width:75%; margin:5% auto 0 auto; background:url(../_img/afup/cd_preorder.png) no-repeat top left; background-size:cover; }
.releasebtnbox .btn{padding:8.5% 2% 4% 2%;}
#chgcontents{position:relative;}
#chgcontents .date{position:relative; width:100%; height:0; }
#chgcontents .date .pc{position:absolute; left:120%; top:-20px; width: 30%; height: auto;}

*/

@media screen and (min-width: 769px) and (max-width: 1280px) {
}


@media screen and (max-width: 768px) { /* 768px以下の記述 */

}

/* web manual */
.manual {
    background-color:rgba(0,0,0,0.8);
    padding:5px 0;
    border:1px solid #8c0003;
    position:relative;
    font-size:110%;
    line-height:1.7em;
    color:#888;
    
}
.manual span{
	/*margin:auto 8px;*/
	border-right:1px solid #888;
	display:inline-block;
	color:#888;
}
.manual span.nb{border:none;}
.manual a{
	line-height:1em;
	font-weight:normal;
	color:red;
	text-decoration:none;
}
.manual a:hover{
    color:#ffcc00;
    text-decoration:underline;
}

@media only screen and (min-width: 320px) {
	.manual{
		width:auto;
		margin-right:5%;
		font-size:85%;
	}
		.manual a{margin:auto 3px;}
}
@media only screen and (min-width: 480px) {
	.manual{
		width:auto;
		margin-right:5%;
		font-size:90%;
	}
		.manual a{margin:auto 5px;}
}
@media only screen and (min-width: 768px) {
	.manual{
		width:auto;
		margin:auto;
		font-size:100%;
	}
		.manual a{margin:auto 5px;}
}
@media only screen and (min-width: 881px) {
	.manual{
		width:90%;
		font-size:100%;
	}
		.manual a{margin:auto 8px;}
}
@media only screen and (min-width: 887px) {
	.manual{
		width:90%;
		font-size:100%;
	}
		.manual a{margin:auto 8px;}
}
@media only screen and (min-width: 981px) {
	.manual{
		width:500px;
		
	}
		.manual a{margin:auto 10px;}
}
@media only screen and (min-width: 1200px) {
	.manual{
		width:550px;
		
	}
		.manual a{margin:auto 10px;}
}


#wrapper{
	width:100%;
	min-width:auto;
}