/* styles.css */

/* --- 基本スタイルと配色 (User Custom Theme 5) --- */
:root {
    /* --- Core Palette (基本色) --- */
    --brand-primary: #1047bd;        /* ★ プライマリカラー (青) */
    --brand-secondary: #357ABD;     /* ★ セカンダリカラー (濃い青) */
    --brand-accent: #2c7a7b;       /* アクセントカラー (ティール): Playボタン等 */

    /* --- Backgrounds (背景色) --- */
    --bg-primary: #f8f9fa;          /* ★ メインコンテンツ背景 (明るいグレー) */
    --bg-secondary: #ffffff;     /* ★ カード要素などの背景 (白) */
    --bg-sidebar: rgba(199, 230, 248, 0.95);  /* ★ PC版サイドバー背景 (水色系 / 透明度95%) */
    --bg-player: #2c7a7b;        /* ★ フッタープレイヤーバー背景 (ティール) */
    --bg-hover: rgba(161, 190, 236, 0.2); /* ★ マウスホバー背景 (薄い青、透明度あり) */
    --bg-active: rgba(163, 195, 231, 0.3);/* ★ アクティブ背景 (やや濃い薄い青、透明度あり) */
    --bg-modal-overlay: rgba(0, 0, 0, 0.6); /* モーダル背景 */

    /* --- Text (文字色) --- */
    --text-primary: #073058;       /* ★ 主要テキスト (ダークブルー) */
    --text-secondary: #6c757d;     /* 補助テキスト (ミディアムグレー) */
    --text-on-player: #ffffff;      /* ★ プレイヤーバー上のテキスト (白) */
    --text-sidebar: #073058;        /* ★ サイドバー/ナビ文字 (ダークブルーに変更) */
    --text-sidebar-active: var(--brand-primary); /* ★ アクティブなナビ文字 (青に変更) */
    --text-link: var(--brand-primary);
    --text-link-hover: var(--brand-secondary);
    --text-button: #ffffff;         /* プライマリボタン上の文字 (白) */
    --text-album-item-title: var(--text-primary);
    --text-album-item-artist: var(--text-secondary);
    --text-album-item-type: #888; /* ★ アルバムタイプの文字色 */
    --text-modal-header: var(--brand-primary);
    --text-modal-content: var(--text-primary);
    --text-modal-close: #aaa;
    --text-modal-close-hover: #333;
    --text-lyrics-content: #333; /* 歌詞の色 */

    /* --- Borders (境界線) --- */
    --border-primary: #ced4da;    /* ★ 主要境界線 (ミディアムグレー) */
    --border-secondary: #e0e0e0;    /* ★ 補助境界線 (より薄いグレー) */
    --border-player: #40454f; /* プレイヤーバー上境界線 */
    --border-modal-content: transparent;
    --border-lyrics-content: var(--border-secondary);

    /* --- States & Misc (状態やその他) --- */
    --button-primary-bg: var(--brand-primary);
    --button-primary-hover-bg: var(--brand-secondary);
    --button-secondary-bg: var(--bg-secondary);
    --button-secondary-hover-bg: #e2e6ea;
    --control-button-color: rgba(255, 255, 255, 0.7); /* プレイヤー通常ボタン (半透明白) */
    --control-button-hover-color: #ffffff;              /* プレイヤーホバーボタン (白) */
    --control-button-active-color: #ffffff;             /* プレイヤーアクティブボタン (白) */
    --play-button-color: #ffffff;                       /* 再生/一時停止ボタン (白) */
    --play-button-hover-color: #ffffff;                 /* 再生/一時停止ホバー (白) */
    --slider-track-color: rgba(255, 255, 255, 0.3);     /* スライダー溝 (半透明白) */
    --slider-thumb-color: #ffffff;                      /* スライダーつまみ (白) */
    --slider-hover-track-color: rgba(255, 255, 255, 0.5);/* スライダー溝ホバー */
    --slider-hover-thumb-color: var(--slider-thumb-color); /* スライダーつまみホバー */
    --error-color: #dc3545;
    --success-color: #198754; /* Green for success messages */
    --shadow-modal: 0 5px 15px rgba(0,0,0,0.3);
    --shadow-card: 0 2px 5px rgba(0,0,0,0.05);
    --shadow-card-hover: 0 6px 12px rgba(0,0,0,0.08);
    --shadow-cover: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-detail-cover: 0 6px 20px rgba(0, 0, 0, 0.15);
    /* ★ スマホ用固定要素の高さ定義 */
    --mobile-player-height: 95px;
    --mobile-nav-height: 45px; /* 旧サイドバーの調整: 高さを低くするらしいが、これ以上上げると右にズレる */
    --mobile-bottom-offset: 0px; /* プレイヤー/ナビ全体をどれだけ底上げするか */
}

/* --- 基本設定 --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    height: 100%; margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.6; /* 行間調整 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden; /* Prevent body scroll when app container takes over */
}
a { color: var(--text-link); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--text-link-hover); }
button { cursor: pointer; font-family: inherit; }
img { max-width: 100%; height: auto; display: block; } /* 画像の基本スタイル */
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.75em; font-weight: 600; line-height: 1.3; color: var(--text-primary); }
h2 { font-size: 1.8em; }
h3 { font-size: 1.3em; }
p { margin-top: 0; margin-bottom: 1em; }
ul, ol { margin-top: 0; margin-bottom: 1em; padding-left: 1.5em; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 0.75rem; vertical-align: top; border-top: 1px solid var(--border-secondary); }
th { text-align: inherit; font-weight: bold; }
input, button, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
::-moz-focus-inner { padding: 0; border-style: none; }
textarea { overflow: auto; resize: vertical; }

/* Utility Classes */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* ★ 準備中リンク用のスタイル */
.disabled-link {
    opacity: 0.6;
    pointer-events: none; /* クリックを無効化 */
    cursor: default;
}

/* --- ログイン画面スタイル --- */
.login-wrapper { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: var(--bg-secondary); padding: 20px; }
.login-box { background-color: #fff; padding: 30px 40px; border-radius: 8px; box-shadow: var(--shadow-card); text-align: center; max-width: 400px; width: 100%; }
.login-box .login-logo { max-width: 75%; height: auto; display: block; margin: 0 auto 25px auto; }
.login-box form label { display: block; margin-bottom: 8px; font-weight: bold; text-align: left; font-size: 0.9em; }
.login-box input[type="password"], /* Typeをpasswordに変更 */
.login-box input#site_password { /* IDも残しておく */
    width: 100%; padding: 12px; margin-bottom: 20px; border: 1px solid var(--border-primary); border-radius: 4px; font-size: 16px; }
.login-box input#site_password:focus { border-color: var(--brand-primary); outline: none; box-shadow: 0 0 5px rgba(13, 110, 253, 0.25); }
.login-box button { background-color: var(--button-primary-bg); color: var(--text-button); width: 100%; padding: 12px 20px; border: none; border-radius: 4px; font-size: 1.1em; font-weight: bold; transition: background-color 0.2s; }
.login-box button:hover { background-color: var(--button-primary-hover-bg); }
.login-error { color: var(--error-color); margin-top: 15px; font-size: 0.9em; font-weight: 500; }

/* --- アプリケーション本体 --- */
.app-container { display: flex; height: 100vh; width: 100%; overflow: hidden; }

/* --- サイドバー (PC) --- */
.sidebar {
    width: 240px;
    background-color: var(--bg-sidebar);
    padding: 20px 10px 20px 20px;
    display: flex;
    flex-direction: column;
    color: var(--text-sidebar);
    height: 100vh;
    overflow-y: auto; /* 内容が多い場合にスクロール */
    flex-shrink: 0;
    border-right: 1px solid var(--border-primary);
    z-index: 50;
    /* PC版の padding-bottom はプレイヤーバーの高さを引く必要なし */
}
.sidebar .logo { margin-bottom: 25px; padding-left: 10px; line-height: 0; }
.sidebar .logo img { max-height: 44px; width: auto; display: block; }
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar li { margin-bottom: 5px; }
.sidebar li a.nav-link {
    display: flex; align-items: center;
    padding: 10px 15px;
    color: var(--text-sidebar);
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s, opacity 0.2s;
    font-weight: 500;
    opacity: 0.9;
}
.sidebar li a.nav-link:hover:not(.disabled-link) { background-color: rgba(255, 255, 255, 0.2); color: var(--text-sidebar); opacity: 1; }
.sidebar li a.nav-link.active { background-color: rgba(255, 255, 255, 0.3); color: var(--text-sidebar-active); font-weight: bold; opacity: 1; }
.sidebar li a.nav-link i { margin-right: 15px; width: 20px; text-align: center; font-size: 1.1em; }
.sidebar li a.nav-link span { flex-grow: 1; }
.sidebar hr { border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); margin: 20px 0; }
.search-form { position: relative; margin-bottom: 20px; padding-right: 10px; }
#search-input { width: 100%; padding: 10px 35px 10px 15px; border: 1px solid var(--border-primary); border-radius: 20px; background-color: #fff; outline: none; font-size: 0.9em; color: var(--text-primary); }
#search-input::placeholder { color: var(--text-secondary); }
#search-input:focus { border-color: var(--brand-primary); box-shadow: 0 0 5px rgba(13, 110, 253, 0.2); }
.search-icon { position: absolute; right: 25px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; }

/* --- メインコンテンツエリア --- */
.main-content {
    flex-grow: 1;
    overflow-y: auto; /* ここでスクロールを許可 */
    height: 100vh; /* ビューポートの高さ */
    padding: 25px 30px 110px 30px; /* PC版: 下パディングでプレイヤーバーと重ならないように */
    background-color: var(--bg-primary);
}
.main-header {
    display: flex; /* スマホでも flex を基本に */
    justify-content: flex-end; /* PC版デフォルト */
    align-items: center;
    margin-bottom: 25px;
    position: relative; /* モバイルロゴや検索バーの配置基準 */
    min-height: 40px; /* ヘッダーの最小高さ */
    background-color: transparent; /* 通常は背景なし */
}
.header-content-main { display: flex; align-items: center; justify-content: flex-end; width: 100%; transition: opacity 0.2s ease-in-out; }
#mobile-search-toggle-button { display: none; /* PCでは非表示 */ }
.header-search-bar { /* モバイル用検索バーの基本スタイル */
    display: none; /* 初期状態では非表示 */
    align-items: center;
    width: 100%;
    gap: 8px;
    position: absolute;
    left:0; top: 50%;
    transform: translateY(-50%);
    background-color: var(--bg-primary); /* 背景色を設定 */
    padding: 5px 10px;
    box-sizing: border-box;
    border-radius: 4px;
    z-index: 1; /* 他の要素より手前に */
}
.header-search-bar input[type="text"] { flex-grow: 1; padding: 8px 12px; border: 1px solid var(--border-primary); border-radius: 15px; font-size: 16px; outline: none; }
.header-search-bar button { background: none; border: none; font-size: 1.3em; color: var(--text-secondary); cursor: pointer; padding: 5px; line-height: 1; }
/* モバイル検索アクティブ時のスタイル */
.main-header.header-search-active .header-content-main,
.main-header.header-search-active .mobile-logo { display: none; } /* 通常のヘッダー内容とロゴを隠す */
.main-header.header-search-active .header-search-bar { display: flex; } /* 検索バーを表示 */
.main-header.header-search-active #mobile-search-toggle-button { display: none; } /* 検索アイコンを隠す */

.mobile-logo { display: none; /* PCでは非表示 */ max-height: 39px; width: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; }
.back-button { background: none; border: none; font-size: 1.5em; color: var(--brand-primary); cursor: pointer; margin-bottom: 15px; padding: 5px; display: none; /* 初期非表示、JSで制御 */ }
.back-button:hover { color: var(--brand-secondary); }

/* --- 各ビュー共通スタイル --- */
#home-view, #library-view, #detail-view, #search-results-view, #contact-view {
    /* 必要であれば共通のスタイル */
}

/* --- ホームビュー スタイル --- */
#home-view h2 { margin-bottom: 25px; border-bottom: 1px solid var(--border-secondary); padding-bottom: 8px; }
#home-view section { background-color: var(--bg-secondary); padding: 20px; border-radius: 8px; margin-bottom: 25px; box-shadow: var(--shadow-card); }
#home-view section h3 { margin-top: 0; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 1px solid var(--border-secondary); }
#announcements-list { max-height: 40vh; overflow-y: auto; padding-right: 5px; }
.announcement-item { border-bottom: 1px dashed var(--border-secondary); margin-bottom: 5px; padding-bottom: 5px; }
.announcement-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
/* アコーディオンヘッダー内の要素スタイル */
.announcement-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 10px 5px; border-radius: 3px; transition: background-color 0.2s; position: relative; gap: 10px; }
.announcement-header:hover { background-color: rgba(0,0,0,0.04); }
.announcement-date { flex-shrink: 0; color: var(--text-secondary); font-size: 0.9em; font-weight: 500; white-space: nowrap; }
.announcement-message { flex-grow: 1; font-size: 0.95em; line-height: 1.4; color: var(--text-primary); font-weight: 500; margin-right: 20px; /* Ensure space for chevron */ }
.announcement-chevron { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease; color: var(--text-secondary); font-size: 0.8em; }
.announcement-header.expanded .announcement-chevron { transform: translateY(-50%) rotate(180deg); }
/* アコーディオン詳細部分 */
.announcement-details {
    padding: 0 5px; /* paddingで開閉アニメーション */
    border-top: 1px solid var(--border-secondary);
    margin-top: 5px;
    overflow: hidden; /* heightアニメーションのため */
    max-height: 0; /* 初期状態は高さ0 */
    opacity: 0; /* 初期状態は透明 */
    transition: max-height 0.4s ease-out, opacity 0.3s 0.1s ease-out, padding 0.4s ease-out, margin 0.4s ease-out;
    padding-top: 0; padding-bottom: 0; margin-top: 0; /* transition対象 */
    font-size: 0.9em;
    line-height: 1.5;
}
.announcement-header.expanded + .announcement-details {
    max-height: 300px; /* 開いた時の最大高さ */
    opacity: 1;
    padding-top: 15px; padding-bottom: 10px; margin-top: 5px;
    transition: max-height 0.4s ease-in, opacity 0.3s ease-in, padding 0.4s ease-in, margin 0.4s ease-in;
}
.announcement-details p { margin-bottom: 10px; }
.announcement-details a { color: var(--brand-secondary); text-decoration: underline; }
.announcement-details a:hover { color: var(--brand-primary); }
/* ボタン共通スタイル */
.button-style { background-color: var(--button-secondary-bg); color: var(--text-primary); border: 1px solid var(--border-primary); padding: 8px 15px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; font-size: 0.95em; }
.button-style:hover { background-color: var(--button-secondary-hover-bg); border-color: #bbb; }

/* --- アルバム一覧ソートオプション --- */
.sort-options { margin-bottom: 20px; padding: 10px; background-color: rgba(0, 0, 0, 0.03); border-radius: 4px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sort-options label { font-size: 0.9em; font-weight: 500; color: var(--text-secondary); margin-right: 5px; }
.sort-options select { padding: 5px 8px; border: 1px solid var(--border-primary); border-radius: 4px; font-size: 0.9em; background-color: #fff; cursor: pointer; }

/* --- ライブラリビュー --- */
#library-view h2 { margin-bottom: 15px; }
.music-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 25px; }
.playlist-item { background-color: var(--bg-secondary); border-radius: 8px; padding: 18px; text-align: left; transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s; cursor: pointer; border: 1px solid transparent; overflow: hidden; }
.playlist-item:hover { background-color: #fff; transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--border-secondary); }
.playlist-item img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; margin-bottom: 12px; box-shadow: var(--shadow-cover); background-color: #eee; display: block; }
.playlist-item h3 { font-size: 1.05em; font-weight: 600; margin: 0 0 5px; color: var(--text-album-item-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playlist-item p.album-artist { font-size: 0.9em; color: var(--text-album-item-artist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.playlist-item span.album-release-type { display: block; font-size: 0.8em; color: var(--text-album-item-type); font-weight: 500; margin-top: 2px; }

/* --- 詳細表示ビュー --- */
#detail-view { padding: 10px 0; }
.detail-header { display: flex; align-items: flex-end; gap: 30px; margin-bottom: 35px; padding: 0; background-color: transparent; border-radius: 0; }
#detail-cover { width: 230px; height: 230px; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow-detail-cover); flex-shrink: 0; background-color: #eee; }
.detail-info { flex-grow: 1; margin-bottom: 10px; }
.detail-info span.item-type { font-size: 0.85em; font-weight: bold; text-transform: uppercase; display: block; margin-bottom: 5px; color: var(--text-secondary); }
#detail-title { font-size: clamp(2em, 5vw, 3.5em); font-weight: 800; margin: 0 0 10px 0; color: var(--text-primary); line-height: 1.2; }
#detail-description { font-size: 0.95em; color: var(--text-secondary); margin-bottom: 25px; line-height: 1.4; }
.play-button-large { background-color: var(--button-primary-bg); color: var(--text-button); border: none; border-radius: 50px; padding: 14px 30px; font-size: 1em; font-weight: bold; cursor: pointer; transition: background-color 0.2s, transform 0.1s; display: inline-flex; align-items: center; box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3); }
.play-button-large i { margin-right: 8px; font-size: 1.2em; }
.play-button-large:hover { background-color: var(--button-primary-hover-bg); transform: scale(1.03); }
.play-button-large:active { transform: scale(0.98); }
.detail-track-list-container { margin-top: 30px; overflow-x: auto; /* 横スクロールを念のため許可 */ }
#detail-track-list {
     width: 100%;
     border-collapse: collapse;
     table-layout: fixed; /* 列幅固定のため */
     min-width: 600px; /* テーブルの最小幅を確保 */
}
#detail-track-list thead { border-bottom: 1px solid var(--border-secondary); color: var(--text-secondary); font-size: 0.8em; text-align: left; }
#detail-track-list th { padding: 12px 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#detail-track-list th.col-track-num { width: 40px; text-align: center; }
#detail-track-list th.col-track-title { /* 自動幅 (残り) */ }
#detail-track-list th.col-track-lyricist { width: 18%; }
#detail-track-list th.col-track-composer { width: 18%; }
#detail-track-list th.col-track-duration { width: 60px; text-align: center; }
#detail-track-list th.col-track-lyrics,
#detail-track-list th.col-track-download {
    width: 50px;
    text-align: center;
}
#detail-track-list tbody tr { border-bottom: 1px solid var(--border-secondary); transition: background-color 0.1s; cursor: pointer; }
#detail-track-list tbody tr:hover { background-color: var(--bg-hover); }
#detail-track-list tbody tr.playing { background-color: var(--bg-active); /* 少し濃く */ }
#detail-track-list tbody tr.playing td:first-child,
#detail-track-list tbody tr.playing .track-title { color: var(--brand-primary); font-weight: 600; }
#detail-track-list td { padding: 14px 8px; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#detail-track-list td.track-index { text-align: center; color: var(--text-secondary); font-size: 0.95em; }
#detail-track-list td.track-lyricist,
#detail-track-list td.track-composer {
    color: var(--text-secondary);
    font-size: 0.9em;
}
#detail-track-list td.track-duration,
#detail-track-list td.track-lyrics,
#detail-track-list td.track-download {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9em;
    white-space: nowrap; /* ボタンがはみ出ないように */
}
/* タイトル/アーティスト部分は折り返し可能にする */
#detail-track-list td:nth-child(2) { white-space: normal; }
.track-title { font-weight: 500; color: var(--text-primary); display: block; margin-bottom: 2px; font-size: 1em; white-space: normal; /* 折り返し */ }
.track-artist { font-size: 0.9em; color: var(--text-secondary); white-space: normal; /* 折り返し */ }

/* ★ 歌詞ボタン スタイル */
.lyrics-button {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.1em; /* アイコンサイズ */
    padding: 5px;
    line-height: 1;
    transition: color 0.2s;
    vertical-align: middle;
}
.lyrics-button:hover:not(:disabled) { color: var(--brand-primary); }
.lyrics-button:disabled { color: #ccc; cursor: not-allowed; opacity: 0.5; }
.lyrics-button i { display: block; } /* アイコンをブロック要素に */

/* ★ ダウンロードボタン スタイル */
.download-button {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.1em; /* アイコンサイズ */
    padding: 5px;
    line-height: 1;
    transition: color 0.2s;
    vertical-align: middle;
}
.download-button:hover { color: var(--brand-primary); }
.download-button i { display: block; } /* アイコンをブロック要素に */


/* --- 検索結果ビュー --- */
#search-results-view h2 { color: var(--text-primary); border-bottom: none; padding-bottom: 0; margin-bottom: 20px; font-size: 1.8em; font-weight: 700; }
.search-form.mobile-search-view-input { display: none; /* Normally hidden, shown in mobile maybe? Check JS logic */ margin-bottom: 25px; }
.search-category { margin-bottom: 35px; }
.search-category h3 { margin-top: 0; margin-bottom: 18px; color: var(--text-primary); font-size: 1.3em; font-weight: 600; border-bottom: 1px solid var(--border-secondary); padding-bottom: 8px;}
#search-track-list .search-track-item { display: flex; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--border-secondary); cursor: pointer; transition: background-color 0.1s; border-radius: 4px; }
#search-track-list .search-track-item:hover { background-color: var(--bg-hover); }
#search-track-list .search-track-item img { width: 45px; height: 45px; object-fit: cover; margin-right: 15px; border-radius: 4px; background-color: #eee; flex-shrink: 0; }
#search-track-list .search-track-item .info { flex-grow: 1; overflow: hidden; }
#search-track-list .search-track-item .title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
#search-track-list .search-track-item .artist-album { font-size: 0.9em; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#search-track-list .search-track-item .play-icon { margin-left: 15px; color: var(--brand-primary); opacity: 0; transition: opacity 0.2s; font-size: 1.3em; flex-shrink: 0; }
#search-track-list .search-track-item:hover .play-icon { opacity: 1; }
#search-artist-list .search-artist-item { padding: 14px 8px; border-bottom: 1px solid var(--border-secondary); font-weight: 500; cursor: pointer; transition: background-color 0.1s; border-radius: 4px;}
#search-artist-list .search-artist-item:hover { background-color: var(--bg-hover); }
#search-no-results { color: var(--text-secondary); font-style: italic; padding: 20px 0; text-align: center; }

/* --- 問い合わせページ --- */
#contact-view h2 { color: var(--text-primary); border-bottom: 1px solid var(--border-secondary); padding-bottom: 8px; margin-bottom: 20px; font-size: 1.8em; }
#contact-view > p { color: var(--text-secondary); margin-bottom: 30px; }
.contact-form-container { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 1000px; /* 少し広げる */ margin: 0 auto; }
/* 画面幅に応じてカラム数を変更 */
@media (min-width: 992px) { .contact-form-container { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } }
.contact-form-container section { border: 1px solid var(--border-secondary); border-radius: 8px; padding: 25px; background-color: var(--bg-secondary); box-shadow: var(--shadow-card); }
.contact-form-container h3 { margin-top: 0; margin-bottom: 20px; color: var(--brand-primary); border-bottom: 1px solid var(--border-secondary); padding-bottom: 10px; }
.contact-form .form-group { margin-bottom: 20px; }
.contact-form label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.9em; color: var(--text-primary); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="url"],
.contact-form input[type="number"],
.contact-form select,
.contact-form textarea {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 4px; font-size: 16px; font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: var(--bg-primary); color: var(--text-primary);
}
/* selectの矢印スタイル */
.contact-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--brand-primary); outline: none; box-shadow: 0 0 5px rgba(13, 110, 253, 0.2); background-color: #fff; }
.contact-form textarea { resize: vertical; min-height: 100px; }
.contact-form small { font-size: 0.8em; color: var(--text-secondary); margin-top: 5px; display: block; }
.contact-form .submit-button { background-color: var(--button-primary-bg); color: var(--text-button); padding: 10px 20px; border: none; border-radius: 4px; font-size: 1em; font-weight: bold; cursor: pointer; transition: background-color 0.2s, opacity 0.2s; }
.contact-form .submit-button:hover { background-color: var(--button-primary-hover-bg); }
.contact-form .submit-button:disabled { opacity: 0.6; cursor: not-allowed; background-color: var(--button-primary-bg); } /* disabled時の色も指定 */
.form-message { margin-top: 15px; font-size: 0.95em; font-weight: bold; padding: 10px 15px; border-radius: 4px; display: none; border: 1px solid transparent; }
.form-message.success { color: var(--success-color); background-color: rgba(25, 135, 84, 0.1); border-color: rgba(25, 135, 84, 0.3); }
.form-message.error { color: var(--error-color); background-color: rgba(220, 53, 69, 0.1); border-color: rgba(220, 53, 69, 0.3); }

/* --- フッタープレイヤー --- */
.player-bar {
    position: fixed; bottom: 0; left: 0; /* PC版は底辺に固定 */
    width: 100%; height: 90px;
    background-color: var(--bg-player);
    border-top: 1px solid var(--border-player);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 25px; box-sizing: border-box;
    gap: 20px; z-index: 100; color: var(--text-on-player);
}
.now-playing { display: flex; align-items: center; gap: 12px; overflow: hidden; flex-basis: 28%; min-width: 180px; }
#player-cover { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background-color: rgba(255,255,255,0.1); }
.track-info { overflow: hidden; white-space: nowrap; }
#player-title { font-weight: 500; text-overflow: ellipsis; overflow: hidden; font-size: 0.95em; color: var(--text-on-player); margin-bottom: 2px; }
#player-artist { font-size: 0.85em; color: rgba(255, 255, 255, 0.7); text-overflow: ellipsis; overflow: hidden; }
.player-center-block { flex-grow: 1; display: flex; flex-direction: column; align-items: center; min-width: 250px; }
.progress-bar { width: 100%; max-width: 600px; display: flex; align-items: center; margin-bottom: 5px; }
.player-controls-main { display: flex; justify-content: center; align-items: center; gap: 5px; /* ボタン間の隙間 */ }
.control-button { background: none; border: none; color: var(--control-button-color); font-size: 1.1em; margin: 0 3px; /* 左右マージン少し削減 */ cursor: pointer; transition: color 0.2s, transform 0.1s; padding: 6px; border-radius: 50%; line-height: 1; }
.control-button:hover { color: var(--control-button-hover-color); }
.control-button:active { transform: scale(0.9); }
.control-button.play-pause { font-size: 1.2em; /* font-awesomeのサイズはiタグで調整 */ }
.control-button .fa-play-circle, .control-button .fa-pause-circle { font-size: 2.4em; color: var(--play-button-color); transition: color 0.2s;}
.control-button.play-pause:hover .fa-play-circle, .control-button.play-pause:hover .fa-pause-circle { color: var(--play-button-hover-color); }
.control-button.active { color: var(--control-button-active-color); } /* Shuffle, Repeatアクティブ時 */
/* 単曲リピート用アイコン装飾 */
.control-button.repeat-track i::after {
     content: "1"; position: absolute; top: 2px; right: 2px; font-size: 0.6em;
     font-weight: bold; background: var(--control-button-active-color); color: var(--bg-player);
     border-radius: 3px; padding: 0px 3px; line-height: 1; pointer-events: none; }
.control-button#repeat-button { position: relative; } /* ::after の基準点 */

/* スライダー共通スタイル */
.seek-slider, .volume-slider { height: 5px; cursor: pointer; appearance: none; -webkit-appearance: none; background: var(--slider-track-color); border-radius: 3px; outline: none; transition: background-color 0.2s; margin: 0; }
.seek-slider:hover, .volume-slider:hover { background-color: var(--slider-hover-track-color); }
/* Webkit スライダーつまみ */
.seek-slider::-webkit-slider-thumb, .volume-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; background: var(--slider-thumb-color); border-radius: 50%; cursor: pointer; transition: background-color 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); margin-top: -4.5px; /* トラックの中央に配置 */ }
.volume-slider::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -3.5px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.seek-slider:hover::-webkit-slider-thumb, .volume-slider:hover::-webkit-slider-thumb { background: var(--slider-hover-thumb-color); }
/* Firefox スライダーつまみ */
.seek-slider::-moz-range-thumb, .volume-slider::-moz-range-thumb { width: 14px; height: 14px; background: var(--slider-thumb-color); border-radius: 50%; cursor: pointer; border: none; transition: background-color 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.volume-slider::-moz-range-thumb { width: 12px; height: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.seek-slider:hover::-moz-range-thumb, .volume-slider:hover::-moz-range-thumb { background: var(--slider-hover-thumb-color); }

.seek-slider { width: 100%; } /* プログレスバー用 */
.current-time, .duration { font-size: 0.8em; color: rgba(255, 255, 255, 0.7); min-width: 40px; text-align: center; }
.current-time { margin-right: 10px; }
.duration { margin-left: 10px; }
.volume-control-container { flex-basis: 28%; min-width: 150px; display: flex; justify-content: flex-end; align-items: center; }
.volume-control { display: flex; align-items: center; }
.volume-control i { color: var(--control-button-color); margin: 0 8px; /* Adjust spacing */ cursor: default; /* Icons are just indicators */ font-size: 1em; }
.volume-slider { width: 90px; } /* ボリュームスライダー用 */

/* --- ★★★ Modal Styles (About & Lyrics) ★★★ --- */
.modal-overlay { position: fixed; inset: 0; background-color: var(--bg-modal-overlay); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s linear; padding: 20px; }
.modal-overlay[style*="display: flex"] { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s linear; }
.modal-content { background-color: var(--bg-secondary); padding: 30px 40px; border-radius: 8px; box-shadow: var(--shadow-modal); max-width: 600px; width: 100%; position: relative; max-height: 85vh; overflow-y: hidden; display: flex; flex-direction: column; border: var(--border-modal-content); color: var(--text-modal-content); }
.modal-content h2 { margin-top: 0; margin-bottom: 20px; color: var(--text-modal-header); flex-shrink: 0; padding-right: 40px; }
.modal-content > div { flex-grow: 1; overflow-y: auto; margin-bottom: 10px; padding-right: 10px; -webkit-overflow-scrolling: touch; }
.modal-content p, .modal-content ul { margin-bottom: 15px; line-height: 1.6; }
.modal-content ul { padding-left: 25px; }
.modal-content li { margin-bottom: 8px; }
.close-modal { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 1.8em; line-height: 1; color: var(--text-modal-close); cursor: pointer; padding: 0 5px; transition: color 0.2s; }
.close-modal:hover { color: var(--text-modal-close-hover); }
#lyrics-modal-content { font-family: 'Meiryo', 'Hiragino Kaku Gothic ProN', sans-serif; font-size: 0.95em; line-height: 1.7; color: var(--text-lyrics-content); background-color: rgba(0,0,0, 0.02); padding: 15px 20px; border-radius: 4px; border: 1px solid var(--border-lyrics-content); white-space: pre-wrap; word-wrap: break-word; }
/* --- ★★★ Modal Styles End ★★★ --- */


/* --- レスポンシブ デザイン (スマートフォン向け) --- */
@media (max-width: 768px) {
    /* 基本 */
    body { font-size: 15px; -webkit-text-size-adjust: 100%; overflow: visible; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.1em; }

    /* レイアウト */
    .app-container { flex-direction: column; height: auto; min-height: 100vh; }
    .main-content {
        order: 1; flex-grow: 1; height: auto;
        /* ★ 微調整 ★: 下部パディングを更新 (新しいナビ高さ) */
        padding: 15px 15px calc(var(--mobile-nav-height) + var(--mobile-player-height) + var(--mobile-bottom-offset) + 15px) 15px;
        overflow-y: visible;
    }

    /* フッターナビ (旧サイドバー) */
    .sidebar {
        order: 2; width: 100%;
        height: var(--mobile-nav-height); /* ★ 微調整 ★: 高さを変数で指定 */
        position: fixed; bottom: calc(var(--mobile-player-height) + var(--mobile-bottom-offset)); left: 0;
        background-color: var(--bg-sidebar); display: flex; align-items: center;
        padding: 0; /* ★ 微調整 ★: 左右パディングを削除 (中のリンクで調整) */
        box-shadow: 0 -2px 5px rgba(0,0,0,0.08); z-index: 100;
        border-top: 1px solid var(--border-primary); overflow: hidden;
    }
    .sidebar .logo, .sidebar hr, .sidebar .pc-only-search { display: none; }
    .sidebar ul { display: flex; flex-grow: 1; justify-content: space-around; height: 100%; padding: 0; margin: 0; flex-wrap: nowrap; }
    .sidebar li { flex-grow: 1; text-align: center; display: flex; margin-right: 0; }
    .sidebar li a.nav-link {
        padding: 10px 13px; /* ★ 微調整 ★: 上下パディング、左右(効果てきめん)で距離感を調整 */
        flex-direction: column;
        font-size: 0.7em; color: var(--text-sidebar);
        display: flex; justify-content: center; align-items: center; /* ★ 微調整 ★: これで上下左右中央揃え */
        flex-grow: 1; height: 140%; border-radius: 0; /* heightで枠内での表示域を大きくすることができた！ */
        transition: color 0.2s, opacity 0.2s;
        line-height: 1.0; opacity: 0.85; overflow: hidden; text-decoration: none;
    }
    .sidebar li a.nav-link.active { color: var(--text-sidebar-active); font-weight: bold; background-color: transparent; opacity: 1; }
    .sidebar li a.nav-link i { margin: 0 0 1px 0; /* ★ 微調整 ★: アイコン下マージン少し減らす */ font-size: 1.3em; /* ★ 微調整 ★: アイコン少し小さく */ width: auto; }
    .sidebar li a.nav-link span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 0.8em; /* ★ 微調整 ★: テキスト少し小さく */ line-height: 1.2; /* ★ 微調整 ★: 行間詰める */ }

    /* メインヘッダー (スマホ) */
    .main-header { padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid var(--border-secondary); display: flex; justify-content: center; align-items: center; position: relative; min-height: 55px; background-color: var(--bg-primary); }
    #mobile-search-toggle-button { display: block; background: none; border: none; font-size: 1.5em; color: var(--text-secondary); cursor: pointer; padding: 8px; border-radius: 50%; line-height: 1; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); }
    #mobile-search-toggle-button:hover { background-color: var(--bg-hover); color: var(--text-primary); }
    .header-search-bar { background-color: var(--bg-primary); padding: 0 10px 0 15px; }
    .header-search-bar input[type="text"] { padding: 10px 15px; border-radius: 20px; background-color: #fff; }
    .header-search-bar button { font-size: 1.3em; margin-left: 5px; }
    .mobile-logo { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: 39px; width: auto; z-index: 0; }
    .back-button { display: block; }

    /* Sort options mobile */
    .sort-options { flex-direction: column; gap: 8px; align-items: stretch; padding: 8px; }
    .sort-options label { display: none; }
    .sort-options select { font-size: 1em; padding: 8px; }

    /* Home View Mobile */
    #home-view section { padding: 15px; }
    .announcement-header { flex-wrap: wrap; padding: 8px 5px; gap: 5px; }
    .announcement-date { width: 100%; font-size: 0.8em; margin-bottom: 3px; }
    .announcement-message { margin-left: 0; font-size: 0.9em; width: calc(100% - 25px); line-height: 1.3; }
    .announcement-chevron { right: 8px; top: 12px; font-size: 0.7em;}
    .announcement-details { font-size: 0.9em; }

    /* Modal Mobile */
    .modal-content { padding: 20px; width: 95%; max-height: 80vh; }
    .modal-content h2 { font-size: 1.4em; margin-bottom: 15px; padding-right: 35px; }
    .close-modal { top: 10px; right: 10px; font-size: 1.6em; }
    #lyrics-modal-content { font-size: 0.9em; line-height: 1.6; padding: 10px 15px; }

    /* Player Bar (スマホ) */
    .player-bar {
        order: 3; height: var(--mobile-player-height);
        position: fixed; bottom: var(--mobile-bottom-offset); left: 0;
        flex-direction: column; padding: 8px 10px; gap: 5px; z-index: 101;
        background-color: var(--bg-player); border-top: 1px solid var(--border-player);
        color: var(--text-on-player);
    }
    .now-playing { order: 1; flex-basis: auto; min-width: 0; justify-content: center; width: 100%; gap: 8px; margin-bottom: 5px; padding: 0 5px; }
    #player-cover { width: 45px; height: 45px; }
    .track-info { text-align: center; flex-grow: 1; }
    #player-title { font-size: 0.9em; }
    #player-artist { font-size: 0.8em; }
    .player-center-block { order: 2; width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; }
    .progress-bar { order: 1; width: 100%; max-width: none; display: flex; align-items: center; margin-bottom: 8px; }
    .player-controls-main { order: 2; display: flex; justify-content: center; align-items: center; gap: 10px; }
    .control-button { font-size: 1.3em; margin: 0; padding: 8px; }
    .control-button .fa-play-circle, .control-button .fa-pause-circle { font-size: 2.4em; }
    .control-button.repeat-track i::after { top: 0; right: 0; }
    .current-time, .duration { font-size: 0.75em; }
    .seek-slider { background: var(--slider-track-color); }
    .seek-slider::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -5.5px; }
    .seek-slider::-moz-range-thumb { width: 16px; height: 16px; }
    .volume-control-container { display: none; }

    /* Album Grid (スマホ) */
    .music-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .playlist-item { padding: 10px; background-color: #fff; border: 1px solid var(--border-secondary); }
    .playlist-item img { margin-bottom: 8px; }
    .playlist-item h3 { font-size: 0.9em; min-height: 2.4em; line-height: 1.2em; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: var(--text-album-item-title); white-space: normal; }
    .playlist-item p.album-artist { font-size: 0.8em; color: var(--text-album-item-artist); margin-bottom: 2px; }
    .playlist-item span.album-release-type { font-size: 0.75em; margin-top: 0; }

    /* Detail View (スマホ) */
    .detail-header { flex-direction: column; text-align: center; gap: 15px; padding: 15px; background-color: transparent; align-items: center; }
    #detail-cover { width: clamp(140px, 45vw, 180px); height: auto; aspect-ratio: 1/1; }
    #detail-title { font-size: 1.6em; }
    #detail-description { font-size: 0.95em; }
    .play-button-large { padding: 10px 20px; font-size: 0.95em; background-color: var(--brand-primary); }
    .play-button-large:hover { background-color: var(--brand-secondary); }
    .detail-track-list-container { overflow-x: hidden; }
    #detail-track-list { table-layout: auto; min-width: auto; }
    #detail-track-list th, #detail-track-list td { padding: 12px 5px; white-space: normal; }
    #detail-track-list th.col-track-lyricist, #detail-track-list td.track-lyricist, #detail-track-list th.col-track-composer, #detail-track-list td.track-composer, #detail-track-list th.col-track-duration, #detail-track-list td.track-duration { display: none; }
    #detail-track-list th.col-track-num, #detail-track-list td.track-index, #detail-track-list th.col-track-title, #detail-track-list td:nth-child(2), #detail-track-list th.col-track-lyrics, #detail-track-list td.track-lyrics, #detail-track-list th.col-track-download, #detail-track-list td.track-download { display: table-cell; }
    #detail-track-list th.col-track-lyrics, #detail-track-list td.track-lyrics, #detail-track-list th.col-track-download, #detail-track-list td.track-download { width: 45px; text-align: center; vertical-align: middle; padding-left: 3px; padding-right: 3px; }
    #detail-track-list td:nth-child(2) { padding-right: 5px; }
    .track-title { font-size: 1em; margin-bottom: 2px; }
    .track-artist { font-size: 0.85em; }
    .lyrics-button, .download-button { font-size: 1.2em; padding: 6px; }

    /* Search View (スマホ) */
     #search-results-view h2 { font-size: 1.5em; margin-bottom: 15px; }
     .mobile-search-view-input { display: none; }
     .pc-only-search { display: none; }
     .search-category h3 { font-size: 1.15em; }
     #search-results-albums .music-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
     #search-track-list .search-track-item img { width: 40px; height: 40px; margin-right: 10px; }
     #search-track-list .search-track-item .title { font-size: 0.95em; }
     #search-track-list .search-track-item .artist-album { font-size: 0.8em; }
     #search-track-list .search-track-item .play-icon { opacity: 1; font-size: 1.2em; }

     /* 問い合わせフォーム (スマホ) */
     .contact-form-container { grid-template-columns: 1fr; gap: 25px; }
     .contact-form-container section { padding: 20px; background-color: var(--bg-secondary); border: 1px solid var(--border-secondary);}
     .contact-form input, .contact-form select, .contact-form textarea { padding: 10px; background-color: var(--bg-primary); }
     .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { background-color: #fff;}
}

/* さらに小さい画面用 (例: 480px未満) */
@media (max-width: 480px) {
    body { font-size: 14px; }
    .music-grid { gap: 10px; }
    .playlist-item h3 { font-size: 0.85em; min-height: 2.3em; }
    .playlist-item p.album-artist { font-size: 0.75em; }
    .playlist-item span.album-release-type { font-size: 0.7em; }

    .detail-header { padding: 10px; }
    #detail-cover { width: clamp(120px, 48vw, 160px); }
    #detail-title { font-size: 1.4em; }

    /* プレイヤー/ナビの高さ・位置は 768px の設定を継承 */
    .main-content {
         /* padding-bottom も 768px の計算式を継承 */
    }

    .control-button { margin: 0 2px; padding: 6px; font-size: 1.1em;}
    .control-button .fa-play-circle, .control-button .fa-pause-circle { font-size: 2.2em; }
    .player-controls-main { gap: 8px; }

    .sidebar ul { /* justify-content: space-around; 継承 */ }
    .sidebar li a { padding: 2px 4px; /* さらにパディング調整 */ color: var(--text-sidebar); }
    .sidebar li a i { font-size: 1.2em; /* さらにアイコン小さく */ margin-bottom: 1px; }
    .sidebar li a span { font-size: 0.7em; /* さらにテキスト小さく */ line-height: 1.1; }
    .sidebar li a.active { color: var(--text-sidebar-active); }

    .header-search-bar button { font-size: 1.1em; }
    .mobile-logo { max-height: 33px; }
    .main-header { min-height: 50px; }
     /* Detail view button size for very small screens */
    .lyrics-button, .download-button { font-size: 1.1em; padding: 4px; }
    #detail-track-list th.col-track-lyrics, #detail-track-list td.track-lyrics,
    #detail-track-list th.col-track-download, #detail-track-list td.track-download {
        width: 40px; /* さらにボタン列を狭く */
    }
}