@charset "utf-8";

body {
  font-family: Arial, Helvetica, sans-serif;
}

img {
  vertical-align: bottom;
}

.wrap {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.banner {
}

.banner__body {
  position: relative;
  background-image: linear-gradient(#e1bcff, #fdf4f5);

}

.banner__foot {
  padding: 2rem;
  background-color: #fdf4f5;
}

.banner__img {
  max-width: 100%;
  height: auto;
}

.banner__date {
  position: absolute;
  top: 5%;
  width: 100%;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #8964ad;
}

.banner__prize {
  position: absolute;
  width: 30%;
  height: auto;
}

.banner__prize--01 {
  top: 30%;
  right: 5%;
}

.banner__prize--02 {
  top: 35.5%;
  left: 3%;
}

.banner__prize--03 {
  top: 61%;
  right: 2%;
}

.banner__btn {
  display: block;
  padding: 1rem;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: 26px;
  background-image: linear-gradient(to right, #8964ad, #5e3c7e);
  border: solid 1px #a685c7;
  border-radius: 1rem;
}

.process__img {
  max-width: 100%;
  height: auto;
}

.ani-count-infinite {
  animation-iteration-count: infinite;
}

.ani-duration-3 {
  animation-duration: 3s;
}

.ani-duration-4 {
  animation-duration: 4s;
}

.ani-duration-5 {
  animation-duration: 5s;
}

.ani-move-y {
  animation-name: moveY;
  animation-timing-function: ease-in-out;
}

@keyframes moveY {
  0% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(10px)
  }

  to {
    transform: translateY(0)
  }
}