@charset "UTF-8";
.table_wrap {
    overflow-x: auto;
    overflow-y: hidden;
    /*スクロールバーの横幅指定*/
    &::-webkit-scrollbar {
        height: 8px;
    }
    /*スクロールバーの背景色・角丸指定*/
    &::-webkit-scrollbar-track {
      border-radius: 10px;
      background: rgba(var(--bg_white), 1);
    }
    /*スクロールバーの色・角丸指定*/
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(var(--subcolor02), 1);
    }
}
/*table_Xscroll*/
.table_Xscroll {
    --tbl_bd: #e0e0e0;
    --th_bg: #ddd;
    --td_bg: #fff;
    --td_child_bg: #f4f4f4;
    --tbl_pd_b: clamp(7px, 12vw/12, 12px);
    --tbl_pd_in: clamp(9px, 16vw/12, 16px);
    --course01_color: rgb(20, 107, 135);
    --course02_color: rgb(122, 78, 115);
    --course03_color: rgb(97, 142, 77);
    width: 100%;
    min-width: 1200px;
    border-collapse: collapse;
    white-space: nowrap;
    :is(th, td) {
        border: 1px solid var(--tbl_bd);
        padding-block: var(--tbl_pd_b);
        padding-inline: var(--tbl_pd_in);
    }
    & .fixed_head {
        width: 10%;
        position: sticky;
        left: 0;
        color: #fff;
        text-align: left;
        background: #333;
        z-index: 2;
        &::before{
            content: "";
            position: absolute;
            top: -1px;
            left: -1px;
            width: 100%;
            height: 100%;
            border: 1px solid #ccc;
        }
        &.head_divide {
            &::after {
                content: "";
                width: 100%;
                height: 100%;
                background-image: linear-gradient(to top right, transparent 0%, transparent 50%, rgb(255 255 255 / 20%) 50%, rgb(255 255 255 / 20%) 100%);
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
            }
            & span:first-child {
                position: absolute;
                left: calc(var(--tbl_pd_in) - 0.5em);
                bottom: calc(var(--tbl_pd_b) - 0.6em);
                z-index: 2;
            }
            & span:last-child {
                position: absolute;
                right: calc(var(--tbl_pd_in) - 0.5em);
                top: calc(var(--tbl_pd_b) - 0.5em);
                z-index: 2;
            }
        }
    }
    & .sub_head {
        position: relative;
        z-index: 1;
        & .nengo {
            font-size: 0.85em;
            position: absolute;
            top: 4px;
            left: 4px;
        }
    }
    &.course01 {
        & .fixed_head {
            background: var(--course01_color);
        }
        & .sub_head {
            background: color-mix(in srgb, var(--course01_color), var(--td_bg) 70%);
        }
    }
    &.course02 {
        & .fixed_head {
            background: var(--course02_color);
        }
        & .sub_head {
            background: color-mix(in srgb, var(--course02_color), var(--td_bg) 70%);
        }
    }
    &.course03 {
        & .fixed_head {
            background: var(--course03_color);
        }
        & .sub_head {
            background: color-mix(in srgb, var(--course03_color), var(--td_bg) 70%);
        }
    }
    & td {
        background: var(--td_bg);
        &.null {
            color: #b5b5b5;
            font-size: 1.25em;
        }
    }
    & tr:nth-child(2n+1) td {
        background: var(--td_child_bg);
    }
}