.music-player {
    display: flex;
    align-items: center;
    float: right;
    position: fixed;
    right: 6%;
    top: 48%;
    transform: scale(1);
    transition: all 1s ease-in-out; /* アニメーション効果を追加 */
    z-index: 100;
}

.music-player p {
    font-family: serif;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    font-size: 1.2rem;
    margin-right: 4px;
    letter-spacing: -2.5px;
}
.control-button {
    background-image: conic-gradient(from 20deg, rgba(255, 255, 255, 1) 0deg, rgba(236, 236, 236, 1) 17deg, rgba(253, 255, 254, 1) 71deg, rgba(249, 251, 250, 1) 171deg, rgba(216, 215, 215, 1) 197deg, rgba(255, 255, 255, 1) 251deg);
    color: #fce;
    border: none;
    border-radius: 50%;
    font-size: 30px;
    width: 60px;
    height: 60px;
    margin: 0 10px;
    cursor: pointer;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.6); /* 水平オフセット, 垂直オフセット, ぼかし半径, 色 */
}
#play-icon {
    margin-left: 4px;
}

/*========= ランダムに出現させるためのCSS ===============*/
.randomAnime {
    padding: 0;
    margin: 0;
    opacity: 0;
    display: inline-block;
  }
.randomAnimeLoaded {
  animation: fadeInUp 1s ease-in-out both;
}
@keyframes fadeInUp {
    from {
      transform: translateY(17px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
}

/*　レスポンシブ　*/
@media (max-width: 600px) {
  .music-player {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 80%;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 58vh;
    transform: scale(1);
    transition: all 1s ease-in-out; /* アニメーション効果を追加 */
    z-index: 100;
  }

  .music-player p {
      font-family: serif;
      color: #fff;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
      font-size: 1rem;
      margin-right: 4px;
      letter-spacing: -2.5px;
  }
  .control-button {
      background-image: conic-gradient(from 20deg, rgba(255, 255, 255, 1) 0deg, rgba(236, 236, 236, 1) 17deg, rgba(253, 255, 254, 1) 71deg, rgba(249, 251, 250, 1) 171deg, rgba(216, 215, 215, 1) 197deg, rgba(255, 255, 255, 1) 251deg);
      color: #fce;
      border: none;
      border-radius: 50%;
      font-size: 20px;
      width: 40px;
      height: 40px;
      margin: 0 10px;
      cursor: pointer;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.6); /* 水平オフセット, 垂直オフセット, ぼかし半径, 色 */
  }
  #play-icon {
      margin-left: 4px;
  }
}