@charset "UTF-8";

/*
 * Ported from swell_child/assets/prelaunch-adjustments.css ("Approved
 * pre-launch refinements collected into one late-loading layer"). Most of
 * this file's rules are genuine design refinements (scene-composition
 * layout, the omnibus bonus section, work-card alignment) that are kept
 * unchanged. Removed only the rules that existed purely to reset SWELL's
 * own wrapper elements around the work page:
 * - .hd-work-page #content.l-content.l-container (SWELL's l-content/
 *   l-container wrapper) and its > .l-main child -- neither element
 *   exists in this theme.
 * - .hd-work-page #main_content.hd-work's width/margin reset -- this
 *   theme's #hd-work is a plain div with no float/width to reset (see
 *   assets/css/work-pages.css's own #hd-work padding rule, which now
 *   carries this same block's real padding values directly).
 * SWELL's own default page background this file was overriding no
 * longer exists either, so .hd-work-page's background declarations here
 * no longer need !important -- the values themselves (PC #f7f8f7, SP
 * #ffffff) are unchanged.
 */
.hd-work-page {
	background: #f7f8f7;
}

.hd-work-page .hd-slider {
	border-radius: 6px;
}

/*
 * PC/SP Smart Slider exclusive display. work-pages.css/site.css enqueue the
 * hd-slider--pc/hd-slider--sp pair without a visibility switch (ported from
 * swell_child/style.css's own .hd-slider--sp{display:none} + 599px-boundary
 * override), so production showed both sliders stacked at every width.
 * Re-implemented at this theme's confirmed 900px/901px work-page boundary
 * instead of copying the old 599px value.
 */
.hd-work-page .article .hd-slider--sp {
	display: none;
}

@media (max-width: 900px) {
	.hd-work-page .article .hd-slider--pc {
		display: none;
	}

	.hd-work-page .article .hd-slider--sp {
		display: block;
	}
}

@media (min-width: 901px) {
	.hd-work-page .article .hd-slider--pc {
		display: block;
	}

	.hd-work-page .article .hd-slider--sp {
		display: none;
	}
}

.hd-work-page .article .data-box-tags.tag-groups {
	align-items: stretch;
	text-align: left;
}

.hd-work-page .article .data-box-tags-label {
	align-self: flex-start;
	justify-content: flex-start;
}

.hd-work-page .article .tag-group {
	width: 100%;
}

/*
 * Final scene-composition design: compact ring chart beside each label.
 * .scene-item must override display:block here -- work-pages.css's older,
 * unscoped `.scene-item { display:flex; gap:12px; }` (from the pre-ring bar
 * layout) is otherwise never overridden by any equal-or-higher-specificity
 * rule, which would put .scene-item-top and .scene-text side by side instead
 * of stacked. This !important fights work-pages.css's own older rule, not
 * SWELL -- kept unchanged.
 */
.hd-work-page .article .scene-body {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.hd-work-page .article .scene-item { display: block; position: relative; padding: 0 0 18px; }
.hd-work-page .article .scene-item:last-child { padding-bottom: 0; }
.hd-work-page .article .scene-item:not(:last-child)::before {
	content: ""; position: absolute; left: 10px; top: 28px; bottom: 0; width: 1px; background: #ddd; display:block;
}
.hd-work-page .article .scene-item-top { display:flex; align-items:center; gap:12px; margin-bottom:3px; }
.hd-work-page .article .scene-num {
	display:flex !important; align-items:center; justify-content:center; width:21px !important; height:21px !important;
	min-width:21px; padding:0 !important; border:0 !important; border-radius:50% !important; background:var(--c-main) !important;
	color:#fff !important; font-size:12px; font-weight:700; line-height:1; z-index:1;
}
.hd-work-page .article .scene-num.tl-gray { background:#a8a8a8 !important; }
.hd-work-page .article .scene-item-label-row { flex:1; min-width:0; display:flex; align-items:center; gap:8px; }
.hd-work-page .article .scene-item-label { color:#333; font-size:15px; font-weight:800; flex-shrink:0; }
.hd-work-page .article .scene-leader { flex:1; min-width:20px; border-bottom:1.5px dotted var(--c-border-strong); align-self:center; }
.hd-work-page .article .scene-ring-wrap { flex-shrink:0; display:flex; align-items:center; gap:7px; }
.hd-work-page .article .scene-item-pct { color:var(--c-dark); font-family:var(--num); font-size:16px; font-weight:800; }
.hd-work-page .article .scene-text { margin-left:33px; padding:0; color:#333; font-size:15px; line-height:1.6; }
.hd-work-page .article .scene-ratio-track, .hd-work-page .article .scene-ratio-fill { display:none !important; }

@media (min-width: 901px) {
	.hd-work-page .article .hratio-thumb {
		width: 198px;
		height: 148.5px;
	}
}

@media (max-width: 900px) {
	.hd-work-page .article .scene-sec-lab { font-size:16px; }
	.hd-work-page .article .scene-item-label-row { flex-wrap:wrap; row-gap:4px; }
	.hd-work-page .article .scene-leader { min-width:12px; }
	.hd-work-page .article .scene-ring-wrap svg { width:22px; height:22px; }
	.hd-work-page .article .scene-item-pct { font-size:14px; }

	/* Match v128: white page, no outer card gutter, 14px article padding. */
	.hd-work-page {
		background: #ffffff;
	}

	#hd-work.hd-work {
		background: #ffffff;
	}

	.hd-work-page .article #tagGroupsBox {
		max-height: none !important;
		overflow: visible !important;
	}

	.hd-work-page .article #tagGroupsBox::after {
		display: none !important;
	}

	.hd-work-page .article #tagGroupsBox:not(.expanded) .tag-group:nth-of-type(n + 2) {
		display: none;
	}
}

/*
 * Staging-approved card and purchase-price alignment.
 * Keep every work-card title at three lines on PC and SP, and make the
 * following metadata/price/action rows share the same vertical positions.
 */
.hd-work-page .article .work-card {
	display: flex;
	height: 100%;
	flex-direction: column;
}

.hd-work-page .article .work-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.hd-work-page .article .work-title {
	display: -webkit-box;
	min-height: 4.35em;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-height: 1.45;
}

.hd-work-page .article .work-actions {
	margin-top: auto;
}

.hd-work-page .article .ep-price-row {
	align-items: center;
}

.hd-work-page .article .ep-price-main {
	align-items: baseline;
}

.hd-work-page .article .ep-off-badge {
	align-self: auto;
	margin: 0;
	padding: 2px 8px;
	border: 0;
	border-radius: 4px;
	background: #e24b4a;
	color: #fff;
	font-family: var(--num);
	font-size: 11px;
	font-weight: 700;
	box-shadow: none;
}

/*
 * Work-page related-rail first-card alignment. See work-pages.css's own
 * .hscroll-track (scroll-snap-type:x mandatory, no scroll-padding-inline
 * by default) -- once a rail overflows, the browser's default scroll-snap
 * origin consumes the rail's own padding-left, pulling the first card
 * flush against the section edge instead of the intended 16px inset.
 * scroll-padding-inline tells the snap engine the padding is part of the
 * intended start inset instead. Not scoped by work type: the underlying
 * rail markup and CSS are shared by episode/single/omnibus via
 * template-parts/work/related.php.
 */
.hd-work-page .article .related.related-circle .card-grid {
	scroll-padding-inline: 16px;
}

@media (min-width: 600px) {
	.hd-work-page .article .related:not(.related-circle) .card-grid {
		scroll-padding-inline: 16px;
	}
}

/*
 * Standalone "読む前に": use Tabler's check glyph without its own circle.
 * The surrounding component already supplies a round green frame, so this
 * avoids the double-circle appearance seen with info-circle.
 */
.hd-work-page .article .standalone-note-icon svg {
	width: 18px;
	height: 18px;
}

/*
 * Omnibus "総集編限定の特典". Follows "総集編で買うメリット": violet
 * heading, one shared image, then checked white cards. Image dimensions
 * match the approved "管理人の見どころ" image treatment. Outer box
 * border/radius/padding, heading margin-bottom, and card border match
 * .benefit-box/.benefit-eyebrow/.benefit-list/.benefit-list .rec-item
 * exactly (the approved reference for both violet sections).
 */
.hd-work-page .article .bonus-sec {
	display: block;
	border: 1px solid var(--violet-border);
	border-radius: 14px;
	padding: 26px 28px 28px;
}

.hd-work-page .article .bonus-sec-h {
	margin-bottom: 20px;
	letter-spacing: 0.04em;
}

.hd-work-page .article .bonus-img-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 14px;
	padding: 0 20px;
}

.hd-work-page .article .bonus-img {
	display: block;
	width: min(100%, 560px);
	height: auto;
	max-height: 520px;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(35, 42, 40, 0.12);
}

.hd-work-page .article .bonus-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 0;
	padding-top: 20px;
	border-top: 0;
}

/*
 * No-image variant: when the section has no shared bonus image, the 20px
 * padding-top above (there to space the image from the white cards) has
 * nothing to space, so it is dropped. The heading's existing
 * margin-bottom: 20px (.bonus-sec-h) then provides the same 20px gap as the
 * image variant, matching .benefit-box's spacing.
 */
.hd-work-page .article .bonus-list--no-image {
	padding-top: 0;
	border-top: 0;
}

.hd-work-page .article .bonus-item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 12px 14px;
	border-radius: 10px;
	background: #fff;
}

.hd-work-page .article .bonus-item-body {
	min-width: 0;
}

.hd-work-page .article .bonus-item strong {
	display: block;
	color: #333;
	font-size: 15px;
	line-height: 1.5;
}

.hd-work-page .article .bonus-desc {
	color: #333;
	font-size: 13.5px;
	line-height: 1.6;
}

@media (max-width: 900px) {
	.hd-work-page .article .bonus-img-wrap {
		padding: 0 18px;
	}

	.hd-work-page .article .bonus-img {
		width: min(100%, 520px);
		max-height: 460px;
	}
}

@media (max-width: 599px) {
	.hd-work-page .article .bonus-sec {
		padding: 20px 16px 22px;
	}

	.hd-work-page .article .bonus-sec-h {
		font-size: 14px;
	}

	.hd-work-page .article .bonus-img-wrap {
		margin-bottom: 12px;
		padding: 0 16px;
	}

	.hd-work-page .article .bonus-img {
		width: 100%;
		max-height: 360px;
	}
}

/*
 * Violet-section check color. The shared .rec-check circle
 * (assets/css/work-pages.css) defaults to the site's green --c-main,
 * correct for every green "こんな人におすすめ" section on all three work
 * types. Inside the two violet omnibus sections only, the check must
 * read as part of that violet system instead.
 */
.hd-work-page .article .benefit-box .rec-check,
.hd-work-page .article .bonus-sec .rec-check {
	background: var(--violet);
}