@charset "utf-8";

/***staff***********************************/
.photo {
    width: 50%;
    margin: 0 auto 1em;
    text-align: center;
}

.photo img {
    border-radius: 50%;
    max-width: 150px;
}

.staff_list {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.staff_list li {
    background-color: #fff;
    padding: 2em 1em;
    margin: 0 0 2em;
    border-radius: 1em;
}

.staff_list .profile {
    font-size: 15px;
}

.staff_list .profile .name {
    text-align: center;
    margin: 0 0 0.5em;
    border-bottom: dotted 2px #ccc;
    padding: 0 0 0.5em;
    font-weight: bold;
}

.work {
    text-align: center;
    font-size: 0.9em;
    color: #44b4ef;
}

.staff_list .profile {
    color: #707070;
}

.prof_detail dl {
    display: flex;
    flex-wrap: wrap;
    border-bottom: solid 1px #ccc;
    margin: 0 0 1em 0;
    flex-direction: column;
    text-align: center;
}

.prof_detail dl dt {
    background-color: #ededed;
    padding: 0.2em 0;
}

.prof_detail dl dd {
    padding: 0.7em 0;
}

/*600px以上*/
@media screen and (min-width: 600px) {
    .staff_list .profile .name {
        font-size: 1.2em;
    }

    .work {
        font-size: 1em;
        color: #44b4ef;
        margin: 0 0 0.5em;
    }

    .prof_detail dl {
        margin: 0 0 1em 0;
        flex-direction: unset;
        text-align: left;
        align-items: baseline;
    }

    .prof_detail dl dt {
        padding: 0 1em;
        margin: 0 1em 0 0;
        width: 30%
    }
}

/*900px以上*/
@media screen and (min-width: 900px) {
    .staff_list li {
        display: flex;
        flex-wrap: wrap;
    }

    .staff_list li:nth-of-type(even) {
        flex-direction: row-reverse;
    }

    .photo {
        width: 30%;
        margin: 0;
    }

    .staff_list .profile {
        width: 70%;
        padding: 0 0 0 1em;
    }

    .staff_list .profile .name {
        text-align: left;
    }

    .work {
        margin: 0 0 0.5em;
        text-align: left;
    }

    .prof_detail dl dt {
        padding: 0 1em;
        margin: 0 1em 0 0;
        width: 14rem;
    }
}

/**************************************/


/*600px以上*/
@media screen and (min-width: 600px) {}

/*900px以上*/
@media screen and (min-width: 900px) {}