/* ===================================================
   注釈（※、*1）のインデントを揃える
   数値は記事・CodePen と同じ。変えたのは色だけ（6 色に）。
   1つずつ、番号のところからコピーして使えます。
   =================================================== */

/* ---------- 01 ul と table の仕組みで揃える ---------- */
ul.notes {
  display: table;
  width: 100%;
  margin: 0;
  padding-left: 0;
}
ul.notes li {
  list-style: none;
  font-size: 12px;
  line-height: 1.6;
}
ul.notes li .notes_head {
  display: table-cell;
  vertical-align: top;
  white-space: nowrap;
  padding-right: 0.5em;
}
ul.notes li .notes_body {
  display: table-cell;
  vertical-align: top;
}

/* ---------- 02 text-indent と padding-left で揃える ---------- */
p.ind_a {
  font-size: 12px;
  line-height: 1.6;
  text-indent: -1.4em;
  padding-left: 1.4em;
  margin: 0;
}
p.ind_b {
  font-size: 12px;
  line-height: 1.6;
  text-indent: -1.3em;
  padding-left: 1.3em;
  margin: 0;
}

/* ---------- 03 応用・日付と文を揃える ---------- */
ul.notes_date {
  display: table;
  width: 100%;
  margin: 0;
  padding-left: 0;
}
ul.notes_date li {
  list-style: none;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 20px;
}
ul.notes_date li:last-child {
  margin-bottom: 0;
}
ul.notes_date li .notes_date_head {
  display: table-cell;
  vertical-align: top;
  white-space: nowrap;
  padding-right: 1.5em;
  min-width: 60px;
  text-align: right;
}
ul.notes_date li .notes_date_body {
  display: table-cell;
  vertical-align: top;
}

/* ---------- 04 いま：Grid と subgrid で揃える ---------- */
ul.notes_grid {
  display: grid;
  grid-template-columns: auto 1fr; /* 左は記号のいちばん長いものに合わせる */
  gap: 0 0.5em;
  margin: 0;
  padding-left: 0;
  list-style: none;
}
ul.notes_grid li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid; /* どの行も、ul の 2 列にそろう */
  font-size: 12px;
  line-height: 1.6;
}

/* ---------- 05 いま：※ だけなら list-style ---------- */
ul.notes_kome {
  margin: 0;
  padding-left: 1em; /* ※ の幅のぶん */
  list-style: "※";
}
ul.notes_kome li {
  font-size: 12px;
  line-height: 1.6;
}

/* ---------- 06 いま：*1、*2 は ol と @counter-style ---------- */
@counter-style notes-asterisk {
  system: extends decimal; /* 1, 2, 3 … と数える */
  prefix: "*";
  suffix: " ";
}
ol.notes_num {
  margin: 0;
  padding-left: 2em; /* *1 の幅のぶん。*10 からは 2.5em くらい */
  list-style: notes-asterisk;
}
ol.notes_num li {
  font-size: 12px;
  line-height: 1.6;
}