@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);
}
}