@charset "UTF-8";

footer {
    padding-top:70px;
    padding-bottom:30px;
}
footer .flex {
    gap:var(--blankXL2);
}
footer .sitename {
    width:min(19.792vw,152px);
}
footer .footer_nav {
    flex:1;
}
footer .footer_sitemap {
    display: flex;
    gap:var(--blankM);
    flex-flow: wrap;
}
footer .footer_sitemap + .footer_sitemap {
    margin-top:var(--blankM);
}
footer .footer_sitemap a {
    font:var(--hfont2);
    letter-spacing: 0.5px;
}
footer .sns_nav {
    display: flex;
    gap:var(--blankM);
    margin-top:var(--blankM);
}
footer .sns_nav li {
    width:30px;
}
footer .footer-snav {
    display: flex;
    justify-content: flex-end;
    margin-top:var(--blankM2);
    gap:0.5em;
}
footer .footer-snav *{
    font:var(--hfont2);
    letter-spacing: 0.5px;
}
footer .copyright {
    text-align: center;
    color:white;
    opacity:0.5;
    font:var(--hfont2);
    margin-top:var(--blankXS);
}

@media (max-width:1279px)  {
    footer .sitename {
        width: min(19.792vw, 110px);
        }
    }
@media (max-width:1024px)  {
    footer {
        padding-top:calc(var(--blankL) - 8px);
        padding-bottom:calc(var(--blankL2) + 6px);
    }
    footer .outer .container > .flex {
    flex-direction: column;
    align-items: center;
    gap:var(--blankM);
}
    footer .sns_nav{
        width:100%;
        justify-content: center;
        margin-top:0;
    }
    footer .sitename {
        width: min(25.581vw, 110px);
        padding-top: var(--blankXS);
        }
    .footer_nav {
        padding:0 12px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    footer .footer_sitemap {
        flex-flow: column;
        gap:var(--blankM3);
    }
    footer .footer_sitemap + .footer_sitemap {
    margin-top: 0;
}
    footer .footer-snav{
        width:100%;
        justify-content: center;
        margin-top:var(--blankM);
    }
    footer .copyright {
        margin-top: var(--blankS);
    }
}
.totop_btn {
    display: flex;
    width:var(--blankM);
    height:var(--blankM);
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    background-color: var(--darkgray);
    border-radius: 50%;
    position:sticky;
    margin:0 0 var(--blankM3) auto;
    right:var(--outergap);
    bottom:var(--blankM3);
    padding:10px;
    z-index: 9;
    opacity:0;
    transition:all .3s var(--ease);
}
.totop_btn img {
    width:3px;
    height:auto;
}
.totop_btn.on {
    opacity:1;
}

@media (max-width:768px)  {
footer {
    padding-top:40px;
    padding-bottom:var(--blankM);
}
.totop_btn {
    width:37px;
    height:37px;
    bottom:var(--blankM3);
}
}