@charset "UTF-8";

/* ===============================================
    教育訓練計画について
    ※ 新CMS共通CSSで定義済みのレイアウトは流用し、
        本ページ固有の見た目だけを指定しています。
=============================================== */
.p-skillup .l-main__content {
    text-align: left;
}

.p-skillup__section {
    margin: 0 auto 60px auto;
}

.p-skillup__image img {
    display: block;
    width: 100%;
    height: auto;
}

.p-skillup__desc {
    margin: 15px 0 30px;
}

.p-skillup__desc--blue {
    background-color: #eff8ff;
    padding: 30px 20px;
}

.p-skillup__sectionTitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.p-skillup__sectionIcon {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
}

/* ===============================================
    入職時研修 / 年次研修
=============================================== */
.p-skillup__trainingItem {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin: 0;
}

.p-skillup__trainingItem__term,
.p-skillup__trainingItem__desc {
    box-sizing: border-box;
}

.p-skillup__trainingItem__term {
    flex: 0 0 30%;
    width: 30%;
    margin: 0;
    padding: 10px;
    background-color: #d8d8d8;
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    font-size: 14px;
    font-weight: bold;
    text-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
}

.p-skillup__trainingItem__desc {
    flex: 1;
    min-width: 0;
    width: 70%;
    margin: 0;
    padding: 10px 20px;
    background-color: #fff;
    border-top: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    font-size: 14px;
    text-align: left;
}

.p-skillup__trainingList:last-child .p-skillup__trainingItem__term,
.p-skillup__trainingList:last-child .p-skillup__trainingItem__desc {
    border-bottom: 1px solid #cccccc;
}


/* ===============================================
    ステップアップイメージ
=============================================== */
.p-skillup__stepupList {
    width: 100%;
}

.p-skillup__stepupList table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

.p-skillup__stepupList th,
.p-skillup__stepupList td {
    border: 1px solid #cccccc;
    padding: 10px 7px;
}

.p-skillup__stepupList th {
    background-color: #d8d8d8;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
}

.p-skillup__stepupList td {
    font-size: 13px;
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
}


.p-skillup__stepupList tr > th:first-child {
    width: 20%;
}

.p-skillup__stepupList--sp {
    display: none;
}

/* ===============================================
    SP
=============================================== */

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

    .p-skillup__trainingItem {
        display: block;
    }

    .p-skillup__trainingItem__term,
    .p-skillup__trainingItem__desc {
        width: 100%;
    }

    .p-skillup__trainingItem__term {
        border-right: 1px solid #cccccc;
        display: block;
    }

    .p-skillup__trainingItem__desc {
        border-left: 1px solid #cccccc;
    }

    .p-skillup__stepupList {
        width: 100%;
        overflow-x: scroll;
        --webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    .p-skillup__stepupList table {
        width: 760px;
        min-width: 760px;
        table-layout: fixed;
    }

    .p-skillup__stepupList--sp {
        display: block;
        margin: 30px auto;
        text-align: center;
    }

    .p-skillup__stepupList--sp img {
        display: inline-block;
        width: auto;
        max-width: 130px;
        height: auto;
    }

    .p-skillup__section:last-of-type {
        margin-bottom: 30px;
    }

}