/* =========================================================
   JDB 未解決事件ハブ v2.1.0
   /unsolved-case/ と未解決事件カテゴリーだけに適用
   ========================================================= */

body.jdb-unsolved-hub-enabled,
#body_wrap.jdb-unsolved-hub-enabled {
	background: #090b0e !important;
	color: #f5f5f5;
}

/*
 * body_class() は通常 body 要素に付くため、#body_wrap 自体に同じクラスが
 * 付くことを前提にしない。SWELLの標準ページ・独自ページ基盤のどちらでも
 * 既存タイトルとコンテンツ幅を確実に解除する。
 */
body.jdb-unsolved-hub-enabled #breadcrumb.p-breadcrumb,
#body_wrap.jdb-unsolved-hub-enabled #breadcrumb.p-breadcrumb,
body.jdb-unsolved-hub-enabled #main_content > .l-mainContent__inner > :where(.p-articleHead, .c-pageTitle),
#body_wrap.jdb-unsolved-hub-enabled #main_content > .l-mainContent__inner > :where(.p-articleHead, .c-pageTitle),
body.jdb-unsolved-hub-enabled #main_content .p-articleHead,
#body_wrap.jdb-unsolved-hub-enabled #main_content .p-articleHead,
body.jdb-unsolved-hub-enabled #main_content .c-pageTitle,
#body_wrap.jdb-unsolved-hub-enabled #main_content .c-pageTitle {
	display: none !important;
}

body.jdb-unsolved-hub-enabled .l-content,
body.jdb-unsolved-hub-enabled #main_content.l-mainContent,
body.jdb-unsolved-hub-enabled #main_content.l-mainContent.l-article {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

body.jdb-unsolved-hub-enabled .l-sidebar {
	display: none !important;
}

body.jdb-unsolved-hub-enabled #main_content > .l-mainContent__inner,
body.jdb-unsolved-hub-enabled #main_content .post_content,
body.jdb-unsolved-hub-enabled #main_content .page_content {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.jdb-unsolved-hub {
	--jdb-unsolved-container: 1200px;
	--jdb-unsolved-black: #090b0e;
	--jdb-unsolved-canvas: #0d1014;
	--jdb-unsolved-surface: #13171c;
	--jdb-unsolved-surface-2: #181d23;
	--jdb-unsolved-border: #343a42;
	--jdb-unsolved-border-soft: #252b32;
	--jdb-unsolved-text: #f6f7f8;
	--jdb-unsolved-secondary: #c1c5ca;
	--jdb-unsolved-muted: #8e959d;
	--jdb-unsolved-red: #c91f2f;
	--jdb-unsolved-red-dark: #9f1724;
	width: 100%;
	min-width: 0;
	overflow: clip;
	background: var(--jdb-unsolved-black);
	color: var(--jdb-unsolved-text);
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.75;
	color-scheme: dark;
}

.jdb-unsolved-hub *,
.jdb-unsolved-hub *::before,
.jdb-unsolved-hub *::after { box-sizing: border-box; }

.jdb-unsolved-hub :where(h1,h2,h3,p,dl,dt,dd,ul,li,figure) { margin: 0; padding: 0; }
.jdb-unsolved-hub :where(ul) { list-style: none; }
.jdb-unsolved-hub :where(h1,h2,h3),
.jdb-unsolved-hub :where(h1,h2,h3) * {
	color: var(--jdb-unsolved-text) !important;
	-webkit-text-fill-color: var(--jdb-unsolved-text) !important;
	text-shadow: none !important;
}
.jdb-unsolved-hub :where(h1,h2,h3)::before,
.jdb-unsolved-hub :where(h1,h2,h3)::after { display: none !important; content: none !important; }
.jdb-unsolved-hub a,
.jdb-unsolved-hub a:hover {
	color: inherit !important;
	-webkit-text-fill-color: inherit !important;
	text-decoration: none !important;
}
.jdb-unsolved-hub img { display: block; max-width: 100%; }
.jdb-unsolved-hub button,
.jdb-unsolved-hub input { font: inherit; }
.jdb-unsolved-hub :where(a,button,input):focus-visible { outline: 3px solid #ee5160; outline-offset: 3px; }

.jdb-unsolved-container,
.jdb-unsolved-breadcrumb {
	width: 100%;
	max-width: var(--jdb-unsolved-container);
	margin-inline: auto;
	padding-inline: 16px;
}

.jdb-unsolved-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 52px;
	color: var(--jdb-unsolved-muted);
	font-size: 12px;
}
.jdb-unsolved-breadcrumb a:hover { color: #fff !important; }

.jdb-unsolved-kicker {
	margin: 0 0 12px !important;
	color: #ed4050 !important;
	-webkit-text-fill-color: #ed4050 !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: .2em !important;
	line-height: 1.4 !important;
}

/* Hero */
.jdb-unsolved-hero {
	position: relative;
	min-height: 440px;
	display: grid;
	align-items: center;
	border-top: 1px solid rgba(255,255,255,.06);
	border-bottom: 1px solid rgba(255,255,255,.075);
	background:
		linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
		radial-gradient(circle at 8% 20%, rgba(201,31,47,.12), transparent 34%),
		#090b0e;
	background-size: 44px 44px, 44px 44px, auto, auto;
}
.jdb-unsolved-hero::before {
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: linear-gradient(180deg, transparent, var(--jdb-unsolved-red) 25%, var(--jdb-unsolved-red) 75%, transparent);
	content: "";
}
.jdb-unsolved-hero::after {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(5,7,10,.34) 0%, rgba(5,7,10,.16) 62%, transparent 100%);
	content: "";
}
.jdb-unsolved-hero .jdb-unsolved-container {
	position: relative;
	z-index: 1;
}

/* SWELLや固定ページ共通CSSより優先し、ヒーロー文字を確実に可読化する */
body.jdb-unsolved-hub-enabled .jdb-unsolved-hub .jdb-unsolved-hero h1,
#body_wrap.jdb-unsolved-hub-enabled .jdb-unsolved-hub .jdb-unsolved-hero h1,
body.jdb-unsolved-hub-enabled .jdb-unsolved-hub .jdb-unsolved-hero h1 *,
#body_wrap.jdb-unsolved-hub-enabled .jdb-unsolved-hub .jdb-unsolved-hero h1 * {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	-webkit-text-stroke: 0 transparent !important;
	background: none !important;
	background-image: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	text-shadow: 0 2px 18px rgba(0,0,0,.58) !important;
	opacity: 1 !important;
	filter: none !important;
	mix-blend-mode: normal !important;
}
body.jdb-unsolved-hub-enabled .jdb-unsolved-hub .jdb-unsolved-hero__lead,
#body_wrap.jdb-unsolved-hub-enabled .jdb-unsolved-hub .jdb-unsolved-hero__lead {
	color: #e1e5ea !important;
	-webkit-text-fill-color: #e1e5ea !important;
	opacity: 1 !important;
}
body.jdb-unsolved-hub-enabled .jdb-unsolved-hub .jdb-unsolved-hero__count span,
#body_wrap.jdb-unsolved-hub-enabled .jdb-unsolved-hub .jdb-unsolved-hero__count span {
	color: #c7cdd4 !important;
	-webkit-text-fill-color: #c7cdd4 !important;
}
body.jdb-unsolved-hub-enabled .jdb-unsolved-hub .jdb-unsolved-hero__count strong,
body.jdb-unsolved-hub-enabled .jdb-unsolved-hub .jdb-unsolved-hero__count small,
#body_wrap.jdb-unsolved-hub-enabled .jdb-unsolved-hub .jdb-unsolved-hero__count strong,
#body_wrap.jdb-unsolved-hub-enabled .jdb-unsolved-hub .jdb-unsolved-hero__count small {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}
.jdb-unsolved-hero .jdb-unsolved-container { padding-block: 64px; }
.jdb-unsolved-hero h1 {
	max-width: 860px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	-webkit-text-stroke: 0 transparent !important;
	background-image: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	font-size: clamp(38px, 5.2vw, 64px) !important;
	font-weight: 850 !important;
	line-height: 1.18 !important;
	letter-spacing: .01em !important;
	text-shadow: 0 2px 18px rgba(0,0,0,.58) !important;
	opacity: 1 !important;
	filter: none !important;
	mix-blend-mode: normal !important;
}
.jdb-unsolved-hero__lead {
	max-width: 820px;
	margin-top: 22px !important;
	color: #e1e5ea !important;
	-webkit-text-fill-color: #e1e5ea !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.9 !important;
	text-shadow: 0 1px 10px rgba(0,0,0,.42) !important;
	opacity: 1 !important;
}
.jdb-unsolved-search {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	width: min(100%, 800px);
	margin-top: 30px;
	border: 1px solid #d7d9dc;
	background: #f5f5f5;
}
.jdb-unsolved-search input {
	min-width: 0;
	height: 58px;
	padding: 0 20px;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: #f5f5f5;
	color: #15181c;
	font-size: 15px;
}
.jdb-unsolved-search input::placeholder { color: #71767c; opacity: 1; }
.jdb-unsolved-search button {
	min-width: 196px;
	height: 58px;
	padding: 0 22px;
	border: 0;
	border-left: 1px solid #a81523;
	border-radius: 0;
	background: var(--jdb-unsolved-red);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
	transition: background .18s ease;
}
.jdb-unsolved-search button:hover { background: var(--jdb-unsolved-red-dark); }
.jdb-unsolved-hero__count {
	display: flex;
	align-items: baseline;
	gap: 7px;
	width: fit-content;
	margin-top: 26px;
	padding-left: 16px;
	border-left: 3px solid var(--jdb-unsolved-red);
}
.jdb-unsolved-hero__count span { margin-right: 8px; color: var(--jdb-unsolved-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.jdb-unsolved-hero__count strong { color: #fff; font-size: 38px; font-weight: 850; line-height: 1; }
.jdb-unsolved-hero__count small { color: var(--jdb-unsolved-secondary); font-size: 13px; font-weight: 700; }

/* Sections */
.jdb-unsolved-section {
	padding: 82px 0;
	border-top: 1px solid rgba(255,255,255,.05);
	background: var(--jdb-unsolved-black);
}
.jdb-unsolved-section--surface { background: var(--jdb-unsolved-surface); }
.jdb-unsolved-section-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 32px;
}
.jdb-unsolved-section-head > div { position: relative; padding-left: 20px; }
.jdb-unsolved-section-head > div::before {
	position: absolute;
	left: 0;
	top: 2px;
	width: 4px;
	height: calc(100% - 4px);
	background: var(--jdb-unsolved-red);
	content: "";
}
.jdb-unsolved-section-head .jdb-unsolved-kicker { margin-bottom: 7px !important; }
.jdb-unsolved-section-head h2 {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-size: clamp(28px, 3vw, 38px) !important;
	font-weight: 850 !important;
	line-height: 1.3 !important;
}
.jdb-unsolved-section-head > p {
	max-width: 510px;
	color: var(--jdb-unsolved-muted) !important;
	-webkit-text-fill-color: var(--jdb-unsolved-muted) !important;
	font-size: 14px !important;
	line-height: 1.85 !important;
}

/* Buttons */
.jdb-unsolved-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid #d9dce0;
	background: transparent;
	color: #fff;
	font-size: 13px;
	font-weight: 750;
	line-height: 1.4;
	transition: border-color .18s ease, background .18s ease;
}
.jdb-unsolved-button i { color: var(--jdb-unsolved-red); font-size: 20px; font-style: normal; line-height: 1; }
a:hover .jdb-unsolved-button,
.jdb-unsolved-button:hover { border-color: var(--jdb-unsolved-red); background: var(--jdb-unsolved-red); }
a:hover .jdb-unsolved-button i,
.jdb-unsolved-button:hover i { color: #fff; }

/* Shared placeholder */
.jdb-unsolved-card__placeholder {
	position: relative;
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	background:
		linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
		#101419;
	background-size: 26px 26px;
	color: #7e858d;
}
.jdb-unsolved-card__placeholder i {
	position: absolute;
	width: 72px;
	height: 88px;
	border: 1px solid #555d66;
	background: rgba(255,255,255,.018);
}
.jdb-unsolved-card__placeholder i::before,
.jdb-unsolved-card__placeholder i::after {
	position: absolute;
	left: 14px;
	right: 14px;
	height: 1px;
	background: #4a5159;
	content: "";
}
.jdb-unsolved-card__placeholder i::before { top: 30px; box-shadow: 0 13px 0 #4a5159, 0 26px 0 #4a5159; }
.jdb-unsolved-card__placeholder b { position: relative; margin-top: 125px; font-size: 10px; letter-spacing: .18em; }

/* Featured */
.jdb-unsolved-featured-grid,
.jdb-unsolved-browse-grid,
.jdb-unsolved-record-grid,
.jdb-unsolved-era-grid,
.jdb-unsolved-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.jdb-unsolved-featured-card {
	min-width: 0;
	border: 1px solid var(--jdb-unsolved-border);
	border-radius: 3px;
	background: #111419;
	transition: border-color .18s ease, background .18s ease;
}
.jdb-unsolved-featured-card:hover { border-color: var(--jdb-unsolved-red); background: #15191e; }
.jdb-unsolved-featured-card > a { display: flex; height: 100%; flex-direction: column; }
.jdb-unsolved-featured-card figure {
	position: relative;
	width: 100%;
	aspect-ratio: 1200 / 630;
	overflow: hidden;
	border-bottom: 1px solid var(--jdb-unsolved-border);
	background: #050607;
}
.jdb-unsolved-featured-card figure > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: transform .22s ease;
}
.jdb-unsolved-featured-card:hover figure > img { transform: scale(1.018); }
.jdb-unsolved-featured-card__body { display: flex; padding: 24px 20px 20px; flex: 1; flex-direction: column; }
.jdb-unsolved-featured-card h3 {
	min-height: 2.8em;
	font-size: 24px !important;
	font-weight: 850 !important;
	line-height: 1.4 !important;
}
.jdb-unsolved-featured-card dl {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 18px -20px 20px;
	border-top: 1px solid var(--jdb-unsolved-border);
	border-bottom: 1px solid var(--jdb-unsolved-border);
	background: #161a1f;
}
.jdb-unsolved-featured-card dl > div { min-width: 0; padding: 12px 14px; }
.jdb-unsolved-featured-card dl > div + div { border-left: 1px solid var(--jdb-unsolved-border); }
.jdb-unsolved-featured-card dt { color: var(--jdb-unsolved-muted); font-size: 11px; font-weight: 700; }
.jdb-unsolved-featured-card dd { margin-top: 3px; color: #fff; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.jdb-unsolved-featured-card .jdb-unsolved-button { align-self: flex-start; margin-top: auto; }

/* Browse cards */
.jdb-unsolved-browse-card {
	min-width: 0;
	padding: 25px 22px 20px;
	border: 1px solid var(--jdb-unsolved-border);
	border-radius: 3px;
	background: linear-gradient(135deg, rgba(255,255,255,.018), transparent 45%), #111419;
}
.jdb-unsolved-browse-card > p { color: #ed4050 !important; -webkit-text-fill-color: #ed4050 !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .12em !important; }
.jdb-unsolved-browse-card h3 { margin-top: 4px !important; font-size: 25px !important; font-weight: 850 !important; line-height: 1.4 !important; }
.jdb-unsolved-browse-card > span { display: block; min-height: 3.6em; margin-top: 8px; color: var(--jdb-unsolved-secondary); font-size: 14px; line-height: 1.8; }
.jdb-unsolved-browse-card ul { margin-top: 20px; border-top: 1px solid var(--jdb-unsolved-border); }
.jdb-unsolved-browse-card li { border-bottom: 1px solid var(--jdb-unsolved-border); }
.jdb-unsolved-browse-card li a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 18px;
	align-items: center;
	gap: 10px;
	min-height: 47px;
	padding: 8px 3px;
	transition: color .16s ease, background .16s ease, padding .16s ease;
}
.jdb-unsolved-browse-card li a:hover { padding-inline: 9px; background: rgba(255,255,255,.035); color: #ff5967 !important; }
.jdb-unsolved-browse-card li b { min-width: 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.jdb-unsolved-browse-card li em { color: var(--jdb-unsolved-muted); font-size: 12px; font-style: normal; white-space: nowrap; }
.jdb-unsolved-browse-card li i { color: #fff; font-size: 21px; font-style: normal; text-align: right; }
.jdb-unsolved-browse-card__all {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 18px;
	font-size: 13px;
	font-weight: 750;
}
.jdb-unsolved-browse-card__all i { color: var(--jdb-unsolved-red); font-size: 22px; font-style: normal; }
.jdb-unsolved-browse-card__all:hover { color: #ff5967 !important; }

/* Article cards */
.jdb-unsolved-record-card {
	min-width: 0;
	border: 1px solid var(--jdb-unsolved-border);
	border-radius: 3px;
	background: #111419;
	transition: border-color .18s ease, background .18s ease;
}
.jdb-unsolved-record-card:hover { border-color: var(--jdb-unsolved-red); background: #15191e; }
.jdb-unsolved-record-card > a { display: flex; height: 100%; flex-direction: column; }
.jdb-unsolved-record-card figure {
	width: 100%;
	aspect-ratio: 1200 / 630;
	overflow: hidden;
	border-bottom: 1px solid var(--jdb-unsolved-border);
	background: #050607;
}
.jdb-unsolved-record-card figure > img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform .22s ease; }
.jdb-unsolved-record-card:hover figure > img { transform: scale(1.018); }
.jdb-unsolved-record-card__body { display: flex; padding: 19px; flex: 1; flex-direction: column; }
.jdb-unsolved-record-card__label {
	align-self: flex-start;
	padding: 4px 8px;
	background: var(--jdb-unsolved-red);
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	font-size: 10px !important;
	font-weight: 800 !important;
}
.jdb-unsolved-record-card h3 {
	display: -webkit-box;
	min-height: 3.05em;
	margin-top: 11px !important;
	overflow: hidden;
	font-size: 19px !important;
	font-weight: 820 !important;
	line-height: 1.52 !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.jdb-unsolved-record-card__meta { margin: 14px -19px 0; border-top: 1px solid var(--jdb-unsolved-border); border-bottom: 1px solid var(--jdb-unsolved-border); background: #171b20; }
.jdb-unsolved-record-card__meta > div { display: grid; grid-template-columns: 52px minmax(0, 1fr); min-height: 35px; align-items: center; }
.jdb-unsolved-record-card__meta > div + div { border-top: 1px solid var(--jdb-unsolved-border-soft); }
.jdb-unsolved-record-card__meta dt { padding-left: 13px; color: var(--jdb-unsolved-muted); font-size: 10px; font-weight: 700; }
.jdb-unsolved-record-card__meta dd { padding: 7px 12px; border-left: 1px solid var(--jdb-unsolved-border); color: #e4e6e9; font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.jdb-unsolved-record-card__excerpt {
	display: -webkit-box;
	min-height: 4.9em;
	margin-top: 14px !important;
	overflow: hidden;
	color: var(--jdb-unsolved-secondary) !important;
	-webkit-text-fill-color: var(--jdb-unsolved-secondary) !important;
	font-size: 13px !important;
	line-height: 1.65 !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
.jdb-unsolved-record-card__updated { margin-top: 14px !important; color: var(--jdb-unsolved-muted) !important; -webkit-text-fill-color: var(--jdb-unsolved-muted) !important; font-size: 10px !important; letter-spacing: .04em; }
.jdb-unsolved-record-card .jdb-unsolved-button { align-self: flex-start; margin-top: 16px; }

/* Knowledge */
.jdb-unsolved-knowledge-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--jdb-unsolved-border); border-left: 1px solid var(--jdb-unsolved-border); }
.jdb-unsolved-knowledge-grid > a {
	display: flex;
	min-height: 276px;
	padding: 24px 20px;
	flex-direction: column;
	border-right: 1px solid var(--jdb-unsolved-border);
	border-bottom: 1px solid var(--jdb-unsolved-border);
	background: #111419;
	transition: background .18s ease;
}
.jdb-unsolved-knowledge-grid > a:hover { background: #191e24; }
.jdb-unsolved-knowledge-grid > a > span { color: #ed4050; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.jdb-unsolved-knowledge-grid h3 { margin-top: 18px !important; font-size: 20px !important; font-weight: 820 !important; line-height: 1.5 !important; }
.jdb-unsolved-knowledge-grid p { margin-top: 16px !important; color: var(--jdb-unsolved-secondary) !important; -webkit-text-fill-color: var(--jdb-unsolved-secondary) !important; font-size: 13px !important; line-height: 1.8 !important; }
.jdb-unsolved-knowledge-grid b { margin-top: auto; padding-top: 22px; color: #fff; font-size: 12px; font-weight: 750; }
.jdb-unsolved-knowledge-grid a:hover b { color: #ff5967; }

/* Era */
.jdb-unsolved-era-card {
	position: relative;
	min-height: 370px;
	padding: 27px 24px 24px;
	overflow: hidden;
	border: 1px solid var(--jdb-unsolved-border);
	border-top: 3px solid var(--era-accent, var(--jdb-unsolved-red));
	background: #111419;
}
.jdb-unsolved-era-card--showa { --era-accent: #a9323d; background: linear-gradient(145deg, rgba(169,50,61,.12), transparent 42%), #111419; }
.jdb-unsolved-era-card--heisei { --era-accent: #526c87; background: linear-gradient(145deg, rgba(82,108,135,.13), transparent 42%), #111419; }
.jdb-unsolved-era-card--reiwa { --era-accent: #75509b; background: linear-gradient(145deg, rgba(117,80,155,.14), transparent 42%), #111419; }
.jdb-unsolved-era-card > p { color: var(--era-accent) !important; -webkit-text-fill-color: var(--era-accent) !important; font-size: 11px !important; font-weight: 850 !important; letter-spacing: .14em !important; }
.jdb-unsolved-era-card h3 { margin-top: 5px !important; font-size: 38px !important; font-weight: 850 !important; }
.jdb-unsolved-era-card > span { display: block; margin-top: 1px; color: var(--jdb-unsolved-muted); font-size: 12px; }
.jdb-unsolved-era-card > strong { display: block; margin-top: 24px; color: #fff; font-size: 44px; font-weight: 850; line-height: 1; }
.jdb-unsolved-era-card > strong small { margin-left: 6px; color: var(--jdb-unsolved-muted); font-size: 12px; font-weight: 700; }
.jdb-unsolved-era-card ul { margin-top: 25px; border-top: 1px solid var(--jdb-unsolved-border); }
.jdb-unsolved-era-card li { border-bottom: 1px solid var(--jdb-unsolved-border); }
.jdb-unsolved-era-card li a { display: block; padding: 9px 0; overflow: hidden; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.jdb-unsolved-era-card li a:hover { color: #ff6975 !important; }
.jdb-unsolved-era-card .jdb-unsolved-button { margin-top: 22px; }

/* Information CTA */
.jdb-unsolved-information {
	position: relative;
	border: 1px solid #493036;
	border-left: 4px solid var(--jdb-unsolved-red);
	background: linear-gradient(100deg, rgba(201,31,47,.08), transparent 45%), #111419;
}
.jdb-unsolved-information__label {
	display: inline-flex;
	min-height: 34px;
	align-items: center;
	padding: 6px 14px;
	background: var(--jdb-unsolved-red);
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	font-size: 12px !important;
	font-weight: 850 !important;
}
.jdb-unsolved-information__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); gap: 52px; padding: 36px 36px 30px; }
.jdb-unsolved-information h2 {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-size: clamp(27px, 3vw, 38px) !important;
	font-weight: 850 !important;
	line-height: 1.35 !important;
}
.jdb-unsolved-information__grid > div:first-child > p:last-child { max-width: 760px; margin-top: 18px !important; color: var(--jdb-unsolved-secondary) !important; -webkit-text-fill-color: var(--jdb-unsolved-secondary) !important; font-size: 14px !important; line-height: 1.9 !important; }
.jdb-unsolved-information__actions { display: grid; align-content: center; gap: 10px; }
.jdb-unsolved-information__actions a { display: flex; min-height: 52px; padding: 12px 16px; align-items: center; justify-content: space-between; border: 1px solid #d8dadd; font-size: 13px; font-weight: 750; transition: border-color .18s ease, background .18s ease; }
.jdb-unsolved-information__actions a:hover { border-color: var(--jdb-unsolved-red); background: var(--jdb-unsolved-red); }
.jdb-unsolved-information__actions i { color: var(--jdb-unsolved-red); font-size: 22px; font-style: normal; }
.jdb-unsolved-information__actions a:hover i { color: #fff; }
.jdb-unsolved-information__notice { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 20px 36px; border-top: 1px solid #493036; background: rgba(201,31,47,.1); }
.jdb-unsolved-information__notice strong { color: #fff; font-size: 14px; }
.jdb-unsolved-information__notice span { color: #e5c6ca; font-size: 12px; line-height: 1.8; }

/* Related */
.jdb-unsolved-related-card {
	min-width: 0;
	border: 1px solid var(--jdb-unsolved-border);
	background: #111419;
	transition: border-color .18s ease, background .18s ease;
}
.jdb-unsolved-related-card:hover { border-color: var(--jdb-unsolved-red); background: #161b21; }
.jdb-unsolved-related-card__visual {
	position: relative;
	display: grid;
	width: 100%;
	aspect-ratio: 1200 / 630;
	overflow: hidden;
	place-items: center;
	border-bottom: 1px solid var(--jdb-unsolved-border);
	background:
		linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
		radial-gradient(circle at 70% 35%, rgba(201,31,47,.15), transparent 35%),
		#0b0e12;
	background-size: 34px 34px, 34px 34px, auto, auto;
}
.jdb-unsolved-related-card__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.jdb-unsolved-related-card--2 .jdb-unsolved-related-card__visual { background-color: #0c1014; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), radial-gradient(circle at 70% 35%, rgba(82,108,135,.2), transparent 35%); }
.jdb-unsolved-related-card--3 .jdb-unsolved-related-card__visual { background-color: #0c1014; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), radial-gradient(circle at 70% 35%, rgba(117,80,155,.2), transparent 35%); }
.jdb-unsolved-related-card__visual i {
	position: absolute;
	width: 112px;
	height: 78px;
	border: 1px solid #626a73;
	transform: rotate(-4deg);
}
.jdb-unsolved-related-card__visual i::before,
.jdb-unsolved-related-card__visual i::after { position: absolute; background: #626a73; content: ""; }
.jdb-unsolved-related-card__visual i::before { left: 18px; right: 18px; top: 24px; height: 1px; box-shadow: 0 14px 0 #626a73, 0 28px 0 #626a73; }
.jdb-unsolved-related-card__visual i::after { width: 28px; height: 8px; top: -9px; left: 12px; border: 1px solid #626a73; background: #0b0e12; }
.jdb-unsolved-related-card__visual b { position: relative; margin-top: 128px; color: var(--jdb-unsolved-muted); font-size: 10px; letter-spacing: .18em; }
.jdb-unsolved-related-card > div { padding: 20px; }
.jdb-unsolved-related-card > div > p { color: #ed4050 !important; -webkit-text-fill-color: #ed4050 !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .12em !important; }
.jdb-unsolved-related-card h3 { margin-top: 5px !important; font-size: 23px !important; font-weight: 830 !important; }
.jdb-unsolved-related-card > div > span { display: block; min-height: 3.8em; margin-top: 12px; color: var(--jdb-unsolved-secondary); font-size: 13px; line-height: 1.8; }
.jdb-unsolved-related-card > div > b { display: block; margin-top: 18px; font-size: 12px; }
.jdb-unsolved-related-card:hover > div > b { color: #ff5967; }

/* Pagination */
.jdb-unsolved-pagination { display: flex; justify-content: center; margin-top: 38px; }
.jdb-unsolved-pagination .page-numbers { display: inline-flex; min-width: 42px; min-height: 42px; margin: 3px; padding: 8px 12px; align-items: center; justify-content: center; border: 1px solid var(--jdb-unsolved-border); background: #111419; color: #fff !important; font-size: 12px; font-weight: 750; }
.jdb-unsolved-pagination .page-numbers:hover,
.jdb-unsolved-pagination .page-numbers.current { border-color: var(--jdb-unsolved-red); background: var(--jdb-unsolved-red); }
.jdb-unsolved-empty { padding: 30px; border: 1px dashed var(--jdb-unsolved-border); color: var(--jdb-unsolved-muted) !important; text-align: center; }

@media (max-width: 1023px) {
	.jdb-unsolved-featured-grid,
	.jdb-unsolved-browse-grid,
	.jdb-unsolved-record-grid,
	.jdb-unsolved-era-grid,
	.jdb-unsolved-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jdb-unsolved-browse-grid > :last-child,
	.jdb-unsolved-era-grid > :last-child,
	.jdb-unsolved-related-grid > :last-child { grid-column: 1 / -1; }
	.jdb-unsolved-knowledge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jdb-unsolved-information__grid { grid-template-columns: 1fr; gap: 26px; }
	.jdb-unsolved-information__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.jdb-unsolved-container,
	.jdb-unsolved-breadcrumb { padding-inline: 16px; }
	.jdb-unsolved-hero { min-height: 0; }
	.jdb-unsolved-hero .jdb-unsolved-container { padding-block: 52px; }
	.jdb-unsolved-hero h1 { font-size: 37px !important; }
	.jdb-unsolved-hero__lead { font-size: 14px !important; }
	.jdb-unsolved-search { grid-template-columns: 1fr; border: 0; background: transparent; gap: 10px; }
	.jdb-unsolved-search input { border: 1px solid #d7d9dc; }
	.jdb-unsolved-search button { width: 100%; border: 1px solid var(--jdb-unsolved-red); }
	.jdb-unsolved-hero__count { align-items: center; flex-wrap: wrap; }
	.jdb-unsolved-hero__count span { width: 100%; }
	.jdb-unsolved-section { padding: 62px 0; }
	.jdb-unsolved-section-head { display: block; }
	.jdb-unsolved-section-head > p { margin-top: 16px !important; }
	.jdb-unsolved-featured-grid,
	.jdb-unsolved-browse-grid,
	.jdb-unsolved-record-grid,
	.jdb-unsolved-era-grid,
	.jdb-unsolved-related-grid { grid-template-columns: 1fr; }
	.jdb-unsolved-browse-grid > :last-child,
	.jdb-unsolved-era-grid > :last-child,
	.jdb-unsolved-related-grid > :last-child { grid-column: auto; }
	.jdb-unsolved-featured-card h3 { min-height: auto; font-size: 21px !important; }
	.jdb-unsolved-featured-card dl { grid-template-columns: 1fr; }
	.jdb-unsolved-featured-card dl > div + div { border-top: 1px solid var(--jdb-unsolved-border); border-left: 0; }
	.jdb-unsolved-knowledge-grid { grid-template-columns: 1fr; }
	.jdb-unsolved-knowledge-grid > a { min-height: 230px; }
	.jdb-unsolved-information__grid { padding: 30px 20px 24px; }
	.jdb-unsolved-information__actions { grid-template-columns: 1fr; }
	.jdb-unsolved-information__notice { grid-template-columns: 1fr; gap: 8px; padding: 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.jdb-unsolved-hub *,
	.jdb-unsolved-hub *::before,
	.jdb-unsolved-hub *::after { scroll-behavior: auto !important; transition: none !important; }
	.jdb-unsolved-featured-card:hover figure > img,
	.jdb-unsolved-record-card:hover figure > img { transform: none; }
}

/* JDB 3.0 fixed-page foundation has a more specific 1040px rule. */
body.page.jdb-v3-page-enabled.jdb-unsolved-hub-enabled #main_content.l-mainContent,
body.page.jdb-v3-page-enabled.jdb-unsolved-hub-enabled #main_content.l-mainContent.l-article,
body.page.jdb-v3-page-enabled.jdb-unsolved-hub-enabled #main_content > .l-mainContent__inner {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* SWELL places page classes on #body_wrap. Match the shared fixed-page width. */
#body_wrap.page.jdb-unsolved-hub-enabled .l-content.l-container {
	width: min(100% - 48px, 1200px) !important;
	max-width: none !important;
}

#body_wrap.page.jdb-unsolved-hub-enabled #main_content.l-mainContent,
#body_wrap.page.jdb-unsolved-hub-enabled #main_content.l-mainContent.l-article {
	width: min(100% - 48px, 1200px) !important;
	max-width: 1200px !important;
}

#body_wrap.page.jdb-unsolved-hub-enabled #main_content > .l-mainContent__inner,
#body_wrap.page.jdb-unsolved-hub-enabled #main_content .post_content,
#body_wrap.page.jdb-unsolved-hub-enabled #main_content .page_content {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

@media (max-width: 767px) {
	#body_wrap.page.jdb-unsolved-hub-enabled .l-content.l-container,
	#body_wrap.page.jdb-unsolved-hub-enabled #main_content.l-mainContent,
	#body_wrap.page.jdb-unsolved-hub-enabled #main_content.l-mainContent.l-article {
		width: min(100% - 28px, 1200px) !important;
	}
}

/* Active classification filter: unresolved cases only */
.jdb-unsolved-active-filter {
	display: flex;
	margin: -14px 0 30px;
	padding: 16px 18px;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	border: 1px solid #4a3136;
	border-left: 3px solid var(--jdb-unsolved-red);
	background: rgba(201,31,47,.075);
}
.jdb-unsolved-active-filter > div {
	display: flex;
	min-width: 0;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}
.jdb-unsolved-active-filter span {
	color: var(--jdb-unsolved-muted);
	font-size: 11px;
	font-weight: 750;
	letter-spacing: .08em;
}
.jdb-unsolved-active-filter strong {
	color: #fff;
	font-size: 16px;
	font-weight: 800;
}
.jdb-unsolved-active-filter em {
	color: #ff6b77;
	font-size: 12px;
	font-style: normal;
	font-weight: 750;
}
.jdb-unsolved-active-filter > a {
	display: inline-flex;
	min-height: 38px;
	padding: 7px 12px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid #747b84;
	color: #fff !important;
	font-size: 11px;
	font-weight: 750;
	white-space: nowrap;
}
.jdb-unsolved-active-filter > a:hover {
	border-color: var(--jdb-unsolved-red);
	background: var(--jdb-unsolved-red);
}
.jdb-unsolved-active-filter > a i {
	font-size: 17px;
	font-style: normal;
	line-height: 1;
}

@media (max-width: 767px) {
	.jdb-unsolved-active-filter {
		margin-top: -6px;
		align-items: stretch;
		flex-direction: column;
	}
	.jdb-unsolved-active-filter > a { width: 100%; }
}