#toc {
  max-width: 500px;
  border: 2px solid rgba(0,0,0,.1);
  margin: 2em 0;
  background-color: #f9f9f9;
}
.toc-title {
  color: #444;
  padding: .5em 1em;
}
.toc-container {
  padding: 1em !important;
  margin: 0 !important;
}
.toc-container, .toc-container ul {
  counter-reset: ul-counter;
  list-style: none;
  padding-left: 15px;
}
.toc-container li a {
margin-bottom: 5px;
}
.toc-container li a {
  display: flex;
  color: #3366ff!important;
}
.toc-container li a:before {
  counter-increment: ul-counter;
  content: counters(ul-counter,".");
  color: dodgerblue; /* お好みの色 */
  padding-right: .5em;
  white-space: nowra;
}
#toc .toc-title:after {
  content: '[ひらく]';
  margin-left: .5em;
}
#toc[open] .toc-title:after {
  content: '[とじる]';
}