@charset "UTF-8";


.auto-toc {
  --toc-accent: #2f6f5e;   /* ← テーマ色。ここを変えるだけでOK */
  --toc-text: #333;
  --toc-muted: #767676;
  --toc-line: #e3e3e0;
 
  border: 1px solid var(--toc-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  margin: 2em auto;
  max-width: 680px;
  overflow: hidden;
}
 
/* ヘッダー(クリックで開閉) */
.auto-toc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.9em 1.3em;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.auto-toc__head:hover {
  background: rgba(0, 0, 0, 0.03);
}
.auto-toc__head:focus-visible {
  outline: 2px solid var(--toc-accent);
  outline-offset: -2px;
}
.auto-toc__label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-weight: bold;
  font-size: 1.05em;
  color: var(--toc-text);
  letter-spacing: 0.05em;
}
.auto-toc__label::before {
  content: "";
  width: 4px;
  height: 1.1em;
  border-radius: 2px;
  background: var(--toc-accent);
}
/* 開閉インジケーター(V字) */
.auto-toc__chev {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--toc-muted);
  border-bottom: 2px solid var(--toc-muted);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  flex: none;
}
.auto-toc.is-closed .auto-toc__chev {
  transform: rotate(-45deg);
}
 
/* 本体(開閉アニメーション) */
.auto-toc__body {
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.auto-toc.is-closed .auto-toc__body {
  max-height: 0 !important;
}
 
/* ==== テーマCSS対策: 目次内を強制リセット ==== */
.auto-toc ul,
.auto-toc li {
  list-style: none !important;
  background: none !important;
}
.auto-toc li {
  margin: 0 !important;
  padding: 0 !important;
}
.auto-toc li::before,
.auto-toc li::after {
  content: none !important;
  display: none !important;
}
.auto-toc li::marker {
  content: "" !important;
}
.auto-toc a {
  text-decoration: none !important;
  border-bottom: none !important;
  background-image: none !important;
}
 
.auto-toc ul {
  margin: 0 !important;
  padding: 0.2em 1.3em 1.1em !important;
}
.auto-toc ul ul {
  padding: 0.15em 0 0.2em 0.95em !important;
  margin: 0 0 0 0.45em !important;
  border-left: 2px solid var(--toc-line); /* H3のガイド線 */
}
 
/* リンク共通 */
.auto-toc a {
  display: block !important;
  padding: 0.42em 0.6em !important;
  margin: 0 !important;
  border-radius: 6px;
  border-left: 3px solid transparent;
  color: var(--toc-text);
  line-height: 1.5;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.auto-toc a:hover {
  background: rgba(0, 0, 0, 0.045) !important;
  text-decoration: none !important;
}
 
/* H2項目 */
.auto-toc > .auto-toc__body > ul > li > a {
  font-weight: bold;
}
.auto-toc > .auto-toc__body > ul > li {
  margin-top: 0.35em !important;
}
 
/* H3項目 */
.auto-toc ul ul a {
  font-weight: normal;
  font-size: 0.92em;
  color: var(--toc-muted);
  padding-top: 0.32em !important;
  padding-bottom: 0.32em !important;
}
 
/* 現在読んでいるセクションのハイライト */
.auto-toc a.is-active {
  border-left-color: var(--toc-accent);
  background: color-mix(in srgb, var(--toc-accent) 8%, transparent);
  color: var(--toc-accent);
  font-weight: bold;
}
 
/* 追従ヘッダーで見出しが隠れないようにする(高さに応じて調整) */
h2[id^="toc-h-"], h3[id^="toc-h-"] {
  scroll-margin-top: 90px;
}
 
/* アニメーションを減らす設定のユーザーに配慮 */
@media (prefers-reduced-motion: reduce) {
  .auto-toc__body,
  .auto-toc__chev,
  .auto-toc a {
    transition: none;
  }
  h2[id^="toc-h-"], h3[id^="toc-h-"] {
    scroll-behavior: auto;
  }
}
 
/* スマホ */
@media (max-width: 600px) {
  .auto-toc {
    margin: 1.5em 0;
  }
  .auto-toc ul {
    padding-left: 0.9em;
    padding-right: 0.9em;
  }
}