@charset "utf-8";

/**
FOOTER
**/
#footer {
    .footer_contact {
        &::before {
            content:'';
            display:block;
            width:100%;
            height:400px;
            background:url(../img/common/contact_bg.jpg) no-repeat center center/cover;
        }
        &::after {
            content:'';
            display:block;
            width:100%;
            height:150px;
            background-color:var(--color_bg);
        }
        .footer_contact_inner {
            display:grid;
            grid-template-columns:repeat(2,1fr);
            grid-column-gap:1px;
            a {
                display:grid;
                justify-items:center;
                align-content:center;
                padding:80px 40px 50px;
                color:#FFFFFF;
                h3 {
                    display:grid;
                    justify-items:center;
                    grid-row-gap:1.33em;
                    color:#FFFFFF;
                    font-size:1.6rem;
                    font-weight:500;
                    letter-spacing:.1em;
                    .font_en {
                        font-size:4rem;
                        letter-spacing:.03em;
                        font-weight:300;
                    }
                }
                &.members {
                    background-color:var(--color_def);
                }
                &.contact {
                    background-color:var(--color_main);
                }
                p {
                    font-size:1.6rem;
                    color:#FFFFFF;
                    line-height:2;
                    max-width:400px;
                    margin-bottom:2em;
                }
                .arrow {
                    background-color:#FFFFFF;
                    display:grid;
                    width:60px;
                    height:60px;
                    grid-template-columns:13px;
                    align-items:center;
                    justify-content:center;
                    border-radius:50%;
                    justify-self:end;
                }
            }
        }
    }
    .footer {
        padding:120px 0 90px;
        .footer_inner {
            max-width:1200px;
            width:calc(100% - 60px);
            margin:0 auto;
            padding-bottom:100px;
            display:grid;
            grid-template-columns:80px auto;
            align-items:center;
            justify-content:space-between;
            border-bottom:1px solid #dadada;
            .menu-fmenu-container {
                .menu {
                    display:flex;
                    flex-wrap:wrap;
                    font-size:1.5rem;
                    column-gap:4em;
                }
            }
        }
        .footer_copyright {
            max-width:1200px;
            width:calc(100% - 60px);
            margin:0 auto;
            padding-top:50px;
            display:grid;
            grid-template-columns:repeat(2,auto);
            align-items:end;
            justify-content:space-between;
            .menu-fmenu2-container {
                .menu {
                    display:grid;
                    font-size:1.4rem;
                    grid-template-columns:repeat(2,auto);
                    align-items:center;
                    justify-content:center;
                    li {
                        &:first-child {
                            margin-right:2em;
                        }
                        a {
                            color:#ababab;
                        }
                    }
                }
            }
            .copyright {
                font-family: "Poppins", sans-serif;
                color:#ababab;
                font-size:1.2rem;
                text-align:center;
            }
        }
    }
}

@media (hover:hover) {

}

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

}

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

    #footer {
        .footer_contact {
            &::before {
                height:auto;
                aspect-ratio:3;
            }
            &::after {
                height:100px;
            }
            .footer_contact_inner {
                a {
                    padding:60px 30px 40px;
                    h3 {
                        font-size:1.4rem;
                        .font_en {
                            font-size:3.6rem;
                        }
                    }
                    p {
                        font-size:1.5rem;
                    }
                }
            }
        }
        .footer {
            padding:90px 0 60px;
            .footer_inner {
                width:calc(100% - 50px);
                padding-bottom:80px;
                grid-template-columns:1fr;
                justify-items:center;
                grid-row-gap:50px;
                .logo {
                    width:80px;
                }
                .menu-fmenu-container {
                    .menu {
                        gap:1em 2em;
                    }
                }
            }
        }
    }

}

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

    #footer {
        .footer_contact {
            &::after {
                height:50px;
            }
            .footer_contact_inner {
                grid-template-columns:1fr;
                a {
                    padding:40px 20px 20px;
                    h3 {
                        grid-row-gap:.66em;
                        .font_en {
                            font-size:3rem;
                        }
                    }
                    p {
                        font-size:1.4rem;
                        margin-bottom:1em;
                    }
                    .arrow {
                        width:40px;
                        height:40px;
                    }
                }
            }
        }
        .footer {
            padding:50px 0 30px;
            .footer_inner {
                width:calc(100% - 40px);
                padding-bottom:30px;
                grid-row-gap:30px;
                .menu-fmenu-container {
                    .menu {
                        font-size:1.4rem;
                        justify-content:center;
                    }
                }
            }
            .footer_copyright {
                width:calc(100% - 40px);
                padding-top:30px;
                grid-template-columns:1fr;
                justify-items:center;
                grid-row-gap:30px;
                .menu-fmenu2-container {
                    .menu {
                        font-size:1.3rem;
                    }
                }
            }
        }
    }

}