@charset "shift_jis"; 

/*********************************************************
共通設定
*********************************************************/


/*
見出し
*********************************************************/

h1{
	color:#017537;
	font-weight:bold;
	font-size:0.6em;
	line-height:1.2em;
	margin-bottom:5px;
	overflow:hidden;
	/*s
	white-space: nowrap;改行しない*/
	}
/*ページタイトル*/
h2{
	text-align:center;
	font-weight:bold;
	font-size:1.4em;
	line-height:1.3em;
	margin-bottom:20px;
	}
h2 span{
	display:block;
	color:#017537;
	font-size:0.6em;
	line-height:1.3em;
	margin-bottom:10px;
	}
/*タイトル*/
h3{
	text-align:center;
	font-weight:bold;
	font-size:1.2em;
	line-height:1.3em;
	margin-bottom:20px;
	color:#fff;
	}

/*サブタイトル*/
h4{
	color:#017537;
	font-weight:bold;
	font-size:1.2em;
	line-height:1.3em;
	margin-bottom:20px;
	}

/*TABLET*/
@media only screen and (min-width : 600px){
	h1{
		font-size:0.8em;
		line-height:1.2em;
		margin-bottom:10px;
		}
	h2{
		font-size:1.8em;
		line-height:1.3em;
		margin-bottom:20px;
		}
	h3{
		font-size:1.6em;
		line-height:1.3em;
		}
	h4{
		font-size:1.4em;
		line-height:1.3em;
		}

}
/*PC*/
@media only screen and (min-width : 1025px){
	h2{
		font-size:2.2em;
		line-height:1.3em;
		margin-bottom:40px;
		}
	h3{
		font-size:1.8em;
		line-height:1.3em;
		margin-bottom:40px;
		}
	h4{
		font-size:1.6em;
		line-height:1.3em;
		}
}


/*
共通-コンテンツ
*********************************************************/

.contents{
	clear:both;
	padding:20px 0;
	}

/*TABLET*/
@media only screen and (min-width : 600px){
	.contents{padding:40px 0;}
}
/*PC*/
@media only screen and (min-width : 1025px){
	.contents{padding:60px 0;}
}



/*
ヘッダー
*********************************************************/
#headerWrap{
	z-index: 99999;
	background-color:#FFF;
	width:100%;
	position:fixed;
	top:0;
	left:0;
	}
/*#headerWrap.headerWrap-fixed{
	width:100%;
	position:fixed;
	top:0;
	left:0;
	}*/
#header{
	background-color:#FFF;
	clear:both;
	float:none;
	padding:5px 0;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	padding-left:2%;
	padding-right: calc(46px + 4%);
	}
.logo img{max-height:30px;}
.h-tel,
.h-mail{ display:none;}

/*TABLET*/
@media only screen and (min-width : 600px){
	#header{
		padding:10px 2% 10px;
		}
	#header .logo{float:left;}
	.logo img{max-height:35px;}
	.h-tel,
	.h-mail{
		display:block;
		z-index: 99999;
		position:absolute;
		top:15px;
		width:50px;
		height:50px;
		}
		.h-tel{right:calc(110px + 2%);}
		.h-mail{right:calc(55px + 2%);}
	.h-tel a,
	.h-mail a{
		display:block;
		width:100%;
		height:100%;
		color:#fff;
		font-size:1.5rem;
		line-height:1em;
		text-align:center;
		border-radius:3px;
		-moz-border-radius:3px;
		-webkit-border-radius:3px;
		padding-top:10px;
		}
	.h-tel a{background:#b46055;}
	.h-mail a{background: #941b0c;}

	.h-tel a:hover,
	.h-tel a:active{background:#cb4a35;}
	.h-mail a:hover,
	.h-mail a:active{background: #b41308;}

}
/*PC*/
@media only screen and (min-width : 1400px){
	.h-tel,
	.h-mail{ display:none;}
}

/*IE*/
@media all and (-ms-high-contrast:none){
}


/*
fixed
*********************************************************/
.fixed{
	position:fixed;
	bottom:0;
	right:0;
	width:100%;
	height:40px;
	display:flex;
	align-items:stretch;
	z-index:900;
	}
.fixed > p{
	flex: 1 0 20%;
	font-size:2rem;
	line-height:1;
  display: flex;
  align-items: center;
  justify-content: center;
	text-align:center;
	}
.fixed > p a{
	display:block;
	position:relative;
	width:100%;
	height:100%;
	padding-top:10px;
	text-align:center;
	color:#fff;
	}

.fixed_insta a{
	position:relative;
	overflow:hidden;
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
	}
.fixed_insta a:before{
  content: '';
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 125%;
  height: 125%;
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
	}
.fixed_insta .fa-instagram{
	position:relative;
	z-index:2;
	}
.fixed_line a{background:#00B900;}
.fixed_tel a{background:#b46055;}
.fixed_mail a{background:#941b0c;}
.pagetop a{background:#333;}



@media only screen and (min-width : 1025px){
	.fixed{
		width:60px;
		height:60px;
	}
	.fixed > p{
		display:none;
		}
	.fixed > p a{ padding-top:15px;}
	
	.fixed_insta,
	.fixed_line,
	.fixed_tel,
	.fixed_mail{ display:none;}
	.fixed > p.pagetop {
		display:block;
		flex-shrink: 0;
		width:80px !important;
		font-size:3rem;
		line-height:1em;
		}
	
}
/*
フッター
*********************************************************/
.copyright{
	padding:20px 0;
	font-size:0.8em;
	line-height:1;
	text-align:center;
	}

@media only screen and (min-width : 600px){
	.copyright{
		padding:40px 0;
		}
}


/*********************************************************
mainWrap
*/
.mainImgWrap{
	}
	.mainImg{
		overflow:hidden;
		width:100%;
		height:100%;
		padding:160px 4% 100px;
		position:relative;
		}
		.mainImg_cont{}
		.mainImg_left{}
		.mainImg_right{
			}
			#bg-slider {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100vw;
				height: 100vh;
				background-repeat:no-repeat;
				background-position:center center;
				background-size: cover;
				}

.mainImg_cont{
	position:relative;
	z-index:1;
	}
	.mainImg_cont_copy{
		color:#111111;
		font-size:8.35vw;/*50px*/
		font-weight:900;
		box-decoration-break: clone;	
		-webkit-box-decoration-break: clone;
		display: inline;
		padding: 0.15em;
		line-height: 2em;
		background:rgba(255,255,255,.9);
		}
		.mainImg_cont_copy_fsLarge{
			font-size:10.02vw;/*80px*/
			vertical-align: top;
			}
		.mainImg_cont_copy_fsSmall{
			font-size:6.68vw;/*40px*/
			}
		.mainImg_cont_copy br{ display:none; }
		.mainImg_cont_txt{
			margin-top:20px;
			font-size:0.938em;
			line-height:1.6em;
			color:#FFF;
			text-shadow: 1px 1px 3px rgba(0,0,0,0.3),-1px 1px 3px rgba(0,0,0,0.3),1px -1px 3px rgba(0,0,0,0.3), -1px -1px 3px rgba(0,0,0,0.3);
			}
.scrollDown{
	display:none;
	margin-top:40px;
	}
	.scrollDown a{
		display:block;
		padding:15px;
		border:#fff solid 1px;
		color:#fff;
		font-size:0.8em;
		line-height:1;
		text-decoration:none;
		max-width:200px;
		text-align:center;
		}
		.scrollDown a:hover,
		.scrollDown a:active{
			background-color:rgba(255,255,255,0.2);
			}
.linkBnr{
	background-color:#f7f7f7;
	padding:10px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	}
	.linkBnr p:nth-child(1) {
		padding-right:10px;
		margin-right:10px;
		border-right:1px solid #ddd;
		}
	.linkBnr img{
		width:auto;
		max-height:none;
		}
@media only screen and (min-width : 600px){
.mainImgWrap{
	position:relative;
	}
.mainImg{
	height:100vh;
	position:relative;
	display:flex;
	padding:0;
	}
	.mainImg_left,
	.mainImg_right{
		height:100vh;
		}
	.mainImg_left{
		width:30%;
		background-image:url(../images/mainImg/mainLeftBg.jpg);
		background-color:#017537;
		}
	.mainImg_right{
		width:70%;
		position:relative;
		overflow:hidden;
		}
.mainImg_cont{
	position:absolute;
	top: calc(50% + 50px);
	left:0%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index:3;
	width:100%;
	padding-left:7.81%;
	}
.mainImg_cont_copy{
	font-size:5.859375vw;/*60px*/
	}
.mainImg_cont_copy_fsLarge{
	font-size:7.8125vw;/*80px*/
	}
.mainImg_cont_copy_fsSmall{
	font-size:4.8828125vw;/*50px*/
	}
.mainImg_cont_copy br{ display:block; }
.mainImg_cont_txt{
	font-size:1.125em;
	line-height:1.6em;
	}
.scrollDown{
	display:block;
	}
.linkBnr{
	z-index:1;
	position:absolute;
	bottom:0;
	right:0;
	background-color: rgba(255,255,255,0.9);
	}
.linkBnr img{
	max-height:50px;
	}
}
@media only screen and (min-width : 1025px){
.mainImg_cont_copy{
	font-size:3.125vw;/*60px*/
	}
.mainImg_cont_copy_fsLarge{
	font-size:4.166666666666666vw;/*80px*/
	}
.mainImg_cont_copy_fsSmall{
	font-size:2.604166666666667vw;/*50px*/
	}
.mainImg_cont_txt{
	font-size:1.125em;
	line-height:1.6em;
	}
}


/*********************************************************
about
*/
.aboutWrap{width:92%; margin:auto;}

.aboutImg img{
	width:calc(100% - 20px);
	margin-bottom:20px;
	/*順序 横・下・ぼかし・広がり・色*/
	box-shadow: 20px 20px 0 0 #ebfff4;
	-moz-box-shadow: 20px 20px 0 0 #ebfff4;
	-o-box-shadow: 20px 20px 0 0 #ebfff4;
	-webkit-box-shadow: 20px 20px 0 0 #ebfff4;
	}
.aboutBg{
	position:absolute;
	top:0;
	right:0;
	max-width:356px;
	width:40%;
	}
.aboutR{
	position:relative;
	padding-top:20px;
	}
.aboutWrap h2{
	text-align:left;
	color:#017537;
	}

@media only screen and (min-width : 600px){
	.aboutBg{ width:30%;}
}
@media only screen and (min-width : 900px){
	.aboutWrap{width:100%;}
	.aboutR{
		padding-top:40px;
		padding-right:5%;
		}
	.aboutBg{ width:40%;}
}
@media only screen and (min-width : 1200px){
	.aboutR{
		padding-top:5%;
		padding-right:10%;
		}
}



/*********************************************************
service
*/
.serviceArrow{
	margin-top:-20px;
	margin-left:auto;
	margin-right:auto;
	width:36px;
	}
.serviceBox{background-color:#ebfff4;}

.serviceWrap h4{
	clear:both;
	background-color:#ebfff4;
	background-position: center center;
	background-repeat:no-repeat;
	background-size:cover;
	text-align:center;
	color:#fff;
	font-weight:bold;
	font-size:1.4em;
	line-height:1.2em;
	padding:30px 0;
	border-radius: 10px 10px 0 0 / 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0 / 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0 / 10px 10px 0 0;
	}
.serviceWrap h4 > span{
	position:relative;
	display:block;
	margin:auto;
	width:22px;
	height:22px;
	transform: rotate(45deg);
	border:#fff solid 1px;
	font-size:0.6em;
	line-height:1;
	font-weight:normal;
	text-align:left;
	margin-bottom:10px;
	}
.serviceWrap h4 > span > span{
	display:block;
	transform: ;
	position:absolute;
	bottom: 50%;
	right:50%;
	-webkit-transform: translate(50%,50%) rotate(-45deg);
	-ms-transform: translate(50%,50%) rotate(-45deg);
	transform: translate(50%,50%) rotate(-45deg);
	}

.serviceBoxCol{
	padding:20px;
	}
.serviceBoxCol img{
	margin:auto;
	}
.serviceBox dt{
	color:#017537;
	font-weight:bold;
	font-size:1.25em;
	}
.serviceBox dd{
	}

.serviceComment{
	border:#666 dotted 1px;
	padding:10px;
	}
.serviceComment i{
	display:inline-block;
	color:#017537;
	margin-right:5px;
}


@media only screen and (min-width : 600px){
	.serviceBoxCol{padding:30px;}
	.serviceComment{ padding:20px;}
}
@media only screen and (min-width : 1025px){
	.serviceWrap h4{
		font-size:2.4em;
		line-height:1.2em;
		padding:70px 0;
		}
	.serviceWrap h4 > span{
		width:40px;
		height:40px;
		margin-bottom:20px;
		}
	.serviceBoxCol{
		display:flex;
		align-items:flex-start;
		flex-wrap: wrap;
		padding:50px;
		}
	.serviceBoxCol > *:nth-child(1){order:2;flex-shrink: 0; width:40%;}
	.serviceBoxCol > *:nth-child(2){order:1;flex-shrink: 0; width:55%; margin-right:5%;}
	.serviceBoxCol > *:nth-child(3){order:3;flex-shrink: 0; width:55%; margin-right:5%;}
	.serviceBoxCol > *:nth-child(4){order:4;flex-shrink: 0; width:40%;}


}

/*********************************************************
施工事例
*/
.exampleWrap{}
.exampleWrap dl{
	background:#fff;
	padding:20px;
	}
.exampleWrap dl > *{
	margin-bottom:5px;
	}
.exampleWrap dt{
	font-size:1.125em;
	line-height:1.5em;
	color:#017537;
	font-weight:bold;
	}
.exampleWrap dd{
	font-size:0.875em;
	line-height:1.5em;
	}
.exampleWrap dd.exampleName{
	font-size:0.813em;
	line-height:1.5em;
	color:#666;
	}


/*********************************************************
対応エリア
*/
.areaWrap{}

.areaWrap .column1-2 > *{
	background-color:#fff;
	border:#ccc solid 1px;
	padding:20px;
	}

.areaWrap h4{
	border-top:#017537 solid 1px;
	border-bottom:#017537 solid 1px;
	padding:10px 0;
	text-align:center;
	}
.areaWrap dt{
	font-weight:bold;
	font-size:1.3em;
	margin-bottom:10px;
	}

@media only screen and (min-width : 600px){
	.areaWrap .column1-2 > *{padding:40px;}
	.areaWrap h4{padding:20px 0;}
}


/*********************************************************
会社概要
*/
.companyWrap{}
.access{}

/*********************************************************
お問い合わせ
*/
.contactWrap{
	background:url(../images/contact/contactBg.jpg) center top no-repeat;
	background-size:cover;
	}
.contactWrap h2,
.contactWrap h2 span{ color:#fff;}


.contactWrap form{
	background:#fff;
	padding:20px;
	}

@media only screen and (min-width : 600px){
	.contactWrap form{padding:40px;	}
}


/*********************************************************
2nd
*/
/*TABLET*/
@media only screen and (min-width : 600px){
}
/*PC*/
@media only screen and (min-width : 1025px){
}
/*IE*/
@media all and (-ms-high-contrast:none){
}