/* ============================================
   グラデーションフッター - メインコンテナ
   背景グラデーションと全体のレイアウトを制御
   ============================================ */
.gradient-footer {
    position: relative; /* 子要素の絶対配置の基準点 */
    /* 夕焼けから夜空へのグラデーション背景 */
    background: linear-gradient(
        to bottom,
        transparent 0%,      /* 透明から開始（既存背景と自然に繋がる） */
        #fef1cc 10%,        /* 背景画像の色に合わせたクリーム色 */
        #FFD89C 25%,        /* 明るい黄色 */
        #FFB347 40%,        /* オレンジ */
        #FF8C42 55%,        /* 濃いオレンジ */
        #FF6B35 70%,        /* 赤みのあるオレンジ */
        #C44536 85%,        /* 夕焼けの赤 */
        #3d4f5c 95%,        /* 夜空の濃紺 */
        #484848 100%        /* 既存フッターの色 */
    );
    padding: 150px 20px 60px; /* 上下左右の余白（上を広く取ってグラデーションを見せる） */
    overflow: hidden; /* はみ出た要素を隠す */
    width: 100vw; /* 画面幅いっぱい */
    margin-left: calc(50% - 50vw); /* 中央配置からフルワイドに拡張（左） */
    margin-right: calc(50% - 50vw); /* 中央配置からフルワイドに拡張（右） */
}

/* グラデーション上部のぼかし効果
   背景画像との境界を滑らかにする */
.gradient-footer::before {
    content: ''; /* 疑似要素の生成 */
    position: absolute; /* 親要素を基準に配置 */
    top: 0;
    left: 0;
    right: 0;
    height: 100px; /* ぼかしエリアの高さ */
    background: linear-gradient(
        to bottom,
        #fef1cc 0%,
        transparent 100%
    );
    filter: blur(20px); /* ぼかし効果 */
    pointer-events: none; /* クリックイベントを無効化 */
}

/* ============================================
   星の装飾 - コンテナ
   キラキラ光る星を配置するエリア
   ============================================ */
.stars {
    position: absolute; /* フッター内の絶対配置 */
    top: 0;
    left: 0;
    width: 100%; /* 幅いっぱい */
    height: 60%; /* フッターの上部60%に配置 */
    pointer-events: none; /* クリックを無効化（下のコンテンツをクリック可能に） */
}

/* 星の装飾 - 個別の星
   キラキラアニメーションを適用 */
.star {
    position: absolute; /* 親要素内で自由に配置 */
    background: white; /* 白色 */
    border-radius: 50%; /* 円形 */
    animation: twinkle 3s infinite; /* キラキラアニメーション（3秒周期、無限ループ） */
    box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.8); /* 光るエフェクト */
}

/* 各星の位置とサイズを個別に設定 */
.star:nth-child(1) { width: 3px; height: 3px; top: 20%; left: 10%; animation-delay: 0s; }
.star:nth-child(2) { width: 2px; height: 2px; top: 30%; left: 20%; animation-delay: 0.5s; }
.star:nth-child(3) { width: 4px; height: 4px; top: 15%; left: 35%; animation-delay: 1s; }
.star:nth-child(4) { width: 2px; height: 2px; top: 25%; left: 50%; animation-delay: 1.5s; }
.star:nth-child(5) { width: 3px; height: 3px; top: 35%; left: 65%; animation-delay: 2s; }
.star:nth-child(6) { width: 2px; height: 2px; top: 18%; left: 75%; animation-delay: 2.5s; }
.star:nth-child(7) { width: 3px; height: 3px; top: 28%; left: 85%; animation-delay: 0.8s; }
.star:nth-child(8) { width: 2px; height: 2px; top: 40%; left: 15%; animation-delay: 1.8s; }
.star:nth-child(9) { width: 4px; height: 4px; top: 22%; left: 45%; animation-delay: 1.2s; }
.star:nth-child(10) { width: 2px; height: 2px; top: 32%; left: 90%; animation-delay: 2.2s; }
.star:nth-child(11) { width: 3px; height: 3px; top: 12%; left: 8%; animation-delay: 0.3s; }
.star:nth-child(12) { width: 2px; height: 2px; top: 38%; left: 28%; animation-delay: 1.1s; }
.star:nth-child(13) { width: 2px; height: 2px; top: 16%; left: 55%; animation-delay: 1.7s; }
.star:nth-child(14) { width: 3px; height: 3px; top: 33%; left: 70%; animation-delay: 2.3s; }
.star:nth-child(15) { width: 2px; height: 2px; top: 24%; left: 92%; animation-delay: 0.6s; }
.star:nth-child(16) { width: 4px; height: 4px; top: 14%; left: 62%; animation-delay: 1.4s; }
.star:nth-child(17) { width: 2px; height: 2px; top: 36%; left: 42%; animation-delay: 2.1s; }
.star:nth-child(18) { width: 3px; height: 3px; top: 19%; left: 18%; animation-delay: 0.9s; }
.star:nth-child(19) { width: 2px; height: 2px; top: 27%; left: 78%; animation-delay: 1.6s; }
.star:nth-child(20) { width: 2px; height: 2px; top: 41%; left: 5%; animation-delay: 2.4s; }

/* ============================================
   流れ星
   斜めに流れるアニメーション
   ============================================ */
.shooting-star {
    position: absolute; /* フッター内の絶対配置 */
    width: 2px; /* 幅 */
    height: 2px; /* 高さ */
    background: white; /* 白色 */
    border-radius: 50%; /* 円形 */
    /* 強い光のエフェクト（二重シャドウ） */
    box-shadow: 0 0 12px 3px rgba(255, 255, 255, 1),
                0 0 6px 1px rgba(255, 255, 255, 1);
    opacity: 0; /* 初期状態は非表示 */
}

/* 流れ星1: 0秒後に流れ始める */
.shooting-star:nth-child(21) {
    top: 15%;
    left: 80%;
    animation: shoot 6s linear infinite; /* 6秒周期で無限ループ */
    animation-delay: 0s;
}

/* 流れ星2: 2秒後に流れ始める */
.shooting-star:nth-child(22) {
    top: 25%;
    left: 60%;
    animation: shoot 6s linear infinite;
    animation-delay: 2s;
}

/* 流れ星3: 4秒後に流れ始める */
.shooting-star:nth-child(23) {
    top: 35%;
    left: 90%;
    animation: shoot 6s linear infinite;
    animation-delay: 4s;
}

/* ============================================
   アニメーション定義
   ============================================ */

/* 星のキラキラアニメーション */
@keyframes twinkle {
    0%, 100% { opacity: 0.3; } /* 薄く */
    50% { opacity: 1; } /* 明るく */
}

/* 流れ星のアニメーション */
@keyframes shoot {
    0%, 91.6% {
        transform: translateX(0) translateY(0); /* 初期位置 */
        opacity: 0; /* 非表示（待機中） */
    }
    91.7% {
        opacity: 1; /* 表示開始 */
    }
    100% {
        transform: translateX(-150px) translateY(150px); /* 左下に移動 */
        opacity: 0; /* フェードアウト */
    }
}

/* ============================================
   リンクエリア - コンテナ
   サイトポリシーと公開情報のリンクを配置
   ============================================ */
.footer-links {
    position: relative; /* 子要素の基準 */
    z-index: 1; /* 星より前面に表示 */
    max-width: 800px; /* 最大幅 */
    margin: 0 auto; /* 中央配置 */
    display: grid; /* グリッドレイアウト */
    grid-template-columns: 1fr 1fr; /* 2列均等 */
    gap: 40px; /* 列間の余白 */
    color: white; /* 文字色 */
}

/* リンクエリア - セクション見出し */
.footer-section h3 {
    font-size: 18px; /* 文字サイズ */
    margin-bottom: 15px; /* 下余白 */
    font-weight: bold; /* 太字 */
    display: flex; /* フレックスレイアウト */
    align-items: center; /* 縦方向中央揃え */
    gap: 8px; /* アイコンとテキストの間隔 */
}

/* リンクエリア - リンクスタイル */
.footer-section h3 a {
    color: white; /* 文字色 */
    text-decoration: none; /* 下線なし */
    display: flex; /* フレックスレイアウト */
    align-items: center; /* 縦方向中央揃え */
    gap: 8px; /* アイコンとテキストの間隔 */
    transition: all 0.3s; /* ホバー時のアニメーション */
    position: relative; /* 疑似要素の基準 */
    padding-bottom: 3px; /* 下余白 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* アンダーライン */
}

/* リンクエリア - リンクホバー時 */
.footer-section h3 a:hover {
    color: #9ce5dc; /* 文字色変更 */
    border-bottom-color: #9ce5dc; /* アンダーライン色変更 */
}

/* リンクエリア - アイコンサイズ */
.footer-section h3 a i {
    font-size: 0.8rem; /* アイコンを少し小さく */
}

/* リンクエリア - サブリスト */
.footer-section ul {
    list-style: none; /* リストマーカーなし */
    padding-left: 20px; /* 左余白 */
}

/* リンクエリア - サブリスト項目 */
.footer-section li {
    margin-bottom: 8px; /* 下余白 */
    color: #ffffff; /* 文字色（白） */
    font-size: 14px; /* 文字サイズ */
    position: relative; /* 疑似要素の基準 */
}

/* リンクエリア - ツリー構造記号（最後の項目） */
.footer-section li:last-child::before {
    content: '└'; /* L字記号 */
    position: absolute;
    left: -20px; /* 左に配置 */
}

/* リンクエリア - ツリー構造記号（最後以外の項目） */
.footer-section li:not(:last-child)::before {
    content: '├'; /* T字記号 */
    position: absolute;
    left: -20px; /* 左に配置 */
}

/* ============================================
   レスポンシブ対応 - スマホ表示
   600px以下の画面幅で適用
   ============================================ */
@media (max-width: 600px) {
    .gradient-footer {
        padding: 100px 15px 40px; /* パディングを縮小 */
    }
    
    .footer-links {
        grid-template-columns: 1fr 1fr; /* 2列を維持 */
        gap: 20px; /* 列間を狭く */
        font-size: 14px; /* 文字サイズを小さく */
    }
    
    .footer-section h3 {
        font-size: 16px; /* 見出しサイズを小さく */
    }
}