/* ===================================================================
CSS information
 file name  :  top.css
 style info :  トップページ専用スタイル
=================================================================== */


#header{
	position:relative;
	width:960px;
	height:195px;
}

#header .copy{
	position:absolute;
	top:0px;
	left:195px;
}

#header #nav{
	position:absolute;
	top:80px;
	left:186px;
}

#header #nav li{
	float:left;
	padding-left:9px;
}

.bx-controls{
	display:none;
}

.banner{
	height:110px;
	clear:both;
	padding-bottom:20px;
}

#facebook_likebox{
	position:absolute;
	top:0px;
	right:0px;
	background:#FFF;
	border:solid 1px #CCCCCC;
	width:300px;
	height:70px;
	
}

.bx-wrapper{
	padding-bottom:30px;
}


 @media only screen and (max-width: 640px) {
	.banner,
	#facebook_likebox{
		display:none;
	}
	 
 }

/************** history_wrap *****************/
.history_wrap{
	width:960px;
	height:368px;
}

.history_wrap .history{
	width:920px;
	height:270px;
	background:#c9d7e5;
	overflow:hidden;
}

.history_wrap li{
	float:left;
	margin:0 2px 2px 0;
}

.history_wrap li.mr{
	margin:0 0 2px 0;
}

.history_wrap li.mb{
	margin:0 2px 0px 0;
}

.history_wrap li.mbr{
	margin:0 0px 0px 0;
}


/************** trivia_wrap *****************/
.trivia_wrap{
	width:960px;
	height:368px;
}

.trivia_wrap .trivia{
	width:920px;
	height:270px;
	background:#c9d7e5;
	overflow:hidden;
}

/************** guide_wrap *****************/
.guide_wrap{
	width:960px;
	height:368px;
}

.guide_wrap .guide{
	width:920px;
	height:270px;
	background:#c9d7e5;
	overflow:hidden;
}


/************** job_wrap *****************/
.job_wrap{
	width:960px;
	height:368px;
}

.job_wrap .job{
	width:920px;
	height:270px;
	background:#c9d7e5;
	overflow:hidden;
}

/************** playback_wrap *****************/
.playback_wrap{
	width:960px;
	height:368px;
}

.playback_wrap .plauback{
	width:920px;
	height:270px;
	background:#c9d7e5;
	overflow:hidden;
}

.playback_wrap li{
	float:left;
	margin:0 24px 5px 0;
}

.playback_wrap li.mr{
	margin:0 0 5px 0;
}

.playback_wrap li.mb{
	margin:0 24px 0px 0;
}

.playback_wrap li.mbr{
	margin:0 0px 0px 0;
}


/************** oshiete_wrap *****************/
.oshiete_wrap{
	width:960px;
	height:368px;
}

.oshiete_wrap .oshiete{
	padding-left:10px;
}

.oshiete_wrap li{
	float:left;
	margin:0 10px 10px 0;
}



 #facebook_sp{
	 display:none;
 }
 
 
 .sub_area{
	 width:960px;
	 clear:both;
	 position:relative;
	 
 }
 .social {
	padding: 0 0 20px;
}

 

@media only screen and (max-width:640px) {
	
	#header{
		width:100%;
		height:auto;
		padding-top:2%;
	}
	
	#header h1{
		width:30%;
		padding-left:2%;
		padding-bottom:2%;
		float:left;
	}
	#header h1 img{
		width:100%;
	}
	
	#header .copy{
		width:60%;
		padding-top:5%;
		padding-left:2%;
		position:static;
		float:left;
	}
	
	#header .copy img{
		width:100%;
	}

	#header #nav{
	position:static;
	
	}
	
	#header #nav li{
	float:left;
	padding-left:0px;
	width:96%;
	margin:0 2% 2%;
	}

	#header #nav img{
		width:100%;
	}

	.bx-wrapper,
	#slider{
		display:none;
	}
	
	 .sub_area{
		 width:100%;
	 }
}


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


#facebook_sp{
	display:block;
	width:80%;
	margin-left:10%;
	margin-top:30px;
	margin-bottom:10px;
}

#facebook_sp img{
	width:100%;
	margin-bottom:10px;
}

 }