/*メンバー紹介*/

.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: justify;
    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: 300px;
    top:250px;
    left: 340px;
}

.ogawa .prf{
    width: 250px;
    top:250px;
    left: 240px;
}

.fukuoka .prf{
    width: 270px;
    top:220px;
    left: 350px;
}

.aonuma .prf{
    width: 330px;
    top:200px;
    left: 210px;
}

.michael .prf{
    width: 390px;
    top:200px;
    left: 420px;
}

/**/

@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;
    }


}