AFFINGER5のSUGOI_MOKUJI（すごい目次）をお洒落にカスタマイズ。

#st_toc_container{
  padding: 0!important;
  margin: 2em 0;
}
#st_toc_container .st_toc_title{
  border-bottom: none;
  background: #4c4e69;
  line-height: 2.2em;
  display: block;
}
.post #st_toc_container ul, .post #st_toc_container ol, #st_toc_container.only-toc .st_toc_list{
  padding: 0em 1em 1em 5em;
}
#st_toc_container.only-toc li{
  list-style-type: none;
  border: none;
}
#st_toc_container.only-toc ul a{
  padding: 0px 0px 10px;
}
.post #st_toc_container ul ul{
  padding: 0px;
  padding-left: 2em!important;
}
#st_toc_container li li{
  padding: 0;
  line-height: 1;
}
#st_toc_container ul li li a {
    padding-left: 0px;
    line-height: 1.1!important;
}
#st_toc_container ul a{
  border-bottom: none;
  line-height: 1.2!important;
}
ul.st_toc_list >li{
  counter-increment: item;
}
ul.st_toc_list >li>ul>li{
  counter-increment: item2;
}
#st_toc_container li{
  position: relative;
}
ul.st_toc_list >li:before{
  content: counters(item,"-")" ";
position: absolute;
left: -30px;
top: -4px;
background: #6b6b6b;
width: 18px;
height: 18px;
line-height: 18px;
padding: 3px;
font-size: 13px;
text-align: center;
color: #fff;
border-radius: 33px;
}
ul.st_toc_list >li>ul>li:before{
  content: counters(item2,"-")" ";
position: absolute;
left: -30px;
top: -1px;
background: #c3c3c3;
min-width: 14px;
height: 14px;
line-height: 14px;
padding: 3px;
font-size: 13px;
text-align: center;
color: #ffffff;
}
@media only screen and (max-width: 600px) {
.post #st_toc_container ul, .post #st_toc_container ol{
    padding: 0 1em 1em 3.5em;
  }
}