Profile 02

<section class="profile-table">
  <h2 class="profile-table__heading" id="profile-table-heading">会社概要</h2>

  <table class="profile-table__table" aria-labelledby="profile-table-heading">
    <tbody>
      <tr>
        <th scope="row" class="profile-table__label">会社名</th>
        <td class="profile-table__value">
          <p class="profile-table__text">株式会社サンプル</p>
        </td>
      </tr>
      <tr>
        <th scope="row" class="profile-table__label">所在地</th>
        <td class="profile-table__value">
          <p class="profile-table__text">
            〒100-0001<br />
            東京都千代田区千代田1-1-1 サンプルビル5F
          </p>
        </td>
      </tr>
      <tr>
        <th scope="row" class="profile-table__label">設立</th>
        <td class="profile-table__value">
          <p class="profile-table__text">2010年4月1日</p>
        </td>
      </tr>
      <tr>
        <th scope="row" class="profile-table__label">資本金</th>
        <td class="profile-table__value">
          <p class="profile-table__text">1,000万円</p>
        </td>
      </tr>
      <tr>
        <th scope="row" class="profile-table__label">代表者</th>
        <td class="profile-table__value">
          <p class="profile-table__text">代表取締役 山田 太郎</p>
        </td>
      </tr>
      <tr>
        <th scope="row" class="profile-table__label">従業員数</th>
        <td class="profile-table__value">
          <p class="profile-table__text">50名（2026年4月現在）</p>
        </td>
      </tr>
      <tr>
        <th scope="row" class="profile-table__label">事業内容</th>
        <td class="profile-table__value">
          <ul class="profile-table__list">
            <li>ウェブサイト制作</li>
            <li>システム開発</li>
            <li>デジタルマーケティング支援</li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>
</section>

/* reset */
:where(h2).profile-table__heading,
:where(p).profile-table__text {
  margin: 0;
  font: inherit;
}

:where(ul).profile-table__list {
  padding: 0;
  margin: 0;
  list-style: none;
}

:where(table).profile-table__table {
  border-collapse: collapse;
}

:where(th).profile-table__label {
  font: inherit;
  font-weight: inherit;
  text-align: inherit;
}

:where(td).profile-table__value {
  vertical-align: top;
}

/* snippet */
.profile-table {
  --profile-border: #e7e7e7;
  --profile-heading-color: #1e2939;
  --profile-label-color: #364153;
  --profile-label-background: #f7f8fa;
  --profile-value-color: #364153;

  width: 100%;
  max-width: 800px;
  margin-inline: auto;
}

.profile-table__heading {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--profile-heading-color);
  text-align: center;
}

.profile-table__table {
  width: 100%;
  table-layout: fixed;
  border-top: 1px solid var(--profile-border);
}

.profile-table__label {
  width: 35%;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: top;
  color: var(--profile-label-color);
  background-color: var(--profile-label-background);
  border-bottom: 1px solid var(--profile-border);

  @media (width >= 768px) {
    width: 28%;
    padding: 16px 20px;
  }
}

.profile-table__value {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--profile-value-color);
  border-bottom: 1px solid var(--profile-border);

  @media (width >= 768px) {
    padding: 16px 20px;
  }
}

.profile-table__list {
  display: grid;
  row-gap: 4px;
}

.profile-table__list > li {
  position: relative;
  padding-left: 1em;

  &::before {
    position: absolute;
    left: 0;
    content: "・" / "";
  }
}

<section class="profile-dl">
  <h2 class="profile-dl__heading">会社概要</h2>

  <dl class="profile-dl__list">
    <div class="profile-dl__item">
      <dt class="profile-dl__label">会社名</dt>
      <dd class="profile-dl__value">
        <p class="profile-dl__text">株式会社サンプル</p>
      </dd>
    </div>
    <div class="profile-dl__item">
      <dt class="profile-dl__label">所在地</dt>
      <dd class="profile-dl__value">
        <p class="profile-dl__text">
          〒100-0001<br />
          東京都千代田区千代田1-1-1 サンプルビル5F
        </p>
      </dd>
    </div>
    <div class="profile-dl__item">
      <dt class="profile-dl__label">設立</dt>
      <dd class="profile-dl__value">
        <p class="profile-dl__text">2010年4月1日</p>
      </dd>
    </div>
    <div class="profile-dl__item">
      <dt class="profile-dl__label">資本金</dt>
      <dd class="profile-dl__value">
        <p class="profile-dl__text">1,000万円</p>
      </dd>
    </div>
    <div class="profile-dl__item">
      <dt class="profile-dl__label">代表者</dt>
      <dd class="profile-dl__value">
        <p class="profile-dl__text">代表取締役 山田 太郎</p>
      </dd>
    </div>
    <div class="profile-dl__item">
      <dt class="profile-dl__label">従業員数</dt>
      <dd class="profile-dl__value">
        <p class="profile-dl__text">50名（2026年4月現在）</p>
      </dd>
    </div>
    <div class="profile-dl__item">
      <dt class="profile-dl__label">事業内容</dt>
      <dd class="profile-dl__value">
        <ul class="profile-dl__list-items">
          <li>ウェブサイト制作</li>
          <li>システム開発</li>
          <li>デジタルマーケティング支援</li>
        </ul>
      </dd>
    </div>
  </dl>
</section>

/* reset */
:where(h2).profile-dl__heading,
:where(p).profile-dl__text {
  margin: 0;
  font: inherit;
}

:where(dl).profile-dl__list {
  margin: 0;
}

:where(dt).profile-dl__label {
  font: inherit;
  font-weight: inherit;
}

:where(dd).profile-dl__value {
  margin: 0;
}

:where(ul).profile-dl__list-items {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* snippet */
.profile-dl {
  --profile-border: #e7e7e7;
  --profile-heading-color: #1e2939;
  --profile-label-color: #364153;
  --profile-label-background: #f7f8fa;
  --profile-value-color: #364153;

  width: 100%;
  max-width: 800px;
  margin-inline: auto;
}

.profile-dl__heading {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--profile-heading-color);
  text-align: center;
}

.profile-dl__list {
  border-top: 1px solid var(--profile-border);
}

.profile-dl__item {
  border-bottom: 1px solid var(--profile-border);

  @media (width >= 768px) {
    display: grid;
    grid-template-columns: 28% 1fr;
  }
}

.profile-dl__label {
  padding: 16px 20px 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--profile-label-color);
  background-color: var(--profile-label-background);

  @media (width >= 768px) {
    padding: 16px 20px;
  }
}

.profile-dl__value {
  padding: 8px 20px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--profile-value-color);

  @media (width >= 768px) {
    padding: 16px 20px;
  }
}

.profile-dl__list-items {
  display: grid;
  row-gap: 4px;
}

.profile-dl__list-items > li {
  position: relative;
  padding-left: 1em;

  &::before {
    position: absolute;
    left: 0;
    content: "・" / "";
  }
}