@charset "UTF-8";
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd {
  padding: 0;
  margin: 0;
}

ol, ul {
  list-style-type: none;
}

/*-----------------------------------------------
 root
-----------------------------------------------*/
html {
  overflow-y: scroll;
}

body {
  overflow: hidden;
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-weight: 400;
}

/*-----------------------------------------------
 font
-----------------------------------------------*/
html {
  overflow-x: hidden;
  font-size: medium;
}

body {
  font-size: 62.5%; /* 16px -> 10px */
}

div {
  line-height: 0;
  box-sizing: border-box;
}

dt, dd, li,
caption, th, td,
input, button, textarea, select,
h1, h2, h3, h4, h5, h6, address {
  line-height: 0;
  font-size: 140%;
  margin: 0;
  padding: 0;
}

p {
  line-height: 1.5;
  font-size: 140%;
  margin: 0;
  padding: 0;
}

h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
p input, p button, p select,
li h1, li h2, li h3, li h4, li h5, li h6, li p, li dt, li dd, li li, li th, li td, li input, li button, li textarea, li select,
dd h1, dd h2, dd h3, dd h4, dd h5, dd h6, dd p, dd dt, dd dd, dd li, dd th, dd td, dd input, dd button, dd textarea, dd select,
tr h1, tr h2, tr h3, tr h4, tr h5, tr h6, tr p, tr dt, tr dd, tr li, tr input, tr button, tr textarea, tr select {
  font-size: 100%;
}

input, button, select, option, textarea {
  font-size: 14px;
}

figure {
  margin: 0;
}

a,
a:link,
a:visited {
  color: #1d99c1;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

section {
  position: relative;
  box-sizing: border-box;
}

br.sp {
  display: none;
}
@media only screen and (max-width: 768px) {
  br.sp {
    display: inline;
  }
}
@media only screen and (max-width: 768px) {
  br.pc {
    display: none;
  }
}

/*-----------------------------------------------
 cf 
-----------------------------------------------*/
.clearfix {
  min-height: 1px;
}
.clearfix::after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

* html .clearfix {
  height: 1px;
  /*¥*/ /*/
height: auto;
overflow: hidden;
/**/
}

/*-----------------------------------------------
 hover
-----------------------------------------------*/
.hover :hover {
  opacity: 0.8;
  animation: btn 0.5s;
  -webkit-animation: btn 0.5s;
  -moz-animation: btn 0.5s;
}
@media only screen and (max-width: 768px) {
  .hover :hover {
    animation: unset;
    -webkit-animation: unset;
    -moz-animation: unset;
  }
}

@keyframes btn {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.8;
  }
}
@-webkit-keyframes btn {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.8;
  }
}
@-webkit-keyframes spinStar {
  0% {
    transform: translateY(-50%) rotateY(0deg) scale(1);
  }
  100% {
    transform: translateY(-50%) rotateY(360deg) scale(1.4);
  }
}
@keyframes spinStar {
  0% {
    transform: translateY(-50%) rotateY(0deg) scale(1);
  }
  100% {
    transform: translateY(-50%) rotateY(360deg) scale(1.4);
  }
}
@-webkit-keyframes spinStarPop {
  0% {
    transform: rotateY(0deg);
  }
  40% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(720deg);
  }
}
@keyframes spinStarPop {
  0% {
    transform: rotateY(0deg);
  }
  40% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(720deg);
  }
}
@-webkit-keyframes spin-right {
  0% {
    transform: rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: rotate(360deg); /* 360度回転 */
  }
}
@keyframes spin-right {
  0% {
    transform: rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: rotate(360deg); /* 360度回転 */
  }
}
@-webkit-keyframes spin-left {
  0% {
    transform: rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: rotate(-360deg); /* 360度回転 */
  }
}
@keyframes spin-left {
  0% {
    transform: rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: rotate(-360deg); /* 360度回転 */
  }
}
@-webkit-keyframes spin-right-Xcenter {
  0% {
    transform: translateX(-50%) rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: translateX(-50%) rotate(360deg); /* 360度回転 */
  }
}
@keyframes spin-right-Xcenter {
  0% {
    transform: translateX(-50%) rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: translateX(-50%) rotate(360deg); /* 360度回転 */
  }
}
@-webkit-keyframes spin-left-Xcenter {
  0% {
    transform: translateX(-50%) rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: translateX(-50%) rotate(-360deg); /* 360度回転 */
  }
}
@keyframes spin-left-Xcenter {
  0% {
    transform: translateX(-50%) rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: translateX(-50%) rotate(-360deg); /* 360度回転 */
  }
}
@-webkit-keyframes spin-right-Ycenter {
  0% {
    transform: translateY(-50%) rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: translateY(-50%) rotate(360deg); /* 360度回転 */
  }
}
@keyframes spin-right-Ycenter {
  0% {
    transform: translateY(-50%) rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: translateY(-50%) rotate(360deg); /* 360度回転 */
  }
}
@-webkit-keyframes spin-left-Ycenter {
  0% {
    transform: translateY(-50%) rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: translateY(-50%) rotate(-360deg); /* 360度回転 */
  }
}
@keyframes spin-left-Ycenter {
  0% {
    transform: translateY(-50%) rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: translateY(-50%) rotate(-360deg); /* 360度回転 */
  }
}
@-webkit-keyframes spin-left-center {
  0% {
    transform: rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: rotate(-360deg); /* 360度回転 */
  }
}
@keyframes spin-left-center {
  0% {
    transform: rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: rotate(-360deg); /* 360度回転 */
  }
}
@-webkit-keyframes spin-right-center {
  0% {
    transform: translate(-50%, -50%) rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg); /* 360度回転 */
  }
}
@keyframes spin-right-center {
  0% {
    transform: translate(-50%, -50%) rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg); /* 360度回転 */
  }
}
@-webkit-keyframes popFadeIn {
  0% {
    transform: scale(0); /* 初期位置 */
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes popFadeIn {
  0% {
    transform: scale(0); /* 初期位置 */
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes load-shine {
  0% {
    transform: rotateY(0deg);
  }
  30% {
    transform: rotateY(360deg);
  }
  70% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
@keyframes load-shine {
  0% {
    transform: rotateY(0deg);
  }
  30% {
    transform: rotateY(360deg);
  }
  70% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
/*=============================================================
 01_base
=============================================================*/
/*=============================================================
 tools
=============================================================*/
#music .ttl-box {
  margin-bottom: 45px;
}
@media only screen and (max-width: 1250px) {
  #music .ttl-box {
    margin-bottom: 3.6vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .ttl-box {
    margin-bottom: 2.34375vw;
  }
}
#music .ttl-box h1 {
  width: 385px;
  left: -5px;
}
@media only screen and (max-width: 1250px) {
  #music .ttl-box h1 {
    width: 30.8vw;
    left: -0.4vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .ttl-box h1 {
    width: 39.53125vw;
    left: -0.46875vw;
  }
}
#music .music__box {
  position: relative;
  width: 1200px;
  margin: 0 auto 60px;
  padding: 90px 100px 30px;
}
@media only screen and (max-width: 1250px) {
  #music .music__box {
    width: 96vw;
    margin-bottom: 4.8vw;
    padding: 7.2vw 8vw 2.4vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box {
    width: 93.75vw;
    margin-bottom: 8.59375vw;
    padding: 14.0625vw 7.8125vw 4.6875vw;
  }
}
#music .music__box .grid-wrap {
  position: relative;
  grid-template-columns: 500px 1fr;
  align-items: flex-start;
  gap: 0 55px;
  z-index: 2;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .grid-wrap {
    grid-template-columns: 40vw 1fr;
    gap: 0 4.4vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .grid-wrap {
    display: block;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .cover {
    margin-bottom: 3.4375vw;
  }
}
#music .music__box .txt-box h3 {
  font-size: 24px;
  line-height: 1.1;
  font-family: "Red Rose", serif;
  margin-bottom: 24px;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .txt-box h3 {
    font-size: 1.92vw;
    margin-bottom: 1.92vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .txt-box h3 {
    font-size: 4.0625vw;
    line-height: 1;
    margin-bottom: 2.8125vw;
  }
}
#music .music__box .txt-box h3 span {
  display: block;
  font-size: 30px;
  margin-top: 5px;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .txt-box h3 span {
    font-size: 2.4vw;
    margin-top: 0.4vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .txt-box h3 span {
    font-size: 5.3125vw;
    margin-top: 0.46875vw;
  }
}
#music .music__box .txt-box .info {
  display: grid;
  grid-template-columns: 174px 1fr;
  gap: 6px 15px;
  margin-bottom: 18px;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .txt-box .info {
    grid-template-columns: 13.92vw 1fr;
    gap: 0.48vw;
    margin-bottom: 1.44vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .txt-box .info {
    grid-template-columns: 27.1875vw 1fr;
    gap: 0.9375vw 2.8125vw;
    margin-bottom: 2.8125vw;
  }
}
#music .music__box .txt-box .info dt {
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
  background-color: #A37941;
  text-align: center;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .txt-box .info dt {
    font-size: 1.28vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .txt-box .info dt {
    font-size: 3.125vw;
  }
}
#music .music__box .txt-box .info dd {
  font-size: 16px;
  line-height: 1.6;
  color: #A37941;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .txt-box .info dd {
    font-size: 1.28vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .txt-box .info dd {
    font-size: 3.125vw;
  }
}
#music .music__box .txt-box .bonus h4 {
  text-align: center;
  line-height: 1;
  font-size: 20px;
  font-family: "Red Rose", serif;
  margin-bottom: 10px;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .txt-box .bonus h4 {
    font-size: 1.6vw;
    margin-bottom: 1.6vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .txt-box .bonus h4 {
    font-size: 3.125vw;
    margin-bottom: 2.34375vw;
  }
}
#music .music__box .txt-box .bonus .box {
  padding: 30px;
  border-radius: 50px;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .txt-box .bonus .box {
    padding: 2.4vw;
    border-radius: 4vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .txt-box .bonus .box {
    padding: 3.125vw 3.90625vw;
    border-radius: 7.8125vw;
    margin: 0 -5.46875vw;
  }
}
#music .music__box .txt-box .bonus .box p {
  font-size: 16px;
}
@media only screen and (max-width: 768px) {
  #music .music__box .txt-box .bonus .box p {
    font-size: 3.125vw;
  }
}
#music .music__box .txt-box .btn {
  margin: -10px -22px 0;
}
@media only screen and (max-width: 2000px) {
  #music .music__box .txt-box .btn {
    width: 490px;
    height: 126px;
  }
}
@media only screen and (max-width: 1250px) {
  #music .music__box .txt-box .btn {
    width: 39.2vw;
    height: 10.08vw;
    margin: -0.8vw -1.76vw 0;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .txt-box .btn {
    width: 76.5625vw;
    height: 19.6875vw;
    margin: -0.78125vw 0 0;
  }
}
#music .music__box .txt-box .btn .txt {
  position: relative;
  top: 3px;
  width: 190px;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .txt-box .btn .txt {
    top: 0.24vw;
    width: 15.2vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .txt-box .btn .txt {
    top: 0.46875vw;
    width: 29.6875vw;
  }
}
#music .music__box .song-list {
  position: relative;
  border: 1px solid #A37941;
  margin-bottom: 50px;
  padding: 40px 50px 0;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .song-list {
    padding: 3.2vw 4vw 0;
    margin-bottom: 4vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .song-list {
    margin: -2.34375vw -5.46875vw 7.1875vw;
    padding: 5.9375vw 5vw 0;
  }
}
#music .music__box .song-list::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  height: 4px;
  width: 705px;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .song-list::before {
    width: 56.4vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .song-list::before {
    top: -0.3125vw;
    width: 75vw;
    height: 0.625vw;
  }
}
#music .music__box .song-list::after {
  content: "";
  position: absolute;
  top: -23px;
  left: 50%;
  transform: translateX(-50%);
  width: 660px;
  height: 46px;
  background: url("../img/parts/block_line.svg") no-repeat top center;
  background-size: contain;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .song-list::after {
    top: -1.84vw;
    width: 52.8vw;
    height: 3.68vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .song-list::after {
    top: -2.5vw;
    width: 71.09375vw;
    height: 5vw;
  }
}
#music .music__box .song-list h2 {
  margin: 0 auto 30px;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .song-list h2 {
    margin-bottom: 2.4vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .song-list h2 {
    margin-bottom: 2.8125vw;
  }
}
#music .music__box .song-list ul li {
  display: grid;
  grid-template-columns: 38px 1fr 274px;
  gap: 0 18px;
  align-items: center;
  padding: 20px 0;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .song-list ul li {
    grid-template-columns: 3.04vw 1fr 21.92vw;
    gap: 0 1.44vw;
    padding: 1.6vw 0;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .song-list ul li {
    grid-template-columns: 5.9375vw 1fr;
    grid-template-rows: auto auto;
    gap: 0 2.8125vw;
    padding: 3.90625vw 0;
  }
}
#music .music__box .song-list ul li:not(:last-child) {
  border-bottom: 1px solid #A37941;
}
#music .music__box .song-list ul li .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background-color: #A37941;
  border-radius: 50px;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .song-list ul li .num {
    width: 3.04vw;
    height: 3.04vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .song-list ul li .num {
    width: 5.9375vw;
    height: 5.9375vw;
  }
}
#music .music__box .song-list ul li .num span {
  font-size: 20px;
  font-family: "Red Rose", serif;
  color: #fff;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .song-list ul li .num span {
    font-size: 1.6vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .song-list ul li .num span {
    font-size: 3.75vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .song-list ul li .song {
    margin-bottom: 2.5vw;
  }
}
#music .music__box .song-list ul li .song h3 {
  font-size: 20px;
  line-height: 1.2;
  font-family: "Red Rose", serif;
  margin-bottom: 5px;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .song-list ul li .song h3 {
    font-size: 1.6vw;
    margin-bottom: 0.4vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .song-list ul li .song h3 {
    font-size: 3.75vw;
    margin-bottom: 0.78125vw;
  }
}
#music .music__box .song-list ul li .song p {
  font-size: 14px;
}
@media only screen and (max-width: 768px) {
  #music .music__box .song-list ul li .song p {
    font-size: 2.8125vw;
  }
}
#music .music__box .song-list ul li .btns {
  display: flex;
}
@media only screen and (max-width: 768px) {
  #music .music__box .song-list ul li .btns {
    grid-column: 1/3;
    gap: 0 3.4375vw;
  }
}
#music .music__box .song-list ul li .btns .btn {
  padding: 0;
}
@media only screen and (max-width: 768px) {
  #music .music__box .song-list ul li .btns .btn {
    margin: 0;
  }
}
#music .music__box .song-list ul li .btns .btn a {
  display: flex;
  align-items: center;
  justify-content: center;
}
#music .music__box .song-list ul li .btns .btn a span {
  display: block;
  transition: all 0.3s ease;
}
#music .music__box .song-list ul li .btns .btn a:hover span {
  transform: scale(1.05) translateX(1px);
}
@media only screen and (max-width: 768px) {
  #music .music__box .song-list ul li .btns .btn a:hover span {
    transform: unset;
  }
}
#music .music__box .song-list ul li .btns .btn.streaming {
  padding-top: 2px;
  width: 153px;
  height: 36px;
  background: url("../img/music/bg_btn_streaming.png") no-repeat top center;
  background-size: contain;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .song-list ul li .btns .btn.streaming {
    padding-top: 0.16vw;
    width: 12.24vw;
    height: 2.88vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .song-list ul li .btns .btn.streaming {
    padding-top: 0.3125vw;
    width: 29.84375vw;
    height: 7.03125vw;
  }
}
#music .music__box .song-list ul li .btns .btn.streaming span {
  width: 120px;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .song-list ul li .btns .btn.streaming span {
    width: 9.6vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .song-list ul li .btns .btn.streaming span {
    width: 23.28125vw;
  }
}
#music .music__box .song-list ul li .btns .btn.mv {
  width: 96px;
  height: 36px;
  background: url("../img/music/bg_btn_mv.png") no-repeat top center;
  background-size: contain;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .song-list ul li .btns .btn.mv {
    width: 7.68vw;
    height: 2.88vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .song-list ul li .btns .btn.mv {
    width: 18.75vw;
    height: 7.03125vw;
  }
}
#music .music__box .song-list ul li .btns .btn.mv span {
  width: 56px;
}
@media only screen and (max-width: 1250px) {
  #music .music__box .song-list ul li .btns .btn.mv span {
    width: 4.48vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box .song-list ul li .btns .btn.mv span {
    width: 10.9375vw;
  }
}
#music .music__box__right {
  border-radius: 0 200px 200px 0;
  background-color: #F5E7D6;
}
@media only screen and (max-width: 1250px) {
  #music .music__box__right {
    border-radius: 0 16vw 16vw 0;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box__right {
    border-radius: 0 12.5vw 12.5vw 0;
  }
}
#music .music__box__right .cover {
  box-shadow: 0 0 20px #FF642B;
  line-height: 0;
}
@media only screen and (max-width: 1250px) {
  #music .music__box__right .cover {
    box-shadow: 0 0 1.6vw #FF642B;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box__right .cover {
    box-shadow: 0 0 3.125vw #FF642B;
  }
}
#music .music__box__right .txt-box h3 {
  color: #F46D3B;
}
#music .music__box__right .txt-box .bonus h4 {
  color: #F46D3B;
}
#music .music__box__right .txt-box .bonus .box {
  background-color: rgba(255, 137, 93, 0.8);
}
#music .music__box__right .song-list::before {
  background-color: #F5E7D6;
}
#music .music__box__right .song-list h2 {
  width: 634px;
}
@media only screen and (max-width: 1250px) {
  #music .music__box__right .song-list h2 {
    width: 50.72vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box__right .song-list h2 {
    width: 77.5vw;
  }
}
#music .music__box__right .song-list ul li .song h3 {
  color: #F46D3B;
}
#music .music__box__left {
  border-radius: 200px 0 0 200px;
  background-color: #E6E4F8;
}
@media only screen and (max-width: 1250px) {
  #music .music__box__left {
    border-radius: 16vw 0 0 16vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box__left {
    border-radius: 12.5vw 0 0 12.5vw;
  }
}
#music .music__box__left .cover {
  box-shadow: 0 0 20px #5544D9;
}
@media only screen and (max-width: 1250px) {
  #music .music__box__left .cover {
    box-shadow: 0 0 1.6vw #5544D9;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box__left .cover {
    box-shadow: 0 0 3.125vw #5544D9;
  }
}
#music .music__box__left .txt-box h3 {
  color: #5544D9;
}
#music .music__box__left .txt-box .bonus h4 {
  color: #5544D9;
}
#music .music__box__left .txt-box .bonus .box {
  background-color: rgba(42, 35, 80, 0.8);
}
#music .music__box__left .txt-box .bonus .box p {
  color: #fff;
}
#music .music__box__left .song-list::before {
  background-color: #E6E4F8;
}
#music .music__box__left .song-list h2 {
  width: 645px;
}
@media only screen and (max-width: 1250px) {
  #music .music__box__left .song-list h2 {
    width: 51.6vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box__left .song-list h2 {
    width: 79.0625vw;
  }
}
#music .music__box__left .song-list ul li .song h3 {
  color: #5544D9;
}
#music .music__box__all {
  border-radius: 200px;
  margin-bottom: 46px;
  background: linear-gradient(to right, #E6E4F8 50%, #F5E7D6 50%);
}
@media only screen and (max-width: 1250px) {
  #music .music__box__all {
    border-radius: 16vw;
    margin-bottom: 3.68vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box__all {
    border-radius: 12.5vw;
    margin-bottom: 7.8125vw;
  }
}
#music .music__box__all::before {
  content: "";
  position: absolute;
  bottom: 22px;
  right: -110px;
  display: block;
  width: 433px;
  height: 433px;
  background: url("../img/music/bg_top_deco01.png") no-repeat top center;
  background-size: contain;
}
@media only screen and (max-width: 1250px) {
  #music .music__box__all::before {
    bottom: 1.76vw;
    right: -8.8vw;
    width: 34.64vw;
    height: 34.64vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box__all::before {
    top: 70.3125vw;
    right: -19.375vw;
    width: 60vw;
    height: 60vw;
  }
}
#music .music__box__all::after {
  content: "";
  position: absolute;
  top: 22px;
  left: -52px;
  display: block;
  width: 270px;
  height: 332px;
  background: url("../img/music/bg_top_deco02.png") no-repeat top center;
  background-size: contain;
}
@media only screen and (max-width: 1250px) {
  #music .music__box__all::after {
    top: 1.76vw;
    left: -4.16vw;
    width: 21.6vw;
    height: 26.56vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box__all::after {
    top: 2.5vw;
    left: -5.46875vw;
    width: 34.375vw;
    height: 42.34375vw;
  }
}
#music .music__box__all .cover {
  box-shadow: 0 0 20px #A37941;
}
@media only screen and (max-width: 1250px) {
  #music .music__box__all .cover {
    box-shadow: 0 0 1.6vw #A37941;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box__all .cover {
    box-shadow: 0 0 3.125vw #A37941;
  }
}
#music .music__box__all .txt-box h3 {
  background: linear-gradient(90deg, rgb(255, 100, 43), rgb(85, 68, 217));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#music .music__box__all .txt-box .bonus h4 {
  background: linear-gradient(90deg, rgb(255, 100, 43), rgb(85, 68, 217));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#music .music__box__all .txt-box .bonus .box {
  background-color: rgba(255, 255, 255, 0.8);
}
#music .music__box.kiara {
  position: relative;
}
#music .music__box.kiara::before {
  content: "";
  position: absolute;
  bottom: -14px;
  left: -115px;
  display: block;
  width: 497px;
  height: 497px;
  background: url("../img/music/bg_top_deco01.png") no-repeat top center;
  background-size: contain;
}
@media only screen and (max-width: 1250px) {
  #music .music__box.kiara::before {
    bottom: -1.12vw;
    left: -9.2vw;
    width: 39.76vw;
    height: 39.76vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box.kiara::before {
    bottom: inherit;
    top: 55.78125vw;
    left: -6.875vw;
    width: 77.65625vw;
    height: 77.65625vw;
  }
}
#music .music__box.kiara::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 493px;
  height: 526px;
  background: url("../img/music/deco_sun_wh.png") no-repeat top center;
  background-size: contain;
  -webkit-animation: spin-right-center 80s infinite linear;
          animation: spin-right-center 80s infinite linear;
}
@media only screen and (max-width: 1250px) {
  #music .music__box.kiara::after {
    width: 39.44vw;
    height: 42.08vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box.kiara::after {
    top: 3.4375vw;
    transform: translateX(-50%);
    width: 77.03125vw;
    height: 82.1875vw;
  }
}
#music .music__box.inanis {
  position: relative;
}
#music .music__box.inanis::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -24px;
  display: block;
  width: 346px;
  height: 425px;
  background: url("../img/music/bg_top_deco02.png") no-repeat top center;
  background-size: contain;
}
@media only screen and (max-width: 1250px) {
  #music .music__box.inanis::before {
    right: -1.92vw;
    width: 27.68vw;
    height: 34vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box.inanis::before {
    bottom: inherit;
    top: 72.65625vw;
    right: -3.90625vw;
    width: 48.75vw;
    height: 59.84375vw;
  }
}
#music .music__box.inanis::after {
  content: "";
  position: absolute;
  bottom: 36px;
  left: 52px;
  display: block;
  width: 484px;
  height: 503px;
  background: url("../img/music/deco_moon_wh.png") no-repeat top center;
  background-size: contain;
  -webkit-animation: spin-left 80s infinite linear;
          animation: spin-left 80s infinite linear;
}
@media only screen and (max-width: 1250px) {
  #music .music__box.inanis::after {
    bottom: 2.88vw;
    left: 4.16vw;
    width: 38.72vw;
    height: 40.24vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .music__box.inanis::after {
    top: 3.4375vw;
    left: 50%;
    transform: translateX(-50%);
    width: 75.625vw;
    height: 78.59375vw;
  }
}
#music .spotify {
  width: 1200px;
  margin: 0 auto 60px;
}
@media only screen and (max-width: 1250px) {
  #music .spotify {
    width: 96vw;
    margin-bottom: 4.8vw;
  }
}
@media only screen and (max-width: 768px) {
  #music .spotify {
    width: 93.75vw;
    margin-bottom: 7.8125vw;
  }
}