/* ========================================
   プロジェクトカード カラー＆固有スタイル
   ======================================== */

/* ツールリンク用のスタイル */
.tool-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
}

.tool-links .view-button {
    margin: 0;
    font-size: 0.9em;
    padding: 6px 12px;
}

/* カードヘッダーの透過調整 */
.project-header {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/* プロジェクトコンテンツ部分 */
.project-content {
    background-color: rgba(255, 255, 255, 0.92) !important;
}

/* プロジェクトカード全体（文字の可読性を優先） */
.project-card {
    background-color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ========================================
   デフォルトスタイル（全カードに適用）
   ======================================== */
.project-header h2 {
    color: #333 !important;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.project-header i {
    color: #555 !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

/* ========================================
   個別カードスタイル
   ======================================== */

/* 1. はとはとブログ */
.project-card:nth-child(1) .project-header h2 {
    color: #4CAF50 !important;
}
.project-card:nth-child(1) .project-header i {
    color: #4CAF50 !important;
}

/* 2. AI技術最新情報 */
.project-card:nth-child(2) .project-header h2 {
    color: #1976d2 !important;
}
.project-card:nth-child(2) .project-header i {
    color: #1976d2 !important;
}

/* 3. Git便利帳 */
.project-card:nth-child(3) .project-header h2 {
    color: #f05032 !important;
}
.project-card:nth-child(3) .project-header i {
    color: #f05032 !important;
}

/* 4. AI入門：研究ロードマップ */
.project-card:nth-child(4) .project-header h2 {
    color: #7b1fa2 !important;
    font-family: 'Zen Maru Gothic', sans-serif;
}
.project-card:nth-child(4) .project-header i {
    color: #7b1fa2 !important;
}
.project-card:nth-child(4) .view-button {
    background-color: #7b1fa2 !important;
}

/* 5. Human-AI協調開発入門 */
.project-card:nth-child(5) .project-header h2 {
    color: #1565c0 !important;
    font-family: 'Orbitron', monospace;
}
.project-card:nth-child(5) .project-header i {
    color: #1565c0 !important;
}
.project-card:nth-child(5) .view-button {
    background-color: #1565c0 !important;
}

/* 6. JavaScript・PHP入門講座 */
.project-card:nth-child(6) .project-header h2 {
    color: #e67e22 !important;
    font-family: 'Orbitron', monospace;
}
.project-card:nth-child(6) .project-header i {
    color: #e67e22 !important;
}
.project-card:nth-child(6) .view-button {
    background-color: #e67e22 !important;
}

/* 7. Javaデザインパターン入門 */
.project-card:nth-child(7) .project-header h2 {
    color: #c0392b !important;
    font-family: 'Orbitron', monospace;
}
.project-card:nth-child(7) .project-header i {
    color: #c0392b !important;
}
.project-card:nth-child(7) .view-button {
    background-color: #c0392b !important;
}

/* 8. 数学的アートギャラリー */
.project-card:nth-child(8) .project-header h2 {
    color: #6a1b9a !important;
    font-family: 'Orbitron', monospace;
}
.project-card:nth-child(8) .project-header i {
    color: #6a1b9a !important;
}
.project-card:nth-child(8) .view-button {
    background-color: #6a1b9a !important;
}

/* 9. 画像処理ツール */
.project-card:nth-child(9) .project-header h2 {
    color: #f57c00 !important;
    font-family: 'Audiowide', cursive;
}
.project-card:nth-child(9) .project-header i {
    color: #f57c00 !important;
}
.project-card:nth-child(9) .view-button {
    background-color: #f57c00 !important;
}

/* 10. テキスト処理ツール */
.project-card:nth-child(10) .project-header h2 {
    color: #0288d1 !important;
    font-family: 'Audiowide', cursive;
}
.project-card:nth-child(10) .project-header i {
    color: #0288d1 !important;
}
.project-card:nth-child(10) .view-button {
    background-color: #0288d1 !important;
}

/* 11. 赤シート式英語動詞学習 */
.project-card:nth-child(11) .project-header h2 {
    color: #dc143c !important;
}
.project-card:nth-child(11) .project-header i {
    color: #dc143c !important;
}
.project-card:nth-child(11) .view-button {
    background-color: #dc143c !important;
}

/* 12. 鳩（ドバト）の研究 */
.project-card:nth-child(12) .project-header h2 {
    color: #2e7d32 !important;
}
.project-card:nth-child(12) .project-header i {
    color: #2e7d32 !important;
}
.project-card:nth-child(12) .view-button {
    background-color: #2e7d32 !important;
}

/* 13. 淀川の植物 */
.project-card:nth-child(13) .project-header h2 {
    color: #388e3c !important;
}
.project-card:nth-child(13) .project-header i {
    color: #388e3c !important;
}
.project-card:nth-child(13) .view-button {
    background-color: #388e3c !important;
}

/* 14. みかんソフトウェア */
.project-card:nth-child(14) .project-header h2 {
    color: #ff8c00 !important;
}
.project-card:nth-child(14) .project-header i {
    color: #ff8c00 !important;
}
.project-card:nth-child(14) .view-button {
    background-color: #ff8c00 !important;
}

/* 15. 機械設計公式集 */
.project-card:nth-child(15) .project-header h2 {
    color: #2980b9 !important;
}
.project-card:nth-child(15) .project-header i {
    color: #2980b9 !important;
}
.project-card:nth-child(15) .view-button {
    background-color: #2980b9 !important;
}

/* 16以降のカード（予備） */
.project-card:nth-child(n+16) .project-header h2 {
    color: #555 !important;
}
.project-card:nth-child(n+16) .project-header i {
    color: #555 !important;
}

/* ========================================
   ボタン共通スタイル
   ======================================== */
.view-button {
    color: white !important;
    font-weight: 600;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.view-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ========================================
   モバイル用のスタイル
   ======================================== */
@media (max-width: 768px) {
    .project-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 2.5;
    }
    
    .footer-links a {
        padding: 8px 16px;
        display: block;
    }
    
    footer br,
    footer span {
        display: none;
    }
    
    .logo-image-right {
        display: none;
    }
}