@charset "UTF-8";

body {
  background-color: #000;
}

/* kv */

.kv {
  background-image: url(../img/home/kv_bg_pc.png);
  background-size: cover;
  background-position: bottom center;
  background-repeat: repeat-x;
}

.kv-wrapper {
  padding: 1.756vw 0 5.71vw;
  position: relative;
}

.kv-ttl {
  margin: 0 auto 31.478vw;
  width: 40.556%;
}

.kv-character {}

.kv-character-left {}

.kv-character-left-item,
.kv-character-right-item,
.kv-character-main-oshiri,
.kv-character-main-kaito {
  position: absolute;
}

.kv-character-left-item {
  opacity: 0;
  transition: 2s;
  -webkit-transition: 2s;
  -moz-transition: 2s;
  -ms-transition: 2s;
  -o-transition: 2s;
}

.kv-character-left-item.-item1 {
  top: 1.756vw;
  left: 14.421vw;
  width: 18.301%;
}

.kv-character-left-item.-item2 {
  top: 23.426vw;
  left: 30.189vw;
  width: 7.174%;
  animation-delay: 1s;
}

.kv-character-left-item.-item3 {
  top: 31.844vw;
  left: 13.836vw;
  width: 13.323%;
}

.kv-character-left-item.-item4 {
  top: 41.361vw;
  left: 21.303vw;
  width: 8.491%;
  animation-delay: 1s;
}

.kv-character-right {}

.kv-character-right-item {
  opacity: 0;
  transition: 2.2s;
  -webkit-transition: 2.2s;
  -moz-transition: 2.2s;
  -ms-transition: 2.2s;
  -o-transition: 2.2s;
}


.kv-character-right-item.-item1 {
  top: 1.83vw;
  right: 11.859vw;
  width: 22.181%;
}

.kv-character-right-item.-item2 {
  top: 22.693vw;
  right: 20.571vw;
  width: 9.297%;
}

.kv-character-right-item.-item3 {
  top: 30.673vw;
  right: 12.225vw;
  width: 11.054%;
  animation-delay: 1s;
}

.kv-character-right-item.-item4 {
  top: 38.36vw;
  right: 21.888vw;
  width: 8.491%;
}

.kv-character-right-item.-item5 {
  top: 45.241vw;
  right: 26.134vw;
  width: 11.493%;
  animation-delay: 1s;
}

.kv-character-main {}

.kv-character-main-oshiri {
  top: 33.528vw;
  left: 29.868vw;
  width: 17.862%;
  opacity: 0;
  transition: 2.4s;
  -webkit-transition: 2.4s;
  -moz-transition: 2.4s;
  -ms-transition: 2.4s;
  -o-transition: 2.4s;
}

.kv-character-main-kaito {
  top: 26.354vw;
  right: 25.622vw;
  width: 26.939%;
  opacity: 0;
  transition: 2.4s;
  -webkit-transition: 2.4s;
  -moz-transition: 2.4s;
  -ms-transition: 2.4s;
  -o-transition: 2.4s;
}

.kv-fight {
  position: absolute;
  top: 36.603vw;
  left: 48.096vw;
  width: 4.099%;
}

.kv-roadshow {
  width: 15.373%;
  /* opacity: 0;
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s; */
}

.kv-toani {
  margin: 0 auto;
}

.kv-toani-item {
  display: block;
}

/* .kv-bigBnr {
  margin: 0 auto 3.074vw;
  width: 45.68%;
}

.kv-bigBnr-item {
  display: block;
} */

.kv-bnr {
  width: 45.68%;
}

.kv-bnr-item {
  display: block;
  /* opacity: 0;
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s; */
}

.kv-bnr-item.-nurie {
  top: 26.866vw;
  left: 2.635vw;
  width: 12.591%;
}

.kv-bnr-item.-cp {
  top: 40.629vw;
  left: 1.756vw;
  /* width: 15.466%; */
  width: 14.568%;
}

.kv-bnr-item.-goods {
  top: 41.068vw;
  left: 2.635vw;
  width: 14.421%;
}

.kv-bnr-item.-insta {
  top: 40.629vw;
  right: 2.708vw;
  width: 13.177%;
}

.kv-btn {
  margin-bottom: 2.269vw;
}

.kv-btn-blue {
  margin: 0 auto 0.439vw;
  width: 80.527%;
}

.kv-btn-blue-item {
  display: block;
  width: calc(100% / 5 - 0.8%);
  /* width: 19.272%; */
}

.kv-btn-big {}

.kv-btn-big-item {
  display: block;
  /* width: 32.181%; */
}

.kv-widget {
  max-width: 840px;
  margin: 0 auto 2.269vw;
}

.kv-end {
  margin: 0 auto 2.562vw;
  width: 51.024%;
}

.kv-billing {
  margin: 0 auto;
  width: 50.292%;
}

@media (min-width: 769px) {

  .kv-roadshow {
    position: absolute;
    top: 1.756vw;
    left: 1.244vw;
  }

  .kv-toani {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3.367vw;
    width: 80.527%;
  }
  
  .kv-toani-item {
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    width: 32%;
  }

  .kv-toani-item:hover {
    transform: scale(1.06);
    -webkit-transform: scale(1.06);
    -moz-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -o-transform: scale(1.06);
  }
  
  /* .kv-bigBnr-item {
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
  }

  .kv-bigBnr-item:hover {
    transform: scale(1.06);
    -webkit-transform: scale(1.06);
    -moz-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -o-transform: scale(1.06);
  } */

  .kv-bnr-item {
    position: absolute;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    animation-delay: 3.8s;
  }

  .kv-bnr-item:hover {
    transform: scale(1.06);
    -webkit-transform: scale(1.06);
    -moz-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -o-transform: scale(1.06);
  }

  .kv-btn-blue {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.909%;
    justify-content: center;
  }

  .kv-btn-blue-item {
    margin-bottom: 0.732vw;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
  }

  .kv-btn-blue-item:hover {
    transform: scale(1.06);
    -webkit-transform: scale(1.06);
    -moz-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -o-transform: scale(1.06);
  }

  .kv-btn-big {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 44.802%;
  }

  .kv-btn-big-item {
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    width: 48.692%;
  }

  .kv-btn-big-item:hover {
    transform: scale(1.06);
    -webkit-transform: scale(1.06);
    -moz-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -o-transform: scale(1.06);
  }
}

@media screen and (max-width: 768px) {

  .kv {
    background-image: url(../img/home/kv_bg_sp.png);
    background-size: auto 100%;
    overflow: hidden;
  }

  .kv-wrapper {
    padding: 10.666vw 0 12vw;
  }

  .kv-ttl {
    margin: 0 auto 62.4vw;
    width: 75.733%;
    position: relative;
    z-index: 4;
  }

  .kv-character-left-item.-item1 {
    top: 1.066vw;
    left: 0;
    width: 34.4%;
  }

  .kv-character-left-item.-item2 {
    top: 56vw;
    left: 19.2vw;
    width: 13.333%;
  }

  .kv-character-left-item.-item3 {
    top: 61.333vw;
    left: 0;
    width: 24.8%;
  }

  .kv-character-left-item.-item4 {
    top: 86.666vw;
    left: 0;
    width: 16%;
  }

  .kv-character-right-item.-item1 {
    top: 1.6vw;
    right: -3.2vw;
    width: 41.866%;
  }

  .kv-character-right-item.-item2 {
    top: 54.133vw;
    right: 1.333vw;
    width: 17.6%;
  }

  .kv-character-right-item.-item3 {
    top: 77.866vw;
    right: -1.6vw;
    width: 20.8%;
  }

  .kv-character-right-item.-item4 {
    top: 91.466vw;
    right: 16.266vw;
    width: 16%;
  }

  .kv-character-right-item.-item5 {
    top: 104.533vw;
    right: 20.533vw;
    width: 21.866%;
  }

  .kv-character-main-oshiri {
    top: 77.6vw;
    left: 13.066vw;
    width: 34.133%;
  }

  .kv-character-main-kaito {
    top: 54.133vw;
    right: 7.2vw;
    width: 51.2%;
  }

  .kv-fight {
    top: 79.2vw;
    left: 45.6vw;
    width: 9.066%;
  }

  .kv-roadshow {
    margin: 0 auto 4.266vw;
    width: 33.333%;
  }


  .kv-toani {
    margin-bottom: 5.866vw;
    width: 89.333%;
  }
  
  .kv-toani-item {
    margin-bottom: 0.533vw;
  }

  .kv-bigBnr {
    margin-bottom: 1.333vw;
    width: 89.333%;
  }

  .kv-bnr {
    margin: 0 auto 3.733vw;
    width: 89.333%;
  }

  .kv-bnr-item.-nurie {
    margin-bottom: 1.333vw;
    width: 100%;
  }

  .kv-bnr-item.-goods {
    margin-bottom: 1.333vw;
    width: 100%;
  }

  .kv-bnr-item.-cp {
    margin-bottom: 1.333vw;
    width: 100%;
  }

  .kv-bnr-item.-insta {
    width: 100%;
  }

  .kv-btn {
    margin: 0 auto;
    width: 89.333%;
    margin-bottom: 8.533vw;
  }

  .kv-btn-blue {
    margin: 0 auto 3.733vw;
    width: 100%;
  }

  .kv-btn-blue-item {
    margin-bottom: 1.333vw;
    width: 100%;
  }

  .kv-btn-blue-item:last-child {
    margin-bottom: 0;
  }

  .kv-btn-big-item {
    width: 100%;
    margin-bottom: 1.333vw;
  }

  .kv-btn-big-item:last-child {
    margin-bottom: 0;
  }

  .kv-widget {
    max-width: 342px;
    margin: 0 auto 8.553vw;
  }

  .kv-end {
    margin: 0 auto 2.933vw;
    width: 90.933%;
  }

  .kv-billing {
    width: 90.666%;
  }
}


/* trailer */

.trailer {
  position: relative;
  margin-top: -3.66vw;
  /* z-index: -1; */
  overflow: hidden;
}

.trailer-bg-video {
  width: 110%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  z-index: -2;
}

.trailer-bg-mask {
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* .trailer-bg {
  aspect-ratio: 16/9;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -3;
  width: 100%;
  height: 100%;
}

.trailer-bg-movie {
  object-fit: cover;
  width: 110%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  pointer-events: none;
}

.trailer-bg-mask {
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
} */

.trailer-wrapper {
  padding: 6vw 0 8.5vw;
  position: relative;
  z-index: 3;
}

.trailer-ttl {
  margin: 0 auto 2.855vw;
  width: 33.748%;
}

.trailer-thumbnail {
  border: 10px solid #fff;
  display: block;
  margin: 0 auto;
  position: relative;
  width: 66.91%;
  pointer-events: auto;
}

.trailer-thumbnail::after {
  content: '';
  background-image: url(../img/home/trailer_play.png);
  background-size: contain;
  background-position: 0 0;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 5.856vw;
  width: 5.856vw;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

@media (min-width: 769px) {

  .trailer-thumbnail {
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
  }

  .trailer-thumbnail:hover.trailer-thumbnail img {
    opacity: 0.8;
  }

  .trailer-thumbnail::after {
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
  }

  .trailer-thumbnail:hover.trailer-thumbnail::after {
    transform: scale(1.06) translate(-50%, -50%);
    -webkit-transform: scale(1.06) translate(-50%, -50%);
    -moz-transform: scale(1.06) translate(-50%, -50%);
    -ms-transform: scale(1.06) translate(-50%, -50%);
    -o-transform: scale(1.06) translate(-50%, -50%);
  }
}

@media screen and (max-width: 768px) {

  .trailer {
    margin-top: -3.66vw;
  }

  .trailer-bg-video {
    width: 160%;
  }

  /* .trailer-bg {} */

  /* .trailer-bg-movie {
    width: 160%; */
  /* transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%); */
  /* } */

  /* .trailer-bg-mask {} */

  .trailer-wrapper {
    padding: 5.066vw 0 11.733vw;
  }

  .trailer-ttl {
    margin: 0 auto 2.933vw;
    width: 60%;
  }

  .trailer-thumbnail {
    border: 5px solid #fff;
    width: 89.333%;
  }

  .trailer-thumbnail::after {
    height: 13.6vw;
    width: 13.6vw;
  }
}


/* intro */

.intro {
  background-image: url(../img/home/intro_bg_pc.png);
  background-position: top center;
  background-size: cover;
  background-repeat: repeat-x;
  position: relative;
  margin-top: -3.66vw;
}

.intro-wrapper {
  padding: 5.344vw 0 6.954vw;
  position: relative;
  z-index: 2;
}

.intro-ttl {
  margin: 0 auto 2.708vw;
  width: 54.538%;
}

.intro-headline {
  margin: 0 auto 1.244vw;
  width: 60.029%;
}

.intro-detail {
  margin: 0 auto 1.024vw;
  width: 51.61%;
}

.intro-serif {
  margin: 0 auto;
  width: 24.011%;
}

.intro-star {
  position: absolute;
  top: 9.882vw;
  left: 10.98vw;
  width: 15.08%;
  z-index: 1;
  animation-delay: 1s;
}

.intro-moon {
  position: absolute;
  top: 21.449vw;
  right: 12.298vw;
  width: 11.932%;
  z-index: 1;
}

.intro-oshiri {
  position: absolute;
  bottom: -2vw;
  left: 1.464vw;
  width: 28.55%;
}

.intro-kaito {
  position: absolute;
  bottom: -2vw;
  right: 1.756vw;
  width: 28.55%;
}

@media (min-width: 769px) {}

@media screen and (max-width: 768px) {

  .intro {
    background-image: url(../img/home/intro_bg_sp.png);
    margin-top: -3.66vw;
  }

  .intro-wrapper {
    padding: 12vw 0 43.2vw;
  }

  .intro-ttl {
    margin: 0 auto 1.333vw;
    width: 100%;
  }

  .intro-headline {
    margin: 0 auto 5.6vw;
    width: 74.933%;
  }

  .intro-detail {
    margin: 0 auto 2.933vw;
    width: 100%;
  }

  .intro-serif {
    width: 60%;
  }

  .intro-star {
    top: 45.6vw;
    left: 1.6vw;
    width: 26.666%;
  }

  .intro-moon {
    top: 61.6vw;
    right: 2.666vw;
    width: 21.066%;
  }

  .intro-oshiri {
    bottom: -8vw;
    left: 1.464vw;

    width: 43.466%;
  }

  .intro-kaito {
    bottom: -8vw;
    right: 1.756vw;
    width: 43.466%;
  }
}


/* story */

.story {
  background-image: url(../img/home/story_bg_pc.png);
  background-position: top center;
  background-size: cover;
  background-repeat: repeat-x;
  margin-top: -3.66vw;
  position: relative;
}

.story-wrapper {
  padding: 5.417vw 0;
  position: relative;
}

.story-ttl {
  margin: 0 auto 1.464vw;
  width: 25.622%;
}

.story-box {
  margin: 0 auto;
  position: relative;
  width: 69.326%;
}

.story-box-bg {}

.story-box-contents {
  position: absolute;
  top: 7.32vw;
  left: 50%;
  width: 77.191%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

.story-box-detail {
  margin-bottom: 5.197vw;
}

.story-box-copy {}

.story-character {}

.story-character-left {}

.story-character-left-item,
.story-character-right-item {
  position: absolute;
}

.story-character-left-item.-item1 {
  top: 7.393vw;
  left: 5.27vw;
  width: 17.789%;
}

.story-character-left-item.-item2 {
  top: 41.8vw;
  left: 12.591vw;
  width: 8.199%;
}

.story-character-left-item.-item3 {
  top: 51.991vw;
  left: 3.674vw;
  width: 15.885%;
  animation-delay: 1s;
}

.story-character-left-item.-item4 {
  top: 65.812vw;
  left: 13.689vw;
  width: 7.833%;
}

.story-character-right {}

.story-character-right-item.-item1 {
  top: 7.32vw;
  right: 1.39vw;
  width: 24.377%;
}

.story-character-right-item.-item2 {
  top: 29.575vw;
  right: 11.639vw;
  width: 10.322%;
  animation-delay: 1s;
}

.story-character-right-item.-item3 {
  top: 37.408vw;
  right: 1.756vw;
  width: 15.153%;
}

.story-character-right-item.-item4 {
  top: 54.465vw;
  right: 6.149vw;
  width: 11.786%;
  animation-delay: 1s;
}

.story-character-right-item.-item5 {
  top: 63.836vw;
  right: 10.175vw;
  width: 14.421%;
  animation-delay: 1s;
}

@media (min-width: 769px) {}

@media screen and (max-width: 768px) {
  .story {
    background-image: url(../img/home/story_bg_sp.png);
    margin-top: -1.2vw;
    overflow: hidden;
  }

  .story-wrapper {
    padding: 6.133vw 0 9vw;
  }

  .story-ttl {
    margin: 0 auto 2.666vw;
    width: 48.8%;
  }

  .story-box {
    width: 100%;
  }

  .story-box-bg {}

  .story-box-contents {
    top: 13.066vw;
    width: 86.666%;
  }

  .story-box-detail {
    margin-bottom: 3.733vw;
  }

  .story-box-copy {
    margin: 0 auto;
    width: 90.461%;
  }

  .story-character-left-item.-item1 {
    top: 2.933vw;
    left: 3.466vw;
    width: 22.666%;
  }

  .story-character-left-item.-item2 {
    top: 127.466vw;
    left: -1.066vw;
    width: 14.4%;
  }

  .story-character-left-item.-item3 {
    top: 181.6vw;
    left: -1.866vw;
    width: 28%;
  }

  .story-character-left-item.-item4 {
    top: 200vw;
    left: 23.2vw;
    width: 12.533%;
  }

  .story-character-right-item.-item1 {
    top: 12.8vw;
    right: -1.6vw;
    width: 30.133%;
  }

  .story-character-right-item.-item2 {
    top: 127.2vw;
    right: 0.266vw;
    width: 16.533%;
  }

  .story-character-right-item.-item3 {
    top: 176vw;
    right: -4.533vw;
    width: 24.8%;
  }

  .story-character-right-item.-item4 {
    top: 194.666vw;
    right: -1.333vw;
    width: 19.2%;
  }

  .story-character-right-item.-item5 {
    top: 198.133vw;
    right: 14.133vw;
    width: 23.466%;
  }
}


/* loop */

.loop {
  background-image: url(../img/home/loop_pc.jpg);
  background-size: auto 100%;
  background-position: 0 0;
  background-repeat: repeat-x;
  width: 100%;
  height: 177px;
  animation-name: bgloop_pc;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@media screen and (max-width: 768px) {
  .loop {
    background-image: url(../img/home/loop_sp.jpg);
    height: 119px;
    animation-name: bgloop_sp;
  }

}

@keyframes bgloop_pc {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -1782px 0;
  }
}

@keyframes bgloop_sp {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -1200px 0;
  }
}

/* song */

.song {
  background-image: url(../img/home/song_bg_pc.png);
  background-position: bottom center;
  background-size: cover;
  background-repeat: repeat-x;
}

.song-wrapper {
  padding: 4vw 0 5.49vw;
}

.song-ttl {
  margin: 0 auto 1.244vw;
  width: 26.061%;
}

.song-box {
  margin: 0 auto;
  position: relative;
  width: 69.742%;
}

.song-box-bg {}

.song-box-contents {
  position: absolute;
  top: 5.856vw;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  width: 79.746%;
}

.song-box-head {
  margin-bottom: 2.518vw;
}

.song-box-head-name {
  margin-right: 4.392vw;
  width: 37.698%;
}

.song-box-head-img {
  width: 49.603%;
}

.song-box-body {
  width: 100%;
}

.song-box-body-prf {
  margin: 0 auto 2.562vw;
}

.song-box-body-comment {
  margin: 0 auto;
  box-shadow: 0 0 20px rgba(199, 0, 0, 0.17);
}


.song-box-body-txt {}

@media (min-width: 769px) {
  .song-box-head {
    align-items: center;
    display: flex;
    justify-content: end;
  }
}

@media screen and (max-width: 768px) {

  .song {
    background-image: url(../img/home/song_bg_sp.png);
  }

  .song-wrapper {
    padding: 7.2vw 0 10.4vw;
  }

  .song-ttl {
    margin: 0 auto 1.6vw;
    width: 53.866%;
  }

  .song-box {
    width: 100%;
  }

  .song-box-bg {}

  .song-box-contents {
    top: 15.466vw;
    width: 83.466%;
  }

  .song-box-head {
    margin-bottom: 4.733vw;
  }

  .song-box-head-name {
    margin: 0 auto 5.333vw;
    width: 69.329%;
  }

  .song-box-head-img {
    margin: 0 auto;
    width: 94.249%;
  }

  .song-box-body {}

  .song-box-body-prf {
    margin: 0 auto 8.533vw;
  }

  .song-box-body-comment {}

  .song-box-body-txt {}

}


.fuwa {
  animation-name: fuwa;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  transition-timing-function: ease-in-out;
}

@keyframes fuwa {
  0% {
    transform: translateY(-5%);
    -webkit-transform: translateY(-5%);
    -moz-transform: translateY(-5%);
    -ms-transform: translateY(-5%);
    -o-transform: translateY(-5%);
  }

  100% {
    transform: translateY(5%);
    -webkit-transform: translateY(5%);
    -moz-transform: translateY(5%);
    -ms-transform: translateY(5%);
    -o-transform: translateY(5%);
  }
}

/* .fuwa2 {
  animation-name: fuwa2;
  animation-duration: 2.2s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  transition-timing-function: ease-in-out;
} */

/* @keyframes fuwa2 {
  0% {
    transform: translateY(5%);
    -webkit-transform: translateY(5%);
    -moz-transform: translateY(5%);
    -ms-transform: translateY(5%);
    -o-transform: translateY(5%);
  }

  100% {
    transform: translateY(-5%);
    -webkit-transform: translateY(-5%);
    -moz-transform: translateY(-5%);
    -ms-transform: translateY(-5%);
    -o-transform: translateY(-5%);
  }
} */