/**
 * Manager総研 記事詳細 — Page Layout CSS (Phase 9-5G).
 *
 * Loaded only on the Single Article (functions.php kakeai_enqueue_assets(),
 * is_singular('article')), after cards.css — NOT after archive.css, which is
 * never loaded on this page (CLAUDE.md §6/7 Scope Separation). Values that
 * are visually identical to the Article Archive's (wrapper/container,
 * breadcrumb, 2-column layout, sidebar block/banner/pagination-adjacent
 * rules) are independently re-declared here rather than cross-loading that
 * file, matching archive.css's own stated convention for this project.
 *
 * Built from live Production measurement (CDP `CSS.getMatchedStylesForNode`
 * + computed style, https://kakeai.co.jp/media/article/0231 and /0223 — two
 * structurally different real articles, not one post special-cased) and the
 * Webflow Export source (webflow-export/kakeai/site/detail_article.html) for
 * the handful of rules (TOC, CTA breakpoint, Related SP visibility) where
 * the exact declaration block needed inspecting directly rather than reading
 * back a computed value.
 */

.ly_m_wrapper {
	padding-left: 3%;
	padding-right: 3%;
}

.ly_m_container {
	width: 100%;
	max-width: 1176px;
	margin: 0 auto;
}

/* ---------------------------------------------------------------------
 * Breadcrumb (.media-path) — same visual component as the Archive's, with
 * an extra category crumb (ホーム > メインカテゴリー > タイトル, vs the
 * Archive's ホーム > 記事一覧 — confirmed via CDP on Production, a content
 * difference, not a styling one, so these rules are identical to archive.css's).
 * ------------------------------------------------------------------- */
.bl_m_path {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem 1rem;
	padding-top: 1.375rem;
	padding-bottom: 2.5rem;
}

.el_m_path_txt {
	color: var(--media-color-text);
	white-space: nowrap;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.57;
	text-decoration: none;
}

/* Same specificity fix as archive.css's own (Phase 9-5F.1 ROOT CAUSE —
   Foundation's `.media-site a { color: var(--media-color-primary) }` would
   otherwise win over a single-class `.el_m_path_txt` rule). */
.bl_m_path a.el_m_path_txt {
	color: var(--media-color-text);
}

a.el_m_path_txt.is-link {
	text-decoration: underline;
	transition: opacity 0.2s;
}

/* Phase 9-5G.1 Human Review Finding 1: the breadcrumb's own final/current
   crumb (the article title, non-link) is font-weight:600 on Production —
   confirmed via `CSS.getMatchedStylesForNode`
   (`.el_m_path_txt.is-current{font-weight:600}`, specificity 0,2,0, no
   media query) — not just inheriting the breadcrumb's base 400. Archive's
   own breadcrumb never has a long title in this position so this gap was
   never visible there; Single-specific.
   Self-caught during SP Regression QA (Human Review round 2): the SAME
   matched-rule dump also showed `white-space-collapse:collapse;
   text-wrap-mode:wrap` on this element — the modern decomposed
   longhands of `white-space:normal` — overriding the base
   `.el_m_path_txt{white-space:nowrap}` rule above for this one crumb only.
   Missing this caused a real SP bug: a long article title stayed on one
   un-wrapped line and forced horizontal page overflow at narrow widths
   (confirmed via `document.documentElement.scrollWidth` at 375px: 431px
   before this fix). Archive never surfaced this either, since "記事一覧"
   is always short enough to never need wrapping. */
.el_m_path_txt.is-current {
	font-weight: 600;
	white-space: normal;
}

.bl_m_path_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 0.4375rem;
	height: 0.75rem;
	color: var(--media-color-black);
}

@media (max-width: 767px) {
	.bl_m_path {
		padding-top: 1rem;
		padding-bottom: 2rem;
	}

	/* Phase 9-5G.2 Human Review Finding 1 (SP Breadcrumb Typography):
	   Production shrinks the breadcrumb text itself at ≤767px — confirmed
	   via `CSS.getMatchedStylesForNode`: `.el_m_path_txt{font-size:0.625rem}`
	   (10px, same line-height ratio 1.57 carried over, so line-height
	   itself needs no separate override). This rule was entirely missing;
	   both "ホーム"/category links and the current-article-title crumb
	   (whose own font-weight:600 override from Finding 1 of Phase 9-5G.1
	   is unaffected by this) rendered at the PC 14px size on SP. */
	.el_m_path_txt {
		font-size: 0.625rem;
	}
}

/* ---------------------------------------------------------------------
 * 2-column layout (.bl_m_2col: .bl_m_main + .bl_m_side) — pixel-identical
 * to the Article Archive's at every breakpoint checked (1440/1280/991/768/
 * 767/390/375, confirmed via CDP), independently declared per Scope
 * Separation rather than loading archive.css.
 * ------------------------------------------------------------------- */
.bl_m_2col {
	display: flex;
	gap: 5rem 6.7%;
	padding-bottom: 3.5rem;
}

.bl_m_main {
	width: 61.3%;
}

.bl_m_side {
	width: 32%;
	position: relative;
}

@media (max-width: 991px) {
	.bl_m_2col {
		gap: 4% 4%;
	}

	.bl_m_main {
		width: 58%;
	}

	.bl_m_side {
		width: 38%;
	}
}

@media (max-width: 767px) {
	.bl_m_2col {
		flex-flow: column;
	}

	.bl_m_main,
	.bl_m_side {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------
 * Article root (article.bl_m_article) — Production's own vertical rhythm
 * between every major block below is a single flex `gap`, not individual
 * ad-hoc margins (confirmed via computed style: `display:flex;
 * flex-direction:column`).
 * ------------------------------------------------------------------- */
.bl_m_article {
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* 24px, Production-measured */
}

@media (max-width: 767px) {
	.bl_m_article {
		gap: 1rem; /* 16px, Production-measured */
	}

	/* Self-caught during SP QA screenshot comparison (0231): Production
	   visually shows title → 作成日/Share → Hero Image → Lead at ≤767px,
	   a DIFFERENT order from PC's Image → title → info → Lead — achieved by
	   `order:-1` on the title and info row (DOM order itself is unchanged,
	   confirmed via `compareDocumentPosition` — this is a pure visual
	   reorder, not a template markup difference), confirmed via
	   `getComputedStyle().order` on live Production at 390px. */
	h1.el_m_article_ttl,
	.bl_m_article_info {
		order: -1;
	}
}

/* ---------------------------------------------------------------------
 * Hero image (.bl_m_article_thumb / .el_m_article_thumb).
 * ------------------------------------------------------------------- */
.bl_m_article_thumb {
	display: block;
}

.el_m_article_thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1.91 / 1; /* Production-measured */
	object-fit: cover; /* Production itself uses `fill` (stretches non-uniformly);
	                       `cover` is used here instead so any Featured Image whose
	                       own aspect ratio differs from 1.91:1 is cropped rather
	                       than distorted — a deliberate, minor improvement over
	                       reproducing a visible stretch artifact, since Production's
	                       own CMS images are already authored at this exact ratio
	                       and will render identically either way. */
}

/* ---------------------------------------------------------------------
 * Title (h1.el_m_article_ttl).
 * ------------------------------------------------------------------- */
h1.el_m_article_ttl {
	margin: 0;
	font-size: 2rem; /* 32px, Production-measured */
	font-weight: 600;
	line-height: 1.38; /* 44.16px at 32px, Production-measured */
	color: var(--media-color-text);
}

@media (max-width: 767px) {
	h1.el_m_article_ttl {
		font-size: 1.5rem; /* 24px, Production-measured */
		line-height: 1.4; /* 33.6px at 24px, Production-measured */
	}
}

/* ---------------------------------------------------------------------
 * Info row (.bl_m_article_info: 作成日/更新日 + Share).
 * ------------------------------------------------------------------- */
.bl_m_article_info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 1.5rem; /* 24px, Production-measured */
}

@media (max-width: 767px) {
	.bl_m_article_info {
		gap: 0.75rem 1.5rem; /* 12px row / 24px column, Production-measured */
	}
}

.bl_m_article_info_day {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem; /* 8px row / 16px column, Production-measured */
}

.bl_m_article_day_item {
	display: flex;
	align-items: center;
	color: var(--media-color-gray-62); /* Production-measured */
	font-size: 1rem;
	line-height: 1.37; /* 21.92px at 16px, Production-measured */
}

.bl_m_article_day {
	display: flex;
	align-items: center;
	color: var(--media-color-gray-62); /* Production-measured — same as the day label */
	font-size: 1rem;
	line-height: 1.37;
}

/* ---------------------------------------------------------------------
 * Share row (.ly_m_article_share / .bl_m_article_share) —
 * template-parts/media/article-share.php. Interaction (hrefs, clipboard
 * copy, status tooltip) is assets/media/js/single.js, ported from
 * Production's own inline script (webflow-export/kakeai/site/detail_article.html).
 * ------------------------------------------------------------------- */
.bl_m_article_share {
	display: grid;
	grid-template-columns: repeat(4, 2rem); /* 4× 32px, Production-measured */
	gap: 0.5rem; /* 8px, Production-measured */
}

.bl_m_article_share_item {
	display: block;
	width: 2rem; /* 32px, Production-measured */
	height: 2rem;
}

.bl_m_article_share_item img {
	display: block;
	width: 100%;
	height: 100%;
}

.bl_m_share_item_link {
	position: relative;
	display: flex;
}

/* Phase 9-5G.1 Human Review Finding 2 (Copy Link Tooltip) — the original
   implementation guessed a side-by-side dot+label shape; Production's real
   structure (confirmed via `CSS.getMatchedStylesForNode`, 0231) is a
   classic tooltip bubble with a separate 45°-rotated-square "arrow" element
   absolutely positioned to peek out above it, not a flex row with a round
   bullet. Rewritten to match exactly. */
.bl_m_article_share_status {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 0.375rem; /* 6px, Production-measured */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* Production shows this tooltip on `:hover` (`.bl_m_share_item_link:hover
   .bl_m_article_share_status { opacity: 1 }`, confirmed via
   `CSS.getMatchedStylesForNode`) — reproduced unchanged; the copy/reset
   TEXT and background-color swap themselves are handled by single.js
   (ported from Production's own script), not this hover rule. */
.bl_m_share_item_link:hover .bl_m_article_share_status {
	opacity: 1;
}

/* The "arrow": a 16px square rotated 45°, absolutely positioned at the
   status wrapper's own top edge so its lower half peeks out above the
   bubble below — Production-measured, NOT a circular bullet. */
.el_share_status_ractangle {
	position: absolute;
	top: 0;
	left: 50%;
	width: 1rem; /* 16px, Production-measured */
	height: 1rem;
	background-color: var(--media-color-primary);
	transform: translateX(-50%) rotate(45deg);
}

.el_share_status {
	position: relative;
	min-width: 6.875rem; /* 110px, Production-measured — no horizontal
	                         padding; this min-width is what gives the bubble
	                         its visual side margins around the centered text. */
	width: auto;
	margin-top: 0.125rem; /* 2px, Production-measured — offsets the bubble
	                          just below the arrow square's center so the
	                          arrow's bottom half shows above the bubble's
	                          own top edge. */
	padding: 0.5rem 0;
	border-radius: 0.5rem; /* 8px, Production-measured */
	background-color: var(--media-color-primary);
	color: var(--media-color-white);
	text-align: center;
	font-size: 0.75rem; /* 12px, Production-measured */
	line-height: 1.2;
}

/* ---------------------------------------------------------------------
 * Lead text (.bl_m_article_rich.is-lead).
 * ------------------------------------------------------------------- */
.bl_m_article_rich.is-lead {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.75; /* 28px at 16px, Production-measured */
	color: var(--media-color-text);
}

.bl_m_article_rich.is-lead figure {
	margin: 2rem 0 0; /* Production-measured */
}

.bl_m_article_rich.is-lead img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* Phase 9-5G.3 Finding A (YouTube Embed Restoration): Production positions
   its YouTube iframe via an inline `style="position:absolute; top:0;
   left:0; width:100%; height:100%; border:0;"` on the iframe itself, sized
   against its own parent's `padding-top:56.25%` aspect-ratio box (that
   parent div's inline style — background color, padding-top — is part of
   the CMS Lead content itself and is preserved as-is by `wp_kses_post()`'s
   existing `style`-on-block-tags allowance, unrelated to this rule).
   `kakeai_media_sanitize_lead_html()` (inc/helpers.php) deliberately does
   NOT allow a `style` attribute on `<iframe>` itself (see that function's
   own docblock for why — unlike ordinary block tags, trusting arbitrary
   inline style on an iframe is avoided even though the source is
   admin-controlled CSV data), so the identical visual result is reproduced
   here as a fixed CSS rule instead. */
.bl_m_article_rich.is-lead iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------------------------------------------------------------------
 * TOC (.bl_m_article_index). Markup built empty server-side; filled and
 * made interactive client-side by assets/media/js/single.js, which loads
 * the exact same third-party library Production itself uses
 * (cdn.jsdelivr.net/gh/ousllc/webflow-tableofcontents) — this file only
 * owns the static shell + list styling it renders into.
 * ------------------------------------------------------------------- */
.bl_m_article_index {
	border-radius: 0.25rem; /* 4px, Production-measured */
	background-color: var(--media-color-gray-97);
}

.bl_m_article_index_ttl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem; /* 16px, Production-measured */
	padding: 1rem 4.5%; /* Production-measured */
	cursor: pointer;
}

.el_m_article_index_ttl {
	font-size: 1.125rem; /* 18px, Production-measured */
	font-weight: 400;
	line-height: 1.2; /* 21.6px at 18px, Production-measured */
	color: var(--media-color-text);
}

/* Phase 9-5G.1 Human Review Finding 5-B (TOC Close Button circular
   background): the circular white background + light-gray border was
   entirely missing — confirmed via `CSS.getMatchedStylesForNode` this is
   present in BOTH open and closed states (not a state-dependent style),
   `border:1px solid gray93; background-color:white; border-radius:100%;
   padding:8px`. */
.ly_m_article_index_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.875rem; /* 30px, Production-measured */
	height: 1.875rem;
	padding: 0.5rem; /* 8px, Production-measured */
	border: 1px solid var(--media-color-gray-93);
	border-radius: 50%;
	background-color: var(--media-color-white);
	cursor: pointer;
}

.bl_m_article_index_btn {
	position: relative;
	width: 0.75rem; /* 12px, Production-measured */
	height: 0.75rem;
	transition: transform 0.2s;
}

.bl_m_article_index_btn_h,
.bl_m_article_index_btn_v {
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--media-color-gray-46); /* Production-measured */
}

.bl_m_article_index_btn_h {
	top: 50%;
	width: 0.75rem; /* 12px, Production-measured */
	height: 0.125rem; /* 2px, Production-measured */
	transform: translateY(-50%);
}

.bl_m_article_index_btn_v {
	left: 50%;
	width: 0.125rem; /* 2px, Production-measured */
	height: 0.75rem; /* 12px, Production-measured */
	transform: translateX(-50%);
}

/* Production's own "open" state rotates the whole +/plus icon 45° into a ×
   (confirmed via Webflow Export source: `.ly_m_article_index_btn.show {
   transform: rotate(45deg) }`) rather than hiding the vertical bar —
   single.js toggles this exact `.show` class, ported unchanged. */
.ly_m_article_index_btn.show {
	transform: rotate(45deg);
}

.bl_m_article_index_box {
	display: none; /* JS-toggled (single.js) */
	padding: 0 4.5% 2rem; /* Production-measured */
	border-top: 1px solid var(--media-color-gray-82);
}

/* Phase 9-5G.1 Human Review Finding 5-A (TOC Expanded indent): Production
   does NOT reset the list's own `padding-left` — it keeps its sitewide
   `ul,ol{padding-left:40px;margin-bottom:10px}` rule, only removing the
   bullet markers (`list-style-type:none`) — confirmed via
   `CSS.getMatchedStylesForNode`. This 40px is exactly what visually
   indents the list items to the right of the "目次" title (which sits in
   the box's own 4.5% padding with no extra list indent). Previously reset
   to `padding:0`, flattening that indent away entirely. */
.bl_m_article_index_box ul {
	list-style-type: none;
	margin: 0 0 0.625rem; /* 10px bottom, Production-measured */
	padding-left: 2.5rem; /* 40px, Production-measured */
}

.el_m_article_index_h2 {
	border-bottom: 1px solid var(--media-color-gray-82);
	padding: 0.75rem 0.25rem; /* Production-measured */
}

.el_m_article_index_h2:last-child {
	border-bottom: none;
}

.el_m_article_index_h2 p {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.75; /* 28px at 16px, Production-measured */
	color: var(--media-color-text);
}

/* ---------------------------------------------------------------------
 * Main rich-content body (.bl_m_article_rich.is-main). Embedded `<style>`/
 * table blocks already present in post_content (per-article custom table
 * CSS, e.g. `.mst-table`) are untouched by this file — they are
 * self-contained and already carry their own styling.
 * ------------------------------------------------------------------- */

/* Phase 9-5G.4 self-caught finding, found while chasing an SP horizontal
   overflow regression on 0221 (a long, unbroken DOI URL inside a
   `.bl_m_article_rich_box` forced the page 15px wider than the 390px
   viewport): Production sets `overflow-wrap:anywhere; line-break:strict`
   on `.bl_m_article_rich` itself (both is-lead and is-main, confirmed via
   `CSS.getMatchedStylesForNode`) — this was missing entirely, so any long
   unbroken string (URLs, etc.) anywhere in rich-text content could force
   horizontal overflow. Not specific to 0221's box; applies wherever such a
   string occurs in body/lead text generally. */
.bl_m_article_rich {
	overflow-wrap: anywhere;
	line-break: strict;
}

.bl_m_article_rich.is-main {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.75; /* 28px at 16px, Production-measured */
	color: var(--media-color-text);
}

/* Phase 9-5G.1 Human Review Finding 3 (H2 Two-Color Underline) + a
   self-caught adjacent bug found during the same investigation
   (`CSS.getMatchedStylesForNode` + computed style, 0223):
   - The "2-color" underline is TWO separate things stacked, not one
     border: a full-width 1px gray `border-bottom` (already had this) PLUS
     a short 100px/2px navy `::after` pseudo-element absolutely positioned
     at `bottom:-1.5px;left:0` (was entirely missing — confirmed present in
     the Webflow Export source too, webflow-export/kakeai/site/detail_article.html).
   - margin-top is 3rem (48px) between headings, NOT a flat 0 — Production
     only shows 0 on the very FIRST h2 via its own
     `.bl_m_article_rich > :first-child { margin-top: 0 }` rule (confirmed
     by comparing computed marginTop across 4 consecutive h2 on live 0223:
     0px/48px/48px/48px). The flat `margin:0 0 1.5rem` here was wrong for
     every h2 after the first. */
.bl_m_article_rich.is-main h2 {
	position: relative;
	margin: 3rem 0 1.5rem; /* 48px top / 24px bottom, Production-measured */
	padding-bottom: 0.5rem; /* 8px, Production-measured */
	border-bottom: 1px solid var(--media-color-gray-82);
	font-size: 1.75rem; /* 28px, Production-measured */
	font-weight: 600;
	line-height: 1.72; /* 48.16px at 28px, Production-measured */
	color: var(--media-color-text);
}

.bl_m_article_rich.is-main > h2:first-child {
	margin-top: 0; /* Production-measured — only the first child of the rich block */
}

.bl_m_article_rich.is-main h2::after {
	content: "";
	position: absolute;
	bottom: -1.5px; /* Production-measured */
	left: 0;
	width: 100px; /* Production-measured */
	height: 2px; /* Production-measured */
	background-color: var(--media-color-primary);
}

.bl_m_article_rich.is-main h3 {
	margin: 2rem 0 1.5rem; /* 32px top / 24px bottom, Production-measured */
	font-size: 1.5rem; /* 24px, Production-measured */
	font-weight: 600;
	line-height: 1.67; /* 40.08px at 24px, Production-measured */
	color: var(--media-color-text);
}

.bl_m_article_rich.is-main h4 {
	margin: 1.5rem 0 1rem; /* 24px top / 16px bottom, Production-measured */
	font-size: 1.25rem; /* 20px, Production-measured */
	font-weight: 600;
	line-height: 1.7; /* 34px at 20px, Production-measured */
	color: var(--media-color-text);
}

.bl_m_article_rich.is-main p {
	margin: 1rem 0; /* 16px top/bottom, Production-measured */
}

.bl_m_article_rich.is-main ul,
.bl_m_article_rich.is-main ol {
	margin: 1.5rem 0; /* 24px, Production-measured */
	padding-left: 2.5rem; /* 40px, Production-measured */
}

/* Phase 9-5G.4 Finding A (Background Box padding) — confirmed via
   `CSS.getMatchedStylesForNode` on 3 real articles (0221/0168/0163, all
   identical, no SP-specific override): a reusable CMS "colored box"
   component (引用文献/補足情報 etc.) that only ever carries a per-instance
   inline `style="background:...;"` — the box's own shape (padding/margin)
   was entirely missing here. Confirmed via a 230-article audit this exact
   class is used by 31 articles (both in post_content and article_lead),
   so this one rule fixes all of them, not just 0221. Scoped to
   `.bl_m_article_rich` generally (not `.is-main` only) since it also
   appears in article_lead content. */
.bl_m_article_rich_box {
	margin: 1.5rem 0; /* 24px, Production-measured */
	padding: 1.5rem 4.5%; /* 24px vertical / 4.5% horizontal, Production-measured */
}

/* Phase 9-5G.4 self-caught finding (230-article structural audit):
   `<blockquote>` had no custom styling at all — confirmed via
   `CSS.getMatchedStylesForNode` (0087) Production adds a small quote-mark
   SVG background, a gray left border, and generous left padding. The SVG
   (`colon.svg`) is copied unaltered from webflow-export/kakeai/site/images/
   (MD5-verified identical to Production's own served file) into this
   theme's own Media assets, same pattern as every other Media image asset
   in this project. */
/* Phase 9-5G.5 correction (re-measured fresh across all 4 real blockquote
   articles — 0087/0212/0002, plus confirming 0178's own "blockquote" is
   actually a Twitter embed widget that only ever exists inside Production's
   always-hidden `.only-img.w-condition-invisible` duplicate block, so it
   needs no fix at all): the border-left color was wrong
   (`--media-color-gray-82` #d1d1d1 vs the real #d9d9d9, a token that didn't
   exist yet — added as `--media-color-gray-85`) and `font-size`/`line-height`
   were missing entirely (Production's blockquote is 18px/22px, not the
   inherited 16px body size — confirmed unchanged across PC/SP). */
.bl_m_article_rich.is-main blockquote {
	margin: 1.5rem 0; /* 24px, Production-measured */
	padding: 1rem 1rem 1rem 3rem; /* 16px top/right/bottom, 48px left, Production-measured */
	border-left: 0.25rem solid var(--media-color-gray-85); /* 4px, Production-measured */
	font-size: 1.125rem; /* 18px, Production-measured */
	line-height: 1.222; /* 22px at 18px, Production-measured */
	background-image: url('../images/colon.svg');
	background-repeat: no-repeat;
	background-position: 12px 12px; /* Production-measured */
	background-size: 18px; /* Production-measured */
}

/* Phase 9-5G.4 self-caught finding (230-article structural audit): a
   second custom table variant (`.bl_m_article_rich_table`, used by
   0004/0010) with no CSS at all — confirmed via `CSS.getMatchedStylesForNode`
   (0004), distinct from the per-article self-contained `.mst-table` embeds
   (which already carry their own inline `<style>` and need no theme CSS). */
.bl_m_article_rich.is-main .bl_m_article_rich_table {
	width: 100%;
	margin: 1.5rem 0; /* 24px, Production-measured */
	border: 1px solid var(--media-color-gray-46);
}

.bl_m_article_rich.is-main .bl_m_article_rich_table th,
.bl_m_article_rich.is-main .bl_m_article_rich_table td {
	padding: 0.5rem; /* 8px, Production-measured */
	vertical-align: middle;
	text-align: left;
	border: 1px solid var(--media-color-gray-46);
}

/* Phase 9-5G.4 self-caught finding (230-article structural audit): a
   generic fallback for `<table>` elements that carry neither `.mst-table`
   nor `.bl_m_article_rich_table` (45 bare/ad-hoc-styled `<table>` instances
   found across the corpus, most already self-styled via their own inline
   `style`/`border` attributes, but Production itself still applies this
   one small sitewide rule underneath all of them — confirmed via
   `CSS.getMatchedStylesForNode` on a genuinely bare table, 0130). Doesn't
   add borders/padding (those come from each table's own inline styling
   where present) — only what Production's own generic rule sets.
   The chained `:not()` keeps this rule's higher selector specificity (two
   classes + element) from overriding those two variants' OWN
   self-contained `font-size`/`border-collapse` values (`.mst-table`'s
   embedded `<style>` declares `border-collapse:separate;
   font-size:0.9375rem`, deliberately different from this generic rule). */
.bl_m_article_rich.is-main table:not(.mst-table):not(.bl_m_article_rich_table) {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem; /* 14px, Production-measured */
}

.bl_m_article_rich.is-main strong {
	font-weight: 700; /* Production-measured */
}

.bl_m_article_rich.is-main a {
	color: var(--media-color-link); /* Production-measured */
	text-decoration: underline;
}

/* Phase 9-5G.2 Human Review Finding 2 (Speaker Name Color): Production
   repurposes `<sup>`/`<sub>` as inline "speaker color" markers in
   multi-person dialogue articles (e.g. 0229's 土橋/皆川/志水) — NOT real
   typographic super/subscript. Confirmed via `CSS.getMatchedStylesForNode`:
   `.bl_m_article_rich sup{color:#b8860b}` / `.bl_m_article_rich
   sub{color:teal}`, each also neutralizing the browser's default
   super/subscript sizing and baseline shift (`font-size:100%;
   line-height:100%; top/bottom:0`) so the name renders as plain inline
   text in its assigned color. Already present correctly in post_content
   (confirmed via DB read — 0229 has 8 `<sup>` / 11 `<sub>` tags) — this is
   a pure CSS addition, no HTML/data change. Scoped to `.bl_m_article_rich`
   generally (both lead and main, matching Production's own selector), not
   `.is-main` only, same reasoning as the Finding 4 figcaption fix. */
/* Phase 9-5G.3 Finding B (Speaker Name Baseline) ROOT CAUSE: the browser's
   own default `vertical-align: super` (sup) / `vertical-align: sub` (sub)
   was never reset, so these elements shifted up/down from the surrounding
   text's baseline despite `top:0`/`bottom:0` — a `top`/`bottom` offset only
   has an effect once `position` is non-static, and even then it cannot
   undo a `vertical-align` shift, which is a separate inline-layout
   mechanism. Confirmed via computed-style diff against live Production
   (0229): Production resets `vertical-align: baseline` site-wide
   (`sub, sup { vertical-align: baseline; ... position: relative }`) and
   only then layers this component's own `top: 0` / `color` on top — the
   `vertical-align` reset was the missing piece, not the position/top
   values, which were already correct. */
.bl_m_article_rich sup,
.bl_m_article_rich sub {
	position: relative;
	vertical-align: baseline;
	font-size: 100%;
	line-height: 100%;
	top: 0;
	bottom: 0;
}

.bl_m_article_rich sup {
	color: #b8860b; /* Production-measured */
}

.bl_m_article_rich sub {
	color: teal; /* Production-measured */
}

/* Phase 9-5G.2 Human Review Finding 4 (<em> Styling): Production turns off
   the default browser italic and instead renders `<em>` as bold text with
   a thick, light-blue "highlighter marker" underline — confirmed via
   `CSS.getMatchedStylesForNode`. The negative `text-underline-offset`
   pulls the 8px-thick line up so it visually sits across the lower part of
   the glyphs rather than purely beneath them (the highlighter look);
   `text-decoration-skip-ink:none` keeps the line solid under descenders.
   Scoped to `.bl_m_article_rich` (lead + main only), matching Production's
   own selector — never reaches Header/Footer/Sidebar/Related
   Articles/Breadcrumb/Share/TOC/Corporate. `<em>`'s own semantic markup in
   post_content is untouched; this is a pure CSS addition. */
.bl_m_article_rich em {
	font-style: normal;
	font-weight: 700;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-color: rgb(211, 231, 245); /* #d3e7f5, Production-measured */
	text-decoration-thickness: 8px; /* Production-measured */
	text-underline-offset: -3px; /* Production-measured */
	text-decoration-skip-ink: none;
}

.bl_m_article_rich.is-main figure {
	margin: 2rem 0; /* Production-measured, matches the lead's own figure spacing */
}

.bl_m_article_rich.is-main img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* Phase 9-5G.1 Human Review Finding 4 (Caption Alignment): Production's
   real rule (confirmed via `CSS.getMatchedStylesForNode` — two cascading
   `figcaption` rules of equal specificity, the later one winning) is
   `text-align:left`, not center, with different margin/font-size/line-height
   values than originally implemented. Scoped to `.bl_m_article_rich`
   generally (not `.is-main` only) since Production's own selector is a bare
   `figcaption` with no `.is-main`/`.is-lead` distinction — a captioned
   image in the lead would get the same treatment there too. */
.bl_m_article_rich figcaption {
	margin-top: 0.75rem; /* 12px, Production-measured */
	margin-bottom: 0.75rem; /* 12px, Production-measured */
	font-size: 0.8125rem; /* 13px, Production-measured */
	line-height: 1.38; /* Production-measured */
	color: var(--media-color-text);
	text-align: left;
}

@media (max-width: 767px) {
	.bl_m_article_rich.is-main h2 {
		font-size: 1.25rem; /* 20px, Production-measured */
		line-height: 1.4; /* 28px at 20px, Production-measured */
	}

	.bl_m_article_rich.is-main h3 {
		font-size: 1.125rem; /* 18px, Production-measured */
		line-height: 1.6; /* 28.8px at 18px, Production-measured */
	}

	.bl_m_article_rich.is-main h4 {
		font-size: 1rem; /* 16px, Production-measured */
		line-height: 1.5; /* 24px at 16px, Production-measured */
	}
}

/* ---------------------------------------------------------------------
 * CTA banner (.bl_m_article_block_regular). PC/SP image swap is a plain CSS
 * `display` toggle at the project's standard 767px breakpoint (confirmed via
 * `CSS.getMatchedStylesForNode`) — both <img> are always in the DOM, no
 * <picture>/srcset-based swap on Production's own markup to reproduce.
 * ------------------------------------------------------------------- */
.bl_m_article_block_regular {
	display: flex;
	flex-direction: column;
	gap: 3.75rem; /* 60px, Production-measured */
	padding-top: 2.25rem; /* 36px, Production-measured */
}

.bl_m_article_cta {
	display: block;
}

/* ROOT CAUSE (self-caught during QA, confirmed via `CSS.getMatchedStylesForNode`):
   foundation.css's own `.media-site img{display:block;...}` (specificity
   0,1,1) beats a plain single-class `.el_m_article_cta_img_sp{display:none}`
   (0,1,0) — the same recurring Foundation-vs-page-CSS specificity gap
   already fixed throughout archive.css/cards.css/top.css. `img.` bumps
   these two selectors to the same (0,1,1) specificity, which then wins on
   source order (this file loads after foundation.css). */
img.el_m_article_cta_img_pc {
	display: block;
	width: 100%;
	height: auto;
}

img.el_m_article_cta_img_sp {
	display: none;
	width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	img.el_m_article_cta_img_pc {
		display: none;
	}

	img.el_m_article_cta_img_sp {
		display: block;
	}
}

/* ---------------------------------------------------------------------
 * Bottom block (.bl_m_article_block_small): bottom Share + Meta + Related.
 * ------------------------------------------------------------------- */
.bl_m_article_block_small {
	display: flex;
	flex-direction: column;
	gap: 3rem; /* 48px, Production-measured */
	padding-top: 2rem; /* 32px, Production-measured */
}

.ly_m_article_share.is-btm {
	margin-left: auto; /* Production-measured — right-aligns the fixed-width share grid */
}

.bl_m_article_meta {
	display: flex;
	flex-direction: column;
	gap: 0.5rem; /* 8px, Production-measured */
	border-top: 1px solid var(--media-color-gray-93);
	border-bottom: 1px solid var(--media-color-gray-93);
	padding: 1rem 0 1.5rem; /* Production-measured */
}

.bl_m_article_meta_item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem; /* 8px, Production-measured */
}

.el_m_article_meta_txt {
	color: var(--media-color-text);
	font-size: 1rem;
}

.el_m_article_meta_cat {
	color: var(--media-color-primary); /* Production-measured */
	font-size: 1.125rem; /* 18px, Production-measured */
	font-weight: 300; /* Production-measured */
	line-height: 1.6; /* 28.8px at 18px, Production-measured */
	text-decoration: none;
}

.bl_m_article_meta_item .ly_m_cms_tag {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem; /* matches cards.css's own .bl_m_tag_box gap, Production-measured */
}

/* ---------------------------------------------------------------------
 * Related Articles (.bl_m_article_related). Production hides this section
 * ENTIRELY at ≤767px (confirmed via `CSS.getMatchedStylesForNode`:
 * `@media screen and (max-width:767px){.bl_m_article_related{display:none}}`)
 * — a real, deliberate Production behavior, not a Local layout bug.
 * ------------------------------------------------------------------- */
.bl_m_article_related {
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* 24px, Production-measured */
}

.bl_m_article_related .el_m_main_ttl {
	margin: 0;
	font-size: 1.5rem; /* 24px, Production-measured */
	font-weight: 600;
	line-height: 1.5; /* 36px at 24px, Production-measured */
	color: var(--media-color-text);
}

.ly_m_cms_3col {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem 2.05%; /* Production-measured */
}

@media (max-width: 767px) {
	.bl_m_article_related {
		display: none;
	}
}

/* ---------------------------------------------------------------------
 * Sidebar — identical to the Article Archive's (same CMS sources, same
 * markup, Scope Separation duplication per CLAUDE.md §6/7 — see
 * archive.css's own equivalent rules for the full Production-measurement
 * provenance of each value).
 * ------------------------------------------------------------------- */
.ly_m_side_inner {
	display: flex;
	flex-direction: column;
	gap: 4rem; /* 64px, Production-measured */
	height: 100%;
	position: relative;
}

@media (max-width: 767px) {
	.ly_m_side_inner {
		gap: 3rem; /* 48px, Production-measured */
		padding-top: 3rem; /* 48px, Production-measured */
	}
}

.bl_m_side_block {
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* 24px, Production-measured */
}

.bl_m_side_block.is-side,
.bl_m_side_block .ly_m_cms_1col.is-side {
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* 24px, Production-measured */
}

.el_m_side_block_ttl {
	margin: 0;
	border-bottom: 1px solid var(--media-color-gray-82);
	padding-bottom: 1rem; /* 16px, Production-measured */
	font-size: 1.375rem; /* 22px, Production-measured */
	font-weight: 600;
	line-height: 1.2; /* 26.4px at 22px, Production-measured */
	color: var(--media-color-text);
}

a.bl_m_side_cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem; /* 16px, Production-measured */
	border-bottom: 1px solid var(--media-color-gray-82);
	padding: 1rem 4.2%; /* Production-measured */
	color: var(--media-color-primary);
	font-size: 1.125rem; /* 18px, Production-measured */
	font-weight: 600;
	line-height: 1.3; /* 23.4px at 18px, Production-measured */
	text-decoration: none;
}

.bl_m_side_cat_svg {
	display: flex;
	flex-shrink: 0;
	width: 0.75rem; /* 12px, Production-measured */
	transition: transform 0.2s;
}

.bl_m_side_banner {
	width: 100%;
	max-width: 23.5rem; /* 376px, Production-measured */
	margin-left: auto;
	margin-right: auto;
}

.bl_m_side_banner.is-sticky {
	position: sticky;
	top: 9rem; /* 144px — same Header-clearance safety value as archive.css's
	              own sticky banner, see that file's ROOT CAUSE comment for
	              the full Phase 9-5F.2 investigation (this Single page's own
	              `.ly_m_side_inner{height:100%}` above supplies the identical
	              sticky containing-block mechanism). */
}

@media (max-width: 991px) {
	.bl_m_side_banner.is-sticky {
		top: 11.5rem; /* 184px — same Tablet Header sub-breakpoint correction as archive.css */
	}
}

.bl_m_side_banner img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.bl_m_side_block.is-cat,
	.bl_m_side_block.is-tag {
		display: none;
	}
}

/* ---------------------------------------------------------------------
 * Card Hover — same Archive-only fix reproduced here for this page's own
 * おすすめ記事 sidebar list (Phase 9-5F.1 ROOT CAUSE: the Shared Component's
 * own hover rule only covers the title underline for `.is-side`, the image
 * opacity dim needs its own page-scoped rule — see archive.css's identical
 * comment for the full investigation).
 * ------------------------------------------------------------------- */
.media-archive .bl_m_card_h1 .el_m_card_img {
	transition: opacity 0.2s;
}

.media-archive .bl_m_card_h1:hover .el_m_card_img {
	opacity: 0.7;
}

/* ---------------------------------------------------------------------
 * Phase 9-5G.4 Finding C defensive hardening. ROOT CAUSE of the reported
 * symptom (article 0164's bottom tag pills showing rich-text link styling;
 * its Related Articles card title showing the rich-text h3 size) is a
 * confirmed Source Data defect specific to that one article — its
 * post_content is missing one closing `</div>` on a Code Embed block (a
 * `data-rt-embed-type` wrapper around `.bl_m_article_rich_box`), which the
 * browser's HTML parser resolves by extending `.bl_m_article_rich.is-main`'s
 * own scope all the way down through `.bl_m_article_block_small` — pulling
 * the bottom tag/related-article markup inside it. Confirmed via a
 * 230-article audit (open/close `<div>` tag counts, both against Local DB
 * and the Fresh CSV source, which has the identical 1-tag imbalance
 * already) that 0164 is the ONLY affected article; the fix for the actual
 * cause is a single-character DB correction, reported as Human Decision
 * Required (Phase 9-5G.4 final report) rather than applied here.
 *
 * The two rules below are an independent, genuinely-justified hardening
 * found while diagnosing this: `a.bl_m_tag` (cards.css, 0,1,1) and
 * `h3.el_m_card_ttl.is-artical-main` (cards.css, 0,2,1) each happen to TIE
 * in specificity with a `.bl_m_article_rich.is-main` rich-text rule
 * (single.css) that was never meant to reach them — a real latent fragility
 * in these two shared components (any future content defect of the same
 * shape would reproduce the identical symptom on whichever article it
 * occurred in), not merely a workaround for 0164's one broken div. Raising
 * each selector's specificity here is a standing improvement independent of
 * whether/when the 0164 DB fix is approved. */
.bl_m_article_meta a.bl_m_tag {
	color: var(--media-color-primary);
	text-decoration: none;
}

/* Phase 9-5Q.2: the specificity-hardened default-state rule above (0,2,1)
 * unintentionally also wins over cards.css's `.bl_m_tag:hover` (0,2,0) on
 * hover, since it has no `:hover` condition of its own — the tag's text/
 * icon (SVG fill="currentColor") stayed navy against the hover background,
 * which is also navy, making them unreadable. Scoped to this exact
 * selector only, so TOP/archive/sidebar tag pills elsewhere (plain
 * `.bl_m_tag:hover`) are unaffected.
 *
 * `:focus-visible` gets the same full treatment (not just `color`) rather
 * than only overriding `color` to match `:hover`, because the generic
 * `.media-site a:focus-visible` rule (foundation.css) only adds an outline
 * — the background stays `--media-color-white` on plain keyboard focus, so
 * pairing `color: white` with it alone would make the text invisible
 * against that unchanged white background. */
.bl_m_article_meta a.bl_m_tag:hover {
	color: var(--media-color-white);
}

.bl_m_article_meta a.bl_m_tag:focus-visible {
	background-color: var(--media-color-primary);
	color: var(--media-color-white);
}

.bl_m_article_related h3.el_m_card_ttl.is-artical-main {
	font-size: 0.8125rem; /* 13px, matches cards.css's own value */
	line-height: 1.67;
}