@charset "utf-8";

/* 共通
------------------------------------------*/
section {
    width: var(--main-width);
    max-width: var(--main-max-width);
    margin: 0 auto;
}


/* 人
------------------------------------------*/
#people {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: start;
}

#people .container {
    width: 250px;
    text-align: center;
    margin-bottom: 2rem;
}

#people .container .img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    background-size: cover;
    background-position: center;
}

#people .container h5 {
    font-weight: normal;
    margin: 0;
}

#people .container h4 {
    font-size: 1.25rem;
    margin: 0;
}

#people .container .sns {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
}

#people .container .sns a {
    display: block;
    margin: 0 1rem;
}

#people .container .sns a img {
    width: 20px;
}


/* テーブル
------------------------------------------*/

#table {
    margin-bottom: 12rem;
}

#table table {
    width: 100%;
    max-width: 830px;
    border-collapse: collapse;
    margin: 0 auto;
}

#table table tr td,
#table table tr th {
    border-top: 1px solid var(--main-black);
    border-bottom: 1px solid var(--main-black);
    text-align: left;
    font-size: 1.125rem;
    padding: 1.25rem 2rem;
}

#table table tr th {
    font-weight: bold;
    word-break: keep-all;
}

#table table tr td .small {
    margin: 2rem 0 0;
    font-size: .875rem;
}

#table table tr:last-child td,
#table table tr:last-child th {
    border-bottom: none;
}

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

    #table table,
    #table table tr,
    #table table tr td,
    #table table tr th {
        display: block;
    }

    #table table tr th {
        border-bottom: none;
        padding: 1rem .25rem 0;
    }

    #table table tr td {
        padding: .5rem .25rem 1rem;
        border: none;
    }
}