/* ============================================================
 * ナイトプライス共通スタイル ― 案C「価格の計器」
 * 指定: Note記事管理 0041_claude / 0042_claude（2026-11-09）
 * 色の役割は3つだけ：緑=下がった・買う / 赤=締切・R18 / 白=価格
 * ============================================================ */
:root {
  --bg: #0b0e12;
  --card: #121821;
  --line: #222a33;
  --text: #e6edf3;
  --muted: #8b98a5;
  --down: #22c55e;
  --down-ink: #04140a;
  --alert: #ef4444;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  line-height: 1.6;
  font-size: 14px;
}
.mono, .price-now, .stat-num, .disc-line, .card-remain, .countdown-clock,
.buybar-price, .sale-tag, .logo, .price-box-now, .chart-lowtext {
  font-family: "JetBrains Mono", "Noto Sans JP", monospace;
  font-variant-numeric: tabular-nums;
}
a { color: var(--text); text-decoration: underline; }
img { max-width: 100%; }

/* ---------- ヘッダー（1段・52px・固定） ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  height: 52px; padding: 0 16px;
  background: rgba(11, 14, 18, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.logo {
  color: var(--text); text-decoration: none;
  font-weight: 700; font-size: 16px; letter-spacing: 0.02em; white-space: nowrap;
}
.logo-mark { color: var(--down); }
.header-r18 {
  color: #fff; background: var(--alert);
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 3px; letter-spacing: 0.08em; white-space: nowrap;
}
.site-nav {
  margin-left: auto; display: flex; gap: 2px;
  overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
}
.site-nav a {
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 400;
  padding: 6px 8px;
}
.site-nav a[aria-current="page"] { color: var(--text); font-weight: 700; }

/* ---------- 年齢確認ゲート ---------- */
.gate-body { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 20px; }
.gate { max-width: 480px; width: 100%; text-align: center; }
.gate-r18 {
  display: inline-block; margin: 0 0 10px;
  color: #fff; background: var(--alert);
  font-weight: 700; font-size: 22px; letter-spacing: 0.15em;
  padding: 6px 18px; border-radius: 4px;
}
.gate-title { margin: 0 0 6px; font-size: 24px; font-weight: 900; }
.gate-lead { color: var(--muted); margin: 0 0 22px; }
.gate-box {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 22px 18px;
}
.gate-warn { margin: 0 0 14px; font-size: 14px; }
.gate-q { font-weight: 700; font-size: 16px; margin: 0 0 14px; }
.gate-enter {
  display: block; width: 100%; border: 0; cursor: pointer;
  background: var(--down); color: var(--down-ink);
  font-weight: 900; font-size: 16px; height: 52px;
  border-radius: 10px; margin-bottom: 10px;
}
.gate-leave {
  display: block; width: 100%; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); font-size: 14px; font-weight: 400;
  padding: 11px; border-radius: 10px;
}
.gate-leave-msg { color: var(--alert); font-size: 12px; margin: 12px 0 0; }
.gate-note { color: var(--muted); font-size: 12px; margin-top: 16px; }

/* ---------- ヒーロー（約150pxに抑える） ---------- */
.hero { padding: 20px 16px 0; max-width: 1080px; margin: 0 auto; }
.hero h1 { font-size: 20px; line-height: 1.3; margin: 0 0 12px; font-weight: 900; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px;
}
.stat-label { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
.stat-num { display: block; font-size: 20px; font-weight: 700; line-height: 1.2; }
.stat-num.down { color: var(--down); }

/* ---------- セクション ---------- */
main { max-width: 1080px; margin: 0 auto; padding: 0 16px 8px; }
.sec { padding: 32px 0 0; }
.sec-head { display: flex; align-items: baseline; gap: 10px; }
.sec h2, .sec-head h2 { font-size: 20px; margin: 0 0 8px; font-weight: 900; line-height: 1.3; }
.sec-head h2 { margin-right: auto; }
.sale-tag { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sec-more { font-size: 14px; white-space: nowrap; text-decoration: none; }
.sec-lead { color: var(--muted); margin: 0 0 12px; font-size: 14px; }
.page-title { font-size: 20px; margin: 6px 0 8px; font-weight: 900; }
.empty { color: var(--muted); padding: 18px 0; }
.about-mini { padding: 32px 0 0; }
.about-mini p { color: var(--muted); font-size: 12px; margin: 0 0 8px; }

/* ---------- カード（横型・全幅共通） ---------- */
.cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .cards { grid-template-columns: 1fr 1fr; } }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px;
  display: flex; gap: 12px;
}
.card-thumb-link { flex: 0 0 auto; display: block; text-decoration: none; }
.card-body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.disc-line { margin: 0; color: var(--down); font-size: 14px; font-weight: 700; line-height: 1.4; }
.disc-ended { color: var(--muted); }
.disc-low { font-family: "Noto Sans JP", sans-serif; font-size: 12px; font-weight: 700; }
.card-title {
  font-size: 16px; margin: 0; line-height: 1.4; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-title a { color: var(--text); text-decoration: none; }
.price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.price-left { display: flex; flex-direction: column; }
.price-was-line { color: var(--muted); font-size: 12px; line-height: 1.5; }
.price-now { color: var(--text); font-size: 28px; font-weight: 700; line-height: 1.0; }
.spark { flex: 0 0 auto; }
.spark-line { fill: none; stroke: var(--down); stroke-width: 2; }
.spark-dot { fill: var(--down); }
.card-remain { margin: 0; color: var(--alert); font-size: 12px; line-height: 1.5; }
.card-remain-none { color: var(--muted); font-family: "Noto Sans JP", sans-serif; }
.card-meta { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 横長カード（DUGA）：画像を全面に出し、黒帯をなくす */
.card-wide { flex-direction: column; }
.card-thumb-wide-link { display: block; text-decoration: none; }
.thumb-wide {
  width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.thumb-wide img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* サムネイル（切り抜かず全体表示。余白は黒） */
.thumb {
  width: 128px; height: 183px;
  background: #000; border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--muted);
}
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb-code { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; }
.thumb-note { font-size: 10px; letter-spacing: 0.4em; }
.item-video { display: flex; justify-content: center; }
.item-video iframe, .item-video video { max-width: 100%; }
.thumb-lg { width: 100%; max-width: 440px; height: auto; aspect-ratio: 7 / 10; margin-inline: auto; border: 1px solid var(--line); border-radius: 12px; }
.thumb-lg .thumb-code { font-size: 20px; }

/* バッジ（作品ページ用） */
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge {
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.03em;
}
.badge-rate { background: var(--down); color: var(--down-ink); }
.badge-lowest { border: 1px solid var(--down); color: var(--down); }
.badge-today { border: 1px solid var(--line); color: var(--muted); }
.badge-lg { font-size: 14px; padding: 3px 10px; }

/* CTA */
.cta {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center;
  height: 48px; text-align: center; text-decoration: none;
  background: var(--down); color: var(--down-ink);
  font-weight: 900; font-size: 16px;
  border-radius: 10px;
}
.cta-lg { height: 52px; margin-top: 16px; }
.cta-sub { background: transparent; border: 1px solid var(--line); color: var(--text); }
.cta-note { color: var(--muted); font-size: 12px; text-align: center; margin: 8px 0 0; }

/* ---------- 一覧の並べ替え・絞り込み ---------- */
.sortbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0 10px; }
.sort-btn {
  cursor: pointer; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--muted);
  font-size: 14px; font-weight: 400; padding: 8px 12px;
}
.sort-btn.active { background: var(--down); border-color: var(--down); color: var(--down-ink); font-weight: 700; }
.sale-only { color: var(--muted); font-size: 14px; margin-left: 4px; }
.filter-select {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; font-size: 14px; padding: 8px 10px; max-width: 46%;
}
.more-btn {
  display: block; margin: 18px auto 6px; cursor: pointer;
  background: transparent; color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; font-size: 16px; font-weight: 700; padding: 12px 34px;
}
.list-count { color: var(--muted); font-size: 12px; margin: 0 0 10px; }

/* サンプル画像の列（切り抜かず全体表示） */
.stills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.stills img {
  height: 118px; width: auto; max-width: 78vw; object-fit: contain;
  background: #000; border: 1px solid var(--line); border-radius: 8px; flex: 0 0 auto;
}

/* 作品ページ下部の固定購入バー */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(11, 14, 18, 0.97); border-top: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.buybar-price { color: var(--text); font-size: 20px; font-weight: 700; white-space: nowrap; }
.buybar-off { color: var(--down); font-size: 12px; font-weight: 700; }
.buybar-remain { color: var(--alert); font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.buybar-cta {
  margin-left: auto; text-decoration: none; text-align: center;
  display: flex; align-items: center; height: 48px; padding: 0 16px;
  background: var(--down); color: var(--down-ink);
  font-weight: 900; font-size: 16px; border-radius: 10px; white-space: nowrap;
}
body.has-buybar { padding-bottom: 76px; }

/* ---------- 品番ページ ---------- */
.breadcrumb { color: var(--muted); font-size: 12px; margin: 14px 0 4px; }
.breadcrumb a { color: var(--muted); }
.item-top { display: grid; gap: 16px; margin-top: 8px; }
@media (min-width: 760px) { .item-top { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.item-title { font-size: 20px; line-height: 1.4; margin: 6px 0 10px; font-weight: 900; }
.item-meta { margin: 0 0 10px; display: grid; gap: 4px; }
.item-meta div { display: flex; gap: 10px; font-size: 14px; }
.item-meta dt { color: var(--muted); min-width: 64px; }
.item-meta dd { margin: 0; }
.item-tags { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-size: 12px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px;
}
.price-box {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; margin-top: 24px;
}
.price-box-label { color: var(--muted); font-size: 12px; margin: 0; font-weight: 700; letter-spacing: 0.06em; }
.price-box-now { margin: 2px 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--text); font-size: 28px; font-weight: 700; line-height: 1.15; }
.price-box-was { color: var(--muted); font-size: 14px; text-decoration: line-through; font-weight: 400; font-family: "Noto Sans JP", sans-serif; }
.price-box-low { margin: 0; font-size: 14px; }
.price-box-save { margin: 0 0 4px; font-size: 14px; }
.price-box-save strong { color: var(--down); }
.price-box-judge { margin: 6px 0 0; font-size: 16px; font-weight: 700; color: var(--down); }
.price-box-low strong { color: var(--text); }
.lowest-now { color: var(--down); font-weight: 700; }
.countdown {
  margin-top: 16px; border: 1px solid var(--alert); border-radius: 12px;
  padding: 12px 14px; background: rgba(239, 68, 68, 0.06);
  text-align: center;
}
.countdown-label { margin: 0; color: var(--alert); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; }
.countdown-clock { margin: 2px 0; font-size: 28px; font-weight: 700; letter-spacing: 0.04em; }
.countdown-end { margin: 0; color: var(--muted); font-size: 12px; }
.no-sale { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.item-desc { font-size: 14px; }

/* 価格推移グラフと履歴表 */
.chart { width: 100%; height: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-line { fill: none; stroke: var(--down); stroke-width: 2.5; }
.chart-dot { fill: var(--down); }
.chart-dot-low { fill: var(--alert); stroke: #fff; stroke-width: 1.5; }
.chart-ytext, .chart-xtext { fill: var(--muted); font-size: 20px; }
.chart-lowtext { fill: var(--alert); font-size: 22px; font-weight: 700; }
.history-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.history-table th, .history-table td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; }
.history-table th { color: var(--muted); font-weight: 700; }
.history-table .row-low td { color: var(--down); font-weight: 700; }

/* ---------- 文書ページ ---------- */
.doc h2 { font-size: 20px; margin: 24px 0 6px; font-weight: 900; }
.doc p { margin: 0 0 10px; font-size: 14px; }
.doc-date { color: var(--muted); font-size: 12px; }
.info-table { width: 100%; border-collapse: collapse; margin: 10px 0 6px; font-size: 14px; }
.info-table th, .info-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.info-table th { background: var(--card); color: var(--muted); width: 30%; font-weight: 700; }

/* ---------- フッター ---------- */
.site-footer {
  margin-top: 32px; padding: 22px 16px 30px;
  border-top: 1px solid var(--line);
}
.footer-nav { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.footer-nav a { color: var(--text); text-decoration: none; font-size: 14px; font-weight: 400; }
.footer-note { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.footer-copy { color: var(--muted); font-size: 12px; margin: 0; }

/* スマホでは区画の見出しを1行取り、SALEと「一覧で見る」を下の行に分ける（Note 0044-1） */
@media (max-width: 720px) {
  .sec-head { flex-wrap: wrap; row-gap: 4px; }
  .sec-head h2 { flex: 1 1 100%; margin-right: 0; }
  .sale-tag { margin-right: auto; }
}

.price-save { display: block; font-size: 12px; color: var(--muted); }

/* 作品ページ上部の大きいサムネと動画直下の購入ボタン */
.still-lead { width: 100%; max-height: 520px; object-fit: contain; background: #000; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; }
.video-cta { display: block; margin-top: 12px; }

/* トップの動画ザッピング */
.zap-player { display: flex; flex-direction: column; align-items: center; position: relative; }
.zap-player iframe, .zap-player video { max-width: 100%; }
.zap-disc { margin: 12px 0 4px; }
.zap-still { display: block; width: 100%; height: auto; max-height: 430px; object-fit: contain; background: #000; border-radius: 8px; margin: 0 0 10px; }
.free-line { color: var(--down); font-weight: 700; font-size: 12px; }
.zap-disc .free-line { font-size: 15px; }
.free-join { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.free-join a { color: var(--down); font-weight: 700; }
.join-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.join-note a { color: var(--down); font-weight: 700; }
.zap-player video, .item-video video { width: 100% !important; height: auto; }
.zap-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.zap-title a { color: var(--text); }
.zap-price { margin: 0 0 4px; }
.zap-now { font-family: "JetBrains Mono", monospace; font-size: 28px; font-weight: 700; }
.zap-was { color: var(--muted); font-size: 12px; text-decoration: line-through; }
.zap-nav { display: flex; gap: 8px; margin-top: 12px; }
.zap-btn { flex: 1; height: 48px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 16px; font-weight: 700; cursor: pointer; }
.zap-next { background: var(--down); color: #04140a; border-color: transparent; }

.zap-hint { text-align: center; color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.zap-tabs { display: flex; gap: 8px; margin: 2px 0 12px; }
.zap-tab { flex: 1; padding: 12px 0; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 15px; cursor: pointer; }
.zap-tab .sale-tag { color: inherit; opacity: 0.75; }
.zap-tab.active { background: var(--down); border-color: var(--down); color: var(--down-ink); }
.zap-player iframe, .item-video iframe { width: 100% !important; height: auto; aspect-ratio: 16 / 9; border: 0; }
.item-video > div, .zap-player > div { width: 100%; flex: none; }
.tax-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tax-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px; text-decoration: none; color: var(--text); }
.tax-thumb { display: block; height: 104px; background: #000; border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.tax-thumb img { width: 100%; height: 100%; object-fit: contain; }
.tax-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; line-height: 1.45; min-height: 32px; margin-top: 4px; }
.tax-price { display: block; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 13px; margin-top: 4px; }
.tax-was { color: var(--muted); text-decoration: line-through; font-size: 11px; font-weight: 500; }
.tax-note { color: var(--muted); font-size: 12px; margin-top: 12px; }
.tax-index { display: flex; flex-wrap: wrap; gap: 8px; }
.tax-index-link { display: inline-flex; gap: 6px; align-items: baseline; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; color: var(--text); text-decoration: none; font-size: 13px; }
.tax-count { color: var(--muted); font-size: 11px; }

/* ザッピングのポスター（スワイプ土台） */
.zap-stage { position: relative; touch-action: pan-y; }
.zap-poster { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #000; cursor: pointer; overflow: hidden; }
.zap-poster img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.zap-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 52px; border-radius: 12px; background: rgba(10, 14, 18, .72); color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.35); }
.zap-playnav { display: flex; gap: 8px; margin-top: 8px; width: 100%; }
.zap-playnav button { flex: 1; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; }

/* ザッピングの帯（小さめタイルを横スワイプで選ぶ） */
.zap-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; margin: 4px -16px 0; padding: 2px 16px 8px; }
.zap-tile { flex: 0 0 168px; scroll-snap-align: start; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0; overflow: hidden; cursor: pointer; text-align: left; }
.zap-tile.active { border-color: var(--down); }
.zap-tile-img { position: relative; display: block; }
.zap-tile-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.zap-tile-play { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(10,14,18,.72); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.35); }
.zap-tile-still { display: block; border-top: 1px solid var(--line); }
.zap-tile-still img { display: block; width: 100%; height: 64px; object-fit: contain; background: #000; }
.zap-tile-meta { display: flex; align-items: baseline; gap: 6px; padding: 6px 8px 8px; }
.zap-tile .disc-line { font-size: 12px; }
.zap-tile-price { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 14px; color: var(--text); }

/* 作品ページ：スマホでは表紙を小さく題名の左へ（動画を最初の画面に上げる） */
@media (max-width: 759px) {
  .item-top { grid-template-columns: 112px 1fr; gap: 12px; }
  .item-title { font-size: 17px; line-height: 1.35; }
  .item-top .thumb-lg { width: 112px; height: 160px; max-width: none; margin: 0; }
  .item-meta { margin-top: 12px; }
}
/* ザッピングの題名は2行まで */
.zap-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* PCではプレイヤーを最大640pxに抑える */
@media (min-width: 820px) {
  .zap-player, .item-video { max-width: 640px; margin-inline: auto; width: 100%; }
}

/* プレイヤー読み込み中の受け皿 */
.video-loading { position: relative; aspect-ratio: 16 / 9; }
.video-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: 12px; }
.video-face { position: absolute; inset: 0; z-index: 4; pointer-events: none; transition: opacity .18s ease; }
.video-face.is-out { opacity: 0; }
.video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 78px; height: 54px; border-radius: 12px; border: 1px solid rgba(255,255,255,.65); background: rgba(9,13,17,.62); display: flex; align-items: center; justify-content: center; z-index: 3; }
.video-play-tri { width: 0; height: 0; border-left: 19px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.zap-screen { position: relative; width: 100%; }
/* 作品ページ：PCでも表紙は題名の左に小さく（動画を最初の画面へ） */
@media (min-width: 760px) {
  .item-top { grid-template-columns: 160px 1fr; }
  .item-top .thumb-lg { width: 160px; height: 228px; max-width: none; margin: 0; }
}

/* 年齢確認のオーバーレイ（本文の上に重ねる。確認済みなら出さない） */
.gate-overlay { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 20px; overflow: auto; }
html.r18-ok .gate-overlay { display: none; }
.gate-card { width: 100%; max-width: 430px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px 18px; text-align: center; }
.gate-card .gate-title { font-size: 28px; margin: 0 0 10px; }
/* 一覧ページの全作品リンク */
.all-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.all-links a { font-size: 12px; color: var(--muted); }

/* 横はみ出し防止：カードが画像の原寸や長い文字列の最小幅に引っ張られないようにする */
.card { min-width: 0; }
.card-thumb-wide-link { min-width: 0; }
.thumb-wide { min-width: 0; }
.thumb-wide img { max-width: 100%; }
.card-meta { min-width: 0; }

/* ザッピングのスワイプ送り：プレイヤー端の送りゾーンと、情報エリアの横スワイプ受け */
.zap-info { touch-action: pan-y; }
.zap-zone {
  position: absolute; top: 0; height: 58%; width: 11%; min-width: 40px; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 30px; font-weight: 700; opacity: .38;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .85);
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
}
.zap-zone-prev { left: 0; }
.zap-zone-next { right: 0; }