@charset "utf-8";

/* ===================================================================
COMMENDATION
=================================================================== */

/* COMMENDATION LIST
--------------------*/

.commendation-list > ul {
    display: flex;
    justify-content: center;
    flex-direction: column;
    row-gap: 50px;
}

.commendation-list > ul > li {
    padding: 30px 50px 40px;
    background: #FFF;
}

/* COMMENDATION LIST HEADING
--------------------*/

.commendation-list-heading {
    color: #0E4450;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
}

/* COMMENDATION LIST INFO
--------------------*/

.commendation-list-info {
    margin: 20px 0 0;
    letter-spacing: 0.05em;
}

.commendation-list-info > ul > li {
    padding: 15px 30px;
    border-top: 1px solid #B5CDD3;
}

.commendation-list-info > ul > li:last-child {
    border-bottom: 1px solid #B5CDD3;
}

.commendation-list-info table  {
    width: 100%;
}

.commendation-list-info table tbody {
    display: flex;
    justify-content: center;
}

.commendation-list-info table tr {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.commendation-list-info table tr:first-of-type {
    width: calc(215 / 840 * 100%);
    max-width: 215px;
    padding: 0 25px 0 0;
}

.commendation-list-info table tr:nth-of-type(2) {
    width: calc(245 / 840 * 100%);
    max-width: 245px;
    padding: 0 25px 0 0;
}

.commendation-list-info table tr:last-of-type {
    width: calc(380 / 840 * 100%);
    max-width: 380px;
}

.commendation-list-info table tr:first-of-type > th {
    padding: 2px 0 0;
    font-size: 20px;
    font-weight: 700;
}

.commendation-list-info table tr:not(:first-of-type) > th {
    font-weight: 700;
    vertical-align: middle;
}

.commendation-list-info table tr:not(:first-of-type) > th,.commendation-list-info table tr:not(:first-of-type) > td {
    padding: 5px 0;
}

/* COMMENDATION LIST INFO TITLE
--------------------*/

.commendation-list-info-title {
    margin: 0 0 15px;
    font-size: 20px;
    font-weight: 700;
}

/* COMMENDATION LIST INFO BODY
--------------------*/

.commendation-list-info-body > dl {
    display: flex;
    justify-content: space-between;
}

.commendation-list-info-body > dl:not(:first-child) {
    margin: 10px 0 0;
}

.commendation-list-info-body > dl > dt,
.commendation-list-info-body > dl > dd {
    width: calc(400 / 840 * 100%);
    max-width: 400px;
}

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

    /* ===================================================================
    COMMENDATION
    =================================================================== */

    /* COMMENDATION LIST
    --------------------*/

    .commendation-list > ul {
        row-gap: 30px;
    }

    .commendation-list > ul > li {
        padding: 20px;
    }

    /* COMMENDATION LIST HEADING
    --------------------*/

    .commendation-list-heading {
        font-size: 20px;
    }

    /* COMMENDATION LIST INFO
    --------------------*/

    .commendation-list-info > ul > li {
        padding: 10px 0;
    }

    .commendation-list-info table tbody {
        flex-direction: column;
    }

    .commendation-list-info table tr:first-of-type,
    .commendation-list-info table tr:last-of-type  {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .commendation-list-info table tr:nth-of-type(2) {
        width: 100%;
        max-width: 100%;
        padding: 0 0 5px;
    }

    .commendation-list-info table tr:first-of-type > th {
        padding: 0;
        font-size: 18px;
    }

    .commendation-list-info table tr:not(:first-of-type) > th,.commendation-list-info table tr:not(:first-of-type) > td {
        padding: 0;
    }

    .commendation-list-info table tr > th {
        padding: 0 0 5px !important;
    }

    /* COMMENDATION LIST INFO TITLE
    --------------------*/

    .commendation-list-info-title {
        margin: 0 0 5px;
        font-size: 18px;
    }

    /* COMMENDATION LIST INFO BODY
    --------------------*/

    .commendation-list-info-body > dl {
        flex-direction: column;
    }

    .commendation-list-info-body > dl:not(:first-child) {
        margin: 0;
    }

    .commendation-list-info-body > dl > dt,
    .commendation-list-info-body > dl > dd {
        width: 100%;
        max-width: 100%;
    }
}