/* ============================================================
   work_pages_final.css
   話数別（episode）／単独作品（single）／総集編（omnibus）ページ 最終CSS統合版
   Claude作成の各モックHTML（episode_full_v128／single_work_mock_v8／
   omnibus_page_mock_v34）の<style>内容から、過去バージョンの上書き履歴・
   コメントを除去し、最終的に有効なルールだけを抽出・統合したもの。

   重要：SP判定方式について
   元のモックファイルには @media は一切使用されておらず、全てのスマートフォン表示は
   JS（setV()）で記事コンテナに .sp クラスを付け外しすることで疑似的に再現されていた
   （PC/SP切替ボタンによるデモ専用の仕組み）。本番実装では実際のビューポート幅で
   切り替える必要があるため、このCSSでは全ての .sp スコープ規則を
   @media (max-width: 599px) ブロックに変換している。
   599pxは既存のSmart Slider PC/SP切替と子テーマの作品ページ境界に合わせた確定値。
   ============================================================ */


/* ============ 作品ページ用共通トークン ============ */

.hd-work-page,
.hd-work-page .article {
  --c-main:#5FA98A;
  --c-dark:#2C5E47;
  --c-light:#E7F1EB;
  --c-light2:#EFF6F1;
  --c-border:#BBD9C8;
  --c-meta:#6FA98D;
  --c-hover:#D4E8DD;
  --c-border-strong:#9FC7B0;
  --fanza:#F97316;
  --sale:#E24B4A;
  --violet:#6B3FA0;
  --violet-bg:#F4EEF7;
  --violet-border:#CBB0DD;
  --amber:#B08D2E;
  --container-wide:1080px;
  --container-medium:960px;
  --container-narrow:800px;
  --container-episode:880px;
  --num:'Inter','Noto Sans JP',sans-serif;
}

/*
 * The SWELL child theme carried two "final guard" blocks here, both
 * scoped to .hd-work-page and using either higher specificity or
 * !important to defend these exact same declarations against SWELL's
 * (or the pre-1.3.x child theme's) own same-named classes/variables
 * cascading in afterward. Every declaration in both blocks was confirmed
 * to duplicate a canonical rule that already exists later in this same
 * file (e.g. .data-box-header-meta-value, .ep-summary-text,
 * .work-price .now) or an existing CSS variable (--c-light2 == #EFF6F1
 * for .reco-sec .rec-item's background) -- see
 * release-records/theme-independent-1.0.0-phase2-work-pages.md for the
 * selector-by-selector duplication check. Dropped entirely: there is no
 * parent theme here to defend against, and the values themselves are
 * unchanged because they were never unique to this block in the first
 * place. #main_content.hd-work's own box-sizing/width/margin reset
 * (fighting SWELL's #main_content float/width) and its child
 * .hd-work__container.article margin reset (redundant with
 * .hd-work__container's own margin-inline:auto, ported below from
 * style.css) are dropped the same way.
 */

/* ============================================================
   セクション1：話数別・単独作品・総集編　3ページ共通（PC）
   ============================================================ */

/*
 * Ported from swell_child/style.css (the SWELL child theme's base
 * stylesheet, not work-pages.css) -- .hd-work/.hd-work__container are
 * the outer containers single-work.php's own #hd-work div uses.
 * .hd-work__container's width:min(100%,1040px) is this site's approved
 * work-page content width (unchanged). .hd-work's own padding here was
 * already fully superseded on the live site by
 * prelaunch-adjustments.css's later-loading, !important
 * .hd-work-page #main_content.hd-work rule (20px 14px 28px PC / 8px 0
 * 16px SP) -- ported as this rule's real value below instead of the
 * value that was already dead code before this migration.
 */
.hd-work {
  color:#333;
}

.hd-work__container {
  width:min(100%, 1040px);
  margin-inline:auto;
}

.hd-work a {
  text-underline-offset:0.18em;
}

#hd-work {
  padding:20px 14px 28px;
}

@media (max-width:599px) {
  #hd-work {
    padding:8px 0 16px;
  }
}

.article {
  max-width:var(--container-episode);
  margin:0 auto;
  background:#fff;
  padding:24px 22px 30px;
  transition:max-width .2s;
}

.article *,
.article *::before,
.article *::after {
  box-sizing:border-box;
}

/*
 * Production bug: near 901px, .article itself (not just its descendants)
 * ran past the viewport. Root cause (live-measured via a static reproduction
 * of this file's own cascade): style.css's `.hd-work__container` rule sets
 * `width:min(100%,880px)` and this rule's own `padding:24px 22px 30px`
 * (22px each side) both apply to the same element, but neither this rule
 * nor style.css's ever set box-sizing on .article itself — only the
 * `.article *` reset above covers descendants. Under the browser's default
 * content-box, `max-width:880px`/`width:min(100%,880px)` caps the CONTENT
 * box at 880px and the 22px+22px padding is added on top, so whenever that
 * cap binds (roughly viewport >=~924px, i.e. as soon as .article's parent
 * offers >=880px of content room) the rendered .article is actually 924px
 * wide, not 880px. That 44px excess is harmless when the viewport has slack
 * (960px+), but at 901-~923px it pushes past the viewport, confirmed via
 * getBoundingClientRect/scrollWidth: 901px viewport -> .article ~902-924px
 * wide with the page horizontally scrollable.
 *
 * Fixed by making .article a border-box for its own width/max-width/padding
 * math too, so 880px becomes the TOTAL (outer) width including padding,
 * matching the --container-episode design token exactly at every width
 * that binds the cap (901px and up), instead of only implying it. Confirmed
 * this does not touch the <=900px block below (separate rule, separate
 * width:100% + padding, untouched) or the 1-2/3+ heroine .hratio-list rules
 * (both already flex/grid with fr-based sizing, and unaffected by their
 * container's box-sizing).
 */
@media (min-width:901px) {
  .hd-work-page .article {
    box-sizing:border-box;
  }
}

/*
 * QA fix (1.0.18): the 1.0.16 density redesign had moved the
 * related-work rails (話数一覧/同サークル/あわせて読みたい) into a
 * sibling .hd-work__related box (width:min(100%,1040px)) to reach the
 * wider --container-wide 1040px token. Production QA confirmed these
 * three pages' PC content column is 880px (--container-episode), not
 * 1040px, so that wider box was overflowing past the white .article
 * panel. single-work.php now renders related.php back inside .article
 * (as its last child, same as before 1.0.16), so .hd-work__related and
 * its rules (padding/margin/overflow-x tuning) are removed entirely --
 * there is no longer a second box to size. The 230px/163px fixed card
 * widths and 10px gap are unchanged; within .article's normal 880px/22px
 * padding box they now naturally show 3 full PC cards plus part of a
 * 4th, instead of 4 full plus part of a 5th.
 */

.data-band {
  margin:1.7rem -22px;
  padding:0 22px;
}

.data-band.wide {
  margin:2rem -22px;
}

.data-band.wide.reco-band-end {
  margin-bottom:1.7rem;
}

.data-band>.data-box,.data-band>.box,.data-band>.ptype-sec,
  .data-band>.heroine-sec,.data-band>.scene-sec,.data-band>.reco-sec {
  margin:0;
}

.num {
  font-family:var(--num);
}

h1.ep-h1 {
  font-size:21px;
  font-weight:700;
  color:#333333;
  line-height:1.45;
  margin-bottom:16px;
}

.seclab {
  font-family:var(--num);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  color:#999999;
  text-transform:uppercase;
  margin:26px 0 -2px;
}

.slider-ph {
  aspect-ratio:16/10;
  border-radius:8px;
  background:linear-gradient(135deg,var(--c-main),color-mix(in srgb,var(--c-main) 58%,#000));
  display:grid;
  place-items:center;
  margin-bottom:8px;
}

.slider-ph span {
  color:rgba(255,255,255,.85);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
}

.slider-ph.sub {
  aspect-ratio:21/5;
  margin-bottom:0;
}

.series-nav .sn-name {
  font-size:14px;
  font-weight:700;
  color:#333333;
  line-height:1.4;
  margin-bottom:8px;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.series-nav .sn-all {
  margin-left:auto;
  color:var(--c-dark);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1.3px;
  font-size:12.5px;
  white-space:nowrap;
  flex-shrink:0;
}

.series-nav .sn-divider {
  border-top:.5px solid var(--c-border);
  margin:11px 0 10px;
}

.series-nav .sn-position {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.omni-notice {
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--violet-bg);
  border:1px solid var(--violet-border);
  border-radius:14px;
  padding:16px 20px;
  margin:1.7rem 0;
}

.omni-notice .on-icon {
  width:44px;
  height:44px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:50%;
  color:var(--violet);
}

.omni-notice .on-t {
  flex:1;
  min-width:0;
}

.omni-notice .on-h {
  font-size:15px;
  font-weight:700;
  margin-bottom:2px;
  color:var(--violet);
}

.omni-notice .on-d {
  font-size:13.5px;
  color:#333333;
  line-height:1.6;
}

.omni-notice .on-d b {
  font-weight:700;
  color:#333333;
}

.omni-notice .on-btn {
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--violet);
  color:#fff;
  font-size:13px;
  font-weight:700;
  padding:10px 18px;
  border-radius:8px;
  text-decoration:none;
  white-space:nowrap;
}

.data-box {
  background:#fff;
  border:1px solid var(--c-border-strong);
  border-radius:12px;
  overflow:hidden;
  margin:1.3rem 0;
}

.data-box-header {
  background:var(--c-light);
  border-bottom:.5px solid #e0e0e0;
  padding:8px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.data-box-header-label {
  font-size:14px;
  font-weight:bold;
  color:#333333;
  letter-spacing:.06em;
}

.data-box-header-right {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.data-box-header-meta {
  display:flex;
  align-items:center;
  gap:4px;
}

.data-box-header-meta-label {
  font-size:13px;
  color:#555555;
}

/*
 * Shared pill spec (also used by .tag-chip below, and duplicated in
 * assets/series-master-v42.css for .hd-master-data-box .data-box-header-
 * meta-value / .tag-chip since the master page loads its own stylesheet,
 * not this file): font-size 13px, weight 700, min-height 30px via
 * align-items:center (not a fixed height), 10px left/right padding, 1px
 * border, 20px radius, 3px gap, 5.5x5.5px chevron. Keep both copies in
 * sync if this spec changes.
 */
.data-box-header-meta-value {
  font-size:13px;
  font-weight:bold;
  color:var(--c-dark);
  background:var(--c-light);
  border:1px solid var(--c-border-strong);
  border-radius:20px;
  min-height:30px;
  padding:2px 10px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:3px;
}

.data-box-header-meta-value::after {
  content:"";
  flex:0 0 auto;
  width:5.5px;
  height:5.5px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}

.data-box-header-divider {
  width:.5px;
  height:14px;
  background:var(--c-border);
}

.data-box-grid-4 {
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.data-box-item {
  padding:12px 16px;
  border-right:1px solid var(--c-border-strong);
  border-bottom:1px solid var(--c-border-strong);
}

/* The last cell's own border-right sits flush against .data-box's own
   1px right border, doubling the line width at that one edge only
   (the left edge only ever shows .data-box's own border, since no cell
   has a border-left). Drop the redundant cell-level border there. */
.data-box-item:last-child {
  border-right:0;
}

.data-box-item-label {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:13px;
  color:#555555;
  margin-bottom:4px;
  white-space:nowrap;
}

.dbi-icon {
  color:var(--c-main);
  flex-shrink:0;
}

.data-box-item-value {
  font-family:var(--num);
  font-size:18px;
  font-weight:bold;
  color:#333;
  display:flex;
  align-items:baseline;
  gap:3px;
}

.data-box-item-value.sm {
  font-size:15px;
}

.data-box-item-unit {
  font-size:12px;
  font-weight:normal;
  color:#999999;
}

.data-box-color-badge {
  font-family:'Noto Sans JP';
  display:inline-flex;
  align-items:center;
  gap:3px;
  background:#FFF6E0;
  color:#8A6512;
  font-size:13px;
  font-weight:bold;
  padding:2px 10px;
  border-radius:20px;
  border:1px solid #E9CE8C;
  margin-left:4px;
  text-decoration:none;
}

.data-box-color-badge::after {
  content:"";
  flex:0 0 auto;
  width:5.5px;
  height:5.5px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}

.data-box-play-3p {
  font-size:18px;
  font-weight:bold;
  color:var(--c-dark);
}

.data-box-tags.tag-groups {
  padding:10px 16px 12px;
  display:flex;
  flex-direction:column;
}

.data-box-tags-label {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:13px;
  color:#555555;
  margin-bottom:14px;
}

.tag-group {
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.tag-group + .tag-group {
  margin-top:14px;
}

.tag-group-label {
  flex:0 0 108px;
  font-size:12.5px;
  color:#555555;
  padding-top:4px;
  text-align:right;
  white-space:nowrap;
}

.tag-group-chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  flex:1;
  min-width:0;
}

/* Shared pill spec — see .data-box-header-meta-value above. */
.tag-chip {
  display:inline-flex;
  align-items:center;
  gap:3px;
  background:var(--c-light);
  color:var(--c-dark);
  font-size:13px;
  font-weight:bold;
  min-height:30px;
  padding:2px 10px;
  border-radius:20px;
  border:1px solid var(--c-main);
  text-decoration:none;
}

.tag-chip::after {
  content:"";
  flex:0 0 auto;
  width:5.5px;
  height:5.5px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}

.tag-groups-more {
  display:none;
}

.tag-groups-more .pill-arrow {
  font-size:9px;
}

/*
 * Issue #155 fix1: .purchase-box and everything inside it (including its
 * SP breakpoint further below, formerly part of this file's own
 * @media(max-width:599px) block) moved to the new shared
 * assets/css/purchase-box.css -- see that file's own docblock. This is now
 * the single source of truth for the work page's purchase box AND the
 * matome-series [paimori_purchase_card] shortcode; enqueued here as an
 * explicit dependency of paimori-work-pages (functions.php) so load order
 * is unchanged from before this split.
 */

.ep-pos-tag {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#555555;
  font-weight:700;
  white-space:nowrap;
  font-size:13px;
}

.ep-pos-tag .ep-pos-label {
  color:#555555;
  font-weight:400;
}

.ep-pos-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:700;
  color:#fff;
  padding:5px 12px;
  border-radius:4px;
  white-space:nowrap;
}

.ep-pos-badge svg {
  flex-shrink:0;
}

.ep-pos-badge.go {
  background:var(--c-main);
}

.ep-summary-icon {
  width:34px;
  height:34px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--violet-bg);
  border-radius:50%;
  color:var(--violet);
}

.ep-summary-label {
  font-size:13px;
  font-weight:bold;
  color:var(--violet);
  letter-spacing:.04em;
  margin:0 0 4px;
  display:block;
}

.ep-summary-text {
  font-size:17px;
  font-weight:700;
  color:#333333;
  line-height:1.6;
}

.box {
  background:#fff;
  border:1px solid var(--c-border-strong);
  border-radius:12px;
  overflow:hidden;
  margin:1.6rem 0;
}

.box-h {
  background:var(--c-light);
  border-bottom:.5px solid #e0e0e0;
  padding:8px 16px;
  display:flex;
  align-items:center;
  gap:8px;
}

.box-h .lab {
  margin:0;
  font-size:14px;
  font-weight:bold;
  color:#333333;
  letter-spacing:.06em;
}

.box-h .ico {
  width:22px;
  height:22px;
  border-radius:6px;
  background:var(--c-main);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  flex-shrink:0;
}

.box-h .ico.outline {
  background:#fff;
  color:var(--c-main);
  border:1.5px solid var(--c-main);
}

.box-body {
  padding:14px 16px;
}

.body-text {
  font-size:15px;
  color:#333;
  line-height:1.8;
}

.synopsis-flex .body-text {
  flex:1;
  min-width:0;
  font-size:15px;
  color:#333;
  line-height:1.85;
}

.sec-plain {
  margin-top:1.7rem;
  margin-bottom:calc(1.7rem + 6px);
}

.sec-plain .sec-jp {
  font-size:19px;
  font-weight:700;
  color:#333333;
  display:block;
  margin-bottom:4px;
}

.synopsis-flex {
  margin-top:10px;
}

.trend-body {
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.trend-block {
  position:relative;
}

.trend-unit {
  position:relative;
  z-index:1;
  background:#fff;
  padding:2px 14px;
  width:fit-content;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.trend-il {
  display:inline-block;
  font-size:13px;
  font-weight:bold;
  color:var(--c-dark);
  background:var(--c-light);
  border:1px solid var(--c-main);
  border-radius:4px;
  padding:2px 8px;
}

.trend-row {
  display:flex;
  align-items:center;
  gap:16px;
}

.trend-track {
  flex:0 0 440px;
  max-width:440px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:60px;
}

.trend-left,.trend-right {
  font-size:14px;
  color:#333;
  width:95px;
  min-width:95px;
  flex-shrink:0;
  white-space:nowrap;
}

.trend-left {
  text-align:right;
}

.trend-line {
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  height:1.5px;
  background:#ddd;
}

.trend-dot {
  width:14px;
  height:14px;
  border-radius:50%;
  background:#e8e8e8;
  border:1.5px solid #ccc;
  z-index:1;
}

.trend-dot.active {
  background:var(--c-main);
  border-color:var(--c-main);
  width:18px;
  height:18px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c-main) 20%,transparent);
}

.trend-divider {
  border:none;
  border-top:.5px solid #f0f0f0;
}

.trend-desc {
  border-top:1px solid var(--c-border-strong);
  background:#fff;
  padding:13px 16px 15px;
}

.trend-desc .l-row {
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:5px;
}

.trend-desc p {
  font-size:15px;
  color:#333;
  line-height:1.8;
}

.trend-desc-tag {
  display:inline-block;
  font-size:13px;
  font-weight:bold;
  color:#fff;
  background:var(--c-main);
  border:1px solid var(--c-main);
  border-radius:4px;
  padding:2px 8px;
}

.trend-desc-suffix {
  font-size:14px;
  font-weight:400;
  color:#333333;
}

.trend-il-hl {
  background:var(--c-main);
  color:#fff;
  border-color:var(--c-main);
}

.ptype-sec {
  margin:2rem 0;
}

.ptype-sec-lab {
  font-size:19px;
  font-weight:700;
  color:#333333;
  margin:0 0 10px;
}

.ptype-sec-row {
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  column-gap:16px;
  row-gap:10px;
  align-items:center;
}

.ptype-badge {
  grid-column:1;
  grid-row:1;
  justify-self:center;
  align-self:center;
  font-size:15px;
  font-weight:bold;
  color:var(--c-dark);
  background:var(--c-light);
  border:1px solid var(--c-main);
  padding:5px 14px;
  border-radius:4px;
  white-space:nowrap;
}

.ptype-desc {
  grid-column:2;
  grid-row:1;
  align-self:center;
  font-size:15px;
  color:#333;
  line-height:1.7;
}

.ptype-meter {
  display:contents;
}

.ptype-meter-row {
  display:contents;
}

.ptype-meter-label {
  grid-column:1;
  justify-self:center;
  font-size:14px;
  font-weight:bold;
  color:#555555;
  white-space:nowrap;
}

.ptype-meter-seg {
  flex:1;
  height:12px;
  border-radius:4px;
  background:#e0e0e0;
}

.ptype-meter-seg.on {
  background:var(--c-main);
}

.ptype-meter-row:first-child .ptype-meter-label,
  .ptype-meter-row:first-child .ptype-meter-bar {
  margin-top:10px;
}

/*
 * "胸の見どころ" section. The pill itself reuses the existing .tag-chip
 * (colors/shape/font/trailing arrow/link styling unchanged, matching the
 * work-genre tag box's pill). The category-grouped layout, however, uses
 * its own .bust-cat-* classes (not .tag-group/.tag-group-label/
 * .tag-group-chips) -- the shared genre tag box lays its category label to
 * the *left* of a horizontal chip row, but this section's confirmed design
 * (diff-v4) stacks the category label *above* its own left-aligned,
 * wrapping chip row instead, so reusing .tag-group's own layout rules would
 * have been wrong here. Scoped entirely to this section so no work-genre
 * (or any other) tag display is affected.
 */
.bust-sec {
  margin:2rem 0;
}

.bust-sec-lab {
  font-size:19px;
  font-weight:700;
  color:#333333;
  margin:0 0 10px;
}

.bust-groups {
  display:flex;
  flex-direction:column;
  gap:14px;
}

.bust-cat-group {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

.bust-cat-label {
  font-size:13px;
  font-weight:700;
  color:#333333;
  text-align:left;
}

.bust-cat-chips {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:8px;
}

.heroine-sec {
  margin:2rem 0;
}

.heroine-sec-lab {
  font-size:19px;
  font-weight:700;
  color:#333333;
  margin:0 0 10px;
}

.heroine-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.heroine-card {
  background:#fff;
  border:1px solid var(--c-border-strong);
  border-radius:12px;
  box-shadow:0 4px 16px rgba(44,94,71,.1);
  transition:box-shadow .15s;
}

.heroine-img {
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:12px 12px 0 0;
  display:grid;
  place-items:center;
  background:#fff;
  color:rgba(255,255,255,.8);
  font-size:11px;
  font-weight:700;
  position:relative;
}

.heroine-img img {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

.heroine-text {
  padding:12px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.heroine-name-row {
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}

.heroine-name {
  font-size:16px;
  font-weight:700;
  color:#333333;
}

.heroine-attr {
  font-size:11px;
  font-weight:700;
  color:var(--c-dark);
  background:var(--c-light);
  border:1px solid var(--c-main);
  border-radius:4px;
  padding:2px 7px;
}

.heroine-desc {
  font-size:15px;
  color:#333;
  line-height:1.6;
}

.scene-sec {
  margin:2rem 0;
}

.scene-sec-lab {
  font-size:19px;
  font-weight:700;
  color:#333333;
  margin:0 0 12px;
}

.hratio-sec {
  margin:2rem 0;
}

.hratio-sec-lab {
  font-size:19px;
  font-weight:700;
  color:#333333;
  margin:0 0 10px;
}

.hratio-note {
  font-size:15px;
  font-weight:400;
  color:#333333;
  margin:12px 0 0;
}

.hratio-list {
  display:flex;
  align-items:center;
  gap:32px;
  margin-bottom:4px;
}

.hratio-row {
  display:flex;
  align-items:center;
  gap:14px;
}

.hratio-thumb {
  width:132px;
  flex-shrink:0;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:rgba(255,255,255,.75);
  font-size:10px;
}

.hratio-thumb:empty {
  background:linear-gradient(135deg,var(--c-main),color-mix(in srgb,var(--c-main) 58%,#000));
}

.hratio-thumb img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

.hratio-thumb.noimg {
  background:var(--c-light2);
  border:1px dashed var(--c-border);
  color:var(--c-border);
}

.hratio-info {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}

.hratio-name {
  font-size:15px;
  font-weight:700;
  color:#333333;
  white-space:nowrap;
}

.hratio-pct {
  font-family:var(--num);
  line-height:1;
  white-space:nowrap;
}

.hratio-pct.lg {
  font-size:40px;
  font-weight:700;
  color:var(--c-main);
}

.hratio-pct.md {
  font-size:28px;
  font-weight:700;
  color:#333333;
}

.hratio-pct.sm {
  font-size:20px;
  font-weight:700;
  color:#999999;
}

/*
 * Production bug: with 3 heroines, the 3rd .hratio-row ran past the
 * .article's 880px content width on PC. Root cause (live-measured): at
 * >=901px .hratio-thumb is upsized to 198px (prelaunch-adjustments.css's
 * own @media(min-width:901px) rule), and .hratio-list is an unconstrained
 * `display:flex` row with no wrap and no per-row width limit — each
 * .hratio-row just takes its natural width (thumb 198px + 14px internal
 * gap + the .hratio-info column's own content width, driven by
 * white-space:nowrap on .hratio-name and the un-wrappable percentage
 * figure). 3 such rows plus 2x the list's 32px gap measured ~1089px,
 * ~209px past the 880px container — confirmed identical with 1 or 2
 * heroines (2x341px+32px=~714px, well under 880px, which is why this only
 * ever showed up with 3).
 *
 * Fixed by switching only the 3-heroine case to a 3-column CSS grid with
 * shrinkable (minmax(0,1fr)) columns, scoped with :has() so 1- and
 * 2-heroine rows keep their original flex layout and natural (unstretched)
 * width untouched. .hratio-thumb is reduced from the 901px-and-up 198px to
 * 140px only inside that 3-column grid — live-measured as enough headroom
 * to keep even the widest un-wrappable content (a 3-digit "100%" at the
 * "lg" emphasis size, ~113px natural width) comfortably inside the
 * remaining ~126px info column without shrinking any font size. Emphasis
 * sizes (.hratio-pct.lg/md/sm), colors, and the percentage/ratio values
 * themselves are untouched — only .hratio-name is allowed to wrap
 * (white-space:normal + overflow-wrap:anywhere) instead of forcing a
 * single unbreakable line.
 *
 * Scoped to @media(min-width:901px) only — this file's existing
 * @media(max-width:599px) SP block (which already stacks .hratio-list
 * into a single column) is untouched, matching the site's confirmed
 * SP<=900px / PC>=901px boundary.
 *
 * Follow-up (same components): the confirmed site-wide boundary is
 * SP<=900px / PC>=901px, but .hratio-list/.hratio-row/.hratio-thumb/
 * .hratio-info/.hratio-name's own SP layout (column stacking, min-width:0,
 * name wrapping, thumb size) was still gated at this file's general
 * @media(max-width:599px) breakpoint, used for most of this file's other
 * SP rules. That left 600-900px on this component specifically showing
 * the PC flex row (198px thumb, non-wrapping name) — confirmed live at
 * 900px (display:flex, not stacked) — which could overflow before ever
 * reaching the >=901px 3-column grid above. Moved these 5 selectors'
 * layout rules out of the 599px block into their own dedicated
 * @media(max-width:900px) block below, values unchanged from the
 * original SP rule, so 600-900px now gets the same vertical stacking as
 * <=599px. .hratio-sec-lab, .hratio-pct.lg/md/sm, and
 * .hratio-thumb.noimg svg (font sizes only, not part of this component
 * list) were intentionally left at the existing 599px boundary — out of
 * scope for this pass.
 */
@media (max-width: 900px) {
  .hratio-list {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .hratio-row {
    min-width: 0;
  }
  .hratio-info {
    min-width: 0;
    flex: 1;
  }
  .hratio-name {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .hratio-thumb {
    width: 180px;
  }
}
@media (min-width: 901px) {
  /*
   * Production QA (PR #126): a long heroine name inside the 3-column grid's
   * narrow ~280px info column pushed .hratio-pct ("約XX%") into wrapping
   * mid-string. Switched to 2 columns (~430px per item) so name + percentage
   * both have enough room; .hratio-pct also gained a standing
   * white-space:nowrap above so the percentage itself can never wrap again
   * regardless of column width. The name-wrapping allowance below is
   * otherwise unchanged from the original fix.
   *
   * Follow-up production QA: with 2-column's extra width now available,
   * .hratio-thumb grew from 140px to 180px (135px tall via the standing
   * aspect-ratio:4/3 on .hratio-thumb -- no separate height rule needed).
   * Re-verified this still leaves enough info-column room (~214px at the
   * ~430px column width) to keep even the longest percentage text on one
   * line.
   *
   * Issue #131: .hratio-thumb widened again, 180px -> 210px (157.5px tall
   * via the same standing aspect-ratio:4/3), matching the equivalent
   * 1-2-heroine PC width bump in work-pages-adjustments.css. Re-verified
   * at the same ~430px column width that the longest percentage text
   * ("約100%" at the lg 40px size) still stays on one line in the
   * remaining ~206px info column.
   */
  .hratio-list:has(.hratio-row:nth-child(3)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .hratio-list:has(.hratio-row:nth-child(3)) .hratio-row {
    min-width: 0;
  }
  .hratio-list:has(.hratio-row:nth-child(3)) .hratio-thumb {
    width: 210px;
  }
  .hratio-list:has(.hratio-row:nth-child(3)) .hratio-info {
    min-width: 0;
  }
  .hratio-list:has(.hratio-row:nth-child(3)) .hratio-name {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.scene-body {
  padding:0;
}

.scene-item {
  display:flex;
  gap:12px;
  padding-bottom:16px;
  position:relative;
}

.scene-item:not(:last-child)::before {
  content:'';
  position:absolute;
  left:10px;
  top:24px;
  bottom:0;
  width:1px;
  background:#ddd;
}

.scene-num {
  width:21px;
  height:21px;
  border-radius:50%;
  background:var(--c-main);
  color:#fff;
  font-size:12px;
  font-weight:bold;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  z-index:1;
}

.scene-text {
  flex:1;
  font-size:15px;
  color:#333;
  line-height:1.6;
  padding-top:1px;
}

.scene-timeline-row {
  display:flex;
  align-items:center;
  gap:6px;
}

.scene-timeline-arrow {
  color:var(--c-main);
  flex-shrink:0;
}

.scene-timeline {
  display:flex;
  gap:2px;
  height:14px;
  border-radius:6px;
  overflow:hidden;
  flex:1;
}

.scene-timeline-seg {
  height:100%;
}

.scene-timeline-seg.tl-gray {
  background:#c2c2c2;
}

.scene-timeline-seg.tl-mint1 {
  background:color-mix(in srgb,var(--c-main) 55%,#fff);
}

.scene-timeline-seg.tl-mint2 {
  background:color-mix(in srgb,var(--c-main) 78%,#fff);
}

.scene-timeline-seg.tl-mint3 {
  background:var(--c-main);
}

.scene-timeline-labels {
  display:flex;
  gap:2px;
  flex:1;
}

.midokoro-sec {
  margin:2rem 0;
}

.midokoro-sec-lab {
  font-size:19px;
  font-weight:700;
  color:#333333;
  margin:0 0 26px;
}

.midokoro-card {
  position:relative;
  background:#fff;
  border:1.5px solid var(--c-main);
  border-radius:12px;
}

.midokoro-tag {
  position:absolute;
  top:-12px;
  left:16px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12.5px;
  font-weight:700;
  color:#fff;
  background:var(--c-main);
  border-radius:20px;
  padding:4px 13px 4px 11px;
}

.midokoro-tag svg {
  flex-shrink:0;
}

.midokoro-img {
  width:100%;
  aspect-ratio:4/3;
  border-radius:10.5px 10.5px 0 0;
  overflow:hidden;
  background:linear-gradient(135deg,var(--c-main),color-mix(in srgb,var(--c-main) 58%,#000));
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.7);
  font-size:11px;
}

.midokoro-img img {
  width:100%;
  height:100%;
  object-fit:contain;
}

.midokoro-content {
  padding:32px 20px 16px;
}

.midokoro-catch {
  font-size:16px;
  font-weight:700;
  color:#333333;
  line-height:1.55;
  margin-bottom:8px;
}

.midokoro-lead {
  font-size:15px;
  color:#333333;
  line-height:1.85;
  margin-bottom:14px;
}

.midokoro-points {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:4px;
}

.midokoro-point {
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:15px;
  color:#333333;
  line-height:1.6;
}

.midokoro-point-mark {
  flex-shrink:0;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--c-main);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  margin-top:2px;
}

.midokoro-ng {
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin-top:12px;
}

.midokoro-ng .ng-mark {
  flex-shrink:0;
  font-size:12px;
  font-weight:700;
  color:#B08D2E;
  line-height:1.7;
}

.midokoro-ng-body {
  flex:1;
  min-width:0;
}

.midokoro-ng-label {
  font-size:13px;
  font-weight:700;
  color:#333333;
  margin-bottom:2px;
}

.midokoro-ng-text {
  font-size:13.5px;
  color:#333333;
  line-height:1.7;
}

.midokoro-ng-text p {
  margin:0;
}

.reco-sec {
  margin:2rem 0;
}

.reco-sec-lab {
  font-size:19px;
  font-weight:700;
  color:#333333;
  margin:0 0 10px;
}

.rec-flat {
  display:flex;
  flex-direction:column;
  gap:8px;
}

.rec-item {
  display:flex;
  align-items:flex-start;
  gap:11px;
  background:var(--c-light2);
  border-radius:10px;
  padding:12px 14px;
}

.rec-check {
  flex-shrink:0;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--c-main);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:bold;
  margin-top:1px;
}

.rec-title {
  font-size:15px;
  font-weight:bold;
  color:#333;
  line-height:1.5;
}

.rec-desc {
  font-size:15px;
  color:#333333;
  line-height:1.6;
}

/*
 * QA fix (1.0.19): defensive wrapping for free-input text fields (ACF
 * textareas edited by the site admin), so a long run of half-width
 * alphanumerics with no spaces/line breaks (a URL, a title containing
 * unbroken English/numbers, etc.) can't push the SP layout wider than
 * its container. overflow-wrap:anywhere lets the browser break such a
 * run only when a line actually has no other place to wrap; normal
 * Japanese text (which already wraps at any character) and normal
 * English words are unaffected in practice, unlike word-break:break-all
 * (which would also break ordinary words unnecessarily). Applied only
 * to the specific free-text containers below, not to card titles,
 * buttons, prices, badges, or taxonomy labels.
 * .rec-item > div is the unlabeled wrapper template-parts/work/
 * content-standard.php emits around .rec-title/.rec-desc (a flex child
 * of .rec-item, which is display:flex); .ep-summary-text is likewise a
 * flex child of .ep-summary. Both need min-width:0 as well as the text
 * wrapping, or the flex item's own default min-width:auto can still
 * hold the row open to the text's un-wrapped intrinsic width.
 */
.ep-summary-text,
.midokoro-catch,
.midokoro-lead,
.midokoro-point,
.midokoro-ng-text,
.body-text,
.rec-title,
.rec-desc {
  overflow-wrap:anywhere;
  word-break:normal;
  max-width:100%;
}

.ep-summary-text,
.rec-item > div {
  min-width:0;
}

.ep-light {
  margin:1.8rem 0;
  min-width:0;
}

.ep-light-head {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  min-width:0;
}

.ep-light-label {
  margin:0;
  font-size:19px;
  font-weight:700;
  color:#333333;
}

.head-right {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}

.more {
  font-size:12.5px;
  font-weight:700;
  color:var(--c-dark);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1.3px;
  white-space:nowrap;
  flex-shrink:0;
}

.hscroll-track {
  display:flex;
  overflow-x:auto;
  /* padding-top added: overflow-x:auto also computes overflow-y to auto (not
     visible), so with zero top padding a hovering card's box-shadow
     (0 6px 20px, ~14px of blur above the box) was clipped by this
     container's own top edge. 6px matches the existing padding-bottom. */
  padding-top:6px;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
  /* Firefox half of the native-scrollbar hide below (::-webkit-scrollbar
     only covers Chromium/Safari) — added while porting this rule to the
     series master page, which needed both engines covered; applied here
     too so the two pages stay in sync. */
  scrollbar-width:none;
  /*
   * Defensive (common work card QA fix): guarantees this scroll
   * container itself never computes wider than the space its parent
   * actually gives it, so the intentionally-overflowing row of cards
   * inside it can only ever be clipped/scrolled here, never bleed into
   * the page's own width.
   */
  max-width:100%;
  min-width:0;
}

.hscroll-track::-webkit-scrollbar {
  height:0;
}

/*
 * Common work card (1.0.23): .work-card and everything inside it --
 * position/size/border/shadow/body/title/circle/price/actions/fanza --
 * moved to the single shared assets/css/common-work-card.css (enqueued as
 * this file's own dependency, see functions.php's hdtheme_enqueue_assets()).
 * 1.0.16-1.0.22 kept those values here as .hscroll-track-scoped overrides
 * layered on top of further-below unscoped base rules; 1.0.22 copied that
 * combined, actually-rendered result into three more independent
 * per-page files, which is what let one of those copies (the front page's)
 * omit .work-card's position:relative in production -- see
 * release-records/theme-independent-1.0.23-common-work-card-css-consolidation.md
 * for the incident. Only the carousel-specific concern remains here:
 * fixed flex-basis so the card doesn't grow/shrink in the horizontal
 * flex row (actual width comes from common-work-card.css's own
 * @media(max-width:900px)/@media(min-width:901px) .work-card{width:...}).
 * This selector alone (.hscroll-track .work-card) only ever matches
 * hdchild_work_card()'s output -- the episode/single/omnibus related
 * rails and the series master page's related rail all wrap their cards
 * in .hscroll-track.
 */
.hscroll-track .work-card {
  scroll-snap-align:start;
}

@media (max-width:900px) {
  .hscroll-track .work-card {
    flex:0 0 163px;
    width:163px;
  }
}

@media (min-width:901px) {
  .hscroll-track .work-card {
    flex:0 0 230px;
    width:230px;
  }
}

.ep-light-grid {
  gap:10px;
}

.hscroll-wrap {
  position:relative;
  min-width:0;
}

.hs-nav {
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.hs-page {
  font-family:var(--num);
  font-size:11.5px;
  font-weight:700;
  color:var(--c-dark);
  background:var(--c-light2);
  padding:3px 9px;
  border-radius:10px;
  white-space:nowrap;
}

.hs-arrow {
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--c-main);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#fff;
  font-size:14px;
  font-weight:700;
  padding:0 0 4px;
  line-height:1;
  flex-shrink:0;
  box-shadow:0 2px 6px rgba(44,94,71,.28);
  transition:background .15s;
}

.hs-arrow:hover {
  background:var(--c-dark);
}

.hs-arrow:active {
  transform:scale(.92);
}

.hs-nav.no-overflow {
  display:none;
}

/*
 * PC/SP boundary for the .hs-nav left/right buttons is 900/901px (matching
 * series-master-v42.css's own .hd-master-related .hs-nav SP rule), not
 * this file's general 599px SP breakpoint used everywhere else. Between
 * 600-900px that gap previously left .hs-nav at its base display:flex
 * (above) with nothing hiding it until 599px, so the PC buttons stayed
 * visible past where the master page already switched to SP (flick-only).
 * Kept as its own dedicated block, separate from the shared 599px SP
 * block below, specifically so it doesn't get bundled with the unrelated
 * rules re-scoped there.
 */
@media (max-width: 900px) {
  .hs-nav {
    display: none;
  }
}

.ep-light-grid .work-card {
  /* display:flex (density redesign, set on .hscroll-track .work-card
     above) intentionally not overridden back to block here anymore, so
     the episode-rail card keeps the same flex-column FANZA-button-pin
     behavior as the other rails. */
  text-decoration:none;
  color:inherit;
}

.ep-light-grid .work-card.cur {
  cursor:default;
  pointer-events:none;
  border:2px solid var(--c-main);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c-main) 14%,transparent);
}

.ep-light-grid .work-card.cur .work-body {
  background:var(--c-light2);
}

/*
 * .cur-badge (the small "閲覧中" text badge inc/work-view.php used to
 * render inside .work-meta) was dropped along with the rest of this
 * card's badges in the density redesign; the "currently viewing" state
 * is still shown via .ep-light-grid .work-card.cur's border/background
 * highlight above (unchanged, still emitted). This rule is now unused
 * and removed rather than left as dead CSS.
 */

.related {
  margin:1.3rem 0;
  min-width:0;
}

.related-h {
  font-size:15px;
  font-weight:700;
  color:#333333;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  min-width:0;
  gap:8px;
}

.related-h h2 {
  margin:0;
  font:inherit;
  color:inherit;
}

.related-h::before {
  content:"";
  width:5px;
  height:16px;
  border-radius:2px;
  background:var(--c-main);
}

.card-grid {
  gap:10px;
}

/*
 * Common work card (1.0.23): .work-card and its full subtree (card-link/
 * work-cov/work-body/work-title/ep-inline/ep-sep/work-circle/work-price/
 * rrp-main/off-rate/work-actions/work-fanza) moved to the single shared
 * assets/css/common-work-card.css -- see the .hscroll-track-scoped
 * comment above (near this file's .card-grid rule) for the full
 * rationale and the production incident this fixes. .work-meta/
 * .meta-row/.work-badge (all variants)/.work-compil-range (badge markup) were already
 * dead CSS before this change -- hdchild_work_card() has not rendered
 * any of that markup since the 1.0.16 density redesign -- and are
 * removed now rather than carried forward, matching this file's own
 * .cur-badge removal precedent above. .work-cov img's shared selector
 * with .incl-cov/.heroine-mini-cov img (unrelated components) is
 * unaffected; those two keep their rule below.
 */

.incl-cov img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.heroine-mini-cov img {
  display:block;
  width:100%;
  height:auto;
}

.related.related-circle {
  background:var(--c-light2);
  border-radius:14px;
  padding:16px 0 18px;
  margin:1.6rem 0;
}

/*
 * QA fix (1.0.20): at SP, extend only this box's own background/
 * rounded-corner band to .article's left/right panel edge.
 * margin-left/right:-Npx reaches that edge; padding-left/right:Npx
 * added back on top keeps every child (heading, page count, arrows,
 * card row) at exactly the same position as before -- only the
 * border-box (background + rounded corners) grows, nothing inside
 * visually moves. border-radius:0 squares off the corners that now sit
 * flush against the panel's own edge. PC (>=901px) is completely
 * unchanged -- this box's own PC layout was already QA-approved.
 *
 * N is NOT a single constant: this file's .article rule (near the top)
 * sets padding:24px 22px 30px unconditionally, but a second, separate
 * @media(max-width:599px) .article rule further down this same file
 * (this file's original SP breakpoint, predating this task's 900/901
 * boundary) overrides it to padding:18px 14px 24px -- so .article's
 * real left/right padding is 22px at 600-900px but only 14px at
 * <=599px. Confirmed live in a static reproduction: with a single
 * -22px/+22px rule applied at both sub-ranges, the box overshot
 * .article's true edge by 8px at <=599px (scrollWidth 398 vs
 * clientWidth 390 -- a real, measurable horizontal overflow), so this
 * needed two sub-range blocks matching .article's own two actual
 * padding values instead of one blanket <=900px rule.
 */
@media (max-width:599px) {
  .related.related-circle {
    margin-left:-14px;
    margin-right:-14px;
    padding-left:14px;
    padding-right:14px;
    border-radius:0;
  }
}

@media (min-width:600px) and (max-width:900px) {
  .related.related-circle {
    margin-left:-22px;
    margin-right:-22px;
    padding-left:22px;
    padding-right:22px;
    border-radius:0;
  }
}

/*
 * QA fix (1.0.21): this heading's 16px left/right inset used to be
 * unconditional, so at SP it sat 16px inside 話数一覧's heading (which has
 * no such inset) even though the 1.0.20 fix already made this box's own
 * background/card row flush with .article's edge. The 16px inset only
 * ever matched anything at PC (>=901px, where .related.related-circle
 * .card-grid also gets a 16px left/right inset below) -- moved there.
 * SP now shares 話数一覧's 0-inset heading position.
 */
.related.related-circle .related-h {
  margin:0 0 12px;
}

@media (min-width:901px) {
  .related.related-circle .related-h {
    margin-left:16px;
    margin-right:16px;
  }
}

.related.related-circle .card-grid {
  /* top padding for the same reason as .hscroll-track above — this rule's
     shorthand otherwise re-zeroes the top/bottom padding for this context.
     QA fix (1.0.19): left/right padding moved to a >=901px-only override
     below. At SP (<=900px) this 16px each side, combined with the
     163px-card/10px-gap density design's own 362px scrollport
     assumption, left no room for more than 2 full cards + ~0px of a 3rd
     (2*163+10+16*2=368px of the row's own footprint against a 390px
     viewport, no room left for the intended ~16px 3rd-card peek). PC
     keeps this 16px inset unchanged (already QA-passed there). */
  padding:6px 0;
}

@media (min-width:901px) {
  .related.related-circle .card-grid {
    padding-left:16px;
    padding-right:16px;
  }
}

.appendix {
  max-width:var(--container-medium);
  margin:30px auto 0;
  background:#fff;
  border:1px dashed var(--c-border);
  border-radius:8px;
  padding:18px 22px 24px;
}

.appendix h2 {
  font-size:14px;
  font-weight:700;
  color:#333333;
  margin-bottom:4px;
}

.appendix .note {
  font-size:11.5px;
  color:#555555;
  margin-bottom:14px;
}


/* ============================================================
   セクション2：話数別・単独作品・総集編　3ページ共通（SP / max-width:599px）
   ============================================================ */

@media (max-width: 599px) {

.article {
  max-width:none;
  width:100%;
  padding:18px 14px 24px;
}

/*
 * Issue #74 fix: same root cause already documented above for
 * .related.related-circle (1.0.20) -- .data-band's margin:-22px/
 * padding:22px (declared once, unconditionally, near the top of this
 * file) assumes .article's own left/right padding is always 22px, but
 * this same @media(max-width:599px) block overrides .article's padding
 * to 14px on each side. With the unconditional -22px/+22px rule still
 * active at <=599px, .data-band (and every "wide" data band: purchase
 * box, 主人公タイプ, ヒロイン紹介, 作品構成, こんな人におすすめ -- all
 * rendered on every episode/single/omnibus work page via
 * template-parts/work/header.php and content-standard.php) overshot
 * .article's real edge by 8px on each side. Live-measured in a static
 * reproduction of this file's own cascade: document.documentElement
 * scrollWidth 398 vs clientWidth 390 at a 390px viewport, with
 * .data-band's own getBoundingClientRect() showing left:-8px/
 * right:398px -- an 8px page-level horizontal overflow on both edges,
 * matching Issue #74's reported symptom (diagonal touch input during
 * vertical scroll shifting the whole page left/right, exposing the
 * page's outer background at the right edge). 600-900px is unaffected
 * (.article's padding stays 22px there, matching the base rule above),
 * so only this <=599px block needs its own override, matching
 * .article's own 14px padding at this same breakpoint.
 */
.data-band {
  margin:1.7rem -14px;
  padding:0 14px;
}

.data-band.wide {
  margin:2rem -14px;
}

h1.ep-h1 {
  font-size:17px;
}

.series-nav .sn-ops {
  flex-wrap:wrap;
}

.series-nav .sn-all {
  margin-left:auto;
}

.series-nav .sn-position {
  gap:8px;
}

.omni-notice {
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  margin:1.6rem 0;
  padding:16px 18px;
}

.omni-notice .on-btn {
  align-self:flex-start;
}

.data-box-header {
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
}

.data-box-header-right {
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  width:100%;
}

.data-box-header-meta-label {
  flex:0 0 4.2em;
  white-space:nowrap;
}

.data-box-header-meta {
  align-items:baseline;
  width:100%;
  min-width:0;
}

.data-box-header-meta-value {
  flex:0 1 auto;
  min-width:0;
  max-width:calc(100% - 4.2em - 4px);
  white-space:nowrap !important;
  overflow:hidden;
  text-overflow:ellipsis;
}

.data-box-header-divider {
  display:none;
}

.data-box-grid-4 {
  grid-template-columns:1fr;
}

.data-box-item {
  border-right:none;
  display:flex;
  align-items:baseline;
  gap:0;
}

.data-box-item-label {
  margin-bottom:0;
  flex:0 0 9em;
  white-space:nowrap;
}

.data-box-item-label::after {
  content:"\FF1A";
  color:#999;
}

.data-box-tags.tag-groups {
  padding:9px 14px 11px;
}

.data-box-tags-label {
  margin-bottom:12px;
}

.tag-group {
  flex-direction:column;
  gap:4px;
}

.tag-group + .tag-group {
  margin-top:13px;
}

.tag-group-label {
  flex:none;
  padding-top:0;
  text-align:left;
  font-size:11.5px;
}

#tagGroupsBox {
  max-height:146px;
  overflow:hidden;
  position:relative;
}

#tagGroupsBox::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:32px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events:none;
}

#tagGroupsBox.expanded::after {
  display:none;
}

#tagGroupsBox.expanded {
  max-height:none;
}

.tag-groups-more {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:100%;
  background:none;
  border:none;
  padding:6px 0 8px;
  margin-top:2px;
  font-size:12px;
  font-weight:700;
  color:var(--c-dark);
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
  font-family:inherit;
}

.ep-pos-tag {
  font-size:12px;
}

.ep-pos-badge {
  font-size:12px;
  padding:4px 10px;
}

.ep-summary {
  padding:12px 14px;
  gap:10px;
}

.ep-summary-icon {
  width:28px;
  height:28px;
}

.ep-summary-text {
  font-size:15px;
}

.sec-plain .sec-jp {
  font-size:17px;
}

.trend-unit {
  width:auto;
  margin:0;
  display:block;
  background:none;
  padding:0;
}

.trend-il {
  font-size:11px;
  padding:2px 6px;
  margin-bottom:8px;
}

.trend-track {
  flex:1;
  max-width:none;
}

.trend-left, .trend-right {
  font-size:11px;
  width:72px;
  min-width:72px;
  line-height:1.4;
}

.ptype-sec-lab {
  font-size:17px;
}

.ptype-sec-row {
  grid-template-columns:72px minmax(0,1fr);
  column-gap:10px;
  row-gap:9px;
}

.ptype-badge {
  font-size:13px;
  padding:4px 12px;
}

.ptype-meter-label {
  font-size:12px;
}

.ptype-meter-seg {
  height:8px;
  border-radius:3px;
}

.heroine-sec-lab {
  font-size:17px;
}

.heroine-grid {
  grid-template-columns:1fr;
}

.scene-sec-lab {
  font-size:17px;
}

.hratio-sec-lab {
  font-size:17px;
}

.hratio-thumb.noimg svg {
  width:36px;
  height:36px;
}

.hratio-pct.lg {
  font-size:34px;
}

.hratio-pct.md {
  font-size:25px;
}

.hratio-pct.sm {
  font-size:19px;
}

.scene-timeline {
  height:8px;
  border-radius:4px;
}

.midokoro-sec-lab {
  font-size:17px;
  margin-bottom:24px;
}

.midokoro-content {
  padding:28px 16px 14px;
}

.midokoro-catch {
  font-size:15px;
}

.reco-sec-lab {
  font-size:17px;
}

.ep-light-label {
  font-size:17px;
}

/*
 * 1.0.23: removed this @media(max-width:599px) .work-fanza rule
 * (line-height:20px;padding:8px 15px;min-width:136px;min-height:38px).
 * It predates the 1.0.16 density redesign's .hscroll-track SP override
 * and was already fully superseded by it (every .work-fanza on this page
 * is hdchild_work_card()'s output, always inside .hscroll-track -- see
 * inc/work-view.php, grep confirms no other .work-fanza usage). Common-
 * work-card.css (1.0.23) now owns that SP override at
 * @media(max-width:900px), loaded before this file; this now-dead,
 * unscoped 599px rule at equal specificity would have cascaded after it
 * and reintroduced the exact oversized-SP-FANZA-button regression 1.0.18
 * fixed. See
 * release-records/theme-independent-1.0.23-common-work-card-css-consolidation.md.
 */

.appendix, .article + .appendix {
  max-width:393px;
  padding:14px 14px 18px;
}

}


/* ============================================================
   セクション3：話数別＋総集編　2ページ共通（シリーズナビ／シーン構成タイムライン等）
   単独作品ページはシリーズを持たないため対象外
   ============================================================ */

/* --- PC --- */

.series-nav {
  background:var(--c-light2);
  border:1px solid var(--c-border-strong);
  border-radius:10px;
  padding:11px 14px;
  margin-top:1.7rem;
  margin-bottom:1.3rem;
}

.series-nav .sn-ops {
  display:flex;
  align-items:center;
  gap:8px;
}

.series-nav .sn-count {
  font-size:13px;
  color:#555555;
  flex-shrink:0;
}

.sn-dd-wrap {
  position:relative;
  flex-shrink:0;
}

.series-nav .sn-pos {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#fff;
  border:.5px solid var(--c-border);
  border-radius:6px;
  padding:5px 11px;
  color:var(--c-dark);
  font-weight:700;
  font-size:13px;
  font-family:inherit;
  cursor:pointer;
  position:relative;
  z-index:2;
}

.sn-dd-wrap.open .sn-pos {
  border-radius:6px 6px 0 0;
}

.sn-dropdown {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:100%;
  background:#fff;
  border:.5px solid var(--c-border);
  border-top:none;
  border-radius:0 0 6px 6px;
  overflow:hidden;
  z-index:1;
  box-shadow:0 8px 16px rgba(0,0,0,.08);
}

.sn-dd-wrap.open .sn-dropdown {
  display:block;
}

.sn-dd-item {
  display:block;
  padding:8px 14px;
  font-size:13px;
  color:#333;
  text-decoration:none;
  border-top:.5px solid var(--c-border);
  white-space:nowrap;
}

.sn-dd-item:hover {
  background:var(--c-light2);
}

.sn-dd-item.current {
  background:var(--c-light);
  font-weight:700;
  color:var(--c-dark);
  box-shadow:inset 3px 0 0 var(--c-main);
}

.sn-dd-item.compil {
  color:var(--violet);
  font-weight:700;
}

.sn-dd-item.compil.current {
  background:var(--violet-bg);
  color:var(--violet);
  box-shadow:inset 3px 0 0 var(--violet);
}

.ep-summary {
  display:flex;
  align-items:center;
  gap:14px;
  border-top:1px solid var(--violet-border);
  border-bottom:1px solid var(--violet-border);
  border-radius:0;
  padding:14px 18px;
  margin-top:3.5rem;
  margin-bottom:1.7rem;
}

.ptype-meter-bar {
  grid-column:2;
  width:min(100%,260px);
  display:flex;
  gap:5px;
}

.scene-item:last-child {
  padding-bottom:0;
}

.scene-timeline-row.bar {
  margin-bottom:2px;
}

.scene-timeline-row.labels-row {
  margin-bottom:10px;
}

.scene-timeline-legend {
  display:flex;
  flex-wrap:wrap;
  gap:4px 16px;
  margin-bottom:14px;
}

.tl-legend-item {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:15px;
  color:#555555;
}

.tl-legend-num {
  font-weight:bold;
}

.scene-timeline-labels span {
  font-size:20px;
  font-weight:bold;
  color:#555555;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* --- SP / max-width:599px --- */

@media (max-width: 599px) {

.ptype-meter-bar {
  width:min(100%,221px);
}

.tl-legend-item {
  font-size:13px;
}

.scene-timeline-labels span {
  font-size:16px;
}

}


/* ============================================================
   セクション4：話数別ページ専用
   ============================================================ */

/* --- PC --- */

.series-nav .sn-pos::after {
  content:"\25BE";
  font-size:9px;
  color:var(--c-meta);
}


/* --- SP / max-width:599px --- */

/* 話数別ページ専用のSP個別ルールなし（共通ルールで対応済み） */


/* ============================================================
   セクション5：単独作品ページ専用
   ============================================================ */

/* --- PC --- */

.series-nav {
  background:var(--c-light2);
  border:1px solid var(--c-border-strong);
  border-radius:10px;
  padding:11px 14px;
  margin:1.3rem 0;
}

.series-nav .sn-ops {
  display:flex;
  align-items:center;
  gap:10px;
}

.series-nav .sn-pos {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#fff;
  border:.5px solid var(--c-border);
  border-radius:6px;
  padding:5px 11px;
  color:var(--c-dark);
  font-weight:700;
  font-size:13px;
  flex-shrink:0;
}

.series-nav .sn-pos::after {
  content:"\25BE";
  font-size:9px;
  color:var(--c-meta);
}

.ep-summary {
  display:flex;
  align-items:center;
  gap:14px;
  border-top:1px solid var(--violet-border);
  border-bottom:1px solid var(--violet-border);
  border-radius:0;
  padding:14px 18px;
  margin:1.6rem 0;
}

.standalone-note {
  display:flex;
  align-items:center;
  gap:14px;
  border-top:1px solid var(--c-border-strong);
  border-bottom:1px solid var(--c-border-strong);
  padding:14px 18px;
  margin:1.6rem 0;
}

.standalone-note-icon {
  width:34px;
  height:34px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--c-light);
  border-radius:50%;
  color:var(--c-main);
}

.standalone-note-icon svg {
  width:18px;
  height:18px;
}

.standalone-note-body {
  flex:1;
  min-width:0;
}

.standalone-note-label {
  font-size:14px;
  font-weight:700;
  color:#333333;
  margin-bottom:4px;
}

.standalone-note-text {
  font-size:13.5px;
  color:#333333;
  line-height:1.5;
  margin:0;
}

.trend-block-hl {
  position:relative;
}

.trend-desc-hl {
  position:relative;
}

.scene-timeline-row.bar {
  margin-bottom:6px;
}

.scene-timeline-row.labels-row {
  margin-bottom:4px;
}

.scene-timeline-legend {
  font-size:14px;
  color:#555;
  margin-bottom:14px;
}

.scene-timeline-labels span {
  font-size:14px;
  font-weight:bold;
  color:#555555;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* --- SP / max-width:599px --- */

@media (max-width: 599px) {

.standalone-note {
  padding:12px 14px;
  gap:10px;
}

.scene-timeline-legend {
  font-size:12px;
}

.scene-timeline-labels span {
  font-size:12px;
}

}


/* ============================================================
   セクション6：総集編ページ専用
   ============================================================ */

/* --- PC --- */

.series-nav .sn-pos::after {
  content:"\25BE";
  font-size:9px;
  color:var(--c-meta);
  margin-left:2px;
}

.data-box-grid-3 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
}

.ep-summary-sub {
  font-size:13.5px;
  font-weight:400;
  color:#555555;
  line-height:1.6;
  margin-top:4px;
}

.benefit-box {
  background:var(--violet-bg);
  border:1px solid var(--violet-border);
  border-radius:14px;
  padding:26px 28px 28px;
  margin:1.7rem 0;
}

.benefit-eyebrow {
  font-size:15px;
  font-weight:700;
  color:var(--violet);
  letter-spacing:.04em;
  margin:0 0 20px;
}

.compare-visual {
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:28px;
  padding:6px 0 24px;
  margin-bottom:20px;
  border-bottom:1px solid var(--violet-border);
}

.compare-side {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.compare-label {
  font-size:18px;
  font-weight:700;
  color:#555;
  white-space:nowrap;
}

.compare-side.compil .compare-label {
  color:#4E2D78;
}

.thumb-visual-wrap {
  width:320px;
  max-width:100%;
  height:240px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.thumb-rows {
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}

.thumb-rows--wrap {
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  max-width:100%;
}

.thumb-row {
  display:flex;
  gap:8px;
  justify-content:center;
}

.ct-eq {
  width:114px;
  aspect-ratio:4/3;
  border-radius:3px;
  background:var(--c-main);
  overflow:hidden;
  flex-shrink:0;
}

.ct-eq-img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.ct-big {
  width:320px;
  aspect-ratio:4/3;
  border-radius:3px;
  background:var(--c-dark);
  overflow:hidden;
}

.ct-big-img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.compare-price {
  font-family:var(--num);
  font-weight:700;
  line-height:1;
}

.compare-price.reg {
  font-size:19px;
  color:#999;
  text-decoration:line-through;
}

.compare-price.now {
  font-size:26px;
  color:#4E2D78;
}

.compare-arrow {
  flex-shrink:0;
  color:var(--violet);
  opacity:.6;
  align-self:center;
}

.compare-price-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:32px;
}

.compare-off-badge {
  font-family:var(--num);
  font-weight:bold;
  color:#fff;
  background:var(--violet);
  border-radius:5px;
  padding:4px 10px;
  font-size:14px;
  flex-shrink:0;
  white-space:nowrap;
}

.benefit-list {
  display:flex;
  flex-direction:column;
  gap:8px;
}

.benefit-list .rec-item {
  background:#fff;
}

.incl-sec {
  margin-top:1.7rem;
  margin-bottom:12px;
}

.incl-sec-h {
  font-size:19px;
  font-weight:700;
  color:#333333;
  margin:0 0 10px;
}

.incl-sec-h .cnt {
  font-size:12.5px;
  font-weight:700;
  color:var(--c-main);
  margin-left:4px;
}

.incl-list {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.incl-row {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:16px;
  border:1px solid var(--c-border-strong);
  border-radius:10px;
  background:#fff;
  transition:box-shadow .15s, border-color .15s;
}

/*
 * Position-stationary hover policy matching the vertical .work-card cards:
 * border + shadow only, no transform (previously translateY(-1px), and no
 * border-color change at all). Split into @media(hover:hover) so touch
 * devices, which can't sustain a real :hover, don't get a stuck ("sticky")
 * hover state after a tap; :focus-within stays outside that query so
 * keyboard focus feedback doesn't depend on hover capability. Shadow value
 * kept as-is — only the vertical/border behavior is being unified here,
 * not the shadow's own depth.
 */
@media (hover: hover) {
  .incl-row:hover {
    border-color:var(--c-main);
    box-shadow:0 6px 18px rgba(44,94,71,.12);
  }
}
.incl-row:focus-within {
  border-color:var(--c-main);
  box-shadow:0 6px 18px rgba(44,94,71,.12);
}
@media (prefers-reduced-motion: reduce) {
  .incl-row {
    transition:none;
  }
}

.incl-link {
  position:absolute;
  inset:0;
  z-index:1;
}

.incl-title {
  font-size:16px;
  font-weight:700;
  color:#333;
  line-height:1.4;
}

.incl-title .ep-inline {
  color:var(--c-main);
  font-weight:700;
}

.incl-title .ep-sep {
  color:var(--c-border);
  font-weight:400;
  margin:0 2px;
}

.incl-grid {
  display:grid;
  grid-template-columns:190px 1fr;
  column-gap:18px;
  row-gap:12px;
}

.incl-cov {
  width:100%;
  aspect-ratio:4/3;
  border-radius:8px;
  background:linear-gradient(135deg,var(--c-main),color-mix(in srgb,var(--c-main) 58%,#000));
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.7);
  font-size:11px;
  font-weight:700;
  overflow:hidden;
}

.incl-content {
  display:flex;
  flex-direction:column;
  gap:6px;
}

.incl-pos-badge {
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  font-size:12.5px;
  font-weight:700;
  color:var(--c-dark);
  background:#fff;
  border:1.5px solid var(--c-main);
  padding:3px 10px;
  border-radius:4px;
  white-space:nowrap;
}

.incl-hook {
  font-size:14px;
  font-weight:700;
  color:#333333;
  line-height:1.5;
  margin:0;
}

.incl-desc {
  font-size:13px;
  color:#333333;
  line-height:1.7;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0;
}

.incl-detail {
  position:relative;
  z-index:2;
  align-self:flex-end;
  margin-top:2px;
  font-size:12.5px;
  font-weight:700;
  color:var(--c-dark);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:3px;
}

.incl-detail svg {
  width:12px;
  height:12px;
}

.heroine-mini-sec {
  margin:1.6rem 0;
}

.heroine-mini-h {
  font-size:19px;
  font-weight:700;
  color:#333333;
  margin:0 0 10px;
}

.heroine-mini-row {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:28px;
  row-gap:22px;
}

.heroine-mini {
  display:flex;
  flex-direction:column;
  gap:9px;
}

.heroine-mini-cov {
  width:100%;
  border-radius:6px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.7);
  font-size:12px;
  font-weight:700;
}

.heroine-mini-cov:not(:has(img)) {
  aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--c-main),color-mix(in srgb,var(--c-main) 58%,#000));
}

.heroine-mini-body {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.heroine-mini-name {
  font-size:14px;
  font-weight:700;
  color:#333;
}

.bonus-sec {
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--violet-bg);
  border:.5px solid var(--violet-border);
  border-radius:12px;
  padding:14px 18px;
  margin-top:12px;
  margin-bottom:1.7rem;
}

.bonus-icon {
  width:40px;
  height:40px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:50%;
  color:var(--violet);
}

.bonus-t {
  flex:1;
  min-width:0;
}

.bonus-sec-h {
  font-size:15px;
  font-weight:700;
  margin:0 0 2px;
  color:var(--violet);
}

.bonus-desc {
  font-size:13.5px;
  color:#333333;
  line-height:1.6;
}


/* --- SP / max-width:599px --- */

@media (max-width: 599px) {

.sn-pos-range {
  display:none;
}

.data-box-grid-3 {
  grid-template-columns:1fr;
}

.ep-summary-sub {
  font-size:12.5px;
}

.benefit-eyebrow {
  font-size:14px;
}

.benefit-box {
  padding:20px 16px 22px;
}

.incl-sec-h {
  font-size:17px;
}

.incl-title {
  font-size:14.5px;
}

.incl-grid {
  grid-template-columns:1fr;
}

.incl-desc {
  -webkit-line-clamp:3;
}

.heroine-mini-h {
  font-size:17px;
}

.heroine-mini-row {
  display:block;
}

.heroine-mini {
  width:100%;
  padding:18px 0;
}

.heroine-mini:first-child {
  padding-top:0;
}

.bonus-sec {
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  margin-top:12px;
  margin-bottom:1.6rem;
  padding:16px 18px;
}

}

/* 1.2.1: 599px以下では、旧テーマ側の2列・固定幅指定より必ず優先する。 */
@media (max-width:599px) {
  .hd-work-page .article .heroine-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    max-width:none;
  }

  .hd-work-page .article .heroine-card {
    width:100%;
    min-width:0;
    max-width:none;
  }
}

/*
 * 1.2.5: 話数別ページ PC表示QA（作品の傾向〜ヒロインのHシーン割合）。
 * SWELL・旧子テーマ側の文字組みや角丸指定に影響されないよう、
 * 作品ページ内だけに限定して正本の値を固定する。
 */
@media (min-width:600px) {
  .hd-work-page .article .trend-track {
    flex:0 0 440px !important;
    width:440px !important;
    max-width:440px !important;
  }
}

.hd-work-page .article .trend-left,
.hd-work-page .article .trend-right {
  font-weight:500 !important;
}

.hd-work-page .article .trend-desc-suffix,
.hd-work-page .article .trend-desc p {
  font-weight:400 !important;
}

.hd-work-page .article .ptype-badge {
  padding:5px 14px !important;
  border:1px solid #5FA98A !important;
  border-radius:4px !important;
  background:#E7F1EB !important;
  color:#2C5E47 !important;
}

.hd-work-page .article .ptype-desc {
  font-size:15px !important;
  font-weight:400 !important;
}

.hd-work-page .article .heroine-card {
  border:1px solid #9FC7B0 !important;
  border-radius:12px !important;
}

.hd-work-page .article .heroine-desc {
  font-weight:400 !important;
}

.hd-work-page .article .hratio-thumb img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}

/*
 * 1.2.7: 話数別ページ PC表示QA（h1〜話数一覧）。
 * Claude版のHTML/CSSを正本とし、合意済みの現行仕様だけを維持する。
 */
.hd-work-page .article .series-nav .sn-ops {
  gap:8px;
}

.hd-work-page .article .series-nav .sn-pos {
  font-family:inherit;
  cursor:pointer;
  position:relative;
  z-index:2;
}

.hd-work-page .article .series-nav .sn-pos::after {
  margin-left:0;
}

/*
 * 1.3.3: テンプレート側の親クラスに依存させず、「読む前に」のラベルを確実に適用する。
 */
.standalone-note-label {
  color:#2C5E47 !important;
  font-size:13px !important;
}

.hd-work-page .article .omni-notice .on-d,
.hd-work-page .article .omni-notice .on-d p,
.hd-work-page .article .purchase-circle {
  font-weight:400;
}

.hd-work-page .article .omni-notice .on-d p,
.hd-work-page .article .synopsis-flex .body-text p,
.hd-work-page .article .midokoro-lead p,
.hd-work-page .article .midokoro-ng-text p {
  margin:0;
}

.hd-work-type-episode .article .ep-summary {
  margin-top:3.5rem;
  margin-bottom:1.7rem;
}

.hd-work-page .article .scene-timeline-row.bar {
  margin-bottom:2px;
}

.hd-work-page .article .scene-timeline-row.labels-row {
  margin-bottom:10px;
}

.hd-work-page .article .scene-timeline {
  height:14px;
  gap:2px;
  border-radius:6px;
}

.hd-work-page .article .scene-timeline-legend {
  display:flex;
  flex-wrap:wrap;
  gap:4px 16px;
  margin-bottom:14px;
}

.hd-work-page .article .tl-legend-item {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:15px;
  color:#555555;
}

.hd-work-page .article .tl-legend-num {
  font-weight:bold;
}

.hd-work-page .article .scene-timeline-labels span {
  font-size:20px;
  font-weight:bold;
  color:#2C5E47;
}

.hd-work-page .article .scene-item {
  padding-bottom:16px;
}

.hd-work-page .article .scene-item:last-child {
  padding-bottom:0;
}

.hd-work-page .article .scene-text,
.hd-work-page .article .midokoro-lead,
.hd-work-page .article .midokoro-lead p,
.hd-work-page .article .midokoro-point,
.hd-work-page .article .midokoro-ng-text,
.hd-work-page .article .midokoro-ng-text p,
.hd-work-page .article .rec-desc {
  font-weight:400;
}

@media (max-width:599px) {
  .hd-work-page .article .scene-timeline {
    height:8px;
    border-radius:4px;
  }

  .hd-work-page .article .tl-legend-item {
    font-size:13px;
  }

  .hd-work-page .article .scene-timeline-labels span {
    font-size:16px;
  }
}

/*
 * 1.2.8: 話数別ページの文字組みをClaude版とサイト共通ルールへ統一。
 * 読ませる文章は15px以上・標準ウェイト・#333333を基本とし、
 * ラベル／補助情報／最弱情報は#555555／#999999へ分離する。
 */
.hd-work-type-episode .article {
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  color:#333333;
}

.hd-work-type-episode .article .omni-notice .on-d,
.hd-work-type-episode .article .omni-notice .on-d p,
.hd-work-type-episode .article .body-text,
.hd-work-type-episode .article .body-text p,
.hd-work-type-episode .article .hd-editor-content,
.hd-work-type-episode .article .hd-editor-content p,
.hd-work-type-episode .article .trend-desc p,
.hd-work-type-episode .article .ptype-desc,
.hd-work-type-episode .article .heroine-desc,
.hd-work-type-episode .article .scene-text,
.hd-work-type-episode .article .midokoro-lead,
.hd-work-type-episode .article .midokoro-lead p,
.hd-work-type-episode .article .midokoro-point,
.hd-work-type-episode .article .midokoro-ng-text,
.hd-work-type-episode .article .midokoro-ng-text p,
.hd-work-type-episode .article .rec-desc {
  font-size:15px !important;
  font-weight:400 !important;
  color:#333333 !important;
}

.hd-work-type-episode .article .scene-text {
  line-height:1.6 !important;
  padding-top:1px;
}

.hd-work-type-episode .article .scene-num {
  width:21px;
  height:21px;
  font-size:12px !important;
  font-weight:700 !important;
  color:#fff !important;
}

.hd-work-type-episode .article .work-title {
  color:#333333;
}

.hd-work-type-episode .article .work-circle {
  color:#555555;
}

.hd-work-type-episode .article .work-price .reg {
  color:#999999;
}

/*
 * 通常価格は現行仕様の標準ウェイト、セール価格だけClaude版の強調へ戻す。
 * 話数別（.hd-work-type-episode）だけに絞っていたため、単独作品・総集編
 * ページの関連作品カードではセール価格が.work-price .nowの標準ウェイト
 * （190行目、!importantでfont-weight:400）のまま残り、セール強調が
 * 弱く見える退行になっていた。作品タイプで表示が変わる理由がないため、
 * .hd-work-page .article全体（3タイプ共通）へ範囲を広げる。
 */
.hd-work-page .article .work-price .now.sale {
  font-size:16px;
  font-weight:700 !important;
  color:var(--sale);
}

/*
 * 1.3.0: 単独作品ページの案内文と推薦項目の文字組みを確定する。
 * 読む前には「どんな作品？」と同じ補助ラベルの扱いにし、
 * 本文は他の説明文と同じ15px・標準ウェイトへ統一する。
 */
.hd-work-page .article .standalone-note-label {
  color:#2C5E47 !important;
  font-size:13px !important;
}

.hd-work-page .article .standalone-note-text {
  color:#333333 !important;
  font-size:15px !important;
  font-weight:400 !important;
  line-height:1.6 !important;
}

/* 主人公タイプは単独作品v8と同じコンパクトなバッジ寸法に固定する。 */
.hd-work-page .article .ptype-badge {
  padding:4px 12px !important;
}

/* 太字の推薦見出しと説明文を、同サイズでも一段として読み分けられる間隔にする。 */
.hd-work-page .article .rec-title + .rec-desc {
  margin-top:4px;
}


/*
 * 1.3.2: 話数プルダウンの印は文字ではなくCSSのV字で描画する。
 * 小さな記号グリフの判別性・文字コード依存をなくし、PC/SPともタップ対象を明確にする。
 */
.hd-work-page .article .series-nav .sn-pos::after {
  content:"" !important;
  display:inline-block;
  width:8px;
  height:8px;
  margin-left:4px !important;
  border-right:2px solid var(--c-meta);
  border-bottom:2px solid var(--c-meta);
  transform:rotate(45deg) translateY(-2px);
}


/*
 * 1.3.10 (historical): 関連カードの幅と外部リンク表示を最終統一。
 * QA fix (1.0.18): the related-work rails render back inside .article
 * (see single-work.php), so these selectors are ".hd-work-page .article
 * ..." again, not ".hd-work-page .hd-work__related ...".
 *
 * QA fix (1.0.19): at SP (<=900px), this extra 16px inset made
 * "あわせて読みたい" (.related:not(.related-circle)) sit ~16px to the
 * right of 話数一覧/同サークルの他作品 (which never had this rule), so
 * its heading's green rule and first card didn't line up with the other
 * two sections. This 16px inset was a PC-era "keep it flush with 同
 * サークル's own inner card-grid padding" adjustment; at SP it just
 * duplicated the outer .article padding that already applies equally to
 * all three sections. Removed the <=900px block entirely so all three
 * sections share the same left edge at SP.
 *
 * QA fix (1.0.20): PC (>=901px) QA found the same 16px still made
 * "あわせて読みたい"'s first card sit ~16px right of 話数一覧's, matching
 * 同サークルの他作品's card position instead (which is intentionally
 * inset -- its cards sit inside a padded green background box, unlike
 * these other two rails). 話数一覧 is the position source of truth, so
 * only the card-grid's own left/right padding is removed at PC; the
 * heading's margin-left/right:16px is kept unchanged (heading/page-count/
 * arrow position was not part of this fix).
 *
 * QA fix (1.0.21): the 1.0.20 fix above only moved the card row -- the
 * heading's own margin-left:16px was left in place, so the green rule
 * and "あわせて読みたい" text still sat 16px right of both 話数一覧's
 * heading and this section's own (now-corrected) first card. Dropped
 * margin-left only; margin-right:16px is kept so .head-right (page
 * count / prev-next arrows), which is pinned to this flex row's right
 * edge via .head-right's own margin-left:auto, keeps its already-correct
 * position and the carousel controls do not move.
 */
@media (min-width:901px) {
  .hd-work-page .article .related:not(.related-circle) .related-h {
    margin-right:16px;
  }
}

/* SVGはカード出力側で保持し、文字色と同じ白で確実に描画する。 */
.hd-work-page .article .work-fanza svg {
  display:block;
  width:13px;
  height:13px;
  flex:0 0 13px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}

/*
 * 1.0.27 QA fix: the 11 standardized section headings (あらすじ/主人公タイプ/
 * ヒロイン紹介/ヒロインのHシーン割合/作品構成/管理人の見どころ/こんな人におすすめ/
 * 話数一覧/登場ヒロイン/収録作品, plus .scene-sec-lab, all confirmed 19px PC /
 * 17px SP / 700 in the first 1.0.27 pass) had their SP font-size override left
 * at each selector's own pre-existing @media(max-width:599px) block, so
 * 600-900px viewports still rendered the old 18px/900-era PC size instead of
 * the confirmed 17px SP value. .scene-sec-lab was the sole exception (already
 * overridden at 900px via work-pages-adjustments.css), which made it visually
 * inconsistent with the other 10 in the 600-900px range. This block adds the
 * confirmed 17px value at the correct @media(max-width:900px) boundary for
 * all 11 at once, placed last in the cascade so it wins outright for the
 * 600-900px range and simply repeats the already-correct 17px for <=599px
 * (no conflict with each selector's own existing @media(max-width:599px)
 * block, which is left in place unchanged -- including .midokoro-sec-lab's
 * own margin-bottom:24px layout adjustment there, untouched by this rule).
 */
@media (max-width: 900px) {
  .sec-plain .sec-jp,
  .ptype-sec-lab,
  .heroine-sec-lab,
  .scene-sec-lab,
  .hratio-sec-lab,
  .midokoro-sec-lab,
  .reco-sec-lab,
  .ep-light-label,
  .heroine-mini-h,
  .incl-sec-h {
    font-size:17px;
  }
}

/*
 * 1.0.29: the omnibus banner (.omni-notice) only switched to a column
 * layout (flex-direction:column, .on-btn's own row stretched full width
 * via align-items:stretch) at the pre-existing @media(max-width:599px)
 * block (line ~2088), which left 600-900px viewports on the PC row
 * layout with .on-btn's flex-shrink:0 auto-width behavior -- align-self
 * only affects the cross axis, so stretching the button to full width
 * requires the column layout, not just an align-self change on the
 * button alone. Placed last in the cascade at this theme's common 900px
 * boundary so it wins outright for the whole SP range (600-900px and
 * <=599px alike). The padding:16px 18px / gap:10px values here match
 * the existing 599px block's own values exactly (QA follow-up: matches
 * the home page's .hd-home-season summer-sale banner's SP dimensions,
 * see release-records/theme-independent-1.0.29-*.md), so this simply
 * extends the same numbers to the whole 600-900px range instead of
 * leaving it on the PC padding/gap. The 599px block's own margin is
 * untouched (outer margin stays whatever each page already uses; only
 * the summer-sale banner's border/radius/icon/button dimensions were
 * adopted, not its margin). PC (901px+) row layout, button width, and
 * placement are unaffected -- these selectors have no separate
 * PC-scoped override to touch.
 */
@media (max-width: 900px) {
  .omni-notice {
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:16px 18px;
  }

  .omni-notice .on-btn {
    width:100%;
    align-self:stretch;
    text-align:center;
  }
}

/*
 * QA fix: the omnibus price-comparison SP rules (.compare-visual and its
 * descendants) were authored only at this file's pre-existing
 * @media(max-width:599px) block, which left 600-900px viewports on the PC
 * layout -- unbounded flex-shrink on .compare-side, no width cap on
 * .thumb-visual-wrap, and no wrap on .compare-price-row -- causing
 * horizontal overflow and an unbalanced left/right split in that range.
 * This theme's confirmed boundary is SP<=900px / PC>=901px (see
 * release-records/theme-independent-1.0.27-heading-semantics-font-weight.md
 * "WordPress管理画面の追加CSS" and theme-independent-1.0.29-*.md), so these
 * rules are moved here in full rather than duplicated, and the old
 * @media(max-width:599px) copy is removed -- this is the sole source for
 * the whole SP range now, so <=599px keeps exactly the values it had
 * before this fix (same numbers, just no longer bounded to <=599px).
 *
 * .compare-visual switches to a 3-column grid (1fr auto 1fr) so the
 * individual/compiled sides get an equal, predictable width at every SP
 * width instead of flex-shrink compressing one side unpredictably.
 *
 * QA follow-up: align-items was originally center, which centers each
 * .compare-side box as a whole within the taller column's height -- if the
 * two labels ever differed in rendered height (long label text wrapping
 * unevenly) the whole shorter column shifted as a unit, throwing off the
 * label start position, the image area's vertical centering within its own
 * fixed-height box, and the price row all at once between the two sides.
 * .compare-label is now guaranteed single-line (white-space:nowrap, base
 * rule) with identical font metrics on both sides, so align-items:start
 * anchors both labels to the same top edge; .thumb-visual-wrap's own
 * align-items:center (base rule, unchanged) still centers each side's
 * covers within its own fixed-height box, matching PC's vertical centering.
 * With both columns' labels equal height, the trailing price rows land at
 * the same Y purely from equal box heights, without needing further rules.
 *
 * QA follow-up: the badge briefly carried separate PC ("通常価格比で...%
 * お得") and SP ("...%お得") text in two spans (.compare-off-badge-pc/
 * .compare-off-badge-sp) toggled via display:none/inline here, to keep
 * the SP text short enough to fit one line. Production QA then confirmed
 * "...%お得" as the single wording for both breakpoints, so the split is
 * gone -- .compare-off-badge now renders one plain "...%お得" string on
 * both PC and SP (theme content-omnibus.php), and this block's only
 * remaining job for it is the smaller SP font-size/padding/radius below.
 * .compare-price-row's flex-wrap is explicitly reset to nowrap here (base
 * rule has no wrap declaration; this SP block previously added flex-wrap:
 * wrap to the same selector, which is no longer needed with the short
 * badge text).
 *
 * QA follow-up: .ct-big's height still came from aspect-ratio:4/3 (base
 * rule) applied to its vw-scaled clamp() width, so at narrow SP widths
 * where the clamp preferred value is below its 150px ceiling (e.g. 390px:
 * 38vw=148.2px -> ~111.15px tall; 375px: 142.5px -> ~106.875px tall) its
 * height fell short of .thumb-visual-wrap's fixed 112.5px, leaving the two
 * price rows at different Y even with both columns' labels equal height.
 * .ct-big now sets height:112.5px explicitly here, matching
 * .thumb-visual-wrap exactly at every SP width (320-900px) regardless of
 * the clamp()'d width; with both width and height explicit, aspect-ratio
 * no longer drives .ct-big's box size, and object-fit:contain (unchanged)
 * keeps the cover's own aspect ratio intact, centered by .ct-big-img's
 * default object-position within the new box.
 */
@media (max-width: 900px) {
  .compare-visual {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:start;
    gap:4px;
  }

  .compare-side {
    min-width:0;
  }

  .compare-label {
    font-size:13px;
  }

  .thumb-visual-wrap {
    width:100%;
    height:112.5px;
  }

  .thumb-rows,
  .thumb-row {
    gap:6px;
  }

  .ct-eq {
    width:clamp(42px,14vw,56px);
    border-radius:3px;
  }

  .ct-big {
    width:clamp(112px,38vw,150px);
    height:112.5px;
    border-radius:3px;
  }

  .compare-price.reg {
    font-size:15px;
  }

  .compare-price.now {
    font-size:19px;
  }

  .compare-price-row {
    flex-wrap:nowrap;
    min-height:24px;
    gap:6px;
  }

  .compare-off-badge {
    font-size:11px;
    padding:2px 7px;
    border-radius:4px;
  }
}