@charset "utf-8";

#home_cover {
    margin-block-end: 1.5em;
    background-image:
        url(../image/snowFooter.png),
        url(../image/bg-day.png);
    background-repeat: repeat-x;
    background-position: center bottom, center 15%;
    background-size: min(50%, 53em) auto, clamp(60em, 100%, 1920px) auto;
    overflow: visible
}

#home_cover::before {
    content: '';
    display: block;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    z-index: 1;
    height: 4em;
    background: url(../image/snow1.png) repeat-x top center/auto 100%;
    pointer-events: none;
    filter: drop-shadow(0 9px 6px rgb(25 25 112/25%))
}

#home_cover::after {
    content: '';
    display: block;
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% - 4em);
    z-index: 1;
    height: 8em;
    background: url(../image/snow2.png) repeat-x top center/auto 100%;
    pointer-events: none;
    filter: drop-shadow(0 9px 6px rgb(135 206 250/50%))
}

#home_cover>.inner {
    padding-block-end: 0;
    overflow: hidden
}

#home_cover>.inner::after {
    content: '';
    display: block;
    width: 100%;
    max-width: 1440px;
    aspect-ratio: 232/33;
    margin-inline: auto;
    background: url(../image/snowFooter.png) no-repeat bottom center/cover;
    pointer-events: none;
    position: relative;
    z-index: 2
}

#home_cover .bg_container {
    background-image: linear-gradient(180deg, #191970, #87cefa);
    background-repeat: no-repeat;
    background-size: auto 200%;
    background-position-y: 100%;
    transition: background-position 1s
}

@media only screen and (max-width:640px) {
    #home_cover>.inner::after {
        aspect-ratio: 4.7/1;
        background-size: auto 100%;
        background-position-x: 0
    }
}

#canvas_snow {
    background: unset;
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    pointer-events: none
}

@media(prefers-color-scheme:dark) {
    #home_cover {
        background-image:
            url(../image/snowFooter.png),
            url(../image/bg-night.png);
        background-position: center bottom, top center
    }

    #home_cover::before {
        content: unset
    }

    #home_cover .bg_container {
        background-position-y: 0%
    }
}