/* LESS Document */

/*-----------------------------------------------------------
class
------------------------------------------------------------*/
@media print, screen and (min-width: 641px){
	
	.pc{display: block;}
	.sp{display: none;}
	
	h1{
		clear: both;
		font-size: 2.6rem;
		font-weight: bold;
		padding: 5px 10px;
		margin-bottom: 20px;
		border-left: 5px #91cc00 solid;
		border-right: 2px #91cc00 solid;
		border-top: 2px #91cc00 solid;
		border-bottom: 2px #91cc00 solid;
	}
	h2{
		clear: both;
		font-size: 2.0rem;
		font-weight: bold;
		margin-bottom: 20px;
		border-bottom: 2px #91cc00 solid;
	}
	h3{
		clear: both;
		font-size: 1.8rem;
		font-weight: bold;
		margin-bottom: 20px;
		border-bottom: 1px #91cc00 dotted;
	}
	strong{
		font-weight: bold;
	}
	.box-title{
		font-size: 3.6rem;
		font-weight: bold;
		margin-bottom: 10px;
		text-align: center;
		position: relative;
		margin-bottom: 50px;

		&::after{
			content: "";
			width: 10%;
			border-bottom: 3px #8ec900 solid;
			left: 45%;
			right: 45%;
			margin-top: 50px;
			position: absolute;
		}
	}
	.link-l{
		text-align: left;
		font-size: 1.4rem;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.link-r{
		text-align: right;
		font-size: 1.4rem;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.text-center{
		text-align: center;
	}
	.left-img{
		float: left;
		width: 300px;
		height: auto;
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.right-img{
		float: right;
		width: 300px;
		height: auto;
		margin-left: 10px;
		margin-bottom: 10px;
	}
	.read-bt{
		margin-bottom: 50px;
		
		a{
			width: 300px;
			padding: 20px 0;
			margin: 0 auto;
			display: block;
			color: #333;
			font-size: 1.6rem;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			border: 1px #333 solid;
			box-sizing: border-box;
			
			&:hover{
				background: #eee;
				-webkit-transition: all 0.2s;
				-moz-transition: all 0.2s;
				-ms-transition: all 0.2s;
				-o-transition: all 0.2s;
				transition: all 0.2s;
			}
		}
	}
	table{
		width: 100%;
		
		tr{
			
			th{
				width: 180px;
				padding: 15px;
				text-align: left;
				font-size: 1.4rem;
				font-weight: normal;
				background: #f5f5f5;
				vertical-align: middle;
				box-sizing: border-box;
				border: 1px #ddd solid;
				line-height: 1.5;
			}
			td{
				padding: 15px;
				text-align: left;
				font-size: 1.4rem;
				font-weight: normal;
				background: #ffffff;
				vertical-align: middle;
				box-sizing: border-box;
				border: 1px #ddd solid;
				line-height: 1.5;
			}
		}
	}
	#pagination{
		margin-bottom: 50px;
		overflow: hidden;
	}
	.wp-pagenavi{
		clear: both;
		padding: 20px 0;
		text-align: center;
		
		a{
			font-size:1.4rem;
			padding: 5px 10px;
			margin: 0 1px;
			border-radius: 2px;
			border: 1px #ddd solid;
			background: #ffffff;
			text-decoration: none;
			display: inline-block;
			
			&:hover{
				background: #f5f5f5;
			}
		}
		span{
			color: #ddd;
			font-size:1.4rem;
			padding: 5px 10px;
			margin: 0 1px;
			border-radius: 2px;
			border: 1px #ddd solid;
			background: #ffffff;
			text-decoration: none;
			display: inline-block;
		}
	}
}
@media screen and (max-width: 640px){
	
	.pc{display: none;}
	.sp{display: block;}
	
	h1{
		clear: both;
		font-size: 2.4rem;
		font-weight: bold;
		padding: 5px 10px;
		margin-bottom: 20px;
		border-left: 5px #91cc00 solid;
		border-right: 2px #91cc00 solid;
		border-top: 2px #91cc00 solid;
		border-bottom: 2px #91cc00 solid;
	}
	h2{
		clear: both;
		font-size: 1.8rem;
		font-weight: bold;
		margin-bottom: 20px;
		border-bottom: 2px #91cc00 solid;
	}
	h3{
		clear: both;
		font-size: 1.6rem;
		margin-bottom: 10px;
		border-bottom: 1px #91cc00 dotted;
	}
	strong{
		font-weight: bold;
	}
	.box-title{
		font-size: 3.2rem;
		font-weight: bold;
		margin-bottom: 10px;
		text-align: center;
		position: relative;
		margin-bottom: 40px;

		&::after{
			content: "";
			width: 20%;
			border-bottom: 3px #8ec900 solid;
			left: 40%;
			right: 40%;
			margin-top: 40px;
			position: absolute;
		}
	}
	.link-l{
		text-align: left;
		font-size: 1.4rem;
		margin: 20px 10px;
	}
	.link-r{
		text-align: right;
		font-size: 1.4rem;
		margin: 20px 10px;
	}
	.text-center{
		text-align: left;
	}
	.left-img,
	.right-img{
		width: 100%;
		height: auto;
	}
	.read-bt{
		margin-bottom: 30px;
		
		a{
			max-width: 100%;
			padding: 20px 0;
			margin: 0 auto;
			display: block;
			color: #333;
			font-size: 1.6rem;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			border: 1px #333 solid;
			box-sizing: border-box;
			
			&:hover{
				background: #eee;
				-webkit-transition: all 0.2s;
				-moz-transition: all 0.2s;
				-ms-transition: all 0.2s;
				-o-transition: all 0.2s;
				transition: all 0.2s;
			}
		}
	}
	table{
		width: 100%;
		
		tr{
			
			th{
				padding: 15px;
				display: block;
				text-align: left;
				font-size: 1.4rem;
				background: #f5f5f5;
				font-weight: normal;
				vertical-align: middle;
				box-sizing: border-box;
				border: 1px #eee solid;
				line-height: 1.5;
			}
			td{
				padding: 15px;
				display: block;
				text-align: left;
				font-size: 1.4rem;
				background: #ffffff;
				font-weight: normal;
				vertical-align: middle;
				box-sizing: border-box;
				border: 1px #eee solid;
				line-height: 1.5;
			}
		}
	}
	#pagination{
		margin-bottom: 20px;
		overflow: hidden;
	}
	.wp-pagenavi{
		clear: both;
		padding: 20px 0;
		text-align: center;
		
		a{
			font-size:1.4rem;
			padding: 5px 10px;
			margin: 0 1px;
			border-radius: 2px;
			border: 1px #ddd solid;
			background: #ffffff;
			text-decoration: none;
			display: inline-block;
			
			&:hover{
				background: #eeeeee;
			}
		}
		span{
			color: #ddd;
			font-size:1.4rem;
			padding: 5px 10px;
			margin: 0 1px;
			border-radius: 2px;
			border: 1px #ddd solid;
			background: #ffffff;
			text-decoration: none;
			display: inline-block;
		}
	}
}
form{

	select,
	textarea,
	input[type="tel"],
	input[type="text"],
	input[type="mail"],
	input[type="submit"],
	input[type="number"],
	input[type="image"]{
		-webkit-appearance: none;
		-moz-appearance: none;
		-ms-appearance: none;
		-o-appearance: none;
		appearance: none;
	}
}

/*-----------------------------------------------------------
col
------------------------------------------------------------*/
@media print, screen and (min-width: 641px){
	
	.inner{
		width: 980px;
		margin: 0 auto;
		
		main{
			float: left;
			width: 700px;
		}
		article{
			clear: both;
			overflow: hidden;
			margin-bottom: 50px;
		}
		section{
			clear: both;
			overflow: hidden;
		}
		aside{
			float: right;
			width: 240px;
			
			.aside-nav{
				padding: 10px;
				border-radius: 5px;
				margin-bottom: 10px;
				
				.aside-nav-title{
					font-size: 1.8rem;
					font-weight: bold;
					margin-bottom: 10px;
				}
				ul{
					padding: 0 10px;
					border-radius: 5px;
					background: #fff;
					
					li{
						padding: 10px 0;
						border-bottom: 1px #ddd dotted;
						
						&:last-child{
							border-bottom: 0;
						}
						a{
							color: #333;
							font-size: 1.4rem;
						}
					}
				}
			}
			#mizumawari{background: #c6f0f0;}
			#naisou{background: #dceda7;}
			#gaisou{background: #ffd6b1;}
			#gas{background: #ffddd7;}
			.aside-bn{
				
				li{
					margin-bottom: 10px;
				}
			}
		}
		#archive{
			overflow: hidden;
			margin-bottom: 20px;

			li{
				border-top: 1px #dddddd dotted;
				padding: 30px 0;
				
				&:last-child{
					border-bottom: 1px #dddddd dotted;
				}
				time{
					font-size: 1.6rem;
					display: inline;
				}
				.new{
					color: #ff0000;
					font-size: 1.6rem;
					display: inline;
				}
				a{
					font-size: 1.6rem;
					display: inline;
				}
			}
		}
	}
}
@media screen and (max-width: 640px){
	
	.inner{
		max-width: 640px;
		margin: 0 3%;
		
		main{
			max-width: 100%;
		}
		aside{
			max-width: 100%;
			
			.aside-nav{
				padding: 10px;
				border-radius: 5px;
				margin-bottom: 10px;
				
				.aside-nav-title{
					font-size: 1.6rem;
					font-weight: bold;
					margin-bottom: 10px;
				}
				ul{
					padding: 0 10px;
					border-radius: 5px;
					background: #fff;
					
					li{
						padding: 10px;
						border-bottom: 1px #ddd dotted;
						
						&:last-child{
							border-bottom: 0;
						}
						a{
							color: #333;
							font-size: 1.4rem;
						}
					}
				}
			}
			#mizumawari{background: #c6f0f0;}
			#naisou{background: #dceda7;}
			#gaisou{background: #ffd6b1;}
			#gas{background: #ffddd7;}
			.aside-bn{
				
				li{
					margin-bottom: 10px;
					
					img{
						width: 100%;
						height: auto;
					}
				}
			}
		}
		article{
			clear: both;
			overflow: hidden;
			margin-bottom: 30px;
		}
		section{
			clear: both;
			overflow: hidden;
		}
		#archive{
			overflow: hidden;
			margin-bottom: 20px;
			
			li{
				border-top: 1px #dddddd dotted;
				line-height: 1.5;
				padding: 20px 0;
				
				&:last-child{
					border-bottom: 1px #dddddd dotted;
				}
				time{
					font-size: 1.2rem;
					display: inline;
				}
				.new{
					color: #ff0000;
					font-size: 1.2rem;
					display: inline;
				}
				a{
					font-size: 1.4rem;
					display: block;
					margin-top: 5px;
				}
			}
		}
	}
}

/*-----------------------------------------------------------
header
------------------------------------------------------------*/
@media print, screen and (min-width: 641px){
	
	header{
		width: 980px;
		margin: 0 auto;
		overflow: hidden;
		
		#logo{
			float: left;
			margin-top: 20px;
			margin-bottom: 20px;
		}
		#header-contact{
			float: right;
			margin-top: 20px;
			margin-bottom: 20px;
			
			li{
				float: left;
				
				&:first-child{
					margin-right: 10px;
				}
			}
		}
	}
	#gm{
		clear: both;
		width: 100%;
		height: 40px;
		background: #91cc00;
		
		ul{
			width: 980px;
			margin: 0 auto;
			overflow: hidden;
			
			li{
				float: left;
				width: 196px;
				border-left: 1px #fff solid;
				box-sizing: border-box;
				
				&:last-child{
					border-right: 1px #fff solid;
				}
				a{
					color: #fff;
					padding: 13px 0;
					font-size: 1.4rem;
					text-align: center;
					font-weight: bold;
					display: block;
					
					&:hover{
						background: #e4f7a9;
						text-decoration: none;
						-webkit-transition: all 0.2s;
						-moz-transition: all 0.2s;
						-ms-transition: all 0.2s;
						-o-transition: all 0.2s;
						transition: all 0.2s;
					}
				}
			}
		}
	}
	#service-nav{
		background: #f9f9f9;
		overflow: hidden;
		
		ul{
			width: 980px;
			margin: 0 auto;
			
			li{
				float: left;
				width: 245px;
				padding: 15px 0;
				border-left: 1px #fff solid;
				box-sizing: border-box;
				
				
				&:nth-child(1){
					border-bottom: 5px #df6959 solid;
				}
				&:nth-child(2){
					border-bottom: 5px #36acc0 solid;
				}
				&:nth-child(3){
					border-bottom: 5px #80af00 solid;
				}
				&:nth-child(4){
					border-bottom: 5px #ff8000 solid;
					border-right: 1px #fff solid;
				}
			}
		}
	}
	#drawer,
	.drawer-button{
		display: none;
	}
	#bcm{
		clear: both;
		color: #999;
		font-size: 1.2rem;
		margin: 15px 0;
		
		li{
			margin: 0 5px;
			display: inline-block;
			
			&:first-child{
				margin-left: 0;
			}
			&:last-child{
				margin-right: 0;
			}
			a{
				display: inline-block;
				
				span{
					display: inline-block;
					
					&:hover{
						text-decoration: underline;
					}
				}
			}
		}
	}
}
@media screen and (max-width: 640px){
	
	header{
		max-width: 640px;
		margin: 0 auto;
		overflow: hidden;

		#logo{
			float: left;
			margin-top: 15px;
			margin-bottom: 20px;
			margin-left: 3%;

			img{
				width: 180px;
				height: auto;
			}
		}
		.drawer-button{
			float: right;
			margin-top: 20px;
			margin-right: 3%;

			img{
				width: 100px;
				height: auto;
			}
		}
	}
	#service-nav{
		
		ul{
			width: 100%;
			overflow: hidden;
			
			li{
				float: left;
				width: 25%;
				border-right: 1px #fff solid;
				box-sizing: border-box;
				
				&:last-child{
					border-right: 0;
				}
				img{
					width: 100%;
					height: auto;
				}
			}
		}
	}
	#gm,#header-contact{
		display: none;
	}
	#drawer{
		position: fixed;
		top: 0;
		right: -240px;
		width: 240px;
		height: 100%;
		overflow-x: hidden;
		background: #eee;
		-webkit-transition: all .2s;
		transition: all .2s;
		z-index: 9999;

		&.open {
			-webkit-transform: translate3d(-240px, 0, 0);
			transform: translate3d(-240px, 0, 0);
		}
		.drawer-button{
			float: right;

			img{
				width: 70px;
				height: auto;
			}
		}
		#drawer-contact{
			clear: both;
			border-top: 1px #bbb solid;
			overflow: hidden;
			
			li{
				float: left;
				width: 48%;
				margin: 0 1%;
				border: 0;
				
				img{
					width: 100%;
					height: auto;
				}
				a{
					&:after{
						display: none;
					}
				}
			}
		}
		ul{

			li{
				box-sizing: border-box;
				border-top: 1px #bbb solid;
				position: relative;
				
				&:last-child{
					border-bottom: 1px #bbb solid;
				}
				a{
					color: #333;
					display: block;
					font-size: 1.4rem;
					padding: 15px 3%;
						
					&:after{
						float: right;
						content: "";
						width: 12px;
						height: 12px;
						background: url(../images/arrow.png);
						background-size: cover;
						position: absolute;
						top: 35%;
						right: 15px;
					}
				}
			}
		}
	}
	#bcm{
		clear: both;
		color: #999;
		max-width: 640px;
		font-size: 1.0rem;
		line-height: 1.2;
		margin: 10px 0;
		overflow-x: auto;
		white-space: nowrap;
		
		li{
			margin: 0 5px;
			display: inline-block;
			
			&:first-child{
				margin-left: 0;
			}
			&:last-child{
				margin-right: 0;
			}
			a{
				display: inline-block;
				
				span{
					display: inline-block;
					
					&:hover{
						text-decoration: underline;
					}
				}
			}
		}
	}
}

/*-----------------------------------------------------------
index
------------------------------------------------------------*/
@media print, screen and (min-width: 641px){
	
	#slider-wrap{
		clear: both;

		.bx-wrapper{
			width: 1200px;
			height: 400px;
			margin-left: auto;
			margin-right: auto;
		}
	}
	.bx-pager {
		text-align: center;
		font-size: 0.8rem;
		color: #666666;
		z-index: 100;
		position: relative;
		top: -20px;
	}
	.bx-pager-item,
	.bx-controls-auto-item{
		display: inline-block;
	}
	.bx-default-pager{

		a{
			background: #999;
			text-indent: -9999px;
			display: block;
			width: 10px;
			height: 10px;
			margin: 0 5px;
			outline: 0;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;

			&:hover{
				background: #4dc1f0;
			}
		}
		.active{
			background: #4dc1f0;
		}
	}
	.bx-controls-direction {
		display: none;
	}
	#index-service{
		margin-bottom: 50px;
		
		ul{
			overflow: hidden;
			margin-bottom: 20px;
			
			li{
				float: left;
				width: 245px;
				
				img{
					margin-bottom: 10px;
				}
				a{
					color: #333;
					font-size: 1.6rem;
				}
			}
		}
	}
	#index-bn2{
		
		ul{
			overflow: hidden;
			margin-bottom: 50px;
			
			li{
				float: left;
				width: 480px;
				
				&:nth-child(2){
					float: right;
				}
			}
		}
	}
	#index-bn3{
		
		ul{
			overflow: hidden;
			margin-bottom: 50px;
			
			li{
				float: left;
				width: 300px;
				margin-right: 40px;
				
				&:nth-child(3){
					margin-right: 0;
				}
			}
		}
	}
}
@media screen and (max-width: 640px){
	
	#slider-wrap{
		clear: both;
		position: relative;
		max-width: 640px;
		line-height: 1.0;
		overflow: hidden;
		
		a{
			&:hover{
				text-decoration: none;
			}
		}
		.bx-wrapper{
			width: 100%;
			margin-left: auto;
			margin-right: auto;
			position: relative;
			border-radius: 10px;
			
			img{
				width: 100%;
				height: auto;
				display: block;
			}
		}
	}
	.bx-pager {
		text-align: center;
		font-size: 0.8rem;
		color: #666666;
		z-index: 100;
		padding: 10px 0;
		position: relative;
		top: -30px;
		margin-bottom: -30px;
	}
	.bx-pager-item,
	.bx-controls-auto-item{
		display: inline-block;
	}
	.bx-default-pager{

		a{
			background: #999;
			text-indent: -9999px;
			display: block;
			width: 10px;
			height: 10px;
			margin: 0 5px;
			outline: 0;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;

			&:hover{
				background: #ff718d;
			}
		}
		.active{
			background: #4dc1f0;
		}
	}
	.bx-controls-direction {
		display: none;
	}
	#index-service{
		
		ul{
			overflow: hidden;
			
			li{
				float: left;
				width: 50%;
				margin-bottom: 20px;
				
				img{
					width: 100%;
					height: auto;
					margin-bottom: 5px;
				}
				a{
					color: #333;
					font-size: 1.3rem;
					
				}
			}
		}
	}
	#index-bn2{
		
		ul{
			overflow: hidden;
			
			li{
				width: 100%;
				margin-bottom: 10px;
				
				img{
					width: 100%;
					height: auto;
				}
			}
		}
	}
	#index-bn3{
		
		ul{
			overflow: hidden;
			
			li{
				width: 100%;
				margin-bottom: 10px;
				
				&:nth-child(2){
					float: left;
					width: 48%;
				}
				&:nth-child(3){
					float: right;
					width: 48%;
				}
				img{
					width: 100%;
					height: auto;
				}
			}
		}
	}
}

/*-----------------------------------------------------------
main
------------------------------------------------------------*/
@media print, screen and (min-width: 641px){
	
	/* service */
	#trouble,
	#mizumawari{
		
		h1{
			border-left: 5px #36acc0 solid;
			border-right: 2px #36acc0 solid;
			border-top: 2px #36acc0 solid;
			border-bottom: 2px #36acc0 solid;
		}
		.service-title{
			background: #36acc0;
		}
		.service-box1,
		.service-box2{
			border: 1px #36acc0 solid;
		}
	}
	#naisou{
		
		h1{
			border-left: 5px #80af00 solid;
			border-right: 2px #80af00 solid;
			border-top: 2px #80af00 solid;
			border-bottom: 2px #80af00 solid;
		}
		.service-title{
			background: #80af00;
		}
		.service-box1,
		.service-box2{
			border: 1px #80af00 solid;
		}
	}
	#gaisou{
		
		h1{
			border-left: 5px #ff8000 solid;
			border-right: 2px #ff8000 solid;
			border-top: 2px #ff8000 solid;
			border-bottom: 2px #ff8000 solid;
		}
		.service-title{
			background: #ff8000;
		}
		.service-box1,
		.service-box2{
			border: 1px #ff8000 solid;
		}
	}
	#gas{
		
		h1{
			border-left: 5px #df6959 solid;
			border-right: 2px #df6959 solid;
			border-top: 2px #df6959 solid;
			border-bottom: 2px #df6959 solid;
		}
		.service-title{
			background: #df6959;
		}
		.service-box1,
		.service-box2{
			border: 1px #df6959 solid;
		}
	}
	.service-title{
		color: #fff;
		font-size: 2.8rem;
		font-weight: bold;
		padding: 15px;
	}
	.service-box1{
		box-sizing: border-box;
		padding: 15px;
		overflow: hidden;
		margin-bottom: 20px;
		
		img{
			float: right;
			width: 240px;
			height: auto;
			margin-bottom: 20px;
		}
		.service-merit{
			float: left;
			width: 400px;
			background: #ffe8e3;
			padding: 20px 10px;
			margin-bottom: 20px;

			div{
				font-size: 1.8rem;
				font-weight: bold;
				margin-bottom: 10px;
			}
			li{
				color: #ff8000;
				font-size: 1.6rem;
				font-weight: bold;
				margin-bottom: 10px;

				&:last-child{
					margin-bottom: 0;
				}
			}
		}
		p{
			clear: both;
		}
		.price-box{
			border-top: 1px #ddd solid;
			padding-top: 15px;

			.price-icon{
				color: #fff;
				font-size: 1.4rem;
				font-weight: bold;
				padding: 5px 15px;
				display: inline-block;
				margin-right: 10px;
				background: #333;
				position: relative;
				top: -5px;
			}
			.price{
				font-size: 1.4rem;

				strong{
					color: #c93333;
					font-size: 2.8rem;
					font-weight: bold;
				}
			}
			a{
				float: right;
				font-size: 1.6rem;
				font-weight: bold;
				margin-top: 10px;
			}
		}
	}
	.service-box2{
		box-sizing: border-box;
		padding: 15px;
		overflow: hidden;
		margin-bottom: 20px;
		
		img{
			float: left;
			width: 330px;
			height: auto;
			margin-bottom: 20px;
		}
		.service-merit{
			clear: both;
			max-width: 100%;
			background: #ffe8e3;
			padding: 20px 10px;
			margin-bottom: 20px;

			div{
				font-size: 1.8rem;
				font-weight: bold;
				margin-bottom: 10px;
			}
			li{
				color: #ff8000;
				font-size: 1.6rem;
				font-weight: bold;
				margin-bottom: 10px;

				&:last-child{
					margin-bottom: 0;
				}
			}
		}
		p{
			clear: both;
		}
		.price-box{
			border-top: 1px #ddd solid;
			padding-top: 15px;

			.price-icon{
				color: #fff;
				font-size: 1.4rem;
				font-weight: bold;
				padding: 5px 15px;
				display: inline-block;
				margin-right: 10px;
				background: #333;
				position: relative;
				top: -5px;
			}
			.price{
				font-size: 1.4rem;

				strong{
					color: #c93333;
					font-size: 2.8rem;
					font-weight: bold;
				}
			}
			a{
				float: right;
				font-size: 1.6rem;
				font-weight: bold;
				margin-top: 10px;
			}
		}
	}
	/* works */
	#works-icon{
		font-size: 2.0rem;
		font-weight: bold;
		margin-bottom: 5px;
		display: block;
	}
	.works-icon{
		float: left;
		width: 25%;
		text-align: center;
		margin-bottom: 50px;
		
		a{
			color: #fff;
			font-size: 1.6rem;
			font-weight: bold;
			padding: 15px 0;
			display: block;
		}
	}
	#works-icon-mizumawari	{background: #36acc0;}
	#works-icon-naisou		{background: #80af00;}
	#works-icon-gaisou		{background: #ff8000;}
	#works-icon-gas			{background: #df6959;}
	#works-list{
		clear: both;
		overflow: hidden;
		
		li{
			float: left;
			width: 300px;
			margin-right: 40px;
			margin-bottom: 40px;
			
			&:nth-child(3n){
				margin-right: 0;
			}
			img{
				width: 100%;
				margin-bottom: 5px;
			}
			.cat{
				color: #fff;
				font-size: 1.4rem;
				font-weight: bold;
				padding: 3px 10px;
				display: inline-block;
			}
			.mizumawari	{background: #36acc0;}
			.naisou		{background: #80af00;}
			.gaisou		{background: #ff8000;}
			.gas		{background: #df6959;}
			p{
				color: #333;
				line-height: 1.5;
				font-size: 1.6rem;
				font-weight: bold;
			}
		}
	}
	#photo-area{
		max-width: 100%;
		padding: 20px;
		margin-bottom: 20px;
		background: #f9f6ed;
		
		img{
			width: 100%;
			height: auto;
		}
	}
	#point-area-wrap{
		max-width: 100%;
		padding: 20px;
		margin-bottom: 20px;
		background: #f9f6ed;
		
		#point-area{
			max-width: 100%;
			padding: 20px 20px 10px 20px;
			background: #fff;
			
			#title{
				color: #fc6959;
				font-size: 2.4rem;
				font-weight: bold;
				margin-bottom: 10px;
			}
			p{
				line-height: 1.5;
			}
		}
	}
	/* flow */
	#flow-trouble-bt{
		float: left;
		margin-bottom: 40px;
		
		a{
			width: 340px;
			color: #fff;
			font-size: 2.0rem;
			font-weight: bold;
			text-align: center;
			padding: 20px 0;
			background: #36b7cb;
			display: block;
		}
	}
	#flow-reform-bt{
		float: right;
		margin-bottom: 40px;
		
		a{
			width: 340px;
			color: #fff;
			font-size: 2.0rem;
			font-weight: bold;
			text-align: center;
			padding: 30px 0;
			background: #87c200;
			display: block;
		}
	}
	.flow-trouble{
		max-width: 100%;
		padding: 20px;
		border: 1px #36b7cb solid;
		box-sizing: border-box;
		margin-bottom: 10px;
		
		.flow-trouble-title{
			font-size: 2.0rem;
			font-weight: bold;
			margin-bottom: 5px;
			
			strong{
				color: #36b7cb;
				margin-right: 10px;
			}
		}
		p{
			margin-bottom: 0;
		}
	}
	.flow-reform{
		max-width: 100%;
		padding: 20px;
		border: 1px #87c200 solid;
		box-sizing: border-box;
		margin-bottom: 10px;
		
		.flow-reform-title{
			font-size: 2.0rem;
			font-weight: bold;
			margin-bottom: 5px;
			
			strong{
				color: #87c200;
				margin-right: 10px;
			}
		}
		p{
			margin-bottom: 0;
		}
	}
	/* column */
	#column-list{
		clear: both;
		overflow: hidden;
		
		li{
			float: left;
			width: 300px;
			margin-right: 40px;
			margin-bottom: 40px;
			
			&:nth-child(3n){
				margin-right: 0;
			}
			img{
				width: 100%;
				margin-bottom: 5px;
			}
			p{
				color: #333;
				line-height: 1.5;
				font-size: 1.6rem;
				font-weight: bold;
			}
		}
	}
	/* staff */
	.staff-box{
		clear: both;
		border-top: 2px #87c200 solid;
		padding-top: 20px;
		margin-bottom: 20px;
		overflow: hidden;
		
		img{
			float: left;
		}
		.staff-profile{
			float: right;
			width: 580px;
			
			.staff-name{
				font-size: 2.0rem;
				font-weight: bold;
				margin-bottom: 10px;
			}
			dl{
				margin-bottom: 10px;
				
				dt{
					color: #87c200;
					font-size: 1.6rem;
					font-weight: bold;
					display: table-cell;
					width: 50px;
				}
				dd{
					font-size: 1.6rem;
					line-height: 1.5;
					display: table-cell;
				}
			}
			.hitokoto{
				color: #87c200;
				font-size: 1.6rem;
				font-weight: bold;
				display: inline-block;
			}
			p{
				line-height: 1.5;
			}
		}
	}
	/* news */
	.content-box{
		
		.blog-day{
			font-size: 1.2rem;
			margin-bottom: 20px;
			display: block;
		}
		p{
			font-size: 1.6rem;
			line-height: 2.0;
			margin-bottom: 20px;
		}
		#prev{
			float: left;
			padding: 20px;
			font-size: 1.6rem;
			overflow: hidden;
			background: #eee;
		}
		#next{
			float: right;
			padding: 20px;
			font-size: 1.6rem;
			overflow: hidden;
			background: #eee;
		}
	}
}
@media screen and (max-width: 640px){
	
	/* service */
	#trouble,
	#mizumawari{
		
		h1{
			border-left: 5px #36acc0 solid;
			border-right: 2px #36acc0 solid;
			border-top: 2px #36acc0 solid;
			border-bottom: 2px #36acc0 solid;
		}
		.service-title{
			background: #36acc0;
		}
		.service-box1,
		.service-box2{
			border: 1px #36acc0 solid;
		}
	}
	#naisou{
		
		h1{
			border-left: 5px #80af00 solid;
			border-right: 2px #80af00 solid;
			border-top: 2px #80af00 solid;
			border-bottom: 2px #80af00 solid;
		}
		.service-title{
			background: #80af00;
		}
		.service-box1,
		.service-box2{
			border: 1px #80af00 solid;
		}
	}
	#gaisou{
		
		h1{
			border-left: 5px #ff8000 solid;
			border-right: 2px #ff8000 solid;
			border-top: 2px #ff8000 solid;
			border-bottom: 2px #ff8000 solid;
		}
		.service-title{
			background: #ff8000;
		}
		.service-box1,
		.service-box2{
			border: 1px #ff8000 solid;
		}
	}
	#gas{
		
		h1{
			border-left: 5px #df6959 solid;
			border-right: 2px #df6959 solid;
			border-top: 2px #df6959 solid;
			border-bottom: 2px #df6959 solid;
		}
		.service-title{
			background: #df6959;
		}
		.service-box1,
		.service-box2{
			border: 1px #df6959 solid;
		}
	}
	.service-title{
		color: #fff;
		font-size: 2.8rem;
		font-weight: bold;
		padding: 15px;
	}
	.service-box1{
		box-sizing: border-box;
		padding: 15px;
		overflow: hidden;
		margin-bottom: 20px;
		
		img{
			width: 100%;
			height: auto;
			margin-bottom: 20px;
		}
		.service-merit{
			max-width: 100%;
			background: #ffe8e3;
			padding: 20px 10px;
			margin-bottom: 20px;

			div{
				font-size: 1.8rem;
				font-weight: bold;
				margin-bottom: 10px;
			}
			li{
				color: #ff8000;
				font-size: 1.6rem;
				font-weight: bold;
				margin-bottom: 10px;

				&:last-child{
					margin-bottom: 0;
				}
			}
		}
		p{
			clear: both;
		}
		.price-box{
			border-top: 1px #ddd solid;
			padding-top: 15px;

			.price-icon{
				color: #fff;
				font-size: 1.4rem;
				font-weight: bold;
				padding: 5px 15px;
				display: inline-block;
				margin-right: 10px;
				background: #333;
				position: relative;
				top: -5px;
			}
			.price{
				font-size: 1.4rem;

				strong{
					color: #c93333;
					font-size: 2.8rem;
					font-weight: bold;
				}
			}
			a{
				float: right;
				font-size: 1.6rem;
				font-weight: bold;
				margin-top: 10px;
			}
		}
	}
	.service-box2{
		box-sizing: border-box;
		padding: 15px;
		overflow: hidden;
		margin-bottom: 20px;
		
		img{
			width: 100%;
			height: auto;
			margin-bottom: 20px;
		}
		.service-merit{
			clear: both;
			max-width: 100%;
			background: #ffe8e3;
			padding: 20px 10px;
			margin-bottom: 20px;

			div{
				font-size: 1.8rem;
				font-weight: bold;
				margin-bottom: 10px;
			}
			li{
				color: #ff8000;
				font-size: 1.6rem;
				font-weight: bold;
				margin-bottom: 10px;

				&:last-child{
					margin-bottom: 0;
				}
			}
		}
		p{
			clear: both;
		}
		.price-box{
			border-top: 1px #ddd solid;
			padding-top: 15px;

			.price-icon{
				color: #fff;
				font-size: 1.4rem;
				font-weight: bold;
				padding: 5px 15px;
				display: inline-block;
				margin-right: 10px;
				background: #333;
				position: relative;
				top: -5px;
			}
			.price{
				font-size: 1.4rem;

				strong{
					color: #c93333;
					font-size: 2.8rem;
					font-weight: bold;
				}
			}
			a{
				float: right;
				font-size: 1.6rem;
				font-weight: bold;
				margin-top: 10px;
			}
		}
	}
	/* works */
	#works-icon{
		font-size: 1.6rem;
		font-weight: bold;
		margin-bottom: 5px;
		display: block;
	}
	.works-icon{
		float: left;
		width: 25%;
		text-align: center;
		margin-bottom: 20px;
		
		a{
			color: #fff;
			font-size: 1.2rem;
			font-weight: bold;
			padding: 15px 0;
			display: block;
		}
	}
	#works-icon-mizumawari	{background: #36acc0;}
	#works-icon-naisou		{background: #80af00;}
	#works-icon-gaisou		{background: #ff8000;}
	#works-icon-gas			{background: #df6959;}
	#works-list{
		clear: both;
		overflow: hidden;
		
		li{
			float: left;
			width: 100%;
			margin-bottom: 20px;
			
			img{
				width: 100%;
				margin-bottom: 5px;
			}
			.cat{
				color: #fff;
				font-size: 1.4rem;
				font-weight: bold;
				padding: 3px 10px;
				display: inline-block;
			}
			.mizumawari	{background: #36acc0;}
			.naisou		{background: #80af00;}
			.gaisou		{background: #ff8000;}
			.gas		{background: #df6959;}
			p{
				color: #333;
				line-height: 1.5;
				font-size: 1.6rem;
				font-weight: bold;
			}
		}
	}
	#photo-area{
		max-width: 100%;
		padding: 10px;
		margin-bottom: 20px;
		background: #f9f6ed;
		
		img{
			width: 100%;
			height: auto;
		}
	}
	#point-area-wrap{
		max-width: 100%;
		padding: 10px;
		margin-bottom: 20px;
		background: #f9f6ed;
		
		#point-area{
			max-width: 100%;
			padding: 10px;
			background: #fff;
			
			#title{
				color: #fc6959;
				font-size: 2.4rem;
				font-weight: bold;
				margin-bottom: 10px;
			}
			p{
				line-height: 1.5;
			}
		}
	}
	/* flow */
	#flow-trouble-bt{
		margin-bottom: 10px;
		
		a{
			width: 100%;
			color: #fff;
			font-size: 1.6rem;
			font-weight: bold;
			text-align: center;
			padding: 20px 0;
			background: #36b7cb;
			display: block;
		}
	}
	#flow-reform-bt{
		margin-bottom: 30px;
		
		a{
			width: 100%;
			color: #fff;
			font-size: 1.6rem;
			font-weight: bold;
			text-align: center;
			padding: 28px 0;
			background: #87c200;
			display: block;
		}
	}
	.flow-trouble{
		max-width: 100%;
		padding: 10px;
		border: 1px #36b7cb solid;
		box-sizing: border-box;
		margin-bottom: 10px;
		
		.flow-trouble-title{
			font-size: 1.8rem;
			font-weight: bold;
			margin-bottom: 5px;
			
			strong{
				color: #36b7cb;
				margin-right: 10px;
			}
		}
		p{
			margin-bottom: 0;
		}
	}
	.flow-reform{
		max-width: 100%;
		padding: 10px;
		border: 1px #87c200 solid;
		box-sizing: border-box;
		margin-bottom: 10px;
		
		.flow-reform-title{
			font-size: 1.8rem;
			font-weight: bold;
			margin-bottom: 5px;
			
			strong{
				color: #87c200;
				margin-right: 10px;
			}
		}
		p{
			margin-bottom: 0;
		}
	}
	/* news */
	.content-box{
		
		.blog-day{
			font-size: 1.2rem;
			margin-bottom: 20px;
			display: block;
		}
		p{
			font-size: 1.6rem;
			line-height: 2.0;
			margin-bottom: 20px;
		}
		#prev,
		#next{
			max-width: 100%;
			padding: 20px;
			margin-bottom: 10px;
			font-size: 1.6rem;
			overflow: hidden;
			background: #eee;
			text-align: center;
		}
	}
	/* column */
	#column-list{
		clear: both;
		overflow: hidden;
		
		li{
			float: left;
			width: 100%;
			margin-bottom: 20px;
			
			img{
				width: 100%;
				margin-bottom: 5px;
			}
			p{
				color: #333;
				line-height: 1.5;
				font-size: 1.6rem;
				font-weight: bold;
			}
		}
	}
	/* staff */
	.staff-box{
		clear: both;
		border-top: 2px #87c200 solid;
		padding-top: 20px;
		margin-bottom: 20px;
		overflow: hidden;
		
		img{
			float: left;
			width: 15%;
			height: auto;
			margin-bottom: 10px;
		}
		.staff-profile{
			
			.staff-name{
				float: right;
				width: 80%;
				font-size: 2.0rem;
				font-weight: bold;
				margin-top: 15px;
			}
			dl{
				clear: both;
				margin-bottom: 10px;
				
				dt{
					color: #87c200;
					font-size: 1.4rem;
					font-weight: bold;
					display: table-cell;
					width: 50px;
				}
				dd{
					font-size: 1.4rem;
					line-height: 1.5;
					display: table-cell;
				}
			}
			.hitokoto{
				color: #87c200;
				font-size: 1.6rem;
				font-weight: bold;
				display: block;
			}
			p{
				line-height: 1.5;
			}
		}
	}
}

/*-----------------------------------------------------------
sitemap
------------------------------------------------------------*/
@media print, screen and (min-width: 641px){

	.sitemap{
		
		li{
			
			a{
				font-size: 1.4rem;
				padding: 10px 0;
				display: block;
			}
		}
	}
}
@media screen and (max-width: 640px){

	.sitemap{
		
		li{
			
			a{
				font-size: 1.4rem;
				padding: 10px 0;
				display: block;
			}
		}
	}
}

/*-----------------------------------------------------------
form
------------------------------------------------------------*/
@media print, screen and (min-width: 641px){
	
	#contact{
		
		table{
		
			th{
				background: #f5f5f5;
				padding: 15px;
				width: 200px !important;
				
				.must{
					color: #fff;
					font-size: 1.0rem;
					background: #CF4749;
					border-radius: 2px;
					margin-left: 10px;
					padding: 2px 5px;
					display: inline-block;
				}
				.nini{
					color: #fff;
					font-size: 1.0rem;
					background: #52A5D3;
					border-radius: 2px;
					margin-left: 10px;
					padding: 2px 5px;
					display: inline-block;
				}
			}
			td{
				padding: 15px;
				
				.error {
					display: inline-block;
					margin-right: 10px;
					font-size: 1.2rem;
					color: #f00;
				}
			}
		}
		input[type="text"],
		input[type="email"],
		input[type="password"],
		input[type="number"],
		input[type="tel"],
		select,
		textarea{
			font-size: 1.6rem;
			padding: 10px 5px;
			border: 2px #ddd solid;
			box-sizing: border-box;
			border-radius: 4px;
			-webkit-appearance: none;
			-moz-appearance: none;
			-ms-appearance: none;
			-o-appearance: none;
			appearance: none;
		}
		input[type="submit"]{
			width: 320px;
			color: #fff;
			padding: 20px 0;
			font-size: 2.4rem;
			border-radius: 10px;
			background: #FF6E00;
			-webkit-appearance: none;
			-moz-appearance: none;
			-ms-appearance: none;
			-o-appearance: none;
			appearance: none;
			
			&:hover{
				background: #FF2700;
			}
		}
	}
}
@media screen and (max-width: 640px){
	
	#contact{
		
		table{
			width: 100%;
			padding: 0;
			margin: 0;
			
			th{
				display: block;
				text-align: left;
				background: #f5f5f5;
				border: 0;
				
				.must{
					color: #fff;
					font-size: 1.0rem;
					background: #CF4749;
					border-radius: 2px;
					margin-left: 10px;
					padding: 2px 5px;
					display: inline-block;
				}
				.nini{
					color: #fff;
					font-size: 1.0rem;
					background: #52A5D3;
					border-radius: 2px;
					margin-left: 10px;
					padding: 2px 5px;
					display: inline-block;
				}
			}
			td{
				display: block;
				padding: 20px 0;
				border: 0;
				
				.error {
					display: inline-block;
					margin-top: 5px;
					font-size: 1.2rem;
					color: #f00;
				}
				input[type="text"],
				input[type="email"],
				input[type="password"],
				input[type="number"],
				input[type="tel"],
				textarea{
					width: 100%;
					font-size: 1.6rem;
					padding: 10px 5px;
					border: 2px #ddd solid;
					box-sizing: border-box;
					border-radius: 4px;
					-webkit-appearance: none;
					-moz-appearance: none;
					-ms-appearance: none;
					-o-appearance: none;
					appearance: none;
				}
			}
			.born{
				overflow: hidden;

				select{
					width: 30%;
					float: left;
					margin-right: 5px;
					font-size: 1.6rem;
					padding: 10px 5px;
					border: 2px #ddd solid;
					box-sizing: border-box;
					border-radius: 4px;
					-webkit-appearance: none;
					-moz-appearance: none;
					-ms-appearance: none;
					-o-appearance: none;
					appearance: none;
				}
				span{
					display: none;
				}
			}
		}
		input[type="submit"]{
			width: 100%;
			color: #fff;
			padding: 20px 0;
			font-size: 2.4rem;
			border-radius: 10px;
			background: #FF6E00;
			-webkit-appearance: none;
			-moz-appearance: none;
			-ms-appearance: none;
			-o-appearance: none;
			appearance: none;
			margin-bottom: 30px;
		}
	}
}

/*-----------------------------------------------------------
footer
------------------------------------------------------------*/
@media print, screen and (min-width: 641px){
	
	#footer-contact{
		clear: both;
		max-width: 100%;
		overflow: hidden;
		padding: 40px 0;
		margin: 0 40px;
		overflow: hidden;
		background: url(../images/footer-contact-bg.jpg) 50% no-repeat #fff3dd;
		
		ul{
			width: 660px;
			margin: 0 auto;
			overflow: hidden;
			
			li{
				float: left;
				width: 320px;
				margin-right: 20px;
				
				&:last-child{
					margin-right: 0;
				}
			}
		}
	}
	footer{
		width: 100%;
		overflow: hidden;
		background: #fff;
		padding: 40px 0;
		
		.footer-nav{
			float: left;
			width: 260px;
			overflow: hidden;
			border-top: 1px #ddd dotted;
			margin-right: 30px;
			
			&:last-child{
				margin-right: 0;
			}
			li{
				display: block;
				margin-top: 15px;
				
				a{
					color: #333333;
					font-size: 1.2rem;
					font-weight: bold;
					
					&:before{
						float: left;
						content: "";
						width: 10px;
						height: 10px;
						margin-right: 5px;
						background: url(../images/arrow.png) no-repeat;
						background-size: cover;
					}
				}
			}
		}
		.fb-tl{
			float: right;
		}
	}
	#footer-logo{
		max-width: 100%;
		padding: 20px 0;
		margin: 0 40px;
		text-align: center;
		background: #f9f9f9;
		
		img{
			width: 200px;
			height: auto;
			margin-bottom: 10px;
		}
		address{
			font-size: 1.2rem;
			line-height: 1.5;
			font-style: normal;
		}
		p{
			font-size: 1.0rem;
			margin-top: 10px;
			margin-bottom: 0;
		}
	}
	#page-top{
		z-index: 9999;
		position: fixed;
		bottom: 10px;
		right: 10px;
		
		a{
			color: #ffffff;
			font-size: 1.2rem;
			line-height: 1.5;
			text-align: center;
			background: #1478c6;
			border-radius: 5px;
			padding: 10px;
			display: block;
		}
	}
}
@media screen and (max-width: 640px){
	
	#footer-contact{
		clear: both;
		max-width: 100%;
		padding: 40px 0 20px 0;
		overflow: hidden;
		background: #fff3dd;
		background-size: 50% 50%;
		
		h2{
			margin-bottom: 20px;
			text-align: center;
		}
		p{
			margin-bottom: 20px;
		}
		.col2 img{
			width: 100%;
			height: auto;
			margin-bottom: 10px;
		}
	}
	footer{
		clear: both;
		width: 100%;
		overflow: hidden;
		
		.footer-nav{
			overflow: hidden;
			
			li{
				float: left;
				width: 50%;
				border-bottom: 1px #ddd dotted;
				box-sizing: border-box;
				
				&:nth-child(2n){
					border-left: 1px #ddd dotted;
				}
				a{
					display: block;
					color: #333;
					padding: 15px 10px;
					font-size: 1.2rem;
					font-weight: bold;
					
					&:after{
						float: right;
						content: "";
						width: 10px;
						height: 10px;
						background: url(../images/arrow.png) no-repeat;
						background-size: cover;
					}
				}
			}
		}
	}
	#footer-logo{
		max-width: 100%;
		padding: 20px 0;
		text-align: center;
		background: #f9f9f9;
		
		img{
			width: 160px;
			height: auto;
			margin-bottom: 10px;
		}
		address{
			font-size: 1.2rem;
			line-height: 1.5;
			font-style: normal;
		}
		p{
			font-size: 1.0rem;
			margin-top: 10px;
			margin-bottom: 0;
		}
	}
	#page-top{
		z-index: 9999;
		position: fixed;
		bottom: -10px;
		right: 10px;
		
		a{
			color: #ffffff;
			font-size: 1.2rem;
			line-height: 1.5;
			text-align: center;
			background: #1478c6;
			border-radius: 5px;
			padding: 10px;
			display: block;
		}
	}
}