/* 本文の目次とPCの目次。ネイティブのdetails・既存の見出しリンクを保つ。 */
html:has(>body.p-article-page){scroll-padding-top:0}
.p-article-page .p-article-toc{
  margin:28px 0 36px;padding:0;border:1px solid var(--color-border);
  border-radius:var(--radius-lg,16px);background:var(--color-bg-soft);overflow:clip;
}
.p-article-page .p-article-toc summary{
  display:flex;align-items:center;gap:12px;min-height:64px;padding:16px 20px;
  color:var(--color-primary-deep);font-size:17px;font-weight:700;line-height:1.5;
  list-style:none;cursor:pointer;box-sizing:border-box;
}
.p-article-page .p-article-toc summary::-webkit-details-marker{display:none}
.p-article-page .p-article-toc summary>span{display:none}
.p-article-page .p-article-toc summary::before,
.p-article-page .p-article-aside nav[aria-label="この記事の目次"]>p::before{
  content:"";display:block;flex:0 0 22px;width:22px;height:22px;
  background:var(--color-primary-ink);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9 6h12M9 12h12M9 18h12M3 6h1M3 12h1M3 18h1'/%3E%3C/svg%3E") center/contain no-repeat;
}
.p-article-page .p-article-toc summary::after{
  content:"";flex:0 0 8px;width:8px;height:8px;margin-left:auto;margin-right:4px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .18s ease;
}
.p-article-page .p-article-toc[open] summary::after{transform:rotate(225deg)}
.p-article-page .p-article-toc[open] summary{border-bottom:1px solid var(--color-border)}
.p-article-page .p-article-toc>ol{
  display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin:0;padding:14px;list-style:none;counter-reset:article-toc;
}
.p-article-page .p-article-toc>ol>li,
.p-article-page .p-article-aside nav[aria-label="この記事の目次"]>ol>li{
  counter-increment:article-toc;list-style:none;margin:0;padding:0;min-width:0;
}
.p-article-page .p-article-toc>ol>li>a{
  display:flex;align-items:flex-start;gap:12px;min-height:48px;padding:12px;
  background:var(--color-bg);border:1px solid transparent;border-radius:var(--radius-sm,8px);
  font-size:14px;font-weight:500;line-height:1.7;text-decoration:none;
  color:var(--color-primary-deep);overflow-wrap:anywhere;box-sizing:border-box;
}
.p-article-page .p-article-toc>ol>li>a::before,
.p-article-page .p-article-aside nav[aria-label="この記事の目次"]>ol>li>a::before{
  content:counter(article-toc,decimal-leading-zero);flex:0 0 28px;
  display:grid;place-items:center;min-height:28px;border-radius:6px;
  background:var(--color-primary-soft);color:var(--color-primary-ink);
  font-size:12px;font-weight:700;line-height:1.4;font-variant-numeric:tabular-nums;
}
.p-article-page .p-article-toc>ol>li>a>span,
.p-article-page .p-article-aside nav[aria-label="この記事の目次"]>ol>li>a>span{display:none}
.p-article-page .p-article-toc>ol>li>a:hover{
  border-color:var(--color-primary-ink);background:var(--color-primary-soft);text-decoration:none;
}
.p-article-page .p-article-toc summary:focus-visible,
.p-article-page .p-article-toc a:focus-visible,
.p-article-page .p-article-aside nav[aria-label="この記事の目次"] a:focus-visible{
  outline:2px solid var(--color-focus);outline-offset:3px;
}
.p-article-page .p-article-aside nav[aria-label="この記事の目次"]{
  padding:18px 14px 12px;margin-bottom:20px;background:var(--color-bg);
  border:1px solid var(--color-border);border-top:3px solid var(--color-primary-ink);
  border-radius:var(--radius-md,12px);
}
.p-article-page .p-article-aside nav[aria-label="この記事の目次"]>p{
  display:flex;align-items:center;gap:9px;margin:0;padding:0 2px 14px;
  font-size:15px;line-height:1.5;border-bottom:1px solid var(--color-border);
}
.p-article-page .p-article-aside nav[aria-label="この記事の目次"]>ol{
  counter-reset:article-toc;list-style:none;padding:0;margin:10px 0 0;
}
.p-article-page .p-article-aside nav[aria-label="この記事の目次"]>ol>li>a{
  align-items:flex-start;gap:9px;padding:9px 5px;min-height:46px;border-radius:6px;
  color:var(--color-text-mute);font-size:12px;line-height:1.7;text-decoration:none;
}
.p-article-page .p-article-aside nav[aria-label="この記事の目次"]>ol>li>a::before{
  flex-basis:23px;min-height:23px;font-size:10px;
}
.p-article-page .p-article-aside nav[aria-label="この記事の目次"]>ol>li>a:hover,
.p-article-page .p-article-aside nav[aria-label="この記事の目次"]>ol>li>a[aria-current="location"]{
  background:var(--color-primary-soft);color:var(--color-primary-deep);text-decoration:none;
}
/* ヘッダー・開発用バーは非固定。リンク先の余白を見出しの種類によらず揃える。 */
.p-article-page main [id]{scroll-margin-top:24px}
@media(max-width:760px){
  .p-article-page .p-article-toc{margin:24px 0 28px;border-radius:12px}
  .p-article-page .p-article-toc summary{padding:14px 16px;min-height:60px;font-size:16px}
  .p-article-page .p-article-toc>ol{padding:10px;gap:5px}
  .p-article-page .p-article-toc>ol>li>a{padding:11px 10px;gap:10px}
}
@media(prefers-reduced-motion:reduce){.p-article-page .p-article-toc summary::after{transition:none}}