【はてなblog】公式テーマ「Neutral」で目次が見づらくなるのを修正

背景

当ブログでは、はてなブログの公式テーマである「Neutral」を適用しております。

Neutral

2ヶ月ほど前にテーマを変更したのですが、このテーマだと記事に埋め込んだ目次が崩れてしまうというのに最近気付きました。

↓目次

↓本当はこうなってほしい。

ご覧の通り、本来であれば見出し大きさに合わせて目次のインデントが下がるはずなのですが、全て一律に並んでしまっているためとても見づらいです。

原因調査

まずはデザインCSSが悪さをしているんだろうなーと思い、自分で独自に記述したCSSを消してみましたが直りませんでしたので、公式テーマ側の不具合と思われます。
はてなへ連絡して直してもらうのも面倒なので取り急ぎの対応をするために原因を調査してみました。（CSSは得意ではないのですが。。。）

この公式テーマを適用すると、以下の画面の通り、/css/theme/neutral/neutral.cssが適用されて、このテーマのデザインが出来上がるようです。

試しにこのファイルを取得して確認してみました。
結果が以下です。

neutral.css（クリックすると展開されます）

@charset "UTF-8";
/*
  Theme: Neutral
  Author: Hatena Blog Team
  Description: 文章が読みやすいシンプルなテーマ です
  Responsive: yes
 */
@import url("https://fonts.googleapis.com/css?family=Inter:300,400,500,700|Noto+Sans+JP&display=swap");

* {
  margin: 0;
  padding: 0
}

body,
html {
  font-family: Inter, Noto Sans JP, Helvetica Neue, Source Han Sans, Segoe UI, sans-serif;
  font-size: 100%;
  font-style: normal;
  word-wrap: break-word
}

a {
  color: #333;
  text-decoration: none
}

a:hover {
  color: #1a237e
}

#globalheader-container {
  background: #fff
}

#blog-title {
  margin: 32px 0 80px
}

@media screen and (min-width:992px) {
  #blog-title {
    margin: 72px 0 120px
  }
}

#blog-title #blog-title-inner {
  position: relative
}

#blog-title #blog-title-content {
  width: 90%;
  margin: auto;
  padding: 0;
  text-align: center
}

#blog-title #blog-title-content #title {
  line-height: 1
}

#blog-title #blog-title-content #title a {
  font-size: 20px;
  font-weight: 500
}

@media screen and (min-width:992px) {
  #blog-title #blog-title-content #title a {
    font-size: 32px
  }
}

#blog-title #blog-title-content #blog-description {
  font-size: 14px;
  font-weight: 400;
  color: #888;
  margin: 14px 0 0
}

@media screen and (min-width:992px) {
  #blog-title #blog-title-content #blog-description {
    font-size: 16px
  }
}

.header-image-enable #blog-title-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%)
}

.header-image-enable #blog-title-inner #blog-description,
.header-image-enable #blog-title-inner #title a {
  text-shadow: 0 0 10px #333
}

.header-image-enable #blog-title-inner #blog-description {
  color: #fff !important
}

#top-editarea {
  margin: 0 0 32px
}

#top-box .breadcrumb-inner a,
#top-box .breadcrumb-inner span {
  font-size: 14px;
  color: #888
}

#content-inner {
  display: flex;
  flex-flow: column;
  justify-content: center
}

@media screen and (min-width:992px) {
  #content-inner {
    flex-flow: row
  }
}

#content-inner #main {
  width: auto;
  margin: auto
}

@media screen and (min-width:992px) {
  #content-inner #main {
    width: 620px;
    margin: 0 32px 0 0
  }
}

#content-inner #main-inner {
  margin: 0 0 24px
}

#content-inner #box2 {
  width: auto;
  margin: 0 1em
}

@media screen and (min-width:992px) {
  #content-inner #box2 {
    width: 300px
  }
}

#content-inner #box2-inner {
  padding: 80px 0 0
}

@media screen and (min-width:992px) {
  #content-inner #box2-inner {
    padding: 0
  }
}

/* footer -------------------*/
#bottom-editarea {
  max-width: 960px;
  margin: 24px 16px
}

@media screen and (min-width:560px) {
  #bottom-editarea {
    margin: 24px auto
  }
}

#footer {
  padding: 32px 0;
  font-size: 90%;
  text-align: center;
  color: #333
}

#footer #footer-inner {
  width: auto;
  margin: auto 1rem
}

@media screen and (min-width:992px) {
  #footer #footer-inner {
    width: 1000px;
    margin: auto
  }
}

#footer address,
#footer p {
  margin: 0 8px 0 0;
  display: inline-block
}

#footer address .footer-address-name,
#footer p .footer-address-name {
  text-align: left
}

#footer .footer-address a>img {
  vertical-align: sub
}

#top-box {
  margin: 0 1em 1em
}

@media screen and (min-width:992px) {
  #top-box {
    max-width: 960px;
    margin: 16px auto
  }
}

#top-box .breadcrumb-child-link span:focus,
#top-box .breadcrumb-child-link span:hover,
#top-box .breadcrumb-link span:focus,
#top-box .breadcrumb-link span:hover {
  color: #333
}

.entry {
  margin: 0 0 80px;
  padding: 24px 1em 40px;
  background: #fff;
  border-radius: 4px
}

.entry .entry-inner .entry-header {
  position: relative;
  margin: 0 0 32px
}

.entry .entry-inner .entry-header .date a {
  font-size: 14px;
  color: #888
}

@media screen and (min-width:992px) {
  .entry .entry-inner .entry-header .date {
    font-size: 18px
  }
}

.entry .entry-inner .entry-header .entry-title {
  font-size: 28px;
  margin: 16px 0;
  padding: 0;
  text-align: left
}

@media screen and (min-width:992px) {
  .entry .entry-inner .entry-header .entry-title {
    font-size: 30px;
    margin: 24px 0 32px
  }
}

.entry .entry-inner .entry-header .entry-categories .entry-category-link {
  font-size: 12px;
  background: #f5f5f5;
  padding: .45em;
  margin: 0 0 4px;
  border-radius: 4px;
  display: inline-block
}

.entry .entry-inner .entry-header .entry-header-menu {
  position: absolute;
  top: 0;
  right: 0
}

.entry .entry-inner .entry-header .entry-header-menu a {
  font-size: 14px;
  padding: .45em;
  border: 1px solid #d9d9d9;
  border-radius: 4px
}

.entry .entry-inner .entry-header .entry-header-menu a:focus,
.entry .entry-inner .entry-header .entry-header-menu a:hover {
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
  color: #1a237e
}

.entry .entry-inner .entry-content .entry-category-link {
  display: inline-block;
  color: #333;
  background: #e0e0e0;
  padding: .4rem .8rem;
  border-radius: 4px;
  margin: 0 0 8px;
  font-size: 12px
}

.entry .entry-inner .entry-content .entry-category-link:focus,
.entry .entry-inner .entry-content .entry-category-link:hover {
  color: #333
}

@media screen and (min-width:992px) {
  .entry .entry-inner .entry-content .entry-category-link {
    font-size: 14px
  }
}

.entry .entry-inner .entry-content .table-of-contents {
  background: #f5f5f5;
  list-style: none;
  border-radius: 4px;
  margin: 0;
  padding: 1.6em
}

.entry .entry-inner .entry-content .table-of-contents li>ul {
  margin: 0
}

.entry .entry-inner .entry-content .table-of-contents ul li {
  list-style: none;
  line-height: 1.5
}

.entry .entry-inner .entry-content .table-of-contents a,
.entry .entry-inner .entry-content .table-of-contents li {
  color: #1a237e
}

.entry .entry-inner .entry-footer {
  margin: 72px 0 0
}

.entry .entry-inner .entry-footer .entry-footer-section {
  font-size: 14px
}

.entry .entry-inner p {
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: .5px;
  font-style: normal;
  margin: 33px 0;
  color: #454545
}

.entry .entry-inner p .keyword {
  border-bottom: 1px dotted #333
}

.entry .entry-inner p .keyword:focus,
.entry .entry-inner p .keyword:hover {
  border-bottom: 1px solid #333;
  text-decoration: none
}

.entry .entry-inner p a {
  color: #1a237e
}

.entry .entry-inner p a:focus,
.entry .entry-inner p a:hover {
  text-decoration: underline
}

.entry .entry-inner p code {
  background: #272822;
  color: #f8f8f2
}

.entry .entry-inner h1,
.entry .entry-inner h2,
.entry .entry-inner h3,
.entry .entry-inner h4,
.entry .entry-inner h5,
.entry .entry-inner h6 {
  margin: 33px 0
}

.entry .entry-inner h1 {
  font-size: 28px
}

@media screen and (min-width:992px) {
  .entry .entry-inner h1 {
    font-size: 30px
  }
}

.entry .entry-inner h2 {
  font-size: 26px
}

@media screen and (min-width:992px) {
  .entry .entry-inner h2 {
    font-size: 28px
  }
}

.entry .entry-inner h3 {
  font-size: 24px
}

@media screen and (min-width:992px) {
  .entry .entry-inner h3 {
    font-size: 26px
  }
}

.entry .entry-inner h4 {
  font-size: 22px
}

@media screen and (min-width:992px) {
  .entry .entry-inner h4 {
    font-size: 24px
  }
}

.entry .entry-inner h5 {
  font-size: 20px
}

@media screen and (min-width:992px) {
  .entry .entry-inner h5 {
    font-size: 22px
  }
}

.entry .entry-inner h6 {
  font-size: 16px
}

@media screen and (min-width:992px) {
  .entry .entry-inner h6 {
    font-size: 20px
  }
}

.entry .entry-inner dl,
.entry .entry-inner ol,
.entry .entry-inner ul {
  margin-inline-start: 1.5em
}

.entry .entry-inner dl li,
.entry .entry-inner ol li,
.entry .entry-inner ul li {
  line-height: 1.8
}

.entry .entry-inner hr {
  margin: 16px 0;
  border: none;
  border-top: 1px solid #d9d9d9
}

.entry .entry-inner dd {
  margin-inline-start: 40px
}

.entry .entry-inner blockquote {
  background: #fff;
  border-left: 3px solid #e0e0e0;
  border-radius: 4px;
  padding: 16px;
  font-size: 14px
}

.entry .entry-inner blockquote p {
  margin: 16px 0;
  font-size: 16px;
  line-height: 1.6;
  font-style: oblique
}

.entry .entry-inner blockquote p cite {
  font-style: normal;
  font-size: 14px
}

.entry .entry-inner pre {
  margin: 0 0 24px;
  padding: 16px 8px;
  background: #272822;
  color: #f8f8f2;
  border-radius: 4px
}

.entry .entry-inner pre .synComment {
  color: #75715e
}

.entry .entry-inner pre .synSpecial {
  color: #e6db74
}

.entry .entry-inner pre .synType {
  color: #66d9ef
}

.entry .entry-inner pre .synPreProc,
.entry .entry-inner pre .synStatement {
  color: #f92672
}

.entry .entry-inner pre .synIdentifier {
  color: #f8f8f2
}

.entry .entry-inner pre .synConstant {
  color: #ae81ff
}

.entry .entry-inner table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 14px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
  border-collapse: unset;
  border-spacing: 0
}

.entry .entry-inner table th {
  background: #d9d9d9;
  padding: .45em;
  border-right: 1px solid #fff
}

.entry .entry-inner table th:last-child {
  border-right: none
}

.entry .entry-inner table tbody {
  display: table-row-group;
  text-align: center
}

.entry .entry-inner table tbody tr {
  display: table-row
}

.entry .entry-inner table tbody tr:nth-child(2n) {
  background: #f5f5f5
}

.entry .entry-inner table tbody td {
  padding: .45em;
  border-right: 1px solid #d9d9d9
}

.entry .entry-inner table tbody td:last-child {
  border-right: none
}

.entry .entry-inner .footnote {
  font-size: 14px
}

.entry .entry-inner .entry-see-more {
  color: #333;
  border: 1px solid #d9d9d9;
  font-size: 16px;
  border-radius: 4px;
  padding: .6em .8em
}

.entry .entry-inner .entry-see-more:hover {
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
  color: #1a237e;
  transition: color .3s
}

.entry .entry-inner .entry-footer-ad {
  margin: 8px 0 0;
  padding: 8px 4px;
  border: 1px solid #d9d9d9;
  border-radius: 4px
}

.entry .entry-inner .hatena-star-container {
  margin: 0 0 24px
}

.entry .entry-inner .social-buttons {
  margin: 24px 0
}

.entry .entry-inner .entry-footer-modules .hatena-module-title {
  font-size: 18px;
  margin: 0 0 24px
}

.entry .entry-inner .entry-footer-modules .hatena-module {
  margin: 0;
  padding: 1em 0
}

.entry .entry-inner .entry-footer-modules .related-entries {
  margin: 0
}

.entry .entry-inner .entry-footer-modules .urllist-entry-body,
.entry .entry-inner .entry-footer-modules .urllist-image-link {
  display: none
}

.entry .entry-inner .comment-box {
  margin: 32px 0 0
}

.entry .entry-inner .comment-box .comment {
  margin: 0
}

.entry .entry-inner .comment-box .comment .entry-comment {
  list-style: none;
  margin: 0 0 32px
}

.entry .entry-inner .comment-box .comment .comment-user-name {
  margin: 0 0 4px;
  display: flex;
  align-items: center
}

.entry .entry-inner .comment-box .comment .comment-user-name .hatena-id-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  margin: 0 8px 0 0
}

.entry .entry-inner .comment-box .comment .comment-content {
  margin: 0 0 16px
}

.entry .entry-inner .comment-box .comment .comment-content p {
  font-size: 16px;
  line-height: 1.6;
  margin: 16px 0
}

.entry .entry-inner .comment-box .comment .comment-metadata {
  margin: 0;
  font-size: 14px;
  color: #888
}

.entry .entry-inner .comment-box .leave-comment-title {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  color: #333;
  padding: 8px 16px;
  font-size: 16px
}

@media screen and (min-width:992px) {
  .entry .entry-inner .comment-box .leave-comment-title {
    font-size: 14px
  }
}

.entry .entry-inner .comment-box .leave-comment-title:focus,
.entry .entry-inner .comment-box .leave-comment-title:hover {
  color: #1a237e;
  background: #f5f5f5;
  border: 1px solid #f5f5f5
}

.pager .pager-next,
.pager .pager-prev {
  width: 100%;
  position: relative;
  display: inline-block;
  background: #fff;
  border-radius: 4px
}

.pager .pager-next a,
.pager .pager-prev a {
  padding: 1em;
  display: block
}

.pager .pager-next:focus,
.pager .pager-next:hover,
.pager .pager-prev:focus,
.pager .pager-prev:hover {
  color: #1a237e
}

.pager .pager-next .pager-arrow,
.pager .pager-prev .pager-arrow {
  font-size: 32px;
  height: 32px;
  line-height: 32px;
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  margin: auto;
  color: #d9d9d9
}

.pager.permalink {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  margin: 24px 16px;
  padding: 8px 16px;
  line-height: 1.5
}

@media screen and (min-width:992px) {
  .pager.permalink {
    margin: 32px auto
  }
}

.pager.permalink .pager-prev {
  margin-right: auto;
  padding: 0 0 0 32px
}

.pager.permalink .pager-prev a {
  text-align: left;
  padding-left: 0
}

.pager.permalink .pager-prev .pager-arrow {
  left: 0
}

.pager.permalink .pager-next {
  margin-left: auto;
  padding: 0 32px 0 0
}

.pager.permalink .pager-next a {
  text-align: right;
  padding-right: 0
}

.pager.permalink .pager-next .pager-arrow {
  right: 0
}

.page-index .pager {
  border-radius: 4px;
  justify-content: center;
  text-align: center
}

.page-index .pager .pager-next,
.page-index .pager .pager-prev {
  display: block
}

.hatena-module {
  background: #fff;
  margin: 0 0 32px;
  padding: 16px;
  border-radius: 4px
}

.hatena-module .hatena-module-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 24px
}

.hatena-module .hatena-module-title a {
  color: #333
}

.hatena-module .hatena-module-body,
.hatena-module .hatena-urllist {
  padding: 0
}

.hatena-module .hatena-module-body .urllist-item,
.hatena-module .hatena-urllist .urllist-item {
  list-style: none;
  margin: 0 0 32px
}

.hatena-module .hatena-module-body .urllist-item:last-child,
.hatena-module .hatena-urllist .urllist-item:last-child {
  margin-bottom: 0
}

.hatena-module .hatena-module-body .urllist-item .urllist-item-inner .urllist-title-link,
.hatena-module .hatena-urllist .urllist-item .urllist-item-inner .urllist-title-link {
  color: #333;
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.6;
  display: inline;
  text-align: justify
}

.hatena-module .hatena-module-body .urllist-item .urllist-item-inner .urllist-title-link:hover,
.hatena-module .hatena-urllist .urllist-item .urllist-item-inner .urllist-title-link:hover {
  color: #1a237e
}

.hatena-module .hatena-module-body .urllist-item .urllist-item-inner .urllist-date-link,
.hatena-module .hatena-urllist .urllist-item .urllist-item-inner .urllist-date-link {
  margin: 0 0 4px
}

.hatena-module .hatena-module-body .urllist-item .urllist-item-inner .urllist-date-link time,
.hatena-module .hatena-urllist .urllist-item .urllist-item-inner .urllist-date-link time {
  color: #888
}

.hatena-module .hatena-module-body .urllist-item .urllist-item-inner .urllist-categories,
.hatena-module .hatena-urllist .urllist-item .urllist-item-inner .urllist-categories {
  margin: 4px 0 0
}

.hatena-module .hatena-module-body .urllist-item .urllist-item-inner .urllist-categories .urllist-category-link,
.hatena-module .hatena-urllist .urllist-item .urllist-item-inner .urllist-categories .urllist-category-link {
  display: inline-block;
  background: #f5f5f5;
  margin: 0 0 8px;
  padding: .4em;
  font-size: 12px;
  border-radius: 4px
}

.hatena-module .hatena-module-body .urllist-item .urllist-item-inner .urllist-categories .urllist-category-link:hover,
.hatena-module .hatena-urllist .urllist-item .urllist-item-inner .urllist-categories .urllist-category-link:hover {
  color: #1a237e
}

.hatena-module .hatena-module-body .urllist-item .urllist-item-inner .urllist-entry-body,
.hatena-module .hatena-urllist .urllist-item .urllist-item-inner .urllist-entry-body {
  color: #888;
  font-size: 14px;
  margin: 0 0 8px;
  text-align: justify
}

.hatena-module .hatena-module-body .urllist-image,
.hatena-module .hatena-urllist .urllist-image {
  border-radius: 4px
}

.hatena-module .hatena-module-body .urllist-see-more-link,
.hatena-module .hatena-urllist .urllist-see-more-link {
  border: 1px solid #f5f5f5;
  border-radius: 4px;
  padding: .45em
}

.hatena-module .hatena-module-body .urllist-see-more-link:focus,
.hatena-module .hatena-module-body .urllist-see-more-link:hover,
.hatena-module .hatena-urllist .urllist-see-more-link:focus,
.hatena-module .hatena-urllist .urllist-see-more-link:hover {
  color: #1a237e;
  background: #f5f5f5
}

.hatena-module .hatena-module-body .archive-module-year,
.hatena-module .hatena-urllist .archive-module-year {
  margin: 0 0 16px
}

.hatena-module .hatena-module-body .archive-module-year:last-child,
.hatena-module .hatena-urllist .archive-module-year:last-child {
  margin: 0
}

.search-form {
  display: flex;
  justify-content: center;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
  position: relative
}

.search-form .search-module-input {
  width: 100%;
  font-size: .8em;
  outline: 0;
  border: none;
  margin: 0;
  padding: .6em
}

.search-form .search-module-button {
  width: 16px;
  height: 16px;
  background: transparent url(/css/theme/neutral/images/search.png?version=ec8748a6061e897005920cb7311ca05e87379792) no-repeat 50%;
  background-size: 16px 16px;
  position: absolute;
  top: 7px;
  right: 6px;
  border: none;
  padding: .6em;
  outline: 0;
  text-indent: -9999px;
  opacity: .5;
  cursor: pointer
}

.search-form .search-module-button:focus,
.search-form .search-module-button:hover {
  transition: color .3s;
  opacity: 1
}

.hatena-module-profile .hatena-module-body {
  display: flex;
  flex-direction: column;
  text-align: center
}

.hatena-module-profile .hatena-module-body .profile-icon {
  border-radius: 4px;
  margin: 0 0 8px
}

.hatena-module-profile .hatena-module-body .profile-description {
  margin: 8px 0 0
}

.hatena-module-profile .hatena-module-body .profile-description p {
  font-size: 14px;
  text-align: left
}

.hatena-module-profile .hatena-module-body .hatena-follow-button-box {
  margin: 24px auto
}

.hatena-module-recent-entries .urllist-image-link .urllist-image {
  width: 80px;
  height: 80px
}

.hatena-module-category .hatena-urllist li {
  list-style: none;
  margin: 0 0 16px
}

.hatena-module-category .hatena-urllist li:last-child {
  margin-bottom: 0
}

.hatena-module-category .hatena-urllist li a {
  color: #333;
  display: inline-block;
  background: #f5f5f5;
  padding: .4rem;
  border-radius: 4px;
  font-size: 14px
}

.hatena-module-category .hatena-urllist li a:focus,
.hatena-module-category .hatena-urllist li a:hover {
  color: #1a237e
}

.hatena-module-recent-comments .recent-comments .hatena-id-icon {
  border-radius: 4px
}

.hatena-module-recent-comments .recent-comments li {
  list-style: none;
  margin: 0 0 16px
}

.hatena-module-recent-comments .recent-comments li:last-child {
  margin-bottom: 0
}

.hatena-module-recent-comments .recent-comments .recent-comment-time {
  color: #888;
  font-style: normal
}

.hatena-module-links .hatena-urllist {
  list-style: none;
  line-height: 1.8
}

.hatena-module-authors-list .authors-urllist {
  margin: 0 0 8px
}

.hatena-module-authors-list .authors-urllist a {
  display: flex;
  align-items: center
}

.hatena-module-authors-list .authors-urllist .authors-user-icon {
  border-radius: 4px;
  width: 32px
}

.hatena-module-circles .circle-urllist li {
  display: flex;
  margin: 0 0 16px;
  align-items: center
}

.hatena-module-circles .circle-urllist li:last-child {
  margin-bottom: 0
}

.hatena-module-html ul {
  margin-inline-start: 1.2em
}

.hatena-module-html p,
.hatena-module-html pre {
  line-height: 1.6;
  margin: 16px 0
}

.hatena-module-html .code,
.hatena-module-html code {
  background: #272822;
  color: #f8f8f2;
  padding: .24em;
  border-radius: 4px;
  font-size: 14px
}

.page-archive .archive-entries {
  background: #fff;
  padding: 32px 16px 40px;
  border-radius: 4px
}

.page-archive .archive-heading {
  margin: 0 0 32px;
  background: #fff;
  border-radius: 4px;
  padding: 16px
}

.page-archive .search-result {
  padding: 16px 16px 40px
}

.archive-header-category,
.page-archive .search-result {
  background: #fff;
  border-radius: 4px
}

.archive-header-category .archive-heading {
  margin: 0;
  padding: 16px
}

.page-archive-category .archive-header-category {
  margin: 0 0 40px
}

.page-archive-category .archive-header-category .archive-heading {
  background: #f5f5f5;
  padding: 4px 8px;
  margin: 16px;
  border-radius: 4px;
  display: inline-block;
  font-size: 16px
}

.page-archive-category .archive-header-category .archive-heading .archive-entries .archive-entry {
  margin: 0 0 72px
}

.page-archive-category .archive-header-category .archive-heading .archive-entries .archive-entry:last-child {
  margin-bottom: 0
}

.page-archive-category .archive-header-category .archive-heading .entry-title {
  font-size: 22px;
  line-height: 1.5em
}

.page-archive-category .archive-header-category .archive-heading .entry-title a {
  color: #333
}

.page-archive-category .archive-header-category .archive-heading .entry-title a:focus,
.page-archive-category .archive-header-category .archive-heading .entry-title a:hover {
  color: #1a237e
}

.page-archive-category .archive-category-link {
  color: #333;
  background-color: #f5f5f5;
  margin: 0 0 8px;
  padding: .4em;
  border-radius: 4px
}

.archive-entry {
  margin: 0 0 40px
}

@media screen and (min-width:992px) {
  .archive-entry {
    margin: 0 0 72px
  }
}

.archive-entry:last-child {
  margin-bottom: 0
}

.archive-entry .archive-entry-header .date {
  margin: 0 0 8px
}

.archive-entry .archive-entry-header .date time {
  color: #888;
  font-size: 14px
}

@media screen and (min-width:992px) {
  .archive-entry .archive-entry-header .date {
    font-size: 18px
  }
}

.archive-entry .archive-entry-header .entry-title {
  margin: 0 0 16px
}

.archive-entry .archive-entry-header .entry-title .entry-title-link {
  font-size: 18px
}

@media screen and (min-width:992px) {
  .archive-entry .archive-entry-header .entry-title .entry-title-link {
    font-size: 22px;
    margin: 0 0 24px
  }
}

.archive-entry .archive-entry-body .highlight,
.archive-entry .archive-entry-header .highlight {
  background: #faeacb;
  border-radius: 4px;
  border: none
}

.archive-entry .categories {
  margin: 0 0 8px
}

.archive-entry .categories .archive-category-link {
  font-size: 12px;
  background: #f5f5f5;
  margin: 0 0 8px;
  padding: .45em;
  border-radius: 4px;
  display: inline-block
}

.archive-entry .entry-thumb {
  border-radius: 4px;
  width: 80px;
  height: 80px
}

@media screen and (min-width:992px) {
  .archive-entry .entry-thumb {
    width: 100px;
    height: 100px
  }
}

.archive-entry .archive-entry-body .entry-description {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 8px
}

.page-about .entry-content {
  margin: 0 0 24px
}

.page-about .entry-content img.profile-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  margin: 0 8px 0 0
}

.page-about .entry-content dl {
  margin: 24px 0 0
}

.page-about .entry-content dt {
  font-size: 18px;
  line-height: 1.8;
  margin: 0 0 8px
}

.page-about .entry-content dd {
  margin-bottom: 16px
}

.page-about .entry-content dd li {
  list-style: disc;
  color: #1a237e;
  font-size: 16px
}

.page-about .entry-content dd li a:hover {
  text-decoration: underline
}

とりあえずこのファイルは後から確認するとして、実際のブラウザの画面で対象の目次ではどういったスタイルが適用されているのかを確認しました。

Chromeのデベロッパーツールで確認すると、htmlの記述的には<li>要素の中に下位の見出しが<li>要素として入れ子になっていて意図した形になっていそうです。
この入れ子になっている方の<li>に適用されているスタイルのうち怪しそうなものを見つけ、スタイルを外すというのを実施していったところ、

* {
  margin: 0;
  padding: 0
}

のmargin: 0を外したところ、求めていた形のインデントになるらしいことがわかりました。
（ついでに個人的な好みで目次は箇条書きで・がついていたほうが見やすいと思っていたので、list-style: none;も解除しておきました。）
そうすると以下の感じになります。

これならちゃんと目次も見やすいですね。

デザインCSSの修正

原因がつかめ、修正対象が明らかになったのでデザインCSSより修正のスタイルを適用していきます。

今回はmargin: 0が悪さをしておりましたが、このスタイルは全体に適用されているものなので、それ自体を打ち消してしまっては全体のスタイルが崩れてしまいます。
なので目次の要素にのみmarginを適用させてあげるようスタイルを追加します。
目次のclassはtable-of-contentsとして割り振られているので、以下のように指定して1文字分marginを加えます。

.table-of-contents ul li {
  margin-left: 1em
}

ul.table-of-contents,
ul.table-of-contents li,
ul.table-of-contents ul li {
  list-style: circle;
}

これを管理画面のデザインCSSより適用します。

するとこんな感じで見やすくなりました！！ （インデントが下がったときに・がつかないのはなぜが出来なかったので諦めました。。ul.table-of-contents ul liで適用されるはずなのですが、、CSSはよく分からんです。。）

かなり無理矢理ですが、とりあえず見やすくすることが出来ました！！