table {
  border-collapse: collapse;
  width: 100%;
  max-width: 700px;
}
th, td {
  border: 1px solid #ccc;
  padding: 6px;
  text-align: left;
}
.category {
  width: 60px;
  text-align: center;
  white-space: nowrap;
}

h2 {
  margin-top: 32px;
  margin-bottom: 8px;
}
p {
  margin-bottom: 24px;
}


/* バーの外枠を青く、バー色は画像に近いティール系 */
.bar-container {
  background-color: #000;              /* 未充填部分：黒 */
  border: 1px solid #cc0000;           /* 赤枠 */
  height: 16px;
  width: 120px;
  border-radius: 3px;
  overflow: hidden;
  display: block;
}

.bar {
  background-color: #00cccc;           /* シアン系：充填部分 */
  height: 100%;
  display: block;
}