/* sec-service */
.sec-service.active .slidein {
    animation:.3s forwards slideIn;
}

.sec-service.active .fadein {
    animation:.4s forwards 0.6s fadeIn;
}
.sec-service.active .fadein-up {
    animation:.4s forwards 0.8s fadeInUp;
}

.sec-service.active .contFlex01 .fadein-up:nth-child(1) {
  animation:.4s forwards .5s fadeInUp;
}
.sec-service .contFlex01 .fadein-up:nth-child(1) .img01{
  opacity: 0;
  transform: scale(.001);
}
.sec-service.active .contFlex01 .fadein-up:nth-child(1) .img01{
  animation:.4s forwards 1.25s scale;
}

.sec-service.active .contFlex01 .fadein-up:nth-child(2) {
  animation:.4s forwards 2.25s fadeInUp;
}
.sec-service .contFlex01 .fadein-up:nth-child(2) .img01{
  opacity: 0;
  transform: scale(.001);
}
.sec-service.active .contFlex01 .fadein-up:nth-child(2) .img01{
  animation:.4s forwards 2.75s scale;
}

.sec-service.active .contFlex01 .fadein-up:nth-child(3) {
  animation:.4s forwards 3.25s fadeInUp;
}
.sec-service .contFlex01 .fadein-up:nth-child(3) .img01{
  opacity: 0;
  transform: scale(.001);
}
.sec-service.active .contFlex01 .fadein-up:nth-child(3) .img01{
  animation:.4s forwards 3.75s scale;
}

/* sec-product */
.sec-product {
    transform: translateX(-100%);
}
.sec-product.active {
    animation:.6s forwards sec-product;
}
.sec-product.active .slidein {
    animation:.4s forwards .8s slideIn;
}
.sec-product.active .fadein {
    animation:.4s forwards 1.2s fadeIn;
}

.sec-product .contFlexBox02::before {
    width: 0;
}
.sec-product.active .contFlexBox02::before {
    animation:.4s forwards 1.6s contFlexBox02Before;
}
.sec-product .contFlexBox02 .relative-wrap .vid_main {
    opacity: 0;
}
.sec-product.active .contFlexBox02 .relative-wrap .vid_main {
    animation:.4s forwards 2.2s fadeIn;
}
@keyframes sec-product{
    0% {
      transform: translateX(-100%);
    }
  
    100% {
      transform: translateX(0);
    }
}
@keyframes contFlexBox02{
    0% {
      width: 0;
    }
  
    100% {
        width: 485px;
    }
}
@keyframes contFlexBox02Before{
    0% {
      width: 0;
    }
    100% {
        width: calc(50vw - 265px);
    }
}

/* sec-news */
.sec-news.active .slidein {
    animation:.3s forwards slideIn;
}
.sec-news.active .fadein {
    animation:.4s forwards 0.6s fadeIn;
}
.sec-news.active .fadein-up {
    animation:.1s forwards 0.6s fadeInUp;
}

/* sec-recruit */
.sec-recruit {
    position: relative;
}
.sec-recruit .contBlock03 {
    opacity: 0;
}
.sec-recruit.active .contBlock03 {
    animation:.1s forwards .5s fadeIn;
}
.sec-recruit::before {
    content: "";
    background-color: #414f63;
    position: absolute;
    top: 0;
    left: -100%;
    bottom: 0;
    z-index: 1000;
    width: 100%;
}
.sec-recruit.active::before {
    animation:.6s forwards contBlock03BeforeIn, .6s forwards 0.8s contBlock03BeforeOut;
}
/* .sec-recruit .contBlock03 {
    height: 313px;
    transform: translateX(-100%);
}
.sec-recruit.active .contBlock03 {
    animation:.6s forwards contBlock03;
} */
.sec-recruit.active .slidein {
    animation:.3s forwards 1s slideIn;
}
.sec-recruit.active .fadein {
    animation:.4s forwards 1.3s fadeIn;
}
.sec-recruit.active .fadein-up {
    animation:.4s forwards 1.7s fadeInUp;
}

@keyframes contBlock03 {
    0% {
      transform: translateX(-100%);
    }
  
    100% {
      transform: translateX(0);
    }
}
@keyframes contBlock03BeforeIn {
    0% {
        left: -100%;
    }
    100% {
        left: 0;
    }
}
@keyframes contBlock03BeforeOut {
    0% {
        width: 100%;
        margin-left: 0;
      }
    100% {
        width: 0;
        margin-left: 100%;
    }
}

/* 共通 */
.fadein {
    opacity: 0;
}
.fadein-up {
    opacity: 0;
}
.slidein {
    opacity: 0;
    transform: translateX(-50px);
}
body {
    position: relative;
}
/* body.home::before,
body.home::after {
  content: none;
} */
body::before,
body::after {
    content: "";
    position: fixed;
    height: 50vh;
    background-color: #0e192d;
    width: 100%;
    z-index: 100000;
}
body::before {
  bottom: 0;
  right: 0;
}
body::after {
  top: 0;
  left: 0;
}

body.fade-in::before {
    right: 0;
}
body.fade-in::before {
    animation:.4s forwards .3s bodyFadeInBefore;
}
body.fade-out::before {
    animation:.4s forwards bodyFadeOutBefore;
}
body.fade-in::after {
    left: 0;
}
body.fade-in::after {
    animation:.4s forwards .3s bodyFadeIn;
}
body.fade-out::after {
    animation:.4s forwards bodyFadeOut;
}
@keyframes fadeIn{
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
}
@keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
  
    100% {
      opacity: 1;
      transform: translateY(0);
    }
}
@keyframes scale {
    0% {
      opacity: 0;
      transform: scale(.001);
    }
  
    100% {
      opacity: 1;
      transform: scale(1);
    }
}

@keyframes slideIn{
    0% {
      opacity: 0;
    transform: translateX(-50px);
    }
  
    100% {
      opacity: 1;
    transform: translateX(0);
    }
}

@keyframes bodyFadeOut{
    0% {
      left: -100%;
    }
  
    100% {
        left: 0;
    }
}
@keyframes bodyFadeOutBefore {
    0% {
      right: -100%;
    }
  
    100% {
        right: 0;
    }
}

@keyframes bodyFadeIn{
    0% {
        width: 100%;
        margin-left: 0;
      }
    100% {
        width: 0;
        margin-left: 100%;
    }
}
@keyframes bodyFadeInBefore {
    0% {
        width: 100%;
        margin-right: 0;
      }
    100% {
        width: 0;
        margin-right: 100%;
    }
}


/* sec-service */