/**
 * ブログ ARC TOC — 静的目次（post + [toc] のみ）
 * 単位: rem / em
 */

#postContent .arc-blog-toc,
.entry-content .arc-blog-toc {
  --arc-btoc-bg: rgba(251, 249, 239, 0.97);
  --arc-btoc-ink: var(--arc-brand-ink, #2c2e36);
  --arc-btoc-marker: var(--arc-brand-accent-strong, #fc9200);
  --arc-btoc-hover-bg: var(--arc-brand-accent, #ffe900);
  --arc-btoc-hover-ink: var(--arc-brand-ink, #2c2e36);
  --arc-btoc-active-bg: var(--arc-brand-accent-strong, #fc9200);
  --arc-btoc-active-ink: var(--arc-brand-cream, #fbf9ef);
  --arc-btoc-radius: 0.5rem;
  --arc-btoc-edge-pad-block: 2rem;
  --arc-btoc-link-pad-y: 0.35rem;
  --arc-btoc-link-pad-x: 1rem;
  --arc-btoc-header-pad-x: 0.625rem;
  --arc-btoc-header-pad-bottom: 0.625rem;
  --arc-btoc-list-pad-top: 0.375rem;
  --arc-btoc-section-pad-y: 0.375rem;
  --arc-btoc-sub-indent: 1.25rem;
  --arc-btoc-marker-gap-h2: 0.9em;
  --arc-btoc-marker-gap-h3: 0.45em;
  --arc-btoc-font-item: 0.9rem;
  --arc-btoc-font-header: 1.2rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 0 1.25rem;
  overflow: hidden;
  border-radius: var(--arc-btoc-radius);
  background: var(--arc-btoc-bg);
  font-size: var(--arc-btoc-font-item);
  line-height: 1.35;
  color: var(--arc-btoc-ink);
  text-align: left;
}

#postContent .arc-blog-toc *,
.entry-content .arc-blog-toc * {
  box-sizing: border-box;
}

#postContent .arc-blog-toc > .arc-blog-toc__header,
.entry-content .arc-blog-toc > .arc-blog-toc__header {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin: 0;
  padding: var(--arc-btoc-edge-pad-block) var(--arc-btoc-header-pad-x) var(--arc-btoc-header-pad-bottom);
  font-size: var(--arc-btoc-font-header);
  line-height: 1.2;
  color: var(--arc-btoc-ink);
  background: var(--arc-btoc-bg);
  border: 0;
  text-align: left;
}

#postContent .arc-blog-toc__header-icon,
.entry-content .arc-blog-toc__header-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: var(--arc-btoc-marker);
  line-height: 1;
}

#postContent .arc-blog-toc__header-svg,
.entry-content .arc-blog-toc__header-svg {
  display: block;
  width: 1.15em;
  height: 1.15em;
}

#postContent .arc-blog-toc__header-title,
.entry-content .arc-blog-toc__header-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  color: var(--arc-btoc-ink);
  background: none;
  border: 0;
  text-align: left;
}

#postContent .arc-blog-toc > ol.arc-blog-toc__list,
.entry-content .arc-blog-toc > ol.arc-blog-toc__list {
  margin: 0;
  padding-top: var(--arc-btoc-list-pad-top);
  padding-right: 0;
  padding-bottom: var(--arc-btoc-edge-pad-block);
  padding-left: 0;
  list-style: none;
  counter-reset: arc-btoc-chapter arc-btoc-section;
  background: var(--arc-btoc-bg);
  font-size: var(--arc-btoc-font-item);
}

#postContent .arc-blog-toc__sub,
.entry-content .arc-blog-toc__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

#postContent .arc-blog-toc__list > .arc-blog-toc__item--h2,
.entry-content .arc-blog-toc__list > .arc-blog-toc__item--h2 {
  padding-block: var(--arc-btoc-section-pad-y);
  counter-increment: arc-btoc-chapter;
  counter-reset: arc-btoc-section;
}

#postContent .arc-blog-toc__sub > .arc-blog-toc__item--h3,
.entry-content .arc-blog-toc__sub > .arc-blog-toc__item--h3 {
  counter-increment: arc-btoc-section;
}

#postContent .arc-blog-toc__item,
.entry-content .arc-blog-toc__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* テーマ prose-inline-link 干渉回避 */
#postContent .arc-blog-toc a.arc-blog-toc__link,
.entry-content .arc-blog-toc a.arc-blog-toc__link {
  display: block;
  padding: var(--arc-btoc-link-pad-y) var(--arc-btoc-link-pad-x);
  color: var(--arc-btoc-ink);
  text-decoration: none;
  border: 0;
  border-bottom: none;
  background: transparent;
  box-shadow: none;
  font-size: var(--arc-btoc-font-item);
  line-height: 1.35;
  transition: color 0.15s ease, background-color 0.15s ease;
}

#postContent .arc-blog-toc a.arc-blog-toc__link:hover,
#postContent .arc-blog-toc a.arc-blog-toc__link:focus-visible,
.entry-content .arc-blog-toc a.arc-blog-toc__link:hover,
.entry-content .arc-blog-toc a.arc-blog-toc__link:focus-visible {
  color: var(--arc-btoc-hover-ink);
  background: var(--arc-btoc-hover-bg);
  border-bottom: none;
  text-decoration: none;
  outline: none;
}

#postContent .arc-blog-toc a.arc-blog-toc__link:active,
.entry-content .arc-blog-toc a.arc-blog-toc__link:active {
  color: var(--arc-btoc-active-ink);
  background: var(--arc-btoc-active-bg);
  border-bottom: none;
  text-decoration: none;
}

#postContent .arc-blog-toc__item--h2 > .arc-blog-toc__link,
.entry-content .arc-blog-toc__item--h2 > .arc-blog-toc__link {
  font-weight: 600;
}

#postContent .arc-blog-toc__item--h3 > .arc-blog-toc__link,
#postContent .arc-blog-toc__item--h4 > .arc-blog-toc__link,
#postContent .arc-blog-toc__item--h5 > .arc-blog-toc__link,
#postContent .arc-blog-toc__item--h6 > .arc-blog-toc__link,
.entry-content .arc-blog-toc__item--h3 > .arc-blog-toc__link,
.entry-content .arc-blog-toc__item--h4 > .arc-blog-toc__link,
.entry-content .arc-blog-toc__item--h5 > .arc-blog-toc__link,
.entry-content .arc-blog-toc__item--h6 > .arc-blog-toc__link {
  font-weight: 400;
}

#postContent .arc-blog-toc__sub > .arc-blog-toc__item--h3 > .arc-blog-toc__link,
.entry-content .arc-blog-toc__sub > .arc-blog-toc__item--h3 > .arc-blog-toc__link {
  padding-left: calc(var(--arc-btoc-link-pad-x) + var(--arc-btoc-sub-indent));
}

#postContent .arc-blog-toc__sub .arc-blog-toc__sub > .arc-blog-toc__item--h4 > .arc-blog-toc__link,
#postContent .arc-blog-toc__sub .arc-blog-toc__sub > .arc-blog-toc__item--h5 > .arc-blog-toc__link,
#postContent .arc-blog-toc__sub .arc-blog-toc__sub > .arc-blog-toc__item--h6 > .arc-blog-toc__link,
.entry-content .arc-blog-toc__sub .arc-blog-toc__sub > .arc-blog-toc__item--h4 > .arc-blog-toc__link,
.entry-content .arc-blog-toc__sub .arc-blog-toc__sub > .arc-blog-toc__item--h5 > .arc-blog-toc__link,
.entry-content .arc-blog-toc__sub .arc-blog-toc__sub > .arc-blog-toc__item--h6 > .arc-blog-toc__link {
  padding-left: calc(var(--arc-btoc-link-pad-x) + var(--arc-btoc-sub-indent) * 2);
}

#postContent .arc-blog-toc__text,
.entry-content .arc-blog-toc__text {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--arc-btoc-marker-gap-h3);
  align-items: start;
  max-width: 100%;
  font: inherit;
}

#postContent .arc-blog-toc__item--h2 .arc-blog-toc__text,
.entry-content .arc-blog-toc__item--h2 .arc-blog-toc__text {
  column-gap: var(--arc-btoc-marker-gap-h2);
}

#postContent .arc-blog-toc__marker,
.entry-content .arc-blog-toc__marker {
  white-space: nowrap;
}

#postContent .arc-blog-toc__label,
.entry-content .arc-blog-toc__label {
  min-width: 0;
  font: inherit;
  overflow: visible;
  white-space: normal;
}

#postContent .arc-blog-toc__item--h2 .arc-blog-toc__marker::before,
.entry-content .arc-blog-toc__item--h2 .arc-blog-toc__marker::before {
  content: counter(arc-btoc-chapter) ".";
  font-weight: 700;
  color: var(--arc-btoc-marker);
}

#postContent .arc-blog-toc__item--h3 .arc-blog-toc__marker::before,
.entry-content .arc-blog-toc__item--h3 .arc-blog-toc__marker::before {
  content: "（" counter(arc-btoc-section) "）";
  font-weight: 600;
  color: var(--arc-btoc-marker);
}

#postContent .arc-blog-toc__item--h4 .arc-blog-toc__marker::before,
#postContent .arc-blog-toc__item--h5 .arc-blog-toc__marker::before,
#postContent .arc-blog-toc__item--h6 .arc-blog-toc__marker::before,
.entry-content .arc-blog-toc__item--h4 .arc-blog-toc__marker::before,
.entry-content .arc-blog-toc__item--h5 .arc-blog-toc__marker::before,
.entry-content .arc-blog-toc__item--h6 .arc-blog-toc__marker::before {
  content: "・";
  color: var(--arc-btoc-marker);
}

#postContent .arc-blog-toc-target,
.entry-content .arc-blog-toc-target {
  scroll-margin-top: clamp(4rem, 12vw, 6rem);
}

@media (max-width: 47.9375rem) {
  #postContent .arc-blog-toc,
  .entry-content .arc-blog-toc {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    --arc-btoc-link-pad-x: 1.25rem;
    --arc-btoc-header-pad-x: 1.25rem;
    --arc-btoc-sub-indent: 0.625rem;
    --arc-btoc-marker-gap-h2: 0.35em;
    --arc-btoc-marker-gap-h3: 0.15em;
  }
}