/* default PC */

#contents {

     h2.main{line-height: 1.4em;}

    .mb-none {
        margin-bottom: 0;
    }

    .project-item {
        --project-color: #23af68;
    }

    /* 正式名称･リーダー */
    .project-label {
        position: relative;
        padding-left: 20px;
        margin: 15px 0 0;
        font-weight: bold;
    }

    .project-label::before {
        content: "●";
        position: absolute;
        left: 0;
        top: 0;
        font-size: 15px;
        color: var(--project-color);
    }

    /* 取り組みの柱の項目 */
    .project-box li {
        list-style: none;
    }

    .project-box li strong {
        position: relative;
        padding-left: 30px;
    }

    .project-box li strong::before {
        content: "";
        display: inline-block;
        position: absolute;
        left: 0;
        top: 1px;
        bottom: 0;
        margin: auto;
        width: 27px;
        height: 27px;
        background-color: var(--project-color);
        -webkit-mask-image: url('../image/contents/project/icon_check.svg');
        mask-image: url('../image/contents/project/icon_check.svg');
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .first-txt {
        text-align: center;
        margin-bottom: 60px;
    }

    .project-text h3 {
        border-left: none;
        padding: 8px 0 9px;
        margin-bottom: 30px;
    }

    .project-content h3 {
        border-left: none;
        padding: 0 3px;
    }

    /* 取り組みの柱 共通 */
    .project-content .project-box {
        border-radius: 15px;
        margin-top: 40px;
        padding: 40px 40px 35px;
    }

    /* 背景 */

    .bg-green,
    .bg-support,
    .bg-culture,
    .bg-health,
    .bg-dtx,
    .bg-ai {
        background-color: #fff;
        margin-bottom: 140px;
        padding: 0;
    }


    /* 取り組みの柱 */

    .project-content .green-box {
        background-color: #F3FFF9;
    }

    .project-content .support-box {
        background-color: #ffebeb;
    }

    .project-content .culture-box {
        background-color: #FFF4F7;
    }

    .project-content .health-box {
        background-color: #FFF8F0;
    }

    .project-content .dtx-box {
        background-color: #F3FAFF;
    }

    .project-content .ai-box {
        background-color: #FAF5FC;
    }

    /* プロジェクトカラー */

    .project-hub {
        --project-color: #23af68;
    }

    .project-support {
        --project-color: #D75C5F;
    }

    .project-culture {
        --project-color: #e58a9d;
    }

    .project-health {
        --project-color: #e89a55;
    }

    .project-dtx {
        --project-color: #55a8d8;
    }

    .project-ai {
        --project-color: #a66bc0;
    }

    /* プロジェクトカラーを使用する部分 */
    .project-item h2.main .en-ttl {
        color: var(--project-color);
    }

    /* アンカーリンク */
    .anchor-box .txt-3box:nth-child(1) .link-btn {
        background-color: #23af68;
    }

    .anchor-box .txt-3box:nth-child(2) .link-btn {
        background-color: #D75C5F;
    }

    .anchor-box .txt-3box:nth-child(3) .link-btn {
        background-color: #e58a9d;
    }

    .anchor-box .txt-3box:nth-child(4) .link-btn {
        background-color: #e89a55;
    }

    .anchor-box .txt-3box:nth-child(5) .link-btn {
        background-color: #55a8d8;
    }

    .anchor-box .txt-3box:nth-child(6) .link-btn {
        background-color: #a66bc0;
    }

    /* リーダー一覧 */
    .leader-list {
        background-color: #fff;
    }

    .leader-list .table-02 {
        max-width: 910px;
        margin: 40px auto 0;
    }

    .leader-name {
        position: relative;
        padding-left: 18px;
        font-weight: bold;
    }

    .leader-name::before {
        content: "●";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 10px;
        color: var(--project-color);
    }

    .leader-list tbody tr:nth-child(1) .leader-name::before {
        color: #23af68;
    }

    .leader-list tbody tr:nth-child(2) .leader-name::before {
        color: #D75C5F;
    }

    .leader-list tbody tr:nth-child(3) .leader-name::before {
        color: #e58a9d;
    }

    .leader-list tbody tr:nth-child(4) .leader-name::before {
        color: #e89a55;
    }

    .leader-list tbody tr:nth-child(5) .leader-name::before {
        color: #55a8d8;
    }

    .leader-list tbody tr:nth-child(6) .leader-name::before {
        color: #a66bc0;
    }
}


@media screen and (max-width: 1429px) and (min-width: 960px) {
    #contents {
        div.anchor-box.flex {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 15px 20px;
        }

        div.anchor-box.flex>div.txt-3box,
        div.anchor-box.flex>div.txt-3box.end {
            width: calc(50% - 10px);
            margin-right: 0;
            margin-left: 0;
            margin-bottom: 0;
        }

        div.anchor-box.flex>div.txt-3box .link-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            box-sizing: border-box;
        }
    }
}

/* view-1140 notePC,Tablet */
@media screen and (max-width: 1140px) {
    #contents {
        .project-content h3 {
            margin: 0 0 20px;
        }

        .txt-center {
            margin-bottom: 30px;
        }
    }
}

/* view-959 Mobile,Tablet */
@media screen and (max-width: 959px) {
    #contents .first-txt {
        text-align: left;
    }
}

/* view-559 Mobile */
@media screen and (max-width: 559px) {
    #contents {

        .bg-green, .bg-support, .bg-culture, .bg-health, .bg-dtx, .bg-ai {
            margin-bottom: 100px;
        }

        .project-content .project-box {
            margin-top: 20px;
            padding: 30px 15px 25px;
        }

        .project-text h3 {
            margin-bottom: 10px;
        }

        .leader-list table {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
        }

        .leader-list table th,
        .leader-list table td {
            white-space: normal;
            word-break: break-word;
            overflow-wrap: anywhere;
            box-sizing: border-box;
        }

        .leader-list table tbody th {
            width: 35%;
            text-align: left;
            vertical-align: top;
        }

        .leader-list table tbody td {
            width: 65%;
            vertical-align: top;
        }

        .leader-name {
            display: inline-block;
            vertical-align: middle;
        }

        .link-btn.anchor::after {
            right: 15px;
        }

    }
}