/* 第2版：共通部品。サイト固有の分類・色は末尾の site 層に分離する。 */
:root {
  color-scheme: light;
  --paper: #f2f1f7; --surface: #ffffff; --ink: #222138; --muted: #59576a;
  --line: #dad7e4; --control-line: #81788d;
  --brand: #1059b1; --brand-end: #7223ab; --brand-soft: #e1efff;
  --on-color: #ffffff; --nav: #28243f;
  --yellow: #ffe14b; --yellow-soft: #fff8d8; --yellow-ink: #4c3600;
  --link: #1059b1; --focus: #1059b1; --hot: #bc1730;
  --fiction: #075d63; --fiction-soft: #e0f4f2; --fiction-on: #ffffff;
  --rank-silver: #dfe5ed; --rank-bronze: #f2c0a0;
  --res-name: #087448; --res-red: #bc1730; --res-blue: #1059b1;
  --res-pink: #9c1f60; --res-small: #59576a; --res-marker-bg: #fff0a6;
  --res-op-ink: var(--ink); --res-op-bg: #fff7fa; --res-op-accent: #9c1f60;
  --res-big-size: 1.3em; --res-bigred-size: 1.55em; --res-small-size: .85em; --res-heavy-weight: 850;
  --res-body-size: 1.25rem; --res-body-size-desktop: 1.5rem; --res-body-weight: 600; --res-line-height: 1.6;
  --support: #08613e; --support-soft: #e7f6ee;
  --tips: #075d63; --tips-soft: #e0f4f2; --tips-on: #ffffff;
  --ad-surface: #f1f0eb; --ad-ink: #514c56; --ad-line: #817b85; --ad-link: #34465d;
  --ad-control-gap: 48px; --page-max: 1360px; --gutter: 8px; --column-gap: 16px;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Yu Gothic", Meiryo, sans-serif;
  --radius: 4px;
}
[data-emphasis="soft"] {
  --res-big-size: 1.12em; --res-bigred-size: 1.3em; --res-heavy-weight: 700;
  --res-red: var(--ink); --res-blue: var(--ink); --res-pink: var(--ink); --res-op-ink: var(--ink);
}
* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font-body); line-height: 1.75; overflow-wrap: anywhere; line-break: strict; }
h1, h2, h3, p, blockquote, figure { margin: 0; }
h1, h2, h3 { line-height: 1.5; font-weight: 850; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--link); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
a, summary, label, button { -webkit-tap-highlight-color: transparent; }
a, summary, button { touch-action: manipulation; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
button, summary { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[id] { scroll-margin-top: 16px; }
:target:not(body):not(main) { outline: 2px dashed var(--focus); outline-offset: 3px; }
.sr-only, .rank-radio { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.container { width: min(calc(100% - var(--gutter) * 2), var(--page-max)); margin-inline: auto; }
.skip-link { position: absolute; z-index: 10; left: 8px; top: 8px; min-height: 44px; padding: 10px 16px; color: var(--ink); background: var(--yellow); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.test-banner { padding: 5px 8px; color: var(--yellow-ink); background: var(--yellow-soft); border-bottom: 1px solid var(--yellow); font-size: .8125rem; text-align: center; }
.test-banner strong { margin-inline-end: 8px; }
.site-header { color: var(--on-color); background: linear-gradient(110deg, var(--brand) 15%, var(--brand-end) 100%); border-top: 5px solid var(--brand); }
.header-inner { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--on-color); text-decoration: none; min-width: 0; min-height: 44px; }
.brand-mark { display: none; width: 52px; height: 44px; position: relative; flex: 0 0 52px; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; width: 34px; height: 26px; border: 3px solid var(--on-color); border-radius: 8px 8px 8px 0; transform: rotate(-8deg); }
.brand-mark::before { left: 0; top: 0; background: var(--yellow); border-color: var(--yellow); }
.brand-mark::after { bottom: 0; right: 0; background: var(--brand); }
.wordmark { display: block; font-size: 1.65rem; font-weight: 950; letter-spacing: .06em; line-height: 1.2; }
.brand-with-logo { max-width: 100%; }
.brand-content { display: block; min-width: 0; max-width: 100%; }
.brand-logo { display: block; }
.brand-logo img { display: block; width: auto; height: 48px; max-width: 100%; object-fit: contain; object-position: left center; }
.brand-caption { display: block; margin-top: 4px; font-size: .75rem; font-weight: 600; }
.header-note { display: none; }
.primary-nav { background: var(--nav); border-bottom: 4px solid var(--yellow); }
.nav-viewport { position: relative; }
.nav-viewport::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 24px; background: linear-gradient(to right, transparent, var(--nav)); pointer-events: none; }
.nav-viewport[data-scroll-end]::after { opacity: 0; }
.nav-links { display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 12px 28px; padding-inline-end: 24px; scrollbar-width: thin; scrollbar-color: var(--control-line) var(--nav); }
.nav-links::-webkit-scrollbar { height: 4px; }
.nav-links::-webkit-scrollbar-thumb { background: var(--control-line); }
.nav-links a { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 48px; min-width: 44px; padding: 8px 12px; color: var(--on-color); border-inline-end: 1px solid var(--control-line); border-bottom: 3px solid var(--cat, var(--category, var(--brand))); font-size: .875rem; font-weight: 800; white-space: nowrap; text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current] { background: var(--cat, var(--category, var(--brand))); }
.nav-links a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }
.nav-links .nav-accent { color: var(--yellow-ink); background: var(--yellow); border-bottom-color: var(--yellow); }
.nav-links .nav-accent:hover, .nav-links .nav-accent[aria-current] { background: var(--yellow-soft); }
.nav-links a:focus-visible { outline: 3px solid var(--yellow); outline-offset: -4px; }
.nav-links .nav-accent:focus-visible { outline-color: var(--nav); }
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--yellow); }
@media (max-width: 1023px) { .nav-viewport { width: 100%; } }
.ticker { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: .875rem; }
.ticker-label { flex: 0 0 auto; padding: 3px 9px; background: var(--yellow); color: var(--yellow-ink); font-weight: 850; border: 1px solid var(--yellow-ink); }
.ticker-links { display: flex; flex-wrap: wrap; column-gap: 22px; }
.ticker a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 750; }
.ticker-extra { display: none !important; }
.page-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; align-items: baseline; padding-block: 8px 12px; }
.page-heading h1 { font-size: 1.1875rem; }
.page-heading p, .section-note { color: var(--muted); font-size: .8125rem; }
.section-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 9px 12px; background: var(--brand); color: var(--on-color); border-left: 6px solid var(--yellow); }
.section-bar h2, .section-bar h3 { font-size: 1.125rem; }
.section-bar > span { font-size: .8125rem; font-weight: 650; }
.section-bar.dark { background: var(--nav); }
.section-bar.blue { background: var(--link); }
.section-bar.yellow { color: var(--yellow-ink); background: var(--yellow); border-left-color: var(--brand); }
.pickup-section { margin-bottom: 20px; }
.pickup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.pickup-card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-bottom: 3px solid var(--cat, var(--category, var(--brand))); border-radius: var(--radius); }
.pickup-card > a { display: block; min-height: 44px; color: var(--ink); text-decoration: none; }
.pickup-card > a:hover h3 { color: var(--link); text-decoration: underline; }
.pickup-copy { display: block; padding: 9px; }
.pickup-card h3 { margin-block: 6px; font-size: .9375rem; }
.pickup-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 2px; font-size: .75rem; line-height: 1.6; font-weight: 850; color: var(--on-color); background: var(--brand); }
.badge.hot { background: var(--hot); }
.badge.attention { color: var(--yellow-ink); background: var(--yellow); }
.badge.fiction { color: var(--fiction-on); background: var(--fiction); }
.rank-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 3px; }
.category-label { color: var(--cat, var(--category, var(--brand))); background: var(--cat-soft, var(--category-soft, var(--brand-soft))); font-weight: 800; font-size: .8125rem; padding: 2px 6px; }
.sample-label { font-size: .75rem; color: var(--muted); }
.comment-badge { display: inline-flex; align-items: center; gap: 4px; color: var(--link); font-size: .8125rem; font-weight: 650; }
.comment-badge b { font-size: .9375rem; }
.comment-badge.is-hot { color: var(--hot); }
.comment-badge.is-hot b { background: var(--hot); color: var(--on-color); padding: 0 5px; border-radius: 3px; }
.thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate; background: var(--cat-soft, var(--category-soft, var(--brand-soft))); color: var(--cat, var(--category, var(--brand))); }
.thumb::before { content: ""; position: absolute; width: 80%; aspect-ratio: 1; border: 20px solid var(--cat, var(--category, var(--brand))); opacity: .12; border-radius: 50%; right: -34%; top: -30%; }
.thumb::after { content: ""; position: absolute; width: 50%; height: 28%; background: var(--cat, var(--category, var(--brand))); opacity: .1; left: -12%; bottom: 14%; transform: rotate(-35deg); }
.thumb-orbit { position: absolute; inset: 14% 17%; border: 1px dashed var(--cat, var(--category, var(--brand))); border-radius: 50%; opacity: .35; transform: rotate(-20deg); }
.thumb-art { position: absolute; inset: 20% 20% 28%; display: block; }
.thumb-art i { position: absolute; display: block; font-style: normal; }
.thumb-art:not(.art-search):not(.art-home):not(.art-heart):not(.art-wallet) i:nth-child(1) { width: 62%; height: 70%; left: 0; top: 0; border-radius: 14px 14px 14px 2px; background: var(--cat, var(--category, var(--brand))); transform: rotate(-9deg); }
.thumb-art:not(.art-search):not(.art-home):not(.art-heart):not(.art-wallet) i:nth-child(2) { width: 60%; height: 65%; right: 0; bottom: 0; border: 3px solid var(--cat, var(--category, var(--brand))); background: var(--surface); border-radius: 12px 12px 2px 12px; transform: rotate(8deg); }
.thumb-art:not(.art-search):not(.art-home):not(.art-heart):not(.art-wallet) i:nth-child(3) { width: 23%; height: 4px; background: var(--cat, var(--category, var(--brand))); right: 18%; bottom: 30%; box-shadow: 0 8px 0 var(--cat, var(--category, var(--brand))); }
.art-search i:nth-child(1) { width: 56%; height: 88%; left: 22%; top: 6%; border: 4px solid var(--cat, var(--category, var(--brand))); background: var(--surface); border-radius: 5px; transform: rotate(-9deg); }
.art-search i:nth-child(2) { width: 25%; aspect-ratio: 1; border: 5px solid var(--cat, var(--category, var(--brand))); border-radius: 50%; right: 5%; bottom: 20%; background: var(--cat-soft, var(--category-soft, var(--brand-soft))); }
.art-search i:nth-child(3) { width: 7%; height: 35%; background: var(--cat, var(--category, var(--brand))); right: 1%; bottom: -6%; transform: rotate(-40deg); border-radius: 3px; }
.art-home i:nth-child(1) { width: 62%; height: 62%; left: 20%; bottom: 0; background: var(--surface); border: 3px solid var(--cat, var(--category, var(--brand))); }
.art-home i:nth-child(2) { width: 48%; aspect-ratio: 1; left: 27%; top: -15%; border-left: 6px solid var(--cat, var(--category, var(--brand))); border-top: 6px solid var(--cat, var(--category, var(--brand))); transform: rotate(45deg); }
.art-home i:nth-child(3) { width: 15%; height: 28%; left: 43%; bottom: 0; background: var(--cat, var(--category, var(--brand))); }
.art-heart i:nth-child(1), .art-heart i:nth-child(2) { width: 39%; height: 82%; top: 5%; left: 22%; background: var(--cat, var(--category, var(--brand))); border-radius: 50% 50% 0 0; transform: rotate(-42deg); }
.art-heart i:nth-child(2) { left: 43%; transform: rotate(42deg); }
.art-heart i:nth-child(3) { width: 9%; aspect-ratio: 1; background: var(--surface); border-radius: 50%; left: 30%; top: 19%; }
.art-wallet i:nth-child(1) { width: 70%; height: 72%; left: 15%; bottom: 5%; border: 4px solid var(--cat, var(--category, var(--brand))); border-radius: 8px; background: var(--surface); transform: rotate(-8deg); }
.art-wallet i:nth-child(2) { width: 30%; height: 28%; right: 10%; bottom: 30%; border: 3px solid var(--cat, var(--category, var(--brand))); border-radius: 3px; background: var(--cat-soft, var(--category-soft, var(--brand-soft))); }
.art-wallet i:nth-child(3) { width: 26%; aspect-ratio: 1; left: 25%; top: -16%; background: var(--yellow); border: 3px solid var(--cat, var(--category, var(--brand))); border-radius: 50%; }
.thumb-word { background: var(--cat-soft, var(--category-soft, var(--brand-soft))); position: absolute; bottom: 5%; left: 0; right: 0; text-align: center; font-size: clamp(.875rem, 1.4vw, 1.125rem); font-weight: 900; letter-spacing: .12em; }
.thumb-corner { position: absolute; left: 5px; top: 5px; color: var(--cat, var(--category, var(--brand))); font-size: .625rem; background: var(--cat-soft, var(--category-soft, var(--brand-soft))); padding: 0 3px; }
.page-columns { display: grid; grid-template-areas: "main" "right" "left"; gap: var(--column-gap); align-items: start; padding-bottom: 28px; }
.primary-column { grid-area: main; min-width: 0; container-type: inline-size; container-name: primary; }
.sidebar-right { grid-area: right; }
.sidebar-left { grid-area: left; }
.sidebar { display: grid; align-content: start; align-items: start; gap: 16px; min-width: 0; }
.page-columns > *, .article-row > *, .sidebar > *, .rank-item > * { min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.panel + .panel, .primary-section + .primary-section { margin-top: 20px; }
.sidebar .panel + .panel { margin-top: 0; }
.panel-title { padding: 9px 11px; background: var(--nav); color: var(--on-color); border-left: 5px solid var(--yellow); font-size: 1rem; }
.panel-title.pink { background: var(--brand); }
.panel-title.blue { background: var(--link); }
.panel-body { padding: 12px; }
.panel-note { margin-bottom: 10px; color: var(--muted); font-size: .8125rem; }
.feed-summary { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: .8125rem; color: var(--muted); background: var(--yellow-soft); }
.article-list { background: var(--surface); }
.article-list > li + li { border-top: 1px solid var(--line); }
.article-row { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; padding: 12px 8px; }
.article-row .thumb { aspect-ratio: 3 / 2; border-radius: 3px; margin-top: 3px; }
.article-row .thumb-word { font-size: .8125rem; letter-spacing: .04em; }
.article-row .thumb-corner { display: none; }
.row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; font-size: .8125rem; color: var(--muted); }
.article-row h3 { font-size: 1rem; line-height: 1.6; }
.article-row h3 a { display: flex; align-items: center; min-height: 44px; padding-block: 4px; color: var(--ink); text-decoration: none; }
.article-row h3 a:hover { color: var(--link); text-decoration: underline; }
.row-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 9px; }
.feed-break { padding: 7px 12px; color: var(--on-color); background: var(--nav); font-size: .875rem; font-weight: 800; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 16px 8px; background: var(--surface); font-size: .8125rem; }
.page-number { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: var(--brand); color: var(--on-color); font-weight: 800; }
.page-disabled { padding: 8px; color: var(--muted); }
.category-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.category-block { border: 1px solid var(--line); background: var(--surface); }
.category-block h3 { padding: 8px 12px; background: var(--cat, var(--category, var(--brand))); color: var(--on-color); font-size: 1rem; }
.text-list { padding-inline: 12px; }
.text-list li + li { border-top: 1px dashed var(--line); }
.text-list a { display: flex; align-items: center; gap: 6px; min-height: 44px; padding-block: 8px; font-size: .9375rem; font-weight: 650; text-decoration: none; }
.text-list a::before { content: "›"; flex: 0 0 auto; color: var(--cat, var(--category, var(--brand))); font-weight: 900; }
.text-list a:hover { text-decoration: underline; }
.category-menu a, .category-menu li > span, .archive-list a { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 44px; padding: 6px 10px; font-size: .875rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.category-menu a, .category-menu li > span { border-left: 4px solid var(--cat, var(--category, var(--brand))); }
.category-menu a:hover, .archive-list a:hover { background: var(--paper); text-decoration: underline; }
.category-menu small, .archive-list small { color: var(--muted); font-size: .75rem; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; align-items: center; }
.tag-cloud a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding: 5px 8px; border: 1px solid var(--line); color: var(--cat, var(--category, var(--link))); background: var(--cat-soft, var(--category-soft, var(--paper))); font-size: .8125rem; font-weight: 750; text-decoration: none; }
.tag-cloud .tag-large { font-size: 1.0625rem; }
.ranking-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.rank-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 10px; }
.rank-tabs label { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--control-line); color: var(--ink); background: var(--paper); font-size: .875rem; font-weight: 800; cursor: pointer; }
#rank-day:checked ~ .rank-tabs label[for="rank-day"], #rank-week:checked ~ .rank-tabs label[for="rank-week"], #rank-month:checked ~ .rank-tabs label[for="rank-month"] { color: var(--on-color); background: var(--brand); border-color: var(--brand); }
#rank-day:focus-visible ~ .rank-tabs label[for="rank-day"], #rank-week:focus-visible ~ .rank-tabs label[for="rank-week"], #rank-month:focus-visible ~ .rank-tabs label[for="rank-month"], .ranking-more:focus-visible ~ .ranking-toggle { outline: 3px solid var(--focus); outline-offset: 2px; }
.rank-panel { display: none; padding: 0 10px 10px; }
#rank-day:checked ~ .rank-panels .rank-day, #rank-week:checked ~ .rank-panels .rank-week, #rank-month:checked ~ .rank-panels .rank-month { display: block; }
.rank-period { color: var(--muted); font-size: .75rem; padding-bottom: 5px; }
.rank-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 7px; border-bottom: 1px solid var(--line); padding: 8px 0; }
.rank-number { display: flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; margin-top: 4px; color: var(--on-color); background: var(--link); font-size: .9375rem; font-weight: 900; border-radius: 3px; }
.rank-list:not(.rank-additional) > .rank-item:nth-child(1) .rank-number { background: var(--yellow); color: var(--yellow-ink); }
.rank-list:not(.rank-additional) > .rank-item:nth-child(2) .rank-number { background: var(--rank-silver); color: var(--ink); }
.rank-list:not(.rank-additional) > .rank-item:nth-child(3) .rank-number { background: var(--rank-bronze); color: var(--ink); }
.rank-link { display: block; min-height: 44px; color: var(--ink); font-size: .875rem; font-weight: 750; line-height: 1.6; text-decoration: none; }
.rank-link:hover { color: var(--link); text-decoration: underline; }
.rank-link small { display: block; color: var(--hot); font-size: .75rem; margin-top: 3px; }
@media (max-width: 767px) {
  .ranking-more:not(:checked) ~ .rank-additional { display: none; }
}
/* 操作本体も可視ラベルと同じ位置。上位5件→展開→追加5件のDOM順にする。 */
.ranking-extra { position: relative; padding-top: 8px; }
.ranking-more { position: absolute; top: 8px; left: 0; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
.ranking-toggle { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px; border: 1px solid var(--control-line); background: var(--paper); color: var(--link); font-size: .875rem; font-weight: 750; cursor: pointer; }
.ranking-toggle .less-label { display: none; }
.ranking-more:checked ~ .ranking-toggle .more-label { display: none; }
.ranking-more:checked ~ .ranking-toggle .less-label { display: inline; }
.recent-comment { padding: 11px; border-bottom: 1px solid var(--line); font-size: .875rem; }
.recent-comment .comment-time { color: var(--muted); font-size: .75rem; }
.recent-comment a { display: flex; align-items: center; min-height: 44px; margin-top: 3px; font-size: .8125rem; line-height: 1.6; }
.related-sites p { padding: 20px 12px; color: var(--muted); text-align: center; }
.note-box { padding: 12px; background: var(--yellow-soft); font-size: .875rem; border-top: 3px solid var(--yellow); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-block: 6px; font-size: .8125rem; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.story-header { background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--cat, var(--category, var(--brand))); }
.story-kicker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 14px; color: var(--cat, var(--category, var(--brand))); background: var(--cat-soft, var(--category-soft, var(--brand-soft))); font-size: .875rem; font-weight: 800; }
.story-header h1 { padding: 12px 14px; color: var(--cat, var(--category, var(--brand))); font-size: 1.5rem; line-height: 1.55; font-weight: 900; }
.story-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 0 14px 10px; color: var(--muted); font-size: .8125rem; }
.story-meta a { min-height: 44px; display: inline-flex; align-items: center; }
.story-deck { padding: 14px; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.75; }
.sample-notice { margin: 0 14px 14px; padding: 10px; color: var(--yellow-ink); background: var(--yellow-soft); border-left: 4px solid var(--yellow); font-size: .875rem; }
.fiction-footnote { color: var(--muted); font-size: .8125rem; }
.affiliate-notice { margin: 0 14px 14px; padding: 10px; color: var(--ad-ink); background: var(--ad-surface); border-left: 4px solid var(--ad-line); font-size: 1rem; }
.article-jump { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 14px 14px; }
.article-jump a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px; border: 1px solid var(--control-line); color: var(--link); font-size: .8125rem; text-decoration: none; font-weight: 750; }
.read-next { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.read-next a { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; flex: 1 1 120px; padding: 8px 12px; border: 1px solid var(--control-line); background: var(--surface); font-weight: 750; }
/* 原稿の表はこのラッパー内でのみ横スクロール。tableの意味構造は変えない。 */
.table-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; margin-block: 16px; }
.primary-column table { max-width: 100%; border-collapse: collapse; overflow-wrap: anywhere; }
.table-scroll > table { width: 100%; max-width: none; }
.primary-column th, .primary-column td { padding: 8px; border: 1px solid var(--line); text-align: start; }
/* pre・AAは空白を保持し、名前とtabindexを付けた要素内でスクロールする。 */
.primary-column pre { width: 100%; max-width: 100%; min-width: 0; margin-block: 16px; padding: 12px; overflow-x: auto; overscroll-behavior-inline: contain; white-space: pre; font-size: 1rem; line-height: 1.75; background: var(--surface); border: 1px solid var(--line); }
.discussion-group { border: 1px solid var(--line); background: var(--surface); margin-top: 20px; }
.discussion-heading { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; padding: 10px 12px; border-bottom: 3px solid var(--brand); color: var(--ink); background: var(--yellow-soft); font-size: 1rem; }
.discussion-heading small { font-weight: 500; color: var(--muted); font-size: .8125rem; }
.res { margin: 0; padding: 28px 16px; border-bottom: 1px dashed var(--line); min-width: 0; }
.res:last-child { border-bottom: 0; }
.res-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; color: var(--muted); font-size: .8125rem; line-height: 1.6; }
.res-number { color: var(--muted); font-weight: 700; }
.res-name { color: var(--res-name); font-weight: 700; }
.op-label { color: var(--res-op-accent); padding: 1px 5px; font-size: .75rem; font-weight: 800; }
.res-body { min-width: 0; margin-top: 12px; color: var(--ink); font-size: var(--res-body-size); font-weight: var(--res-body-weight); line-height: var(--res-line-height); overflow-wrap: anywhere; }
/* Markdownの段落と強調の復元はそのまま。本文中のsoft breakだけを表示する。 */
.res-body p, .res-body li { white-space: pre-line; }
.res-body ul, .res-body ol, .res-body li:has(> p) { white-space: normal; }
.res-body > * + *, .res-body p + p { margin-top: .9em; }
.res-body > :first-child { margin-top: 0; }
.res-body > :last-child { margin-bottom: 0; }
.res-op { background: var(--res-op-bg); border-left: 4px solid var(--res-op-accent); padding-left: 12px; }
.res-op .res-body { color: var(--res-op-ink); }
.res-big, .res-bigred, .res-red, .res-blue, .res-pink, .res-marker, .res-bold { font-weight: var(--res-heavy-weight); overflow-wrap: anywhere; }
.res-big { font-size: var(--res-big-size); }
.res-bigred { font-size: var(--res-bigred-size); color: var(--res-red); }
.res-red { color: var(--res-red); }
.res-blue { color: var(--res-blue); }
.res-pink { color: var(--res-pink); }
.res-marker { color: var(--ink); background: var(--res-marker-bg); padding-inline: .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.res-small { color: var(--res-small); font-size: var(--res-small-size); font-weight: var(--res-body-weight); overflow-wrap: anywhere; }
/* 顔文字・短い括弧書きは途中で折り返さない（shortcode-res.html／comments.html が span.kao で包む） */
.kao { white-space: nowrap; }
.res-anchor { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-right: 5px; font-size: 1rem; font-weight: 800; color: var(--link); }
.editorial-box { margin-top: 20px; border: 2px solid var(--yellow); background: var(--yellow-soft); padding: 16px; }
.editorial-box h2 { font-size: 1.1875rem; color: var(--yellow-ink); margin-bottom: 10px; }
.editorial-box ol { list-style: decimal; padding-left: 1.5em; }
.editorial-box li { padding: 4px 0; }
.editorial-box p { margin-top: 12px; }
.support-box { border: 2px solid var(--support); border-left-width: 6px; background: var(--support-soft); padding: 14px; margin-block: 20px; }
.support-box h2 { color: var(--support); font-size: 1.125rem; margin-bottom: 8px; }
.support-label { display: inline-block; font-size: .8125rem; font-weight: 800; color: var(--support); margin-bottom: 5px; }
.support-box p { font-size: 1rem; }
.support-box details { margin-top: 8px; }
.support-box summary, .sample-library summary, .footer-details summary { min-height: 44px; padding: 9px 6px; font-weight: 750; }
.support-box details p { padding: 8px 6px; }
.reader-comments { margin-top: 20px; }
.comments-note { padding: 12px; font-size: .875rem; color: var(--muted); }
.reader-comment { padding: 16px 12px; border-top: 1px solid var(--line); }
.reader-comment header { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .8125rem; color: var(--muted); }
.reader-comment header strong { color: var(--res-name); }
.reader-comment p { margin-top: 8px; font-size: 1rem; }
.comment-form { border-top: 3px solid var(--line); padding: 14px; }
.comment-form p { font-size: .875rem; }
.comment-form fieldset { min-width: 0; border: 0; padding: 0; margin: 12px 0 0; }
.comment-form label { display: flex; align-items: center; min-height: 44px; font-size: .875rem; margin-block: 8px 4px; font-weight: 750; }
.comment-form input, .comment-form textarea { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 8px; color: var(--muted); border: 1px solid var(--control-line); background: var(--paper); border-radius: 3px; }
.comment-form button { min-width: 44px; min-height: 44px; margin-top: 10px; padding: 6px 16px; background: var(--paper); color: var(--muted); border: 1px solid var(--control-line); }
.form-help { display: block; margin-top: 8px; color: var(--muted); font-size: .8125rem; }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.related-card { min-width: 0; border-bottom: 3px solid var(--cat, var(--category, var(--brand))); }
.related-card a { display: block; min-height: 44px; color: var(--ink); text-decoration: none; }
.related-card h3 { font-size: .875rem; padding-block: 8px; }
.related-card a:hover h3 { color: var(--link); text-decoration: underline; }
.prev-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block: 20px; }
.prev-next a { min-height: 44px; padding: 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); font-size: .9375rem; font-weight: 700; text-decoration: none; }
.prev-next span { display: block; color: var(--brand); font-size: .8125rem; padding-bottom: 6px; }
.sample-library { margin-top: 24px; }
.sample-library .panel-body > p { margin-bottom: 12px; font-size: .875rem; color: var(--muted); }
.sample-library details { border: 1px solid var(--line); margin-top: 6px; background: var(--surface); }
.sample-library summary { font-size: .9375rem; color: var(--link); padding-inline: 10px; }
.sample-library details p { padding: 12px; border-top: 1px solid var(--line); font-size: 1rem; }
.site-footer { color: var(--on-color); background: var(--nav); border-top: 6px solid var(--brand); padding-block: 24px; }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.footer-brand { font-size: 1.5rem; font-weight: 900; letter-spacing: .08em; }
.back-top { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; color: var(--yellow-ink); background: var(--yellow); font-size: .875rem; font-weight: 850; text-decoration: none; }
.footer-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.footer-categories a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px; border: 1px solid var(--control-line); border-left: 4px solid var(--yellow); color: var(--on-color); font-size: .875rem; text-decoration: none; }
.footer-details { margin-top: 16px; display: grid; gap: 8px; }
.footer-details details { border-top: 1px solid var(--control-line); }
.footer-details summary { font-size: .875rem; }
.footer-details p { padding: 8px; font-size: .875rem; }
.footer-fine { margin-top: 18px; font-size: .8125rem; }
@media (max-width: 767px) {
  .recent-comment, .recent-comment a, .rank-link, .pickup-card h3, .related-card h3 { font-size: 1rem; }
}
@media (max-width: 359px) {
  .wordmark { font-size: 1.5rem; }
  .brand-caption { font-size: .6875rem; }
}
@media (min-width: 480px) {
  :root { --gutter: 16px; }
  .wordmark { font-size: 2rem; }
  .brand-mark { display: block; }
  .pickup-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-row { grid-template-columns: 96px minmax(0, 1fr); padding: 14px 12px; gap: 12px; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  :root { --res-body-size: var(--res-body-size-desktop); }
  .brand-logo img { height: 80px; }
  .header-inner { padding-block: 20px; gap: 18px; }
  .wordmark { font-size: 2.75rem; }
  .brand-caption { font-size: .875rem; letter-spacing: .1em; }
  .header-note { display: block; text-align: right; font-size: .875rem; }
  .header-note strong { display: block; font-size: 1.125rem; }
  .header-note span { color: var(--yellow); font-weight: 850; }
  .ticker-extra { display: inline-flex !important; }
  .page-heading h1 { font-size: 1.5rem; }
  .page-columns { grid-template-columns: minmax(0, 1fr) 232px; grid-template-areas: "main right" "left left"; }
  .sidebar-left { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranking-extra { padding-top: 0; }
  .ranking-more, .ranking-toggle { display: none; }
  .story-header h1 { font-size: 1.75rem; padding-inline: 20px; }
  .story-kicker, .story-meta, .story-deck { padding-inline: 20px; }
  .res { padding: 32px 24px; }
  .res-op { padding-left: 20px; }
  .footer-details { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1024px) {
  .page-columns { grid-template-columns: 176px minmax(0, 1fr) 272px; grid-template-areas: "left main right"; }
  .sidebar-left { grid-template-columns: minmax(0, 1fr); }
  .pickup-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pickup-card h3 { font-size: 1rem; }
  .article-row { grid-template-columns: 112px minmax(0, 1fr); padding: 14px; gap: 14px; }
  .article-row h3 { font-size: 1.0625rem; }
  .related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-categories { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (forced-colors: active) {
  .badge, .category-label, .rank-number, .op-label, .section-bar, .panel-title { border: 1px solid CanvasText; }
  .rank-tabs label { border: 2px solid ButtonText; }
  #rank-day:checked ~ .rank-tabs label[for="rank-day"], #rank-week:checked ~ .rank-tabs label[for="rank-week"], #rank-month:checked ~ .rank-tabs label[for="rank-month"] { outline: 3px solid Highlight; }
  .res-op { border: 3px solid CanvasText; }
}
@media print {
  .primary-nav, .sidebar, .ad-slot, .comment-form { display: none !important; }
  .page-columns { display: block; }
  .test-banner { display: block; }
  .site-header, .site-footer { background: var(--surface); color: var(--ink); }
  .brand { color: var(--ink); }
  .res { break-inside: avoid; }
}

/* 見出し・アーカイブ操作の余白を共通化。 */
.pickup-title { padding-inline: 9px; }
.sidebar .note-box h2 { font-size: 1rem; margin-bottom: 6px; }
.archive-return { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }


/* 共通テーマへの組み込み。サイトの site.css はこのファイルの後に読む。 */
.site-main { min-height: 55vh; }
/* 読者投稿の入口とフォーム。広告枠とは別の配色・部品として扱う。 */
.tips-entry { min-width: 0; }
.tips-entry-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; min-height: 44px; padding: 14px 16px; color: var(--tips); background: var(--tips-soft); border: 2px solid var(--tips); border-radius: 8px; text-decoration: none; }
.tips-entry-label, .tips-entry-link strong, .tips-entry-lead { grid-column: 1; }
.tips-entry-label { font-size: .75rem; font-weight: 700; }
.tips-entry-link strong { font-size: 1.125rem; }
.tips-entry-lead { font-size: .875rem; }
.tips-entry-arrow { grid-column: 2; grid-row: 1 / 4; align-self: center; font-size: 1.5rem; }
.tips-entry-link:hover strong { text-decoration: underline; }
.tips-entry-header { margin-block: 10px; }
.tips-entry-header .tips-entry-link { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-block: 8px; }
.tips-entry-header .tips-entry-arrow { margin-inline-start: auto; }
.tips-entry-sidebar { display: none; }
.tips-entry-footer { margin-block: 24px; }
.tips-eyebrow { color: var(--tips); font-size: .875rem; font-weight: 750; }
.tips-page .page-header .tips-lead { color: var(--ink); font-size: 1.0625rem; margin-top: 12px; }
.tips-notice { margin-block: 24px; padding: 16px; background: var(--tips-soft); border-left: 4px solid var(--tips); border-radius: 4px; }
.tips-notice h2 { font-size: 1rem; margin-bottom: 10px; }
.tips-notice ul { padding-inline-start: 1.3em; list-style: disc; }
.tips-notice li + li { margin-top: 8px; }
.tips-form { display: grid; gap: 20px; min-width: 0; }
.tips-field { display: grid; gap: 6px; min-width: 0; }
.tips-field > label { font-weight: 750; }
.tips-required, .tips-optional { display: inline-block; margin-inline-start: 6px; font-size: .8125rem; font-weight: 650; }
.tips-required { color: var(--tips); }
.tips-optional, .tips-help, .tips-count { color: var(--muted); }
.tips-help, .tips-count { font-size: .875rem; }
.tips-count { text-align: end; }
.tips-field input, .tips-field select, .tips-field textarea { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--control-line); border-radius: 4px; background: var(--surface); color: var(--ink); }
.tips-field textarea { resize: vertical; }
.tips-consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 12px; min-height: 44px; padding: 14px; border: 1px solid var(--control-line); border-radius: 4px; cursor: pointer; }
.tips-consent input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--tips); }
.tips-form [aria-invalid="true"] { outline: 2px solid var(--hot); outline-offset: 2px; }
.tips-status { min-height: 1.75em; font-weight: 700; }
.tips-submit { width: 100%; min-width: 44px; min-height: 48px; padding: 12px 20px; border: 2px solid var(--tips); border-radius: 6px; color: var(--tips-on); background: var(--tips); font-weight: 750; }
.tips-submit:disabled { color: var(--muted); background: var(--paper); border-color: var(--control-line); }
@media (min-width: 768px) {
  .tips-entry-sidebar { display: block; }
  .tips-entry-footer { display: none; }
}
@media print {
  .tips-entry, .tips-form { display: none !important; }
}
.home-description { margin-bottom: 16px; }
.category-block h3 a { display: flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.row-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-height: 3.5em; overflow: hidden; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.row-meta a, .comment-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.row-thumb-link { display: block; min-width: 44px; min-height: 44px; }
.thumb { aspect-ratio: 3 / 2; }
.thumb-image::before, .thumb-image::after { content: none; }
.thumb-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.story-deck { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.story-thumbnail { width: 100%; }
.story-thumbnail .thumb { border-radius: 8px; box-shadow: 0 3px 12px #22213814; }
.story-kicker a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.story-deck p { min-width: 0; }
@media (min-width: 768px) {
  .story-deck p { font-size: 1.0625rem; }
}
.reading-article { margin-bottom: 20px; }
.prose { font-size: 1rem; line-height: 1.75; }
.prose > p, .prose > ul, .prose > ol, .prose > blockquote { margin-block: 16px; }
.prose > h2, .prose > h3 { margin-block: 24px 12px; }
.prose ul, .prose ol { padding-inline-start: 1.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-block: 6px; }
.prose blockquote { border-inline-start: 4px solid var(--line); padding: 12px; background: var(--surface); }
.prose > .discussion-group, .prose > .editorial-box, .prose > .support-box { margin-block: 20px; }
.reading-container { max-width: 960px; padding-bottom: 28px; }
.fixed-page { padding: 20px; }
.page-header { padding-block: 12px 20px; }
.page-header h1 { margin-bottom: 12px; }
.error-page { padding-block: 40px; }
.empty-state { padding: 20px 12px; color: var(--muted); }
.article-return a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; }
.footer-links a { display: flex; align-items: center; min-height: 44px; color: var(--on-color); }
.comments-placeholder { margin-top: 20px; border: 1px solid var(--line); background: var(--surface); padding: 16px; }
.comments-placeholder h2 { padding: 9px 12px; background: var(--nav); border-left: 5px solid var(--yellow); color: var(--on-color); font-size: 1.125rem; margin-bottom: 12px; }
.comments-placeholder ol { padding-left: 1.5rem; list-style: decimal; }
.comments-placeholder li { margin-block: 1rem; }
.comments-placeholder li p { white-space: pre-wrap; overflow-wrap: anywhere; }
.comments-placeholder form { margin-top: 1.5rem; }
.comments-placeholder textarea { display: block; width: 100%; min-height: 44px; padding: .6rem; margin-block: .5rem; }
.comments-placeholder .comment-consent { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-block: 1rem; }
.comments-placeholder input[type="checkbox"] { min-width: 24px; min-height: 24px; }
.comments-placeholder button, .comments-placeholder a { min-height: 44px; min-width: 44px; }
.comments-placeholder button { padding: 8px 16px; margin-top: 8px; }
.comments-placeholder button:disabled { cursor: default; opacity: .65; }

/* 広告は通常フロー。非表示時の枠・ラベル・余白もなくす。 */
.sidebar-right { container: sidebar / inline-size; }
.ad-footer-container { container: adfooter / inline-size; }
.ad-frame { display: none; min-width: 0; padding-block: var(--ad-control-gap); }
.ad-frame .ad-slot { display: block; width: fit-content; max-width: 100%; margin: 0 auto; background: var(--ad-surface); border: 1px dashed var(--ad-line); color: var(--ad-ink); }
.ad-label { margin: 0 0 8px; padding: 8px; font-size: 1rem; }
.ad-slot a { color: var(--ad-link); }
.ad-copy { padding: 12px; }
.ad-title { font-weight: 750; }
.ad-text-link, .ad-text-preview { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 4px; }
.ad-banner-link, .ad-banner-preview { display: block; min-width: 44px; min-height: 44px; }
.ad-slot img { max-width: none; height: auto; }
.ad-code-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; overflow: hidden; }
.ad-size-300x250 .ad-code-preview { width: 300px; height: 250px; }
.ad-size-336x280 .ad-code-preview { width: 336px; height: 280px; }
.ad-size-320x100 .ad-code-preview { width: 320px; height: 100px; }
.ad-size-320x50 .ad-code-preview { width: 320px; height: 50px; }
.ad-size-468x60 .ad-code-preview { width: 468px; height: 60px; }
.ad-size-728x90 .ad-code-preview { width: 728px; height: 90px; }
.ad-pixel, .ad-slot .ad-pixel img { display: block; width: 1px; height: 1px; overflow: hidden; }
.article-list > .ad-list-item { border: 0; background: var(--paper); }
.ad-main.ad-size-text { display: block; }
@media (max-width: 767px) {
  @container primary (min-width: 302px) {
    .ad-main.ad-size-300x250 { display: block; }
  }
  @container primary (min-width: 322px) {
    .ad-main.ad-size-320x100, .ad-main.ad-size-320x50 { display: block; }
  }
  @container primary (min-width: 338px) {
    .ad-main.ad-size-336x280 { display: block; }
  }
}
@media (min-width: 768px) {
  .ad-frame { padding-inline: 32px; }
  @container primary (min-width: 366px) {
    .ad-main.ad-size-300x250 { display: block; }
  }
  @container primary (min-width: 386px) {
    .ad-main.ad-size-320x100, .ad-main.ad-size-320x50 { display: block; }
  }
  @container primary (min-width: 402px) {
    .ad-main.ad-size-336x280 { display: block; }
  }
}
@media (min-width: 1024px) {
  .ad-pos-header-below.ad-size-text, .ad-pos-sidebar-top.ad-size-text, .ad-pos-sidebar-middle.ad-size-text, .ad-pos-footer-above.ad-size-text { display: block; }
  @container primary (min-width: 534px) { .ad-pos-header-below.ad-size-468x60 { display: block; } }
  @container primary (min-width: 794px) { .ad-pos-header-below.ad-size-728x90, .ad-main.ad-size-728x90 { display: block; } }
  @container sidebar (min-width: 366px) { .ad-pos-sidebar-top.ad-size-300x250, .ad-pos-sidebar-middle.ad-size-300x250 { display: block; } }
  @container adfooter (min-width: 534px) { .ad-pos-footer-above.ad-size-468x60 { display: block; } }
  @container adfooter (min-width: 794px) { .ad-pos-footer-above.ad-size-728x90 { display: block; } }
}
@media (max-width: 1023px) { .ad-frame.ad-desktop-only { display: none; } }
/* 本番の枠：画像・計測用画像の picture と同じ「screen かつ最小幅」で表示を決め、隠れた枠と印刷から外部へ要求しない。 */
.ad-frame.ad-live { display: none !important; }
@media screen { .ad-frame.ad-live.ad-vw-0 { display: block !important; } }
@media screen and (min-width: 344px) { .ad-frame.ad-live.ad-vw-344 { display: block !important; } }
@media screen and (min-width: 362px) { .ad-frame.ad-live.ad-vw-362 { display: block !important; } }
@media screen and (min-width: 378px) { .ad-frame.ad-live.ad-vw-378 { display: block !important; } }
@media screen and (min-width: 1024px) { .ad-frame.ad-live.ad-vw-1024 { display: block !important; } }
@media screen and (min-width: 1070px) { .ad-frame.ad-live.ad-vw-1070 { display: block !important; } }
@media screen and (min-width: 1330px) { .ad-frame.ad-live.ad-vw-1330 { display: block !important; } }
@media print { .ad-frame { display: none !important; } }

.ad-frame[hidden] { display: none !important; }
@media screen { .ad-frame:not([hidden]) { display: block; } }
.ad-body img { max-width: 100%; height: auto; }
.ai-badge { font-size: .625rem; font-weight: 700; line-height: 1; padding: 1px 3px; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); opacity: .75; }
.comment-no { font-size: .75rem; }
.reader-comments { list-style: none; padding-left: 0; }

/* ダークモード。既定は端末の設定、data-theme（js/theme.js が付ける）があればそれを優先する。 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121016; --surface: #1d1a22; --ink: #ece9f1; --muted: #b5afbf;
  --line: #3b3745; --control-line: #9189a0;
  --brand-soft: #2a2230; --nav: #26212c;
  --yellow-soft: #37301a;
  --link: #8fb8ff; --focus: #8fb8ff; --hot: #e0465c;
  --fiction-soft: #12302f;
  --rank-silver: #4b515a; --rank-bronze: #6b4a36;
  --res-name: #62d39c; --res-red: #ff8090; --res-blue: #86b6ff;
  --res-pink: #ff93c6; --res-small: #b5afbf; --res-marker-bg: #5b4c08;
  --res-op-bg: #2a1c24; --res-op-accent: #ff93c6;
  --support: #62d39c; --support-soft: #14301f;
  --tips: #7fd6dc; --tips-soft: #12302f;
  --ad-surface: #25222b; --ad-ink: #c9c3d2; --ad-line: #8d8699; --ad-link: #a9c4ee;}
:root[data-theme="dark"] .category-label { color: var(--on-color); background: var(--cat, var(--category, var(--brand))); }
:root[data-theme="dark"] .section-bar.blue { background: var(--brand); }
:root[data-theme="dark"] .skip-link { color: var(--yellow-ink); }
:root[data-theme="dark"] .story-thumbnail .thumb { box-shadow: 0 3px 12px #00000066; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --paper: #121016; --surface: #1d1a22; --ink: #ece9f1; --muted: #b5afbf;
  --line: #3b3745; --control-line: #9189a0;
  --brand-soft: #2a2230; --nav: #26212c;
  --yellow-soft: #37301a;
  --link: #8fb8ff; --focus: #8fb8ff; --hot: #e0465c;
  --fiction-soft: #12302f;
  --rank-silver: #4b515a; --rank-bronze: #6b4a36;
  --res-name: #62d39c; --res-red: #ff8090; --res-blue: #86b6ff;
  --res-pink: #ff93c6; --res-small: #b5afbf; --res-marker-bg: #5b4c08;
  --res-op-bg: #2a1c24; --res-op-accent: #ff93c6;
  --support: #62d39c; --support-soft: #14301f;
  --tips: #7fd6dc; --tips-soft: #12302f;
  --ad-surface: #25222b; --ad-ink: #c9c3d2; --ad-line: #8d8699; --ad-link: #a9c4ee;}
:root:not([data-theme="light"]) .category-label { color: var(--on-color); background: var(--cat, var(--category, var(--brand))); }
:root:not([data-theme="light"]) .section-bar.blue { background: var(--brand); }
:root:not([data-theme="light"]) .skip-link { color: var(--yellow-ink); }
:root:not([data-theme="light"]) .story-thumbnail .thumb { box-shadow: 0 3px 12px #00000066; }
}
.theme-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 6px 12px; margin-inline-start: auto; color: var(--on-color); background: #00000059; border: 1px solid #ffffff73; border-radius: 999px; font-size: .8125rem; font-weight: 800; line-height: 1; }
.theme-toggle:hover { background: #00000099; }
.theme-toggle[hidden] { display: none; }
.theme-toggle-icon { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(90deg, #ffffff 50%, #00000000 50%); border: 2px solid #ffffff; }
@media print { .theme-toggle { display: none !important; } }

/* SNS 共有ボタン（共有用 URL へのリンクだけ）。色は変数で、ライト・ダークの両方で読める。 */
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 14px; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--control-line); border-radius: 999px; font-size: .8125rem; font-weight: 800; line-height: 1; text-decoration: none; }
.share-btn svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 auto; }
.share-btn:hover, .share-btn:focus-visible { background: var(--brand-soft); }
.share-btn[hidden] { display: none; }
/* コメント欄 */
.comments-placeholder ol.reader-comments { padding-left: 0; list-style: none; }
.reader-comment:target { background: var(--yellow-soft); }
.reader-comment header { align-items: center; }
.reader-comment a.comment-no { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0 6px; color: var(--link); font-weight: 800; font-variant-numeric: tabular-nums; text-decoration: none; border: 1px solid var(--line); border-radius: 4px; }
.reader-comment a.comment-no:hover { background: var(--brand-soft); }
.reader-comment a.comment-share { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; margin-inline-start: auto; color: var(--muted); }
.reader-comment a.comment-share svg { width: 16px; height: 16px; fill: currentColor; }
.reader-comment a.comment-share:hover { color: var(--link); }
.reader-comment p { position: relative; }
.reader-comment a.comment-quote { min-height: 0; min-width: 0; color: var(--link); font-weight: 700; text-decoration: none; margin-inline-end: .2em; }
.reader-comment a.comment-quote:hover { text-decoration: underline; }
.quote-pop { position: absolute; z-index: 5; left: 0; top: 1.9em; display: block; width: min(100%, 34rem); padding: 8px 10px; color: var(--ink); background: var(--surface); border: 1px solid var(--control-line); border-radius: 6px; box-shadow: 0 4px 14px #00000033; font-size: .875rem; font-weight: 400; white-space: pre-wrap; }
.quote-pop-head { display: block; margin-bottom: 4px; color: var(--muted); font-size: .75rem; font-weight: 700; }
.quote-pop-body { display: block; }
.comment-report { min-height: 32px; padding: 0 4px; margin-top: 4px; color: var(--muted); background: none; border: 0; font-size: .75rem; text-decoration: underline; }
.comment-form-box { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.comment-form-box > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; color: var(--on-color); background: var(--nav); border-radius: 4px; font-weight: 800; }
.comment-form-box textarea { color: var(--ink); background: var(--surface); border: 1px solid var(--control-line); border-radius: 4px; }
.comment-form-note { margin-top: 8px; color: var(--muted); font-size: .875rem; }
.comment-form-note:empty { display: none; }
.comment-next[hidden] { display: none; }

/* スマホ幅（600px 以下）のカード一覧：「今日のピックアップ」「関連記事」「こちらもおすすめ」。
   2〜3列だと、札が折れてタイトルの位置が左右でずれるので、1列の横長カードにする
   （左にサムネイル、右に札・タイトル・コメント数）。601px 以上の見た目は変えない。 */
@media (max-width: 600px) {
  .pickup-grid, .related-grid { grid-template-columns: minmax(0, 1fr); }
  .pickup-card > a, .related-card > a {
    display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto auto;
    column-gap: 10px; align-items: start; padding: 8px;
  }
  .pickup-card > a > .thumb, .related-card > a > .thumb { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 3 / 2; border-radius: 3px; }
  .pickup-card > a > .pickup-copy, .related-card > a > .pickup-copy,
  .pickup-card > a > h3, .related-card > a > h3 { grid-column: 2; min-width: 0; padding: 0; }
  /* 札（NEW・注目・オリジナル・カテゴリ）は1行に収める。収まらないときはカテゴリ名を「…」で省く。折り返さない。 */
  .pickup-card .pickup-meta, .related-card .pickup-meta { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
  .pickup-card .pickup-meta .badge, .related-card .pickup-meta .badge { flex: 0 0 auto; white-space: nowrap; }
  .pickup-card .pickup-meta .category-label, .related-card .pickup-meta .category-label {
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem;
  }
  /* タイトルは最大3行で切って「…」。3行ぶんの高さを取って、カードの高さをそろえる。 */
  .pickup-card > a > h3, .related-card > a > h3 {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
    margin: 4px 0; font-size: 1rem; line-height: 1.5; min-height: 4.5em; max-height: 4.5em;
  }
  .pickup-card > a > .pickup-copy:last-child, .related-card > a > .pickup-copy:last-child { white-space: nowrap; overflow: hidden; }
}

/* スマホ幅（600px 以下）の SNS 共有ボタン：文字つきの長いボタンが2行に折れるので、アイコンだけの丸ボタン（44px 角）を横1行に均等に並べる。
   文字は画面には出さないが、読み上げ用に残す（aria-label もある）。601px 以上の見た目は変えない。 */
@media (max-width: 600px) {
  .share-row { flex-wrap: nowrap; justify-content: space-between; gap: 0; }
  .share-btn { position: relative; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .share-btn svg { width: 20px; height: 20px; }
  .share-btn > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  /* URL コピーを押したときの短い知らせ（ボタンの上に小さく出す）。 */
  .share-copy[data-copied]::after {
    content: attr(data-copied); position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5;
    padding: 4px 8px; color: var(--surface); background: var(--ink); border-radius: 4px;
    font-size: .75rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
  }
  /* コメントの共有ボタンも、同じ 44px 角の丸ボタンにそろえる。 */
  .reader-comment a.comment-share { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border: 1px solid var(--control-line); border-radius: 50%; }
  .reader-comment a.comment-share svg { width: 20px; height: 20px; }
}

/* コメントの投稿欄：同意のチェックボックスと文を横に並べ、文はチェックのすぐ右から折り返す。
   （古い .comment-form の「入力欄は幅100%のブロック」という規則がチェックボックスにも当たり、左右に離れていた。）
   文を押してもチェックが入る（label でつないである）。「投稿する」は「コメントを書く」と同じ大きさ・形にそろえる。 */
.comment-form-box .comment-form { border-top: 0; padding: 12px 0 0; margin-top: 0; }
.comment-form-box .comment-form label { min-height: 0; }
.comment-form-box .comment-form .comment-consent {
  display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px;
  min-height: 44px; margin-block: 12px; padding-block: 8px; font-size: .875rem; font-weight: 400; line-height: 1.6; cursor: pointer;
}
.comment-form-box .comment-form .comment-consent input[type="checkbox"] {
  display: inline-block; flex: 0 0 24px; width: 24px; height: 24px; min-width: 24px; min-height: 24px;
  margin: 0; padding: 0; border-radius: 3px; background: var(--surface); accent-color: var(--brand);
}
.comment-form-box .comment-form .comment-consent > span { flex: 1 1 auto; min-width: 0; }
.comment-form-box > summary, .comment-form-box .comment-form button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 9em; min-height: 44px; padding: 6px 14px; margin-top: 0;
  color: var(--on-color); background: var(--nav); border: 1px solid var(--nav); border-radius: 4px;
  font-size: 1rem; font-weight: 800; line-height: 1.4;
}
.comment-form-box .comment-form button[type="submit"]:disabled { opacity: .55; cursor: not-allowed; }
@media print { .comment-form-box { display: none; } }

/* パンくず（全ページ共通の部品 breadcrumb.html）。リストの形にして、区切りは CSS で入れる。 */
.breadcrumb ol { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 6px; width: 100%; margin: 0; padding: 0; list-style: none; min-width: 0; }
.breadcrumb li { display: inline-flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.breadcrumb li:last-child { flex: 0 1 auto; overflow: hidden; }
.breadcrumb li + li::before { content: "/"; flex: 0 0 auto; margin-inline-end: 6px; color: var(--muted); }
.breadcrumb li > span { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.breadcrumb li > a { white-space: nowrap; min-width: 0; }
/* 記事の冒頭の要約（記事末のまとめの、最初の2項目）。 */
.lead-summary { margin: 0 0 16px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--yellow); }
.lead-summary h2 { margin-bottom: 6px; font-size: 1rem; }
.lead-summary ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.lead-summary li { margin-block: 4px; font-size: .9375rem; line-height: 1.7; }
.lead-summary-note { margin-top: 8px; color: var(--muted); font-size: .8125rem; }
/* 404：トップ・記事一覧へのボタン、人気の記事、カテゴリ */
.error-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 20px; }
.error-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 6px; background: var(--accent, #b3122f); color: #fff; font-weight: 700; text-decoration: none; }
.error-button.is-sub { background: none; color: inherit; border: 1px solid var(--line); }
.error-block { margin-top: 28px; }
.error-block h2 { font-size: 1.1rem; margin-bottom: 8px; }
.error-categories { display: flex; flex-wrap: wrap; gap: 8px; }
.error-categories a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
/* 広告の表示：枠のすぐ上の「広告」と、フッターの常設の表示 */
.ad-label strong { display: inline-block; padding: 1px 8px; border: 1px solid currentColor; border-radius: 3px; font-size: .75rem; letter-spacing: .08em; }
.footer-ad-notice a { color: inherit; text-decoration: underline; }