/* 1. ベースの固定 */
html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    overflow: auto; /* ★ここで全体を固定 */
}

/* 2. コンテンツエリアをここでスクロールさせる */
body {
    font-family: 'Courier New', 'MS Gothic', sans-serif;
    color: #e2e8f0;
    position: relative;
}

/* 3. 背景レイヤー (完全固定) */
#bg-fixed-layer {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -10;
    background: linear-gradient(rgba(8, 10, 13, 0.4), rgba(5, 6, 8, 0.6)), url('images/S__228139015.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 4. コンテンツ全体のスクロール設定 */
     .page-wrapper {
    width: 100%; 
    height: auto; /* ★ 100vh から auto へ変更 */
    overflow: visible; /* ★ auto から visible へ変更 */
    position: relative;
    z-index: 10;
}
        /* 🌊 背景の「音の波形」 */
        #waveform-layer {
            position: fixed;
            bottom: 0; left: 0; width: 100%; height: 150px;
            z-index: -1;
            opacity: 0.15;
            pointer-events: none;
            overflow: hidden;
        }
        .wave-svg {
            position: absolute;
            bottom: 0; width: 200%; height: 100%;
            fill: none; stroke: #38bdf8; stroke-width: 1.5;
        }
        .wave-1 { animation: wave-move 12s linear infinite; }
        .wave-2 { stroke: #22c55e; animation: wave-move 8s linear infinite; bottom: -10px; opacity: 0.7; }
        @keyframes wave-move {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* 📺 画面全体のリアルタイム・グリッチノイズ */
        @keyframes global-glitch {
            0%, 93%, 95%, 97%, 100% { transform: none; filter: none; }
            94% { 
                transform: skewX(2deg) scaleY(1.01); 
                filter: hue-rotate(90deg) contrast(1.3) saturate(1.5);
                box-shadow: inset 0 0 40px rgba(0,255,255,0.2);
            }
            94.5% { 
                transform: skewX(-2deg) translateX(-5px); 
                filter: hue-rotate(-90deg) brightness(1.2);
            }
            96% {
                transform: translateY(2px) scaleX(0.99);
                filter: contrast(1.8);
            }
        }

        /* ⏳ 起動シミュレーター */
        #loading-screen {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background-color: #000000; z-index: 99999; 
            font-family: monospace; overflow: hidden; opacity: 1;
            transition: opacity 0.4s ease;
        }
        #boot-text { color: #22c55e; font-size: 13px; line-height: 1.5; padding: 20px; white-space: pre-wrap; word-break: break-all; }
        #bug-text-container {
            display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-color: #110033; flex-direction: column; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box;
        }
        .glitch-error-msg {
            color: #ff2a5f; font-size: 24px; font-weight: bold; letter-spacing: 3px; text-align: center; line-height: 1.4;
            animation: glitch-shake 0.15s infinite; text-shadow: 2px 2px #00ffff, -2px -2px #ff00ff;
        }
        #bug-text-container::before {
            content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 255, 0, 0.06));
            z-index: 2; background-size: 100% 4px, 6px 100%;
        }
        @keyframes glitch-shake {
            0% { transform: translate(0, 0) skew(0deg); filter: hue-rotate(0deg) contrast(1); }
            10% { transform: translate(-5px, 3px) skew(-8deg); filter: contrast(1.5); }
            50% { transform: translate(-4px, 2px) skew(0deg); filter: contrast(2); }
            100% { transform: translate(0, 0) skew(0deg); filter: hue-rotate(0deg); }
        }

        /* 🗺️ ナビゲーションメニュー */
        .site-nav {
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            z-index: 10000; 
            text-align: center; 
            padding: 6px 0;
            background: rgba(8, 12, 20, 0.4); 
            backdrop-filter: blur(10px); 
            -webkit-backdrop-filter: blur(10px);
            border: none !important;
            border-bottom: none !important; 
            opacity: 0; 
            visibility: hidden; 
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        .site-nav.active { opacity: 1; visibility: visible; }
        
        .nav-list { 
            list-style: none; padding: 0; margin: 0; 
            display: inline-flex; justify-content: center; gap: 10px; align-items: center;
            border: none !important;
        }
        
        .nav-item { 
            position: relative; 
            border: none !important;
        }
        
        /* 💡 リンク文字を「細め」＆「文字間隔広め」に調整してシャープに */
        .nav-link { 
            display: inline-block;
            color: #ffffff; 
            text-decoration: none; 
            font-size: 18px; 
            font-weight: normal; /* 太字を解除 */
            letter-spacing: 2px; /* 間隔を広げてスタイリッシュに */
            padding: 14px 18px; 
            cursor: pointer; 
            border: none !important;
            outline: none !important;
            transition: color 0.2s, text-shadow 0.2s; 
            -webkit-tap-highlight-color: transparent;
        }
        .nav-link:hover { color: #a3e635; text-shadow: 0 0 8px rgba(163, 230, 53, 0.6); }

        /* ☰ ドロップダウン */
        .dropdown-menu {
            position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
            background: rgba(4, 6, 10, 0.9); border: 1px solid rgba(255, 255, 255, 0.2);
            list-style: none; padding: 4px 0; margin: 0; width: 140px;
            display: flex; flex-direction: column; gap: 1px;
            opacity: 0; visibility: hidden; transition: all 0.25s ease;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
        }
        .dropdown-menu::before {
            content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
            border-width: 0 6px 6px 6px; border-style: solid; border-color: transparent transparent rgba(255, 255, 255, 0.2) transparent;
        }
        .nav-item:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
        
        /* ドロップダウン内のリンクも細字化 */
        .dropdown-link { 
            display: block; 
            color: #ffffff; 
            text-decoration: none; 
            font-size: 15px; 
            font-weight: normal; /* 太字を解除 */
            padding: 14px 16px; 
            text-align: center; 
            letter-spacing: 2px; /* 間隔を調整 */
            transition: all 0.2s; 
        }
        .dropdown-link:hover { background: rgba(255, 255, 255, 0.1); color: #a3e635; text-shadow: 0 0 4px rgba(163, 230, 53, 0.5); }

        /* 🌌 ファーストビュー */
        #main-visual {
            position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; z-index: 5;
        }
        .main-visual-content { transform: translateY(-20px); }
        .brand-title { font-size: 54px; font-weight: bold; letter-spacing: 10px; color: #e2e8f0; text-shadow: 0 0 25px rgba(0, 0, 0, 0.8), 0 0 10px rgba(56, 189, 248, 0.3); margin-bottom: 12px; }
        .brand-subtitle { font-size: 11px; letter-spacing: 4px; color: #38bdf8; font-weight: bold; text-shadow: 0 0 10px rgba(0, 0, 0, 0.9); }
        
        .cyber-down-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0.7; pointer-events: none; }
        .cyber-line { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.8)); }
        .cyber-arrow { font-size: 11px; color: #38bdf8; animation: cyber-glitch-blink 2.5s infinite; text-shadow: 0 0 4px rgba(56, 189, 248, 0.6); }
        @keyframes cyber-glitch-blink { 0%, 45%, 55%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(3px); filter: hue-rotate(90deg); } }

        /* 全体ラッパー */
        .page-wrapper { width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 20px 80px 20px; box-sizing: border-box; position: relative; z-index: 10; }
        .window-container { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; }

    .retro-window {
    background: rgba(20, 20, 25, 0.42); /* ←青みゼロ、黒寄りの透明ガラス */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    padding: 16px;
    box-shadow:
        inset 0 0 10px rgba(255,255,255,0.06), /* 内側の光（青なし） */
        0 6px 20px rgba(0,0,0,0.45); /* 影で存在感UP */
    width: 100%;
    max-width: 340px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    scroll-margin-top: 80px;
}

.retro-window:hover {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
        inset 0 0 12px rgba(255,255,255,0.10),
        0 10px 30px rgba(0,0,0,0.55);
    transform: translateY(-4px) scale(1.01);
}


.retro-window:hover {
    border-color: rgba(200, 230, 255, 0.35);
    box-shadow:
        inset 0 0 14px rgba(255,255,255,0.12),
        0 10px 30px rgba(0,0,0,0.55);
    transform: translateY(-4px) scale(1.01);
}


.retro-window:hover {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    transform: translateY(-4px) scale(1.01);
}


.retro-window:hover {
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    transform: translateY(-4px) scale(1.01);
}


        .retro-window:hover {
            transform: translateY(-4px) scale(1.01) !important; background: rgba(6, 9, 15, 0.9); border-color: rgba(56, 189, 248, 0.7);
            box-shadow: 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 15px 35px rgba(0, 0, 0, 0.9), 0 0 30px rgba(56, 189, 248, 0.25); z-index: 10;
        }
       .window-bar {
       background: rgba(56, 189, 248, 0.12);
    border-bottom: 1px solid rgba(56, 189, 248, 0.25);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;   /* ←ここがタイトルの大きさ */
    font-weight: 700;     /* ←太字にする */
    color: #38bdf8;
    letter-spacing: 1px;
}



        .window-close { cursor: pointer; font-size: 16px; font-weight: bold; color: #38bdf8; line-height: 1; padding: 4px 8px; }
        .window-close:hover { color: #ef4444 !important; }
        .window-content { padding: 16px; }
        .window-text-header { margin-top: 0; margin-bottom: 12px; font-size: 13px; color: #cbd5e1; font-weight: bold; text-align: center; letter-spacing: 1px; }

        /* 🔴 ポップアップウィンドウ表示用クラス */
        .window-popup-mode {
            display: none; opacity: 0; transform: scale(0.95);
            transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .window-popup-mode.open { display: block; opacity: 1; transform: scale(1); }

        /* 🟢 Profile ウィンドウ */
        .window-profile { max-width: 350px; }
        .window-profile .window-bar { background: rgba(244, 63, 94, 0.12); border-bottom: 1px solid rgba(244, 63, 94, 0.25); color: #f43f5e; }
        .window-profile .window-close { color: #f43f5e; }
        .window-profile:hover { border-color: rgba(244, 63, 94, 0.7); box-shadow: 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 30px rgba(244, 63, 94, 0.25); }
        .profile-bio { font-size: 12px; color: #cbd5e1; line-height: 1.8; letter-spacing: 0.8px; text-align: justify; margin: 5px 0; }

        /* 🎬 YouTubeウィンドウ */
        .window-youtube { max-width: 350px; }
        .video-frame { position: relative; width: 100%; padding-top: 56.25%; background: #000; border: 1px solid rgba(56, 189, 248, 0.25); margin-bottom: 12px; }
        .video-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
        .subscribe-btn { display: block; text-align: center; background: rgba(56, 189, 248, 0.05); border: 1px solid rgba(56, 189, 248, 0.4); color: #38bdf8; padding: 12px; margin-bottom: 12px; text-decoration: none; font-size: 12px; font-weight: bold; letter-spacing: 1px; transition: all 0.2s; box-sizing: border-box; }
        .subscribe-btn:hover { background: #38bdf8; color: #04060a; box-shadow: 0 0 15px rgba(56, 189, 248, 0.4); }

        /* 🟢 nowウィンドウ */
        .window-now { max-width: 450px; animation: float-now 4s ease-in-out infinite; }
        .window-now .window-bar { background: rgba(34, 197, 94, 0.12); border-bottom: 1px solid rgba(34, 197, 94, 0.25); color: #22c55e; }
        .window-now .window-close { color: #22c55e; }
        .window-now:hover { border-color: rgba(34, 197, 94, 0.7); box-shadow: 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 30px rgba(34, 197, 94, 0.25); }
        @keyframes float-now { 0%, 100% { transform: translateY(0px) rotate(0.3deg); } 50% { transform: translateY(-8px) rotate(1.2deg); } }
        .now-list-container { padding: 4px 6px; }
        .now-list { margin: 0; padding: 0; list-style: none; }
        .now-list li { font-size: 16px; color: #22c55e; line-height: 1.6; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 10px; }
        .now-list li:last-child { margin-bottom: 0; }
        .now-song-link { color: #22c55e; text-decoration: underline; text-underline-offset: 3px; font-weight: bold; }
        .now-song-link:hover { color: #a3e635; text-shadow: 0 0 8px rgba(163, 230, 53, 0.8); }
        .now-indicator-dot { display: inline-block; width: 7px; height: 7px; background-color: #22c55e; border-radius: 50%; margin-top: 6px; flex-shrink: 0; animation: blink 1.2s infinite; box-shadow: 0 0 6px #22c55e; }
        @keyframes blink { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }

      /* 🟢 nowウィンドウ 日付*/
       .now-update-date {
    margin-left: auto;
    font-size: 11px;
    color: #22c55e;
    opacity: 0.6;
}

        /* 🎨 FA / 💜 メンバー / その他ウィンドウ */
        .window-fa .window-bar { background: rgba(251, 146, 60, 0.12); border-bottom: 1px solid rgba(251, 146, 60, 0.25); color: #fb923c; }
        .window-fa .window-close { color: #fb923c; }
        .window-fa:hover { border-color: rgba(251, 146, 60, 0.7); box-shadow: 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 30px rgba(251, 146, 60, 0.25); }
        .window-member .window-bar { background: rgba(168, 85, 247, 0.12); border-bottom: 1px solid rgba(168, 85, 247, 0.25); color: #a855f7; }
        .window-member .window-close { color: #a855f7; }
        .window-member:hover { border-color: rgba(168, 85, 247, 0.7); box-shadow: 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 30px rgba(168, 85, 247, 0.25); }

        /* 🔗 ボタン類 */
        .link-btn { display: block; text-align: center; background: rgba(56, 189, 248, 0.03); border: 1px solid rgba(56, 189, 248, 0.35); color: #38bdf8; padding: 12px; margin-bottom: 12px; text-decoration: none; font-size: 13px; font-weight: bold; transition: all 0.2s; box-sizing: border-box; }
        .link-btn:hover { background: #a3e635; color: #04060a; border-color: #fff; box-shadow: 0 0 15px rgba(163, 230, 53, 0.4); }
        .link-btn-shop { border-color: rgba(14, 165, 233, 0.5); }
        .link-btn-shop:hover { background: #0ea5e9; color: #04060a; box-shadow: 0 0 15px rgba(14, 165, 233, 0.4); }
        .link-btn-fa { border-color: rgba(251, 146, 60, 0.5); color: #fb923c; margin-bottom: 0; }
        .link-btn-fa:hover { background: #fb923c; color: #04060a; box-shadow: 0 0 15px rgba(251, 146, 60, 0.4); }
        .window-member { max-width: 350px; }
        .link-btn-member { border-color: rgba(168, 85, 247, 0.5); color: #a855f7; }
        .link-btn-member:hover { background: #a855f7; color: #fff; border-color: #fff; box-shadow: 0 0 15px rgba(168, 85, 247, 0.4); }

        #contact-target { scroll-margin-top: 80px; }
        
        /* 🔘 ボタン配置エリア */
        .window-footer-btns { display: flex; gap: 14px; margin-top: 16px; justify-content: center; width: 100%; }
        
        /* 🌟 クリック判定幅広ボタン */
        .retro-choice-btn { 
            background: rgba(4, 6, 10, 0.7); 
            border: 1px solid rgba(56, 189, 248, 0.4); 
            color: #cbd5e1; 
            padding: 10px 24px; 
            font-size: 12px; 
            cursor: pointer; 
            transition: all 0.2s; 
            font-weight: bold;
            min-width: 90px; 
            text-align: center;
        }
        .retro-choice-btn:hover { background: rgba(56, 189, 248, 0.25); color: #fff; border-color: #38bdf8; transform: scale(1.05); }

        /* ⚠️ 引き留めポップアップ */
        .alert-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(4, 6, 10, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 50000; display: none; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; }
        .alert-window { background: rgba(12, 15, 22, 0.95); border: 1px solid #38bdf8; box-shadow: 0 0 30px rgba(56, 189, 248, 0.2); width: 100%; max-width: 320px; box-sizing: border-box; }
        .alert-bar { background: rgba(56, 189, 248, 0.15); padding: 6px 12px; color: #38bdf8; font-size: 11px; font-weight: bold; border-bottom: 1px solid #38bdf8; letter-spacing: 1px; }
        .alert-content { padding: 20px 16px; text-align: center; }
        .alert-text { font-size: 12px; color: #cbd5e1; margin: 0 0 20px 0; line-height: 1.6; letter-spacing: 1px; }

        /* 🔄 再起動 */
        .reboot-overlay { text-align: center; margin-top: 40px; display: none; opacity: 0; transition: opacity 0.5s; padding: 0 20px; }
        .reboot-msg { font-size: 12px; color: #84cc16; margin-bottom: 24px; letter-spacing: 1px; line-height: 1.8; text-shadow: 0 0 10px rgba(132, 204, 22, 0.4); }
        .reboot-btn { background: none; border: 1px solid #38bdf8; color: #38bdf8; padding: 10px 24px; font-size: 12px; cursor: pointer; font-weight: bold; letter-spacing: 1px; transition: all 0.2s; }
        .reboot-btn:hover { background: #38bdf8; color: #04060a; box-shadow: 0 0 15px rgba(56, 189, 248, 0.4); }

        /* 🖥️ PC用サイドバー設定 */
        @media (min-width: 768px) {
            .site-nav { top: 0; left: 5%; width: auto; height: 100vh; background: none !important; border: none !important; border-bottom: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; display: flex; align-items: center; pointer-events: none; padding: 0; }
            .nav-list { flex-direction: column; align-items: flex-start; gap: 15px; pointer-events: auto; border: none !important; }
            .nav-item { border: none !important; }
            .nav-link { font-size: 20px; letter-spacing: 3px; padding: 12px 20px; border: none !important; }
            
            .dropdown-menu { top: 50%; left: 100%; transform: translateX(15px) translateY(-50%); margin: 0 0 0 10px; width: 150px; background: rgba(4, 6, 10, 0.95); border-color: rgba(255, 255, 255, 0.3); }
            .dropdown-menu::before { top: 50%; left: -6px; transform: translateY(-50%); border-width: 6px 6px 6px 0; border-color: transparent rgba(255, 255, 255, 0.3) transparent transparent; }
            .nav-item:hover .dropdown-menu { transform: translateX(0) translateY(-50%); }

            .page-wrapper { padding-left: 240px; padding-right: 40px; }
            .window-container { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 25px; }
            .window-youtube { max-width: 480px; width: calc(50% - 15px); }
            .window-now { max-width: 480px; width: calc(50% - 15px); }

        }