/* ===== テーブル：左右端0 / セル間だけ横5px / 上下5px ===== */
.tbl{
  --xgap: 5px;
  --ygap: 5px;

  width: calc(100% + (var(--xgap) * 2));
  margin: 0 calc(var(--xgap) * -1);   /* 左右外側だけ相殺（見た目は端0） */

  border-collapse: separate;
  border-spacing: var(--xgap) var(--ygap);
  table-layout: fixed;
}

.tbl + .tbl{ margin-top:5px; }

/* 列幅 */
.tbl col.col-head{ width:20%; }
.tbl col.col-num{ width:20%; }
.tbl col.col-content{ width:auto; }

/* セル共通（ここを1回だけ） */
.tbl th,.tbl td{
  box-sizing: border-box;
  padding:10px;
  vertical-align: middle;    /* ? これで統一 */
  line-height: 1.6;          /* ? 2行でも見え方が揃う */
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}

/* th */
.tbl th{
  border:1px solid #fff;
  background:#0065b4;
  color:#fff;

  padding:0.5em 1.2em;
  font-size:18px;
  font-weight:700;
  letter-spacing:0.02em;
}

/* td */
.tbl td{
  background:#f3f3f3;
}

/* small を固定（2行目が暴れない） */
.tbl td small{
  display:block;
  line-height:1.4;
  margin-top:2px;
}

/* 右列（番号） */
.tbl .num{
  white-space:normal;
  font-size:12px;
  line-height:1.4;
}

/* 2colの左列 */
.tbl-2col td:first-child{
  font-weight:700;
  font-size:16px;
}

/* スマホ */
@media(max-width:640px){
  .tbl{ --xgap: 4px; --ygap: 5px; }
  .tbl th{ font-size:14px; }
  .tbl col.col-head{ width:26%; }
  .tbl col.col-num{ width:28%; }
  .tbl-2col td:first-child{ font-size:14px; }
}