/* ============================
   Simple Auto TOC - style
   ============================ */

.satoc {
  width: 60%;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 16px 16px 12px;
  margin: 20px auto;
  background: #fff;
}

.satoc__title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  margin-bottom: 10px;
  text-align: center;
  position: relative;
  padding-bottom: 10px;
}

.satoc__list,
.satoc__sublist{
  margin: 0;
  padding: 0;
  list-style: none; /* 黒点なし */
}

.satoc__list {
  font-size: 0.9rem;
}

.satoc__item{
  margin: 0;
  padding: 0;
}

.satoc__link{
  display: inline-block;
  text-decoration: none;
  line-height: 1.6;
  padding: 6px 0;
}

.satoc__link:hover{
  text-decoration: underline;
}

/* =========================================
   ★今回の要望：親がない(root)は全部H2と同じ位置
   - root  : padding-left 0
   - child : 見出しレベルでインデント
   ========================================= */

/* 1) ルートは H2〜H6 ぜんぶ左0（最優先） */
.satoc__item--root .satoc__link{
  padding-left: 0 !important;
}

/* 2) 子だけインデント（レベルに応じて） */
.satoc__item--child.satoc__item--h2 .satoc__link{ padding-left: 0px; }
.satoc__item--child.satoc__item--h3 .satoc__link{ padding-left: 12px; }
.satoc__item--child.satoc__item--h4 .satoc__link{ padding-left: 24px; }
.satoc__item--child.satoc__item--h5 .satoc__link{ padding-left: 36px; }
.satoc__item--child.satoc__item--h6 .satoc__link{ padding-left: 48px; }

/* 3) もし “古いルール（h2〜h6でインデント）” が残ってても勝つように保険 */
.satoc__item--h2 .satoc__link{ padding-left: 0px; }
.satoc__item--h3 .satoc__link{ padding-left: 12px; }
.satoc__item--h4 .satoc__link{ padding-left: 24px; }
.satoc__item--h5 .satoc__link{ padding-left: 36px; }
.satoc__item--h6 .satoc__link{ padding-left: 48px; }

/* =========================================
   親子を近づけたい（縦の距離）
   ========================================= */

/* 親の直下の子リストだけ、上の余白を詰める */
.satoc__item > .satoc__sublist{
  margin-top: -1%;
}

/* 子リスト全体の左余白（親子感） */
.satoc__sublist{
  margin-left: 16px;
  margin-top: 2px; 
}

/* スムーススクロール */
html:has(.satoc--smooth){
  scroll-behavior: smooth;
}

.satoc__list-wrap {
  margin-left: 10%;
}

/* =========================================
   子項目だけ行間を詰める
   ========================================= */

.satoc__item--child .satoc__link{
  line-height: 1.3;   /* ← 1.6 → 1.3 に */
  padding: 3px 0;     /* ← 6px → 3px に */
}

/* さらに詰めたいなら */
.satoc__item--child.satoc__item--h4 .satoc__link,
.satoc__item--child.satoc__item--h5 .satoc__link,
.satoc__item--child.satoc__item--h6 .satoc__link{
  line-height: 1.25;
  padding: 2px 0;
}