html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

:root {
    --plyr-audio-controls-background: #E0F5FD;
    --plyr-control-icon-size: 20px;
    --plyr-control-spacing: 14px;/* 10px */
    --plyr-font-size-menu: 10px;

}

/* .plyr__controls {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
} */

.head {
    margin-bottom: 1.5rem;
    margin-top: 1rem;
}

.text {
  transition: opacity 0.2s ease-in-out;
  animation: fadeOut 0.2s forwards;
}

.cursor {
  cursor: pointer;
}

.alert {
  svg {
    height: 1rem;
    width: 1rem;
    margin: 0 0.2rem;
  }
}

.sound-item.has-divider {
  position: relative;
}

.sound-item.has-divider::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: -1px;
  border-bottom: 1px solid var(--bs-gray);
}

.pat {
  padding-top: 1.2rem !important;
}
.pab {
  padding-bottom: 1.2rem !important;
}

/* ==========================================
   ② スマホ版（画面幅が 767px 以下のとき）
   ========================================== */
@media (max-width: 575px) {
    :root {
        --plyr-font-size-time: 16px;
        --plyr-control-icon-size: 18px;
        --plyr-control-spacing: 10px;/* 10px */
    }

  /* シークバーを一番左（最初）に持ってくる */
/*   .plyr__controls .plyr__progress__container {
  }
  .plyr__controls [data-plyr="play"] {
    order: 1;
  }
  .plyr__controls .plyr__time {
    order: 3;
  } */

  /* スマホは本体の横ボタンで音量を変えるため、
     画面上の音量バーは邪魔になりがちなので、非表示にしてスッキリさせる */
  .plyr__controls .plyr__volume {
    display: none; 
  }

  .plyr__controls [data-plyr="download"] {
    display: none; 
  }

  .head {
    flex-direction: column;
    margin-top: 0;
    margin-bottom: 1rem;
  }
}

/* .anime-p {
    animation: fadeIn 0.5s forwards;
    height: 5em;
    padding: 20px 0;
    margin: 0 50%;
}
.vanish {
  
  display: none;
} */

/* @keyframes fadeIn {
    from {
        transition: opacity 0.5s ease-in;
        opacity: 1;
    }
    to {
        transition: opacity 0.5s ease-in;
        opacity: 0;
        height: 0;
        padding: 0;
    }
} */

@keyframes fadeOut {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}