@charset "UTF-8"; /* * Series master page — clean rebuild from approved design v42. * * Rules for this rewrite (see docs/master-v42-clean-rebuild-handoff.md): * - Page chrome (background + outer/inner spacing) mirrors the single-work * page pattern exactly. The authoritative values are NOT the ones in * style.css's `.hd-work-page`/`.hd-work`/`.hd-work__container` block — * those are overridden by the later-loaded, `!important` * assets/prelaunch-adjustments.css (enqueued after work-pages.css, which * is enqueued after style.css), which is what actually renders. Values * here are taken from prelaunch-adjustments.css: * .hd-work-page { background:#f7f8f7 !important; } * .hd-work-page #content.l-content.l-container { width:100% !important; * max-width:none !important; margin:0 !important; padding:0 !important; } * .hd-work-page #main_content.hd-work { width:100% !important; * max-width:none !important; margin:0 !important; * padding:20px 14px 28px !important; } * (.hd-work__container's own padding: 24px 22px 30px, from style.css, * is not touched by prelaunch-adjustments.css at PC width.) At SP * (<=900px) prelaunch-adjustments.css switches everything to white and * uses padding:8px 0 16px on the outer element and * padding:14px 14px 20px + border-radius:0 + box-shadow:none on the * inner card. Those are the SWELL child theme's original values; this * independent-theme port keeps the same resulting numbers (20px 14px * 28px PC / 8px 0 16px SP) applied directly, with no equivalent * prelaunch-adjustments.css override chain. * - Page-chrome anchor: `.hd-entity-series`, added by this theme's * `hdtheme_body_classes()` (functions.php) for `is_tax( 'series' )`. * Unlike the SWELL child theme, this theme's body_class() output goes * straight onto `` (no #body_wrap indirection — see header.php), * so `.hd-entity-series` matches `` directly; no `body.` prefix is * needed or used, same as the source file. * - Component scoping uses the markup this template actually renders: * `#hd-master` (a plain `
`; see the `
`-dedup note below). * - No SWELL breadcrumb duplication: taxonomy-series.php no longer * renders a custom breadcrumb, so there is no .hd-master-breadcrumb * markup or CSS in this file. (This theme does not yet have a * breadcrumb implementation of its own; see * release-records/theme-independent-1.0.0-phase3-master-page.md.) * - `
`-dedup: this theme's header.php already opens the page's one * `
` landmark (closed by footer.php), so * taxonomy-series.php wraps its content in `
` instead of the source's * `
` — * same classes, same content, no second `
`. Every selector below * that targeted `#main_content.hd-master-page` in the source now targets * `#hd-master` instead; nothing else about those rules changed. * - Two SWELL-only rules from the source are dropped entirely (not scope- * adjusted): the empty `.l-sidebar` hide and the * `#content.l-content.l-container` reset. Both existed only to fight * SWELL's own DOM/CSS, which this theme does not have. */ #hd-master { --c-main: #5FA98A; --c-dark: #2C5E47; --c-light: #E7F1EB; --c-light2: #EFF6F1; --c-border: #BBD9C8; --c-border-strong: #9FC7B0; --violet: #6B3FA0; --violet-bg: #F4EEF7; --violet-border: #CBB0DD; --fanza: #F97316; --sale: #E24B4A; --amber: #8A6512; } /* Page chrome: light gray outer background + white rounded card. .hd-entity-series matches directly in this theme (see the header comment above) — no SWELL #body_wrap indirection to work around. */ .hd-entity-series { background: #f7f8f7; } /* * The two SWELL-only rules the source file had here — a * `.tax-series .l-sidebar { display:none !important; }` hide for SWELL's * empty sidebar, and a `.hd-entity-series #content.l-content.l-container` * width/margin/padding reset for SWELL's parent-theme archive wrapper — * are both dropped. This theme has no `.l-sidebar` and no * `#content.l-content.l-container` element at all, so there is nothing * for either rule to fight. */ #hd-master { width: 100%; max-width: none; margin: 0; padding: 20px 14px 28px; } .hd-master-shell { width: min(880px, 100%); margin-inline: auto; padding: 24px 22px 30px; border-radius: 8px; background: #fff; box-shadow: 0 10px 40px rgba(35, 42, 40, .14); } .hd-master-main { padding: 0; } .hd-master-h1 { font-size: 22px; font-weight: 900; color: #333; line-height: 1.4; margin: 0 0 4px; } .hd-master-h1-sub { font-size: 12.5px; font-weight: 700; color: #555; margin-bottom: 18px; } .hd-master-h1-sub a { color: var(--c-dark); text-decoration: none; } .hd-master-h1-sub a:hover { text-decoration: underline; } /* どんなシリーズ？ */ .hd-master-summary { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--violet-border); border-bottom: 1px solid var(--violet-border); padding: 14px 18px; margin: 0 0 1.4rem; } .hd-master-summary-icon { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; background: var(--violet-bg); border-radius: 50%; color: var(--violet); } .hd-master-summary-label { font-size: 13px; font-weight: 700; color: var(--violet); letter-spacing: .04em; margin-bottom: 4px; } .hd-master-summary-text { margin: 0; font-size: 17px; font-weight: 900; color: #333; line-height: 1.6; } /* 読み方 */ .hd-master-reading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--c-light2); border: 1px solid var(--c-border-strong); border-radius: 10px; padding: 11px 14px; margin: 1.3rem 0; font-size: 13px; } .hd-master-reading-options { display: inline-flex; gap: 6px; flex-shrink: 0; } .hd-master-reading-option { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; font-size: 13px; font-weight: 700; white-space: nowrap; border-radius: 20px; line-height: 1.5; } .hd-master-reading-option.is-active { background: var(--c-main); color: #fff; } .hd-master-reading-option.is-inactive { background: #fff; color: #999; border: 1px solid #ddd; } .hd-master-reading-check { width: 12px; height: 12px; flex-shrink: 0; } .hd-master-reading-description { color: #333; font-weight: 400; line-height: 1.6; } .hd-master-reading-description b { font-weight: 800; color: #333; } /* Shared inline accents (rich-row titles and quicknav cards both use these). */ #hd-master .ep-inline { color: var(--c-main); } #hd-master .compil-inline { color: var(--violet); } #hd-master .ep-sep { color: var(--c-border); font-weight: 400; margin: 0 2px; } /* .trend-box: shared box chrome for シリーズ内作品 (quicknav) and ヒロイン人数の推移. */ .trend-box { background: #fff; border: 1px solid var(--c-border-strong); border-radius: 12px; overflow: hidden; margin: 1.3rem 0; } .trend-box-h { background: var(--c-light); padding: 8px 16px; font-size: 13px; font-weight: bold; color: #333; display: flex; flex-direction: column; gap: 2px; } .trend-box-h .tbh-sub { font-size: 11.5px; font-weight: 400; color: #555; } /* シリーズ内作品 (quicknav) */ .quicknav-body { padding: 14px 16px 16px; } .quicknav-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; } .quicknav-grid-compil { margin-bottom: 10px; } .quicknav-card { display: block; min-width: 0; text-decoration: none !important; color: inherit; 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: box-shadow .15s, transform .15s; } .quicknav-card:hover { box-shadow: 0 6px 18px rgba(44, 94, 71, .14); transform: translateY(-1px); } .qn-thumb { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, var(--c-main), var(--c-dark)); display: flex; align-items: center; justify-content: center; } .quicknav-card.compil .qn-thumb { background: linear-gradient(135deg, var(--violet), #4E2D78); } .qn-thumb img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain !important; margin: 0 !important; border: 0 !important; } .qn-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 9px; } .qn-text { flex: 1; min-width: 0; min-height: 2.7em; font-size: 12.5px; font-weight: 800; color: #333; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .qn-jump { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--c-main); color: #fff; display: flex; align-items: center; justify-content: center; } .quicknav-card.compil .qn-jump { background: var(--violet); } .qn-jump svg { width: 14px; height: 14px; } .quicknav-note { font-size: 12px; color: #999; margin-top: 12px; } /* シリーズ基本データ */ .hd-master-data-box { margin: 1.7rem 0; border: 1px solid var(--c-border-strong); border-radius: 12px; overflow: hidden; background: #fff; } .hd-master-data-box .data-box-header { min-height: 43px; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--c-light); border-bottom: 1px solid #e0e0e0; } .hd-master-data-box .data-box-header-label { font-size: 14px; font-weight: bold; color: #333; letter-spacing: .06em; } .hd-master-data-box .data-box-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .hd-master-data-box .data-box-header-meta { display: flex; align-items: center; gap: 5px; } .hd-master-data-box .data-box-header-meta-label { font-size: 13px; color: #555; } .hd-master-data-box .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); } /* * Shared pill spec (also .hd-master-data-box .tag-chip below; duplicated * from assets/work-pages.css's .data-box-header-meta-value / .tag-chip, * since this page loads its own stylesheet, not that one): 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. */ .hd-master-data-box .data-box-header-meta-value { min-height: 30px; padding: 2px 10px; font-size: 13px; font-weight: bold; color: var(--c-dark); background: var(--c-light); border: 1px solid var(--c-border-strong); border-radius: 20px; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; } .hd-master-data-box .data-box-header-divider { width: 1px; height: 14px; background: var(--c-border); } .hd-master-data-box .data-box-list { display: flex; flex-direction: column; } .hd-master-data-box .data-box-item { display: flex; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--c-border-strong); gap: 15px; } .hd-master-data-box .data-box-item-label { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 7.5em; font-size: 13px; color: #555; white-space: nowrap; } /* PC and SP both use the label:value row layout (unlike the work page, which only uses rows at SP and a label-above-value grid at PC) — so the "：" separator applies at every width, not just SP. */ .hd-master-data-box .data-box-item-label::after { content: "\FF1A"; color: #999; } .hd-master-data-box .dbi-icon { color: var(--c-main); flex-shrink: 0; } .hd-master-data-box .data-box-item-value { display: flex; align-items: baseline; gap: 6px; font-size: 18px; font-weight: 800; } .hd-master-data-box .data-box-item-value.sm { font-size: 15px; } .hd-master-data-box .data-box-item-value.gap-lg { gap: 10px; flex-wrap: wrap; } .hd-master-data-box .data-box-item-unit { font-size: 12px; color: #999; } .hd-master-data-box .data-box-color-badge { display: inline-flex; align-items: center; font-size: 12.5px; color: var(--amber); background: #FFF6E0; border: 1px solid #E9CE8C; border-radius: 20px; padding: 2px 10px; } .hd-master-data-box .data-box-compil-tag { display: inline-flex; align-items: center; font-size: 11px; color: var(--violet); background: var(--violet-bg); border: 1px solid var(--violet-border); border-radius: 4px; padding: 2px 7px; } .hd-master-data-box .data-box-tags { padding: 10px 16px 12px; } .hd-master-data-box .data-box-tags-label { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #555; margin-bottom: 14px; } .hd-master-data-box .tag-group { display: flex; align-items: flex-start; gap: 14px; } .hd-master-data-box .tag-group + .tag-group { margin-top: 10px; } .hd-master-data-box .tag-group-label { flex: 0 0 108px; padding-top: 4px; text-align: right; font-size: 12.5px; color: #555; white-space: nowrap; } .hd-master-data-box .tag-group-chips { display: flex; flex-wrap: wrap; gap: 6px; } /* Shared pill spec — see .hd-master-data-box .data-box-header-meta-value above. */ .hd-master-data-box .tag-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; min-height: 30px; color: var(--c-dark); background: var(--c-light); border: 1px solid var(--c-main); border-radius: 20px; padding: 2px 10px; text-decoration: none; } .hd-master-data-box .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); } /* SP genre toggle: hidden by default, shown only under the 900px query. */ .hd-master-data-box .tag-groups-more { display: none; } /* ヒロイン人数の推移 */ .hd-master-heroine-trend .hc-body { padding: 18px 20px 14px; } .hd-master-heroine-trend .hc-chart { display: block; width: 100%; height: auto; overflow: visible; } .hd-master-heroine-trend .hc-chart text { font-size: 13px; font-weight: 800; fill: var(--c-dark); } .hd-master-heroine-trend .hc-chart .hc-axis-label { font-size: 12px; font-weight: 400; fill: #555; } .hd-master-heroine-trend .hc-note { text-align: center; margin-top: 5px; font-size: 13px; color: #555; } /* * v43: SP-only vertical step chart for "ヒロイン人数の推移". Default/PC * (901px and up) keeps the existing .hc-chart-pc line chart and hides the * new .hc-chart-sp markup; the @media(max-width:900px) block below flips * this. Ported from haremdoujin_master_page_mock_v43.html's .hc-vrow rules, * with the mock's own breakpoint (it toggled via .pc/.sp preview classes) * mapped onto this site's confirmed 900px/901px boundary. */ .hd-master-heroine-trend .hc-chart-sp { display: none; } /* 総集編一覧・話数一覧 */ .hd-master-rich-section { margin: 2rem 0; } .hd-master-rich-section .sec-jp { display: block; font-size: 18px; font-weight: 900; color: #333; margin-bottom: 10px; } .omni-card-list, .episode-card-list { display: flex; flex-direction: column; gap: 12px; } .rich-row { position: relative; background: #fff; border: 1px solid var(--c-border-strong); border-radius: 10px; padding: 14px 16px; overflow: hidden; transition: box-shadow .15s ease, border-color .15s ease; } /* * Card hover feedback, position-stationary policy matching the vertical * .work-card cards: border + shadow only, no transform. Originally this * also translateY(-2px)'d on hover/focus-within (restored from the 1.3.36- * approved pass, the same commit that introduced the full-card-click * .rich-row-link pattern below) — removed to align with the vertical-card * hover policy. 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. */ @media (hover: hover) { .rich-row:hover { border-color: var(--c-main); box-shadow: 0 8px 22px rgba(44, 94, 71, .14); } .rich-row:hover .rich-row-title { color: var(--c-dark); } } .rich-row:focus-within { border-color: var(--c-main); box-shadow: 0 8px 22px rgba(44, 94, 71, .14); } .rich-row:focus-within .rich-row-title { color: var(--c-dark); } @media (prefers-reduced-motion: reduce) { .rich-row { transition: none; } } /* Full-card click: keep the explicit action buttons independently clickable. */ .rich-row-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .rich-row-title, .rich-row-grid, .rich-row-foot { position: relative; z-index: 2; pointer-events: none; } .rich-row-actions-v2, .rich-row-actions-v2 a { position: relative; z-index: 3; pointer-events: auto; } .rich-row-title { font-size: 16px; font-weight: 800; color: #333; line-height: 1.45; margin: 0 0 9px; } .rich-row-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; } .rich-row-cov-lg { width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, var(--c-main), var(--c-dark)); display: flex; align-items: center; justify-content: center; } .rich-row-cov-lg img { display: block; width: 100%; height: 100%; object-fit: contain; } .rich-row-content { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .rrc-top { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; } .rich-pos-badge { 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; } .rich-row-hook { margin: 0; font-size: 14px; font-weight: 800; color: #333; line-height: 1.55; } .rich-row-pick { background: var(--c-light2); border-radius: 9px; padding: 10px 12px; } .rich-row-pick-label { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--c-dark); margin-bottom: 5px; } .rich-row-pick-text { margin: 0; font-size: 13.5px; color: #333; line-height: 1.65; } .rich-row-benefit { display: flex; flex-direction: column; gap: 4px; } .rrb-item { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: #333; line-height: 1.55; } .rrb-check { color: var(--c-main); font-weight: 900; } .rich-row-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-top: 1px solid #eef2ef; margin-top: 12px; padding-top: 11px; } .rich-row-data-wrap { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .rich-row-data { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: #555; } .rich-row-data b { color: #333; } .rich-row-price { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; color: #555; } .rich-row-price .rrp-main { display: flex; align-items: baseline; gap: 6px; } .rich-row-price .reg { font-size: 11px; color: #999; text-decoration: line-through; } .rich-row-price .now { font-size: 18px; font-weight: 800; color: #333; } .rich-row-price .now.sale { color: var(--sale); } .rich-row-price .off-rate { font-size: 10.5px; font-weight: 800; color: #fff; background: var(--sale); padding: 2px 7px; border-radius: 4px; } .rich-row-actions-v2 { display: flex; align-items: center; gap: 9px; flex-shrink: 0; } .ep-row-detail, .ep-row-fanza { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap; min-height: 42px; border: 0; } /* FANZA CTA: filled orange, matches the episode purchase-link standard. */ .ep-row-detail { background: var(--c-main); color: #fff; } .ep-row-detail:hover, .ep-row-detail:focus-visible { background: var(--c-dark); color: #fff; } .ep-row-fanza { background: var(--fanza); color: #fff; } .ep-row-fanza:hover, .ep-row-fanza:focus-visible { background: #c95d0f; color: #fff; } /* hdchild_external_icon() renders an unclassed ; style via the .ep-row-fanza svg descendant selector to match the inline markup it replaced (width/height/stroke-width were previously set as attributes on the removed inline ). */ .ep-row-fanza svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } /* * work-pages.css's own `.article *, .article *::before, .article *::after * { box-sizing:border-box; }` (its universal reset scoped to the work-page * shell) has no equivalent here, so this subtree defaulted to the browser's * content-box. That's what made .hscroll-track's 16px padding-left ADD to * its content width instead of eating into it: each work-card's * `flex:0 0 calc((100% - 20px)/3)` resolved 2px wider per card than on * work pages (278px vs 276px, confirmed live via getBoundingClientRect on * both pages' actual markup+CSS), pushing the row 6px past its container * (scrollWidth 886 vs clientWidth 880) even with just enough cards to * exactly fill three columns. With scroll-snap-type:x mandatory on that * bare 6px overflow, the browser auto-corrected scrollLeft to 6 on load * (confirmed live) — visually eating 6 of the intended 16px inset, so the * first card sat only 10px from the section edge instead of 16px, * mismatched from the heading above it. Scoped to .hd-master-related * specifically (not the whole .hd-master-shell, unlike work-pages.css's * page-wide .article reset) so this doesn't also nudge already-approved * sibling components (summary icon, quicknav, data-box chip arrows) that * were never part of this bug. */ .hd-master-related *, .hd-master-related *::before, .hd-master-related *::after { box-sizing: border-box; } /* 同サークルの他作品・あわせて読みたい */ .hd-master-related { margin: 1.7rem 0; } .hd-master-related.related-circle { background: var(--c-light2); border-radius: 14px; padding: 16px 0 18px; } .hd-master-related.related-circle .related-h { margin: 0 16px 12px; } .hd-master-related.related-circle .hscroll-track { /* padding-top matches the base .hscroll-track rule below — see the note there on why a bare 0 clipped the hover box-shadow's top edge. */ padding: 6px 16px 6px; } .hd-master-related .related-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; font-weight: 800; } /* * Live-measured on the production work page (getBoundingClientRect, * matched browser width): .related:not(.related-circle) .related-h sits * 16px right of the section edge (work-pages.css's * @media (min-width:600px) rule adds margin-left/right:16px there), and * .card-grid's own 16px padding-left (same media query) puts the first * card at that same +16px position too — heading.left === card.left. * (An earlier measurement on a different, overflowing track had * scroll-snap-align:start auto-correcting scrollLeft to 16 on load, which * visually absorbed that padding; re-measured on a track that fits * without overflowing — track.scrollLeft stayed 0 — the padding is not * absorbed and the card really does sit at +16px. Card position depends * on whether the row overflows, so it must be reproduced with the same * padding-left, not inferred from one measurement.) The master page had * the heading margin (added first) but not the matching card-row padding, * so heading.left (550.5) !== card.left (534.5) — fixed below by adding * the same 16px padding-left/right to .card-grid, scoped like * work-pages.css's own `.related:not(.related-circle) .card-grid` rule. */ @media (min-width: 600px) { .hd-master-related .related-h { margin-left: 16px; margin-right: 16px; } .hd-master-related:not(.related-circle) .card-grid { padding-left: 16px; padding-right: 16px; } /* * Live-measured cardToFooter gap on the master page's final section * ("あわせて読みたい", .hd-master-related:not(.related-circle)) was * ~91.19px vs. ~84.80px on work pages — a ~6.39px excess traced to this * section's computed margin-bottom (~27.19px, i.e. this file's own * `.hd-master-related { margin: 1.7rem 0; }` above) vs. work-pages.css's * `.related { margin: 1.3rem 0; }` (~20.80px) for the equivalent * non-circle section there. Overriding only margin-bottom to that same * 1.3rem — not touching margin-top, which sets the gap from the * preceding "同サークルの他作品" section and was never reported as * wrong — brings the master page's trailing whitespace back in line * with work pages without re-deriving the value by hand. */ .hd-master-related:not(.related-circle) { margin-bottom: 1.3rem; } } /* * Production QA found the initial card still 16px left of the heading on * PC for "あわせて読みたい" specifically when the row actually overflows * (4+ cards; the 2-card, non-overflowing case above was already correct). * Live-measured cause: .card-grid's own padding-left:16px (just above) * only shifts the *box*, not where scroll-snap-type:x mandatory decides * the track's snapped-to-start scroll position is. With no * scroll-padding set, the browser's default scroll-snap origin is the * track's un-padded edge, so on load it auto-corrected scrollLeft to 16 * (confirmed live: scrollLeft was 16, not 0), which visually re-absorbed * the padding and put the first card back at the section edge — 16px * left of the heading above it. scroll-padding-inline:16px tells the * snap engine the padding is part of the intended start inset, which * live-testing confirmed keeps scrollLeft at 0 on load and after * returning via .hs-prev, with heading.left === card.left in both cases. * Scoped to its own @media(min-width:901px) — this file's confirmed PC * boundary — rather than folding into the @media(min-width:600px) block * above, so the untouched 600-900px SP range (buttons hidden, touch-only * per the existing @media(max-width:900px) rules elsewhere in this file) * keeps scroll-padding-left:auto exactly as before. Not applied to * .related-circle ("同サークルの他作品") — production QA only reported * this on "あわせて読みたい", matching the existing * :not(.related-circle) scope already used for the padding rule above. */ @media (min-width: 901px) { .hd-master-related:not(.related-circle) .card-grid { scroll-padding-inline: 16px; } } .hd-master-related .related-h::before { content: ""; width: 5px; height: 16px; border-radius: 2px; background: var(--c-main); } .hd-master-related .head-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .hd-master-related .more { font-size: 12.5px; font-weight: 700; color: var(--c-dark); text-decoration: underline; text-underline-offset: 3px; } /* * PC left/right scroll buttons, ported from work-pages.css's own .hs-nav/ * .hs-page/.hs-arrow rules (the master page previously rendered neither * the .hs-nav markup — taxonomy-series.php never called * hdchild_rail_navigation() — nor any button JS, so .hscroll-track's * native overflow-x:auto had nothing else to fall back on but the * browser's own scrollbar). Values copied as-is; only the scope prefix * changes. */ .hd-master-related .hs-nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .hd-master-related .hs-page { font-family: var(--num, 'Inter', 'Noto Sans JP', sans-serif); font-size: 11.5px; font-weight: 800; color: var(--c-dark); background: var(--c-light2); padding: 3px 9px; border-radius: 10px; white-space: nowrap; } .hd-master-related .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; } .hd-master-related .hs-arrow:hover { background: var(--c-dark); } .hd-master-related .hs-arrow:active { transform: scale(.92); } .hd-master-related .hs-nav.no-overflow { display: none; } .hd-master-related .hscroll-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; /* padding-top added alongside the existing padding-bottom: 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 bleeding above the box) was clipped by this container's own top edge. 6px matches the existing padding-bottom value already used here. */ padding: 6px 0 6px; /* * Hide the browser-native scrollbar while keeping the track itself * scrollable (overflow-x stays auto above) — mouse-wheel/trackpad * scrolling, the .hs-arrow buttons below, and SP touch flick all still * work. -webkit-scrollbar for Chromium/Safari, scrollbar-width for * Firefox; work-pages.css only had the -webkit- half (its Firefox * scrollbar was never reported, but the same fix applies there too — * see that file's matching .hscroll-track rule). */ scrollbar-width: none; } .hd-master-related .hscroll-track::-webkit-scrollbar { height: 0; } .hd-master-related .hscroll-track .work-card { flex: 0 0 calc((100% - 20px) / 3); scroll-snap-align: start; display: flex; flex-direction: column; } /* * .work-card chrome for the master page's related-work rails (「同サークルの * 他作品」「あわせて読みたい」). Both sections now call hdchild_work_card() * (inc/work-view.php) directly — the exact same function and DOM used by * template-parts/work/related.php on episode/single/omnibus pages — instead * of hdchild_entity_work_card(). This resolved a QA-rejected DOM mismatch * (article vs div root, h2 vs div title, .work-entity-link link vs * .work-circle plain text, missing .rrp-main wrapper) that no amount of * CSS-only patching could fully hide. hdchild_work_card() itself is * unchanged; this page still does not enqueue work-pages.css (see the * "Page chrome" note at the top of this file — each page's stylesheet * stays self-contained by project convention), so the chrome below is * ported from work-pages.css's .work-card block plus its .hd-work-page * .article-scoped resolved overrides, matching the DOM hdchild_work_card() * actually emits class-for-class. */ .hd-master-related .work-card { position: relative; min-width: 0; height: 100%; overflow: hidden; border: 1px solid var(--c-border-strong); border-radius: 10px; background: #fff; 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 — see docs/page-chrome- foundation-spec.md's card-hover note for why translateY is avoided here. :focus-within gives the same feedback when tabbing to the card link or the FANZA button inside it. */ .hd-master-related .work-card:hover, .hd-master-related .work-card:focus-within { border-color: var(--c-main); box-shadow: 0 6px 20px rgba(44, 94, 71, .14); } .hd-master-related .work-card:hover .work-title, .hd-master-related .work-card:focus-within .work-title { color: var(--c-dark); } @media (prefers-reduced-motion: reduce) { .hd-master-related .work-card { transition: none; } } .hd-master-related .card-link { position: absolute; z-index: 1; inset: 0; } .hd-master-related .work-cov { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, var(--c-main), color-mix(in srgb, var(--c-main) 58%, #000)); color: rgba(255, 255, 255, .7); font-size: 11px; font-weight: 700; } .hd-master-related .work-cov-img { display: block; width: 100%; height: 100%; object-fit: contain; } .hd-master-related .work-body { padding: 10px 11px 11px; } .hd-master-related .work-meta { display: flex; flex-direction: column; gap: 4px; min-height: 21px; margin-bottom: 6px; } .hd-master-related .meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .hd-master-related .work-badge { font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 4px; } .hd-master-related .work-badge.compil { background: var(--violet); color: #fff; } .hd-master-related .work-badge.fullcolor { background: #8A6512; color: #fff; } .hd-master-related .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; } .hd-master-related .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; } .hd-master-related .work-title .ep-inline { color: var(--c-main); font-weight: 900; } .hd-master-related .work-title .ep-sep { color: var(--c-border); font-weight: 400; margin: 0 1px; } /* hdchild_work_card() renders this as plain text (no link, unlike hdchild_entity_work_card()'s old .work-entity-link), so no position/z-index is needed here — it isn't competing with .card-link for independent clickability. */ .hd-master-related .work-circle { font-size: 11px; font-weight: 700; color: #555555; } .hd-master-related .work-circle + .work-price { margin-top: 6px; } .hd-master-related .work-price { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 0; } .hd-master-related .rrp-main { display: flex; align-items: baseline; gap: 6px; } /* * Regular (struck-through) price, plain price weight, and sale-price * emphasis below are copied from work-pages.css's actually-applied, * QA-approved values (base .work-price rules plus the .hd-work-page * .article-scoped overrides that win in practice — see * release-records for the audit that traced these): * .hd-work-page .article .work-price .reg { display:none !important; } * .hd-work-page .article .work-price .now { font-weight:400 !important; } * (.hd-work-type-episode) .article .work-price .now.sale { font-weight:800 !important; } * i.e. the struck-through regular price is hidden, the plain (non-sale) * price is regular weight, and only the sale price is bold + colored. */ .hd-master-related .work-price .reg { display: none; } .hd-master-related .work-price .now { font-family: 'Inter', 'Noto Sans JP', sans-serif; font-size: 16px; font-weight: 400; color: #333; } .hd-master-related .work-price .now.sale { font-weight: 800; color: var(--sale); } .hd-master-related .off-rate { font-family: 'Inter', 'Noto Sans JP', sans-serif; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--sale); padding: 2px 7px; border-radius: 4px; } .hd-master-related .work-actions { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; margin-top: 8px; } .hd-master-related .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; } .hd-master-related .work-fanza:hover { background: #c95d0f; } .hd-master-related .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; } /* ============================== SP (<=900px) ============================== */ @media (max-width: 900px) { .hd-entity-series, #hd-master { background: #fff; } #hd-master { padding: 8px 0 16px; } .hd-master-shell { width: 100%; max-width: none; margin: 0; padding: 14px 14px 20px; border-radius: 0; box-shadow: none; } .hd-master-h1 { font-size: 18px; } .hd-master-summary { padding: 12px 14px; gap: 10px; } .hd-master-summary-icon { width: 28px; height: 28px; flex-basis: 28px; } .hd-master-summary-text { font-size: 15px; } .hd-master-reading { padding: 10px 12px; gap: 8px; font-size: 12px; } .hd-master-reading-option { padding: 5px 10px; font-size: 11.5px; } .quicknav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hd-master-data-box .data-box-header { align-items: flex-start; flex-direction: column; gap: 7px; } .hd-master-data-box .data-box-header-right { align-items: flex-start; flex-direction: column; width: 100%; } .hd-master-data-box .data-box-header-divider { display: none; } /* Fixed label width so the サークル/作者 value pills start at the same x-position when stacked, regardless of label character count. */ .hd-master-data-box .data-box-header-meta { align-items: baseline; width: 100%; min-width: 0; } .hd-master-data-box .data-box-header-meta-label { flex: 0 0 4.2em; white-space: nowrap; } .hd-master-data-box .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; } .hd-master-data-box .data-box-item-label { flex: 0 0 9em; } /* Genre groups: show only the first complete category, never cut mid-group. This differs from the work page's own #tagGroupsBox (which clips to a fixed max-height and fades the cut edge with a gradient): a fixed pixel height can truncate mid-group, which the master page must never do, so whole .tag-group elements are hidden instead. Because nothing is ever clipped mid-content here, the work page's fade-gradient overlay is not needed. The toggle button itself (below) matches the work page exactly. */ .hd-master-data-box .data-box-tags.tag-groups { display: flex; flex-direction: column; } .hd-master-data-box #tagGroupsBox:not(.expanded) .tag-group:nth-of-type(n + 2) { display: none; } /* Category name on its own line, chips below — matches work-pages.css's own SP #作品ジャンル layout (.tag-group{flex-direction:column}). */ .hd-master-data-box .tag-group { flex-direction: column; gap: 4px; } .hd-master-data-box .tag-group-label { flex: none; padding-top: 0; text-align: left; font-size: 11.5px; } /* Text-link style, matching the work page's .tag-groups-more exactly: full-width, centered, underlined text — no pill, no border, no fill. */ .hd-master-data-box .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; } .hd-master-data-box .tag-groups-more .pill-arrow { font-size: 9px; } .hd-master-heroine-trend .hc-body { padding: 12px 8px 10px; } .hd-master-heroine-trend .hc-chart-pc { display: none; } .hd-master-heroine-trend .hc-chart-sp { display: flex; flex-direction: column; gap: 6px; } .hd-master-heroine-trend .hc-vrow { display: flex; align-items: center; gap: 8px; height: 34px; } .hd-master-heroine-trend .hc-vrow-ep { flex: 0 0 44px; font-size: 12px; color: #555; white-space: nowrap; } .hd-master-heroine-trend .hc-vrow-track { position: relative; flex: 1; height: 10px; background: var(--c-light2); border-radius: 5px; } .hd-master-heroine-trend .hc-vrow-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 5px; background: var(--c-main); } .hd-master-heroine-trend .hc-vrow-dot { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2.5px solid var(--c-main); transform: translate(-50%, -50%); } .hd-master-heroine-trend .hc-vrow-val { flex: 0 0 60px; font-size: 13px; font-weight: bold; color: var(--c-dark); white-space: nowrap; } .hd-master-heroine-trend .hc-vrow-delta { margin-left: 4px; font-size: 10.5px; font-weight: bold; } .hd-master-heroine-trend .hc-vrow-delta.up { color: var(--c-main); } .hd-master-heroine-trend .hc-vrow-delta.down { color: var(--c-dark); } .hd-master-heroine-trend .hc-vrow-delta.flat { color: #999; font-weight: normal; } .hd-master-heroine-trend .hc-chart-sp.dense { gap: 4px; } .hd-master-heroine-trend .hc-chart-sp.dense .hc-vrow { height: 28px; } .hd-master-heroine-trend .hc-chart-sp.dense2 { gap: 3px; } .hd-master-heroine-trend .hc-chart-sp.dense2 .hc-vrow { height: 24px; } .hd-master-heroine-trend .hc-chart-sp.dense2 .hc-vrow-ep { font-size: 11px; } .hd-master-heroine-trend .hc-chart-sp.dense2 .hc-vrow-val { font-size: 12px; flex-basis: 52px; } .hd-master-rich-section .sec-jp { font-size: 16px; } .rich-row { padding: 12px; } .rich-row-title { font-size: 14.5px; } .rich-row-grid { grid-template-columns: 1fr; gap: 10px; } .rich-row-foot { align-items: stretch; flex-direction: column; } .rich-row-actions-v2 { justify-content: flex-end; } .ep-row-detail, .ep-row-fanza { padding: 8px 13px; font-size: 12.5px; min-height: 40px; } /* * Unified SP related-card width for the master page, work pages * (episode/single/omnibus), matching work-pages.css's existing * .hd-work-page .article .hscroll-track .work-card rule exactly, instead * of this page's previous independent 55%. * * Both pages share the same 390px scrollport width in production (14px * page/card padding on each side leaves a 362px-wide .hscroll-track, * confirmed live on both /work/... and /series/... at a 390px viewport) * and the same 10px card gap, so the same formula gives the same visible * card count on both. Target: ~1.55 cards visible at 390px. Solving * visibleWidth = 1.55 * cardWidth + gap for the 362px scrollport and * 10px gap gives cardWidth ≈ 227px — matching work-pages.css's existing * clamp(210px, 58vw, 230px) (≈226px at 390px viewport) almost exactly. * Live-measured on the production work page at 390px with this formula: * card width 226.1875px, second card visible for 125.8125px of its * 226.1875px width → 1 + 125.8125/226.1875 ≈ 1.56 cards visible — inside * the 1.5–1.6 target range. The master page's previous 55% (199.09px at * 390px, 1 + 152.91/199.09 ≈ 1.77 cards) is replaced with the same * formula so all three page types render identically. */ .hd-master-related .hscroll-track .work-card { flex: 0 0 clamp(210px, 58vw, 230px); width: clamp(210px, 58vw, 230px); } /* * SP FANZA button, unified with work-pages.css's own SP override * (@media max-width:599px .work-fanza there). Live-measured before this * change: master's button (base padding:6px 16px only, no SP override) * rendered ~131x33px, while work pages' (base padding overridden to * 9px 14px under 599px) rendered ~127x40px — narrow-but-short vs * cramped-but-tall, from two different, uncoordinated paddings. * 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 the .hd-master-related * .work-fanza rule outside this media query): 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. */ .hd-master-related .work-fanza { line-height: 20px; padding: 8px 15px; min-width: 136px; min-height: 38px; } /* * SP: no PC left/right buttons — touch flick/swipe on .hscroll-track * (overflow-x:auto, untouched by this rule) is the only scroll method, * matching work-pages.css's own .hs-nav SP behavior (its * @media max-width:599px block hides .hs-nav the same way; this file * uses its own existing 900px SP threshold instead of borrowing 599, * since every other SP rule in this file already switches at 900px). */ .hd-master-related .hs-nav { display: none; } }