@charset "utf-8";

/* =====================================================================
   /rd/coating-lab/ 「コーティングラボ」 専用スタイル
   - 一覧レイアウトからカード表示まで .cl- 接頭辞で完結
   - このCSSではカード表示に必要な幅・高さ・色のみ指定
   - クラス名は coating lab の短縮接頭辞 .cl- に統一
   ===================================================================== */

/* カテゴリ上の補足文：上余白を追加 */
.content_wrapper > .cp-lead {
	margin-top: 40px;
}

/* ===== カテゴリ選択 ===== */
.cl-category-nav {
	margin: 0 0 32px;
	padding: 18px 20px;
	border-top: 2px solid #1768af;
	border-bottom: 1px solid #e4e4e4;
	background: #f8fbfd;
	box-sizing: border-box;
}

.cl-category-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cl-category-nav li {
	margin: 0;
	padding: 0;
}

.cl-category-nav a {
	display: block;
	min-width: 116px;
	padding: 10px 18px;
	border: 1px solid #cddce8;
	background: #fff;
	color: #1768af;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.cl-category-nav a:hover,
.cl-category-nav a.is-active {
	border-color: #1768af;
	background: #1768af;
	color: #fff !important;
}

/* ===== カード一覧 ===== */
.cl-list {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0 0 50px;
	padding: 0;
	list-style: none;
}

/* ===== カード ===== */
.cl-card {
	width: calc((100% - 48px) / 3);
	border: 1px solid #e4e4e4;
	background: #fff;
	box-sizing: border-box;
}

.cl-card:hover {
	border-color: #1868ad;
    box-shadow: 0 4px 14px rgba(24, 104, 173, 0.12);
}

.cl-card a {
	display: flex;
	flex-direction: column;
	min-height: 430px;
	color: #333;
	text-decoration: none;
}

/* ===== 画像 ===== */
.cl-thumb {
	background: #f7f7f7;
	border-bottom: 1px solid #eee;
	height: 180px;
	overflow: hidden;
}

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

/* ===== 本文 ===== */
.cl-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	box-sizing: border-box;
	padding: 20px;
}

/* タクソノミーラベル */
.cl-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.cl-term {
	display: inline-block;
	width: fit-content;
	border: 2px solid #e5e5e5;
	color: #1768af;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.4;
	padding: 6px 10px;
}

/* 投稿日 */
.cl-date {
	display: block;
	color: #b5b5b5;
	font-size: 14px;
	margin-bottom: 14px;
}

/* 記事タイトル */
.cl-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	text-overflow: ellipsis;
	color: #333;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.6;
	height: 64px;
	margin: 0 0 12px;
	text-align: left;
	overflow: hidden;
	overflow-wrap: break-word;
}

/* 詳しく見るリンク */
.cl-more {
	display: block;
	border-top: 1px solid #ddd;
	color: #1868ad;
	font-size: 15px;
	font-weight: bold;
	margin-top: 8px;
	padding-top: 18px;
}

/* ページネーション */
.cl-pagenav {
	display: block;
	width: 100%;
	margin: 20px 0 50px;
	padding-top: 20px;
	text-align: center;
}

.cl-pagenav .page-numbers {
	display: inline-block;
	margin-right: 5px;
	padding: 10px 20px;
	border: 1px solid #ccc;
	color: #333;
	text-decoration: none;
	box-sizing: border-box;
}

.cl-pagenav .page-numbers.current {
	background: #f5f5f5;
	color: #ccc;
}

@media screen and (max-width: 960px) {
	.cl-card {
		width: calc((100% - 24px) / 2);
	}
}

@media screen and (max-width: 640px) {
	.cl-category-nav {
		padding: 14px;
	}

	.cl-category-nav ul {
		gap: 8px;
	}

	.cl-category-nav li {
		width: calc((100% - 8px) / 2);
	}

	.cl-category-nav a {
		min-width: 0;
		width: 100%;
		padding: 9px 10px;
		font-size: 14px;
	}

	.cl-card {
		width: 100%;
	}
}