.block.committee-table {
  width: 100%;
  margin: -100px auto 0;
  border-radius: 8px;
  background: var(--corp-color-white);
  padding: 32px 18px;
  
  @media (width >= 768px) {
    width: calc(100% - 40px);
    padding: 24px;
    margin: -33px auto 0;
  }
  
  @media (width >= 1200px) {
    width: calc(100% - 112px);
    padding: 60px;
    margin: -100px auto 0;
  }

  .committee-table__section {
    .committee-table__heading {
      font-size: var(--corp-type-mobile-body-3-font-size);
      font-weight: var(--corp-type-mobile-body-3-font-weight);
      line-height: var(--corp-type-mobile-heading-3-bold-line-height);
      color: var(--corp-color-text);
      margin: 0 0 16px;
      
      @media (width >= 768px) {
        margin: 0 0 18px;
      }
      
      @media (width >= 1200px) {
        font-size: var(--corp-type-desktop-heading-4-font-size);
        line-height: var(--corp-type-desktop-heading-4-line-height);
        margin: 0 0 32px;
      }
    }

    .committee-table__table {
      width: 100%;
      text-align: left;
      border-radius: 12px;
      border: 1px solid var(--corp-table-border);
      border-bottom: unset;
      border-collapse: separate;
      margin-bottom: 35px;
      overflow: hidden;

      @media (width >= 768px) {
        margin-bottom: 27px;
      }
      
      @media (width >= 1200px) {
        margin-bottom: 48px;
      }

      thead {
        background: #F3F4F6;
        border-bottom: 1px solid var(--corp-table-border);
        th {
          border-right: 1px solid var(--corp-table-border);
          font-size: var(--corp-type-mobile-tag-1-font-size);
          font-weight: var(--corp-type-mobile-tag-1-font-weight);
          line-height: var(--corp-type-mobile-tag-1-line-height);
          color: var(--corp-color-neutral-medium-gray);
          padding: 16px 10px;

          @media (width >= 768px) {
            font-size: var(--corp-type-mobile-heading-2-medium-font-size);
            line-height: var(--corp-type-mobile-heading-2-medium-line-height);
            padding: 13px 18px;
          }

          @media (width >= 1200px) {
            font-size: var(--corp-type-desktop-heading-4-font-size);
            padding: 23px 32px;
          }

          &:last-of-type {
            border-right: unset;
          }
        }
      }

      tbody {
        td {
          border-bottom: 1px solid var(--corp-table-border);
          border-right: 1px solid var(--corp-table-border);
          font-size: var(--corp-type-mobile-body-2-font-size);
          font-weight: var(--corp-type-mobile-body-2-font-weight);
          line-height: var(--corp-type-mobile-heading-3-bold-line-height);
          color: var(--corp-color-text);
          padding: 16px 10px;
          
          @media (width >= 768px) {
            line-height: var(--corp-type-mobile-body-sm-line-height);
            padding: 13px 18px;
          }
          
          @media (width >= 1200px) {
            font-size: var(--corp-type-desktop-heading-5-font-size);
            line-height: var(--corp-type-desktop-heading-5-line-height);
            padding: 23px 32px;
          }

          &:last-of-type {
            border-right: unset;
          }
        }
      }
    }
    &:last-of-type {
      .committee-table__table {
        margin-bottom: 0;
      }
    }
  }
}

.committee-table-wrapper {
  position: relative;

  @media (width >= 768px) {
    padding-bottom: 48px;

    &::before {
      content: '';
      width: 100%;
      height: 100%;
      background: var(--corp-table-bg);
      z-index: -1;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  @media (width >= 1200px) {
    padding-bottom: 80px;
  }
}