/* ========================================
   Footer Styles - フッターのスタイル
   ========================================
   ページ下部のフッター情報とリンク
======================================== */

/* フッターの基本設定：グラデーション背景、パディング */
.footer {
    background: linear-gradient(135deg, #2D1B69, #1A1A2E);
    color: white;
    padding: 3rem 0 1rem;
    
    /* フッターコンテンツ：グリッドレイアウト、レスポンシブ対応 */
    .footerContent {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;
        margin-bottom: 2rem;
        
        /* フッターの各セクション */
        .footerSection {
            /* フッターのメインタイトル */
            .footerTitle {
                font-family: 'Cinzel', serif;
                font-size: 1.5rem;
                color: #D4AF37;
                margin-bottom: 1rem;
            }
            
            /* フッターのサブタイトル */
            .footerSubtitle {
                font-size: 1.1rem;
                color: #D4AF37;
                margin-bottom: 1rem;
                font-weight: 500;
            }
            
            /* フッターの説明文 */
            .footerDescription {
                color: #B0B0B0;
                line-height: 1.6;
                margin-bottom: 0;
            }
            
            /* フッターリンクのリスト：縦並び配置 */
            .footerLinks {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                
                /* リンクアイテム */
                li {
                    /* リンクのスタイル：ホバー効果付き */
                    a {
                        color: #B0B0B0;
                        transition: color 0.3s ease;
                        
                        /* ホバー時の色変更 */
                        &:hover {
                            color: #D4AF37;
                        }
                    }
                }
            }
            
            /* フッター内の段落 */
            p {
                color: #B0B0B0;
                margin-bottom: 0.5rem;
                
                /* 最後の段落のマージン調整 */
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
    
    /* フッター下部：コピーライト表示 */
    .footerBottom {
        border-top: 1px solid rgba(212, 175, 55, 0.3);
        padding-top: 1rem;
        text-align: center;
        
        /* コピーライトテキスト */
        p {
            color: #B0B0B0;
            margin: 0;
            font-size: 0.9rem;
        }
    }
}

/* ========================================
   Mobile Footer - モバイル向けフッター
   ========================================
   768px以下でのフッター表示調整
======================================== */

@media (max-width: 768px) {
    .footer {
        /* モバイル時のフッターコンテンツ：1カラム、中央配置 */
        .footerContent {
            grid-template-columns: 1fr;
            text-align: center;
            
            /* フッターリンクを中央配置 */
            .footerSection {
                .footerLinks {
                    align-items: center;
                }
            }
        }
    }
}