/* 読むページ（よくある質問・文章のページ）
   PC：左に目次（スクロールしても残る）、右に本文。幅は 1 : 2.414（白銀比の 1 と 1+√2）。
   目次の左の細い線は本文の長さを表し、いま読んでいる章に墨の印が付く（reading.js）。
   スマホ：目次は本文の上。よくある質問は札、文章のページは線で区切った一覧。 */

.silver main .page-banner:not(:has(> .media)):has(+ .reading) .page-banner__text { padding-bottom: 0; border-bottom: 0; }

.silver main .reading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.414fr); column-gap: var(--s-6); align-items: start; margin-top: var(--s-8); }
.silver main .reading__toc { position: sticky; top: calc(var(--hdr-h, 72px) + var(--s-4)); padding-top: var(--s-0); border-top: 1px solid var(--ds-sumi); }
.silver main .reading__toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--ds-rule); }
.silver main .reading__toc li { margin: 0; }
.silver main .reading__toc a { position: relative; display: flex; align-items: center; min-height: 44px; padding: var(--s-n4) 0 var(--s-n4) var(--s-0); color: var(--ds-muted); font-size: var(--s-n1); line-height: var(--lh-head); letter-spacing: .04em; text-decoration: none; word-break: auto-phrase; }
.silver main .reading__toc a::before { content: ""; position: absolute; left: -1px; top: var(--s-n4); bottom: var(--s-n4); width: 2px; background: transparent; }
.silver main .reading__toc a:hover { color: var(--ds-sumi); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.silver main .reading__toc a[aria-current] { color: var(--ds-sumi); font-weight: 700; }
.silver main .reading__toc a[aria-current]::before { background: var(--ds-sumi); }

.silver main .reading__body { min-width: 0; }
.silver main .reading__body > section { scroll-margin-top: calc(var(--hdr-h, 72px) + var(--s-1)); }
.silver main .reading__body > section + section { margin-top: var(--s-8); }
.silver main .reading .reading__body > section > h2 { margin: 0 0 var(--s-1); padding: var(--s-0) 0 0; border-top: 1px solid var(--ds-sumi); font-size: var(--s-2); line-height: var(--lh-head); letter-spacing: .04em; }
.silver main .reading .reading__body > section > :is(p, ul, ol) { max-width: 40em; text-wrap: pretty; margin-block: 0 var(--s-0); }
.silver main .reading .reading__body > section > :last-child { margin-bottom: 0; }
.silver main .reading .reading__body > .checked { margin-top: var(--s-8); padding-top: var(--s-0); border-top: 1px solid var(--ds-rule); }

/* よくある質問：問いは 18px・700、答えは本文 18px（墨） */
.silver main .reading--faq .reading__body > section > h2 { margin-bottom: 0; }
.silver main .reading--faq details.faq:first-of-type { border-top: 0; }
.silver main .reading--faq details.faq > summary { min-height: 72px; padding-block: var(--s-0); font-size: var(--s-0); line-height: var(--lh-body); word-break: auto-phrase; text-wrap: pretty; }
.silver main .reading--faq details.faq > p { max-width: 40em; margin: 0; padding-bottom: var(--s-4); color: var(--ds-sumi); font-size: var(--s-0); line-height: var(--lh-body); }
.silver main .reading--faq details.faq > summary:focus-visible { outline: 2px solid var(--semantic-color-focus-default); outline-offset: 2px; }

@media (max-width: 1023px) {
  .silver main .reading { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-4); }
  .silver main .reading__toc { position: static; margin-bottom: var(--s-8); }
  .silver main .reading__toc ol { border-left: 0; }
  .silver main .reading__toc a { padding-left: 0; border-bottom: 1px solid var(--ds-rule); color: var(--ds-sumi); }
  .silver main .reading__toc a::before { display: none; }
  .silver main .reading__toc a[aria-current] { font-weight: 400; }
  /* よくある質問の目次は、横に並べた札 */
  .silver main .reading--faq .reading__toc { padding-top: var(--s-1); }
  .silver main .reading--faq .reading__toc ol { display: flex; flex-wrap: wrap; gap: var(--s-n4); }
  .silver main .reading--faq .reading__toc a { padding: 0 var(--s-n2); border: 1px solid var(--ds-rule); border-radius: 4px; }
}
@media (max-width: 767px) {
  .silver main .reading__toc { margin-bottom: var(--s-6); }
  .silver main .reading__body > section + section { margin-top: var(--s-6); }
  .silver main .reading--faq details.faq > summary { min-height: 64px; padding-block: var(--s-n2); }
  .silver main .reading--faq details.faq > p { padding-bottom: var(--s-1); }
}

/* 文章のページの小見出しと箇条書き（中身は Takeru が用意する） */
.silver main .reading .reading__body > section > h3 { margin: var(--s-1) 0 var(--s-n2); font-size: var(--s-1); line-height: var(--lh-head); }
.silver main .reading .reading__body > section > :is(ul, ol) { padding-left: 1.4em; }
.silver main .reading .reading__body > section li + li { margin-top: var(--s-n4); }