/* つぎエロ 画像（表紙・サンプル）の見た目（2026-10-13 v1 CL-7）。
 * 画像を出す段階（stage.json の images_shown が true）の時だけ /static/ に書き出し、読み込む。出さない段階の出力には入らない。
 * 画像は拡大・縮小だけ（ぼかし・切り抜き・重ね書きはしない。DMM の決まり）。枠の縦横比を先に決め、読み込みで位置がずれないようにする。 */

/* 作品ページ：表紙とサンプルを全部、縦に（題名の下。表紙はサンプルの先頭。畳まない。2026-10-17 夜の決定）。ページの間はほぼ詰める（デザイン方針 2章） */
.gallery { margin: 0 0 1em; }
.shot { margin: 0; background: var(--panel); }
.shot-sample { background: none; }
.shot-cover, .shot-sample { margin-left: auto; margin-right: auto; }      /* 画面の高さに合わせて縮めた画像を、本文の枠の真ん中に（2026-10-18） */   /* サンプルの枠は画像と同じ形にするので、両側の地の色は要らない（下の幅の指定。j5） */
.shot-btn {
  display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none;
  line-height: 0; cursor: zoom-in;
}
.shot-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.shot-link { display: block; width: 100%; height: 100%; line-height: 0; }      /* 一覧のカード・シリーズの収録表の行の表紙：押すとその作品のページへ（拡大表示にはしない。2026-10-19） */
.shot img { display: block; width: 100%; height: 100%; object-fit: contain; color: transparent; }   /* 枠に収める（切り抜かない） */
/* 高さの上限は画面の高さに合わせる（PC では 730×1022px の枠が画面に収まらなかった。2026-10-17 h5）。枠の幅は変えず、画像は枠の中で縮むだけ（object-fit: contain。拡大・縮小だけ） */
.shot-cover { aspect-ratio: 3 / 4; width: min(100%, calc((100vh - 96px) * 3 / 4)); width: min(100%, calc((100dvh - 96px) * 3 / 4)); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); margin-bottom: 2px; }   /* サンプルと同じく、枠の幅を画面の高さに合わせる（縦の並びの先頭。高さの上限は同じ） */
.shot-sample { aspect-ratio: 5 / 7; width: min(100%, calc((100vh - 96px) * 5 / 7)); width: min(100%, calc((100dvh - 96px) * 5 / 7)); margin-bottom: 2px; }   /* 枠の幅を画面の高さに合わせる（高さの上限だけだと、枠が横に余って両側に約110pxの灰色の帯が出た。j5） */

/* 画像の枠の場所取り（2026-10-21 評価：画像が入る時に枠が開いて、最初の画面の買う欄が押し出される CLS 0.3〜0.5。画像が取れない時は最大 2）。
 * 枠は HTML では hidden（JS が無い時・年齢確認の前は場所を取らない）。年齢確認が済んでいる人（html の age-ok）には、表紙とサンプルの縦横比の枠を薄い地の色で
 * 最初から見せておく（高さは上の .shot-cover・.shot-sample の aspect-ratio のまま。画像が入っても高さは変わらない）。場所だけで、画像のボタンは見えず・押せない。
 * 取らないのは：images.js が html に images-off を付けた間（画像を隠す選び・急いで止めている間）と、販売終了に変わった枠（data-ended）。
 * 下の2列の組み方と site.css の題名の下の飛び先も、この間を「枠が出ている」と同じに扱う（そうしないと画像が入る時に1列から2列へ組み替わって動く） */
html.age-ok:not(.images-off) .gallery[data-gallery][hidden]:not([data-ended]) { display: block !important; }
html.age-ok:not(.images-off) .gallery[data-gallery][hidden]:not([data-ended]) .shot-btn { visibility: hidden; }
/* 読み込めなかった枠：画像を外し、場所（高さ）は残して小さな表示だけ（消すと下の枠と買う欄が動く） */
.shot-failed { display: flex; align-items: center; justify-content: center; }
.shot-fail { margin: 0; padding: 0 12px; font-size: 13px; line-height: 1.5; text-align: center; color: var(--muted); }

/* パソコン（幅861px以上）の2列（2026-10-18 決定「競合の分析の後の12問」②）：サンプル画像のある作品（work-2col）で、画像が出ている間だけ。
 * 左に表紙とサンプル（大きさの決め方は上のまま＝1枚が画面の高さに収まる）、右の列に「この作品について」（work-about：1行要約・札・苦手要素の要約・あらすじ。付いてこない＝sticky にしない）。
 * 値段とボタンの区切り・似た作品以降は、2列の下に全幅の1列で今のまま。画像を隠した時・年齢確認の前・販売終了に変わった時は、gallery が hidden になり1列に戻る（:not([hidden])）。
 * 狭い画面（860px以下）は変えない。DOM の順はスマホの順のままで、右の列の中の並べ替え（要約 → あらすじ）は order だけで行う */
@media (min-width: 861px) {
  .page:not(.has-side) > main:has(> .work-2col > .gallery:is(:not([hidden]), html.age-ok:not(.images-off) .gallery:not([data-ended]))) { max-width: none; }      /* 作品ページの真ん中寄せ（site.css）は1列のページだけ。2列は幅を使い切る */
  .work-2col:has(> .gallery:is(:not([hidden]), html.age-ok:not(.images-off) .gallery:not([data-ended]))) {
    display: grid; align-items: start; column-gap: 28px; max-width: none;
    grid-template-columns: minmax(0, min(56%, calc((100vh - 96px) * 5 / 7))) minmax(0, 1fr);
    grid-template-columns: minmax(0, min(56%, calc((100dvh - 96px) * 5 / 7))) minmax(0, 1fr);      /* 左の列＝サンプルの枠の幅（画面の高さに合わせる。上の .shot-sample と同じ式） */
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;      /* 2段目＝表紙・サンプルの欄、3段目＝その下の試し読みの箱、4段目＝その下のクーポンのバナーの枠（右の列の「この作品について」は2〜4段目にまたがる。余った高さは4段目が受けるので、箱と枠は表紙・サンプルのすぐ下に付く）、5段目＝値段とボタンの区切り */
  }
  .work-2col:has(> .gallery:is(:not([hidden]), html.age-ok:not(.images-off) .gallery:not([data-ended]))) > * { grid-column: 1 / -1; }      /* ふだんは全幅。左右に分けるのは下の3つだけ */
  .work-2col:has(> .gallery:is(:not([hidden]), html.age-ok:not(.images-off) .gallery:not([data-ended]))) > .work-head { grid-row: 1; }
  .work-2col:has(> .gallery:is(:not([hidden]), html.age-ok:not(.images-off) .gallery:not([data-ended]))) > .gallery { grid-column: 1; grid-row: 2; }
  .work-2col:has(> .gallery:is(:not([hidden]), html.age-ok:not(.images-off) .gallery:not([data-ended]))) > .work-about { grid-column: 2; grid-row: 2 / span 3; display: flex; flex-direction: column; }
  .work-2col:has(> .gallery:is(:not([hidden]), html.age-ok:not(.images-off) .gallery:not([data-ended]))) > .tachiyomi-box { grid-column: 1; grid-row: 3; }      /* 試し読みの箱（2026-10-24）：表紙・サンプルの欄のすぐ下、左の列の中 */
  .work-2col:has(> .gallery:is(:not([hidden]), html.age-ok:not(.images-off) .gallery:not([data-ended]))) > .coupon-box { grid-column: 1; grid-row: 4; }      /* クーポンのバナーの枠（2026-10-26）：試し読みの箱の下、左の列の中。箱が出ない作品でも枠は出る（別の要素） */
  .work-2col:has(> .gallery:is(:not([hidden]), html.age-ok:not(.images-off) .gallery:not([data-ended]))) > .divider { grid-row: 5; }
  .work-2col:has(> .gallery:is(:not([hidden]), html.age-ok:not(.images-off) .gallery:not([data-ended]))) > .work-about > * { order: 3; }      /* あらすじ・登場人物は最後（右の列は 1行要約 → 特徴の表 → あらすじ。2026-10-18） */
  .work-2col:has(> .gallery:is(:not([hidden]), html.age-ok:not(.images-off) .gallery:not([data-ended]))) > .work-about > .about-head { display: block; order: 0; margin: 0 0 10px; padding: 7px 12px; font-size: 16px; line-height: 1.4; background: var(--head-bg); border-bottom: 1px solid var(--border); border-left: 4px solid var(--brand); }
  .work-2col:has(> .gallery:is(:not([hidden]), html.age-ok:not(.images-off) .gallery:not([data-ended]))) > .work-about > .work-glance { order: 1; margin-top: 0; }
  .work-2col:has(> .gallery:is(:not([hidden]), html.age-ok:not(.images-off) .gallery:not([data-ended]))) > .work-about > .about-text { order: 1; }      /* 文とひとこと（2026-10-26）：1行要約のすぐ後（同じ order なら DOM の順＝1行要約の次）。特徴の表より上 */
  .work-2col:has(> .gallery:is(:not([hidden]), html.age-ok:not(.images-off) .gallery:not([data-ended]))) > .work-about > .features { order: 2; }
  .work-2col:has(> .gallery:is(:not([hidden]), html.age-ok:not(.images-off) .gallery:not([data-ended]))) > .work-about > .features > h2 { margin: 6px 0 10px; padding: 7px 12px; font-size: 16px; line-height: 1.4; background: var(--head-bg); border-bottom: 1px solid var(--border); border-left: 4px solid var(--brand); }      /* 「この作品の特徴」の見出しは「この作品について」と同じ帯（2026-10-26） */
  .work-2col:has(> .gallery:is(:not([hidden]), html.age-ok:not(.images-off) .gallery:not([data-ended]))) > .work-about > section > h2 { margin: 14px 0 6px; padding: 0 0 4px; background: none; border-left: 0; border-bottom: 1px solid var(--border); font-size: 15px; }      /* 序盤のあらすじ・登場人物：右の列の中では帯にせず小さな見出し */
}

/* 横長の行の左の表紙（作品ページの「この作品が好きなら」「続き」「作者のほかの作品」・紹介記事の「好きなら」。2026-10-18 決定）：PC 84px・スマホ 72px（3:4。拡大・縮小だけ）。
 * 押すと作品ページへ（拡大表示にはしない）。表紙が入った行（枠が出ている行）だけ、左に表紙・右にこれまでの中身を並べる。「画像を隠す」で枠が隠れれば元の形に戻る */
.work-row:has(> .row-cover:not([hidden])) { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.work-row > .row-cover { grid-column: 1; width: 84px; }
.work-row .row-cover a { position: relative; z-index: 1; }      /* 行全体を押せる題名のリンク（site.css）より前に出す（表紙も同じ飛び先） */
.work-row > .row-body { grid-column: 2; min-width: 0; }
.work-row:not(:has(> .row-cover:not([hidden]))) > .row-body { grid-column: auto; }
@media (max-width: 480px) {
  .work-row:has(> .row-cover:not([hidden])) { grid-template-columns: 72px minmax(0, 1fr); column-gap: 10px; }
  .work-row > .row-cover { width: 72px; }
}

/* 一覧のカード：左に小さな表紙（PC 84px・スマホ 72px。3:4） */
.cards.rows .card.has-cover { grid-template-columns: 84px minmax(0, 1fr) 200px; }
.card-cover { aspect-ratio: 3 / 4; width: 84px; align-self: start; }

/* トップの順位の段：順位の下に表紙（3:4。拡大・縮小だけ）、その下に題名。札の幅（150px）に収める */
.rank-cover { display: block; aspect-ratio: 3 / 4; width: 100%; margin: 2px 0; background: var(--panel); }
.rank-cover a { display: block; width: 100%; height: 100%; line-height: 0; }
.rank-cover img { display: block; width: 100%; height: 100%; object-fit: contain; color: transparent; }
.rank-cover[hidden] { display: none; }
/* ランキングのページの行の表紙（PC 176px・スマホ 114px。デザイン方針 6章）。行の2列目で、PC では題名から押す欄までの行をまたぐ（ranking.css。表紙の右に題名・値段・ボタンが縦に並ぶ） */
.rank-row .rank-cover { grid-column: 2; grid-row: 1 / span 6; align-self: start; width: 240px; margin: 0 14px 0 0; }      /* 2026-10-25 夜 目視の直し：240px（「右余白が大きすぎ」「画像の大きさを上げて」）。2026-10-23：表紙を大きく（84px→112px→176px。目視の意見：画像が小さく〈枠の中の画像は約106pxだった〉、行の右側の空白が目立つ） */
.rank-col[id$="-doujin"] .rank-row .rank-cover { aspect-ratio: 4 / 3; width: 240px; }      /* 2026-10-25 夜 目視の直し：240px（ブックスと同じ幅）。同人の表紙は横長なので、枠も横長に（C4 と同じ考え）。幅は 160〜180px の上限（以前は 140px） */

/* 一覧の行の左の表紙（72px。3:4。拡大・縮小だけ。h1）：/sale/ の行・トップの0円と割引の段の札・/fav/ の行。JS が描いた行に images.js が入れる。
   表紙が入った行（has-cover）だけ、左に表紙・右にこれまでの中身を縦に並べる。押すと作品ページへ */
.row-cover { display: block; aspect-ratio: 3 / 4; width: 72px; background: var(--panel); }
.row-cover a { display: block; width: 100%; height: 100%; line-height: 0; }
.row-cover img { display: block; width: 100%; height: 100%; object-fit: contain; color: transparent; }
.row-cover[hidden] { display: none; }
.sale-row.has-cover, .free-item.has-cover, .saleend-item.has-cover, .fav-list li.has-cover {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 10px; align-items: start;
}
:is(.sale-row, .free-item, .saleend-item, .fav-list li).has-cover > .row-cover { grid-column: 1; grid-row: 1 / span 8; }
:is(.sale-row, .free-item, .saleend-item, .fav-list li).has-cover > :not(.row-cover) { grid-column: 2; min-width: 0; }      /* JS で描く行だけ（一覧のカード .card・収録表の行 .ep-row には当てない。2026-10-17：/all/ などのカードが全部2列目に落ちていた） */
.free-item.has-cover, .saleend-item.has-cover { flex-basis: 240px; }
.fav-list li.has-cover > .fav-remove { justify-self: end; }      /* 格子の中でボタンが横いっぱいに伸びないように。表紙の無い行と同じ、右の端（j5） */

/* 大きな縦長のカードの表紙（2026-10-18 作り直し 3-2。トップの4つの段・探すページの結果）：カードの幅いっぱい（3:4。拡大・縮小だけ）。
   押すと作品ページへ（拡大表示にはしない）。枠は画像を入れる時に images.js が出す（hidden を外す）。画像が無い間・無い作品は、枠を出さない（文字だけの詰めたカード）。
   上の .free-top .row-cover（56px）より後ろに書き、詳しさ（クラス3つ）でも勝つ */
.bcard > .row-cover.bc-cover { display: block; width: 100%; aspect-ratio: 3 / 4; margin: 0 0 2px; background: var(--panel); }
.bcard > .row-cover.bc-cover[hidden] { display: none; }
/* 同人の表紙は横長なので、カードの表紙の枠も横長（4:3）に（2026-10-22 C4）。HTML の big_card と bigCardNode が data-floor="doujin" を付ける。ブックスは 3:4 のまま。
 * 画像は切り抜かない（上の .row-cover img の contain）。場所取り（下の age-ok の規則）は枠の比を変えず display だけなので、この比がそのまま場所になる（CLS を増やさない） */
.bcard[data-floor="doujin"] > .row-cover.bc-cover { aspect-ratio: 4 / 3; }
/* 格子のカード（.bcards-lg：セール・似た作品・新作）の表紙の枠は、年齢確認が済んでいる人（html の age-ok）には場所を最初から取っておく（2026-10-21）。
 * 画像が入る時に枠が開いてカードが縦に伸び、下の並びが動く（CLS）のを出さない。作品ページのサンプルの枠と同じ考え（上の .gallery の場所取り）。場所だけで、画像は
 * 入ってから見える。取らないのは、images.js が html に images-off を付けた間（画像を隠す選び・急いで止めている間）と、販売終了に変わった枠（data-ended） */
html.age-ok:not(.images-off) .bcards-lg .bcard > .row-cover.bc-cover[hidden]:not([data-ended]) { display: block !important; }
/* トップの帯（.bc-strip：おすすめ・新作・人気順・人気のセール・0円・もうすぐ終わるセール・最近見た作品）も同じ（2026-10-23 トップの改善 P1）。パソコンの帯を5×2の格子にしたので、画像が入る時に1段目が伸びて
 * 2段目と下の並び全部が動く（測った CLS：1,280px で 0.108 → 見本の格子 0.201）のを出さない */
html.age-ok:not(.images-off) .bc-strip .bcard > .row-cover.bc-cover[hidden]:not([data-ended]) { display: block !important; }

/* フッターの「画像を隠す」（K10。images.js が入れる） */
.images-toggle { margin: 0.4em 0; }

/* 拡大表示：画面いっぱい。下に FANZA へのボタンと PR 表記（作品ページの区切りと同じ部品） */
.zoom-dialog {
  width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0;
  border: 0; background: var(--bg); color: var(--fg);
}
.zoom-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.zoom-box { display: flex; flex-direction: column; height: 100%; }
.zoom-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--panel);
}
.zoom-count { font-size: 13px; color: var(--muted); }
.zoom-stage {
  flex: 1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr);
  align-items: center; gap: 8px; padding: 8px; background: var(--page-bg);
}
.zoom-view { min-width: 0; min-height: 0; height: 100%; }
/* 列を決めておく（2026-10-24 夜：画像が1枚の時は前へ・次へが隠れ、画像が左の列に詰まって真ん中に来なかった） */
.zoom-prev { grid-column: 1; }
.zoom-view { grid-column: 2; }
.zoom-next { grid-column: 3; }
/* 画像の要素は描かれた絵の大きさ（枠いっぱいにしない）：押して FANZA へ移るのは絵の範囲だけ（余白を押しても移らない。2026-10-24 B1） */
.zoom-view { display: flex; align-items: center; justify-content: center; }
.zoom-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.zoom-img.is-link { cursor: pointer; }
.zoom-pr { width: 100%; margin: 4px 0 0; padding: 0 12px; box-sizing: border-box; text-align: center; color: var(--fg); }      /* 画像の下の PR の一文（本文と同じ大きさ・色） */
.zoom-action { padding: 8px 12px; border-top: 1px solid var(--border); background: var(--bg); }
.zoom-action .store-action { margin: 0; }

/* トップの新作の札：表紙を入れる枠は順位の段と同じ（.rank-cover）。札は細いので、表紙はそのまま札の幅に収まる */
.new-item .new-cover { margin: 0 0 2px; }

/* トップの0円・もうすぐ終了の札の表紙は小さく（56px。2026-10-17 h6） */
.free-top .row-cover, .saleend-top .row-cover { width: 56px; }
.free-top .free-item.has-cover, .saleend-top .saleend-item.has-cover { flex-basis: 208px; grid-template-columns: 56px minmax(0, 1fr); column-gap: 8px; }

@media (max-width: 480px) {
  .cards.rows .card.has-cover { grid-template-columns: 72px minmax(0, 1fr); }
  .cards.rows .card.has-cover .card-side { grid-column: 1 / -1; }
  .card-cover { width: 72px; }
  .rank-row .rank-cover { grid-row: 1 / span 2; width: 114px; }      /* 2026-10-23：88px の 1.3 倍 */
  .rank-col[id$="-doujin"] .rank-row .rank-cover { width: 128px; }      /* 112px の約 1.15 倍（1.3 倍の 146px にすると、右の題名・ボタンの列が 110px になり、ボタンの文字が4行に割れた） */
  .zoom-stage { padding: 4px; gap: 4px; }
  .zoom-stage .btn-plain { padding: 8px 6px; }
}

/* シリーズの収録表の行の表紙（72px。h7。card と同じ部品。表紙が入った行だけ左に表紙を置く）。上の .has-cover > :not(.row-cover)（中身を全部2列目へ）が
   当たるので、部品の列を指定し直す */
.ep-row.has-cover { grid-template-columns: 72px minmax(0, 1fr) auto minmax(0, 290px); column-gap: 12px; }
.ep-row .card-cover { width: 72px; }
.ep-row.has-cover > .card-cover { grid-column: 1; grid-row: 1 / span 4; }
.ep-row.has-cover > .ep-title, .ep-row.has-cover > .ep-meta, .ep-row.has-cover > .ep-notes { grid-column: 2; }
.ep-row.has-cover > .ep-price { grid-column: 3; }
.ep-row.has-cover > .store-action { grid-column: 4; grid-row: 1 / span 3; }
/* 同人の行（li に data-floor="doujin"）は表紙の枠を横長（4:3）に。幅は横長でも小さくなりすぎないよう 96px（ブックスは 72px・3:4 のまま。カードの 2026-10-22 C4 と同じ考え）。
   画像は切り抜かない（.shot img の contain）。スマホでも同じ幅（列の指定は上の .ep-row.has-cover より詳しさで勝つ） */
.ep-row[data-floor="doujin"] .card-cover { aspect-ratio: 4 / 3; width: 96px; }
.ep-row[data-floor="doujin"].has-cover { grid-template-columns: 96px minmax(0, 1fr) auto minmax(0, 290px); }
/* 新作の小さな行の表紙（compact。PC でも72px）。上の .has-cover > :not(.row-cover)（中身を全部2列目へ）が .card にも当たるので、
   compact の行は列を指定し直す。スマホでは値段とボタンを表紙と題名の下に、行の幅いっぱいで置く（ボタン・PR が1行に収まる） */
.cards.rows .card.card-compact.has-cover { grid-template-columns: 72px minmax(0, 1fr) 290px; }
.cards.rows .card.card-compact.has-cover > .card-cover { grid-column: 1; grid-row: 1; width: 72px; }
.cards.rows .card.card-compact.has-cover > .card-body { grid-column: 2; grid-row: 1; }
.cards.rows .card.card-compact.has-cover > .card-side { grid-column: 3; grid-row: 1; }
@media (max-width: 480px) {
  .ep-row.has-cover { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .ep-row[data-floor="doujin"].has-cover { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .ep-row.has-cover > .card-cover { grid-row: 1 / span 2; }
  .ep-row.has-cover > .ep-meta, .ep-row.has-cover > .ep-notes { grid-column: 2 / -1; }
  .ep-row.has-cover > .store-action { grid-column: 1 / -1; grid-row: auto; }      /* ボタンと PR は表紙の下で行の幅いっぱい（1行に収まる） */
  .cards.rows .card.card-compact.has-cover { grid-template-columns: 72px minmax(0, 1fr); }
  .cards.rows .card.card-compact.has-cover > .card-side { grid-column: 1 / -1; grid-row: 2; }
}

/* トップの右の列のまとめ記事のカード（2026-10-24 第3版）：表紙が出ている時だけ、左に表紙（72px）・右に題名の2列。出ていない間（年齢確認の前・画像を隠す・読み込み失敗）は題名だけ */
.mt-card:has(> .mt-cover:not([hidden])) { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.mt-card > .mt-cover { grid-column: 1; grid-row: 1 / span 2; }
.mt-card:has(> .mt-cover:not([hidden])) > :not(.mt-cover) { grid-column: 2; }
/* トップの右の列（1,280px 以上）のランキング：表紙は 170px まで（左寄せ。番号の印を左上に重ねるため）。それより狭い画面は site.css の格子の幅いっぱい */
@media (min-width: 1280px) {
  main.top-main .top-right .rank-top .bcard > .row-cover.bc-cover { width: 170px; max-width: 100%; margin: 0 0 2px; }
}