@charset "UTF-8";
/* ページ全体のcss */

body{
	background-color : #fff;
	color : #000;
	font-family: 'Noto Serif JP', serif;
	font-size : 18px;
}

a{
	text-decoration : none;
}

/* 一番上の固定部分 */
.topper{
	position : fixed;
	background-color : rgba(255,255,255, 0.9); 
	height : 120px;
	width : 100%;
	z-index: 50;
	box-shadow : 2px 2px 1px rgba(50,80,50,0.6);
}

.clogo{
	padding-top : 5px;
	height : 110px;
	width : 418px;
}

#snav{
	display : none;
}

/* グローバルナビ設定 */
#gnav{
	list-style-type : none;
	float : right;
	height : 50px;
	margin-top : 65px;
	width : 750px;
}

#gnav li{
	float : left;
	width : 150px;
	text-align : center;
	font-size : 25px;
	line-height : 2.0;
	font-weight : bold;
	margin-right : 15px;
}

#gnav li a:hover{
	color : #080;
	border-bottom : 3px solid #080;
}

#gnav li a{
	color : #050;
}

#gnav li a:hover{
	color : #080;

}

#gnav li:nth-child(1){
	width : 80px;

}

#gnav li:nth-child(2){
	width : 105px;

}

#gnav li:nth-child(3){
	width : 105px;

}

#gnav li:nth-child(4){
	width : 105px;

}

#gnav li:nth-child(5){
	width : 105px;

}

#gnav li:nth-child(6){
	width : 160px;

}

/* 背景画像載せてる場所 */
#main{
	position : relative;
	top : 0;
	width : 100%;
	background-repeat : no-repeat;
	background-position : center top;
	background-attachment : fixed;
	transition : 2s;
}

/* 蛇口を～の文字が乗ってる空白部分 意図的に狭め*/
#topmain{
	width : 800px;
	margin : auto auto;
}

/* 蛇口を～の文字部分 */
.toptext{
	color : #000; 
	padding-top : 400px;
	font-size : 28px;
	margin-bottom : 200px;
	text-align : center;
}

/* コンテンツ名が乗ってるバー 使いまわし*/
.titlebar{
	width : 30%;
	height : 50px;
	background : linear-gradient(to left, rgba(34,139,55,0.9) 50%, transparent );
	text-align : right;
	padding-right : 100px;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	box-shadow : 3px 3px 1px rgba(50,80,50,0.6);
	margin-top : 100px;
	font-family: 'Noto Sans JP', sans-serif;
}

/* コンテンツ名のフォント */
.stitle{
	font-size : 26px;
	padding-top : 5px;
	color : #fff;
	text-shadow : 3px 3px 10px #57a;
	
}

/* コンテンツの内容が乗ってる部分のベース */
.contbar{
	width : 1000px;
	background-color : rgba(255,255,255,0.9);
	box-shadow : 3px 3px 1px rgba(50,80,50,0.6);
	margin : auto auto;
	border-radius : 3px;
}



/* ご挨拶のコンテンツベース個別 */
.grcon{
	margin-top : 100px;
	background-image : url("../img/gr_bg.png");
	background-repeat : no-repeat;
	background-position : 80% 50%;
}

/* ご挨拶のテキスト */
.grtext{
	width : 85%;
	margin : auto auto;
	line-height : 1.8;
	padding : 30px ;
	text-align : left;
}

.grtext p{
	text-indent : 1em;
}

/* 署名部分 */
.grts{
	float : right;
	margin-top : 30px;
	margin-right : 50px;
}

.grts img{
	vertical-align : middle;
}

/* ご挨拶のh3個別 */
.grh3{
	text-align : center;
	font-size : 30px;
}

/* 会社案内コンテンツベース個別 */
.abobar{
	background-image : url("../img/corp.jpg");
	background-repeat : no-repeat;
	background-position : 95% 15%;
	background-size : 400px;
	padding-bottom : 40px;
}

/* 会社案内h3個別 */
.abh3{
	text-align : left;
	padding-left : 10px;
	padding-bottom : 10px;
}

/* 会社案内コンテンツの内枠 */
.abocon{
	padding : 10px;
	width : 880px;
	margin : auto auto;
}

/* 会社案内内容テーブル */
.abotbl{
	width : 480px;
	border-collapse : collapse;
	border-top : 1px dotted #080;
	margin-bottom : 30px;
}

/* 会社案内内容テーブル1列目 */
.abotbl td:first-child{
	width : 110px;
	vertical-align : top;
	text-align : center;
	padding : 5px;
	border-bottom : 1px dotted #080;
}

/* 会社案内内容テーブル2列目 */
.abotbl td:nth-child(2){
	width : 340px;
	padding : 5px 5px 5px 15px;
	border-bottom : 1px dotted #080;
}

/* グーグルマップ部分 */
.gmap{
	height : 450px;
	width : 600px;
	margin : auto auto;
	border : 1px dotted #080;
}

/* 業務案内コンテンツベース個別 */
.sercon{
	width : 880px;
	padding : 10px 10px 40px 10px;
	margin : auto auto ;
}


/* 事業案内h3個別 */
.srh3{
	text-align : left;
	padding-left : 10px;
}

/* 事業案内リストの設定 */
.serul1{
	padding-left : 20px;
	list-style-position : inside;
	margin-bottom : 20px;
}

.serul1 li{
	font-size : 22px;
}


.serul2{
	padding-left : 20px;
	list-style-position : inside;
	margin-bottom : 20px;
}


/* イメージ用コンテナ */
.imglbox{
	width : 800px;
	margin : auto auto;
}

.imgsbox{
	text-align : center;
	width : 400px;
	margin-bottom : 20px;
	float : left;
}

.imgsbox img{
	border : 1px dotted #080;
}

/* イメージ用テキスト */
.imgbtxt{
	font-size : 20px;
	text-align : left;
	padding-left : 10px;
	font-family: 'M PLUS 1p', sans-serif;
}

/* 施工事例コンテンツベース個別 */
.worcon{
	padding-top : 10px;
	padding-bottom : 30px;
	width : 900px;
	margin : auto auto;
}



/* お問い合わせコンテンツベース個別 */
.contacbar{
	height : 280px;
	text-align : center;
}


.contatext{
	font-size : 35px;
	font-family: 'Noto Sans JP', sans-serif;
}


.ctt{
	padding-top : 20px;
	padding-bottom : 20px;
}

/* フッター部分 */
.footer{
	background-color : rgba(255,255,255,0.9);
	width : 100%;
	height : 120px;
	margin-top : 100px;
	text-align : center;
}

/* フッター部分リンク */
.sitemap{
	list-style-type : none;
	width : 620px;
	margin : auto auto;
	padding : 10px 0px 20px 0px;
	height : 20px;
}

.sitemap li{
	float : left;
	font-size : 20px;
	padding : 0 10px;
}

/* 各リンク幅調節用 */
.sitemap li:nth-child(1){
	width : 60px;
}

.sitemap li:nth-child(2){
	width : 80px;
}

.sitemap li:nth-child(3){
	width : 80px;
}

.sitemap li:nth-child(4){
	width : 80px;
}

.sitemap li:nth-child(5){
	width : 80px;
}

.sitemap li:nth-child(6){
	width : 120px;
}


.sitemap li a{
	color : #080;
}

.sitemap li a:hover{
	border-top : 2px solid #080;
}

/* トップへ戻るバー設定 */
.totopbar{
	width : 25%;
	height : 50px;
	background : linear-gradient(to right, rgba(34,139,55,0.9) 50%, transparent );
	text-align : left;
	padding-right : 20px;
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;
	box-shadow : 3px 3px 1px rgba(50,80,50,0.6);
	position : fixed;
	right : 0%;
	bottom : 3%;
}

.totopbar a{
	font-size : 20px;
	text-decoration : none;
	color : #fff;
	line-height : 2.5;
	margin-left : 15px;
	font-weight : bold;
	font-family: 'Noto Sans JP', sans-serif;
}

.totopbar a:hover{
	color : #afa;
}

.clearfix::after{
	content : "";
	display : block;
	clear : both;
}


/* 採用情報コメント */
#recbox{
	position : fixed;
	top : 135px;
	right : 135px;
	font-size : 25px;
	border : 4px dashed #080;
	text-align : center;
	padding : 10px;
	background-color : rgba(255,255,255,0.9);
	font-family: 'Noto Sans JP', sans-serif;
	z-index : 51;
	border-radius : 10px;
}

.crs{
	position : absolute;
	left : 43%;
	top : -35px;
}

#recbox a{
	position : absolute;
	color : #000;
	top : -4px;
	right : 3px;
	font-size : 18px;
}


/* h3ベース */
h3{
	font-size : 25px;
	line-height : 2.5;
	color : #040;
	text-shadow : 3px 3px 5px #484;
}

/* h4ベース */
h4{
	font-size : 22px;
	margin-left : 30px;
	line-height : 2;
	color : #040;
	text-shadow : 3px 3px 5px #484;
}

/* ie11用普段は非表示 */
.ie{
	display : none;
}

/* 1200以下画面サイズ用 */
.emp{
	display : none;
}

/* フォントサイズ16 */
.t16{
	font-size : 16px;
}

/* フォントサイズ22 */
.t22{
	font-size : 22px;
}

/* 矢印用 */
.sccor{
	color : #fff;
	font-size : 45px;
	font-weight : bold;
	font-family: 'Noto Sans JP', sans-serif;
	background-color : rgba(34,139,55,0.6);
	width : 70px;
	height : 70px;
	border-radius : 350px;
	text-align : center;
	margin : auto auto;
}


.scicon{
	padding-top : 50px;
	padding-bottom : 160px;
}

/* 赤文字 */
.red{
	color : #f00;
}

/* 青文字 */
.blue{
	color : #00f;
}

/* 緑文字 */
.green{
	color : #070;
}

/*太文字*/

.tbold{
	font-weight : bold;
}

/* ページ一番下の対応ブラウザ表記用 */
.att{
	font-size : 13px;
	padding-top : 5px;
}

.bold{
	font-weight : bold;
}

/* スクロールバー変更chromiumのみ */
::-webkit-scrollbar{
	width: 15px;
}

::-webkit-scrollbar-track{
	border-radius: 10px;
	background : #fff;
}

::-webkit-scrollbar-thumb{
	border-radius: 10px;
	background :#070;
}

/* 気合で動かしてるローディング画面設定 */
#nowload {
	background-color : #fff;
	background-image : url("../img/loadbg.jpg");
	height: 100vh;
	left: 0;
	top: 0;
	width: 100%;
	position: fixed;
	z-index: 100;
	display : none;
}

.loadfade{
	transition-property: opacity;
	transition-delay: 0.9s;
	transition-duration: 0.8s;
	opacity: 0;
	pointer-events: none;
}


#nowload p{
	color : linear-gradient(to top, #010 50%, #080);
	font-family: 'Noto Sans JP', sans-serif;
	font-size : 35px;
	text-align : center;
	margin-top : 45vh;
	font-weight : bold;
	color : #050;
	text-shadow : 3px 3px 10px #57a;
}


@media all and (-ms-high-contrast: none) {
	.ie{
		display : block;
	}
	
	.noneie{
		display : none;
	}
	
	.toptext{
		color : #000;
		text-align : left;
	}
}