@layer components {
/* wrapper */
.table-wrapper {
    width: 100%;
    color: var(--semantic-primary-text);
  }

  /* table base */
  .table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  /* row border */
  .table-row {
    border-bottom: 1px solid var(--semantic-primary-border);
  }

  .table-row:first-of-type {
    border-top: 1px solid var(--semantic-primary-border);
  }

  /* cells base */
  .table-th,
  .table-td {
    vertical-align: top;
    padding: 0;
  }

  /* PC base */
  .table-th {
    width: 343px;
    min-width: 300px;
    background: var(--semantic-sub-background);
  }

  .table-td {
    background: var(--semantic-base-background);
  }

  .table-th-inner {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--table-icon-gap, 16px);
    word-break: break-word;
    padding: 16px;
  }

  .table-th-text {
    flex: 1 1 0;
    word-break: break-word;
  }

  .table-td-inner {
    width: 100%;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }

  .table-gap {
    --table-icon-gap: 16px;
  }

  /* SP */
  @media screen and (max-width: 767px) {
    .table-wrapper {
      max-width: 343px;
    }

    .table-row,
    .table-th,
    .table-td {
      display: block;
      width: 100%;
    }

    .table-th {
      min-width: 100%;
    }

    .table-th-inner {
      padding: 10px;
      align-items: flex-start;
      gap: var(--table-icon-gap, 8px);
    }

    .table-td-inner {
      padding: 10px;
      gap: 8px;
    }

    .table-gap {
      --table-icon-gap: 8px;
    }
  }
}