@charset "utf-8";

footer {
    background-color: #fff
}

.footer-box {
    position: relative;
    padding: 0 50px 0
}

.footer-box dl,
.footer-box ul {
    position: relative;
    overflow: hidden;
    clear: both;
    padding: 50px 0 70px
}

.footer-box .logo {
    float: left;
    width: 180px;
    margin-right: 70px
}

.footer-box .logo a {
    display: block;
    background: url(../images/logo-h21.png) 0 0 no-repeat;
    filter: invert(100%);
    width: 180px;
    height: 51px;
    background-size: 180px 51px
}

.footer-box dl dd,
.footer-box ul li {
    float: left;
    padding-right: 30px
}

.footer-box dl dd {
    font-size: 1.9rem
}

.footer-box dl dd .text-bold {
    font-weight: 600;
}

.footer-box ul li {
    font-size: 1.5rem;
    line-height: 3.0rem;
    color: rgba(0, 0, 0, .35)
}

@media (max-width:1536px) {
    .footer-box .logo a {
        background-size: 85%;
    }
    .footer-box ul {
        padding: 30px 0;
    }
    .footer-box ul li {
        font-size: 1.4rem;
        line-height: 2.8rem;
    }
    .footer-box dl dd {
        font-size: 1.8rem;
    }    
}

@media (max-width:1024px) {
    .footer-box dl {
        position: static;
        overflow: visible;
        padding-bottom: 40px
    }

    .footer-box dl dd,
    .footer-box ul li {
        padding-right: 0
    }

    .footer-box ul {
        padding: 0;
        max-width: 360px;
        clear: both
    }

    .footer-box dl dd {
        float: none;
        font-size: 1.7rem;
        line-height: 3.8rem
    }

    .footer-box ul li {
        font-size: 1.3rem;
        line-height: 2.6rem;
        padding-right: 10px
    }

    .footer-box ul li:last-child {
        padding-bottom: 70px
    }

    .footer-box .logo {
        position: absolute;
        bottom: 20px;
        right: 50px;
        width: 150px;
        margin-right: 0
    }

    .footer-box .logo a {
        width: 150px;
        height: 43px;
        background-size: 150px 43px
    }

    .footer-box .copy {
        position: absolute;
        bottom: 20px
    }
}

@media (max-width:640px) {
    .footer-box {
        position: relative;
        padding: 0 20px 50px
    }

    .footer-box .logo {
        right: 20px;
        float: none;
        width: 100px
    }

    .footer-box .logo a {
        width: 100px;
        height: 28px;
        background-size: 100px 28px
    }

    .footer-box ul li {
        font-size: 1.2rem
    }

    .footer-box ul li:last-child {
        padding-bottom: 45px
    }
}