.stream-container {
    border: 3px solid #b8ff00;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 640px;
    margin: 0 auto; /* 中央揃え */
    box-sizing: border-box; /* 幅がはみ出さないように */
}

/* 曲リストのスタイル */
.song-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}


#progress-container {
    width: 100%;
    height: 5px;
    background-color: #888;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 10px;
}

#progress-bar {
    width: 0;
    height: 100%;
    background-color: #fff; /* プログレスバーの色 */
    transition: width 0.1s;
}


.song-item {
    width: 100%;
    max-width: 640px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 15px;
    background-color: #444;
    color: white;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.song-item span {
    text-align: left; /* 左寄せ */
    white-space: normal; /* テキストを複数行に対応 */
    overflow-wrap: break-word; /* 単語の途中で改行 */
}


.song-item .content-name {
    text-align: right; 
    font-size: 0.85em; /* 文字サイズを少し小さく */
}


/* 配信タイトルのスタイル調整 */
.stream-title {
    font-size: 1.2em;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: inherit;
    margin-bottom: 15px; /* 曲リストとの間隔を調整 */
    text-align: left;
}

.stream-title.letora .title-text { 
    color: #9ac600; /* レトラの文字色を強調 */
}

.stream-title .stream-info {
    color: #aaa;
    display: flex;
    flex-direction: column; /* 2行に分けて表示 */
    justify-content: center; /* タイトル行と高さを合わせる */
    text-align: right;
    line-height: 1;
    margin-left: 15px; /* タイトルとの間にスペースを追加 */
    margin: 0; /* 余白の削減 */
    font-size: 0.9em; /* 文字サイズを少し小さく */
}

/* キャラごとの配信タイトルのカラー設定 */
.stream-title.letora .title-text { color: #000; }
.stream-title.manaka .title-text { color: #000; }
.stream-title.cosmo .title-text { color: #000; }
.stream-title.vuiala .title-text { color: #000; }

/* 曲リストのスタイル */
.song-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}


/* 再生中の曲をキャラカラーで強調表示し、少し大きくする */
.song-item.playing.letora {
    background-color: #b8ff00;
    color: black;
    transform: scale(1.02);
}

.song-item.playing.manaka {
    background-color: #ff4d4d;
    color: white;
    transform: scale(1.02);
}

.song-item.playing.cosmo {
    background-color: #4d79ff;
    color: white;
    transform: scale(1.02);
}

.song-item.playing.vuiala {
    background-color: #fff;
    color: white;
    transform: scale(1.02);
    border: double 5px #fff;
}

.song-item.playing.favorite {
    background-color: #000;
    color: white;
    transform: scale(1.02);
}


.title-info-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 左右に分ける */
    width: 100%;
    padding: 8px 0;
}

.left-wrapper .title-text {
    font-weight: bold;
    font-size: 1.2em;
}

.right-wrapper {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: right;
}

.stream-info span {
    display: block;
    color: #666;
}

.stream-checkbox {
    display: none; /* チェックボックスを非表示にする */
}

.heart-icon {
    font-size: 24px;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* チェックされているときのハートの色 */
.stream-checkbox:checked + .heart-icon {
    color: #ff4d4d; /* ハートを赤に変更 */
}


/* ホバー時の曲アイテムスタイル */
.song-item:hover {
    background-color: #444;
}

/* アイコンのスタイル */
#song-title span {
    transition: opacity 0.3s ease; /* 透明度が滑らかに変わるように */
}

.like-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 1.2em;
    box-shadow: none;
    outline: none;
    line-height: 1;
}

.cosmo-outline {
    color: white !important;
    text-shadow:
        -2px -2px 0 #0077ff,
        -2px 0px 0 #0077ff,
        -2px 2px 0 #0077ff,
        0px -2px 0 #0077ff,
        0px 2px 0 #0077ff,
        2px -2px 0 #0077ff,
        2px 0px 0 #0077ff,
        2px 2px 0 #0077ff;
}

.v-outline {
    text-shadow: 0 0 3px white, 0 0 3px white;
}