/*
Theme Name: KITAGUS Z-PLEX2024
Theme URI: http://www.kgznet.com/
Author: SUDA SEIHAN WEB TEAM
Author URI: http://www.suda.co.jp/
Description: 
Version: 1.0
*/

/* CSS Document */
/********************************************************/
/******** 共通（body,inner,pタグ,imgタグの基本設定） ********/
/*******************************************************/
body { position: relative; line-break: strict; /*overflow-x: hidden;*/}
body p { word-break:break-all;}
/*.inner { width:95%; max-width:1100px; margin:0 auto;}*/
.inner { width:95%; min-width:1100px; max-width: 1500px; margin:0 auto;}
.spOnly { display: none;}
.pcOnly { display: block;}
.googleMap iframe { max-width: 100%; }
#page-top { width: 60px; height: 60px; position: fixed; right: 0; bottom: 0; z-index: 3;}
img[src$=".svg"] { width: 100%; height: 100%; object-fit: contain;}
a { text-decoration: none; }
/*a:hover { text-decoration: none;}*/
@media only screen and (max-width:768px){
body { font-size: 1.4rem;}

.inner { max-width: 90%; min-width: auto;}
.spOnly { display: block;}
.pcOnly { display: none;}

img { width: 100%; height: auto;}
img[src$=".svg"] { width: 100%; height: auto;}
.column2 { width: 100%; margin: 0 auto;}
.column3 { width: 100%; margin: 0 auto;}
.column3 + .column3 { margin-top: 30px;}

}
@media only screen and (max-width:768px){
.wp-block-columns { margin-bottom: 0!important;}
}


/*inview*/
/*.fadeIn { opacity: 0; transition: 1s; transform: translate(0, 10%);}
.fadeIn.is-show { opacity: 1; transform: translate(0, 0);}*/

/*wp-block周り*/
.wp-block-table td, .wp-block-table th { border: none!important; border-bottom: solid 1px #000!important;}

/*HOMEのアニメ*/

/*scroll_up ｜下から上へ出現*/
.scroll_up { transition: 0.8s ease-in-out; transform: translateY(30px); opacity: 0; }
.scroll_up.on { transform: translateY(0); opacity: 1.0; }

/*scroll_down ｜上から下へ出現*/
.scroll_down { transition: 0.8s ease-in-out; transform: translateY(-30px); opacity: 0; }
.scroll_down.on { transform: translateY(0); opacity: 1.0; }

/*scroll_left ｜左から出現*/
.scroll_left { -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; transform: translateX(-30px); opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; }
.scroll_left.on { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; transform: translateX(0); }

/*scroll_right ｜右から出現*/
.scroll_right { -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; transform: translateX(30px); opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; }
.scroll_right.on { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; transform: translateX(0); }

/**********************/
/** 全ページ共通パーツ **/
/**********************/
.topBack { width: 100px; height: 100px; position: absolute; right: 50px; }
.topBack a { display: block; padding: 27px; }

@media only screen and (max-width:768px){

}


/**********************/
/****** ヘッダー ******/
/**********************/
/*
.topMain { width: 100%; height: auto;}
.topMain img { max-width: none; width: 100%;}
*/

.topMain { width: 100%; height: auto; background: url(images/topMain-bg.png) no-repeat left top; background-size: contain; padding: 0 0 130px 45%; }

.headerLogo { width: 15%; padding-top: 30px;}

.globalMenu { display: flex; justify-content: center; gap: 5px; position: relative; top: -100px; left: 50%; transform: translateX(-50%);}
.globalMenu li { width: 12%; max-width: 130px; height: 120px; box-shadow: 0 0 5px #999;}
.globalMenu li:hover { border: solid 1px #66cc33; width: 132px; max-width: none; height: 122px; margin: -1px -1px 0; }
.globalMenu li a { display: block; width: 100%; height: 100%; text-align: center; padding: 20px 0 15px 0;}
.globalMenu li a { position: relative;}
.globalMenu li a:before { content: ""; position: absolute; width: 50%; height: 3px; background: #66cc33; bottom: 7px; left: 50%; transform: translateX(-50%); opacity: 0;}
.globalMenu li a:hover::before { opacity: 1;}
.gnavIcon { width: auto; height: 40px;}
.gnavText { width: 100%; height: 40px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: 500; line-height: 1.3; margin-top: 5px;}
.gnavText span { display: block; width: 100%; font-size: 1.7rem;}
.noImg .gnavText { margin-top: 20px;}

.gMenuArea { background: #F6D500; margin: 20px 0;}
.gMenu { display: flex; justify-content: center; align-items: center; gap: 10em; padding: 10px; position: relative; z-index: 0;}
.gMenu a { font-size: 1.8rem; font-weight: 500; }
.gMenu a:hover { opacity: 0.5;}
.home .gMenuArea { background: linear-gradient(90deg, rgba(255,255,255,1) 9%, rgba(246,213,0,1) 9%);  margin: 20px 0 100px;}
.home header { position: relative;}
@media only screen and (max-width:1430px){
.gMenu { background: #F6D500;}
}

/*中ページヘッダー*/
.pageHeaderArea { width: 100%; padding: 20px 40px; box-shadow: 0 0 10px #999; background: #fff; top: -100px; left: 0; z-index: 10; transition: 0.5s;}
.pageHeaderArea.fixed { position: fixed; top: 0; padding: 5px 40px 15px; transition: 0.5s;}
.pageHeaderTop { height: 110px; margin-top: 0;}
.pageHeaderArea .inner { display: flex; align-items: center;}
.logoArea { width: 15%;}
.pageMenuArea { width: 80%;}
.pageMenu { display: flex; justify-content: center; align-items: center; gap: 5em; padding: 18px 10px 2px; padding-left: 50px; position: relative; z-index: 3;}
.pageMenu li { position: relative;}
.pageMenu a { display: block; font-size: 1.8rem; font-weight: 500; padding: 5px 20px;}
.pageMenu .current-menu-item::after { content: ""; display: block; width: 100%; height: 5px; background: #F6D500; position: absolute; bottom: -3px; left: 0;}
.pageMenu li:hover::after { content: ""; display: block; width: 100%; height: 5px; background: #F6D500; position: absolute; bottom: -3px; left: 0;}
.page-company-child .pageMenu .company::after { content: ""; display: block; width: 100%; height: 5px; background: #F6D500; position: absolute; bottom: -3px; left: 0;}
.page-business-child .pageMenu .business::after { content: ""; display: block; width: 100%; height: 5px; background: #F6D500; position: absolute; bottom: -3px; left: 0;}
.category .pageMenu .news::after { content: ""; display: block; width: 100%; height: 5px; background: #F6D500; position: absolute; bottom: -3px; left: 0;}
.page-adopt .pageMenu .inquiry::after { content: ""; display: block; width: 100%; height: 5px; background: #F6D500; position: absolute; bottom: -3px; left: 0;}
.page-equipment_inquiries .pageMenu .inquiry::after { content: ""; display: block; width: 100%; height: 5px; background: #F6D500; position: absolute; bottom: -3px; left: 0;}
.page-contact .pageMenu .inquiry::after { content: ""; display: block; width: 100%; height: 5px; background: #F6D500; position: absolute; bottom: -3px; left: 0;}

/*展開メニュー*/
.hamburgerMenu { background: rgba(38,113,163,0.9); }
.hamburgerMenu li { width: 100%; margin: 2rem 0; position: relative;}
.hamburgerMenu li a { display: block; font-size: 1.8rem; font-weight: 700; padding: 10px 15px; color: #fff; top: -10px; left: 10px; border-bottom: solid 1px #fff;}
.hamburgerMenu li a:hover { color: #FFA222; border-color: #FFA222;}
.hamburgerMenu .sub-menu li a:hover { color: #FFA222; border-color: #FFA222;}
.hamburgerMenu li.current-menu-item > a { color: #FFA222; border-color: #FFA222;}
.hamburgerMenu li:has(.sub-menu)::after { content: "+"; color: #3b7fac; position: absolute; right: 0; top: 0; font-size: 3rem; line-height: 1; width: 45px; height: 45px; text-align: center; background: #fff; display: flex; justify-content: center; align-items: center; border-radius: 50px;}
.hamburgerMenu li.active:has(.sub-menu)::after { content: "-"; cursor: pointer;}
.hamburgerMenu .sub-menu { display: none; width: 100%; padding: 1rem 2rem; padding-right: 0; /*display: flex; flex-wrap: wrap;  margin-top: 10px;*/ position: relative; z-index: 1;}
.hamburgerMenu .sub-menu li { margin: 0; /*width: calc(90% /4);*/ padding: 0; background: none;}
.hamburgerMenu .sub-menu li a { display: block; width: 100%; font-size: 1.6rem; font-weight: 500; padding: 10px 15px; border-bottom: solid 1px #fff; /*background: #f5f5f5; color: #333; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); */}

.scrollIcon { position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%); width: 80px;}

@media only screen and (min-width:768px){
  .hamburgerMenu li#menu-item-2046 { display: none;}
  .hamburgerMenu li#menu-item-553 { display: none;}
}
@media only screen and (max-width:768px){
  .headerLogo { width: 60%; padding-top: 20px;}
  .gMenu { gap: 1em;}
  .home .gMenuArea { background: #F6D500; margin: 20px 0 50px;}
  .gMenuArea { display: none;}
  /*.pageHeaderArea { display: none;}
  .pageHeaderTop { display: none;}*/
  .pageHeaderTop { height: auto;}
  .pageHeaderArea { padding: 0; box-shadow: none;}
  .pageMenuArea { display: none;}
  .logoArea { width: 60%; padding-top: 20px;}
  .scrollIcon { top: 470px;}
}
.toTop { position: fixed; bottom: 10px; right: 10px; width: 60px; height: 60px; background: #F6D500; border-radius: 15px; z-index: 15; cursor: pointer;}
.toTop:hover { opacity: 0.5;}
.toTopText { color: #fff; position: relative; padding: 30px 0 5px; text-align: center;}
.toTopText:before { content: ""; display: block; width: 20px; height: 20px; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: #fff;}


/**********************/
/****** フッター ******/
/**********************/
.footerLogo { width: 330px; margin-bottom: 50px;}
.footerArea { background: #F6F3F1; padding: 50px 0;}
.footerIconText { display: flex; justify-content: flex-start; align-items: center; gap: 5px; font-size: 1.4rem; font-weight: 400; line-height: 2;}
.footerIconText img { width: 15px;}
.footerLeftArea { width: 35%;}
.footerRightArea { width: 60%; display: flex; justify-content: center; gap: 8em;}
.footerNav { margin-bottom: 10px;}
.footerNav li { line-height: 1.2; margin-bottom: 10px;}
.footerNav a { font-size: 1.4rem; text-decoration: underline;}
.footerNav a:hover { opacity: 0.5; text-decoration: none;}
.footerNav li:first-child { position: relative;}
.footerNav li:first-child::before { content: ""; display: block; width: 8px; height: 9px; background: url(images/icon-arrow.svg); background-size: contain; position: absolute; top: 7px; left: -12px;}
.copyright { font-size: 1.1rem; margin-top: 150px;}
@media only screen and (max-width:768px){
.footerLeftArea { width: 90%;}
.footerLogo { width: 95%; margin-bottom: 30px;}
.footerRightArea { display: none;}
.copyright { margin-top: 50px;}
.footerIconText { line-height: 1.3; margin-bottom: 10px;}
}

/**********************/
/****** TOPページ *****/
/**********************/
.headlineEn { width: 53px;}

.topContArea { position: relative;}
.topImg { position: absolute;}
.aboutImg {position: absolute; width: 470px; top: 0; right: 70%; padding-bottom: 20px; padding-left: 20px; overflow: hidden;}
.aboutImg img { filter: drop-shadow( -20px 20px 0 #68B5EC);}

.topAboutArea::before { content: ""; display: block; width: 300px; height: 950px; background: url(images/tube01.svg); position: absolute; top: -172px; /*right: 74%;*/ right: 78%; }
.companyName { width: 285px; margin: 20px auto 40px;}
.contBox { width: 60%;}
.aboutContArea { width: calc( 100% - (( 100% - 1100px) / 2) ); margin-right: auto; padding: 40px 60px; background: #F6F3F1; border-radius: 0 30px 30px 0;}
.aboutContArea .contBox { margin-left: auto; max-width: 700px;}
.aboutText { font-size: 13px; line-height: 2.2; margin-top: 30px;}

.topBusinessArea { margin-top: 75px;}
.topBusinessArea::before { content: ""; display: block; width: 110px; height: 1195px; background: url(images/tube02.svg); position: absolute; top: -522px; left: calc(450px + 50%); z-index: -1;}
.enBusiness { position: absolute; top: 95px; right: calc( 100% - (( 100% - 1125px) / 2) );}
.contEnergy { width: calc( 100% - (( 100% - 1100px) / 2) ); margin-left: auto; padding: 40px 60px; background: #AFCA54; border-radius: 30px 0 0 30px; position: relative;}
.contEnergy .contBox { width: 55%; max-width: 590px; margin-right: auto; margin-left: 20px;}
.energyImg { width: 420px; padding-bottom: 20px; padding-right: 20px; overflow: hidden; bottom: -20px; left: calc(540px + 16%); /*right: 0; */}
.energyImg img { filter: drop-shadow( 20px 20px 0 #889800);}
.contGas { width: calc( 100% - (( 100% - 900px) / 2) ); margin-right: auto; padding: 40px 60px; background: #FFA222; border-radius: 0 30px 30px 0; margin-top: 100px; position: relative;}
.contGas .contBox { margin-left: auto; max-width: 500px;}
.gasImg { width: 589px; top: -20px; right: calc(470px + 10%);  padding-bottom: 20px; padding-right: 20px;}
.gasImg img { filter: drop-shadow( 20px 20px 0 #D7AE3F);}
.businessText { font-size: 1.6rem; line-height: 2;}
.technologyBannerArea { margin-top: 70px; text-align: center;}
.technologyBannerArea a:hover { opacity: 0.6; }	
.mapBannerArea { position: relative; width: calc(100% - ((100% - 1100px) / 2)); margin-left: auto;}	
.mapBannerArea a img { max-width: 800px; min-width: 730px; width: 65%; }	
.mapBannerArea a:hover { opacity: 0.6; }

.topRecruitArea { /*margin-top: 200px;*/ margin-top: 100px;}
.topRecruitArea::before { content: ""; display: block; width: 260px; height: 1030px; background: url(images/tube03.svg); position: absolute; top: -371px; right: calc( 100% - (( 100% - 580px) / 2) ); z-index: -1;}
.enRecruit { position: absolute; top: 95px; right: calc( 100% - (( 100% - 1125px) / 2) );}
.headlineRecruit { font-size: 2.4rem; font-weight: 900; line-height: 1.2;}
.headlineRecruit .big { font-size: 5.5rem; vertical-align: sub;}
.recruitContArea { width: calc( 100% - (( 100% - 1100px) / 2) ); margin-left: auto; padding: 40px 60px;/* background: #CF145A;*/ background: #1C5A9E; border-radius: 30px 0 0 30px;}
.recruitContArea .contBox { margin-right: auto; position: relative;  max-width: 650px;}
.recruitText { font-size: 1.8rem; font-weight: 400; margin-top: 2%;}
.recruitImg { width: 560px; top: -120px; left: 640px;}
.recruitImg { filter: drop-shadow(20px 20px 0 #0d3461);}

.topNewsArea { margin-top: 100px; margin-bottom: 80px; position: relative;}
.topNewsArea::before { content: ""; display: block; width: 150px; height: 300px; background: url(images/tube04.svg); position: absolute; bottom: -140px; left: calc(450px + 51%); z-index: -1;}
.enNews { position: absolute; top: 95px; left: calc( 100% - (( 100% - 1000px) / 2) ); z-index: -2;}
.newsContArea { width: calc( 100% - (( 100% - 950px) / 2) ); margin-right: auto; padding: 40px 60px; background: #E1F0FB; border-radius: 0 30px 30px 0;}
.newsContArea .contBox { width: 90%; max-width: 900px; margin: 0 10% 0 auto;}
.newsList { display: flex; justify-content: space-between; flex-wrap: wrap;}
.newsList li { width: 22%; max-width: 200px; border-radius: 0 30px; overflow: hidden; background: #fff;}
.newsList li a:hover { opacity: 0.5;}
.newsCat { width: 55px; font-size: 1.1rem; font-weight: 400;  color: #000; margin-top: -16px; border-radius: 0 10px 0 0; background: #4D4D4D; position: relative; z-index: 1; text-align: center; padding-right: 2px;}
.newsCat.news { background-color: #F6D500; color: #000;}
.newsCat.recruit { background-color: #68B5EC; color: #fff;}
.newsCat.etc { background-color: #99C658;}

.newsTextArea { padding: 10px 20px;}
.newsTitle { font-size: 1.1rem; }
.newsDate { font-size: 1.0rem; text-align: right;}

@media only screen and (max-width:768px){
.contBox { width: 100%;}
.topAboutArea { margin-top: 100px;}
.aboutContArea { width: 90%; padding: 120px 30px 20px 80px;}
.companyName { margin: 20px auto 240px;}
.aboutImg { width: 80%; top: 200px; right: auto; left: 0;}
.topBusinessArea { margin-top: 140px;}
.topBusinessArea::before { left: auto; right: 25px; top: -455px; z-index: -1;}
.topBusinessArea .headlineBorderBoth { margin-left: 25%;}
.contEnergy { width: 90%; padding: 30px 30px 50px;}
.contEnergy .contBox { width: 100%; max-width: none;}
.contEnergy .headlineBold { width: 61%; margin-left: auto; padding-top: 20px;}
.contEnergy .businessText { margin-top: 50px;}
.energyImg { width: 63%; bottom: auto; top: -120px; left: -22%; right: 0;  z-index: 5;}
.contGas { width: 90%; margin-top: 110px; padding: 100px 30px 30px;}
.gasImg { width: 80%; top: -116px; right: auto; left: -5%;}
.technologyBannerArea { width: 90%; margin: 50px auto 0;}
.mapBannerArea { width: 90%; margin: 50px auto 0;}
.mapBannerArea a img { width: 100%; height: auto; min-width: auto;}
.topRecruitArea::before {/* top: -255px;*/top: -338px; right: auto; left: 5px; width: 240px; height: 900px;}
.recruitContArea { width: 90%; padding: 200px 30px 30px;}
.recruitImg { width: 100%; top: -220px; left: auto; right: -10%;}
.headlineRecruit .big { font-size: 3.5rem;}
.topRecruitArea::after { content: ""; display: block; /*width: 260px; height: 775px;*/width: 215px; height: 810px; background: url(images/tube03.svg); background-size: 123%; position: absolute; bottom: -300px;  right: auto; left: 0px; z-index: -1;}
.topNewsArea::before { left: auto; right: 30px;}
.newsContArea { width: 90%; padding: 30px;}
.newsContArea .contBox { width: 100%;}
.enNews { display: none;}
.newsList { gap: 1em 1%;}
.newsList li { width: 48%;}
}

/**********************/
/****** 中ページ ****/
/**********************/
.breadcrumbs { color: #666; margin: 10px 0; font-size:1.2rem;}
.breadcrumbs a { color: #666; font-size:1.2rem;}
@media only screen and (max-width:768px){
.breadcrumbs { margin: 20px 0;}
}

.imgDeco { position: relative;}
.imgDeco img { border-radius: 50px;}
.imgDeco::after { content: ""; width: 100%; height: 100%; position: absolute; background-size: contain; background-repeat: no-repeat; z-index: -1; top: 0; left: 0;}
.imgDecoO01::after { height: 115%; background-image: url(images/bg-img-orange-01.svg); background-position: center; top: -20px; right: 0px; }
.imgDecoO02::after { background-image: url(images/bg-img-orange-02.svg); top: -20px; left: -20px;}
.imgDecoO03::after { background-image: url(images/bg-img-orange-02.svg); top: 30px; left: 50px;}
.imgDecoO04::after { background-image: url(images/bg-img-orange-02.svg); top: 50px; left: 50px;}
.imgDecoO05::after { width: 115%; height: 120%; background-image: url(images/bg-img-orange-03.svg); background-position: center; top: 10px; left: 35px;}
.imgDecoG01::after { height: 115%; background-image: url(images/bg-img-green-01.svg); background-position: center; top: -20px; right: 0px; }
.imgDecoG02::after { background-image: url(images/bg-img-green-02.svg); top: -20px; left: -20px;}
.imgDecoG03::after { background-image: url(images/bg-img-green-02.svg); top: 30px; left: 50px;}
.imgDecoG04::after { background-image: url(images/bg-img-green-02.svg); top: 50px; left: 50px;}
.imgDecoG05::after { width: 105%; height: 120%; background-image: url(images/bg-img-green-01.svg); background-position: center; top: 10px; left: 35px;}

/*ポップアップ*/
.itemBox { display: flex; width: 95%; justify-content: space-between; align-items: center; flex-wrap: wrap; border: solid 2px #FFA122; border-radius: 20px; padding: 20px; margin: 30px auto; background: #fff; filter: drop-shadow(10px 10px 0 #FFA122); position: relative;}
.itemTextArea { width: 100%;}
.itemImgArea { width: 100%; text-align: center;}
.popupBtn { width: 29%; display: flex; align-items: center; border: solid 2px #FFA122; background: #fff; cursor: pointer; padding: 10px 20px; font-size: 1.8rem; font-weight: 700; border-radius: 30px; position: relative; padding-right: 50px;}
.popupBtn:after { content: ""; display: block; width: 20px; height: 20px; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); clip-path: polygon(0% 0%,100% 50%, 0% 100% ); background: #FFA122;}
.popupBtn:hover { opacity: 0.5;}
.popupArea { display: none; }
.popupArea.active { width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); z-index: 20;}
.popupCont { width: 50%; height: auto;}
.popupClose {position: absolute; right: 0; top: 0; font-size: 4.0rem; line-height: 1; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.popupBtnG { width: 29%; display: flex; align-items: center; border: solid 2px #AEC954; background: #fff; cursor: pointer; padding: 10px 20px; font-size: 1.8rem; font-weight: 700; border-radius: 30px; padding-right: 50px; position: relative;}
.popupBtnG:after { content: ""; display: block; width: 20px; height: 20px; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); clip-path: polygon(0% 0%,100% 50%, 0% 100% ); background: #AEC954;}
.popupBtnG:hover { opacity: 0.5;}
.imgDecoG03::after { width: 115%; height: 120%; background-image: url(images/bg-img-green-03.svg); background-position: center; top: 10px; left: 35px;}
.itemBoxB { display: flex; width: 95%; justify-content: space-between; align-items: center; flex-wrap: wrap; border: solid 2px #AEC954; border-radius: 20px; padding: 20px; margin: 30px auto; background: #fff; filter: drop-shadow(10px 10px 0 #AEC954); position: relative;}
/*各ポップアップ内の画像調整*/
.trickBox .itemImgArea { max-width: 490px; margin: 0 auto;}
.polyethyleneBox .itemImgArea { max-width: 600px; margin: 0 auto;}
.ghpBox .itemImgArea { max-width: 500px; margin: 0 auto;}
.cogenerationBox .itemImgArea { max-width: 600px; margin: 0 auto;}

.pageBottomMgn { padding-bottom: 100px;}
@media only screen and (max-width:768px){
.popupArea.active { overflow-y: scroll; align-items: flex-start;}
.itemBox { margin: 100px auto 30px;}
.itemBoxB { margin: 100px auto 30px;}
.popupCont { width: 70%;}
.itemTextArea { width: 100%;}
.itemImgArea { width: 100%; margin-top: 10px;}

.pageContent { margin-bottom: 50px;}
.pageBottomMgn { padding-bottom: 50px;}

.imgDeco { width: 70%;}
.imgDeco img { border-radius: 30px;}
.popupBtn { width: 80%; margin: 10px auto; padding-right: 40px;}
.popupBtnG { width: 80%; margin: 10px auto; padding-right: 40px;}
}

.TitleArea { display: block; background: url(images/title-back-img.jpg) no-repeat center center; background-size: cover; }
.TitleArea h2 { width: 100%; padding: 5rem 0; font-size: 3.0rem; font-weight: 500; text-align: center; letter-spacing: 0.3rem; color: #fff;  text-shadow: 0px 0px 5px rgba(0, 0, 0, 1); }
.localNaviArea { width: 100%; display: block; background: #f5f5f5; margin: 0 auto 20px; top: 0;}
/*.localNaviArea.fixed { position: fixed; top: 97px; left: 0; transition: 0.5s;}*/
.localNaviArea ul { display: flex; justify-content: center; }
.localNaviArea li { margin: 0 2rem; }
.localNaviArea li a { display: block; padding: 1rem 2rem; font-size: 1.6rem; font-weight: 500; color: #000; }
.localNaviArea li.current a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px;}
.localNaviArea li a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px;}
.pageContentArea { margin: 10px auto 30px; }

.pageContentArea p { font-size: 1.6rem; line-height: 1.6;/* margin: 1.6rem 0; */ padding: 1.0rem 0;}
@media only screen and (max-width:768px){
.TitleArea {}
.localNaviArea ul{ flex-wrap: wrap; margin-bottom: 30px;}
.localNaviArea li a { font-size: 1.4rem;}
}


/*会社案内*/
.company_catch { font-size:2.5rem; line-height:1.8;}
.company_name_catch{ font-size:2.5rem; color:#ffffff; background: #68B5EC;padding:5px 0;}
.company_name { border:1px solid #68B5EC; border-radius:30px;}
.company_text { font-size:1.6rem;}
@media only screen and (max-width:768px){
.company_catch { font-size: 2.0rem;}
}

/*代表あいさつ*/
.chairmanBackPhoto { position: relative;}
.chairmanBackPhoto:before { content: ""; display: block; width: 45%; height: 100%; clip-path: polygon(0 0, 0 100%, 80% 100%, 100% 0); background-image: url('images/message-slider01.jpg'); background-size: cover; background-repeat: no-repeat; background-position: top center; position: absolute; top: 0; left: 0; z-index: -1; animation: chairmanImgCheng 21s ease 0; animation-iteration-count: infinite; animation-fill-mode: infinite;}
@keyframes chairmanImgCheng {
0% {
  opacity: 1;
  
}
23%{
  opacity: 1;
}
27%{
  background-image: url('images/message-slider01.jpg');
  opacity: 0;
}
28%{
  opacity: 0;
  background-image: url('images/message-slider02.jpg');
}
34% {
  opacity: 1;
}
56%{
  opacity: 1;
}
60%{
  background-image: url('images/message-slider02.jpg');
  opacity: 0;
}
61% {
  opacity: 0;
  background-image: url('images/message-slider03.jpg');
}
67% {
  opacity: 1;
}
90%{
  opacity: 1;
}
93%{
  background-image: url('images/message-slider03.jpg');
  opacity: 0;
}
94%{
  opacity: 0;
  background-image: url('images/message-slider01.jpg');
}
100% {
  opacity: 1;
}
}
.chairmanTextBox { width: 61%; margin-left: auto; padding: 30px 0 10px;}
.chairmanCatch { font-size:3rem; /*font-weight: 500;*/ text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0 -1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;}
.chairmanMessage { margin-left: 3em; text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0 -1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;}
.autograph { font-size:2.3rem;}
@media only screen and (max-width:768px){
.chairmanCatch { font-size:2.0rem;}
.chairmanBackPhoto:before { width: 100%; height: 44vh; top: auto; bottom: 0;}
.chairmanTextBox { width: 100%; padding-bottom: 44vh; margin-right: auto;}
.chairmanMessage { margin-left: 0;}
}

/*会社概要*/
.page-overview table { width:100%; margin:0 auto; border-collapse:separate; border-spacing:0px 15px; font-size:1.3em; }
.page-overview table th,.page-overview table td { padding:10px;border:1px solid #a5e2f8 ; }
.page-overview table th { background:#a5e2f8; vertical-align:top; text-align:center; width:20%; overflow:visible; position:relative; font-weight:bold; font-size: 1.0em; vertical-align: middle;}
.page-overview .organization_chart{ border-left:10px solid #68B5EC; padding-left: 10px; font-size:3rem;}
/* firefox */
@-moz-document url-prefix() {
.page-overview table th::after { float:right; padding:0; left:30px; top:10px; content:" "; height:0; width:0; position:relative; pointer-events:none; border:10px solid transparent; border-left:#227FA0 10px solid; margin-top:-10px; }
}
.page-overview table td { width:360px; padding-left:20px; }
.page-overview table td dl dt{ width: 30%; float: left; display: block;}
.page-overview table td dl dd{ width: 70%; float: right; display: block;}
.page-overview table tr:last-child td{ border-bottom: 1px solid #ddd;}
.page-overview .center img{ margin: 0 auto;}
.page-overview .center p{ text-align: center; line-height: 1.6;}

/*会社概要*/
.page-history table { border-collapse:collapse; font-size:1.3em; }
.page-history table tr th{ width:100px; padding:10px; vertical-align:top; background: #68B5EC; color:#ffffff; border:1px solid #ffffff;font-weight: 600;}
.page-history table tr th span { display:block;}
.page-history table tr td.month{ width:10%; padding:10px; vertical-align: top; text-align: right; font-weight:bold;background: #badffa; border:1px solid #ffffff;}
.page-history table tr td{ width:70%; padding:10px; vertical-align: top;border:1px solid #badffa;}


/*お知らせ一覧*/
.postContentWrap { display: flex; justify-content: space-between; flex-wrap: wrap; }
.postContent { width: calc(90% / 4 ); margin: 2rem auto; padding: 1rem; }
.postContent:nth-child(1) { opacity: 1; transform:none;}
.postContent:nth-child(2) { opacity: 1; transform:none;}
.postContent:nth-child(3) { opacity: 1; transform:none;}
.postContent:nth-child(4) { opacity: 1; transform:none;}
.postContent:hover { background: #f0f8ff; }
.postContent:hover .post-image { opacity: 0.6; }
.post-image { width: 100%; height: 200px; display: block; position: relative; border-radius: 15px; }
.post-icon { width: 9rem; height: auto; padding: 0.7rem 1.4rem; font-size: 1.2rem; font-weight: 500; text-align: center; border-radius: 7px; position: absolute; bottom: 10px; left: 10px; }
.post-icon.news { background: #F6D500; }
.post-icon.etc { background: #99C658; }
.post-icon.recruit-news { background: #68B5EC;}
p.postDaytime { font-size: 1.3rem; color: #666; margin: 0.7rem 0; }
.postTitle { font-size: 1.6rem; font-weight: 600; color: #333; margin: 0.7rem 0;}
.postContent .postTitle { text-decoration: underline;}
.postContent:hover .postTitle { text-decoration: none;}
.pagenavi { display: flex; justify-content: center; width: 100%; padding: 3rem 0; }
.wp-pagenavi { display: flex; justify-content: center; }
.postSingleContent { width: 70%; margin: 3rem auto; }
.postSingleContent .postTitle { font-size: 2.2rem; margin-bottom: 3rem; }
.postSingleContent p { font-size: 1.6rem; line-height: 1.6; margin: 0.7rem 0; }
.postSingleContent .gallery { margin: 3rem auto!important; }
.news-navigation { width: 70%; margin: 3rem auto; display: flex; justify-content: center; }
.news-navigation span { margin: 0 3rem; padding: 0.7rem; }
.news-navigation a { text-decoration: underline;}
.news-navigation a:hover { text-decoration: none;}
.gallery-columns-3 { width: 600px!important; }
.newsNav { display: flex; justify-content: center; gap: 1em; flex-wrap: wrap; margin: 30px auto 0;}
.newsNav li { width: 20%;}
.newsNav li a { display: block; padding: 10px; background: #1C5A9E; background-image: repeating-linear-gradient(-45deg,rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)  1px,transparent 0, transparent 3px); text-align: center; color: #111; font-weight: 500;}
.newsNav li.catNews a { background-color: #F6D500;}
.newsNav li.catRecruit a { background-color: #68B5EC;}
.newsNav li.catEtc a { background-color: #99C658;}
.newsNav li a:hover { opacity: 0.5;}
@media only screen and (max-width:768px){
.postContent { width: calc( 90% / 2); margin: 0; padding: 0;}
.post-image { height: 100px; background-size: cover!important;}
.post-icon { width: 60%;}
.postSingleContent { width: 100%;}
.news-navigation { width: 100%;}
.news-navigation span { margin: 0 2rem;}
.news-navigation span.previous { margin-left: 0;}
.news-navigation span.next { margin-right: 0;}
.news-navigation span a { font-size: 1.4rem;}
.newsNav { margin-bottom: 50px ;}
.newsNav li { width: 40%;}
.gallery-columns-3 { width: 90%!important; }
}

/*事業案内TOP*/
.page-business .flex.w80p { margin: 2rem auto; } 
.page-business .flex.w80p div { width: 47%; margin: 1rem; }
.page-business .flex.w80p div a { display: block; width: 100%; height: 100%; padding: 2rem; position: relative;}
.page-business .flex.w80p div img { width: 100%; height: auto; display: block; border-radius: 10px; }
.page-business .flex.w80p div:nth-of-type(1) { border: solid 3px #AEC954; background: #fff; border-radius: 15px; filter: drop-shadow(10px 10px 0 #AEC954); }
.page-business .flex.w80p div:nth-of-type(1) h4 { color: #a0b94d; font-size: 2.0rem; font-weight: bold; text-align: center; margin-bottom: 2rem;; }
.page-business .flex.w80p div:nth-of-type(2) { border: solid 3px #FFA122; background: #fff; border-radius: 15px; filter: drop-shadow(10px 10px 0 #FFA122); }
.page-business .flex.w80p div:nth-of-type(2) h4 { color: #f1961b; font-size: 2.0rem; font-weight: bold; text-align: center; margin-bottom: 2rem;; }
.page-busines .pageContentArea .headlineBorderCenter::before { background: #ccc!important; }
.page-busines .pageContentArea .headlineBorderCenter::after { background: #ccc!important; }
.page-busines .pageContentArea .headlineBorderCenter .post-image { border-radius: 0; }
p.businessLinkText { position: absolute; bottom: 2rem; right: 2rem; text-decoration: underline; padding: 0;}
.page-business .flex.w80p div a:hover { opacity: 0.6;}
.page-business .flex.w80p div a:hover .businessLinkText { text-decoration: none;}
.page-business .bannerArea a:hover { opacity: 0.6;}


@media only screen and (max-width:768px){
  .page-business .flex.w80p div { width: 100%; margin: 1rem; }
}

/*お問合せ*/
.page-inquiry #inquiry_all { width: 80%; display: block; margin: 0 auto;}
.page-inquiry #inquiry_all p { width: 50%; float: left; display: block;}
.page-inquiry #inquiry_all p:hover { opacity:  0.8;}

/*お問い合わせ下部のボタン*/
.buttom { margin:0 auto; text-align:center;}
.buttom input { padding:20px; width:150px; margin:20px auto; display:block; background: #EEEEEE; cursor: pointer;}


/*その他お問合せ*/
#mw_wp_form_mw-wp-form-415 form { width: 90%; margin: 0 auto;}
#mw_wp_form_mw-wp-form-415 form dl { width: 100%; font-size: 1.6rem; padding: 20px 0; display: flex; justify-content: space-between; border-bottom: 1px dashed #ddd;}
#mw_wp_form_mw-wp-form-415 form dt { width: 35%; background-color: #eee; text-indent: 1em; height: 50px; line-height: 50px; }
#mw_wp_form_mw-wp-form-415 form dd { width: 60%; padding: 10px 0; margin-left: 10px;  }
#mw_wp_form_mw-wp-form-415 form dd.listend { padding: 0!important;}
#mw_wp_form_mw-wp-form-415 form dd input[type="text"] { height: 35px; border-radius: 5px;  }
#mw_wp_form_mw-wp-form-415 form dd textarea { width: 100%; height: 150px; padding: 5px; border-radius: 5px;  }
/*#mw_wp_form_mw-wp-form-415 .buttom input { padding: 5px; width: 100px; margin: 0 10px; }*/
.page-done #mw_wp_form_mw-wp-form-415 span { display: none;}

/*採用のお問合せ*/
#mw_wp_form_mw-wp-form-599 form { width: 90%; margin: 0 auto;}
#mw_wp_form_mw-wp-form-599 form dl { width: 100%; font-size: 1.6rem;  padding: 20px 0; display: flex; justify-content: space-between; border-bottom: 1px dashed #ddd;}
#mw_wp_form_mw-wp-form-599 form dt { width: 35%; background-color: #eee; text-indent: 1em; height: 50px; line-height: 50px; }
#mw_wp_form_mw-wp-form-599 form dd { width: 60%; padding: 10px 0; margin-left: 10px;  }
#mw_wp_form_mw-wp-form-599 form dd.listend { padding: 0!important;}
#mw_wp_form_mw-wp-form-599 form dd input[type="text"] { height: 35px; border-radius: 5px;  }
#mw_wp_form_mw-wp-form-599 form dd textarea { width: 100%; height: 150px; padding: 5px; border-radius: 5px;  }
/*#mw_wp_form_mw-wp-form-599 .buttom input { padding: 5px; width: 100px; margin: 0 10px; }*/
.page-done #mw_wp_form_mw-wp-form-599 span { display: none;}
@media only screen and (max-width:768px){
#mw_wp_form_mw-wp-form-415 form dl { flex-wrap: wrap;}
#mw_wp_form_mw-wp-form-415 form dt { width: 100%; margin-bottom: 10px;}
#mw_wp_form_mw-wp-form-415 form dd { width: 100%;}
#mw_wp_form_mw-wp-form-599 form dl { flex-wrap: wrap;}
#mw_wp_form_mw-wp-form-599 form dt { width: 100%; margin-bottom: 10px;}
#mw_wp_form_mw-wp-form-599 form dd { width: 100%;}
}


/*設備に関するお問い合せ*/
.page-equipment_inquiries h2 span { font-size: 3.8em!important; }
@media only screen and (max-width:768px){
  .page-equipment_inquiries h2 span { font-size: 0.9em!important; }
}
.page-equipment_inquiries #main-content h3 { font-size: 2.4em!important; font-weight: bold; text-align: left; color:#227FA0; border-bottom: solid 1px #ccc; }

.page-equipment_inquiries h2 span { font-size: 3.8em!important; }
@media only screen and (max-width:768px){
  .page-equipment_inquiries h2 span { font-size: 0.9em!important; }
}

.page-equipment_inquiries h3 { font-size: 2.4em!important; font-weight: bold; text-align: left; color:#227FA0; border-bottom: solid 1px #ccc; margin: 20px auto 40px;}

div.equipment_inquiries { width: 90%; margin: 0 auto; }
div.equipment_inquiries dl { width: 100%; font-size: 16px; margin: 10px auto 0; padding: 10px 0; display: flex; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px dashed #ddd;}

div.equipment_inquiries dt { width: 35%; background-color: #eee; text-indent: 1em; height: 50px; line-height: 50px; }
div.equipment_inquiries dt span.cautionTip { background: #cc0000; color: #fff; font-size: 0.8em; padding: 5px 10px; margin-left: 10px; }
div.equipment_inquiries dd { width: 60%; padding: 0; margin-left: 10px;  }
div.equipment_inquiries dd input[type="text"] { height: 35px; border-radius: 5px; width: 90%; padding: 0.3rem 1rem; }
div.equipment_inquiries dd textarea { width: 90%;  padding: 5px; border-radius: 5px;  }
div.equipment_inquiries dd p.tit { font-weight: bold; }
div.equipment_inquiries .mwform-tel-field input[type="text"] { height: 35px; border-radius: 5px; width: 20%; }
div.equipment_inquiries .mwform-zip-field input[type="text"] { height: 35px; border-radius: 5px; width: 20%; }
div.equipment_inquiries .questionArea { font-size: 1.0rem; }
div.equipment_inquiries .questionArea textarea { width: 90%; padding:1rem; }
@media only screen and (max-width:768px){
  div.equipment_inquiries dt { width: 100%; }
  div.equipment_inquiries dd { width:100%; padding: 0; margin: 10px 0;  }
  div.equipment_inquiries p { font-size: 1.0rem!important; }

}

/*202401_フォーム分岐ページ*/
.page-inquiry .pageContentArea a { width: calc(90%/2); display: flex; flex-wrap: wrap; align-items: center; padding: 40px 10px; border-radius: 20px; line-height: 1.0; margin: 10px auto;}
.page-inquiry .pageContentArea a:hover { opacity: 0.6; text-decoration: none; }
.page-inquiry .pageContentArea a span:nth-of-type(1) { font-size: 1.8rem; font-weight: 700; color: #000; text-align: center; width: 100%;  }
.page-inquiry .pageContentArea a span:nth-of-type(2) { font-size: 0.7rem; font-weight: 500; color: #000; text-align: center; display: block; margin-top: 0.7rem; width: 100%; }
.page-inquiry .pageContentArea .EmploymentLink { background: #adddff; /*text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4); */}
.page-inquiry .pageContentArea .ContactLink { background: #36a2ef; /*text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4); */}
.page-inquiry .pageContentArea .FacilitiesLink { background: #68B5EC; /*text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4); */}
@media only screen and (max-width:768px){
  .page-inquiry .pageContentArea { display: block; }
  .page-inquiry .pageContentArea a { width: 80%; margin: 1rem auto; }
}



/*
.page-recruit-child .hamburgerMenu { display: none; }
.page-recruit .hamburgerMenu { display: none; }
.single-interview .hamburgerMenu { display: none; }
.single-aday .hamburgerMenu { display: none; }
*/
.page-recruit main { position: relative;}

/*会社概要*/
.page-overview table { width:100%; margin:0 auto; border-collapse:collapse; }
.page-overview table th,.page-overview table td { padding:2rem; border:1px solid #ccc; font-size: 1.6rem; line-height: 1.6; }
.page-overview table th { background:#f5f5f5; vertical-align:top; text-align:center; width: 20%; font-weight:700; }
.page-overview .organization_chart { font-size:3rem; border-left:10px solid #68B5EC; padding-left: 10px;}
.page-overview table td { width:360px; padding-left:20px; }
.page-overview table td dl dt{ width: 30%; float: left; display: block; font-size: 1.6rem;}
.page-overview table td dl dd{ width: 70%; float: right; display: block; font-size: 1.6rem;}
.page-overview table tr:last-child td{ border-bottom: 1px solid #ddd;}
.page-overview table td a { font-weight: 500; color: #1C5A9E; text-decoration: underline;}
.page-overview table td a:hover { text-decoration: none; opacity: 0.5;}
.page-overview .center img{ margin: 0 auto;}
.page-overview .center p{ text-align: center; line-height: 1.6;}
.page-overview .logo_center img { display: block; margin: 2rem auto;}
@media only screen and (max-width:768px){
.page-overview table { display: block;}
.page-overview table th,.page-overview table td { display: block; width: 100%;}
}

/*会社沿革*/
.page-history table { border-collapse:separate; border-spacing:0px 15px; font-size:1.6em; }
.page-history table tr th{ width:100px; padding:10px; vertical-align:top; background: #fff; border-bottom: solid 6px #3498db; color:#333; font-weight: 600; font-size: 4.0rem; position: relative; text-align: left; line-height: 1;}
.page-history table tr th span { display:block; font-size: 2rem; color: #ccc; position: absolute; right: 0; top: 23px; }
.page-history table tr td.month{ width:10%; padding:10px; vertical-align: top; text-align: right; font-weight:bold; background: #fff; border-bottom :3px solid #68B5EC;}
.page-history table tr td{ width:70%; padding:10px; vertical-align: top; border: none; border-bottom:1px solid #ccc;}
@media only screen and (max-width:768px){
.page-history table { display: block; width: 100%;}
.page-history table tr { display: flex; flex-wrap: wrap; justify-content: flex-end;}
.page-history table tr th { display: block; width: 100%; margin-top: 30px;}
.page-history table tr th span { top: 30px;}
.page-history table tr td { display: block; width: 90%; text-align-last: left;}
.page-history table tr td.month { width: 100%;}
.page-history table tr td.month:nth-child(1) { border-top: 3px solid #68B5EC;}
}

/*アクセス・プライパシーポリシー・コンプライアンスの取り組み*/
.page-privacy p{ margin: 1em 0;}
.page-privacy table { border-collapse: collapse; font-size: 0.9rem; display: block; margin: 2rem auto; width: 96%; margin-left: 30px; border: solid 1px #ccc; }
.page-privacy table th { width: 30%; padding: 1rem; text-align: left; font-weight: bold; background: #e6eef3; color: #000; border: solid 1px #fff; }
.page-privacy table td { padding: 1rem; color: #333; border: solid 1px #ccc; }
.privacyList li { font-size: 1.5rem; margin-bottom: 10px; }
.privacyList li p { margin: 10px 0 10px 20px; font-size: 1.5rem; padding: 0;}

.page-compliance h4 { font-weight: bold; font-size: 20px!important;}
.page-compliance h5 { font-size: 18px!important;}
.page-compliance .headlineBorderBottom { max-width: none;}
.complianceList { padding-left: 2em; margin: 10px 0 20px;}
.complianceList li { font-size: 1.5rem; margin-bottom: 10px;}
.complianceList li:before { content: ''; width: 10px; height: 10px; display: inline-block; border-radius: 100%; background: #000; position: relative; left: 0px; top: 0px; margin-right: 10px;}

@media only screen and (max-width:768px){
.privacyList li { font-size: 1.4rem; margin-left: 20px;}
.privacyList li p { margin-left: 20px;}
.page-privacy table { display: block; width: 100%; margin-left: 0;}
.page-privacy table tr { display: block; width: 100%;}
.page-privacy table th { display: block; width: 100%;}
.page-privacy table td { display: block; width: 100%;}
}


/**********************/
/*** 採用関係のページ ***/
/**********************/
/*採用とその子ページ共有*/
.page-recruit header,
.page-recruit-child header,
.single-interview header,
.single-aday header { /*background: url(images/recruit-top-img.jpg); background-size: cover; background-position: center;*/ width: 100%; max-height: 550px; overflow: hidden; position: relative;}
.page-recruit-child header,
.single-interview header,
.single-aday header { /*height: 360px;*/ width: 100%; height: auto; background: none; position: fixed; top: 0; left: 0; z-index: 10;}
.page-recruit .headerLogo,
.page-recruit-child .headerLogo,
.single-interview .headerLogo,
.single-aday .headerLogo { width: 25%;}
.page-recruit-child .headerLogo,
.single-interview .headerLogo,
.single-aday .headerLogo { padding-top: 20px;}
.page-recruit .headerLogo img,
.page-recruit-child .headerLogo img,
.single-interview .headerLogo img,
.single-aday .headerLogo img { max-width: 180px;}
.page-recruit .headerLogo a,
.page-recruit-child .headerLogo a,
.single-interview .headerLogo a,
.single-aday .headerLogo a { display: flex; align-items: flex-end; font-size: 1.7rem; font-weight: 700;}
.page-recruit-child .recruitGMenuArea,
.single-interview .recruitGMenuArea,
.single-aday .recruitGMenuArea { bottom: auto; top: 70px;}
.page-recruit-child .recruitGMenu,
.single-interview .recruitGMenu,
.single-aday .recruitGMenu {  border: solid 2px #fff; border-right: none;}
.page-recruit-child .recruitCatch ,
.single-interview .recruitCatch ,
.single-aday .recruitCatch  { display: none;}
.page-recruit .pageContentArea,
.page-recruit-child .pageContentArea,
.single-interview .pageContentArea,
.single-aday .pageContentArea { position: relative;}
.page-recruit-child .pageContentArea,
.single-interview .pageContentArea,
.single-aday .pageContentArea { padding-top: 100px;}
.page-recruit .pageContentArea::before,
.page-recruit-child .pageContentArea::before,
.single-interview .pageContentArea::before,
.single-aday .pageContentArea::before { content: ""; width: 26%; height: 120vh;  background: #1C5A9E; /*background-image: repeating-linear-gradient(-45deg,#2D66A5, #2D66A5  2px,transparent 0, transparent 4px);*/ background-image: repeating-linear-gradient(-45deg, #5c8abd, #5c8abd 3px, transparent 0px, transparent 10px); clip-path: polygon(0 0, 0% 100%, 100% 0); position: absolute; top: -10px; left: 0; z-index: -1;}
.page-recruit-child .pageContentArea::before,
.single-interview .pageContentArea::before,
.single-aday .pageContentArea::before { top: -180px;}
.page-recruit .pageContentArea::after,
.page-recruit-child .pageContentArea::after,
.single-interview .pageContentArea::after,
.single-aday .pageContentArea::after { content: ""; width: 78%; height: 430vh;  background: #F6F3F1; clip-path: polygon(0 100%, 100% 100%, 100% 0); mix-blend-mode: multiply; position: absolute; bottom: -30px; right: 0; z-index: -1;}
.page-recruit .toTop,
.page-recruit-child .toTop,
.single-interview .toTop,
.single-aday .toTop { background: #3282CC;}
.page-recruit .breadcrumbs,
.page-recruit-child .breadcrumbs,
.single-interview .breadcrumbs,
.single-aday .breadcrumbs { display: none; }
.page-recruit-child .youkouBtn,
.single-interview .youkouBtn,
.single-aday .youkouBtn { bottom: 0;}
.page-recruit-child .recruitHeaderArea,
.single-interview .recruitHeaderArea,
.single-aday .recruitHeaderArea { background: #fff;}

/*リクルートヘッダー*/
.recruitHeaderArea { width: 100%; padding: 30px 40px; box-shadow: 0 0 10px #999; background: rgba( 255, 255, 255, 0.6); top: -100px; left: 0; z-index: 30; transition: 0.5s;}
.recruitHeaderArea.fixed { position: fixed; top: 0; background: #fff; transition: 0.5s; padding: 15px 40px;}
.recruitHeaderArea .inner { display: flex; align-items: center;}
.recruitLogoArea { width: 15%;}
/*.recruitLogoArea a { display: flex; align-items: flex-end; font-size: 1.7rem; font-weight: 700;}*/
.recruitLogoArea a { display: block; font-size: 1.8rem; text-align: right; font-weight: 700;}
.recruitLogoArea a img { width: 100%;}
.recruitMenuArea { width: 85%;}
.recruitMenu { display: flex; justify-content: center; /*align-items: center;*/ gap: 1em; padding: 0 20px; position: relative; z-index: 3;}
.recruitMenu li { position: relative; display: flex; align-items: center;}
.recruitMenu li + li { border-left: solid 1px #000;}
.recruitMenu a { display: block; font-size: 1.6rem; font-weight: 500; padding: 5px 20px;}
.recruitMenu a:hover { color: #004792;}
.single-interview .recruitMenu .interview a { color: #004792;}
.single-aday .recruitMenu .aday a { color: #004792;}
.recruitMenu .current-menu-item a { color: #004792;}
@media only screen and (max-width:768px){
.recruitLogoArea { width: 60%; padding: 6px 0;}
.recruitLogoArea a { font-size: 1.6rem;}
.recruitLogoArea a img { width: 90%; margin-left: 10%;}
}


/*採用全体に関わる*/
.recruitTitleBach { width: 240px!important; height: auto!important; display: block; position: absolute; top: 0; left: 0; }
.page-recruit-child .pageContentArea .inner { width: 80%; padding: 3rem; background: rgba(255,255,255,0.7); position: relative; }
.single-aday .pageContentArea .inner { width: 80%; padding: 3rem; background: rgba(255,255,255,0.7); position: relative; }
.single-interview .pageContentArea .inner { width: 80%; padding: 3rem; background: rgba(255,255,255,0.7); position: relative; }
.SingleInterviewContent { position: relative; }

.recruitCatch { width: 40%; max-width: 510px; height: 50%; position: absolute; bottom: 10%; left: 13%; }

.returnCorp { background: rgba(255,255,255,0.8); position: absolute; top: 0; right: 80px; height: 70px; }
.returnCorp a { font-size: 1.6rem; font-weight: 700; color: #333; padding: 2rem 3rem; display: block; }
@media only screen and (max-width:768px){
.page-recruit-child header,
.single-interview header,
/* .single-aday header { background: rgba(255,255,255,0.9); height: 115px;}*/
.page-recruit .headerLogo,
.page-recruit-child .headerLogo,
.single-interview .headerLogo,
.single-aday .headerLogo { width: calc( 100% - 70px); padding-top: 60px; margin-left: 0;}
.page-recruit .headerLogo a,
.page-recruit-child .headerLogo a,
.single-interview .headerLogo a,
.single-aday .headerLogo a { padding: 10px 0;}
.page-recruit .pageContentArea::before,
.page-recruit-child .pageContentArea::before,
.single-interview .pageContentArea::before,
.single-aday .pageContentArea::before { width: 35%; height: 60vh;}

.page-recruit-child .pageContentArea .inner { width: 90%; padding: 3rem; background: rgba(255,255,255,0.7); position: relative; margin: 0 7% 0 3%;}
.single-aday .pageContentArea .inner { width: 90%; padding: 3rem; background: rgba(255,255,255,0.7); position: relative; }
.single-interview .pageContentArea .inner { width: 90%; padding: 3rem; background: rgba(255,255,255,0.7); position: relative; }
.SingleInterviewContent { position: relative; }


.recruitCatch { width: 65%; bottom: 10%; height: auto;}
.returnCorp { right: auto; left: 0; background: none;}
.returnCorp a { padding: 2rem 3rem 1.5rem;}

.recruitTitleBach { position: static;}
}


/*採用TOP*/
.recruitHeaderTop { position: absolute; top: 0; left: 0; width: 100%; z-index: 5;}
/*.recruitMain { position: absolute; top: 0; left: 0; width: 100%; height: 550px; overflow: hidden; z-index: -1;}*/
.recruitMain { /*margin-top: -130px;*/}
.recruitSliderArea { position: absolute; position: relative; top: 0; left: -10%; width: 110%; height: 100%; z-index: -1;}
/*.recruitCatch { width: 40%; max-width: 510px; position: absolute; bottom: 20%; left: 7%;}*/
.recruitFMenu .hamburger { position: fixed; top: 10px; right: 0; background: #000; width: 70px; height: 70px; cursor: pointer; z-index: 90;}
.hamburger span {display: block; position: absolute; width: 30px; height: 4px ; left: 50%; transform: translateX(-50%); background :#fff; border-radius: 50px; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
.hamburger span:nth-child(1) { top: 22px;}
.hamburger span:nth-child(2) { top: 34px;}
.hamburger span:nth-child(3) { top: 46px;}
.hamburger.active span:nth-child(1) { top: 22px; left: 46%; -webkit-transform: rotate(-45deg) translateX(-50%);-moz-transform : rotate(-45deg) translateX(-50%);transform: rotate(-45deg) translateX(-50%);}
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) { top: 43px; left: 47%; -webkit-transform: rotate (45deg) translateX(-50%); -moz-transform: rotate(45deg) translateX(-50%); transform: rotate(45deg) translateX(-50%);}
.recruitGMenuArea { position: absolute; bottom: 0; right: 0; width: calc( (100% - ( (100% - 1100px) / 2) ) );}
.recruitGMenu { display: flex; gap: 2em; border-radius: 50px 0 0 50px; background: #000; padding: 15px 35px;}
.recruitGMenu li { border-left: solid 4px #fff;}
.recruitGMenu a { font-size: 1.6rem; font-weight: 500; color: #fff; line-height: 1.2; padding-left: 5px;}
.youkouBtn { width: 165px; height: 165px; position: absolute; left: 6%; bottom: -50px; z-index: 1;}

.stickyBtnTopRound { width: 50px; height: 190px; position: fixed; right: 0; top: 150px; border-radius: 30px 0 0 0; overflow: hidden; z-index: 5;}
.stickyBtnTopRound a { display: block; width: 100%; height: 100%; writing-mode: vertical-rl; font-size: 2.2rem; font-weight: 500; background: #004692; color: #fff; position: relative; padding: 40px 10px 50px;}
.stickyBtnTopRound a::after { content: ""; display: block; width: 20px; height: 20px; background-image: url(images/btn-icon.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; bottom: 20px; left: 15px;}
.stickyBtnBottomRound { width: 50px; height: 190px; position: fixed; right: 0; top: 350px; border-radius: 0 0 0 30px; overflow: hidden; z-index: 5;}
.stickyBtnBottomRound a { display: block; width: 100%; height: 100%; writing-mode: vertical-rl; font-size: 2.2rem; font-weight: 500; background: #FFA222; color: #fff; position: relative; padding: 25px 10px 50px;}
.stickyBtnBottomRound a::after { content: ""; display: block; width: 20px; height: 20px; background-image: url(images/btn-icon.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; bottom: 20px; left: 15px;}

.topRecruitBox { padding: 100px 0; margin: 0 auto;}
.recruitLeftArea { width: 31%; max-width: 340px; position: relative;}
.recruitRightArea { width: 58%; margin-top: 50px;}
.recruitRightArea p { font-size: 1.6rem; font-weight: 700;}

.recruitMessageText { width: 800px; margin: 0 auto 0 300px;}
p.recruitMessageBig { font-size: 2.4rem; line-height: 2; font-weight: bold;}
.recruitMessageText .smallText { font-weight: 700; font-size: 1.7rem;}
.recruitMessageText span { color: #004692;}

.workBox { flex-wrap: nowrap; width: 80%; margin: 0 auto;}
.workBox .workItem { margin: 0 -20px;}
.workBox .workItem a { display: block;}
.workBox .workItem:nth-child(2n) { margin-top: -50px;}
.workBox .workItem01 { clip-path: polygon(0 0, 81% 0%, 100% 100%, 0% 100%); margin-right: -16px;}
.workBox .workItem02 { clip-path: polygon(0 0, 100% 0%, 81% 100%, 19% 100%);}
.workBox .workItem03 { clip-path: polygon(17% 0, 82% 0%, 100% 100%, 0% 100%);}
.workBox .workItem04 { clip-path: polygon(0 0, 100% 0%, 81% 100%, 19% 100%);}
.workBox .workItem05 { clip-path: polygon( 19% 0, 100% 0%, 100% 100%, 0% 100%);}

.recruitWorkArea { position: relative;}
.recruitWorkArea:before { content: ""; width: 100%; height: 100%; background: #F6F3F1; position: absolute; top: 0; left: 0; z-index: -2;}
.recruitInterviewImg { margin-top: -130px;}
.recruitInterviewArea .btnSquare { margin-top: -50px; position: relative; z-index: 1;}
.recruitFaqBg { width: 90%; background: #54a4dd; background-image: repeating-linear-gradient(-45deg, #68B5EC, #68B5EC 4px, transparent 0, transparent 8px); padding: 50px 0; margin: 0 auto;}
.recruitFaqImg { margin-top: -140px;}
.recruitFaqArea .btnSquare { margin-top: -50px; position: relative; z-index: 1;}
.recruitScrollIcon { top: 15px; bottom: auto;}
@media only screen and (max-width:768px){
.recruitFMenu .hamburger { top: 0;}
.recruitHeaderArea.fixed { padding: 0;}
.recruitScrollIcon { top: 15px;}
.topRecruitBox { padding-top: 80px;}
/*.recruitHeaderArea { display: none;}
.recruitHeaderTop { display: none;}*/
.recruitHeaderTop { height: auto;}
.recruitHeaderArea { padding: 0; box-shadow: none; position: fixed; top: 0; background: #fff;}

.recruitMenuArea { display: none;}
.recruitGMenu { display: none;}
.recruitLeftArea { width: 50%; margin-right: auto;}
.recruitRightArea { width: 90%; margin-top: 0;}
.recruitMessageArea .recruitRightArea { margin-left: auto;}
.recruitInterviewImg { margin-top: -30px;}
.recruitInterviewArea .btnSquare { margin-top: 20px;}
.recruitFaqBg { width: 100%; padding: 50px 5%;}
.recruitFaqImg { margin-top: -40px;}
.recruitFaqArea .btnSquare { margin-top: 20px;}
.stickyBtnTopRound { width: 40px; height: 170px; top: 100px;}
.stickyBtnTopRound a { font-size: 1.8rem; padding: 40px 6px 50px;}
.stickyBtnBottomRound { width: 40px; height: 170px; top: 280px;}
.stickyBtnBottomRound a { font-size: 1.8rem; padding: 25px 6px 50px;}
.workBox { flex-wrap: wrap; gap: 0 1em;}
.workBox .workItem { width: 49%; height: 300px; margin: 0 -10px;}
.workBox .workItem:nth-child(2n) { margin-top: 20px;}
.workBox .workItem:nth-child(1) { width: 44%;}
.workBox .workItem:nth-child(2) { width: 50%; margin-top: 80px;}
.workBox .workItem:nth-child(3) { width: 52%; margin-top: -90px;}
.workBox .workItem:nth-child(4) { width: 49%; margin-top: -10;}
.workBox .workItem:nth-child(5) { margin-top: -120px; margin-right: auto; margin-left: 5px;}

.recruitMain { width: 300%;}
p.recruitMessageBig { font-size: 2.0rem;}
}



/*子ページ共有*/
.SingleAdayContent { margin-bottom: 50px;}
.SingleInterviewContent { margin-bottom: 50px;}
/*.recruitPageTitle { font-size: 3.0rem; position: absolute; top: 44%; left: 5%; font-weight: 700;}*/
.page-recruit-child .pageContentArea { padding-bottom: 10px;}
.single-interview .pageContentArea { padding-bottom: 10px;}
.single-aday .pageContentArea { padding-bottom: 10px;}
.single-aday .pageContentArea .inner {
width: 80%;
padding: 3rem;
background: rgba(255, 255, 255, 0.7);
}
.recruitPageTitle { font-size: 3.0rem; position: relative; top:auto; left: auto; margin-bottom: 40px; font-weight: 700; text-align: center; }
.page-recruit .recruitPageTitle { display: none; }
.single-interview .recruitPageTitle { margin-bottom: 130px; }
@media only screen and (max-width:768px){
.recruitPageTitle { font-size: 2.5rem;}
.single-interview .recruitPageTitle { margin-bottom: 50px;}
.single-aday .pageContentArea .inner { width: 90%; padding: 3rem; background: rgba(255, 255, 255, 0.7);}

}


/*子ページ*/


/*インタビューシングル*/
.singleInterviewArea { display: flex; justify-content: space-between; flex-wrap: wrap;}
.photoWrap { width: 50%; position: relative;}
.photoITem { position: sticky; width: 100%;  height: 60vh; max-height: 470px; top: 25vh; left: 0; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 20px; opacity: 0; transition: 0.8s ease-in-out;}
.photoITem.active { opacity: 1; transition: 0.8s ease-in-out;}
/*.photoITem02 { margin-top: 200px;}*/
.textArea { width: 48%;}
.nameArea { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; background: #F6F3F1; border-radius: 30px; padding: 20px 0; width: 90%; margin-left: auto; position: relative;}
.nameArea:before { content: ""; display: block; width: 40px; height: 40px; position: absolute; top: 50%; left: -40px; transform: translateY(-50%); clip-path: polygon(0% 50%, 100% 0%, 100% 100%); background: #F6F3F1;}
.interviewName { min-width: 120px; font-size: 4.5rem; text-align: center; font-weight: 700;}

.interviewNameText { min-width: 300px; font-size: 1.8rem; }
p.interviewCatch { font-size: 2.5rem; font-weight: 700; color: #004692; margin-bottom: 50px; margin-top: 20px;}
.faqWrap + .faqWrap { margin-top: 40px;}
.faqWrap .qText { font-size: 2.0rem; font-weight: 500; border-bottom: solid 2px #004692; padding: 5px 10px;}
.faqWrap .aText { padding-top: 5px; padding-left: 30px;}
.hobbyWrap { border: solid 4px #004692; border-radius: 30px; width: 80%; margin: 50px auto; padding: 30px; display: flex; justify-content: space-between; align-items: center;}
.hobbyWrap figure { width: 40%; height: 200px; background: #999;}
.hobbyWrap p { width: 55%;}
@media only screen and (max-width:768px){
.photoWrap { width: 100%;}
.photoITem { height: 300px; position: static;}
.photoITem02 { display: none;}
.textArea { width: 100%;}
.interviewName { width: 100%; min-width: auto; font-size: 3.0rem;}
.interviewNameText { width: 100%; min-width: auto;}
.nameArea { width: 100%; margin-top: 20px; padding: 20px;}
.nameArea:before { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); top: -40px; left: 50%; transform: translateX(-50%);}
p.interviewCatch { font-size: 2.2rem;}
}

/*一日*/
.adayTextArea { width: 40%; max-width: 450px; margin-right: 20px;}
.adaySingleTitle { font-size: 2.5rem; font-weight: 700; color: #004692; margin-bottom: 30px;}
.adayPhotoArea { width: 55%; max-width: 550px; clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);}
.adayPhotoArea img { width: 100%; height: 100%; max-width: none; object-fit: cover;}
@media only screen and (max-width:768px){
.adayTextArea { width: 100%; max-width: none;}
.adayPhotoArea { width: 100%; max-width: none;}
}

.adayItemArea { margin: 30px 0;}
.adayItem { display: flex; justify-content: center; gap: 20px;}
.adayItemTimeBox { width: 20%; display: flex; align-items: flex-start; justify-content: center; background: linear-gradient(90deg, rgba(255,255,255,0) 48%, #004692 48%, #004692 52%, rgba(255,255,255,0) 52%, rgba(255,255,255,0) 100%); padding: 10px 0; position: relative;}
p.adayItemTime { width: 90%; border: solid 4px #004692; border-radius: 20px; padding: 10px; text-align: center; background: #fff; color: #004692; font-size: 1.8rem; font-weight: 500;}
.adayItemTextBox { width: 50%; padding: 5px 0 20px; align-self: center;}
p.adayItemTitle { font-size: 2.0rem; color: #004692; font-weight: 700; padding: 0;}
p.adayItemText { padding: 0; margin-top: 10px;}
.adayItemArea .adayItem:first-of-type .adayItemTimeBox:before  { content: ""; display: block; width: 100px; height: 100px; background: url(images/asa.svg); background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; top: -20px; left: -120px;}
.adayItemArea .adayItem:last-of-type .adayItemTimeBox:before  { content: ""; display: block; width: 100px; height: 100px; background: url(images/yoru.svg); background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; top: -5px; left: -120px;}
.adayItemArea .adayItem.lunch .adayItemTimeBox:before  { content: ""; display: block; width: 100px; height: 100px; background: url(images/hiru.svg); background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; top: -5px; left: -120px;}
.adayItemTimeBox.asa { background: linear-gradient(90deg, rgba(255,255,255,0) 48%, #68B5EC 48%, #68B5EC 52%, rgba(255,255,255,0) 52%, rgba(255,255,255,0) 100%);}
.adayItemTimeBox.hiru { background: linear-gradient(90deg, rgba(255,255,255,0) 48%, #2983e5 48%, #2983e5 52%, rgba(255,255,255,0) 52%, rgba(255,255,255,0) 100%);}

@media only screen and (max-width:768px){
.adayItemTimeBox { width: 35%;}
p.adayItemTime { font-size: 1.4rem;}
.adayItemTextBox { width: 60%;}
.adayItemArea .adayItem:first-of-type .adayItemTimeBox:before { width: calc(30px + 5%); left: -35px; top: -12px;}
.adayItemArea .adayItem:last-of-type .adayItemTimeBox:before { width: calc(30px + 5%); left: -35px; top: -12px;}
.adayItemArea .adayItem.lunch .adayItemTimeBox:before { width: calc(30px + 5%); left: -35px; top: -12px;}
.single-aday .textR { text-align: left;}
}

/*社員の一日の流れ 一覧*/
.page-aday .postContentWrap .postContent { background: #fff; }
.page-aday .postContentWrap .postContent:nth-of-type(odd) .post-image { clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); }
.page-aday .postContentWrap .postContent:nth-of-type(even) .post-image { clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); }

/*インタビュー一覧*/
.page-interview .pageContentArea .postContent { width: calc(94% / 3); }
.page-interview .pageContentArea .postContent .post-image { height: 320px; }
.page-interview .pageContentArea .postContent .postTitle { font-size: 1.4rem; font-weight: 500; margin-bottom: 0; text-align: center; }
.page-interview .pageContentArea .postContent .postTitle span { font-size: 1.8rem; font-weight: 700; }
.page-interview .pageContentArea .postContent .postSub { text-align: center; font-size: 1.4rem; color: #444; padding-top: 0;}
@media only screen and (max-width:768px){
.page-interview .pageContentArea .postContent { width: 100%; margin: 30px 0;}
.page-interview .pageContentArea .postContent .post-image { height: 200px;}
}

/*数字で知る*/
@media print, screen and (min-width: 481px){
  .page-the_number .pageContentArea {}
  .page-the_number .pageContentArea p { margin-bottom: 1rem; }
  .page-the_number .pageContentArea .flex-wrap { display: flex; justify-content: flex-start; flex-wrap: wrap; /*width: 1100px;*/ margin: 0 auto; gap: 4rem 2rem; width: 80%; max-width: 900px; min-width: 800px; }
  .page-the_number .pageContentArea .flexbox { /*width: calc(72%/3);*/ padding: 2rem; /*margin: 2rem 1rem;*/ border: solid 1px #ccc; border-radius: 10px; }
  .page-the_number .pageContentArea .single { width: 100%; }
  .page-the_number .pageContentArea .double { width: calc((100% - 2em)/2) }
  .page-the_number .pageContentArea .double .infograph { display: block; }
  .page-the_number .pageContentArea .double .infograph img { width: 100%; }

  .page-the_number .pageContentArea .double.theFirst p.txtR { margin-top: 2rem; }
  
  .page-the_number .pageContentArea .trio1 { width: calc(95%/3*1) }
  
  .page-the_number .pageContentArea .trio2 { /*width: calc(96%/3*2)*/ width: calc(63% + 2em); }
  .page-the_number .pageContentArea .trio2 .sub-wrap { display: flex; }
  .page-the_number .pageContentArea .trio2 .sub-wrap .flexbox { border: none; width: 44%; margin: 0 1rem; padding: 0; }
  .page-the_number .pageContentArea .trio2 .sub-wrap .flexbox .infograph { display: block; }
  .page-the_number .pageContentArea .trio2 .sub-wrap .flexbox .infograph img { width: 100%; }
  
  .page-the_number .pageContentArea .trio3 { width: calc(73%/3); }
  .page-the_number .pageContentArea .flexbox img { display: block; width: 100%; height: auto; }
  .page-the_number .pageContentArea h5 { /*font-size: 1rem;*/ font-weight: bold; line-height: 1.0; margin: -3rem auto 1rem;  padding: 1rem; border-radius: 2rem; background: #ccc; color: #333; text-align: center; }
  .page-the_number .pageContentArea h6 { /*font-size: 4.0rem;*/ font-weight: bold; line-height: 1.0; color: #ed1e79; text-align: center; }
  
  .page-the_number .pageContentArea .fs05 { font-size: 1.2rem; }
  .page-the_number .pageContentArea .fs08 { font-size: 1.4rem; }
  .page-the_number .pageContentArea .fs10 { font-size: 1.6rem; }
  .page-the_number .pageContentArea .fs13 { font-size: 2.0rem; }
  .page-the_number .pageContentArea .fs16 { font-size: 2.2rem; }
  .page-the_number .pageContentArea .fs20 { font-size: 2.0rem; }
  .page-the_number .pageContentArea .fs24 { font-size: 3.2rem; }
  .page-the_number .pageContentArea .fs26 { font-size: 3.6rem; }
  .page-the_number .pageContentArea .fs30 { font-size: 4.0rem; }
  .page-the_number .pageContentArea .fs32 { font-size: 4.4rem; }
  .page-the_number .pageContentArea .fs34 { font-size: 4.8rem; }
  .page-the_number .pageContentArea .fs36 { font-size: 5.2rem; }
  .page-the_number .pageContentArea .fs38 { font-size: 5.4rem; }
  .page-the_number .pageContentArea .fs40 { font-size: 5.0rem; }
  .page-the_number .pageContentArea .fwB { font-weight: bold; }
  .page-the_number .pageContentArea .txtR { text-align: right; }
  .page-the_number .pageContentArea .txtC { text-align: center; }
  .page-the_number .pageContentArea .fc_ed1e79 { color: #ed1e79; }
  
  .page-the_number .pageContentArea .mar20 { margin: 4.0rem auto 2.0rem!important; }
  
  .perc-age-txt { padding-left: 1.6rem!important; text-indent: -1.6rem; }

  .perc-age-box { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 30px auto 20px; }
  .perc-age-box p { width: 50%; margin: 0!important; padding: 0; text-align: center; padding-left: 1.6rem; }
  .perc-age-box p:nth-of-type(1) { text-indent: -1.6rem; }
 
  .perc-fig-box p { width: 100%; margin: 0!important; padding: 0; display: flex; justify-content: center; flex-wrap: nowrap; align-items: baseline; }
  .perc-fig-box span:nth-of-type(1) { width: 30%; text-align: right; }
  .perc-fig-box span:nth-of-type(2) { width: 20%; text-align: right; }
  .perc-fig-box span:nth-of-type(3) { width: 20%; text-align: left; }

  
}
@media only screen and (max-width:480px){
  .page-the_number .pageContentArea {}
  .page-the_number .pageContentArea p { text-align: left; margin-bottom: 1rem; }
  .page-the_number .pageContentArea .flex-wrap { display: block;  width: 100%; margin: 0 auto; }
  .page-the_number .pageContentArea .flexbox { width: 100%; padding: 2rem 0; margin: 2rem auto; border: solid 1px #ccc; border-radius: 10px; }
  .page-the_number .pageContentArea .flexbox p { margin: 1rem!important; }
  .page-the_number .pageContentArea .flexbox img { display: block; width: 100%; height: auto; }

  .page-the_number .pageContentArea .single { width: 100%; }
  .page-the_number .pageContentArea .double { width: 100%; }
  .page-the_number .pageContentArea .double .infograph { display: block; }
  .page-the_number .pageContentArea .double .infograph img { width: 100%; }
  
  .page-the_number .pageContentArea .trio1 { width: 100%; }
  
  .page-the_number .pageContentArea .trio2 { width: 100%; }
  .page-the_number .pageContentArea .trio2 .sub-wrap { display: block; }
  .page-the_number .pageContentArea .trio2 .sub-wrap .flexbox { border: none; width: 95%; margin: 0 auto; padding: 0; }
  .page-the_number .pageContentArea .trio2 .sub-wrap .flexbox .infograph { display: block; }
  .page-the_number .pageContentArea .trio2 .sub-wrap .flexbox .infograph img { width: 100%; }
  
  .page-the_number .pageContentArea .trio3 { width: 100%; }
  
  .perc-age-box { display: flex; justify-content: center; flex-wrap: wrap; margin: 30px auto 20px; }
  .perc-age-box p { width: 60%; margin: 0 auto!important; padding: 0; text-align: center; padding-left: 1.6rem; }
  .perc-age-box p:nth-of-type(1) { text-indent: -1.6rem; }


  .perc-fig-box { width: 100%; }
  .perc-fig-box p { width: 100%; margin: 0!important; padding: 0 0 0 10px; display: flex; justify-content: left; flex-wrap: nowrap; align-items: baseline; }
  .perc-fig-box span:nth-of-type(1) { width: 40%; text-align: right; }
  .perc-fig-box span:nth-of-type(2) { width: 20%; text-align: right; }
  .perc-fig-box span:nth-of-type(3) { width: 30%; text-align: left; }




  .page-the_number .pageContentArea h5 { /*font-size: 1rem;*/ font-weight: bold; line-height: 1.0; margin: -3rem 3rem 1rem;  padding: 1rem; border-radius: 2rem; background: #ccc; color: #333; text-align: center; }
  .page-the_number .pageContentArea h6 { /*font-size: 4.0rem;*/ font-weight: bold; line-height: 1.4; color: #ed1e79; text-align: center; }
  .page-the_number .pageContentArea .double .sub-wrap .flexbox { border: none; }
  
  .page-the_number .pageContentArea .fs05 { font-size: 0.5rem; }
  .page-the_number .pageContentArea .fs08 { font-size: 1.2rem; }
  .page-the_number .pageContentArea .fs10 { font-size: 1.4rem; }
  .page-the_number .pageContentArea .fs13 { font-size: 1.3rem; }
  .page-the_number .pageContentArea .fs16 { font-size: 1.6rem; }
  .page-the_number .pageContentArea .fs20 { font-size: 1.3rem; }
  .page-the_number .pageContentArea .fs24 { font-size: 2.4rem; }
  .page-the_number .pageContentArea .fs26 { font-size: 2.6rem; }
  .page-the_number .pageContentArea .fs30 { font-size: 3.0rem; }
  .page-the_number .pageContentArea .fs32 { font-size: 3.2rem; }
  .page-the_number .pageContentArea .fs34 { font-size: 3.4rem; }
  .page-the_number .pageContentArea .fs36 { font-size: 3.6rem; }
  .page-the_number .pageContentArea .fs38 { font-size: 3.8rem; }
  .page-the_number .pageContentArea .fs40 { font-size: 4.0rem; }
  .page-the_number .pageContentArea .fwB { font-weight: bold; }
  .page-the_number .pageContentArea .txtR { text-align: right; }
  .page-the_number .pageContentArea .txtC { text-align: center; }
  .page-the_number .pageContentArea .fc_ed1e79 { color: #ed1e79; }

  .page-the_number .pageContentArea .mar20 { margin: 4.0rem auto 2.0rem!important; }
}
  
/*Q&A*/
.page-faq dl{ width: 100%; margin: 0px auto 30px;  }
.page-faq dl dt { font-size: 1.8rem; font-weight: bold; border-bottom: 1px dashed #ddd; padding: 2rem 0; color:#2671a3;  }
.page-faq dl dd { font-size: 1.6rem; padding-left: 1em; text-indent: -1em; padding: 2rem 4rem; }
@media only screen and (max-width:768px){
.page-faq dl dd { padding-right: 0;}

}

/*募集要項*/
.page-welfare .pageContentArea a { text-decoration: underline;}
.page-welfare .pageContentArea a:hover { text-decoration: none;}
.page-welfare h4 { font-size: 2.6rem; padding: 5px 5px 0 5px!important; margin-top: 20px!important; font-weight: bold; color: #333;  }
.page-welfare h5 { width: 90%; font-size: 2.0rem; padding: 5px; margin: 2rem auto 1rem; background: #2799c9; font-weight:600; color: #fff; }
.page-welfare dl { width: 90%; display: flex; flex-wrap: nowrap; margin: 1rem auto; padding: 1rem 0; border-bottom: dashed 1px #ccc; }
.page-welfare dl dt { width: 20%; font-size: 1.8rem; font-weight: 700; }
.page-welfare dl dd {  width: 76%; font-size: 1.6rem;  text-indent: 0em; }
.page-welfare dl dd a { color: red; font-size: 1.6rem; font-weight: 700; }
.page-welfare dl dd a:hover { color: #004692;}
.page-welfare dl dd dl { margin: 0 0 1rem 0; padding: 0 0 1rem 0; }
.page-welfare dl dd dl dt { width: 30%; }
.page-welfare dl dd dl dd { width: 66%; }
.page-welfare dl + h5 { margin-top: 6rem;}
.page-welfare .youkouWrap { margin: 10rem auto; }
.page-welfare .youkouWrap:nth-of-type(1) { margin: 5rem auto 5rem; }
@media only screen and (max-width:768px){
.page-welfare .Navi a { display: inline-block; margin: 10px 0;}
.page-welfare dl { display: block;}
.page-welfare dl dt { width: 100%;}
.page-welfare dl dd { width: 100%;}
.page-welfare dl dd dl { margin-left: 1em;}
.page-welfare dl dd dl dt { width: 100%;}
.page-welfare dl dd dl dd { width: 100%;}
}

/*202402_エントリー分岐ページ*/
.page-entry p { text-align: center; }

.page-entry div.flex { display: flex; justify-content: center; margin: 2rem auto; }
.page-entry div.flex div.btn { width: calc(90%/2); margin: 1%; border-radius: 10px; line-height: 1.0; }
.page-entry div.flex div.btn a { width: auto; height: auto; display: block; padding: 2rem; text-align: center; }
.page-entry div.flex div.btn a:hover { opacity: 0.8; text-decoration: none; }
.page-entry div.flex div.btn a span { color: #fff; display: block; text-align: center; }
.page-entry div.flex div.btn a:nth-of-type(1) span:nth-of-type(1) { font-size: 1.8rem; font-weight: 700; text-align: center; margin-bottom: 0.5rem; }
.page-entry div.flex div.btn a:nth-of-type(1) span:nth-of-type(2) { font-size: 1.4rem; font-weight: 500; text-align: center; }
.page-entry div.flex div.btn a:nth-of-type(2) span:nth-of-type(1) { font-size: 1.2rem; font-weight: 500; }

.page-entry .EmploymentLink { background: #3498db; text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4); }
.page-entry .ContactLink { background: #6ebb09; text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4); }
.page-entry .FacilitiesLink { background: #2671a3; text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4); }
.page-entry .newGradLink { background: #0059b9; text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4); }
.page-entry .newGradNextLink { background: #68b5ec; text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4); }
@media only screen and (max-width:768px){
  .page-entry div.flex { display: block; margin: 0 auto; }
  .page-entry div.flex div.btn { width: 90%; margin: 1rem auto; }
  .page-entry div.flex div.btn a:nth-of-type(1) span:nth-of-type(1) { font-size: 1.3rem; font-weight: 700; }
  .page-entry div.flex div.btn a:nth-of-type(1) span:nth-of-type(2) { font-size: 1.1rem; font-weight: 500; }
  .page-entry div.flex div.btn a:nth-of-type(2) { padding: 0 0 2rem 0; }
  .page-entry div.flex div.btn a:nth-of-type(2) span:nth-of-type(1) { font-size: 1.0rem; font-weight: 500; }

}

/*タブレット対応*/
@media only screen and  (min-width: 768px) and (max-width: 1280px) {
  .aboutImg { right: 65%;}
  .pageMenu { gap: 2em;}
  .energyImg { width: 400px; left: calc(520px + 16%);}
  .topBusinessArea::before { left: calc(438px + 50%);}
  .recruitContArea .contBox { max-width: 560px;}
  .recruitImg { width: 450px; top: -90px; left: 560px;}
  .newsContArea { width: calc( 100% - (( 100% - 840px) / 2) );}
  .newsContArea .contBox { width: 100%;}
  .topNewsArea::before { left: calc(400px + 49%); bottom: -150px;}
  .enNews { left: calc( 100% - (( 100% - 900px) / 2) );}

  .recruitSlider { height: 700px;}
  .recruitMenu { padding-right: 85px;}
  .recruitMenu a { padding: 5px 9px;}
}

/*.topMain .anima*/
@media only screen and (max-width:768px){
div.topMain { margin-top: 20px; height: 190px; margin-top: 200px;}
div.topMain .anima { width: 90%; height: 200px; bottom: auto; top: -170px;}
div.topMain .bx-wrapper { width: 80%; height: 150px;}
}

@media only screen and (min-width: 1921px) {
  .topMain { max-width: 1920px; height: 500px; margin: 0 auto 100px!important;}
  .topMain .anima {
      height: 440px;
  }
  .topMain .bx-wrapper {
    height: 465px;
  }
}

/*縮小したとき*/
@media only screen and (min-width:1921px){
  .home .gMenuArea { background: none; position: relative;}
  .home .gMenuArea:before { content: ""; width: 100%; height: 47px; background: #F6D500; position: absolute; top: 0; left: calc(50% - 630px);}

  .aboutImg { right: calc(400px + 48%);}
  .topAboutArea::before { right: calc(400px + 50%);}
  .energyImg { left: 850px;}
  .gasImg { right: 640px;}
  .topNewsArea::before { left: calc(460px + 50%);}

  .chairmanBackPhoto:before { max-width: 800px; right: 50%; left: auto;}
  .photoITem { max-height: 500px;}
}


/*リクルートTOPのスライダー*/
.recruitSlider { position: relative; width: 100%; height: 550px;}
.recruitSlider div { position: absolute; width: 100%; height: 100%;}
.recruitSlider img { width: 100%; height: 100%; object-fit: cover; object-position: center;}
.activeImg img {
position: relative;
z-index: 2;
animation: slide-animation 1.5s ease-in;
mask-image: linear-gradient(-45deg,#000 0%,#000 0%,transparent 0%,transparent 100%);
-webkit-mask-image: linear-gradient(-45deg,#000 0%,#000 0%,transparent 0%,transparent 100%);
mask-size: auto 100%;
mask-repeat: no-repeat;
mask-position: 0 0;
animation-fill-mode: forwards;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: 0 0;
}
.beforeImg img {  position: relative;
z-index: 1;
animation: inherit;}

@keyframes slide-animation {
  0% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 0%, transparent 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 0%, transparent 0%, transparent 100%);
  }
  1% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 1.5%, transparent 1.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 1.5%, transparent 1.5%, transparent 100%);
  }
  2% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 3%, transparent 3%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 3%, transparent 3%, transparent 100%);
  }
  3% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 4.5%, transparent 4.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 4.5%, transparent 4.5%, transparent 100%);
  }
  4% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 6%, transparent 6%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 6%, transparent 6%, transparent 100%);
  }
  5% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 7.5%, transparent 7.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 7.5%, transparent 7.5%, transparent 100%);
  }
  6% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 9%, transparent 9%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 9%, transparent 9%, transparent 100%);
  }
  7% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 10.5%, transparent 10.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 10.5%, transparent 10.5%, transparent 100%);
  }
  8% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 12%, transparent 12%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 12%, transparent 12%, transparent 100%);
  }
  9% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 13.5%, transparent 13.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 13.5%, transparent 13.5%, transparent 100%);
  }
  10% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 15%, transparent 15%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 15%, transparent 15%, transparent 100%);
  }
  11% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 16.5%, transparent 16.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 16.5%, transparent 16.5%, transparent 100%);
  }
  12% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 18%, transparent 18%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 18%, transparent 18%, transparent 100%);
  }
  13% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 19.5%, transparent 19.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 19.5%, transparent 19.5%, transparent 100%);
  }
  14% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 21%, transparent 21%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 21%, transparent 21%, transparent 100%);
  }
  15% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 22.5%, transparent 22.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 22.5%, transparent 22.5%, transparent 100%);
  }
  16% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 24%, transparent 24%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 24%, transparent 24%, transparent 100%);
  }
  17% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 25.5%, transparent 25.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 25.5%, transparent 25.5%, transparent 100%);
  }
  18% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 27%, transparent 27%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 27%, transparent 27%, transparent 100%);
  }
  19% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 28.5%, transparent 28.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 28.5%, transparent 28.5%, transparent 100%);
  }
  20% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 30%, transparent 30%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 30%, transparent 30%, transparent 100%);
  }
  21% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 31.5%, transparent 31.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 31.5%, transparent 31.5%, transparent 100%);
  }
  22% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 33%, transparent 33%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 33%, transparent 33%, transparent 100%);
  }
  23% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 34.5%, transparent 34.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 34.5%, transparent 34.5%, transparent 100%);
  }
  24% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 36%, transparent 36%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 36%, transparent 36%, transparent 100%);
  }
  25% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 37.5%, transparent 37.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 37.5%, transparent 37.5%, transparent 100%);
  }
  26% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 39%, transparent 39%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 39%, transparent 39%, transparent 100%);
  }
  27% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 40.5%, transparent 40.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 40.5%, transparent 40.5%, transparent 100%);
  }
  28% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 42%, transparent 42%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 42%, transparent 42%, transparent 100%);
  }
  29% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 43.5%, transparent 43.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 43.5%, transparent 43.5%, transparent 100%);
  }
  30% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 45%, transparent 45%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 45%, transparent 45%, transparent 100%);
  }
  31% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 46.5%, transparent 46.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 46.5%, transparent 46.5%, transparent 100%);
  }
  32% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 48%, transparent 48%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 48%, transparent 48%, transparent 100%);
  }
  33% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 49.5%, transparent 49.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 49.5%, transparent 49.5%, transparent 100%);
  }
  34% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 51%, transparent 51%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 51%, transparent 51%, transparent 100%);
  }
  35% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 52.5%, transparent 52.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 52.5%, transparent 52.5%, transparent 100%);
  }
  36% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 54%, transparent 54%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 54%, transparent 54%, transparent 100%);
  }
  37% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 55.5%, transparent 55.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 55.5%, transparent 55.5%, transparent 100%);
  }
  38% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 57%, transparent 57%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 57%, transparent 57%, transparent 100%);
  }
  39% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 58.5%, transparent 58.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 58.5%, transparent 58.5%, transparent 100%);
  }
  40% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 60%, transparent 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 60%, transparent 60%, transparent 100%);
  }
  41% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 61.5%, transparent 61.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 61.5%, transparent 61.5%, transparent 100%);
  }
  42% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 63%, transparent 63%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 63%, transparent 63%, transparent 100%);
  }
  43% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 64.5%, transparent 64.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 64.5%, transparent 64.5%, transparent 100%);
  }
  44% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 66%, transparent 66%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 66%, transparent 66%, transparent 100%);
  }
  45% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 67.5%, transparent 67.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 67.5%, transparent 67.5%, transparent 100%);
  }
  46% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 69%, transparent 69%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 69%, transparent 69%, transparent 100%);
  }
  47% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 70.5%, transparent 70.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 70.5%, transparent 70.5%, transparent 100%);
  }
  48% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 72%, transparent 72%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 72%, transparent 72%, transparent 100%);
  }
  49% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 73.5%, transparent 73.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 73.5%, transparent 73.5%, transparent 100%);
  }
  50% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 75%, transparent 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 75%, transparent 75%, transparent 100%);
  }
  51% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 76.5%, transparent 76.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 76.5%, transparent 76.5%, transparent 100%);
  }
  52% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 78%, transparent 78%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 78%, transparent 78%, transparent 100%);
  }
  53% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 79.5%, transparent 79.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 79.5%, transparent 79.5%, transparent 100%);
  }
  54% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 81%, transparent 81%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 81%, transparent 81%, transparent 100%);
  }
  55% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 82.5%, transparent 82.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 82.5%, transparent 82.5%, transparent 100%);
  }
  56% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 84%, transparent 84%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 84%, transparent 84%, transparent 100%);
  }
  57% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 85.5%, transparent 85.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 85.5%, transparent 85.5%, transparent 100%);
  }
  58% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 87%, transparent 87%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 87%, transparent 87%, transparent 100%);
  }
  59% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 88.5%, transparent 88.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 88.5%, transparent 88.5%, transparent 100%);
  }
  60% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 90%, transparent 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 90%, transparent 90%, transparent 100%);
  }
  61% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 90.5%, transparent 90.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 90.5%, transparent 90.5%, transparent 100%);
  }
  
  62% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 91%, transparent 91%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 91%, transparent 91%, transparent 100%);
  }
  
  63% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 91.5%, transparent 91.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 91.5%, transparent 91.5%, transparent 100%);
  }
  
  64% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 92%, transparent 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 92%, transparent 92%, transparent 100%);
  }
  
  65% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 92.5%, transparent 92.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 92.5%, transparent 92.5%, transparent 100%);
  }
  66% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 93%, transparent 93%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 93%, transparent 93%, transparent 100%);
  }
  67% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 93.5%, transparent 93.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 93.5%, transparent 93.5%, transparent 100%);
  }
  68% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 94%, transparent 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 94%, transparent 94%, transparent 100%);
  }
  69% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 94.5%, transparent 94.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 94.5%, transparent 94.5%, transparent 100%);
  }
  70% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 95%, transparent 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 95%, transparent 95%, transparent 100%);
  }
  71% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 95.3%, transparent 95.3%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 95.3%, transparent 95.3%, transparent 100%);
  }
  72% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 95.6%, transparent 95.6%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 95.6%, transparent 95.6%, transparent 100%);
  }
  73% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 95.9%, transparent 95.9%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 95.9%, transparent 95.9%, transparent 100%);
  }
  74% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 96.2%, transparent 96.2%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 96.2%, transparent 96.2%, transparent 100%);
  }
  75% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 96.5%, transparent 96.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 96.5%, transparent 96.5%, transparent 100%);
  }
  76% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 96.8%, transparent 96.8%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 96.8%, transparent 96.8%, transparent 100%);
  }
  77% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 97.1%, transparent 97.1%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 97.1%, transparent 97.1%, transparent 100%);
  }
  78% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 97.4%, transparent 97.4%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 97.4%, transparent 97.4%, transparent 100%);
  }
  79% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 97.7%, transparent 97.7%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 97.7%, transparent 97.7%, transparent 100%);
  }
  80% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 98%, transparent 98%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 98%, transparent 98%, transparent 100%);
  }
  81% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 98.17%, transparent 98.17%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 98.17%, transparent 98.17%, transparent 100%);
  }
  82% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 98.34%, transparent 98.34%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 98.34%, transparent 98.34%, transparent 100%);
  }
  83% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 98.51%, transparent 98.51%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 98.51%, transparent 98.51%, transparent 100%);
  }
  84% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 98.68%, transparent 98.68%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 98.68%, transparent 98.68%, transparent 100%);
  }
  85% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 98.85%, transparent 98.85%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 98.85%, transparent 98.85%, transparent 100%);
  }
  86% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 99.02%, transparent 99.02%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 99.02%, transparent 99.02%, transparent 100%);
  }
  87% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 99.19%, transparent 99.19%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 99.19%, transparent 99.19%, transparent 100%);
  }
  88% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 99.36%, transparent 99.36%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 99.36%, transparent 99.36%, transparent 100%);
  }
  89% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 99.53%, transparent 99.53%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 99.53%, transparent 99.53%, transparent 100%);
  }
  90% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 99.7%, transparent 99.7%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 99.7%, transparent 99.7%, transparent 100%);
  }
  91% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 100%, transparent 100%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 100%, transparent 100%, transparent 100%);
  }
  100% {
    mask-image: linear-gradient(-45deg, #000 0%, #000 100%, transparent 100%, transparent 100%);
    -webkit-mask-image: linear-gradient(-45deg, #000 0%, #000 100%, transparent 100%, transparent 100%);
  }
}