@charset "UTF-8";
/*
 * sub_layout.css
 *
 */

#header p a {
	position:absolute;
	font-size:12px;
	height:40px;
	line-height:40px;
	color:#111;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
	top:0;
	right:360px;
}
 
#header a#headerLogo img {
	display:block;
	position:absolute;
	width:226px;
	height:72px;
	top:25px;
	left:30px;
}
	
#gnavi {
	position:absolute;
	clear:both;
	width:730px;
	height:60px;
	top:60px;
	right:20px;
}
	#gnavi ul {
		position:absolute;
		display:block;
		width:730px;
		height:60px;
		
		*zoom: 1;
		z-index:100;
	}
		#gnavi ul * {
			box-sizing: border-box;
		}
		#gnavi ul:before, .dropmenu:after {
			content: "";
			display: table;
		}
		#gnavi ul:after {
			clear: both;
		}
		#gnavi ul li {
			float:left;
			display: inline-block;
			line-height:1.8;
			font-weight:bold;
			list-style: outside none none;
			
			position: relative;
		}
			#gnavi ul li span {
				font-family: 'Fira Sans Condensed', sans-serif;
				font-size:10px;
				font-weight:normal;
				letter-spacing:0.1em;
				display:block;
			}
		#gnavi ul li a {
			display:block;
			font-size:14px;
			height:60px;
			text-align:center;
			color: #111;
			-webkit-transition: all 0.7s ease;
			-moz-transition: all 0.7s ease;
			transition: all 0.7s ease;
			padding: 0 0 10px 0;
			color: rgba(0, 0, 0, 1);
			position: relative;
			text-decoration: none;
		}
			#gnavi ul li a:before,
			#gnavi ul li a:after {
				position: absolute;
				-webkit-transition: all 0.35s ease;
				transition: all 0.35s ease;
			}
			#gnavi ul li a:before {
				bottom: 0;
				display: block;
				height: 3px;
				width: 0%;
				content: "";
				background-color: #FF9600;
			}
			#gnavi ul li a:after {
				left: 0;
				top: 0;
				padding: 0 0 0 0;
				position: absolute;
				content: attr(data-hover);
				color: #111;
				white-space: nowrap;
				max-width: 0%;
				overflow: hidden;
			}
			#gnavi ul li a:hover,
			#gnavi ul li.current a {
				color: #111;
			}
			#gnavi ul li a:hover:before,
			#gnavi ul li.current a:before {
				opacity: 1;
				width: 100%;
			}
			#gnavi ul li a:hover:after,
			#gnavi ul li .current a:after {
				max-width: 100%;
			}
			#gnavi ul > li#merit a {
				width:140px;
				color:#111;
				margin:0 5px;
			}
			#gnavi ul > li#works a {
				width:130px;
				color:#111;
				margin:0 5px;
			}
			#gnavi ul > li#price a {
				width:160px;
				color:#111;
				margin:0 5px;
			}
			#gnavi ul > li#flow a {
				width:80px;
				color:#111;
				margin:0 5px;
			}
			#gnavi ul > li#specification a {
				width:70px;
				color:#111;
				margin:0 5px;
			}
			#gnavi ul > li#faq a {
				width:90px;
				color:#111;
				margin:0 5px;
			}
			
			#gnavi ul li ul {
				width: 420px;
				list-style: none;
				position: absolute;
				z-index: 100;
				top: 100%;
				left: 0;
				margin: 0px 0 0 0;
				padding: 0;
			}
				#gnavi ul li ul li {
					width:auto;
					float:none;
				}
					#gnavi ul li#merit ul li a {
						width: 220px;
						font-size:14px;
						font-weight:normal;
						height:46px;
						line-height:46px;
						margin: 0px 5px 1px 5px;
						padding:0 0 0 15px;
						border-radius:0;
						background:rgba(0,0,0,0.65);
						color:#FFF;
						text-align: left;
						transition: .5s;
					}
						#gnavi ul li#merit ul li a:hover {
							color:#F8B141;
						}
					#gnavi ul li#works ul li a {
						width: 260px;
						font-size:14px;
						font-weight:normal;
						height:46px;
						line-height:46px;
						margin: 0px 5px 1px 5px;
						padding:0 0 0 15px;
						border-radius:0;
						background:rgba(0,0,0,0.65);
						color:#FFF;
						text-align: left;
						transition: .5s;
					}
						#gnavi ul li#works ul li a:hover {
							color:#F8B141;
						}
					#gnavi ul li#price ul li a {
						width: 325px;
						font-size:14px;
						font-weight:normal;
						height:46px;
						line-height:46px;
						margin: 0px 5px 1px 5px;
						padding:0 0 0 15px;
						border-radius:0;
						background:rgba(0,0,0,0.65);
						color:#FFF;
						text-align: left;
						transition: .5s;
					}
						#gnavi ul li#price ul li a:hover {
							color:#F8B141;
						}
							#gnavi ul li ul li a:before {
								display:none;
							}
						#gnavi ul#fade-in2 li ul{
							opacity: 0;
							top: 100%;
							left:-15px;
							visibility: hidden;
							transition: .5s;
						}
						#gnavi ul#fade-in2 li:hover ul{
							top: 100%;
							left:0;
							visibility: visible;
							opacity: 1;
						}

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

}
 
/* !mainvisual
---------------------------------------------------------- */
.subMain {
	width:100%;
	height:200px;
	background:url(../img/sub_main.jpg) 50% top no-repeat;
	background-size:cover;
}
	.subMain h1,
	.subMain p{
		font-size:38px;
		font-weight:bold;
		text-shadow: rgba(0,0,0,0.7) 1px 1px 2px;
		color:#FFF;
		text-align:center;
		line-height:1.7;
		padding-top:58px;
	}
		.subMain h1 span,
		.subMain p span{
			display:block;
			font-size:18px;
		}
		.subMain h1 i,
		.subMain p i{
			font-size:60%;
			font-style: normal;
		}

@media screen and (max-width:1039px){
.subMain {
	width:100%;
	height:200px;
}

}

@media screen and (max-width:767px){
.subMain {
	width:100%;
	height:180px;
}
	.subMain h1,
	.subMain p{
		font-size:24px;
		padding-top:60px;
	}
		.subMain h1 span,
		.subMain p span{
			display:block;
			font-size:12px;
		}
}

/* !パンくずリスト
---------------------------------------------------------- */
.breadcrumb {
	width:100%;
}
.marugotoBg {
	background:#f3f3f3;
}
	.breadcrumb ul {
		width:100%;
		max-width:1240px;
		padding:0 20px;
		margin:0 auto;
	}
		.breadcrumb ul li {
			display:inline-block;
			color:#333;
			font-size:13px;
			line-height:1.6;
			padding:18px 0 0 12px;
		}
		.breadcrumb ul li:first-child {
			padding-left:0;
		}
			.breadcrumb ul li:before {
				display: inline-block;
				font-family: FontAwesome;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				content: "\f105";
				color:#333;
				padding-right:10px;
			}
				.breadcrumb ul li:first-child:before {
					content: "";
					padding-right:0;
				}
			.breadcrumb ul li a {
				color:#999;
				-webkit-transition: all 0.4s ease;
				-moz-transition: all 0.4s ease;
				transition: all 0.4s ease;
				text-decoration:underline;
			}
				.breadcrumb ul li a:hover {
					opacity:.6;
				}
			
@media screen and (max-width:1039px){
	.breadcrumb ul {
		padding:0 20px;
	}
				.breadcrumb ul li a:hover {
					opacity:1;
				}
}
			
@media screen and (max-width:767px){
.breadcrumb {
	padding:5px 0 0 0;
}
	.breadcrumb ul {
		padding:0 15px;
	}
		.breadcrumb ul li {
			font-size:12px;
			line-height:1.6;
			padding:10px 0 0 8px;
		}
			.breadcrumb ul li:before {
				padding-right:8px;
			}
}

/* !ローカルナビ
---------------------------------------------------------- */
.lnavi {
	width:100%;
	background:#666;
	padding-top:0.8em;
}
	.lnavi div {
		width:100%;
		max-width:1240px;
		padding:0 20px;
		margin:0 auto;
	}
		.lnavi div p {
			font-family: 'Fira Sans Condensed', sans-serif;
			font-size:20px;
			font-weight:normal;
			color:#FFF;
			text-align:center;
			letter-spacing:0.2em;
			height:30px;
			position:relative;
		}
			.lnavi div p span {
				position:absolute;
				display:block;
				width:180px;
				height:40px;
				line-height:40px;
				text-align:center;
				left:50%;
				margin-left:-90px;
			}
				.lnavi div p span:before {
					position:absolute;
					content:"";
					width:16px;
					height:1px;
					background:#FFF;
					top:20px;
					left:0;
				}
				.lnavi div p span:after {
					position:absolute;
					content:"";
					width:16px;
					height:1px;
					background:#FFF;
					top:20px;
					left:162px;
				}
		.lnavi div ul {
			text-align:center;
		}
			.lnavi div ul li {
				font-size:16px;
				position:relative;
				display:inline-block;
				padding:1em 0;
				margin-right:20px;
			}
			.lnavi div ul li:last-child {
				margin-right:0;
			}
				.lnavi div ul li a {
					color:#FFF;
					-webkit-transition: all 0.5s ease;
					-moz-transition: all 0.5s ease;
					transition: all 0.5s ease;
				}
					.lnavi div ul li a:hover {
						color:#FF9600;
					}
					.lnavi div ul li a.current {
						color:#FF9600;
					}
					.lnavi div ul li a i.fa {
						display:inline-block;
						margin-right:10px;
					}
		
@media screen and (max-width:1039px){
.lnavi {
	padding-top:1em;
	padding-bottom:0.8em;
}
	.lnavi div {
		padding:0 20px;
		margin:0 auto;
		position:relative;
	}
			.lnavi div p {
				height:40px;
				margin-bottom:5px;
			}
				.lnavi div ul li {
					width:100%;
					font-size:15px;
					padding:0 0;
				}
					.lnavi div ul li a {
						display:block;
						padding:0;
						line-height:44px;
					}
						.lnavi div ul li a:hover {
							color:#FFF;
						}
						.lnavi div ul li a.current:hover {
							color:#FF9600;
						}
}

@media screen and (max-width:767px){
	.lnavi div {
		padding:0 ;
	}
			.lnavi div p {
				font-size:18px;
			}
			.lnavi div p span {
				width:160px;
				margin-left:-80px;
			}
				.lnavi div p span:after {
					left:142px;
				}
				.lnavi div ul li {
					width:100%;
					font-size:14px;
					float:none;
					margin-right:0;
				}
					.lnavi div ul li a {
						line-height:44px;
					}
						.lnavi div ul li a:hover {
							color:#FFF;
						}
						.lnavi div ul li a.current:hover {
							color:#FF9600;
						}
						.lnavi div ul li a i.fa {
							display:none;
						}
}


/* !コンテンツ
---------------------------------------------------------- */
.subContactBox {
	width:70%;
	background:#F1F1F1;
	padding:20px 10px;
	margin-left:auto;
	margin-right:auto;
}
	.subContactBox p.tit {
		font-size:16px;
		text-align:center;
	}
	.subContactBox p.tel {
		text-align:center;
		line-height:1.5;
	}
		.subContactBox p.tel span {
			display:inline-block;
			font-family: 'Fira Sans Condensed', sans-serif;
			font-size:26px;
			letter-spacing:0.1em;
		}
			.subContactBox p.tel span i,fa {
				display:inline-block;
				margin-right:7px;
				font-size:20px;
			}
			.subContactBox p.tel br {
				display:none;
			}
			
a.estimationBtn {
	display:block;
	width:300px;
	height:60px;
	line-height:60px;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	background:#FF9600;
	border-radius:2px;
	margin-left:auto;
	margin-right:auto;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
	a.estimationBtn:hover {
		opacity:0.7;
	}
	a.estimationBtn i.fa {
		display:inline-block;
		margin-right:20px;
	}
	
ul.subNavi {
	width:100%;
}
	ul.subNavi li {
		width:50%;
		float:left;
		margin-bottom:1px;
	}
		ul.subNavi li a {
			display:block;
			padding:0.7em;
			line-height:1.6;
			text-align:center;
			color:#111;
			background:#E5E5E5;
			border-left:1px solid #FFF;
			-webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			transition: all 0.5s ease;
		}
			ul.subNavi li a:hover,
			ul.subNavi li a.current {
				background:#F8B141;
			}
			ul.subNavi li a i.fa {
				display:inline-block;
				margin-right:1em;
			}
			
@media screen and (max-width:1039px){
.subContactBox {
	width:80%;
}

ul.subNavi li a i.fa {
	margin-right:10px;
}

}

@media screen and (max-width:767px){
.subContactBox {
	width:100%;
	padding:15px;
}
	.subContactBox p.tit {
		font-size:14px;
	}
	.subContactBox p.tel {
		text-align:center;
		line-height:1.5;
	}
		.subContactBox p.tel span {
			font-size:22px;
		}
			.subContactBox p.tel span i.fa {
				margin-right:4px;
				font-size:18px;
			}
			.subContactBox p.tel br {
				display:inherit;
			}
			
a.estimationBtn {
	width:80%;
	height:50px;
	line-height:50px;
}
	a.estimationBtn i.fa {
		margin-right:10px;
	}
	
ul.subNavi {
	width:100%;
}
	ul.subNavi li {
		width:100%;
		float:none;
	}
		ul.subNavi li a span {
			display:none;
		}
			ul.subNavi li a:hover {
				background:#E5E5E5;
			}
			ul.subNavi li a.current {
				background:#F8B141;
			}
			ul.subNavi li a i.fa {
				display:inline-block;
				margin-right:7px;
			}
}

/* !お問い合わせブロック
---------------------------------------------------------- */
.contactBox {
	width:100%;
	padding:50px 30px 50px 30px;
	background: #f6f6f6;
	border-top:1px solid #e7e7e7;
	border-bottom:1px solid #e7e7e7;
	margin-bottom: 30px;
}
	.contactBox h2 {
		font-size:16px;
		font-weight:bold;
		text-align:center;
		line-height:1.6;
		margin-bottom:30px;
	}
		.contactBox h2 span {
			display: block;
			font-family: 'Fira Sans Condensed', sans-serif;
			font-size:36px;
			font-weight:bold;
			letter-spacing:0.1em;
		}
	.contactBox p.read {
		text-align: center;
		margin-bottom: 30px;
	}
	.contactBox ul {
		width:100%;
		max-width:620px;
		margin:0 auto 40px auto;
	}
		.contactBox ul li {
			width:50%;
			float:left;
		}
			.contactBox ul li a.estimation {
				display:block;
				width:300px;
				height:60px;
				line-height:60px;
				text-align:center;
				font-size:16px;
				font-weight:bold;
				background:#FF9600;
				border-radius:4px;
				-webkit-transition: all 0.5s ease;
				-moz-transition: all 0.5s ease;
				transition: all 0.5s ease;
			}
				.contactBox ul li a.estimation:hover {
					opacity:0.6;
				}
			.contactBox ul li a.contact {
				display:block;
				width:300px;
				height:60px;
				line-height:60px;
				text-align:center;
				font-size:16px;
				font-weight:bold;
				background:#F4D700;
				border-radius:4px;
				margin-left:15px;
				-webkit-transition: all 0.5s ease;
				-moz-transition: all 0.5s ease;
				transition: all 0.5s ease;
			}
				.contactBox ul li a.contact:hover {
					opacity:0.6;
				}
			.contactBox ul li a i.fa {
				display:inline-block;
				margin-right:20px;
			}
		.contactBox div {
			width:100%;
			max-width:620px;
			background-color:rgba(0,0,0,0.65);
			padding:15px;
			margin: 0 auto;
		}
			.contactBox div p.tit {
				font-size:16px;
				text-align:center;
				color:#FFF;
			}
			.contactBox div p.tel {
				text-align:center;
				line-height:1.5;
				color:#FFF;
			}
			.contactBox div p.tel span {
				display:inline-block;
				font-family: 'Fira Sans Condensed', sans-serif;
				font-size:26px;
				color:#FFF;
				letter-spacing:0.1em;
			}
				.contactBox div p.tel span i.fa {
					display:inline-block;
					margin-right:7px;
					font-size:20px;
				}
				.contactBox div p.tel br {
					display:none;
				}
				
@media screen and (max-width:1039px){
.contactBox {
	padding:40px 20px 40px 20px;
}
}

@media screen and (max-width:767px){
.contactBox {
	padding:40px 15px 40px 15px;
	width:auto;
	margin:0 auto 20px auto;
}
	.contactBox h2 {
		font-size:14px;
		text-align:center;
		line-height:1.6;
		margin-bottom:30px;
	}
		.contactBox h2 span {
			font-size:28px;
		}
	.contactBox ul {
		width:100%;
		margin-bottom:20px;
	}
		.contactBox ul li {
			width:80%;
			float:none;
			margin:0 auto 10px auto;
		}
			.contactBox ul li a.estimation {
				display:block;
				width:auto;
				height:50px;
				line-height:50px;
			}
				.contactBox ul li a.estimation:hover {
					opacity:1;
				}
			.contactBox ul li a.contact {
				display:block;
				width:auto;
				height:50px;
				line-height:50px;
				margin-left:0;
			}
				.contactBox ul li a.contact:hover {
					opacity:1;
				}
			.contactBox ul li a i.fa {
				margin-right:10px;
			}
		.contactBox div {
			padding:15px;
		}
			.contactBox div p.tit {
				font-size:14px;
			}
			.contactBox div p.tel span {
				font-size:24px;
			}
				.contactBox div p.tel br {
					display:inherit;
				}
				.contactBox div p.tel a {
					color:#FFF;
				}
}

@media screen and (max-width:359px){
		.contactBox ul li {
			width:100%;
		}
}