@charset "utf-8";




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


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

	#content_inner{
		padding:50px 0 80px;
		width:1000px;
		margin:0 auto 0;
		z-index:50;
		position:relative;
	}


	#base{
		background:transparent url("../img/about/base.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/about/base_head.png") center top no-repeat;
		position:absolute;
		background-size:1000px;
		height:719px;
		top:0;
		left:0;
		width:1000px;
		z-index:10;
	}

	#base::after{
		content:'';
		display:block;
		background:transparent url("../img/about/base_bottom.png") center bottom no-repeat;
		position:absolute;
		background-size:1000px;
		height:719px;
		bottom:0;
		left:0;
		width:1000px;
		z-index:10;
	}


	#base .catch{
		width:auto;
				margin:0;
	}




	.head_stil img{
		width:200px;
		float:left;
		margin-right:1%;
		display:block;
		box-shadow:1px 1px 2px rgba(0,0,0,0.6);
		margin-top:2%;
	}


.anime{
	background-image:url("../img/about/anime_bg.png");
	z-index:100;
	position:relative;
	padding:20px 50px 10px;
}

.anime .box{
float:left;
width:auto;
margin-right:20px;
position:relative;
}

.anime .box img{
border:1px solid #bb9028;
display:block;
}

.anime .box p{
font-size:14px;
text-align:center;
padding:5px 0 0;
}

.anime .text_anime{
float:left;
width:auto;
margin-right:40px;
margin-top:10px;
}


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


.window_action{
	border:4px solid #b19215;
	border-radius:20px;
	margin:0 auto 0;
	background:#000 url("../img/about/base_window.jpg");
	padding:50px 50px 0;
	position:relative;
	overflow:hidden;
}

.window_action:before{
	content:'';
	background-image: url("../img/about/img_action.png");
	position:absolute;
	display:block;
	width:695px;
	height:422px;
	top:0px;
	right:0px;
}

#base .window_action .catch{
margin-left:-20px;
margin-top:-20px;
display:block;
}



.hunting{
	position:relative;
	z-index:10;
}

.hunting .movie{
	width:330px;
	position:absolute;
	top:210px;right:0px;
	box-shadow:2px 2px 3px #000;
}

.hunting .movie:before{
	content:'';
	background:url("../img/about/catch_action_sub.png");
	display:block;
	width:415px;
	height:131px;
	position:absolute;
	top:-80px;
	left:-80px;
}

.hunting .movie img{
	width:100%;
	display:block;
}

.weapon{
	padding:310px 0 0;
	position:relative;
}

.weapon .img{
	position:absolute;
	left:-50px;top:0px;

}
.weapon .text{
position:relative;
width:370px;
float:right;
}


.weapon .text .tit{
font-size:21px;
font-weight:800;
padding-bottom:10px;
}

.weapon .text .tit span{
color:#FFDE5D;
font-weight:800;
font-size:130%;
}

.btn_link{
width:180px;
display:block;
margin-top:12px;
}

.btn_link img{
width:100%;
display:block;
}

.mitama{
	padding:30px 0 0;
}

.mitama .text{
width:340px;
}


.mitama .text .tit{
font-size:21px;
font-weight:800;
padding-bottom:10px;
line-height:1.3;
}

.mitama .text .tit span{
color:#FFDE5D;
font-weight:800;
font-size:120%;
}

.mitama .img img{
	display:block;
	float:left;
	width:148px;
	margin-left:5px;
}

.mitama .img{
	display:block;
	float:right;
	width:463px;
	padding-top:25px;
}


.online_box{
	background-color:rgba(60,60,60,0.7);
	margin-top:50px;
	width:812px;
	margin-left:-50px;
	padding:5px 50px;
}

.online_box p{
	font-size:22px;
	font-weight:800;
	float:left;
	padding-top:50px;
	padding-left:50px;
}

.online_box img{
	font-size:22px;
	font-weight:800;
	float:left;
}

.text_openworld{
	display:block;
	margin: 30px auto 160px;
}

.btn_outline{
	display:block;
	margin:0 auto -30px;
	width:330px;
}


.btn_bottom{
	text-align:center;
	margin-top:50px;
}

.anime .box a{
	display:block;
	position:relative;
}

.anime .box a::after{
	content:'';
	background-image:url('../img/top/btn_play.png');
	display:block;
	width:50px;
	height:50px;
	background-size:100%;
	position:absolute;
	top:50%;
	left:50%;
	margin:-25px 0 0 -25px;
}

.anime .box.new a::before{
	content:'';
	background-image:url('../img/common/new.gif');
	display:block;
	width:30px;
	height:30px;
	background-size:100%;
	position:absolute;
	border-radius:25px;
	box-shadow:2px 2px 1px rgba(0,0,0,0.2);
	top:-8px;
	left:-8px;
}

.box a .long{
	background-color:rgba(0,0,0,0.9);
	color:#ddd;
	position:absolute;
	right:3px;bottom:3px;
	font-size:12px;
	display:block;
	padding:3px 10px;
	border-radius:10px;
	line-height:1;
}


}




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

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



	#base{
		background:transparent url("../img/about/base.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/about/base_head_sp.png") center top no-repeat;
		position:absolute;
		background-size:100%;
		height:719px;
		top:0;
		left:0;
		width:100%;
		z-index:10;
	}

	#base::after{
		content:'';
		display:block;
		background:transparent url("../img/about/base_bottom.png") center bottom no-repeat;
		position:absolute;
		background-size:170%;
		background-position:center bottom;
		padding-top:130%;
		bottom:0;
		left:0;
		width:100%;
		z-index:10;
	}


	#base .catch{
		width:auto;
				margin:0;
	}

	p{
		font-size:13px;
		line-height:1.6;
	}


	.base_inner{
		padding-bottom:1.5%;
	}

	.head_area{
		position:relative;
		z-index:10;
		padding-top:74%;
		width:90%;
		margin:0 auto 0;
		font-size:14px;
	}


	.head_stil{
		text-align:center;
	}

	.head_stil img{
		width:49%;
		/*margin-right:2%;*/
		display:inline-block;
		/*box-shadow:1px 1px 2px rgba(0,0,0,0.6);*/
		margin-top:4%;
		margin-bottom:2%;
	}


.anime{
	background-image:url("../img/about/anime_bg.png");
	z-index:100;
	position:relative;
	padding:4% 7% 6%;
	margin-bottom:4%;
}

.anime .box{
float:left;
width:auto;
margin-left:4.5%;
margin-top:4%;
width:43%;
line-height:1.2;
position:relative;
}

/*.anime .box.new{
float:none;
width:auto;
margin:0 auto 0;
width:65%;
line-height:1.2;
position:relative;
}*/

.anime .box img{
width:100%;
border:1px solid #bb9028;
}

.anime .box p{
font-size:10px;
text-align:center;
}

.anime .text_anime{
max-width:43%;
float:left;
width:auto;
display:block;
margin:8% 1% 16px 4%;
}


/*.base_inner{
	padding:50px 40px;
	position:relative;
	z-index:20;
}*/


.window_action{
	width:90%;
	border:2px solid #b19215;
	border-radius:15px;
	margin:0 auto 0;
	background:#000 url("../img/about/base_window.jpg");
	padding:38% 2% 0;
	position:relative;
	overflow:hidden;
	z-index:20;
}

.window_action:before{
	content:'';
	background-image: url("../img/about/img_action.png");
	background-position:right top;
	position:absolute;
	background-size:110%;
	background-repeat:no-repeat;
	display:block;
	width:100%;
	padding-top:80%;
	top:0px;
	right:0px;
}

#base .window_action .catch{
margin-left:-5%;
margin-top:-20px;
display:block;
width:100%;
}



.hunting{
	position:relative;
	z-index:10;
	width:92%;
	margin:0 auto 0;
}

.hunting .movie{
	width:100%;
	margin:8% 0 0;
	box-shadow:2px 2px 3px #000;
	position:relative;
}

.hunting .movie:before{
	content:'';
	background:url("../img/about/catch_action_sub.png");
	display:block;
	background-size:100%;
	background-repeat:no-repeat;
	width:80%;
	padding-top:30%;
	position:absolute;
	top:-9%;
	left:-8%;
}

.hunting .movie img{
	width:100%;
	display:block;
}

.weapon{
	padding:80% 0 0;
	position:relative;
}

.weapon .img{
	position:absolute;
	left:0px;top:0px;
	width:140%;

}
.weapon .text{
position:relative;
width:96%;
margin:-12% auto 0;
float:right;
font-size:14px;
}





.weapon .text .tit{
font-size:16px;
font-weight:800;
padding-bottom:10px;
}

.weapon .text .tit span{
color:#FFDE5D;
font-weight:800;
font-size:130%;
}

.btn_link{
width:180px;
max-width:60%;
display:block;
margin-top:12px;
}

.btn_link img{
width:100%;
display:block;
}

.mitama{
	padding:30px 0 0;
}

.mitama .text{
width:96%;
margin:5% auto 0;
}


.mitama .text .tit{
font-size:16px;
font-weight:800;
padding-bottom:10px;
line-height:1.3;
}

.mitama .text .tit span{
color:#FFDE5D;
font-weight:800;
font-size:120%;
}

.mitama .img img{
	display:block;
	float:left;
	width:30%;
	margin-left:2.2%;
}

.mitama .img{
	display:block;
	width:100%;
	padding-top:25px;
}


.online_box{
	background-color:rgba(60,60,60,0.7);
	margin-top:50px;
	width:100%;
	margin-left:-50px;
	padding:5px 50px;
	text-align:center;
}

.online_box p{
	font-size:16px;
	font-weight:800;
	padding:3% 0 3%;
	line-height:1.4;
}

.online_box img{
	font-size:22px;
	font-weight:800;
	width:60%;
}

.text_openworld{
	display:block;
	margin: 20px auto 160px;
	z-index:100;
	position:relative;
	width:100%;
}

.btn_outline{
	display:block;
	margin:0 auto 0px;
	width:70%;
	position:relative;
	z-index:50;
}

.btn_outline img{
	display:block;
	width:100%;
}


.btn_bottom{
	text-align:center;
	margin-top:10%;
	margin-bottom:18%;
	position:relative;
	z-index:20;

}


.btn_bottom img{
width:45%;

}

.anime .box.new a::before{
	content:'';
	background-image:url('../img/common/new.gif');
	display:block;
	width:30px;
	height:30px;
	background-size:100%;
	position:absolute;
	border-radius:25px;
	box-shadow:2px 2px 1px rgba(0,0,0,0.2);
	top:-8px;
	left:-8px;
}



.anime .box a{
	display:block;
	position:relative;
}

.anime .box a::after{
	content:'';
	background-image:url('../img/top/btn_play.png');
	display:block;
	width:36px;
	height:36px;
	background-size:100%;
	position:absolute;
	top:50%;
	left:50%;
	margin:-15px 0 0 -15px;
}

.anime .box.new a::before{
	content:'';
	background-image:url('../img/common/new.gif');
	display:block;
	width:25px;
	height:25px;
	background-size:100%;
	position:absolute;
	border-radius:25px;
	box-shadow:2px 2px 1px rgba(0,0,0,0.2);
	top:-8px;
	left:-8px;
}

.box a .long{
display:none;
}

}