/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

.p__mb0,.p__mb0 p{
	margin-bottom:0;
}

.page-content .no-underLine a{
 text-decoration: none;
}

.flex{
  display: flex;
}
.txt-center{
  text-align: center;
}

.borderB.border-color-y{
  border-bottom: 3px solid var(--e-global-color-accent);
} 

.js-fadeinElm{
  visibility: hidden;
  transition-duration: 0.5s;
}

/* -----------------------------sticky */
.sticky-item{
  position: sticky;
}
/* -----------------------------breadcrumbs */
span.hfe-breadcrumbs-home-icon{
  margin: 0!important;
}

/* ---------------------------- header */
.ehf-header #masthead{
  width: 100%;
  position: fixed;
  top: 0;left: 0;
}

/* -----------------------------showUp */
#showUp{
  background-color: var(--e-global-color-primary);
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  transition:height 1s;
  transition-delay:3s!important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#showUp >.showUpWrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 1s;
  transition-delay: 2s;
}
#showUp >.showUpWrap p{
  font-size: 20px;
  color: #fff;
  margin-bottom: 0;
}
#showUp.isShow{
  height: 0%;
}
#showUp.isShow >.showUpWrap{
  opacity: 0;
  visibility: hidden;
}

/* -----------------------------fv */
#home_fv{
	position:relative;
	height:100dvh;
}
/* -----------------------------fv movie */
.first_view_mov{
  position: fixed;
  z-index: -1;
  inset: 0;
  margin: auto;
  overflow: hidden;
}
.first_view_mov .elementor-video{
  position: absolute;
  z-index: -1;
  inset: 0;
  margin: auto;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
}
.fv__readTxt{
  top: 20vh;
}
#glass{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
#fv_overlay{
  background-color: #ffffff70;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; 
  height: 100vh;
  opacity: 0;
}

/* -------------------------------------scroll-hint */
.scroll-hint{
  position: fixed;
  bottom: 8vh;
  left: 0;
  right: 0;
}
.scroll-hint .elementor-widget-container{
  position: relative;
  width: 24px;
  height: 24px;
  left: 0;
  right: 0;
  margin: auto;
}
.chevron {
  position: absolute;
  width: 28px;
  height: 8px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}
.text {
  display: block;
  margin-top: 75px;
  margin-left: -30px;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .25;
  animation: pulse 2s linear alternate infinite;
}

@keyframes pulse {
  to {
    opacity: 1;
  }
}

.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #fff;
}

.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% {
    opacity: 1;

  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}

/* --------------------------キャッチ */
.header__catch .elementor-heading-title .bg-wrap{
  position: relative;
  display: inline-block;
}
.header__catch.is-animated .elementor-heading-title .bg-wrap::before{
  animation: catch-bg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  background:#fff;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left center;
}
.header__catch .elementor-heading-title .inn{
  padding: 0.35em;
  display: inline-block;
  line-height: 1;
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 1s;
}
.header__catch.is-animated .elementor-heading-title .bg-wrap .inn{
  opacity: 1;
}
.header__catch .elementor-heading-title span.bg-wrap:first-child{
  margin-bottom: 1.5rem;
}
@keyframes catch-bg {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(-5%);
  }
  30% {
    transform: scaleX(1) translateX(0);
  }
  100% {
    transform: scaleX(1) translateX(0);
  }
  30%, 100% {
    opacity: 1;
  }
}


/* --------------------------無限ループスライダー */
/* スライドの動き等速 */
.swiper-wrapper {
  transition-timing-function: linear;
}
/* 画像のサイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%;
  vertical-align: bottom;
}

.attractiveness{
  position: relative;
}

/* --------------------------bg */
.bg_c::before{
	width: 75%;top: -3rem;z-index:-1;
}
.bg_odd::before{
	left:0;
	right:auto;
}

.bg_filter{
  position: relative;
  overflow: hidden;
}
.bg_filter::after{
  content: "";
  position: absolute;
  top: -7px;
  right: -7px;
  bottom: -7px;
  left: -7px;
  background: inherit;
  filter: blur(7px);
  z-index: 1;
}

/* ----------------------------bg-slider */
.bg-slider::before{
  z-index: 2;
}

/* ----------------------------bg-box */
.bg-box::before{
  position: absolute;
}
.bg-box__default::before{
  width: 75%;
  height: 100%;
  top: 0;
  left: auto;
  right: 0;
}
.bg-box__people::before{
    width: 80%;
    height: 83%;
    top: 8%;
    left: auto;
    right: 0;
}
.bg-box__crosstalk::before{
  width: 75%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: auto;
  right: 0;
}
.bg-box-voices::before{
  width: 75%;
  height: 100%;
  top: 0;
  left: auto;
  right: 0;
}
/* ----------------------------triangle*/
.triangle{
  position: relative;
}
.triangle::before{
  content: "";
  position: absolute;
  background: var(--e-global-color-secondary);
}
.triangle_txt::before{
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  margin: auto 0;
  border-radius: 0;
  width: 1em;
  height: 1.3em;
  aspect-ratio: cos(30deg);
  clip-path: polygon(0 0,100% 50%,0 100%);
  background-color: var(--e-global-color-accent);
}

/* ----------------------------河辺プラント工業について */
/* ---------------------------施工体制 */
.sekou_column{
  position: relative;
}
.sekou_column::before{
content: "";
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--e-global-color-secondary);
position: absolute;
top: 0px;
left: -7px;
}

/* ----------------------------データ＆アンケート */
/* ----------------SVGグラフ */
.pi_graph{
  display:block;
  transform-origin:center;
transform:rotate(-90deg);
width: 50%;
margin: 0 auto;
}
.pi_graph .type{
  fill:transparent;
  stroke-width:20;
  stroke-dasharray:100;
  stroke-dashoffset:100;
}

/* ---------------年代別 */
.pi_graph-age .js-graphAnime.type1{
	stroke:#C4D2E8;
  animation:age-1 1s ease-in-out both;
	/* stroke-dashoffset: 91; */
}
@keyframes age-1 {
  to {stroke-dashoffset:91;
}}
.pi_graph-age .js-graphAnime.type2{
	stroke:#93A9D4;
  animation:age-2 1s ease-in-out both;	
	/* stroke-dashoffset: 82; */
}
@keyframes age-2 {
  to {stroke-dashoffset:82;
}}
.pi_graph-age .js-graphAnime.type3{
	stroke:#627DBD;
  animation:age-3 1s ease-in-out both;	
  /* stroke-dashoffset: 50; */
}
@keyframes age-3 {
  to {stroke-dashoffset:50;
}}
.pi_graph-age .js-graphAnime.type4{
	stroke:#314EA6;
  animation:age-4 1s ease-in-out both;	
  /* stroke-dashoffset: 9; */
}
@keyframes age-4 {
  to {stroke-dashoffset: 9;
}}
.pi_graph-age .js-graphAnime.type5{
	stroke:#001E8C;
  animation:age-5 1s ease-in-out both;
} 
@keyframes age-5 {
  to {stroke-dashoffset: 0;
}}
/* ---------------勤続年数*/
.pi_graph-work .js-graphAnime.type1{
  stroke:#C4D2E8;
  animation:graph-work-1 1s ease-in-out both;
  /* stroke-dashoffset: 68; */
}
@keyframes graph-work-1 {
  to {stroke-dashoffset:68;
}}
.pi_graph-work .js-graphAnime.type2{
  stroke:#627DBD;
  animation:graph-work-2 1s ease-in-out both;
  /* stroke-dashoffset: 32; */
}
@keyframes graph-work-2 {
  to {stroke-dashoffset:32;
}}
.pi_graph-work .js-graphAnime.type3{
  stroke:#314EA6;
  animation:graph-work-3 1s ease-in-out both;
  /* stroke-dashoffset: 18; */
}
@keyframes graph-work-3 {
  to {stroke-dashoffset:18;
}}
.pi_graph-work .js-graphAnime.type4{
  stroke:#001E8C;
  animation:graph-work-4 1s ease-in-out both;
}
@keyframes graph-work-4 {
  to {stroke-dashoffset:0;
}}
/* --------------------グラフ注釈 */
.pi_graph__legend{
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  justify-content: center;
}
.pi_graph__legend .colorBox{
  display: inline-block;
  width: 12px;
  height:12px;
}
.pi_graph__legend .colorBox,.pi_graph__legend .Layer{
  margin-right: 0.5em;
}

/* --------------------アンケート */
.workBox{
  position: relative;
}
 .workBox::before{
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--e-global-color-secondary);
  position: absolute;
  top: 0.5em;
  left: 0;
 }
/* ------------------------アンケート吹き出し */
.questioQnnaire__line{
  position: relative;
}
.questioQnnaire__line::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-color: #627dbd transparent transparent;
  translate: calc(-50% - 0.4px) 100%;
}
.questioQnnaire__line:nth-child(odd)::after{
  border-width: 0.7rem 0.9rem 0 0;
}
.questioQnnaire__line:nth-child(even)::after{
  border-width: 0.7rem 0 0 0.9rem;
}

/* ----------------------------技術職として働く */
.triangle__carrereStep::before{
  width: 1.5rem;
  height: 1rem;
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% 100%,100% 0,0 0);
  top: auto;
  bottom: -2.5rem;
  left: 0;
  right: 0;
  margin: 0 auto;
}

/* ----------------------------現場の社員の声 */

/* ----------------------------社員座談会・代表インタビュー */
.crosstalk__subHead .elementor-widget-container,
.interview__subHead .elementor-widget-container,
.bg-box__interview .elementor-widget-container{
  position: relative;
}
.crosstalk__subHead .elementor-widget-container::before,
.interview__subHead .elementor-widget-container::before{
  content: "";
  width: 1.5em;
  height: 1px;
  position: absolute;
  left: 0;
}
.crosstalk__subHead .elementor-widget-container::before{
  border-bottom:2px solid #333;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
.interview__subHead .elementor-widget-container::before{
  border-bottom:2px solid var(--e-global-color-primary);
  top: 0.8em;
  bottom: auto;
}
.interview__subHead.subHead--white .elementor-widget-container::before{
  border-bottom: 2px solid #fff;
}
.bg-box__interview::before{
  position: absolute;
  height: 100%;
  top: 2rem;
}
.bg-box__interview-right::before{
  left: -2rem;
}
.bg-box__interview-left::before{
  left: 2rem;
}
.bg-box__interview-middle::before{
  top: 1rem;
  left: 1rem;
  width: 90%;
}

.crosstakl__content .speechBubble{
  position: relative;
}
.crosstakl__content .speechBubble::after{
  content: "";
  position: absolute;
  top: 50px;
  left: 0;
  border-style: solid;
  border-width: 0 16px 16px 0;
  border-color: transparent var(--e-global-color-f243af5) transparent transparent;
  translate: -100% calc(-50% - 0.4px);
}

/* ----------------------------よくある質問 */
.faq .elementskit-faq-header,.faq .elementskit-faq-body{
  position: relative;
}
.faq .elementskit-faq-header::before,
.faq .elementskit-faq-body::before{
  font-family: "Poppins","Helvetica Neue", Arial, Sans-serif;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  width: 40px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin:auto 0;
  color: var(--e-global-color-secondary);
}
.faq .elementskit-faq-header::before{
  content: "Q";
}
.faq .elementskit-faq-body::before{
  content: "A";
}
/* ------------------------------------募集要項 */

/* ----------------------------選考ステップ */
.triangle_step::before {
  top: 0;
  bottom: 0;
  left: auto;
  right: -2rem;
  margin: auto 0;
  border-radius: 0;
  width: 1rem;
  height: 1.5rem;
  aspect-ratio: cos(30deg);
  clip-path: polygon(0 0,100% 50%,0 100%);
}

/* ----------------------------footer */
.footer__nav .hfe-nav-menu li.menu-item{
  width: 50%;
}

/* ----------------------------form */
.contact-item-name{
  display: inline-block;
  width: 35%;
  line-height: 1.75;
  color: black!important;
}
label.flex > .wpcf7-form-control-wrap{
  width: 63%;
}
.wpcf7-form-control-wrap[data-name="acceptance-pp"]{
  display: block;text-align: center;margin: 2rem 0 1rem 0;
}
.ekit-wid-con .ekit-form form label span.wpcf7-list-item-label{
  display: inline-block;color: black!important;
}
.ekit-wid-con .ekit-form form label span.wpcf7-list-item-label a{
  color: var(--e-global-color-primary);
  border-bottom: 1px solid var(--e-global-color-accent);
  margin-left: 1em;
}
/* ----------------------------form */
.form-area{
  max-width: 900px;
  margin: auto;
}
.form-area .smf-item__col input.smf-text-control__control{
  height: 40px;
}
.smf-form--simple-table .smf-item{
  align-items: center;
}
.smf-checkbox-control__label a.smf-ppLink{
  color: var(--e-global-color-primary);
  border-bottom: 1px solid var(--e-global-color-accent);
  text-decoration: none;
}
/* -------------button */
.smf-form--simple-table+.smf-action{
  margin: 1em 0 4em;
}
.smf-action .smf-button-control__control{
  font-size: 1.1em;
  background-color: var( --e-global-color-accent );
  background-image: none;
  color: white;
  border: none;
  transition: box-shadow 0.25s;
  border-radius: 8px;
  display: inline-block;
  letter-spacing: 1px;
  line-height: 1.5;
  margin: 0;
  min-width: 20%;
  padding: 0.75em 0;
  position: relative;
  text-decoration: none;
  width: auto;
}
/* 進行状況に応じた背景・文字色：--_color-text を利用 */
[data-screen=back] .smf-progress-tracker__item--input .smf-progress-tracker__item__number,
[data-screen=complete] .smf-progress-tracker__item--complete .smf-progress-tracker__item__number,
[data-screen=confirm] .smf-progress-tracker__item--confirm .smf-progress-tracker__item__number,
[data-screen=input] .smf-progress-tracker__item--input .smf-progress-tracker__item__number,
[data-screen=invalid] .smf-progress-tracker__item--input .smf-progress-tracker__item__number {
  background-color: var(--e-global-color-primary)!important;
}
@media screen and (max-width:1024px){
  /* ----------------------------ハンバーガーメニュー */
  .header_nav_sp .hfe-nav-menu__toggle{
  margin: 0 0 0 auto!important;}
}
.header_nav_sp .hfe-nav-menu-icon{
  position: absolute;
  top: -2.75em;
  right: 0.5em;
}
@media screen and (max-width:767px){
  /* ----------------------------sticky解除 */
  .sticky-item__sp-static{
    position: static;
  }

/* -----------------------------showUp */
#showUp >.showUpWrap img{
  width: 100%;
  padding: 0 2rem;
}

/* -----------------------------top */
.fv__readTxt{
  position: static;
}

/* --------------------------キャッチ */
.header__catch .elementor-heading-title .inn{
  padding: 0.5em 0.75em;
}
.header__catch .elementor-heading-title span.bg-wrap:first-child{
  margin-bottom: 1rem;
}

/* -----------------------------河辺プラント工業について */
.icon-head .elementor-icon-box-wrapper{
  align-items: baseline;
}

/* -----------------------------技術職として働く */
.triangle_txt::before{
  width: 0.75em;
  height: 1em;
  top: 0.2em;
  margin: 0;
}

/* -----------------------------代表インタビュー */
.bg-box__interview-right::before,.bg-box__interview-left::before,.bg-box__interview-middle::before{
  left: 0;width: 90%;
}
/* ----------------------------社員座談会 */
.crosstakl__content .speechBubble::after{
  top: 0;
  left: 65px;
  border-width: 0 20px 24px 0;
  border-color: transparent transparent var(--e-global-color-f243af5);
}

/* -----------------------------よくある質問 */
.faq .elementskit-faq-header::before, .faq .elementskit-faq-body::before{
  text-align: left;
  width: 30px;
}

/* -----------------------------募集要項 */

/* -----------------------------選考ステップ */
.triangle_step::before{
  width: 1.5rem;
  height: 1rem;
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% 100%,100% 0,0 0);
  top: auto;
  bottom: -2rem;
  left: 0;
  right: 0;
  margin: 0 auto;

}

}

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

 /* ----------------------------ハンバーガーメニュー */
 .header_nav_sp .hfe-nav-menu__layout-horizontal .hfe-nav-menu{
  overflow-x: hidden;
}
 /* ----------------------------フッターメニュー */

.footer__nav .hfe-nav-menu li.menu-item{
 width: 50%;
 margin-right: 0!important;
}

/* -----------------------------データ＆アンケート */
.pi_graph{
  width: 100%;
}
.elementor.elementor .e-con>.elementor-widget.questioQnnaire__line{
  max-width: 86%;
}
.questioQnnaire__line:nth-child(odd)::after{
  left: 16%;
}
.questioQnnaire__line:nth-child(even)::after{
  left: 84%;
}

/* -----------------------------社員座談会 */
.crosstalk__subHead .elementor-widget-container::before{
  top: 0.75em;
  bottom: auto;
  margin: 0;
}

/* -----------------------------form */
.smf-form--simple-table .smf-item__col--label{
  padding-bottom: 0.5em;
}

}