@charset "UTF-8";
:root {
    --office1: #1d2088;
    --office2: #004fb3;
    --office3: #0077ca;
    --office4: #009bcf;
    --office5: #00bec7;
    --office6: #06debc;
}

#staff_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 3vw 4%;
}

#staff_wrap.no_photo .staff_box {
    background-color: white;
}

.staff_box {
    width: 22%;
    background-color: var(--bg-color);
    text-align: center;
    line-height: 1;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.05);
}

.office {
    color: white;
    font-size: max(1.1vw, 1.4rem);
    padding: 0.5em 0.5em 0.6em;
    letter-spacing: 0.1em;
}
.hokkaido .office {background-color: var(--office1)}
.tokyo .office {background-color: var(--office2)}
.chiba .office {background-color: var(--office3)}
.saitama .office {background-color: var(--office4)}
.ibaraki .office {background-color: var(--office5)}
.miyagi .office {background-color: var(--office6)}

.staff_box img {
    width: 100%;
    padding: 1.5vw 1.5vw 1vw;
}

.post {
    font-size: max(1.2vw, 1.5rem);
    letter-spacing: 0.1em;
    position: relative;
    padding-bottom: 0.5em;
    margin-bottom: 0.8em;
}

.post:after {
    content: "";
    display: block;
    width: 2.5em;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

#staff_wrap.no_photo .post {
    margin-top: 1em;
}

.tokyo .post:after {background-color: var(--office1);}
.chiba .post:after {background-color: var(--office2);}
.saitama .post:after {background-color: var(--office3);}
.ibaraki .post:after {background-color: var(--office4);}
.miyagi .post:after {background-color: var(--office5);}
.hokkaido .post:after {background-color: var(--office6);}

.name {
    font-size: max(1.6vw, 1.8rem);
    letter-spacing: 0.1em;
    margin-bottom: 2vw;
}

@media all and (max-width: 767px) {
    #staff_wrap {
        gap: 5vw 6%;
    }

    .staff_box {
        width: 47%;
    }

    .office {
        font-size: max(2vw, 1.2rem);
        letter-spacing: 0.1em;
    }

    .staff_box img {
        padding: 2.5vw 2.5vw 2vw;
    }

    .post {
        font-size: max(2vw, 1.2rem);
    }

    .name {
        font-size: max(2.8vw, 1.6rem);
        margin-bottom: 5vw;
    }
}