footer{
    margin: auto;
    padding: 0 5%;
    background-color: gray;
}
footer a{
    color: white;
    text-decoration: none;
}
.footer-list{
    display: flex;
    flex-wrap: wrap;
    padding: 3vh 0;
    border-bottom: 1px solid white;
}
.footer-contents::before{
    color: white;
    content: "▶";
}
.footer-contents{
    font-size: 0.9vw;
    box-sizing: border-box;
    width: calc(100% / 6);
}
.footer-other{
    display: flex;
    justify-content: space-between;
    padding: 3vh 0;
    font-size: 1.5vw;
}
.footer-info{
    display: flex;
    justify-content: space-evenly;
    width: 50%;
}
.footer-info-line{
    border-right: 1px solid white;
}
.footer-copyright{
    display: block;
    margin: auto;
    color: white;
}

.footer-contents-mark{
    display: none;
}

@media screen and (max-width: 1024px) {
    .footer-list{
        padding: 2vh 0;
    }
    .footer-other{
        padding: 2vh 0;
    }
}

@media screen and (max-width: 480px){
    footer{
        margin: 0;
        width: 100%;
        padding: 0;
    }
    .footer-list{
        padding: 0;
        display: block;
        border-bottom: none;
        flex-wrap: nowrap;
        width: 100%;
    }
    .footer-contents::before{
        display: none;
    }
    .footer-contents{
        border-bottom: 1px solid white;
        text-align: left;
        padding: 1vh 10%;
        display: block;
        font-size: 14px;
        position: relative;
        width: 100%;
    }
    .footer-contents-mark{
        display: block;
        color: white;
        position: absolute;
        top: 1vh;
        left: 90vw;
        z-index: 1;
    }
    .footer-other{
        display: block;
        padding: 15px 0;
    }
    .footer-info{
        width: 100%;
        padding: 1vh 0;
    }
    .footer-info a{
        display: block;
        width: 50%;
        text-align: center;
        font-size: 11px;
    }
    .footer-copyright{
        text-align: center;
        font-size: 11px;
        padding-top: 1vh;
    }
}