/* 全体の幅調整 */
#player-container, #streams-container, .song-list, #character-tabs {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* プレーヤーのデザイン */

#player-container {
    text-align: center;
    position: sticky;
    top: 0;
    padding: 0;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 2;
    overflow: hidden;
}



#player iframe {
    width: 100%;
    height: 160px;
    border-radius: 20px 20px 0 0;
}
/* キャラタブのデザイン */
#character-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.character-tab {
    flex: 1;
    padding: 20px 0;
    font-size: 1em;
    border: none;
    cursor: pointer;
    color: white;
    transition: background-color 0.3s;
}

.character-tab[data-character="vuiala"] { background-color: #000; }
.character-tab[data-character="manaka"] { background-color: #ff4d4d; }
.character-tab[data-character="cosmo"] { background-color: #4d79ff; }
.character-tab[data-character="letora"] { background-color: #b8ff00; color: #000; }
.character-tab[data-character="favorite"] { background-color: #fff; color: #fff; font-size: 1em; }

/* タブの丸み調整（両端のみ丸く） */
.character-tab:first-child {
    border-radius: 20px 0 0 20px; /* 左端のみ丸み */
}

.character-tab:last-child {
    border-radius: 0 20px 20px 0; /* 右端のみ丸み */
}

/* 中央のタブは丸みをなくす */
.character-tab:not(:first-child):not(:last-child) {
    border-radius: 0;
}

/* プレーヤーにキャラごとの色を設定 */

#player-container.letora { background-color: #b8ff00; }
#player-container.manaka { background-color: #ff4d4d; color: white; }
#player-container.cosmo { background-color: #4d79ff; color: white; }
#player-container.vuiala { background-color: #000; color: white; }
#player-container.favorite { background-color: #eee; color: white; }


/* キャラクターごとのフィルターボタンカラー設定 */
.filter-button.letora { background-color: #e0ffb3; color: #888; }
.filter-button.letora.active { background-color: #b8ff00; color: #333; }

.filter-button.manaka { background-color: #ffc2c2; color: white; }
.filter-button.manaka.active { background-color: #ff4d4d; color: white; }

.filter-button.cosmo { background-color: #b3c7ff; color: white; }
.filter-button.cosmo.active { background-color: #4d79ff; color: white; }

.filter-button.vuiala { background-color: #666; color: white; }
.filter-button.vuiala.active { background-color: #000; color: white; }

.filter-button.favorite { background-color: #aaa; color: white; }
.filter-button.favorite.active { background-color: #fff; color: #333; }




#brand-toggle-button {
    background-color: #ccc; /* 背景色 */
    color: #333; /* テキスト色 */
    border: 1px solid #ccc; /* ボーダー */
    padding: 0px 0px; /* パディング */
    font-size: 10px; /* フォントサイズ */
    border-radius: 5px; /* 角丸 */
    cursor: pointer; /* ホバー時にポインターを表示 */
    transition: background-color 0.3s ease, color 0.3s ease; /* ホバー時のスムーズな変化 */
}


/* コンテンツボタン（通常時） */
.content-filter {
    height: 30px; /* ボタンの高さを固定 */
    background-color: #e0e0e0; /* 非アクティブ時の背景色 */
    color: #999; /* 非アクティブ時の文字色 */
    border: 1px solid #ccc;
    padding: 5px 10px;
    font-size: 11px; /* フォントサイズ */
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
    transition: background-color 0.3s, color 0.3s; /* スムーズな変化 */
}

/* コンテンツボタン（アクティブ時） */
.content-filter.active {
    background-color: #FFFFFF; /* アクティブ時の背景色 */
    color: black; /* アクティブ時の文字色 */
}

/* コンテンツボタン（アクティブ時） */
.content-filter.active[data-content="vα-liv"] { background-color: #656a75; color: #fff; }
.content-filter.active[data-content="アイマス"] { background-color: #ff74b8; color: #fff; }
.content-filter.active[data-content="THE IDOLM@STER"] { background-color: #f34f6d; color: #fff; }
.content-filter.active[data-content="Dearly Stars"] { background-color: #f00; color: #fff; }
.content-filter.active[data-content="シンデレラガールズ"] { background-color: #2681c8; color: #fff; }
.content-filter.active[data-content="ミリオンライブ！"] { background-color: #ffc30b; color: #fff; }
.content-filter.active[data-content="SideM"] { background-color: #0fbe94; color: #fff; }
.content-filter.active[data-content="シャイニーカラーズ"] { background-color: #8dbbff; color: #fff; }
.content-filter.active[data-content="学園アイドルマスター"] { background-color: #f39800; color: #fff; }


/* ALLボタン（通常時） */
#all-toggle-button {
    background-color: #e0e0e0; /* 非アクティブ時の背景色 */
    color: #999; /* 非アクティブ時の文字色 */
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 11px;
    cursor: pointer;
    margin: 5px;
    transition: background-color 0.3s, color 0.3s; /* スムーズな変化 */
}

/* ALLボタン（アクティブ時） */
#all-toggle-button.active {
    background-color: #000; /* アクティブ時の背景色 */
    color: #fff; /* アクティブ時の文字色 */
}



#sort-button.letora { background-color: #b8ff00; color: #333; }
#sort-button.manaka { background-color: #ff4d4d; color: white; }
#sort-button.cosmo { background-color: #4d79ff; color: white; }
#sort-button.vuiala { background-color: #000; color: white; }
#sort-button.favorite { background-color: #fff; color: #333; }


/* 曲リストの幅をプレーヤーに合わせる */
#streams-container, .song-list {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    box-sizing: border-box;
}



/* 曲タイトルと情報の位置調整 */
#song-title {
    font-size: 1.3em;
    font-weight: bold;
    margin: 5px 0 3px;
}

#performer-name {
    font-size: 1em;
    margin-bottom: 8px;
}

#time-info, #stream-title {
    font-size: 0.9em;
    margin-top: 5px;
}

/* キャラクターごとの枠の色 */
.letora .stream-container {
    border-color: #b8ff00; /* Letoraの色 */
}

.manaka .stream-container {
    border-color: #ff4d4d; /* Manakaの色 */
}

.cosmo .stream-container {
    border-color: #4d79ff; /* Cosmoの色 */
}

.vuiala .stream-container {
    border-color: #000; /* Vuialaの色 */
}



/* 配信枠タイトルにキャラカラーを適用 */
.stream-title.letora { color: #b8ff00; }
.stream-title.manaka { color: #ff4d4d; }
.stream-title.cosmo { color: #4d79ff; }
.stream-title.vuiala { color: #000; }


#player-container.manaka #song-title {
    color: white;
}    
#player-container.manaka #performer-name,
#player-container.manaka #time-info,
#player-container.manaka #stream-title {
    color: #ccc;
}

#player-container.cosmo #song-title {
    color: white;
}    
#player-container.cosmo #performer-name,
#player-container.cosmo #time-info,
#player-container.cosmo #stream-title {
    color: #ccc;
}

#player-container.vuiala #song-title {
    color: white;
}    
#player-container.vuiala #performer-name,
#player-container.vuiala #time-info,
#player-container.vuiala #stream-title {
    color: #ccc;
}
    
#player-container.letora #song-title {
    color: black;
}    
#player-container.letora #performer-name,
#player-container.letora #time-info,
#player-container.letora #stream-title {
    color: #333;
}

#player-container.favorite #song-title {
    color: black;
}    
#player-container.favorite #performer-name,
#player-container.favorite #time-info,
#player-container.favorite #stream-title {
    color: #333;
}
    
    
    
#song-title span {
    color: #ff4500; /* ループ中であることを示すためのアイコン色 */
}


#copy-share-url.letora { background-color: #b8ff00; color: #333; }
#copy-share-url.manaka { background-color: #ff4d4d; color: white; }
#copy-share-url.cosmo  { background-color: #4d79ff; color: white; }
#copy-share-url.vuiala { background-color: #000000; color: white; }
#copy-share-url.favorite { background-color: #ffffff; color: #333; }