@charset "utf-8";


/* 追加要素　※レスポンシブ化する際に追加される部分 
--------------------------------------------------- */

/* #headerに追記するアコーディオン */

#menubtn {
	display: none;
}

/* #overlaybox */
#overlaybox {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10000;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
}

/* #navbox */
#navbox {
	display: none;
	position: absolute;
	top: 0;
	z-index: 10001;
	overflow: hidden;
}
#navbox .basicbtn {
	overflow:hidden;
	zoom:1;
}

#navbox .basicbtn p {
	float: right;
	margin-left:5px;
	cursor: pointer;
}

#navbox .basicbtn p img {
	width:100%;
}

#navbox .basicbtn p span,
#navbox .basicbtn p a {
	display: table-cell;
	width: 40px;
	height: 40px;
	text-align: center;
	vertical-align:middle;
}
#navbox .basicbtn p:first-child {
	border-radius: 0 5px 0 0;
}
#navbox .basicbtn p:last-child {
	border-radius: 5px 0 0 0;
}
#navbox ul {
	font-size: 1.6rem;
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 0 3px rgba(0,0,0,0.3);
	box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
#navbox ul li a {
	background:url(../image/spnav_icon.png) right center no-repeat #3C7AC6;
	border-bottom: 1px solid #fff;
	display: block;
	position: relative;
	padding: 10px 26px 10px 10px;
	color: #fff;
	text-decoration: none;
	font-weight:normal;
}
#navbox ul li:first-child a {
	border-radius: 5px 0 0 0;
}
#navbox ul li:last-child a {
	border-radius: 0 0 5px 5px;
}

#navbox ul li.last a {
	border-bottom:none;
}

/*
#navbox ul li a::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	width: 10px;
	height: 10px;
	border-right: #fff 1px solid;
	margin-top: -4px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
*/

/*#navbox .basicbtn p:hover,*/
#navbox ul li a:hover {
	background:url(../image/spnav_icon.png) right center no-repeat #335891;
}


/*===============================================
  画面の横幅が680px以下に適用
===============================================*/
@media screen and (max-width: 680px){
	/*--------------------------------------
		common
	--------------------------------------*/
	html {
		font-size: 62.5%;
	}
	a:link {
		text-decoration: underline;
	}
	/* box-sizing */
	*, *:before, *:after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
	img {
		max-width: 100%;
	}
	body,
	#wrap,
	#header .header,
	#footer .footer {
		width: auto;
		min-width: 320px;
	}
	/* lsearch */
	div.sbox-cen h1.stext {
		font-weight: normal;
	}
	div.sbox-cen p.summary {
		display: none;
	}
	/* h1 */
	body h1.seotext {
		padding-bottom: 0;
		font-size: 1.0rem;
	}
	body h1.seotext span {
		display: none;
	}
	#fixnav {
		display:block;
	}
	
	#wrap {
		font-size: 1.2rem;
		background:#fff;
	}
	#mainimg {
	}

	#main {
		float: none;
		width: 94%;
		padding: 15px 0;
		margin: 0 auto;
	}
	/* #navbox */
	#navbox {
		width: 60%;
		margin: 3% 20% 0;
	}
	/* .panz */
	#content .panz {
		font-size:1.2rem;
		line-height: 1.2;
	}
	#content .panz li {
		display: inline-block;
		/display: inline;
	}
	/* #pagetop 角丸 */
	#main #pagetop {
		padding: 0;
		margin: 0;
		position: fixed;
		right: 10px;
		bottom: 10px;
		z-index: 9999;
		background:none;
	}
	/*
	#main #pagetop a {
		background: rgba(60,122,198,0.7);
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		width: 40px;
		height: 40px;
		padding: 0;
		margin: 0;
		display:block;
	}
	#main #pagetop a:hover {
		background: rgba(76,165,121,0.7);
	}
	
	#main #pagetop a img {
		display: none;
	}
	#main #pagetop a:after {
		content: "";
		position: absolute;
		top: 40%;
		left: 30%;
		display: block;
		width: 15px;
		height: 15px;
		border-right: #FFF 1px solid;
		border-bottom: #FFF 1px solid;
		-webkit-transform: rotate(-135deg);
		transform: rotate(-135deg);
	}
	*/

	/*--------------------------------------
		#header
	--------------------------------------*/
	#header {
		position: relative;
		width: 100%;
		height: 65px;
	}
	#header .header {
		padding: 8px 10px;
		width: auto;
		height: 100%;
	}
	#header .header .logo {
		width: auto;
		height: 100%;
		padding: 0;
	}
	#header .header .logo img {
		max-height: 100%;
	}
	#header .info {
		display: none;
	}
	/* #menubtn */
	#menubtn {
		float: right;
		-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;
		width: 40px;
		height: 40px;
		display: block;
		position: absolute;
		top: 20%;
		right: 15px;
	}
	
	

	/*--------------------------------------
		#nav
	--------------------------------------*/
	#nav {
		display: none;
	}

	/*--------------------------------------
		#side
	--------------------------------------*/
	#side {
		float: none;
		width: auto;
	}
	#side p.top,
	#side .nav,
	#side .infobar,
	#side .info {
		display: none;
	}
	#side .contact {
		overflow: hidden;
	}
	#side .contact li {
		float: left;
	}
	#side .banner {
		overflow: hidden;
		text-align: center;
	}
	#side .banner li {
		display:inline-block;
		width: 33.3%;
		/* width: 50%; */
		margin: 0;
		text-align: center;
	}
	#side .catbar {
		text-align: center;
	}
	#side .catlist {
		text-align: center;
	}

	/*--------------------------------------
		#fnav
	--------------------------------------*/
	#fnav {
		width: 100%;
	}
	#fnav ul {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	#fnav ul li {
		position: relative;
		float: left;
		border-bottom: #EEE 1px solid;
		border-right: none;
		width: 100%;
	}
	#fnav ul li a {
		padding: 12px 10px 10px;
		font-size: 1.6rem;
		font-weight: normal;
		text-align: left;
		text-decoration: none;
		display: block;
	}
	
	#fnav ul li a:hover {
		background:#eee;
	}
	
	
	#fnav ul li a:after {
		position: absolute;
		top: 50%;
		right: 18px;
		border-right: #666 1px solid;
		border-bottom: #666 1px solid;
		width: 12px;
		height: 12px;
		margin-top: -7px;
		display: block;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		content: "";
	}
	
	
	/*--------------------------------------
		#footer
	--------------------------------------*/
	#footer .footer {
		padding: 15px 10px 20px;
	}
	#footer .footer p {
		line-height: 1.6;
		text-align: center;
	}
	#footer .footer address {
		text-align: center;
	}

	/*--------------------------------------
		#content
	--------------------------------------*/
	#content {
		float: none;
		width: auto;
		padding: 0 0 20px;
		font-size: 1.6rem;
		line-height: 1.5;
	}
	#content h3 {
		width: auto;
		/*padding: 6px 10px 4px;*/
		margin-bottom: 1.0em;
		font-size: 1.8rem;
		line-height: 1.4;
	}
	#content .aside {
		margin-bottom: 0;
	}
	#content .aside dl,
	#content .aside li {
		width: 48.5%;
		margin: 0 3% 30px 0;
	}
	#content .aside dl:nth-child(even),
	#content .aside li:nth-child(even) {
		margin-right: 0;
	}
	#content .likebox iframe {
		display: none;
		width: 100% !important;
	}
	#content .twitter iframe {
		width: 100% !important;
		
	}

	/* .imgleft, .imgright */
	#content .imgleft .image,
	#content .imgright .image {
		border: none;
		width: 40%;
		text-align: center;
	}
	#content .imgleft .image li,
	#content .imgright .image li {
		border: none;
		margin: 0 0 10px;
		padding: 0;
		text-align: center;
	}
	
	#content .imgleft .image{
		margin-right:20px;
	}
	#content .imgright .image {
		margin-left:20px;
	}
	
	#content .imgleft .image li span,
	#content .imgright .image li span,
	#content .imgleft .image li a,
	#content .imgright .image li a {
		width: 100%;
	}
	#content .imgleft .text,
	#content .imgright .text {
		width: 100%;
		margin: 0 0 20px;
	}

	#content p.contact {
		margin-bottom: 0;
	}

	/* pagebute */
	#content ul.page li a.link_page,
	#content ul.page li span.current_page {
		border-radius: 4px;
		width: 28px;
		height: 28px;
		padding: 6px 0;
	}

	/* youtube */
	.movie {
		position: relative;
		height: 0;
		padding-bottom: 56.25%;
		padding-top: 30px;
		margin-bottom: 5px;
		overflow: hidden;
	}
	.movie iframe,
	.movie object,
	.movie embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}


	/*--------------------------------------
		トップページ
	--------------------------------------*/
	
	#topics {
		border: 1px solid #CCCCCC;
		margin-bottom: 30px;
		height: auto;
		overflow: hidden;
	}
	#topics dl:last-child {
		border: none;
	}
	
	#content #map.index {
	}
	
	#content .greeting.imgleft ul,
	#content #voice .imgleft ul {
		width:30%;
		margin-right:10px;
	}
	
	/*--------------------------------------
		業務案内
	--------------------------------------*/
	
	#content .imgleft p {
		width:100%;
		margin:0;
	}
	
	/*--------------------------------------
		施工例詳細
	--------------------------------------*/
	
	/*
	
	#detail .imgbox ul.imgbig li img {
		max-width:285px;
		max-height:285px;
	}*/
	#detail .imgbox ul.imglist li img {
		max-width:130px;
		max-height:130px;
	}
	
	
	#detail .imgbox {
		background:none;
	}
	
	#detail .imgbox ul.imgbig {
		margin:0;
		width:310px;
		margin:0 auto;
	}
	
	#detail .imgbox ul.imgbig li {
		margin:0 0 20px;
		float:none;
	}
	
	#detail .imgbox ul.imgbig li.none {
		background: url(../image/sp_det_icon.gif) center top no-repeat;
		padding-top:20px;
	}
	
	
	#detail .imgbox ul.imglist {
		width:350px;
		margin:0 auto;
		overflow:hidden;
		zoom:1;
	}
	
	#detail .imgbox ul.imglist li,#detail .imgbox ul.imglist li.none {
		margin:0 0 20px 20px;
	}
	
	/*--------------------------------------
		会社概要
	--------------------------------------*/
	#company table th,
	#company02 table th {
		width: 30%;
	}
	#company table th,
	#company table td,
	#company02 table th,
	#company02 table td {
		padding: 10px 30px 5px 20px;
	}
	#company02 dl dt {
		font-size: 1.8rem;
	}
	
	#content #map {
		width: 100%;
		height:250px;
		margin-right: auto;
		margin-left: auto;
	}

	/*--------------------------------------
		お問い合わせ
	--------------------------------------*/
	#content #mailform table th {
		font-size: 1.6rem;
	}
	#content #mailform table td {
		background: #FFFFFF;
	}
	#content #mailform table th,
	#content #mailform table td {
		border-bottom: none;
		width: 100%;
		display: block;
		padding: 8px 20px 8px 20px;
	}
	
	#content #mailform table th:last-child,
	#content #mailform table td:last-child {
		border-bottom: 1px solid #DFDFDF;
	}
	
	
	#content #mailform table td input[type="text"] {
		border-radius: 5px;
		width: 100%;
		height: 2.5em;
	}
	#content #mailform table td input.postage {
		width: 150px;
	}

	#content #mailform table textarea {
		border-radius: 5px;
		width: 100% !important;
		height: 120px !important;
		margin: 2px 0;
		padding: 5px;
	}
	
	#privacy ol {
		margin-left:20px;
	}
	
	/*--------------------------------------
		新着情報
	--------------------------------------*/
	
	#news .txt {
		margin:0;
	}
	
	#news ul {
		margin-left:20px;
	}
	
}


/*===============================================
  画面の横幅が480px以下に適用
===============================================*/
@media screen and (max-width: 480px){
	/*--------------------------------------
		#side
	--------------------------------------*/
	#side .banner li {
		float: left;
		width: 49.5%;
		margin: 0;
	}

	/*--------------------------------------
		#fnav
	--------------------------------------*/
	#fnav ul li {
		float: left;
		border-right: none;
		width: 100%;
	}
	#fnav ul li:last-child {
		border-bottom: none;
	}

	/*--------------------------------------
		#content
	--------------------------------------*/
	/* table */
	#content table th,
	#content table td {
		border-bottom: none;
		width: 100%;
		display: block;
	}
	
	#content table th:last-child,
	#content table td:last-child {
		border-bottom: 1px solid #DFDFDF;
	}
	
	/* .imgleft, .imgright */
	#content .imgleft .image,
	#content .imgright .image {
		border: none;
		width:30%;
		text-align: center;
	}
	

	/*--------------------------------------
		index
	--------------------------------------*/
	#topics {
		border: 1px solid #CCCCCC;
		margin-bottom: 30px;
	}
	#topics dl {
		overflow: hidden;
		/zoom: 1;
	}
	#topics dt {
		float: none;
		font-size: 0.85em;
	}
	#topics dd {
		padding: 0;
	}

	#navbox {
		width: 80%;
		margin: 10% 10% 0;
	}

	/*--------------------------------------
		#product
	--------------------------------------*/
	#product dl,
	#product dl.none {
		width: 45%;
		margin-right: 5%;
	}
	#product dl:nth-child(even)  {
		margin-right: 0;
	}
	
	/*--------------------------------------
		トップページ
	--------------------------------------*/
	
	#content #map.index {
		float:none;
		margin-bottom:10px;
		width:100%;
	}
	
	#content .thid .in {
		float:none;
		margin:0;
	}
	
	/*--------------------------------------
		新着情報
	--------------------------------------*/
	
	#news ul {
		float:none;
		overflow:hidden;
		zoom:1;
		padding-bottom:10px;
	}
	
	#news ul li {
		float:left;
		margin:0 0 10px;
		/*width:40%;*/
		text-align:center;
		padding-right:10px;
	}
	
	#news ul li img {
		max-width:138px;
		max-height:138px;
	}
	
	
	#news ul li.fancybox a {
		width:145px;
		height:145px;
	}
	
	
	#news .txt {
		margin:0;
	}
	
	/*--------------------------------------
		お客様の声
	--------------------------------------*/
	
	#voice .imgleft ul li,
	#voice .imgright ul li {
		width:auto;
		padding:0;
		text-align: center;
	}
	
	#voice .text {
		margin:0;
	}
	
	#voice dl dd {
		font-size:1.4rem;
	}
	
	/*--------------------------------------
		施工例
	--------------------------------------*/
	
	#case .box .imgbox {
		float:none;
		padding-bottom:10px;
		background: url(../image/index14.jpg) center center no-repeat;
		overflow: hidden;
		/zoom: 1;
	}
	
	#case .box .imgbox dl {
		float:none;
	}
	
	
	#case .box .imgbox dl,
	#case .box .imgbox li {
		width:auto;
		text-align: center;
	}
	
	#case .box .imgbox li {
		margin:0;
		width:45%;
	}
	
	#case .box .imgbox li.none {
		float:right;
	}
	#case .box .imgbox dl dt {
		margin: 10px 0 0;
		line-height: 1.0;
	}
	
	#case .box .text {
		margin:0;
	}
	
	
	/*--------------------------------------
		こだわり・施工の流れ
	--------------------------------------*/
	
	#flow .box .image {
		width:30%;
	}
	
	#flow .box dl {
		margin-left:32%;
	}

}