@charset "UTF-8";
.round-voice,
.heart-voice {
  /* CSS Document */
  /*　プレイヤー（再生バー）　*/
  /*　再生・停止ボタン　*/
  /*　再生・停止ボタンなどの p 要素　*/
  /*　進行状態・ロードの状態を表示する部分(グレー)　*/
  /*　進行状態を表示するバーの部分(薄いグレー)　*/
  /* ロード状態を表示するバーの部分（黒） */
}
.round-voice .audiojs,
.heart-voice .audiojs {
  height: 4vw;
  width: 4vw;
  max-width: 60px;
  background: none;
  font-family: monospace;
  font-size: 12px;
  -o-box-shadow: none;
  box-shadow: none;
  max-width: 60px;
  max-height: 60px;
}
.round-voice .audiojs .play-pause,
.heart-voice .audiojs .play-pause {
  height: 4vw;
  width: 4vw;
  max-width: 60px;
  max-height: 60px;
  padding: 0;
  margin: 0;
  float: left;
  border: none;
}
.round-voice .audiojs p,
.heart-voice .audiojs p {
  display: none;
  height: 100%;
  width: 100%;
  margin: 0px;
  cursor: pointer;
}
.round-voice .audiojs .play,
.heart-voice .audiojs .play {
  display: block;
}
.round-voice .audiojs .scrubber,
.heart-voice .audiojs .scrubber {
  display: none;
}
.round-voice .audiojs .progress,
.heart-voice .audiojs .progress {
  display: none;
}
.round-voice .audiojs .loaded,
.heart-voice .audiojs .loaded {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 4px;
  width: 0px;
  background: #DDDDDD;
  /* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222),
  color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222));
  background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222
  100%); */
}

/*　現在の再生時間/総再生時間　フォント　*/
.audiojs .time {
  float: left;
  height: 28px;
  line-height: 28px;
  margin: 0px 0px 0px 8px;
  padding: 0px 0px 0px 0px;
  border-left: none;
  color: #666;
  text-shadow: none;
  display: none;
}

/*　現在の再生時間　フォント　*/
.audiojs .time em {
  display: none;
}

/*　時間　/の部分　*/
.audiojs .time strong {
  display: none;
}

.audiojs .error-message {
  display: none;
}

.audiojs .error-message a {
  display: none;
}

.round-voice {
  /*　再生ボタン　*/
  /*　読み込み中ボタン　*/
  /*　エラーボタン　*/
  /*　停止ボタン　*/
}
.round-voice .audiojs .play {
  background: url("../images/info/voice_btn.png") center center no-repeat;
  background-size: 100%;
  border-radius: 50%;
  transition: 0.3s;
}
.round-voice .audiojs .play:hover {
  background: url("../images/info/voice_btn.png") center center no-repeat;
  background-size: 100%;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.3s;
}
.round-voice .audiojs .loading {
  /*background: url("$1") center center no-repeat;*/
  display: none;
}
.round-voice .audiojs .error {
  /*background: url("$1") center center no-repeat;*/
  display: none;
}
.round-voice .audiojs .pause {
  background: url("../images/info/voice_btn_stop.png") center center no-repeat;
  background-size: 100%;
  border-radius: 50%;
  transition: 0.3s;
}
.round-voice .audiojs .pause:hover {
  background: url("../images/info/voice_btn_stop.png") center center no-repeat;
  background-size: 100%;
  border-radius: 50%;
  transition: 0.3s;
  background-color: #fff;
}

/*　再生ボタン　*/
.heart-voice .audiojs .play {
  background: url("../images/info/voice_btn_heart.png") center center no-repeat;
  background-size: 100%;
  border-radius: 50%;
  transition: 0.3s;
}

.heart-voice .audiojs .play:hover {
  background: url("../images/info/voice_btn_heart.png") center center no-repeat;
  background-size: 100%;
  border-radius: 50%;
  transition: 0.3s;
  background-color: #fff;
}

/*　停止ボタン　*/
.heart-voice .audiojs .pause {
  background: url("../images/info/voice_btn_stop.png") center center no-repeat;
  background-size: 100%;
  border-radius: 50%;
  transition: 0.3s;
}

.heart-voice .audiojs .pause:hover {
  background: url("../images/info/voice_btn_stop.png") center center no-repeat;
  background-size: 100%;
  border-radius: 50%;
  transition: 0.3s;
  background-color: #fff;
}

.playing .play,
.playing .loading,
.playing .error {
  display: none;
}

.playing .pause {
  display: block;
}

.loading .play,
.loading .pause,
.loading .error {
  display: none;
}

.loading .loading {
  display: block;
}

.error .time,
.error .play,
.error .pause,
.error .scrubber,
.error .loading {
  display: none;
}

.error .error {
  display: block;
}

.error .play-pause p {
  cursor: auto;
}

.error .error-message {
  display: block;
}

/*　再生している曲の情報　*/
.track-details {
  display: none;
}

.track-details:before {
  display: none;
}

.long_bar {
  /*　プレイヤー（再生バー）の高さ、幅、背景色の指定　*/
  /*　再生・停止ボタンの高さ、幅、パディングの指定　*/
  /*　進行状態・ロードの状態を表示する部分　*/
  /*　進行状態を表示するバーの部分　*/
  /*　ロード状態を表示するバーの部分　*/
  /*　再生時間の部分　*/
  /*　再生している曲の情報　*/
}
.long_bar .audiojs {
  transform-origin: left top;
  height: 2rem;
  background: black;
  border: 1px solid red;
  width: 100%;
  margin: 0 auto;
  border-radius: 10px;
  color: #000;
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  position: relative;
  padding: 0.2rem;
}
.long_bar .play:before {
  content: " \f04b";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 70%;
  color: #fff;
}
.long_bar .pause:before {
  content: " \f04c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 70%;
  color: #fff;
}
.long_bar .play-pause {
  height: auto !important;
  width: 2rem;
  text-align: center;
  transition: 0.3s;
  display: block !important;
  border-right: 1px solid red;
  z-index: 4;
  position: relative;
  float: none;
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.long_bar .audiojs .play-pause:hover {
  cursor: pointer;
  color: red;
  transition: 0.3s;
}
.long_bar .audiojs p {
  height: 100%;
  width: 100%;
  margin: 0px;
  cursor: pointer;
  background-position: center;
  margin-left: 2%;
}
.long_bar .audiojs .scrubber {
  background: #f1eaea;
  width: 75%;
  height: 4px;
  color: red;
  border: 0px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.long_bar .audiojs .scrubber:hover {
  cursor: pointer;
}
.long_bar .audiojs .progress {
  height: 4px;
  width: 19vw;
  background: red;
  color: #fff;
}
.long_bar .audiojs .loaded {
  width: 19vw;
  height: 4px;
  background: #d6cfcf;
}
.long_bar .audiojs .time {
  float: left;
  height: 36px;
  line-height: 37px;
  color: #fff;
  display: none;
}
.long_bar .audiojs .error-message {
  height: 24px;
  line-height: 24px;
  color: #fff;
}
.long_bar .track-details {
  clear: both;
  height: 20px;
  width: 280px;
  padding: 1px 6px;
  background: #eee;
  color: #fff;
  font-size: 11px;
  line-height: 20px;
}
.long_bar .track-details:before {
  content: "♬  Now Playing: ";
}
.long_bar .audiojs .time em {
  color: #fff !important;
}
.long_bar .audiojs .time {
  padding: 0px !important;
}/*# sourceMappingURL=audio.css.map */