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

*{
	box-sizing: border-box;
	font-family: 'Noto Sans JP', sans-serif;
}

html {
  scroll-behavior: smooth;
}


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
div,th,td{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;}

h1,h2,h3,h4,h5,h6{font-size:100%;}

img{
	width: 100%;
}


.sp { display: none; }


:root{
	--green:#7BBD34;
	--green02:#5E8D4D;/*dark-green*/
	--green03:#E8F2DC;/*light-green*/
	--blue:#192F60;
	
	--cem:#006190;
	--con:#37A4A4;
	--gro:#CC8530;
	--rep:#5E8D4D;
	--other:#5F7894;
	--oil:#998CB5;
}





/*--------------------------------header--------------------------------*/


header{
	position: fixed;
	top: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	padding-left: 40px;
	padding-right: 20px;
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
	z-index: 3;
}

.header-logo{
	display: block;
	max-width: 225px;
}

.header-logo img{
	width: 100%;
}


/*-----pc-nav-----*/
.pc-nav{
	background: #fff;
	text-align: center;
}

.pc-nav ul{
	display: flex;
	justify-content: center;
	align-items: center;
}


.pc-nav ul ul{
	display: block;
}

.pc-nav ul li{
	position: relative;
}

.pc-nav ul li a{
	display: block;
	color: var(--blue);
	padding: 30px 15px;
	transition: all .5s;
	font-size: 16px;
	font-weight: 500;
}

.pc-nav ul li a:hover{
	color: var(--green);
}


.pc-nav ul li li a{
	padding: 5px 15px;
}

.pc-nav li.has-child ul li a{
	color: #fff;
	background-color: var(--green);
	font-size: 14px;
	font-weight: 400;
}

.pc-nav li.has-child ul li a:hover,
.pc-nav li.has-child ul li a:active{
	background-color: var(--blue);
}


.pc-nav li.has-child ul{
	position: absolute;
	left: 0;
	top: 80px;
	z-index: 4;
	background-color: var(--green);
	width: 120px;
	visibility: hidden;
	opacity: 0;
	transition: all .5s;
	text-align: left;
}

.pc-nav li.long ul{
	width: 160px;
}


.pc-nav li.has-child:hover > ul{
	visibility: visible;
	opacity: 1;
}


.pc-mail-button a p{
	position: relative;
	background-color: var(--green);
	padding: 15px 20px 15px 55px;
	border-radius: 10px;
	transition: all .5s;
}

.pc-mail-button a p::before{
	content: "";
	position: absolute;
	width: 30px;
	height: 20px;
	background-image: url("../img/mail-icon.png");
	background-repeat: no-repeat;
	background-size: cover;
	top: 18px;
	left: 20px;
}

.pc-nav li.pc-mail-button a{
	color: #fff;
}

.pc-nav li.pc-mail-button a:hover{
	color: #fff;
}

.pc-nav li.pc-mail-button a:hover p{
	background-color: var(--blue);
}







/*-----sp-nav-----*/

.sp-header-logo{
	position: fixed;
	top: 0;
	background-color: #fff;
	z-index: 5;
	width: 100%;
	padding: 15px 0 20px 20px;
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}

.sp-header-logo a{
	display: block;
	width: 200px;
}

.sp-header-logo a img{
	width: 100%;
}

#g-nav{
    position:fixed;
    z-index: 999;
	top:0;
    right: -120%;
	width:100%;
    height: 100vh;
	background:rgba(255,255,255,1);
	transition: all 0.6s;
}


#g-nav.panelactive{
    right: 0;
}

#g-nav.panelactive #g-nav-list{
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul.g-nav-wrap {
    position: absolute;
    z-index: 999;
	width: 100%;
	padding: 100px 0 50px 0;
}


#g-nav li{
    text-align: center;
}

#g-nav li a{
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;
	top:10px;
	right: 10px;
	cursor: pointer;
    width: 50px;
    height:50px;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #666;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.openbtn p{
	position: absolute;
	top: 30px;
	left: 8px;
	font-size: 12px;
}



.sp-nav-title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
	font-weight: 600;
    font-weight: normal;
    padding: 20px 10px;
    transition: all .5s ease;
	color: #000;
	border-top: 1px solid var(--green);
}

.box{
	
}


.box li a{
	font-size: 0.8em;
	font-weight: 700;
	padding: 5px 0;
	color: var(--blue);
	border-top: 1px dashed rgba(123,189,52,0.3);
}


/*アイコンの＋と×*/
.sp-nav-title:not(.not-child)::before,
.sp-nav-title:not(.not-child)::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: var(--green);
    
}
.sp-nav-title::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);
    
}
.sp-nav-title::after{    
    top:48%;
    left: 15px;
    transform: rotate(90deg);
}

/*　closeというクラスがついたら形状変化　*/
.sp-nav-title.close::before{
	transform: rotate(45deg);
}

.sp-nav-title.close::after{
	transform: rotate(-45deg);
}


.sp-mail-button a{
	display: inline-block;
	margin-top: 10px;
	background-color: var(--green);
	padding: 20px;
	color: #fff;
}


.box {
    display: none;
}































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

.main-wrap{
	max-width: 1200px;
	margin: 0 auto;
	
	container-type: inline-size;
	container-name: main-container;/*コンテナ*/
	
}

.top-title{
	margin-top: 117px;
	width: 100%;
	padding:50px 0 50px 0;
	text-align: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.top-title.qanda-title{
	background-image: url("../img/qanda/title_qanda.png");
}
.top-title.company-title{
	background-image: url("../img/company/title_company.png");
}
.service-title{
	background-image: url("../img/service/title-service.png");
}
.news-title{
	background-image: url("../img/news/title_news.png");
}
.recruit-title{
	background-image: url("../img/recruitment/title_recruit.png");
}

.contact-title{
	background-image: url("../img/contact/title_company.png");
}





.top-title p:first-of-type{
	font-family: "Lato", sans-serif;
	font-weight: 500;
	font-size: 50px;/*40-50*/
	color: #fff;
	margin-bottom: clamp(0.625rem, 0.112rem + 2.56vw, 1.875rem);/*10-30*/
}

.top-title p:last-of-type{
	font-size: clamp(0.875rem, 0.465rem + 2.05vw, 1.875rem);/*14-30*/
	color: #fff;
}

.main-title-area{
	margin-bottom: 20px;
}

.main-title-area h1{
	position: relative;
	font-weight: 500;
	font-size: clamp(1.25rem, 1.045rem + 1.03vw, 1.75rem);/*20-28*/
	letter-spacing: 0.2em;
	padding-left: 50px;
	margin-bottom: clamp(1.25rem, 0.737rem + 2.56vw, 2.5rem);/*20-40*/
	margin-top: 30px;
}

.main-title-area h1::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0px;
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 8px solid var(--green);
}

.main-title-area p{
	font-size: 15px;
	line-height: 2em;
}














/*-------------------- toppage ------------------------*/

.top-image-area{
	position: relative;
	margin-top: 117px;
	height: 750px;
	overflow: hidden;
	background: #ECFDFF;
}
.top-image-item{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1; /* 初期は非表示 */
	transform: scale(1.25); 
	transition: all; 
	animation: slideAnimation 60s infinite; 
}

.top-image-item img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}


@keyframes slideAnimation {
 0% {
    opacity: 0;
    transform: scale(1.5);
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

.top-text-wrap{
	position: absolute;
	z-index: 2;
	display: block;
	text-align: center;
	width: 100%;
	top: 60%;
	transform: translateY(-70%);
}

.top-text-wrap::after{
	content: "";
	position: absolute;
	width: clamp(12.5rem, 10rem + 12.5vw, 19.375rem);/*200-310*/
	height: clamp(12.5rem, 10rem + 12.5vw, 19.375rem);
	background-color: rgba(110,163,41,0.7);
	z-index: -1;
	top: -30%;
	left: 50%;
	transform: translateX(-50%);
}

.top-text-wrap h1{
	font-size: clamp(1.25rem, 0.341rem + 4.55vw, 3.75rem);/*20-60*/
	font-weight: 700;
	color: #fff;
	line-height: 2em;
}




.glowAnime span{opacity: 0;}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ animation:glow_anime_on 1s ease-out forwards; }

@keyframes glow_anime_on{
	0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
	50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
	100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}



.top-text-wrap p:first-of-type{
	font-size: clamp(0.625rem, 0.17rem + 2.27vw, 1.875rem);/*10-30*/
	font-weight: 600;
	color: #fff;
}

.top-text-wrap p:last-of-type{
	font-size: clamp(0.625rem, 0.58rem + 0.23vw, 0.75rem);/*10-12*/
	font-weight: 600;
	color: #fff;
	margin-top: 0px;
}


.arrow {
  position: relative;
  display: inline-block;
  width: 1px;
  height: 20px;
  margin: clamp(1.875rem, 1.761rem + 0.57vw, 2.188rem) auto 0px auto;/*30-35*/
  border-radius: 9999px;
  background-color: #ffffff;
	animation: scroll 5s infinite;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  height: 5px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform-origin: 50% calc(100% - 0.5px);
}

.arrow::before {
  transform: rotate(45deg);
}

.arrow::after {
  transform: rotate(-45deg);
}



/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
}




.top-wrap01{
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 20px 0;
	display: flex;
	justify-content: center;
	column-gap: 30px;
	margin: 50px auto;
}
.top-wrap01::before{
	content: "";
	position: absolute;
	z-index: -1;
	height: 285px;
	width: calc(100% - 50% - 400px);
	background-color: #98BE69;
	top: 120px;
	right: 0;
}



.top-wrap01-l{
	max-width: 740px;
}

.top-wrap01-l p:first-of-type{
	font-size: clamp(1.125rem, 0.852rem + 1.36vw, 1.875rem);/*18-30*/
	color: #09397F;
	font-family: 'Noto Serif JP', sans-serif;
	line-height: 2em;
	margin-bottom: 50px;
	opacity: 0;
	text-align: justify;
}

.top-wrap01-l p:last-of-type{
	font-size: 16px;/**/
	font-weight: 400;
	line-height: 2em;
	opacity: 0;
	text-align: justify;
}

.top-wrap01-r{
	opacity: 0;
	max-width: 530px;
}



/*フェードアップアニメーション*/
.fadeUpTrigger,
.fadeUpTrigger02{
opacity: 0;
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(200px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}


.fadeUp02 {
    animation-name: fadeUpAnime02;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime02{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}










.top-wrap02-base{
	background-image: url("../img/top/top-02.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: clamp(2.813rem, 2.472rem + 1.7vw, 3.75rem) 20px;	/*45-60*/
	
	container: top-wrap02-base-container / inline-size;
}



.top-wrap02{
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.top-wrap02-l{
	text-align: center;
	padding: 0 70px;
	 
}


/*TOPタイトル*/
.top-title01{
	text-align: center;
	font-size: clamp(1.875rem, 1.42rem + 2.27vw, 3.125rem);/*30-50*/
	font-weight: 500;
	font-family: "Lato", sans-serif;
	letter-spacing: 0.05em;
	color: var(--green);
	margin-bottom: clamp(0.625rem, 0.17rem + 2.27vw, 1.875rem);/*10-30*/
}

.top-title02{
	text-align: center;
	font-size: clamp(0.938rem, 0.778rem + 0.8vw, 1.375rem);/*15-22*/
	font-weight: 500;
	letter-spacing: 0.2em;
}



.top-wrap02-r ul{
	display: flex;
	justify-content: space-between;
	column-gap: 40px;
	margin-top: 35px;/*0-35*/
}
@container top-wrap02-base-container (max-width:830px){
	.top-wrap02-r ul{
		flex-wrap: wrap;
		flex-direction: column;
		grid-gap: 20px;
	}	
}




.top-wrap02-r ul li{
	position: relative;
	background-color: #fff;
	width: 230px;
	height: clamp(5.938rem, 2.869rem + 15.34vw, 14.375rem);/*95-230*/
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
    transition: 2s;
	margin: auto;
}

.top-wrap02-r ul li::before{
	content: "";
	position: absolute;
	border: 2px solid var(--green);
	width: 195px;
	height: clamp(4.063rem, 1.108rem + 14.77vw, 12.188rem);/*65-195*/
}

.top-wrap02-r ul li::after{
	content: "";
	position: absolute;
	width: 195px;
	height: clamp(4.063rem, 1.108rem + 14.77vw, 12.188rem);
	background-image: linear-gradient(317deg,var(--green) 30px,transparent 0);
}


.top-wrap02-r a{
	transition: all 0.3s;
}
.top-wrap02-r a:hover{
	transform: translateY(10px);
}



.top-wrap02-r p{
	display: block;
	font-size: clamp(1rem, 0.864rem + 0.68vw, 1.375rem);/*16-22*/
	letter-spacing: 0.2em;
	text-align: center;
	line-height: 1.2em;
}

.top-wrap02-r p span{
	font-size: 11px;
	color: var(--green);
	font-family: "Lato", sans-serif;
	letter-spacing: 0em;
}







.top-wrap03-base{
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 100px auto 0px auto;
	padding: 50px 0;
}

.top-wrap03-base::before{
	content: "";
	position: absolute;
	z-index: -1;
	width: calc(100% - 50% + 600px);
	height: 480px;
	background-color: #F5F5F5;
	left: 0;
	bottom: 0;
}

.top-wrap03{
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.top-wrap03-l{
	max-width: 656px;
}

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

.top-wrap03-r ul{
	margin-top: 90px;
}

.top-wrap03-r ul li a{
	display: block;
	font-size: 20px;
	font-weight: 400;
	margin-bottom: 30px;
	transition: all .5s;
}

.top-wrap03-r ul li a:hover{
	color: var(--green);
}





/*more-button*/
a.more-button{
	position: relative;
	display: inline-block;
	background: #708393;
	font-size: 14px;
	color: #fff;
	padding: 10px 170px 10px 15px;
	border: 1px solid #fff;
}

a.more-button::before{
	content: "";
	position: absolute;
	top: 53%;
	right: 20px;
	width: 10px;
	height: 1px;
	border-radius: 9999px;
	background-color: #ffffff;
	transform: rotate(45deg);
	transform-origin: calc(100% - 0.5px) 50%;
	transition: all .3s;
}

a.more-button::after{
	content: "";
	position: absolute;
	width: 35px;
	height: 1px;
	margin-top: 6.4px;
	border-radius: 9999px;
	background-color: #ffffff;
	top: 40%;
	right: 20px;
	transition: all .3s;
}

a.more-button:hover::before{
	right: 10px;
}
a.more-button:hover::after{
	right: 10px;
}

a.more-button.top-mail-button{
	padding: 10px 170px 10px 45px;
}
a.more-button.top-mail-button p::before{
	content: "";
	position: absolute;
	width: 20px;
	height: 15px;
	background: url("../img/top/top-mail-icon-w.png") no-repeat center /cover;
	top: 36%;
	left: 15px;
}






.top-wrap04{
	max-width: 1200px;
	margin: 100px auto;
	text-align: center;
}


.news-wrap.top-news-wrap{
	height: 200px;
	overflow-y: scroll;
	margin: 50px 0;
}



.top-wrap05-base{
	background: url("../img/top/top-04.png") no-repeat center center /cover;
	text-align: center;
	padding: 100px 0 70px 0;
}

.top-wrap05-base .top-title01,
.top-wrap05-base .top-title02{
	color: #fff;
}

.top-wrap05-base p:nth-of-type(3){
	font-size: clamp(0.938rem, 0.869rem + 0.34vw, 1.125rem);/*15-18*/
	color: #fff;
	margin: 50px auto 25px auto;
}








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


.qanda-main-title-area{
	padding-top: 65px;
	display: flex;
	justify-content: space-between;
}

.qanda-main-title-area div:first-of-type{
	flex: 1;
}

.qanda-main-title-area div:last-of-type{
	max-width: clamp(11.25rem, 9.968rem + 6.41vw, 14.375rem);/*180-230*/
}

.qanda-main-title-area div:last-of-type img{
	width: 100%;
}



.qa-wrap{
	display: flex;
	justify-content: space-between;
	column-gap: 35px;
	margin-bottom: 40px;	
}


.qa-wrap dl{
	flex: 1;
	border-radius: 15px;
	padding: 23px 40px;
	background-color: #fff;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}

.qa-wrap dt h2{
	position: relative;
	color: var(--green02);
	font-weight: 700;
	font-size: clamp(1.125rem, 1.022rem + 0.51vw, 1.375rem);/*18-22*/
	letter-spacing: 0.06em;
	padding-top: clamp(0.563rem, 0.28rem + 1.41vw, 1.25rem);/*9-20*/
	padding-left: clamp(3.125rem, 1.843rem + 6.41vw, 6.25rem);/*50-100*/
	padding-bottom: 50px;
}

.qa-wrap dt h2::after{
	content: "";
	position: absolute;
	top: clamp(2.5rem, 1.987rem + 2.56vw, 3.75rem);/*40-60*/
	left: clamp(3.125rem, 1.843rem + 6.41vw, 6.25rem);/*50-100*/
	width: 50px;
	height: 5px;
	background-color: var(--green02);
}

.qa-wrap dt h2::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: clamp(2.5rem, 1.526rem + 4.87vw, 4.875rem);/*40-78*/
	height: clamp(2.5rem, 1.526rem + 4.87vw, 4.875rem);/*40-78*/
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}

.qa-wrap .qa-con dt h2::before{
	background-image: url("../img/qanda/icon-con.png");
}
.qa-wrap .qa-gro dt h2::before{
	background-image: url("../img/qanda/icon-gro.png");
}
.qa-wrap .qa-cem dt h2::before{
	background-image: url("../img/qanda/icon-cem.png");
}
.qa-wrap .qa-rep dt h2::before{
	background-image: url("../img/qanda/icon-rep.png");
}
.qa-wrap .qa-ref dt h2::before{
	background-image: url("../img/qanda/icon-ref.png");
}




.qa-dd-wrap{
	display: flex;
	justify-content: space-between;
	column-gap: 35px;
}

.qa-dd-wrap div{
	flex: 1;
}

.qa-wrap dd a{
	display: block;
	font-size: 15px;
	font-weight: 500;
	padding-bottom: 0.8em;
	padding-left: 2em;
	text-indent: -2em;
	transition: all 0.5s;
	line-height: 1.5em;
}

.qa-wrap dd a:hover{
	color: var(--green02);
}

.qa-wrap dd span{
	color: var(--green02);
	margin-right: 1em;
}

.qa-ref-wrap{
	width: 100%;
	border-radius: 15px;
	padding: 23px 40px;
	background-color: #fff;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
	margin-bottom: 40px;
	
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.qa-ref-wrap div:first-of-type{
	width: clamp(2.5rem, 1.526rem + 4.87vw, 4.875rem);/*40-78*/
	height: clamp(2.5rem, 1.526rem + 4.87vw, 4.875rem);/*40-78*/
	margin-right: 22px;
}
.qa-ref-wrap div img{
	width: 100%;
}

.qa-ref-wrap h2{
	color: var(--green02);
	font-weight: 700;
	font-size: clamp(1.125rem, 1.022rem + 0.51vw, 1.375rem);/*18-22*/
	letter-spacing: 0.06em;
	margin-bottom: clamp(0.313rem, 0.184rem + 0.64vw, 0.625rem);/*5-10*/
}

.qa-ref-wrap a{
	display: block;
	font-size: 15px;
	padding-bottom: 0;
	font-weight: 500;
	transition: all 0.5s;
}

.qa-ref-wrap a:hover{
	color: var(--green02);
}



@container main-container (max-width:900px){
	.qa-wrap{
	flex-wrap: wrap;
		flex-direction: column;
		grid-gap: 40px;
}
}/*container-end*/

@container main-container (max-width:500px){
	.qa-dd-wrap{
	flex-wrap: wrap;
		flex-direction: column;
		grid-gap: 5px;
}
}



/*Q&A contents*/

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

.qa-head-title{
	position: relative;
	display: flex;
	justify-content: space-between;
	max-width: 1200px;
	margin: 50px auto 20px auto;
	z-index: 1;
}

.qa-head-title h2{
	position: relative;
	color: var(--green02);
	font-weight: 700;
	font-size: clamp(1.375rem, 1.239rem + 0.68vw, 1.75rem);/*22-28*/
	letter-spacing: 0.06em;
	padding-top: clamp(0.563rem, 0.28rem + 1.41vw, 1.25rem);/*9-20*/
	padding-left: clamp(3.125rem, 1.843rem + 6.41vw, 6.25rem);/*50-100*/
	padding-bottom: 50px;
}

.qa-head-title h2::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: clamp(2.5rem, 1.526rem + 4.87vw, 4.875rem);/*40-78*/
	height: clamp(2.5rem, 1.526rem + 4.87vw, 4.875rem);/*40-78*/
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}

.qa-head-title.concrete h2::before{
	background-image: url("../img/qanda/icon-con.png");
}
.qa-head-title.ground h2::before{
	background-image: url("../img/qanda/icon-gro.png");
}
.qa-head-title.cement h2::before{
	background-image: url("../img/qanda/icon-cem.png");
}
.qa-head-title.repair h2::before{
	background-image: url("../img/qanda/icon-rep.png");
}
.qa-head-title.reference h2::before{
	background-image: url("../img/qanda/icon-ref.png");
}


.qa-head-title h2::after{
	content: "";
	position: absolute;
	top: clamp(2.5rem, 1.987rem + 2.56vw, 3.75rem);/*40-60*/
	left: clamp(3.125rem, 1.843rem + 6.41vw, 6.25rem);/*50-100*/
	width: 50px;
	height: 5px;
	background-color: var(--green02);
}

.qa-head-title div{
	position: absolute;
	right: 40px;
	top: 0;
}

.qa-head-title.concrete div{
	max-width: 230px;
}
.qa-head-title.ground div{
	max-width: 185px;
}
.qa-head-title.cement div{
	max-width: 250px;
}
.qa-head-title.reference div{
	max-width: 170px;
}


.qa-head-title.repair div{
	max-width: 150px;
}


.qa-head-title div img{
	width: 100%;
}


.qa-content-wrap{
	background-color: #fff;
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
	padding: 40px 150px 40px 35px;
	margin-bottom: 50px;
}

.qa-content-wrap dt{
	position: relative;
	font-size: clamp(1.25rem, 1.114rem + 0.68vw, 1.625rem);/*20-26*/
	font-weight: 700;
	color: var(--green02);
	padding: 23px 0px 35px 100px;
}

.qa-content-wrap dt::before{
	content: "";
	position: absolute;
	width: 70px;
	height: 70px;
	top: 0;
	left: 0;
	background-image: url("../img/qanda/q-icon.png");
	background-repeat: no-repeat;
	background-size: cover;
}

.qa-content-wrap dd{
	padding: 0 0 0 80px;
	display: flex;
	justify-content: space-between;
	column-gap: 20px;
}

.qa-content-wrap ul{
	margin-bottom: 20px;
}

.qa-content-wrap ul li{
	font-size: 15px;
	text-indent: -1em;
	padding-left: 1em;
}

.a-icon{
	width: 70px;
	height: 70px;
}
.a-icon img{
	width: 100%;
}

.a-text{
	flex: 1;
	padding-top: 10px;
}

.a-text p{
	margin-bottom: 40px;
}

.qa-content-wrap#qa-ref p{
	margin-bottom: 10px;
	position: relative;
	text-indent: -1.5em;
   padding-left: 1.5em;
	overflow-wrap: anywhere;
}

.qa-content-wrap#qa-ref p::before{
	content: "●";
	color: var(--green02);
	font-size: 0.8em;
	margin-right: 0.5em;
}




/*Q&A contents img area*/

#qa-con-01 .a-img{
	max-width: 260px;
}

#qa-con-02 .a-img:first-of-type{
	max-width: 350px;
	margin-bottom: 20px;
}
#qa-con-02 .a-img:last-of-type{
	max-width: 620px;
}


#qa-con-03 .a-img:first-of-type{
	max-width: 330px;
	margin-bottom: 20px;
}
#qa-con-03 .a-img:last-of-type{
	max-width: 730px;
}

#qa-con-04 .a-img:nth-of-type(1){
	max-width: 730px;
	margin-bottom: 20px;
}
#qa-con-04 .a-img:nth-of-type(2){
	max-width: 620px;
	margin-bottom: 20px;
}
#qa-con-04 .a-img:nth-of-type(3){
	max-width: 660px;
	margin-bottom: 20px;
}
#qa-con-04 .a-img:nth-of-type(4){
	max-width: 680px;
}

#qa-con-05 .a-img{
	max-width: 730px;
}

#qa-con-06 .a-img{
	max-width: 730px;
}

#qa-con-07 .a-img{
	display: flex;
	column-gap: 20px;
	align-items: baseline;
}
#qa-con-07 .a-img div:first-of-type{
	max-width: 230px;
}
#qa-con-07 .a-img div:last-of-type{
	max-width: 450px;
	height: auto;
}

#qa-con-08 .a-img{
	max-width: 730px;
}

#qa-con-09 .a-img{
	max-width: 560px;
}

#qa-con-10 .a-img{
	max-width: 730px;
}

#qa-con-11 .a-img{
	max-width: 730px;
}

#qa-con-12 .a-img{
	max-width: 780px;
}

#qa-con-13 .a-img{
	max-width: 650px;
}

#qa-con-14 .a-img{
	max-width: 730px;
}

#qa-con-15 .a-img{
	max-width: 720px;
}

#qa-con-16 .a-img{
	max-width: 400px;
}

#qa-con-17 .a-img{
	max-width: 720px;
}

#qa-con-18 .a-img:first-of-type{
	max-width: 820px;
	margin-bottom: 20px;
}
#qa-con-18 .a-img:last-of-type{
	max-width: 410px;
}

#qa-con-19 .a-img{
	max-width: 390px;
}

#qa-con-20 .a-img{
	max-width: 165px;
}

#qa-con-21 .a-img{
	display: flex;
	column-gap: 20px;
	align-items: baseline;
}
#qa-con-21 .a-img div:first-of-type{
	max-width: 350px;
}
#qa-con-21 .a-img div:last-of-type{
	max-width: 330px;
	height: auto;
}

#qa-con-22 .a-img{
	display: flex;
	column-gap: 20px;
	align-items: baseline;
}
#qa-con-22 .a-img div:first-of-type{
	max-width: 310px;
}
#qa-con-22 .a-img div:last-of-type{
	max-width: 260px;
}






#qa-cem-02 .a-img{
	max-width: 650px;
}

#qa-cem-03 .a-img{
	max-width: 700px;
	margin-bottom: 20px;
}






#qa-gro-01 .a-img{
	max-width: 280px;
}

#qa-gro-02 .a-img{
	max-width: 700px;
}

#qa-gro-03 .a-img{
	max-width: 500px;
}

#qa-gro-07 .a-img{
	max-width: 730px;
}

#qa-gro-08 .a-img{
	max-width: 470px;
}

#qa-gro-10 .a-img{
	max-width: 370px;
}

#qa-gro-12 .a-img{
	max-width: 660px;
}

#qa-gro-13 .a-img:first-of-type{
	max-width: 400px;
	margin-bottom: 30px;
}

#qa-gro-15 .a-img{
	margin-bottom: 20px;
}

#qa-gro-16 .a-img{
	max-width: 620px;
}

#qa-gro-17 .a-img{
	display: flex;
	column-gap: 20px;
	align-items: baseline;
}
#qa-gro-17 .a-img div:first-of-type{
	max-width: 280px;
}
#qa-gro-17 .a-img div:last-of-type{
	max-width: 490px;
}

#qa-gro-19 .a-img{
	max-width: 480px;
}

#qa-gro-20 .a-img{
	display: flex;
	column-gap: 20px;
	align-items: baseline;
}
#qa-gro-20 .a-img div:first-of-type{
	max-width: 220px;
}
#qa-gro-20 .a-img div:last-of-type{
	flex: 1;
}


#qa-gro-21 .a-img:first-of-type{
	max-width: 650px;
	margin-bottom: 20px;
}
#qa-gro-21 .a-img:last-of-type{
	max-width: 650px;
}


#qa-gro-24 .a-img{
	display: flex;
	column-gap: 20px;
	align-items: baseline;
}
#qa-gro-24 .a-img div:first-of-type{
	max-width: 280px;
}
#qa-gro-24 .a-img div:last-of-type{
	max-width: 280px;
}
#qa-gro-24 .a-img:last-of-type{
	max-width: 600px;
}





#qa-rep-02 .a-img{
	max-width: 490px;
	margin-bottom: 20px;
}

#qa-rep-03 .a-img{
	max-width: 300px;
}

#qa-rep-04 .a-img{
	max-width: 630px;
}

#qa-rep-06 .a-img{
	max-width: 740px;
}


























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

.company-main-wrap{
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.company-left-wrap{
	position: absolute;
	z-index: 2;
	height: 100%;
	width: 17.5%;
	background-color: #F4F4F4;
	box-shadow: 5px 0px 3px 0px rgba(0, 0, 0, 0.16);
	padding: 75px 0 0 0;
}

.company-left-wrap li a{
	display: block;
	font-size: 18px;/*15-18*/
	font-weight: 500;
	letter-spacing: 0.2em;
	margin-bottom: 30px;
}

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



.company-right-wrap{
	flex: 1;
	background-color: #fff;
	padding-top: clamp(2.5rem, 1.705rem + 3.98vw, 4.688rem);/*40-75*/
	padding-left: calc(17.5% + 75px);
	padding-bottom: 160px;
	width: 100%;
}


.company-right-wrap h1{
	position: relative;
	font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);/*20-30*/
	font-weight: 500;
	letter-spacing: 0.2em;
	margin-bottom: clamp(2.5rem, 1.818rem + 3.41vw, 4.375rem);/*40-70*/
	padding-top: clamp(0rem, -0.136rem + 0.68vw, 0.375rem);/*0-6*/
	padding-left: clamp(2.5rem, 2.159rem + 1.7vw, 3.438rem);/*40-55*/
}

.company-right-wrap h1::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: clamp(1.25rem, 1.114rem + 0.68vw, 1.625rem);/*20-26*/
	height: clamp(1.25rem, 1.114rem + 0.68vw, 1.625rem);/*20-26*/
	border-radius: 50%;
	border: clamp(0.25rem, 0.159rem + 0.45vw, 0.5rem) solid var(--green);/*4-8*/
}


.company-right-wrap dl{
	position: relative;
	display: flex;
	border-bottom: 1px solid #EDEDEB;
}

.company-right-wrap dl::before{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 120px;
	height: 1px;
	background-color: var(--green);
	
}

.company-right-wrap dt{
	width: 120px;
	padding: 20px 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--green);
}

.company-right-wrap dd{
	flex: 1;
	padding: 20px 0 20px 60px;
	line-height: 2em;
}


.company-histry dd{
	display: flex;
	border-bottom: 1px solid #EDEDEB;
}

.company-histry dd p:first-of-type{
	width: 66px;
}

.company-histry dd p:last-of-type{
	flex: 1;
	padding-left: 54px;
}





/*office*/
.company-office-map-img{
	width: 100%;
	margin-bottom: 60px;
}


.company-office-wrap{
	display: flex;
	justify-content: space-between;
	column-gap: 30px;
	flex-wrap: wrap;
	padding: 40px 0;
	border-bottom: 1px solid #EDEDEB;
}

.company-office-wrap:last-of-type{
	border-bottom: 0px solid #EDEDEB;
}

.company-office-item-wrap{
	flex-basis: calc((100% - 30px) / 2);
}

.office-name{
	font-size: 20px;
	font-weight: 500;
	color: var(--green);
	border-bottom: 1px solid var(--green);
	padding-bottom: 10px;
	margin-bottom: 20px;
}

.company-office-item-wrap div{
	padding-left: 100px;
}

.office-text{
	font-size: 15px;
	line-height: 2em;
	margin-bottom: 35px;
}

/**/
.company-report li a{
	position: relative;
	display: block;
	border-bottom: 1px solid #EDEDEB;
	font-size: 15px;
	font-weight: 700;
	padding: 20px 0;
}
.company-report li a::before{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 120px;
	height: 1px;
	background-color: var(--green);
}


























/*--------------------service------------------------*/
.service-top-area{
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 1;
	padding: clamp(1.875rem, 0.966rem + 4.55vw, 4.375rem) 0 0 0;/*30-70*/
}

.service-top-area::before{
	content: "";
	position: absolute;
	height: 275px;
	width: calc(100% - 50% - 260px);
	background-color: rgba(152,190,105,1);
	top: 40px;
	right: 0;
	z-index: -1;
}


.service-top-left{	
	width: 720px;
	padding: 10px 30px 0 120px;
}

.service-top-left h1{
	font-size: clamp(1.125rem, 0.852rem + 1.36vw, 1.875rem);/*18-30*/
	line-height: 1.8em;
	font-family: 'Noto Serif JP', sans-serif;
	font-weight: 400;
	color: var(--blue);
	margin-bottom: clamp(2.5rem, 1.591rem + 4.55vw, 5rem);/*40-80*/
}

.service-top-left p{
	font-size: 15px;
	line-height: 2em;
	margin-bottom: 65px;
}
.service-top-left p:nth-child(2){
	margin-bottom: 40px;
}
.service-top-left p:nth-child(3){
	margin-bottom: 20px;
}

.service-top-right{
	width: 720px;
}
.service-top-right img{
	width: 100%;
}




.service-top-img02{
	position: relative;
	z-index: 1;
}
/*
.service-top-img02::before{
	content: "";
	position: absolute;
	height: 100px;
	width: calc(100% - 50% - 480px);
	background-color: rgba(152,190,105,1);
	bottom: 0;
	right: 0;
	z-index: -1;
}

.service-top-img02::after{
	content: "";
	position: absolute;
	height: 100px;
	width: calc(100% - 50% - 480px);
	background-color: rgba(152,190,105,1);
	top: 0;
	left: 0;
	z-index: -1;
}
*/


.service-top-img02 div{
	max-width: 1200px;
	margin: 0 auto 50px auto;
}
.service-top-img02 div img{
	width: 100%;
}



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

.service-main-l{
	width: 335px;
}

.service-main-l h2{
	position: relative;
	font-size: clamp(1.25rem, 1.068rem + 0.91vw, 1.75rem);/*20-28*/
	font-weight: 500;
	padding-left: clamp(2.188rem, 1.847rem + 1.7vw, 3.125rem);/*35-50*/
	margin-bottom: clamp(0.938rem, 0.597rem + 1.7vw, 1.875rem);/*15-30*/
	letter-spacing: 0.2em;
}
.service-main-l h2::before{
	content: "";
	position: absolute;
	width: clamp(0.625rem, 0.511rem + 0.57vw, 0.938rem);/*10-15*/
	height: clamp(0.625rem, 0.511rem + 0.57vw, 0.938rem);/*10-15*/
	border-radius: 50%;
	top: 0;
	left: 0;
}

/*color-change*/
.service-cem h2::before{
	border: 8px solid var(--cem);
}
.service-con h2::before{
	border: 8px solid var(--con);
}
.service-gro h2::before{
	border: 8px solid var(--gro);
}
.service-rep h2::before{
	border: 8px solid var(--rep);
}
.service-other h2::before{
	border: 8px solid var(--other);
}
.service-oil h2::before{
	border: 8px solid var(--oil);
}


.service-main-l a{
	display: inline-block;
	font-size: 15px;
	background-color: #fff;
	padding: 3px 20px;
	border-radius: 50px;
	transition: all 0.5s;
}



/*color-change*/
.service-cem a{
	border: 1px solid var(--cem);
	color: var(--cem);
}
.service-cem a:hover{
	color: #fff;
	background-color: var(--cem);
}

.service-cem a{
	border: 1px solid var(--cem);
	color: var(--cem);
}
.service-cem a:hover{
	color: #fff;
	background-color: var(--cem);
}

.service-con a{
	border: 1px solid var(--con);
	color: var(--con);
}
.service-con a:hover{
	color: #fff;
	background-color: var(--con);
}

.service-gro a{
	border: 1px solid var(--gro);
	color: var(--gro);
}
.service-gro a:hover{
	color: #fff;
	background-color: var(--gro);
}

.service-rep a{
	border: 1px solid var(--rep);
	color: var(--rep);
}
.service-rep a:hover{
	color: #fff;
	background-color: var(--rep);
}

.service-other a{
	border: 1px solid var(--other);
	color: var(--other);
}
.service-other a:hover{
	color: #fff;
	background-color: var(--other);
}

.service-oil a{
	border: 1px solid var(--oil);
	color: var(--oil);
}
.service-oil a:hover{
	color: #fff;
	background-color: var(--oil);
}







.service-main-r{
	flex: 1;
}

.service-main-r dl{
	display: flex;
	margin-bottom: 20px;
}



/*color-change*/
.service-cem .service-main-r dl{
	border-top: 1px solid var(--cem);
	border-bottom: 1px solid var(--cem);
}
.service-con .service-main-r dl{
	border-top: 1px solid var(--con);
	border-bottom: 1px solid var(--con);
}
.service-gro .service-main-r dl{
	border-top: 1px solid var(--gro);
	border-bottom: 1px solid var(--gro);
}
.service-rep .service-main-r dl{
	border-top: 1px solid var(--rep);
	border-bottom: 1px solid var(--rep);
}
.service-other .service-main-r dl{
	border-top: 1px solid var(--other);
	border-bottom: 1px solid var(--other);
}
.service-oil .service-main-r dl{
	border-top: 1px solid var(--oil);
	border-bottom: 1px solid var(--oil);
}



.service-main-r dt{
	width: clamp(8.125rem, 5.057rem + 15.34vw, 16.563rem);/*130-265*/
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.2em;
	padding: 20px 17px;
}


/*color-change*/
.service-cem .service-main-r dt{
	background-color: var(--cem);
}
.service-con .service-main-r dt{
	background-color: var(--con);
}
.service-gro .service-main-r dt{
	background-color: var(--gro);
}
.service-rep .service-main-r dt{
	background-color: var(--rep);
}
.service-other .service-main-r dt{
	background-color: var(--other);
}
.service-oil .service-main-r dt{
	background-color: var(--oil);
}


.service-main-r dd{
	font-size: 15px;
	font-weight: 500;
	line-height: 2em;
	padding: 20px 20px;
	flex: 1;
}



.service-main-mail{
	width: 100%;
	display: flex;
	justify-content: space-between;
	column-gap: 40px;
	background-color: #EFF6FA;
	border-left: 30px solid var(--cem);
	padding: 35px 50px;
	margin: 100px auto;
}

.service-main-mail p{
	flex: 1;
	align-items: center;
	font-size: 18px;
	font-weight: 500;
	line-height: 2em;
	color: var(--cem);
}

.service-main-mail a{
	display: inline-block;
	position: relative;
	background-color: var(--cem);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	padding: 20px 30px 20px 70px;
	border-radius: 10px;
	transition: all .5s;
}

.service-main-mail a::before{
	content: "";
	position: absolute;
	width: 32px;
	height: 21px;
	top: 24px;
	left: 30px;
	background-image: url("../img/mail-icon.png");
	background-repeat: no-repeat;
	background-size: cover;
}

.service-main-mail a:hover{
	background-color: var(--green);
	color: #fff;
}



/*各ページ*/

.service-title01{
	position: relative;
	font-size: clamp(1.25rem, 1.068rem + 0.91vw, 1.75rem);/*20-28*/
	font-weight: 500;
	letter-spacing: 0.2em;
	margin: clamp(3.125rem, 2.443rem + 3.41vw, 5rem) 0 clamp(1.25rem, 0.795rem + 2.27vw, 2.5rem) 0;/*50-80 20-40*/
	padding-top: clamp(0.125rem, 0.08rem + 0.23vw, 0.25rem);/*2-4*/
	padding-left: clamp(2.5rem, 2.273rem + 1.14vw, 3.125rem);/*40-50*/
}

.service-title01::before{
	content: "";
	position: absolute;
	width: clamp(0.938rem, 0.824rem + 0.57vw, 1.25rem);/*15-20*/
	height: clamp(0.938rem, 0.824rem + 0.57vw, 1.25rem);
	border-radius: 50%;
	top: 0;
	left: 0;
}
/*color-change*/
.service-title01.sv-con::before{
	border: 8px solid var(--con);
}
.service-title01.sv-cem::before{
	border: 8px solid var(--cem);
}
.service-title01.sv-gro::before{
	border: 8px solid var(--gro);
}
.service-title01.sv-rep::before{
	border: 8px solid var(--rep);
}
.service-title01.sv-other::before{
	border: 8px solid var(--other);
}
.service-title01.sv-oil::before{
	border: 8px solid var(--oil);
}



.service-title02{
	font-size: clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);/*18-22*/
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: clamp(0.5rem, 0.409rem + 0.45vw, 0.75rem) 22px;/*8-12*/
	margin-bottom: 25px;
}
/*color-change*/
.service-title02.sv-con{
	color: var(--con);
	background-color: rgba(55,164,164,0.1);
	border-left: 5px solid var(--con);
}
.service-title02.sv-cem{
	color: var(--cem);
	background-color: rgba(29,78,118,0.1);
	border-left: 5px solid var(--cem);
}
.service-title02.sv-gro{
	color: var(--gro);
	background-color: rgba(204,133,48,0.1);
	border-left: 5px solid var(--gro);
}
.service-title02.sv-rep{
	color: var(--rep);
	background-color: rgba(94,141,77,0.1);
	border-left: 5px solid var(--rep);
}
.service-title02.sv-other{
	color: var(--other);
	background-color: rgba(94,122,141,0.1);
	border-left: 5px solid var(--other);
}
.service-title02.sv-oil{
	color: var(--pil);
	background-color: rgba(168,153,201,0.1);
	border-left: 5px solid var(--pil);
}



.service-text{
	font-size: 15px;
	font-weight: 500;
	line-height: 2em;
	margin-bottom: 45px;
	text-align: justify;
}








/*コンクリート*/
.service-con-wrap01{
	display: flex;
	justify-content: space-between;
	column-gap: 60px;
	margin-bottom: 40px;
}

.service-con-wrap01 div:first-of-type{
	flex: 1;
}

.service-con-wrap01 div:last-of-type{
	width: 477px;
}

@container main-container (max-width: 800px) {
	.service-con-wrap01{
	display: block;
	margin-bottom: 40px;
	}
	.service-con-wrap01 div:last-of-type{
	width: 100%;
	}
}



.service-con-wrap02{
	display: flex;
	justify-content: space-between;
	column-gap: 100px;
	margin-bottom: 40px;
}

.service-con-wrap02 p{
	display: block;
	flex: 1;
}

.service-con-wrap02 p span{
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 10px;
}

.service-con-wrap02 div{
	width: 788px;
}

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

.service-con-wrap03{
	display: flex;
	margin-bottom: 50px;
}

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

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

.service-con-wrap03 ul li{
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 10px;
}

.service-con-wrap04{
	display: flex;
	justify-content: center;
	column-gap: 50px;
}

.service-con-wrap04 div:first-of-type{
	width: 405px;
}

.service-con-wrap04 div:last-of-type{
	width: 735px;
}

.service-con-wrap04 + p{
	font-size: 0.8em;
	margin: 20px 0 50px 0;
}


.service-con-wrap05{
	display: flex;
	column-gap: 50px;
	margin-bottom: 80px;
}

.service-con-wrap05 p{
	flex: 1;
}

.service-con-wrap05 div{
	width: 490px;
}

@container main-container (max-width: 800px){
	.service-con-wrap04{
	display: block;
	}
	.service-con-wrap04 div:first-of-type{
	width: 90%;
		margin: 0 auto 20px auto;
	}
	.service-con-wrap04 div:last-of-type{
	width: 100%;
		margin: 0 auto;
	}
	.service-con-wrap05{
	display: block;
	margin-bottom: 40px;
	}
	.service-con-wrap05 div{
	width: 100%;
		margin-top: 20px;
	}
}




/*セメント*/
.service-cem-wrap01{
	display: flex;
	justify-content: space-between;
	column-gap: 40px;
	margin-bottom: 70px;
}

.service-cem-wrap01 p{
	flex: 1;
}

.service-cem-wrap01 div{
	width: 495px;
}

@container main-container (max-width: 800px){
	.service-cem-wrap01{
	display: block;
	margin-bottom: 50px;
	}
	.service-cem-wrap01 div{
	width: 100%;
	}
}

.service-cem-wrap02{
	margin-bottom: 10px;
}

.service-cem-wrap02 table{
	width: 100%;
	border: 1px solid #000;
	border-collapse: collapse;
	margin-bottom: 20px;
}

.service-cem-wrap02 table th{
	background-color: var(--cem);
	color: #fff;
	font-size: 15px;
	text-align: center;
	border-left: 1px solid #C7C8CA;
	padding: 5px 10px;
}

.service-cem-wrap02 table th:first-of-type{
	border-left: 0px solid #C7C8CA;
	text-align: right;
	background-image: linear-gradient(to right top, transparent calc(50% - 0.5px), #C7C8CA 50%, #C7C8CA calc(50% + 0.5px), transparent calc(50% + 1px));
}

.service-cem-wrap02 table th:first-of-type p:last-of-type{
	text-align: left;
}

.service-cem-wrap02 table td{
	text-align: center;
	color: var(--cem);
	font-size: 15px;
	padding: 5px 10px;
	border: 1px solid #000;
}

.blue-bg{
	background-color: #EDEFF0;
}

.service-cem-wrap02 + p{
	font-size: 12px;
	line-height: 1.5em;
	margin-bottom: 60px;
}

@container main-container (max-width: 750px){
	.service-cem-wrap02{
		overflow-x: scroll;
	}
	.service-cem-wrap02 table{
	width: 800px;
	}
}



.service-cem-wrap03{
	display: flex;
	justify-content: flex-start;
	column-gap: 15px;
	flex-wrap: wrap;
	margin-bottom: 50px;
}



.service-cem-wrap03 dl{
	width: calc((100% - 30px) / 3);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top right;
	padding: 35px 25px 50px 25px;
	border-radius: 15px;
	margin-bottom: 15px;
}
/*color-change*/
.service-cem-wrap03 dl:nth-child(1){
	background-image: url("../img/service/service-cem02.png");
	border: 4px solid #37A4A4;
}
.service-cem-wrap03 dl:nth-child(2){
	background-image: url("../img/service/service-cem03.png");
	border: 4px solid #CC8530;
}
.service-cem-wrap03 dl:nth-child(3){
	background-image: url("../img/service/service-cem04.png");
	border: 4px solid #5F7894;
}
.service-cem-wrap03 dl:nth-child(4){
	background-image: url("../img/service/service-cem05.png");
	border: 4px solid #9DB556;
}
.service-cem-wrap03 dl:nth-child(5){
	background-image: url("../img/service/service-cem06.png");
	border: 4px solid #A899C9;
}





.service-cem-wrap03 dl p{
	display: block;
	font-size: 12px;
	background-color: #fff;
	font-weight: 600;
}
/*color-change*/
.service-cem-wrap03 dl:nth-child(1) p{
	color: #37A4A4;
}
.service-cem-wrap03 dl:nth-child(2) p{
	color: #CC8530;
}
.service-cem-wrap03 dl:nth-child(3) p{
	color: #5F7894;
}
.service-cem-wrap03 dl:nth-child(4) p{
	color: #9DB556;
}
.service-cem-wrap03 dl:nth-child(5) p{
	color: #A899C9;
}





.service-cem-wrap03 dt{
	position: relative;
	font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);/*18-24*/
	font-weight: 700;
	line-height: 1.5em;
	padding-bottom: 10px;
	margin-bottom: 10px;
	letter-spacing: -0.03em;
	text-shadow:
		1px 1px 0 #FFF, -1px -1px 0 #FFF,
		-1px 1px 0 #FFF, 1px -1px 0 #FFF,
		0px 1px 0 #FFF,  0-1px 0 #FFF,
		-1px 0 0 #FFF, 1px 0 0 #FFF;
}
/*color-change*/
.service-cem-wrap03 dl:nth-child(1) dt{
	color: #37A4A4;
}
.service-cem-wrap03 dl:nth-child(2) dt{
	color: #CC8530;
	padding-bottom: 50px;
}
.service-cem-wrap03 dl:nth-child(3) dt{
	color: #5F7894;
}
.service-cem-wrap03 dl:nth-child(4) dt{
	color: #9DB556;
}
.service-cem-wrap03 dl:nth-child(5) dt{
	color: #A899C9;
}




.service-cem-wrap03 dt::before{
	content: "";
	position: absolute;
	width: 50px;
	height: 3px;
	bottom: 0;
	left: 0;
}
/*color-change*/
.service-cem-wrap03 dl:nth-child(1) dt::before{
	background-color: #37A4A4;
}
.service-cem-wrap03 dl:nth-child(2) dt::before{
	background-color: #CC8530;
}
.service-cem-wrap03 dl:nth-child(3) dt::before{
	background-color: #5F7894;
}
.service-cem-wrap03 dl:nth-child(4) dt::before{
	background-color: #9DB556;
}
.service-cem-wrap03 dl:nth-child(5) dt::before{
	background-color: #A899C9;
}


.service-cem-wrap03 dl ul li{
	padding-left:1em;
		text-indent:-1em;
}



@container main-container (max-width: 1000px){
	.service-cem-wrap03 dl{
	width: calc((100% - 15px) / 2);
	}
}
@container main-container (max-width: 750px){
	.service-cem-wrap03 dl{
	width: 100%;
	}
}



.service-cem-wrap04{
	max-width: 670px;
	margin-bottom: 50px;
}







/*建築資材*/

.service-other-wrap01{
	display: flex;
	justify-content: space-between;
	column-gap: 30px;
	margin-bottom: 50px;
}

.service-other-wrap01 p{
	flex: 1
}

.service-other-wrap01 div{
	flex: 1;
}




.service-other-wrap02{
	display: flex;
	justify-content: space-between;
}

.service-other-wrap02 dl{
	width: calc(100% / 3);
	margin-bottom: 50px;
	padding: 0 30px;
}

.service-other-wrap02 dl:first-of-type{
	padding-left: 0;
	border-right: 1px solid #707070;
}

.service-other-wrap02 dl:last-of-type{
	padding-right: 0;
	border-left: 1px solid #707070;
}


.service-other-wrap02 dt{
	font-size: 18px;
	margin-bottom: 10px;
	color: #1D4E76;
	font-weight: 700;
}

.service-other-wrap02 dd{
	font-size: 15px;
	font-weight: 500;
	line-height: 2em;
	text-align: justify;
}


@container main-container (max-width: 800px) {
	.service-other-wrap01{
	display: block;
	margin-bottom: 50px;
	}
	
	.service-other-wrap02{
	display: block;
	}
	
	.service-other-wrap02 dl{
	width: 100%;
	margin-bottom: 0px;
	padding: 30px 0px;
	}
	
	.service-other-wrap02 dl:first-of-type{
	border-right: 0px solid #707070;
	border-bottom:  1px solid #707070;
	padding-top: 0;
	}

.service-other-wrap02 dl:last-of-type{
	border-left: 0px solid #707070;
	border-top: 1px solid #707070; 
	}
}




/*地盤改良*/
.service-gro-wrap01{
	display: flex;
	column-gap: 25px;
}

.service-gro-wrap01 dl{
	padding: 40px 20px;
	border:  5px solid var(--gro);
	border-radius: 10px;
	flex-basis: calc((100% - 50px) / 2.2);
	position: relative;
}

.service-gro-wrap01 dl dt{
	position: relative;
	font-size: 18px;
	font-weight: 700;
	color: var(--gro);
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.service-gro-wrap01 dl dt::before{
	content: "";
	position: absolute;
	width: 50px;
	height: 3px;
	bottom: 0;
	left: 0;
	background-color: var(--gro);
}

.service-gro-wrap01 dd{
	font-size: 15px;
	font-weight: 500;
	line-height: 2em;
}

.gro-img-up{
	position: absolute;
	bottom: 40px;
	width: calc(100% - 40px);
}

.gro-img-wrap{
	display: flex;
	justify-content: space-between;
	grid-gap: 20px;
	flex-direction: column;
}



.service-gro-wrap02{
	margin-bottom: 70px;
}

.service-gro-wrap02 p{
	display: flex;
    align-items: center;
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 20px;
}

.service-gro-wrap02 p::before,
.service-gro-wrap02 p::after{
	content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #666;
}

.service-gro-wrap02 p::before{
	margin-right: 1rem;
}
.service-gro-wrap02 p::after{
	margin-left: 1rem;
}





.service-gro-wrap03{
	display: flex;
	justify-content: space-between;
	column-gap: 20px;
	font-size: 15px;
	font-weight: 500;
	line-height: 2em;
	margin-bottom: 70px;
}

.service-gro-wrap03 div{
	flex: 1;
	margin-bottom: 20px;
}

.service-gro-wrap03 ul{
	margin: 20px 0;
	color: var(--gro);
	padding-left:1em;
	text-indent:-1em;
}


@container main-container (max-width: 800px) {
	.service-gro-wrap01{
	display: block;
	}
	
	.gro-img-up{
	position: static;
	bottom: 0px;
	width: 100%;
	}
	
	.service-gro-wrap01 dl{
	padding: 20px 20px;
	flex-basis: 1;
	position: static;
		margin-bottom: 20px;
	}
	
	.service-gro-wrap03{
		display: block;
	}

}





/*補修・補強材*/
.sv-rep-accordion-area li{
	margin-bottom: 20px;
}

.sv-rep-title{
	position: relative;
	font-size: 17px;
	font-weight: 500;
	padding: 5px 30px 5px 2em;
	text-indent:-1em;
	border: 1px solid var(--rep);
	background: var(--rep);
	color: #fff;
	transition: all .5s;
	cursor: pointer;
}

.sv-rep-title::after{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 7px solid transparent;
	border-left: 7px solid transparent;
	border-top: 13px solid #fff;
	border-bottom: 0;
	top: 10px;
	right: 10px;
	transition: all .5s;
}

.sv-rep-title.close::after{
	border-top: 13px solid var(--rep);
	  transform: rotate(180deg);
}



.sv-rep-accordion-area  .sv-rep-title.close{
	background: #fff;
	color: var(--rep);
}

.sv-rep-box {
    display: none;/*はじめは非表示*/
    padding: 30px 0;
}

.sv-rep-box div{
	max-width: 630px;
}








/*石油化成品*/

.service-oil-wrap01{
	display: flex;
	justify-content: space-between;
	column-gap: 40px;
	margin-bottom: 50px;
}

.service-oil-wrap01 p{
	flex: 1;
	margin-bottom: 20px;
}

.service-oil-wrap01 div{
	max-width: 500px;
}

@container main-container (max-width: 800px) {
	.service-oil-wrap01{
		display: block;
	}
}



















/*--------------------news------------------------*/

.news-wrap{
	height: 500px;
	overflow-y: scroll;
	margin-bottom: 70px;
}

.news-wrap li{
	padding: 20px 40px;
	border-top: 1px dashed #BABABA;
	display: flex;
	align-items: center;
}

.news-wrap li p{
	position: relative;
	font-size: 16px;
	color: #9B7C52;
	font-weight: 700;
	margin-right: 2em;
}

.news-wrap li p span{
	color: #3E5270;
	margin-right: 0.5em;
}

.news-wrap li a{
	font-size: 15px;
	font-weight: 500;
	transition: all 0.5s;
}

.news-wrap li a:hover{
	color: var(--green);
}

@container main-container (max-width: 600px) {
	.news-wrap li{
	padding: 10px 20px;
	display: block;
	}
}




.main-wrap.news{
	padding: 100px 0;
}

.news-main-wrap h1{
	position: relative;
	font-size: clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);/*18-22*/
	line-height: 2em;
	padding-bottom: clamp(1.25rem, 0.795rem + 2.27vw, 2.5rem);/*20-40*/
	margin-bottom: clamp(0.625rem, 0.398rem + 1.14vw, 1.25rem);/*10-20*/
}

.news-main-wrap h1::before{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 70px;
	height: 4px;
	background-color: var(--green);
}

.news-date{
	font-size: 14px;
	color: #6B6B6B;
	margin-bottom: clamp(1.25rem, 0.682rem + 2.84vw, 2.813rem);/*20-45*/
}

.news-main-wrap p{
	font-size: 15px;
	line-height: 2em;
	margin-bottom: 50px;
}

.news-next-area{
	display: flex;
	column-gap: 2em;
	justify-content: center;
}

.news-next-area p:nth-child(1){
	position: relative;
	display: inline-block;
	padding-left: 1em;
}
.news-next-area p:nth-child(1)::before,
.news-next-area p:nth-child(1)::after{
	content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 10px;
  height: 3px;
  border-radius: 9999px;
  background-color: #3A3A3A;
  transform-origin: 1.5px 50%;
	
}
.news-next-area p:nth-child(1)::before{
  transform: rotate(45deg);
}
.news-next-area p:nth-child(1)::after {
  transform: rotate(-45deg);
}


.news-next-area p:nth-child(3){
	position: relative;
	display: inline-block;
	padding-right: 1em;
}
.news-next-area p:nth-child(3)::before,
.news-next-area p:nth-child(3)::after{
	content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  width: 10px;
  height: 3px;
  border-radius: 9999px;
  background-color: #3A3A3A;
  transform-origin: calc(100% - 1.5px) 50%;
	
}
.news-next-area p:nth-child(3)::before{
  transform: rotate(45deg);
}
.news-next-area p:nth-child(3)::after {
  transform: rotate(-45deg);
}

.news-next-off{
	color: #9A9A9A;
}
.news-next-area p:nth-child(1).news-next-off::before,
.news-next-area p:nth-child(1).news-next-off::after,
.news-next-area p:nth-child(3).news-next-off::before,
.news-next-area p:nth-child(3).news-next-off::after{
	background-color: #9A9A9A;
}








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

.main-wrap.recruit{
	padding: 50px;
	text-align: center;
	/*height: calc(100vh - 650px);*/
}

.main-wrap.recruit p{
	font-size: 15px;
	line-height: 2em;
	margin-bottom: 50px;
}

.rec-link{
	display: inline-block;
}

.rec-link div{
	max-width: 200px;
	margin: 0 auto 20px auto;
}

.rec-link p{
	font-weight: 700;
	color: var(--green);
	transition: all 0.3s;
}

.rec-link:hover p{
	color: var(--green02);
}












/*--------------------お問合せ------------------------*/

.main-wrap.contact{
	padding: clamp(1.25rem, 0.568rem + 3.41vw, 3.125rem);/*20-50*/
	text-align: center;
}

.main-wrap.contact p{
	font-size: 15px;
	line-height: 2em;
	margin-bottom: clamp(1.25rem, 0.568rem + 3.41vw, 3.125rem);/*20-50*/
}







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

.policy{
	margin-top: 117px; 
}

.policy-title01{
	position: relative;
	font-size: clamp(1.25rem, 1.068rem + 0.91vw, 1.75rem);/*20-28*/
	font-weight: 500;
	letter-spacing: 0.2em;
	margin: clamp(3.125rem, 2.443rem + 3.41vw, 5rem) 0 clamp(1.25rem, 0.795rem + 2.27vw, 2.5rem) 0;/*50-80 20-40*/
	padding-top: clamp(0.125rem, 0.08rem + 0.23vw, 0.25rem);/*2-4*/
	padding-left: clamp(2.5rem, 2.273rem + 1.14vw, 3.125rem);/*40-50*/
}

.policy-title01::before{
	content: "";
	position: absolute;
	width: clamp(0.938rem, 0.824rem + 0.57vw, 1.25rem);/*15-20*/
	height: clamp(0.938rem, 0.824rem + 0.57vw, 1.25rem);
	border-radius: 50%;
	top: 0;
	left: 0;
	border: 8px solid var(--green);
}

.policy dl{
	margin-bottom: clamp(3.125rem, 2.67rem + 2.27vw, 4.375rem);/*50-70*/
}

.policy dt{
	font-size: clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);/*18-22*/
	font-weight: 700;
	letter-spacing: 0.2em;
	margin-bottom: clamp(0.625rem, 0.17rem + 2.27vw, 1.875rem);/*10-30*/
}

.policy p{
	font-size: 15px;
	line-height: 2em;
	font-weight: 500;
	margin-bottom: clamp(1.25rem, 0.795rem + 2.27vw, 2.5rem);/*20-40*/
}

.policy li{
	text-indent: -1em;
	padding-left: 2em;
	font-size: 15px;
	font-weight: 500;
	line-height: 2em;
}

.policy a{
	color: var(--green);
	transition: all ease 0.5s;
}

.policy a:hover{
	color: #6D6D6D;
}











/*--------------------footer------------------------*/

footer{
	position: relative;
	z-index: 2;
	background-color: #E3F3FC;
	padding: 55px clamp(1.25rem, 0.481rem + 3.85vw, 3.125rem) 20px clamp(1.25rem, 0.481rem + 3.85vw, 3.125rem);/*20-50*/

	container-type:inline-size;
	container-name:footer-container;
}

.footer-wrap{
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	column-gap: 20px;
}



.footer-left a{
	display: block;
	max-width: 225px;
	margin-bottom: 35px;
}

.footer-left a img{
	width: 100%;
}

.footer-left p{
	font-size: 14px;
	line-height: 2em;
}



.footer-right{
	display: flex;
	justify-content: flex-start;
	column-gap: 60px;
}

.footer-right ul li{
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 5px;
}

.footer-right ul li.footer-rink-title {
	font-size: 16px;
	font-weight: 600;
	padding-left: 13px;
	position: relative;
}
.footer-right ul li.footer-rink-title::before{
	content: "";
	position: absolute;
    top: 35%;  
    left: 0;
    transform: scale(1.5);   
    border: 5px solid transparent;
    border-left: 8px solid #006190;
}


.footer-chara{
	display: block;
	max-width: 190px;
	margin-top: clamp(0.625rem, -0.284rem + 4.55vw, 3.125rem);/*10-50*/
}

.footer-chara img{
	width: 100%;
}

.footer-tel{
	display: flex;
}



small{
	display: block;
	text-align: center;
	font-size: 12px;
}





@container footer-container (max-width:900px){
	
	.footer-wrap{
	margin: 0 auto;
	display: block;
	}
	
	.footer-left a{
	margin-bottom: 35px;
	}


.footer-right{
	margin-top: 50px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	column-gap: 10px;
	}

.footer-right ul{
	width: calc(100% / 2.1);
	margin-bottom: 35px;
	}
}


















/*--------------------totop------------------------*/
.pagetop {
    height: clamp(3.125rem, 2.356rem + 3.85vw, 5rem);/*50-80*/
    width: clamp(1.172rem, 0.883rem + 1.44vw, 1.875rem);/*18.75-30*/
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 2;
}