.table_box {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 4000px;
    /* 適切な幅を指定 */
    table-layout: fixed;
    overflow-x: auto;
    /* 横方向にスクロールできるように */
    zoom: 80%;
}

th,
td {
    vertical-align: middle;
    padding: 15px;
    border: 1px solid #000;
    color: #000;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    white-space: nowrap;
    /* テキストが折り返されないように */
    overflow: hidden;
    /* オーバーフローした場合に隠す */
    text-overflow: ellipsis;
    /* オーバーフローしたテキストを省略記号で表示 */
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    table {
        zoom: 50%;
        /* ズームを調整 */
    }

    th,
    td {
        padding: 5px;
        /* パディングを調整 */
        font-size: 12px;
        /* フォントサイズを調整 */
    }
}

th {
    background: #ccc;
}

td {
    background: #fff;
}

.sticky_row {
    position: sticky;
    top: 0;
    left: 0;
    background: none;
    border-left: none;
    border-right: none;
}

.sticky_row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    background: #ccc;
    z-index: -1;
}

.sticky_col {
    position: sticky;
    top: 0;
    left: 0;
    background: none;
    border-top: none;
    border-bottom: none;
}

.sticky_col::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background: #ccc;
    z-index: -1;
}

.sticky_cross {
    position: sticky;
    top: 0;
    left: 0;
    background: none;
    border-top: none;
    border-bottom: none;
    border-left: none;
    border-right: none;
    z-index: 1;
}

.sticky_cross::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    background: #ccc;
    z-index: -1;
}

.red {
    color: red;
}


/* none要素を非表示　*/
.hidden-text {
    visibility: hidden;
}

.fixed_btn { 
    position: fixed;
    top: 60%;
    transform: translateY(-30%);
    right: 10px;
    padding: 6px 40px;
    width: 100px;
    background-color: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: right 1s; /* アニメーションの速度を調整 */
}
@media screen and (max-width: 768px) {
    .fixed_btn {
        width: 20px;
        right: 0px;
    }
}