@charset "UTF-8";
.main-content {
  padding: 0 0 7%;
}

.test-wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
}

.jump-particle01 {
  display: block;
  width: 30%;
  position: absolute;
  top: 20%;
  left: -4%;
  -webkit-animation: animation-particle01 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) both;
          animation: animation-particle01 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

@-webkit-keyframes animation-particle01 {
  from {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
  }
  to {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

@keyframes animation-particle01 {
  from {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
  }
  to {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

.anim-rat-jump {
  width: 11%;
  height: 0;
  padding-bottom: 11.81481%;
  overflow: hidden;
  position: absolute;
  top: 30%;
  left: -20%;
  -webkit-animation: animation-rat-jump-move 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) both;
          animation: animation-rat-jump-move 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) both;
  z-index: 2;
}

.anim-rat-jump img {
  background: url("../img/anm_rat_jump.png") 0 0 no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  -webkit-animation: animation-rat-jump 0.7s steps(7) both;
          animation: animation-rat-jump 0.7s steps(7) both;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

@-webkit-keyframes animation-rat-jump {
  to {
    background-position: 0 100%;
  }
}

@keyframes animation-rat-jump {
  to {
    background-position: 0 100%;
  }
}

@-webkit-keyframes animation-rat-jump-move {
  from {
    left: 0%;
    top: 30%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  40% {
    left: 4%;
  }
  to {
    left: 10%;
    top: 10%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

@keyframes animation-rat-jump-move {
  from {
    left: 0%;
    top: 30%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  40% {
    left: 4%;
  }
  to {
    left: 10%;
    top: 10%;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

.header {
  height: 100vh;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
}

.header__release {
  height: 7.12963%;
  position: absolute;
  bottom: 16%;
  right: calc(100% - 78%);
  -webkit-animation: animation-heartbeat 0.5s linear infinite;
          animation: animation-heartbeat 0.5s linear infinite;
}

.header .btn_addmusic {
  height: 18.42593%;
  position: absolute;
  bottom: -1%;
  right: calc(100% - 78%);
  -webkit-animation: animation-heartbeat 0.5s linear infinite;
          animation: animation-heartbeat 0.5s linear infinite;
}

.header .btn_addmusic:hover {
  -webkit-filter: brightness(1.15);
          filter: brightness(1.15);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.silver-button {
  display: block;
  height: 15%;
  position: absolute;
  bottom: 24%;
  right: calc(100% - 77%);
  max-height: 181px;
  -webkit-transition: -webkit-transform 0.15s ease;
  transition: -webkit-transform 0.15s ease;
  transition: transform 0.15s ease;
  transition: transform 0.15s ease, -webkit-transform 0.15s ease;
  z-index: 40;
  pointer-events: painted;
}

.silver-button:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.silver-button img {
  vertical-align: bottom;
  height: 100%;
  -webkit-animation: animation-heartbeat 0.5s linear infinite;
          animation: animation-heartbeat 0.5s linear infinite;
}

.logo {
  display: block;
  width: 63.12963vh;
  height: 39.7963vh;
  position: relative;
  top: 140px;
  margin: 0 auto;
}

.logo__beat-left, .logo__beat-right {
  height: 65.14658%;
  position: absolute;
  top: 1%;
  -webkit-transform-origin: center;
          transform-origin: center;
}

.logo__beat-left {
  left: 3%;
  -webkit-animation: animation-logo-beat-left 0.5s ease-out infinite;
          animation: animation-logo-beat-left 0.5s ease-out infinite;
}

.logo__beat-right {
  right: 3%;
  -webkit-animation: animation-logo-beat-right 0.5s ease-out infinite;
          animation: animation-logo-beat-right 0.5s ease-out infinite;
}

.logo__heart {
  height: 100%;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: animation-heartbeat 0.5s linear infinite;
          animation: animation-heartbeat 0.5s linear infinite;
  position: relative;
}

.header-rat {
  background: url(../img/anm_rat_goal.png) 0 0 no-repeat;
  background-size: 100% auto;
  display: block;
  width: 20.46875%;
  height: 0;
  padding-bottom: 16.32812%;
  position: absolute;
  bottom: 3%;
  right: 2%;
  -webkit-animation: sprite-animation 0.5s steps(11) infinite;
          animation: sprite-animation 0.5s steps(11) infinite;
}

.header-rat img {
  display: block;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.btn-about {
  width: 44.6875%;
  height: 0;
  padding-bottom: 32.60417%;
  position: absolute;
  top: 60%;
  left: -9.5%;
  -webkit-transform: translate(0, -60%);
          transform: translate(0, -60%);
}

.btn-about__text {
  background: url(../img/btn_top_about.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 58.97436%;
  height: 57.66773%;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-animation: animation-heartbeat 0.5s linear infinite;
          animation: animation-heartbeat 0.5s linear infinite;
}

.btn-about__text:hover {
  background-position: 0 100%;
}

.btn-about__god {
  background: url(../img/anm_godrat_good.png) 0 0 no-repeat;
  background-size: 100% auto;
  display: block;
  width: 61.18881%;
  height: 102.97923%;
  position: absolute;
  bottom: -10%;
  left: 0;
  -webkit-animation: sprite-animation 1s steps(16) infinite;
          animation: sprite-animation 1s steps(16) infinite;
}

.information {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
}

.swiper-container {
  width: calc(100% - 10%);
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

.swiper-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.swiper-slide {
  width: 100%;
  z-index: 1;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 8px solid #afadb0;
}

.swiper-button-prev {
  background-image: url(../img/btn_topics_next.png);
}

.swiper-button-next {
  background-image: url(../img/btn_topics_prev.png);
}

.swiper-button-prev, .swiper-button-next {
  width: 2%;
  height: 0;
  padding-bottom: 20%;
  background-size: contain;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -40%);
          transform: translate(0, -40%);
}

.news-card {
  display: block;
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.news-card__date {
  font-weight: bold;
  color: #ffa71c;
}

.news-card__text-wrap {
  background-size: 30px 30px;
  background-color: #151515;
  background-image: radial-gradient(#2a2a2a 15%, transparent 20%), radial-gradient(#2a2a2a 15%, transparent 20%);
  background-position: 0 0, 15px 15px;
  width: 150%;
  height: 60%;
  position: absolute;
  bottom: -20%;
  left: calc( 50% - 75%);
  z-index: 5;
  padding: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 0;
  -webkit-transition: bottom 0.15s ease-out;
  transition: bottom 0.15s ease-out;
}

.news-card__text {
  width: 100%;
  height: 35%;
  padding: 0% 2% 2%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: white;
  font-size: 0.7em;
  font-family: 'メイリオ', sans-serif;
}

.news-card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  font-family: 'object-fit: cover;';
}

.swiper-slide:hover .news-card__text-wrap {
  bottom: -15%;
}

/* FOOTER ANIMATION */
.anim-rat-normal-dash {
  width: 19.46875%;
  height: 0;
  padding-bottom: 8.53125%;
  position: absolute;
  bottom: 100%;
  z-index: 100;
  -webkit-animation: animation-rat-dash-move 4.0s ease-out infinite;
          animation: animation-rat-dash-move 4.0s ease-out infinite;
}

.anim-rat-normal-dash img {
  background: url(../img/anm_rat_normal_dash.png) 0 0 no-repeat;
  background-size: 100% auto;
  width: 100%;
  height: 100%;
  -webkit-animation: sprite-animation 0.5s steps(12) infinite;
          animation: sprite-animation 0.5s steps(12) infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}