@charset "UTF-8";
/*—————————————————————————————————————————————————————
 縦スクロールできるテーブル
—————————————————————————————————————————————————————*/
.bl_y_scroll_container {
    margin-inline: auto;
    margin-top: 100px;
    overflow-y: auto;
    /* white-space: nowrap; */ /* テキストの折り返しなし */
    max-height: 300px;
    width: 100%;
}

.bl_y_scroll_table {
    height: auto;
    width:100%;
}

    .bl_y_scroll_table th,
    .bl_y_scroll_table td {
        width: auto;
        padding: 1.3em 1.6rem 1.2em;
        vertical-align: middle;
        font-size: 1.2rem;
        line-height: 1.4;
    }

@media screen and (min-width: 960px) {
    .bl_y_scroll_table th,
    .bl_y_scroll_table td {
        font-size: 1.4rem;
    }
}

@media screen and (min-width: 1200px) {
    .bl_y_scroll_table th,
    .bl_y_scroll_table td {
        font-size: 1.5rem;
    }
}

.bl_y_scroll_table thead tr {
    max-width: 100%;
    border-top: 1px solid var(--color-border_l);
}

.bl_y_scroll_table thead th {
    padding: 0.8em 1.6rem 0.8em 1.6rem;
    font-size: 1.1rem;
    line-height: 1.2;
}

@media screen and (min-width: 1200px) {
    .bl_y_scroll_table thead th {
        font-size: 1.3rem;
    }
}

.bl_y_scroll_table tbody tr {
    max-width: 100%;
    border-bottom: 1px solid var(--color-border_l);
}

    .bl_y_scroll_table tbody tr:first-child {
        border-top: 1px solid var(--color-border_l);
    }

    .bl_y_scroll_table tbody tr.is_active {
        background-color: var(--color-table_active) !important;
    }

    .bl_y_scroll_table tbody tr.is_disable {
        cursor: default !important;
        background-color: rgba(var(--color-disable_rgb), 45%) !important;
    }

.bl_y_scroll_table thead + tbody tr:first-child {
    border-top: 1px solid var(--color-border_l);
}

/*—————————————————————————————————————————————————————
 縦スクロールできるテーブル（ヘッダー固定）
—————————————————————————————————————————————————————*/

.bl_header_pinned_y_scroll_container {
    margin-inline: auto;
    margin-top: 100px;
    overflow-y: auto;
    white-space: nowrap; /* テキストの折り返しなし */
    max-height: 300px;
    width: 100%;
}

.bl_header_pinned_y_scroll_table {
    height: auto;
    width: 100%;
    background-color: white; /* 背景色を指定 */
}

    .bl_header_pinned_y_scroll_table th {
        border-right: 1px solid var(--color-border_l);
        border-left: 1px solid var(--color-border_l);
        min-width: 80px;
    }
    .bl_header_pinned_y_scroll_table td {
        border-right: 1px solid var(--color-border_l);
        border-left: 1px solid var(--color-border_l);
        border-bottom: 1px solid var(--color-border_l);
        width: auto;
        padding: 1.3em 1.6rem 1.2em;
        vertical-align: middle;
        font-size: 1.2rem;
        line-height: 1.4;
        min-width: 80px;
    }


@media screen and (min-width: 960px) {
    .bl_header_pinned_y_scroll_table th,
    .bl_header_pinned_y_scroll_table td {
        font-size: 1.4rem;
    }
}

@media screen and (min-width: 1200px) {
    .bl_header_pinned_y_scroll_table th,
    .bl_header_pinned_y_scroll_table td {
        font-size: 1.5rem;
    }
}

.bl_header_pinned_y_scroll_table thead tr {
    max-width: 100%;
}

.bl_header_pinned_y_scroll_table thead tr {
    max-width: 100%;
}

.bl_header_pinned_y_scroll_table thead th {
    padding: 0.8em 1.6rem 0.8em 1.6rem;
    font-size: 1.1rem;
    line-height: 1.2;
    background: white;
    position: sticky;
    top: 0;
    z-index: 10; /* 必要に応じて調整 */
}

.bl_header_pinned_y_scroll_table thead tr th::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid var(--color-border_l);
    border-top: 1px solid var(--color-border_l);
}

@media screen and (min-width: 1200px) {
    .bl_header_pinned_y_scroll_table thead th {
        font-size: 1.3rem;
    }
}

.bl_header_pinned_y_scroll_table tbody tr {
    max-width: 100%;
}
.bl_header_pinned_y_scroll_table thead tr:first-child {
}

.bl_header_pinned_y_scroll_table tbody tr:first-child {
}

.bl_header_pinned_y_scroll_table tbody tr.is_active {
    background-color: var(--color-table_active) !important;
}

.bl_header_pinned_y_scroll_table tbody tr.is_disable {
    cursor: default !important;
    background-color: rgba(var(--color-disable_rgb), 45%) !important;
}


/*—————————————————————————————————————————————————————
　横スクロールできるテーブル
—————————————————————————————————————————————————————*/
.bl_x_scroll_container {
    margin-inline: auto;
    margin-top: 100px;
    overflow-x: auto;
    white-space: nowrap; /* テキストの折り返しなし */
    max-width: 500px;
}

.bl_x_scroll_table {
    height:100%;
    width: auto;
}

    .bl_x_scroll_table th,
    .bl_x_scroll_table td {
        width: auto;
        padding: 1.3em 1.6rem 1.2em;
        vertical-align: middle;
        font-size: 1.2rem;
        line-height: 1.4;
    }

@media screen and (min-width: 960px) {
    .bl_x_scroll_table th,
    .bl_x_scroll_table td {
        font-size: 1.4rem;
    }
}

@media screen and (min-width: 1200px) {
    .bl_x_scroll_table th,
    .bl_x_scroll_table td {
        font-size: 1.5rem;
    }
}

.bl_x_scroll_table thead tr {
    max-width: 100%;
    border-top: 1px solid var(--color-border_l);
}

.bl_x_scroll_table thead th {
    padding: 0.8em 1.6rem 0.8em 1.6rem;
    font-size: 1.1rem;
    line-height: 1.2;
}

@media screen and (min-width: 1200px) {
    .bl_x_scroll_table thead th {
        font-size: 1.3rem;
    }
}

.bl_x_scroll_table tbody tr {
    max-width: 100%;
    border-bottom: 1px solid var(--color-border_l);
}

    .bl_x_scroll_table tbody tr:first-child {
        border-top: 1px solid var(--color-border_l);
    }

    .bl_x_scroll_table tbody tr.is_active {
        background-color: var(--color-table_active) !important;
    }

    .bl_x_scroll_table tbody tr.is_disable {
        cursor: default !important;
        background-color: rgba(var(--color-disable_rgb), 45%) !important;
    }

.bl_x_scroll_table thead + tbody tr:first-child {
    border-top: 1px solid var(--color-border_l);
}


/*—————————————————————————————————————————————————————
　横スクロールできるテーブル(一列目固定)
—————————————————————————————————————————————————————*/
.bl_left_pinned_x_scroll_container {
    margin-inline: auto;
    margin-top: 100px;
    overflow-x: auto;
    white-space: nowrap; /* テキストの折り返しなし */
    max-width: 500px;
    border-right: 1px solid var(--color-border_l);
}

.bl_left_pinned_x_scroll_table {
    height: 100%;
    width: auto;
    background-color: white; /* 背景色を指定 */

}

    .bl_left_pinned_x_scroll_table th,
    .bl_left_pinned_x_scroll_table td {
        width: auto;
        padding: 1.3em 1.6rem 1.2em;
        vertical-align: middle;
        font-size: 1.2rem;
        line-height: 1.4;
    }

    .bl_left_pinned_x_scroll_table th {
        border-top: 1px solid var(--color-border_l);
        border-bottom: 1px solid var(--color-border_l);
        min-height: 80px;
    }

    .bl_left_pinned_x_scroll_table td {
        border-top: 1px solid var(--color-border_l);
        border-bottom: 1px solid var(--color-border_l);
        border-right: 1px solid var(--color-border_l);
        height: auto;
        padding: 1.3em 1.6rem 1.2em;
        vertical-align: middle;
        font-size: 1.2rem;
        line-height: 1.4;
        min-height: 80px;
    }

@media screen and (min-width: 960px) {
    .bl_left_pinned_x_scroll_table th,
    .bl_left_pinned_x_scroll_table td {
        font-size: 1.4rem;
    }
}

@media screen and (min-width: 1200px) {
    .bl_left_pinned_x_scroll_table th,
    .bl_left_pinned_x_scroll_table td {
        font-size: 1.5rem;
    }
}

.bl_left_pinned_x_scroll_table thead tr {
    max-width: 100%;
}

    .bl_left_pinned_x_scroll_table thead tr th {
        border-right: 1px solid var(--color-border_l);
    }

    .bl_left_pinned_x_scroll_table thead tr th:first-child,
    .bl_left_pinned_x_scroll_table tbody tr td:first-child {
        padding: 0.8em 1.6rem 0.8em 1.6rem;
        font-size: 1.1rem;
        line-height: 1.2;
        background: white;
        position: sticky;
        left: 0;
        z-index: 10; /* 必要に応じて調整 */
        border-right:none;
    }



.bl_left_pinned_x_scroll_table thead tr th:first-child::before,
.bl_left_pinned_x_scroll_table tbody tr td:first-child::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-left: 1px solid var(--color-border_l);
    border-right: 1px solid var(--color-border_l);
}

@media screen and (min-width: 1200px) {
    .bl_left_pinned_x_scroll_table thead th {
        font-size: 1.3rem;
    }
}

.bl_left_pinned_x_scroll_table tbody tr {
    max-width: 100%;
}

.bl_left_pinned_x_scroll_table thead tr:first-child {
}

.bl_left_pinned_x_scroll_table tbody tr:first-child {
}

.bl_left_pinned_x_scroll_table tbody tr.is_active {
    background-color: var(--color-table_active) !important;
}

.bl_left_pinned_x_scroll_table tbody tr.is_disable {
    cursor: default !important;
    background-color: rgba(var(--color-disable_rgb), 45%) !important;
}

/*—————————————————————————————————————————————————————
　縦横スクロールできるテーブル(ヘッダー・一列目固定)
—————————————————————————————————————————————————————*/
.bl_header_left_pinned_xy_scroll_conteiner {
    margin-inline: auto;
    margin-top: 100px;
    overflow: auto;
    white-space: nowrap; /* テキストの折り返しなし */
    max-width: 500px;
    max-height: 290px;
    border-right: 1px solid var(--color-border_l);
}

.bl_header_left_pinned_xy_scroll_table {
    height: auto;
    width: auto;
    background-color: white; /* 背景色を指定 */
}

.bl_header_left_pinned_xy_scroll_table th,
.bl_header_left_pinned_xy_scroll_table td {
    width: auto;
    padding: 1.3em 1.6rem 1.2em;
    vertical-align: middle;
    font-size: 1.2rem;
    line-height: 1.4;
}

.bl_header_left_pinned_xy_scroll_table td {
    border-bottom: 1px solid var(--color-border_l);
    border-right: 1px solid var(--color-border_l);
    height: auto;
    padding: 1.3em 1.6rem 1.2em;
    vertical-align: middle;
    font-size: 1.2rem;
    line-height: 1.4;
}

@media screen and (min-width: 960px) {
    .bl_header_left_pinned_xy_scroll_table th,
    .bl_header_left_pinned_xy_scroll_table td {
        font-size: 1.4rem;
    }
}

@media screen and (min-width: 1200px) {
    .bl_header_left_pinned_xy_scroll_table th,
    .bl_header_left_pinned_xy_scroll_table td {
        font-size: 1.5rem;
    }
}

.bl_header_left_pinned_xy_scroll_table thead tr {
    max-width: 100%;
}

.bl_header_left_pinned_xy_scroll_table thead tr th {
    border-right: 1px solid var(--color-border_l);
}

/*ヘッダー固定*/
.bl_header_left_pinned_xy_scroll_table thead th {
    padding: 0.8em 1.6rem 0.8em 1.6rem;
    font-size: 1.1rem;
    line-height: 1.2;
    background: white;
    position: sticky;
    top: 0;
    z-index: 10; /* 必要に応じて調整 */
}
.bl_header_left_pinned_xy_scroll_table thead tr th::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid var(--color-border_l);
    border-top: 1px solid var(--color-border_l);
}

/*列固定*/
.bl_header_left_pinned_xy_scroll_table tbody tr td:first-child {
    padding: 0.8em 1.6rem 0.8em 1.6rem;
    font-size: 1.1rem;
    line-height: 1.2;
    background: white;
    position: sticky;
    left: 0;
    z-index: 10; /* 必要に応じて調整 */
    border-right: none;
}
    .bl_header_left_pinned_xy_scroll_table tbody tr td:first-child::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border-left: 1px solid var(--color-border_l);
        border-right: 1px solid var(--color-border_l);
    }

/*左上固定*/
.bl_header_left_pinned_xy_scroll_table thead tr th:first-child {
    padding: 0.8em 1.6rem 0.8em 1.6rem;
    font-size: 1.1rem;
    line-height: 1.2;
    background: white;
    position: sticky;
    top:0;
    left: 0;
    z-index: 12; /* 必要に応じて調整 */
    border-right: none;
    border-bottom: none;
}
    .bl_header_left_pinned_xy_scroll_table thead tr th:first-child::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border-left: 1px solid var(--color-border_l);
        border-right: 1px solid var(--color-border_l);
    }

.bl_header_left_pinned_xy_scroll_table tbody tr {
    max-width: 100%;
}

.bl_header_left_pinned_xy_scroll_table tbody tr.is_active {
    background-color: var(--color-table_active) !important;
}

.bl_header_left_pinned_xy_scroll_table tbody tr.is_disable {
    cursor: default !important;
    background-color: rgba(var(--color-disable_rgb), 45%) !important;
}