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

.img2, .footer img{width:100%; height:auto; vertical-align:middle; line-height:0;} /*スライダー部分*/
img{width:auto;}/*スライダー以外の画像*/


a {text-decoration: none; /*リンクの下線消し*/
	-webkit-transition: all 0.3s ease;
    	-moz-transition: all 0.3s ease;
    	-o-transition: all 0.3s ease;
    	transition: all  0.3s ease;
				color:#111;}
a:hover {opacity: 0.8; /* マウスオーバー時20％ほど透明にする */
	 color:#325082;}

h2.sub{color:#325082;
	line-height:1.35em;
	font-size:2.75vh;}
ul {list-style-type: square;}

@media screen and (max-width: 639px) {h2.sub{line-height:1.25em;
	font-size:3.5vh;}}


/* CSS Document */
/*----------------------------------*/
*{margin:0;
	padding:0;}
body {	width:100%;
    	font-family: Verdana, Helvetica, sans-serif;
    	font-size: 16px;
    	color: #111;
		line-height:1.75em;
		letter-spacing:0.8pt
		/*text-align:center;*/}
		








/*共通コンテナ*/
/*----------------------------------*/
	#container {width: 100%;
			height:100% auto;
			margin:80px auto 0px auto;}
	.cont,
	.cont_big{width:100%;
		  height:auto;
		  margin:0 auto;}
	.cont{max-width:1000px;}
	.cont_big{max-width:1200px;}

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



/*共通ボタン*/
.sub_bt{line-height:40px;
	display: inline-block;
	width:100%;
	max-width:250px;
	height:40px;
	text-align:center;
	border-radius:20px;}

.cont-sub-bt{background:#3250BE;
		color:#fff;
		-webkit-transition: all 0.3s ease;
    		-moz-transition: all 0.3s ease;
    		-o-transition: all 0.3s ease;
    		transition: all  0.3s ease;
		margin: 4vh auto 2.5vh auto;}
.cont-sub-bt:hover{background:#D2F0FF;
			color:#3250BE;}
















 
 
/*-トップページ---------------------*/
/*----------------------------------*/
.title_top{ width:100%;
		height:auto;
		padding:10% 0%; /*高さ指定*/
		text-align:center;
		color : #fff;
		font-size: 3vw;
		font-weight:bold;
		background:url(../img/top.jpg) center center/cover;}
.title_top img{max-width:450px;}

 @media screen and (max-width: 639px) {.title_top{font-size: 6vw;
														padding:15% 0%;
														background:url(../img/top_sp.jpg) center center/cover;}
.title_top img{max-width:450px; padding:2.5%;}} 
 



 .top_area1{ background:#F0FFE6;
 		 margin-bottom:7vh;}
 .top_area2{ background:url(../img/per_bg.jpg) center center/cover;
		min-height:35vh;
  		margin-bottom:7vh;}
 .top_area3{ background:url(../img/com_bg.jpg) center center/cover;
		min-height:35vh;
  		margin-bottom:7vh;}
 
 .area_bt{	background:#fff;
	 	-webkit-transition: all 0.3s ease;
    		-moz-transition: all 0.3s ease;
    		-o-transition: all 0.3s ease;
    		transition: all  0.3s ease;}
 .area_bt:hover{background:#D2F0FF;}
 
 



/*-矢印部分---------------------*/
.arrow_area{ background:#0078FF;
		width:45px;
		height:45px;
		float:right;}
.arrow{position: relative;
  	display: inline-block;}
.arrow::before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 14px;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 0;
    border-top: solid 3px #fff;
    border-right: solid 3px #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);}





.img_bt{position: relative;}
.arrow_area_img{ background:#0078FF;
		width:45px;
		height:45px;
		position:absolute;
		right:0;
		bottom:0;}










/*-ホーム以外のページのタイトル部分-*/
/*----------------------------------*/
.title{ width:100%;
	height:auto;
	padding:8% 0%;
	text-align:center;
	color : #fff;
	font-size: 3vw;
	font-weight:bold;}
 @media screen and (max-width: 639px) {.title{font-size: 6vw;
padding:10% 0%;}} 



.connect_area{ background:#F0FFE6;
		max-width:1000px;
		margin-bottom:7vh;
		margin:0 auto;}
.connect_area p{margin-top:10px;
		line-height:1.25em;
		font-size:18px;
		font-weight:bold;}

.w_bg{background:rgba(255,255,255,0.75);}



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



/*-事業案内-------------------------*/
/*----------------------------------*/
.ti_bg_bus100{background:url("../equipment/environment/img/top.jpg") center center/cover;}
.ti_bg_bus101{background:url("../equipment/air_environment/img/top.jpg") center center/cover;}
.ti_bg_bus200{background:url("../equipment/water_quality/img/top.jpg") center center/cover;}
.ti_bg_bus300{background:url("../equipment/general/img/top.jpg") center center/cover;}

.bus_bg100-1{background:url(../equipment/environment/img/bus_bg1.jpg) no-repeat left bottom/contain;}
.bus_bg100-2{background:url(../equipment/environment/img/bus_bg2.jpg) no-repeat right bottom/contain;}
.bus_bg100-3{background:url(../equipment/environment/img/bus_bg3.jpg) no-repeat left bottom/contain;}
.bus_bg200-2{background:url(../equipment/water_quality/img/bus_bg1.jpg) no-repeat right bottom/contain;}
.bus_bg300-1{background:url(../equipment/general/img/bus_bg1.jpg) no-repeat left bottom/contain;}

.bus_bg100-1,
.bus_bg100-2,
.bus_bg100-3,
.bus_bg200-2,
.bus_bg300-1{background-size:50%;}



/*-会社概要-------------------------*/
/*----------------------------------*/
.ti_bg_com{background:url(../company/img/top.jpg) center center/cover;}
.com_area{ background:#D2F0FF;
		min-height:35vh;
  		margin-bottom:7vh;}
.vision{background:#fff;
	border: 3px solid #325082;
	text-align:center;
	padding:12.5% 5%;}
.vision h3{	color:#325082;}
.com_bg{background:url(../company/img/com_bg.jpg) no-repeat right bottom/contain;
	background-size:25%;}

@media screen and (max-width: 639px) {.vision br{display: none;}}



table.tbl-com {margin: 20px auto;
			width: 100%;
    			text-align: left;
			border: solid 5px #325082;}
table.tbl-com-in{width:100%;
				margin:0;}
.tbl-com th {background: #325082;
  				color: #fff;
  				padding: 10px;
				border-top: 2px solid #fff;
				border-bottom: 2px solid #fff;
				width:25%;
				vertical-align: top;}

.tbl-com td {	padding: 10px;
		border-top: 2px solid #325082;
		border-bottom: 2px solid #325082;
		border-left: 4px solid #325082;
		color:#325082;
		background:#fff;}
 
.fi th{border-top: 2px solid #325082;}
.la th {border-bottom: 2px solid #325082;}



  .tbl-com li {margin-left:25px;}
  .tbl-com-in th{background:#fff;
		 		color: #325082;
		 		font-weight:normal;
		 		width:45%;}
  .tbl-com-in li {margin-left:9px;
		 			list-style-type: square;}
  .tbl-com-in th,
  .tbl-com-in td {border:none;
				padding:0;}

@media screen and (max-width: 639px) {
	.vision{padding:7% 0;}
.com_bg{background-size:75%;}
table.tbl-com {border:none;
		width: 100%;}
  .tbl-com th,
  .tbl-com td {border: none;
    			display: block;
    			width: 100%;}
  .tbl-com-in td {margin-left:30px;
		  width: 100%;}}




/*----------マップ----------------*/
/*--------------------------------*/
.map{ margin: 0px auto;
		max-width:1000px;
		z-index:5;}
.gmap {height: 0;
		overflow: hidden;
		padding-bottom: 350px;
		position: relative;}
.gmap iframe {position: absolute;
				left:0;
				top: 0;
				height: 100%;
				width: 100%;}
ul.list{list-style-type: square;
		margin-left:25px;}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	




 
 
 
 
 
 
 
 
/*-レスポンシブでのボックスの横並び-*/
/*----------------------------------*/
/*コンテンツカラム（全体）*/
	.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;}	


/*-33.3カラム-------------------------*/
/*----------------------------------*/
.left-3,
.center-3,
.right-3 {width: 33.33333%;    width: calc((100%) / 3);    width: -webkit-calc((100%) / 3);   width: -moz-calc((100%) / 3);}
.left-3,
.center-3  {float: left;}
.left-3{ clear:both;}
.right-3  { float: right;}

   
/*-50カラムの交互変換---------------*/
/*----------------------------------*/
/*コンテンツ2_50カラム*/
.wrap50,
.wrap50-2 {	display:flex;
		justify-content: space-between;
		margin:0 auto;
		position:relative;
		height:auto;
		padding:2vh 0;}
			
.wrap50 {	flex-direction: row;}
.wrap50-2 {	flex-direction: row;}		
			
			
			

.column2-1,.column2-2 { width: 50%;		width: calc(50%);	width: -webkit-calc(50%);	width: -moz-calc(50%);}/*奇数*/


.wrap50:nth-child(even) {flex-direction: row-reverse;}
.wrap50-2:nth-child(even) {flex-direction: row-reverse;}
.wrap50:nth-child(even) .column2-1{}
.wrap50:nth-child(even) .column2-2 {}/*偶数*/




@media (max-width:639px) {
	.left-2,
	.right-2 {width:100%;}
	.left-3,
	.center-3,
	.right-3 {width:100%;}	
	
	
/*50:写真→文字　50-2：文字→写真*/
  .wrap50  {flex-direction: column-reverse;}
  .wrap50-2  {flex-direction: column;}
  .column2-1 , .column2-2{ width:100%;}
  .wrap50:nth-child(even) {flex-direction: column-reverse; width:100%;}
  .wrap50-2:nth-child(even) {flex-direction: column; width:100%;}
  .wrap50:nth-child(even) .column2-1 {}
  .wrap50:nth-child(even) .column2-2 {}}

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

/*フッタ領域*/
.footer {	width: 100%;
			background-color:#3250BE;
			color:#fff;
			padding-bottom:20px;}

.footer a{	color:#fff;	}		
.footer a:hover{color: #D2F0FF;
				/*font-weight: bold;*/}

.footer table td{font-weight:bold;}



.fo_info{ text-align:center;}

.footer-sub-bt{background:#fff;
		color:#3250BE;
		-webkit-transition: all 0.3s ease;
    		-moz-transition: all 0.3s ease;
    		-o-transition: all 0.3s ease;
    		transition: all  0.3s ease;}
.footer-sub-bt:hover{background:#D2F0FF;}



@media screen and (max-width: 639px) {
	.foot_menu{ display:none;}
	.foot{ width:100%;
			/*height:300px;*/
			min-height:180px;}
	.footer-sub-bt{margin: 0 auto;}}



/*コピー部分*/
	.copy { max-width:400px;
			text-align:center;
			line-height:30px; /*縦中央揃え*/
			font-size:11px;
			margin:0 auto;}
			
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 /* 固定ヘッダ部 */
/*-----------------------------------------*/		

#top_header{	position: fixed;
    		width: 100%;
		margin: 0 auto;
		top:0;
		/*line-height:0.2;*/
    		z-index: 999;
		height:80px;
		background-color:#fff;
		box-shadow: 0px 2px 4px;}


#top_header .logo {	float: left;
			height:100%;
			max-height:35px;
			top:15px;
			left:5px;
			position:relative;}

@media screen and (max-width: 639px) {
#top_header .logo {max-height:32px;}}
  	


/* Nav
-----------------------------------------*/
.Nav {width: 100%;
		max-width:1000px !important; /*ヘッダナビの範囲*/
		margin: 0 auto;
		padding:10px 0;
		display: block;
		z-index:9999;
  		/*border-top: solid 1px #F5F4F0;
  		border-bottom: solid 1px #F5F4F0;
  		margin-top: 60px;
  		position: fixed;*/}
@media screen and (max-width: 639px) {
  .Nav {position: fixed;
  		border-top:none;}}
  	
 
/*---ハンバーガーボタン---*/
  .Nav .navbtn {display: none;}
@media screen and (max-width: 639px) {
  .Nav .navbtn {display: block;
    			position: absolute;
    			top: 20px;
    			right: 10px;
    			z-index:10000;}}
@media screen and (max-width: 639px) {
  .Nav .navbtn a,
  .Nav .navbtn a.close {
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
    background-color: #0078FF;}
  .Nav .navbtn a::before,
  .Nav .navbtn a.close::before {
    position: absolute;
    top:10px;
    left:10px;
    content:"";
    width: 20px;
    height: 3px;
    background-color: #FFF;
   	transition: .2s;}
  .Nav .navbtn a.open::before {top:19px;
    transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);}
  
  .Nav .navbtn a::after,
  .Nav .navbtn a.close::after {
    position: absolute;
    bottom:10px;
    left:10px;
    content:"";
    width: 20px;
    height: 3px;
    background-color: #FFF;
    transition: .2s;}
  .Nav .navbtn a.open::after {
    bottom:18px;
    transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);}}
@media screen and (max-width: 639px) {.Nav .navbtn a.open {}}
 
@media screen and (max-width: 639px) {
  .Nav .navbtn a span {display: block;
    					overflow: hidden;
    					width: 1px;
    					height: 1px;}
  .Nav .navbtn a span::after,
  .Nav .navbtn a.close span::after {position: absolute;
    					top:18px;
    					left:10px;
    					content:"";
    					width: 20px;
    					height: 3px;
    					background-color: #FFF;}
  .Nav .navbtn a.open span::after {display: none;}}
  
  
/*---リスト部分---*/
.Nav ul.close {display: none;
  		border-top: solid 1px #F5F4F0;}
/*◆*/.Nav > ul {float:right;
				/*margin-top:0px;
				margin:0 auto;
				max-width:1200px;
				background-color:#994135;*/}
@media screen and (max-width: 639px) {
  .Nav > ul {
    display: none;
    position: absolute;
    top: 65px;
    left: 0;
    right: 0;
    z-index: 9;
    background-color: #FFF;}}
    
    
    
    
.Nav > ul > li {position: relative;
  		font-size: 15px;
  		display: inline-block;}
  				
@media screen and (max-width: 639px) {
  .Nav > ul > li {display: block;
    			border-bottom: solid 1px #dddddd;}}
    				
    				
    				
.Nav > ul > li a {
  display: block;
  position: relative;
  text-decoration: none;
  padding: 12.5px;
  font-size: 15px;
  color: #000;
  background-color: #fff;
  z-index: 2;}



.Nav > ul > li.parent > a {padding-right:25px;}
.Nav > ul > li.parent > a::before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 6px;
    height: 6px;

    margin: -6px 0 0 0;
    border-top: solid 2px #00a0e9;
    border-right: solid 2px #00a0e9;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);}
    
@media screen and (max-width: 639px) {
	.Nav > ul > li.parent.open > a::before {
    	-webkit-transform: rotate(-45deg);
    	transform: rotate(-45deg);}}
@media screen and (max-width: 639px) {.Nav > ul > li.parent.open {border-bottom: none;}}


  .Nav > ul > li.parent.open > a{color: #FFF;}
  .Nav > ul > li.parent.open > a::after {background: #0078FF;
  											-webkit-transform: scale(1);
  											transform: scale(1);}
@media screen and (max-width: 639px) {.Nav > ul > li.parent.open > a {color: #FFF;}}
 
.Nav > ul > li a:hover {color: #fff;}
.Nav > ul > li a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';}

.Nav > ul > li a,
.Nav > ul > li a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;}

.Nav > ul > li a::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(.5);
  transform: scale(.5);}
.Nav > ul > li a:hover::after {
  background: #0078FF;
  -webkit-transform: scale(1);
  transform: scale(1);}
 
/* 2階層 */
.Nav > ul > li > ul {
  display: none;
  position: absolute;
  top: 53px;
  left: 0;
  width: auto;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9;}
 
@media screen and (max-width: 639px) {
  .Nav > ul > li > ul {background-color: #fbfbfb;
    					position: static;}}
 
.Nav > ul > li > ul li {white-space: nowrap;}
.Nav > ul > li > ul li a {position: relative;
  				padding: 12px 27px 12px 27px;}
@media screen and (max-width: 639px) {
  .Nav > ul > li > ul li a {border-bottom: solid 1px #dddddd;
    				background-color: #EEE;}}
.Nav > ul > li > ul li a::before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 6px;
    height: 6px;
    margin: -6px 0 0 0;
    border-top: solid 2px #00a0e9;
    border-right: solid 2px #00a0e9;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);}
/*.Nav > ul > li > ul li a:hover {text-decoration: underline;}*/
 
@media screen and (max-width: 639px) {.Nav > ul > li > ul li a:hover {background-color: #FFF;}}
 
.Nav > ul > li > ul li ul li a {padding-left: 42px;}
.Nav > ul > li > ul li ul li a::before {left: 20px;}




.Nav ul{ list-style-type: none;}




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