/* Column reading layout: scoped to articles, after the shared site styles. */
body.column-reading main { --reading-width: 780px; overflow-wrap: break-word; }
body.column-reading[data-unified] main .container,
body.column-reading main .article-head,
body.column-reading main > article > .article-meta,
body.column-reading main > .article-meta {
  width: min(var(--reading-width), calc(100% - 48px)) !important;
  max-width: var(--reading-width) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}
body.column-reading main .article-hero,
body.column-reading main .article-head {
  margin-top: 0;
  padding-block: clamp(48px, 6vw, 80px) 0;
  margin-bottom: 24px;
}
body.column-reading main h1 {
  font-size: clamp(30px, 3.2vw, 44px) !important;
  line-height: 1.55 !important;
  letter-spacing: -.025em !important;
  margin: 20px 0 24px !important;
  text-wrap: pretty;
}
body.column-reading main .article-hero > .btn-link { display: block; width: fit-content; }
body.column-reading main .article-tag { margin-bottom: 0; }
body.column-reading main .article-meta {
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  font-size: 12px; letter-spacing: .025em;
  margin-top: 24px; margin-bottom: 24px;
  padding-block: 16px 0;
  border-top: 1px solid #dededb;
}
body.column-reading main .column-article-visual {
  width: min(var(--reading-width), calc(100% - 48px)) !important;
  max-width: var(--reading-width) !important;
  margin: 28px auto 44px !important;
}
body.column-reading main .column-article-visual img {
  display: block; width: 100%; height: auto; object-fit: contain;
}
body.column-reading main .article-body {
  box-sizing: border-box;
  width: min(var(--reading-width), calc(100% - 48px));
  max-width: var(--reading-width);
  margin: 0 auto; padding: 0 0 72px;
  font-size: 17px; line-height: 1.95; color: #353535;
}
body.column-reading main .container > .article-body { width: 100%; }
body.column-reading main .article-body p { font-size: inherit; line-height: inherit; margin: 0 0 1.5em; }
body.column-reading main .article-body h2 {
  font-size: clamp(24px, 2.2vw, 30px) !important;
  line-height: 1.6 !important; letter-spacing: -.02em !important;
  margin: 56px 0 24px; padding-top: 24px;
  border-top: 2px solid #202020;
  scroll-margin-top: 100px;
}
body.column-reading main .article-body h3 {
  font-size: 21px !important; line-height: 1.65 !important;
  margin: 36px 0 16px; letter-spacing: -.015em !important;
}
body.column-reading main .article-body :is(.callout, blockquote) {
  margin: 32px 0; padding: 24px 28px;
  background: #f6f6f3; border-left: 3px solid #f55f00;
  font-style: normal;
}
body.column-reading main .article-body :is(.callout, blockquote) :is(h2,h3) {
  font-size: 19px !important; line-height: 1.7 !important;
  margin: 0 0 12px; padding: 0; border: 0 !important;
}
body.column-reading main .article-body .callout p { font-size: 16px; margin: 0 0 16px; }
body.column-reading main .article-body :is(.callout,blockquote) > :last-child { margin-bottom: 0; }
body.column-reading main .article-body :is(ul,ol) { padding-left: 1.5em; margin: 20px 0 28px; line-height: 1.9; }
body.column-reading main .article-body li { margin: .5em 0; }
body.column-reading main .article-body figure { margin: 36px 0; }
body.column-reading main .article-body img { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 0; border-radius: 0; box-shadow: none; background: #fff; }
body.column-reading main .article-body figcaption { margin-top: 12px; font-size: 13px; line-height: 1.8; color: #656565; text-align: left; }
body.column-reading main .article-body :is(pre,.sched-wrap) { max-width: 100%; overflow-x: auto; }
body.column-reading main .sched-wrap:focus-visible { outline: 2px solid #a43e00; outline-offset: 4px; }
body.column-reading main .article-back { margin: 0 auto 64px; padding: 0 24px; }
body.column-reading main .article-body table { font-size: 14px; line-height: 1.7; }
body.column-reading main .article-body :is(th,td) { padding: 12px 14px; }
body.column-reading main .article-body > :first-child { margin-top: 0; }
@media (max-width: 600px) {
  body.column-reading main h1 { font-size: 30px !important; }
  body.column-reading main .article-body { font-size: 16px; line-height: 1.95; padding-bottom: 48px; }
  body.column-reading main .article-body h2 { font-size: 24px !important; margin-top: 40px; }
  body.column-reading main .article-body h3 { font-size: 20px !important; }
  body.column-reading main .article-body :is(.callout,blockquote) { padding: 20px; }
  body.column-reading main .column-article-visual { margin-bottom: 32px !important; }
  body.column-reading main .article-meta { gap: 10px 16px; }
  body.column-reading main .sched-wrap::before { content: '表は横にスクロールできます →'; display: block; position: sticky; left: 0; width: fit-content; margin-bottom: 12px; font-size: 12px; color: #656565; }
}