/*============================================================
   ESC日本語版　基本
  ============================================================ */
/*
toplayout.css
color:#4b4d4d
bgcolor:#f3f3f3
point color1:#459f92
#52998f


/*--------------------------------------------------
   SECOND
 --------------------------------------------------*/
.pr-policy, .contact, .service, .team, .recruit{
	font-size: 15px;
 width: 100%;
}


/*---- MOBILE ------*/
@media screen and (max-width: 600px) {
.pr-policy, .contact, .service, .team, .recruit{
 padding: 0 0 40px !important;
}
}

/*--------------------------------------------------
  SOCIAL RESPONSIBILITY
 --------------------------------------------------*/  

.matter-frame{
 width: 100%;
	height: auto;
	margin:40px 0;
	padding:30px 10px;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
}

.matter-frame li{
	margin:10px 0;
}

.solarpower{
 width: 100%;
	height: auto;
	padding:30px 0 10px;
	overflow: hidden;
} 

.pho-cap{
	font-size: 78%;
 text-align: left;
	margin-top: 0;
 padding: 0 1% 0;
	line-height: 1.4;
}


/*---- MOBILE ------*/

@media screen and (max-width: 1100px) {
.solarpower img{
	padding-top:25px;
} 
	
.pho-cap{
 padding: 0 1% 0.5%;
}
}


/*--------------------------------------------------
   OUR SERVICE
 --------------------------------------------------*/
/*---- SERVICE NAV ------*/
*, *:before, *:after {
box-sizing: border-box;
}
.col_5{
width: 100%;
display: flex;
flex-wrap: wrap;
margin:0px 0 40px;
padding-top:30px;
}
.col_5 > *{
width: calc( 20% - 18px );
margin-right: 18px;
margin-bottom: 18px;
}
.col_5 > *:nth-child(5n){
margin-right: auto;
}
@media only screen and (max-width: 1100px) {
.col_5 > *{
width: calc( 25% - 10px );
margin-right: 10px;
margin-bottom: 10px;
}
.col_5 > *:nth-child(5n){
margin-right: 10px;
}
.col_5 > *:nth-child(4n){
margin-right: auto;
}
}
@media screen and (max-width: 760px) {
.col_5 > *{
width: calc( 33.33333% - 8px ) ;
}
.col_5 > *:nth-child(5n){
margin-right: 10px;
}
.col_5 > *:nth-child(4n){
margin-right: 10px;
}
.col_5 > *:nth-child(3n){
margin-right: auto;
}
}
@media screen and (max-width: 600px) {
.col_5 > *{
width: calc( 50% - 10px ) ;
}
.col_5 > *:nth-child(5n){
margin-right: 10px;
}
.col_5 > *:nth-child(4n){
margin-right: 10px;
}
.col_5 > *:nth-child(3n){
margin-right: auto;
}
}

/* ---　BUTTOM 01 ---------*/
a.subnav-btn{
width: 100%;
display: inline-block;
padding: 0.7em 1.2em;
min-height: 120px !important;
text-decoration: none;
color:#fff;
font-size: 105%;
font-weight: 500;
background: #459f92;
line-height: 1.3;
letter-spacing: 0.07em;
margin:0.1em auto 0.6em;
border: #fff solid 1.6px;
border-radius: 15px;
transition:0.4s;
}

a.subnav-btn:hover{
color:#FFFFFF !important;
background: #1F4943  !important;
border: #2F6D64 solid 1.6px;
opacity: 0.8;
}
@media only screen and (max-width: 600px) {
a.subnav-btn{
width: 100%;
min-height: 100px !important;
font-size: 105%;
padding: 0.7em 1.0em;
text-decoration: none;
line-height: 1.3;
letter-spacing: 0.07em;
margin:0.1em auto 0.6em;
}
}


/* ---　BUTTOM 011---------*/
a.subnav-btn1{
width: 100%;
display: inline-block;
padding: 0.7em 1.2em;
min-height: 100px !important;
text-decoration: none;
color:#fff;
font-weight: 400;
background: #459f92;
line-height: 1.3;
letter-spacing: 0.07em;
margin:0.1em auto 0.6em;
border: #fff solid 1.6px;
border-radius: 15px;
transition:0.4s;
}

a.subnav-btn1:hover{
color:#FFFFFF !important;
background: #1F4943 !important;
border: #2F6D64 solid 1.6px;
opacity: 1.0;
}
@media only screen and (max-width: 600px) {
a.subnav-btn1{
width: 100%;
min-height: 100px !important;
font-size: 94%;
padding: 0.7em 1.0em;
text-decoration: none;
line-height: 1.3;
letter-spacing: 0.07em;
margin:0.1em auto 0.6em;
}
}

/* ---　BUTTOM 02 ---------*/
a.cat-btn{
width: 65%;
display: inline-block;
padding: 0.8em 1.0em;
text-decoration: none;
color:#459f92;
font-weight: 400;
background: #fff;
line-height: 1.3;
letter-spacing: 0.07em;
margin:50px auto -100%;
border: #459f92 solid 1.6px;
border-radius: 30px;
transition:0.4s;
}

a.subnav-btn:hover{
color:#FFFFFF !important;
background: #2F6D64 !important;
border: #2F6D64 solid 1.6px;
opacity: 1.0;
}
@media only screen and (max-width: 600px) {
a.cat-btn{
padding: 0.9em 1.2em;
text-decoration: none;
line-height: 1.3;
letter-spacing: 0.07em;
margin:50px auto -90%;
}
}

.service{
	margin-bottom: 50px !important;
}
@media only screen and (max-width: 600px) {
.service{
	margin-bottom: 0 !important;
}
}

/*-- 共通 --*/
.service01 h2, .service02 h2, .service03 h2, .service04 h2, .service05 h2 {
	position: absolute;
	color:#fff;
 font-size: 2.0rem;
	font-weight:500;
	background: #459f92;
	padding:10px 32px 10px 30px;
 letter-spacing:0.13rem;
 bottom: -10px;
 left: 20px;
	}
@media only screen and (max-width: 600px) {
	.service01 h2, .service02 h2, .service03 h2, .service04 h2, .service05 h2 {
 font-size: 1.6rem;
	padding:10px 20px;
 bottom: 0px;
 left: 20px;
}
}

.service01:before, .service02:before, .service03:before, .service04:befores, .service05:before {
 content: "";
 display: block;
 height: 80px; /* 調整したい高さ（固定ヘッダーの高さ） */
 margin-top: -80px; /* heightと同じ分のネガティブマージン */
 visibility: hidden;
}
.service-tx{
	margin: 0 ;
	padding:40px 54px 50px;
	background: #fff;
	border-radius: 30px;
}
.service-tx ul{
	padding-left: 30px !important;
	}
.service-tx li{
	list-style: disc !important;
	padding:5px 0 !important;
	line-height: 1.4;
	}
	
@media only screen and (max-width: 600px) {
.service-tx{
	margin: 0 ;
	padding:30px 28px 50px;
	background: #fff;
	border-radius: 30px;
}
.service-tx ul{
	padding-left: 25px !important;
	}
.service-tx li{
	list-style: disc !important;
	padding:5px 0 !important;
	line-height: 1.4;
	}
	}

/* TOP OUR SERVICE
--------------------------------------------------------*/
.top-service {
clear: both;
width: 100%;
height: auto;
padding: 0 0 60px;
background: url("../img/index/map02.png") no-repeat left top;
}

.top-service-inner {
background:#fff;
height: auto;
padding:36px 26px 20px 26px;
border-radius: 30px;
text-align: left;
overflow: hidden;
}

/*---- MOBILE ------*/
@media (max-width: 992px){
.top-service {
background: url("../img/index/map022.png") no-repeat left top;
}
.top-service-inner {
padding:28px 4px 15px 4px;
}
}

.category{
position: relative;
padding-top: 10px;
}
.category h3{
 position: absolute;
	font-size: 200%;
 left: 50%;
 top: 20%;
	padding-bottom:20px;
 transform: translate(-50%,-25%);
 height: auto;
 color: #fff;
 }
.category h3 img{
 min-width: 230px;
 }
.category .btn-w{
	min-width: 230px;
	font-size: 70% !important;
 position: absolute;
 left: 50%;
 bottom: 5%;
 transform: translate(-50%,-70%);
 height: auto;
 color: #fff;
  }


/*---- MOBILE ------*/
@media (max-width: 600px){
.category h3{
 position: absolute;
 left: 50%;
 top: 30%;
 transform: translate(-50%,-30%);
 }
	.category h3 img{
 min-width: 400px;
 }
.category .btn-w{
 position: absolute;
 left: 50%;
 bottom: 10%;
 transform: translate(-50%,-30%);
 height: auto;
 color: #fff;
}
}



.ph-text{
	font-size: 92% !important;
	line-hight: 90% !important;
}		
/*---- MOBILE ------*/
@media (max-width: 1120px){
	.ph-text{
		margin: 5px auto 20px;
}		
}	

/*-- 001 --*/
.service01{
position: relative;
height:400px;
border-radius: 30px;
margin-bottom: 0;
background-image: url("../img/service/01architecture.jpg");
background-size: cover;
}

/*-- 002 --*/
.service02{
margin-top:70px;
position: relative;
height:400px;
border-radius: 30px;
margin-bottom: 0;
background-image: url("../img/service/02geotechnical.jpg");
background-position: center top;
background-size: cover;
}

/*-- 003 --*/
.service03{
margin-top:70px;
position: relative;
height:400px;
border-radius: 30px;
margin-bottom: 0;
background-image: url("../img/service/03topographic.jpg");
background-position: center top;
background-size: cover;
}

/*-- 004 -*/
.service04{
margin-top:70px;
position: relative;
height:400px;
border-radius: 30px;
margin-bottom: 0;
background-image: url("../img/service/04inspection.jpg");
background-size: cover;
background-position: center;
}


/*-- 005 -*/
.service05{
margin-top:70px;
position: relative;
height:400px;
border-radius: 30px;
margin-bottom: 0;
background-image: url("../img/service/05environmental.jpg");
background-size: cover;
background-position: center;
}



/*--------------------------------------------------
   TEAM
 --------------------------------------------------*/
	.pad00{
	margin:0 -20px 25px;
	}

.pad0{
	margin:0 -20px;
	overflow: hidden;
	}
	
.person-frame{
 width: auto;
	height: auto;
 margin:20px 0 0;
	padding:28px 30px 20px;
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
}
@media only screen and (max-width: 992px) {
.person-frame{
	margin:20px 0 0;
	padding:25px 20px 20px;
}
}
@media only screen and (max-width: 700px) {
.person-frame{
	margin:20px 0 0;
	padding:20px 18px 20px;
}
}
@media only screen and (max-width:600px) {
.person-frame{
	margin:20px 0 20px;
	padding:25px 14px 30px;
}
}

	
.person-box img{
width: 52%;
float:left;
margin-right: 20px;
margin-bottom: 5px;
}

@media only screen and (max-width:992px) {
.person-box img{
float:none;
width: 90%;
display: block;
margin:5px auto 10px;
}
}

	
.row .executive{
width: 100%;
margin:20px auto 20px; 
}

.executive{
margin:20px -10px 20px; 
}
.executive .col.l3 {
	padding: 0 0.8rem;  /*--Grid間のスペース--*/
}

@media only screen and (max-width: 992px) {
.executive .col.l3 {
	padding: 0 1.3rem;  /*--Grid間のスペース--*/
}
}
@media only screen and (max-width:600px) {
.executive .col.l3 {
	padding: 0 0.8rem;  /*--Grid間のスペース--*/
}
}

.person-frame2{
 width: 100%;
	margin:30px 0 10px; 
	padding:24px 15px 10px;
	background: #fff;
	border-radius: 20px;
}
@media only screen and (max-width:600px) {
.person-frame2{
	margin:20px 0 20px; 
	padding:28px 20px 3px !important;
}
}	

.team-text1 p{
	/*-- font-family: "Times New Roman", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;--*/
	font-size:0.98em !important;
	line-height: 180%;
	margin-top:0;
margin:15px 1px 0px 4px;
 }
	.team-text2 p{
	/*-- font-family: "Times New Roman", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;--*/
	font-size:0.98em !important;
	line-height: 160%;
	margin-top:0;
margin:15px 1px 0px 4px;
 }

@media only screen and (max-width:600px) {
.team-text1 p{
	font-size:0.96em !important;
 padding:15px 18px 5px!important;
}
.team-text2 p{
	font-size:0.96em !important;
 padding:15px 18px 5px!important;
}
}

.position{
font-size: 110%;
padding-top:40px !important;
text-align: right;
}
@media only screen and (max-width: 992px) {
.position{
padding-top:15px;
text-align: right;
}
}

.name{
font-family: "Times New Roman", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
font-size: 112%;
margin-top:-6px;
line-height: 120%;
text-align: center;
}

.position2{
font-family: "Times New Roman", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
font-weight: 200 !important;
font-size: 99%;
margin-top: 13px;
line-height: 120%;
text-align: center;
}
@media only screen and (max-width: 992px) {
.position2{
font-size: 98%;
margin-top: 10px;
text-align: center;
}
}
@media only screen and (max-width: 600px) {
.position2{
font-size: 99%;
margin: 10px;
text-align: center;
}
}

.position3{
font-family: "Times New Roman", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
font-size: 98%;
margin-top: 0;
padding-bottom:10px;
line-height: 160%;
text-align: right;
}
@media only screen and (max-width: 992px) {
.position3{
font-size: 98%;
margin-top: 5px;
text-align: right;
}
}
@media only screen and (max-width: 600px) {
.position3{
margin-bottom: 0;
}
}	
	
.staff-name{
font-family:  "Times New Roman", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
margin-top:5px;
padding-bottom:18px;
line-height: 120%;
text-align: center !important;
}
@media only screen and (max-width: 992px) {
.staff-name{
font-size: 96%;
}
}
	
	
/*--------------------------------------------------
  CONTACT
 --------------------------------------------------*/
.contact .col.xl3 {
	padding: 0 0.9rem;  /*--Grid間のスペース--*/
}
.contact .row {
 margin-left: -1.3rem;
 margin-right: -1.3rem;
}
.contact .col {
 margin-left: -0.2rem;
 margin-right: -0.2rem;
}
.office-frame{
 width: 100%;
	height: auto;
	margin:30px 0;
	padding:26px 22px 26px;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
}
@media only screen and (max-width: 992px) {
.office-frame{
	margin:15px auto -10px !important;
	padding:30px 25px 30px;
}
}
@media only screen and (max-width: 600px) {
.office-frame{
	margin:10px auto 10px !important;
	padding:30px 25px 40px;
}
}

.office-frame p{
 font-size: 0.9rem;
	line-height: 1.6;
	letter-spacing:0.05rem;
	text-align: left;
}
@media only screen and (max-width: 992px) {
.office-frame p{
 font-size: 0.96rem;
 padding-left: 6px; 
	letter-spacing:0.06rem;
	text-align: left;
}
}
	
.phonemail{
 font-size: 0.88rem !important;
	font-weight: 500;
	line-height: 2.0;
 letter-spacing:0.05rem;
	text-align: left;
}

.phonemail a:hover{
	color:#459f92 !important;
}
@media only screen and (max-width: 992px) {
.phonemail{
 font-size: 1.1rem !important;
}
}
@media only screen and (max-width: 600px) {
.phonemail{
 font-size: 1.0rem !important;
}
}
/*---- MAP ----*/	
.map{
  position: relative;
	 width: 100%;
  padding-bottom: 60%; /*縦横比*/ 
  height: 100% !important;
  overflow: hidden;
  margin:0 auto;				 
}
.map iframe { 
  position: absolute;
  top: 0;
  left: 0;
	 margin: 20px auto 0;
}
@media (max-width: 767px) {
.map {
		width: 100% !important;
  height: 120% !important;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 70%; /*縦横比*/
}
}

/* CONTACT BANNER
------------------------------------------------*/
.contact-banner{
max-width: 480px;
margin:15px auto 60px;
padding:20px 20px 10px 10px;
color: #fff;
background-color: #459f92;
text-align: left;
border-radius: 25px; 
}

.btn_rou {
 width: 58px;
	height: auto;
	font-size:110% !important;
	background: #FFF;
	border: 1px solid #fff;
	-moz-border-radius: 58px;
	-webkit-border-radius: 58px;
 border-radius: 58px;
	color: #2a82a3;
	padding: 20px 0;
	margin:15px 8px 10px;
	display: block;
	text-align: center;
	font-weight: bold;
	line-height: 50% !important;
	}
	
.btn_rou:hover {
	background: #498980;
	color: #FFF;
	border: 1px solid #FFF;
}
.no-wrap {
 white-space: nowrap;
}

/*---- MOBILE ------*/
@media (min-width: 768px)and (max-width: 902px) { 
.contact-banner{
max-width: 80%;
margin:50px auto 40px !important;
padding:15px 0px 10px !important;
}
}	
/*---- MOBILE ------*/
@media (max-width: 767px){
.contact-banner{
max-width: 90% !important;
margin:-10px auto 40px !important;
padding:5px 0 5px;
}
.btn_rou {
 width: 47px;
	height: auto;
	font-size:98% !important;
	-moz-border-radius: 47px;
	-webkit-border-radius: 47px;
	border-radius: 47px;
	margin:20px 0 10px;
	padding: 17px 0;
}
.contact-banner .col.s7 {
	padding: 0 0 0 1.9em;  /*--Grid間のスペース--*/
}

}

/*--------------------------------------------------
   RECRUIT
 --------------------------------------------------*/
.recruit .row {
 margin-left: -1rem;
 margin-right: -1rem;
}
.recruit .col {
 margin-left: -1rem;
 margin-right: -1rem;
}
.recruit ul{
margin:0 10px 20px 40px;
}
.recruit ul li{
list-style: disc;
margin:0 10px 10px;
}
.recruit a{
	text-decoration: underline;
}
.recruit a:hover{
	color: #459f92;
}

/*--------------------------------------------------
   PRIVACY POLICY
 --------------------------------------------------*/  
.pr-policy p{
	margin: 20px 4px;
	}
	
	.attribute {
	font-size: 17px;
	font-weight: 600;
 margin:25px 0 -10px !important;
}
.attribute:before {
	font-size: 70%;
	content:'●';
}