/* =====================================================================
 * column.css — コラム一覧（2u）とコラム記事（2v）
 * ---------------------------------------------------------------------
 * どちらのデザインも Figma に無い。交換ページで確定した部品と数値を使って組んでいる。
 * 2026-10-14 に一覧・記事ともゼロから組み直した（jojiさんの指示「ページ全体が非常に見づらい」）。
 *
 * 【本文の扱い】
 *   記事の中身（.entry-content）は旧SWELLサイトから移したブロックがそのまま入っている。
 *   SWELL 固有のブロックは column-legacy.css が受け持つ。ここの .cl-body は
 *   文字・見出し・箇条書き・表の土台だけを決める（旧ブロックのクラスには触らない）。
 *
 * 【面の配分】
 *   2u  FV v2 の青い箱 ／ カテゴリ 丸いボタン ／ 一覧 白い箱に1列 ／ ページ送り
 *   2v  FV 低い青い箱 ／ 本文 白い箱（PC は右に追従する目次と相談の箱）／
 *       記事内CTA 全幅の青（水玉）／ あわせて読みたい 一覧と同じ行
 * ===================================================================== */

/* =====================================================================
 * 一覧（2u）— home.php / category.php
 * ===================================================================== */

/* FV: 料金表（price.css の .hero--price）と同じ大きさ。1行目は白で小さく、2行目を黄色で大きく。 */
.hero--colist .hero__title { font-size: 20px; line-height: 1.4; }
.hero--colist .hero__seg { display: inline-block; }
.hero--colist .hero__sub { margin: 0; font-size: 14px; }

/* カテゴリ: 地の上の丸いボタン。今いるカテゴリだけ青く塗る。 */
.cl-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-cat {
	padding: 6px 18px;
	border: 2px solid var(--fig-blue-30);
	border-radius: 100px;
	background: #fff;
	color: var(--fig-blue-60);
	font-size: 14px;
	line-height: 1.6;
	font-weight: var(--fw-bold);
	transition: border-color .15s ease, background-color .15s ease;
}
.cl-cat:hover { border-color: var(--fig-blue-40); }
.cl-cat.is-current { border-color: var(--fig-blue-60); background: var(--fig-blue-60); color: #fff; }

/* 一覧の見出しと件数 */
.cl-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
.cl-head__title { margin: 0; font-size: 20px; line-height: 1.4; font-weight: var(--fw-bold); color: var(--c-ink); }
.cl-head__count { margin: 0; font-size: 14px; font-weight: var(--fw-bold); color: var(--fig-gray-50); }
.cl-head__count b { margin-inline: 2px; font-family: var(--font-num); font-size: 1.3em; color: var(--fig-blue-60); }
.cl-head__page { font-weight: var(--fw-medium); }

/* 記事: 白い箱の中に1列。タイトルが主役、抜粋は2行で切る。写真は使わない
 * （アイキャッチがあるのは402本中42本だけ。有無で並びががたつく）。 */
.cl-rows { margin: 0; padding: 0; list-style: none; border-radius: var(--radius-lg); background: #fff; overflow: hidden; }
.cl-rows li + li { border-top: 1px solid var(--fig-gray-10); }
.cl-row {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 12px;
	row-gap: 6px;
	padding: 18px 16px 18px 20px;
	color: var(--c-ink);
	transition: background-color .15s ease;
}
.cl-row > :not(.cl-row__arrow) { grid-column: 1; }
.cl-row:hover { background: var(--fig-blue-20); }
.cl-row:hover .cl-row__title { color: var(--fig-blue-60); }
.cl-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.cl-row__cat {
	padding: 1px 10px;
	border-radius: 6px;
	background: var(--fig-blue-20);
	color: var(--fig-blue-60);
	font-size: 12px;
	line-height: 1.6;
	font-weight: var(--fw-bold);
}
.cl-row:hover .cl-row__cat { background: #fff; }
.cl-row__date { font-family: var(--font-num); font-size: 13px; font-weight: 700; color: var(--fig-gray-40); }
.cl-row__title { font-size: 16px; line-height: 1.6; font-weight: var(--fw-bold); transition: color .15s ease; }
.cl-row__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.75;
	color: var(--fig-gray-50);
}
/* 右端の矢印（丸の中に「>」） */
.cl-row__arrow {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: center;
	position: relative;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--fig-blue-20);
}
.cl-row__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-top: 2px solid var(--fig-blue-60);
	border-right: 2px solid var(--fig-blue-60);
	transform: translate(-65%, -50%) rotate(45deg);
}
.cl-row:hover .cl-row__arrow { background: var(--fig-blue-60); }
.cl-row:hover .cl-row__arrow::before { border-color: #fff; }

/* ページ送り（.cl-pager）は機種検索・施工事例と同じ見た目なので components.css にある。 */

/* よく読まれている記事。順位の丸は交換ページ「工事の流れ」と同じ扱い。 */
.cl-rank { display: flex; flex-direction: column; gap: 0; margin: 0; list-style: none; padding: 0; }
.cl-rank li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	font-size: 16px;
	line-height: 1.7;
}
.cl-rank li + li { border-top: 2px solid var(--fig-blue-30); }
.cl-rank li:first-child { padding-top: 0; }
.cl-rank li:last-child { padding-bottom: 0; }
.cl-rank__no {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--c-brand);
	color: #fff;
	font-family: var(--font-num);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
}
.cl-rank a { font-weight: var(--fw-bold); color: var(--fig-blue-60); }
.cl-rank a:hover { text-decoration: underline; }

/* --- 記事一覧と右の列（2026-10-16 S2）---
 * 1023 以下は1列。右の列の中身は記事一覧の下に来るが、相談の青い箱はすぐ下の黄色の帯と重なるので出さない。
 * よく読まれている記事が無ければ右の列ごと出さない。 */
.cl-list-layout { display: flex; flex-direction: column; gap: 48px; }
.cl-list-main { min-width: 0; }
.cl-list-side .cl-side-cta { display: none; }
.cl-list-side--nopop { display: none; }
.cl-list-side__inner { display: flex; flex-direction: column; gap: 16px; }
.cl-list-rank { padding: 20px 18px; border-radius: var(--radius-lg); background: #fff; }
.cl-list-rank__title { margin: 0 0 12px; font-size: 16px; line-height: 1.5; font-weight: var(--fw-bold); color: var(--fig-blue-60); }

/* =====================================================================
 * 記事（2v）— single.php
 * ===================================================================== */

/* FV: v2 の青い箱を低くして、カテゴリ・日付・タイトルだけを載せる。 */
.hero--article .hero__box { padding-block: 24px; }
.cl-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
.cl-meta__cat {
	padding: 2px 12px;
	border-radius: 6px;
	background: #fff;
	color: var(--fig-blue-60);
	font-size: 13px;
	line-height: 1.6;
	font-weight: var(--fw-bold);
}
.cl-meta__date { font-size: 13px; font-weight: var(--fw-bold); color: var(--fig-blue-20); }
.cl-meta__date time { font-family: var(--font-num); }
.cl-title { margin: 0; font-size: 21px; line-height: 1.55; font-weight: var(--fw-bold); color: #fff; text-wrap: pretty; }

/* 2列の枠。スマホ・タブレットは1列で、右の列は出さない。 */
.cl-layout { display: block; }
.cl-side { display: none; }

/* 本文の白い箱 */
.cl-main {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
	padding: 24px 18px 28px;
	border-radius: var(--radius-lg);
	background: #fff;
}
.cl-eyecatch { margin: 0; }
.cl-eyecatch img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }

/* 結論（抜粋を手で書いた記事だけ）。淡い青の面に青い札。 */
.cl-conclusion { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 12px; background: var(--fig-blue-20); }
.cl-conclusion__badge {
	align-self: flex-start;
	padding: 2px 14px;
	border-radius: 6px;
	background: var(--fig-blue-60);
	color: #fff;
	font-size: 13px;
	font-weight: var(--fw-bold);
	line-height: 1.7;
}
.cl-conclusion__lead { margin: 0; font-size: 16px; line-height: 1.9; font-weight: var(--fw-bold); color: var(--c-ink); }

/* 本文の前の目次（スマホ・タブレット）。番号付きで、淡い青の枠。 */
.cl-toc { padding: 18px 20px; border: 2px solid var(--fig-blue-30); border-radius: 12px; }
.cl-toc__title { margin: 0 0 10px; font-size: 16px; font-weight: var(--fw-bold); color: var(--fig-blue-60); }
.cl-toc__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 1.4em; list-style: decimal; }
.cl-toc__list li { padding-left: 2px; font-size: 15px; line-height: 1.65; }
.cl-toc__list li::marker { font-family: var(--font-num); font-weight: 700; color: var(--fig-blue-60); }
.cl-toc__list a { color: var(--c-ink); font-weight: var(--fw-medium); }
.cl-toc__list a:hover { color: var(--fig-blue-60); text-decoration: underline; }

/* ---------- 本文の土台（.entry-content の上書き） ----------
 * 1行の長さは白い箱の幅で決まる（PC で約40字）。文字は 16px・行間 2。 */
.entry-content.cl-body { font-size: 16px; line-height: 2; color: var(--c-ink); }
/* 段落の間隔。column-legacy.css（後から読まれる）が段落の上の余白を 0 にするので、.column-single を足して上書きする。 */
.column-single .entry-content.cl-body > * + * { margin-top: 1.3em; }
/* H2: サイトの見出しバー（.sec-label）と同じ青。本文の中なので角丸は小さく、左寄せ。 */
.entry-content.cl-body h2 {
	margin-top: 2.6em;
	padding: 14px 18px;
	border: 0;
	border-radius: 10px;
	background: var(--fig-blue-60);
	color: #fff;
	font-size: 19px;
	line-height: 1.5;
	scroll-margin-top: 90px;
}
/* H3: 左に青い線 */
.entry-content.cl-body h3 {
	margin-top: 2em;
	padding: 2px 0 2px 14px;
	border: 0;
	border-left: 4px solid var(--fig-blue-40);
	font-size: 18px;
	line-height: 1.55;
	color: var(--c-ink);
}
.entry-content.cl-body h4 { margin-top: 1.6em; font-size: 16px; color: var(--fig-blue-60); }
.column-single .entry-content.cl-body > :is(h2, h3) + * { margin-top: 1em; }
/* 見出しの上は広く空ける（上の段落の間隔より強い指定にする）。 */
.column-single .entry-content.cl-body > h2 { margin-top: 2.6em; }
.column-single .entry-content.cl-body > h3 { margin-top: 2em; }
.column-single .entry-content.cl-body > :first-child { margin-top: 0; }
/* 箇条書き: base.css が list-style を消しているので戻す。SWELL の装飾付きリストは除く。 */
.entry-content.cl-body ul:not([class*="is-style-"]) { padding-left: 1.4em; list-style: disc; }
.entry-content.cl-body ol:not([class*="is-style-"]) { padding-left: 1.6em; list-style: decimal; }
.entry-content.cl-body li::marker { color: var(--fig-blue-40); }
.entry-content.cl-body li + li { margin-top: .4em; }
/* 箇条書きを淡い面に載せて、段落と見分けやすくする */
.entry-content.cl-body > ul:not([class*="is-style-"]),
.entry-content.cl-body > ol:not([class*="is-style-"]) { padding: 16px 20px 16px 2.4em; border-radius: 12px; background: var(--fig-blue-20); }
/* 表: 見出しのセルを淡い青に。狭い画面では表だけ横に動かす。 */
.entry-content.cl-body .wp-block-table { margin-inline: 0; overflow-x: auto; }
.entry-content.cl-body table { display: table; width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; }
.entry-content.cl-body .wp-block-table table { margin: 0; }
/* 見出しのセルも折り返す（pages.css の nowrap が残ると、列幅を固定した表で文字が隣のセルに重なった。2026-10-14）。
 * 列幅は中身に合わせる（WordPress の has-fixed-layout は全列を同じ幅にするため、短い列も長い列も同じ幅になる）。 */
.entry-content.cl-body th { white-space: normal; }
.entry-content.cl-body table.has-fixed-layout { table-layout: auto; }
/* スマホで3列以上の表は、1文字ずつ縦に並ぶほど細くなる。幅を持たせて、表の中だけ横に動かす
 * （横に動かす枠 .wp-block-table がある表だけ。枠が無い表に幅を持たせるとページごと横に広がる）。 */
@media (max-width: 599.98px) {
	.entry-content.cl-body .wp-block-table table:has(tr > :nth-child(3)) { min-width: 520px; }
	.entry-content.cl-body th,
	.entry-content.cl-body td { padding: 8px 10px; }
}
.entry-content.cl-body th,
.entry-content.cl-body td { padding: 10px 12px; border: 1px solid var(--fig-blue-30); vertical-align: top; }
.entry-content.cl-body th,
.entry-content.cl-body thead td { background: var(--fig-blue-20); color: var(--fig-blue-60); font-weight: var(--fw-bold); }
.entry-content.cl-body blockquote { margin: 0; padding: 14px 18px; border-left: 4px solid var(--fig-blue-30); border-radius: 0 10px 10px 0; background: var(--c-bg-soft); }
.entry-content.cl-body figure { margin-inline: 0; }
.entry-content.cl-body figcaption { margin-top: 6px; font-size: 13px; color: var(--fig-gray-50); text-align: center; }
/* 太字に黄色の線は引かない（ハイライトは最小限。2026-10-14 jojiさんの指示）。 */
/* WordPress の表ブロックが thead の下に引く太い黒線を消す。 */
.entry-content.cl-body .wp-block-table thead { border-bottom: 0; }
.entry-content.cl-body a { color: var(--fig-blue-60); }

/* 監修。本文の箱の末尾に、罫線で区切って置く。 */
.cl-supervisor { display: flex; align-items: flex-start; gap: 14px; padding-top: 24px; border-top: 1px solid var(--fig-gray-10); }
.cl-supervisor__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cl-supervisor__label { margin: 0; font-size: 13px; font-weight: var(--fw-bold); color: var(--fig-blue-60); }
.cl-supervisor__name { margin: 0; font-size: 15px; font-weight: var(--fw-bold); color: var(--c-ink); }
.cl-supervisor__link { align-self: flex-start; font-size: 14px; font-weight: var(--fw-bold); color: var(--fig-blue-60); text-decoration: underline; text-underline-offset: 3px; }

/* 語のまとまり。途中で折り返さない。 */
.cl-seg { display: inline-block; }

/* ---------- ボタン（電話・見積もり） ----------
 * 電話はサイトの電話ボタンと同じオレンジ。2行目に「通話無料」（2026-10-14 jojiさんの指示）。 */
.cl-telbtn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px 20px 9px;
	border-radius: 100px;
	background: var(--c-warm);
	box-shadow: 0 3px 0 var(--c-warm-deep);
	color: #fff;
	text-align: center;
	white-space: nowrap;
	transition: transform .1s ease, box-shadow .1s ease;
}
.cl-telbtn:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--c-warm-deep); }
.cl-telbtn__num { display: flex; align-items: center; gap: 8px; font-family: var(--font-num); font-size: 21px; line-height: 1.3; font-weight: 800; }
.cl-telbtn__num svg { flex: none; width: 18px; height: 18px; }
.cl-telbtn__free { font-size: 12px; line-height: 1.4; font-weight: var(--fw-bold); }
.cl-estbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 100px;
	background: var(--fig-blue-60);
	box-shadow: 0 3px 0 var(--fig-blue-80);
	color: #fff;
	font-size: 16px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	transition: transform .1s ease, box-shadow .1s ease;
}
.cl-estbtn:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--fig-blue-80); }

/* ---------- 記事末の相談カード ----------
 * 本文の箱の中。淡い青の面に、見出し・要点・ボタン2つ。 */
.cl-endcta { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px; border-radius: 16px; background: var(--fig-blue-20); }
.cl-endcta__eyebrow { margin: 0; font-size: 13px; font-weight: var(--fw-bold); color: var(--fig-blue-40); }
.cl-endcta__title { margin: 0; font-size: 19px; line-height: 1.5; font-weight: var(--fw-bold); color: var(--c-ink); }
.cl-endcta__lead { margin: 0; font-size: 15px; line-height: 1.8; color: var(--fig-gray-70); }
.cl-endcta__points { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cl-endcta__points li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.7; font-weight: var(--fw-bold); color: var(--fig-gray-70); }
/* 要点の頭のチェック印 */
.cl-endcta__points li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: .45em;
	width: 11px;
	height: 6px;
	border-left: 3px solid var(--fig-blue-40);
	border-bottom: 3px solid var(--fig-blue-40);
	transform: rotate(-45deg);
}
.cl-endcta__btns { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }

/* ---------- あわせて読みたい ----------
 * 3列のカード（スマホは1列）。カテゴリ・日付・タイトル・「記事を読む」。 */
.cl-cards { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cl-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 20px;
	border: 2px solid transparent;
	border-radius: var(--radius-lg);
	background: #fff;
	color: var(--c-ink);
	transition: border-color .15s ease;
}
.cl-card:hover { border-color: var(--fig-blue-30); }
.cl-card:hover .cl-card__title { color: var(--fig-blue-60); }
.cl-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.cl-card__title { font-size: 16px; line-height: 1.65; font-weight: var(--fw-bold); transition: color .15s ease; }
.cl-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: var(--fw-bold); color: var(--fig-blue-60); }
.cl-card__more::after {
	content: "";
	width: 7px;
	height: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

/* サービスカード（4枚目）。形も色も記事のカードと同じ（白地・紺の見出し・青のリンク。2026-10-14 jojiさんの指示）。
 * 中身はワイヤーの文言だけ（見出し・金額・リンク）。金額の数字だけオレンジで大きく（サイトの価格の色。2026-10-14 jojiさんの指示）。 */
.cl-card--service { gap: 6px; }
.cl-card__price { font-size: 14px; line-height: 1.3; font-weight: var(--fw-bold); color: var(--fig-gray-40); }
/* 「工事費込み」は上の行に分け、金額を1行にまとめる（4列のカードは幅が狭い）。 */
.cl-card__pre { display: block; margin-bottom: 2px; }
.cl-card__price .cl-seg { color: var(--c-ink); }
.cl-card__price b { margin: 0 2px 0 0; font-family: var(--font-num); font-size: 30px; font-weight: 800; color: var(--c-warm); }
.cl-card__price small { font-size: 12px; color: var(--fig-gray-40); white-space: nowrap; }

/* 右の列（PC）: 追従する目次と相談の箱
 * 列全体を画面の高さに収める。目次が長いと相談の箱が画面の外に押し出され、
 * 記事の最後までスクロールしないと出てこなかった（2026-10-14 jojiさんの指摘）。
 * はみ出す分は目次の中だけでスクロールさせ、相談の箱は常に見えるようにする。 */
.cl-side__inner { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 88px - 24px); }
.cl-side-toc { display: flex; flex-direction: column; min-height: 0; padding: 20px 18px; border-radius: var(--radius-lg); background: #fff; }
.cl-side-toc__title { margin: 0 0 8px; padding-left: 6px; font-size: 15px; font-weight: var(--fw-bold); color: var(--fig-blue-60); }
.cl-side-toc__list { display: flex; flex-direction: column; gap: 2px; position: relative; min-height: 0; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
.cl-side-toc__list a {
	display: flex;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.6;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
	transition: background-color .15s ease, color .15s ease;
}
.cl-side-toc__list a:hover { background: var(--fig-blue-20); }
.cl-side-toc__list a.is-current { background: var(--fig-blue-20); color: var(--fig-blue-60); font-weight: var(--fw-bold); }
.cl-side-toc__no { flex: none; width: 1.4em; font-family: var(--font-num); font-weight: 700; color: var(--fig-blue-40); }
.cl-side-cta { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; border-radius: var(--radius-lg); background: var(--fig-blue-60); color: #fff; text-align: center; }
.cl-side-cta__title { margin: 0 0 2px; font-size: 15px; line-height: 1.5; font-weight: var(--fw-bold); }
/* 右の列では電話ボタンを箱の幅いっぱいに */
.cl-side-cta .cl-telbtn { align-self: stretch; margin-top: 8px; }
/* 青い地の上なので白いボタンにする（濃紺のボタンは地に溶ける）。 */
.cl-side-cta__btn {
	align-self: stretch;
	margin-top: 10px;
	padding: 10px 16px;
	border-radius: 100px;
	background: #fff;
	color: var(--fig-blue-60);
	font-size: 15px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	transition: background-color .15s ease;
}
.cl-side-cta__btn:hover { background: var(--fig-blue-20); }

/* タブレット（600〜1023）: 1列のまま、箱の余白だけ広げる。 */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.cl-main { padding: 36px 40px 40px; }
}

/* PC（1024〜）: 本文と右の列の2列。本前の目次は右の列に任せる。 */
@media (min-width: 1024px) {
	/* 右の列は画面幅に合わせて 240〜300px。300px 固定だと小さめの PC で目次が本文に比べて大きすぎた（2026-10-14 jojiさんの指摘）。 */
	.cl-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 300px); gap: clamp(24px, 2.4vw, 32px); align-items: start; }
	.cl-side { display: block; align-self: stretch; }
	.cl-main > .cl-toc { display: none; }
	.cl-main { padding: 48px 56px 52px; gap: 36px; }

	/* 一覧：右の列は記事と同じ幅（240〜300px）。上に相談の青い箱、下によく読まれている記事。追従する。 */
	.cl-list-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 300px); gap: clamp(24px, 2.4vw, 32px); align-items: start; }
	.cl-list-side, .cl-list-side--nopop { display: block; align-self: stretch; }
	.cl-list-side .cl-side-cta { display: flex; }
	.cl-list-side__inner { position: sticky; top: 88px; }
	.cl-list-rank .cl-rank li { font-size: 14px; line-height: 1.6; }
}
/* 小さめの PC（1024〜1279）: 目次の字と余白を1段小さくする。 */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.cl-main { padding: 40px 40px 44px; }
	.cl-side-toc { padding: 16px 12px; }
	.cl-side-toc__title { font-size: 14px; }
	.cl-side-toc__list a { padding: 5px 6px; font-size: 13px; line-height: 1.55; }
	.cl-side-cta { padding: 16px 14px; }
}

/* =====================================================================
 * 600〜（タブレット・PC）
 * ===================================================================== */
@media (min-width: 600px) {
	.cl-rank li { padding: calc(18 * var(--u)) 0; font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); gap: calc(18 * var(--u)); }
	.cl-rank__no { width: calc(40 * var(--u)); height: calc(40 * var(--u)); font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); }

	/* --- 一覧 --- */
	.hero--colist .hero__title { font-size: max(calc(22 * var(--ff)), calc(36 * var(--u))); }
	.hero--colist .hero__sub { font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); line-height: max(calc(28.8 * var(--ff)), calc(43.2 * var(--u))); }
	.cl-cats { gap: calc(12 * var(--u)); }
	.cl-cat { padding: calc(8 * var(--u)) calc(28 * var(--u)); font-size: max(calc(14 * var(--ff)), calc(17 * var(--u))); }
	.cl-head__title { font-size: max(calc(20 * var(--ff)), calc(28 * var(--u))); }
	.cl-head__count { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }
	.cl-row { column-gap: calc(32 * var(--u)); row-gap: calc(8 * var(--u)); padding: calc(28 * var(--u)) calc(36 * var(--u)) calc(28 * var(--u)) calc(40 * var(--u)); }
	.cl-row__cat { font-size: max(calc(12 * var(--ff)), calc(14 * var(--u))); padding-inline: calc(12 * var(--u)); }
	.cl-row__date { font-size: max(calc(13 * var(--ff)), calc(15 * var(--u))); }
	.cl-row__title { font-size: max(calc(16 * var(--ff)), calc(21 * var(--u))); }
	.cl-row__excerpt { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }
	.cl-row__arrow { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }

	/* --- 記事 --- */
	.hero--article .hero__box { padding-block: calc(40 * var(--u)); }
	.cl-meta__cat { font-size: max(calc(13 * var(--ff)), calc(15 * var(--u))); }
	.cl-meta__date { font-size: max(calc(13 * var(--ff)), calc(15 * var(--u))); }
	.cl-title { margin-top: calc(12 * var(--u)); font-size: max(calc(22 * var(--ff)), calc(34 * var(--u))); }
	.entry-content.cl-body { font-size: 17px; }
	.entry-content.cl-body h2 { padding: 16px 22px; font-size: 22px; }
	.entry-content.cl-body h3 { font-size: 19px; }
	.cl-endcta { padding: 28px 32px; }
	.cl-endcta__title { font-size: 21px; }
	.cl-endcta__btns { flex-direction: row; }
	.cl-endcta__btns > * { flex: 1 1 0; }
	/* 関連記事3件＋サービスカードの4枚。タブレットは2列×2段、PC は4列。 */
	.cl-cards { grid-template-columns: repeat(2, 1fr); gap: calc(20 * var(--u)); }
	.cl-card { padding: calc(28 * var(--u)); }
	.cl-card__title { font-size: max(calc(16 * var(--ff)), calc(18 * var(--u))); }
}

@media (min-width: 1024px) {
	.cl-cards { grid-template-columns: repeat(4, 1fr); }
	/* 4列はカードが狭いので、金額を少し小さくして「（税込）」まで1行に収める。 */
	.cl-card__price b { font-size: 26px; }
}