@charset "utf-8";

/**************************/
/*循環型社会研究室　メンバー紹介ページ*/
/*2021年度
/**************************/

.memder2022 {
    width:940px;
    height:710px;
    margin-left: -40px;
    
    position:relative;
    background:url("../member/img/2022m/main.gif") no-repeat center top;
}

/*アニメーション*/
.theme2022 {
    height:300px;
    position: relative;
}
.an {
    position: absolute;
    display: block;
}
#parts01 {
    max-width: 100px;
    top: 430px;
    left: 560px;
    animation: bar-animation00 8s ease-out infinite;
    z-index: 10;
}

@keyframes bar-animation00 {
    0%{
        left: 560px;
    }
    15%{
        top: 250px;
        left: 140px;
    }
    25%{
        top: 90px;
        left: 490px;
    }
    30%{
        top: 100px;
        left: 500px;
    }
    31%{
        top: 90px;
        left: 495px;
    }
    32%{
        top: 100px;
        left: 505px;
    }
    33%{
        top: 90px;
        left: 495px;
    }
    34%{
        top: 100px;
        left: 505px;
    }
    35%{
        top: 90px;
        left: 495px;
    }
    36%{
        top: 100px;
        left: 505px;
    }
    37%{
        top: 90px;
        left: 495px;
    }
    38%{
        top: 100px;
        left: 505px;
    }
    39%{
        top: 90px;
        left: 495px;
    }
    55%{
        top: 560px;
        left: 300px;
    }
    69%{
        top: 230px;
        left: 560px;
    }
    75%{
        top: 280px;
        left: 330px;
    }
    100%{
        left: 560px;
    }
}


/*メンバー紹介*/
.item {
    position: absolute;
    font-size: 11px;
    line-height: 100%;
    width: 110px;
    margin: 0 10px 10px;
    padding-top: 5px;
    background-color:rgba(255,255,255,0.6);
    text-align: center;

}

.item .txt {
    padding: 2px 0px 2px;
    min-height:22px;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.item .name {
    background-color: #fff;
    padding: 2px 3px;
    min-height:22px;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.item .name span {
    letter-spacing: -0.1px;
}
.item .face {
    display: block;
    margin: 0 auto;
    max-width: 85px;
}

.w105 .face {
    max-width: 105px;
}
.w105 .txt {
    min-height:16px;
}

#no01-name {
    width: 115px;
    top:60px;
    left:95px;
}
#no02-name {
    width: 115px;
    top:60px;
    left:220px;
}
#no03-name {
    width: 115px;
    top:60px;
    left:345px;
}
#no04-name {
    width: 115px;
    top:60px;
    left:470px;
}
#no05-name {
    width: 115px;
    top:60px;
    left:595px;
}
#no06-name {
    width: 115px;
    top:60px;
    left:720px;
}


#no07-name {
    width: 95px;
    top:221px;
    left:70px;
}
#no08-name {
    width: 95px;
    top:221px;
    left:175px;
}

#no09-name {
    width: 95px;
    top:221px;
    left:280px;
}

#no10-name {
    width: 95px;
    top:221px;
    left:555px;
}
#no11-name {
    width: 95px;
    top:221px;
    left:660px;
}
#no12-name {
    width: 95px;
    top:221px;
    left:765px;
}

#no13-name {
    width: 95px;
    top:381px;
    left:125px;
}
#no14-name {
    width: 95px;
    top:381px;
    left:230px;
}
#no14-name .name {
    letter-spacing: -0.8px;
}

#no15-name {
    width: 95px;
    top:381px;
    left:605px;
}
#no16-name {
    width: 95px;
    top:381px;
    left:710px;
}

#no17-name {
    width: 92px;
    top:540px;
    left:70px;
}
#no18-name {
    width: 92px;
    top:540px;
    left:167px;
}
#no19-name {
    width: 92px;
    top:540px;
    left:264px;
}
#no20-name {
    width: 92px;
    top:540px;
    left:361px;
}
#no21-name {
    width: 92px;
    top:540px;
    left:466px;
}
#no22-name {
    width: 92px;
    top:540px;
    left:563px;
}
#no23-name {
    width: 92px;
    top:540px;
    left:660px;
}
#no24-name {
    width: 92px;
    top:540px;
    left:757px;
}