@charset "UTF-8";

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

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

/*
　ボタン,リンク
========================================== */
/*-- table --*/
.basicTable >dt{
	padding: 15px 2.5%;
	width: 30%;
}
.basicTable >dd{
	padding: 15px 2.5%;
	width: 70%;
}
.basicTable >dt:last-of-type{
	border-bottom: none;
}
 .basicTable >dd:last-of-type{
	border-bottom: none;
}

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

/*タイトル
========================================== */
.h3Tit{
	margin-bottom: 50px;
}
.h3Tit:after{
	bottom: -10px;
}

/* =======================================
  ページャー
========================================== */
/*-- 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{
 height: 110px;
}
header .inner1300{
 align-items: flex-end;
}
header #logo{
 padding-bottom: 5px;
}

/* =======================================
	gnavi
========================================== */
.gnavi{
 align-items: center;
 flex: 1;
 padding-top: 74px;
}

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

#gnaviList > li{
 position: relative;
}
#gnaviList > li >a{
 font-size: min(1.5vw,1.6rem);
 white-space: nowrap;
}

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

#gnaviList .hasSub > a{
 position: relative;
}

.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(--wh);
 font-weight: 600;
 text-align: center;
	white-space: nowrap;
}
#gnaviList .sub li a:hover{
 opacity: .7;
}

#gnaviList li.contact .btnRound.bgArrow{
    width: min(20vw, 250px);
}

#headLinks{
 position: absolute;
 top: 20px;
 right: 0;
 align-items: center;
 gap:0 14px;
}
#headLinks .tel{
 padding-right: 6px;
 text-align: right;
}
#headLinks .contact,
#headLinks .recruit{
 width: 180px;
}
#headLinks a:hover{
 opacity: .7;
}

/* =======================================
	footer/#footBottom
========================================== */
footer a:hover{
  opacity: 0.7;
}
#footBottom{
 flex-flow: row wrap;
}

.footerRight{
	flex: 1;
  display: flex;
  justify-content: end;
  gap: 0 min(4.2vw,60px);
}
.footerNavi >li a{
	line-height: 1;
}
.footerNavi >li + li{
	margin-top: 20px;
}

.footerNavi > li .sub {
	margin-top: 5px;
}
.footerNavi > li .sub li{
	font-size: 0.9em;
	margin-bottom: 5px;
	padding-left: 1em
}
.footerNavi >li .sub li:before{
	content: '-'
}

.footerNavi 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;
}
.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
========================================== */
/*		#topNews PC
-----------------------------*/
#topNews ul li p{
 border-right: 1px #fff solid;
 width: calc(100% - 128px - 100px);
 max-width: 761px;
}

/*		#topAbout pC
-----------------------------*/
#topAbout .pcFlex{
 justify-content: space-between;
}
#topAbout .pcFlex > figure{
 width: 38.5%;
 max-width: 460px;
}
#topAbout .txts{
 width: 57.5%;
 max-width: 685px;
}
#topAbout .txts h2{
 margin-bottom: 32px;
}
#topAbout .txts h2 .en{
 font-size: 70px;
}

/*		#topReason PC
-----------------------------*/
#topReason ul{
 flex-flow: nowrap;
}
#topReason ul li{
 width: 25%;
}
#topReason ul li + li{
 border-left: 1px #fff solid;
}

/*		#topService
-----------------------------*/
#topService .pcFlex{
 justify-content: space-between;
}
#topService .pcFlex figure{
 width: 44.5%;
 max-width: 530px;
}
#topService .txts{
 width: 55.5%;
 max-width: 665px;
}

/* =======================================
	company PC
========================================== */
#companyMessage .pcFlex{
 justify-content: space-between;
}
#companyMessage figure{
 width: 40%;
}
#companyMessage .txts{
 width: 55%;
}
#companyProfile ul.pcFlex.half{
 flex-flow: row wrap;
}
#companyAccess .pcFlex{
	gap:30px;
	width: 100%
}
#companyAccess .pcFlex > div{
	width: calc(50% - 15px)
}

/* =======================================
	facility PC
========================================== */
#facilityItem ul.pcFlex{
 flex-flow: row wrap;
 gap:40px 0;
}

/* =======================================
order PC
========================================== */
.strengthList {
 justify-content: space-between;
}
.strengthList li{
 width: 31%;
}
.strengthList li h4{
 font-size: 2.3rem;
}
#orderLead .pcFlex,
#generalLead .pcFlex,
#boothLead .pcFlex{
	gap:20px
}
#orderLead .subTitle,
#generalLead .subTitle,
#boothLead .subTitle{
	font-size: 1.8rem;
	color: var(--blue)
}

#orderLead .pcFlex .inner500 h3,
#generalLead .pcFlex .inner500 h3,
#boothLead .pcFlex .inner500 h3{
	font-size: 2.6rem;
  margin-bottom: 20px;
}

#generalLead .pcFlex .inner500 h3{
	letter-spacing: -0.06em;
}

#orderLead .trouble li{
	width: calc((100% - 60px) /4)
}

#orderCase .pcFlex.half{
 flex-flow: row wrap;
 gap:40px 0;
}

#orderUsageEx .pcFlex{
	gap:30px
}


.flowList li{
	display: flex;
	align-content: stretch;
}
.flowList >li + li{
 margin-top: 60px;
}
.flowList li .h4Tit{
	font-size: 2.6rem;
	padding: 20px 20px 20px 40px;
	width: 30%;
}
.flowList li .h4Tit::before{
	width: 20px;
}
.flowList >li + li::before{
	width:30px;
	height:20px;
	margin:0 auto 20px;
}
.flowList li p{
	font-size: 1.8rem;
	padding: 25px 30px;
	width: 70%;
	background: var(--wh);
}

/* =======================================
	general
========================================== */
#generalProducts .column3,
#generalProducts .column4{
 gap:40px 34px;
}
#generalProducts .column3{
 justify-content: center;
}
#generalProducts .column3 li{
 width: calc((100% - 34px*2)/3);
 max-width: 270px;
}
#generalProducts .column4 li{
 width: calc((100% - 34px*3)/4);
 max-width: 270px;
}
#generalProducts .column3 .etc,
#generalProducts .column4 .etc{
 width: 3em;
 margin: auto 0 0;
}


/* =======================================
	booth
========================================== */
#boothUsageEx ul{
 gap:40px 0;
 justify-content: space-between;
}
#boothUsageEx ul li{
 width: 31%;
}
#boothComposition .pcFlex{
 flex-flow: row wrap;
 justify-content: center;
 gap:50px 6%;
}
#boothComposition .pcFlex figure{
 width: 47%;
}

/* =======================================
	products
========================================== */
#productsFeature ul{
 justify-content: space-between;
}
#productsFeature ul li{
 width: 32%;
}
#productsFeature .inner900 video{
	width: 50%;
	margin:0 auto 30px
}

#productsUsageEx ul{
 flex-flow: row wrap;
 gap:40px 0;
}
#productsUsageEx .line2 h4{
 display: grid;
 place-content: center;
 line-height: 1.4;
 min-height: 2.8em;
}

#productsHistory .pcFlex{
 justify-content: space-between;
}
#productsHistory figure{
 width: 40%;
}
#productsHistory .txts{
 width: 55%;
}



/* =======================================
	hirai8line
========================================== */
.productsList{
 flex-flow: row wrap;
 gap:40px 2%;
 justify-content: flex-start;
}
.productsList li{
 width: 32%;
}
.productsList li h6{
	font-size: 1.7rem;
height: calc(2em + 30px);
	display: flex;
	align-items: center;
	justify-content: center
}
.productsList li .productsTable dt{
 padding: 8px 5px 8px 0;

}
.productsList li .productsTable .line2{
	height: 4em;
}
.productsList li .productsTable .line3{
	height: 5em;
}
.productsList li .productsTable dd{
	padding: 8px 0 8px 20px;

}

#hirai8line section[id^="hirai8Lineup"] > figure{
 max-width: 920px;
 margin: 0 auto 30px;
}
#hirai8line section[id^="hirai8Lineup"] .h5Tit{
	font-size: 2.8rem;
	margin-bottom: 15px;
}
#hirai8Lineup03,
#hirai8Lineup04{
	padding-bottom: 70px;
}
#hirai8Lineup07{
 padding-bottom: 150px;
}

/* =======================================
esg
========================================== */
.esgBox{
	padding: 30px 20px 30px 30px;
	width: calc(95% / 2);
}
.esgBox::after{
	right: auto;
  left: 5px;
}
#esgEnvironment .h3Tit,
#esgSocial .h3Tit,
#esgGovernance .h3Tit{
	font-size: 3rem !important;
}
#esgEnvironment .pcFlex,
#esgSocial .pcFlex,
#esgGovernance .pcFlex{
	flex-wrap: wrap;
	justify-content: center;
	gap: 50px 5%;
}
.esgBox .h4Tit{
	font-size: min(1.75vw, 2.4rem);
}

/* =======================================
recruit
========================================== */
#recruitJobtypes .pcFlex{
 justify-content: space-between;
}
#recruitJobtypes .pcFlex + .pcFlex{
 margin-top: 100px;
}
#recruitJobtypes div.pcFlex::before{
	width: 90px;
  height: 90px;
}
#recruitJobtypes div.pcFlex::after{
	width: 82px;
  height: 82px;
  margin: 8px 8px 0 0;
}
#recruitJobtypes div.pcFlex:nth-of-type(2){
	flex-direction: row-reverse;
}
#recruitJobtypes div.pcFlex:nth-of-type(2)::before,
#recruitJobtypes div.pcFlex:nth-of-type(2)::after{
	top: -15px;
}
#recruitJobtypes div.pcFlex:nth-of-type(2)::after{
	margin: 8px 0 0 8px;
}
#recruitJobtypes figure{
 width: 45%;
}
#recruitJobtypes .txts{
	padding: 10px 4.5% 0 0;
 width: 50%;
}
#recruitJobtypes div.pcFlex:nth-of-type(2) .txts{
	padding-right: 0;
	padding-left: 4.5%;
}
#recruitJobtypes h4{
 text-align: left;
}

#recruitBenefits .pcFlex{
 flex-flow: row wrap;
 gap:40px 5%;
}
#recruitBenefits dl{
 width: calc(90% / 3);
}
#recruitBenefits dl dt{
	border-bottom: 1px var(--blue) solid;
	font-size: 2rem;
	height: 7.5em;
}
#recruitBenefits dl dt figure img{
	width: 70px;
}
#recruitBenefits dl:nth-of-type(1) dt figure img,
#recruitBenefits dl:nth-of-type(9) dt figure img{
	width: 65px;
}
#recruitBenefits dl:nth-of-type(4) dt figure img{
	width: 75px;
}
#recruitBenefits dl:nth-of-type(5) dt figure img{
	width: 60px;
}
#recruitBenefits dl dd{
 padding: 10px 0 0;
}
#recruitBenefits .pcFlex > p{
 margin: auto 0 0;
}

#recruitEducation ul.pcFlex {
	gap: 0 5%;
}
#recruitEducation ul.pcFlex li{
	padding: 30px;
	width: calc(95% / 2);
}
#recruitEducation h4 + p{
	padding: 30px;
}
#recruitEducation ul.pcFlex li h5{
	padding-bottom: 10px;
}

#recruitment h4{
 margin-top: 60px;
}

#recruitApply{
	padding-bottom: 150px;
}
#recruitApply::before,
#recruitApply::after{
	content: "";
  display: block;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  filter: blur(100px) blur(180px) blur(240px);
  position: absolute;
	width: 352px;
	height: 352px;
}
#recruitApply::before{
	background: rgba(255,255,255,.3);
  right: auto;
  top: auto;
	width: 508px;
  height: 508px;
  left: -50px;
	bottom: 0;
}
#recruitApply::after{
	content: "";
  display: block;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  filter: blur(100px) blur(180px) blur(240px);
  position: absolute;
	width: 352px;
  height: 352px;
	top: 320px;
	right: 0;
}

/* =======================================
	news PC
========================================== */
/*		一覧
-----------------------------*/
.contCol2{
	display: flex;
	justify-content: space-between;
	flex-flow: row-reverse;
}
.contCol2 #newsList{
	width: 75%;
}
.contCol2 .catNav{
	width: 20%;
}

.newsBox .newsInfo h3{
 width: calc(100% - 100px - 85px - 20px*2);
 font-size: 2.2rem;
}
.newsBox a.pcFlex{
 justify-content: space-between;
 flex-flow: row-reverse;
}
.newsBox .pcFlex figure{
 width: 30%;
}
.newsBox .pcFlex .txts{
 width: 66%;
}
.newsBox a:hover{
 opacity: .7;
}

/*	詳細　single
-----------------------------*/
article{
 padding: 100px 0;
}
#newsDetail h3{
	font-size: 2.4rem;
}
.newsDetailCont:has(figure) figure{
	width: 100%;
	text-align: center;
}
.newsDetailCont:has(figure) figure img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}


/* =======================================
	form
========================================== */
#contactForm .checkboxWrap.pcFlex{
 display: flex;
	flex-wrap: wrap;
	gap: 0 30px;
}
#contactForm .checkboxWrap.pcFlex label{
	width: calc((95% - 30px) / 2);
}

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

#thanks{
}

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

/* =======================================
	privacypolicy
========================================== */
#privacyPolicy{
	margin-top: 50px;
}
.policyBox{
	padding: 20px 2%;
}
.policyBox .h5Tit{
	margin-top: 40px;
}