@charset "UTF-8";

/* ===============================================
    給与・社会保険・有給休暇等
    ※ 新CMS共通CSSで定義済みのレイアウトは流用し、
        本ページ固有の見た目だけを指定しています。
=============================================== */
.p-welfare .l-main__content {
    text-align: left;
    color: #353e47;
    /* font-family: Arial, Helvetica, "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; */
}

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


/* ページナビ および　リンク系 */
.p-welfare__naviList { 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
    row-gap: 30px;
    margin: 40px 0;
    padding: 0 30px;
}

.p-welfare__naviListItem {
    width: auto;
    padding: 0;
    text-align: left;
}

.p-welfare__naviListItem > a {
    color: #0089d4;
}

.p-welfare__naviListItem > a:visited {
    color: #0089d4;
}

.p-welfare__naviLink {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
    white-space: nowrap;
}

.p-welfare__naviIcon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 3px;
}

.p-welfare__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.p-welfare__linkItem {
    margin: 0 0 15px 15px;
}

.p-welfare__linkItem > a {
    color: #353e47;
    font-weight: 700;
}

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

.p-welfare__arrowIcon {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    transform: rotate(-90deg) translateX(0) translateY(0);
}

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

@media screen and (max-width: 768px) { 
    .p-welfare__naviList {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 12px;
        margin: 25px 0;
        padding: 0 20px;
    }

    .p-welfare__naviLink {
        white-space: normal;
    }

    .p-welfare__naviListItem {
        width: 100%;
        padding: 0 0 10px 30px;
    }
}