@charset "UTF-8";

/* ---------------------------------------------------------------------------
  ★共通
--------------------------------------------------------------------------- */
:root{
  scroll-padding-top: 93px;
}
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 {
}
.h3Tit {
 font-size: min(5.5vw,3rem);
	margin-bottom: 40px;
}
.h4Tit {
	font-size: 2.5rem;
	margin-bottom: 20px;
}
.h5Tit {  
	font-size: 2.2rem;
	margin-bottom: 20px;
}
.h6Tit{
	font-size: 2rem;
	margin-bottom: 20px;
}

/*
　テキスト
========================================== */
.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: center;
 max-width: 1290px !important;
 height: 93px;
 padding: 0;
}
header #logo img{
	width: 186px;
}


/* =======================================
	gnavi
========================================== */
.gnavi{
	padding-top: 43px;
	align-items: center;
	right: 0;
}
#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: 33px;
}
#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(--Lblue);
	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{
 display: flex;
	align-items: flex-end;
	position: absolute;
	right: 10px;
	top: 9px;
	gap:0 35px;
}

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

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


/* =======================================
	footContact
========================================== */
#footContact{
 justify-content: space-between;
 align-items: center;
}
#footContact .txts{
 width: 50%;
}
#footContact ul{
 width: min(45%,360px);
}
/* =======================================
	footer
========================================== */
footer a:hover{
	opacity: .7;
}
#footBottom{
 padding-top: 26.14vw;
}
#footerLogo{
	width: 111px;
	margin-bottom: 25px;
}

.footerLeft{
	width:360px;
}
.footerLeft .address{
 margin-bottom: 30px;
 font-size: 17px;
 line-height: 1.6;
}
.footerLeft p{
 font-size: 14px;
 letter-spacing: 0.14em;
 line-height: 1.85;
}
#footerRight{
 flex-flow: row wrap;
 justify-content: flex-end;
 align-items:flex-start;
 align-content: flex-start;
 gap: 25px min(5.7vw,82px);
 width: min(calc(100% - 370px),580px);
}
.footerNavi > li{
	font-size: 1.6rem;
	font-weight: 700;
 letter-spacing: 0.08em;
 line-height: 1.4;
}
.footerNavi > li + li{
	margin-top: 2.5rem;
}
.footerNavi li a{
	display: block;
}
.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: 325px;
}

/*-- table --*/
.basicTable > dt,
.basicTable >div>dt{
	border-right: 1px dotted var(--blue);
	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: 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,
.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: 60px;
}
.anchorLink a,
.pageLinks li a{
	padding: 8px 30px 8px 10px;
}
.pageLinks li a span{
	font-size: 1.4rem;
}

.pageLinkArea{
	margin-bottom: 50px;
}



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

/*		#mv
-----------------------------*/
#mv{
}
@media screen and (min-width: 1400px) {
#mv{
 height: 780px;
}
#mv .mvImg{
 height: 780px;
}
#mv .mvImg::before {
	background: url(../images/top_mv_line.png) no-repeat left top / 100% 566px;
}
#mv .mvImg::after {
	height: 550px;
	top: 430px;
  background: url(../images/symbol.png) no-repeat left top / 100% 550px;
}
  
} /* -PC only- */

/*		#topNews
-----------------------------*/
#topNews{
 padding-top: 12.71vw;
 padding-bottom: 26px;
 justify-content: space-between;
}
#topNews h2{
 width: 15%;
}
#topNews ul{
 width: 78.5%;
}
#topNews p.btnWrap {
    position: absolute;
    left: 0;
    top: calc(1.6rem + min(5vw, 5rem) + 12.71vw);
}


/*		#topAbout
-----------------------------*/
#topAbout .pcFlex{
 justify-content: space-between;
}
#topAbout .txts{
 width: 68.6%;
}
#topAbout figure{
 width: 28.6%;
}


/*		#topService
-----------------------------*/
#topService {
}
#topService ol,
#topService ul{
 justify-content: space-between;
}
#topService ol li{
 width:17.9%;}
#topService ul li{
 width: 32.2%;
}


/*		#topWorks PC
-----------------------------*/
#topWorks{
 padding-top: 120px;
 padding-bottom: 130px;
}

/*		#topRecruit PC
-----------------------------*/
#topRecruit{
 position: relative;
 padding-top: 0;
 padding-bottom: 273px;
}
#topRecruit::before{
 content: "RECRUIT";
 color:#37C0FF;
 font-size: min(11.21vw,157px);
 font-weight: 900;
 letter-spacing: 0.06em;
 line-height: 1.44;
  writing-mode: vertical-rl;
 position: absolute;
 top: -0.65em;
 left: 2vw;
 z-index: 1;
}
#topRecruit .txts{
 width: 50%;
 margin: 0 0 0 auto;
 padding-top: 90px;
}
#topRecruit figure{
 position: absolute;
 top: 0;
 left: 0;
 width: 47.1%;
 height:535px;
 
}
#topRecruit figure img{
 border-radius: 77px 0 20px 0;
 object-fit: cover;
 object-position: center bottom;
 width: 100%;
 height: 100%;
}

/* =======================================
  service PC
========================================== */
#serviceLead .pcFlex{
 justify-content: space-between;
}
#serviceLead .txts{
 width: 60%;
}
#serviceLead figure{
 width: 35%;
}
#serviceReason ul{
 flex-flow: row wrap;
 justify-content: space-between;
 gap:40px 0;
}
#serviceReason li{
 width: 47%;
}
#serviceReason li h4{
 font-size: min(2.2vw,2.5rem);
}

#serviceInfo .anchorLink{
 margin-bottom: 60px;
}
.serviceInfoBox .pcFlex{
 justify-content: space-between;
}
.serviceInfoBox .pcFlex .txts{
 width: 50%;
}
.serviceInfoBox .pcFlex figure{
 width: 45%;
}
.serviceInfoBox .pcFlex.flexRowReverse .txts{
 width: 65%;
}
.serviceInfoBox .pcFlex.flexRowReverse figure{
 width: 30%;
}


/* =======================================
  company PC
========================================== */
#companyMessage .pcFlex{
 justify-content: space-between;
}
#companyMessage .txts{
 width: 60%
}

#companyMessage figure{
 width: 35%;
}
#companyMessage .secLead + figure{
	width: 40%;
  float: right;
  margin-left: 5%;
  margin-bottom: 2%;
}

/* =======================================
  history PC
========================================== */
#historyLead .balloon{
 align-items: center;
 gap:0 3%;
}
#historyLead .balloon figure{
 width: 30%;
 max-width: 300px;
}
#historyLead .balloon .txts{
	line-height: 2.5;
 padding: 40px 2.5%;
 width: calc(100% - min(30%,300px) - 2%);
}

#historyLead .balloon .txts::before,
#historyLead .balloon .txts::after{
  background-color: var(--Lblue);
  width:30px;
  height: 24px;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
 right: 99.9%;
 top: 50%;
}
#historyLead .balloon .txts::after{
 background-color: #fff;
  width: 28px;
  height: 22px;
 margin-top: 1px;
}

.historyBox h3{
	font-size: min(5vw,5rem);
}
.historyBox h3::after{
	width: 40px;
	height: 18px;
	bottom: 17px;
}
.historyBox h3 .txt_s{
	font-size: 0.5em;
 padding-left: 55px;
}
.historyBox .pcFlex{
 justify-content: space-between;
 align-items: center;
}
.historyBox .pcFlex .txts{
 /*width: 55%;*/
}
.historyBox .pcFlex figure{
 width: 40%;
  flex-shrink: 0;
}
#philosophy .pcFlex{
 justify-content: space-between;
}
#philosophy .pcFlex dl{
	padding: 30px min(2.1vw,30px);
	width: 60%;
}
#philosophy .pcFlex dl + dl{
	width: 35%;
}
#philosophy dl + dl dd{
 display: flex;
 align-items: center;
 padding: 30px 10px;
}
#philosophy .pcFlex dl dt{
	border-bottom: 8px double var(--wh);
	padding-bottom: 10px;
}
#philosophy dd .center{
	font-size: min(1.77vw,2.4rem);
}


/* =======================================
  esg PC
========================================== */
.esgLeadList li{
	padding-top: 25px;
 width: min(25.46%,280px);
}
.esgLeadList li:nth-child(1)::before{
	width: 53px;
	height: 78px;
	top: 23px;
	left: calc(50% - 27px);
}
.esgLeadList li:nth-child(2)::before{
	width: 100px;
	height: 54px;
	top: 40px;
	left: calc(50% - 50px);
}
.esgLeadList li:nth-child(3)::before{
	width: 50px;
	height: 56px;
	top: 40px;
	left: calc(50% - 25px);
}

.esgList {
 justify-content: space-between;
}
.esgList li{
 width: 31%;
}
.esgList li h4{
 font-size: min(2.2vw,2.5rem);
 text-align: center;
}
.esgOthers {
 gap:0 5%;
}
.esgOthers li{
 width: calc((100% - 4%*3)/4);
}

/* =======================================
  recruit PC
========================================== */
.contentsMenu{
 gap:0 46px;
 align-items: center;
}
.contentsMenu h3{
 margin-bottom: 0;
}

#recruitLead .pcFlex{
 justify-content: space-between;
}
#recruitLead .pcFlex .txts{
 width: 63%;
}
#recruitLead .pcFlex figure{
 width: 32%;
}
#recruitLead .pcFlex .txts p{
 line-height: 2;
}
#recruitNewstep .pcFlex{
 justify-content: space-between;
}
#recruitNewstep .pcFlex .txts{
 width: 55%;
}
#recruitNewstep .pcFlex figure{
 width: 40%;
}
#recruitType ul{
 justify-content: space-between;
}

#recruitType ul li{
 width: 31%;
}

#recruitType h4{
 font-size:min(2.2vw,2.5rem) ;
}

.recruitMenu{
 padding: 100px 0;
}
.recruitMenu .pcFlex{
 justify-content: space-between;
}
.recruitMenu ul li{
	border-left: 2px solid var(--Lblue);
	padding: 10px 3%;
	text-align: center;
	width: calc((100% - 4px) / 3);
}
.recruitMenu ul li:first-child{
	border-left: none;
}

/* =======================================
  job PC
========================================== */
.jobFlow{
 gap: 0 50px;
}
.jobFlow li{
 position: relative;
 width: calc((100% - 50px*4)/5);
}
.jobFlow li h4{
 font-size: min(2vw,20px);
}
.jobFlow li+li::before{ 
 content: "";
	display: block;
 background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 30 30" fill="none"><path d="M16.25 7.5L23.75 15L16.25 22.5M23.75 15L6.25 15" stroke="%2300A0E9" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat left top/100% auto;
 width: 30px;
 height:30px;
 position: absolute;
 right: calc(100% + 10px);
 top: 45%;
}
.jobTypeBox .pcFlex{
 justify-content: space-between;
}
.jobfaq{
 align-items: center;
}
.jobfaq figure{
 width: 25%
}
.jobfaq dl{
 width: 70%;
}

.timeline li p{
 font-size: min(1.8vw, 18px);
}


#recruitBnr{
 margin-bottom: 100px;
 padding: 6px;
}
#recruitBnr a{
background: url("../images/arrow_circle_wh.svg") no-repeat right 4.4% center / 50px auto,var(--Lblue);
 height: 150px;
 font-size: min(3.65vw,3.6rem);
}
#recruitBnr a span{
	padding-left: 60px;
}
#recruitBnr a span::before{
	width: 40px;
	height: 50px;
	top: 10px;
	left: 0;
}
#recruitBnr a:hover{
	opacity: .7;
}


/* =======================================
  benefits PC
========================================== */
.benefitsBox{}

.benefitsList{
 flex-flow: row wrap;
 gap:40px 3%;
}
.benefitsList li{
 width: calc((100% - 3%*2)/3);
}
.benefitsList li h4{
 font-size: 20px;
}
.benefitsOthers li{
 width: calc((100% - 1.5%*4)/5);
}
.galleryList{
 flex-flow: row wrap;
 justify-content: space-between;
 gap:30px 0;
}
.galleryList figure{
 width: 47.5%;
}
/* =======================================
  numbers PC
========================================== */


/* =======================================
  works PC
========================================== */
.workList {
 flex-flow: row wrap;
 gap:40px 40px;
}
.workList li{
 width: calc((100% - 40px*2)/3);
}

 
/* =======================================
	news PC
========================================== */
/*		一覧
-----------------------------*/
#news .pageLinks{
	padding: 35px 0 ;
	gap:15px 20px;
}
#news .pageLinks li{
	width: calc((100% - 20px * 4) / 5);
	height: 60px;
}

.newsBox.pcFlex{
 justify-content: space-between;
 align-items: flex-start;
}
.newsBox figure{
 width: 30%;
}
.newsBox .txts{
 width: 66%;
}

.newsBox .btn{
 height: 60px;
 margin-left: auto;
}
/*		single
-----------------------------*/
article{
 padding: 100px 0;
}

/* =======================================
	entry PC
========================================== */
#entryFlow ol{
 justify-content: space-between;
}
#entryFlow li{
 width: 22%;
}
#entryFlow li + li::before{
 content: "";
	display: block;
 background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 30 30" fill="none"><path d="M16.25 7.5L23.75 15L16.25 22.5M23.75 15L6.25 15" stroke="%2300A0E9" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat left top/100% auto;
 width: 30px;
 height:30px;
 position: absolute;
 right: calc(100% + 5px);
 top: 35%;
}
#entryFlow li .num{
	top: -25px;
}

/* =======================================
	contact. PC
========================================== */
/*#contactLead .icTel{
	font-size: 5rem;
}*/
#contactLead{
	 padding: 100px 0;
}
#contactTelfax .telfaxBox > p{
  width: 100%;
}
#contact #footBottom{
 padding-top: 0;
}
/* =======================================
	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: 30%;
}
.formArea .basicTable dd{
	width: 70%;
}
.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;
}
.contactPrivacy #errormsg_当社規定の「個人情報保護方針」に同意する{
 max-width: 39em;
 margin: 0 auto;
}