@charset "utf-8";


@media screen and (min-width: 480px) and (max-width: 767px) {
	#wrap{
		width: 100%;
	 	background-position: 23% 0;
	}
	.mainnav{
		padding-left: 20px;
	}
	.snb{
		width: 23%;
	}
	.locate{
		right: 10px;
		top: 10px;
	}	
	#content{
		width: 75%;
	}	
	#footer .footerArea{
		width: 100%;
	}	
	.btmnav{
		float: none;
		margin-right: 0;
		margin-left: 20px;
	}	
	.btmnav:after{
		content: '';
		display: block;
		clear: both;
	}
	.copy{
		float: none;
	}	
}

@media screen and (max-width: 479px) {
	#wrap{
		width: 100%;
	 	background: none;
	}
	#header{
		padding-bottom: 0;
		border-bottom: none;
		background: none;
	}
	.topnav{
		display: none;
	}	
	.mainnav{
		padding-left: 0;
	}
	.mainnav li{
		float: none;
	}
	.mainnav li a{
		padding: 0;
		border-bottom: 1px solid #888;
		text-align: center;
		letter-spacing: 0.2em;
	}
	.snb{
		float: none;
		width: 100%;
	}
	.snb h2{
		display: none;
	}	
	.snb ul{
		margin-left: 0;
		border-bottom: 1px solid #ccc;
	}
	.snb ul:after{
		content: '';
		display: block;
		clear: both;
	}
	.snb ul li{
		float: left;
	}
	.snb ul a{
		display: block;
		padding: 0.5em 1em;
		text-align: center;
	}	
	.locate{
		display: none;
	}	
	#content{
		float: none;
		width: 100%;
	}	
	#content h2{
		padding: 24px 20px 0;
	}	
	#content .thum{
		float: none;
		margin: 14px 20px 0;
	}	
	#content .text{
		margin: 10px 20px;
	}	
	#footer .footerArea{
		width: 100%;
	}	
	.btmnav{
		float: none;
		margin-right: 0;
		margin-left: 20px;
	}	
	.btmnav:after{
		content: '';
		display: block;
		clear: both;
	}
	.copy{
		float: none;
	}
}