@charset "UTF-8";
.kv__slider__img {
  background-color: #000;
}
/*--- cssアニメーション ここから ---*/
.keyframe_bg_01 {
  animation-name: anim_sc;
}
@keyframes anim_sc {
  0% {
    opacity: 0;
    transform: scale(1, 1);
    left: 0;
    top: 0;
  }
  2% {
    opacity: 1;
  }
  23% {
    opacity: 1;
  }
  27% {
    transform: scale(1.15, 1.15);
    opacity: 1;
    left: 0;
    top: 0;
  }
  28% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.keyframe_bg_02 {
  animation-name: anim_sc2;
}
@keyframes anim_sc2 {
  0% {
    opacity: 0;
  }
  25% {
    transform: scale(1, 1);
    left: 0;
    top: 0;
    opacity: 0;
  }
  27% {
    opacity: 1;
  }
  48% {
    opacity: 1;
  }
  52% {
    transform: scale(1.15, 1.15);
    left: 0;
    top: 0;
    opacity: 1;
  }
  53% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.keyframe_bg_03 {
  animation-name: anim_sc3;
}
@keyframes anim_sc3 {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1, 1);
    left: 0;
    top: 0;
    opacity: 0;
  }
  52% {
    opacity: 1;
  }
  73% {
    opacity: 1;
  }
  75% {
    transform: scale(1.15, 1.15);
    left: 0;
    top: 0;
    opacity: 1;
  }
  78% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.keyframe_bg_04 {
  animation-name: anim_sc4;
}
@keyframes anim_sc4 {
  0% {
    opacity: 0;
  }
  75% {
    transform: scale(1, 1);
    left: 0;
    top: 0;
    opacity: 0;
  }
  77% {
    opacity: 1;
  }
  95% {
    left: 0;
    top: 0;
    opacity: 1;
  }
  100% {
    transform: scale(1.15, 1.15);
    left: 0;
    top: 0;
    opacity: 0;
  }
}
.animation {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 20s;
}
/************************************************************************************/
.keyframe_person_01 {
  animation-name: anim_ps1;
  left: 0;
  top: 0;
}
@keyframes anim_ps1 {
  0% {
    opacity: 0;
    transform: scale(1.3, 1.3);
    top: 0;
    left: 0px;
  }
  2% {
    transform: scale(1.1, 1.1);
    left: 0px;
    top: 0;
    opacity: 1;
  }
  6% {
    left: 0px;
    opacity: 1;
  }
  23% {
    left: 0px;
    opacity: 1;
  }
  25% {
    transform: scale(1, 1);
    opacity: 0;
    top: 0;
    left: 0px;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
    top: 0;
  }
}
.keyframe_person_02 {
  animation-name: anim_ps2;
  left: 0;
  top: 0;
}
@keyframes anim_ps2 {
  0% {
    opacity: 0;
    transform: scale(1.3, 1.3);
    top: 0;
    left: 0px;
  }
  25% {
    left: 0px;
    opacity: 0;
    transform: scale(1.2, 1.2);
    top: 0;
  }
  27% {
    left: 0px;
    top: 0;
    opacity: 1;
    transform: scale(1.1, 1.1);
  }
  31% {
    opacity: 1;
  }
  48% {
    left: 0px;
    opacity: 1;
  }
  50% {
    transform: scale(1, 1);
    opacity: 0;
    top: 0;
    left: 0px;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
    top: 0;
  }
}
.keyframe_person_03 {
  animation-name: anim_ps3;
  transform: scale(1.2, 1.2);
  left: 0;
  top: 0;
}
@keyframes anim_ps3 {
  0% {
    opacity: 0;
    top: 0;
    left: 0px;
  }
  50% {
    opacity: 0;
    transform: scale(1.2, 1.2);
    top: 0;
    left: 0px;
  }
  52% {
    left: 0px;
    top: 0;
    opacity: 1;
    transform: scale(1.1, 1.1);
  }
  56% {
    left: 0px;
    opacity: 1;
  }
  73% {
    left: 0px;
    opacity: 1;
  }
  75% {
    transform: scale(1, 1);
    opacity: 0;
    top: 0;
    left: 0px;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
    top: 0;
  }
}
.keyframe_person_04 {
  animation-name: anim_ps4;
  left: 0;
  top: 0;
}
@keyframes anim_ps4 {
  0% {
    opacity: 0;
    transform: scale(1.3, 1.3);
    top: 0;
    left: 0px;
  }
  75% {
    opacity: 0;
    transform: scale(1.2, 1.2);
    top: 0;
    left: 0px;
  }
  77% {
    left: 0px;
    top: 0;
    opacity: 1;
    transform: scale(1.1, 1.1);
  }
  81% {
    left: 0px;
    opacity: 1;
  }
  98% {
    left: 0px;
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
    top: 0;
    left: 0px;
  }
}
.animation2 {
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  /*animation-direction: alternate;*/
  animation-duration: 20s;
}
/*--- cssアニメーション ここまで ---*/