@charset "utf-8";

footer {
    .footer_contact {
        padding:60px 0;
        background:url(../img/common/footer_bg.jpg) no-repeat center center/cover;
        position:relative;
        &::before {
            content:'';
            display:block;
            width:100%;
            height:100%;
            background-color:rgba(0,0,0,.3);
            position:absolute;
            left:0;
            top:0;
            z-index:1;
        }
        .footer_contact_inner {
            width: calc(100% - 60px);
            max-width: 1300px;
            margin:0 auto;
            text-align:center;
            position:relative;
            z-index:2;
            h2 {
                font-size:7.0rem;
                color:#FFFFFF;
                font-weight:500;
                line-height:1.4;
                margin-bottom:.5em;
                span {
                    display:block;
                    font-size:2.0rem;
                }
            }
            p {
                color:#FFFFFF;
                line-height:1.75;
                margin-bottom:2.5em;
            }
            .contents_inner {
                display:grid;
                grid-template-columns:repeat(2,1fr);
                align-items:center;
                .tel {
                    padding:40px 0;
                    border-right:3px solid #FFFFFF;
                    a {
                        font-size:5.0rem;
                        color:#FFFFFF;
                        font-weight:600;
                        display:grid;
                        grid-template-columns:repeat(2,auto);
                        justify-content:center;
                        align-items:center;
                        grid-gap:.15em;
                    }
                    p {
                        margin:0;
                        padding-top:.5em;
                    }
                }
                .btn {
                    width:300px;
                    height:70px;
                }
            }
        }
    }
    .footer {
        background-color: #f9f9f9;
        padding:50px 0;
        .footer_inner {
            width: calc(100% - 60px);
            max-width: 1300px;
            margin:0 auto;
            display: grid;
            grid-template-columns: repeat(2,auto);
            align-items: center;
            justify-content: space-between;
            dl {
                .logo {
                    max-width: 240px;
                    margin-bottom: 40px;
                }
            }
            dd {
                margin-bottom: 1.5em;
                line-height: 1.6;
                &.sns {
                    display: flex;
                    margin-bottom: 0;
                    .instagram {
                        width: 40px;
                    }
                }
                &.cpy {
                    & + .addr {
                        margin-bottom: .5em;
                    }
                }
                &.addr {
                    .tit {
                        display: block;
                        font-weight: 700;
                    }
                }
            }
            .menuwrap {
                display:grid;
                grid-template-columns:repeat(3,auto);
                grid-gap:0 2em;
                font-size:1.6rem;
                .menu {
                    li {
                        a {
                            color:#333333;
                        }
                        .sub-menu {
                            font-size:1.4rem;
                            margin-top:1.25em;
                            padding-left:.5em;
                            li {
                                &:not(:last-child) {
                                    margin-bottom:.66em;
                                }
                                a {
                                    &::before {
                                        content:'-';
                                        margin-right:.33em;
                                    }
                                }
                            }
                        }
                    }
                }
                .menu-fmenu1-container {
                    .menu {
                        height:100%;
                        display:grid;
                        grid-template-rows:repeat(3,1fr);
                    }
                }
                .menu-fmenu2-container {
                    .menu {
                        height:100%;
                        display:grid;
                        grid-template-columns:repeat(2,1fr);
                        grid-gap:2em;
                    }
                }
                .menu-fmenu3-container {
                    .menu {
                        height:100%;
                        display:grid;
                        grid-template-rows:repeat(2,1fr);
                    }
                }
            }
        }
    }
    .footer2 {
        background-color:var(--color_main);
            .footer2_inner {
                width: calc(100% - 60px);
                max-width: 1300px;
                margin:0 auto;
                height:60px;
                display: grid;
                grid-template-columns: repeat(2,auto);
                align-items: center;
                justify-content: space-between;
                .fmenu {
                    font-size:1.2rem;
                    color:#FFFFFF;
                    display:grid;
                    grid-template-columns:repeat(3,auto);
                    align-items:center;
                    grid-gap:.75em;
                    a {
                        color:#FFFFFF;
                    }
                }
                .copyright {
                    font-size:1.2rem;
                    color:#FFFFFF;
                }
            }
    }
}

.f_bnr {
    position:fixed;
    top:150px;
    right:0;
    display:block;
    writing-mode:vertical-rl;
    font-size:1.4rem;
    font-weight:800;
    letter-spacing:.7em;
    line-height:1.5;
    padding:5em 1.5em 1em;
    z-index:99;
    border-radius:1.25em;
    background:url(../img/common/bnrobj.png) no-repeat center top .5em/96% auto #fbf2da;
}

@media ( hover:hover ) {

    footer {
        .footer {
            .footer_inner {
                .menuwrap {
                    .menu {
                        li {
                            a {
                                &:hover {
                                    color:var(--color_main);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    .f_bnr {
        transition:.3s;
        &:hover {
            opacity:1;
             filter:brightness(.9);       
        }
    }

}

@media screen and (max-width:1024px){
    
    footer {
        .footer_contact {
            .footer_contact_inner {
                h2 {
                    font-size:5.0rem;
                    span {
                        font-size:1.6rem;
                    }
                }
                .contents_inner {
                    .tel {
                        a {
                            font-size:4.0rem;4
                        }4
                    }4
                }
            }
        }
        .footer {
            .footer_inner {
                grid-template-columns: 1fr;
                grid-gap:50px;
                justify-items:center;
                dd {
                    text-align:center;
                    &.sns {
                        justify-content:center;
                    }
                }
            }
        }
    }
    
    .f_bnr {
        letter-spacing:.5em;
        font-size:1.3rem;
        line-height:1.2;
        padding:4em 1em 1em;
    }
    
}

@media screen and (max-width:768px){
    
    footer {
        .footer_contact {
            padding:60px 0;
            .footer_contact_inner {
                width: calc(100% - 40px);
                h2 {
                    font-size:4.0rem;
                    span {
                        font-size:1.5rem;
                    }
                }
                p {
                    margin-bottom:2.5em;
                    font-size:1.4rem;
                }
                .contents_inner {
                    grid-template-columns:1fr;
                    width:100%;
                    max-width:320px;
                    margin:0 auto;
                    .tel {
                        padding:0 0 20px;
                        border-right:none;
                        border-bottom:2px solid #FFFFFF;
                        margin-bottom:20px;
                        a {
                            font-size:min(10vw,4.0rem);
                            img {
                                width:.8em;
                                transform:translateY(.1em);
                            }
                        }
                    }
                    .btn {
                        max-width:300px;
                        width:90%;
                        height:70px;
                    }
                }
            }
        }
        .footer {
            background-color: #f9f9f9;
            padding:50px 0;
            .footer_inner {
                dl {
                    .logo {
                        margin:0 auto 20px;
                    }
                }
                dd {
                    font-size:1.4rem;
                }
                .menuwrap {
                    grid-template-columns:repeat(2,auto);
                    grid-gap:2em;
                    font-size:1.4rem;
                    & > div {
                        display:contents;
                    }
                    .menu {
                        li {
                            .sub-menu {
                                font-size:1.3rem;
                            }
                        }
                    }
                    .menu-fmenu1-container {
                        .menu {
                            grid-template-rows:repeat(3,auto);
                            align-content:start;
                            grid-gap:1em;
                        }
                    }
                    .menu-fmenu2-container {
                        .menu {
                            display:contents;
                        }
                    }
                    .menu-fmenu3-container {
                        .menu {
                            grid-template-rows:repeat(3,auto);
                            align-content:start;
                            grid-gap:1em;
                        }
                    }
                }
            }
        }
        .footer2 {
                .footer2_inner {
                    width: calc(100% - 40px);
                    height:auto;
                    grid-template-columns: 1fr;
                    padding:20px 0;
                    grid-gap:15px;
                    .fmenu {
                        grid-gap:.5em;
                        justify-content:center;
                    }
                    .copyright {
                        text-align:center;
                        line-height:1.5;
                    }
                }
        }
    }
    
    .f_bnr {
        display:none;
    }
    
}