@charset "utf-8";

/*-------------------------------------------------------------------------
#HEADER
-------------------------------------------------------------------------*/

.l-footer * {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 400;
    box-sizing: border-box;
}
.l-footer {
    background: url("../images/bg_footer.png") no-repeat center / cover;
}
.l-footer a:hover {
    text-decoration: none;
}

    .footer__inner {
        padding: 50px 0 17px;
    }
        .footer__top {
            display        : flex;
            justify-content: space-between;
            margin: 0 0 30px;
        }
            .footer__top-left {
                width: 580px;
                border-radius: 10px;
                overflow: hidden;
            }
                .footer__tel {
                    background-color: #fff;
                    display    : flex;
                    align-items: center;
                    padding: 14px 0 10px 20px;
                }
                    .footer__tel-head {
                        margin: 0 21px 0 0;
                        font-size  : 20px;
                        font-weight: 500;
                        color      : #001892;
                        line-height: 1.4;
                    }
                    .footer__tel-items {
                        font-size  : 50px;
                        font-weight: 900;
                        color      : #001892;
                        line-height: 1.1;
                    }
                    .footer__tel-items:before {
                        content: url("../images/icn_tel.png");
                        margin: 0 5px 0 0;
                    }
                .footer__info {
                    background-color: #001892;
                    padding: 9px 16px;
                }
                    .footer__text {
                        color: #fff;
                        line-height: 1.37;
                    }
            .footer__top-right {
                width: 485px;
            }
                [class*="footer__btn--"]{
                    width: 480px;
                    height: 60px;
                    border-radius: 10px;
                    display        : flex;
                    align-items    : center;
                    justify-content: center;
                    font-size  : 18px;
                    font-weight: 500;
                    color      : #fff;
                    letter-spacing: .1em;
                    transition: .2s;
                }
                .footer__btn--case {
                    background-color: #41BFD9;
                    box-shadow: 5px 5px 0 #138CB2;
                    margin: 0 0 15px;
                }
                .footer__btn--satei {
                    background-color: #F39800;
                    box-shadow: 5px 5px 0 #F37100;
                }
                [class*="footer__btn--"]:hover {
                    transform: translate(4px,4px);
                    text-decoration: none;
                    color: #fff;
                }
                .footer__btn--case:hover {
                    background-color: #74d7eb;
                    box-shadow: 1px 1px 0 #138CB2;
                }
                .footer__btn--satei:hover {
                    background-color: #f7b74d;
                    box-shadow: 1px 1px 0 #F37100;
                }
        .footer__list {
            display        : flex;
            justify-content: space-between;
            margin: 0 0 51px;
        }
            .footer__list-items {
                width: 150px;
                text-align: center;
            }
                .footer__list-link {
                    display        : flex;
                    align-items    : center;
                    justify-content: center;
                    background-color: #fff;
                    border: 2px solid #001892;
                    border-radius: 50px;
                    height: 50px;
                    color: #001892;
                    transition: .2s;
                }
                .footer__list-link:hover {
                    background-color: #001892;
                    color: #fff;
                }
        .footer__copy {
            color: #001892;
            text-align: center;
        }