/* 記事本文 (.container-narrow) は画面中央固定、TOC はその右外側に配置する。
   対称にするため反対側に TOC と同幅のダミー列を置くので、両側に 240px 分の
   余白が要り、表示は 960px のモバイル判定とは別に 1400px 以上に設定する。 */

.article-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
  align-items: start;
}
/* padding を潰すと grid track 760px がそのままテキスト幅になり本文が広がるため、
   .container-narrow 本来の padding (0 var(--sp-8)) は維持する。 */
.article-body-grid > .container-narrow {
  grid-column: 1;
  max-width: none;
  margin: 0;
}

.article-toc {
  display: none;
}
.article-toc-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--sub);
  text-transform: uppercase;
  margin: 0 0 var(--sp-3);
  padding: 0 var(--sp-2); /* リンクの padding-left と揃えてテキスト左端を一致させる */
}
/* prose.css の要素セレクタ (.article-body ol 等) に詳細度で負けないよう、
   .case-process .case-process-steps と同じく TOC 自身の名前空間で書く。 */
.article-toc .article-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.article-toc .article-toc-item {
  list-style: none;
  margin: 0;
}
.article-toc-item.is-level-3 {
  padding-left: var(--sp-4);
}
.article-toc-item a {
  display: block;
  font-size: var(--fs-base);
  line-height: var(--lh-h3);
  color: #707070; /* WCAG AA (4.5:1) を保ったまま --sub (#666) より薄くした色 */
  text-decoration: none;
  padding: var(--sp-1) var(--sp-2);
  border-radius: 4px;
  transition:
    color var(--t),
    background var(--t);
}
.article-toc-item a:hover {
  color: var(--primary);
}
.article-toc-item a.is-active {
  color: var(--ink);
  background: var(--bg-tint);
}

@media (min-width: 1400px) {
  .article-body-grid {
    grid-template-columns: 240px minmax(0, 760px) 240px;
    column-gap: var(--sp-8);
  }
  .article-body-grid > .container-narrow {
    grid-column: 2;
  }
  .article-toc {
    display: block;
    grid-column: 3;
    position: sticky;
    top: calc(72px + var(--sp-6));
    max-height: calc(100vh - 72px - var(--sp-10));
    overflow-y: auto;
  }
}