@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: var(--hd-page-bg);
}

.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: 700;
	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: 700;
	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 {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	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: 10px;
	overflow-x: auto;
	padding-top: 6px;
	padding-bottom: 6px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

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

/*
 * Card body (.work-card and everything inside it) is styled once, shared
 * across every page, by assets/css/common-work-card.css (enqueued as a
 * dependency of this file -- see functions.php's hdtheme_enqueue_assets()).
 * 1.0.22 kept an independent copy of that CSS here, which never actually
 * gave .work-card position:relative in a way that matched .card-link's
 * position:absolute;inset:0 in production (root-caused and fixed in
 * 1.0.23 by removing the duplicate entirely -- see
 * release-records/theme-independent-1.0.23-common-work-card-css-consolidation.md).
 * Only this carousel's own layout concern remains here: fixed flex-basis
 * so the card doesn't grow/shrink in the flex row (its actual width comes
 * from common-work-card.css's own @media(max-width:900px)/
 * @media(min-width:901px) .work-card{width:...} rules).
 */
.hd-home .hd-home-hscroll .work-card {
	scroll-snap-align: start;
}

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

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

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

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

	/* Card body's own SP typography/FANZA-button overrides now live in
	   common-work-card.css's @media(max-width:900px) block -- not
	   redeclared here. */

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