.audio-control {
    display: inline-block;
  }
  
  #play-pause-button {
    background-color: #eee;
    border: none;
    border-radius: 4px;
    padding: 15px;
    padding-bottom: 25px; /* 11/29 位置調整で追加 */
    cursor: pointer;
    position: relative; /* アイコンの配置基準 */
    margin-bottom: 5px;
  }
  
  .play-icon, .pause-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #333; /* アイコンの色 */
    position: absolute;
    /* top: 50%; */ /* 11/29 位置調整でコメントアウト */
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* 再生アイコン */
  .play-icon {
    clip-path: polygon(0 0, 100% 50%, 0 100%); /* 三角形 */
    display: inline-block;
  }
  
  /* 停止アイコン */
  .pause-icon {
    width: 6px;
    height: 16px;
    display: none; /* 初期状態では非表示 */
  }
  
  .pause-icon::before, .pause-icon::after {
    content: "";
    position: absolute;
    top: 0;
    width: 6px;
    height: 16px;
    background-color: #333;
  }
  
  .pause-icon::before {
    left: -8px;
  }
  
  .pause-icon::after {
    right: -8px;
  }
  
  /* JavaScriptでクラスを切り替えるためのスタイル */
  #play-pause-button.playing .play-icon {
    display: none;
  }
  
  #play-pause-button.playing .pause-icon {
    display: inline-block;
  }