:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: #233249;
  background: #f7f6f2;
  line-height: 1.8;
  font-size: 16px;
}

* { box-sizing: border-box; }
body { margin: 0; overflow-wrap: anywhere; }
a { color: #245b9b; text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid #245b9b; outline-offset: 5px; border-radius: 2px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.5; }
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: .03em; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.1875rem; }
.site-header, main, footer { width: min(880px, calc(100% - 40px)); margin-inline: auto; }
.site-header { padding-block: 24px; border-bottom: 1px solid #d5dbe1; }
.site-header p { font-size: 1rem; font-weight: 700; letter-spacing: .08em; }
.site-header span, .meta, .section-note, footer { color: #546174; font-size: .875rem; }
.site-header span { display: block; margin-top: 2px; }
main { min-height: 55vh; padding-block: 32px 64px; }
nav { margin-bottom: 28px; }
nav a { display: inline-block; padding-block: 6px; }
.page-heading { margin-bottom: 32px; }
.page-heading > p { margin-top: 14px; }
.page-heading > .episode-label { margin: 0 0 8px; }
.episode-label { display: block; color: #546174; font-size: 1rem; font-weight: 500; }
.episode-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.episode-list article, .topic-list article { background: #fff; border: 1px solid #d5dbe1; border-radius: 12px; padding: 24px; }
.episode-list a { display: block; text-decoration: none; }
.episode-list a:hover { text-decoration: underline; }
.episode-list .episode-label { margin-top: 8px; }
.episode-list .meta { margin-top: 16px; }
.official-link { display: inline-block; margin-top: 24px; padding: 10px 28px; border-radius: 6px; background: #245b9b; color: #fff; font-weight: 700; }
.section-note { margin-top: 8px; }
.topic-list { list-style: decimal-leading-zero; padding-left: 2rem; margin: 20px 0 0; }
.topic-list > li { padding-left: 6px; margin-bottom: 16px; }
.topic-list > li::marker { color: #546174; font-size: .875rem; font-weight: 700; }
.summary { margin-top: 14px; }
dl { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #e6e9ed; font-size: .8125rem; }
dl > div { display: flex; gap: 10px; }
dt { color: #546174; }
dd { margin: 0; font-weight: 600; }
.empty { border-block: 1px solid #d5dbe1; padding-block: 32px; }
footer { border-top: 1px solid #d5dbe1; padding-block: 24px 40px; }

@media (min-width: 700px) {
  .site-header { display: flex; align-items: baseline; justify-content: space-between; padding-block: 32px; }
  main { padding-top: 48px; }
  .page-heading { margin-bottom: 40px; }
  .episode-list article, .topic-list article { padding: 28px 32px; }
}