/* ──────────────────────────────────────────────
   プロジェクトページ用 Body スタイル上書き
────────────────────────────────────────────── */
body.project-page {
    padding-top: 0;
}

/* ──────────────────────────────────────────────
   Vanta.js 背景
────────────────────────────────────────────── */
#vanta-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0; /* コンテンツより背面 */
}

/* ──────────────────────────────────────────────
   メインコンテンツ
────────────────────────────────────────────── */
.project-main {
    position: relative;
    z-index: 1; /* 背景より手前 */
}

/* ──────────────────────────────────────────────
   ヒーローセクション
────────────────────────────────────────────── */
#project-hero {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}

.hero-content {
    /* フェードインの初期状態は style.css で定義済み */
    animation: float 6s ease-in-out infinite; /* ふわふわ浮遊するアニメーション */
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

.project-logo {
    max-width: 180px; /* ロゴサイズ調整 */
    height: auto;
    margin: 0 auto 1.5rem;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5)); /* ロゴを少し光らせる */
}

.project-title {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.7), 0 0 16px rgba(255, 255, 255, 0.5);
}

@media (max-width: 600px) {
    .project-logo {
        max-width: 120px;
    }
    .project-title {
        font-size: 2.5rem;
    }
}

/* ──────────────────────────────────────────────
   コンセプト詳細セクション
────────────────────────────────────────────── */
#project-concept {
    background: rgba(0, 0, 0, 0.8); /* 半透明の背景でコンテンツを読みやすく */
    padding: 120px 20px; /* 上下の余白を多めに */
}

/* セクションタイトルのグラデーションを「天」のテーマカラーに */
#project-concept .section-title {
    /* Vanta.js の色味に合わせた緑系のグラデーション */
    background-image: linear-gradient(45deg, #43C6AC, #07b58a);
}

.concept-text {
    max-width: 800px;
    margin: 0 auto 4rem; /* タイトルとの余白、下のボタンとの余白 */
    text-align: left;
    line-height: 2; /* 行間を広げて読みやすく */
    font-size: 1rem;
}

@media (max-width: 600px) {
    #project-concept {
        padding: 80px 20px;
    }
    .concept-text {
        line-height: 1.8;
    }
}

/* ──────────────────────────────────────────────
   戻るボタン
────────────────────────────────────────────── */
.back-to-top-container {
    text-align: center;
    margin-top: 3rem;
}

/* 「天」用にボタンの色を緑系に上書き */
.back-to-top-container .neon-btn {
    border-color: #43C6AC;
    color: #43C6AC;
}

.back-to-top-container .neon-btn:hover {
    background: rgba(67, 198, 172, 0.1);
    box-shadow: 0 0 8px #43C6AC, 0 0 16px #43C6AC;
}

.back-to-top-container .neon-btn .arrow.back {
    margin-left: 0;
    margin-right: 0.5rem;
    transform: none; /* ホバー時の動きは親に任せる */
    transition: transform 0.3s;
}

.back-to-top-container .neon-btn:hover .arrow.back {
    transform: translateX(-4px);
}

/* ファイルの末尾に以下を追記 */

/* ──────────────────────────────────────────────
   『空』プロジェクト用テーマカラー
────────────────────────────────────────────── */

/* セクションタイトルのグラデーションを青系に */
.sora-page #project-concept .section-title {
    background-image: linear-gradient(45deg, #2193b0, #6dd5ed);
}

/* 戻るボタンの色を青系に */
.sora-page .back-to-top-container .neon-btn {
    border-color: #6dd5ed;
    color: #6dd5ed;
}

.sora-page .back-to-top-container .neon-btn:hover {
    background: rgba(109, 213, 237, 0.1);
    box-shadow: 0 0 8px #6dd5ed, 0 0 16px #6dd5ed;
}

/* ──────────────────────────────────────────────
   『恩』プロジェクト用テーマカラー (赤系統)
────────────────────────────────────────────── */

/* セクションタイトルのグラデーションを赤系に */
.on-page #project-concept .section-title {
    background-image: linear-gradient(45deg, #d31027, #ea384d);
}

/* 戻るボタンの色を赤系に */
.on-page .back-to-top-container .neon-btn {
    border-color: #ea384d;
    color: #ea384d;
}

/* こちらが正しいホバー設定です */
.on-page .back-to-top-container .neon-btn:hover {
    background: rgba(234, 56, 77, 0.1); /* 赤系の色に修正 */
    box-shadow: 0 0 8px #ea384d, 0 0 16px #ea384d; /* 赤系の色に修正 */
}