@charset "UTF-8";

/* =========================================
   Variables & Base Settings
   ========================================= */
:root {
    --bg-color: #191919;
    --text-color: #fff; /* 基本テキスト色（白） */
    --card-bg: #ffffff;
    --text-dark: #111;  /* カード内の黒文字 */
    --accent-color: #3f53ed;
    --header-bg: #191919;
    --header-bg-scrolled: rgba(25, 25, 25, 0.80);
    --hover-bg: rgba(63, 83, 237, 0.05);
    
    /* レイアウト設定 */
    --header-height-base: 110px;
    --header-height-mobile: 100px;
}
/* #preAdd{
    text-decoration: none;
    color: rgba(21, 52, 209, 1);
    font-style: italic;
    /* background-color: rgba(21, 52, 209, 0.1); */
    /* padding: 2px 4px;
    border-radius:12px;
}
#preAdd:hover{
    text-decoration: underline;
}  */ 

#song-credit{
    margin-left: 10px;
}
.credit-label {
    font-size: 0.9em; /* 少し小さく */
    color: #191919;      /* グレーにして控えめに */
    font-weight: normal;
    margin-right: 2px;
}
/* シンプルなReset */
*, *::before, *::after {
    box-sizing: border-box;
}
body::before {
    content: "";
    position: fixed; /* スクロールしても背景は固定する（パララックス効果） */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* 画面の高さ一杯に */
    
    /* 画像の指定*/
    background-image: url('../images/chairs.jpg'); 
    
    /* 画像の表示設定 */
    background-size: cover;      /* 画面全体を覆うように拡大縮小 */
    background-position: center; /* 中央合わせ */
    background-repeat: no-repeat;
    
    /* 【ここが重要】画像の薄さ（透明度） */
    opacity: 0.4;  /* 0.0(透明) 〜 1.0(不透明)。0.1〜0.2くらいがおすすめ */
    
    z-index: -1; /* 全てのコンテンツの「後ろ」に配置 */
    pointer-events: none; /* 背景がクリック操作の邪魔をしないように */
}


.sidebar-content h2,
.main-content h2 {/* 曲名以外のh2を微かにグラデーションに。 */
    background: linear-gradient(0deg, rgb(140,140,140) 0%,  rgb(0,0,0) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}
.section-for-pages .section h2{
    background: linear-gradient(0deg, rgb(140,140,140) 0%,  rgb(0,0,0) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

body {
    /* フォントフォールバックの追加: 特定のOSに依存しないように */
    /* font-family: "Hiragino Kaku Gothic ProN";  */
    font-family: "Noto Sans JP", Calibri, "Hiragino Mincho ProN", serif;
    max-width: 1400px;
    margin: 0 auto;
    padding-top: var(--header-height-base);
    line-height: 1.3;
    font-size: 17px;
    background-color: var(--bg-color);
    color: var(--text-dark); /* デフォルトは黒（カード内用） */
}

/* 視覚的に隠すがスクリーンリーダーには読ませるクラス (H1用) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom; /* 画像下の余白除去 */
}

h1, h2, h3, p {
    margin-top: 0;
}

/* =========================================
   Header Styles
   ========================================= */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    background-color: var(--header-bg);
    transition: background-color 0.5s ease-in-out, padding 0.5s ease-in-out;
    padding-top: 20px;
    padding-bottom: 10px;
    display: block;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1500px;
    margin: 0 auto;
    padding: 10px 20px;
    transition: padding 0.5s ease-in-out;
}

.header-logo {
    width: 300px;
    margin-left: 50px;
    max-width: 40vw;
    height: auto;
}

/* スクロール時のスタイル (.scrolled-header) */
.scrolled-header {
    background-color: var(--header-bg-scrolled);
}

.scrolled-header .header-content {
    padding: 0px 20px; /* 横パディングは維持 */
}

.scrolled-header .header-logo {
    max-width: 150px;
}

.scrolled-header .social-icons {
    font-size: 20px;
}

/* =========================================
   Social Icons & Links
   ========================================= */
.social-icons {
    display: flex;
    padding-top: 20px;
    margin-right: 35px;
    gap: 15px;
    font-size: 28px;
}

.social-icons a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}

.social-icons a:hover {
    color: #ccc;
}

.links a, .streamingLinks a {
    color: inherit;
    text-decoration: none;
}

.links a:hover {
    text-decoration: underline;
}

/* =========================================
   Common Components (Cards, Sections)
   ========================================= */
.card, .news-card, .mv-card, .disco-card {
    background: var(--card-bg);
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.section-head{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}
.detail-btn{
    position: relative;
    border: 1px solid #f0f0f0; 
    border-radius: 12px;
    padding: 2px 10px;
    margin-bottom: 10px;
    margin-right: 5px;
    font-size: 0.9rem;
    text-decoration: none;
    color: #666;
    cursor: pointer;        /* マウスを乗せたときに指マークにする */
    transition: background-color 0.2s;
}

.detail-btn:hover { 

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: var(--hover-bg);
    position: relative;
    top: -1px;
    transition: top 0.2s ease, background-color 0.2s;
}


.news-card{
        width: 100%;
        max-width: 450px; /* カード自体の幅制限 */
        position: relative;
}

.news-card .date {
    color: #444;
    font-weight: bold;
    margin-bottom: 4px;
    margin-left: -10px;
}
.news-card p {
    margin: 0;       /* デフォルトの余白を消す */
}

/* 日付の右にnewバッジ */
/* .new-badge {
    color: var(--accent-color); 
    border: 1px solid var(--accent-color);
    background-color: rgba(255, 255, 255, 0.3);
    font-size: 0.7em;
    font-weight: bold;
    padding: 0px 5px;
    border-radius: 50px;
    margin-left: 5px;
    vertical-align: 2px;
} */

 /* newバッジを左上に固定 */
.new-badge {
    position: absolute; 
    top: 0;
    left: 0;
    
    /* デザイン装飾 */
    background-color: rgba(29, 123, 245, 0.586); 
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.6rem;
    /* font-weight: bold; */
    letter-spacing: 0.05em;
    padding: 2px 6px 1px 6px;
    
    
    border-top-left-radius: 12px;    
    border-bottom-right-radius: 12px; 
    /* border-bottom-left-radius: 12px;  */
    z-index: 10;
}

.news-card-flex{
    display: flex;
    justify-content: space-evenly;
    gap: 15px;
}

/* Hover Effects for clickable cards 
.mv-card:hover, .disco-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    background-color: var(--hover-bg);
    position: relative;
    top: -3px;
    transition: top 0.2s ease, background-color 0.2s;
}*/

.section {
    margin: 1.5rem 0;
    padding: 0 2rem 1rem 2rem;
    background-color: #fff;
    border-radius: 10px; /* 角丸はほぼ無くす */

    /* 内側の線はあえて消すか、非常に薄く */
    border: 1px solid #f0f0f0; 
    
    /* 外側の線を少し離して配置 */
    outline: 0px solid #aaa; /* 少し濃いグレー */
    outline-offset: 8px; /* 遠くに離す */
    
    /* 浮遊感のある影を少し足す */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.section h2 {
    font-size: 2rem; /* 40px相当 */
    margin-top: 15px;
    margin-bottom: 10px;
}

.section h3 {
    margin-left: 15px;
    margin-top: 4px;
    font-size: 1.2rem;
}

/* 折り返し制御 */
.section h2, .section h3 {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.section p {
    line-height: 1.3;
    margin: 4px 0;
}

/* =========================================
   Layout & Grid
   ========================================= */
.layout {
    display: grid;
    /* モバイルファースト：デフォルトは1列、PCはmedia queryで上書き */
    gap: 1.5rem;
    padding: 0 1.5rem;
}

/* =========================================
   Specific Component Styles
   ========================================= */
/* Videos */
.embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: 0 10px;
}
.embed-container iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

.mv-card h3{
    margin-bottom: 10px;
}
.videoCards {
    display: flex;
    flex-direction: column; /* デフォルトは縦並び */
    gap: 15px;
}

/* Discography Layout (Updated) */
.disco-flex {
    display: flex;
    gap: 10px;
}

/* カード内部：上（ヘッダー） */
.disco-header {
    margin-bottom: 15px;
    border-bottom: 1px solid #eee; /* タイトル下に薄い線 */
    padding-bottom: 5px;
}
.disco-header .release-date {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 2px;
    margin-left: 0; /* 必要に応じて調整 */
}
.disco-header h3 {
    margin: 0;
    font-size: 1.3rem;
}

/* カード内部：下（画像＋詳細） */
.disco-body {
    display: flex;
    flex-direction: row; /* 横並び */
    gap: 20px;
    align-items: flex-start;
}

/* 左：画像エリア */
.disco-img {
    flex: 0 0 150px; /* 幅を150pxに固定（スマホでも小さすぎないように） */
}
.disco-img img {
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}
.disco-img img:hover {
    transform: translateY(-2px);
}

/* 右：詳細エリア（収録曲＋リンク） */
.disco-detail {
    flex: 1; /* 残りの幅を使う */
    display: flex;
    flex-direction: column;
    gap: 0px; /* 収録曲とリンクの間隔 */
}
#torchTuneCore{
    display: flex;
    justify-self: center;
    size-adjust: 1rem;
    /* transform: scale(0.7); */
}
/* 収録曲リスト */
.tracklist span {
    font-weight: bold;
    font-size: 0.95rem;
    display: block;
    margin-bottom: 5px;
}
.tracklist ol {
    margin: 0;
    padding-left: 25px;
}
.tracklist li {
    margin-bottom: 2px;
}

/* ストリーミングリンク（最新スタイル） */
.streamingLinks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 5px; 
    padding-bottom: 2px;

/* リンク内の画像設定 */
.streamingLinks img {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
}


/* ホバー時の動き */
.streamingLinks a:hover img {
    transform: translateY(-1px);
    /* 影を濃くする */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s
}

.applemusic img { width: 80px; } /*spotify imgの方が元々大きいので、appleの方を5pxだけ大きくする*/
.spotify img { width: 75px; }

/* スマホ用の調整（画面幅が狭すぎる場合） */
@media (max-width: 400px) {
    /* 1. 全体を縦並びにして、中央に配置 */
    .disco-body {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    /* 2. 画像の幅を200pxに固定 */
    .disco-img {
        flex: 0 0 auto;
        width: 200px;
    }

    /* 3. 詳細エリアの幅も画像と同じ「200px」にする */
    .disco-detail {
        width: 200px; /* ここがポイントです */
        /* 幅を揃えた上で、中身は左寄せにする */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* 4. 収録曲リストの調整 */
    .tracklist {
        width: 100%;
        text-align: left; /* 左揃え */
    }

    /* タイトル「【収録曲】」 */
    .tracklist span {
        display: block;
        text-align: left;
        margin-bottom: 5px;
        /* 画像の左端ギリギリに合わせたい場合は margin-left を微調整 */
    }

    /* リスト部分 */
    .tracklist ol {
        text-align: left;
        margin: 0;
        /* 数字のために左に余白が必要ですが、
           「画像の左端」に「数字」を合わせたい場合は padding-left: 20px 程度推奨
           「画像の左端」に「文字」を合わせたい場合は padding-left: 0; list-style-position: inside; 推奨
        */
        padding-left: 20px; 
    }
    
    .tracklist li {
        /* display: flexなどは削除し、標準に戻す */
        display: list-item;
    }

    /* ストリーミングリンクも左端から始める */
    .streamingLinks {
        justify-content: flex-start;
        /* 必要であれば左のマージンを微調整 */
        margin-left: -5px; 
    }
}



/* Profile & Links Sidebar */
.profileName {
    font-size: 20px;
    font-style: oblique;
    margin-bottom: 5px;
}
.profile-img {
    display: flex;
    justify-content: center;
    /* margin-left: 10px; */
    margin-bottom: 10px;
}
.profile-img img {
    width: 250px;
}
.profile h3{
    margin-top:5px;
    margin-bottom: 0px;
}
.memberList{
    border-top:1px solid #eee;
    margin-top: 10px;
}

.profile p, .members p {
    margin-left: 25px;
}
.section .members p {
    margin-left: 30px;
}
.links .card{
    padding-right:0;
}
.link-item {
    line-height: 1.8;
    font-size: 18px;
}
.link-item a {
    display: inline-block; /* パディングを有効にするため */
    padding-right: 5px;
    transition: padding 0.3s, background-color 0.3s ease-in-out;
}
.link-item a:hover {
    padding-left: 7px;
    background-color: rgba(18, 21, 222, 0.1);
    border-radius: 5px;
}
.icon-tunecore, .icon-rudolf {
    width: 18px; height: 18px;
    position: relative;
    bottom: 5px;
    margin-right: 2px;
}

.icon-rudolf { width: 17px; height: 17px; margin-right: 0px; margin-left: 1px;}

/* Song List Specific */
.ListOfSongs {
    padding-left: 0;
    list-style: none;
}
ul.ListOfSongs{
    margin: 0px;
 }
.ListOfSongs li {
    border-radius: 5px;
    margin: 5px;
    padding-right: 5px;
    width: fit-content;
    transition: padding 0.3s, background-color 0.3s ease-in-out;
}
.ListOfSongs li:hover {
    background-color: rgba(18, 21, 222, 0.1);
    padding-left: 7px;
    text-decoration: underline;
}
.blueHazeSongs a, .torchSongs a {
    text-decoration: none;
    color: inherit;
    padding-left: 21px;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: 0 50%;
}
.blueHazeSongs a { background-image: url('../images/bluehaze_photo.png'); }
.torchSongs a { background-image: url('../images/Torch_photo_20260108.jpg'); }

.badge-eng {
    font-size: 0.8em;
    font-style: italic;
    color: #655151;
    margin-left: 5px;
    background-color: rgba(18, 21, 222, 0.1);;
    border-radius: 5px;
    padding: 0px 4px 0px 2px;
}

/* Footer */
#footer {
    color: white;
    text-align: center;
    padding: 10px 0 20px 0;
}
#footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#footer span{
        /* background-color: rgba(1, 1, 1, 0.7); */
        padding: 2px 8px;
        border-radius: 5px;;
}
/* =========================================
   News Page Styles
   ========================================= */
body:has(.NewsPageBody){

    padding-right:20px;
}



.NewsPageBody {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* gap: 20px; */
    margin: 1.5rem 5rem;
    margin-left: 10px;
    margin-right:10px;
    padding: 0 2rem 1rem 2rem;
    background-color: #fff;
    border-radius: 10px; /* 角丸はほぼ無くす */
    /* 内側の線はあえて消すか、非常に薄く */ 
    width:100%
}
.NewsPageBody .section{
    margin: 1.5rem 0;
    padding: 0 2rem 1rem 2rem;
    background-color: #fff;
    border-radius: 10px; /* 角丸はほぼ無くす */
    border: none;
    outline: none;
    box-shadow: none;
    width: 100%;
}

.NewsPageBody .section .news-card{
    width: 100%;
    max-width: none;
}

/* =========================================
   News Detail Page Styles & Link Adjustments
   ========================================= */

/* 1. News List: リンク化したカードのスタイル */
.news-card-link {
    text-decoration: none; /* 下線を消す */
    color: inherit;        /* 文字色を継承（青くしない） */
    display: block;        /* ブロック要素として扱う */
    width: 100%;           /* 幅を確保 */
    transition: transform 0.2s; /* 動きをつける */
}

/* リンクホバー時に中のカードを動かす */
.news-card-link:hover .news-card {
    background-color: var(--hover-bg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px); /* 少し浮き上がる */
    transition: 0.3s
}


/* 2. News Detail Page Layout (Wrapper) */
/* 基本は他のページと同じスタイルを適用 */

.NewsDetailPageBody {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 1.5rem 5rem;
    margin-left: 10px;
    margin-right: 10px;
    padding: 0 2rem 1rem 2rem;
    background-color: #fff;
    border-radius: 10px;
    width: 100%;
}

#NewsInNewsPage h2 {/* h2を微かにグラデーションに。 */
    background: linear-gradient(0deg, rgb(140,140,140) 0%,  rgb(0,0,0) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-size: 2rem; /* 40px相当 */
    margin-top: 15px;
    margin-bottom: 10px;
    margin-left: 10px;
    align-self: center;
}

/* 内部コンテンツの装飾 */
.section.news-detail {
    width: 95%;
    padding-top: 10px;
    margin: 1.5rem 0;
    margin-top:0px;
    max-width: 800px; /* 記事が読みやすいように幅制限 */
    align-self: center;
}

.article-header {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.article-header .date {
    color: #666;
    margin-bottom: 5px;
    font-weight: bold;
}

.section-for-pages .section .article-header h2 { /*個別ニュースページのタイトルのグラデーションを取り消し。*/
    font-size: 1.8rem;
    margin-top: 5px;
    line-height: 1.4;
    color: black;
    background: none;
    /* 重要: クリップ設定も初期値に戻す */
    -webkit-background-clip: border-box;
    background-clip: border-box;
    /* color: transparent; */
    /* display: inline-block; */
}


.article-content p {
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}
.article-content .disco-card{
    justify-self: center;    
}

/* ナビゲーションリンク */
.navigation-links {
    margin-top: 50px;
    border-top: 1px solid #eee;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.backToNews {
    color: var(--text-dark);
    text-decoration: none;
    /* font-weight: bold; */
    border: 1px solid #ddd;
    padding: 4px 10px;
    border-radius: 20px;
    transition: background-color 0.2s;
}
.backToNews:hover {
    background-color: #f0f0f0;
}
 .news-detail .backToHome{
    margin-top:20px;
}

/* =========================================
   Videos Page Styles
   ========================================= */
body:has(.VideosPageBody){
    padding-right:20px;
}

.VideosPageBody {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* gap: 20px; */
    margin: 1.5rem 5rem;
    margin-left: 10px;
    margin-right:10px;
    padding: 0 2rem 1rem 2rem;
    background-color: #fff;
    border-radius: 10px; /* 角丸はほぼ無くす */
    /* 内側の線はあえて消すか、非常に薄く */ 
    width:100%
}
.VideosPageBody .section{
    margin: 1.5rem 0;
    padding: 0 2rem 1rem 2rem;
    background-color: #fff;
    border-radius: 10px; /* 角丸はほぼ無くす */
    border: none;
    outline: none;
    box-shadow: none;
    width: 100%;
}
.VideosPageBody .videoCards{
    flex-direction: column;
}
.VideosPageBody .section .mv-card{
    width: 100%;
    max-width: none;
    gap:20px;
    display: flex;
    flex-direction: row;
    /* justify-content: */
}
.title-and-video{
    min-width:60%;
}
.video-info-block{
    justify-content: center;
    align-content: bottom;
    display: flex;
}
.video-info-detail{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-content: center;
    margin-bottom: 20px;
}
.video-info-detail p{
    margin:2px;
    padding-right:7px;
    font-size:1rem;
    /* font-family: "Noto Serif JP" , Calibri; */
}
/* =========================================
   Individual Pages Common Styles
   (News, Videos, Disco, Lyrics, Profile)
   ========================================= */

/* 各ページ共通：bodyのパディング調整 */
body:has(.NewsPageBody),
body:has(.VideosPageBody),
body:has(.DiscoPageBody),
body:has(.LyricsListPageBody),
body:has(.ProfilePageBody) {
    padding-right: 20px;
}

body:has(.section-for-pages){
    padding-right: 34px;
    padding-left: 13px;
    /* margin-right:10px; */
    /* margin-left:-20px; */
}

/* 各ページ共通：ラッパーのスタイル */
.NewsPageBody,
.VideosPageBody,
.DiscoPageBody,
.LyricsListPageBody,
.ProfilePageBody {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 1.5rem 5rem;
    margin-left: 10px;
    margin-right: 10px;
    padding: 0 2rem 1rem 2rem;
    background-color: #fff;
    border-radius: 10px;
    width: 100%;
}

/* 各ページ共通：内部sectionのスタイル */
.NewsPageBody .section,
.VideosPageBody .section,
.DiscoPageBody .section,
.LyricsListPageBody .section,
.ProfilePageBody .section {
    margin: 0rem 0;
    padding: 0 2rem 1rem 2rem;
    background-color: #fff;
    border-radius: 10px;
    border: none;
    outline: none;
    box-shadow: none;
    width: 100%;
}

/* =========================================
   Specific Page Adjustments
   ========================================= */

/* 個別ページではPCでもセンター寄せや折り返しを綺麗に見せる */
.DiscoPageBody .disco-flex {
    justify-content: left; /* カードが少ない場合に左寄せ */
    padding-left:20px;
    gap:20px;
}


/* Profile Page: プロフィールカードの幅調整 */
.ProfilePageBody .card {
    max-width: 600px; /* あまり広がりすぎないように制限 */
    margin-left: auto;
    margin-right: auto;
}
/* 個別ページでのプロフィール画像 */
.ProfilePageBody .profile-img img {
    width: 300px; /* 少し大きめに表示してもOK */
}

.profile-info p{
    line-height: 1.5;
}

.LyricsListPageBody .songList a{
    text-decoration: none;
}

.songList h2 {/* h2を微かにグラデーションに。 */
    background: linear-gradient(0deg, rgb(140,140,140) 0%,  rgb(0,0,0) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-size: 2rem; /* 40px相当 */
    margin-top: 15px;
    margin-bottom: 10px;
    /* margin-left: auto; */
    align-self: center;
}

/* Lyrics List Page: リストの表示調整 */
.LyricsListPageBody .ListOfSongs {
    display: flex;
    flex-direction: column;
    align-items: center; /* リストを中央寄せ */
}
.LyricsListPageBody .ListOfSongs li {
    font-size: 1.2rem; /* 一覧ページなので文字を少し大きく */
    margin: 7px 0;
}




/* =========================================
   Lyric Page Styles
   ========================================= */
.lyricPageBody {
    display: flex;
    flex-direction: row;
    justify-content: left;
    gap: 20px;
}
.sidebar-content-for-lyrics {
    width: 400px;
    margin-right: 20px;
}
.lyricSection {
    margin-left: 40px;
    width: 800px;
    max-width: 800px;
    padding-top: 10px;
}

/* 歌詞ページ用ジャケットアイコン（全曲共通） */
.song-jacket-icon {
    width: 40px; 
    height: 40px;
    margin-right: 4px;
    position: relative; 
    bottom: 0px;
    border-radius: 4px; /* お好みで */
}
.titleLine {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.icon-songs-bluehaze-lyrics {
    width: 40px; height: 40px;
    margin-right: 4px;
    position: relative; bottom: 0px;
}
.lyrics {
    white-space: pre-line;
    line-height: 1.8;
      /* --- 追加：文字選択を禁止 --- */
    user-select: none;         /* 標準 */
    -webkit-user-select: none; /* Safari/Chrome用 */
    -moz-user-select: none;    /* Firefox用 */
    -ms-user-select: none;     /* IE/Edge用 */
    
    /* カーソルも「テキスト選択」の形（I）ではなく「矢印」にする */
    cursor: default;
}
.toggle-btn {
    background: #fbfbfb;
    border: 0.2px solid #aaa;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
}
.toggle-btn:hover { background: #f6f6f6; }

#lyrics-en{ margin-top: -7px;}

.lyricsAndTranslation {
    display: flex;
    flex-direction: row;
    font-family: "Noto Serif JP";
}
.translation {
    font-family: "Noto Sans JP";
    position: relative;
    padding: 10px;
    border-radius: 10px;
    background: rgb(255, 255, 255);
    margin-bottom: 15px;
    margin-left: 50px;
    margin-top: -27px;
    display: block;
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); */ 
    scroll-margin-top: 45px;
}

#translator-credit{
    font-style: italic;
    font-size: 0.9em; /* 少し小さく */
    color: #191919;      /* グレーにして控えめに */
    font-weight: normal;
    margin-right: 2px;
    font-family: "Noto Sans JP"
}

.hidden { display: none; }
.backToHome {
    display: block;           /* blockに変更 */
    width: fit-content;       /* 幅を文字に合わせる */
    margin: 50px auto 0;      /* 中央寄せ */
    color: #333;
    /* text-decoration: none; */
}

/* =========================================
   Media Queries
   ========================================= */

/* PC (Large Screens) */
@media (min-width: 1080px) {
    .layout {
        display: grid;
        grid-template-columns: 1fr 350px; /* メイン(可変) + サイド(固定) */
        gap: 1.5rem;
        align-items: start;
    }

    /* 【重要】Gridの子要素が最小幅を維持してはみ出すのを防ぐおまじない */
    .main-content {
        min-width: 0; 
        grid-column: 1 / 2;
    }

    .sidebar-content { 
        grid-column: 2 / 3;
        /* display: flex;
        flex-direction: column;
        gap: 0.5rem; */
        /* position: sticky; */
        top: 100px; /* ヘッダー分考慮 */
    }
    
    /* Discographyの調整 (PC版 Update) */
    .disco-flex {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    
    .disco-card { 
        width: 100%;
        max-width: 430px; /* カード自体の幅制限 */
        flex: 1 1 300px;
    }

    /* PCでは画像の固定幅を少し大きくしてもOK */
    .disco-img {
        flex: 0 0 160px;
    }
    
    /* Video Cardsの調整 */
    .videoCards { 
        display: flex;
        flex-direction: row; 
        flex-wrap: wrap; /* 【修正】画面が狭いときは折り返す */
        gap: 15px;
    }
    
    .mv-card { 
        min-width: 0; /* 固定のmin-width 500pxを削除 */
        flex: 1 1 400px; /* 【修正】400px以下になりそうなら折り返す */
    }

}

/* Tablet / Laptop (Medium Screens) */
@media (max-width: 1079px) {
    body { padding-top: var(--header-height-mobile); }
    
    .layout {
        display: block; /* 1列 */
        padding: 0 1.5rem;
    }
    
    .section { margin: 1.5rem 0; }

    .disco-flex{
        justify-content: space-evenly; 
    }
    .DiscoPageBody .disco-flex {
    justify-content: space-evenly; 
    padding-left:10px;
    gap:10px;
    }

    .profile-img {
    justify-content: left;
    margin-left: 10px;
    }

    /* Header Adjustments */
    .header-logo {
        width: 280px;
        max-width: 80vw;
        display: block;
        margin: 0 auto 0 10px;
    }
    .logo-link {
    position: relative; /* z-indexを効かせるために必要 */
    z-index: 2000;      /* メニュー(1500)より手前、ボタン(2000)と同じ高さにする */
    }
    .header-content {
        padding-top: 15px;
    }
    .social-icons {
        margin-right: 0;
    }
    .social-icons i { font-size: 24px; }
    
    /* Scrolled Header Adjustments */
    .scrolled-header .header-content {
        padding: 0 25px;
    }
    .scrolled-header .header-logo {
        margin-top: 0;
        max-width: 150px;
    }
    .scrolled-header .social-icons {
        margin-top: 10px;
        margin-right: 10px;
    }
    .scrolled-header .social-icons i { font-size: 18px; }

    /* Layout Adjustments */
    .streamingLinks { flex-direction: row; }
    .streamingLinks img { margin-top: 0px; }
    .applemusic img { width: 55px; position:relative; bottom: 0px;}
    .spotify img { width: 55px; }

    /* Lyric Page */
    .lyricPageBody {
        flex-direction: column;
        justify-content: center;
        gap:10px;
        /* margin-right: 20px; */
    }
    .lyricSection, .sidebar-content-for-lyrics {
        margin-left: 20px;
        margin-right: 20px;
        width: auto;
    }
        /* 1. Back to Home の上の余白を削る（50px → 25px） */
    .backToHome {
        margin-top: 25px;
        color: #333;
        font-size: 16px;
        /* transform: translatex(-8px); */
    }

    /* 2. 歌詞セクションと下のセクションの隙間を詰める */
    .lyricSection {
        margin-bottom: 10px;
        margin-left: 20px;
        padding-left: 32px;
        padding-right: 16px;
        margin-right: 20px;
        
        width: auto; 
        max-width: none;
    }

    /* 3. 歌詞ページ専用のサイドバー（Songlist）の上の余白を詰める */
    .sidebar-content-for-lyrics .section {
        margin-top: 0px; 
    }

    .titleLine { gap: 0.2rem; }
    .titleLine h2, .titleLine p { margin-bottom: 0; }
}

/* Mobile (Small Screens) */
@media (max-width: 768px) {

    .section{
        padding-right: 16px;
        padding-left: 16px;
    }

    
    .section-for-pages{
        padding-right: 0px;
        padding-left: 0px;
    }


    .news-card{
        max-width: 100%;
    }
    .news-card-flex{
    flex-direction: column;
    gap: 10px;
   
    }
    .mv-card:has(.NewsPageBody){
    flex-direction:column;
} 

    .disco-flex {
        display: flex;
        flex-direction: column;
        /* flex-wrap: wrap; */
        justify-content: space-evenly;
        gap: 10px;
    }
    .lyricsAndTranslation {
        display: block;
        flex-direction: column;
    }
    .translation {
        padding: 7px 0;
        padding-left:10px;
        transform: translateX(-10px);
        margin: 20px 0 0 0;
    }
}

/* Extra Small Mobile */
@media (max-width: 590px) {
    body { padding-top: 80px; }
    
    .titleLine {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .header-content { flex-direction: column; }
    header { padding: 0; }
    
    .header-logo { width: 220px; }

    .profile-img {
    justify-content: center;
    margin-left: 0px;
    }
    .social-icons {
        gap: 6px;
        padding: 0;
        margin: 0px 0 0 10px;
    }
    .social-icons i { font-size: 20px; }
    
    .scrolled-header .header-content {
        flex-direction: row;
        padding: 0 15px;
    }
    .scrolled-header .social-icons i { font-size: 15px; }

    .scrolled-header .header-right-container{
        margin-right:30px
    }
    
    .streamingLinks {
        flex-direction: row;
        gap:0px;
    }
    .streamingLinks img { margin-left: 10px; }
    
    .lyricSection {
        padding-left: 16px;
        padding-right: 16px;

    }
    .VideosPageBody .section{
    padding-right: 16px;
    padding-left: 16px;
    }
    .VideosPageBody .section .mv-card{
        flex-direction: column;
        justify-content: flex-start;
        margin-top: 0px;
        padding-left: 5px;
        padding-right: 5px;

    }

    .video-info-block {
        width: 100%;
        justify-content: flex-start; /* 左寄せ */
        margin-left: 15px;
    }
    
    .video-info-detail {
        margin-bottom: 0; 
    }
    /* =========================================
   Mobile Adjustments for New Pages
   ========================================= */
    /* 各ページのラッパーのマージン調整 */
    .DiscoPageBody,
    .LyricsListPageBody,
    .ProfilePageBody {
        margin: 1.5rem 0.5rem; /* スマホでは横余白を狭く */
        padding: 0 0.5rem 1rem 0.5rem;
    }
    
    .DiscoPageBody .section,
    .LyricsListPageBody .section,
    .ProfilePageBody .section {
        padding: 0 1rem;
        padding-left: 5px;
        padding-right: 5px;
    }
    .NewsPageBody .section{
        padding-left:14px;
        padding-right:14px;

    }
    
    .NewsDetailPageBody {
        margin: 1.5rem 0.5rem;
        padding: 0 0.5rem 1rem 0.5rem;
    }
    .article-header h2 {
        font-size: 1.4rem;
    }
    .DiscoPageBody .disco-flex {
    padding-left:0px;
    }
 /* 1. ハンバーガーボタンを「画面固定」から「ヘッダー内固定」に変更 */
    .hamburger-btn {
        position: absolute; /* headerがfixedなので、absoluteにするとヘッダー内部で固定されます */
        top: 25px;          /* 初期の高さ（お好みで微調整） */
        right: 15px;        /* 右の余白 */
    }

    /* 2. スクロール時(.scrolled-header)のボタン位置を調整 */
    .scrolled-header .hamburger-btn {
        top: 8px; /* ヘッダーが薄くなる分、少し上に移動させる */
        /* rightは継承されるので書かなくてOK */
        
    }


}



/* =========================================
   Hamburger Menu & Mobile Nav
   ========================================= */

/* デフォルトではハンバーガーボタンとメニューは隠す（PC表示） */
.hamburger-btn, .mobile-menu {
    display: none;
}

/* PCのみ表示するクラスを作成 */
.pc-only {
    display: block;
}

/* スマホ・タブレット時 (1079px以下) の設定 */
@media (max-width: 1079px) {

    /* 既存ヘッダーのSNSアイコンを隠す */
    .pc-only {
        display: none;
    }

    /* --- ハンバーガーボタンのスタイル --- */
    .hamburger-btn {
        display: block;
        position: fixed; /* スクロールしても右上に固定 */
        top: 25px;
        right: 20px;
        width: 30px;
        height: 24px;
        z-index: 2000; /* メニューより手前に */
        cursor: pointer;
    }

    /* 3本線 */
    .hamburger-btn span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #fff;
        transition: all 0.3s ease-in-out;
    }

    .hamburger-btn span:nth-of-type(1) { top: 0; }
    .hamburger-btn span:nth-of-type(2) { top: 11px; }
    .hamburger-btn span:nth-of-type(3) { bottom: 0; }

    /* --- アクティブ（開いた）時のボタンの変化（×印にする） --- */
    .hamburger-btn.active span:nth-of-type(1) {
        transform: translateY(11px) rotate(45deg);
    }
    .hamburger-btn.active span:nth-of-type(2) {
        opacity: 0;
    }
    .hamburger-btn.active span:nth-of-type(3) {
        transform: translateY(-11px) rotate(-45deg);
    }


    /* --- モバイルメニュー本体（オーバーレイ） --- */
    .mobile-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        
        /* 背景色：detohmaのテーマカラーに合わせて黒系、少し透過 */
        background-color: rgba(25, 25, 25, 0.95);
        backdrop-filter: blur(5px); /* すりガラス効果 */
        
        z-index: 1500;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    /* アクティブ時の表示 */
    .mobile-menu.active {
        opacity: 1;
        visibility: visible;
    }


    /* --- リンク部分（2列グリッドレイアウト） --- */
    .mobile-menu-links {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2列 */
        column-gap: 20px;
        row-gap: 40px;
        width: 100%;
        max-width: 500px;
        padding: 0 20px;
        margin-bottom: 60px; /* SNSアイコンとの余白 */
    }

    .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #fff;
        transition: opacity 0.3s;
    }

    .menu-item:hover {
        opacity: 0.7;
    }

    /* 英語メニュー（大きく） */
    .menu-item .en {
        font-family: "DM Sans", sans-serif;
        font-size: 1.4rem;
        letter-spacing: 0.05em;
        font-weight: 500;
    }

    /* 日本語メニュー（小さく薄く） */
    .menu-item .ja {
        font-size: 0.8rem;
        color: #888;
        margin-top: 5px;
        font-family: "Noto Sans JP", sans-serif;
    }


    /* --- SNSアイコン（下部） --- */
    .mobile-menu-socials {
        display: flex;
        gap: 20px;
        justify-content: center;
    }

    .mobile-menu-socials a {
        color: #fff;
        font-size: 24px;
        text-decoration: none;
        transition: color 0.3s;
    }
    
    .mobile-menu-socials a:hover {
        color: #ccc;
    }
    
    /* bodyがスクロールしないようにするクラス */
    body.menu-open {
        overflow: hidden;
    }
}