/* ==========================================================================
   フッター統合エリア — block-67 (footer-widget-upper-pc) 用スタイル

   役割: ナビ 10 pill + 規定書類 4 pill のフラット表示。
         本物のフッター本体の直上、夕焼け→夜空グラデの上にフラットに並ぶ。
   依存: Font Awesome 6 (子テーマ functions.php で読み込み済)
   案 ① (2026-05-12): policy 群 = ラベンダー、statement 群 = ベージュ
   ========================================================================== */

/* --- メインコンテナ: グラデ背景 + フルワイド + 上部ぼかし --- */
.seijuji-footer-nav--pill {
    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: 130px 20px 60px;                        /* 上余白を広めにとってグラデを見せる */
    overflow: hidden;                                /* はみ出し抑止 */
    width: 100vw;                                    /* 画面幅いっぱい */
    margin-left: calc(50% - 50vw);                   /* 中央配置からフルワイドに拡張 (左) */
    margin-right: calc(50% - 50vw);                  /* 中央配置からフルワイドに拡張 (右) */
}
.seijuji-footer-nav--pill::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;                            /* クリック無効 */
}

/* --- 星の twinkle (流れ星は廃止、点滅のみ残す) --- */
.seijuji-footer-nav--pill__stars {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 55%;                        /* 上半分エリアに散らす */
    pointer-events: none;                            /* 下のリンクをクリック可能に */
}
.seijuji-footer-nav--pill__stars i {
    position: absolute;
    background: #fff;                                /* 白い星 */
    border-radius: 50%;                              /* 円形 */
    animation: footer-merge-twinkle 3s infinite;     /* キラキラ 3 秒ループ */
    box-shadow: 0 0 4px 2px rgba(255,255,255,0.75);  /* 光るエフェクト */
}
.seijuji-footer-nav--pill__stars i:nth-child(1) {width:3px;height:3px;top:18%;left:10%;animation-delay:0s}
.seijuji-footer-nav--pill__stars i:nth-child(2) {width:2px;height:2px;top:32%;left:22%;animation-delay:.5s}
.seijuji-footer-nav--pill__stars i:nth-child(3) {width:4px;height:4px;top:14%;left:38%;animation-delay:1s}
.seijuji-footer-nav--pill__stars i:nth-child(4) {width:2px;height:2px;top:26%;left:52%;animation-delay:1.5s}
.seijuji-footer-nav--pill__stars i:nth-child(5) {width:3px;height:3px;top:36%;left:68%;animation-delay:2s}
.seijuji-footer-nav--pill__stars i:nth-child(6) {width:2px;height:2px;top:18%;left:78%;animation-delay:2.5s}
.seijuji-footer-nav--pill__stars i:nth-child(7) {width:3px;height:3px;top:28%;left:88%;animation-delay:.8s}
.seijuji-footer-nav--pill__stars i:nth-child(8) {width:2px;height:2px;top:40%;left:15%;animation-delay:1.8s}
.seijuji-footer-nav--pill__stars i:nth-child(9) {width:4px;height:4px;top:22%;left:46%;animation-delay:1.2s}
.seijuji-footer-nav--pill__stars i:nth-child(10){width:2px;height:2px;top:32%;left:90%;animation-delay:2.2s}
@keyframes footer-merge-twinkle {
    0%, 100% { opacity: 0.3; }                       /* 薄く */
    50%      { opacity: 1; }                         /* 明るく */
}

/* --- 中身コンテナ: 星より前面に出して横並びさせる --- */
.seijuji-footer-nav--pill__inner {
    position: relative;                              /* z-index 効かせる */
    z-index: 1;                                      /* 星の上 */
    max-width: 800px;                                /* 横幅上限 */
    margin: 0 auto;                                  /* 中央配置 */
    text-align: center;                              /* pill を中央寄せ */
}

/* --- pill 共通スタイル --- */
.seijuji-footer-nav--pill__pill {
    display: inline-flex;                            /* アイコン + テキストを横並び */
    align-items: center;                             /* 縦中央揃え */
    gap: 6px;                                        /* アイコンとテキストの間隔 */
    padding: 7px 14px;                               /* 内側余白 */
    margin: 4px 4px;                                 /* pill 同士の間隔 */
    font-size: 14px;                                 /* 文字サイズ */
    border-radius: 999px;                            /* 完全な丸 (pill) */
    line-height: 1.2;                                /* 行間 */
    font-weight: 500;                                /* 中太字 */
    text-decoration: none;                           /* 下線なし */
    transition: transform 0.15s, box-shadow 0.15s;   /* ホバーアニメ */
}
.seijuji-footer-nav--pill__pill i {
    font-size: 12px;                                 /* アイコンは少し小さく */
}
.seijuji-footer-nav--pill__pill:hover {
    transform: translateY(-1px);                     /* 1px 浮き上がり */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);         /* 影 */
}

/* --- ページ色 (ナビ用 5 色) --- */
.seijuji-footer-nav--pill__pill.seijuji-footer-nav--pill__pill--color-peach   { background: #FFE8D8; color: #B66230; border: 1px solid #FFD9C0; } /* TOP/園の生活/お問い合わせ */
.seijuji-footer-nav--pill__pill.seijuji-footer-nav--pill__pill--color-mint    { background: #DCF0E8; color: #5A9A6D; border: 1px solid #C8E6DE; } /* 保育環境/保護者の活動/保護者の声 */
.seijuji-footer-nav--pill__pill.seijuji-footer-nav--pill__pill--color-pink    { background: #FFE3EE; color: #BF6685; border: 1px solid #FFD7E5; } /* 子育て支援/おたより */
.seijuji-footer-nav--pill__pill.seijuji-footer-nav--pill__pill--color-apricot { background: #FFE3C8; color: #C9743B; border: 1px solid #FFC27A; } /* 入園案内 */
.seijuji-footer-nav--pill__pill.seijuji-footer-nav--pill__pill--color-yellow  { background: #FFF2C0; color: #B88A0F; border: 1px solid #FFE88C; } /* お知らせ一覧 */

/* --- 規定書類色 (案 ①: policy = ラベンダー / statement = ベージュ) --- */
.seijuji-footer-nav--pill__pill.seijuji-footer-nav--pill__pill--color-lavender { background: #ECE6F2; color: #7A6A95; border: 1px solid #D9CCE6; } /* サイトポリシー/個人情報保護方針 */
.seijuji-footer-nav--pill__pill.seijuji-footer-nav--pill__pill--color-beige    { background: #F0E8D8; color: #9B8862; border: 1px solid #DCCBA8; } /* 重要事項説明書/学校評価 */

/* --- 区切り線: ナビと規定書類の間 --- */
.seijuji-footer-nav--pill__divider {
    display: block;
    margin: 16px auto 10px;                          /* 上下余白 */
    width: 60%;                                      /* 中央寄せの幅 60% */
    max-width: 240px;                                /* 上限 240px */
    border: 0;                                       /* デフォルト border 消す */
    border-top: 1px dashed rgba(255,255,255,.32);    /* 白の薄い破線 */
}

/* --- スマホ調整 --- */
@media (max-width: 600px) {
    .seijuji-footer-nav--pill { padding: 100px 15px 50px; }      /* パディング縮小 */
    .seijuji-footer-nav--pill__pill { font-size: 13px; padding: 6px 11px; } /* pill 小さく */
}