/* ============================================================
   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;
  border-radius:8px;
  padding:24px 22px 30px;
  box-shadow:0 10px 40px rgba(35,42,40,.14);
  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;
  }
}

.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:900;
  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:.5px solid var(--violet-border);
  border-radius:12px;
  padding:14px 18px;
  margin:1.7rem 0;
}

.omni-notice .on-icon {
  width:40px;
  height:40px;
  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:800;
  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;
  background:var(--violet);
  color:#fff;
  font-size:13px;
  font-weight:800;
  padding:6px 16px;
  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;
}

.purchase-box {
  background:#fff;
  border:1px solid var(--c-border-strong);
  border-radius:12px;
  overflow:hidden;
  margin:1.3rem 0;
  box-shadow:0 3px 14px rgba(44,94,71,.08);
}

.purchase-top {
  display:flex;
  align-items:center;
}

.purchase-thumb {
  width:160px;
  height:120px;
  flex-shrink:0;
  background:linear-gradient(135deg,var(--c-main),color-mix(in srgb,var(--c-main) 58%,#000));
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.8);
  font-size:11px;
  font-weight:700;
}

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

.purchase-info {
  padding:12px 14px;
  flex:1;
  width:100%;
}

.purchase-title {
  font-size:14px;
  font-weight:bold;
  color:#333;
  line-height:1.4;
  margin-bottom:4px;
}

.purchase-circle {
  font-size:12px;
  color:#555555;
}

.purchase-bottom {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  padding:12px 16px;
  border-top:.5px solid var(--c-border);
}

.ep-price-row {
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
}

.ep-price-main {
  display:flex;
  align-items:baseline;
  gap:8px;
}

.ep-price-original {
  font-family:var(--num);
  font-size:15px;
  color:#999;
  text-decoration:line-through;
}

.ep-price-sale {
  font-family:var(--num);
  font-size:22px;
  font-weight:bold;
  color:var(--sale);
}

.ep-off-badge {
  font-family:var(--num);
  font-size:11px;
  font-weight:bold;
  color:#fff;
  background:var(--sale);
  padding:2px 8px;
  border-radius:4px;
}

.ep-btn-fanza {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--fanza);
  color:#fff;
  font-size:14px;
  font-weight:bold;
  padding:12px 24px;
  border-radius:8px;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .15s;
}

.ep-btn-fanza:hover {
  background:color-mix(in srgb,var(--fanza) 80%,#000);
}

.ep-btn-fanza svg {
  width:14px;
  height:14px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}

.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:800;
  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-bottom:4px;
  display:block;
}

.ep-summary-text {
  font-size:17px;
  font-weight:900;
  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 {
  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:18px;
  font-weight:900;
  color:#333333;
  display:block;
  margin-bottom:4px;
}

.synopsis-flex {
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-top:10px;
}

.synopsis-img {
  width:30%;
  flex-shrink:0;
  aspect-ratio:4/3;
  border-radius:8px;
  background:linear-gradient(135deg,var(--c-main),color-mix(in srgb,var(--c-main) 58%,#000));
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.8);
  font-size:10px;
  font-weight:700;
  text-align:center;
  overflow:hidden;
}

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

.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:18px;
  font-weight:900;
  color:#333333;
  margin-bottom: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;
}

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

.heroine-sec-lab {
  font-size:18px;
  font-weight:900;
  color:#333333;
  margin-bottom: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;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(44,94,71,.1);
  transition:box-shadow .15s;
}

.heroine-img {
  width:100%;
  aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--c-main),color-mix(in srgb,var(--c-main) 58%,#000));
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.8);
  font-size:11px;
  font-weight:700;
  position:relative;
}

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

.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:900;
  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:18px;
  font-weight:900;
  color:#333333;
  margin-bottom:12px;
}

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

.hratio-sec-lab {
  font-size:18px;
  font-weight:900;
  color:#333333;
  margin-bottom:10px;
}

.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;
  height:99px;
  flex-shrink:0;
  border-radius:6px;
  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,.75);
  font-size:10px;
}

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

.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:800;
  color:#333333;
  white-space:nowrap;
}

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

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

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

.hratio-pct.sm {
  font-size:20px;
  font-weight:900;
  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;
    height: 135px;
  }
}
@media (min-width: 901px) {
  .hratio-list:has(.hratio-row:nth-child(3)) {
    display: grid;
    grid-template-columns: repeat(3, 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: 140px;
    height: 105px;
  }
  .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:18px;
  font-weight:900;
  color:#333333;
  margin-bottom: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:900;
  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:900;
  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:900;
  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:900;
  color:#B08D2E;
  line-height:1.7;
}

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

.midokoro-ng-label {
  font-size:13px;
  font-weight:800;
  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:18px;
  font-weight:900;
  color:#333333;
  margin-bottom: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;
}

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

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

.ep-light-label {
  font-size:18px;
  font-weight:900;
  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;
}

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

.hscroll-track .work-card {
  flex:0 0 30%;
  scroll-snap-align:start;
}

.related .hscroll-track .work-card {
  flex-basis:calc((100% - 20px) / 3);
}

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

.hscroll-wrap {
  position:relative;
}

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

.hs-page {
  font-family:var(--num);
  font-size:11.5px;
  font-weight:800;
  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:900;
  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:block;
  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 {
  font-size:10.5px;
  font-weight:800;
  color:var(--c-dark);
  background:#fff;
  border:1.5px solid var(--c-main);
  padding:2.5px 8px;
  border-radius:4px;
}

.related {
  margin:1.3rem 0;
}

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

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

.card-grid {
  gap:10px;
}

.work-card {
  position:relative;
  background:#fff;
  border:1px solid var(--c-border-strong);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 3px 14px rgba(44,94,71,.08);
  transition:border-color .15s ease,box-shadow .15s ease;
}

/* Hover/focus: border + shadow only, no movement (position-stationary
   hover policy for vertical work cards). :focus-within matches mouse
   hover when tabbing to the card link or the FANZA button inside it. */
.work-card:hover,
.work-card:focus-within {
  border-color:var(--c-main);
  box-shadow:0 6px 20px rgba(44,94,71,.14);
}

.work-card:hover .work-title,
.work-card:focus-within .work-title {
  color:var(--c-dark);
}

@media (prefers-reduced-motion: reduce) {
  .work-card {
    transition:none;
  }
}

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

.work-cov {
  aspect-ratio:4/3;
  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;
}

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

.work-body {
  padding:10px 11px 11px;
}

.work-meta {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:21px;
  margin-bottom:6px;
}

.meta-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
}

.work-badge {
  font-family:var(--num);
  font-size:10.5px;
  font-weight:800;
  padding:3px 8px;
  border-radius:4px;
}

.work-badge.new {
  background:var(--c-dark);
  color:#fff;
}

.work-badge.semi {
  background:var(--c-light);
  color:var(--c-dark);
}

.work-badge.compil {
  background:var(--violet);
  color:#fff;
}

.work-badge.fullcolor {
  background:#8A6512;
  color:#fff;
}

.work-badge.play-3p {
  background:#E2F7F3;
  color:#2E7E73;
  border:.5px solid #A6DFD9;
}

.work-badge.play-4p {
  background:#5FA98A;
  color:#fff;
  border:.5px solid #5FA98A;
}

.work-badge.play-5p {
  background:#2E7E73;
  color:#fff;
  border:.5px solid #2E7E73;
}

.work-compil-range {
  display:inline-block;
  font-size:10.5px;
  font-weight:700;
  color:var(--violet);
  background:var(--violet-bg);
  border:.5px solid var(--violet-border);
  padding:1.5px 7.5px;
  border-radius:4px;
}

.work-title {
  font-size:12.5px;
  font-weight:700;
  color:#333;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:4.35em;
  margin-bottom:2px;
}

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

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

.work-circle {
  font-size:11px;
  font-weight:700;
  color:#555555;
}

.work-circle + .work-price {
  margin-top:6px;
}

.work-price {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin:6px 0 0;
}

.rrp-main {
  display:flex;
  align-items:baseline;
  gap:6px;
}

.work-price .reg {
  font-family:var(--num);
  font-size:11px;
  color:#999;
  text-decoration:line-through;
  display:none;
}

.work-price .now {
  font-family:var(--num);
  font-size:16px;
  font-weight:800;
  color:#333;
}

.work-price .now.sale {
  color:var(--sale);
}

.work-price .off-rate {
  font-family:var(--num);
  font-size:10.5px;
  font-weight:800;
  color:#fff;
  background:var(--sale);
  padding:2px 7px;
  border-radius:4px;
}

.work-actions {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-top:8px;
}

.work-fanza {
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--fanza);
  color:#fff;
  font-size:13px;
  font-weight:800;
  padding:6px 16px;
  border-radius:8px;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .15s;
}

.work-fanza:hover {
  background:color-mix(in srgb,var(--fanza) 80%,#000);
}

.work-fanza svg {
  width:13px;
  height:13px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

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

.related.related-circle .related-h {
  margin:0 16px 12px;
}

.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. */
  padding:6px 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:800;
  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;
}

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;
}

.purchase-box-top .purchase-top {
  display:none;
}

.purchase-box-top .purchase-bottom {
  border-top:none;
}

.purchase-top {
  flex-direction:column;
}

.purchase-thumb {
  width:100%;
  height:auto;
  aspect-ratio:4/3;
}

.purchase-bottom {
  flex-direction:column;
  align-items:stretch;
}

.ep-price-row {
  justify-content:flex-start;
}

.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:16px;
}

.synopsis-flex {
  flex-direction:column;
}

.synopsis-img {
  width:100%;
  margin:0;
  aspect-ratio:4/3;
}

.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:16px;
}

.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:16px;
}

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

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

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

.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:16px;
  margin-bottom:24px;
}

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

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

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

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

.hscroll-track .work-card {
  flex:0 0 55%;
}

.related .hscroll-track .work-card {
  flex-basis:72%;
}

/*
 * Unified with series-master-v42.css's matching SP override (@media
 * max-width:900px .hd-master-related .work-fanza there). Live-measured
 * before this change: this page's button (padding 9px 14px, no explicit
 * line-height) rendered ~127x40px, cramped horizontally; the master
 * page's (base padding:6px 16px only, no SP override at all) rendered
 * ~131x33px, too flat — two pages each guessing their own padding with
 * no shared target. min-width/min-height give both a shared target
 * instead, but only work as intended together with the base rule's new
 * box-sizing:border-box (added above, at line ~1990): with the default
 * content-box, min-height:38px would apply below the padding and this
 * padding would add on top, rendering 54px tall, not 38.
 */
.work-fanza {
  line-height:20px;
  padding:8px 15px;
  min-width:136px;
  min-height:38px;
}


.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:800;
  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);
}

.purchase-compil-range {
  font-size:12px;
  color:#555555;
  margin-top:2px;
}

.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:800;
  color:var(--violet);
  letter-spacing:.04em;
  margin-bottom: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:800;
  color:#555;
}

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

.thumb-visual-wrap {
  height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
}

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

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

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

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

.compare-price {
  font-family:var(--num);
  font-weight:800;
  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;
}

.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:18px;
  font-weight:900;
  color:#333333;
  margin-bottom: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:800;
  color:#333;
  line-height:1.4;
}

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

.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:800;
  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:800;
  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:800;
  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:18px;
  font-weight:900;
  color:#333333;
  margin-bottom: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%;
  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:12px;
  font-weight:700;
  overflow:hidden;
}

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

.heroine-mini-name {
  font-size:14px;
  font-weight:800;
  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:800;
  margin-bottom: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;
}

.compare-visual {
  gap:4px;
}

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

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

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

.thumb-rows {
  gap:6px;
}

.thumb-row {
  gap:6px;
}

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

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

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

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

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

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

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

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

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

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

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

.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 {
  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:800 !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: 関連カードの幅と外部リンク表示を最終統一。
 * PCは「あわせて読みたい」を同サークル欄と同じ内幅へ揃え、
 * SPは話数一覧・同サークル・あわせて読みたいを約1.5枚表示へ統一する。
 */
@media (min-width:600px) {
  .hd-work-page .article .related:not(.related-circle) .related-h {
    margin-left:16px;
    margin-right:16px;
  }

  .hd-work-page .article .related:not(.related-circle) .card-grid {
    padding-left:16px;
    padding-right:16px;
  }
}

@media (max-width:599px) {
  .hd-work-page .article .hscroll-track .work-card,
  .hd-work-page .article .related .hscroll-track .work-card {
    flex:0 0 clamp(210px,58vw,230px);
    width:clamp(210px,58vw,230px);
  }

  .hd-work-page .article .related:not(.related-circle) .related-h {
    margin-left:0;
    margin-right:0;
  }

  .hd-work-page .article .related:not(.related-circle) .card-grid {
    padding-left:0;
    padding-right:0;
  }
}

/* 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;
}