@charset "utf-8";
/* CSS Document */
/* =========================
   全体
   ========================= */

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0 0 120px 0;
    background: #f8f8f8;
    color: #f8f8f8;

    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        sans-serif;

    line-height: 1.6;
}


/* =========================
   ヘッダー
========================= */

#page-header {
    position: relative;

    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 16px 10px;
}

#menu-button {
    position: absolute;
    top: 16px;
    right: 16px;

    width: 44px;
    height: 44px;

    border: none;
    border-radius: 10px;

    background: transparent;
    color: #f8f8f8;

    font-size: 26px;

    cursor: pointer;
    z-index: 1001;

    -webkit-tap-highlight-color: transparent;
}

.menu-panel {
    position: sticky;
    top: 0;
    z-index: 900;

    width: 100%;
    max-width: 600px;
    margin: 0 auto;

    padding: 8px 16px;

    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.menu-panel.open {
    display: block;
}

.menu-panel label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;
    font-weight: 700;
}

.search-box {
    display: flex;
    gap: 8px;
}

/* 70〜87行目：サイズや枠線の基本設定 */
#song-search {
    flex: 1;
    min-width: 0;

    height: 44px;
    padding: 0 14px;

    /*border: 1px solid #ccc;*/
    border-radius: 10px;/* 角の丸み */

    /*background: #fff;*/

    font-family: inherit;
    font-size: 16px;

    outline: none;
}

#song-search:focus {
    border-color: #888;
}

#search-clear {
    display: none;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

#search-clear.visible {
    display: block;
}

#streamer-name {
    margin: 0 0 5px;
    font-size: 24px;
    font-weight: 700;
}

#song-count {
    margin-bottom: 14px;
    font-size: 14px;
    color: #666;
}



/* =========================
   お気に入り・フィルターボタンエリア
========================= */

#favorite-section {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 5px 16px 15px;
}

#favorite-artists {
    display: flex;
    flex-wrap: wrap; /* 画面幅に応じて綺麗に折り返すか並べる */
    gap: 7px;
    width: 100%;
}

#complete-filter-buttons {
    display: flex;
    gap: 7px;
    width: 100%;
    margin-bottom: 7px;
}

#complete-filter-buttons .favorite-button {
    flex: 1;
}

/* 共通デザイン */
.favorite-button {
    flex: 1; /* 横並び時に幅を均等に広げる */
    min-width: 0;
    padding: 8px 12px;

    border: 1px solid rgba(255, 255, 255, 0.5);/* 枠線の色 */
    border-radius: 999px; /* 角丸丸みデザイン */

    background: rgba(255, 255, 255, 0.35);/* 通常時の透過背景 */
    color: #222;/* 通常時の文字色 */

    font-family: inherit;
    font-size: 13px; /* 3つ並んでも収まりやすいサイズ */
    text-align: center;
    white-space: nowrap; /* ボタン内のテキスト折り返しを防止 */

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.favorite-button.active {
    background: #222;/* 選択時の背景色（現在黒） */
    color: #fff;/* 選択時の文字色（現在白） */
    border-color: #222;/* 選択時の枠線色 */
}


/* =========================
   曲一覧
========================= */

#song-list {
    width: 100%;
    max-width: 600px;

    margin: 0 auto;
    padding: 10px 16px;
}

.artist {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 24px;
    padding: 8px 4px 5px;

    font-size: 18px;/* アーティスト名の文字サイズ */
    font-weight: 700;
	color: #DDDDDD;      /* ← 文字色を変更したい場合はここを追加（例: color: #fff; で白） */

    border-bottom: 2px solid #184F88; /*アーティスト名の下の線の色*/

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.artist:first-child {
    margin-top: 0;
}

.artist::after {
    content: "−";

    font-size: 18px;
    font-weight: 400;
}

.artist.collapsed::after {
    content: "+";
}


/* アーティストの曲 */

.artist-songs {
    overflow: hidden;
}

.artist-songs.collapsed {
    display: none;
}

.song {
    padding: 9px 5px;

    font-size: 16px;/* 曲名の文字サイズ */
	color: #dddddd;     /* ← 曲名の文字色を変更したい場合はここを追加 */

    /*border-bottom: 1px solid #e5e5e5;/* 各曲の間の区切り線の色 */
}


/* =========================
   50音ナビ
========================= */

#artist-nav {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 1000;

    width: 100%;

    padding: 8px;

    background: rgba(255, 255, 255, 0.2);/* バー全体の透過背景色 */

    border-top: 1px solid #ddd;/* 上側の境界線の色 */

    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.08);

    display: flex;
    flex-wrap: wrap;

    justify-content: center;

    gap: 5px;
}

#artist-nav button {
    min-width: 38px;
    min-height: 38px;

    padding: 5px 8px;

    border: 1px solid #ccc;
    border-radius: 8px;/* 角の丸み */
	color: #222;        /* 文字色 */

    background: rgba(255, 255, 255, 0.4);
    color: #222;

    font-family: inherit;
    font-size: 14px;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

#artist-nav button.active {
    background: #222;
    color: #fff;
    border-color: #222;
}

#artist-nav button:active {
    transform: scale(0.95);
}


/* =========================
   400px以下
========================= */

@media (max-width: 400px) {

    body {
        padding-bottom: 115px;
    }

    #page-header {
        padding: 16px 12px 8px;
    }

    #streamer-name {
        font-size: 22px;
    }

    #favorite-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    #song-list {
        padding-left: 12px;
        padding-right: 12px;
    }

    .artist {
        font-size: 17px;
    }

    .song {
        font-size: 15px;
    }

    #artist-nav {
        padding: 6px;
        gap: 4px;
    }

    #artist-nav button {
        min-width: 34px;
        min-height: 34px;

        padding: 4px 6px;

        font-size: 13px;
    }
}
/* 背景写真 */
/* 既存の body から背景プロパティを外す */
body {
  /* background-image などの指定を削除 */
  position: relative;
}

/* 擬似要素で固定背景を作成 */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-image: url("background.jpg");
	background-size: cover;
 	background-position: center;
 	background-repeat: no-repeat;
	z-index: -1; /* コンテンツの背面に配置 */
	/*filter: brightness(0.95); /* 背景画像の調整 ← 追加例: 0.9などに下げると画像が少し暗くなり文字が読みやすくなります */
}

/* メイン部分を少し透過 */
main {
    background: rgba(255, 255, 255, 0.2);/* メインコンテンツ全体の透け感 0.2を下げると透明度が上がり、上げると白みが増します */
}
/* 曲リストの半透明パネル */
#song-list {
    background: rgba(155, 155, 255, 0.1);/* パネルの背景色と透明度 (赤, 緑, 青, 透明度0〜1) */
    border: 1px solid rgba(255, 255, 255, 0);/* 枠線の太さ・種類・色 */
    border-radius: 18px;/* 角の丸み */
    padding: 10px 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);/* パネルの影の濃さ */
    backdrop-filter: blur(8px);/* 背景のボカシ具合（数字が大きいとボケが強くなる） */
    -webkit-backdrop-filter: blur(8px);
}
/* 検索欄・お気に入りボタンを半透明にする */
#song-search,
#search-clear,
.favorite-button {
    background: rgba(255, 255, 255, 0.35);/* 入力欄の背景透過度 */
    border: 1px solid rgba(255, 255, 255, 0.5);/* 枠線の色 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* フォーカス時も透明感を維持 */
#song-search:focus {
    background: rgba(255, 255, 255, 0.45);
}

/* 下部固定エリアを半透明にする */
#bottom-controls {
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}



/* ソート関連のボタン・セレクト */
#sort-select,
#sort-button,
#view-toggle {
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 50音ナビゲーション */
#artist-nav button {
    background: rgba(255, 255, 255, 0.30);/* 50音ボタンの透過背景 */
    border: 1px solid rgba(255, 255, 255, 0.75);/* ボタンの枠線色 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 選択中 */
#artist-nav button.active {
    background: rgba(255, 255, 255, 0.55);/* 選択中の背景透過度 */
}

#song-search {
    color: #333;/* 入力した文字の色 */
}

#song-search::placeholder {
    color: #333;/* 検索前の「曲名・アーティスト名で検索」の文字色 */
}

#filter-buttons {
    display: flex;
    gap: 7px;
    width: 100%;
}

#filter-buttons > #complete-filter {
    flex: 1;
    width: auto;
}

#filter-buttons > #favorite-artists {
    display: flex;
    flex: 2;
    gap: 7px;
}

#filter-buttons .favorite-button {
    flex: 1;
}