/* CONTACT */
#footer-contact hgroup span[lang="ja"]::before {
    background:var(--color-white);
}
#footer-contact p {
    text-align:center;
    color:var(--color-white);
    margin-top:var(--margin);
    font-size:1.1em;
}
#footer-contact ul {
    margin-top:calc(var(--margin) * 1.5);
}
#footer-contact ul li {
    padding-left:5%;
    padding-right:5%;
    text-align:center;
}
#footer-contact ul li a {
    color:var(--color-blue);
}
#footer-contact ul li a figure {
    width:130px;
    height:130px;
    border:solid 1px var(--color-white);
    border-radius:100%;
    background:var(--color-white);
    display:flex;
    align-items: center;
    justify-content: center;
    margin-bottom:20px;
    transition:var(--transition);
    margin-inline:auto;
}
#footer-contact ul li a:hover figure {
    border:solid 1px var(--color-blue);
    background:var(--color-light-glass);
}

#contact #footer-contact {
    display:none;
}

body > footer #footer-nav ,
body > footer #footer-group {
    padding-top:calc(var(--section-space) / 2);
    padding-bottom:calc(var(--section-space) / 2);
}
body > footer #footer-nav > .flex ,
body > footer #footer-group {
    gap:var(--super-wide-gap);
}
body > footer #footer-nav h1 ,
body > footer #footer-group h2 {
    width:200px;
}

body > footer .nav-wrapper {
    display:flex;
    flex-direction: column;
    height:100%;
}
body > footer .nav-wrapper > div:first-of-type {
    flex:1;
}
body > footer .nav-wrapper .sub > div:first-of-type {
    margin-top:var(--margin);
    padding-bottom:calc(var(--padding) / 2);
    border-bottom:solid 1px var(--color-black);
}
body > footer .nav-wrapper .sub address {
    gap:5px var(--gap);
}
body > footer .nav-wrapper .sub .sns {
    padding-right:var(--padding);
}
body > footer .nav-wrapper .sub > div:last-of-type {
    margin-top:calc(var(--padding) / 2);
}
body > footer .nav-wrapper .sub > div:last-of-type p {
    color:var(--color-darkgray);
} 
body > footer .nav-wrapper .buttons {
    gap:30px;
}

body > footer #footer-group h3 {
    text-align: center;
    border:solid 1px var(--color-black);
    font-size:0.9em;
    line-height:1;
    padding:5px;
}
body > footer #footer-group ul {
    margin-top:20px;
}
body > footer #footer-group li picture {
    display:flex;
    align-items: center;
    justify-content: center;
    height:80px;
}
body > footer #footer-group li img {
    width:100%;
    max-width:80%;
    max-height:80px;
}

body > footer address {
    font-size:1em;
}


@media (max-width : 1060px) {
    body > footer .nav-wrapper {
        gap:var(--gap);
    }
    body > footer .nav-wrapper > div {
        flex-direction: column;
    }
    body > footer .nav-wrapper > div .buttons {
        flex-direction: row;
    }
    body > footer #footer-nav > div ,
    body > footer #footer-group {
        gap:calc(var(--gap) * 2) !important;
    }
}
@media (max-width : 920px) {
    body > footer #footer-group {
        flex-direction: column;
    }
    body > footer #footer-group h2 {
        margin-inline:auto;
    }
}
@media (max-width : 720px) {
    #footer-contact ul li {
        padding-left:0;
        padding-right:0;
    }
    #footer-contact ul li a figure {
        width:90px;
        height:90px;
    }

    body > footer #footer-nav h1 {
        margin-inline:auto;
    }
    body > footer #footer-group {
        padding-bottom:60px;
    }
}
@media (max-width : 520px) {
    body > footer #footer-nav > div {
        flex-direction: column;
    }
    body > footer .nav-wrapper > div .buttons {
        flex-direction: column;
        width:80%;
        margin-inline:auto;
    }
    body > footer .nav-wrapper .sub > div {
        flex-direction: column;
    }
    body > footer .nav-wrapper .sub address {
        flex-direction: column;
        align-items: center;
    }
    body > footer .nav-wrapper .sub .sns {
        padding-right:0;
    }
    body > footer .nav-wrapper .sub > div:last-of-type ul {
        width:100%;
    }
    body > footer .nav-wrapper .sub > div:last-of-type ul li {
        text-align:center;
    }

    body > footer .main-nav {
        display:none;
    }
}