/* for pc */
@media only screen
and (min-device-width: 768px) {
  .bg-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: 2;
    width: 100%;
    height: 100%;
    -webkit-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;
    background-size: 0% 0%;
    background-position: 100% 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)) 0%, color-stop(rgba(0, 0, 0, 0.5)) 50%, to(rgba(0, 0, 0, 0.7))) 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.7)) 100%;
    opacity: 0;
  }

  .bg-overlay:hover::after {
    opacity: 1;
  }
}

/* for sp */
@media only screen
and (max-device-width: 767px) {
  .bg-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: 2;
    width: 100%;
    height: 100%;
    -webkit-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;
    background-size: 0% 0%;
    background-position: 100% 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)) 0%, color-stop(rgba(0, 0, 0, 0.5)) 50%, to(rgba(0, 0, 0, 0.7))) 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.7)) 100%;
    opacity: 0;
  }

  .bg-overlay.onView::after {
    opacity: 1;
  }
}

@-webkit-keyframes bg-overlay {
  0% {
    background-position: 100% 0%;
  }
  25% {
    background-position: 100% 25%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 100% 75%;
  }
  100% {
    background-position: 100% 100%;
  }
}

@keyframes bg-overlay {
  0% {
    background-position: 100% 0%;
  }
  25% {
    background-position: 100% 25%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 100% 75%;
  }
  100% {
    background-position: 100% 100%;
  }
}
/*# sourceMappingURL=animation.css.map */