/* =====================================================
フッター
===================================================== */

.footer {
    background: #000;
    color: #fff;
    padding-top: 45px;
    padding-bottom: 35px;

    opacity: 0;
    transform: translateY(50px);

    transition: padding .6s ease;
}

@media screen and (min-width:480px) {
    .footer {
        padding-top: 60px;
    }
}

.footer-wrap {
    max-width: 1032px;
    margin: 0 auto;
}


/* =====================================================
アニメーション
===================================================== */

/* 初回表示 */

.footer.is-loaded {

    opacity: 1;
    transform: translateY(0);

    transition:
        opacity .8s ease,
        padding .6s ease;

}

/* 479→480 */

.footer.move-down {
    animation: footerMoveDown .45s ease forwards;
}

/* 480→479 */

.footer.move-up {
    animation: footerMoveUp .45s ease forwards;
}

@keyframes footerMoveDown {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(40px);
    }

}

@keyframes footerMoveUp {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-40px);
    }

}


/* -------------------------
SNS
------------------------- */

.social-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
    font-size: 17px;
}

@media screen and (min-width:480px) {

    .social-list {
        font-size: 21px;
    }

}


/* -------------------------
ナビゲーション
------------------------- */

.footer-nav-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin: 30px auto 0;
}

.footer-nav-item a {
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    transition: opacity .5s;
}

.footer-nav-item a:hover {
    opacity: .3;
}


/* -------------------------
コピーライト
------------------------- */

.footer-copyright {
    text-align: center;
    font-size: 11.5px;
    margin: 0 auto;
    padding: 40px 0 0;
}