.header {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-image: url(../img/bg-flash.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 150% auto;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    url(../img/bg-y.png),
    url(../img/bg-r-top.png);
  background-position:
    left 0 top -1px,
    left 0 bottom -1px;
  background-repeat: no-repeat;
  background-size: 100% auto, 100% auto;
  overflow: hidden;
  mix-blend-mode: multiply;
}

.header-inner {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 1000px;
  margin: 0 auto;
}

.top-logo {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 58%;
  mix-blend-mode: multiply;
}

.top-chara {
  position: absolute;
  top: 0;
  right: 0;
  width: 74%;
}

.top-title {
  position: absolute;
  bottom: 6rem;
  left: 5%;
  width: 90%;
}

.top-left {
  animation-name: top-left;
  animation-duration: 2s;
  animation-delay: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes top-left {

  0% {
    transform: translateX(-400px);
    opacity: 0;
  }

  20% {
    transform: translateX(-30px);
    opacity: 1
  }

  100% {
    transform: translateX(0);
    opacity: 1
  }

}

.top-right {
  animation-name: top-right;
  animation-duration: 2s;
  animation-delay: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  opacity: 0;
  transform: rotate(-5deg);
}

@keyframes top-right {

  0% {
    transform: translateX(400px);
    opacity: 0;
  }

  20% {
    transform: translateX(30px);
    opacity: 1
  }

  100% {
    transform: translateX(0);
    opacity: 1
  }

}

.logo-left {
  animation-name: logo-left;
  animation-duration: 0.3s;
  animation-delay: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes logo-left {

  0% {
    transform: translate(200px,-20px) rotate(-6deg);
    opacity: 0;
  }

  100% {
    transform: translate(0,0) rotate(-6deg);
    opacity: 1
  }

}

@media screen and (min-width: 1px) and (max-width: 743px) {
  .header-inner {
    height: auto;
    padding-top: 110%;
  }

  .top-chara {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
  }

  .top-title {
    position: absolute;
    bottom: 1.5rem;
    left: 5%;
    width: 90%;
    transform: rotate(-6deg);
  }
}

@media screen and (min-width: 744px) and (max-width: 1024px) {
  .header-inner {
    padding: 90% 0 0;
    height: auto;
  }

  .top-chara {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
  }

  .top-title {
    bottom: 3.5rem;
  }
}

@media screen and (min-width: 1025px) {}