/**
 * コーポレート記事共通：画像タイプ別レイアウト
 *
 * 種類（HTMLで必ず明示）:
 *   .ecolab-article-section   セクション用（h2/h3直後のリード画像）
 *   .ecolab-article-inline    文章途中の単体画像＋キャプション
 *   .ecolab-article-compare   比較・素材例グリッド（キャプション付き）
 *   .ecolab-article-gallery   サンプル／作例ギャラリー
 *   .ecolab-article-products  商品一覧（正方形・リンク）
 *   .ecolab-article-related   あわせて読みたい
 *   .ecolab-article-banner    CTAバナー
 *   .ecolab-article-more      EC「もっと見る」ボタン
 *   .ecolab-article-ec-card   締め：販促メッセ誘導カード（全記事共通）
 *
 * 共通パーツ: .ecolab-article-media__item / __frame / __caption
 */

/* ========== 共通 ========== */
.ecolab-article-section,
.ecolab-article-inline,
.ecolab-article-compare,
.ecolab-article-gallery,
.ecolab-article-products,
.ecolab-article-related,
.ecolab-article-banner,
.ecolab-article-more,
.ecolab-article-ec-card {
	box-sizing: border-box;
}

.ecolab-article-section *,
.ecolab-article-inline *,
.ecolab-article-compare *,
.ecolab-article-gallery *,
.ecolab-article-products *,
.ecolab-article-related *,
.ecolab-article-banner *,
.ecolab-article-more *,
.ecolab-article-ec-card * {
	box-sizing: border-box;
}

.ecolab-article-section img,
.ecolab-article-inline img,
.ecolab-article-compare img,
.ecolab-article-gallery img,
.ecolab-article-products img,
.ecolab-article-related img,
.ecolab-article-banner img,
.ecolab-article-ec-card img {
	display: block;
	margin: 0;
	border: 0;
	vertical-align: middle;
}

/* 1:1 トリミング枠（アスペクト比は変えず cover で拡大寄せ） */
.ecolab-article-media__frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f3f3f3;
}

.ecolab-article-media__frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.ecolab-article-media__caption {
	display: block;
	margin: 0;
	padding: 0.55em 0.15em 0;
	font-size: 0.875em;
	line-height: 1.5;
	color: #666;
	text-align: center;
}

/* ========== 1. セクション用 ========== */
/* h2/h3 直後。本文幅いっぱい・横長固定で揃える */
.ecolab-article-section {
	margin: 0.35em 0 1.5em;
	padding: 0;
	overflow: hidden;
	background: #f3f3f3;
}

.ecolab-article-section img {
	width: 100%;
	max-width: none;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
}

.ecolab-article-section figcaption,
.ecolab-article-section .ecolab-article-media__caption {
	padding: 0.6em 0.75em 0.75em;
	background: #fafafa;
	text-align: left;
}

/* ========== 2. 文章途中 ========== */
/* 中央寄せ・幅を抑えて読み流れを邪魔しない */
.ecolab-article-inline {
	display: block;
	width: min(100%, 560px);
	margin: 1.5em auto;
	padding: 0;
}

.ecolab-article-inline img {
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
	background: #fafafa;
	border: 1px solid #ececec;
}

.ecolab-article-inline figcaption,
.ecolab-article-inline .ecolab-article-media__caption {
	text-align: center;
}

/* 互換: 旧 .ecolab-article-media__figure */
.ecolab-article-media__figure {
	display: block;
	width: min(100%, 560px);
	margin: 1.5em auto;
	padding: 0;
}

.ecolab-article-media__figure img {
	width: 100%;
	border: 1px solid #ececec;
	background: #fafafa;
}

.ecolab-article-media__figure figcaption {
	margin-top: 0.45em;
	font-size: 0.875em;
	line-height: 1.5;
	color: #666;
	text-align: center;
}

/* ========== 3. 比較・素材例 ========== */
.ecolab-article-compare {
	display: grid;
	gap: 0.85rem;
	margin: 1.25em 0 1.75em;
	padding: 0;
	list-style: none;
}

.ecolab-article-compare--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ecolab-article-compare--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ecolab-article-compare .ecolab-article-media__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	min-width: 0;
	background: #fff;
	border: 1px solid #e8e8e8;
	overflow: hidden;
}

.ecolab-article-compare .ecolab-article-media__caption {
	padding: 0.55em 0.5em 0.7em;
	font-weight: 600;
	color: #333;
}

/* ========== 4. サンプル／作例ギャラリー ========== */
.ecolab-article-gallery {
	display: grid;
	gap: 0.55rem;
	margin: 1em 0 1.5em;
	padding: 0;
	list-style: none;
}

.ecolab-article-gallery--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ecolab-article-gallery--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ecolab-article-gallery .ecolab-article-media__item {
	display: block;
	margin: 0;
	min-width: 0;
	overflow: hidden;
	background: #111;
	border: 0;
}

.ecolab-article-gallery .ecolab-article-media__frame {
	background: #111;
}

/* ========== 5. 商品一覧 ========== */
.ecolab-article-products {
	display: grid;
	gap: 1rem;
	margin: 1.25em 0 0.75em;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ecolab-article-products .ecolab-article-media__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	min-width: 0;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid #e5e5e5;
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.ecolab-article-products .ecolab-article-media__item:hover {
	border-color: #b0b0b0;
}

.ecolab-article-products .ecolab-article-media__frame {
	background: #fff;
}

.ecolab-article-products .ecolab-article-media__item img.is-fallback {
	object-fit: cover;
	background: #f0f0f0;
}

.ecolab-article-products .ecolab-article-media__caption {
	padding: 0.5em 0.65em 0.15em;
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.4;
	color: #1a5f8a;
	text-align: left;
}

.ecolab-article-products .ecolab-article-media__code {
	display: block;
	padding: 0 0.65em;
	font-size: 0.75em;
	font-weight: 400;
	line-height: 1.35;
	color: #666;
	text-align: left;
}

.ecolab-article-products .ecolab-article-media__code[hidden],
.ecolab-article-products .ecolab-article-media__price[hidden] {
	display: none;
}

.ecolab-article-products .ecolab-article-media__price {
	display: block;
	padding: 0.1em 0.65em 0.75em;
	font-size: 0.8125em;
	font-weight: 600;
	line-height: 1.35;
	color: #333;
	text-align: left;
}

/* 品番だけ出て価格が無いとき下余白を確保 */
.ecolab-article-products .ecolab-article-media__code:not([hidden]):last-child {
	padding-bottom: 0.75em;
}

/* ========== 6. あわせて読みたい ========== */
.ecolab-article-related {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	margin: 1.5em 0;
	padding: 0.85rem 1rem;
	border: 1px solid #e5e5e5;
	border-left: 3px solid #c45c26;
	background: #fafafa;
	text-decoration: none;
	color: inherit;
}

.ecolab-article-related:hover {
	border-color: #c8c8c8;
	border-left-color: #c45c26;
	background: #f5f5f5;
}

.ecolab-article-related img {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	background: #eee;
}

.ecolab-article-related__label {
	display: block;
	margin-bottom: 0.2em;
	font-size: 0.75em;
	letter-spacing: 0.04em;
	color: #888;
}

.ecolab-article-related__title {
	display: block;
	font-weight: 700;
	line-height: 1.45;
	color: #1a5f8a;
}

.ecolab-article-related__excerpt {
	display: block;
	margin-top: 0.35em;
	font-size: 0.875em;
	line-height: 1.55;
	color: #555;
}

/* ========== 7. CTAバナー ========== */
.ecolab-article-banner {
	display: block;
	margin: 2em 0 1.25em;
	line-height: 0;
}

.ecolab-article-banner img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* ========== 8. EC「もっと見る」ボタン ========== */
.ecolab-article-more {
	margin: 0.25em 0 1.75em;
	text-align: center;
}

.ecolab-article-more__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	min-width: min(100%, 280px);
	padding: 0.7em 1.35em;
	border-radius: 999px;
	border: 1px solid #1a5f8a;
	background: #1a5f8a;
	color: #fff !important;
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none !important;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.ecolab-article-more__btn:hover {
	background: #154d70;
	border-color: #154d70;
	color: #fff !important;
	transform: translateY(-1px);
}

.ecolab-article-more__btn::after {
	content: "→";
	display: inline-block;
	font-weight: 700;
	transition: transform 0.15s ease;
}

.ecolab-article-more__btn:hover::after {
	transform: translateX(3px);
}

/* ========== 9. 締め：販促メッセ誘導カード ========== */
.ecolab-article-ec-card {
	margin: 2em 0 1.25em;
	border: 1px solid #e5e5e5;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.ecolab-article-ec-card__link {
	display: block;
	text-decoration: none !important;
	color: inherit;
}

.ecolab-article-ec-card__link:hover .ecolab-article-ec-card__cta {
	background: #c4000f;
}

.ecolab-article-ec-card__logo {
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1400 / 400;
	object-fit: cover;
	object-position: center;
	background: #f3f3f3;
}

.ecolab-article-ec-card__body {
	padding: 1.15em 1.25em 1.35em;
	border-top: 3px solid #e60012;
}

.ecolab-article-ec-card__name {
	margin: 0 0 0.25em;
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.4;
	color: #222;
}

.ecolab-article-ec-card__tag {
	margin: 0 0 0.75em;
	font-size: 0.9em;
	font-weight: 700;
	color: #e60012;
}

.ecolab-article-ec-card__desc {
	margin: 0 0 1em;
	font-size: 0.92em;
	line-height: 1.7;
	color: #444;
}

.ecolab-article-ec-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.55em 1.1em;
	border-radius: 999px;
	background: #e60012;
	color: #fff;
	font-size: 0.9em;
	font-weight: 700;
	line-height: 1.3;
	transition: background 0.15s ease;
}

.ecolab-article-ec-card__cta::after {
	content: "→";
}

/* ========== レスポンシブ ========== */
@media (max-width: 782px) {
	.ecolab-article-compare--cols-3,
	.ecolab-article-gallery--cols-4,
	.ecolab-article-gallery--cols-3,
	.ecolab-article-products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ecolab-article-related {
		grid-template-columns: 110px minmax(0, 1fr);
	}

	.ecolab-article-section img {
		aspect-ratio: 3 / 2;
	}
}

@media (max-width: 480px) {
	.ecolab-article-compare--cols-2,
	.ecolab-article-compare--cols-3,
	.ecolab-article-gallery--cols-3,
	.ecolab-article-gallery--cols-4,
	.ecolab-article-products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ecolab-article-related {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.ecolab-article-inline,
	.ecolab-article-media__figure {
		width: 100%;
	}

	.ecolab-article-more__btn {
		width: 100%;
	}
}