@charset "UTF-8";
@import url(
  https://fonts.googleapis.com/css?family=Noto+Sans+JP:500,
  700&display=swap&subset=japanese
);
* {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

*,
::after,
::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  line-height: 1;
}

html * {
  max-width: 600px;
}

body {
  background-color: #ccc;
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
  min-height: 100vh;
  color: #4d4848;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

main {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

@-webkit-keyframes rabbit {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(-15px, 0);
    transform: translate(-15px, 0);
  }
  75% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes rabbit {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(-15px, 0);
    transform: translate(-15px, 0);
  }
  75% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

.banner {
  width: 100%;
  position: relative;
}

.top-button {
  width: 95%;
  position: absolute;
  top: 18.5%;
  left: 2.5%;
}

.bottom-button {
  width: 95%;
  position: absolute;
  bottom: 6%;
  left: 2.5%;
}

@-webkit-keyframes shiny {
  0% {
    left: -30%;
  }
  20% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}
@keyframes shiny {
  0% {
    left: -30%;
  }
  20% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}