img {
  width: 200px;
  height: 200px;
  margin: auto;
  display: block;
}

.space {
  margin-bottom: 30px;
}

p {
  display: inline-block;
  text-align: left;
  font-size: 16px;
  line-height: 1.5;
  margin: 10px 0;
  color: #333;
}

.p-text {
  text-align: center;
}

* {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 623;
  font-style: normal;
}

.mejs__container {
  background-color: #496096;
}
 
.mejs__container:focus {
  /* フォーカス時のコンテナのアウトラインを非表示に */
  outline: none;
}
 
.mejs__controls:not([style*='display: none']) {
  background: transparent;
}
 
.mejs__loop-button>button,
.mejs-loop-button>button {
  /* 独自のループアイコンを表示するため元のアイコンを非表示に */
  background: none;
}
 
.mejs__loop-button.mejs__loop-on>button::before,
.mejs-loop-button.mejs__loop-on>button::before {
  content: "";
  display: inline-block;
  height: 18px;
  width: 18px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='lightgreen' viewBox='0 0 16 16'%3E  %3Cpath d='M11 5.466V4H5a4 4 0 0 0-3.584 5.777.5.5 0 1 1-.896.446A5 5 0 0 1 5 3h6V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192Zm3.81.086a.5.5 0 0 1 .67.225A5 5 0 0 1 11 13H5v1.466a.25.25 0 0 1-.41.192l-2.36-1.966a.25.25 0 0 1 0-.384l2.36-1.966a.25.25 0 0 1 .41.192V12h6a4 4 0 0 0 3.585-5.777.5.5 0 0 1 .225-.67Z'/%3E%3C/svg%3E");
}
 
.mejs__loop-button.mejs__loop-off>button::before,
.mejs-loop-button.mejs__loop-off>button::before {
  content: "";
  display: inline-block;
  height: 18px;
  width: 18px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23cccccc' viewBox='0 0 16 16'%3E  %3Cpath d='M11 5.466V4H5a4 4 0 0 0-3.584 5.777.5.5 0 1 1-.896.446A5 5 0 0 1 5 3h6V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192Zm3.81.086a.5.5 0 0 1 .67.225A5 5 0 0 1 11 13H5v1.466a.25.25 0 0 1-.41.192l-2.36-1.966a.25.25 0 0 1 0-.384l2.36-1.966a.25.25 0 0 1 .41.192V12h6a4 4 0 0 0 3.585-5.777.5.5 0 0 1 .225-.67Z'/%3E%3C/svg%3E");
}

.parent {
  display: inline-block;
}

.center {
 text-align: center;
}

.playlist {
  position: relative;
  margin: 50px auto;  /* Center the playlist */
  width: 100%;
  max-width: 480px;
  border: 1px solid #eee;
  padding: 0;
  display: block;
}
 
.playlist h3 {
  margin: 0 0 1px;
  font-size: 16px;
  background-color: #eee;
  padding: 0.5rem;
}
 
.playlist .tracks ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
.playlist .tracks ul li {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 2px 0;
  background-color: #eee;
  padding: 0.5rem 0.25rem;
}
 
.playlist .tracks ul li:last-of-type {
  margin-bottom: 0;
  text-align: center;
}
 
.playlist .tracks .track-title {
  font-size: 14px;
}
 
.playlist .tracks button {
  cursor: pointer;
  border: none;
  background-color: transparent;
  position: relative;
}
 
.playlist .tracks button.play::before {
  content: "";
  display: inline-block;
  height: 30px;
  width: 30px;
  vertical-align: -10px;
  margin-right: 8px;
  background-repeat: no-repeat;
}
 
.playlist .tracks ul li .controls {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-left: 20px;
}
 
.playlist .tracks ul li .controls .current-time,
.playlist .tracks ul li .controls .duration {
  font-size: 13px;
  color: #999;
}
 
.playlist .now-playing {
  padding: 10px;
  background-color: #496096;
  color: #efefef;
}
 
.playlist .current-title {
  margin-left: 1rem;
  font-size: 12px;
  color: #4d6fbe;
  color: #fff;
}
 
/* Play ボタン*/
.playlist .tracks button.play::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%234d6fbe' viewBox='0 0 16 16'%3E  %3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E  %3Cpath d='M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z'/%3E%3C/svg%3E");
  /* transition: background-image .1s; */
}
 
/* Play ボタン :hover*/
.playlist .tracks button.play:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%234d6fbe' viewBox='0 0 16 16'%3E  %3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z'/%3E%3C/svg%3E");
}
 
/* Pause ボタン */
.playlist .tracks button.play.playing::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23eb213c' class='bi bi-pause-circle-fill' viewBox='0 0 16 16'%3E  %3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.25 5C5.56 5 5 5.56 5 6.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C7.5 5.56 6.94 5 6.25 5zm3.5 0c-.69 0-1.25.56-1.25 1.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C11 5.56 10.44 5 9.75 5z'/%3E%3C/svg%3E");
}
 
.audio-wrapper {
  max-width: 480px;
  margin: 30px 0;
}