@charset "utf-8";




/*----------------------------------------
	for PC
----------------------------------------*/


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

	#content_inner{
		padding:50px 0 90px;
		width:1000px;

		margin:0 auto 0;
		z-index:50;
		position:relative;
	}

	#wrapper{
		width:auto!important;
	}

	.catch{
		width:auto;
		display:block;
		margin:0 auto 20px;
	}

	h2{
		display:block;
		text-align:center;
		padding:10px 0 0;
		margin:0 0 0px;
		}

		#secMenu{
			display:block;
			background-image: url('../img/common/bg_secnavi.png');
			background-size:auto 100%;
			height:40px;
			margin-top:-5px;
			padding:18px;
			text-align:center;
		}

		#secMenu .inner{
				width:350px;
			margin:0 auto 0;
		}

		#secMenu a{
			display:block;
			float:left;
			padding:0 20px;
			border-left:1px solid #999;
		}


		#secMenu a:nth-child(1){width:95px;border-left:none;}
		#secMenu a:nth-child(2){width:62px;}
		#secMenu a:nth-child(3){width:62px;}

		#secMenu a img{
			display:block;
			width:100%;
		}



		#base{
			background:transparent url("../img/system/battlefield/bg.jpg") center top repeat-y;
			position:relative;
			box-shadow:0px 0px 3px rgba(0,0,0,0.6);
		}

		#base::before{
			content:'';
			display:block;
			background:transparent url("../img/sound/base_top.png") center top no-repeat;
			position:absolute;
			top:0;
			left:0;
			width:1000px;
			height:621px;
			z-index:10;
		}


		#base::after{
			content:'';
			display:block;
			background:transparent url("../img/action/weapon/bg_bottom.jpg") center top no-repeat;
			position:absolute;
			bottom:0;
			left:0;
			width:1000px;
			height:621px;
			z-index:10;
		}


		.base_inner{
			padding:70px 40px;
			position:relative;
			z-index:20;
		}

		#base.noimage::before{
			content:'';
			display:block;
			background:transparent url("../img/weapon/base_top.png") center top no-repeat;
			position:absolute;
			top:0;
			left:0;
			width:1000px;
			height:621px;
			z-index:10;
		}


		#base.noimage{
			margin-bottom:30px;
		}

		#base.noimage .base_inner{
			padding:40px 40px 30px;
			position:relative;
			z-index:20;
		}

		#base.noimage:after{
			content:'';display:block;
			width:98.6%;height:96%;
			position:absolute;top:1.8%;left:0.6%;
			border:1px solid #968A3C;
		}


		#base.noimage .textBlock{
			float:left;
			width:70%;
			font-size:14px;
			font-weight:400;
		}

		#base.noimage .textBlock a{
		color:#BDAE54;
		display:inline-block;
		padding:5px 0;
		font-size:15px;
		}

		#base.noimage .textBlock a:hover{
		color:#d00;
		}

		#base.noimage .imgBlock{
			float:right;
			width:26%;
		}


		#base.noimage .license{
			width:auto;
			text-align:right;
			font-size:11px;
			font-weight:400;
			color:#aaa;
			clear:both;
		}

		.coment{
			margin-top:60px;
			width:880px;
			margin:40px auto 0;
		}

		.coment .tit{
			font-weight:800;
			display:inline-block;
			padding:0 0 10px;
			font-size:18px;
		}

		.exp{
			width:840px;
			margin:30px auto 0;
			padding:20px;
			border:1px solid #666;
			font-size:14px;
			line-height:1.7;
			background-color:rgba(0,0,0,0.2);
			position:relative;
		}

		.exp:nth-of-type(2){
			margin:1% 0 0;
		}


		.exp.new:after{
			display:block;
			content:'';
			position:absolute;
			left:-8px;
			top:-10px;
			background-image:url('../img/common/new.gif');
			background-size:30px;
			width:30px;
			height:30px;
			border-radius:15px;
			overflow:hidden;
			z-index:200;
			box-shadow:2px 2px 3px rgba(0,0,0,0.9),0px 0px 5px rgba(0,0,0,0.9);
		}


		.tit_exp{
			font-size:25px;
			text-align:center;
			padding:65px 0 0;
			margin-bottom:-18px;
			color:#D6BE3D;
			font-weight:bold;
		}



		.exp img{
			float:left;
			margin:0 20px 12px 0;
		}

		.exp p{
			color:#ddd;
			display:inline;
		}


		.exp .coment{
			color:#DD9200;
			display:block;
			width:77%;
			padding:2%;
			float:right;
			margin:10px 0 20px;
			background-color:rgba(0,0,0,0.5);
		}

		.exp .coment span{
			font-weight:800;
		}

		.exp p span{
			font-size:18px;
		}

		.exp p span.job{
			font-size:14px;
		}

		.exp .biog{
			display:block;
			clear:both;
		}


	h2{
		display:block;
		margin:0 0 -80px;
	}

	h3{
		display:block;
		padding:100px 0 0;
	}

	p{
		display:block;
		text-align:left;
		color:#422;
		line-height:1.6;
		margin:0 0 20px;

	}

	.box{
		width:255px;
		float:left;
		background-color:rgba(0,0,0,0.6);
		border:1px solid #333;
		padding:20px;
		margin-left:10px;
		border-radius:8px;
	}

	.jp-audio{
		margin:0 auto 0;
		padding:0!important;
	}

	.box .name img{
		display:block;
		width:100%;
		margin-bottom:10px;
	}

	.box a{
		display:block;
		width:60%;
		margin:6px auto 0;
	}

	.box p{
		display:block;
		font-size:14px;
		color:#999;
		text-align:center;
		padding:10px 0 0;
		margin:0;
	}



	.box a img{
		width:100%;
		display:block;
	}


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


	.attention{
		text-align:right;
		font-size:15px;
		color:#333;
		margin:5px 0 0;
	}


	.attention_screenshots{
		display:none!important;
	}


}




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

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

	#wrapper{
		width:auto!important;
	}
	#content_inner{
		padding:7% 0 7%;
		margin:0 auto 0;
		z-index:50;
		position:relative;
	}

	h2{
		display:block;
		text-align:center;
		padding:10px 0 0;
		margin:0 0 0px;
		width:100%;
		}

		h2 img{
			display:block;
			width:100%;
			}

		#secMenu{
			display:block;
			background-image: url('../img/common/bg_secnavi.png');
			background-size:cover;
			padding:13px 10% 13px;
			text-align:center;
			position:relative;
			z-index:80;
		}

		#secMenu .inner{
			width:58%;
			margin:0 auto 0;
		}

		#secMenu a{
			display:block;
			float:left;
			padding:0 3%;
			border-left:1px solid #999;
			position:relative;
		}

		#secMenu a:nth-child(1){width:36%;border-left:none;}
		#secMenu a:nth-child(2){width:22%;}
		#secMenu a:nth-child(3){width:22%;}

		#secMenu a img{
			display:block;
			width:100%;
		}

	.subWindow{
		background-color:rgba(0,0,0,0.3);
		padding:4px;margin:20px auto 3%;
		line-height:1.4;
		border:1px solid rgb(204, 142, 25);
		width:90%;
	}

	.catch{
		width:94%;
		display:block;
		margin:0 auto 0;
		padding:0 0 5%;
	}

	h2{
		margin-bottom:-10%;
	}



	h3{
		display:block;
		padding:17% 0 0;
		margin:0 auto 0;
		width:90%;
	}
	h3 img{
		width:100%;
	}

	p{
		display:block;
		text-align:left;
		color:#222;
		line-height:1.7;
		font-size:15px;
		margin:0 auto 20px;
		width:90%;
		font-weight:normal!important;
	}


	#base{
		background:transparent url("../img/system/battlefield/bg.jpg") center top repeat-y;
		position:relative;
		width:100%;
		box-shadow:0px 0px 3px rgba(0,0,0,0.6);
	}

	#base::before{
		content:'';
		display:block;
		background:transparent url("../img/sound/base_top.png") center top no-repeat;
		position:absolute;
				background-size:100%;
		top:0;
		left:0;
		width:100%;
		height:621px;
		z-index:10;
	}


	#base::after{
		content:'';
		display:block;
		background:transparent url("../img/action/weapon/bg_bottom.jpg") center top no-repeat;
		position:absolute;
		background-size:100%;
		bottom:0;
		left:0;
		width:100%;
		height:621px;
		z-index:10;
	}

	#base .base_inner{
		padding:10% 0 15%;
	}

	#base.noimage::before{
		content:'';
		display:block;
		background:transparent url("../img/weapon/base_top.png") center top no-repeat;
		position:absolute;
		top:0;
		left:0;
		width:1000px;
		height:621px;
		z-index:10;
	}


	#base.noimage{
		margin-bottom:30px;
	}

	#base.noimage .base_inner{
		padding:7%;
		position:relative;
		z-index:20;
	}

	#base.noimage:after{
		content:'';display:block;
		width:96%;height:96%;
		position:absolute;top:1.8%;left:1.6%;
		border:1px solid #968A3C;
	}


	#base.noimage .textBlock{
		width:100%;
		font-size:12px;
		font-weight:400!important;
	}

	#base.noimage .textBlock img{
		width:110%;
		display:block;
		margin-bottom:10px;
	}

	#base.noimage .textBlock a{
	color:#BDAE54;
	display:inline-block;
	padding:5px 0;
	}

	#base.noimage .textBlock a:hover{
	color:#d00;
	}

	#base.noimage .imgBlock{
		width:50%;
		display:block;
		margin:5% auto 5%;
	}


	#base.noimage .license{
		width:auto;
		text-align:right;
		font-size:11px;
		font-weight:400;
		color:#aaa;
		clear:both;
	}

	.box{
		width:85%;
		background-color:rgba(0,0,0,0.6);
		border:1px solid #333;
		padding:5% 3%;
		margin:3% auto 0;
		border-radius:8px;
		position:relative;
		z-index:50;
	}

	.jp-audio{
		margin:0 auto 0;
		padding:0!important;
	}

	.box .name img{
		display:block;
		width:100%;
		margin-bottom:10px;
	}

	.coment{
		margin-top:60px;
		width:90%;
		margin:10% auto 0;
	}

	.coment .tit{
		font-weight:800;
		display:inline-block;
		padding:0 0 10px;
		font-size:18px;
	}

	.exp{
		width:80%;
		margin:30px auto 0;
		padding:5%;
		border:1px solid #666;
		font-size:12px;
		line-height:1.7;
		background-color:rgba(0,0,0,0.2);
	}


	.tit_exp{
		font-size:19px;
		text-align:center;
		padding:54px 0 0;
		margin-bottom:-18px;
		color:#D6BE3D;
		line-height:1.4;
		font-weight:bold;
	}


	.exp img{
		float:left;
		margin:0 20px 12px 0;
	}

	.exp p{
		color:#ddd;
		display:inline;
		font-size:13px;
	}

	.exp p span{
		font-size:15px;
		line-height:1.4;
		display:block;
	}

	.attention{
		text-align:right;
		font-size:15px;
		color:#333;
		padding:0.5% 2%;
	}

	.img04{
		width:auto;
		display:block;
		width:98%;
		margin:0 auto 0px;
		padding:0 0 120px;
	}

	.attention_screenshots{
		display:none!important;
	}


}