/* ダイナソーアップデートのスタイル（2026-11-05 カツ「乃木中ずかんみたいな感じ寄りにして」）。
   乃木工事ネタずかんの assets/css/site.css をそのまま写し、下の「恐竜の部品」だけを足した。部品の名前もネタずかんと同じ
   （ネタの種類→なかま・ネタの No.→種の No.・配信回の年表 .tl→姿の更新履歴）。ネタずかんの見た目を直したら、ここにも写す。
   文章を枠線＋角丸の箱に入れない（カードは絵の枠。角は丸めない）。文字は 15px 以上。外のフォント・CSS は読まない */
@font-face { font-family: "Oswald"; src: url("../fonts/oswald.woff2") format("woff2"); font-weight: 200 700; font-display: swap; unicode-range: U+0000-00FF, U+2013-2014, U+2026; }
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface2: #f2f2f2;
  --line: #e5e5e5;
  --line2: #cfcfcf;
  --text: #374151;
  --text-strong: #111111;
  --text-sub: #4b5563;
  --black: #141414;
  --black2: #1f1f1f;
  --red: #e3242b;
  --lamp: #ffd84d;
  --lamp-ink: #4a3b00;
  --lamp-bg: #fff6c8;
  --yt: #cc0000;
  --sans: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --heavy: "Oswald", "Yu Gothic", YuGothic, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --num: "Oswald", "Yu Gothic", sans-serif;
  --wrap: 1180px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.9 var(--sans); font-feature-settings: "palt"; overflow-wrap: anywhere; }
a { color: var(--text-strong); text-underline-offset: 3px; }
img, svg { max-width: 100%; height: auto; }
h1, h2, h3 { color: var(--text-strong); line-height: 1.3; margin: 0 0 .6em; font-weight: 700; }
p { margin: 0 0 1.1em; }
small { font-size: 16px; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--red); color: #fff; padding: 8px 12px; z-index: 20; }
.skip:focus { left: 8px; }

/* ---------- 頭（固定・1段）2026-10-20 カツ「ヘッダーは固定で」 ---------- */
html { scroll-padding-top: 84px; }
.site-head { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 6px 16px -14px rgba(0, 0, 0, .35); }
.hd { width: min(var(--wrap), calc(100% - 32px)); margin: 0 auto; display: flex; align-items: center; gap: 28px; min-height: 68px; }
.site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-strong); flex: none; }
.site-logo__mark { width: 34px; height: 34px; }
.site-logo__txt { display: flex; flex-direction: column; line-height: 1; }
.site-logo__k { font-family: var(--num); font-weight: 600; font-size: 16px; letter-spacing: .14em; color: var(--red); margin-bottom: 3px; }
.site-logo__name { font-family: var(--heavy); font-weight: 700; font-size: 25px; letter-spacing: -.01em; }
.gnav { display: flex; gap: 4px; margin-left: auto; }
.gnav a { display: block; padding: 22px 14px 20px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 16px; box-shadow: inset 0 -3px 0 transparent; }
.gnav a:hover { color: var(--text-strong); }
.gnav a[aria-current="page"] { color: var(--text-strong); box-shadow: inset 0 -3px 0 var(--red); }
.hd-search { display: flex; border: 1px solid var(--line2); border-radius: 999px; overflow: hidden; background: #fff; }
.hd-search input { border: 0; font: inherit; font-size: 16px; padding: 7px 14px; width: 190px; background: transparent; color: var(--text-strong); }
.hd-search input::placeholder { color: #6b7280; }
.hd-search input:focus { outline: none; }
.hd-search:focus-within { box-shadow: 0 0 0 2px var(--text-strong); }
.hd-search button { border: 0; background: transparent; color: var(--text-strong); width: 40px; cursor: pointer; display: grid; place-items: center; }
.hd-search svg, .tools__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.spnav { display: none; }
@media (max-width: 1023px) { .hd-search input { width: 140px; } .gnav a { padding-left: 10px; padding-right: 10px; } .hd { gap: 16px; } }
@media (max-width: 860px) {
  .gnav, .hd-search { display: none; }
  .hd { min-height: 58px; }
  .site-logo__name { font-size: 22px; }
  .spnav { display: block; margin-left: auto; }
  .spnav summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 4px 8px 10px; font-weight: 700; color: var(--text-strong); font-size: 16px; }
  .spnav summary::-webkit-details-marker { display: none; }
  .spnav__bars, .spnav__bars::before, .spnav__bars::after { display: block; width: 22px; height: 2px; background: var(--text-strong); position: relative; transition: transform .2s; }
  .spnav__bars::before, .spnav__bars::after { content: ""; position: absolute; left: 0; }
  .spnav__bars::before { top: -7px; } .spnav__bars::after { top: 7px; }
  .spnav[open] .spnav__bars { background: transparent; }
  .spnav[open] .spnav__bars::before { transform: translateY(7px) rotate(45deg); }
  .spnav[open] .spnav__bars::after { transform: translateY(-7px) rotate(-45deg); }
  .spnav__panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 3px solid var(--red); box-shadow: 0 16px 24px -16px rgba(0, 0, 0, .35); padding: 14px 16px 18px; max-height: calc(100vh - 58px); overflow-y: auto; }
  .spnav__search { display: flex; gap: 8px; margin: 0 0 8px; }
  .spnav__search input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 10px 14px; border: 1px solid var(--line2); border-radius: 999px; }
  .spnav__search button { border: 0; background: var(--red); color: #fff; font: inherit; font-weight: 700; padding: 0 18px; border-radius: 999px; }
  .spnav__panel nav a { display: block; padding: 13px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text-strong); font-weight: 700; font-size: 17px; }
  .spnav__panel nav a[aria-current="page"] { color: var(--red); }
  .spnav__kinds { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 14px 0 0; }
  .spnav__kinds a { text-decoration: none; }
  html { scroll-padding-top: 72px; }
}
@media (prefers-reduced-motion: reduce) { .spnav__bars, .spnav__bars::before, .spnav__bars::after { transition: none; } }
/* New の帯（固定の頭の下・スクロールで流れる） */
.strip { background: #fff; border-bottom: 1px solid var(--line); }
.strip__in { width: min(var(--wrap), calc(100% - 32px)); margin: 0 auto; display: flex; overflow-x: auto; white-space: nowrap; padding: 10px 0; scrollbar-width: none; }
.strip__in::-webkit-scrollbar { display: none; }
.strip__k { font-family: var(--num); font-weight: 600; letter-spacing: .12em; color: var(--red); padding-right: 14px; font-size: 16px; }
.strip a { color: var(--text); text-decoration: none; font-weight: 700; font-size: 16px; padding: 0 14px; border-left: 1px solid var(--line2); }
.strip a:hover { color: var(--red); }

/* ---------- 表紙：黒い面にピックアップ（ポケモンずかん）→ 丸く白へ（Tudum） ---------- */
.hero { position: relative; background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .05) 0 7px, transparent 8px) 0 0 / 34px 34px, #f1f1f1; color: var(--text-strong); padding: 34px 0 110px; overflow: hidden; }
.hero::after { content: ""; position: absolute; left: -15%; right: -15%; bottom: -2px; height: 80px; background: var(--bg); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.hero__in { position: relative; z-index: 1; width: min(var(--wrap), calc(100% - 32px)); margin: 0 auto; }
.hero__k { text-align: center; margin: 0 0 6px; font-weight: 700; color: var(--red); letter-spacing: .1em; }
.hero__title { text-align: center; color: var(--text-strong); font-family: var(--heavy); font-weight: 700; font-size: clamp(28px, 5vw, 54px); letter-spacing: -.01em; line-height: 1.25; margin: 0 0 28px; }
.pick { position: relative; }
.pick__label { position: absolute; z-index: 3; left: 4%; top: -18px; margin: 0; }
.pick__label span { display: inline-flex; align-items: center; gap: 12px; background: #fff; color: var(--text-strong); border: 3px solid var(--text-strong); border-radius: 999px; padding: 4px 26px 4px 6px; font-family: var(--heavy); font-weight: 700; font-size: 22px; }
.pick__label span::before { content: ""; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(var(--red) 0 46%, var(--text-strong) 46% 54%, #fff 54%); box-shadow: inset 0 0 0 3px var(--text-strong); }
.pick__track { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .12)); display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.pick__track::-webkit-scrollbar { display: none; }
.pick__slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 46px 7% 54px; color: var(--text); background:
  #fff; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
.pick__vis { display: block; text-decoration: none; }
.pick__vis .bigvis { transform: rotate(-2deg); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .5); }
.pick__no { margin: 0; font-family: var(--num); font-size: 22px; font-weight: 500; color: var(--text-strong); }
.pick__name { font-family: var(--heavy); font-size: clamp(32px, 4.4vw, 52px); margin: 0 0 12px; line-height: 1.15; }
.pick__name a { text-decoration: none; }
.pick__name a:hover { text-decoration: underline; text-decoration-color: var(--red); }
.pick__lead { margin: 14px 0 4px; font-size: 17px; color: var(--text-strong); }
.pick__who { margin: 0; color: var(--text-sub); font-size: 16px; }
.pick__nav { position: absolute; top: 50%; width: 40px; height: 76px; margin-top: -38px; background: #fff; border: 1px solid var(--line2); display: grid; place-items: center; }
.pick__nav::before { content: ""; border: 9px solid transparent; }
.pick__nav--prev { left: 10px; } .pick__nav--prev::before { border-right-color: var(--red); margin-left: -9px; }
.pick__nav--next { right: 10px; } .pick__nav--next::before { border-left-color: var(--red); margin-right: -9px; }
.pick__dots { position: relative; z-index: 2; display: flex; justify-content: center; gap: 10px; margin: 18px 0 0; }
.pick__dots a { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--text-strong); background: #fff; }
.pick__dots a:first-child { background: var(--text-strong); }
@media (max-width: 760px) {
  .hero { padding-bottom: 70px; }
  .hero::after { height: 44px; }
  .pick__slide { grid-template-columns: 1fr; gap: 18px; padding: 40px 18px 46px; clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%); }
  .pick__nav { width: 30px; height: 56px; margin-top: -28px; }
  .pick__label span { font-size: 18px; padding-right: 18px; }
  .pick__label span::before { width: 24px; height: 24px; }
}

/* 大きな見出しの面（カードの絵の代わり・ポケモンの絵の位置） */
.bigvis { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; color: var(--kf); background:
  radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .16) 0 9px, transparent 10px) 0 0 / 44px 44px, var(--k); }
.bigvis::before { content: ""; position: absolute; height: 120%; aspect-ratio: 1; border-radius: 50%; border: 18px solid rgba(255, 255, 255, .14); }
.bigvis__no { position: absolute; left: 16px; top: 10px; font-family: var(--num); font-weight: 500; font-size: 18px; opacity: .85; }
.bigvis__word { position: relative; font-family: var(--heavy); font-weight: 700; line-height: 1.05; text-align: center; padding: 0 6%; text-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.bigvis__word--xl { font-size: clamp(64px, 9vw, 116px); }
.bigvis__word--l { font-size: clamp(46px, 6.4vw, 80px); }
.bigvis__word--m { font-size: clamp(32px, 4.4vw, 54px); }
.bigvis__word--s { font-size: clamp(24px, 3.2vw, 38px); }
.bigvis__kana { position: absolute; bottom: 12px; font-size: 16px; letter-spacing: .3em; opacity: .9; }

/* ---------- 本文の枠 ---------- */
.layout { width: min(var(--wrap), calc(100% - 32px)); margin: 0 auto; padding: 32px 0 96px; }
.site-main { min-width: 0; }
.crumbs { font-size: 16px; color: var(--text-sub); display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.crumbs a { text-decoration: none; color: var(--text-sub); }
.crumbs a:hover { text-decoration: underline; }

/* 大きな見出し（Tudum の「31 Days of Horror」） */
.big-h { font-family: var(--heavy); font-weight: 700; font-size: clamp(34px, 6vw, 60px); letter-spacing: -.01em; line-height: 1.1; text-align: center; margin: 8px 0 14px; }
.big-h small { display: block; font-family: var(--num); font-weight: 500; font-size: 17px; letter-spacing: .14em; color: var(--text-sub); margin-top: 8px; }
.big-h--s { font-size: clamp(26px, 4vw, 38px); }
.big-lead { text-align: center; margin: 0 auto 28px; }
.block { margin: 0 0 64px; }
.more { text-align: center; margin: 28px 0 0; }
.btn { display: inline-block; padding: 12px 26px; background: var(--red); color: #fff; text-decoration: none; font: inherit; font-size: 16px; font-weight: 700; border: 0; cursor: pointer; }
.btn:hover { background: #b81d23; color: #fff; }
.btn--big { padding: 15px 44px; font-size: 17px; border-radius: 999px; }
.btn--ghost { background: transparent !important; color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--line2); }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* 種類のアイコン（ポケモンのタイプの札） */
.kico { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; vertical-align: middle; }
.kico__sq { width: 40px; height: 40px; display: grid; place-items: center; }
.kico__sq svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kico__sq--all { background: var(--red); color: #fff; font-family: var(--num); font-weight: 600; font-size: 16px; }
.kico__l { font-size: 16px; color: var(--text-strong); line-height: 1.3; }

/* ---------- カード（ポケモンずかんの一覧） ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card a { display: block; text-decoration: none; color: var(--text); }
.card__vis { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; color: var(--kf); background:
  radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .16) 0 6px, transparent 7px) 0 0 / 28px 28px, var(--k); transition: transform .15s ease; }
.card__vis::before { content: ""; position: absolute; height: 130%; aspect-ratio: 1; border-radius: 50%; border: 10px solid rgba(255, 255, 255, .14); }
.card a:hover .card__vis { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .card__vis { transition: none; } .card a:hover .card__vis { transform: none; } }
.card__no { position: absolute; left: 8px; top: 4px; font-family: var(--num); font-weight: 500; font-size: 16px; opacity: .9; }
.card__word { position: relative; font-family: var(--heavy); font-weight: 700; line-height: 1.08; text-align: center; padding: 0 8%; text-shadow: 0 2px 0 rgba(0, 0, 0, .16); }
.card__word--xl { font-size: clamp(36px, 4.2vw, 56px); }
.card__word--l { font-size: clamp(26px, 2.8vw, 38px); }
.card__word--m { font-size: clamp(19px, 2vw, 27px); }
.card__word--s { font-size: clamp(15px, 1.5vw, 20px); }
.card__kico { position: absolute; right: 6px; bottom: 6px; }
.card__kico .kico__sq { width: 30px; height: 30px; background: rgba(255, 255, 255, .92) !important; color: var(--text-strong) !important; }
.card__kico .kico__sq svg { width: 19px; height: 19px; }
.card__sample { position: absolute; left: 8px; bottom: 6px; font-size: 16px; background: rgba(0, 0, 0, .55); color: #fff; padding: 0 6px; }
.card__name { display: block; margin-top: 8px; color: var(--text-strong); font-weight: 700; line-height: 1.45; }
.card__sub { display: block; font-size: 16px; color: var(--text-sub); line-height: 1.5; }
.card a:hover .card__name { text-decoration: underline; text-decoration-color: var(--red); }
@media (max-width: 1023px) { .cards, .cards--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cards, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .card__word--xl { font-size: 32px; } .card__word--l { font-size: 22px; } .card__word--m { font-size: 16px; } .card__word--s { font-size: 16px; } .card__no, .card__sample { font-size: 16px; } .card__kico .kico__sq { width: 24px; height: 24px; } .card__kico .kico__sq svg { width: 16px; height: 16px; } }

/* 種類の一覧（トップ） */
.types { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
.types a { display: grid; grid-template-columns: auto 1fr auto; gap: 0 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); }
.types .kico { grid-column: 1; grid-row: 1 / 3; }
.types b { grid-column: 2; grid-row: 1; }
.types b { color: var(--text-strong); font-size: 17px; }
.types span { grid-column: 2; grid-row: 2; font-size: 16px; color: var(--text-sub); line-height: 1.5; }
.types em { grid-column: 3; grid-row: 1 / 3; font-style: normal; font-size: 26px; color: var(--text-strong); }
.types a:hover b { text-decoration: underline; text-decoration-color: var(--red); }
@media (max-width: 1023px) { .types { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .types { grid-template-columns: 1fr; } }
.genline { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); line-height: 2.1; }
.genline:first-of-type { border-top: 1px solid var(--line); }
.genline b { display: inline-block; min-width: 4.5em; color: var(--text-strong); font-family: var(--heavy); }
.genline a { text-decoration: none; margin-right: 16px; white-space: nowrap; color: var(--text); }
.genline a:hover { text-decoration: underline; }
.genline small { font-family: var(--num); color: #fff; background: var(--red); padding: 0 6px; margin-left: 3px; }
.rules-band { background: var(--surface2); padding: 40px 6% 30px; }
.rules { margin: 0 0 16px; padding: 0 0 0 1.4em; }
.rules li { padding: 10px 0; border-bottom: 1px solid var(--line2); }
.rules b { display: block; color: var(--text-strong); }

/* ---------- 一覧の道具（ポケモンずかんの 表示順・検索） ---------- */
.list__head { margin-bottom: 10px; }
.tools { margin: 0 0 30px; }
.tools__bar { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 2px solid var(--text-strong); border-bottom: 1px solid var(--line); }
.tools__ico { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-strong); font-size: 16px; }
.tools__ico svg { stroke: var(--red); }
.tools__sort { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.tools__sort a { text-decoration: none; color: var(--text); font-size: 16px; padding: 4px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line2); }
.tools__sort a[aria-current="true"] { background: var(--red); color: #fff; box-shadow: none; }
.tools__search { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 460px; }
.tools__search input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 9px 14px; border: 1px solid var(--line2); background: var(--surface); color: var(--text-strong); border-radius: 999px; }
.tools__search input:focus { outline: 2px solid var(--text-strong); outline-offset: 0; }
.tools__search button { border: 0; background: var(--red); color: #fff; font: inherit; font-size: 16px; font-weight: 700; padding: 9px 18px; border-radius: 999px; cursor: pointer; }
.tools__types { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; }
.tools__types a { text-decoration: none; padding: 6px 6px 4px; min-width: 64px; display: grid; place-items: center; border-bottom: 3px solid transparent; }
.tools__types a[aria-current="true"] { border-bottom-color: var(--red); }
.tools__types a:not([aria-current="true"]) .kico__sq { opacity: .55; }
.tools__types a:hover .kico__sq { opacity: 1; }
.tools__now { margin: 12px 0 0; font-size: 16px; color: var(--text-sub); }
@media (max-width: 760px) { .tools__search { max-width: none; flex-basis: 100%; } .tools__types a { min-width: 52px; } }
.gyo { margin: 0 0 28px; }
.gyo__h { display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; border-bottom: 2px solid var(--text-strong); padding-bottom: 4px; }
.gyo__h b { font-family: var(--heavy); font-size: 34px; line-height: 1; }
.gyo__h small { color: var(--text-sub); }
.empty { padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 16px; margin: 0; color: var(--text-sub); }
.note { font-size: 16px; color: var(--text-sub); margin-top: 28px; }
.lead { font-size: 16px; }

/* ---------- 1件（ポケモンずかんの詳しいページ） ---------- */
.dex__pn { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0 0 22px; }
.dex__pn a, .dex__pn > span { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--surface2); text-decoration: none; color: var(--text-strong); font-weight: 700; min-height: 54px; }
.dex__pn a:hover { background: var(--red); color: #fff; }
.dex__pn > span { background: transparent; }
.dex__pn .num { font-weight: 500; color: var(--text-sub); }
.dex__pn a:hover .num { color: #cfcfcf; }
.dex__prev::before { content: "◀"; color: var(--red); font-size: 16px; }
.dex__next { justify-content: flex-end; }
.dex__next::after { content: "▶"; color: var(--red); font-size: 16px; }
.dex__head { text-align: center; margin: 0 0 22px; }
.dex__no { font-size: 24px; font-weight: 500; margin: 0; color: var(--text-strong); display: inline-flex; gap: 10px; align-items: center; }
.dex__title { font-family: var(--heavy); font-size: clamp(40px, 7vw, 72px); margin: 0; line-height: 1.15; }
.dex__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; margin: 0 0 40px; }
.dex__lead { font-size: 19px; color: var(--text-strong); line-height: 1.7; margin: 0 0 6px; font-weight: 700; }
.dex__hint { margin: 0 0 16px; }
.dex__dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.dex__dl > div { background: var(--surface2); padding: 10px 14px 12px; }
.dex__dl dt { font-size: 16px; color: var(--text-sub); }
.dex__dl dd { margin: 0; color: var(--text-strong); font-weight: 700; }
.dex__dl dd a { text-decoration: none; }
.dex__dl dd a:hover { text-decoration: underline; }
.dex__dl dd small { font-weight: 400; color: var(--text-sub); margin-left: 4px; }
.dex__dl dd .kico { flex-direction: row; gap: 8px; }
.dex__dl dd .kico__sq { width: 32px; height: 32px; }
.dex__dl dd .kico__sq svg { width: 20px; height: 20px; }
.dex__meta { margin: 12px 0 0; font-size: 16px; color: var(--text-sub); }
.dex__body { max-width: none; }
.dex .dex__rel { margin-top: 88px; }
.dex .dex__rel > h2 { border-bottom: 0; text-align: center; font-size: clamp(26px, 4vw, 38px); }
@media (max-width: 760px) { .dex__grid { grid-template-columns: 1fr; gap: 22px; } .dex__pn > span { background: transparent !important; }
.dex__pn a, .dex__pn > span { padding: 10px 12px; font-size: 16px; gap: 6px; flex-wrap: wrap; } }
.sec { margin: 0 0 40px; }
.sec__h, .sec > h2 { font-family: var(--heavy); font-size: 26px; margin: 0 0 14px; padding-bottom: 6px; border-bottom: 2px solid var(--text-strong); }
.sec > h2 small { font-family: var(--num); font-weight: 500; color: var(--text-sub); margin-left: 10px; }
.notice { background: var(--surface2); padding: 14px 18px; }
.also__h { margin: 20px 0 4px; font-weight: 700; color: var(--text-strong); }
.also { margin: 0; padding-left: 1.4em; }
.also li { margin: .3em 0; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.tags a { font-size: 16px; text-decoration: none; padding: 3px 12px; background: var(--surface2); color: var(--text-sub); border-radius: 999px; }
.tags a:hover { color: #fff; background: var(--red); }
.tags a::before { content: "#"; }
.tag { display: inline-block; font-size: 16px; line-height: 1.6; padding: 0 8px; background: var(--surface2); color: var(--text-sub); font-family: var(--sans); font-weight: 400; }
.tag--sample { background: #eee; color: #4b5563; }
.tag--gen, .tag--about { background: var(--red); color: #fff; }
.sources ol { margin: 0; padding-left: 1.4em; font-size: 16px; }
.sources li { margin: .4em 0; }

/* 切符（あの回） */
.tk { display: grid; grid-template-columns: 210px minmax(0, 1fr); background: #fff; color: var(--text-strong); border: 2px solid var(--text-strong); margin: 0 0 18px; position: relative; }
.tk::before, .tk::after { content: ""; position: absolute; left: 198px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 2px solid var(--text-strong); }
.tk::before { top: -12px; clip-path: inset(50% 0 0 0); } .tk::after { bottom: -12px; clip-path: inset(0 0 50% 0); }
.tk__l { padding: 20px 22px; border-right: 2px dashed var(--line2); display: flex; flex-direction: column; font-family: var(--num); }
.tk__y { font-size: 16px; letter-spacing: .2em; color: var(--text-sub); }
.tk__md { font-size: 54px; font-weight: 600; line-height: 1; letter-spacing: .01em; color: var(--red); }
.tk__w { font-size: 16px; letter-spacing: .12em; color: var(--text-sub); margin-top: 6px; }
.tk__r { padding: 20px 24px; display: flex; flex-direction: column; gap: 4px; justify-content: center; min-width: 0; }
.tk__k { font-size: 16px; letter-spacing: .12em; color: var(--red); font-weight: 700; }
.tk__k--no { color: var(--text-sub); }
.tk__t { font-size: 20px; font-weight: 700; color: var(--text-strong); line-height: 1.5; text-decoration: none; }
a.tk__t:hover { text-decoration: underline; }
.tk__ch { font-size: 16px; color: var(--text-sub); }
.tk--no { background: var(--surface2); border-color: var(--line2); }
@media (max-width: 560px) { .tk { grid-template-columns: 1fr; } .tk::before, .tk::after { display: none; } .tk__l { flex-direction: row; align-items: baseline; gap: 12px; border-right: 0; border-bottom: 2px dashed var(--line2); padding: 14px 16px; } .tk__md { font-size: 38px; } .tk__r { padding: 14px 16px 16px; } }

/* 付箋（ネタバレ） */
.spoiler { position: relative; background: var(--lamp); color: var(--lamp-ink); margin: 8px 0 0; box-shadow: 0 12px 24px -18px rgba(0, 0, 0, .55); }
.spoiler::before { content: ""; position: absolute; left: 50%; top: -8px; width: 92px; height: 18px; transform: translateX(-50%) rotate(-1.5deg); background: rgba(255, 255, 255, .6); }
.spoiler summary { list-style: none; cursor: pointer; padding: 22px 22px 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.spoiler summary::-webkit-details-marker { display: none; }
.spoiler__btn { font-family: var(--heavy); font-weight: 700; font-size: 24px; color: var(--text-strong); }
.spoiler__btn::after { content: "（ネタバレあり）"; font-family: var(--sans); font-size: 16px; font-weight: 400; margin-left: 6px; }
.spoiler[open] .spoiler__btn::after { content: "（閉じる）"; }
.spoiler__warn { font-size: 16px; }
.spoiler[open] .spoiler__warn { display: none; }
.spoiler__body { padding: 0 22px 18px; color: #2a2300; }
.spoiler[open] .spoiler__body { animation: peel .35s ease-out both; }
@keyframes peel { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .spoiler[open] .spoiler__body { animation: none; } }
.spoiler__body p { margin: 0 0 1em; }
.spoiler__note { font-size: 16px; color: var(--lamp-ink); margin: 0; }
.spoiler__note a { color: var(--lamp-ink); }
.spoiler summary:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -2px; }

/* 公式 YouTube（押すまで読まない） */
.yt { margin: 0; }
.yt__ph { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.yt__ph img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
.yt__play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); }   /* 2026-10-24 赤い YouTube のマークをやめ、白い半透明の丸い ▶ に */
.yt__play svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
.yt__frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.yt__cap { margin: 8px 0 0; font-size: 16px; line-height: 1.7; }
.yt__k { display: inline-block; margin-right: 8px; color: var(--yt); font-weight: 700; }
.yt__cap small { display: block; color: var(--text-sub); }
.yt__note { font-size: 16px; color: var(--text-sub); margin: 10px 0 0; }

/* ---------- メンバー ---------- */
/* 右の列が無いページは本文も全幅（2026-10-20 カツ「基本サイドバー無い場合はフルワイドで」） */
.nart, .nart--wide { max-width: none; }
.nart__head { margin: 0 0 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.nart__k { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.nart__title { font-family: var(--heavy); font-size: clamp(38px, 7vw, 66px); line-height: 1.15; margin: 0 0 12px; }
.nart__title small { display: inline-block; font-family: var(--sans); font-size: 17px; font-weight: 400; color: var(--text-sub); margin-left: 12px; vertical-align: .5em; }
.nart__lead { font-size: 18px; color: var(--text-strong); margin: 0 0 8px; font-weight: 700; }
.nart__meta { margin: 10px 0 0; font-size: 16px; color: var(--text-sub); }
.memgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 24px; border-top: 1px solid var(--line); }
.memgrid a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); line-height: 1.6; }
.memgrid b { display: block; color: var(--text-strong); font-size: 20px; font-family: var(--heavy); }
.memgrid small { display: block; color: var(--text-sub); }
.memgrid__nick { display: block; font-size: 16px; color: var(--red); font-weight: 700; }
.memgrid em { display: block; font-style: normal; font-size: 16px; color: var(--text-sub); }
.memgrid a:hover b { text-decoration: underline; text-decoration-color: var(--red); }
@media (max-width: 1023px) { .memgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .memgrid { grid-template-columns: 1fr 1fr; gap: 0 16px; } }
.nicks { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.nicks a, .nicks span { display: inline-block; padding: 6px 16px; background: var(--lamp); color: var(--lamp-ink); text-decoration: none; font-family: var(--heavy); font-weight: 700; font-size: 20px; }
.nicks span { background: var(--surface2); color: var(--text-sub); font-family: var(--sans); font-weight: 400; font-size: 16px; }
.nicks a:hover { background: var(--red); color: #fff; }

/* ---------- 年表（配信回） ---------- */
.tl { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 2px solid var(--line2); }
.tl__item { position: relative; padding: 10px 0 14px; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.tl__item::before { content: ""; position: absolute; left: -35px; top: 18px; width: 12px; height: 12px; background: var(--bg); border: 2px solid var(--line2); border-radius: 50%; }
.tl__item.has-neta::before { background: var(--red); border-color: var(--red); }
.tl__date { font-family: var(--num); color: var(--text-sub); font-size: 16px; line-height: 1.4; padding-top: 3px; }
.tl__date b { display: block; font-weight: 500; font-size: 22px; color: var(--text-strong); }
.tl__title { text-decoration: none; color: var(--text-strong); font-weight: 700; }
.tl__title:hover { text-decoration: underline; text-decoration-color: var(--red); }
.tl__title::after { content: "YouTube"; font-family: var(--num); font-size: 16px; font-weight: 500; color: var(--yt); margin-left: 8px; }
.tl__neta { margin: 4px 0 0; font-size: 16px; line-height: 2; }
.tl__neta a { text-decoration: none; }
.tl__year { margin: 32px 0 6px; }
.tl__year b { font-family: var(--num); font-weight: 600; font-size: 40px; color: var(--text-strong); line-height: 1; }
.tl__year small { margin-left: 12px; color: var(--text-sub); }
@media (max-width: 560px) { .tl { padding-left: 18px; } .tl__item { grid-template-columns: 1fr; gap: 2px; } .tl__item::before { left: -25px; } .tl__date { display: flex; gap: 8px; align-items: baseline; } .tl__date b { font-size: 17px; } }

/* ---------- 文章・フォーム ---------- */
.prose h2 { margin-top: 40px; font-family: var(--heavy); font-size: 26px; border-bottom: 2px solid var(--text-strong); padding-bottom: 6px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: .4em 0; }
.form .field { margin: 20px 0; }
.form label { display: block; font-weight: 700; color: var(--text-strong); }
.form input, .form select, .form textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line2); background: var(--surface); color: var(--text-strong); border-radius: 0; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--text-strong); outline-offset: -2px; }
.field__help { color: var(--text-sub); font-size: 16px; margin: 4px 0 0; }
.field__err { color: #a33a2a; font-weight: 700; margin: 4px 0 0; }
.req { font-size: 16px; color: #a33a2a; margin-left: 6px; font-weight: 400; }
.opt { font-size: 16px; color: var(--text-sub); margin-left: 6px; font-weight: 400; }
.hp { position: absolute; left: -9999px; }
.alert { background: var(--surface2); border-left: 3px solid var(--text-strong); padding: 14px 18px; }
.alert--error { border-left-color: #a33a2a; }
.form__privacy { font-size: 16px; color: var(--text-sub); }

/* ---------- コメント（bin/comments-lib.php の cmRender が出す） ---------- */
.cm { margin: 56px 0 0; border-top: 2px solid var(--text-strong); padding-top: 12px; }
.cm-h { font-family: var(--heavy); font-size: 24px; margin: 0 0 16px; }
.cm-msg { padding: 12px 16px; background: var(--lamp-bg); color: var(--text-strong); font-size: 16px; }
.cm-list { list-style: none; margin: 0 0 24px; padding: 0; }
.cm-item { padding: 16px 0; border-top: 1px solid var(--line); }
.cm-meta { display: flex; gap: 10px; align-items: baseline; font-size: 16px; }
.cm-meta time, .cm-none, .cm-note { color: var(--text-sub); font-size: 16px; }
.cm-body { margin: 6px 0 0; font-size: 16px; line-height: 1.9; }
.cm-form { display: flex; flex-direction: column; gap: 14px; padding: 20px 0 0; border-top: 1px solid var(--line); }
.cm-l { display: flex; flex-direction: column; gap: 6px; font-size: 16px; font-weight: 700; color: var(--text-strong); }
.cm-l input, .cm-l textarea { font: inherit; font-size: 16px; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line2); background: var(--surface); color: var(--text-strong); width: 100%; }
.cm-note { margin: 0; }
.cm-btn { align-self: flex-start; border: 0; padding: 12px 30px; font: inherit; font-size: 16px; font-weight: 700; background: var(--red); color: #fff; cursor: pointer; min-height: 44px; border-radius: 999px; }
.cm-btn:hover { background: #b81d23; }
.cm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 足（2026-10-20 整理：上段＝ロゴとメニュー／中段＝4列／下段＝断り書き） ---------- */
.site-foot { background: var(--surface2); color: var(--text); border-top: 4px solid var(--red); padding: 40px 0 28px; font-size: 16px; }
.site-foot > * { width: min(var(--wrap), calc(100% - 32px)); margin-left: auto; margin-right: auto; }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-bottom: 24px; border-bottom: 1px solid var(--line2); }
.foot-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-strong); }
.foot-logo b { display: block; font-family: var(--heavy); font-size: 24px; line-height: 1.2; }
.foot-logo small { display: block; color: var(--text-sub); }
.foot-gnav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.foot-gnav a { color: var(--text-strong); text-decoration: none; font-weight: 700; font-size: 16px; }
.foot-gnav a:hover { color: var(--red); }
.foot-map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 28px 0; }
.foot-map__cat { font-weight: 700; color: var(--text-strong); margin: 0 0 8px; font-family: var(--heavy); font-size: 17px; }
.foot-map ul { list-style: none; margin: 0; padding: 0; }
.foot-map li { margin: 5px 0; }
.foot-map li a { text-decoration: none; color: var(--text); }
.foot-map li a:hover { text-decoration: underline; color: var(--text-strong); }
.foot-bottom { border-top: 1px solid var(--line2); padding-top: 20px; }
.foot-notice { line-height: 1.8; margin: 0 0 12px; color: var(--text-sub); }
.site-foot__copy { color: var(--text-sub); margin: 0; font-family: var(--num); letter-spacing: .08em; }
@media (max-width: 760px) { .foot-map { grid-template-columns: 1fr 1fr; gap: 24px 16px; } .foot-gnav { gap: 6px 18px; } }
.totop { position: fixed; right: 16px; bottom: 16px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--red); color: #fff; border: 0; border-radius: 50%; z-index: 9; }
.totop[hidden] { display: none; }
.ad-slot { margin: 24px 0; min-height: 90px; }

/* ---------- 2026-10-20 4回目：サムネイルのカード・メンバーのカード・期の飛び先・準備中・ピックアップの印 ---------- */
.card__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card--thumb .card__vis::before { display: none; }
.card--thumb .card__no { background: rgba(0, 0, 0, .6); color: #fff; padding: 0 6px; left: 0; top: 0; opacity: 1; }
.card__word--tag { position: absolute; left: 0; bottom: 0; font-size: 17px; padding: 4px 10px; background: var(--k); color: var(--kf); text-shadow: none; max-width: 80%; text-align: left; line-height: 1.4; }
.card__count { position: absolute; right: 8px; bottom: 6px; font-size: 16px; background: rgba(255, 255, 255, .92); color: var(--text-strong); padding: 0 8px; }
.card__count b { font-family: var(--num); font-size: 18px; margin-right: 2px; }
.card--member .card__word { text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.genjump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 34px; }
.genjump a { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 20px; border-radius: 999px; background: var(--k); color: #fff; text-decoration: none; font-family: var(--heavy); font-weight: 700; font-size: 18px; }
.genjump small { font-family: var(--sans); font-weight: 400; font-size: 16px; opacity: .9; }
.genjump a:hover { filter: brightness(1.12); }
.soon { text-align: center; padding: 48px 6%; background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .05) 0 7px, transparent 8px) 0 0 / 34px 34px, var(--surface2); }
.soon__k { color: var(--red); font-weight: 600; letter-spacing: .2em; margin: 0 0 4px; }
.soon__t { font-family: var(--heavy); font-size: clamp(24px, 3.6vw, 34px); font-weight: 700; color: var(--text-strong); margin: 0 0 10px; }
.pick__dots a:first-child { background: #fff; }
.pick__dots a.is-on, .pick__dots a[aria-current="true"] { background: var(--text-strong); }
.card--thumb .card__sample { left: auto; right: 6px; top: 6px; bottom: auto; }
/* ---------- シングル（2026-10-20） ---------- */
.card__vis--single, .bigvis--single { color: var(--text-strong); background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .05) 0 6px, transparent 7px) 0 0 / 28px 28px, #f1f1f1; box-shadow: inset 0 -5px 0 var(--red); }
.card__vis--single::before, .bigvis--single::before { border-color: rgba(227, 36, 43, .12); }
.card__ord { position: absolute; left: 10px; top: 4px; font-family: var(--num); font-weight: 700; font-size: clamp(26px, 3vw, 40px); color: var(--red); line-height: 1.1; letter-spacing: -.01em; }
.card__stitle { position: relative; font-family: var(--heavy); font-weight: 700; text-align: center; line-height: 1.2; padding: 26px 8% 0; }
.card__stitle--l { font-size: clamp(20px, 2.2vw, 28px); } .card__stitle--m { font-size: clamp(16px, 1.7vw, 21px); } .card__stitle--s { font-size: 16px; }
.bigvis__ord { position: absolute; left: 18px; top: 8px; font-family: var(--num); font-weight: 700; font-size: clamp(44px, 6vw, 80px); color: var(--red); line-height: 1; }
.bigvis__stitle { position: relative; font-family: var(--heavy); font-weight: 700; text-align: center; padding: 30px 8% 0; line-height: 1.2; }
.bigvis__stitle--l { font-size: clamp(34px, 4.4vw, 56px); } .bigvis__stitle--m { font-size: clamp(26px, 3.2vw, 40px); } .bigvis__stitle--s { font-size: clamp(20px, 2.4vw, 30px); }
.bigvis--single .bigvis__kana { color: var(--text-sub); letter-spacing: .16em; font-family: var(--num); }
/* YouTube の埋め込みはどこでも同じ大きさ＝横2列の1枠（スマホは1列）（2026-10-20 カツ「Youtubeの表示のサイズは全て統一で」） */
.ytgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }   /* 2026-10-20 カツ「サムネイル画像はもう少し小さくても」＝横3列 */
@media (max-width: 1023px) { .ytgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ytgrid { grid-template-columns: 1fr; } .card__ord { font-size: 24px; } .card__stitle { padding-top: 20px; } }
.tl__single { display: inline-block; margin-left: 10px; font-size: 16px; font-weight: 700; color: var(--red); text-decoration: none; padding: 0 8px; box-shadow: inset 0 0 0 1px var(--red); }
.tl__single:hover { background: var(--red); color: #fff; }
@media (max-width: 760px) { .card--single .card__count { display: none; } }
.tl__single--sb { color: #fff; background: var(--red); }
.tl__no { display: block; font-family: var(--num); font-weight: 600; color: var(--red); }
@media (max-width: 560px) { .tl__no { display: inline; margin-left: 6px; } }
/* 曜日「10.18 (日)」（2026-10-20） */
.wd { font-family: var(--sans); font-weight: 700; font-size: .5em; margin-left: .3em; letter-spacing: 0; vertical-align: .15em; }
.tl__date .wd { font-size: 16px; }
/* ---------- YouTube のサムネイル（2026-10-20 カツ「サムネイル画像を全て表示したい」） ---------- */
.card--ep .card__vis { background: #111; }
.card--ep .card__vis::before { display: none; }
.card--ep .card__no { background: var(--red); color: #fff; padding: 0 8px; left: 0; top: 0; opacity: 1; font-size: 16px; }
.card__play { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 24px; background: var(--yt); border-radius: 6px; opacity: .92; }
.card__play::after { content: ""; position: absolute; left: 13px; top: 6px; border: 6px solid transparent; border-left: 10px solid #fff; border-right: 0; }
.card--ep a:hover .card__play { opacity: 1; }
.card__date { display: flex; align-items: baseline; gap: 2px; margin-top: 8px; color: var(--text-sub); font-size: 16px; }
.card__date b { font-family: var(--num); font-weight: 600; font-size: 18px; color: var(--text-strong); }
.card__date .wd { font-size: 16px; margin-right: 6px; }
.card--ep .card__name { margin-top: 2px; }
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; font-size: 16px; line-height: 1.6; }
.card__tags .tl__single { margin-left: 0; }
.tl__neta-tag { text-decoration: none; font-weight: 700; color: var(--text-strong); }
.card--ep.has-neta .card__vis { box-shadow: 0 0 0 3px var(--lamp); }
.card--single.card--thumb .card__vis { box-shadow: inset 0 -5px 0 var(--red); }
.card--single.card--thumb .card__vis::before { display: none; }
.card--single.card--thumb .card__ord { top: 0; left: 0; background: var(--red); color: #fff; padding: 0 10px; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.3; }
.bigvis--thumb { background: #111; }
.bigvis--thumb::before { display: none; }
.bigvis__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bigvis--thumb .bigvis__ord { left: 0; top: 0; background: var(--red); color: #fff; padding: 2px 16px; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.2; }
.tl__single.tl__single--sb, .card__tags .tl__single--sb { color: #fff; background: var(--red); }
/* 一覧の終わりの断り（2026-10-20） */
.arcend { margin: 40px 0 0; padding: 32px 6% 26px; text-align: center; border-top: 3px solid var(--red); background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .05) 0 6px, transparent 7px) 0 0 / 28px 28px, var(--surface2); }
.arcend__k { margin: 0 0 4px; color: var(--red); font-weight: 600; letter-spacing: .2em; }
.arcend__t { margin: 0 0 12px; font-family: var(--heavy); font-weight: 700; font-size: clamp(22px, 3vw, 30px); color: var(--text-strong); }
.arcend p { margin-left: auto; margin-right: auto; max-width: 52em; }
.arcend__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 14px 0 0; font-weight: 700; }
/* 2026-10-20 カツ「フォントサイズが見にくい」＝本文 17px・補足 16px（15px をやめた） */
.yt__cap, .yt__note, .note, .card__sub, .crumbs { color: var(--text); }
/* ---------- Blu-ray（2026-10-20） ---------- */
.bd { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.bd__item { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.bd__face { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; color: var(--text-strong); background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .05) 0 6px, transparent 7px) 0 0 / 26px 26px, #f1f1f1; box-shadow: inset 0 -5px 0 #1f5fbf; }
.bd__code { position: absolute; left: 0; top: 0; background: #1f5fbf; color: #fff; padding: 0 8px; font-weight: 600; font-size: 16px; }
.bd__label { position: absolute; right: 8px; bottom: 8px; color: #1f5fbf; font-weight: 700; font-size: 16px; letter-spacing: .08em; }
.bd__title { font-family: var(--heavy); font-weight: 700; font-size: 22px; text-align: center; padding: 0 8%; line-height: 1.25; }
.bd__name { margin: 0; font-weight: 700; font-size: 19px; color: var(--text-strong); }
.bd__meta { margin: 2px 0 8px; color: var(--text); font-size: 16px; }
.bd__eps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.bd__ep { font-family: var(--num); font-weight: 600; font-size: 16px; padding: 0 8px; background: var(--surface2); color: var(--text-strong); text-decoration: none; }
.bd__ep.is-yt { background: var(--red); color: #fff; }
.bd__links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; font-weight: 700; }
@media (max-width: 760px) { .bd__item { grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: start; } .bd__title { display: none; } .bd__label { display: block; font-size: 15px; } .bd__code { font-size: 15px; } .bd__name { font-size: 17px; } }
.tl__single--bd { color: #1f5fbf; box-shadow: inset 0 0 0 1px #1f5fbf; }
.tl__single--bd:hover { background: #1f5fbf; color: #fff; }
.arcend__btn { margin-left: 8px; }
/* もしもアフィリエイトの「かんたんリンク」・PR（2026-10-25 楽天ブックスのジャケットから替えた）。カードの中の見た目はもしもの物のまま（コードを改変しない）。ここで決めるのは置き場所と幅だけ */
.pr { display: inline-block; font-family: var(--num); font-weight: 700; font-size: 15px; line-height: 1.4; padding: 0 6px; margin: 0 6px; color: var(--text-sub); box-shadow: inset 0 0 0 1px var(--line2); vertical-align: .1em; }
.pr-note { text-align: center; color: var(--text); font-size: 16px; margin: -12px auto 24px; }
.bd__item--ad { grid-template-columns: 430px minmax(0, 1fr); }
.bd__ad { min-width: 0; }
.bd__adk { margin: 0 0 6px; font-size: 15px; color: var(--text-sub); }
.bd__adk .pr { margin-left: 0; }
@media (max-width: 1000px) { .bd__item--ad { grid-template-columns: minmax(0, 1fr); } .bd__item--ad .bd__info { order: -1; } }
/* New の帯＝サイト全体の新着（2026-10-20） */
.strip__d { color: var(--text-sub); font-weight: 600; margin-right: 6px; }
.strip__kind { font-size: 15px; font-weight: 700; color: var(--red); margin-right: 6px; }
/* 文章が乗る面は無地（2026-10-20 カツ「背景が見にくい」）。水玉は文章の無いカード・大きな面だけ */
.arcend, .soon { background: #f4f4f4; }
.hero { background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .03) 0 7px, transparent 8px) 0 0 / 34px 34px, #f4f4f4; }
/* メンバーの画像＝公式 YouTube のサムネイル（2026-10-20） */
.card--member.card--thumb .card__no { background: var(--k); color: #fff; padding: 0 8px; left: 0; top: 0; opacity: 1; }
.card--member .card__word--tag { background: var(--k); color: #fff; }
.mvis { margin: 0; }
.mvis .bigvis { display: grid; text-decoration: none; }
.mvis .bigvis__no { left: 0; top: 0; background: var(--k); color: #fff; padding: 2px 12px; opacity: 1; z-index: 1; }
.mvis__cap { margin: 8px 0 0; font-size: 16px; line-height: 1.7; }
.mvis__cap small { display: block; color: var(--text); }
.photo-note { margin: 0 0 30px; padding: 18px 22px; background: #f4f4f4; border-left: 4px solid var(--red); }
.photo-note__h { margin: 0 0 6px; font-weight: 700; color: var(--text-strong); }
.photo-note p { margin: 0 0 .6em; }
.photo-note p:last-child { margin-bottom: 0; }
/* 説明は箱に入れない・左の色の帯を付けない（決まり：feedback-no-boxes-rounded）＝上下の線1本ずつと余白 */
.photo-note { background: none; border-left: 0; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); padding: 16px 0; }
.photo-note__h { color: var(--red); }
/* 現役／卒業生のタブ（2026-10-20） */
.mtabs { display: flex; justify-content: center; gap: 0; margin: 0 0 26px; border-bottom: 2px solid var(--line); }
.mtabs a { padding: 10px 28px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 18px; margin-bottom: -2px; border-bottom: 3px solid transparent; }
.mtabs a small { font-family: var(--num); font-weight: 500; margin-left: 6px; color: var(--text-sub); }
.mtabs a[aria-current="page"] { color: var(--text-strong); border-bottom-color: var(--red); }
.tag--grad { margin-left: 10px; background: var(--surface2); color: var(--text-strong); }
/* ネタのアイキャッチ（生成した絵・2026-10-20） */
.bigvis--ec::before { display: none; }
.bigvis--ec .bigvis__no { left: 0; top: 0; background: var(--k); color: var(--kf); padding: 2px 14px; opacity: 1; z-index: 1; }
.bigvis__tag { position: absolute; left: 0; bottom: 0; z-index: 1; background: var(--k); color: var(--kf); padding: 4px 18px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; line-height: 1.3; }
/* 記事の題名＝問いの形（長いので一回り小さく・2026-10-20） */
.dex__title--q { font-size: clamp(28px, 4.2vw, 46px); line-height: 1.35; max-width: 22em; margin-inline: auto; text-wrap: balance; }
.pick__name--q { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.35; text-wrap: balance; }
/* 複数の回（企画の各回）は2列（2026-10-20） */
.ytgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .ytgrid--2 { grid-template-columns: 1fr; } }
/* 日本語の題名を言葉の区切りで折る（対応していないブラウザはふつうに折る・2026-10-20） */
.dex__title--q, .pick__name--q, .card__name { word-break: auto-phrase; }
/* 切符の日付は曜日で折らない（2026-10-20 小吉で「04.03 (」「日)」に折れた） */
.tk__md { white-space: nowrap; }
.tk__md .wd { font-size: .4em; margin-left: 4px; }
/* ♥ 好きな回（2026-10-20） */
.like { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 14px; border: 2px solid var(--red); background: #fff; color: var(--red); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; border-radius: 999px; }
.like__h { font-size: 17px; line-height: 1; }
.like__n { font-family: var(--num); font-weight: 600; }
.like[aria-pressed="true"] { background: var(--red); color: #fff; }
.like:disabled { opacity: .6; }
.card--ep .like { margin: 8px 0 0; }
.yt__cap .like { display: inline-flex; }
/* ランキング */
.rank-list .card { position: relative; }
.rank-list .card::before { content: attr(data-rank); position: absolute; z-index: 2; left: -6px; top: -10px; min-width: 44px; height: 44px; padding: 0 6px; display: grid; place-items: center; background: var(--text-strong); color: #fff; font-family: var(--num); font-size: 22px; font-weight: 700; }
.rank-list .card[data-rank="1"]::before { background: #c9a227; }
.rank-list .card[data-rank="2"]::before { background: #8f99a3; }
.rank-list .card[data-rank="3"]::before { background: #a8683a; }
.rank-n { display: block; margin-top: 4px; color: var(--red); font-weight: 700; }
/* ---------- 2026-10-24 権利まわりの直し（非公式の断り・YouTube のロゴ・管理人の説明文） ---------- */
.fanbar { margin: 0; background: var(--surface2); border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--text-strong); }
.fanbar__in { display: block; width: min(var(--wrap), calc(100% - 32px)); margin: 0 auto; padding: 6px 0; }
.fanbar a { margin-left: .6em; color: var(--text-strong); font-weight: 700; text-underline-offset: 3px; }
.site-logo__k { font-family: var(--sans); font-weight: 700; letter-spacing: .08em; }
/* 2026-10-24 カツ「下の大きな YouTube のロゴを消して、動画の右下に」＝動画の画像の右下に小さく重ねる。再生中（.is-on）は YouTube のプレーヤーの全画面ボタンとぶつかるので隠す */
.yt__media { position: relative; }
.yt__brand { position: absolute; right: 8px; bottom: 8px; display: block; line-height: 0; background: rgba(255, 255, 255, .92); padding: 1px 2px; border-radius: 4px; }
.yt__brand img { display: block; width: auto; height: 34px; }
.yt.is-on .yt__brand { display: none; }
.pnote p { margin: 0 0 .8em; }

/* 2026-10-24 メンバー一覧のカードも動画の画像（1人のページと同じ見た目）。▶ は真ん中・YouTube のロゴは右下・ネタの数は右上 */
.card--mv .yt__play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); z-index: 1; }
.card--mv .yt__play svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
.card--mv .card__count--top { top: 6px; bottom: auto; }
.card__yt { position: absolute; right: 6px; bottom: 6px; line-height: 0; background: rgba(255, 255, 255, .92); padding: 1px 2px; border-radius: 4px; }
.card__yt img { display: block; width: auto; height: 22px; }

@media (max-width: 600px) { .card--mv .card__word--tag { display: none; } .card__yt img { height: 18px; } .card--mv .yt__play { width: 38px; height: 38px; } }   /* スマホは名前の帯を外す（名前はカードの下にある） */

/* 管理人のひとこと（2026-11-03・ネタバレなし・見える所。上下の線だけ） */
.mycomment { border-top: 2px solid var(--text-strong); border-bottom: 1px solid var(--line2); padding: 14px 0 6px; margin: 20px 0 8px; }
.mycomment__h { font-family: var(--heavy); font-weight: 700; font-size: 20px; color: var(--text-strong); margin: 0 0 8px; }
.mycomment p { margin: 0 0 .9em; }
.mycomment__prep { font-size: 16px; color: var(--text); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); padding: 10px 0; margin: 20px 0 8px; }
.sources__more summary { cursor: pointer; font-size: 16px; padding: 4px 0; }

/* 問い合わせの確認画面（相互リンクの依頼・2026-11-05） */
.confirm { display: grid; grid-template-columns: 9em 1fr; gap: 8px 16px; margin: 0 0 20px; }
.confirm dt { font-weight: 700; }
.confirm dd { margin: 0; overflow-wrap: anywhere; }
.confirm__msg { white-space: normal; }
.alert p { margin: 0 0 8px; }
.alert p:last-child { margin-bottom: 0; }
.alert + .block__title { margin-top: 28px; }
@media (max-width: 600px) { .confirm { grid-template-columns: 1fr; gap: 2px; } .confirm dd { margin-bottom: 10px; } }


/* ================= 恐竜の部品（2026-11-05） ================= */
.strip__k { font-family: var(--num); }
/* 種のカード：今の復元画は白地の絵なので、明るい灰色の面に置いて全身を見せる */
.card--sp .card__vis { background: #f4f4f4; }
.card--sp .card__thumb { object-fit: contain; padding: 10px 10px 34px; mix-blend-mode: multiply; }
.card--sp .card__no { background: var(--k); color: var(--kf); }
.card--sp .card__word--tag { font-size: 18px; }
/* 大きな面：昔と今を左右に */
.bigvis--sp { display: grid; grid-template-columns: 1fr 1fr; place-items: stretch; background: #f4f4f4; }
.bigvis--sp::before { display: none; }
.bigvis__half { position: relative; display: block; overflow: hidden; min-height: 0; }
.bigvis__half img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bigvis__half--now { background: #fff; }
.bigvis__half--now img { object-fit: contain; padding: 10px; }
.bigvis__y { position: absolute; left: 0; bottom: 0; background: var(--text-strong); color: #fff; font-family: var(--num); font-weight: 600; font-size: clamp(18px, 2vw, 26px); padding: 0 12px; line-height: 1.5; }
.bigvis__y--now { left: auto; right: 0; background: var(--red); font-family: var(--heavy); }
.bigvis--sp .bigvis__no { left: 0; top: 0; background: var(--k); color: var(--kf); padding: 2px 12px; opacity: 1; z-index: 1; }
/* 昔の姿と今の姿（作者つき） */
.tn2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tn2__fig { margin: 0; }
.tn2__img { position: relative; aspect-ratio: 4 / 3; background: #f4f4f4; overflow: hidden; }
.tn2__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn2__img--now { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.tn2__img--now img { object-fit: contain; padding: 14px; }
.tn2__y { position: absolute; left: 0; top: 0; background: var(--text-strong); color: #fff; font-family: var(--num); font-weight: 600; font-size: 24px; padding: 0 14px; line-height: 1.5; }
.tn2__y--now { background: var(--red); font-family: var(--heavy); }
.tn2__fig figcaption { margin-top: 8px; font-size: 16px; line-height: 1.7; color: var(--text); }
@media (max-width: 760px) { .tn2 { grid-template-columns: 1fr; gap: 26px; } }
/* 作者表示 */
.cr { display: block; font-size: 15px; line-height: 1.6; color: var(--text-sub); }
.cr a { color: var(--text-sub); }
.ref { font-family: var(--num); font-size: 16px; text-decoration: none; color: var(--red); white-space: nowrap; margin-left: 2px; }
/* 変わったところ（昔＝灰色・今＝赤の札） */
.diff { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.diff li { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 700; color: var(--text-strong); }
.diff__m { display: grid; place-items: center; height: 32px; font-size: 16px; font-weight: 700; color: #fff; background: var(--red); }
.diff__rm { color: var(--text-sub) !important; font-weight: 400 !important; }
.diff__rm .diff__m { background: #8b8f96; }
/* 姿の更新履歴（ネタずかんの年表 .tl の中に、見出し・本文・絵） */
.tl__title--sp::after { content: none; }
.tl__sp { display: inline-block; margin-right: 10px; font-size: 16px; font-weight: 700; color: var(--red); }
@media (min-width: 561px) { .tl__item { grid-template-columns: 90px minmax(0, 1fr); } }
/* スマホ（2026-11-05）：名前の長いロゴでメニューの字が折れる・札の名前が折れる・送りのボタンが題名に重なる */
@media (max-width: 860px) { .site-logo__name { font-size: 20px; } .site-logo__k { font-size: 15px; } }
@media (max-width: 420px) { .spnav__l { display: none; } }
@media (max-width: 760px) { .card--sp .card__word--tag { font-size: 15px; white-space: nowrap; max-width: 100%; } .pick__nav { top: 120px; } }
.tl__h { font-family: var(--heavy); font-size: 21px; margin: 0 0 4px; color: var(--text-strong); }
.tl__txt { margin: 0; }
.tl__fig { margin: 12px 0 0; max-width: 520px; }
.tl__fig img { display: block; width: auto; max-width: 100%; max-height: 420px; }
.tl__fig figcaption { margin-top: 6px; font-size: 16px; line-height: 1.7; }
.tl__see { margin: 6px 0 0; font-size: 16px; }
.tl__item { scroll-margin-top: 90px; }
.dex .tl__date b { font-size: 26px; }
.dex__dl dd i { font-family: Georgia, serif; }
.mycomment p:not(.mycomment__h) { margin: 0 0 .9em; }

/* ───── トップの表紙＝ナショナルジオグラフィック日本版の記事一覧の形（2026-11-05 カツ「こういう記事一覧をだしたいだけ」）─────
   暗い地・1件目は大きな絵・残りは2列・題名は絵の下に白で・左上に「新着」。下の本文はネタずかんの形のまま */
.ng { background: #1f1f1f; color: #fff; padding: 36px 0 52px; }
.ng__in { width: min(1000px, calc(100% - 32px)); margin: 0 auto; }
.ng__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 36px 28px; }
.ng__item--big { grid-column: 1 / -1; }
.ng__item a { display: block; color: #fff; text-decoration: none; }
.ng__img { position: relative; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 10; background: #fff; overflow: hidden; }
.ng__item--big .ng__img { aspect-ratio: 2 / 1; }
.ng__half { position: relative; display: block; min-width: 0; overflow: hidden; }
.ng__half img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.ng__half--now img { object-fit: contain; padding: 5%; }
.ng__item a:hover .ng__half img { transform: scale(1.03); }
.ng__y { position: absolute; bottom: 10px; left: 10px; background: #000; color: #fff; font-family: var(--num); font-size: 16px; line-height: 1; padding: 6px 9px; }
.ng__y--now { background: var(--red); font-family: var(--heavy); font-weight: 700; }
.ng__new { position: absolute; top: 0; left: 0; background: var(--red); color: #fff; font-size: 15px; font-weight: 700; line-height: 1; padding: 8px 10px; }
.ng__title { display: block; margin-top: 12px; font-size: 18px; line-height: 1.55; font-weight: 700; word-break: auto-phrase; }
.ng__item--big .ng__title { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.45; }
.ng__item a:hover .ng__title { text-decoration: underline; text-decoration-color: var(--red); }
@media (max-width: 600px) {
  .ng { padding: 20px 0 36px; }
  .ng__grid { gap: 26px 14px; }
  .ng__img, .ng__item--big .ng__img { aspect-ratio: 4 / 3; }
  .ng__item:not(.ng__item--big) .ng__img { grid-template-columns: 1fr; }
  .ng__item:not(.ng__item--big) .ng__half--now { display: none; }
  .ng__title { font-size: 16px; }
  .ng__y { font-size: 15px; padding: 5px 7px; bottom: 6px; left: 6px; }
}

/* 絵を切らない（2026-11-05 カツ「できるだけ見切れないようにしたい」）：全体を contain で見せ、余白は同じ絵をぼかして敷く */
.fit { position: relative; overflow: hidden; background: #2a2a2a; }
.fit .fit__bg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(18px) brightness(.55); transform: none !important; }
.fit .fit__img { position: relative; width: 100%; height: 100%; object-fit: contain; padding: 0; display: block; }
.fit.tn2__img--now, .fit.bigvis__half--now { background: #fff; }
.fit.tn2__img--now .fit__bg { display: none; }
.fit.tn2__img--now .fit__img { padding: 10px; }
/* 表紙の枠を横長に：昔の絵（写真・古い絵はおよそ 4:3）が半分の枠にほぼ収まり、ぼかしの帯が細くなる */
.ng__img, .ng__item--big .ng__img { aspect-ratio: 8 / 3; }
@media (max-width: 600px) {
  .ng__item--big .ng__img { aspect-ratio: 2 / 1; }
  .ng__item:not(.ng__item--big) .ng__img { aspect-ratio: 4 / 3; }
}

/* AI の想像図の札と断り（2026-11-05 夜 カツ「やっぱりAIでつくりたい」・docs/設計.md） */
.aitag { position: absolute; right: 8px; bottom: 8px; z-index: 2; background: rgba(0, 0, 0, .78); color: #fff; font-size: 15px; font-weight: 700; line-height: 1; padding: 6px 8px; }
.cr--ai b { color: var(--text-strong); }
.bigvis .aitag { bottom: auto; top: 8px; }

/* ───── ダイナソーアップデートの見た目（2026-11-05 夜 カツ「乃木中ずかんに繋がる文言などは差し替えて・デザインも少し変えて」）─────
   色＝地層の赤さび色（--red を差し替え・白い字とのコントラスト 5 以上）と温かみのある黒。頭と足もとを黒にして、表紙の暗い記事一覧とつなげる。
   見出しは中央寄せをやめて左に寄せ、赤さび色の短い線を上に置く */
:root { --red: #c2410c; --ink: #1c1917; --ink2: #292524; --paper: #f7f5f1; }
.site-head { background: var(--ink); border-bottom: 0; box-shadow: none; }
.site-logo, .site-logo__name { color: #fff; }
.site-logo__k { color: #fdba74; }
.gnav a { color: #e7e5e4; }
.gnav a:hover, .gnav a[aria-current="page"] { color: #fff; }
.spnav summary, .spnav > summary { color: #fff; }
.strip { background: var(--paper); border-bottom: 1px solid #e7e5e4; }
.ng { background: var(--ink2); }
.big-h { text-align: left; }
.big-h::before { content: ""; display: block; width: 44px; height: 5px; background: var(--red); margin-bottom: 16px; }
.big-h small { display: inline-block; margin: 0 0 0 14px; vertical-align: middle; }
.big-lead { text-align: left; margin-left: 0; }
.more { text-align: left; }
.site-foot { background: var(--ink); color: #d6d3d1; border-top: 0; }
.site-foot a, .foot-logo, .foot-gnav a, .foot-map__cat, .foot-map li a { color: #fff; }
.foot-logo small, .foot-notice, .site-foot__copy { color: #a8a29e; }
.foot-top, .foot-bottom { border-color: #44403c; }
.foot-gnav a:hover, .foot-map li a:hover { color: #fdba74; }
@media (max-width: 860px) {
  .spnav summary { color: #fff; }
  .spnav__bars, .spnav__bars::before, .spnav__bars::after { background: #fff; }
  .spnav[open] .spnav__bars { background: transparent; }
}
.rules-band { background: var(--paper); }

/* 姿の移り変わり（2026-11-05 夜 カツ「時系列に沿った見た目をだしたい」）：時代ごとの絵を年の順に横へ。間に矢印。スマホは横に送る */
.evo { list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 34px; overflow-x: auto; scroll-snap-type: x mandatory; }
.evo__i { position: relative; scroll-snap-align: start; min-width: 0; }
.evo__i + .evo__i::before { content: ""; position: absolute; left: -24px; top: calc(33% - 8px); border: 8px solid transparent; border-left: 11px solid var(--red); }
.evo__img { position: relative; display: block; aspect-ratio: 4 / 3; }
.evo__img--now, .fit.evo__img--now { background: #fff; outline: 1px solid var(--line); outline-offset: -1px; }
.evo__img--now .fit__bg { display: none; }
.evo__img--now .fit__img { padding: 8px; }
.evo__y { position: absolute; left: 0; top: 0; z-index: 2; background: var(--ink); color: #fff; font-family: var(--num); font-size: 20px; line-height: 1; padding: 7px 10px; }
.evo__y--now { background: var(--red); font-family: var(--heavy); font-weight: 700; }
.evo__t { margin: 10px 0 2px; font-weight: 700; color: var(--text-strong); line-height: 1.5; }
.evo__cap { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-sub); }
.evo__cap .cr { display: block; }
@media (max-width: 760px) { .evo { grid-auto-columns: 78%; gap: 28px; } .evo__i + .evo__i::before { left: -21px; } }
/* 姿の移り変わり：スマホは縦に並べる（2026-11-05 夜 カツ「SPでは縦並びで」）。矢印は下向き */
@media (max-width: 760px) {
  .evo { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; gap: 44px; overflow: visible; scroll-snap-type: none; }
  .evo__i + .evo__i::before { left: 50%; top: -34px; margin-left: -9px; border: 9px solid transparent; border-top: 12px solid var(--red); border-left-width: 9px; }
}