@charset "UTF-8";

/*
 * Phase 1 (foundation) layout: header, footer, and the minimal fallback
 * templates (index/page/404/search) only. No page-specific CSS (work
 * cards, carousels, series pages, the front page) is ported here yet.
 *
 * Common SP/PC boundary for this theme, used consistently by every rule
 * below: max-width:900px = SP, min-width:901px = PC. Matches the
 * boundary already established across the site's existing pages, so
 * later phases porting those pages can reuse the same threshold.
 *
 * No SWELL-defeating CSS exists in this theme by construction (there is
 * no parent theme to fight), so none of the old #body_wrap/.l-content/
 * .post_content/#breadcrumb/#sidebar-style overrides are needed or
 * present here. This file also does not use 100vw or negative margins —
 * the top page's "full-bleed about section into the footer" treatment is
 * out of scope for this phase and will be added when the front page is
 * ported, only where actually needed.
 */

/* ============ Header ============ */

/*
 * Outer element carries the background/full width; the inner element
 * carries the max-width and is centered — kept as two separate elements
 * throughout this file (header/footer both) so a future full-bleed
 * background never has to fight a width constraint on the same element.
 */
.hd-header {
	background: #fff;
	border-bottom: 1px solid #e6e6e6;
}

.hd-header-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	width: min(100% - 32px, 1080px);
	margin: 0 auto;
	padding: 14px 0;
}

.hd-header-brand {
	margin-right: auto;
	min-width: 0;
}

.hd-header-logo {
	display: inline-flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--hd-c-ink);
}

.hd-header-sitename {
	font-size: 17px;
	font-weight: 900;
	line-height: 1.3;
	color: var(--hd-c-dark);
}

.hd-header-tagline {
	margin-top: 2px;
	font-size: 11px;
	font-weight: 700;
	color: #555555;
}

.hd-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/*
 * Plain text link (v18 mock's PC-only nav.gnav a), not a filled button.
 * Visible on PC only -- the mobile-menu fallback link inside
 * .hd-header-nav (hidden on PC below) covers the same destination on SP.
 */
.hd-header-sale-link {
	white-space: nowrap;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--hd-c-ink);
	text-decoration: none;
}

.hd-header-sale-link:hover {
	color: var(--hd-c-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hd-header-search-toggle,
.hd-header-menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 50%;
	color: var(--hd-c-dark);
	cursor: pointer;
}

/*
 * No border/background/box-shadow at rest on either toggle (v18/v19
 * mocks: neither the search icon nor the SP hamburger has a visible
 * frame until hovered). The hover-state circle backdrop below is
 * shared by both. Removing the hamburger's own border/white background
 * only changes its rest-state appearance -- .hd-header-menu-toggle
 * stays display:none outside the existing @media(max-width:900px)
 * block below, so this has no effect on the PC header at all, and the
 * button's own 38x38px hit area (width/height above) is unchanged, so
 * the tap target does not shrink.
 */
.hd-header-search-toggle,
.hd-header-menu-toggle {
	border: 0;
	background: none;
}

.hd-header-search-toggle:hover,
.hd-header-menu-toggle:hover {
	background: var(--hd-c-light2);
}

.hd-header-menu-toggle {
	display: none;
}

/*
 * Progressive enhancement, not a modal, without JavaScript: the search
 * panel is present and reachable in the DOM at all times, and without
 * .hd-js (see assets/js/site.js) it stays a plain in-flow block exactly
 * like every other reachable-without-JS element on the page -- no
 * background/overlay treatment applies unless .hd-js is present too.
 */
.hd-header-search {
	background: none;
}

/*
 * Modal overlay (v19), not the inline in-flow panel this used to be
 * (which pushed page content down when opened). This is the same
 * [data-hd-toggle-panel] element .hd-header-nav below also uses --
 * assets/js/site.js's generic open/close logic, aria-expanded sync,
 * focus handling, Escape key, outside-click, and scroll-lock all apply
 * unchanged here, since none of that logic depends on how the panel
 * looks. Only the visual presentation differs from the nav drawer.
 */
html.hd-js .hd-header-search {
	display: none;
}

html.hd-js .hd-header-search.is-open {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 300;
	align-items: flex-start;
	justify-content: center;
	padding: 14vh 0 16px;
	background: rgba(20, 40, 32, .6);
}

/*
 * Centered box (v19's .search-modal-box): width is capped at 560px but
 * never wider than the viewport minus 32px of side margin (this
 * theme's own established side-gutter, matching .hd-header-inner/
 * .hd-footer-inner above) -- not a fixed width, so it never causes
 * horizontal overflow on narrow screens. The box itself has no
 * background; the white card/shadow below belong to the form only,
 * matching the mock.
 */
.hd-header-search-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: min(560px, calc(100% - 32px));
}

.hd-header-search-box .search-form {
	display: flex;
	width: 100%;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}

.hd-header-search-box .search-field {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	padding: 16px 18px;
	font: inherit;
	font-size: 15px;
}

/*
 * Icon-only button: searchform.php's own "検索" text is shared with
 * 404.php's independent copy of the form (unscoped, unstyled there) and
 * is kept as-is rather than replaced with a literal <svg> in that
 * shared template -- font-size:0 hides it visually only within this
 * modal's own scope, while it still provides the button's accessible
 * name. The icon itself is a mask (not a background-image) so it can
 * be recolored to match the button's own background on hover with a
 * single background-color change, not two separate icon assets.
 */
.hd-header-search-box .search-submit {
	position: relative;
	flex-shrink: 0;
	width: 56px;
	border: 0;
	background: var(--hd-c-dark);
	color: #fff;
	font-size: 0;
	cursor: pointer;
}

.hd-header-search-box .search-submit::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #fff;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 20px 20px;
	mask-size: 20px 20px;
}

.hd-header-search-box .search-submit:hover {
	background: var(--hd-c-main);
}

.hd-header-search-close {
	display: flex;
	align-items: center;
	gap: 5px;
	border: 0;
	background: none;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 6px 10px;
	opacity: .85;
	cursor: pointer;
}

.hd-header-search-close:hover {
	opacity: 1;
}

.hd-header-nav {
	border-top: 1px solid var(--hd-c-border);
}

/*
 * On PC this nav's only current content (the "セール中作品" fallback
 * link, see hdtheme_primary_menu_fallback() in inc/site-links.php) is a
 * duplicate of .hd-header-sale-link above -- v18's PC header has no
 * second row at all, only its .gnav (== .hd-header-sale-link here) and
 * a hidden-until-opened mobile drawer (== this nav on SP). Scoped to PC
 * only so the existing SP hamburger-drawer behaviour (html.hd-js
 * .hd-header-nav / .is-open below) is unaffected.
 */
@media (min-width: 901px) {
	.hd-header-nav {
		display: none;
	}
}

.hd-header-nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	width: min(100% - 32px, 1080px);
	margin: 0 auto;
	padding: 10px 0;
	list-style: none;
}

.hd-header-nav-list a {
	display: inline-block;
	padding: 4px 0;
	color: var(--hd-c-ink);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
}

.hd-header-nav-list a:hover {
	color: var(--hd-c-dark);
	text-decoration: underline;
}

@media (max-width: 900px) {
	/*
	 * Positioning context for the SP nav dropdown below: .hd-header-nav is
	 * a sibling of .hd-header-inner (not nested inside it), so anchoring
	 * the dropdown to the header bar's own right edge -- rather than the
	 * body/viewport -- needs the nearest positioned ancestor to be
	 * .hd-header itself. No offsets are set here, so this has no visual
	 * effect on its own (PC is unaffected regardless, since this whole
	 * rule is inside the SP-only media query).
	 */
	.hd-header {
		position: relative;
	}

	.hd-header-inner {
		width: min(100% - 24px, 1080px);
		padding: 10px 0;
	}

	.hd-header-tagline {
		font-size: 9.5px;
	}

	.hd-header-sale-link {
		display: none;
	}

	.hd-header-menu-toggle {
		display: flex;
	}

	.hd-header-search-inner {
		width: min(100% - 24px, 1080px);
	}

	/*
	 * Same progressive-enhancement pattern as the search panel above: the
	 * nav is visible by default (no-JS fallback) and only collapses once
	 * .hd-js confirms JavaScript ran.
	 */
	html.hd-js .hd-header-nav {
		display: none;
	}

	/*
	 * 1.0.9: small anchored dropdown (v19 SP mock) instead of the previous
	 * full-width in-flow bar. This no longer pushes <main> down: it is
	 * removed from document flow (position:absolute, anchored to
	 * .hd-header above) rather than being a normal block-level sibling
	 * that grew the header's own height. "right" matches
	 * .hd-header-inner's own SP side gutter above (12px = the 24px total
	 * split in half), so the dropdown's right edge lines up with the
	 * hamburger button's own right edge rather than using a new, unrelated
	 * offset. Open/close, aria-expanded sync, outside-click, Escape, and
	 * mutual exclusivity with the search panel are unchanged -- all of it
	 * is the existing generic [data-hd-toggle-panel] logic in
	 * assets/js/site.js, which this only restyles.
	 */
	html.hd-js .hd-header-nav.is-open {
		display: block;
		position: absolute;
		top: 100%;
		right: 12px;
		width: max-content;
		min-width: 168px;
		max-width: calc(100% - 24px);
		margin-top: 6px;
		background: #fff;
		border: 1px solid var(--hd-c-border);
		border-radius: 10px;
		box-shadow: 0 6px 16px rgba(44, 94, 71, .14);
		z-index: 250;
	}

	/*
	 * The list itself previously matched .hd-header-inner's own full
	 * 1080px-capped row width (a horizontal wrapping link row). Inside the
	 * compact dropdown box above it becomes a plain vertical list instead,
	 * each item padded into its own full-width tappable row.
	 */
	html.hd-js .hd-header-nav.is-open .hd-header-nav-list {
		display: block;
		width: auto;
		margin: 0;
		padding: 6px 0;
	}

	html.hd-js .hd-header-nav.is-open .hd-header-nav-list a {
		display: block;
		padding: 10px 18px;
		white-space: nowrap;
	}
}

/* Body scroll lock while the SP menu or search panel is open. */
body.hd-scroll-lock {
	overflow: hidden;
}

/* ============ Breadcrumb ============ */

/*
 * Full-width pale gray band directly under the header, on every page that
 * has a breadcrumb (currently work posts and the series master page only
 * — see hdtheme_render_breadcrumb() in inc/site-links.php). Same two-
 * element split as .hd-header/.hd-header-inner above: this outer element
 * carries the background/full width, .hd-breadcrumb__inner carries the
 * 1080px max-width and centering, matching .hd-header-inner's own
 * width:min(100% - 32px/24px, 1080px) so the breadcrumb's left edge lines
 * up with the header's and the page content below it. Page body spacing,
 * background, and width belong to each page's own CSS (work-pages.css /
 * series-master-v42.css) and are not touched here.
 */
.hd-breadcrumb {
	background: #f7f7f7;
}

.hd-breadcrumb__inner {
	width: min(100% - 32px, 1080px);
	margin: 0 auto;
	height: 32px;
	display: flex;
	align-items: center;
	/*
	 * A long series name must not overflow the viewport or force the
	 * breadcrumb's own text to be truncated (both explicitly required).
	 * Letting this inner element scroll horizontally, with the native
	 * scrollbar hidden the same way series-master-v42.css already hides
	 * it on .hscroll-track, satisfies both without touching page-body
	 * width/padding.
	 */
	overflow-x: auto;
	scrollbar-width: none;
}

.hd-breadcrumb__inner::-webkit-scrollbar {
	height: 0;
}

.hd-breadcrumb__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
	font-size: 11px;
	color: #767676;
}

.hd-breadcrumb__item {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Decorative separator: CSS-generated content is not exposed to screen
   readers, so this never needs a redundant aria-hidden node of its own. */
.hd-breadcrumb__item:not(:last-child)::after {
	content: "\203A";
	color: #b3b3b3;
}

.hd-breadcrumb__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #767676;
	text-decoration: none;
}

.hd-breadcrumb__link:hover {
	color: var(--hd-c-dark);
	text-decoration: underline;
}

.hd-breadcrumb__home-icon {
	flex: 0 0 auto;
}

.hd-breadcrumb__item[aria-current="page"] {
	color: var(--hd-c-ink);
}

@media (max-width: 900px) {
	.hd-breadcrumb__inner {
		width: min(100% - 24px, 1080px);
	}
}

/* ============ Minimal content fallbacks (index/page/404/search) ============ */

.hd-main {
	min-height: 40vh;
}

.hd-fallback {
	width: min(100% - 32px, 880px);
	margin: 0 auto;
	padding: 40px 0 60px;
}

.hd-fallback h1 {
	font-size: 22px;
	font-weight: 900;
	margin: 0 0 20px;
}

.hd-fallback .entry {
	padding: 16px 0;
	border-bottom: 1px solid var(--hd-c-border);
}

.hd-fallback .entry:last-child {
	border-bottom: 0;
}

.hd-fallback .entry h2 {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 800;
}

.hd-fallback .entry h2 a {
	text-decoration: none;
}

.hd-fallback .entry-meta {
	color: #777;
	font-size: 12.5px;
}

@media (max-width: 900px) {
	.hd-fallback {
		width: min(100% - 24px, 880px);
		padding: 28px 0 40px;
	}
}

/* ============ Footer ============ */

/*
 * v19: one continuous dark-green area, background #2C5E47 the full
 * width of the screen (outer element, matches .hd-header's own outer/
 * inner split above). No margin-top and no border-top here -- both
 * previously left a pale-green-then-light-line gap between this
 * element and whatever preceded it (pre-1.0.10, the front page's own
 * .home-about section rendered inside <main>, immediately before
 * </main><footer>): the previous 40px margin revealed the page's own
 * white background for 40px, and the 1px border-top (var(--hd-c-border),
 * a green-tinted token) added a visible thin line on top of that gap.
 * As of 1.0.10, .home-about is one of this element's own children (see
 * below), rendered on every page, not just a preceding sibling on the
 * front page only -- see
 * release-records/theme-independent-1.0.10-common-footer-generic-search-card.md.
 */
.hd-footer {
	background: var(--hd-c-dark);
}

/*
 * "ハーレム同人館について" (1.0.10): moved here from home.css/
 * front-page.php so the common <footer> renders it once, on every page,
 * instead of front-page.php duplicating it only on the front page. Values
 * (background, padding, colors, the ::before bleed technique) are
 * unchanged from home.css -- only the file and DOM location moved. The
 * ::before bleed (painting the background out to the viewport edges via
 * box-shadow spread, not width:100vw or a negative margin) is now
 * strictly redundant, since this section's new parent .hd-footer is
 * already full-bleed dark green -- it is left in place rather than
 * removed, since removing it changes nothing visible and this is an
 * additive commit. .home-about-inner's width formula, unlike home.css's
 * original, is the same independent cap-then-subtract form
 * .hd-footer-inner below already uses: home.css's original formula
 * assumed a pre-capped ancestor (.hd-home, width:min(100%,1080px)) providing
 * its own "100%"; here the immediate ancestor (.hd-footer) is
 * intentionally full-bleed/uncapped like .hd-footer-inner's always was, so
 * the same independent formula is required to keep the identical pixel
 * position the front page had before this move (see release record for
 * the measured before/after).
 */
.home-about {
	position: relative;
	padding: 36px 0 20px;
	background: var(--hd-c-dark);
	color: #fff;
}

.home-about::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hd-c-dark);
	box-shadow: 0 0 0 100vmax var(--hd-c-dark);
	clip-path: inset(0 -100vmax);
}

.home-about-inner {
	width: calc(min(100%, 1080px) - 56px);
	margin: 0 auto;
}

.home-about h2 {
	margin: 0;
	font-size: 21px;
	font-weight: 900;
	color: #fff;
}

.home-about-inner > p {
	max-width: 760px;
	margin: 8px 0 0;
	color: #cfe3d6;
	font-size: 14px;
}

.home-about .hd-home-about-notice {
	margin-top: 14px;
	padding-top: 14px;
	border-top: .5px solid rgba(255, 255, 255, .12);
	color: #9fc4ae;
	font-size: 11px;
}

/*
 * Top padding reduced from 28px to 20px -- combined with .home-about's
 * own trailing padding above (also reduced, 1.0.8), this was part of
 * the 85px gap between the front page's 18+/affiliate notice and the
 * fixed-page links below (measured, see release record), well past the
 * mock's tighter spacing. Bottom padding (24px, above the copyright)
 * keeps the copyright's own position unchanged. (1.0.8, unchanged since.)
 *
 * Width formula (1.0.9): cap at 1080px THEN subtract the 56px (28px/side)
 * gutter, not the other way around -- matching .home-about-inner above,
 * which (as of 1.0.10) uses the identical independent formula for the
 * same reason: neither container's immediate ancestor caps at 1080px, so
 * "100%" here must be capped explicitly with calc(min(...)) rather than
 * subtracting first and capping the result (min(100% - 32px,1080px)),
 * which only agrees with the cap-then-subtract form below the 1080px cap
 * and diverges above it -- the exact cause of the PC left-edge mismatch
 * with "ハーレム同人館について" fixed in 1.0.9 (see release record for
 * the measured before/after). No new width token is introduced: this
 * reuses the same 1080px cap and 56px/32px gutters as .home-about-inner,
 * computed independently since the two elements are siblings, not nested.
 */
.hd-footer-inner {
	width: calc(min(100%, 1080px) - 56px);
	margin: 0 auto;
	padding: 20px 0 24px;
}

/*
 * Divider between .home-about above (rendered on every page as of
 * 1.0.10) and the fixed-page links -- for visual organization within the
 * one dark-green area only, not a background-color change (v19's own
 * .footer-nav).
 */
.hd-footer-nav {
	padding-top: 16px;
	border-top: .5px solid rgba(255, 255, 255, .12);
}

.hd-footer-links-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.hd-footer-links-list a {
	color: #cfe3d6;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hd-footer-links-list a:hover {
	color: #fff;
}

.hd-footer-copyright {
	margin: 0;
	color: #8aa395;
	font-size: 11.5px;
}

@media (max-width: 900px) {
	.home-about {
		padding: 20px 0;
	}

	.home-about-inner {
		width: min(calc(100% - 32px), 1080px);
	}

	.home-about h2 {
		font-size: 18px;
	}

	/*
	 * SP gutter matches .home-about-inner's own SP gutter (32px total,
	 * 16px/side) instead of the previous 24px -- see the PC rule above for
	 * why the two elements need independent, explicitly-matched formulas.
	 * At SP width neither element's ancestor caps at 1080px, so the
	 * previous subtract-then-cap form already agreed with a
	 * cap-then-subtract form numerically -- only the gutter constant itself
	 * needed to change to close the 4px SP mismatch (see release record).
	 */
	.hd-footer-inner {
		width: min(100% - 32px, 1080px);
		padding: 22px 0 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hd-header-sale-link {
		transition: none;
	}
}