@charset "utf-8";

/*------------------------------------------------------------
  .mv
------------------------------------------------------------*/
.mv{
  background:linear-gradient(45deg, #134791,#134791,#6abbf8);
  background-size: 200% 200%;
  animation: bggradient 10s ease forwards;
  position: relative;
  overflow: hidden;
}
.mv:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/mv-bg.png) no-repeat top center / cover;
  opacity: 0;
  animation: p1 3s ease forwards;
  animation-delay: 5s;
}
@media only screen and (max-width: 960px) {
  .mv:after{
    background: url(../img/mv-bg_sp.png) no-repeat top center / 102%;
  }
}
@media only screen and (max-width: 820px) {
  .mv:after{
    height: calc(100% - 56px);
    top: 56px;
  }
}
@keyframes bggradient{
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@keyframes p1{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}