@charset "UTF-8";

/*
 * Ported from wp-content/themes/swell_child/assets/site-pages.css: only
 * its .hd-home and .home- prefixed rules (independent theme phase 5).
 * The same source file's public-information-page rules (.hd-info-page,
 * .info- prefixed rules, .launch-links, Contact Form 7 overrides) are
 * intentionally NOT ported here — those pages are deferred to a later
 * phase, see
 * release-records/theme-independent-1.0.2-phase5-home.md.
 *
 * Dropped entirely (not scope-adjusted), matching phase4's sale-index.css
 * precedent: #main_visual/#post_slider (SWELL homepage widgets), the
 * .hd-home-page #breadcrumb/#sidebar hide rules, and the
 * .hd-home-page .post_content/.content_wrap padding/background reset —
 * this theme's <main id="hd-main"> has none of SWELL's own wrapper
 * elements around it for any of these to apply to.
 *
 * CSS custom properties are retargeted to this theme's own tokens: the
 * global --c-main/--c-dark/--c-light2/--c-border-strong/--sale become
 * --hd-c-main/--hd-c-dark/--hd-c-light2/--hd-c-border-strong/--hd-c-sale
 * (defined in style.css, same as sale-index.css's own retargeting). The
 * source's page-local --fanza/--violet/--violet-bg/--violet-border/--num
 * tokens (not part of the global set) are redeclared locally below,
 * scoped to .hd-home-page, matching work-pages.css's own per-page-local
 * token pattern.
 *
 * The source's 100vw + calc(50% - 50vw) full-bleed technique on
 * .home-about was never ported here either (explicitly disallowed for
 * this phase). .home-about itself moved to site.css's Footer section in
 * 1.0.10, once it became a shared footer component rendered on every
 * page rather than a front-page-only section -- see
 * release-records/theme-independent-1.0.10-common-footer-generic-search-card.md.
 */

.hd-home-page {
	background: #eaf4f1;
}

.hd-home-page {
	--fanza: #F97316;
	--violet: #6B3FA0;
	--violet-bg: #F4EEF7;
	--violet-border: #CBB0DD;
	--num: 'Inter', 'Noto Sans JP', sans-serif;
}

/*
 * White page body (v18: only the pale-green .hd-home-page background
 * outside this 1080px column shows through). No width:1080px, 100vw, or
 * negative margin -- the existing min(100%,1080px)+margin:0 auto
 * centering already keeps this box within the viewport at every width
 * (full-width, no side margin, below the 900px boundary) and this
 * background-color declaration adds nothing that could cause horizontal
 * overflow.
 */
.hd-home {
	width: min(100%, 1080px);
	margin: 0 auto;
	background: #fff;
}

/*
 * Plain white band with a single bottom rule (v19 mock's .intro), not the
 * previous pale-green radial-gradient card. No border-top here: the
 * header's own border-bottom (site.css's .hd-header) sits directly above
 * this element with no gap (.hd-main/.hd-home/.hd-home-intro all have
 * margin-top:0), so that one line already reads as this block's top
 * edge -- adding a border-top here would stack a second 1px line right
 * next to it as a visible double line.
 */
.hd-home-intro {
	position: relative;
	padding: 18px 28px;
	text-align: center;
	background: #fff;
	border-bottom: 1px solid #e6e6e6;
}

.hd-home-intro p {
	margin: 0 auto;
	max-width: 640px;
	color: #333;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

.hd-home-season {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 22px 28px 0;
	padding: 16px 20px;
	border: 1px solid color-mix(in srgb, var(--hd-c-sale) 35%, #fff);
	border-radius: 14px;
	background: color-mix(in srgb, var(--hd-c-sale) 6%, #fff);
}

.hd-home-season-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--hd-c-sale);
}

.hd-home-season-body {
	flex: 1;
	min-width: 0;
}

.hd-home-season-h {
	color: #333;
	font-size: 16px;
	font-weight: 900;
	line-height: 1.4;
}

.hd-home-season-accent {
	color: var(--hd-c-sale);
}

.hd-home-season-d {
	margin-top: 2px;
	color: #555;
	font-size: 12.5px;
}

.hd-home-season-cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border-radius: 8px;
	background: var(--hd-c-sale);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .15s;
}

.hd-home-season-cta:hover {
	background: color-mix(in srgb, var(--hd-c-sale) 82%, #000);
	color: #fff;
}

.hd-home-sec {
	padding: 26px 28px;
}

/* Separator only between two consecutive .hd-home-sec sections — not
   right after the season banner (not a .hd-home-sec itself). */
.hd-home-sec + .hd-home-sec {
	border-top: 1px solid var(--hd-c-border);
}

.hd-home-sec--alt {
	background: var(--hd-c-light2);
}

/*
 * v19: separated from the sections above/below by background color only
 * (#EFF6F1, same value as --hd-c-light2), not by the .hd-home-sec +
 * .hd-home-sec border-top rule above -- that border was a visible green
 * line (var(--hd-c-border)) both above and below this section, which
 * v19 does not have. Cancelled on both sides that actually touch this
 * section (not the generic sibling rule itself, which stays available
 * for any future non-alt section boundary). Both selectors below match
 * .hd-home-sec + .hd-home-sec's own specificity (two classes), so they
 * only need to win on source order (both declared after it, here); a
 * lone .hd-home-sec--alt{border-top:0} would lose to that two-class
 * sibling rule regardless of source order and leave the green line in
 * place on this section's own top edge.
 */
.hd-home-sec + .hd-home-sec--alt,
.hd-home-sec--alt + .hd-home-sec {
	border-top: 0;
}

.hd-home-sec-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
}

.hd-home-ttl {
	font-size: 18px;
	font-weight: 900;
	color: #333;
}

.hd-home-sec-head-right {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.hd-home-more {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--hd-c-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.hd-home-sec-note {
	margin: 0 0 15px;
	font-size: 12px;
	color: #333;
}

.hd-home-sec-head + .hd-home-hscroll,
.hd-home-sec-head + .hd-home-sec-note + .hd-home-hscroll,
.hd-home-sec-head + .home-series-grid {
	margin-top: 14px;
}

/* Horizontal carousel nav, scoped to .hd-home so it cannot collide with
   any other page's own carousel-nav usage (work-pages.css's .hs-arrow/
   .hs-nav, series-master-v42.css's own equivalents). */
.hd-home .hd-home-hs-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.hd-home .hd-home-hs-nav button {
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: var(--hd-c-main);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.hd-home .hd-home-hs-nav button:hover:not(:disabled) {
	background: var(--hd-c-dark);
}

/*
 * home-carousel.js only sets `disabled` when there is no overflow at all
 * (in which case .hd-home-no-overflow already hides the whole nav below),
 * never at the scroll ends while overflowing — the PC arrows must stay
 * enabled and loop at both ends, per the confirmed carousel spec. This
 * rule therefore has no visible effect while a carousel actually
 * overflows; it only covers the already-hidden no-overflow case.
 */
.hd-home .hd-home-hs-nav button:disabled {
	background: var(--hd-c-border-strong);
	color: #fff;
	cursor: default;
}

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

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

.hd-home .hd-home-hscroll {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 6px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.hd-home .hd-home-hscroll::-webkit-scrollbar {
	display: none;
}

/* Work-card component for the home carousels, ported verbatim from
   work-pages.css's canonical .work-card (the pre-phase-5, already-approved
   episode/single/omnibus card) — not a new top-only design, and not
   sale-index.css's own card either, so the sale-index page's frozen
   design is untouched and this page's markup does not borrow the
   .hd-sale-index scope. hdtheme_sale_card()'s markup (used here) omits
   the .rrp-main wrapper that the work-page card uses; the .rrp-main rule
   below is kept for parity with the canonical source but matches no
   element on this page. */
.hd-home .work-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--hd-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;
}

.hd-home .work-card:hover,
.hd-home .work-card:focus-within {
	border-color: var(--hd-c-main);
	box-shadow: 0 6px 20px rgba(44, 94, 71, .14);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.hd-home .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-home .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-home .work-title .ep-inline {
	color: var(--hd-c-main);
	font-weight: 900;
}

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

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

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

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

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

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

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

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

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

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

.hd-home .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-home .work-fanza:hover {
	background: color-mix(in srgb, var(--fanza) 80%, #000);
}

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

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

/* Card sizing for the home carousel only. */
.hd-home .hd-home-hscroll .work-card {
	flex: 0 0 251px;
	scroll-snap-align: start;
}

.home-series-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.home-series-card {
	overflow: hidden;
	border: 1px solid var(--hd-c-border-strong);
	border-radius: 10px;
	background: var(--hd-c-light2);
	color: #333;
	box-shadow: 0 3px 14px rgba(44, 94, 71, 0.08);
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

/* Hover/focus: border + shadow only, no movement — same policy as
   .work-card and .rich-row/.incl-row (work-pages.css). */
.home-series-card:hover,
.home-series-card:focus-within {
	border-color: var(--hd-c-main);
	box-shadow: 0 6px 20px rgba(44, 94, 71, 0.14);
}

.home-series-covers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	background: var(--hd-c-light2);
}

.home-series-covers--1 {
	grid-template-columns: 1fr;
}

/* Each cover keeps its own 4:3 box (not stretched to fill the 2:1 row),
   the pair is vertically centered, and any resulting top/bottom gap
   shows the parent's --hd-c-light2 background rather than a stretched
   image. */
.home-series-covers--2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 2px;
}

.home-series-covers--2 > div {
	width: 100%;
	aspect-ratio: 4 / 3;
}

/* Mosaic: a large left cover spanning both rows, two smaller stacked
   covers on the right — no markup change needed, grid auto-placement
   fills the remaining two cells in row-major order after the first
   child spans both rows of column 1. gap applies to both the left/right
   split and the top/bottom split of the right column in one declaration
   (grid's shorthand covers both axes), fixing the previously-missing
   2px separators on both sides of this variant. */
.home-series-covers--3 {
	grid-template-columns: 2fr 1fr;
	grid-template-rows: repeat(2, 1fr);
	gap: 2px;
}

.home-series-covers--3 > div:first-child {
	grid-row: 1 / 3;
	grid-column: 1;
}

/* Each cover's own box is white (series-index-mock-v16), distinct from
   the --hd-c-light2 shown in the surrounding letterbox area (the side
   margins of the centered single cover, and the 2px gaps above). */
.home-series-covers > div {
	min-width: 0;
	overflow: hidden;
	background: #fff;
}

/* contain, never cover, on every cover image everywhere (PC 1/2/3-cover
   and the SP single-cover fallback below): the full artwork must always
   stay visible, not cropped. */
.home-series-covers img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * PC-only: a single cover is centered at 66.666% of the 2:1 area's width
 * and its full height, per series-index-mock-v16 -- not stretched to
 * fill the row (the previous grid-template-columns:1fr behaviour) and
 * not cropped. The uncovered left/right thirds show the parent
 * .home-series-covers's own --hd-c-light2 background. Scoped to PC only
 * so the SP single-cover fallback (this file's own max-width:900px
 * block below, which keeps .home-series-covers as a display:grid single
 * column at 100% width) is unaffected -- this rule and that one target
 * disjoint viewport ranges, so neither has to cancel the other.
 */
@media (min-width: 901px) {
	.home-series-covers--1 {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.home-series-covers--1 > div {
		width: 66.666%;
		height: 100%;
	}
}

/* White, not the card's own --hd-c-light2 background showing through
   (series-index-mock-v16: the text area below the covers is white). */
.home-series-body {
	padding: 13px 14px 15px;
	background: #fff;
}

.home-series-body h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 900;
	line-height: 1.5;
}

.home-series-circle {
	margin: 4px 0 6px;
	color: #555;
	font-size: 11.5px;
}

.home-series-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	color: #555;
}

.home-series-meta .home-series-tag {
	font-size: 10.5px;
	font-weight: 800;
	color: #fff;
	background: #e24b4a;
	padding: 2px 8px;
	border-radius: 4px;
}

.home-series-meta .home-series-compil-tag {
	font-size: 10.5px;
	font-weight: 700;
	color: #6b3fa0;
	background: #f4eef7;
	border: .5px solid #cbb0dd;
	padding: 2px 8px;
	border-radius: 4px;
}

@media (max-width: 900px) {
	.hd-home {
		width: 100%;
		margin: 0;
	}

	.hd-home-intro {
		padding: 16px 18px;
	}

	.hd-home-intro p {
		font-size: 12.5px;
	}

	.hd-home-season {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		margin: 16px 16px 0;
		padding: 16px 18px;
	}

	.hd-home-season-h {
		font-size: 15px;
	}

	.hd-home-season-cta {
		display: block;
		width: 100%;
		text-align: center;
	}

	.hd-home-sec {
		padding: 20px 16px;
	}

	.hd-home-sec-head {
		flex-wrap: wrap;
	}

	.hd-home-ttl {
		font-size: 16px;
	}

	.hd-home .hd-home-hs-nav {
		display: none;
	}

	.hd-home .hd-home-hscroll .work-card {
		flex: 0 0 clamp(210px, 58vw, 230px);
	}

	/* SP FANZA button, unified with work-pages.css's own SP override and
	   series-master-v42.css's own equivalent — same canonical dims at
	   this page's own 900px SP boundary. Requires the base rule's
	   box-sizing:border-box above (with the default content-box,
	   min-height:38px would apply below this padding, adding on top
	   instead of containing it). */
	.hd-home .work-fanza {
		line-height: 20px;
		padding: 8px 15px;
		min-width: 136px;
		min-height: 38px;
	}

	.home-series-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	/*
	 * v19: vertical card (cover on top, full width; series info below),
	 * not the previous 42%/1fr side-by-side grid -- that horizontal
	 * layout is not part of the v19 SP design. display:block (the
	 * default for a plain <a>'s block-level children stacking normally)
	 * replaces the two-column grid so .home-series-covers and
	 * .home-series-body simply flow top-to-bottom at their own 100%
	 * width; .home-series-body's own align-self:center (needed only to
	 * vertically center it beside a fixed-height cover in that grid) no
	 * longer applies and is removed with it.
	 */
	.home-series-card {
		display: block;
	}

	.home-series-covers {
		aspect-ratio: 4 / 3;
		grid-template-columns: 1fr;
	}

	.home-series-covers > div:not(:first-child) {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-series-card,
	.hd-home-season-cta {
		transition: none;
	}

	.hd-home .hd-home-hscroll {
		scroll-behavior: auto;
	}
}