評価グレード表

<div class="grade-table-wrapper">
  <table class="grade-table">
    <tr class="grade-a-plus">
      <td class="grade-label">A+</td>
      <td class="grade-content">××××××××××××××××</td>
    </tr>
    <tr class="grade-a">
      <td class="grade-label">A</td>
      <td class="grade-content">×××××××××××××××××××××××</td>
    </tr>
    <tr class="grade-b-plus">
      <td class="grade-label">B+</td>
      <td class="grade-content">××××××××××××××××</td>
    </tr>
    <tr class="grade-b">
      <td class="grade-label">B</td>
      <td class="grade-content">××××××××××××××</td>
    </tr>
    <tr class="grade-c-plus">
      <td class="grade-label">C+</td>
      <td class="grade-content">××××××××</td>
    </tr>
    <tr class="grade-c">
      <td class="grade-label">C</td>
      <td class="grade-content">×××××××××</td>
    </tr>
    <tr class="grade-d">
      <td class="grade-label">D</td>
      <td class="grade-content">××××××××××××</td>
    </tr>
    <tr class="grade-e">
      <td class="grade-label">E</td>
      <td class="grade-content">××××××××</td>
    </tr>
  </table>
</div>

.grade-table-wrapper {
  max-width: 900px;
  margin: 60px auto;
  font-family: "Helvetica Neue", sans-serif;
}

.grade-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 16px;
}

.grade-table td {
  padding: 16px;
  font-weight: 500;
}

.grade-label {
  width: 100px;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

/* ▼ A+（華やか） */
.grade-a-plus .grade-label { background-color: #d81b60; }     /* ルビーレッド */
.grade-a-plus .grade-content { background-color: #fce4ec; }   /* ベビーピンク */

/* ▼ A（優秀） */
.grade-a .grade-label { background-color: #e91e63; }          /* ローズ */
.grade-a .grade-content { background-color: #f8e0ea; }        /* サクラピンク */

/* ▼ B+（温かい） */
.grade-b-plus .grade-label { background-color: #fb8c00; }     /* アプリコット */
.grade-b-plus .grade-content { background-color: #ffecb3; }   /* サンセットベージュ */

/* ▼ B（標準） */
.grade-b .grade-label { background-color: #f57c00; }          /* オレンジ */
.grade-b .grade-content { background-color: #ffe0b2; }        /* パステルオレンジ */

/* ▼ C+（やさしい緑） */
.grade-c-plus .grade-label { background-color: #66bb6a; }     /* ミントグリーン */
.grade-c-plus .grade-content { background-color: #e8f5e9; }   /* ライムグリーン */

/* ▼ C（基本） */
.grade-c .grade-label { background-color: #43a047; }          /* リーフグリーン */
.grade-c .grade-content { background-color: #e0f2f1; }        /* グラスグリーン */

/* ▼ D（クール系） */
.grade-d .grade-label { background-color: #546e7a; }          /* スチールブルー */
.grade-d .grade-content { background-color: #e3f2fd; }        /* スカイグレイ */

/* ▼ E（落ち着いた） */
.grade-e .grade-label { background-color: #424242; }          /* チャコールグレー */
.grade-e .grade-content { background-color: #eeeeee; }        /* ライトグレー */