/* 関連記事は、タイトル・説明・リンクの範囲を分けて読みやすくする。 */
.related-reading { background: #f6f7f3; }
.related-reading .wrap { max-width: 1040px; }
.related-reading h2.related-heading { margin: 0 0 12px; color: #24483f; font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1.6; text-align: left; }
.related-reading .related-intro { margin: 0 0 30px; color: #526057; font-size: 18px; line-height: 1.8; }
.related-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.related-list > li { min-width: 0; }
.related-list > li:only-child { grid-column: 1 / -1; }
.related-link { display: grid; grid-template-columns: minmax(0,1fr) 24px; align-items: center; gap: 20px; height: 100%; padding: 24px; background: #fff; border: 1px solid #d9dfd7; border-radius: 4px; color: #24483f; text-decoration: none; transition: border-color .18s ease, background-color .18s ease; }
.related-link h3 { margin: 0 0 8px; font-family: var(--sans); font-size: 20px; font-weight: 600; line-height: 1.65; letter-spacing: 0; }
.related-link p { margin: 0; color: #526057; font-size: 18px; line-height: 1.75; }
.related-arrow { font-size: 24px; font-weight: 400; text-align: right; }
.related-link:focus-visible { outline: 3px solid #aa8343; outline-offset: 4px; }
@media (hover: hover) {
  .related-link:hover { background: #f0f4ed; border-color: #6f8875; }
  .related-link:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width: 768px) {
  .related-reading { padding-block: 48px; }
  .related-reading h2.related-heading { font-size: 27px; margin-bottom: 8px; }
  .related-reading .related-intro { margin-bottom: 24px; font-size: 16px; }
  .related-list { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .related-link { padding: 20px 18px; gap: 14px; grid-template-columns: minmax(0,1fr) 20px; }
  .related-link h3 { font-size: 20px; }
  .related-arrow { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .related-link { transition: none; }
}