/* 乃木工事ネタずかんのスタイル（2026-10-20 3回目＝カツ「Netflix Tudum とポケモンずかんを合わせた感じ」）。
   Tudum から：黒い頭・中央の大きなロゴ・詰まった太い英字の見出し（Oswald・OFL 同梱）・ネタの名前が並ぶ帯・丸く白へ切り替わるふち
   ポケモンずかんから：No.0001 の番号・種類（タイプ）の色の四角いアイコン・カードの一覧・ピックアップの斜めの白い面・表示順と検索の道具・詳しいページの前後の番号と情報の表
   写真が使えないので、カードの絵の代わりに「種類の色の面に見出し語を大きく」。
   文章を枠線＋角丸の箱に入れない（カードは絵の枠。角は丸めない）。文字は 15px 以上、本文 #374151・補足 #4b5563。スマホ先行。外のフォント・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: 1023px) {   /* 2026-11-11 カツ「タブレットの時のヘッダーをハンバーガーメニューに」＝860px から 1023px へ広げた */
  .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-11） =================
   上は乃木工事ネタずかんの site.css をそのまま写したもの。ここから下だけを足した（部品の名前もネタずかんと同じ）。
   ネタずかんの見た目を直したら、上を写し直す。文章を枠線＋角丸の箱に入れない。文字は 15px 以上 */
:root { --red: #0b6e4f; }   /* 差し色だけ替えた（電池の緑）。ほかの変数はネタずかんのまま */
.card__off { display: block; color: var(--text); cursor: default; }
.card--sample .card__vis { filter: saturate(.55); opacity: .8; }
.card--sample .card__name { color: var(--text-sub); }
/* 比べる表：線だけ・箱にしない。スマホは横に送る */
.cmp-wrap { overflow-x: auto; margin: 0 0 8px; }
.cmp { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; line-height: 1.7; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line2); }
.cmp thead th { font-family: var(--heavy); font-size: 17px; color: var(--text-strong); border-bottom: 2px solid var(--text-strong); }
.cmp tbody th { color: var(--text-strong); white-space: nowrap; width: 8em; }
.cmp-note { font-size: 15px; color: var(--text-sub); margin: 6px 0 14px; }
.sec__h .tag, .sec__h .pr { margin-left: 10px; vertical-align: .2em; font-family: var(--sans); }
.prbox { border-top: 1px solid var(--line2); padding-top: 18px; }
/* スマホ：表は行ごとに縦へ（横に送ると右の列が見えないため）。メーカーの名前を値の頭に */
@media (max-width: 760px) {
  .cmp { min-width: 0; }
  .cmp thead { display: none; }
  .cmp tr { display: block; border-bottom: 1px solid var(--line2); padding: 10px 0; }
  .cmp tbody th, .cmp td { display: block; width: auto; border: 0; padding: 2px 0; white-space: normal; }
  .cmp tbody th { font-family: var(--heavy); font-size: 17px; }
  .cmp td::before { content: attr(data-l); display: inline-block; min-width: 5.2em; font-weight: 700; color: var(--red); }
  .spnav__l { white-space: nowrap; }
}
/* サイト名がネタずかんより3字長いので、狭いスマホだけロゴの字を詰める（「メニュー」が2行に割れたため） */
@media (max-width: 420px) { .site-logo__name { font-size: 19px; } }

/* ================= トップのメインビジュアル（2026-11-11 カツ「オモコロのメインビジュアルを活かしつつ、それ以降は乃木ネタに」） =================
   ゲームの背景のような絵の上に透明な頭 → 白い太字に黒い縁の見出しとタブ → 3枚並びのカード送り（絵の下に色の帯で題名）→ 虹色の帯に種類のバナー。
   ここから下のページ（疑問ずかん・種類・決まり）は乃木工事ネタずかんの形のまま */
:root {
  --pop: #e8380d;   /* カードの題名の帯 */
  --ink: #1b1b1b;   /* 縁取りの黒 */
  --outline: 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 3px 4px 0 var(--ink);
}
/* 頭：絵の上では透明・白い字。絵を過ぎたら（kv.js が .is-solid）いつもの白い頭 */
.site-head--kv { margin-bottom: -69px; transition: background-color .25s, box-shadow .25s; }
.site-head--kv:not(.is-solid) { background: transparent; border-bottom-color: transparent; box-shadow: none; }
.site-head--kv:not(.is-solid) .site-logo__name,
.site-head--kv:not(.is-solid) .gnav a,
.site-head--kv:not(.is-solid) .spnav summary { color: #fff; text-shadow: var(--outline); }
.site-head--kv:not(.is-solid) .site-logo__k { color: #ffe14d; text-shadow: var(--outline); }
.site-head--kv:not(.is-solid) .gnav a[aria-current="page"], .site-head--kv:not(.is-solid) .gnav a:hover { color: #ffe14d; }
.site-head--kv:not(.is-solid) .hd-search { border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.site-head--kv:not(.is-solid) .spnav__bars, .site-head--kv:not(.is-solid) .spnav__bars::before, .site-head--kv:not(.is-solid) .spnav__bars::after { background: #fff; box-shadow: 0 0 0 1px var(--ink); }
.site-head--kv:not(.is-solid) .spnav[open] .spnav__bars { background: transparent; box-shadow: none; }

.kv { position: relative; overflow: hidden; padding: 96px 0 34px;
  background: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 150px), url(../img/kv.webp) center 64% / cover no-repeat, #63aee6; }
.kv__in { position: relative; width: min(var(--wrap), calc(100% - 32px)); margin: 0 auto; }
.kv__title { text-align: center; color: #fff; text-shadow: var(--outline); font-family: var(--heavy); font-weight: 700; font-size: clamp(24px, 3.2vw, 38px); line-height: 1.35; letter-spacing: .02em; margin: 0 0 16px; }
.kv__radio { position: absolute; opacity: 0; pointer-events: none; }
.kv__tabs { display: flex; justify-content: center; gap: 8px 36px; flex-wrap: wrap; border-bottom: 3px solid rgba(255, 255, 255, .85); }
.kv__tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 12px; cursor: pointer; font-family: var(--heavy); font-weight: 700; font-size: clamp(19px, 2.2vw, 26px); color: #fff; text-shadow: var(--outline); user-select: none; }
.kv__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 5px; background: transparent; }
.kv__medal { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); background: linear-gradient(#e9e9e9, #a8a8a8); box-shadow: 1px 2px 0 var(--ink); }
.kv__medal svg { width: 20px; height: 20px; fill: #fff; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
#kvt-new:checked ~ .kv__tabs .kv__tab--new, #kvt-car:checked ~ .kv__tabs .kv__tab--car { color: #ffe14d; }
#kvt-new:checked ~ .kv__tabs .kv__tab--new::after, #kvt-car:checked ~ .kv__tabs .kv__tab--car::after { background: var(--pop); }
#kvt-new:checked ~ .kv__tabs .kv__tab--new .kv__medal, #kvt-car:checked ~ .kv__tabs .kv__tab--car .kv__medal { background: linear-gradient(#ffe56b, #f0a400); }
.kv__radio:focus-visible + .kv__radio ~ .kv__tabs, .kv__radio:focus-visible ~ .kv__tabs { outline: 3px solid #ffe14d; outline-offset: 4px; }
/* カード送り（JS が無くても指で横に送れる） */
.kvc { display: none; position: relative; margin-top: 24px; }
#kvt-new:checked ~ .kvc--new, #kvt-car:checked ~ .kvc--car { display: block; }
.kvc__track { list-style: none; margin: 0; padding: 0 0 8px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 56px) / 3); gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.kvc__track::-webkit-scrollbar { display: none; }
.kvc__item { position: relative; scroll-snap-align: start; }
.kvc__item > a, .kvc__item > span { display: block; height: 100%; background: var(--pop); color: #fff; text-decoration: none; box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .7); }
.kvc__item .bigvis__word { font-size: clamp(30px, 3.4vw, 46px); }
.kvc__cap { display: block; padding: 10px 14px 12px; font-weight: 700; font-size: 16px; line-height: 1.55; min-height: calc(1.55em * 2 + 22px); }
.kvc__item > a:hover .kvc__cap { text-decoration: underline; }
.kvc__item--soon .bigvis { filter: saturate(.6); }
.kvc__soon { position: absolute; right: 8px; top: 8px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 15px; font-weight: 700; padding: 0 8px; }
.kvc__nav { position: absolute; top: calc(50% - 40px); width: 40px; height: 64px; border: 0; padding: 0; background: none; cursor: pointer; z-index: 2; }
.kvc__nav::before { content: ""; display: block; margin: auto; width: 0; height: 0; border-top: 17px solid transparent; border-bottom: 17px solid transparent; filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)); }
.kvc__nav--prev { left: -48px; } .kvc__nav--prev::before { border-right: 22px solid #fff; }
.kvc__nav--next { right: -48px; } .kvc__nav--next::before { border-left: 22px solid #fff; }
/* 虹色の帯に種類のバナー */
.kvband { background: linear-gradient(90deg, #13c2b0, #7ed957, #ffe14d, #ff9f43, #ff5e7e, #b05cff, #5b6cff); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); padding: 18px 0 20px; }
.kvband__track { list-style: none; margin: 0 auto; padding: 0; width: min(var(--wrap), calc(100% - 32px)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.kvban { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 112px; padding: 12px 8px; text-decoration: none; color: var(--kf); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .16) 0 6px, transparent 7px) 0 0 / 28px 28px, var(--k); }
.kvban:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.kvban__ico svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.kvban__t { font-family: var(--heavy); font-size: 19px; line-height: 1.3; text-align: center; }
.kvban__n { font-size: 15px; opacity: .9; }
@media (prefers-reduced-motion: reduce) { .kvban, .site-head--kv { transition: none; } }
@media (max-width: 1023px) { .kvc__nav--prev { left: -6px; } .kvc__nav--next { right: -6px; } }
@media (max-width: 760px) {
  .site-head--kv { margin-bottom: -59px; }
  .kv { padding: 76px 0 26px; background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 130px), url(../img/kv-sp.webp); background-position: 0 0, 30% 70%; }
  .kv__tabs { gap: 4px 16px; }
  .kv__medal { width: 30px; height: 30px; } .kv__medal svg { width: 16px; height: 16px; }
  .kvc__track { grid-auto-columns: 100%; gap: 16px; }
  .kvc__nav { top: calc(50% - 44px); }
  .kvband__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 6px 8px 2px; scrollbar-width: none; }
  .kvband__track li { flex: 0 0 150px; scroll-snap-align: start; }
  .kvban { min-height: 100px; }
}

/* ================= 色とアイコン（2026-11-11 カツ「色使い、アイコンのデザインなどは変えてほしい」） =================
   乃木工事ネタずかんと別のサイトに見えるように：差し色は赤橙 1 色（--pop）・種類は明るいキャンプの色＋黒い字・
   カードの面は黒い縁と影のステッカー（水玉と円はやめて斜めの縞）・種類のアイコンは丸いバッジに描き直した絵・地は生成り */
:root { --red: var(--pop); --surface2: #fff3d6; --line: #eadfc8; --line2: #d8c9a8; }
.btn { background: var(--pop); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); border-radius: 999px; }
.btn:hover { background: #c92d06; transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.btn--ghost { box-shadow: 3px 3px 0 var(--ink); }
/* カードと大きな面：ステッカー */
.card__vis, .bigvis { border: 3px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--ink); background:
  repeating-linear-gradient(-45deg, rgba(255, 255, 255, .28) 0 10px, transparent 10px 22px), var(--k); }
.card__vis::before, .bigvis::before { content: none; }
.card__word, .bigvis__word { color: var(--ink); text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff; }
.card__no, .bigvis__no { color: var(--ink); font-weight: 600; opacity: 1; }
.card a:hover .card__vis { transform: translate(-2px, -3px); box-shadow: 7px 8px 0 var(--ink); }
.card__sample { background: var(--ink); border-radius: 999px; padding: 0 10px; }
.pick__vis .bigvis, .kvc .bigvis { box-shadow: none; }
/* 種類のアイコン：丸いバッジ */
.kico__sq { border-radius: 50%; border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.kico__sq svg { stroke-width: 2.3; }
.card__kico .kico__sq { background: #fff !important; color: var(--ink) !important; }
/* 見出し：下に黄色の線 */
.big-h { display: table; margin-left: auto; margin-right: auto; padding: 0 10px; background: linear-gradient(transparent 62%, #ffd23f 62% 90%, transparent 90%); }
.big-h small { color: var(--text-sub); }
.sec__h, .sec > h2 { border-bottom: 3px solid var(--ink); }
.rules-band { border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.rules li { border-bottom-style: dashed; }
.dex__pn a { border-radius: 999px; }
.tags a { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.site-foot { border-top: 4px solid var(--ink); }
/* メインビジュアルのカード：絵と題名の帯をひとまとめのステッカーに */
.kvc .bigvis { border: 0; border-radius: 0; border-bottom: 3px solid var(--ink); }
.kvc__item > a, .kvc__item > span { border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 5px 5px 0 var(--ink); }
.big-h { background: linear-gradient(#ffd23f, #ffd23f) no-repeat 0 .74em / 100% .28em; }   /* 線は1行目の下だけ（下の小さい字に掛からないように） */

/* ================= オモコロに似すぎないように（2026-11-11 カツ「元サイトパクったと思われないように少しブラッシュアップ」） =================
   似ていた4つを、このサイトの題材（車中泊＝道と看板）に寄せて描き替えた：
   ①頭＝絵の上でも白い頭のまま（透明＋白い縁取りの字をやめた）②見出し＝黄色い看板の板を斜めに重ねる（白い縁取りの字をやめた）
   ③タブ＝丸い札の切り替え（メダルと下線をやめた）／カードの題名＝白地に黒い字（赤い帯をやめた）・送りは丸いボタン
   ④種類の帯＝道路（アスファルトに黄色い破線・白い端の線）に道路標識の札（虹色の帯をやめた） */
.site-head--kv:not(.is-solid) { background: #fff; border-bottom: 3px solid var(--ink); box-shadow: none; }
.site-head--kv:not(.is-solid) .site-logo__name, .site-head--kv:not(.is-solid) .gnav a, .site-head--kv:not(.is-solid) .spnav summary { color: var(--text-strong); text-shadow: none; }
.site-head--kv:not(.is-solid) .site-logo__k { color: var(--pop); text-shadow: none; }
.site-head--kv:not(.is-solid) .gnav a[aria-current="page"], .site-head--kv:not(.is-solid) .gnav a:hover { color: var(--pop); }
.site-head--kv:not(.is-solid) .spnav__bars, .site-head--kv:not(.is-solid) .spnav__bars::before, .site-head--kv:not(.is-solid) .spnav__bars::after { background: var(--text-strong); box-shadow: none; }
.site-head--kv.is-solid { border-bottom: 3px solid var(--ink); }
.kv { background: url(../img/kv.webp) center 64% / cover no-repeat, #63aee6; padding-top: 104px; }
/* 見出し：看板の板 */
.kv__title { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: fit-content; margin: 0 0 22px; text-shadow: none; color: var(--ink); font-size: clamp(22px, 2.8vw, 34px); line-height: 1.3; }
.kv__title .nw { display: inline-block; background: #ffd23f; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 4px 14px 6px; }
.kv__title .nw:nth-child(1) { transform: rotate(-2deg); background: #fff; }
.kv__title .nw:nth-child(2) { transform: rotate(1deg); margin-left: 18px; }
.kv__title .nw:nth-child(3) { transform: rotate(-1deg); margin-left: 6px; background: var(--pop); color: #fff; }
/* タブ：丸い札 */
.kv__tabs { justify-content: flex-start; gap: 10px; border-bottom: 0; }
.kv__tab { padding: 6px 18px 6px 8px; font-size: 18px; color: var(--ink); text-shadow: none; background: #fff; border: 3px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); }
.kv__tab::after { content: none; }
.kv__medal { width: 28px; height: 28px; border: 0; box-shadow: none; background: transparent; }
.kv__medal svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; }
#kvt-new:checked ~ .kv__tabs .kv__tab--new, #kvt-car:checked ~ .kv__tabs .kv__tab--car { background: var(--ink); color: #ffd23f; }
#kvt-new:checked ~ .kv__tabs .kv__tab--new .kv__medal, #kvt-car:checked ~ .kv__tabs .kv__tab--car .kv__medal { background: transparent; }
/* カード：白地に黒い字の題名 */
.kvc__item > a, .kvc__item > span { background: #fff; color: var(--ink); }
.kvc__soon { background: var(--ink); border-radius: 999px; padding: 0 10px; }
.kvc__nav { width: 46px; height: 46px; top: calc(50% - 50px); background: #fff; border: 3px solid var(--ink); border-radius: 50%; box-shadow: 3px 3px 0 var(--ink); display: grid; place-items: center; }
.kvc__nav::before { filter: none; border-top-width: 9px; border-bottom-width: 9px; }
.kvc__nav--prev::before { border-right: 12px solid var(--pop); margin-left: 8px; }
.kvc__nav--next::before { border-left: 12px solid var(--pop); margin-left: 14px; }
.kvc__nav--prev { left: -49px; } .kvc__nav--next { right: -49px; }
/* 道路の帯と標識の札 */
.kvband { border-top: 0; border-bottom: 0; padding: 30px 0 32px; background:
  linear-gradient(#fff, #fff) 0 10px / 100% 4px no-repeat,
  linear-gradient(#fff, #fff) 0 calc(100% - 10px) / 100% 4px no-repeat,
  repeating-linear-gradient(90deg, #ffd23f 0 46px, transparent 46px 86px) 0 50% / 100% 6px no-repeat,
  #3b3d42; }
.kvban { position: relative; border-radius: 12px; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--ink), 0 8px 0 4px rgba(0, 0, 0, .35); border: 0; background: var(--k); }
.kvban:hover { transform: translateY(-3px); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--ink), 0 11px 0 4px rgba(0, 0, 0, .35); }
.kvband__track { gap: 26px; }
@media (max-width: 1023px) { .kvc__nav--prev { left: -8px; } .kvc__nav--next { right: -8px; } }
@media (max-width: 760px) {
  .kv { background-image: url(../img/kv-sp.webp); background-position: 30% 70%; padding-top: 80px; }
  .kv__title { font-size: 20px; }
  .kv__title .nw:nth-child(2) { margin-left: 10px; }
  .kv__tab { font-size: 16px; padding-right: 14px; }
  .kvband__track { padding: 8px 10px 14px 8px; gap: 22px; }
}

/* ================= 頭の重なりをやめる・下層の頭（2026-11-11 カツ「タブレットはハンバーガー」「下層もこのデザインにあわせて」） ================= */
.site-head--kv { margin-bottom: 0; }
.kv { padding-top: 40px; }
@media (max-width: 760px) { .site-head--kv { margin-bottom: 0; } .kv { padding-top: 26px; } }
@media (max-width: 1023px) { .spnav__panel { max-height: calc(100vh - 61px); } }
/* 下層の頭：トップと同じ絵を細く敷く → 看板の板（小さい札・ページの名前・ひとこと）→ 道路の線 */
.phero { background: url(../img/kv.webp) center 58% / cover no-repeat, #63aee6; padding: 22px 0 30px; }
.phero__in { width: min(var(--wrap), calc(100% - 32px)); margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; }
.phero .crumbs { display: inline-flex; background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 2px 14px; margin: 0 0 16px; color: var(--ink); }
.phero .crumbs a { color: var(--ink); }
.phero__k { margin: 0 0 -4px 10px; position: relative; z-index: 1; }
.phero__k span { display: inline-flex; align-items: center; gap: 8px; background: var(--pop); color: #fff; border: 3px solid var(--ink); padding: 2px 14px; font-weight: 700; font-size: 16px; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--ink); }
.phero__k .kico__sq { width: 26px; height: 26px; box-shadow: none; } .phero__k .kico__sq svg { width: 16px; height: 16px; }
.phero__title { margin: 0; font-family: var(--heavy); font-size: clamp(30px, 4.4vw, 50px); line-height: 1.25; color: var(--ink); }
.phero__title--long { font-size: clamp(24px, 3vw, 36px); max-width: 26em; }
.phero__title span { display: inline-block; background: #ffd23f; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); padding: 6px 18px 8px; transform: rotate(.6deg); word-break: auto-phrase; }
.phero__sub { margin: 12px 0 0 14px; }
.phero__sub span { display: inline-block; background: #fff; border: 2.5px solid var(--ink); padding: 2px 12px; font-size: 16px; font-weight: 700; color: var(--ink); transform: rotate(-1deg); }
.phero__sub small { font-family: var(--num); font-size: 17px; color: var(--pop); }
.road { height: 34px; background:
  linear-gradient(#fff, #fff) 0 5px / 100% 3px no-repeat,
  linear-gradient(#fff, #fff) 0 calc(100% - 5px) / 100% 3px no-repeat,
  repeating-linear-gradient(90deg, #ffd23f 0 46px, transparent 46px 86px) 0 50% / 100% 5px no-repeat,
  #3b3d42; margin-bottom: 30px; }
@media (max-width: 760px) {
  .phero { background-image: url(../img/kv-sp.webp); background-position: 30% 60%; padding: 16px 0 24px; }
  .phero .crumbs { font-size: 15px; border-radius: 16px; }
  .phero__title { font-size: 28px; } .phero__title--long { font-size: 22px; }
  .phero__title span { padding: 6px 12px 8px; }
  .road { margin-bottom: 22px; }
}
.dex__pn { margin-top: 0; }
.road { margin-bottom: 0; }
.road + .layout { padding-top: 26px; }
.tools__bar { border-top: 3px solid var(--ink); }

/* ===== カードの絵（2026-11-12）。絵がある記事だけ：縞の面の代わりに絵を敷き、言葉は白い字に黒い縁（トップの見出しと同じ調子） */
/* 絵が読めなかったときは元の縞の面のまま（黒い面にしない・2026-11-12） */
.card__vis--img::before, .bigvis--img::before { display: none; }
.card__img, .bigvis__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__vis--img::after, .bigvis--img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 70%); }
.card__vis--img .card__word, .bigvis--img .bigvis__word, .bigvis--img .bigvis__kana { z-index: 1; color: #fff; -webkit-text-stroke: 5px #111; paint-order: stroke fill; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.bigvis--img .bigvis__kana { -webkit-text-stroke: 0; text-shadow: none; background: rgba(0, 0, 0, .58); color: #fff; padding: 2px 10px; border-radius: 999px; }
.card__vis--img .card__no, .bigvis--img .bigvis__no { z-index: 1; background: var(--k); color: var(--kf); padding: 0 8px; left: 0; top: 0; opacity: 1; border-bottom-right-radius: 8px; }
.card__vis--img .card__kico, .card__vis--img .card__sample { z-index: 1; }
/* ===== タイトル込みのロゴ（2026-11-12）。文字はパスにした SVG（data/logo/ロゴを作る.py） */
.site-logo__img { display: block; height: 64px; width: auto; }
.gnav a { white-space: nowrap; }
@media (max-width: 760px) { .site-logo__img { height: 50px; max-width: calc(100vw - 140px); object-fit: contain; object-position: left center; } }
/* ===== 種類のバナーの絵（2026-11-12）。絵を上に敷き、下は種類の色の帯にアイコン・名前・件数 */
.kvban--img { overflow: hidden; justify-content: flex-end; min-height: 168px; padding: 0 8px 10px; }
.kvban__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.kvban--img::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, var(--k) 68%); }
.kvban--img .kvban__ico, .kvban--img .kvban__t, .kvban--img .kvban__n { position: relative; z-index: 1; }
@media (max-width: 760px) { .kvban--img { min-height: 150px; } }
/* ===== 足元の整理（2026-11-12）。2列・ロゴは SVG */
.foot-top { justify-content: flex-start; }
.foot-logo img { display: block; height: 60px; width: auto; }
.foot-map--2 { grid-template-columns: repeat(2, minmax(0, 360px)); }
@media (max-width: 760px) { .foot-logo img { height: 50px; } }
/* ===== 前後の疑問（スマホ）：2つを縦に積み、番号と言葉を1行に（折れて崩れていた・2026-11-12） */
@media (max-width: 760px) {
  .dex__pn { grid-template-columns: 1fr; gap: 10px; }
  .dex__pn > span { display: none; }
  .dex__pn a { flex-wrap: nowrap; min-height: 50px; padding: 10px 18px; gap: 10px; }
  .dex__pn .num { flex: none; }
}
/* ===== 要点の表の読みやすさ（2026-11-12）。値は大きく太く・出典は小さく細く別の行に。スマホは1列で 項目｜値 */
.dex__dl dd .dex__v { display: block; font-size: 18px; line-height: 1.5; }
.dex__dl dd .dex__src { display: block; margin: 2px 0 0; font-size: 15px; font-weight: 400; color: var(--text-sub); line-height: 1.5; }
@media (max-width: 760px) {
  .dex__dl { grid-template-columns: 1fr; gap: 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
  .dex__dl > div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 14px; }
  .dex__dl > div + div { border-top: 1px solid var(--line2); }
  .dex__dl dt { font-size: 15px; line-height: 1.5; }
}
/* ===== 売る入口（2026-11-12）。広告の印は記事の頭・まわりの物は3店ボタン（線1本で区切る・箱にしない [875]） */
.pr-note { margin: 0 0 14px; font-size: 15px; color: var(--text-sub); }
.pr-note a { color: var(--text-sub); }
.prgear { border-top: 1px solid var(--line2); padding: 12px 0 2px; }
.prgear__n { margin: 0 0 6px; font-weight: 700; color: var(--text-strong); }
.prgear__shops { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; }
.prgear__shops a { display: inline-block; padding: 6px 14px; border: 2px solid var(--ink); border-radius: 999px; text-decoration: none; color: var(--text-strong); font-weight: 700; font-size: 15px; background: #fff; }
.prgear__shops a:hover { background: var(--pop, #ffd23f); }