@charset "utf-8";
/* CSS Document */

html,body {
	overflow-x: hidden;
}

body{
	position:relative;
	padding-top:66px;
	
	text-align: left;
	color: #191311;	
	line-height:1.2;
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'Osaka', 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';
	
	
	/*
	トップページスライドでスクロールバーが出ないようにだろうか。
	↓プリント時ページに合わせて拡大縮小されなくなるのでトル。
	overflow: hidden;
	ややこしいのはIEはこれがあってもプリント時ページに合わせて拡大縮小される。
	Edgeはされない。
	*/
}




h2,
h3,
h4,
h5,
strong{
	font-weight:bold;
}
.contents_pc{}
.contents_sp,
#contents_area .contents_sp{ display:none}

.mincho{
	/* font-family :"游明朝", YuMincho,"ヒラギノ明朝 Pr6 W6","Hiragino Mincho Pro", "HGS明朝E","メイリオ", "ＭＳ Ｐ明朝","MS PMincho",Meiryo,"Times New Roman", serif; */
}





#wrap_all_frame{
	position:relative;
	overflow-x: hidden
}

#print{
	display:none;
}

a{ color: #333}
a:hover{ text-decoration:underline}
a:not(.no_hover):hover img,
button:hover img{
	filter:alpha(opacity=70);
	opacity:0.7;
	-moz-opacity:0.7;
}
label,
button{
	cursor:pointer
}



.fll,
.flL { float:left;}

.flr,
.flR { float:right;}

.dib{
	display: inline-block;
}


.before_icon:before,
.after_icon:after{
	content:"";
	display: inline-block;
	width:0;
	height:0;
	vertical-align:middle;
	background-repeat: no-repeat;
	background-size:100% auto
}
.before_icon:before{
}
.after_icon:after{
}
.before_icon img,
.after_icon img{
	display: inline-block;
	vertical-align:middle;
}



.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb35{margin-bottom:35px}
.mb40{margin-bottom:40px}
.mb50{margin-bottom:50px}

.center{ text-align:center}
.left{ text-align: left}
.right{ text-align:right}

.cf,
.clear,
.clearfix:after{
	clear:both;
	display: block;
	overflow:hidden;
}
.clearfix:after{
	content:" ";
	width:0;
	height:0;
}

/* clearfix:after基本的にdisplay: block必要 */

/* For IE 6/7 only */
.clearfix{
	*zoom: 1;
}

.indent1em{
	padding-left: 1em;
	text-indent: -1em;
}

.abs{
	position:absolute;
}
.lt50{
	top:50%;
	left:50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.l50{
	left:50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.t50{
	top:50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}





.border{
	border:1px solid #000;
}
.border_top{
	border-top:1px solid #000;
}
.border_right{
	border-right:1px solid #000;
}
.border_bottom{
	border-bottom:1px solid #000;
}
.border_left{
	border-left:1px solid #000;
}
.border_top_dotted{
	border-top:1px dotted #000;
}
.border_right_dotted{
	border-right:1px dotted #000;
}
.border_bottom_dotted{
	border-bottom:1px dotted #000;
}
.border_left_dotted{
	border-left:1px dotted #000;
}







/*  */
.baseW{
	margin:0 auto;
	width:1000px
}
.baseW_s{
}
p.baseW_s{
}
.baseW_s a{
}
.baseW_s a:hover{
}












/* ヘッダー */
#header{	
	position:fixed;
	top:0;
	left:0;
	
	width:100%;
	height:66px;
	background-color:#fff;
	z-index:500
}



#header a{
	display:block;
	text-align:center;
}
#header a:hover{
	text-decoration:none
}

#header h1{
	float:left;
	margin-left:17px;
	height:66px;
}
#header h1 a{
	padding: 5px 0 6px;;
}



#header ul li a,
#header ol li a{
	height:66px;
	line-height:66px;
	font-weight:bold;
	font-size:16px;
}



#header ul{
	/* width:200px; */
	background-color:#fff;
}
#header ul li{
	float:left;
}
#header ul li.to_en{
	width:124px;
}
#header ul li.to_en a{
	color:#0097D3
}
#header ul li.to_en a:hover{
	color:#4db6e0
}
#header ul li.icon_menu{
	width:76px;
	background-color:#0097D3;
}
#header ul li.icon_menu a:hover{
	background-color:#4db6e0;
}





#header .header_navi{
	font-size:16px;
}
#header .header_navi li{
	float:left;	
}
#header .header_navi li a{
	padding: 0 12px;
}
#header .header_navi li a:hover{
	color:#888;
	background-color:#fff
}

@media screen and (max-width: 1350px) {
	#header .header_navi li a{
		padding: 0 8px;
	}
}
@media screen and (max-width: 1280px) {
	body{
		padding-top:133px;
	}
	#header{
		height:133px;
	}
	#header .header_navi{
		float:left;
		border-top:1px solid #fff;
		width:100%;
		text-align:center
	}
	#header .header_navi li{
		float:none;
		display:inline-block
	}
	#header .header_navi li.contents_sp{
		display:none
	}
	

}































/* #contents_area
コンテンツ
------------------------------------------------------------ */
#contents_area{
}

#contents_area img{
	display:block;
	
}
#contents_area .baseW{
	width:1000px;
}




/* 各ページタイトル */
#contents_title{
	margin:0 auto;
	min-width:1000px;
	
	height:220px;
	background-color:#0067c7;
	background-repeat:no-repeat;
	background-position:center center;
}

#contents_title h2{
	margin:0 auto;
	padding-top:60px;
	width:10em;
	color:#fff;
	text-align:center;
	font-size:50px;
	letter-spacing:15px;
}
#contents_title h2 span{
	display:block;
	margin-top:5px;
	padding-top:15px;
	border-top:#fff solid 2px;
	font-size:18px;
	letter-spacing:0;
}



.bg{
	padding:50px 0;
	background-color:#eee
}
.bg_white{
	background-color:#fff
}








/* 
パンくず
------------------------------------------------------------ */
#breadcrumb_list{
	padding:20px 0;
}
#breadcrumb_list li{
	display:inline;
	font-size:14px;
}

#breadcrumb_list li:not(:last-of-type):after {
	content: "\003e";
	margin-left:0.5em
}

#breadcrumb_list li:first-of-type:before{
	content:url(../images/icon_breadcrumb_home.png);
	margin-right:5px;
	display:inline-block;
	vertical-align:middle;
}
#breadcrumb_list li a{
	font-weight:bold
}






/* 各ページ */
.inner{
	position:relative;
	padding:60px 0;
	border-top:#0095D9 4px solid;
	background-color:#fff
}


.inner_title{
	text-align:center;
	line-height:1.5
}
.inner_title h3{
	padding-bottom:40px;
	font-size:30px;
}
.inner_title strong{
	display:block;
	font-size:46px;
	color:#0094D8
}


.inner .page_navi{
	position: absolute;
	left:100%;
	top:-4px;;
	width:210px
}
.inner .page_navi li:not(:first-of-type){
	border-top:1px solid #fff
}

.inner .page_navi a{
	display:block;
	padding-left:20px;
	line-height:4;
	font-size:15px;
	color:#fff;
	font-weight:bold;
	background:#0097d3 url(../images/icon_page_navi.png) no-repeat 95% center ;
}
.inner .page_navi a:hover{
	text-decoration:none;
	background-color:#4db6e0;
}
.inner .page_navi .green a{
	background-color:#86b91e;
}
.inner .page_navi .green a:hover{
	background-color:#abce62;
}
.inner .page_navi .gray a{
	background-color:#c1c1c1;
}
.inner .page_navi .gray a:hover{
	background-color:#d4d4d4;
}

@media screen and (max-width: 1000px) {
	.inner{ overflow:hidden}
}
@media screen and (max-width: 1350px) {
	.inner .page_navi{ display:none}
}


.inner_tab{
	width:100%;
	font-size:16px;
	text-align:left;
	line-height:1.6;
}
.inner_tab th,
.inner_tab td{
	padding:33px 0;
	border-top:1px dotted #999;
	vertical-align:top;
}
.inner_tab tr:nth-of-type(odd) th,
.inner_tab tr:nth-of-type(odd) td{
	background-color:#f5f5f5
}

.inner_tab th{
	padding-left:120px;
	font-weight:bold;
}
.inner_tab td{
	padding-left:60px
}
.inner_tab td h4{
	color:#0093D8;
	margin-top:1em
}
.inner_tab td h4:first-of-type{
	margin-top:0
}









/*
fancybox
なぜか会社概要とサイトマップではhtmlに.fancybox-locつく
トップはクラスつかない
*/
html.fancybox-lock.fancybox-margin {
	margin:0;  
    overflow-y: scroll !important;
}
html.fancybox-lock .fancybox-overlay {
    overflow-y: hidden !important;
}
/* ロゴストーリー。トップページ。会社概要ページ */
#logostory{
	width: 580px;
	padding: 10px;
}
#logostory p{
	width: 400px;
	margin-top: 20px;
	font-size: 12px;
	font-size: 1rem;
	line-height: 140%;
}
#logostory div{
	text-align: right;
	margin-top: 20px;
}

/* ロゴストーリー。ひとまずサイトマップページのみ。 */
#seikyuhouho{
	padding:65px;
	font-size: 16px;
	line-height: 1.7;
}







/*
工事事業

トップページ /
技術ページ /tech/
実績ページ /work/

.tech_navi strongのみトップページ以外。
.tech_navi ul li p以降はトップページのみ。
*/
.tech_navi{
	padding:75px 0;
}
.tech_navi strong{
	display:block;
	padding-bottom:80px;
	text-align:center;
	font-size:46px;
	color:#0093d8
}


.tech_navi a,
.tech_navi .photo{
	display:block;
	color:#fff;
	text-align: center;
	font-weight:bold;
}
.tech_navi a:hover{
	text-decoration:none
}

.tech_navi ul{
	display: flex;
	justify-content: space-between;
	margin:0 auto;
	max-width: 1600px;
}

.tech_navi ul li{
	width:24%
}
/* スマホ */
@media screen and (max-width: 1024px){
	.tech_navi ul {
		flex-wrap: wrap
	}
	
	.tech_navi ul li{
		margin-bottom: 3%;
		width:48.5%
	}
}


.tech_navi ul li > .photo{
	position:relative;
	height:0;
	padding-bottom:80%;
	font-size:24px
}
.tech_navi ul li > .photo span{
	position:absolute;
	top:50%;
	left:50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	width:100%;
	z-index:50

}
.tech_navi ul li > .photo img{
	width:100%;
	height:auto;

}






/*
技術ページ /tech/
実績ページ /work/
*/
.tech_wrap{
	margin-top:110px;
}
.tech_wrap#sea{
	margin-top:90px
}

.tech_wrap .slide{
	position: relative;
	margin:0 auto;
	width:1000px;
}
.tech_wrap .slide > ul{
	padding-bottom: 60% ;
	height: 0
}
.tech_wrap .slide .slick-list{
	overflow: visible
}
.tech_wrap .slide .slide_item{
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	z-index: 200 !important;
}





.tech_title,
.tech_text{
	margin:0 auto;
	width:805px;
}
.tech_title{
	padding-top:100px
}

.tech_title em,
.tech_title strong{
	display:block;
	padding-left:30px;
	border-left:7px solid #0096D6;
	line-height:1.1;
	font-weight: bold;
}

.tech_title em{
	font-size:30px;
}
.tech_title strong{
	padding-top:25px;
	font-size:46px;
	color: #0096D6;
}



.tech_text > div{
	padding-top:45px;
	font-size:16px;
	line-height:2
}
.tech_text > div h4{
	font-size:18px;
	color:#0096D6
}












.to_tech_detail{
	display:block;
	margin:55px auto 0;
	width:400px;
	height:60px;
	line-height:60px;
	font-size:28px;
	font-weight:bold;
	color:#fff;
	text-align:center;
	background: #0096D6 url(../images/icon_tech_to_detail.png) no-repeat 90% center;
	border:none;
	border-radius: 30px;
}
.to_tech_detail:hover{
	text-decoration:none;
	background-color:#4db6e0;
}

















/*
技術ページ /tech/　詳細ページ 
実績ページ /work/　詳細ページ
*/
.detail_sea .inner_title h3,
.detail_land .inner_title h3,
.detail_env .inner_title h3{
	padding-bottom:15px
}










.detail_wrap{
	margin-top:-80px
}

.detail_wrap > em{
	display:block;
	padding:60px 0 10px;
	font-size:30px;
	font-weight:bold;
}
.detail_wrap > em:before{
	content:"◆ "
}

.detail_wrap > p{
	padding-top:3px
}


.detail_wrap > .border{
	position:relative;
	margin-top:135px;
	border:none;
	border-top:10px solid transparent;
}
.detail_wrap > .border:after{
	content:"";
	position:absolute;
	display:block;
	left:0;
	top:-10px;
	width:100px;
	height:10px;
}




.detail_wrap > ul > li{
	padding:40px 0;
	border-top:1px dotted #999
}
.detail_wrap > ul > li:first-of-type{
	border-top:none
	
}

.detail_wrap > ul > li:after{
	content:"";
	display:block;
	height:0;
	overflow:hidden;
	clear:both;
}
.detail_wrap > ul > li .photo{
	float:left;
	width: 235px;
	background-color:#eee
}
.detail_wrap > ul > li .photo img{
	display:block;
	margin:0 auto
}
.detail_wrap > ul > li h4,
.detail_wrap > ul > li p,
.detail_wrap > ul > li ol{
	float:right;
	width:720px
}

.detail_wrap > ul > li h4{
	padding-bottom:15px;
	font-size:24px;
}

.detail_wrap > ul > li p,
.detail_wrap > ul > li ol{
	font-size:16px;
	line-height:2
}
.detail_wrap > ul > li ol li:before{
	content:"・"
}
.detail_wrap > ul > li p{
}












.detail_wrap .to_search{
	padding:50px 0 110px;
}
.detail_wrap .to_search p{
	text-align:center;
	font-weight:bold;
	font-size:20px;
}

.detail_wrap .to_search .to_tech_detail{
	margin-top:25px
}















/* 各色 */
.detail_sea .bg{
	background-color:#e5f5fd
}
.detail_sea .inner_title strong,
.detail_sea .detail_wrap > .border:before,
.detail_sea .detail_wrap > ul > li h4{
	color:#00a0ec
}
.detail_sea .detail_wrap > .border{
	border-top-color:#7fd0f4
}
.detail_sea .detail_wrap > .border:after,
.detail_sea .detail_wrap .to_search .to_tech_detail{
	background-color:#00a0ec
}
.detail_sea .detail_wrap .to_search .to_tech_detail:hover{
	background-color:#4dbdf2
}



.detail_land .bg{
	background-color:#fff5d9
}
.detail_land .inner_title strong,
.detail_land .detail_wrap > .border:before,
.detail_land .detail_wrap > ul > li h4{
	color:#b28500
}
.detail_land .detail_wrap > .border{
	border-top-color:#d8c27f
}
.detail_land .detail_wrap > .border:after,
.detail_land .detail_wrap .to_search .to_tech_detail{
	background-color:#b28500
}
.detail_land .detail_wrap .to_search .to_tech_detail:hover{
	background-color:#c9aa4d
}




.detail_env .bg{
	background-color:#edf5dd
}
.detail_env .inner_title strong,
.detail_env .detail_wrap > .border:before,
.detail_env .detail_wrap > ul > li h4{
	color:#85bb00
}
.detail_env .detail_wrap > .border{
	border-top-color:#c2dc8e
}
.detail_env .detail_wrap > .border:after,
.detail_env .detail_wrap .to_search .to_tech_detail{
	background-color:#85bb00
}
.detail_env .detail_wrap .to_search .to_tech_detail:hover{
	background-color:#aad04d
}
/* env環境 ecoでもよかったかも。 */


.detail_construct .bg{
	background-color:#d9f9f9
}
.detail_construct .inner_title strong,
.detail_construct .detail_wrap > .border:before,
.detail_construct .detail_wrap > ul > li h4{
	color:#00698c
}
.detail_construct .detail_wrap > .border{
	border-top-color:#7fb4c5
}
.detail_construct .detail_wrap > .border:after,
.detail_construct .detail_wrap .to_search .to_tech_detail{
	background-color:#00698c
}
.detail_construct .detail_wrap .to_search .to_tech_detail:hover{
	background-color:#80b4c6
}






/* 
/tech/sea.php
/work/sea.php
のみ
*/
.detail_sea .detail_wrap dl{
	margin-bottom:40px;
	padding-top:40px;
	border-bottom:1px dotted #999;
}
.detail_sea .detail_wrap dl dt,
.detail_sea .detail_wrap dl dd{
	padding:15px 0;
	border-top:1px dotted #999;
	font-size:16px;
	line-height:1.5
}

.detail_sea .detail_wrap dl dt{
	float:left;
	width:260px;
	text-indent:45px;
	font-weight:bold;
}

.detail_sea .detail_wrap dl dd{
	float:right;
	width:740px;
}




/* 
/tech/sea.php
のみ
*/
.detail_sea .detail_wrap .text{
	margin:0 auto;
	width:910px
}
.detail_sea .detail_wrap .text h4{
	padding-top:60px;	
	font-size:30px;
	font-weight:bold
}
.detail_sea .detail_wrap .text p{
	padding-top:30px;
	font-size:16px;
	line-height:2
}




































/* フッター */
#footer{
	padding:80px 0 50px;
	background:#000 url(../images/bg_photo.jpg) no-repeat center bottom;
	background-position: center 45%
}
#footer,
#footer a{
	color:#fff;
}

#footer_adress{
	font-size:18px;
	line-height:1.7
}
#footer_adress strong{
	font-size:26px;
}



.footer_navi{
	padding-top:40px;;
	font-size:18px;
}
.footer_navi_s{
	padding-top:20px;
	font-size:14px;
	line-height: 1.5;
}


.footer_navi ul li{
	display:inline-block;
	margin-right:24px;
}
.footer_navi ul li a:before{
	content:"";
	margin-right:5px;
	width:0;
	height:0;
	border:5px solid transparent;
	border-left-color:#fff;
	display:inline-block;
	vertical-align:middle
}




#copyright{
	margin-top:40px;
	padding-top:15px;
	text-align:center;
	font-size:12px;
	border-top: 1px dotted #fff;
	border-top: 1px dotted rgba(255,255,255,0.5)
}


















#to_top{
	position:fixed;
	right:5%;
	bottom:2%;
	width:52px;
	height:52px;
	z-index:150
}
#to_top a{
	display:block
}