@-webkit-keyframes slide_anim_start {
  0% {
    left: -5vw;
    opacity: 0.7;
  }
  15% {
    opacity: 1.0;
  }
  85% {
    opacity: 1.0;
  }
  100% {
    left: -15vw;
    opacity: 0.0;
  }
}

@keyframes slide_anim_start {
  0% {
    left: -5vw;
    opacity: 0.7;
  }
  15% {
    opacity: 1.0;
  }
  85% {
    opacity: 1.0;
  }
  100% {
    left: -15vw;
    opacity: 0.0;
  }
}

@-webkit-keyframes slide_anim {
  0% {
    left: -5vw;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    left: -15vw;
    opacity: 0;
  }
}

@keyframes slide_anim {
  0% {
    left: -5vw;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    left: -15vw;
    opacity: 0;
  }
}

picture#title {
  display: block;
  z-index: 1;
  position: absolute;
  left: 0;
  min-height: 0%;
}

ul#background {
  display: block;
  z-index: 0;
  position: absolute;
  left: 0;
  width: 100vw;
  overflow-x: hidden;
}

ul#background > li {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
}

ul#background > li:nth-of-type(1) {
  background-image: url("https://media.fromsoftware.jp/eldenring/resources/images/prologue/ss_01.png");
}

ul#background > li:nth-of-type(2) {
  background-image: url("https://media.fromsoftware.jp/eldenring/resources/images/prologue/ss_02.png");
}

ul#background > li:nth-of-type(3) {
  background-image: url("https://media.fromsoftware.jp/eldenring/resources/images/prologue/ss_03.png");
}

ul#background > li:nth-of-type(4) {
  background-image: url("https://media.fromsoftware.jp/eldenring/resources/images/prologue/ss_04.png");
}

ul#background > li:nth-of-type(5) {
  background-image: url("https://media.fromsoftware.jp/eldenring/resources/images/prologue/ss_05.png");
}

ul#background > li:nth-of-type(6) {
  background-image: url("https://media.fromsoftware.jp/eldenring/resources/images/prologue/ss_06.png");
}

ul#background > li:nth-of-type(7) {
  background-image: url("https://media.fromsoftware.jp/eldenring/resources/images/prologue/ss_07.png");
}

ul#background > li.move {
  -webkit-animation: slide_anim 12s linear 0s 1 normal forwards;
  animation: slide_anim 12s linear 0s 1 normal forwards;
}

ul#background > li.start {
  -webkit-animation: slide_anim_start 12s linear 0s 1 normal forwards;
  animation: slide_anim_start 12s linear 0s 1 normal forwards;
}

ul#background::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
}

ul#background::before {
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.7);
}

picture#text {
  -webkit-transition: opacity 3s;
  display: block;
  position: relative;
  opacity: 0;
  transition: opacity 3s;
}

picture#text.view {
  opacity: 1;
}

picture#text > img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0%;
}

@media all and (min-width: 768px) {
  picture#title {
    top: 400px;
    width: 459px;
    height: 23px;
  }
  picture#title > img {
    width: 459px;
    height: 23px;
  }
  ul#background {
    top: 300px;
    height: calc( 100vh - -480px);
  }
  ul#background > li {
    background-position: center center;
  }
  picture#text {
    width: 829px;
    height: 1139px;
    margin: 194px auto 87px;
  }
}

@media all and (max-width: 767px) {
  picture#title {
    top: 9.3vw;
    width: auto;
    height: 3.4vw;
  }
  picture#title > img {
    width: auto;
    height: 3.4vw;
  }
  ul#background {
    top: 13.1vw;
    height: calc( 100vh - 13.1vw);
  }
  ul#background > li:nth-of-type(1) {
    background-position: 53.5% 50%;
  }
  ul#background > li:nth-of-type(2) {
    background-position: 50% 50%;
  }
  ul#background > li:nth-of-type(3) {
    background-position: 37.5% 50%;
  }
  ul#background > li:nth-of-type(4) {
    background-position: 86.5% 50%;
  }
  ul#background > li:nth-of-type(5) {
    background-position: 50% 50%;
  }
  ul#background > li:nth-of-type(6) {
    background-position: 32.5% 50%;
  }
  ul#background > li:nth-of-type(7) {
    background-position: 50% 50%;
  }
  picture#text {
    width: 88.3vw;
    height: 175.7vw;
    margin: 28.2vw auto 18.3vw;
  }
}