@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%;
}
.txtImgBox{
 justify-content: space-between;
 align-items: flex-start;
}
.txtImgBox .txts{
 width: 56%;
}
.txtImgBox figure{
 width: 39%;
}
.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.6rem;
	margin-bottom: 45px;
}
.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;
}

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



/* =======================================
  ページャー
========================================== */
/*-- 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
========================================== */
#top header:not(.fixed){
 background: transparent;
}
header.fixed{
 background: #fff;
}

header .inner1200{
 position: relative;
}
header .inner1200.pcFlex{
	gap: 0 10px;
}
header #logo{
 padding: 17px 0 11px;
 max-width: 316px;
  position: absolute;
  left: 0;
  top: 0;
}
header #logo a img{
  width: 205px;
  height: 77px;
}

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

.gnavi{
 align-items: center;
 padding-top: 60px;
 flex: 1;
}

#gnaviList{
 flex: 1;
  height: 100%;
 justify-content: flex-end;
 align-items: center;
 gap: 0 20px;
}
#gnaviList li{
}
#gnaviList > li{
 position: relative;
 font-size: 1.5rem;
}
#gnaviList > li >a{
 display:flex;
 align-items: center;
 height: 48px;
 font-size: min(1.3vw,1.5rem);
 white-space: nowrap;
}

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

#gnaviList .hasSub > a{
 position: relative;
 gap:0 5px;
}
#gnaviList .hasSub > a::after{
 content: "＋";
 display: inline-block;
 color: var(--red);
}

.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 #ccc solid;
}
#gnaviList .sub li a{
	display: block;
 background: var(--yellow);
	padding: 8px 20px 10px;
 color: var(--base);
 font-weight: 400;
 text-align: center;
	white-space: nowrap;
}
#gnaviList .sub li a:hover{
 opacity: .7;
}

.gnavi .headerLinks{
 align-items: flex-end;
	position: absolute;
	right: 0;
	top: 0px;
	gap:0 5px;
}
.headerLinks a{
 border-radius: 0 0 3px 3px;
}
.headerLinks a:hover{
 opacity: .7;
}




/* =======================================
	main
========================================== */
main{
	margin-top: 108px;
}
#top main{
 margin-top: 0;
}

/* =======================================
	footer
========================================== */
footer{
}

footer a:hover{opacity: .7;
}
.footInfo > .inner1200{
 overflow: hidden;
 gap:20px 0;
}
.footerNavi >li{
 margin-bottom: 12px;
}
.footerNavi >li> a:not(.btn){
 display: block;
 position: relative;
 padding: 0 0 0 23px;
}
.footerNavi >li> a:not(.btn)::before{
 content: "";
 border-radius: 50%;
 background:var(--red) ;
 width: 9px;
 height: 9px;
 position: absolute;
 top: .8em;
 left: 0;
}
.footerNavi li ul{
 margin-top: 10px;
}
.footerNavi li li a{
 position: relative;
 padding: 0 0 0 23px;
 font-size: 15px;
 line-height: 2.53;
}
.footerNavi li li a::before{
 content: "";
 display: block;
 background:var(--red) ;
 width: 5px;
 height: 2px;
 position: absolute;
 top: .7em;
 left: 2px;
}

.footerNavi .pcFlex{
 flex-flow: row wrap;
 gap:0 min(5vw,90px);
 width: 300px;
}
.footerNavi .pcFlex > a{
 width: 100%;
}
.footerNavi .footTour{
 margin-top: 15px;
}

footer .footBtm{
  border: 10px solid #f0eff1;
  padding-bottom: 20px;
}
footer .footerLeft{
 position: relative;
 /**/flex:1 0 auto;
 width: 78%;
 margin-top: 40px;
}

footer .footerRight{
 flex:1 0 auto;
 width: 22%;
 margin-top: 65px;
}
footer copy{
 font-size: min(1.3vw,14px);
}
#pageTop{
	right: 4vw;
}



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

.imgTit{
	margin-bottom: 30px;
  line-height: 15px;
}
.imgTit span.deco{
	margin-bottom: 22px;
  font-size: 2rem;
}
.imgTit span.deco::before{
  margin-right: 8px;
  width: 20px;
  height: 18px;
  transform: translateY(0.2em);
}
.imgTit img{
	display: inline;
	height: 34px;
	width: auto;
	margin-left: 3px;
	margin-right: 3px;
}

/*-- mainTitle --*/
.mainTitle{
	height: 240px;
}
.mainTitle::after{
	width: 480px;
	height: 240px;
}
.mainTitle h2{
	font-size: 3.6rem;
	padding-left: 110px;
}
.mainTitle h2::after{
	width: 112px;
	height: 240px;
}
.mainTitle span.tiSub{
 margin-bottom: 15px;
 padding: 4px 15px 7px;
}

/*-- title --*/
.pgs .h3Tit::before{
	width: 40px;
	height: 37px;
	top: -40px;
	left: calc(50% - 20px);
}

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

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

/* =======================================
	top
========================================== */
#top section{
	padding: 110px 60px 60px;
}

/*		#mv
-----------------------------*/
.mvImg .inner1200{
  max-width: initial !important
}
#mv{
 /*height: 100vh;
 height: 100svh;*/
 padding-top: 105px;
 padding-bottom: 0;
}
.mvSlider {
  margin: 0 0 0 auto;
  width: min(71.4%, 1000px);
}

.mvTxts {
  left: -50px;
}
.mvBtnWrap {
  right: -50px;
}

/*		#topLead
-----------------------------*/
#topLead h2.imgTit img:has(+br):first-of-type {
    display: block;
    margin: 0 auto;
}


/*		#topCompany
-----------------------------*/
.bgLGray:has(#topCompany){
  border-radius: 51px 51px 0 0;  
}
#topCompany{
  background: url('../images/top_company_bg01.png') no-repeat right top/ 267px auto; 
}
.topCompanyText.pcFlex{
	justify-content: space-between;
}

.topCompanyList li{
  width: calc((100% - 40px)/2);
  
}
.topCompanyList li p{
 font-size: 22px;
 line-height: 1.1;
}
/*		#topWork
-----------------------------*/
#topWork{
  
}
#topWork .inner1200.pcFlex{
	flex-direction: row-reverse; 
	gap: 44px; 
}
#topWork .inner1200.pcFlex > *{
	width: calc((100% - 44px)/2);
}
#topWork .inner1200.pcFlex > figure{
	padding-right: 30px;
}
#topWork li{
 font-size: 20px;
}

/*		#topDepartment
-----------------------------*/
#topDepartment .inner1200.pcFlex{
	gap: 0 9%;
}
#topDepartment .inner1200.pcFlex .txts{
	flex: 1;
}
#topDepartment .inner1200.pcFlex figure{
	width: min(28.9vw, 405px);
}

#topDepartment .link{
 font-size: 20px;
}

/*		#topInterview
-----------------------------*/
.topInterviewSlider{
	margin-left: -12px;
}
.topInterviewSlider .slick-slide{
	padding: 0 12px;
}

#topTour ul{
 flex-flow: row wrap;
}
#topTour ul li{
 background-position: left top 5px;
 width: 50%;
 margin-bottom: 15px;
}

/* =======================================
	about PC
========================================== */
#aboutLead p{
 text-align: center;
}
#aboutMission .pcFlex{
 align-items: center;
 justify-content: space-between;
 padding: 20px 0;
}
#aboutMission .pcFlex .txts{
 width: 62%;
}
#aboutMission .pcFlex figure{
 width: 34%;
}
#aboutMission .txts dt,
#aboutMission .txts dd,
#aboutMission .pcFlex .txts li{
 font-size: 20px;
}

#aboutMission .pcFlex:not(.bgLGray) figure{
 max-height: 350px;
 overflow: hidden;
}
#aboutMission .pcFlex:not(.bgLGray) figure img{
 object-fit: cover;
 width: 100%;
 height: 100%;
}


#aboutChildsheet,
#aboutSdgs{
 width: 48%;
}

/* =======================================
	childsheet PC
========================================== */
#childsheetLead .pcFlex{
 justify-content: space-between;
}
#childsheetLead .pcFlex li{
 width: 31%;
}
#childsheetMain .pcFlex{
 justify-content: space-between;
}
#childsheetMain .txts{
 width: 60%;
}
#childsheetMain figure{
 width: 36%;
}
#childsheetMain .pcFlex + h3{
 margin-top: 50px;
}

/* =======================================
	Sdgs PC
========================================== */
#sdgsLead .pcFlex{
 justify-content: space-between;
 align-items: center;
}
#sdgsLead figure{
 width: 33%;
}
#sdgsLead .txts{
 width: 62%;
}
#sdgsLead h3{
 text-align: left;
}
#sdgs .ttlArea{
 justify-content: space-between;
 align-items: center;
}
.sdgsList{
justify-content: space-between;
}
.sdgsList > li{
 width: 31%;
}
.sdgsList li figure{
 height: 248px;
}


/* =======================================
  works PC
========================================== */
#works #aboutLead .anchorLink{
 padding-top: 60px;
}
#works .centerSlider .slick-slide{
 margin: 0 10px;
}

#worksMood .pcFlex{
 justify-content: space-between;
}
#worksMood .pcFlex li{
 width: 30%;
}

#worksNumbers ul li{
 width: calc((100% - 40px) / 3);
}
#worksNumbers ul li:nth-child(4),
#worksNumbers ul li:nth-child(5){
	width: calc((100% - 20px) / 2);
}

#worksBenefits ul{
 flex-flow: row wrap;
 gap:35px 40px;
}
#worksBenefits ul li{
 width: calc((100% - 40px*3)/4);
 min-width: 200px;
}
#worksBenefits figure img{
	max-width: 50%;
}

#worksGallery ul {
 justify-content: space-between;
}
#worksGallery ul li{
 width: 31%;
}
#worksGallery .linkWrap{
 text-align: center;
}

/* =======================================
gallery PC
========================================== */
#gallery main .inner1200 .pcFlex{
 flex-wrap: wrap;
 gap: 40px 0;
}

/* =======================================
departments PC
========================================== */
.jobMap{
 gap:20px 10px;
}

.jobMap dl{
 width:calc((100% - 10px*3)/4);
}

/* =======================================
manufacturing ///  PC
========================================== */
.departmentHead .txts{
 width: 62%;
 position: absolute;
 right: 0;
 bottom: -30px;
}

#training ul{
 gap:40px 40px;
 flex-flow: row wrap;
}
#training ul li{
 width: calc((100% - 40px*2)/3);
}

#departmentInterview .pcFlex{
 flex-flow: row wrap;
 gap:20px 0;
}
/* =======================================
interview PC 
========================================== */

#interview #interviewMain .txtImgBox{
 gap: 0 5%
}
#interview #interviewMain .txtImgBox:nth-of-type(even){
 flex-direction: row-reverse;
}
#interview #interviewMain .txtImgBox .txts{
 width: auto;
 flex: 1;
}

.interviewList{
 flex-flow: row wrap;
 gap:40px 40px;
}
.interviewList >li{
 width: calc((100% - 40px*2)/3);
}
.interviewList a,
.topInterviewSlider li a{
	height: 100%;
	display: flex;
	flex-direction: column;
}
.interviewList li a:hover,
.topInterviewSlider li a:hover{
 opacity: .7;
}
.interviewList li h4,
.topInterviewSlider li a h4{		
	flex-grow: 1;
}


/* =======================================
interview detail PC
========================================== */
#interviewHead .inner1200{
 position: relative;
}
#interviewHead .txts{
 position: absolute;
 bottom: 30px;
 left: 0;
 width: 55%;
}
#interviewHead .txts h3{
 font-size: 28px;
}
/* =======================================
  tour PC
========================================== */

#tourFlow .points{
 gap:0 60px ;
 justify-content: center;
}

#tourFlow .checkList{
 flex-flow: row wrap;
 gap:10px 10px;
}
#tourFlow .checkList li{
 width:16em;
}
#tourRegistration .lineArea .pcFlex{
 justify-content: space-between;
}
.lineArea figure{
 width: 230px;
}
.lineArea .txts{
 width: calc(100% - 230px);
 padding: 0 0 0 50px;
}

/* =======================================
entry PC
========================================== */
#entryList .pcFlex{
 flex-flow: row wrap;
 gap:0 20px;
  padding: 0
}
#entryList .pcFlex a:hover{
 opacity: .7;
}

/* =======================================

========================================== */


/* =======================================
	news
========================================== */
/*		一覧
-----------------------------*/
.newsBox.pcFlex{
 justify-content: space-between;
}
.newsBox .imgs{
 width: 30%;
}
.newsBox .txts{
 width: 66%;
}

/*		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%;
}
.confirm {
  margin-top: 40px;
}
.tb_cont td input.radiobtn{
    width: auto;
}
/* =======================================
	privacypolicy
========================================== */