@charset "utf-8";

/**
FOOTER
**/
#footer {
    .footer {
        background-color:var(--color_main);
        padding:30px 0 35px;
        .footer_inner {
            width:calc(100% - 60px);
            max-width:1200px;
            margin:0 auto;
            position:relative;
            .footer_menu {
                display:grid;
                grid-template-columns:repeat(2,auto);
                grid-column-gap:30px;
                align-items:center;
                justify-content:center;
                margin-bottom:45px;
                .menu-fmenu-container {
                    .menu {
                        display:flex;
                        font-size:1.6rem;
                        column-gap:1.5em;
                        li {
                            a {
                                color:#FFFFFF;
                                font-weight:500;
                                letter-spacing:.08em;
                            }
                        }
                    }
                }
                .menu_inner {
                    display:flex;
                    align-items:center;
                    justify-content:start;
                    column-gap:30px;
                    .instagram {
                        width:23px;
                    }
                    .recruit {
                        font-size:1.6rem;
                        color:#FFFFFF;
                        font-family: "dnp-shuei-mgothic-std", sans-serif;
                        letter-spacing:.08em;
                        width:114px;
                        height:36px;
                        border:2px solid #FFFFFF;
                        border-radius:18px;
                        display:grid;
                        align-items:center;
                        justify-content:center;
                        padding-bottom:1px;
                    }
                }
            }
            .contact_box {
                display:grid;
                grid-template-columns:repeat(2,auto);
                align-items:center;
                justify-content:center;
                grid-column-gap:30px;
                margin-bottom:50px;
                dl {
                    display:grid;
                    grid-row-gap:10px;
                    dt {
                        a {
                            font-size:3.6rem;
                            color:#FFFFFF;
                            font-weight:500;
                            letter-spacing:.08em;
                            pointer-events:none;
                            & > span {
                                font-size:6.0rem;
                                letter-spacing:.1em;
                                span {
                                    display: inline-block;
                                    transform: translateY(-.1em);
                                }
                            }
                        }
                    }
                    dd {
                        font-size:1.6rem;
                        color:#FFFFFF;
                        font-weight:500;
                        letter-spacing:.08em;
                        a {
                            color:#FFFFFF;
                            text-decoration:underline;
                            margin-left:1.5em;
                        }
                    }
                }
                .mail {
                    font-size:1.8rem;
                    width:330px;
                    height:76px;
                    background-color:#FFFFFF;
                    border-radius:38px;
                    color:var(--color_main);
                    font-weight:600;
                    display:grid;
                    align-items:center;
                    justify-content:center;
                    letter-spacing:.08em;
                    border:2px solid #FFFFFF;
                }
            }
            .footer_logo {
                width:140px;
                margin:0 auto 30px;
            }
            .totop {
                position:absolute;
                width:30px;
                z-index:99;
                top:-120px;
                right:calc(50% - 50vw + 88px);
                cursor: pointer;
            }
        }
        .copy {
            font-size:1.2rem;
            color:#FFFFFF;
            text-align:center;
            letter-spacing:.08em;
        }
    }
}

@media (hover:hover) {

    #footer {
        .footer {
            .footer_inner {
                .footer_menu {
                    .menu_inner {
                        .instagram {
                            &:hover {
                                transform:scale(1.05);
                                opacity:1;
                            }
                        }
                        .recruit {
                            &:hover {
                                opacity:1;
                                background-color:#FFFFFF;
                                color:var(--color_main);
                            }
                        }
                    }
                }
                .contact_box {
                    .mail {
                        &:hover {
                            opacity:1;
                            background-color:var(--color_main);
                            color:#FFFFFF;
                        }
                    }
                }
                .totop {
                    transition-property: transform;
                    transition-duration: .3s;
                    &:hover {
                        opacity:1;
                        transform:translateY(-10px);
                    }
                }
            }
        }
    }
    
}

@media screen and (max-width:1380px) {

/**
FOOTER
**/
#footer {
    .footer {
        .footer_inner {
            .totop {
                right:0;
            }
        }
    }
}

}

@media screen and (max-width:1024px) {

    #footer {
        .footer {
            .footer_inner {
                width:calc(100% - 50px);
                .footer_menu {
                    grid-template-columns:1fr;
                    grid-row-gap:30px;
                    justify-items:center;
                    margin-bottom:30px;
                    .menu-fmenu-container {
                        .menu {
                            display:flex;
                            font-size:1.6rem;
                            column-gap:1.5em;
                            li {
                                a {
                                    color:#FFFFFF;
                                    font-weight:500;
                                    letter-spacing:.08em;
                                }
                            }
                        }
                    }
                    .menu_inner {
                        display:flex;
                        align-items:center;
                        justify-content:start;
                        column-gap:30px;
                        .instagram {
                            width:23px;
                        }
                        .recruit {
                            font-size:1.6rem;
                            color:#FFFFFF;
                            font-family: "dnp-shuei-mgothic-std", sans-serif;
                            letter-spacing:.08em;
                            width:114px;
                            height:36px;
                            border:2px solid #FFFFFF;
                            border-radius:18px;
                            display:grid;
                            align-items:center;
                            justify-content:center;
                            padding-bottom:1px;
                        }
                    }
                }
                .contact_box {
                    grid-template-columns:1fr;
                    justify-items:center;
                    grid-row-gap:30px;
                    margin-bottom:45px;
                }
            }
        }
    }
    
}

@media screen and (max-width:768px) {

    #footer {
        .footer {
            padding:25px 0 20px;
            .footer_inner {
                width:calc(100% - 40px);
                .footer_menu {
                    grid-row-gap:20px;
                    margin-bottom:20px;
                    .menu-fmenu-container {
                        .menu {
                            flex-wrap:wrap;
                            font-size:1.2rem;
                            row-gap:.85em;
                            max-width:22em;
                            justify-content:center;
                        }
                    }
                    .menu_inner {
                        display:flex;
                        align-items:center;
                        justify-content:start;
                        column-gap:30px;
                        .instagram {
                            width:18px;
                        }
                        .recruit {
                            font-size:1.2rem;
                            width:86px;
                            height:28px;
                        }
                    }
                }
                .contact_box {
                    grid-row-gap:10px;
                    margin-bottom:25px;
                    dl {
                        grid-row-gap:6px;
                        justify-items:center;
                        text-align:center;
                        order:1;
                        dt {
                            a {
                                font-size:1.7rem;
                                pointer-events: all;
                                span {
                                    font-size:2.75rem;
                                    letter-spacing:.1em;
                                }
                            }
                        }
                        dd {
                            font-size:1.1rem;
                            display:grid;
                            grid-row-gap:.66em;
                            a {
                                font-size:1.2rem;
                                margin-left:0;
                            }
                        }
                    }
                    .mail {
                        font-size:1.3rem;
                        width:220px;
                        height:40px;
                        border-radius:20px;
                    }
                }
                .footer_logo {
                    width:95px;
                    margin:0 auto 15px;
                }
                .totop {
                    display:none;
                }
            }
            .copy {
                font-size:1.0rem;
            }
        }
    }

}