/* style.css の :root セレクタ内を以下のように修正 */

:root {
    /* 主要な色を定義 */
    --background-dark: #12121c;
    
    /* グラデーションの色は維持 */
    --gradient-start: #66dd66; /* 明るい緑 */
    --gradient-middle: #44ccff; /* 明るい水色 */
    --gradient-end: #b366ff; /* 明るい紫 */
    --text-light: #e0e0e0;
    
    /* 💡 3D オブジェクトの色をネオンブルー/パープル系に変更 */
    --accent-gray: #30304a;       /* 濃い青みがかったグレー */
    --accent-light-gray: #4a4a70; /* 明るい青みがかったグレー */
    --ui-dark: #2a2a3a;
    --ui-border: #6a6a90;
    --brush-color: #202040;      /* ブラシテクスチャの色も青系に調整 */
    
    /* ローディングバーの色を定義 */
    --loading-bg-color: #12121c;
    --loading-bar-border: #9999ff; /* 明るい紫に変更 */
    --loading-bar-fill: #66ddff;   /* 明るい水色に変更 */
    --loading-text-color: #e0e0e0;
    }
    
    /* * ----------------------------------------
     * ここから style.css の既存の共通スタイルが続きます
     * ----------------------------------------
     */
    
    /* body, header, nav, brush-background, object, object-layer などの共通スタイル */
    /* ... 既存の style.css の内容をすべてここに記述 ... */
    
    
    /* * ----------------------------------------
     * Projectsページ固有スタイル (旧 projects.css)
     * ----------------------------------------
     */
    
    .projects-page {
        /* ナビゲーションバー直下の中央寄せ */
        padding-top: 100px; 
        padding-left: 0; 
        min-height: 100vh;
        background-color: var(--background-dark); 
        position: relative;
        z-index: 1;
        
        display: flex;
        flex-direction: column;
        justify-content: flex-start; 
        align-items: center; 
        text-align: center; 
        overflow: hidden; 
    }
    
    /* projects-page の object-layer のスタイル */
    .projects-page > .object-layer {
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        perspective: 1000px;
        z-index: 5; 
    }
    
    .main-content {
        width: auto;
        max-width: 90%; 
        height: auto;
        position: relative;
        z-index: 12;
        margin: 0 auto; 
        margin-top: 0; 
    
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: flex-start; 
    }
    
    /* タイトルとサブタイトルのスタイル */
    .project-main-title {
        font-size: 3.5em; 
        font-weight: 900;
        line-height: 0.9;
        text-transform: uppercase;
        letter-spacing: -0.05em;
    
        background: linear-gradient(to right, var(--gradient-start), var(--gradient-middle), var(--gradient-end));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    
        filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1)) drop-shadow(0 0 15px rgba(0, 0, 0, 0.8));
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.3),
                     0 0 20px rgba(0, 255, 255, 0.2);
        
        text-align: center; 
        margin-bottom: 5px;
        display: block; 
        z-index: 10;
    }
    
    .project-sub-title {
        font-size: 1em; 
        color: var(--accent-light-gray); 
        
        text-align: center; 
        margin-bottom: 30px; 
        letter-spacing: 0.1em;
        z-index: 10;
    }
    
    /* 海賊船のスタイル */
    .space-pirate-ship {
        width: 95%; 
        max-width: 1000px; 
        max-height: 70vh; 
        height: auto;
        object-fit: contain; 
        opacity: 0.7; 
        filter: 
            brightness(1.2)        
            saturate(1.5)          
            drop-shadow(0 0 15px rgba(68, 204, 255, 0.4)) 
            drop-shadow(0 0 30px rgba(179, 102, 255, 0.2)); 
        
        margin-top: 30px; 
        z-index: 8; 
        position: relative; 
        animation: shipFloat 15s ease-in-out infinite alternate;
    }
    
    @keyframes shipFloat {
        0% {
            transform: translateY(0px) rotateZ(0deg);
        }
        50% {
            transform: translateY(-15px) rotateZ(1deg); 
        }
        100% {
            transform: translateY(0px) rotateZ(0deg);
        }
    }
    
    /* レスポンシブ対応 (必要に応じて調整) */
    @media (max-width: 768px) {
        .project-main-title {
            font-size: 2.5em;
        }
        .space-pirate-ship {
            width: 100%; 
            max-width: 500px;
            max-height: 50vh;
        }
    }