@charset "UTF-8";

/* ---------------------------------------------------------------------------
  ★共通
--------------------------------------------------------------------------- */
:root{
  scroll-padding-top: 105px;
}
html {font-size: 62.5%;scroll-behavior: smooth;}
body{  
  font-size: 1.6rem;
}
object {pointer-events: none;}
.sp {display: none !important;}
a[href^="tel:"] {pointer-events: none;}
a {
    text-decoration: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.pcFlex{display: flex;}
.pcFlex.half{
 justify-content: space-between;
}
.pcFlex.half >*{
 width: 48%;
}
.img_r {overflow: hidden;}
.img_r>img {float: right;
    width: 33%;
    margin-left: 15px;
    margin-bottom: 15px;
}
p,li,dt,dd,th,td,input{
  font-size: 1.6rem;
}
h1,h2,h3,h4,h5,h6 {
  font-size: 1.6rem;
}

section{
  padding: 100px 0;
}
section p:not(:last-child){
  margin-bottom: 1.5em;
}
.column3{
 flex-flow: row wrap;
 gap:40px 30px;
}
.column4{
 flex-flow: row wrap;
 gap:40px 20px;
}
.column3 > li{
 width: calc((100% - 30px*2)/3);
}
.column4 > li{
 width: calc((100% - 20px*3)/4);
}


/*タイトル
========================================== */
.h2Tit {
}
.h3Tit {
 font-size: min(5.5vw,3rem);
 font-weight: 900;
	margin-bottom: 40px;
}
.h4Tit {
	font-size: 2.5rem;
	margin-bottom: 30px;
}
.h5Tit {  
	font-size: 2.2rem;
	margin-bottom: 10px;
}
.h6Tit{
	font-size: 2rem;
	margin-bottom: 10px;
}

/*
　テキスト
========================================== */
.leadTxt{
  font-size: min(1.6vw, 2.2rem);
}
.note,
.note li{
  font-size: 1.2rem;
}
.pcCenter{
	text-align: center;
}

/*
　ボタン,リンク
========================================== */

.btnWrap{
 margin-top: 40px;
}


/* =======================================
  ページャー
========================================== */
/*-- pageNavi --*/
.pageNavi{
	gap:0 1.5%;
 margin-top: 80px;
}
.pageNavi .current,
.pageNavi .inactive,
.pageNavi a{
	font-size: 1.8rem;
	width: 40px;
	height: 40px;
}
/*-- pager --*/
.pager{
	margin-top: 50px;
}
.pager a{
font-size: 1.6rem;
  width: 200px;
}

/* =======================================
	header
========================================== */
header {
}
header > div{
 position: relative;
 align-items: flex-start;
 height: 100px;
 padding: 0;
}
header #logo{
 padding-top: 13px;
}
header #logo img{
	width: 97px;
}


/* =======================================
	gnavi
========================================== */
.gnavi{
 position: relative;
	padding-top: 50px;
	align-items: center;
}
#gnaviList{
 flex: 1;
 justify-content: flex-end;
 align-items: center;
 gap: 0 min(3.5vw,40px);
}
#gnaviList > li > a{
 display:flex;
 align-items: center;
 white-space: nowrap;
 min-height: 43px;
}
#gnaviList li a:hover{
 opacity: .7;
}
#gnaviList .hasSub{
 position: relative;
 gap:0 5px;
}

.gnavi .hasSub:hover .sub{
	display: block;
	visibility: visible;
}


#gnaviList .sub{
	display: none;
	visibility: hidden;
	position: absolute;
	top: calc(100% - 1px);
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 2;
	transition: all 0.6s ease-in-out;
 padding-top: 4px;
	min-width:100px;
}
#gnaviList > li:last-child .sub{
	right: 0;
	left: auto;
	transform: translate(0, 0);
}
#gnaviList .hasSub:hover .sub{
	display: block;
	visibility: visible;
}
#gnaviList .sub li{
	font-size: min(1.0vw,1.4rem);
}
#gnaviList .sub li + li{
 border-top: 1px #fff solid;
}
#gnaviList .sub li a{
	display: block;
 background: var(--blue);
	padding: 8px 20px 10px;
 color: var(--wh);
 font-weight: 400;
 text-align: center;
	white-space: nowrap;
}
#gnaviList .sub li a:hover{
 opacity: .7;
}


.gnavi #headTel{
	position: absolute;
	right: 0px;
	top: 4px;
}
.gnavi #headTel a{
 margin-right: 7px;
 display: inline-flex;
 vertical-align: -0.2em;
}

#headLinks a:hover{
 opacity: .7;
}

/* =======================================
	main
========================================== */
body:not(#top) main{
 margin-top: 100px;
}


/* =======================================
	footContact
========================================== */
#footContact{
 padding-top: 120px;
 padding-bottom: 150px;
}
#footContact ul {
 justify-content: center;
 gap:0 min(7vw,102px);
}
#footContact ul li{
 width: 45%;
}
/* =======================================
	footer
========================================== */
footer{
 overflow: hidden;
}
footer a:hover{
	opacity: .7;
}
#footBottom{
 padding-top:12px;
}
#footBottom > .pcFlex{
 justify-content: space-between;
 gap: 0 5%;
}
.footerLeft::before{
 width:200%;
}
.footerLeft{
	/*
 width: 56%;
 max-width: 670px;*/
 flex: 1;
}

#footerRight{
 flex-flow: row wrap;
 align-items:flex-start;
 align-content: flex-start;
 gap: 25px min(4.35vw,40px);
 width: min(calc(44% - 20px ),470px);
 padding-top: 38px;
}
.footerNavi > li{
	font-size: 1.6rem;
	font-weight: 700;
 line-height: 1.4;
}
.footerNavi > li + li{
	margin-top: 3rem;
}
.footerNavi li a{
	display: block;
 color: #fff;
}
.footerNavi .sub li{
 margin-top: 10px;
 font-weight: 500;
}
.footerNavi .sub li a::before{
 content: "-";
}
.footerNavi .contact a{
	border-radius: calc(infinity * 1px);
 background: #fff;
 width: 161px;
 color: var(--Lblue);
 text-align: center;
 line-height: 41px;
}
#footerRight .insta{
 width: 100%;
 text-align: right;
}
#footerRight .insta a{
 display: block;
 width: 32px;
 margin: 0 0 0 auto;
}
#footerRight .insta img{
 margin: 0 0 0 auto;
}

footer .copy{
 position: relative;
}
footer .copy p{
 position: absolute;
 right: 0;
 bottom: 3px;
}

#pageTop{
	right: min(7.14vw,4vw);
	bottom: 53px;
}
#pageTop a:hover{
 opacity: .7;
}

/* =======================================
	pgs common
========================================== */
/*-- mainTitle --*/
.mainTitle{
	height: 200px;
}

/*-- table --*/
.basicTable > dt,
.basicTable >div>dt{
	border-right: 1px dotted var(--blue);
	padding: 15px 2.5%;
	width: 25%;
}
.basicTable > dd,
.basicTable >div>dd{
	padding: 15px 2.5%;
	width: 75%;
}
.basicTable > dt:last-of-type{
	border-bottom: none;
}
 .basicTable > dd:last-of-type{
	border-bottom: none;
}

table.basicTable thead th{
	font-size: min(1.3vw,1.6rem);
}
table.basicTable th,
table.basicTable td{
	padding: 10px 2px; 
}

.basicTable.data tbody th,
.basicTable.data tbody td{
	font-size: min(1.3vw,1.4rem);
}

/*		anchorLink
-----------------------------*/
.anchorLink{
	padding: 100px 0 50px;
	justify-content: center;
}
.anchorLink.flexLeft{
	justify-content: flex-start;
}
.secLead .anchorLink{
	padding: 50px 0 0;
}
.anchorLink ul{
	padding: 35px 0 ;
	gap:15px 20px;
}
.pageLinks{
	padding: 35px 0 ;
	gap:15px 20px;
}
.anchorLink li,
.pageLinks li{
	width: calc((100% - 20px * 3) / 4);
}
.anchorLink .pcWide{
	flex-shrink: 0;
	width: max-content;
}
.anchorLink .pcWide a{
	padding: 5px 62px 5px 24px;
}
.anchorLink li:first-child{
	border-left: 1px solid var(--blue);
}
.anchorLink li:nth-child(5n){
	border-left: 1px solid var(--blue);
}
.anchorLink a,
.pageLinks li a{
	min-height: 40px;
}
.pageLinks li a span{
	font-size: 1.4rem;
}

.pageLinkArea{
	margin-bottom: 50px;
}



/* =======================================
	top
========================================== */

/*		#mv
-----------------------------*/
#mv .inner.pcFlex{
 justify-content: space-between;
 align-items: flex-start;
}
#mv .inner .txts{
 width: 43.5%;
 padding-top: 228px;
 padding-bottom: 220px;
}
#mv .inner .imgs{
 width: 50%;
}

/*		#topNews PC
-----------------------------*/
 #topNews{
  width: 57.2vw;
  max-width: 800px;
  min-height: 140px;
  align-items: flex-end;
  gap:0 50px;
  position: absolute;
  left: 0;
  bottom: 93px;
 }
#topNews h2{}
#topNews article{
 width: calc(100% - 139px - 50px - min(12.125%,97px));
}
 

/*		#topService PC
-----------------------------*/
#topService{
 padding-block: 120px;
}
#topService .pcFlex{
 justify-content: space-between;
}
#topService .txts{
 width: 37%;
}
#topService .imgs{
 position: relative;
 width: 58.4%;
 max-width: 700px;
 padding: 371px 22px 0 0;
}
#topService .imgs dl{
 position: relative;
 z-index: 1;
 align-items: center;
 justify-content: center;
 gap:0 35px;
}
#topService .imgs >figure{
 position: absolute;
 top: 0;
 left: 91px;
 width: calc(100% + ((100vw - min(96vw,1200px)) / 2) - 91px);
}
#topService ul.pcFlex >li{
 width: 45.83%;
}

/*		#topStrength PC
-----------------------------*/
#topStrength{
 padding-block: 120px;
}
#topStrength .pcFlex{
 justify-content: space-between;
 align-items: center;
}
#topStrength .pcFlex .txts{
 width: 42%;
 max-width: 500px;
}
#topStrength .pcFlex figure{
 position: relative;
 width: 51.78vw/*52.6%*/;
 margin-right: calc((-100vw + min(96vw,1200px)) / 2);
}
#topStrength .flexRowReverse figure{
 margin-right: 0;
 margin-left: calc((-100vw + min(96vw,1200px)) / 2);
}

/*		#topCompany PC
-----------------------------*/
#topCompany{
 padding-block: 80px;
}

/*		#topRecruit PC
-----------------------------*/
#topRecruit{
 padding-top: 0;
 padding-bottom: 120px;
}
#topRecruit .inner1200.pcFlex{
 align-items: flex-start;
}
#topRecruit .txts{
 position: relative;
 width: 76%;
 max-width: 911px;
 padding-top: 120px;
}
#topRecruit .inner1200.pcFlex >figure{
 width: 38.5%;
 max-width: 461px;
 margin-left: max(-2.83%,-34px);
 margin-right:  max(-11.9%,-143px);
}

#topRecruit .txts .pcFlex{
 gap:0 55px;
}
#topRecruit .txts .pcFlex dl{
	width: 44%;
 max-width: 399px;
}
#topRecruit .txts .pcFlex figure{
	width: 58.5%;
 max-width: 531px;
 margin-left: max(-74px,-8.1%);
}

/* =======================================
  company PC
========================================== */
#companyGreeting .pcFlex.half{
	align-items: center;
}
#companyGreeting .pcFlex.half p{
	display: flex;
	justify-content: center;
	font-size: 36px;
}
#companyHistory dl dt,
#companyHistory dl dd{
	padding: 15px 2.5%;
}

#companyFacility ul li h5{
	font-size: 2rem;
}

#companyAccess .pcFlex{
	flex-flow: row wrap;
	gap:40px 30px;
}

#companyAccess ul.pcFlex >li{
	width: calc((100% - 30px)/2);
}



/* =======================================
  strength PC
========================================== */
section[id^="strength0"]{
	justify-content: space-between;
}
section[id^="strength0"] .txts{
	width: 45%;
}
section[id^="strength0"] >figure,
section[id^="strength0"] .imgs{
	width: 50%;
}

/* =======================================
  service PC
========================================== */
#service01 figure{
	max-width: 900px;
	margin: 0 auto 40px;
}
#service01 .slash{
	font-size: 2rem;
}
#service01 .slash::before,
#service01 .slash::after{
	height: 2em;
}
#service01 ul{
	justify-content: center;
	gap:0 50px;
}
#service01 ul li{
	border-radius: 40px;
	padding: 20px 40px;
	width: calc(45% - 20px);
}
#service02 .pcFlex.half,
#service03 .pcFlex.half{
	flex-flow: row wrap;
	gap:40px 0;
}


/* =======================================
  soil_business PC
========================================== */
.soilFlow > li{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap:0 40px;
}
.soilFlow > li h5{
	font-size: 2.8rem;
	width: 190px;
	height: 190px;
}
.soilFlow li .txts{
	width: calc(110% - 12.2em - 40px);
	padding-block:20px;
	padding-right: 6%;
}
.soilFlow li dl.txts,
.soilFlow li .txts >dl{
	display: flex;
	align-items: center;
}
.soilFlow li .txts dt{
	padding-right: 20px;
	width: 280px;
	text-align: center;
}
.soilFlow li .txts dd{
	border-left: 1px dotted var(--blue);
	width: calc(100% - 200px);
	padding: 0 0 0 30px;
}
.soilFlow li .txts ul.pcFlex{
	justify-content: center;
	gap:0 2em;
	align-items: center;
}
#soilBusiness01 .point h4{
	padding-bottom: 10px;
}
#soilBusiness01 .point h4 .fontA{
	font-size: 2.6rem;
	padding: 8px 15px 5px;
}
#soil_business .basicTable,
#soil_business .soilFlow{
	margin-left: auto;
	margin-right: auto;
	width: 90%;
}
#soilBusiness02 .improvedsoil figure{
	width: min(20vw,200px);
}
#soilBusiness02 .aboutSoil{
	padding: 30px;
}
#soilBusiness02 .aboutSoil dt{
	margin-right: 20px;
	width: 9em;
}
#soilBusiness02 .aboutSoil dd{
	width: calc(100% - 198px);
}
/* =======================================
  results PC
========================================== */




/* =======================================
  recruit PC
========================================== */
.recruitLead{
	padding-top: 100px;
}
.recruitLead,
#recruit03 .pcFlex{
	justify-content: space-between;
	align-items: center;
	margin-bottom: 50px;
}
.recruitLead .txts,
#recruit03 .txts{
	width: 40%;
}
.recruitLead .leadTxt{
	margin-bottom: 50px;
	font-size: 3.6rem;
}
.recruitLead dl dt{
	font-size: 2.4rem;
}
.recruitLead dl dt span::before,
.recruitLead dl dt span::after{
	height: 60px;
}
.recruitLead dl dt span::before{
	left: -30px;
}
.recruitLead dl dt span::after{
	right: -30px;
}
.recruitLead ul li{
	font-size: 1.8rem;
}
.recruitLead figure,
#recruit03 figure{
	margin-right: calc((-100vw + min(96vw,1200px)) / 2);
	position: relative;
	width: 51.78vw;
}
.recruitLead figure img{
	top: 0;
	left: 91px;
	aspect-ratio: 100 / 80;
}
#recruit01 h4{
	font-size: 2.4rem;
}
#recruit02 ul{
	gap: 0 5%;
}
#recruit02 ul li{
	width: 30%;
}
#recruit02 ul li h4{
	font-size: 2rem;
	padding: 10% 5%;
}
#recruit .employeeBenefitsList{
	gap: 40px 10%;
	margin-top: 50px;
}
#recruit .employeeBenefitsList li{
	font-size: 1.8rem;
	width: calc((100% - 20%) / 3);
}
#recruit .employeeBenefitsList li span{
	font-size: 1.5rem;
}
#recruitEntry .bnr p.bold{
	font-size: 2.4rem;
	margin-bottom: 10px;
}
#recruitEntry .bnr a{
	background-position: 95% center;
	border-radius: calc(infinity * 1px);
	padding: 40px calc(70px + 5%);
}
#recruitEntry .bnr a:hover{
	background-color: var(--wh);
	background-image: url("../images/arrow_circle_blue.svg");
}
#recruitEntry .bnr a:hover p{
	color: var(--blue);
}

/* =======================================
  works PC
========================================== */
.workLead{
	justify-content: space-between;
	align-items: center;
}
.workLead .txts{
	width: 37%;
}
.workLead .txts h3{
	margin-bottom: 50px;
	font-size: 5.2rem;
}
.workLead figure{
	margin-right: calc((-100vw + min(96vw,1200px)) / 2);
	position: relative;
	width: 51.78vw;
}
.workLead figure img{
	top: 0;
	left: 91px;
	aspect-ratio: 100 / 80;
}

.workDetail{
	margin-top: 15px;
}
.workDetail ul{
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 60px 8.34%;
}
.workDetail ul:not(.checkTxt) > li{
	justify-content: space-between;
	width: 45.83%;
}
.workDetail .txts{
	width: 45%;
}
.workDetail .txts h5{
	font-size: 1.8rem;
}
.workDetail figure{
	width: 50%;
}
.workDetail .recommendedBox{
	display: flex;
}
.workDetail .recommendedBox h5{
	width: 22%;
}
.workDetail .recommendedBox ul{
	width: calc(100% - 22% - 15px);
}
#works01 .workDetail .recommendedBox ul li + li{
	margin-top: 0.5em;
}
#works02 .workDetail .recommendedBox{
	margin-top: 60px;
}
#works02 .workDetail .recommendedBox ul{
	display: flex;
	justify-content: flex-start;
	gap: 20px 50px;
}
 
/* =======================================
	news PC
========================================== */
/*		一覧
-----------------------------*/
/*#news .pageLinks{
	padding: 35px 0 ;
	gap:15px 20px;
}
#news .pageLinks li{
	width: calc((100% - 20px * 4) / 5);
	height: 60px;
}*/

.newsBox a{
	display: flex;
 justify-content: space-between;
 align-items: flex-start;
	padding: 0 10px;
}
.newsBox a .date{
	width: 6em;
}
.newsBox a h4{
	width: calc(100% - 6em - 30px);
}

/*		single
-----------------------------*/
article{
 padding: 100px 0;
}

/* =======================================
	entry PC
========================================== */

/* =======================================
	contact. PC
========================================== */
/*#contactLead .icTel{
	font-size: 5rem;
}*/
#contactLead{
	 padding: 100px 0;
}
#contactTelfax .telfaxBox > p{
  width: 100%;
}
#contact #footBottom{
 padding-top: 0;
}
.contactPrivacy{
  text-align: center;
}
/* =======================================
	form PC
========================================== */
.formArea .basicTable input[type=text],
.formArea .basicTable input[type=email],
.formArea .basicTable input[type=tel],
.formArea .basicTable select{
	padding: 8px;
	width:100%;
}
.formArea .basicTable textarea{
	padding: 8px;
	width: 100% !important;
}
.formArea .basicTable dt{
	width: 25%;
}
.formArea .basicTable dd{
	width: 75%;
}
.formArea #fRecruit[style^="display: block;"]{
 display: flex !important;
}
.formArea #fRecruit dt{
 flex-flow: column;
 align-items: flex-start;
}
.confirm {
		margin-top: 40px;
}
.formFoot{
 margin:40px 0 0;
}