/* 文章の読み幅を保ちながら、比較表には画面の広さを使う。 */
.article-layout.article-reading {
  max-width: 1160px;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 36px;
}
.article-reading .article-head { grid-column: 1 / -1; }
.article-reading .article-main { grid-column: 1; grid-row: 2; order: 0; }
.article-reading .article-side {
  grid-column: 1;
  grid-row: 3;
  order: 0;
  position: static;
  max-height: none;
  overflow: visible;
  margin: 40px 0 0;
}
.article-reading .entry-content > :not(.wp-block-table):not(.rec-offer):not(.wp-block-columns),
.article-reading .article-hero,
.article-reading .article-foot,
.article-reading .affiliate-notice,
.article-reading .rec-return,
.article-reading .comments {
  max-width: 760px;
  margin-inline: auto;
}
.article-reading .prose .article-toc {
  border: 1px solid var(--rule);
  padding: 10px 18px;
  margin-bottom: 28px;
  background: rgba(255, 255, 255, .24);
}
.article-reading .article-toc summary { font-family: var(--sans); padding: 4px 0; letter-spacing: .04em; }
.article-reading .article-toc details[open] summary { margin-bottom: 12px; }
.article-reading .article-toc ol { padding-bottom: 8px; }
.article-reading .article-toc a { padding-block: 7px; }

/* 最小幅は列数に合わせる。2〜3列の説明表は狭い画面でも折り返せる。 */
.article-reading .entry-content .wp-block-table { overflow-x: auto; overscroll-behavior-x: contain; margin-block: 24px 32px; }
.article-reading .entry-content .wp-block-table table {
  width: 100%;
  min-width: 0;
  table-layout: auto;
  font-size: 14px;
  line-height: 1.6;
}
.article-reading .entry-content .wp-block-table table:has(thead tr > th:nth-child(4)) { min-width: 600px; }
.article-reading .entry-content .wp-block-table table:has(thead tr > th:nth-child(6)) { min-width: 760px; }
.article-reading .entry-content .wp-block-table th,
.article-reading .entry-content .wp-block-table td {
  padding: 9px 10px;
  font-family: var(--sans);
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
}
.article-reading .entry-content .wp-block-table thead th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  background: var(--paper-2);
}
.article-reading .entry-content .wp-block-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .28); }
.article-reading .entry-content .wp-block-table::before { content: none; display: none; }
.article-reading .prose .table-scroll-hint { font-size: 12px; line-height: 1.7; color: var(--ink-2); margin-block: 24px 6px; }
.article-reading .table-scroll-hint:not([hidden]) + .wp-block-table { margin-top: 0; }
/* 固定列の縁から背後の文字がのぞかないよう、スクロール時は罫線を分離する。 */
.article-reading .entry-content .wp-block-table.is-overflowing table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
.article-reading .entry-content .wp-block-table.is-overflowing th,
.article-reading .entry-content .wp-block-table.is-overflowing td { border-width: 0 1px 1px 0; border-style: solid; border-color: var(--ink); }
.article-reading .entry-content .wp-block-table.is-overflowing thead th { border-bottom-width: 2px; }
.article-reading .wp-block-table.is-overflowing table:has(tr > :nth-child(4)) tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--paper);
  box-shadow: 1px 0 var(--rule);
  max-width: 150px;
}
.article-reading .wp-block-table.is-overflowing table:has(tr > :nth-child(4)) thead tr > :first-child { background: var(--paper-2); }

/* 関連記事は一度だけ描画し、画面幅に応じて右側または記事末尾に置く。 */
.article-recommendations { border-top: 2px solid var(--ink); padding-top: 16px; }
.article-recommendations h2 { font-family: var(--sans); font-size: 15px; line-height: 1.6; margin: 0 0 10px; }
.article-recommendations__list { list-style: none; padding: 0; margin: 0; }
.article-recommendations__list li { margin: 0; border-bottom: 1px solid var(--rule); }
.article-recommendations__link { display: flex; gap: 12px; align-items: start; padding: 16px 0; font-size: 13px; line-height: 1.75; text-decoration: none; }
.article-recommendations__link > span:last-child { min-width: 0; }
.article-recommendations__image { flex: 0 0 76px; }
.article-recommendations__image img { width: 76px; height: 57px; object-fit: contain; background: var(--paper-2); }
.article-recommendations__more { display: inline-block; margin-top: 14px; font-size: 12px; line-height: 1.8; text-underline-offset: 4px; }
/* 承認済みの広告は関連記事と区切る。追従は広さと高さがあるPCだけ。 */
.sidebar-promotion { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); }
.sidebar-promotion__label { margin: 0 0 8px; color: var(--ink-2); font-size: 11px; letter-spacing: .08em; }
.sidebar-promotion__name { margin: 0 0 12px; font-size: 12px; line-height: 1.7; }
.sidebar-promotion__creative { width: 250px; max-width: 100%; }
.sidebar-promotion__creative a { display: block; }
.sidebar-promotion__creative a img { display: block; width: 250px; max-width: 100%; height: auto; aspect-ratio: 1; }
.sidebar-promotion__creative > img { display: block; width: 1px; height: 1px; }
@media (min-width: 1200px) and (min-height: 600px) {
  .article-reading .article-side:has(.sidebar-promotion) { align-self: stretch; }
  .article-reading .sidebar-promotion { position: sticky; top: 24px; }
  .admin-bar .article-reading .sidebar-promotion { top: 56px; }
}
@media (min-width: 1200px) {
  .article-layout.article-reading.has-recommendations { max-width: 1440px; grid-template-columns: minmax(0, 1fr) 252px; }
  .article-reading .article-side {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
  }
}
@media (max-width: 1199px) {
  .article-reading .article-side { width: 100%; max-width: 760px; margin-inline: auto; }
}
@media (max-width: 680px) {
  .article-reading .entry-content .wp-block-table th,
  .article-reading .entry-content .wp-block-table td { padding: 8px; }
  .article-reading .prose .article-toc { padding-inline: 14px; }
}
@media print {
  .article-layout.article-reading { display: block; max-width: none; padding: 0; }
  .article-reading .article-side, .article-reading .table-scroll-hint { display: none; }
  .article-reading .entry-content .wp-block-table { overflow: visible; }
  .article-reading .entry-content .wp-block-table table { min-width: 0 !important; }
  .article-reading .wp-block-table.is-overflowing tr > :first-child { position: static; }
}