/* ラッパーがスクロール領域になる設計 */
.sticky-table-wrapper {
    position: relative;
    width: 100%;
    --sticky-table-max-height: 360px;
}

.sticky-table-wrapper.is-desktop {
    max-height: var(--sticky-table-max-height);
    overflow-y: auto;
    overflow-x: hidden;
}

.sticky-table-wrapper.is-mobile {
    max-height: none;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sticky-table-wrapper.is-mobile .sticky-table {
    display: block;
    width: max-content;
}

.sticky-table-wrapper.is-mobile .sticky-table th,
.sticky-table-wrapper.is-mobile .sticky-table td {
    white-space: nowrap;
}
.sticky-table-wrapper.is-mobile .sticky-table th.wrap,
.sticky-table-wrapper.is-mobile .sticky-table td.wrap {
    white-space: normal;
}

/* theadを上部固定（ラッパー内でstickyになる） */
.sticky-table thead th,
.sticky-table thead td {
    position: sticky;
    top: 0;
    z-index: 2;              /* ヘッダが本文の上に来るように */
    background: #fff;        /* 背景を塗って下の文字が透けないように */
}

/* 必須ではないが、見た目安定用 */
.sticky-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;      /* 横スクロール時に自然に広がる */
}

.sticky-table th,
.sticky-table td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    vertical-align: top;
}