:root{
    --font-family-zenkakugothic: "Zen Kaku Gothic New", sans-serif;
    --font-family-prompt: "Prompt", sans-serif;
    --color-black: #2F2222;
    --color-white: #F9F8F5;
    --color-yellow-orange: #B5A181;
    --color-line-color: #06C755;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-black: 900;
}

.content{
    background-color: #F6F2EB;
}

.content{
    width: 100%;
}

.content-in{
    max-width: 1366px;
    padding-block: min( 7.3206vw, 100px) 0;
    margin-inline: auto;
}

@media screen and (max-width: 768px) {
    .content-in{
        padding-block: min( 21.3333vw, 80px) 0;
    }
}

.main {
    background-color: #F6F2EB;
}

.main-inner{
    display: flex;
    gap: min( 15.885vw, 217px);
    padding-right: min(168px, 12.298vw);
}
@media screen and (max-width:768px) {
    .main-inner {
        padding-inline: 20px;
    }
}

.list-new-entry__headring-inner{
    width: fit-content;
    margin-inline: auto;
    font-size: 35px;
    color: var(--color-black);
    line-height: calc(56 / 35);
    letter-spacing: 0.1em;
    font-weight: var(--font-weight-bold);
}

.list-new-entry__headring-inner::after{
    content: "STAFF";
    display: block;
    margin-top: min( 1.1713vw, 16px);
    margin-bottom: min( 4.6852vw, 64px);
    font-size: 13px;
    letter-spacing: 0.2em;
    line-height: calc( 30/16);
    font-weight: var(--font-weight-medium);
    color: #B5A181;
    text-align: center;
}

@media screen and (max-width:768px) {
    .list-new-entry__headring-inner {
        font-size: 25px;
        text-align: center;
    }
}

.p-staff__dept-nav{
    position: sticky;
    left: min(40px, 2.9282vw);
    bottom: min(40px, 2.9282vw);
    display: flex;
    flex-shrink: 0;
    align-self: flex-end;
    font-weight: var(--font-weight-medium);
}

.p-staff__dept-nav-button{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.0248vw;
    transition: all 0.25s;
}

.p-staff__dept-nav-button:hover{
    opacity: .6;
}

.p-staff__dept-nav-label-number{
    font-size: 10px;
    font-family: var(--font-family-prompt);
    margin-top: 4px;
}

@media screen and (max-width: 768px) {
    .p-staff__dept-nav{
        display: none;
    }
}

.p-staff__dept-nav-button.is-active .p-staff__dept-nav-label {
    color: var(--color-yellow-orange);
    transition: 0.2s ease color;
}

.p-staff__dept-nav-item{
    margin-bottom: 16px;

}

.p-staff__content,
.p-staff__dept-content{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 128px;
}

@media screen and (max-width: 768px) {
    .p-staff__content,
    .p-staff__dept-content{
        gap: 80px;
}
}

.p-staff__dept-staffs{
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax(200px, 1fr));
    column-gap: 24px;
    row-gap: 32px;
}

@media screen and (max-width: 768px) {
    .p-staff__dept-staffs{
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax(157px, 1fr));
    column-gap: 21px;
    row-gap: 40px;
}
}

.p-staff__dept-title{
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    margin-bottom: 56px;
}

@media screen and (max-width: 768px) {
    .p-staff__dept-title{
        font-size: 17px;
        margin-bottom: 32px;
    }
}

.p-staff__dept-title-number{
    font-size: 10px;
    display: block;
    position: relative;
    width: fit-content;
    margin-bottom: 16px;
}

.p-staff__dept-title-number::after{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(100% + 6px);
    content: "";
    display: block;
    width: 15px;
    height: 1px;
    background-color: #707070;

}

.c-staff-image{
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .c-staff-image{
        margin-bottom: 10px;
    }
}

.c-staff-img{
    object-fit: cover;
    width: 100%;
}

.c-staff-position{
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
}

@media screen and (max-width: 768px) {
    .c-staff-position{
        font-size: 11px;
}
}

.c-staff-name{
    display: block;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    line-height: calc( 32/ 16);
}

@media screen and (max-width: 768px) {
    .c-staff-name{
        font-size: 14px;
    }
}