main {
  max-width: 1200px;
  margin-inline: auto;
  padding: 40px 40px 60vh;

  /* tableのスタイル */
  .table-scroll {
    height: 400px; /* 高さを指定して、枠内を縦スクロールできるようにする */
    overflow-x: auto; /* 横スクロールを有効にする */

    table {
      width: max-content;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;

      th,
      td {
        box-sizing: border-box;
        width: 180px;
        padding: 12px;
        border-right: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        background: var(--color-surface);
        text-align: left;
      }

      th {
        border-color: var(--color-primary);
        background: var(--color-secondary);
        color: var(--color-primary);

        &:first-child {
          width: 160px;
        }

        &:nth-child(2) {
          width: 220px;
        }
      }

      thead {
        th {
          border-color: var(--color-surface);
          background: var(--color-primary);
          color: var(--color-surface);
          position: sticky; /* 列見出しをスクロール枠の上端に固定 */
          top: 0;
          z-index: 2;

          &:first-child {
            left: 0;
            z-index: 5;
          }

          &:nth-child(2) {
            left: 160px;
            z-index: 4;
          }
        }
      }

      tbody {
        th[scope="rowgroup"] {
          position: sticky; /* 行見出しをテーブル左側に固定 */
          left: 0;
          z-index: 2;
          vertical-align: top;
        }

        th[scope="row"] {
          position: sticky; /* 行見出しをテーブル左側に固定 */
          left: 160px; /* 1セル分右側で固定させる */
          z-index: 1;
          font-size: 14px;
        }

        tr:hover {
          > td {
            background-color: color-mix(in srgb, var(--color-primary) 8%, white);
          }
        }
      }

      .bar {
        display: block;
        height: 16px;
        background: var(--color-primary);
      }
    }
  }
}

@media (width < 768px) {
  main .table-scroll table {
    th,
    td {
      width: 140px;
    }

    th {
      &:first-child {
        width: 120px;
      }

      &:nth-child(2) {
        width: 180px;
      }
    }

    thead {
      th {
        &:nth-child(2) {
          left: auto;
          z-index: 2;
        }
      }
    }

    tbody {
      th[scope="row"] {
        position: static;
        left: auto;
        z-index: auto;
      }
    }
  }
}