@charset "utf-8";



/* ========================================
mv scroll
======================================== */
@keyframes scroll {
  0% {
    height: 0;
    top: 22px;
    bottom: inherit;
  }
  29% {
    height: 50px;
    top: 22px;
    bottom: inherit;
  }
  30% {
    height: 50px;
    top: inherit;
    bottom: 0;
  }
  49% {
    height: 0;
    top: inherit;
    bottom: 0;
  }
  100% {
    height: 0;
    top: 22px;
    bottom: inherit;
  }
}


/* ========================================
fade-in
======================================== */
@keyframes fade-in {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


/* ========================================
graph-icon
======================================== */
@keyframes graph-icon-before {
  0% {
    transform: translate(-50%,-50%) rotate(0);
  }
  40% {
    transform: translate(-50%,-50%) rotate(-360deg);
  }
  100% {
    transform: translate(-50%,-50%) rotate(-360deg);
  }
}
@keyframes graph-icon-after {
  0% {
    transform: translate(-50%,-50%) rotate(-90deg);
  }
  40% {
    transform: translate(-50%,-50%) rotate(-450deg);
  }
  100% {
    transform: translate(-50%,-50%) rotate(-450deg);
  }
}