@font-face {
    font-family: 'didot';
    src: url(/recruit/new_graduate/font/didot_bold.otf);
}
.wrap{
    font-size: 10px;
}
.sp_header{
    display: none;
}
.sp_menu{
    display: none;
}

.foot_menu{
    width: 120em;
    margin: 15em auto 10em;
    display: flex;
    flex-wrap: wrap;
    gap: 4em 1.25%;
}
.foot_menu li{
    width: 32.5%;
    aspect-ratio: 390/80;
    background: #000;
}
.foot_menu li a{
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.foot_menu strong{
    margin: 0 0 .25em;
    font-family: 'didot',serif;
    font-weight: bold;
    font-size: 2em;
}
.foot_menu span{
    font-size: 1.6em;
}

@media screen and (max-width:1240px) {
    .wrap{
        font-size: .78vw;
    }
}

@media screen and (max-width:768px) {
    .wrap{
        font-size: 2.66666vw;
    }
    .sp_header{
        height: 6em;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .wrap .sp_header h2{
        font-size: 2em;
        font-family: 'didot',serif;
        font-weight: bold;
        letter-spacing: 0;
    }
    .sp_header .hamburger{
        width: 1.8em;
        height: 1.2em;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 3em;
    }
    .sp_header .hamburger span{
        display: block;
        width: 100%;
        height: 1px;
        background: #000;
        transition: .2s;
    }
    .sp_header .hamburger span::before,.sp_header .hamburger span::after{
        content: '';
        width: 100%;
        height: 1px;
        background: #000;
        display: block;
        position: absolute;
        left: 0;
        transition: .2s;
    }
    .sp_header .hamburger span::before{
        top: 0;
    }
    .sp_header .hamburger span::after{
        bottom: 0;
    }
    .sp_header .hamburger.active span{
        background: none;
    }
    .sp_header .hamburger.active span::before{
        top: 50%;
        transform: rotate(45deg) translateY(-50%);
    }
    .sp_header .hamburger.active span::after{
        bottom: 50%;
        transform: rotate(-45deg) translateY(50%);
    }

    .sp_menu{
        width: 100%;
        position: absolute;
        z-index: 10;
        background: #fff;
    }
    .main_nav li{
        height: 6em;
        padding: 0 0 0 2em;
        border-top: 1px solid #D6D6D6;
    } 
    .main_nav a{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .main_nav a strong{
        font-family: serif;
        margin: 0 1.4285em 0 0;
        font-size: 1.4em;
        letter-spacing: .1em;
    }
    .main_nav a span{
        font-size: 1.2em;
    }
    .main_sns{
        height: 10em;
        margin: 0 0 0 2em;
        display: flex;
        align-items: center;
    }
    .main_sns li + li{
        margin: 0 0 0 3em;
    }
    .foot_menu{
        width: 100%;
        margin: 9em auto 0;
        gap: .5em 0;
    }
    .foot_menu li{
        width: 100%;
    }
}