/*===================================
 newフェードイン用のCSS type01
===================================*/

/* 左から */
.slide-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.5s 0s ease-out;
}
/* 遅らせて表示 */
.slide-left.delay01{
    transition: all 0.5s 0.2s ease-out;
}
.slide-left.delay02{
    transition: all 0.5s 0.4s ease-out;
}
.slide-left.delay03{
    transition: all 0.5s 1.0s ease-out;
}
.slide-left.delay04{
    transition: all 0.5s 1.1s ease-out;
}

/* 右から */
.slide-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.5s 0s ease-out;
}

/* 下から */
.slide-bottom {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s 0s ease-out;
}

/* 上から */
.slide-top {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.5s 0s ease-out;
}

/* ページ読み込んだ瞬間 */
.load {
	opacity: 1;
	transform: translate(0, 0);
}




/* アニメーション ------------------ */
.scroll-fade {
  transform: translate3d(0, 20px, 0);
  transition: 1s;
  opacity: 0;
}
/* left */
.scroll-fade.in-left {
  transform: translate3d(-30px, 5px, 0);
  transition: 1s;
  opacity: 0;
}
/* right */
.scroll-fade.in-right {
  transform: translate3d(30px, 5px, 0);
  transition: 1s;
  opacity: 0;
}
.scroll-fade.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.fadein {
  opacity : 0;
  transition : all 1s;
}
  
.fadein.active{
  opacity : 1;
}





.whi_sli {
  overflow: hidden;
  position: relative;
}

.whi_sli::before {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  background-color: var(--color-bg-blue);
  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 2;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.whi_sli.gray_whi_sli::before {
  background-color: #E9E9E9 !important;
}
.recruit-main .whi_sli::before,.bg_white .whi_sli::before {
  background-color: #fff !important;
}
.recruit-main .bg_gray .whi_sli::before{
	background-color: #F5F5F5 !important;
}
.recruit-main .bg_yellow .whi_sli::before{
	background-color: var(--color-yellow) !important;
}
.whi_sli.isShow::before {
  right: -100%;
}