#audioControls {
    width: 20em;
    display: flex;
    align-items: center;
    background-color: #f1f3f4; /* 背景色 */
    border-radius: 20px; /* 角の丸み */
    padding: 2px; /* 内側の余白 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 影の効果 */
    margin-bottom:10px;
}

#audioControls button {
    width: 40px; /* 幅を指定 */
    height: 40px; /* 高さを指定 */
    line-height: 40px; /* テキストを中央に配置 */
    text-align: center;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 0; /* パディングを調整 */
    border-radius: 50%;
}

#audioControls button:hover {
    background-color: #e0e0e0;
}

#progressContainer {
    flex-grow: 1;
    height: 5px;
    background-color: #ccc;
    margin: 0 10px;
    border-radius: 10px;
}

#progressBar {
    background-color: #000;
    width: 10%; /* JavaScriptで更新 */
    height: 100%;
    border-radius: 10px;
}

#muteButton {
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
}

#svgContainerMute svg{
    width: 60%; /* SVGの幅をボタンの80%に設定 */
    height: 60%; /* SVGの高さをボタンの80%に設定 */
    vertical-align: middle; 
}

#speedSelect {
    background-color:#f1f3f4;
    border-radius: 5px;  
    border: 1px solid #ccc;  /* ボーダーを見えるようにするための設定、色は調整可能 */
    padding: 0px;  /* セレクトボックス内の余白を調整 */
}