/**
 * コーポレート TOP 本文（.ecolab-home）
 * 範囲: 固定ページ top-page のカスタムHTML
 * トーン: article-media.css に合わせる（紺CTA / 薄いボーダー / 角丸ピル）
 */

/* TOP / 追従レール付きページは記事幅900pxだと窮屈なので、コンテナ幅に揃える（SWELL: --article_size）
 * 注: SWELL は body_class を #body_wrap に載せる（body 要素ではない） */
#body_wrap.home,
#body_wrap.ecolab-shop-rail {
	--article_size: var(--container_size, 1200px);
}

.ecolab-home {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0.5em 0 3em;
	color: #333;
	line-height: 1.75;
}

.ecolab-home *,
.ecolab-home *::before,
.ecolab-home *::after {
	box-sizing: border-box;
}

.ecolab-home-section {
	margin: 0 0 4.5em;
	padding: 0;
}

.ecolab-home-section:last-child,
.ecolab-home-main > .ecolab-home-section:last-child {
	margin-bottom: 2em;
}

.ecolab-home-rail {
	margin: 0 0 4.5em;
	min-width: 0;
}

.ecolab-home-main {
	min-width: 0;
}

/*
 * デスクトップ: ショッピングサイトを右レールで追従
 * モバイル: お知らせ → サイト → 本文 の縦積み
 */
@media (min-width: 1000px) {
	.ecolab-home {
		grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
		grid-template-areas:
			"news rail"
			"main rail";
		column-gap: 2.5em;
		align-items: start;
	}

	.ecolab-home-section--news {
		grid-area: news;
		margin-bottom: 3.5em;
	}

	.ecolab-home-rail {
		/* SWELL 追従ヘッダー高さ（--swl-headerH。未設定時は 64px）を避ける */
		--ecolab-home-rail-top: calc(var(--swl-headerH, 64px) + 0.75rem);
		grid-area: rail;
		position: sticky;
		top: var(--ecolab-home-rail-top);
		margin: 0;
		padding: 0;
		align-self: start;
		max-height: calc(100vh - var(--ecolab-home-rail-top) - 1rem);
		overflow: auto;
	}

	.ecolab-home-main {
		grid-area: main;
	}

	.ecolab-home-rail > h2 {
		font-size: 1.15em !important;
		margin-bottom: 0.75em !important;
	}

	.ecolab-home-rail .ecolab-home-lead {
		margin: 0 0 1.1em;
		font-size: 0.85em;
		line-height: 1.65;
	}

	.ecolab-home-rail .ecolab-home-sites {
		grid-template-columns: 1fr;
		gap: 0.85rem;
	}

	.ecolab-home-rail .ecolab-home-site {
		padding: 1rem 1em 1.1rem;
	}

	.ecolab-home-rail .ecolab-home-site__logo {
		max-height: 44px;
		margin-bottom: 0.7em;
	}

	.ecolab-home-rail .ecolab-home-site__desc {
		margin-bottom: 0.85em;
		font-size: 0.8em;
		line-height: 1.55;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.ecolab-home-rail .ecolab-home-site__cta {
		padding: 0.45em 0.9em;
		font-size: 0.82em;
	}
}

/*
 * SWELL の .post_content h2 / h3 帯装飾を打ち消し
 * （カスタマイザーのインラインCSSより後でも勝つよう、背景・疑似要素は !important）
 */
.ecolab-home .ecolab-home-section > h2,
.ecolab-home h2 {
	position: relative;
	z-index: auto;
	margin: 0 0 1em !important;
	padding: 0 0 0.55em !important;
	border: none !important;
	border-bottom: 2px solid #e5e5e5 !important;
	background: transparent none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: #222 !important;
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.4;
}

.ecolab-home .ecolab-home-section > h2::before,
.ecolab-home .ecolab-home-section > h2::after,
.ecolab-home h2::before,
.ecolab-home h2::after {
	content: none !important;
	display: none !important;
	border: none !important;
	background: none !important;
	width: 0 !important;
	height: 0 !important;
}

.ecolab-home .ecolab-home-section > h3,
.ecolab-home h3 {
	position: relative;
	margin: 2.5em 0 1em !important;
	padding: 0 !important;
	border: none !important;
	background: transparent none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: #222 !important;
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.4;
}

.ecolab-home .ecolab-home-section > h3::before,
.ecolab-home .ecolab-home-section > h3::after,
.ecolab-home h3::before,
.ecolab-home h3::after {
	content: none !important;
	display: none !important;
	border: none !important;
	background: none !important;
	width: 0 !important;
	height: 0 !important;
}

.ecolab-home-lead {
	margin: 0 0 1.75em;
	font-size: 0.95em;
	line-height: 1.8;
	color: #555;
}

/* ========== EC 3サイト ========== */
.ecolab-home-sites {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.35rem;
}

@media (min-width: 768px) {
	.ecolab-home-sites {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}
}

.ecolab-home-site {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-height: 100%;
	padding: 1.4rem 1.35rem 1.5rem;
	border: 1px solid #e5e5e5;
	background: #fff;
	text-decoration: none !important;
	color: inherit;
	transition: border-color 0.15s ease;
}

.ecolab-home-site:hover {
	border-color: #b0b0b0;
}

.ecolab-home-site__logo {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 56px;
	margin: 0 0 1.1em;
	object-fit: contain;
	object-position: left center;
	background: #fafafa;
}

.ecolab-home-site__logo--bag {
	max-height: 48px;
}

.ecolab-home-site__desc {
	display: block;
	flex: 1 1 auto;
	margin: 0 0 1.25em;
	font-size: 0.88em;
	line-height: 1.7;
	color: #555;
}

.ecolab-home-site__cta,
.ecolab-home-service__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	gap: 0.35em;
	padding: 0.5em 1.05em;
	border-radius: 999px;
	background: #1a5f8a;
	color: #fff;
	font-size: 0.88em;
	font-weight: 700;
	line-height: 1.3;
}

.ecolab-home-site__cta::after,
.ecolab-home-service__cta::after {
	content: "→";
}

.ecolab-home-site:hover .ecolab-home-site__cta,
.ecolab-home-service:hover .ecolab-home-service__cta {
	background: #154d70;
}

.ecolab-home-site--closed {
	background: #f7f7f7;
	cursor: default;
}

.ecolab-home-site--closed:hover {
	border-color: #e5e5e5;
}

.ecolab-home-site--closed .ecolab-home-site__cta {
	background: #888;
}

.ecolab-home-site--closed .ecolab-home-site__cta::after {
	content: none;
}

.ecolab-home-site--closed:hover .ecolab-home-site__cta {
	background: #888;
}

/* ========== カテゴリ ========== */
.ecolab-home-cats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

@media (min-width: 600px) {
	.ecolab-home-cats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.15rem;
	}
}

.ecolab-home-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6em;
	padding: 1.15em 0.75em;
	border: 1px solid #e5e5e5;
	background: #fff;
	text-decoration: none !important;
	color: #333;
	text-align: center;
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1.35;
	transition: border-color 0.15s ease;
}

.ecolab-home-cat:hover {
	border-color: #b0b0b0;
	color: #1a5f8a;
}

.ecolab-home-cat img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

/* ========== おすすめ / Tシャツ ========== */
.ecolab-home-picks,
.ecolab-home-tees,
.ecolab-home-services {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.35rem;
}

@media (min-width: 768px) {
	.ecolab-home-picks,
	.ecolab-home-tees,
	.ecolab-home-services {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}
}

.ecolab-home-pick {
	border: 1px solid #e5e5e5;
	background: #fff;
	overflow: hidden;
}

.ecolab-home-pick img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: #f3f3f3;
}

.ecolab-home-pick ul {
	margin: 0;
	padding: 1em 1.15em 1.2em;
	list-style: none;
}

.ecolab-home-pick li {
	margin: 0 0 0.55em;
	padding: 0;
	font-size: 0.9em;
	line-height: 1.5;
}

.ecolab-home-pick li:last-child {
	margin-bottom: 0;
}

.ecolab-home-pick a {
	color: #1a5f8a;
	text-decoration: none;
}

.ecolab-home-pick a:hover {
	text-decoration: underline;
}

.ecolab-home-tee {
	display: block;
	border: 1px solid #e5e5e5;
	background: #fff;
	overflow: hidden;
	text-decoration: none !important;
	color: inherit;
	transition: border-color 0.15s ease;
}

.ecolab-home-tee:hover {
	border-color: #b0b0b0;
}

.ecolab-home-tee img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #f3f3f3;
}

.ecolab-home-tee span {
	display: block;
	padding: 1em 1.05em 1.15em;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.5;
	color: #1a5f8a;
}

/* ========== ギフト加工 ========== */
.ecolab-home-service {
	display: flex;
	flex-direction: column;
	border: 1px solid #e5e5e5;
	background: #fff;
	overflow: hidden;
	text-decoration: none !important;
	color: inherit;
	transition: border-color 0.15s ease;
}

.ecolab-home-service:hover {
	border-color: #b0b0b0;
}

.ecolab-home-service img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	background: #f3f3f3;
}

.ecolab-home-service__title {
	display: block;
	margin: 1.1em 1.15em 0.45em;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.4;
	color: #222;
}

.ecolab-home-service__desc {
	display: block;
	flex: 1 1 auto;
	margin: 0 1.15em 1.1em;
	font-size: 0.88em;
	line-height: 1.7;
	color: #555;
}

.ecolab-home-service__cta {
	margin: 0 1.15em 1.35em;
}

/* ========== お知らせ ========== */
.ecolab-home-alert {
	margin: 0 0 1em;
	border: 1px solid #e5e5e5;
	background: #fafafa;
}

.ecolab-home-alert summary {
	padding: 1em 1.15em;
	cursor: pointer;
	font-weight: 700;
	line-height: 1.5;
	color: #333;
	list-style: none;
}

.ecolab-home-alert summary::-webkit-details-marker {
	display: none;
}

.ecolab-home-alert summary::before {
	content: "▸";
	display: inline-block;
	margin-right: 0.45em;
	color: #888;
	transition: transform 0.15s ease;
}

.ecolab-home-alert[open] summary::before {
	transform: rotate(90deg);
}

.ecolab-home-alert__body {
	padding: 0 1.15em 1.25em;
	border-top: 1px solid #ececec;
	font-size: 0.92em;
	line-height: 1.8;
	color: #444;
}

.ecolab-home-alert__body > :first-child {
	margin-top: 1em;
}

.ecolab-home-alert__body p {
	margin: 0 0 0.85em;
}

.ecolab-home-alert__body blockquote {
	margin: 1.15em 0;
	padding: 1em 1.15em;
	border-left: 3px solid #ccc;
	background: #fff;
	font-size: 0.95em;
	color: #555;
}

.ecolab-home-news {
	margin: 1.75em 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #e5e5e5;
}

.ecolab-home-news li {
	display: grid;
	grid-template-columns: 6.5em minmax(0, 1fr);
	gap: 0.85em 1.25em;
	margin: 0;
	padding: 1.1em 0;
	border-bottom: 1px solid #eee;
	font-size: 0.95em;
	line-height: 1.65;
}

@media (max-width: 520px) {
	.ecolab-home-news li {
		grid-template-columns: 1fr;
		gap: 0.35em;
		padding: 1em 0;
	}
}

.ecolab-home-news time {
	display: block;
	font-weight: 700;
	color: #666;
	white-space: nowrap;
}

.ecolab-home-news a {
	color: #1a5f8a;
	text-decoration: none;
}

.ecolab-home-news a:hover {
	text-decoration: underline;
}

/* 特集リンク集など（日付なしの単純リスト） */
.ecolab-link-list {
	margin: 1.25em 0 1.75em;
	padding: 0;
	list-style: none;
	border-top: 1px solid #e5e5e5;
}

.ecolab-link-list li {
	margin: 0;
	padding: 0.85em 0;
	border-bottom: 1px solid #eee;
	font-size: 0.95em;
	line-height: 1.55;
}

.ecolab-link-list a {
	color: #1a5f8a;
	font-weight: 600;
	text-decoration: none;
}

.ecolab-link-list a:hover {
	text-decoration: underline;
}

/* ========== 記事ハブ（related をグリッド化） ========== */
.ecolab-home-posts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0 0 0.75em;
}

@media (min-width: 768px) {
	.ecolab-home-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.15rem;
	}
}

.ecolab-home .ecolab-article-related {
	margin: 0;
	padding: 1rem 1.1rem;
	align-items: stretch;
	height: 100%;
}

.ecolab-home .ecolab-article-related__excerpt {
	display: none;
}

/* グリッド内はタイトル行数で高さがバラつかないよう3行で揃える */
.ecolab-home-posts .ecolab-article-related__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	min-height: calc(1.45em * 3);
}

/* ========== YouTube（縦型ショート寄りの比率を維持） ========== */
.ecolab-home-videos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.35rem;
	margin-top: 0.25em;
}

@media (min-width: 768px) {
	.ecolab-home-videos {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}
}

.ecolab-home-video {
	position: relative;
	width: 100%;
	max-width: 280px;
	margin: 0 auto;
	aspect-ratio: 422 / 750;
	background: #111;
	overflow: hidden;
}

.ecolab-home-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ecolab-home .ecolab-article-more {
	margin-top: 1.75em;
	margin-bottom: 0.25em;
}

/* --------------------------------------------------------------------------
   記事ページ用（ニュース枠なし・本文 + 追従レール）
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
	.ecolab-home--article {
		grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
		grid-template-areas: "main rail";
	}

	.ecolab-home--article .ecolab-home-main {
		grid-area: main;
		min-width: 0;
	}

	.ecolab-home--article .ecolab-home-rail {
		--ecolab-home-rail-top: calc(var(--swl-headerH, 64px) + 0.75rem);
		grid-area: rail;
		position: sticky;
		top: var(--ecolab-home-rail-top);
		margin: 0;
		align-self: start;
		max-height: calc(100vh - var(--ecolab-home-rail-top) - 1rem);
		overflow: auto;
	}
}

@media (max-width: 999px) {
	.ecolab-home--article {
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	/* スマホは本文を先に、ショッピングサイトは後ろ */
	.ecolab-home--article .ecolab-home-main {
		order: 1;
	}

	.ecolab-home--article .ecolab-home-rail {
		order: 2;
		margin-bottom: 0;
	}
}

/*
 * 記事ページ: more / related / 見出しの縦余白
 * TOP は posts グリッド用に related margin:0・more 下余白を詰めてあるため、
 * --article では通常記事並みに戻す
 */
.ecolab-home--article .ecolab-article-products {
	margin-bottom: 1.25em;
}

.ecolab-home--article .ecolab-article-more {
	margin: 1.5em 0 1.75em;
}

.ecolab-home--article .ecolab-article-more + .ecolab-article-more {
	margin-top: 0.85em;
}

.ecolab-home--article .ecolab-article-related {
	margin: 1.5em 0 2em;
	padding: 0.85rem 1rem;
}

.ecolab-home--article .ecolab-article-related + .ecolab-article-related {
	margin-top: 1.1em;
}

.ecolab-home--article .ecolab-article-more + .ecolab-article-related {
	margin-top: 1.5em;
}

.ecolab-home--article .ecolab-article-related__excerpt {
	display: block;
}

/*
 * ハブグリッド（.ecolab-home-posts）内は TOP と同じく余白0・高さ揃え。
 * --article の縦積み用 margin / excerpt 表示は打ち消す。
 */
.ecolab-home--article .ecolab-home-posts .ecolab-article-related {
	margin: 0;
	height: 100%;
	padding: 1rem 1.1rem;
}

.ecolab-home--article .ecolab-home-posts .ecolab-article-related + .ecolab-article-related {
	margin-top: 0;
}

.ecolab-home--article .ecolab-home-posts .ecolab-article-related__excerpt {
	display: none;
}

.ecolab-home--article h2 {
	margin-top: 2.75em !important;
	margin-bottom: 1em !important;
}

.ecolab-home--article .ecolab-article-toc + h2 {
	margin-top: 2em !important;
}

.ecolab-home--article .ecolab-article-related + h2,
.ecolab-home--article .ecolab-article-more + h2 {
	margin-top: 3.25em !important;
}

.ecolab-home--article h3 {
	margin-top: 2.75em !important;
	margin-bottom: 1em !important;
}