@charset "UTF-8";

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


/*タイトル
========================================== */
.h2Tit{
 font-size: 4rem;
}

.h3Tit {
  font-size: 3.5rem;
	margin-bottom: 36px;
}
.h4Tit {
	font-size: 2.4rem;
	margin-bottom: 20px;
}
.h5Tit {  
	font-size: 2rem;
	margin-bottom: 20px;
}
.h6Tit{
	font-size: 1.8em;
	margin-bottom: 20px;
}

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

/*
　ボタン,リンク
========================================== */
.btn{
}



/* =======================================
  ページャー
========================================== */
/*-- 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 > div{
 position: relative;
 height: 101px;
}
header > div.pcFlex{
	align-items: flex-end;
}
header #logo{
 padding: 0 0 32px;
 max-width: 291px;
}


/* =======================================
	gnavi
========================================== */

.gnavi{
 align-items: center;
}
.recruitLogo{
 flex:0 0 auto;
 font-size: min(1.4vw,20px);
}
.recruitLogo span{
 font-size: min(1.0vw,15px);
}

#gnaviList{
 flex: 1;
  height: 100%;
 justify-content: flex-end;
 align-items: center;
 gap: 0 min(2.8vw,36px);
}
#gnaviList > li{
 position: relative;
 color: var(--green);
 font-weight: 500;
}
#gnaviList > li >a{
 display:flex;
 align-items: center;
 height: 55px;
 color: var(--green);
 font-size: min(1.6vw,16px);
 white-space: nowrap;
}

#gnaviList li.current a,
#gnaviList li a:hover{
 opacity: .7;
}
#gnaviList .hasSub > a{
 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;
	min-width:100px;
}
#gnaviList > li:last-child .sub{
	left: 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(--green);
	padding: 8px 20px 10px;
 color: var(--wh);
 font-weight: 400;
 text-align: center;
	white-space: nowrap;
}
#gnaviList .sub li a:hover{
 opacity: .7;
}

.gnavi #headLinks{
	align-items: flex-end;
	position: absolute;
	right: 0;
	top: 12px;
	gap:0 14px;
}
#headLinks .contact,
#headLinks .recruit{
 width: 180px;
}
#headLinks .tel{
 padding-right: 10px;
 text-align: right;
}
#headLinks a:hover{
 opacity: .7;
}




/* =======================================
	main
========================================== */
main{
	margin-top: 101px;
}
/* =======================================
	footContact
========================================== */
#footContact .pcFlex{
 padding-left: 66px;
 padding-right: 76px;
 justify-content:space-between;
}
#footContact .tel{
 width: 49%;
 max-width: 387px;
}
#footContact .contact{
 width: 49%;
 max-width: 352px;
}
/* =======================================
	footer
========================================== */
footer{
 overflow: hidden;
}

footer a:hover{opacity: .7;
}
footer .footerLeft{
 flex:1 0 auto;
}

footer .footerRight{
 position: relative;
 justify-content: flex-end;
 align-items:flex-start;
 flex-flow: row wrap;
 gap:30px 5.8%;
 margin-top: 25px;
 flex:1 0 auto;
}

.footerNavi >li{
 margin-bottom: 18px;
 line-height: 1.4;
 font-weight: 700;
}
.footerNavi >li> a{
 font-weight: 700;
}
.footerNavi li ul{
 line-height: 1.4;
}
.footerNavi li ul li a{
 margin: 8px 0 0;
 display: block;
 color: #55635A;
 font-weight: 500;
 line-height: 1.4;
}
.footerNavi li ul li a::before{
 content: "-";
}
footer .footerRight .footerNavi:last-of-type >li:last-of-type{
 font-size: 14px;
}
.footPcts{
 margin-top: -38px;}
.footBtm{
 justify-content: space-between;
}


#pageTop{
	right: 2vw;
	bottom: 230px;
	width: 70px;
	height: 70px;
}
.pgs #pageTop{
	bottom: 60px;
}
#pageTop a{
	font-size: 1.4rem;
	padding-top: 10px;
}
#pageTop a::before{
	width: 8px;
	height: 8px;
	top: 14px;
	left: calc(50% - 4px);
}


/* =======================================
	pgs common
========================================== */
/*-- mainTitle --*/


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

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

/*		anchorLink
-----------------------------*/
.anchorLink,
.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);
	height: 56px;
}
.anchorLink a,
.pageLinks li a{
	padding: 8px 10px;
}

/*		other window
-----------------------------*/

/* =======================================
	top
========================================== */
/*		#mv
-----------------------------*/
#mv{
 height: calc(100svh - 102px);
/*margin-top: 102px;*/
padding: 0;
}

/*		#topService
-----------------------------*/

#topServiceBoxWrap.pcFlex{
	gap: 0 4.2%;
}
#topServiceBox{
	flex: 1;
}
.topServiceBox.pcFlex{
	margin-top: 39px;
	width: 100%
}
.topServiceBox.pcFlex figure{
	width: min(100%, 299px);
}
.topServiceBox.pcFlex figure img{
	border-radius: 6px 0 0 6px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.topServiceBox.pcFlex .txts{
	flex: 1;
}



/*		#topReason
-----------------------------*/
#topReason ul.flexWrap li {
    flex: 1;
}


/*		#topWorks
-----------------------------*/



/*		#topBtnArea
-----------------------------*/
#topBtnArea .pcFlex{
  justify-content: space-between;
  gap: 0 min(4vw,40px);
}
#topBtnArea .pcFlex .btnWrap{
	margin-top: 0;
    flex: 1;
}


/*		#topRecruit
-----------------------------*/
#topRecruit{
}
#topRecruitInner{
	position: relative;
	width: min(96%,1288px);
	margin: 0 auto;
	z-index: 1;
}
#topRecruitInner .txts{
	position: relative;
	z-index: 3;
}
#topRecruitInner .txts .recruitLinks.pcFlex{
	align-items: center;
	justify-content: center;
}
#topRecruit .linkWrap:has(.red){
	margin-right: min(1.8vw,23px);
}
#topRecruit .linkWrap:has(.white){
	position: relative;
	margin-left: min(1.8vw,23px);
}
#topRecruit .linkWrap:has(.white)::before{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: max(-1.8vw,-23px);
	content: "";
	display: inline-block;
	width: 1px;
	height: 64px;
	background-color: var(--wh);
}
#topRecruit .linkWrap:has(.red) a{
 display: block;
 transition: all .3s;
  }
#topRecruit .linkWrap:has(.red) a:hover{
  transform: scale(1.1,1.1);
 opacity: 1;
}
#topRecruitInner .flex{
 gap:0 min(46.29vw,646px);

 position: absolute;
 right: 0;
 top: 0;
 bottom:0;
 width: 100%;
 height: 100%;
	z-index: 1;
}
#topRecruit .flex >div {
    width: calc((100% - 48px) / 2);
}

/* =======================================
	reason PC
========================================== */
#reasonLead .pcFlex{
 align-items: flex-end;
}
#reasonLead .pcFlex .general{
 width: 45.1%;
}
#reasonLead .pcFlex .techno{
 width: 54.9%;
 margin-bottom: -6px;
}

#reasonMain .pcFlex{
 justify-content: space-between;
}
#reasonMain .pcFlex figure{
 width: 49%;
}
#reasonMain .pcFlex .txts{
 width: 46%;
}
#reasonHistory p{
 text-align: center;
}
/* =======================================
   service-construction PC
========================================== */
 #constructionAbout .pcFlex{
  justify-content: space-between;
  flex-flow: row-reverse;
 }
 #constructionAbout .pcFlex figure{
  width: 34%;
 }
 #constructionAbout .pcFlex p{
  width: 62%;
 }
 
 #correspondence .pcFlex{
  flex-flow: row wrap;
 }
 #constructionFlow ol{
  position: relative;
 flex-flow: row wrap;
  gap: 30px 4%;
}
 #constructionFlow ol::before,
  #constructionFlow ol::after{
  content: "";
  display: block;
  background: var(--Lgreen);
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  top: min(15vw,150px);
  z-index: -1;
 }
 #constructionFlow ol::after{
  top: auto;
  bottom: min(40vw,325px);
 }
 #constructionFlow ol li{
  width: 22%;
 }
/* =======================================
	service-telecommunications PC
========================================== */
#facilities{}
#facilities ul.pcFlex{
 justify-content: space-between;
}
#facilities ul.pcFlex li{
 width: 23%;
}
#facilities li h4{
 font-size: 22px;
}

/* =======================================
	results PC
========================================== */
#worksConstruction .pcFlex,
#worksTelecommunications .pcFlex{
 justify-content: space-between;
}
#worksConstruction .pcFlex figure,
#worksTelecommunications .pcFlex figure{
 width: 31%;
}
/* =======================================
	company PC
========================================== */
#company .anchorLink li{
	width: calc((100% - 20px * 2) / 3);
	height: 56px;
}
#companyMessage .pcFlex{
 justify-content: space-between;
}
#companyMessage .txts{
 width: 50%;
} 
#companyMessage figure{
 width: 46%;
}
#companyProfile dd.half{
 display: flex;
 flex-flow: row wrap;
 justify-content: space-between;
 align-items: flex-start;
}
#companyProfile dd.half > p{
 width: 100%;
}
/* =======================================
attempt PC
========================================== */
#esgLead figure{
	max-width: 700px;
	margin: 0 auto 30px;
}
#esgLead .txts{
	padding: 30px 4% 40px;
}
#esgLead .txts .h3Tit{
	margin-bottom: 10px;
}

.esgBox .tiBox{
	border-width: 10px;
	margin-bottom: 30px;
	padding-left: 15px;
}
.esgBox h3{
	font-size: 3.5rem;
}
#esgEnvironment .tiBox{
	border-left: 10px solid #6ebf4c;
}
#esgSocial .tiBox{
	border-left: 10px solid #3ac6dd;
}
#esgGovernance .tiBox{
	border-left: 10px solid #ef6565;
}

.esgBox div.pcFlex:not(.tiBox) .txts{
	width: 64%;
}
.esgBox div.pcFlex:not(.tiBox) figure{
	margin-left: 3%;
	width: 33%;
}

.esgBox h4{
	font-size: 2.2rem;
	margin-bottom: 15px;
}
.esgBox h4:not(:first-of-type){
	margin-top: 40px;
}
.esgBox h5{
	font-size: 2rem;
}
.esgBox h6{
	font-size: 1.8rem;
}

.esgBox ul.pcFlex{
	gap: 20px 2%;
	margin-bottom: 15px;
}
.esgBox ul.pcFlex li{
	padding: 15px 20px 20px;
	width: 49%;
}
#esgSocial div.pcFlex + ul.pcFlex{
	margin-top: 20px;
}

/* =======================================
recruit PC
========================================== */

.jobtypesection .job-description{
	display: flex;
	gap:3%
}


.jobtypesection .job-description > figure{
	width: 42%
}
	.jobtypesection .job-description > figure img{
		height: 100%;
  object-fit: cover;
	}
.jobtypesection .job-description > div{
	width: 55%;
}

#recruitMoreinfro a dt{
	font-size: 2.4rem;
	padding: 20px 5% 15px;
}
#recruitMoreinfro a dt::after{
	width: 28.7px;
	height: 28.7px;
}
#recruitMoreinfro a dd{
	padding: 15px 5% 20px;
}

#recruitLead h3 + p{
	text-align: center;
}

/* =======================================
recruit-job PC
========================================== */


/* =======================================
working-environment PC
========================================== */
#benefits ul,
#education ul{
 flex-flow: row wrap;
 justify-content: space-between;
 gap:40px 0;
}
#benefits ul li,
#education ul li{
 width: 31%;
}
#benefits ul li h4,
#education ul li h4{
 font-size: 2.2rem;
}
/* =======================================
personel PC
========================================== */
.interviewHead.pcFlex{
 flex-flow: row-reverse;
 justify-content: space-between;
 align-items: flex-end;
}
.interviewHead figure{
 width: 75%;
 margin-left: -30%;
}
.interviewHead .title{
 position: relative;
 width: 55%;
 margin-bottom: 20px;
}
.interviewBox .imgBox{
 justify-content: space-between;
}
.interviewBox .imgBox figure{
 width: 44%;
}
.interviewBox .imgBox dl{
 width: 52%;
}


/* =======================================
numbers PC
========================================== */
.numbersBox{
	width: calc((100% - 4.85%)/2);
}

#numbersIntro .numbersBox:nth-of-type(2) .img{
	padding: 35px 0;
}
#numbersIntro .numbersBox:nth-of-type(4) .img{
	padding: 5px 15px;
}

#numbersSurvey .numbersBox:nth-of-type(4){
	padding-left: 4.25%;
	padding-right: 0.7%;
}
#numbersSurvey .numbersBox:nth-of-type(4) .img{
	padding-top: 5px;
	padding-bottom: 15px;
}

/* =======================================
entry PC
========================================== */
.flowSteps{
 justify-content: space-between;
}
.flowSteps > li{
	width: calc((100% - 20px*4)/5);
}
.flowSteps > li + li::before{ 
	content: "";
	position: absolute;
	top: 34%;
	right:calc(100% + 8px);
	display: block;
	border-top: 3px var(--yellowGreen) solid;
	border-right: 3px var(--yellowGreen) solid;
	width: 10px;
	height: 10px;
	-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#casualMeeting .pcFlex{
 justify-content: space-between;
}
#casualMeeting .attentionBox li,
#casualMeeting .attentionBox p{
 font-size: 18px;
}
#casualMeeting .attentionBox .note{
 font-size: 16px;
}
#casualMeeting .fukidashi figure{
	width: 38%
}
/* =======================================
	news PC
========================================== */
/*		一覧
-----------------------------*/
.newsBox.pcFlex{
 justify-content: space-between;
 gap: 0 3%;
}
.newsBox > figure{
 width: 33%;
}
.newsBox .txts{
	flex: 1;
}

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

/* =======================================
	contact
========================================== */
#contactLead .icTel{
	font-size: 5rem;
}

/* =======================================
	form
========================================== */
.tb_cont th{
	border-bottom: 1px solid var(--wh);
	padding: 15px 2.5%;
	width: 25%;
}
.tb_cont td{
	border-bottom: 1px solid var(--base);
	padding: 15px 2.5%;
	width: 75%;
}
.tb_cont td input:not([type=checkbox]):not([type=radio]){
	padding: 8px;
	width: 80%;
}
.tb_cont td textarea{
	padding: 8px;
	width: 80% !important;
	height: 100px !important;
}
.tb_cont .hissu{
	padding: 3px 3%;
}
.tb_cont .zip{
	margin-right: 10px;
	width: 20%;
}
.tb_cont .zipBtn{
	font-size: 1.4rem;
	padding: 10px 14px;
}
.tb_cont .w50{
	width: 58%;
}
.tb_cont .fileBtn li{
	width: 33%;
}
.tb_cont td input.radiobtn{
    width: auto;
}
.confirm {
  margin-top: 40px;
}
.confirm input[type="submit"]:hover{
  cursor: pointer;
}

/* =======================================
	privacypolicy
========================================== */