/* ----- ヘッダー ----- */
header {
    background-image: linear-gradient(135deg, rgb(11 78 163 / 1.0), rgb(9 69 156 / 1.0));

    .header-nav {
        background-image: image-set(url(../img/menu-bg_sp@2x.png) 1x,
                url(../img/menu-bg_sp@3x.png) 3x,
                url(../img/menu-bg_sp.png) 4x);
    }
}





/* ----- トップページ ----- */
.home {
    .hero-link-area {
        .menu-item {
            a {
                background-image: image-set(url(../img/circle-img_sp2x_pc1x.png) 1x,
                        url(../img/circle-img_sp3x.png) 3x,
                        url(../img/circle-img_sp4x_pc2x.png) 4x);
            }

            &:first-child span::before {
                background-image: image-set(url(../img/news-icon_sp2x_pc1x.png) 1x,
                        url(../img/news-icon_sp3x_pc2x.png) 3x,
                        url(../img/news-icon_sp4x.png) 4x);
            }

            &:nth-child(2) span::before {
                background-image: image-set(url(../img/profile-icon_sp2x_pc1x.png) 1x,
                        url(../img/profile-icon_sp3x_pc2x.png) 3x,
                        url(../img/profile-icon_sp4x.png) 4x);
            }

            &:nth-child(3) span::before {
                background-image: image-set(url(../img/office-icon_sp2x_pc1x.png) 1x,
                        url(../img/office-icon_sp3x_pc2x.png) 3x,
                        url(../img/office-icon_sp4x.png) 4x);
            }

            &:nth-child(4) span::before {
                background-image: image-set(url(../img/shop-icon_sp2x_pc1x.png) 1x,
                        url(../img/shop-icon_sp3x_px2x.png) 3x,
                        url(../img/shop-icon_sp4x.png) 4x);
            }

            &:last-child span::before {
                background-image: image-set(url(../img/contact-icon_sp2x_pc1x.png) 1x,
                        url(../img/contact-icon_sp3x_pc2x.png) 3x,
                        url(../img/contact-icon_sp4x.png) 4x);
            }
        }
    }
}
/* ----- 泡柱画像 ----- */
.l-bubble-pillar,
.r-bubble-pillar {
    background-image: image-set(url(../img/bubble-pillar_sp2x.png) 1x,
            url(../img/bubble-pillar_sp3x.png) 3x,
            url(../img/bubble-pillar_sp4x.png) 4x);
}




/* ----- フッター ----- */
footer {
    background-image: image-set(url(../img/f-background_sp2x.png) 1x,
            url(../img/f-background_sp3x.png) 3x,
            url(../img/f-background_sp4x.png) 4x);

    .sns-link {
        .x-link {
            background-image: image-set(url(../img/x_sp2x.png) 1x,
                    url(../img/x_sp3x.png) 3x,
                    url(../img/x_sp4x.png) 4x);
        }

        .insta-link {
            background-image: image-set(url(../img/instagram_sp2x.png) 1x,
                    url(../img/instagram_sp3x.png) 3x,
                    url(../img/instagram_sp4x.png) 4x);
        }

        .facebook-link {
            background-image: image-set(url(../img/facebook_sp2x.png) 1x,
                    url(../img/facebook_sp3x.png) 3x,
                    url(../img/facebook_sp4x.png) 4x);
        }
    }
}

.footer-nav {
    .menu-item {
        &:first-child span::before {
            background-image: image-set(url(../img/news-icon_sp2x_pc1x.png) 1x,
                    url(../img/news-icon_sp3x_pc2x.png) 3x,
                    url(../img/news-icon_sp4x.png) 4x);
        }

        &:nth-child(2) span::before {
            background-image: image-set(url(../img/profile-icon_sp2x_pc1x.png) 1x,
                    url(../img/profile-icon_sp3x_pc2x.png) 3x,
                    url(../img/profile-icon_sp4x.png) 4x);
        }

        &:nth-child(3) span::before {
            background-image: image-set(url(../img/office-icon_sp2x_pc1x.png) 1x,
                    url(../img/office-icon_sp3x_pc2x.png) 3x,
                    url(../img/office-icon_sp4x.png) 4x);
        }

        &:nth-child(4) span::before {
            background-image: image-set(url(../img/shop-icon_sp2x_pc1x.png) 1x,
                    url(../img/shop-icon_sp3x_px2x.png) 3x,
                    url(../img/shop-icon_sp4x.png) 4x);
        }

        &:last-child span::before {
            background-image: image-set(url(../img/contact-icon_sp2x_pc1x.png) 1x,
                    url(../img/contact-icon_sp3x_pc2x.png) 3x,
                    url(../img/contact-icon_sp4x.png) 4x);
        }
    }
}




/* ----- 投稿ページ　ナビゲーション ----- */
.post-navigation {
    .arrow-area {
        .prev-arrow {
            background-image: url(../img/prev-arrow.svg);
        }
        .next-arrow {
            background-image: url(../img/next-arrow.svg);
        }
    }
}