/**
 * IMABI components (CTA, boxes, cards, tables)
 * @see blogs/ima-bi/design/imabi_design_spec.md §8, §9
 */

/* ==========================================================================
   Shared CTA
   ========================================================================== */
.imabi-cta {
	box-sizing: border-box;
	padding: 20px var(--imabi-space-card);
	border-radius: var(--imabi-radius);
	background: var(--imabi-bg-surface);
	color: var(--imabi-text-primary);
}

.imabi-cta__label {
	margin: 0 0 6px;
	color: var(--imabi-accent);
	font-size: var(--imabi-fs-caption);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.imabi-cta__title {
	margin: 0 0 8px;
	color: var(--imabi-text-primary);
	font-size: var(--imabi-fs-cta-title);
	font-weight: 600;
	line-height: var(--imabi-lh-cta-title);
}

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

.imabi-cta__actions {
	display: flex;
	flex-direction: column;
	gap: var(--imabi-btn-gap);
}

/* Shared button styles */
.imabi-cta__btn,
.imabi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--imabi-btn-min-height);
	padding: 10px var(--imabi-btn-padding-x);
	border-radius: var(--imabi-radius);
	font-size: var(--imabi-fs-cta-btn);
	font-weight: 600;
	line-height: var(--imabi-lh-cta-btn);
	text-align: center;
	text-decoration: none;
	white-space: normal;
	word-break: break-word;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.imabi-cta__btn--primary,
.imabi-btn--primary {
	border: 1px solid var(--imabi-cta-bg);
	background: var(--imabi-cta-bg);
	color: var(--imabi-cta-text);
}

.imabi-cta__btn--primary:hover,
.imabi-btn--primary:hover {
	border-color: var(--imabi-cta-bg-hover);
	background: var(--imabi-cta-bg-hover);
	color: var(--imabi-cta-text);
}

.imabi-cta__btn--secondary,
.imabi-btn--secondary {
	border: 1px solid var(--imabi-cta-secondary-border);
	background: var(--imabi-cta-secondary-bg);
	color: var(--imabi-cta-secondary-text);
}

.imabi-cta__btn--secondary:hover,
.imabi-btn--secondary:hover {
	border-color: var(--imabi-cta-bg-hover);
	background: var(--imabi-bg-subtle);
	color: var(--imabi-cta-bg-hover);
}

/* Secondary CTA (second in wrapper) */
.imabi-cta[data-imabi-cta-role="secondary"],
.imabi-cta-wrap > .imabi-cta:not([data-imabi-cta-role="primary"]):not(:first-child) {
	padding: 16px;
	border: 1px dashed var(--imabi-border);
	background: var(--imabi-bg-base);
}

.imabi-cta[data-imabi-cta-role="secondary"] .imabi-cta__title,
.imabi-cta-wrap > .imabi-cta:not([data-imabi-cta-role="primary"]):not(:first-child) .imabi-cta__title {
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   LINE diagnosis CTA
   -------------------------------------------------------------------------- */
.imabi-cta--line {
	border: 1px solid var(--imabi-border);
	background: var(--imabi-bg-subtle);
}

.imabi-cta--line .imabi-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-bottom: 8px;
	border-radius: 6px;
	background: var(--imabi-line-green);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.imabi-cta--line .imabi-cta__btn--line {
	border-color: var(--imabi-line-green);
	background: var(--imabi-line-green);
	color: #fff;
}

.imabi-cta--line .imabi-cta__btn--line:hover {
	border-color: #05b34c;
	background: #05b34c;
	color: #fff;
}

/* --------------------------------------------------------------------------
   Checklist CTA
   -------------------------------------------------------------------------- */
.imabi-cta--checklist {
	border: 1px solid var(--imabi-border);
	background: var(--imabi-bg-surface);
	box-shadow: var(--imabi-shadow-card);
}

.imabi-cta--checklist .imabi-cta__icon-check {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-bottom: 8px;
	border: 2px solid var(--imabi-accent);
	border-radius: 4px;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Comparison / ranking post CTA
   -------------------------------------------------------------------------- */
.imabi-cta--comparison,
.imabi-cta--ranking {
	border: 1px solid var(--imabi-border);
	background: var(--imabi-bg-surface);
}

.imabi-cta--comparison .imabi-cta__previews,
.imabi-cta--ranking .imabi-cta__previews {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin: 0 0 16px;
}

@media (min-width: 480px) {
	.imabi-cta--comparison .imabi-cta__previews,
	.imabi-cta--ranking .imabi-cta__previews {
		grid-template-columns: repeat(3, 1fr);
	}
}

.imabi-cta__preview {
	aspect-ratio: var(--imabi-ratio-card);
	border-radius: 6px;
	background: var(--imabi-bg-muted);
	overflow: hidden;
}

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

/* --------------------------------------------------------------------------
   ASP secondary CTA (text link)
   -------------------------------------------------------------------------- */
.imabi-cta--asp {
	padding: 14px var(--imabi-space-card);
	border: none;
	border-left: 3px solid var(--imabi-border);
	border-radius: 0 var(--imabi-radius) var(--imabi-radius) 0;
	background: transparent;
}

.imabi-cta--asp .imabi-cta__title {
	margin-bottom: 4px;
	font-size: 15px;
	font-weight: 600;
}

.imabi-cta--asp .imabi-cta__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	color: var(--imabi-text-secondary);
	font-size: var(--imabi-fs-caption);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.imabi-cta--asp .imabi-cta__link:hover {
	color: var(--imabi-cta-secondary-text);
}

.imabi-cta--asp .imabi-cta__link::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Top page: subtle LINE teaser */
.imabi-cta--line-teaser {
	border: 1px solid var(--imabi-border);
	background: var(--imabi-bg-base);
}

.imabi-cta--line-teaser .imabi-cta__btn {
	align-self: flex-start;
}

/* ==========================================================================
   In-post boxes
   ========================================================================== */

/* Notice box */
.imabi-notice-box {
	margin: 1.5em 0;
	padding: 14px 16px 14px 14px;
	border-left: 4px solid var(--imabi-notice-border);
	border-radius: 0 var(--imabi-radius) var(--imabi-radius) 0;
	background: var(--imabi-notice-bg);
	color: var(--imabi-notice-text);
}

.imabi-notice-box__title {
	margin: 0 0 6px;
	font-size: var(--imabi-fs-caption);
	font-weight: 700;
	line-height: 1.4;
}

.imabi-notice-box__body {
	margin: 0;
	font-size: var(--imabi-fs-caption);
	line-height: 1.65;
}

.imabi-notice-box__body p:last-child {
	margin-bottom: 0;
}

/* Point box */
.imabi-point-box {
	margin: 1.5em 0;
	padding: var(--imabi-space-card);
	border: 1px solid var(--imabi-border);
	border-radius: var(--imabi-radius);
	background: var(--imabi-point-bg);
}

.imabi-point-box__title {
	margin: 0 0 10px;
	color: var(--imabi-cta-secondary-text);
	font-size: var(--imabi-fs-caption);
	font-weight: 700;
	line-height: 1.4;
}

.imabi-point-box__body {
	margin: 0;
	font-size: var(--imabi-fs-body);
	line-height: var(--imabi-lh-body);
}

.imabi-point-box__body ul {
	margin: 0;
	padding-left: 1.2em;
}

/* PR / disclosure notice */
.imabi-disclosure-box,
.imabi-pr-box {
	margin: 1.5em 0;
	padding: 12px 14px;
	border: 1px solid var(--imabi-pr-border);
	border-radius: var(--imabi-radius);
	background: var(--imabi-pr-bg);
	color: var(--imabi-text-muted);
	font-size: var(--imabi-fs-disclosure);
	line-height: 1.7;
}

.imabi-disclosure-box p,
.imabi-pr-box p {
	margin: 0;
}

/* ==========================================================================
   Comparison table
   ========================================================================== */
.imabi-compare-table-wrap {
	margin: 1.5em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.imabi-compare-table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: var(--imabi-fs-caption);
	line-height: 1.5;
}

.imabi-compare-table th,
.imabi-compare-table td {
	padding: 10px 12px;
	border: 1px solid var(--imabi-border);
	text-align: left;
	vertical-align: top;
}

.imabi-compare-table thead th {
	background: var(--imabi-bg-muted);
	color: var(--imabi-text-primary);
	font-weight: 600;
}

.imabi-compare-table tbody tr:nth-child(odd) {
	background: var(--imabi-bg-subtle);
}

.imabi-compare-table tbody tr:nth-child(even) {
	background: var(--imabi-bg-surface);
}

/* Mobile card fallback when data-layout="cards" */
.imabi-compare-cards {
	display: grid;
	gap: 12px;
	margin: 1.5em 0;
}

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

.imabi-compare-cards__label {
	margin: 0 0 8px;
	color: var(--imabi-text-muted);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.imabi-compare-cards__name {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
}

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

/* ==========================================================================
   Ranking cards
   ========================================================================== */
.imabi-rank-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 1.5em 0;
	padding: 0;
	list-style: none;
}

.imabi-rank-card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: start;
	margin: 0;
	padding: var(--imabi-space-card);
	border: 1px solid var(--imabi-border);
	border-radius: var(--imabi-radius);
	background: var(--imabi-bg-surface);
	box-shadow: var(--imabi-shadow-card);
}

.imabi-rank-card__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border-radius: 6px;
	background: var(--imabi-bg-muted);
	color: var(--imabi-text-secondary);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.imabi-rank-card--rank-1 .imabi-rank-card__badge {
	background: var(--imabi-accent);
	color: #fff;
}

.imabi-rank-card__body {
	min-width: 0;
}

.imabi-rank-card__title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
}

.imabi-rank-card__title a {
	color: inherit;
	text-decoration: none;
}

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

.imabi-rank-card__reason {
	margin: 0 0 8px;
	color: var(--imabi-text-secondary);
	font-size: var(--imabi-fs-caption);
	line-height: 1.55;
}

.imabi-rank-card__link {
	font-size: var(--imabi-fs-caption);
	font-weight: 600;
}

/* ==========================================================================
   Product review cards
   ========================================================================== */
.imabi-product-card {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 14px;
	margin: 1.5em 0;
	padding: var(--imabi-space-card);
	border: 1px solid var(--imabi-border);
	border-radius: var(--imabi-radius);
	background: var(--imabi-bg-surface);
	box-shadow: var(--imabi-shadow-card);
}

@media (min-width: 480px) {
	.imabi-product-card {
		grid-template-columns: 120px 1fr;
	}
}

.imabi-product-card__thumb {
	aspect-ratio: var(--imabi-ratio-product);
	margin: 0;
	border-radius: 6px;
	background: var(--imabi-bg-subtle);
	overflow: hidden;
}

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

.imabi-product-card__name {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
}

.imabi-product-card__features {
	margin: 0 0 10px;
	padding-left: 1.1em;
	color: var(--imabi-text-secondary);
	font-size: var(--imabi-fs-caption);
	line-height: 1.55;
}

.imabi-product-card__features li + li {
	margin-top: 4px;
}

.imabi-product-card__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--imabi-cta-secondary-text);
	font-size: var(--imabi-fs-caption);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

.imabi-product-card__pr {
	display: inline-block;
	margin-top: 8px;
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--imabi-pr-bg);
	color: var(--imabi-text-muted);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
}

/* ==========================================================================
   Related post cards (in content)
   ========================================================================== */
.imabi-related-card {
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: 12px;
	margin: 1.5em 0;
	border: 1px solid var(--imabi-border);
	border-radius: var(--imabi-radius);
	background: var(--imabi-bg-surface);
	overflow: hidden;
}

.imabi-related-card__link {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
	color: inherit;
	text-decoration: none;
}

@supports not (grid-template-columns: subgrid) {
	.imabi-related-card__link {
		display: grid;
		grid-template-columns: 112px 1fr;
		gap: 12px;
	}
}

.imabi-related-card__thumb {
	aspect-ratio: var(--imabi-ratio-card);
	margin: 0;
	background: var(--imabi-bg-subtle);
}

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

.imabi-related-card__body {
	padding: 12px 12px 12px 0;
}

.imabi-related-card__label {
	margin: 0 0 4px;
	color: var(--imabi-accent);
	font-size: 11px;
	font-weight: 600;
}

.imabi-related-card__title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

.imabi-related-card__desc {
	margin: 0;
	color: var(--imabi-text-muted);
	font-size: 12px;
	line-height: 1.5;
}

.imabi-related-card:hover {
	border-color: var(--imabi-accent);
}

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

/* Limit visible related cards to two in post body */
.post_content .imabi-related-card:nth-of-type(n + 3) {
	display: none;
}

/* ==========================================================================
   Top concern cards — image + text body (visual)
   vfinal2: 画像内小型アイキャッチ（配置・サイズ最終調整）、下部は補助文のみ
   @see blogs/ima-bi/assets/images/concerns/_build-concern-eyecatch-vfinal2.py
   ========================================================================== */
.imabi-card.imabi-card--visual {
	gap: 0;
	min-height: 0;
	padding: 0;
	border: 1px solid #e6e2de;
	border-radius: 10px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 2px 6px rgba(80, 70, 60, 0.08);
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

a.imabi-card.imabi-card--visual:hover {
	border-color: rgba(168, 140, 120, 0.55);
	box-shadow: 0 6px 20px rgba(80, 70, 60, 0.14);
	transform: translateY(-3px);
}

a.imabi-card.imabi-card--visual:focus-visible {
	outline: 2px solid rgba(139, 158, 139, 0.85);
	outline-offset: 2px;
}

.imabi-card--visual .imabi-card__icon {
	display: none;
}

.imabi-card__visual {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #f3f0ed;
}

.imabi-card__visual picture {
	display: block;
	width: 100%;
	height: 100%;
}

.imabi-card__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* v4: 情報面・主コピーは画像に焼き込み。全体表示 */
	object-position: center center;
}

.imabi-card__visual--pores img,
.imabi-card__visual--dryness img,
.imabi-card__visual--sensitive img,
.imabi-card__visual--cosmetics img,
.imabi-card__visual--haircare img,
.imabi-card__visual--trends img {
	object-position: center center;
}

.imabi-card--visual .imabi-card__body {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	min-height: 0;
	padding: 10px 14px 12px;
	background: #ffffff;
}

/* v4: 主コピーは画像内。下部は補助文のみ */
.imabi-card--visual .imabi-card__text {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--imabi-color-text, #4a4845);
	letter-spacing: 0.02em;
}

.imabi-card--visual.imabi-card--soon {
	cursor: default;
	pointer-events: none;
}

.imabi-card--visual.imabi-card--soon .imabi-card__visual {
	opacity: 0.92;
}

.imabi-card--visual.imabi-card--soon .imabi-card__visual img {
	filter: saturate(0.85);
}

.imabi-card--visual.imabi-card--soon .imabi-card__body {
	background: #fafaf8;
}

.imabi-card--visual .imabi-card__badge {
	order: -1;
	margin: 0 0 6px;
}

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

	.imabi-card--visual .imabi-card__body {
		padding: 11px 16px 13px;
	}

	.imabi-card--visual .imabi-card__text {
		font-size: 14px;
	}
}

.imabi-concern-hub .imabi-card.imabi-card--visual {
	border-color: #e8e4e0;
	box-shadow: 0 2px 8px rgba(80, 70, 60, 0.07);
}

.imabi-concern-hub a.imabi-card.imabi-card--visual:hover {
	border-color: rgba(168, 140, 120, 0.58);
	box-shadow: 0 8px 22px rgba(80, 70, 60, 0.13);
}

.imabi-concern-hub .imabi-card--visual.imabi-card--soon {
	box-shadow: 0 1px 4px rgba(80, 70, 60, 0.04);
}

/* 文字入り完成画像（vfinal3）— 4:3・contain（右端余白は画像側でトリム済み） */
.imabi-concern-hub .imabi-card__visual {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #ffffff;
}

.imabi-concern-hub .imabi-card__visual picture {
	display: block;
	width: 100%;
	height: 100%;
}

.imabi-concern-hub .imabi-card__visual img,
.imabi-concern-hub .imabi-card__visual--pores img,
.imabi-concern-hub .imabi-card__visual--dryness img,
.imabi-concern-hub .imabi-card__visual--sensitive img,
.imabi-concern-hub .imabi-card__visual--cosmetics img,
.imabi-concern-hub .imabi-card__visual--haircare img,
.imabi-concern-hub .imabi-card__visual--trends img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: center center;
}

@media screen and (min-width: 768px) {
	.imabi-concern-hub .imabi-card__visual {
		aspect-ratio: 4 / 3;
	}
}

@media screen and (max-width: 767px) {
	.imabi-concern-hub .imabi-card__visual {
		aspect-ratio: 4 / 3;
	}

	body:has(#imabi-top-page) .imabi-concern-hub .imabi-concern-hub__item {
		width: 100%;
		min-width: 0;
	}

	body:has(#imabi-top-page) .imabi-concern-hub .imabi-card.imabi-card--visual,
	body:has(#imabi-top-page) .imabi-concern-hub a.imabi-card.imabi-card--visual {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}

	.imabi-card--visual .imabi-card__body {
		padding: 10px 12px 12px;
	}

	.imabi-card--visual .imabi-card__text {
		font-size: 13px;
		line-height: 1.55;
	}
}

@media screen and (min-width: 1024px) {
	#imabi-top-concerns .imabi-card--visual .imabi-card__body {
		padding: 12px 16px 14px;
	}

	#imabi-top-concerns .imabi-card--visual .imabi-card__text {
		font-size: 14px;
	}
}

/* ==========================================================================
   Editor pickup cards (top — secondary CTR band)
   @see blogs/ima-bi/design/top-editor-pickup-section-notes.md
   ========================================================================== */
.imabi-pickup-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--imabi-border);
	border-radius: var(--imabi-radius);
	background: #fff;
	box-shadow: 0 1px 3px rgba(42, 38, 34, 0.06);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.imabi-pickup-card:hover {
	border-color: rgba(122, 140, 118, 0.35);
	box-shadow: 0 4px 12px rgba(42, 38, 34, 0.08);
	transform: translateY(-1px);
}

.imabi-pickup-card:focus-visible {
	outline: 2px solid var(--imabi-accent);
	outline-offset: 2px;
}

.imabi-pickup-card__image {
	position: relative;
	flex-shrink: 0;
	aspect-ratio: 16 / 10;
	min-height: 0;
	margin: 0;
	background: var(--imabi-bg-subtle);
	overflow: hidden;
}

.imabi-pickup-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.imabi-pickup-card__image-placeholder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 100%;
	color: var(--imabi-text-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.3;
	background:
		linear-gradient(180deg, rgba(250, 250, 248, 0) 0%, rgba(250, 250, 248, 0.35) 100%),
		linear-gradient(135deg, #f3f0ed 0%, #ebe6e0 100%);
}

.imabi-pickup-card__image-placeholder::before {
	content: "";
	position: absolute;
	top: 20%;
	right: 14%;
	width: 20%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
}

.imabi-pickup-card__image--skincare .imabi-pickup-card__image-placeholder {
	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-pickup-card__image--pores .imabi-pickup-card__image-placeholder {
	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-pickup-card__image--cosmetics .imabi-pickup-card__image-placeholder {
	background:
		linear-gradient(180deg, rgba(250, 250, 248, 0) 0%, rgba(245, 243, 240, 0.45) 100%),
		linear-gradient(135deg, #f5f2ef 0%, #e8e4de 100%);
}

.imabi-pickup-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0;
	min-height: 0;
	padding: 12px 14px 14px;
}

.imabi-pickup-card__label {
	display: inline-block;
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
	flex-shrink: 0;
	margin: 0 0 6px;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--imabi-bg-muted);
	color: var(--imabi-text-secondary);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.35;
}

.imabi-pickup-card__title {
	box-sizing: border-box;
	flex-shrink: 0;
	margin: 0;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--imabi-border);
	color: var(--imabi-text-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
}

.imabi-pickup-card__text {
	flex-shrink: 0;
	margin: 8px 0 0;
	color: var(--imabi-text-secondary);
	font-size: 13px;
	line-height: 1.5;
}

@media screen and (min-width: 768px) {
	.imabi-pickup-card__body {
		padding: 14px 16px 16px;
	}

	.imabi-pickup-card__title {
		min-height: 3.2em;
		font-size: 15px;
	}

	.imabi-pickup-card__text {
		margin-top: auto;
		padding-top: 8px;
	}
}

@media screen and (min-width: 1024px) {
	.imabi-pickup-card__title {
		font-size: 16px;
	}

	.imabi-pickup-card__text {
		font-size: 13px;
	}
}

/* 編集部おすすめ — 文字入り完成画像（カード全体デザイン）を全体表示 */
.imabi-editor-pickup .imabi-editor-pickup__item {
	background: transparent;
	padding: 0;
	border: none;
}

.imabi-editor-pickup .imabi-pickup-card,
body:has(#imabi-top-page) .imabi-editor-pickup .imabi-pickup-card,
.imabi-editor-pickup a.imabi-pickup-card {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
	line-height: 0;
}

.imabi-editor-pickup .imabi-pickup-card:hover,
.imabi-editor-pickup a.imabi-pickup-card:hover {
	border: none;
	background: transparent;
	box-shadow: none;
	transform: none;
}

.imabi-editor-pickup .imabi-pickup-card__image,
.imabi-editor-pickup .imabi-pickup-card__image--skincare,
.imabi-editor-pickup .imabi-pickup-card__image--pores,
.imabi-editor-pickup .imabi-pickup-card__image--cosmetics {
	position: static;
	flex-shrink: 0;
	aspect-ratio: auto;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
	line-height: 0;
}

.imabi-editor-pickup .imabi-pickup-card__image picture {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	line-height: 0;
}

.imabi-editor-pickup .imabi-pickup-card__image img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	object-fit: contain;
	object-position: center center;
	vertical-align: top;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.imabi-editor-pickup .imabi-pickup-card:hover .imabi-pickup-card__image img {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(42, 38, 34, 0.08);
}

/* 画像内にラベル・タイトル・補助文あり — 本文ブロックは非表示（aria-label で代替） */
.imabi-editor-pickup .imabi-pickup-card__body {
	display: none;
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------------------
   Latest posts card — text-first, subdued tertiary CTA
   @see blogs/ima-bi/design/top-latest-posts-section-notes.md
   -------------------------------------------------------------------------- */
.imabi-latest-card {
	box-sizing: border-box;
	height: 100%;
	margin: 0;
	border: 1px solid var(--imabi-border);
	border-radius: var(--imabi-radius);
	background: var(--imabi-bg-surface);
	box-shadow: 0 1px 3px rgba(42, 38, 34, 0.04);
	overflow: hidden;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.imabi-latest-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.imabi-latest-card__thumb {
	position: relative;
	flex-shrink: 0;
	aspect-ratio: 16 / 9;
	margin: 0;
	background: var(--imabi-bg-subtle);
	overflow: hidden;
}

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

.imabi-latest-card--no-thumb .imabi-latest-card__thumb {
	display: none;
}

.imabi-latest-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding: 14px 14px 16px;
	min-width: 0;
}

.imabi-latest-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--imabi-text-muted);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.imabi-latest-card__cat {
	color: var(--imabi-accent);
}

.imabi-latest-card__date {
	color: var(--imabi-text-muted);
	font-weight: 500;
}

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

.imabi-latest-card__text {
	margin: 0;
	color: var(--imabi-text-secondary);
	font-size: 13px;
	line-height: 1.55;
}

.imabi-latest-card__link:hover .imabi-latest-card__title,
.imabi-latest-card__link:focus-visible .imabi-latest-card__title {
	color: var(--imabi-cta-secondary-text);
}

.imabi-latest-card__link:hover,
.imabi-latest-card__link:focus-visible {
	outline: none;
}

.imabi-latest-card:has(.imabi-latest-card__link:hover),
.imabi-latest-card:has(.imabi-latest-card__link:focus-visible) {
	border-color: rgba(42, 38, 34, 0.12);
	box-shadow: 0 3px 10px rgba(42, 38, 34, 0.06);
	transform: translateY(-1px);
}

.imabi-latest-card__link:focus-visible {
	box-shadow: inset 0 0 0 2px var(--imabi-cta-secondary-border);
	border-radius: calc(var(--imabi-radius) - 1px);
}

@media screen and (max-width: 767px) {
	.imabi-latest-card__body {
		padding: 12px 12px 14px;
	}

	.imabi-latest-card__title {
		font-size: 14px;
	}

	.imabi-latest-card__text {
		font-size: 12px;
		line-height: 1.5;
	}
}

@media (prefers-reduced-motion: reduce) {
	.imabi-latest-card,
	.imabi-latest-card:has(.imabi-latest-card__link:hover),
	.imabi-latest-card:has(.imabi-latest-card__link:focus-visible) {
		transition: none;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Cosmetics selection LP — cards, lists, ASP placeholder v2
   @see blogs/ima-bi/design/cosmetics-selection-lp-design.md
   -------------------------------------------------------------------------- */
.imabi-cosmetics-lp__card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--imabi-border, #e5e0db);
	border-radius: var(--imabi-radius, 8px);
	background: var(--imabi-bg-surface, #ffffff);
	box-shadow: 0 1px 3px rgba(42, 38, 34, 0.04);
}

/* カード上部ピル — コスメ選びLP（#imabi-cosmetics-lp）限定。トップ等の他カードへは影響しない */
body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card-label,
body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card-pill,
body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__related-cat,
body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__placeholder-label,
body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__asp .imabi-cta__label {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	padding: 6px 12px;
	border-radius: 999px;
	background: #eee9e4;
	color: #5f6a63;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card-pill {
	order: -1;
	margin: 0 0 10px;
}

/* カード画像 — コスメ選びLP（#imabi-cosmetics-lp）限定・文字入り画像は contain */
body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card-picture {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
}

body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card-image {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	object-fit: contain;
	object-position: center center;
	vertical-align: top;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card--visual {
	position: relative;
}

/* 画像内テキストあり — ピル・タイトル・説明は非表示（aria-label / alt で代替） */
body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card--visual .imabi-cosmetics-lp__card-pill,
body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card--visual .imabi-cosmetics-lp__card-title,
body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card--visual > .imabi-cosmetics-lp__card-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card--visual.imabi-cosmetics-lp__card--link {
	display: block;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card--visual.imabi-cosmetics-lp__card--link:hover,
body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card--visual.imabi-cosmetics-lp__card--link:focus-visible {
	border-color: transparent;
	box-shadow: none;
	transform: none;
}

body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card--visual.imabi-cosmetics-lp__card--link:hover .imabi-cosmetics-lp__card-image,
body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card--visual.imabi-cosmetics-lp__card--link:focus-visible .imabi-cosmetics-lp__card-image {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(42, 38, 34, 0.08);
}

body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card--visual:not(.imabi-cosmetics-lp__card--link) {
	padding: 12px 12px 14px;
	overflow: hidden;
}

body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card--visual:not(.imabi-cosmetics-lp__card--link) .imabi-cosmetics-lp__card-picture {
	margin: -12px -12px 12px;
	width: calc(100% + 24px);
	max-width: none;
}

body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card--visual.imabi-cosmetics-lp__card--compact {
	padding: 10px 10px 12px;
}

body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card--visual.imabi-cosmetics-lp__card--compact .imabi-cosmetics-lp__card-picture {
	margin: -10px -10px 10px;
	width: calc(100% + 20px);
	max-width: none;
}

body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card--visual .imabi-cosmetics-lp__card-note,
body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card--visual .imabi-cosmetics-lp__card-link {
	position: relative;
}

@media screen and (min-width: 768px) {
	body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card-image {
		border-radius: 14px;
	}
}

body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__placeholder-label {
	margin: 0 auto 10px;
	letter-spacing: 0.04em;
	text-transform: none;
}

.imabi-cosmetics-lp__card--link {
	display: flex;
	color: inherit;
	text-decoration: none;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.imabi-cosmetics-lp__card--link:hover,
.imabi-cosmetics-lp__card--link:focus-visible {
	border-color: rgba(42, 38, 34, 0.14);
	box-shadow: 0 4px 12px rgba(42, 38, 34, 0.06);
	transform: translateY(-1px);
	outline: none;
}

.imabi-cosmetics-lp__card--compact {
	padding: 14px 16px;
}

.imabi-cosmetics-lp__card-title {
	margin: 0 0 8px;
	color: var(--imabi-text-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
}

.imabi-cosmetics-lp__card--link:hover .imabi-cosmetics-lp__card-title,
.imabi-cosmetics-lp__card--link:focus-visible .imabi-cosmetics-lp__card-title {
	color: var(--imabi-cta-secondary-text, #5c735a);
}

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

.imabi-cosmetics-lp__card-note {
	margin: 10px 0 0;
	padding-top: 8px;
	border-top: 1px solid var(--imabi-border, #e5e0db);
	color: var(--imabi-text-muted);
	font-size: 12px;
	line-height: 1.5;
}

.imabi-cosmetics-lp__card-link {
	display: inline-block;
	margin-top: auto;
	padding-top: 10px;
	color: var(--imabi-cta-secondary-text, #5c735a);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.imabi-cosmetics-lp__card-link:hover {
	color: var(--imabi-cta-bg-hover, #4a5f48);
}

.imabi-cosmetics-lp__bullet-list {
	margin: 0;
	padding-left: 1.2em;
	color: var(--imabi-text-secondary);
	font-size: 14px;
	line-height: 1.65;
}

.imabi-cosmetics-lp__bullet-list li + li {
	margin-top: 8px;
}

.imabi-cosmetics-lp__placeholder-box {
	padding: 20px 16px;
	border: 1px dashed var(--imabi-border);
	border-radius: var(--imabi-radius);
	background: var(--imabi-bg-surface);
	text-align: center;
}

.imabi-cosmetics-lp__placeholder-label {
	margin: 0 0 8px;
}

.imabi-cosmetics-lp__placeholder-text {
	margin: 0 0 16px;
	color: var(--imabi-text-secondary);
	font-size: 13px;
	line-height: 1.55;
}

.imabi-cosmetics-lp__asp {
	margin: 0;
}

.imabi-cosmetics-lp__asp-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.imabi-cosmetics-lp__asp-soon {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

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

.imabi-cosmetics-lp__related-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	border: 1px solid var(--imabi-border);
	border-radius: var(--imabi-radius);
	background: var(--imabi-bg-surface);
	color: inherit;
	text-decoration: none;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.imabi-cosmetics-lp__related-link:hover,
.imabi-cosmetics-lp__related-link:focus-visible {
	border-color: rgba(42, 38, 34, 0.14);
	box-shadow: 0 2px 8px rgba(42, 38, 34, 0.05);
	outline: none;
}

@media screen and (max-width: 767px) {
	body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card-label,
	body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__card-pill,
	body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__related-cat,
	body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__placeholder-label,
	body:has(#imabi-cosmetics-lp) .imabi-cosmetics-lp__asp .imabi-cta__label {
		padding: 5px 10px;
		font-size: 13px;
	}
}

.imabi-cosmetics-lp__related-title {
	color: var(--imabi-text-primary);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

@media screen and (min-width: 768px) {
	.imabi-cosmetics-lp__related-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.imabi-cosmetics-lp__asp-actions {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.imabi-cosmetics-lp__card--link,
	.imabi-cosmetics-lp__related-link {
		transition: none;
		transform: none;
	}
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.imabi-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.imabi-u-mt-0 { margin-top: 0 !important; }
.imabi-u-mb-0 { margin-bottom: 0 !important; }