@charset "UTF-8";

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


/*タイトル
========================================== */
.h2Tit {
  margin-bottom: 40px;
  font-size: 4rem;
}
.h2Tit .en{
 font-size: 20px;
}
.h3Tit{
	font-size: 3rem;
	margin-bottom: 30px;
}
.h4Tit{
 font-size: 2.6rem;
	margin-bottom: 30px;
}
.h5Tit {  
  font-size: 2rem;
	margin-bottom: 10px;
}
.h6Tit{
	font-size: 1.8rem;
	margin-bottom: 10px;
}

/*
　テキスト
========================================== */
/*		leadTxt
-----------------------------*/
.leadTxt{
	font-size: 2.4rem;
	margin-bottom: 13px;
}

.leadWrap{
	padding: 100px 0;
}
.leadWrap h3{
	font-size: 2.8rem;
	margin-bottom: 25px;
}


.note{
  font-size: 1.2rem;
}

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


/*-- table --*/
.basicTable >dt,
.basicTable >div>dt{
	padding: 15px 2.5%;
	width: 23%;
}
.basicTable >dd,
.basicTable >div>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;
}

/* =======================================
  ページャー
========================================== */
/*-- 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{
	gap: 0 50px;
	width: 90%;
}
.pager a{
	font-size: 1.6rem;
  /* width: 200px; */
}
.pager .pagerPrev,
.pager .pagerNext{
	width: auto;
}
.pager .btnWrap{
	width: calc((100% - 100px) / 3);
	max-width: 200px;
}


/* =======================================
	header
========================================== */
header{
 height: 122px;
}
header >div{
 position: relative;
}
header #logo a img{
 width: min(24vw,337px);
}
/* =======================================
	gnavi
========================================== */
.gnavi{
 padding-top: 49px;
 align-items: center;
}

#gnaviList{
 flex: 1;
 justify-content: flex-end;
 align-items: center;
 gap: 0 min(1.4vw,19px);
}

#gnaviList li{
}
#gnaviList > li{
 position: relative;
}
#gnaviList > li >a{
 display:flex;
 align-items: center;
 height: 49px;
 color: #111111;
 font-size: min(1.2vw,1.6rem);
 font-weight: 700;
 white-space: nowrap;
}
#gnaviList li.current a,
#gnaviList li a:hover{
 opacity: .7;
}

#gnaviList .hasSub > a{
 position: relative;
 padding-right: 10px;
}
#gnaviList .hasSub > a::after{
 content: "";
 display: inline-block;
	border-bottom: 2px  var(--base2) solid;
	border-right: 2px var(--base2) solid;
	width: 6px;
	height: 6px;
	-webkit-transform: rotate(45deg);
transform: rotate(45deg);
	position: absolute;
	top: 50%;
	right: 0px;
	margin-top: -4px;
}

.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.0vw,1.4rem);
}
#gnaviList .sub li + li{
 border-top: 1px #fff solid;
}
#gnaviList .sub li a{
	display: block;
	padding: 8px 15px 10px;
 background: var(--Lyellow);
 color: var(--base2);
 text-align: center;
	white-space: nowrap;
}
#gnaviList .sub li a:hover{
 opacity: .7;
}
#headTel{
 position: absolute;
 top: 0px;
 right: 0;
 display: flex;
 align-items: flex-end;
 gap:0 3px;
 line-height: 1;
}


/* =======================================
	footer/#footContact
========================================== */
#footContact ul{
 justify-content: space-between;
 max-width: 966px;
}
#footContact ul li{
 width: 46.3%;
 max-width: 447px;
}
/* =======================================
	footer/#footBottom
========================================== */
footer{
	padding: 0 0 214px;
}
footer .inner1200.pcFlex{
  justify-content: space-between;
}
footer a:hover{
 opacity: .7;
}

.footerRight{
 width: 50%;
 max-width: 500px;
 display: flex;
 justify-content: end;
 align-items: flex-start;
 align-content:flex-start;
 flex-flow: row wrap;
 gap: 0px min(5.9vw,82px);
 line-height: 1.4;
}
.footerNavi >li{
 font-size: 16px;
 font-weight: 500;
}

.footerNavi >li + li{
  margin-top: 24px;
}
/*.footerNavi ul{
 margin-top: 10px;
 padding-left: 10px;
 font-weight: 500;
}
.footerNavi ul li + li{
 margin-top: 10px;
}
.footerNavi ul li a::before{
 content: "-";
 display: inline-block;
 margin-right: 2px;
 line-height: 1;
}*/
footer .copy{
 flex-flow: row-reverse;
}

/* =======================================
	pgs common
========================================== */
/*タイトル
========================================== */
/*-- mainTitle --*/
.mainTitle{
	height: 180px;
}
.mainTitle h2{
	font-size: 4rem;
}


/*		anchorLink
-----------------------------*/
.anchorLink{
	padding: 50px 0;
	gap:15px 1.8%;
	justify-content: center;
}
.anchorLink ul{
	padding: 35px 0;
	gap:15px 20px;
}
.pageLinks{
	gap:15px 1.8%;
	padding: 35px 0 ;
}
.pageLinks ul{
	gap:15px 20px;
}
.anchorLink li,
.pageLinks li{
	flex: 1;
	height: 60px;
}
.anchorLink a,
.pageLinks li a{
	padding: 8px 10px;
}
.anchorLink + section{
	padding-top: 65px;
}
.anchorLink.flexWrap li,
.pageLinks.flexWrap li{
 width: calc((100% - 1.8%*3)/4);
 flex: auto;
}

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

/*		#topCompatibleArea
-----------------------------*/
#topCompatibleArea{
	background-position: 42.857vw top;
	background-size: auto 100%;
}
#topCompatibleArea p + p{
	margin-top: 25px;
}

/*		#topNewcustomer PC
-----------------------------*/
#topNewcustomer .pcFlex{
 justify-content: space-between;
 align-items: center;
}
#topNewcustomer .pcFlex .txts{
 width: 53.5%;
 max-width: 642px;
}
#topNewcustomer .h2Tit{
	font-size: 3.2rem;
}
#topNewcustomer .pcFlex .btnWrap{
 margin-top: 70px;
}
#topNewcustomer .pcFlex .btn{
 margin: 0 0 0 auto;
}
#topNewcustomer .pcFlex figure{
 width: 40%;
 max-width: 470px;
}


/*	#topService PC
-----------------------------*/
#topService .inner1200 > p:not(.btnWrap){
 max-width: 590px;
}
#topService ul{
 justify-content: space-between;
}
#topService ul li{
 width: 31%;
 max-width: 372px;
}
#topService li p{
	font-size: 2.2rem;
}

/*		#topReason PC
-----------------------------*/
#topReason ul{
	gap: 33px 2.5%;
 justify-content: center;
}
#topReason li{
 width: 31.66%;
 max-width: 380px;
 height: 449px;
}
#topReason li figure{
 height: 220px;
 margin: 0 0 22px;
}
#topReason li:nth-child(1) figure img{
	width:203px;
	height:165px;
}
#topReason li:nth-child(2) figure img{
	width:214px;
	height:137px;
}
#topReason li:nth-child(3) figure img{
	width:229px;
	height:80px;
}
#topReason li:nth-child(4) figure img{
	width:239px;
	height:207px;
}
#topReason li:nth-child(5) figure img{
	width:230px;
	height:145px;
}
#topReason li:nth-child(6) figure img{
	width:207px;
	height:171px;
}

/*		#topAbout PC
-----------------------------*/
#topAbout ul{
 justify-content: space-between;
}
#topAbout ul li{
 width: 32.5%;
 max-width: 389px;
}
#topAbout li a{
	font-size: min(2.8vw,3.2rem);
}

/*		#topNews PC
-----------------------------*/
#topNews{
 justify-content: space-between;
}
#topNews h2{
 text-align: left;
}
#topNews ul{
 width: 64.2%;
 max-width: 769px;
}


/* =======================================
   reason  PC
========================================== */
#reason main section .pcFlex{
 justify-content: space-between;
 align-items: center;
}
#reason main .pcFlex > .txts{
 width: 46.5%;
}
#reason main .pcFlex > figure{
 width: 47.5%;
}
#reason01{
	padding: 100px 0 50px;
}
#reason02,#reason03,
#reason04,#reason05,#reason06{
	padding: 50px 0;
}


/* =======================================
   service PC
========================================== */
#service .detailBox dl{
	padding: 15px 1.5% 10px;
	width: calc(94% / 3);
}
#service .detailBox dl dd{
	padding: 5px 15px 15px;
}


/* =======================================
   for_newcustomer  PC
========================================== */
#for_newcustomer01 .h3Tit + p{
	text-align: center;
}
.skillFeatures{
	padding: 30px 30px 40px;
}
.skillFeatures ul{
	gap: 0 4%;
	margin: 50px auto;
}
.skillFeatures ul li{
	padding-left: 43px;
}
.skillFeatures ul li::before{
	width: 35px;
	height: 35px;
	top: calc(50% - 12px);
}
.skillFeatures div.pcFlex{
 justify-content: center;
 flex-flow: row wrap;
	gap: 30px 3%;
}
.featureDetail{
 width: 48.5%;
	padding: 30px 30px 40px;
}
.skillFeatures div.pcFlex .featureDetail:last-of-type{
 width: 52%;
}
#for_newcustomer02 .basicTable tbody th{
	width: 18%;
}
#for_newcustomer02 .basicTable tbody td{
	width: calc(82% / 3);
}
#for_newcustomer .photoSlide{
	gap: 0 30px;
	margin-top: 40px;
}
#for_newcustomer .photoSlide figure img{
	width: 493px;
	height: 370px;
}

/* =======================================
   flow  PC
========================================== */
#flowLead ul{
	justify-content: center;
	gap: 0 50px;
}
#flowLead ul li{
	padding: 30px 15px;
}
#flowLead ul li:not(:last-child)::after{
	width: 10px;
	height: 12px;
	right: -30px;
}
.flowBox{
	align-items: center;
	justify-content: space-between;
	flex-direction: row-reverse;
	padding: 30px;
}
section:not(:last-of-type) .flowBox::before{
	height: 32px;
}
section:not(:last-of-type) .flowBox::after{
	top: calc(100% + 27px);
}
.flowBox .txts{
	width: 55%;
}
.flowBox figure{
	width: 40%;
}


/* =======================================
   trainees-voice  PC
========================================== */
.pickupLead{
	gap: 0 40px;
	padding: 30px;
}
.pickupLead figure{
	width: min(50%,600px);
}
.pickupLead .txts{
	width: min(calc(50% - 40px),460px);
}
.pickupLead .h4Tit{
	margin: 50px 0 20px;
}
.interviewBox dt{
	margin: 35px 0 8px;
}


/* =======================================
    companies-voice PC
========================================== */
#companies-voice .pickupLead h4{
	line-height: 2;
	width: min(50vw,420px);
}
.episodeBox{
	padding: 30px;
}


/* =======================================
 greeting PC
========================================== */
#greetingMessage .pcFlex.half:not(:last-of-type){
	margin-bottom: min(5vw,100px);
}


/* =======================================
    guide PC
========================================== */
#guideHistory dl{
	width: min(55%,600px);
}
#guideHistory dl::before{
	left: 115px;
}
#guideHistory dl dt::after{
	left: 110px;
}
#guideHistory dl dt{
	padding: 15px 0;
	width: 150px;
}
#guideHistory dl dd{
	padding: 15px 0;
	width: calc(100% - 150px);
}


/* =======================================
    esg PC
========================================== */
#esg .leadWrap div,
#tochigiSupporters{
	padding: 30px 30px 40px;
}
.esgBox .tiBox h4 .en{
	line-height: 1;
}
.esgBox div:not(.tiBox){
	margin-bottom: 70px;
}


/* =======================================
	news PC
========================================== */
/*		一覧
-----------------------------*/
#newsList{
	padding-top: 50px;
}
#newsList ul li a{
  padding: 22px 2.3% 25px;
}
/* .newsBox.pcFlex{
 justify-content: space-between;
}
.newsBox figure{
 width: 30%;
}
.newsBox .txts{
 width: 66%;
} */

/*	詳細　single
-----------------------------*/
article{
 padding: 100px 0;
}
#newsDetail h3{
	font-size: 2.4rem;
}
.newsDetailCont:has(figure){
 display: flex;
		flex-direction: row-reverse;
	gap: 40px;
}
.newsDetailCont:has(figure) figure{
	width: 400px;
	text-align: center;
}
.newsDetailCont:has(figure) figure img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.newsDetailCont:has(figure) .txts{
	flex: 1;
}
.newsDetailCont p:not(:last-child) {
    margin-bottom: 15px;
}


/* =======================================
	materials
========================================== */
#materials .basicTable dt{
 width: 24%;
}
#materials .basicTable dd{
 width: 76%;
}
#materials .basicTable dd.pcFlex{
 display: flex;
 gap:0 20px;
}


/* =======================================
	contact PC
========================================== */
#contactTel dl dt{
	padding: 15px 20px;
}
#contactTel dl dd{
	padding: 5px 20px 20px;
}
#contactTel dl dd a{
	padding-left: 50px;
}
#contactTel dl dd a::before{
	width: 40px;
	height: 40px;
	top: calc(50% - 15px);
}


/* =======================================
	form
========================================== */
.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;
}

/* =======================================
	thanks
========================================== */


/* =======================================
	privacypolicy
========================================== */
#privacypolicy{
	margin-top: 50px;
}