@charset "utf-8";
* {/*font-family: Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
	/*font-family: "メイリオ", "Arial", "ヒラギノ角ゴ ProN",sans-serif;*/
	font-family: 'Noto Sans JP', "メイリオ", "Arial", "ヒラギノ角ゴ ProN",sans-serif;
	margin: 0px;
	padding: 0px;}



body {/*background-color: #FFF8EE;*/
 		-webkit-text-size-adjust: 100%;
 		color:#333;
		font-size: 16px;
		letter-spacing:0.1em;
		line-height: 1.8em;
		text-align: center;
		width: 100%;
		height:100vh;}




img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;}
.img2 {  width: 100%;
		height: auto;}
.ho{-webkit-transition: all 0.3s ease;
    		-moz-transition: all 0.3s ease;
    		-o-transition: all 0.3s ease;
    		transition: all  0.3s ease;}
.ho:hover{opacity:0.7;}


ul{list-style: disc;
	padding-left: 12px;}


.satisfy{font-family: 'Satisfy', cursive;}/*メインタイトルフォント*/

	


/*文字色*/
a { text-decoration: none;
	font-weight:bold;
	color:#329171;
	cursor: pointer ; }
a:visited { color:#329171;}/*訪問済みリンクの色*/


.moss{color:#80AF87;}
.green{color:#007F41;}



/*文字並び*/
.te-le{text-align: left;}
.te-le-cen{text-align:left;}
.te-cen-le{text-align:center;}


@media screen and (max-width: 639px) {
.te-le-cen{text-align:center;}
.te-cen-le{text-align:left;}}









/*背景*/
.bg_gray{background:#E2E2E2;}


/*共通ボタン*/
.btn-flat-simple {
	position: relative;
	display: inline-block;
	font-weight: bold;
	margin:1.2em auto;
	padding: 0.5em 0.3em;
	width: 100%;
	max-width:230px;
	text-decoration: none;
	text-align: center;
	color: #007F41;
	background: #fff;
	border: solid 2px #007F41;
	transition: .4s;
	letter-spacing:.3rem;}

.btn-flat-simple:hover {
  background: #007F41;
  color: #fff;}











/* コンテンツ領域 */
/*-----------------------------------------*/
.container{width:100%;
			/*background: #FED7D7;*/}

	.cont,
	.cont_all,
	.cont_big{width:100%;
		  	height:auto;
		  	margin:0 auto;}
	.cont,
	.cont_all{	max-width:1000px;
			/*background: #85FFFF;*/}
	.cont_big{max-width:1200px;
			/*background: #643513;*/}

	.in,
	.in_all{padding:2.5%;}
	

@media screen and (max-width: 639px) {
.in{padding:5% 2.5%;}
.in_all{padding:5% 0%;}
.cont{width:90%;}}






/*★ 固定ヘッダ部 */
/*-----------------------------------------*/		

/*レスポンシブ対応の固定ヘッダーナビ*/
/*----------------------------------*/
	.inner 	{	width: 100%;
	max-width:980px !important;
			margin: 0 auto;}
	.inner:after {	content: "";
				clear: both;
				display: block;}
 
/*------header------*/
	#top-head {	
    			position: fixed;
    			width: 100%;
				margin: 0 auto;
    			line-height:56px;
    			z-index: 999;
				height:60px;
				background-color:#fff;}
	#top-head a,
	#top-head {	color: #000;
				text-decoration: none;}
	#top-head .inner {position: relative;}
	#top-head .logo {	float: left;
						margin:10px 0 0 10px;}

	#global-nav ul {list-style: none;
    				position: absolute;
    				right: 0;}
	#global-nav ul li {float: left;
    					font-size: 0.8em;
						background: #fff;
						height:60px;
						border:3px solid;
  						border-color:transparent transparent transparent #007F41;
						transition: .4s;}
	#global-nav ul li:last-child {	border:3px solid;
									border-color:transparent #007F41;}
	#global-nav ul li a {padding: 0 15px;
						display: block;
						color:#007F41;
						transition: .4s;}
	#global-nav ul li:hover,
	#global-nav ul li a:hover{	background: #333;
							 	color: #fff;}








/* ------Fixed------ */
	#top-head.fixed {	margin-top: 0;
    					top: 0;
    					position: fixed;
    					padding-top: 10px;
    					height: 55px;
    					background: #fff;
    					background: rgba(255,255,255,.7);
    					transition: top 0.65s ease-in;
    					-webkit-transition: top 0.65s ease-in;
    					-moz-transition: top 0.65s ease-in;}
	#top-head.fixed #global-nav ul li a {color: #000;
    									padding: 0 20px;}
 
/* ------Toggle Button------ */
	#nav-toggle {display: none;
    			position: absolute;
    			right: 12px;
    			top: 14px;
    			width: 34px;
    			height: 36px;
    			cursor: pointer;
    			z-index: 101;}
	#nav-toggle div {position: relative;}
	#nav-toggle span {display: block;
    				position: absolute;
    				height: 4px;
    				width: 100%;
    				background: #007F41;
    				left: 0;
    				-webkit-transition: .35s ease-in-out;
    				-moz-transition: .35s ease-in-out;
    				transition: .35s ease-in-out;}
	#nav-toggle span:nth-child(1) {top: 0;}
	#nav-toggle span:nth-child(2) {top: 11px;}
	#nav-toggle span:nth-child(3) {top: 22px;}


@media screen and (max-width: 350px) {
	img.logo {width:72.5vw;
				padding-top:2.5%;}}

/*-----------スマホ-------------*/
	@media screen and (max-width: 799px) {
		#top-head,
		.inner {width: 100%;
				padding: 0;}
		#top-head {	top: 0;
					position: fixed;
					margin-top: 0;
					line-height:28px;}

		
	/* ------Fixed reset------ */
    	#top-head.fixed{padding-top: 0;
        				background: transparent;}
    	#mobile-head {	background: #fff;
        				width: 100%;
        				height: 60px;
        				z-index: 999;
        				position: relative;}
    	#top-head .logo {position: absolute;
        				left:0px;
        				top: 0px;}
    	#global-nav {position: absolute;
		/* 開いてないときは画面外に配置 */
        			top: -500px;
        			background: #fff;
        			width: 100%;
        			text-align: center;
        			padding: 10px 0;
        			-webkit-transition: .5s ease-in-out;
        			-moz-transition: .5s ease-in-out;
        			transition: .5s ease-in-out;}
    	#global-nav ul {list-style: none;
        				position: static;
        				right: 0;
       					top: 0;
        				font-size: 16px;}
    	#global-nav ul li {	float: none;
        					position: static;
  							border-color:#007F41 transparent transparent transparent;}
		#global-nav ul li:last-child {	border:3px solid;
										border-color:#007F41 transparent transparent transparent;}
    	#top-head #global-nav ul li a,
    	#top-head.fixed #global-nav ul li a {width: 100%;
        									display: block;
        									padding: 18px 0;
											display: block;}
    	#nav-toggle {display: block;}
		
		
	/* -----#nav-toggle 切り替えアニメーション------ */
		.open #nav-toggle span:nth-child(1) {top: 11px;
        									-webkit-transform: rotate(315deg);
        									-moz-transform: rotate(315deg);
        									transform: rotate(315deg);}
    	.open #nav-toggle span:nth-child(2) {width: 0;
        									left: 50%;}
    	.open #nav-toggle span:nth-child(3) {top: 11px;
        									-webkit-transform: rotate(-315deg);
       										-moz-transform: rotate(-315deg);
        									transform: rotate(-315deg);}

	/* ------#global-nav スライドアニメーション------ */
    	.open #global-nav {
			/* #global-nav top + #mobile-head height */
        	-moz-transform: translateY(556px);
        	-webkit-transform: translateY(556px);
        	transform: translateY(556px);}}

	
/*固定ヘッダ被り防止余白*/
	.blank{ height:58px;
			/*background:#fff;*/}


.first{ margin-top: 25px !important;}
.last{ margin-bottom: 25px !important;}

/*デバイス別表示切替*/ 			
.pc{display:block;}   			
.sp{display:none;}
@media screen and (max-width: 639px) {
   .pc{display:none;}
   .sp{display:block;}}








/*-パンくずリスト-------------------*/
/*----------------------------------*/
.breadcrumb {margin: 0;
  			 padding:1em;
  			 list-style: none;}
.breadcrumb li {display: inline;/*横に並ぶように*/
  				list-style: none;
  				font-weight: bold;/*太字*/}
.breadcrumb li:after {/* >を表示*/
  						content: '>';
  						padding: 0 0.2em;
  						color: #555;
						font-size:12.5px;}
.breadcrumb li:last-child:after {  content: '';}
.breadcrumb li a {  text-decoration: none;}
span.list{ color: #333;/*色*/
  			font-size:12.5px;}









/*-レスポンシブでのボックスの横並び-*/
/*----------------------------------*/
/*コンテンツカラム（全体）*/
	.wrap{	width:100%;
			margin:0px auto;
			overflow:hidden;}
	*, *:before, *:after {  -webkit-box-sizing: border-box;
	       					-moz-box-sizing: border-box;
	         				-o-box-sizing: border-box;
	       					-ms-box-sizing: border-box;
	            				box-sizing: border-box;}


/*-50カラム-------------------------*/
/*----------------------------------*/
.left-2,
.right-2 {	width: 50%;		width: calc(50%);	width: -webkit-calc(50%);	width: -moz-calc(50%);}
.left-2  { clear:both;
			float: left;}
.right-2  { float: right;}	



@media (max-width:639px) {
	.left-2,
	.right-2{width:100%;}}






/*----------マップ----------*/
/*--------------------------------*/
.map{ margin: 0px auto;
		/*padding-top:130px;*/
		max-width:1200px;
		z-index:5;}
.gmap {height: 0;
		overflow: hidden;
		padding-bottom: 250px;
		position: relative;}
.gmap iframe {position: absolute;
			left:0;
			top: 0;
			height: 100%;
			width: 100%;}











/*フッタ全般*/
/*--------------------------------*/

/*フッタ領域*/
.footer {	width: 100%;
			background:#C3D7D7;
			color:#333;
			position: relative;}
.fo_img{position: absolute;
  		bottom: 0;
  		right:10%;
		width: 100%;
  		max-width: 400px;
  		mix-blend-mode: color-burn;}
.footer a{	color:#333;}
.fo_info{ text-align:left;}

@media screen and (max-width: 639px) {
	.fo_img{right:0%;}
	.foot{ width:100%;}
	.fo_info{ text-align:center;}}




/*フッタ内テーブル*/
/*左側*/
table.tbl_fo_le th,
table.tbl_fo_le td{width: 50%;
					font-weight: 500;}	
@media (max-width:639px) {
		table.tbl_fo_le{width: 100%;
						margin: 10px 0;}
		table.tbl_fo_le th,
		table.tbl_fo_le td{width: 100%;
							display: block;
							text-align: center;
							font-size: 0.8em;}}

/*右側*/	
table.tbl_fo_ri a{color: #000;
				font-weight: 500;}
table.tbl_fo_ri th,
table.tbl_fo_ri td{width: 100%;
				display: block;
				text-align: left;
				font-weight: 500;}	
@media (max-width:639px) {
		table.tbl_fo_ri{width: 100%;
						margin: 10px 0;}
		table.tbl_fo_ri a{font-size: 0.8em;}
		table.tbl_fo_ri th,
		table.tbl_fo_ri td{	width: 50%;
							float: left;
							text-align: center;}}

/*コピー部分*/
	.copy { line-height:50px; /*縦中央揃え*/
			margin:0 auto;
			background: #007F41;
			height: 50px;
			color: #fff;}
















/*トップページ*/
/*--------------------------------*/
/*キャッチコピー*/

.top{position: relative;}
.copy_top{	z-index: 2;
			position: absolute;
			float: right;
			right:10vw;
			top:75%;
			font-size:300%;
			font-weight: bold;
			color: mediumpurple;
			mix-blend-mode:difference;}
@media (max-width:1024px) {.copy_top{right:5vw;}}
@media (max-width:639px) {
	.copy_top{right:1vw;
			top:80%;
			font-size:150%;
			color: #fff;
			mix-blend-mode:hard-light;}}


.title{font-size: 2.5em;
		line-height: 1.5em;
		letter-spacing:normal;}
.sub_ti{font-size: 1em;
		font-weight: bold;}


/*事業内容*/
.ug{background: url("../img/bg_ug.jpg") no-repeat bottom center/cover;
	background-attachment: fixed}


/*施工実績*/
/*選択式スライダ用*/
.gallery0500{margin:0 auto 5px auto;}
.work_shadow{filter: drop-shadow(10px 0px 0px #007F41);
			width: 95%;
			max-width:320px;}
				
@media screen and (max-width: 639px) {
.work_shadow{width: 100%;
			margin: auto;}}







/*トップページ以外*/
/*--------------------------------*/
/*サブタイトル部分*/
.subpage_title {
    width: 100%;
    height: auto;
    padding: 2% 0%;
    text-align: center;
	color: #fff;}
.ti_bg_com {background: url("../company/img/bg_title.jpg")no-repeat center center/cover;}
.ti_bg_ug {background: url("../underground/img/bg_title.jpg")no-repeat center center/cover;}
.ti_bg_zan {background: url("../zando/img/bg_title.jpg")no-repeat center center/cover;}
.ti_bg_wo {background: url("../works/img/bg_title.jpg")no-repeat center center/cover;}



@media screen and (max-width: 1000px) {
	.ti_bg_com {background: url("../company/img/bg_title_sp.jpg")no-repeat center center/cover;}
	.ti_bg_ug {background: url("../underground/img/bg_title_sp.jpg")no-repeat center center/cover;}
	.ti_bg_zan {background: url("../zando/img/bg_title_sp.jpg")no-repeat center center/cover;}
	.ti_bg_wo {background: url("../works/img/bg_title_sp.jpg")no-repeat center center/cover;}}



/*各項目タイトル*/
.caption_title {
	font-size: 1.2em;
	font-weight: bold;
  	position: relative;
  	display: inline-block;
  	margin:0.5em auto 2em;}
.caption_title:before {
	background: #007F41;
  	content: '';
  	position: absolute;
  	bottom: -15px;
  	display: inline-block;
  	width:125%;
  	height: 3px;
  	left: 50%;
  	-webkit-transform: translateX(-50%);
  	transform: translateX(-50%);
  	border-radius:2px;}
		




					 

/*会社案内*/
/*--------------------------------*/
/*概要*/
.tbl_com,
.tbl_com02{width:100%;
		max-width:700px;
		margin:10px auto;
		border-collapse: collapse;/*セル同士を重ねる*/}
		
.tbl_com tr,
.tbl_com02 tr{  border-top: 1px solid #949494;}

.last_line:last-child {  border-bottom: 1px solid #949494;}	

	
.tbl_com th,
.tbl_com02 th {padding:0.75em;
				vertical-align: top;}
.tbl_com th {width:20%;}

.tbl_com td,
.tbl_com02 td {	padding:0.25em 0.75em;}

.tbl_com02 th,
.tbl_com02 td{display: block;}

.tbl_com ul,
.tbl_com02 ul{list-style-type: square;}

.tbl_com li,
.tbl_com02 li{padding: 0.5em 0;
			margin-left: 16px;}



@media screen and (max-width: 640px) {
  .tbl_com,
  .tbl_com02 {width: 85%;}
  .tbl_com th,
  .tbl_com td{display: block;
    			width: 100%;}
  .tbl_com th,
  .tbl_com02 th{padding: 15px 0 0;}
  .tbl_com th{text-align: center;}
  .tbl_com02 th{text-align: left;}
	
  .tbl_com td,
  .tbl_com02 td{padding:0em 0.75em 1em 0.75em;}}








			
/*地中探査*/
/*--------------------------------*/
/*地中探査とは*/
.seien{width: 100%;
	max-width: 700px;
	margin: auto;
	display:flex;
	/*display:-webkit-flex;*/
	justify-content:space-around;}
			
.seien div{width: 150px;
		height: 150px;
		border-radius:50%;
		display:flex;
		/*display:-webkit-flex;*/
		justify-content:center;
		-webkit-box-pack:center;
		align-items:center;
		-webkit-box-align:center;
		color:#333;
		background:#8FCDBC;
		text-align:center;}
			
.seien_pc{display:block;} 
.seien_sp{display:none;}		
			
@media screen and (max-width: 529px) {
	.seien{display:block;}
	.seien div{border-radius:5px;
				width: 85%;
				height: auto;
				margin: 0.75em auto;
				padding:0.5em;}
	.seien_pc{display:none;}
    .seien_sp{display:block;}}
			
	
	




/*施工実績*/
/*--------------------------------*/
/*モーダルウィンドウ*/
.modal-co2{margin:auto;
				padding: 10px;
				background: #fff ;
				position: fixed ;
				z-index: 10003 ;
				display: none;}
	
.modal-co2 {width: 70%;}
  
#modal-ov2 {z-index:10002 ;
				display: none ;
				position: fixed ;
				top: 0 ;
				left: 0 ;
				width: 100% ;
				height: 120% ;
				background-color: rgba( 0,0,0, 0.75 ) ;}
@media (max-width:1000px) {.modal-co2{width: 90%;}}

.button-link{text-align: center;
			display: block;}

/*--------------------------------*/
/*4→2カラムにする*/
.cssgrid {display: grid;
    		grid-template-columns: 1fr 1fr 1fr 1fr;
    		grid-gap: 0.8em;}	
.cssgrid > div {background: #ddd;
    			overflow: auto;}
@media (max-width:639px) {.cssgrid{grid-template-columns: 1fr 1fr;}}


/*モーダル内画像*/
.mo{width:100%; max-width:1000px; height:auto !important;}