/* Keep long-form reading and its decision tables within a comfortable measure. */
.article-detail { max-width: 832px; }
.article-detail .page__title { overflow-wrap: anywhere; }
.article-detail__date { color: #526171; font-size: 0.82rem; }
.article-detail__intro { font-size: 1rem; line-height: 1.9; overflow-wrap: anywhere; }
.article-detail__intro p { margin: 16px 0 20px; }
.article-detail .article-detail__eyecatch { max-height: 260px; aspect-ratio: 900 / 506; object-fit: cover; }
.article-toc {
  margin: 24px 0; padding: 18px 22px; border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary); border-radius: var(--radius);
  background: var(--color-surface);
}
.article-toc h2 { margin: 0 0 10px; font-size: 1rem; }
.article-toc ul { margin: 0; padding: 0; list-style: none; }
.article-toc li + li { border-top: 1px solid #edf1f4; }
.article-toc a {
  display: flex; align-items: center; min-height: 44px; padding: 8px 0;
  text-decoration: underline; text-underline-offset: 3px; font-size: 0.92rem;
}
.article-toc a:focus-visible, .article-detail__intro a:focus-visible, .article-detail__body a:focus-visible, .article-table:focus-visible {
  outline: 3px solid var(--color-primary); outline-offset: 3px;
}
.article-detail .article-detail__body { max-width: none; overflow-wrap: anywhere; }
.article-detail__body h2[id] { scroll-margin-top: 24px; }
.article-table { max-width: 100%; overflow-x: auto; margin-bottom: 20px; }
.article-table table { margin-bottom: 0; }
.article-table th, .article-table td { vertical-align: top; }
.article-table caption { text-align: left; font-weight: 700; padding-bottom: 8px; }
.article-table-hint { display: none; }
@media (max-width: 600px) {
  .article-detail .page__title { font-size: 1.5rem; }
  .article-detail .article-detail__body { padding: 18px 16px; }
  .article-toc { padding: 16px; }
  .article-table table { min-width: 32rem; }
  .article-detail__body .article-table-hint { display: block; font-size: 0.78rem; color: #526171; }
}