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

.sp { display: block; }
.pc{ display: none;}



.header{height: 75px;}


/*--------------------main-wrap------------------------*/

.main-wrap{
	padding: 0 30px;
	
}

.top-title{
	margin-top: 75px;
	padding:30px 0 30px 0;
	text-align: center;
}







/*--------------------top------------------------*/

.top-image-area{
	position: relative;
	margin-top: 75px;
	height: 100vh;
}


.top-wrap01{
	padding: 10px 20px;
	display: block;
	margin: 50px auto;
}
.top-wrap01::before{
	content: "";
	position: absolute;
	z-index: -1;
	height: 35px;
	width: calc(100% - 50% - 76px);
	background-color: #98BE69;
	top: auto;
	bottom: 0px;
	left: 0;
}

.top-wrap01::after{
	content: "";
	position: absolute;
	z-index: -1;
	height: 35px;
	width: calc(100% - 50% - 76px);
	background-color: #98BE69;
	top: auto;
	bottom: clamp(4.375rem, -0.331rem + 23.53vw, 14.375rem);/*70-230*/
	right: 0;
}

.top-wrap01-r{
	position: relative;
	opacity: 0;
	max-width: 100%;
	margin-top: 50px;
}





.top-wrap02{
	max-width: 100%;
	display: block;
}


.top-wrap02-base{
		background-position: center left 10%;
	}






.top-wrap03-base{
	margin: 50px auto 0px auto;
	padding: 50px 0 0 0;
}

.top-wrap03-base::before{
	content: "";
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 85%;
	background-color: #F5F5F5;
	top: 15%;
	left: 0;
	bottom: auto;
}

.top-wrap03{
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column-reverse;
}


.top-wrap03-r{
	text-align: center;
	padding: 0 0px 30px 0;
}

.top-wrap03-l{
	max-width: 100%;
}





.top-wrap04{
	max-width: 100%;
	margin: 50px auto;
	padding: 0 30px;
}


.news-wrap.top-news-wrap li{
	flex-wrap: wrap;
	text-align: left;
}






a.more-button.top-mail-button{
	padding: 10px 110px 10px 45px;
}

.top-wrap05-base{
	padding: 50px 30px 50px 30px;
}
















/*--------------------Q&A------------------------*/

.qanda-main-title-area{
	padding-top: 0px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

.qanda-main-title-area div:last-of-type{
	margin: 0 auto;
}




.main-green-back{
	background-color: var(--green03);
}

.qa-head-title{
	position: relative;
	display: flex;
	flex-direction: column-reverse;
	margin: 20px auto 0px auto;
	z-index: 1;
}


.qa-head-title div{
	position: static;
	margin: 0 auto;
}

.qa-head-title.concrete div,
.qa-head-title.ground div,
.qa-head-title.cement div,
.qa-head-title.repair div,
.qa-head-title.reference div{
	max-width: 100px;
}


.qa-content-wrap{
	padding: 40px 20px 40px 20px;
	margin-bottom: 30px;
}

.qa-content-wrap dt{
	padding: 5px 0px 35px 100px;
	text-indent: -2.2em;
}

.qa-content-wrap dt::before{
	width: 40px;
	height: 40px;
	top: 0;
	left: 0;
}

.qa-content-wrap dd{
	padding: 0 0 0 0px;
	column-gap: 20px;
}

.a-icon{
	width: 40px;
	height: 40px;
}


/*各画像*/

#qa-con-07 .a-img{
	display: block;
}
#qa-con-07 .a-img div:first-of-type{
	margin-bottom: 20px;
}

#qa-con-21 .a-img{
	display: block;
}
#qa-con-21 .a-img div:first-of-type{
	margin-bottom: 20px;
}

#qa-con-22 .a-img{
	display: block;
}
#qa-con-22 .a-img div:first-of-type{
	margin-bottom: 20px;
}




#qa-gro-17 .a-img{
	display: block;
}
#qa-gro-17 .a-img div:first-of-type{
	margin-bottom: 20px;
}

#qa-gro-20 .a-img{
	display: block;
}
#qa-gro-20 .a-img div:first-of-type{
	margin-bottom: 20px;
}

#qa-gro-24 .a-img{
	display: block;
}
#qa-gro-24 .a-img div:first-of-type{
	margin-bottom: 20px;
}












/*--------------------company------------------------*/
.company-back{
	 background-image: linear-gradient(90deg, rgba(255, 255, 255,  1) 0%, rgba(255, 255, 255, 1) 0% 50%, rgba(255, 255, 255, 1) 50%);
}

.company-main-wrap{
	position: static;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

.company-left-wrap{
	position: static;
	z-index: 2;
	height: auto;
	width: 100%;
	background-color: #F4F4F4;
	box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, 0.16);
	padding: 30px 10px 20px 10px;
	margin: 0;
}

.company-left-wrap ul{
	display: flex;
	justify-content: center;
	column-gap: 5px;
	flex-wrap: wrap;
}

.company-left-wrap li a{
	font-size: 15px;
	margin-bottom: 10px;
	background-color: #fff;
	border-radius: 5px;
	padding: 8px 0 ;
	width: 105px;
	text-align: center;
	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.16);
	letter-spacing: 0em;
}

.company-left-wrap li a.mark{
	color:#fff;
	background-color:  var(--green);
}


.company-right-wrap{
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 50px;
}


.company-right-wrap dl{
	position: relative;
	display: block;
}

.company-right-wrap dt{
	width: 100%;
	padding: 20px 0 ;
}

.company-right-wrap dd{
	flex: 1;
	padding: 0px 0 20px 0px;
}


.company-histry dd{
	display: block;
}

.company-histry dd:first-of-type p:first-of-type{
	border-top: 1px solid #EDEDEB;
}

.company-histry dd p:first-of-type{
	width: 100%;
	border-bottom: 1px solid #EDEDEB;
	padding: 5px 0;
}

.company-histry dd p:last-of-type{
	padding-left: 0px;
	padding: 15px 0 30px 0;
}





/*office*/
.company-office-wrap{
	display: block;
	padding: 20px 0px;
}

.office-name{
	font-size: 20px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	margin-top: 20px;
}

.company-office-item-wrap div{
	padding-left: 0px;
	padding-bottom: 20px;
}

.office-text{
	margin-bottom: 15px;
}






























/*--------------------service------------------------*/

.service-top-area::before{
	background-color: #fff;
}

.service-top-left{	
	width: 100%;
	padding: 10px 29px 0 29px;
}


.service-main-area{
	display: block;
	margin-top: 50px;
}

.service-main-l{
	width: 100%;
	margin-bottom: 20px;
}


.service-main-mail{
	display: block;
	border-left: 0px solid var(--cem);
	border-top: 20px solid var(--cem);
	padding: 30px 15px 50px 15px;
	margin: 50px auto;
}

.service-main-mail p{
	font-size: 18px;
	margin-bottom: 20px;
	padding: 0 20px;
	text-align: justify;
}

.service-text{
	margin-bottom: 20px;
}



/*各ページ*/

/*concrete*/

.service-con-wrap02{
	display: block;
	margin-bottom: 40px;
}

.service-con-wrap02 div{
	width: 100%;
}

.service-con-wrap02 div img{
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16);
}

.service-con-wrap03{
	display: block;
	margin-bottom: 20px;
}

.service-con-wrap03 ul{
	padding: 0 0px;
}

.service-con-wrap03 ul:nth-of-type(2){
	border-left: 0px solid #707070;
	border-right: 0px solid #707070;
}






/*--------------------採用情報------------------------*/

.main-wrap.recruit {
	height: auto;
}





/*--------------------policy------------------------*/

.policy{
	margin-top: 75px; 
}



/*--------------------news------------------------*/
.main-wrap.news{
	padding: 50px 30px;
}