/* ボタンのスタイル */
#playModeButton,
#shufflePlayButton,
#resetPosition  {
    width: 24pt; /* ボタンの幅を固定 */
    height: 24pt; /* ボタンの高さを固定 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* ボタンの背景色 */
    cursor: pointer;
    border-radius: 50%; /* ボタンを丸くする */
    border: none; /* ボタンの境界線を削除 */
    outline: none; /* ボタンがフォーカスされたときのアウトラインを削除 */
    padding: 0; /* ボタンのパディングを削除 */
    transition: background-color 0.3s;
    box-sizing: border-box; /* ボックスのサイズ計算を調整 */
}

/* SVGアイコンのスタイル */
#svgIconContainer svg,
#svgContainer svg,
#svgContainerResetPosition svg  {
    width: 70%; /* SVGの幅をボタンの80%に設定 */
    height: 70%; /* SVGの高さをボタンの80%に設定 */
    vertical-align: middle; 
}

#playModeButton.active,
#shufflePlayButton.active {
    background-color: rgb(0, 0, 0); /* アクティブカラー */
    color: rgb(255, 255, 255); /* SVGのfillカラー */
}

#playModeButton.inactive,
#shufflePlayButton {
    background-color: rgb(200, 200, 200); /* 非アクティブカラー */
    color: rgb(80, 80, 80); /* SVGのfillカラー */
}

#svgIconContainer svg path,
#shufflePlayButton svg path {
    fill: currentColor; /* SVGの塗りの色を現在の文字色に設定 */
}