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

@import url("../../server_status/server_status.css");

/* --------------------------------------------------------
#contents
-------------------------------------------------------- */
/*
#contents { background:url(../_img/mainvisual_l.jpg) no-repeat 0px 0px; background-size:100% auto; }
*/
.mid { display:none;}


#mainBox { position: relative; width:100%; height:auto; }
#mainBox img { width:100%; height:auto; }

#mainBox h1 { width:100%; height: auto;outline:none;overflow:none;}
#mainBox h1 a{outline:none;overflow:none;}
#mainBox h1 img { width:100%; height: auto;outline:none;overflow:none; }

#subBox { position: absolute; top:10px; right:10px; width:40.088%; }

#btn1 , #btn2 , #btn3 { width:100%; margin-bottom:10px; }


#subBox a { outline:none;}
#subBox a:hover img { filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;}

#subBox.update .bfup { display: none;}
#subBox .afup { display: none;}
#subBox.update .afup { display: block;}


@media screen and (max-width: 1280px) { /* 980px以下の記述 */
h1 .mid { display:block;}
h1 .pc { display:none;}
/*
#mainBox h1 { width:165%; }
*/
#mainBox h1 { width:165%; }
#subBox { position: relative; top:0px; right:0px; width:100%; padding:0px; }

#btn1 , #btn2 , #btn3 { width:33.333%; margin-bottom:0px; float:left; }

}

@media screen and (max-width: 980px) { /* 980px以下の記述 */
#mainBox h1 { width:165%; }
}


@media screen and (max-width: 768px) { /* 768px以下の記述 */
#mainBox h1 { float:none; width:100%; }
h1 .mid { display:none;}

#subBox { float:none; position: relative; top:0px; right:0px; width:100%; padding:10px; }

#btn1 , #btn2 , #btn3 { width:100%; margin-bottom:10px; }

/*#gNavi { display:none;}*/
}



/* #newsBox
#newsBox_wrap { width:100%; padding:0px 10px 10px 10px; min-height:41px; position:relative; clear:both;}
#newsBox { background:#000; border:1px solid #303030; padding:0 10px 0 0;}
#newsBox .ti { float:left; padding:6px 16px 6px 10px;}
#newsBox .ti img { width:41px; height:14px;}
#newsBox .btn { float:right; background:#666; color:#CCC; font-size:85%; padding:3px 5px 3px 5px; margin-top:4px; margin-right:-5px}
#newsBox #newslistBox { position:relative; min-height:26px; overflow:hidden; padding:0 0px;}
#newsBox #newslistBox li { clear:both; position:relative; color:#999; font-size:85%; overflow:hidden;}
#newsBox #newslistBox.anim li {position:absolute; left:10px; top:0px;}

#newsBox #newslistBox li dl { padding:4px 0; clear:both; width:200%;}
#newsBox #newslistBox li dt { color:#ff131d; display:inline-block; padding-right:1em; }
#newsBox #newslistBox li dd { color:#fff; display:inline-block; line-height:1.51;}

@media screen and (max-width: 1280px) {
#newsBox_wrap { width:100%; padding:5px 5px 5px; height:41px; position:relative; clear:both;}
}

@media screen and (max-width: 768px) {
#newsBox_wrap { padding:10px; height:auto; }
#newsBox .ti { padding:2px 4px;}
#newsBox .ti img { width:41px; height:14px; }
#newsBox .btn { font-size:93%; padding:3px 5px 3px 5px; margin-top:4px; margin-right:5px}

#newsBox { width:100%; text-align:left; margin:0px auto 10px; padding:4px 5px; height:auto; }
#newsBox #newslistBox { position:relative; height:auto; left:0; top:0; clear:both;}
#newsBox #newslistBox li dl { width:100%;}
#newsBox #newslistBox li dt { line-height:1.61; }
#newsBox #newslistBox li dd { line-height:1.41; }
}
-------------------------------------------------------- */





body#top #tpp { width:58%; height:10px; position:absolute; left:0; top:71%; }
body#top #tpp .releasedate { width:70%; position:relative; left:0; margin: 0 auto; padding-top: 10%; }
body#top #subBox #cdbtn { margin:0 0 10px 0}

@media screen and (min-width: 769px) and (max-width: 1280px) {
body#top #tpp { width:100%; height: auto; position: relative; left:0; top:0%; }
body#top #tpp .releasedate { padding: 20px 0;}
body#top #subBox #cdbtn { width: 50%; margin:0 auto 10px;}
}


@media screen and (max-width: 768px) { /* 768px以下の記述 */
.releasedate { width:75%; margin:0 auto 0 auto;}
.releasedate img { width: 100%; height:auto;}
body#top #tpp { width:100%; height: auto; position:relative; left:0; top:0%; padding: 20px 10px 0; }
body#top #tpp .releasedate { width:76%; position:relative; margin:0 auto 0 auto; left:auto; padding-top: 0;}
}

@media only screen and (min-width: 1281px) {
	/*body#top #tpp {width:57%; height:0px;position:absolute; left:1%; top:60%;}*/
	h1{padding-bottom:18%;}
	h1{padding-bottom:50%;}
}

@media only screen and (min-width: 1601px) {
	h1{padding-bottom:340px;}
	h1{padding-bottom:600px;}
}


/* scroll banner */
#subBox{
	padding:0px 0;
}
#subBox p.btn a{
	position: relative;
	display: block;
	margin:0 auto;
	width:300px;
	height:30px;
	box-sizing:border-box;
	background:url(../_img/bg_top_banner_scrollbtn.png) 0 0 repeat;
	border:4px solid #7e050c;
}
#subBox p.btn a:after{
	position: absolute;
	content:"";
	display:block;
	width:0;
	height:0;
	left:50%;
	margin-left:-4px;
	border-color:transparent;
	border-style: solid;
	border-width:12px 8px ;
}
#subBox p.btn.prev-btn a{
	margin-bottom:10px;
}
#subBox p.btn.prev-btn a:after{
	top:-8px;
	border-color:transparent transparent #fff;
}
#subBox p.btn.next-btn a:after{
	top:4px;
	border-color:#fff transparent transparent;
}
#banner-box{
	position:relative;
	overflow:hidden;
	width:300px;
	height:278px;/* 139*2 */
	margin-right:auto;
	margin-left:auto;
}
#banner-box ul{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:546px;/* 139*4-10 */
}
#banner-box li{
	height:129px;
	margin-bottom:10px;
}
#banner-box li:last-child{
	margin-bottom:0;
}
#banner-box li a{
	display:block;
}
@media only screen and (max-width: 359px) {

	#special_banner{
		display:none;
		width:auto;
		margin:auto 10px 15px;
	}
}
@media only screen and (min-width: 360px) {
	#subBox p.btn a{
		width:340px;
	}
	#banner-box{
		width:340px;
		height:312px;/* 156*2 */
	}
	#banner-box ul{
		height:614px;/* 156*4-10 */
	}
	#banner-box li{
		height:146px;
	}
	#special_banner{
		display:none;
		width:340px;
		margin:auto auto 15px;
	}
}
@media only screen and (min-width: 480px) {
	#subBox p.btn a{
		width:460px;
	}
	#banner-box{
		width:460px;
		height:414px;/* 207*2 */
	}
	#banner-box ul{
		height:818px;/* 207*4-10 */
	}
	#banner-box li{
		height:197px;
	}
	#special_banner{
		display:none;
		width:460px;
		margin:auto auto 15px;
	}
}
@media only screen and (min-width: 769px) {
	#subBox{/* 531px; */
		overflow:hidden;
		padding:5px;
	}
	#subBox p.btn{
		position: absolute;
		width:20px;
		height:99px;
		top:5px;
		left:50%;
	}
	#subBox p.btn{
		/*margin-top:114px;*/
	}
	#subBox p.btn.prev-btn{
		margin-left:-260px;
	}
	#subBox p.btn.next-btn{
		margin-left:240px;
	}
	#subBox p.btn a:after{
		border-width:6px 8px;
	}
	#subBox p.btn.prev-btn a:after{
		top:50%;
		left:-7px;
		margin:-6px 0 0;
		border-color:transparent #fff transparent transparent;
	}
	#subBox p.btn.next-btn a:after{
		top:50%;
		left:2px;
		margin:-6px 0 0;
		border-color:transparent transparent transparent #fff;
	}
	#subBox p.btn a{
		width:100%;
		height:100%;
		margin:0;
	}
	#banner-box{
		width:465px;/* 235*2-5 */
		height:99px;
	}
	#banner-box ul{
		width:940px;/* 235*4 */
		height:99px;
	}
	#banner-box li{
		float:left;
		width:230px;
		height:99px;
		margin:0 5px 0 0;
	}
	#banner-box li:last-child{
		margin:0;
	}
	#special_banner{
		display:none;
		width:230px;
		margin:auto auto 15px;
	}
}
@media only screen and (min-width: 881px) {
	#subBox p.btn{
		height:124px;
	}
	#subBox p.btn{
		/*margin-top:139px;*/
	}
	#subBox p.btn.prev-btn{
		margin-left:-316px;
	}
	#subBox p.btn.next-btn{
		margin-left:296px;
	}
	#banner-box{
		width:585px;/* 295*2-5 */
		height:124px;
	}
	#banner-box ul{
		width:1175px;/* 295*4-5 */
		height:124px;
	}
	#banner-box li{
		width:290px;
		height:124px;
	}
	#special_banner{
		display:none;
		width:290px;
		margin:auto auto 15px;
	}
}
@media only screen and (min-width: 887px) {
	#subBox p.btn{
		/*margin-top:139px;*/
	}
	#subBox p.btn.prev-btn{
		margin-left:-319px;
	}
	#subBox p.btn.next-btn{
		margin-left:299px;
	}
	#special_banner{
		display:none;
		width:290px;
		margin:auto auto 15px;
	}
}
@media only screen and (min-width: 981px) {
	#subBox p.btn{
		width:20px;
		height:144px;
		/*margin-top:159px;*/
	}
	#subBox p.btn.prev-btn{
		margin-left:-365px;
	}
	#subBox p.btn.next-btn{
		margin-left:345px;
	}
	#banner-box{
		width:675px;/* 340*2-5 */
		height:144px;
	}
	#banner-box ul{
		width:1360px;/* 340*4 */
		height:144px;
	}
	#banner-box li{
		float:left;
		width:335px;
		height:144px;
		margin:0 5px 0 0;
	}
	#special_banner{
		display:none;
		width:335px;
		margin:auto auto 15px;
	}
}
/* バナー右側 */
@media only screen and (min-width: 1281px) {
	#subBox{
		padding:10px 0 0;
	}
	#subBox p.btn{
		position: static;
		width:418px;
		height:30px;
		top:auto;
		left:auto;
	}
	#subBox p.btn.prev-btn{
		margin:0 auto 5px auto;
	}
	#subBox p.btn.next-btn{
		margin:0 auto;
	}
	#subBox p.btn a:after{
		border-width:12px 8px ;
	}
	#subBox p.btn.prev-btn a:after{
		top:-8px;
		left:50%;
		margin:0 0 10px -4px;
		border-color:transparent transparent #fff;
	}
	#subBox p.btn.next-btn a:after{
		top:4px;
		left:50%;
		margin:0 0 10px -4px;
		border-color:#fff transparent transparent;
	}
	#banner-box{
		width:418px;
		/*height:552px;/* 184*3 */
		height:368px;
	}
	#banner-box ul{
		width:418px;
		height:731px;/* 184*4-5 */
	}
	#banner-box li{
		float:none;
		width:418px;
		height:179px;
		margin:0 0 5px 0;
	}
	#banner-box li:last-child{
		margin:0;
	}
	#special_banner{
		display:none;
		width:418px;
		margin:0px auto 10px;
	}
}
@media only screen and (min-width: 1601px) {
	#subBox p.btn{
		width:546px;
	}
	#banner-box{
		width:546px;
		/*height:717px;/* 239*3 */
		height:478px;
	}
	#banner-box ul{
		width:540px;
		height:951px;/* 239*4-5 */
	}
	#banner-box li{
		width:546px;
		height:234px;
	}
	#special_banner{
		display:none;
		width:546px;
		margin:0px auto 10px;
	}
}


#info_box{
	width:auto;
	margin:auto 5px;
}
#info_box>dl{
	border:1px solid #800000;
	margin-bottom:10px;
	background:#000;
}
#info_box>dl>dt{
	padding:3px 5px 5px;
	background:#800000;
}
	#info_box>dl>dt img{width:auto !important;}
#info_box>dl>dd{padding:8px 8px 3px;}
#info_box>dl>dd:after{
	content:"";
	display:block;
	clear:both;
}



@media only screen and (max-width: 359px) {
	#info_box{
		width:100%;
		margin:0 auto 5px;
	}
}


@media only screen and (min-width: 360px) {
	#info_box{
		width:340px;
		margin:0 auto 5px;
	}
}
@media only screen and (min-width: 480px) {
	#info_box{
		width:460px;
		margin:0 auto 5px;
	}
}
@media only screen and (min-width: 769px) {
	#info_box{
		width:465px;
		margin-bottom:10px;
	}
}
@media only screen and (min-width: 881px) {
	#info_box{
		width:585px;
		margin-bottom:10px;
	}
}
@media only screen and (min-width: 887px) {
	#info_box{
		width:585px;
		margin-bottom:10px;
	}
}
@media only screen and (min-width: 981px) {
	#info_box{
		width:675px;
		margin-bottom:10px;
	}
}
@media only screen and (min-width: 1281px) {
	body#top #tpp {left:1%; top:57%;}
	h1{padding-bottom:340px;}
	#info_box{
		width:90%;
		margin-bottom:0px;
	}
}
@media only screen and (min-width: 1601px) {
	body#top #tpp {left:1%; top:64%;}
	h1{padding-bottom:350px;}
	#info_box{
		max-width:675px;
		margin-bottom:0px;
	}
}

.releasedate{	display:none;}

.info_banner{
	width:auto;
	text-align:center;
	margin:auto;
}
.info_banner a{
	display:block;
	border:1px solid #707070;
	margin-bottom:10px;
}
.info_banner a img{
	width:100%;
	display:block;
}
.info_banner a:hover img{
	filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;
}

@media only screen and (max-width: 360px) {
	#subBox .info_banner{display:none;}
	.info_banner{
		width:100%;
		margin:0 auto 5px;
	}
}

@media only screen and (min-width: 360px) {
	#subBox .info_banner{display:none;}
	.info_banner{
		width:340px;
		margin:0 auto 10px;
	}
}
@media only screen and (min-width: 480px) {
	.info_banner{
		width:460px;
	}
}
@media only screen and (min-width: 769px) {
	.info_banner{
		width:465px;
	}
}
@media only screen and (min-width: 881px) {
	.info_banner{
		width:585px;
	}
}
@media only screen and (min-width: 887px) {
	.info_banner{
		width:585px;
	}
}
@media only screen and (min-width: 981px) {
	.info_banner{
		width:675px;
	}
}
@media only screen and (min-width: 1281px) {
	#tpp .info_banner{display:none;}
	#subBox .info_banner{display:block;}
	.info_banner{
		width:418px;
		margin-bottom:10px;
	}
}
@media only screen and (min-width: 1601px) {
	.info_banner{
		width:544px;
		margin-bottom:10px;
	}
}