/*メンバー紹介*/

.kv>img {
    object-position: 50% 0%;
}

main.member {
    background-image: url(../img/member/bg.png);
    background-size: cover;
    font-weight: 600;
    text-align: center;
    height: 500vw;
    max-height: 3200px;
}

main.member p {
    position: relative;
    line-height: 2em;
    font-size: 1.3rem;
    z-index: 10;
}


main.member h2 {
    position: relative;
    line-height: 1.5em;
    font-size: 1.8em;
    z-index: 10;
}

main.member .cnt {
    position: relative;
    width: 90%;
    max-width: 810px;
    margin: auto;
    z-index: 10;
    margin-bottom: 50px;
}


main.member .intr {
    position: relative;
    z-index: 10;
}

main.member .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2%;
    width: 840px;
    margin: auto;
}

main.member .grid a {
    display: block;
    background-color: black;
    color: #fff;
    font-size: 0.9em;
    padding: 5px 0;
    border-radius: 18px;
}

.fellow {
    padding-top: 70px;
    margin: 30px auto;
    position: relative;
}

.fellow img {
    width: 100%;
}

#imanari,
#ogawa,
#fukuoka,
#aonuma,
#michael {
    position: absolute;
    top: -180px;
    left: 0;
}

.imanari {
    width: 730px;
}

.ogawa {
    width: 1000px;
}

.fukuoka {
    width: 840px;
}

.aonuma {
    width: 910px;
}

.michael {
    width: 900px;
}

.prf {
    position: absolute;
    text-align: left;
    color: #fff;
    font-weight: 400;
}

.prf h3 {
    font-size: 1.5em;
    margin: 0;
    letter-spacing: 0.2em;
}

.prf .name {
    font-size: 1em;
    margin: 10px 0;
    color: #FFFF00;
}

.prf article {
    letter-spacing: 0.1em;
    line-height: 1.8em;
}

.imanari .prf {
    width: 350px;
    top: 150px;
    left: 320px;
}

.ogawa .prf {
    width: 300px;
    top: 180px;
    left: 220px;
}

.fukuoka .prf {
    width: 310px;
    top: 170px;
    left: 350px;
}

.aonuma .prf {
    width: 400px;
    top: 180px;
    left: 180px;
}

.aonuma .name {
    margin: 0;
}

.aonuma article {
    font-size: 0.95em;
}

.michael .prf {
    width: 450px;
    top: 165px;
    left: 410px;
}

.michael .name {
    margin: 0;
}

.michael article {
    font-size: 0.95em;
}


/**/

@media screen and (max-width:1200px) {
    .kv>.title>img {
        margin-left: 5%;
    }

    .breadcrumb {
        margin-left: 5%;
    }

}

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

    main.member {
        background-image: url(../img/member/bg_tab.png);
        height: auto;
        max-height: 10000px;
        overflow-x: hidden;
    }


    main.member .grid {
        display: block;
        width: 85vw;
        margin: auto;
    }

    main.member .grid a {
        display: inline-block;
        width: 25vw;
        font-size: 0.9em;
        padding: 5px 0;
        margin: 5px;
        border-radius: 18px;
    }

    .fellow {
        padding-top: calc(30vw + 100px);
        margin: 50px auto 30px;
        position: relative;
    }

    .fellow img {
        width: 45vw;
        position: absolute;
        z-index: 100;
    }



    .imanari,
    .ogawa,
    .fukuoka,
    .aonuma,
    .michael {
        width: 90vw;
    }

    .prf {
        position: relative;
        background-color: #000;
        padding: 25vw 3vw 3vw 18vw;
        border-radius: 10px;
        margin-left: auto;
    }

    .prf.lf {
        position: relative;
        background-color: #000;
        padding: 25vw 18vw 3vw 3vw;
        border-radius: 10px;
        margin-left: 0;
    }

    .prf h3 {
        font-size: 1.5em;
        margin: 0;
        letter-spacing: 0.2em;
    }

    .prf .name {
        font-size: 1em;
        margin: 10px 0;
        color: #FFFF00;
    }

    .prf article {
        letter-spacing: 0.1em;
        line-height: 1.8em;
    }

    .imanari .prf {
        width: 40vw;
        top: 0;
        left: 0;
    }

    .imanari img {
        top: calc(-30vw - 100px);
        left: -20vw;
        width: 40vw;
    }

    .ogawa .prf {
        width: 45vw;
        top: 15vw;
        left: 0;

    }

    .ogawa img {
        top: calc(-30vw - 150px);
        right: -10vw;
        width: 55vw;
    }

    .fukuoka.fellow {
        padding-top: calc(40vw + 100px);
    }

    .fukuoka .prf {
        width: 40vw;
        top: 0;
        left: 0;
    }

    .fukuoka img {
        top: -40vw;
        left: -20vw;
    }

    .aonuma.fellow {
        padding-top: calc(20vw + 100px);
    }

    .aonuma .prf {
        width: 40vw;
        top: 5vw;
        left: 0;
    }

    .aonuma img {
        top: calc(-30vw - 50px);
        right: -20vw;
    }


    .michael .prf {
        width: 40vw;
        top: -10vw;
        left: 0;
    }

    .michael img {
        top: calc(-15vw - 50px);
        left: -12vw;
        width: 40vw;
    }

}

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


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

    main.member {
        background-image: url(../img/member/bg_sp.png);
    }

    main.member p {
        width: 90%;
        margin: 20px auto;
    }

    .fellow {
        padding-top: calc(35vw + 100px);
        margin: 30px auto;
        position: relative;
    }

    .fellow img {
        width: 45vw;
        position: absolute;
        z-index: 100;
    }

    .tl {
        display: block;
        width: 60vw;
        margin: 50px auto;
        position: relative;
        z-index: 10;
    }

    main.member .grid a {
        width: 45vw;
        font-size: 1.1em;
        padding: 10px 0;
        border-radius: 1.3em;
    }

    .prf,
    .prf.lf {
        position: relative;
        background-color: #000;
        padding: 50vw 5vw 5vw;
        border-radius: 10px;
        margin-left: auto;
    }


    .imanari .prf {
        width: 90%;
        margin-top: 100px;
    }

    .imanari img {
        top: 0;
        left: 50%;
        transform: translate(-50%, -60%);
        width: 55vw;
    }

    .ogawa .prf {
        width: 90%;
        margin-top: 50px;
    }

    .ogawa img {
        top: 10vw;
        left: 50%;
        transform: translate(-50%, -70%);
        width: 80vw;
    }

    .fukuoka .prf {
        width: 90%;
        margin-top: 50px;
    }

    .fukuoka img {
        top: 0px;
        left: 50%;
        width: 60vw;
        transform: translate(-50%, -50%);

    }

    .aonuma .prf {
        width: 90%;
        margin-top: 50px;
    }

    .aonuma img {
        top: 0px;
        left: 50%;
        width: 60vw;
        transform: translate(-50%, -50%);
    }

    .michael.fellow {
        padding-top: calc(20vw + 100px);
    }

    .michael .prf {
        width: 90%;
        margin-top: 0;
    }

    .michael img {
        top: 0px;
        left: 50%;
        width: 50vw;
        transform: translate(-50%, -25%);
    }






}

@media screen and (max-width:480px) {
    body {
        font-size: 0.9em;
    }

    .fellow {
        padding-top: calc(35vw + 80px);
        margin: 30px auto;
        position: relative;
    }

    .fellow img {
        width: 45vw;
        position: absolute;
        z-index: 100;
    }

    .tl {
        display: block;
        width: 60vw;
        margin: 50px auto;
        position: relative;
        z-index: 10;
    }

    main.member .grid a {
        width: 70vw;
    }

    .prf,
    .prf.lf {
        position: relative;
        background-color: #000;
        padding: 30vw 5vw 5vw;
        border-radius: 10px;
        margin-left: auto;
    }


    .imanari .prf {
        width: 90%;
        margin-top: 35vw;
    }

    .imanari img {
        top: 0;
        left: 50%;
        transform: translate(-50%, -75%);
        width: 55vw;
    }

    .ogawa .prf {
        width: 90%;
        margin-top: 25vw;
    }

    .ogawa img {
        top: 0;
        left: 50%;
        transform: translate(-50%, -75%);
        width: 80vw;
    }

    .fukuoka .prf {
        width: 90%;
        margin-top: 25vw;
    }

    .fukuoka img {
        top: 0;
        left: 50%;
        transform: translate(-50%, -75%);
        width: 60vw;
    }

    .aonuma .prf {
        width: 90%;
        margin-top: 30vw;
    }

    .aonuma img {
        top: 0;
        left: 50%;
        transform: translate(-50%, -75%);
        width: 60vw;
    }

    .michael.fellow {
        padding-top: calc(10vw + 50px);
    }

    .michael .prf {
        width: 90%;
        margin-top: 10vw;
        padding-top: 60vw;
    }

    .michael img {
        top: 0;
        left: 50%;
        transform: translate(-50%, -10%);
        width: 50vw;
    }


}