/**
 * IMABI layout (top page, cards, sections)
 * @see blogs/ima-bi/design/imabi_design_spec.md §5, §6
 */

/* --------------------------------------------------------------------------
   Shared sections
   -------------------------------------------------------------------------- */
.imabi-section {
	margin: var(--imabi-space-section) 0;
	padding-right: var(--imabi-space-page-x);
	padding-left: var(--imabi-space-page-x);
}

@media (max-width: 359px) {
	.imabi-section {
		padding-right: var(--imabi-space-page-x-min);
		padding-left: var(--imabi-space-page-x-min);
	}
}

.imabi-section__inner {
	max-width: var(--imabi-content-max);
	margin: 0 auto;
}

.imabi-section__title {
	margin: 0 0 20px;
	color: var(--imabi-text-primary);
	font-size: var(--imabi-fs-h2);
	font-weight: 700;
	line-height: var(--imabi-lh-heading);
}

.imabi-section__lead {
	margin: 0 0 24px;
	color: var(--imabi-text-secondary);
	font-size: var(--imabi-fs-body);
	line-height: var(--imabi-lh-body);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.imabi-hero {
	margin: 0 0 var(--imabi-space-section);
	padding: 32px var(--imabi-space-page-x) 40px;
	background: var(--imabi-bg-base);
}

.imabi-hero__inner {
	max-width: var(--imabi-content-max);
	margin: 0 auto;
}

.imabi-hero__catch {
	margin: 0 0 12px;
	color: var(--imabi-text-primary);
	font-size: var(--imabi-fs-h1);
	font-weight: 700;
	line-height: 1.45;
}

.imabi-hero__desc {
	margin: 0;
	color: var(--imabi-text-secondary);
	font-size: var(--imabi-fs-body);
	line-height: var(--imabi-lh-body);
}

/* --------------------------------------------------------------------------
   Top concern cards — CTR-oriented card grid (v2)
   @see blogs/ima-bi/design/top-concern-card-adjustment-notes.md
   -------------------------------------------------------------------------- */
.imabi-card-grid,
.imabi-concern-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media screen and (min-width: 375px) {
	.imabi-concern-grid:not(.imabi-card-grid--visual) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

/* Visual concern cards: SP 1 col, tablet 2, PC 3 (readability first) */
.imabi-card-grid--visual {
	grid-template-columns: 1fr;
	gap: 14px;
}

@media screen and (min-width: 768px) {
	.imabi-card-grid--visual {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}
}

@media screen and (min-width: 1024px) {
	.imabi-card-grid--visual {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}
}

@media screen and (min-width: 768px) {
	.imabi-card-grid,
	.imabi-concern-grid {
		gap: 18px;
	}
}

@media screen and (min-width: 1024px) {
	.imabi-card-grid,
	.imabi-concern-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}
}

.imabi-card-grid > li,
.imabi-card-grid > .imabi-concern-hub__item,
.imabi-concern-card {
	display: flex;
	min-width: 0;
	margin: 0;
}

/* Clickable card (entire surface is the CTA) */
.imabi-card,
.imabi-concern-card__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	min-height: 88px;
	padding: 16px 14px;
	border: 1px solid #ece8e4;
	border-radius: 9px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(80, 70, 60, 0.05);
	color: inherit;
	text-decoration: none;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.imabi-concern-card {
	flex-direction: column;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

a.imabi-card:hover,
.imabi-concern-card__link:hover {
	color: inherit;
}

a.imabi-card:hover,
.imabi-concern-card:hover .imabi-concern-card__link {
	border-color: rgba(168, 140, 120, 0.45);
	box-shadow: 0 3px 10px rgba(80, 70, 60, 0.08);
	transform: translateY(-1px);
}

.imabi-card__title,
.imabi-concern-card__label {
	margin: 0;
	color: var(--imabi-text-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.imabi-card__text,
.imabi-concern-card__desc {
	margin: 0;
	color: var(--imabi-text-secondary);
	font-size: var(--imabi-fs-caption);
	line-height: 1.5;
}

.imabi-card--soon,
.imabi-concern-card--soon .imabi-concern-card__link {
	cursor: default;
	background: #fafaf8;
	border-color: #e8e4e0;
	box-shadow: none;
	opacity: 1;
	pointer-events: none;
	transform: none;
}

.imabi-card__badge,
.imabi-concern-card--soon .imabi-concern-card__badge {
	display: inline-block;
	align-self: flex-start;
	order: -1;
	margin: 0 0 2px;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--imabi-bg-muted);
	color: var(--imabi-text-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Concern hub — CTR navigation band below hero (tight spacing)
   @see blogs/ima-bi/design/top-concern-hub-redesign-notes.md
   -------------------------------------------------------------------------- */
body:has(#imabi-top-page) .imabi-concern-hub#imabi-top-concerns {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--imabi-top-primary-max, 1200px);
	margin: 10px auto 32px;
	padding: 18px 12px 32px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(180deg, #fafaf8 0%, #f6f3ef 50%, #f7f5f2 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.imabi-concern-hub__inner {
	width: 100%;
}

.imabi-concern-hub__intro {
	box-sizing: border-box;
	width: 100%;
	max-width: 600px;
	margin: 28px auto 28px;
	padding: 0 16px;
	text-align: center;
}

.imabi-concern-hub__label {
	margin: 0 0 8px;
	color: var(--imabi-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: 1.4;
	text-align: center;
}

.imabi-concern-hub__title {
	position: relative;
	display: inline-block;
	margin: 0 0 10px;
	padding-left: 14px;
	color: var(--imabi-text-primary);
	font-size: var(--imabi-fs-h2);
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
}

.imabi-concern-hub__title::before {
	content: "";
	position: absolute;
	top: 0.12em;
	left: 0;
	width: 4px;
	height: calc(100% - 0.24em);
	border-radius: 2px;
	background: var(--imabi-accent);
}

.imabi-concern-hub__lead {
	margin: 0;
	padding: 0;
	color: var(--imabi-text-secondary);
	font-size: 14px;
	line-height: 1.55;
	text-align: center;
}

.imabi-concern-hub__grid {
	margin: 0;
	padding: 0;
}

@media screen and (max-width: 767px) {
	body:has(#imabi-top-page) .imabi-concern-hub#imabi-top-concerns {
		margin-top: 8px;
		margin-bottom: 28px;
		padding: 16px 0 28px;
		border-radius: 8px;
	}

	body:has(#imabi-top-page) .imabi-concern-hub__inner {
		box-sizing: border-box;
		padding-right: 8px;
		padding-left: 8px;
	}

	.imabi-concern-hub__intro {
		max-width: none;
		margin: 20px auto 20px;
		padding: 0;
	}

	.imabi-concern-hub__lead {
		font-size: 13px;
		line-height: 1.5;
	}

	.imabi-concern-hub__grid.imabi-card-grid--visual {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

@media screen and (min-width: 768px) {
	body:has(#imabi-top-page) .imabi-concern-hub#imabi-top-concerns {
		margin-top: 12px;
		padding: 20px 16px 32px;
	}

	.imabi-concern-hub__intro {
		max-width: 640px;
		margin: 28px auto 28px;
	}

	.imabi-concern-hub__grid.imabi-card-grid--visual {
		gap: 20px;
	}
}

@media screen and (min-width: 1024px) {
	.imabi-concern-hub__grid.imabi-card-grid--visual {
		gap: 20px;
	}
}

/* --------------------------------------------------------------------------
   Editor pickup — curated article cards (below concern hub)
   @see blogs/ima-bi/design/top-editor-pickup-section-notes.md
   -------------------------------------------------------------------------- */
body:has(#imabi-top-page) .imabi-editor-pickup#imabi-top-pickup {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--imabi-top-primary-max, 1200px);
	margin: 0 auto 36px;
	padding: 20px 12px 28px;
	border: 0;
	background: transparent;
}

.imabi-editor-pickup__inner {
	width: 100%;
}

.imabi-editor-pickup__intro {
	box-sizing: border-box;
	width: 100%;
	max-width: 560px;
	margin: 0 auto 18px;
	padding: 0 12px;
	text-align: center;
}

.imabi-editor-pickup__label {
	margin: 0 0 6px;
	color: var(--imabi-text-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
}

.imabi-editor-pickup__title {
	margin: 0 0 8px;
	color: var(--imabi-text-primary);
	font-size: var(--imabi-fs-h2);
	font-weight: 700;
	line-height: 1.35;
}

.imabi-editor-pickup__lead {
	margin: 0;
	color: var(--imabi-text-secondary);
	font-size: 14px;
	line-height: 1.55;
}

.imabi-editor-pickup__grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: 14px;
	margin: 0;
	padding: 0;
	background: transparent;
}

.imabi-editor-pickup__item {
	display: block;
	margin: 0;
	min-width: 0;
	min-height: 0;
	background: transparent;
}

.imabi-editor-pickup__item > .imabi-pickup-card {
	width: 100%;
	min-width: 0;
	height: auto;
	background: transparent;
}

@media screen and (max-width: 767px) {
	body:has(#imabi-top-page) .imabi-editor-pickup#imabi-top-pickup {
		margin-bottom: 32px;
		padding: 16px 12px 24px;
	}

	.imabi-editor-pickup__intro {
		max-width: 520px;
		margin-bottom: 16px;
	}

	.imabi-editor-pickup__lead {
		font-size: 13px;
		line-height: 1.5;
	}

	.imabi-editor-pickup__grid {
		gap: 14px;
	}
}

@media screen and (min-width: 768px) {
	body:has(#imabi-top-page) .imabi-editor-pickup#imabi-top-pickup {
		margin-bottom: 40px;
		padding: 24px 16px 32px;
	}

	.imabi-editor-pickup__intro {
		max-width: 600px;
		margin-bottom: 22px;
	}

	.imabi-editor-pickup__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}
}

@media screen and (min-width: 1200px) {
	.imabi-editor-pickup__grid {
		gap: 18px;
	}
}

/* --------------------------------------------------------------------------
   Latest posts — tertiary article list (below editor pickup)
   @see blogs/ima-bi/design/top-latest-posts-section-notes.md
   -------------------------------------------------------------------------- */
body:has(#imabi-top-page) .imabi-latest-posts#imabi-top-latest {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--imabi-top-primary-max, 1200px);
	margin: 0 auto 32px;
	padding: 12px 12px 24px;
	border: 0;
	background: transparent;
}

.imabi-latest-posts__inner {
	width: 100%;
}

.imabi-latest-posts__intro {
	box-sizing: border-box;
	width: 100%;
	max-width: 520px;
	margin: 0 auto 14px;
	padding: 0 4px;
	text-align: center;
}

.imabi-latest-posts__title {
	margin: 0 0 6px;
	color: var(--imabi-text-primary);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}

.imabi-latest-posts__lead {
	margin: 0;
	color: var(--imabi-text-muted);
	font-size: 13px;
	line-height: 1.5;
}

.imabi-latest-posts__grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.imabi-latest-posts__item {
	display: block;
	margin: 0;
	min-width: 0;
}

.imabi-latest-posts__more {
	margin-top: 16px;
	text-align: center;
}

.imabi-latest-posts__more-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--imabi-border);
	border-radius: var(--imabi-radius);
	background: transparent;
	color: var(--imabi-text-secondary);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition:
		color 0.2s ease,
		border-color 0.2s ease,
		background-color 0.2s ease;
}

.imabi-latest-posts__more-link:hover {
	border-color: var(--imabi-cta-secondary-border);
	background: var(--imabi-bg-surface);
	color: var(--imabi-cta-secondary-text);
}

@media screen and (max-width: 767px) {
	body:has(#imabi-top-page) .imabi-latest-posts#imabi-top-latest {
		margin-bottom: 28px;
		padding: 8px 8px 20px;
	}

	.imabi-latest-posts__intro {
		margin-bottom: 12px;
	}

	.imabi-latest-posts__title {
		font-size: 17px;
	}

	.imabi-latest-posts__lead {
		font-size: 12px;
	}

	.imabi-latest-posts__grid {
		gap: 10px;
	}
}

@media screen and (min-width: 768px) {
	body:has(#imabi-top-page) .imabi-latest-posts#imabi-top-latest {
		margin-bottom: 36px;
		padding: 16px 16px 28px;
	}

	.imabi-latest-posts__intro {
		max-width: 560px;
		margin-bottom: 16px;
	}

	.imabi-latest-posts__title {
		font-size: 19px;
	}

	.imabi-latest-posts__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}
}

@media screen and (min-width: 1200px) {
	.imabi-latest-posts__grid {
		gap: 16px;
	}
}

/* --------------------------------------------------------------------------
   Cosmetics selection LP — hub layout v2（トップ固定ページデザインに統一）
   @see blogs/ima-bi/design/cosmetics-selection-lp-design.md
   -------------------------------------------------------------------------- */
.imabi-cosmetics-lp {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--imabi-top-primary-max, 1200px);
	margin: 0 auto;
	padding: 0 12px 40px;
	color: var(--imabi-text-primary);
	background: var(--imabi-top-page-bg, #fafaf8);
	overflow-x: hidden;
}

/* FV — 文字入りバナー（トップバナー同系・contain で全体表示） */
.imabi-cosmetics-lp__hero {
	box-sizing: border-box;
	margin: 0 -12px 16px;
	padding: 12px 12px 18px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(180deg, #fafaf8 0%, #f6f3ef 50%, #f7f5f2 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
	overflow: visible;
}

.imabi-cosmetics-lp__hero-inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.imabi-cosmetics-lp__hero-figure {
	margin: 0;
	overflow: visible;
}

.imabi-cosmetics-lp__hero-picture {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow: visible;
}

.imabi-cosmetics-lp__hero-image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(42, 38, 34, 0.06);
	object-fit: contain;
	object-position: center center;
}

.imabi-cosmetics-lp__hero-sr-title {
	margin: 0;
}

.imabi-cosmetics-lp__hero-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}

/* PR 表記 — 本文の流れを止めすぎない淡色ボックス */
.imabi-cosmetics-lp__disclosure {
	box-sizing: border-box;
	max-width: 720px;
	margin-right: auto;
	margin-left: auto;
	padding: 12px 14px;
	border: 1px solid var(--imabi-border);
	border-radius: var(--imabi-radius, 8px);
	background: var(--imabi-bg-surface, #ffffff);
	color: var(--imabi-text-secondary);
	font-size: 12px;
	line-height: 1.6;
}

.imabi-cosmetics-lp__disclosure p {
	margin: 0;
}

.imabi-cosmetics-lp__disclosure--top {
	margin-bottom: 20px;
}

.imabi-cosmetics-lp__disclosure--before-affiliate {
	margin-top: 4px;
	margin-bottom: 16px;
}

/* セクション — editor-pickup / concern-hub 中間トーン */
.imabi-cosmetics-lp__section {
	margin-bottom: 24px;
}

.imabi-cosmetics-lp__section--band {
	box-sizing: border-box;
	margin-right: -12px;
	margin-bottom: 24px;
	margin-left: -12px;
	padding: 20px 12px 24px;
	border-radius: 10px;
	background: linear-gradient(180deg, #fafaf8 0%, #f6f3ef 50%, #f7f5f2 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.imabi-cosmetics-lp__section--sub {
	margin-bottom: 16px;
	padding: 16px;
	border-radius: var(--imabi-radius, 8px);
	background: var(--imabi-bg-surface, #ffffff);
	border: 1px solid var(--imabi-border);
}

.imabi-cosmetics-lp__section--accent {
	padding: 20px 16px;
	border-radius: var(--imabi-radius, 8px);
	background: var(--imabi-bg-surface, #ffffff);
	border: 1px solid var(--imabi-border);
}

.imabi-cosmetics-lp__section--related {
	margin-bottom: 0;
}

.imabi-cosmetics-lp__section-inner {
	width: 100%;
}

/* セクション intro — editor-pickup 準拠（縦線なし・中央） */
.imabi-cosmetics-lp__intro {
	box-sizing: border-box;
	width: 100%;
	max-width: 560px;
	margin: 0 auto 18px;
	padding: 0 12px;
	text-align: center;
}

.imabi-cosmetics-lp__intro-label {
	margin: 0 0 6px;
	color: var(--imabi-text-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
}

.imabi-cosmetics-lp__intro-title {
	margin: 0 0 8px;
	color: var(--imabi-text-primary);
	font-size: var(--imabi-fs-h2, 20px);
	font-weight: 700;
	line-height: 1.35;
}

.imabi-cosmetics-lp__intro-lead {
	margin: 0;
	color: var(--imabi-text-secondary);
	font-size: 14px;
	line-height: 1.55;
}

.imabi-cosmetics-lp__intro-lead strong {
	font-weight: 600;
	color: var(--imabi-text-primary);
}

.imabi-cosmetics-lp__intro--compact {
	max-width: none;
	margin-bottom: 12px;
	padding: 0;
	text-align: left;
}

.imabi-cosmetics-lp__intro--compact .imabi-cosmetics-lp__intro-title {
	margin-bottom: 0;
	font-size: 17px;
}

.imabi-cosmetics-lp__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.imabi-cosmetics-lp__grid-item {
	margin: 0;
	min-width: 0;
}

.imabi-cosmetics-lp__section-actions {
	margin-top: 16px;
	text-align: center;
}

.imabi-cosmetics-lp__note {
	margin: 12px 0 0;
	color: var(--imabi-text-muted);
	font-size: 12px;
	line-height: 1.55;
}

.imabi-cosmetics-lp__trust {
	margin-top: 28px;
	padding: 20px 16px;
	border-radius: var(--imabi-radius, 8px);
	background: var(--imabi-bg-subtle, #f5f3ef);
}

.imabi-cosmetics-lp__trust-inner {
	max-width: 640px;
	margin: 0 auto;
}

.imabi-cosmetics-lp__trust-text {
	margin: 0 0 12px;
	color: var(--imabi-text-secondary);
	font-size: 13px;
	line-height: 1.65;
}

.imabi-cosmetics-lp__trust-links {
	margin: 0;
	font-size: 13px;
}

/* SWELL 固定ページタイトル — LP 内 H1 と重複するため非表示（#imabi-cosmetics-lp 限定） */
body:has(#imabi-cosmetics-lp) .l-topTitleArea,
body:has(#imabi-cosmetics-lp) .p-pageHead,
body:has(#imabi-cosmetics-lp) .p-pageTitle,
body:has(#imabi-cosmetics-lp) .c-pageTitle {
	display: none;
	margin: 0;
	padding: 0;
	min-height: 0;
}

/* パンくず下〜LPバナー上：余白を詰めてヘッダー〜看板を連続させる */
body:has(#imabi-cosmetics-lp) .p-breadcrumb,
body:has(#imabi-cosmetics-lp) #breadcrumb,
body:has(#imabi-cosmetics-lp) .l-breadcrumb,
body:has(#imabi-cosmetics-lp) .c-breadcrumbList,
body:has(#imabi-cosmetics-lp) .p-breadcrumbList {
	margin-top: 0;
	margin-bottom: 6px;
	padding-top: 4px;
	padding-bottom: 4px;
	background-color: transparent;
	border-bottom: 0;
	box-shadow: none;
}

body:has(#imabi-cosmetics-lp) .post_content > .imabi-cosmetics-lp.imabi-cosmetics-lp:first-child,
body:has(#imabi-cosmetics-lp) .entry-content > .imabi-cosmetics-lp.imabi-cosmetics-lp:first-child {
	margin-top: 0;
	padding-top: 0;
}

body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp {
	padding-top: 0;
}

body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__hero {
	margin-top: 0;
}

/* PR/広告表記 — LP・ヒーロー帯と同じ横幅（#imabi-cosmetics-lp 限定。他ページの disclosure には非適用） */
body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__hero-inner {
	max-width: var(--imabi-top-primary-max, 1200px);
}

body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__disclosure,
body:has(#imabi-cosmetics-lp) .imabi-disclosure-box.imabi-cosmetics-lp__disclosure {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--imabi-top-primary-max, 1200px);
	margin-right: auto;
	margin-left: auto;
}

@media screen and (max-width: 767px) {
	.imabi-cosmetics-lp {
		padding-right: 12px;
		padding-left: 12px;
	}

	body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__disclosure,
	body:has(#imabi-cosmetics-lp) .imabi-disclosure-box.imabi-cosmetics-lp__disclosure {
		max-width: none;
		width: calc(100% - 16px);
		margin-right: auto;
		margin-left: auto;
	}

	body:has(#imabi-cosmetics-lp) .p-breadcrumb,
	body:has(#imabi-cosmetics-lp) #breadcrumb,
	body:has(#imabi-cosmetics-lp) .l-breadcrumb {
		margin-bottom: 4px;
		padding-top: 2px;
		padding-bottom: 2px;
	}

	.imabi-cosmetics-lp__hero {
		margin-right: -12px;
		margin-left: -12px;
		padding: 8px 8px 14px;
		border-radius: 8px;
	}

	.imabi-cosmetics-lp__hero-image {
		border-radius: 6px;
	}

	.imabi-cosmetics-lp__hero-actions {
		margin-top: 12px;
	}

	.imabi-cosmetics-lp__intro {
		max-width: 520px;
		margin-bottom: 16px;
	}

	.imabi-cosmetics-lp__intro-lead {
		font-size: 13px;
		line-height: 1.5;
	}

	.imabi-cosmetics-lp__section--band {
		margin-right: -12px;
		margin-left: -12px;
		padding: 16px 12px 20px;
		border-radius: 8px;
	}

	.imabi-cosmetics-lp__grid {
		gap: 12px;
	}
}

@media screen and (min-width: 768px) {
	.imabi-cosmetics-lp {
		padding-right: 16px;
		padding-left: 16px;
	}

	.imabi-cosmetics-lp__hero {
		margin-right: -16px;
		margin-left: -16px;
		padding: 10px 14px 20px;
	}

	.imabi-cosmetics-lp__hero-actions {
		align-items: center;
	}

	.imabi-cosmetics-lp__section--band {
		margin-right: -16px;
		margin-left: -16px;
		padding: 22px 16px 26px;
	}

	.imabi-cosmetics-lp__grid--choose {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.imabi-cosmetics-lp__grid--concern {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.imabi-cosmetics-lp__grid--item {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

@media screen and (min-width: 1024px) {
	.imabi-cosmetics-lp__grid--choose {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.imabi-cosmetics-lp__grid--item {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.imabi-cosmetics-lp__grid--item .imabi-cosmetics-lp__grid-item:last-child {
		grid-column: 1 / -1;
		max-width: calc(66.666% - 8px);
		justify-self: center;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Top primary section width — banner-aligned (concern first; pickup-ready)
   @see blogs/ima-bi/design/top-concern-width-adjustment-notes.md
   -------------------------------------------------------------------------- */
body:has(#imabi-top-page) .imabi-section--top-primary {
	padding-right: 0;
	padding-left: 0;
}

body:has(#imabi-top-page) .imabi-section--top-primary .imabi-section__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--imabi-top-primary-max, 1200px);
	margin-right: auto;
	margin-left: auto;
}

body:has(#imabi-top-page) .imabi-section--top-primary .imabi-section__title,
body:has(#imabi-top-page) .imabi-section--top-primary .imabi-section__lead {
	max-width: none;
}

/* SP: 1 column, hero-band inset; vertical rhythm for scroll-by-card */
@media screen and (max-width: 767px) {
	body:has(#imabi-top-page) .imabi-section--top-primary .imabi-section__inner {
		padding-right: 12px;
		padding-left: 12px;
	}

	#imabi-top-concerns .imabi-card-grid--visual:not(.imabi-concern-hub__grid) {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

@media screen and (min-width: 768px) {
	#imabi-top-concerns .imabi-card-grid--visual:not(.imabi-concern-hub__grid) {
		gap: 16px;
	}
}

@media screen and (min-width: 1024px) {
	#imabi-top-concerns .imabi-card-grid--visual:not(.imabi-concern-hub__grid) {
		gap: 16px;
	}
}

/* --------------------------------------------------------------------------
   Post cards (latest and picks)
   -------------------------------------------------------------------------- */
.imabi-post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.imabi-post-grid--pickup {
		grid-template-columns: repeat(2, 1fr);
	}
}

.imabi-post-card {
	margin: 0;
	border: 1px solid var(--imabi-border);
	border-radius: var(--imabi-radius);
	background: var(--imabi-bg-surface);
	box-shadow: var(--imabi-shadow-card);
	overflow: hidden;
}

.imabi-post-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.imabi-post-card__thumb {
	position: relative;
	aspect-ratio: var(--imabi-ratio-card);
	margin: 0;
	background: var(--imabi-bg-subtle);
	overflow: hidden;
}

.imabi-post-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.imabi-post-card__body {
	padding: var(--imabi-space-card);
}

.imabi-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
	color: var(--imabi-text-muted);
	font-size: var(--imabi-fs-caption);
	line-height: 1.4;
}

.imabi-post-card__cat {
	color: var(--imabi-accent);
	font-weight: 600;
}

.imabi-post-card__title {
	margin: 0;
	color: var(--imabi-text-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.imabi-post-card__link:hover .imabi-post-card__title {
	color: var(--imabi-cta-secondary-text);
}

.imabi-section__more {
	margin-top: 20px;
	text-align: center;
}

.imabi-section__more-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--imabi-btn-min-height);
	padding: 0 var(--imabi-btn-padding-x);
	border: 1px solid var(--imabi-cta-secondary-border);
	border-radius: var(--imabi-radius);
	background: var(--imabi-cta-secondary-bg);
	color: var(--imabi-cta-secondary-text);
	font-size: var(--imabi-fs-cta-btn);
	font-weight: 600;
	line-height: var(--imabi-lh-cta-btn);
	text-decoration: none;
}

.imabi-section__more-link:hover {
	border-color: var(--imabi-cta-bg-hover);
	background: var(--imabi-bg-subtle);
	color: var(--imabi-cta-bg-hover);
}

/* --------------------------------------------------------------------------
   Theme intro cards
   -------------------------------------------------------------------------- */
.imabi-theme-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.imabi-theme-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.imabi-theme-card {
	margin: 0;
	padding: var(--imabi-space-card);
	border: 1px solid var(--imabi-border);
	border-radius: var(--imabi-radius);
	background: var(--imabi-bg-surface);
}

.imabi-theme-card__title {
	margin: 0 0 8px;
	font-size: var(--imabi-fs-h3);
	font-weight: 600;
	line-height: var(--imabi-lh-heading);
}

.imabi-theme-card__desc {
	margin: 0;
	color: var(--imabi-text-secondary);
	font-size: var(--imabi-fs-caption);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Trust links (disclaimer and editorial policy)
   -------------------------------------------------------------------------- */
.imabi-trust {
	padding: 32px var(--imabi-space-page-x);
	background: var(--imabi-bg-subtle);
}

.imabi-trust__inner {
	max-width: var(--imabi-content-max);
	margin: 0 auto;
}

.imabi-trust__title {
	margin: 0 0 12px;
	font-size: var(--imabi-fs-h3);
	font-weight: 600;
}

.imabi-trust__text {
	margin: 0 0 16px;
	color: var(--imabi-text-secondary);
	font-size: var(--imabi-fs-caption);
	line-height: 1.7;
}

.imabi-trust__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--imabi-btn-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.imabi-trust__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	color: var(--imabi-text-primary);
	font-size: var(--imabi-fs-caption);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.imabi-trust__links a:hover {
	color: var(--imabi-cta-secondary-text);
}

/* --------------------------------------------------------------------------
   End-of-post CTA wrapper (1 primary + up to 1 secondary)
   -------------------------------------------------------------------------- */
.imabi-cta-wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: var(--imabi-space-article-section) 0;
}

.imabi-cta-wrap[data-imabi-content-role="article-end-cta"] {
	padding-top: 8px;
	border-top: 1px solid var(--imabi-border);
}

/* De-emphasize extra primary-style CTA blocks */
.imabi-cta-wrap .imabi-cta[data-imabi-cta-role="primary"] ~ .imabi-cta[data-imabi-cta-role="primary"] {
	opacity: 0.55;
	pointer-events: none;
}

/* Spacing inside post content */
.post_content .imabi-cta-wrap:first-child {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Top page visual variants (preview mockups)
   @see blogs/ima-bi/design/preview/visual-preview-notes.md
   -------------------------------------------------------------------------- */
.imabi-hero--visual .imabi-hero__inner {
	display: grid;
	gap: 24px;
	align-items: center;
}

@media (min-width: 768px) {
	.imabi-hero--visual.imabi-hero--visual-a .imabi-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(160px, 38%);
		gap: 28px;
	}
}

.imabi-hero__content {
	min-width: 0;
}

.imabi-hero__visual {
	min-width: 0;
}

/* Variant A: light background, right visual */
.imabi-hero--visual-a {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--imabi-border);
}

.imabi-hero--visual-a::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(105deg, rgba(250, 250, 248, 0.97) 0%, rgba(250, 250, 248, 0.88) 42%, rgba(250, 250, 248, 0.55) 100%),
		linear-gradient(145deg, #f5f2ee 0%, #ebe6e0 45%, #e3ddd6 100%);
	pointer-events: none;
}

.imabi-hero--visual-a .imabi-hero__inner {
	position: relative;
	z-index: 1;
}

.imabi-hero__image-placeholder {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid rgba(229, 224, 219, 0.9);
	border-radius: var(--imabi-radius);
	background:
		radial-gradient(circle at 72% 28%, rgba(139, 158, 139, 0.12) 0%, transparent 42%),
		radial-gradient(circle at 38% 68%, rgba(243, 240, 237, 0.95) 0%, transparent 55%),
		linear-gradient(160deg, #faf8f5 0%, #f0ebe5 55%, #e8e2da 100%);
	overflow: hidden;
}

.imabi-hero__image-placeholder::before,
.imabi-hero__image-placeholder::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.imabi-hero__image-placeholder::before {
	top: 22%;
	right: 18%;
	width: 28%;
	aspect-ratio: 1;
}

.imabi-hero__image-placeholder::after {
	bottom: 18%;
	left: 16%;
	width: 18%;
	aspect-ratio: 1;
	background: rgba(139, 158, 139, 0.15);
}

@media (max-width: 767px) {
	.imabi-hero--visual-a .imabi-hero__visual {
		order: 2;
	}

	.imabi-hero__image-placeholder {
		max-height: 140px;
		aspect-ratio: 16 / 7;
		opacity: 0.85;
	}
}

/* Variant B: no image, gradient and spacing */
.imabi-hero--visual-b {
	margin-right: var(--imabi-space-page-x);
	margin-left: var(--imabi-space-page-x);
	padding: 36px var(--imabi-space-card) 40px;
	border: 1px solid var(--imabi-border);
	border-radius: calc(var(--imabi-radius) + 4px);
	background:
		linear-gradient(135deg, var(--imabi-bg-surface) 0%, var(--imabi-bg-base) 48%, var(--imabi-bg-subtle) 100%);
	box-shadow: var(--imabi-shadow-card);
}

@media (min-width: 768px) {
	.imabi-hero--visual-b {
		margin-right: auto;
		margin-left: auto;
		max-width: var(--imabi-content-max);
	}
}

.imabi-hero--visual-b::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-top: 20px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--imabi-accent), transparent);
}

/* Concern cards: icon emphasis */
.imabi-card__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--imabi-border);
	border-radius: 50%;
	background: var(--imabi-bg-surface);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
}

.imabi-card .imabi-card__icon,
.imabi-concern-card__link .imabi-card__icon {
	margin-bottom: 2px;
}

.imabi-card__icon-mark {
	display: block;
	color: var(--imabi-accent);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
}

.imabi-card__icon--pores {
	background: linear-gradient(145deg, #fafaf8, #f3f0ed);
}

.imabi-card__icon--dryness {
	background: linear-gradient(145deg, #f8f9f7, #eef2eb);
}

.imabi-card__icon--sensitive {
	background: linear-gradient(145deg, #faf8f6, #f5efe8);
}

.imabi-card__icon--cosmetics {
	background: linear-gradient(145deg, #faf9f7, #f0ece8);
}

.imabi-card__icon--haircare {
	background: linear-gradient(145deg, #f9f8f6, #eceae6);
}

.imabi-card__icon--trends {
	background: linear-gradient(145deg, #f7f9f6, #eef1ec);
}

/* Post cards: thumbnail placeholder */
.imabi-post-card__thumb-placeholder {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
	min-height: 100%;
	padding: 10px 12px;
	box-sizing: border-box;
	background:
		linear-gradient(180deg, rgba(250, 250, 248, 0) 0%, rgba(250, 250, 248, 0.35) 100%),
		linear-gradient(135deg, #f3f0ed 0%, #ebe6e0 100%);
	color: var(--imabi-text-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.3;
}

.imabi-post-card__thumb-placeholder::before {
	content: "";
	position: absolute;
	top: 18%;
	right: 12%;
	width: 22%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
}

.imabi-post-card__thumb:has(.imabi-post-card__thumb-placeholder) {
	position: relative;
}

.imabi-post-card__thumb-placeholder--skincare {
	background:
		linear-gradient(180deg, rgba(250, 250, 248, 0) 0%, rgba(247, 249, 246, 0.5) 100%),
		linear-gradient(135deg, #f4f6f2 0%, #e8ebe3 100%);
}

.imabi-post-card__thumb-placeholder--wash {
	background:
		linear-gradient(180deg, rgba(250, 250, 248, 0) 0%, rgba(243, 240, 237, 0.45) 100%),
		linear-gradient(135deg, #f2efeb 0%, #e5e0da 100%);
}

.imabi-post-card__thumb-placeholder--about {
	background:
		linear-gradient(180deg, rgba(250, 250, 248, 0) 0%, rgba(236, 232, 228, 0.4) 100%),
		linear-gradient(135deg, #f0eeea 0%, #e3ded8 100%);
}

/* Visual comparison labels (preview or production) */
.imabi-visual-compare-label {
	margin: 0 0 12px;
	padding: 0;
	color: var(--imabi-accent);
	font-size: var(--imabi-fs-caption);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

.imabi-visual-compare-block {
	margin-bottom: 32px;
}

@media (min-width: 768px) {
	.imabi-visual-compare-block {
		margin-bottom: 40px;
	}
}

/* --------------------------------------------------------------------------
   Top split layout (compare preview)
   @see blogs/ima-bi/design/preview/compare-layout-notes.md
   -------------------------------------------------------------------------- */
.imabi-top-header {
	padding: 20px var(--imabi-space-page-x) 18px;
	border-bottom: 1px solid var(--imabi-border);
	background:
		linear-gradient(180deg, var(--imabi-bg-surface) 0%, var(--imabi-bg-base) 100%);
}

.imabi-top-header__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	align-items: center;
	justify-content: space-between;
	max-width: 960px;
	margin: 0 auto;
}

.imabi-top-header__brand {
	min-width: 0;
}

.imabi-top-header__site {
	margin: 0 0 4px;
	color: var(--imabi-text-muted);
	font-size: var(--imabi-fs-caption);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.imabi-top-header__catch {
	margin: 0;
	color: var(--imabi-text-primary);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
}

@media (min-width: 768px) {
	.imabi-top-header__catch {
		font-size: 18px;
	}
}

.imabi-top-header__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.imabi-top-header__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.7);
	color: var(--imabi-text-secondary);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.imabi-top-header__nav a:hover {
	background: var(--imabi-bg-subtle);
	color: var(--imabi-cta-secondary-text);
}

.imabi-top-split {
	padding: 28px var(--imabi-space-page-x) var(--imabi-space-section);
}

.imabi-top-split__inner {
	max-width: 960px;
	margin: 0 auto;
}

.imabi-top-split__title {
	margin: 0 0 6px;
	color: var(--imabi-text-primary);
	font-size: var(--imabi-fs-h2);
	font-weight: 700;
	line-height: var(--imabi-lh-heading);
}

.imabi-top-split__lead {
	margin: 0 0 20px;
	color: var(--imabi-text-secondary);
	font-size: var(--imabi-fs-caption);
	line-height: 1.65;
}

.imabi-top-split__grid {
	display: grid;
	gap: 20px;
}

@media (min-width: 768px) {
	.imabi-top-split__grid {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		gap: 24px;
		align-items: stretch;
	}
}

.imabi-top-split__featured,
.imabi-top-split__concerns {
	min-width: 0;
}

.imabi-top-split__concerns-title {
	margin: 0 0 12px;
	color: var(--imabi-accent);
	font-size: var(--imabi-fs-caption);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.imabi-featured-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--imabi-border);
	border-radius: calc(var(--imabi-radius) + 2px);
	background: var(--imabi-bg-surface);
	box-shadow: var(--imabi-shadow-card);
	overflow: hidden;
}

.imabi-featured-card__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.imabi-featured-card__label {
	margin: 0;
	padding: 12px 16px 0;
	color: var(--imabi-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
}

.imabi-featured-card__thumb {
	position: relative;
	aspect-ratio: 4 / 3;
	margin: 0;
	background: var(--imabi-bg-subtle);
	overflow: hidden;
}

@media (min-width: 768px) {
	.imabi-featured-card__thumb {
		aspect-ratio: 16 / 10;
	}
}

.imabi-featured-card__thumb-placeholder {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	min-height: 100%;
	padding: 12px 14px;
	box-sizing: border-box;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 248, 0.45) 100%),
		linear-gradient(145deg, #f7f9f6 0%, #ebe8e2 55%, #e3ddd5 100%);
	color: var(--imabi-text-muted);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
}

.imabi-featured-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 16px;
}

.imabi-featured-card__meta {
	margin: 0 0 8px;
	color: var(--imabi-text-muted);
	font-size: var(--imabi-fs-caption);
	line-height: 1.4;
}

.imabi-featured-card__meta span + span::before {
	content: "·";
	margin: 0 6px;
}

.imabi-featured-card__title {
	margin: 0 0 10px;
	color: var(--imabi-text-primary);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}

.imabi-featured-card__excerpt {
	margin: 0 0 14px;
	color: var(--imabi-text-secondary);
	font-size: var(--imabi-fs-caption);
	line-height: 1.65;
}

.imabi-featured-card__more {
	margin-top: auto;
	color: var(--imabi-cta-secondary-text);
	font-size: var(--imabi-fs-caption);
	font-weight: 600;
	line-height: 1.4;
}

.imabi-featured-card:hover {
	border-color: var(--imabi-accent);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.imabi-featured-card__link:hover .imabi-featured-card__title {
	color: var(--imabi-cta-secondary-text);
}

.imabi-top-split .imabi-concern-grid {
	height: 100%;
}

@media (max-width: 767px) {
	.imabi-top-split__featured {
		order: 1;
	}

	.imabi-top-split__concerns {
		order: 2;
	}
}

/* Compare preview: variant labels and dividers */
.imabi-layout-compare {
	margin-bottom: 48px;
	padding-bottom: 40px;
	border-bottom: 2px solid var(--imabi-bg-muted);
}

.imabi-layout-compare:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.imabi-layout-compare__heading {
	margin: 0 0 8px;
	padding: 0 var(--imabi-space-page-x);
	color: var(--imabi-text-primary);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

.imabi-layout-compare__desc {
	margin: 0 0 24px;
	padding: 0 var(--imabi-space-page-x);
	color: var(--imabi-text-secondary);
	font-size: var(--imabi-fs-caption);
	line-height: 1.65;
}

.imabi-layout-compare__tag {
	display: inline-block;
	margin-right: 8px;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--imabi-bg-muted);
	color: var(--imabi-text-muted);
	font-size: 11px;
	font-weight: 700;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   CTR-focused top layout
   @see blogs/ima-bi/design/preview/compare-layout-notes.md
   -------------------------------------------------------------------------- */
.imabi-hero--compact {
	margin-bottom: 24px;
	padding: 20px var(--imabi-space-page-x) 24px;
}

.imabi-hero--compact.imabi-hero--visual-b {
	margin-right: var(--imabi-space-page-x);
	margin-left: var(--imabi-space-page-x);
	padding: 20px var(--imabi-space-card) 24px;
}

@media (min-width: 768px) {
	.imabi-hero--compact.imabi-hero--visual-b {
		margin-right: auto;
		margin-left: auto;
		max-width: 960px;
	}
}

.imabi-hero--compact .imabi-hero__catch {
	margin-bottom: 8px;
	font-size: 20px;
}

@media (min-width: 768px) {
	.imabi-hero--compact .imabi-hero__catch {
		font-size: 22px;
	}
}

.imabi-hero--compact .imabi-hero__desc {
	max-width: 34em;
	margin-bottom: 0;
	font-size: 15px;
}

.imabi-hero--compact .imabi-cta__actions {
	margin-top: 16px;
}

.imabi-hero--strip {
	margin: 0;
	padding: 14px var(--imabi-space-page-x) 18px;
	border-bottom: 1px solid var(--imabi-border);
	background: var(--imabi-bg-base);
}

.imabi-hero--strip .imabi-hero__inner {
	max-width: 960px;
}

.imabi-hero--strip .imabi-hero__catch {
	margin-bottom: 6px;
	font-size: 18px;
}

.imabi-hero--strip .imabi-hero__desc {
	display: none;
}

.imabi-featured-card--wide {
	max-width: 960px;
	margin: 0 auto;
}

.imabi-section--click-priority .imabi-section__inner {
	max-width: 960px;
}

.imabi-section__kicker {
	margin: 0 0 8px;
	color: var(--imabi-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
}

.imabi-layout-compare__goal {
	margin: 0 var(--imabi-space-page-x) 20px;
	padding: 12px 16px;
	border-left: 3px solid var(--imabi-accent);
	border-radius: 0 var(--imabi-radius) var(--imabi-radius) 0;
	background: var(--imabi-point-bg);
	color: var(--imabi-text-secondary);
	font-size: var(--imabi-fs-caption);
	line-height: 1.65;
}

.imabi-card:focus-visible,
.imabi-concern-card__link:focus-visible,
.imabi-featured-card__link:focus-visible,
.imabi-post-card__link:focus-visible {
	outline: 2px solid var(--imabi-accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Top page: hero band + banner (PC/SP picture)
   .imabi-top-page / .imabi-hero-band / #imabi-top-banner are top v2 only
   @see blogs/ima-bi/design/top-page-banner-integration-plan.md
   @see blogs/ima-bi/design/top-hero-band-adjustment-notes.md
   -------------------------------------------------------------------------- */
.imabi-top-page {
	box-sizing: border-box;
	margin-top: -8px;
	overflow-x: visible;
	width: 100%;
}

/* Continuous band: header to banner (plan B) with subtle billboard depth (plan A lite) */
.imabi-hero-band {
	box-sizing: border-box;
	margin: 0;
	padding: 4px 0 8px;
	width: 100%;
	background: linear-gradient(180deg, #f7f5f2 0%, var(--imabi-bg-base, #fafaf8) 100%);
}

.imabi-top-banner {
	margin: 0;
	padding: 0;
	overflow: visible;
	background: transparent;
}

#imabi-top-banner.imabi-top-banner {
	margin: 0;
	padding: 0;
	overflow: visible;
}

.imabi-top-banner__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 12px;
	overflow: visible;
}

.imabi-top-banner__figure {
	margin: 0;
	overflow: visible;
}

.imabi-top-banner__picture {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow: visible;
}

.imabi-top-banner__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 2px 12px rgba(51, 51, 51, 0.06);
	/* Text-in-image banner: never crop — contain + no overflow clip */
	object-fit: contain;
	object-position: center center;
}

/* SWELL post content: top wrapper breakout (#id / .imabi-top-page scoped) */
.post_content > .imabi-top-page.imabi-top-page:first-child,
.entry-content > .imabi-top-page.imabi-top-page:first-child,
.post_content > #imabi-top-banner.imabi-top-banner:first-child,
.entry-content > #imabi-top-banner.imabi-top-banner:first-child {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-top: -12px;
	padding-right: 0;
	padding-left: 0;
}

/* Hero band width: see body:has(#imabi-top-page) rules (header-aligned breakout) */

/* Gap from hero band to sections (concern hub uses .imabi-concern-hub rules above) */
.imabi-hero-band + .imabi-section,
.imabi-top-page > .imabi-section:first-of-type {
	margin-top: 40px;
}

.imabi-hero-band + .imabi-section .imabi-section__title,
.imabi-top-page > .imabi-section:first-of-type .imabi-section__title {
	margin-bottom: 8px;
}

@media screen and (max-width: 767px) {
	.imabi-top-page {
		margin-top: -6px;
		overflow-x: hidden;
	}

	.imabi-hero-band {
		padding: 2px 6px 4px;
	}

	body:has(#imabi-top-page) .imabi-hero-band {
		width: 100%;
		max-width: 100%;
		margin-right: 0;
		margin-left: 0;
		padding-right: 6px;
		padding-left: 6px;
	}

	body:has(#imabi-top-page) .imabi-top-banner__inner {
		max-width: 100%;
		padding-right: 0;
		padding-left: 0;
	}

	.imabi-top-banner__inner {
		padding-right: 0;
		padding-left: 0;
	}

	.imabi-top-banner__picture,
	.imabi-top-banner__image {
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	.post_content > .imabi-top-page.imabi-top-page:first-child,
	.entry-content > .imabi-top-page.imabi-top-page:first-child,
	.post_content > #imabi-top-banner.imabi-top-banner:first-child,
	.entry-content > #imabi-top-banner.imabi-top-banner:first-child {
		margin-top: -8px;
	}

	.imabi-hero-band + .imabi-section,
	.imabi-top-page > .imabi-section:first-of-type {
		margin-top: 40px;
	}
}

@media screen and (min-width: 768px) {
	.imabi-top-page {
		margin-top: -12px;
	}

	.imabi-hero-band {
		padding: 6px 0 10px;
	}

	.post_content > .imabi-top-page.imabi-top-page:first-child,
	.entry-content > .imabi-top-page.imabi-top-page:first-child,
	.post_content > #imabi-top-banner.imabi-top-banner:first-child,
	.entry-content > #imabi-top-banner.imabi-top-banner:first-child {
		margin-top: -20px;
	}

	.imabi-hero-band + .imabi-section,
	.imabi-top-page > .imabi-section:first-of-type {
		margin-top: 40px;
	}
}

/* --------------------------------------------------------------------------
   Top page + Cosmetics LP: SWELL header integration
   Scoped with :has(#imabi-top-page) or :has(#imabi-cosmetics-lp)
   @see blogs/ima-bi/design/top-header-hero-integration-notes.md
   @see blogs/ima-bi/design/top-background-color-adjustment-notes.md
   -------------------------------------------------------------------------- */
body:has(#imabi-top-page),
body:has(#imabi-cosmetics-lp),
body.home:has(#imabi-top-page),
body.page-id-30:has(#imabi-top-page) {
	--imabi-header-bg: #fafaf8;
	--imabi-header-bg-end: #fafaf8;
	--imabi-topbar-bg: #f3f0ed;
	--imabi-top-page-bg: #fafaf8;
	/* SWELL .l-container default; align banner with header inner (logo to nav) */
	--imabi-header-align-max: 1200px;
	--imabi-header-align-x: 16px;
	--imabi-top-primary-max: var(--imabi-header-align-max, 1200px);
	background-color: var(--imabi-top-page-bg);
}

/*
 * Banner width: widen .post_content to header box (1200px).
 * No 100vw / negative margin — prevents left-side text clipping.
 */
body:has(#imabi-top-page) .l-mainContent,
body:has(#imabi-top-page) .l-mainContent__inner,
body:has(#imabi-top-page) .post_content,
body:has(#imabi-top-page) .entry-content,
body:has(#imabi-cosmetics-lp) .l-mainContent,
body:has(#imabi-cosmetics-lp) .l-mainContent__inner,
body:has(#imabi-cosmetics-lp) .post_content,
body:has(#imabi-cosmetics-lp) .entry-content {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--imabi-header-align-max, 1200px);
	margin-right: auto;
	margin-left: auto;
	overflow-x: visible;
}

body:has(#imabi-top-page) .post_content,
body:has(#imabi-top-page) .entry-content,
body:has(#imabi-cosmetics-lp) .post_content,
body:has(#imabi-cosmetics-lp) .entry-content {
	padding-right: var(--imabi-header-align-x, 16px);
	padding-left: var(--imabi-header-align-x, 16px);
}

body:has(#imabi-top-page) .post_content > .imabi-top-page.imabi-top-page,
body:has(#imabi-top-page) .entry-content > .imabi-top-page.imabi-top-page {
	max-width: 100%;
	width: 100%;
	padding-right: 0;
	padding-left: 0;
}

body:has(#imabi-top-page) .imabi-top-page {
	overflow-x: visible;
}

body:has(#imabi-top-page) .imabi-hero-band {
	box-sizing: border-box;
	margin-right: 0;
	margin-left: 0;
	width: 100%;
	overflow: visible;
	padding-right: 0;
	padding-left: 0;
}

body:has(#imabi-top-page) .imabi-top-banner__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: 0;
	padding-left: 0;
	overflow: visible;
}

body:has(#imabi-top-page) #header,
body:has(#imabi-top-page) .l-header,
body.home:has(#imabi-top-page) #header,
body.page-id-30:has(#imabi-top-page) .l-header,
body:has(#imabi-cosmetics-lp) #header,
body:has(#imabi-cosmetics-lp) .l-header {
	background-color: var(--imabi-header-bg);
	border-bottom: 0;
	box-shadow: none;
}

/* SWELL top bar: subtle tone + soft shadow (no white divider line) */
body:has(#imabi-top-page) #header .l-header__bar,
body:has(#imabi-top-page) .l-header .l-header__bar,
body:has(#imabi-top-page) #fix_header_before,
body:has(#imabi-top-page) .l-topBar,
body:has(#imabi-top-page) .c-topBar,
body:has(#imabi-top-page) .p-topBar,
body:has(#imabi-top-page) .l-header__top,
body:has(#imabi-top-page) .p-barTop,
body:has(#imabi-cosmetics-lp) #header .l-header__bar,
body:has(#imabi-cosmetics-lp) .l-header .l-header__bar,
body:has(#imabi-cosmetics-lp) #fix_header_before,
body:has(#imabi-cosmetics-lp) .l-topBar,
body:has(#imabi-cosmetics-lp) .c-topBar,
body:has(#imabi-cosmetics-lp) .p-topBar,
body:has(#imabi-cosmetics-lp) .l-header__top,
body:has(#imabi-cosmetics-lp) .p-barTop {
	background-color: var(--imabi-topbar-bg);
	background-image: none;
	color: #6f7771;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	border-bottom: 0;
	box-shadow: 0 1px 8px rgba(80, 70, 60, 0.04);
}

body:has(#imabi-top-page) .l-header__bar a,
body:has(#imabi-top-page) .l-topBar a,
body:has(#imabi-top-page) .c-topBar a,
body:has(#imabi-top-page) .p-topBar a,
body:has(#imabi-top-page) .l-header__bar .c-iconBtn,
body:has(#imabi-top-page) .l-header__bar .c-iconBtn__icon,
body:has(#imabi-cosmetics-lp) .l-header__bar a,
body:has(#imabi-cosmetics-lp) .l-topBar a,
body:has(#imabi-cosmetics-lp) .c-topBar a,
body:has(#imabi-cosmetics-lp) .p-topBar a,
body:has(#imabi-cosmetics-lp) .l-header__bar .c-iconBtn,
body:has(#imabi-cosmetics-lp) .l-header__bar .c-iconBtn__icon {
	color: #6f7771;
	fill: #6f7771;
	font-weight: 400;
}

body:has(#imabi-top-page) .l-header__bar p,
body:has(#imabi-top-page) .c-topBar__catch,
body:has(#imabi-top-page) .l-header__bar .c-topBar__text,
body:has(#imabi-cosmetics-lp) .l-header__bar p,
body:has(#imabi-cosmetics-lp) .c-topBar__catch,
body:has(#imabi-cosmetics-lp) .l-header__bar .c-topBar__text {
	margin: 0;
	color: #6f7771;
	font-size: 12px;
	font-weight: 400;
}

body:has(#imabi-top-page) .l-header__bar svg,
body:has(#imabi-top-page) .l-topBar svg,
body:has(#imabi-cosmetics-lp) .l-header__bar svg,
body:has(#imabi-cosmetics-lp) .l-topBar svg {
	fill: currentColor;
}

body:has(#imabi-top-page) .l-header__inner,
body:has(#imabi-cosmetics-lp) .l-header__inner {
	padding-bottom: 6px;
}

body:has(#imabi-top-page) .l-header__bar,
body:has(#imabi-cosmetics-lp) .l-header__bar {
	padding-top: 6px;
	padding-bottom: 6px;
}

body:has(#imabi-top-page) .c-headLogo__name,
body:has(#imabi-top-page) .c-headLogo__link,
body:has(#imabi-top-page) .c-siteTitle,
body:has(#imabi-top-page) .c-siteTitle__link,
body:has(#imabi-cosmetics-lp) .c-headLogo__name,
body:has(#imabi-cosmetics-lp) .c-headLogo__link,
body:has(#imabi-cosmetics-lp) .c-siteTitle,
body:has(#imabi-cosmetics-lp) .c-siteTitle__link {
	color: #5f6a63;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.45;
	text-decoration: none;
}

body:has(#imabi-top-page) .c-headLogo__name,
body:has(#imabi-top-page) .c-siteTitle,
body:has(#imabi-cosmetics-lp) .c-headLogo__name,
body:has(#imabi-cosmetics-lp) .c-siteTitle {
	font-size: 15px;
}

body:has(#imabi-top-page) .p-globalNav a,
body:has(#imabi-top-page) .c-gnav a,
body:has(#imabi-top-page) .l-header__nav a,
body:has(#imabi-cosmetics-lp) .p-globalNav a,
body:has(#imabi-cosmetics-lp) .c-gnav a,
body:has(#imabi-cosmetics-lp) .l-header__nav a {
	color: #4f5c55;
	font-weight: 500;
}

body:has(#imabi-top-page) .p-globalNav a:hover,
body:has(#imabi-top-page) .c-gnav a:hover,
body:has(#imabi-top-page) .l-header__nav a:hover,
body:has(#imabi-cosmetics-lp) .p-globalNav a:hover,
body:has(#imabi-cosmetics-lp) .c-gnav a:hover,
body:has(#imabi-cosmetics-lp) .l-header__nav a:hover {
	color: var(--imabi-cta-secondary-text, #5c735a);
}

/* SWELL page title band between header and content (hide when hero banner exists) */
body:has(#imabi-top-page) .l-topTitleArea,
body:has(#imabi-top-page) .p-pageHead,
body:has(#imabi-top-page) .p-pageTitle,
body:has(#imabi-top-page) .c-pageTitle {
	display: none;
	margin: 0;
	padding: 0;
	min-height: 0;
}

body:has(#imabi-top-page) #body_wrap,
body:has(#imabi-top-page) .l-wrapper,
body:has(#imabi-top-page) .l-content,
body:has(#imabi-top-page) .l-main,
body:has(#imabi-top-page) #content,
body:has(#imabi-top-page) .l-mainContent,
body:has(#imabi-top-page) .l-mainContent__inner,
body:has(#imabi-cosmetics-lp) #body_wrap,
body:has(#imabi-cosmetics-lp) .l-wrapper,
body:has(#imabi-cosmetics-lp) .l-content,
body:has(#imabi-cosmetics-lp) .l-main,
body:has(#imabi-cosmetics-lp) #content,
body:has(#imabi-cosmetics-lp) .l-mainContent,
body:has(#imabi-cosmetics-lp) .l-mainContent__inner {
	margin-top: 0;
	padding-top: 0;
	background-color: var(--imabi-top-page-bg);
}

body:has(#imabi-top-page) .post_content,
body:has(#imabi-top-page) .entry-content,
body:has(#imabi-cosmetics-lp) .post_content,
body:has(#imabi-cosmetics-lp) .entry-content {
	margin-top: 0;
	padding-top: 0;
	background-color: var(--imabi-top-page-bg);
}

/* Cards and clickable blocks stay white for contrast and CTR */
body:has(#imabi-top-page) .imabi-concern-hub .imabi-card:not(.imabi-card--soon),
body:has(#imabi-top-page) .imabi-card:not(.imabi-card--soon),
body:has(#imabi-top-page) .imabi-concern-card,
body:has(#imabi-top-page) .imabi-post-card,
body:has(#imabi-top-page) .imabi-latest-card,
body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card,
body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__section--sub,
body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__section--accent,
body:has(#imabi-cosmetics-lp) .imabi-cta.imabi-cosmetics-lp__asp,
body:has(#imabi-top-page) .imabi-theme-card,
body:has(#imabi-top-page) .imabi-cta.imabi-cta--line-teaser,
body:has(#imabi-top-page) .imabi-disclosure-box,
body:has(#imabi-top-page) .imabi-trust .imabi-disclosure-box {
	background-color: var(--imabi-bg-surface, #ffffff);
}

body:has(#imabi-top-page) .imabi-top-page {
	margin-top: 0;
}

body:has(#imabi-top-page) .imabi-hero-band {
	margin-top: 0;
	padding-top: 0;
	background: linear-gradient(
		180deg,
		var(--imabi-header-bg-end) 0%,
		var(--imabi-top-page-bg) 55%,
		var(--imabi-top-page-bg) 100%
	);
}

body:has(#imabi-top-page) .post_content > .imabi-top-page.imabi-top-page:first-child,
body:has(#imabi-top-page) .entry-content > .imabi-top-page.imabi-top-page:first-child {
	margin-top: 0;
}

@media screen and (max-width: 767px) {
	body:has(#imabi-top-page),
	body:has(#imabi-cosmetics-lp) {
		overflow-x: hidden;
	}

	body:has(#imabi-top-page) .post_content,
	body:has(#imabi-top-page) .entry-content,
	body:has(#imabi-cosmetics-lp) .post_content,
	body:has(#imabi-cosmetics-lp) .entry-content {
		padding-right: 8px;
		padding-left: 8px;
	}

	body:has(#imabi-top-page) .l-header__inner,
	body:has(#imabi-cosmetics-lp) .l-header__inner {
		padding-top: 8px;
		padding-bottom: 4px;
	}

	body:has(#imabi-top-page) .l-header__bar,
	body:has(#imabi-cosmetics-lp) .l-header__bar {
		padding-top: 4px;
		padding-bottom: 4px;
	}

	body:has(#imabi-top-page) .c-headLogo__name,
	body:has(#imabi-top-page) .c-siteTitle,
	body:has(#imabi-cosmetics-lp) .c-headLogo__name,
	body:has(#imabi-cosmetics-lp) .c-siteTitle {
		font-size: 14px;
	}

	body:has(#imabi-top-page) .imabi-hero-band {
		padding-top: 2px;
		padding-bottom: 4px;
		padding-right: 6px;
		padding-left: 6px;
	}

	body:has(#imabi-top-page) .imabi-top-banner__inner {
		padding-right: 0;
		padding-left: 0;
	}

	body:has(#imabi-top-page) .p-globalNav a,
	body:has(#imabi-top-page) .c-gnav a {
		font-size: 13px;
	}

	/* プレビュー専用: l-mainContent と post_content の二重 inset を SP で緩和 */
	body.imabi-preview-top:has(#imabi-top-page) .l-mainContent {
		padding-right: 8px;
		padding-left: 8px;
	}
}

@media screen and (min-width: 768px) {
	body:has(#imabi-top-page) .l-header__inner,
	body:has(#imabi-cosmetics-lp) .l-header__inner {
		padding-top: 10px;
		padding-bottom: 4px;
	}

	body:has(#imabi-top-page) .l-header__bar,
	body:has(#imabi-cosmetics-lp) .l-header__bar {
		padding-top: 6px;
		padding-bottom: 4px;
	}

	body:has(#imabi-top-page) .c-headLogo__name,
	body:has(#imabi-top-page) .c-siteTitle,
	body:has(#imabi-cosmetics-lp) .c-headLogo__name,
	body:has(#imabi-cosmetics-lp) .c-siteTitle {
		font-size: 16px;
	}

	body:has(#imabi-top-page) .imabi-hero-band {
		padding-top: 4px;
		padding-bottom: 8px;
	}
}

/* ==========================================================================
   今週の研究カード（トップ）: 2列×3行グリッド（モバイル1列）
   ※ .imabi-cards は従来CSS未定義（4ファイル実測済み）。本ブロックのみ追加。既存の .imabi-card* は不変。
   ========================================================================== */
.imabi-cards {
	display: grid;
	grid-template-columns: 1fr;   /* モバイル: 1列 */
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.imabi-cards > li {
	display: flex;
	margin: 0;
}

/* 再利用する __body は components.css で gap:0。本セクションのみ詳細度(0,3,0)で上書き */
.imabi-cards .imabi-card--visual .imabi-card__body {
	gap: 6px;
}

.imabi-cards .imabi-card__date {
	font-size: 12px;
	color: var(--imabi-text-secondary);
}

/* カード画像枠を eyecatch(1200x630=40/21) の比率に一致させ、object-fit:cover でも
   文字が見切れず全体表示する（共有 .imabi-card__visual の 4/3・16/10 を本セクションのみ上書き）。 */
.imabi-cards .imabi-card__visual {
	aspect-ratio: 40 / 21;
}

@media screen and (min-width: 768px) {
	.imabi-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));   /* PC: 2列 */
		gap: 18px;
	}
}