Cocoonの目次を追加CSSでカスタマイズ

:root {
  /* アイコンなどの色を設定 */
  --color-key: rgb(96, 125, 139);
  --color-key-alpha: rgba(96, 125, 139, .5);
}
.toc {
  /* 記事中の目次全体の枠線を設定 */
  border: 1px solid var(--color-key-alpha);
  border-radius: 4px;
  padding: 0;
  display: block;
}
.nwa .toc {
  /* サイドバーの目次全体の枠線を設定 */
  border: 1px solid var(--color-key-alpha);
  border-radius: 4px;
  padding: 0;
}
.toc-title {
  padding: 8px 16px;
  text-align: left;
  font-size: 24px;
  font-weight: bold;
}
.toc-title:before {
  /* 目次の前のアイコンを設定 */
  font-family: "Font Awesome 5 Free";
  content: "\f03a";
  margin-right: 8px;
  font-size: 20px;
  color: var(--color-key);
}
.toc-content {
  padding: 8px 16px;
  /* 目次の下の区切り線を設定 */
  border-top: 1px solid var(--color-key-alpha);
}
.sidebar .toc-content {
  /* サイドバーの目次をスクロール可能に変更 */
  overflow-y: auto;
  max-height: 390px;
}
.toc-content ol {
  position: relative;
}
.toc-content ol li {
  padding: 0em 0 0em 0.5em;
  list-style-type: none !important;
  /* 目次の全体的な余白を設定 */
  margin: 0.3em;
}
.sidebar .toc-content ol li {
  /* サイドバーの目次の全体的な余白を設定 */
  margin: 0.1em;
}
.toc-list>li>a::before {
  /* H2見出しの前のアイコンを設定 */
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  position: absolute;
  left: 0;
  color: var(--color-key);
  font-weight: bold;
}
.toc-list>li li a::before {
  /* H3以降の見出しの前のアイコンを設定 */
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  position: absolute;
  left: 0.5em;
  color: var(--color-key);
  font-weight: bold;
}
.toc-list li a {
  /* H2見出しを強調 */
  font-size: 1.1em;
  font-weight: 600;
}
.toc-list>li li a {
  /* H3以降の見出しを標準の見た目に変更 */
  font-size: 1em;
  font-weight: 500;
}