@charset "utf-8";


/*TOP下のバナー*/
.topbanner{
	width: 660px;
	margin:0 auto; 
	padding-bottom: 25px;
}

.topbanner li{
	width: 300px;
	float: left;
	margin-right: 60px;
}
.topbanner li:last-child{
	margin-right: 0px;
}



/*インフォメーション*/
.info_txt{
	margin-top:30px;
	padding-left:3px;
	font-size:12px;
	line-height:20px;
	}

#info{
	max-width: 960px;
	margin: 0 auto;
	padding: 30px 10px;
}
#info .info{
	width: 65%;
	float: left;	
}
#info .btn{
	max-width: 320px;
	float: right;
}


	





/**BOX*/

.works{
	margin:0;
	width:100%;
	height:auto;
	margin:0 auto;
	overflow: hidden;	
	}
	
.bn_top {
  width: 25%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  padding:0px;
  cursor: default;
  background-color:#fff;
	
}

.hovereffect {
  width: 100%;
  height: auto;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}



.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 70px 20px;
}

.hovereffect img {
  display: block;
   opacity: 1; 
   filter: alpha(opacity=40); 
  position: relative;
  max-width: none;
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px,0,0);
  transform: translate3d(-10px,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hovereffect:hover img {
  opacity: 0.4;
  filter: alpha(opacity=40);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}	



#innerfoot{
	display: none!important;
}

body#top div#header{
	margin:0 auto;
	position: absolute;
	top: 0px;
	width: 100%;
	height:80px;
	padding:0 10px;
	box-sizing: border-box;
}

div#gnavi_wrap{
	display:none;
}

div#gnavi_wrap_top{
	width: 100%;
	position:relative;
	background:url(../img/common/g_navi_bg2.png) repeat-x center top;
}


.top_dpb{
	display: none;
}

@media screen and (max-width: 800px){
	div#sp_nav_wrap {
		border-top:solid 5px #ccc;	
    	padding-top: 0px;
	}
	
	body#top div#header{
	margin:0 auto;
	position: relative;
	}
	
	.top_none{
		display: none;
	}
	.top_dpb{
		display: block;
	}
	

	
	#info .info{
		width: auto;
		float: none;
		margin-bottom: 20px;
	}
	#info .btn{
		float: none;	
		width: auto;
		text-align: center;
	}

	.top_btn li{
		width:100%;
		float:none;
	}
	
	
	.topbanner{
	
	width: 630px;
	margin:50px auto 30px auto; 
	padding-bottom: 30px;
}
.topbanner li{
	width: 300px;
	float: left;
	margin-right: 30px;
}
.topbanner li:last-child{
	margin-right: 0px;
}
	
	
	
		
.bn_top {
  width: 50%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  padding:0px;
  cursor: default;
  background-color:#fff;
	
}
	

	div#gnavi_wrap{
		display:block;
	}
	
	div#gnavi_wrap_top{
		display:none;
	}
	
	
	
	
	
	.wrap_map{
	width:100%;
	margin:0 auto;
	}


	.pop_conts {
		padding:140px 0 0 0;
	}
	
	
	
	
	
}
@media screen and (max-width: 799px){
	ul.sp_nav {
		display:none;
	}
}


@media screen and (max-width: 600px){
	.top_dpb{
		display: none;
	}
	.bgarea{
		display: none;
	}
	
	
	.topbanner{
		width: 100%;
	
	margin:30px auto 0px auto; 
}
	

	.topbanner li{
		width: 100%;
		margin-right: 2%;
		margin-bottom: 5%;
		text-align: center;
	}
	.topbanner li:nth-child(2n+2){
		margin-right: 0px;
	}
		



}