/*
 * コラム(一覧・個別ページ)
 *   基本の見た目は travel-report.css(tr-*)と共通。ここはコラムだけの追加分。
 */

/* ---------- テーマのラベル ---------- */
.cl-cat {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--tr-navy-dark);
	background: var(--tr-yellow);
	text-decoration: none;
}
a.cl-cat:hover { background: var(--tr-navy); color: #fff; }
.tr-article__types .cl-cat { font-size: 13px; padding: 3px 14px; }

/* テーマが10個あるので、切り替えは小さめに */
.cl-tabs a { padding: 6px 16px; font-size: 14px; }

.cl-article__date { margin: 12px 0 0; font-size: 14px; color: var(--tr-muted); }

/* ---------- 本文 ---------- */
.cl-single .tr-article__content ul,
.cl-single .tr-article__content ol { margin: 0 0 24px; padding-left: 1.4em; }
.cl-single .tr-article__content li { margin-bottom: 6px; }

/* ---------- 記事末尾の案内 ---------- */
.cl-cta {
	margin: 56px 0 0;
	padding: 32px 28px;
	border-radius: var(--tr-radius);
	background: var(--tr-yellow-soft);
	border: 2px solid var(--tr-yellow);
	text-align: center;
}
.cl-cta__eyebrow { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--tr-red); }
.cl-cta__title {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--tr-navy-dark);
	text-wrap: balance;
}
.cl-cta__text { margin: 0 auto 20px; max-width: 36em; }
.cl-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 32px;
	border-radius: 999px;
	background: var(--tr-red);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: opacity .15s;
}
.cl-cta__btn:hover,
.cl-cta__btn:focus-visible { color: #fff; opacity: .85; }

/* ---------- 同じテーマのコラム ---------- */
.cl-related {
	max-width: 860px;
	margin: 56px auto 0;
	padding-top: 24px;
	border-top: 1px solid var(--tr-line);
}
.cl-related__title { font-size: 18px; color: var(--tr-navy-dark); margin: 0 0 12px; }
.cl-related__list { margin: 0; padding-left: 1.2em; }
.cl-related__list li { margin-bottom: 8px; }

@media (max-width: 640px) {
	.cl-cta { padding: 24px 18px; }
	.cl-cta__title { font-size: 19px; }
}