@charset "UTF-8";

/* ---------------------------------------------------------------------------
  ★共通
--------------------------------------------------------------------------- */
:root{
  scroll-padding-top: 171px;
}
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: 47.6%;
}
.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;
}

/*タイトル
========================================== */
#top .h2Tit,
.pgs .h3Tit{
	font-size: min(2.8vw, 2.8rem);
  font-size: min(7.476vw, 2.8rem);
}
#top .h3Tit,
.pgs .h4Tit{
  font-size: min(2.4vw, 2.4rem);
  font-size: min(6.4vw, 2.4rem);
}

/*
　テキスト
========================================== */
.note{
  font-size: 1.2rem;
}

.enTit{
  font-size: min(6.7vw, 9.6rem);
}
.enTit span.fontS{
  font-size: min(1.8vw, 1.8rem);
}

/*
　ボタン,リンク
========================================== */
.btn{
	width: min(100%, 222px);
}
.btn.btnL{
  width: auto;
  min-width: 340px;
}

/*hover animation*/
#topNews ul li a,
.footerNavi li a span{
	position: relative;
}
#topNews ul li a::after,
.footerNavi li a span::after{
	content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
	width: 0;
    height: 1px;
    transition: width 0.7s;
    background-color: var(--gray);
}
#topNews ul li a:hover::after,
.footerNavi li a:hover span::after{
	width: 100%;
}


/*-- table --*/
.basicTable >dt,form#mailformpro dl.basicTable > dt{
	padding: 15px 2.5%;
	width: 30%;
}
.basicTable >dd,form#mailformpro dl.basicTable > dd{
	padding: 15px 2.5%;
	width: 70%;
}
.basicTable.dtWide dt{
	width: 80%;
}
.basicTable.dtWide dd{
	width: 20%;
}
.basicTable >dt:last-of-type{
	border-bottom: 1px solid var(--gray);
}

table.basicTable thead th{
	font-size: 1.8rem;
}


/*
　ボックス、リスト
========================================== */

.txtImgBox.pcFlex.half > *,
.txtImgBox.flex.half > *,
.txtImgBox.flexWrap.half > *,
.txtImgBox.pcFlex > .txts,
.txtImgBox.flex > .txts,
.txtImgBox.flexWrap > .txts{
	flex: 1;
}


.flowList li .txts{
  margin: 0 -10px;
}
.flowList li .num{
	font-size: 4rem;
	width: 80px;
  height: 80px;
}
.flowList li + li figure::before{
	top: 50%;
	left: min(-3.9vw, -65px);
}

/* =======================================
  ページャー
========================================== */
/*-- 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;
}
.pager a:hover{
	opacity: 0.7;
}

/* =======================================
	header
========================================== */
header{
	border-bottom: 1px solid var(--Lgray);
}
#headerInner.pcFlex{
	align-items: flex-end;
}
.headerContact{
	position: absolute;
	bottom: min(4.5vw, 63px);
	right: 0;
}
.headerContact .tel{
	font-size: 2.4rem;
	font-weight: 400;
}
.headerContact .tel a{
	color: var(--base);
}
.headerContact .tel .time{
	margin-left: 8px;
	font-size: 1.4rem;
	color: var(--gray);
}
.headerContact .tel .time .fontS{
	font-size: 1.2rem;
}


/* =======================================
	gnavi
========================================== */
.gnavi{
 flex: 1;
}

#gnaviList{
 justify-content: flex-end;
}
#gnaviList li{
}
#gnaviList > li{
 position: relative;
}
#gnaviList > li:not(.tel) >a,
#gnaviList > li.hasSub >span{
	display: block;
	border: solid var(--Lgray);
	border-width: 1px 0 0 1px;
	height: 100%;
	padding: min(1.4vw,1.8rem) 1.4vw;
	font-size: min(1.5vw,1.5rem);
	letter-spacing: 0.04em;
	line-height: 1;
	font-weight: 700;
	white-space: nowrap;
}
#gnaviList > li.hasSub >span{
	cursor: pointer;
}
@media screen and (max-width: 768px) {
}/* //end for SP */
@media screen and (min-width: 1200px) {
#gnaviList > li:not(.tel) >a,
#gnaviList > li.hasSub >span{
	padding: min(1.4vw,1.8rem) 2vw;
}
}/* //end for PC */
@media screen and (min-width: 1300px) {
#gnaviList > li:not(.tel) >a,
#gnaviList > li.hasSub >span{
	padding: min(1.4vw,1.8rem) 4rem;
}
}/* //end for PC */

#gnaviList li.current a,
#gnaviList li a:hover{
 opacity: .7;
}

#gnaviList .hasSub > a,
#gnaviList .hasSub > span{
 position: relative;
}
#gnaviList .hasSub > a::after,
#gnaviList .hasSub > span::after{
	content: "";
  display: inline-block;
  margin-left: 6px;
  width: 9px;
  height: 8px;
  background: url("../images/ic_gnavi_arrow.svg") no-repeat center / 100%;
}

.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;
 background: rgba(255,255,255,.8);
 min-width:100px;
}
#gnaviList .hasSub:hover .sub{
	display: block;
	visibility: visible;
}
#gnaviList .sub li{
	font-size: min(1.2vw,1.4rem);
}
#gnaviList .sub li + li{
 border-top: 1px #ccc solid;
}
#gnaviList .sub li a{
	display: block;
 background: var(--yellow);
	padding: 8px 20px 10px;
 color: var(--base);
 font-weight: 600;
 text-align: center;
	white-space: nowrap;
}
#gnaviList .sub li a:hover{
 opacity: .7;
}


/* =======================================
	footer/#footContact
========================================== */
#footContact .h2Tit{
  margin-bottom: 5rem;
}
#footContactBtns.pcFlex{
	position: relative;
	justify-content: center;
	gap: 0 min(26.6vw,266px);
}
#footContactBtns.pcFlex::before{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	content: "";
	display: inline-block;
	background-color: #C9C9C9;
	width: 1px;
	height: 100%;
}


/* =======================================
	footer/#footBottom
========================================== */
footer a:hover{
  opacity: 0.7;
}
#footBottom .inner1200.pcFlex{
  justify-content: space-between;
  gap: 0 30px;
}

#footBottom{
	gap: 0 30px;
}
#footBottom .address{
  margin-top: 50px;
	font-size: 1.6rem;
}
#footBottom .tel{
  margin-top: 35px;
  font-size: 2.4rem;
}

.footerRight{
	flex: 1;
}
.footerRight > .pcFlex{
  display: flex;
  justify-content: end;
  gap: 0 min(4vw,50px);
 line-height: 1.4;
}


.footerNavi li a{
  font-size: 1.5rem;
  line-height: normal;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--base);
}
.footerNavi li a{
	display: block;
	margin-bottom: 1em;
}
.footerNavi .sub li a{
	margin-left: 1em;
}
.footerNavi .sub li a::before{
	content: "-";
	display: inline-block;
	width: 1em;
	text-align: center;
}

.footerPrImg a:hover{
  opacity: 0.7;
}




/* =======================================
	pgs common
========================================== */

/*		anchorLink
-----------------------------*/
.anchorLink{
	padding: 50px 0;
	gap:0 1.8%;
	justify-content: center;
}
.anchorLink ul{
	padding: 35px 0;
	gap:15px 20px;
}
.pageLinks{
	gap:15px 30px;
	padding: 35px 0 ;
}
.pageLinks ul{
	gap:15px 20px;
}
/*hover action*/
.pageLinks li a::before,
.pageLinks li a::after {
  background-color: var(--wh);
}
.pageLinks li a span::before,
.pageLinks li a span::after {
  content: "";
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-transform-origin: center;
  transform-origin: center;
  box-sizing: inherit;
  position: absolute;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transform: scale3d(1, 1, 1);
}
.pageLinks li a::before,
.pageLinks li a::after {
  background-color: var(--wh);
  transform: scale3d(0, 1, 1);
}
.pageLinks li a span::before {
  border: solid var(--Lgray);
  border-width: 1px 0 1px 0;
}
.pageLinks li a span::after {
  border: solid var(--Lgray);
  border-width: 0 1px 0 1px;
}
.pageLinks li a:hover::before,
.pageLinks li a:hover::after {
  transform: scale3d(1, 1, 1);
}
.pageLinks li a span:hover::before {
  transform: scale3d(0, 1, 1);
}
.pageLinks li a span:hover::after {
  transform: scale3d(1, 0, 1);
}


.anchorLink li,
.pageLinks li{
	flex: 1;
	height: 50px;
}
.anchorLink a,
.pageLinks li a{
	padding: 8px 10px;
}
.anchorLink + section{
	padding-top: 65px;
}

main .pageLinks:last-of-type li{
 height: 70px;
}

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

/*		#mv
-----------------------------*/
#mvSlider{
  margin: 0 0 0 auto;
	width: 53.7%;
}
#mvInner.pcFlex{
	justify-content: space-between;
	flex-direction: row-reverse;
	align-items: center;
}
#mvInner{
  position: absolute;
  inset: 0 0 0 0;
  height: 100%;
  margin: 0 auto;
  display: grid;
  align-items: center;
}

#mvTxts{
  margin: 0 auto 0 0;
  min-width: 33.1%;
}
#mvTxts p{
	letter-spacing: 0.18em;
}

/*		#topConcept
-----------------------------*/
#topConcept{
}
#topConceptCont.pcFlex{
	flex-direction: row-reverse;
	gap: 0 3%;
}
#topConceptCont.pcFlex .txts{
    margin-right: calc(49.5% - 46.2vw);
	width: 46.2vw;/*647+26=673px*/
}
.topConceptListWrap{
	width: min(87%,460px);
}

/*		#topCompany
-----------------------------*/
#topCompany .pcFlex{
	gap: 0 5%;
}
#topCompany .pcFlex .txts{
	width: 51.6%;
}
#topCompany .pcFlex .imgs{
    margin-right: calc(43.4% - 45.2vw);
	width: min(45.2vw,633px);
}

/*		#topSustainability
-----------------------------*/
#topSustainability .pcFlex{
	flex-direction: row-reverse;
	gap: 0 6.6%;
}
#topSustainability .pcFlex .txts{
	flex: 1;
}

/*		#topServices
-----------------------------*/
#topServicesList{
	gap: 0 7.8%;
}
#topServicesList li{
	width: calc(84.4%/3);
}

/*		#topRecruit
-----------------------------*/
#topRecruit a figure{
	overflow: hidden;
}
#topRecruit a figure img{
	transform: scale(100%);
    transition: transform 0.7s;
}
#topRecruit a:hover figure img{
	transform: scale(110%);
    transition: transform 0.7s;
}

/*		#topNews
-----------------------------*/

/*hover animation*/
#topNews ul li a::after{
    background-color: var(--gray);
}

/* =======================================
   #company  PC
========================================== */
#companyLicense .basicTable.dtWide dd,
#companyPersonalqual .basicTable.dtWide dd{
	text-align: center;
}

/* =======================================
   #sustainability PC
========================================== */
.sustainabilityTtl .en{
	font-size: 3rem;
	letter-spacing: 0.03em;
}

/* =======================================
   #services PC
========================================== */
.reasonList.circleImgTxts figure{
  width: min(30vw,300px);
}

#servicesContent .circleImgTxts .txts::before{
  top: -80px;
  left: -80px;
}

.sustainabilityTtl{
  font-size: 1.8rem;
}
.reasonList.circleImgTxts li{
  width: calc(92%/3);
}

.sustainabilityBox .tiBox{
	width: 40%;
}
.sdgsIc li{
  width: 70px;
}
.sustainabilityBox .txtImgBox{
  align-items: center;
	margin-top: 0;
	gap: 20px 10%;
	width: 60%;
}
.sustainabilityBox .txtImgBox .imgs{
  width: min(20vw, 192px);
  height: min(20vw, 192px);
}
.sustainabilityBox .txtImgBox .imgs img{
	width: 96px;
}
.sustainabilityBox .txtImgBox li{
  font-size: min(6.4vw, 2.2rem);
	line-height: 2;
}
.sdgsIc.flexWrap{
	margin-top: 30px;
}

/* =======================================
   #inspection PC
========================================== */
#inspectionMerits .leadTxt{
	margin-bottom: 30px;
}
.meritsBox .checkList{
	display: flex;
	gap: 15px 5%;
	flex-wrap: wrap;
}
.meritsBox .checkList li{
  width: calc(95% / 2);
}
#inspectionMerits .checkList{
	width: 90%;
}

#inspectionAbout .txtImgBox.pcFlex.half{
	align-items: flex-start;
}

#inspectionPhoto .pcFlex{
  flex-direction: row-reverse;
  gap: 4%;
}
#inspectionPhoto .pcFlex .txts{
	flex: 1;
}
#inspectionPhoto .pcFlex figure{
	width: min(100%,330px);
}

/* =======================================
  #restore PC
========================================== */
#restoreMerits .leadTxt{
	margin-bottom: 30px;
}
#restoreMerits .checkList{
	width: 96%;
}

/* =======================================
  #reform PC
========================================== */
#reformMerits .leadTxt{
	margin-bottom: 30px;
}
#reformMerits .checkList{
	width: 90%;
}

/* =======================================
  #recruit PC
========================================== */
.voiceBox.bdBox .voiceList {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px 30px;
}
.voiceBox.bdBox .voiceList li{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	width: 45%;
}
.flexWrap.onephraseList{
  gap: 30px min(5%,50px);
}
.flexWrap.onephraseList li{
	white-space: nowrap;
}
.flexWrap.onephraseList li:nth-of-type(1){  font-size: 7.5rem;}
.flexWrap.onephraseList li:nth-of-type(2){  font-size: 3.8rem;}
.flexWrap.onephraseList li:nth-of-type(3){  font-size: 5.3rem;}
.flexWrap.onephraseList li:nth-of-type(4){  font-size: 7rem;}
.flexWrap.onephraseList li:nth-of-type(5){  font-size: 6.5rem;}
.flexWrap.onephraseList li:nth-of-type(6){  font-size: 3.8rem;}

#recruitWork .pcFlex.circleImgTxts{
	gap: 30px 5%;
}

.recruitboxWrap .recruitbox + .recruitbox > .txtImgBox{
	margin-top: 150px;
}

.recruitbox .txtImgBox{
	align-items: stretch;
}
.recruitbox:nth-of-type(even) .txtImgBox{
	flex-direction: row-reverse;
}
.recruitbox .txtImgBox .txts{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 5% 2% 0 0;
}
.recruitbox .txtImgBox .txts::before{
	border-top: 1px solid var(--base);
	border-right: 1px solid var(--base);
	width: 100px;
	height: 100px;
	right: 0;
	left: auto;
}
.recruitbox:nth-of-type(even) .txtImgBox .txts{
	padding: 5% 0 0 2%;
}
.recruitbox:nth-of-type(even) .txtImgBox .txts::before{
	border-right: none;
	border-left: 1px solid var(--base);
	right: auto;
	left: 0;
}
.recruitbox .imgs h3{
	font-size: 4rem;
}
.recruitbox .txtImgBox .txts p{
  font-size: min(2.4vw, 2.4rem);
}
#recruitWork .circleImgTxts figure{
	width: min(100%,350px);
  height: auto;
}

/* =======================================
  #interview PC
========================================== */
#interviewLead .leadTxt{
	margin-bottom: 50px;
}
#interviewLead #interviewImgs.pcFlex{
	gap: 20px 3%;  
}

.interviewBoxHead {
  position: relative;
}
.interviewBoxHead .txts {
  padding: 10px 20px;
	display: flex;
  flex-direction: column;
	position: absolute;
  inset: 0 0 0 0;
}
.interviewBoxHead .txts h3 {
  font-size: 2rem;
  width: 130px;
  height: 130px;
	margin-bottom: 20px;
  padding: 15px 10px 15px 15px;
}
.interviewBoxHead .txts .num {
  font-size: 5rem;
	margin-bottom: 15px;
}
.interviewBoxHead .txts .name {
	display: flex;
	align-items: center;
	font-size: 3.5rem;
	text-shadow:0px 0px 4px var(--base);
}
.interviewBoxHead .txts .name .role{
	border-left: 1px solid var(--wh);
	font-size: 2.4rem;
  margin-left: 1em;
	padding-left: 1em;
}
.pcFlex.interviewBoxCont {
	gap: 5%;
}
.pcFlex.interviewBoxCont .interviewBoxFaq{
	flex: 1;
}
.interviewBoxFaq dt{
  font-size: 2rem;
}
.interviewBoxSubs h4 {
  font-size: 2rem;
	margin-bottom: 2rem;
}

/* =======================================
  #benefit PC
========================================== */
.benefitEmployeeBox{
	width: calc(96% / 3);
	display: flex;
	flex-direction: column;
	padding: 30px;
}
.benefitEmployeeBox dt{
  font-size: 2rem;
}
.benefitEmployeeBox dt figure{
	height: 100px;
}
.benefitEmployeeBox dt figure img{
	height: 80px;
}
.benefitEmployeeBox:nth-of-type(1) dt figure img{
	height: 75px;
}
.benefitEmployeeBox:nth-of-type(2) dt figure img{
	height: 65px;
}
.benefitEmployeeBox:nth-of-type(5) dt figure img{
	height: 60px;
}
.benefitEmployeeBox dd{
	flex-grow: 1;
}
.benefitOther{
	margin-top: 80px;
  text-align: center;
}
.benefitOther .etcTxt{
	width: min(calc(100% - 3em),788px);
}
.benefitOther .etcTxt::after{
  position: absolute;
  left: 100%;
  bottom: 0;
}

/* =======================================
	news PC
========================================== */
/*		一覧
-----------------------------*/
.newsBox{
	display: flex;
	justify-content: space-between;
	gap: 4%;
}
.newsBox a:hover{
	opacity: .7;
} 
.newsBox figure{
 width: 30%;
}
.newsBox .txts{
 width: 66%;
}

/*	詳細　single
-----------------------------*/
article{
 padding: 100px 0;
}
#newsDetail h3{
	font-size: 2.4rem;
}
.newsDetailCont:has(figure){
	align-items: flex-start;
	flex-direction: row-reverse;
	gap: 4%;
}
.newsDetailCont:has(figure) figure{
	width: 40%;
	text-align: center;
}
.newsDetailCont:has(figure) figure img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.newsDetailCont:has(figure) .txts{
	flex: 1;
}

/* =======================================
	contact
========================================== */
.telbox{
	padding: 30px;
}
.telbox .tel{
  transform: translateX(30px);/*.telbox .telNumのpadding-rightの半分*/
}
.telbox .telNum{
	font-size: 4rem;
  padding-right: 60px;
}
.telbox .telNum::before{
  width: 60px;
  height: 60px;
}
.telbox .time{
	font-size: 1.8rem;
}
.telbox .time .fontS{
	font-size: 1.6rem;
}

/* =======================================
	form
========================================== */
#contactForm .checkboxWrap .pcFlex{
	flex-wrap: wrap;
	gap: 0 30px;
}
#contactForm form#mailformpro dl dt{
  font-size: 2rem;  
}
#contactForm .basicTable dt .note{
  margin-right: -10%;
  letter-spacing: -0.1em;
}
.basicTable .hissu{
  right: 5%;
}
.formFoot{
 margin:40px 0 0;
}
.formBtn {
  margin-top: 60px;
}

/* =======================================
	thanks
========================================== */
#thanks p{
  font-size: 1.8rem;
}

/* =======================================
	privacypolicy
========================================== */
#privacyPolicy{
	margin-top: 50px;
}
#privacypolicy > div{
padding: 70px min(5%,80px);
}
.policyBox{
	padding: 20px 2%;
}
.policyBox .h5Tit{
	margin-top: 40px;
}