/* 全テンプレート共通（トップ専用は chk-front.css）。角丸10px（ボタン8px）、動きは hover と focus のみ
   和文Webフォントは768px以上だけで読む（functions.php の chk_font_async）。スマホは端末の標準フォント */

/* ---- tokens */

:root {
	color-scheme: light;

	/* 地の色。面は灰色に寄せ、薄水色は使わない */
	--paper: #ffffff;
	--surface: #ffffff;
	--surface-sunk: #f5f6f7;
	--surface-tint: #eaf1f8;

	/* 文字色。本文と見出しは #333、注記だけグレー（薄灰の面の上でもAAを満たす値） */
	--ink: #333333;
	--ink-2: #333333;
	--ink-3: #686b6f;

	--rule: #e4e6e8;
	--rule-strong: #c8cccf;
	--rule-ink: #333333;

	/* 青はリンク・ボタン・数字だけに使う。面には広げない */
	--accent: #0b5fae;
	--accent-deep: #084a8a;
	--accent-ink: #ffffff;

	/* 差し色。最安・注意など、1画面に1〜2か所だけ */
	--hot: #c8371f;
	--hot-sunk: #fbf0ee;

	/* 角丸は小さく */
	--radius: 4px;
	--radius-lg: 8px;
	--shadow: 0 1px 2px rgba(20, 24, 28, .10);
	--shadow-pop: 0 10px 28px -16px rgba(20, 24, 28, .35);

	--measure: 34em;
	--wide: 1120px;

	--sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---- base */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.9;
	font-feature-settings: "palt" 1;
	text-underline-offset: 0.2em;
	-webkit-font-smoothing: antialiased;
}

img, video, svg, .chk-img { max-width: 100%; height: auto; }

/* 読み上げ専用 */
.chk-vh {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* hidden はクラス側の display に関係なく隠す */
[hidden] { display: none !important; }

a { color: inherit; text-decoration-color: var(--rule-strong); }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.01em;
}

/* 料金は桁をそろえる */
.chk-num, .chk-compare td, .chk-card-spec dd, .chk-score td,
.chk-deftable td, .chk-fig { font-variant-numeric: tabular-nums; }

.chk-inner {
	width: 100%;
	max-width: var(--wide);
	margin-inline: auto;
	padding-inline: 20px;
}

/* ---- header */

/* 重なり順: 追従ナビ15 < ヘッダー20 < 目次シート30 < ドロワー40 < 本文へ移動50 */

.chk-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--rule);
}
.chk-header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 64px;
}
.chk-logo { margin: 0; white-space: nowrap; display: flex; align-items: center; gap: 14px; line-height: 1; }
.chk-logo a { text-decoration: none; display: block; }
/* 土台の img { height: auto } が効くので、高さはCSS側で決める */
.chk-logo-img { display: block; width: auto; height: 46px; }
.chk-footer-logo .chk-logo-img { height: 54px; }
.chk-drawer-logo .chk-logo-img { height: 38px; }
.chk-logo small { font-size: 11.5px; font-weight: 400; color: var(--ink-3); letter-spacing: .04em; }

/* PCのグローバルナビ */
.chk-gnav { display: flex; align-items: center; gap: 4px; height: 100%; }
.chk-gnav-list {
	display: flex; align-items: center; gap: 2px;
	list-style: none; margin: 0; padding: 0;
	font-size: 13.5px; white-space: nowrap;
}
.chk-gnav-list { height: 100%; }
.chk-gnav-drop { height: 100%; display: flex; align-items: center; }

.chk-gnav-btn {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 12px; border-radius: var(--radius);
	background: none; border: 0; font: inherit; line-height: 1.4;
	color: var(--ink-2); text-decoration: none; cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.chk-gnav-btn { font-weight: 700; color: var(--ink); }
.chk-gnav-btn::after {
	content: ""; width: 6px; height: 6px; margin-top: -3px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg); transition: transform .2s ease, margin .2s ease;
}
.chk-gnav-btn:hover, .chk-gnav-drop.is-open .chk-gnav-btn { background: var(--surface-sunk); color: var(--accent-deep); }
.chk-gnav-drop.is-open .chk-gnav-btn::after { transform: rotate(-135deg); margin-top: 3px; }

/* パネル。ヘッダーの幅いっぱいに下へ出す */
.chk-panel {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--paper);
	border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
	box-shadow: var(--shadow-pop);
	animation: chk-drop .2s cubic-bezier(.2, .8, .2, 1);
}
.chk-panel-inner {
	display: grid; grid-template-columns: 220px minmax(0, 1fr);
	gap: 40px; padding-block: 28px 32px;
}
.chk-panel-lead { font-size: 12.5px; line-height: 1.85; color: var(--ink-2); white-space: normal; }
.chk-panel-lead p { margin: 0; }
.chk-panel-h { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 8px !important; }

@keyframes chk-drop {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

.chk-tiles {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 12px;
	list-style: none; margin: 0; padding: 0;
}
.chk-tiles a {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px;
	text-decoration: none; color: var(--ink);
}
.chk-tiles img {
	grid-column: 1 / -1; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--radius); margin-bottom: 6px; background: var(--surface-sunk);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), filter .3s ease;
}
.chk-tiles a:hover img { transform: translateY(-2px); filter: saturate(1.1) brightness(1.03); }
.chk-tile-name { font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.chk-tiles a:hover .chk-tile-name { color: var(--accent-deep); }
.chk-tile-n { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.chk-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; align-content: flex-start; }
.chk-chips a {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 9px 10px 9px 14px; border-radius: var(--radius);
	border: 1px solid var(--rule-strong); background: var(--surface);
	font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--ink); text-decoration: none;
	transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.chk-chips a span {
	min-width: 26px; padding: 1px 6px; border-radius: var(--radius); text-align: center;
	background: var(--surface-tint); color: var(--accent-deep);
	font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.chk-chips a:hover { border-color: var(--accent); background: var(--surface-sunk); color: var(--accent-deep); }

/* スマホのメニューボタン */
.chk-menu-btn {
	display: none;
	flex-direction: column; align-items: center; justify-content: center; gap: 5px;
	min-width: 52px; height: 46px; padding: 0 4px; margin-right: -8px;
	background: none; border: 0; border-radius: var(--radius); color: var(--ink); cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.chk-menu-btn:active { background: var(--surface-sunk); }
.chk-burger { display: grid; gap: 5px; width: 22px; }
.chk-burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.chk-burger i:nth-child(2) { width: 70%; justify-self: end; }
.chk-menu-label { font-size: 10px; font-weight: 700; letter-spacing: .02em; line-height: 1; white-space: nowrap; }

/* ---- drawer */

.chk-drawer { position: fixed; inset: 0; z-index: 40; }
.chk-drawer-backdrop {
	position: absolute; inset: 0;
	background: rgba(14, 24, 34, .48);
	opacity: 0; transition: opacity .3s ease;
}
.chk-drawer-sheet {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(420px, calc(100% - 44px));
	display: flex; flex-direction: column;
	background: var(--paper);
	box-shadow: -24px 0 48px -16px rgba(14, 24, 34, .28);
	transform: translateX(100%);
	transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.chk-drawer.is-open .chk-drawer-backdrop { opacity: 1; }
.chk-drawer.is-open .chk-drawer-sheet { transform: none; }

.chk-drawer-head {
	flex: 0 0 auto;
	display: flex; align-items: center; justify-content: space-between;
	height: 64px; padding: 0 10px 0 20px; border-bottom: 1px solid var(--rule);
}
.chk-drawer-logo { margin: 0; line-height: 1; }
.chk-drawer-close {
	position: relative; width: 46px; height: 46px;
	background: none; border: 0; border-radius: var(--radius); cursor: pointer; color: var(--ink);
}
.chk-drawer-close:active { background: var(--surface-sunk); }
.chk-drawer-close span::before, .chk-drawer-close span::after {
	content: ""; position: absolute; left: 13px; right: 13px; top: 50%;
	height: 2px; margin-top: -1px; border-radius: 2px; background: currentColor;
}
.chk-drawer-close span::before { transform: rotate(45deg); }
.chk-drawer-close span::after { transform: rotate(-45deg); }

.chk-drawer-body {
	flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
	padding: 18px 20px calc(32px + env(safe-area-inset-bottom));
}

/* 比較表への入口 */
.chk-drawer-hero {
	display: block; overflow: hidden; border-radius: var(--radius-lg);
	background: var(--accent); color: var(--accent-ink); text-decoration: none;
	box-shadow: var(--shadow);
}
.chk-drawer-hero img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: 60% 40%; }
.chk-drawer-hero-text {
	position: relative; display: block; padding: 14px 44px 15px 16px; line-height: 1.5;
}
.chk-drawer-hero-text b { display: block; font-size: 15.5px; }
.chk-drawer-hero-text span { display: block; margin-top: 2px; font-size: 12px; opacity: .88; }
.chk-drawer-hero-text::after {
	content: ""; position: absolute; right: 20px; top: 50%;
	width: 8px; height: 8px; margin-top: -4px;
	border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);
}

.chk-drawer-sec { margin-top: 28px; }
.chk-drawer-h {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 12px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); letter-spacing: .04em;
}
.chk-drawer-h::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* ドロワーの品目は横長タイル2列 */
.chk-tiles.is-drawer { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.chk-tiles.is-drawer a {
	height: 100%; align-content: center;
	grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 10px;
	padding: 6px; border-radius: var(--radius); background: var(--surface-sunk);
	transition: background .18s ease;
}
.chk-tiles.is-drawer a:active { background: var(--surface-tint); }
.chk-tiles.is-drawer img { grid-column: 1; grid-row: 1 / 3; width: 44px; height: 44px; aspect-ratio: 1; margin: 0; border-radius: var(--radius); }
.chk-tiles.is-drawer .chk-tile-name { align-self: end; font-size: 13px; line-height: 1.35; }
.chk-tiles.is-drawer .chk-tile-n { align-self: start; font-size: 11px; }

.chk-drawer .chk-chips a { padding: 8px 8px 8px 12px; font-size: 13px; }

/* ---- 下から出るシート（下部タブ・トップの目次） */

.chk-sheet { position: fixed; inset: 0; z-index: 30; }
.chk-sheet-backdrop { position: absolute; inset: 0; background: rgba(14, 24, 34, .48); opacity: 0; transition: opacity .3s ease; }
.chk-sheet-panel {
	position: absolute; left: 0; right: 0; bottom: 0; max-height: 82dvh; overflow-y: auto; overscroll-behavior: contain;
	padding: 0 16px calc(24px + env(safe-area-inset-bottom));
	background: var(--paper); border-radius: 18px 18px 0 0;
	transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.chk-sheet.is-open .chk-sheet-backdrop { opacity: 1; }
.chk-sheet.is-open .chk-sheet-panel { transform: none; }

.chk-sheet-head {
	position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
	padding: 14px 0 6px 4px; background: var(--paper);
}
.chk-sheet-head::before {
	content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
	border-radius: 4px; background: var(--rule-strong);
}
.chk-sheet-head p { margin: 0; font-size: 15px; font-weight: 700; }
.chk-sheet-lead { margin: 0 4px 16px; font-size: 12.5px; line-height: 1.8; color: var(--ink-3); }
.chk-sheet .chk-drawer-more { margin: 18px 4px 0; }

/* ---- 下部タブ（960px以下。ヘッダーがハンバーガーになる幅） */

.chk-tabbar { display: none; }

.chk-tabbar-list {
	display: flex; max-width: 560px; margin: 0 auto; padding: 0 4px;
	list-style: none;
}
.chk-tabbar-list > li { flex: 1 1 0; min-width: 0; display: flex; }

.chk-tab {
	position: relative; flex: 1; min-width: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	height: 60px; padding: 0 2px;
	background: none; border: 0; font: inherit; color: var(--ink); text-decoration: none; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.chk-tab-icon { flex: 0 0 auto; width: 24px; height: 24px; margin-block: 2px; transition: transform .15s ease; }
.chk-tab:active .chk-tab-icon, .chk-tab:active .chk-tab-well { transform: scale(.9); }
.chk-tab-label { font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: .02em; white-space: nowrap; }

/* 今いる分類と、開いているシートのタブは上辺に青線 */
.chk-tab::before {
	content: ""; position: absolute; top: -1px; left: 50%; width: 28px; height: 2px; margin-left: -14px;
	border-radius: 0 0 2px 2px; background: var(--accent);
	transform: scaleX(0); transition: transform .2s ease;
}
.chk-tab.is-now, .chk-tab[aria-expanded="true"] { color: var(--accent-deep); }
.chk-tab.is-now::before, .chk-tab[aria-expanded="true"]::before { transform: none; }
.chk-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; border-radius: var(--radius-lg); }

/* 料金計算だけボタンの形にする */
.chk-tab-well {
	display: grid; place-items: center; width: 44px; height: 28px;
	border-radius: var(--radius-lg); background: var(--accent); color: var(--accent-ink);
	transition: transform .15s ease, background .18s ease;
}
.chk-tab-well .chk-tab-icon { width: 20px; height: 20px; margin: 0; }
.chk-tab.is-calc { color: var(--accent-deep); }
.chk-tab.is-calc::before { display: none; }

@media (max-width: 960px) {
	body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

	.chk-tabbar {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
		padding-bottom: env(safe-area-inset-bottom);
		background: rgba(255, 255, 255, .97); border-top: 1px solid var(--rule);
		box-shadow: 0 -8px 24px -18px rgba(20, 24, 28, .35);
		transition: transform .25s cubic-bezier(.2, .8, .2, 1);
	}
	html.is-typing .chk-tabbar { transform: translateY(100%); }
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.chk-tabbar { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }
}
/* 目次タブはトップの追従ナビが隠れる幅だけ */
@media (min-width: 761px) {
	.chk-tabbar-list > .chk-tabbar-toc { display: none; }
}

/* 開いている間は背景を止める（chk-nav.js） */
.chk-drawer-sheet:focus, .chk-sheet-panel:focus { outline: none; }

html.is-locked body { position: fixed; left: 0; right: 0; overflow: hidden; }

.chk-main { display: block; }

/* ---- sections（共通） */

.chk-sec { padding-block: 88px; }
.chk-sec-sunk { background: var(--surface-sunk); }
.chk-sec-h { font-size: clamp(21px, 2.4vw, 28px); margin-bottom: 10px; }
.chk-sec-lede { margin: 0 0 40px; max-width: var(--measure); color: var(--ink-2); font-size: 14.5px; }

/* ---- 記事リスト */

.chk-list {
	list-style: none; margin: 0; padding: 0;
	border-top: 1px solid var(--rule-strong);
}
.chk-list-item { border-bottom: 1px solid var(--rule); }
.chk-list-item a {
	display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 22px;
	padding: 20px 4px; text-decoration: none;
	transition: background .15s ease;
}
.chk-list-item a:hover { background: var(--surface-sunk); }
.chk-list-thumb {
	display: block; grid-row: 1 / span 4; aspect-ratio: 16 / 10;
	background: var(--surface-sunk); border: 1px solid var(--rule); border-radius: var(--radius);
	overflow: hidden;
}
.chk-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chk-list-cat {
	justify-self: start; margin-bottom: 7px; padding: 2px 8px;
	background: var(--surface-tint); color: var(--accent-deep);
	font-size: 11.5px; font-weight: 700;
}
.chk-list-title { display: block; font-size: 17px; font-weight: 700; line-height: 1.65; }
.chk-list-item a:hover .chk-list-title { color: var(--accent); }
.chk-list-excerpt { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }
.chk-list-meta { display: block; margin-top: 10px; font-size: 12px; color: var(--ink-3); }

/* ---- 記事一覧のカード（/articles/・カテゴリー） */

.chk-postgrid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px;
}
.chk-pg-item { min-width: 0; }
.chk-pg-item > a {
	display: flex; flex-direction: column; height: 100%;
	text-decoration: none; color: var(--ink);
}
.chk-pg-thumb {
	display: block; aspect-ratio: 16 / 9; overflow: hidden;
	background: var(--surface-sunk);
	border: 1px solid var(--rule); border-radius: var(--radius);
}
.chk-pg-thumb img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .3s ease;
}
.chk-pg-item > a:hover .chk-pg-thumb img { transform: scale(1.03); }

.chk-pg-body { display: flex; flex-direction: column; flex: 1 1 auto; padding-top: 12px; }
.chk-pg-cat {
	align-self: start; margin-bottom: 8px; padding: 2px 8px;
	background: var(--surface-tint); color: var(--accent-deep);
	font-size: 11.5px; font-weight: 700; line-height: 1.6;
}
/* 見出しは3行で切り、カードの高さをそろえる */
.chk-pg-title {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
	font-size: 15.5px; font-weight: 700; line-height: 1.6;
}
.chk-pg-item > a:hover .chk-pg-title { color: var(--accent-deep); }
.chk-pg-excerpt {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
	margin-top: 7px; font-size: 13px; line-height: 1.8; color: var(--ink-2);
}
/* 日付はカードの底にそろえる */
.chk-pg-date { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--ink-3); }

/* 記事カテゴリーの名前だけのチップ。.chk-chips と同じ見た目 */
.chk-catchips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chk-catchips a {
	display: inline-block; padding: 9px 14px; border-radius: var(--radius);
	border: 1px solid var(--rule-strong); background: var(--surface);
	font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--ink); text-decoration: none;
	transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.chk-catchips a:hover { border-color: var(--accent); background: var(--surface-sunk); color: var(--accent-deep); }
.chk-catchips a.is-now {
	background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}

/* ---- buttons */

.chk-cta, .chk-btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: var(--radius);
	border: 1px solid var(--accent);
	background: var(--accent);
	color: var(--accent-ink);
	font-size: 14px; font-weight: 700; line-height: 1.5;
	text-decoration: none; white-space: nowrap;
	transition: background .18s ease, transform .12s ease;
}
.chk-cta:hover, .chk-btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.chk-cta:active, .chk-btn:active { transform: translateY(1px); }

.chk-btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--rule-strong); }
.chk-btn-ghost:hover { background: var(--surface-sunk); border-color: var(--rule-strong); color: var(--ink); }

.chk-compare .chk-cta { padding: 9px 16px; font-size: 13px; }

/* ---- article */

.chk-article { padding-block: 44px 88px; }
.chk-article-head { max-width: 46em; }
.chk-title { font-size: clamp(24px, 3.2vw, 34px); line-height: 1.5; margin-bottom: 16px; }
.chk-article-meta {
	display: flex; flex-wrap: wrap; gap: 16px;
	font-size: 12.5px; color: var(--ink-3);
	padding-bottom: 24px; border-bottom: 1px solid var(--rule);
}

.chk-body { max-width: var(--measure); font-size: 16px; }
/* h2 は下罫線（左だけ青） */
.chk-body > h2 {
	position: relative; margin: 64px 0 20px; padding: 0 0 14px;
	border-bottom: 2px solid var(--ink);
	font-size: 23px; line-height: 1.55; letter-spacing: -0.01em;
}
.chk-body > h2::after {
	content: ""; position: absolute; left: 0; bottom: -2px;
	width: 72px; height: 2px; background: var(--accent);
}
.chk-body > h3 {
	margin: 44px 0 14px; padding-left: 13px;
	border-left: 3px solid var(--accent);
	font-size: 18px; line-height: 1.6;
}
.chk-body > h4 {
	margin: 32px 0 10px; font-size: 15.5px; color: var(--ink);
}
.chk-body > h4::before { content: "▶"; margin-right: 7px; font-size: 10px; color: var(--accent); vertical-align: 1.5px; }
.chk-body > h2 + p, .chk-body > h3 + p, .chk-body > h4 + p { margin-top: 0; }
.chk-body p { margin: 0 0 1.7em; }
.chk-body ul, .chk-body ol { margin: 0 0 1.7em; padding-left: 1.4em; }
.chk-body li { margin-bottom: .55em; }
.chk-body a { color: var(--accent); }
/* 本文のボタンがリンク色の指定に負けないように */
.chk-body .chk-cta, .chk-body .chk-compare .chk-cta { color: var(--accent-ink); }
.chk-body .chk-btn-ghost { color: var(--ink); }
/* 記事内の比較表は本文幅に収める（申込ボタンを切らさない） */
.chk-body .chk-compare { min-width: 0; }
.chk-body .chk-compare .chk-col-name { min-width: 8.5em; }
.chk-body .chk-compare .chk-col-shipping { min-width: 8.5em; }
.chk-body .chk-compare .chk-col-price { min-width: 7.5em; }
.chk-body .chk-compare th, .chk-body .chk-compare td { padding: 12px 8px; }
.chk-body .chk-compare .chk-cta { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
.chk-body blockquote {
	margin: 0 0 1.7em; padding: 16px 20px;
	background: var(--surface-sunk); border-radius: var(--radius); color: var(--ink-2);
}
.chk-body figure { margin: 0 0 1.8em; }
.chk-body figcaption { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }

.chk-body .chk-table-wrap, .chk-body .chk-card, .chk-body .chk-score { max-width: min(100%, 860px); }

/* ---- PR表記 */

.chk-pr-head {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 24px; font-size: 12px; line-height: 1.6; color: var(--ink-3);
}
.chk-pr-head span {
	padding: 1px 7px; border-radius: 4px; background: var(--surface-sunk); border: 1px solid var(--rule-strong);
	font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--ink-2);
}

/* ---- 比較表 */

.chk-table-wrap {
	/* relative が無いと中の .chk-vh が body 基準で置かれ、スマホで画面幅を押し広げる */
	position: relative; overflow-x: auto; margin-block: 28px;
	border-top: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule);
}
/* 横にスクロールする表の案内とぼかし（chk-nav.js が付ける） */
.chk-scroll-hint {
	display: flex; align-items: center; justify-content: flex-end; gap: 8px;
	margin: 28px 0 8px; font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--ink-3);
}
.chk-scroll-hint::after {
	content: ""; width: 7px; height: 7px; margin-right: 4px;
	border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
	transform: rotate(45deg); animation: chk-nudge 1.6s ease-in-out infinite;
}
@keyframes chk-nudge {
	0%, 100% { translate: 0 0; }
	50% { translate: 4px 0; }
}
.chk-scroll-hint:not([hidden]) + .chk-scroller { margin-top: 0; }
/* 左はぼかさない（比較表は会社名の列が左に固定されている） */
.chk-scroller.is-scrollable:not(.is-end) {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

.chk-compare {
	width: 100%; min-width: 760px; border-collapse: collapse;
	font-size: 14px; background: var(--surface);
}
.chk-compare caption { caption-side: top; text-align: left; font-size: 16px; font-weight: 700; padding: 18px 0 8px; }
.chk-compare th, .chk-compare td {
	padding: 15px 12px; text-align: left; vertical-align: middle;
	border-bottom: 1px solid var(--rule);
}
.chk-compare tbody tr:last-child td { border-bottom: 0; }
.chk-compare thead th {
	font-size: 12px; font-weight: 700; letter-spacing: 0.05em; color: var(--ink-2);
	white-space: nowrap; border-bottom: 1px solid var(--rule-strong);
}
.chk-compare tbody tr:hover { background: var(--surface-sunk); }
.chk-compare small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }
/* 送料の下の注意書き（北海道・沖縄・離島） */
.chk-compare .chk-ship-note, .chk-calc-table .chk-ship-note { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }
.chk-ship-note.is-alert { color: #a24; }

.chk-col-rank { width: 56px; padding-left: 4px; text-align: center; }

/* 順位のバッジ。1〜3位は王冠、4位以下はグレーの丸 */
.chk-rank {
	position: relative; display: inline-grid; place-items: center; flex: 0 0 auto;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--surface-sunk); border: 1px solid var(--rule-strong);
	font-size: 12px; line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.chk-rank b { font-weight: 700; }
.chk-rank.is-top { width: 40px; height: 33px; border: 0; border-radius: 0; background: none; }
.chk-crown { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chk-crown path, .chk-crown circle, .chk-crown rect { fill: var(--crown); stroke: var(--crown-edge); stroke-width: 1; stroke-linejoin: round; }
.chk-rank.is-top b {
	position: relative; margin-top: 6px;
	font-size: 14px; font-weight: 800; color: #fff;
	text-shadow: 0 0 2px var(--crown-edge), 0 1px 1px var(--crown-edge);
}
.chk-rank.is-1 { --crown: #e2b01f; --crown-edge: #9a7300; }
.chk-rank.is-2 { --crown: #a9b2bb; --crown-edge: #5c656e; }
.chk-rank.is-3 { --crown: #c98450; --crown-edge: #87512a; }

/* サービス名は折り返さない。キャッチはその幅の中で折り返す */
.chk-name { font-size: 15.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.chk-catch { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); font-weight: 400; min-width: 10em; }
.chk-compare .chk-col-name { min-width: 11em; }
/* 注記の多い列は幅に上限を付け、サービス名に幅を回す */
.chk-compare .chk-col-price { min-width: 8.5em; }
.chk-compare .chk-unitnote { display: block; min-width: 12em; font-size: 13px; line-height: 1.7; }
.chk-compare .chk-col-shipping { min-width: 12em; }
.chk-compare .chk-col-storage, .chk-compare .chk-col-lead { white-space: nowrap; }
/* スマホは横スクロールなのでサービス名の列を左端に固定 */
@media (max-width: 760px) {
	.chk-compare .chk-col-name {
		position: sticky; left: 0; z-index: 1;
		min-width: 10em; max-width: 12em;
		background: var(--surface); box-shadow: 1px 0 0 var(--rule);
	}
}
.chk-na { color: var(--ink-3); font-size: 12.5px; }
.chk-col-score b { font-size: 19px; color: var(--accent-deep); }
.chk-col-score small { display: inline; color: var(--ink-3); }
.chk-col-checked { white-space: nowrap; font-size: 12.5px; color: var(--ink-2); }
.chk-col-checked.is-stale { color: #a24; }

.chk-updated { margin: 12px 0 0; font-size: 12px; color: var(--ink-3); }

/* ---- カード */

.chk-card {
	margin-block: 32px; padding: 26px 0;
	border-top: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule);
}
.chk-card-head { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.chk-card-thumb { flex: 0 0 148px; }
.chk-card-thumb img { border-radius: var(--radius); }
.chk-card-title { flex: 1 1 240px; min-width: 0; }
.chk-card-title > a { font-size: 20px; font-weight: 700; text-decoration: none; }
.chk-card-score { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.chk-card-score b { font-size: 17px; color: var(--accent-deep); }
.chk-card-catch { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }

.chk-card-spec {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
	gap: 12px; margin: 22px 0 0;
}
.chk-card-spec > div { padding: 14px 16px; background: var(--surface-sunk); border-radius: var(--radius); }
.chk-card-spec dt { font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-3); }
.chk-card-spec dd { margin: 3px 0 0; font-size: 16px; font-weight: 700; }
.chk-card-spec small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-3); font-weight: 400; }
.chk-card-cta { margin: 22px 0 0; }

/* バナーは実寸（多くは300×250）より大きくしない。右列に固定して左の情報を詰めない */
.chk-card.has-banner {
	display: grid; grid-template-columns: minmax(0, 1fr) 300px;
	grid-template-areas: "head media" "spec media" "cta media";
	grid-template-rows: auto auto 1fr;
	column-gap: 36px;
}
.chk-card.has-banner .chk-card-head { grid-area: head; }
.chk-card.has-banner .chk-card-spec { grid-area: spec; }
.chk-card.has-banner .chk-card-cta { grid-area: cta; }
.chk-card-media { grid-area: media; align-self: start; }
.chk-card-media a, .chk-svc-apply-media a { display: block; }
.chk-card-media img, .chk-svc-apply-media img {
	display: block; margin-inline: auto; max-width: 100%; height: auto;
}

.chk-svc-apply {
	display: grid; grid-template-columns: 300px minmax(0, 1fr);
	gap: 32px; align-items: center;
	margin-block: 48px 0; padding: 28px;
	background: var(--surface-sunk); border-radius: var(--radius-lg);
}
.chk-svc-apply-name {
	margin: 0; font-size: 20px; font-weight: 700; line-height: 1.5;
	text-wrap: balance;
}
.chk-svc-apply-catch { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.chk-svc-apply .chk-card-cta { margin-top: 20px; }

/* ---- 採点表 */

.chk-score {
	width: 100%; border-collapse: collapse; font-size: 14px; margin-block: 20px;
	background: var(--surface); border-top: 1px solid var(--rule-ink);
}
.chk-score th, .chk-score td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--rule); }
.chk-score thead th { font-size: 12px; letter-spacing: 0.05em; color: var(--ink-2); }
.chk-score tbody th, .chk-score tfoot th { font-weight: 700; font-size: 15px; }
.chk-score tfoot th, .chk-score tfoot td { border-bottom: 0; background: var(--surface-sunk); }
.chk-score tfoot b { font-size: 22px; color: var(--accent-deep); }
.chk-score b { font-size: 17px; }

/* 背景トラックは敷かない */
.chk-bar { display: inline-block; width: 84px; height: 3px; margin-right: 12px; vertical-align: middle; }
.chk-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.chk-score-note { margin: 10px 0 0; font-size: 12px; }
.chk-score-note a { color: var(--accent); }

/* ---- 固定ページ */

.chk-page { padding-block: 44px 88px; }
.chk-page .chk-body { max-width: 40em; }
.chk-page .chk-body > h2:first-child { margin-top: 36px; }
.chk-page-updated { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-3); }

/* ---- 2カラム（下層ページ） */

.chk-layout-wrap { padding-block: 32px 96px; }
.chk-layout {
	display: grid; grid-template-columns: minmax(0, 1fr) 300px;
	gap: 56px; align-items: start;
}
.chk-layout-main { min-width: 0; }
/* サイドバーなし（品目別・条件別）。表を全幅で見せる */
.chk-layout.is-wide { grid-template-columns: minmax(0, 1fr); }
.chk-layout.is-wide .chk-compare { min-width: 760px; }
.chk-compare .chk-col-storage, .chk-compare .chk-col-lead { white-space: nowrap; }
.chk-layout-main .chk-article { padding-block: 0; }
.chk-layout-main .chk-body,
.chk-layout-main .chk-article-head,
.chk-layout-main .chk-pr-head,
.chk-layout-main .chk-form,
.chk-layout-main .chk-form-done { max-width: none; }
.chk-layout-main .chk-hero-img,
.chk-layout-main .chk-svc-h,
.chk-layout-main .chk-empty,
.chk-layout-main .chk-deftable { max-width: none; }
.chk-layout-main .chk-body > p, .chk-layout-main .chk-body > ul, .chk-layout-main .chk-body > ol { max-width: 42em; }

.chk-lede { margin: 0 0 18px; font-size: 15px; line-height: 1.95; color: var(--ink-2); max-width: 42em; }
.chk-lede p { margin: 0; }
.chk-count { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.chk-count b { font-size: 20px; color: var(--accent-deep); margin-right: 2px; font-variant-numeric: tabular-nums; }
/* 列が多い表は横スクロール */
.chk-layout-main .chk-compare { min-width: 720px; }

.chk-side { display: grid; gap: 20px; position: sticky; top: 88px; max-height: calc(100dvh - 104px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 8px; }
.chk-side-box { padding: 18px 18px 20px; border-radius: var(--radius-lg); background: var(--surface-sunk); }
.chk-side-h {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 12px; font-size: 13.5px; font-weight: 700; line-height: 1.5;
}
.chk-side-h::after { content: ""; flex: 1; height: 1px; background: var(--rule-strong); }

.chk-side-rank { list-style: none; margin: 0 0 14px; padding: 0; }
.chk-side-rank li {
	display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0 10px; align-items: baseline;
	padding: 10px 0; border-top: 1px solid var(--rule);
}
.chk-side-rank li:first-child { border-top: 0; padding-top: 2px; }
.chk-side-rank .chk-rank { grid-row: 1 / 3; align-self: start; justify-self: center; }
.chk-side-name { font-size: 13.5px; font-weight: 700; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
.chk-side-name:hover { color: var(--accent-deep); text-decoration: underline; }
.chk-side-fig { font-size: 16px; font-weight: 700; color: var(--accent-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chk-side-fig small { font-size: 10.5px; margin-left: 1px; }
.chk-side-sub { grid-column: 2 / 4; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }

.chk-side-cta {
	display: block; padding: 12px 14px; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink);
	font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; transition: background .18s ease;
}
.chk-side-cta:hover { background: var(--accent-deep); }
.chk-side-more { display: block; margin-top: 10px; font-size: 12.5px; text-align: center; color: var(--accent-deep); }

.chk-side-links { list-style: none; margin: 0; padding: 0; }
.chk-side-links li + li { border-top: 1px solid var(--rule); }
.chk-side-links a {
	position: relative; display: block; padding: 10px 22px 10px 0;
	font-size: 13.5px; font-weight: 700; line-height: 1.5; text-decoration: none;
}
.chk-side-links a small { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.chk-side-links a::after {
	content: ""; position: absolute; right: 4px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
	border-top: 1.5px solid var(--ink-3); border-right: 1.5px solid var(--ink-3); transform: rotate(45deg);
}
.chk-side-links a:hover { color: var(--accent-deep); }

.chk-tiles.is-side { gap: 6px; }
.chk-tiles.is-side a { background: var(--surface); padding: 5px; gap: 0 8px; grid-template-columns: 36px minmax(0, 1fr); }
.chk-tiles.is-side img { width: 36px; height: 36px; }
.chk-tiles.is-side .chk-tile-name { font-size: 12.5px; }
.chk-chips.is-side { gap: 6px; }
.chk-chips.is-side a { padding: 6px 6px 6px 10px; font-size: 12.5px; gap: 8px; }

/* ---- 本文の表（ブロックエディタの表） */

.chk-body .wp-block-table { position: relative; margin: 28px 0; overflow-x: auto; }
.chk-body .wp-block-table table {
	width: 100%; border-collapse: collapse;
	font-size: 14px; background: var(--surface); font-variant-numeric: tabular-nums;
}
/* コアの表ブロックの全セル罫線を消し、比較表と同じ横線だけに引き直す */
.chk-body .wp-block-table thead,
.chk-body .wp-block-table tfoot,
.chk-body .wp-block-table th,
.chk-body .wp-block-table td { border: 0; }
.chk-body .wp-block-table thead th {
	padding: 11px 12px; border-bottom: 2px solid var(--rule-ink);
	font-size: 12.5px; font-weight: 700; text-align: left; white-space: nowrap;
}
.chk-body .wp-block-table td {
	padding: 12px; border-bottom: 1px solid var(--rule);
	vertical-align: top; line-height: 1.7; white-space: nowrap;
}
.chk-body .wp-block-table tbody tr:last-child td { border-bottom: 1px solid var(--rule-ink); }
/* 1列目（品目・会社名）は折り返し、数字の列は折り返さない。幅指定がないと1列目が潰れる */
.chk-body .wp-block-table th:first-child,
.chk-body .wp-block-table td:first-child { white-space: normal; min-width: 9.5em; }
.chk-body .wp-block-table td:first-child { font-weight: 700; }
.chk-body .wp-block-table figcaption { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }

/* スマホは横に送る。1列目は固定 */
@media (max-width: 760px) {
	.chk-body .wp-block-table table { font-size: 13.5px; }
	.chk-body .wp-block-table th, .chk-body .wp-block-table td { padding: 10px; }
	.chk-body .wp-block-table th:first-child,
	.chk-body .wp-block-table td:first-child {
		position: sticky; left: 0; z-index: 1;
		background: var(--surface); box-shadow: 1px 0 0 var(--rule);
	}
}

/* ---- よくある質問（本文の後・メタから描画） */

.chk-faq-block {
	margin: 64px 0 0; padding: 32px 32px 8px;
	background: var(--surface-sunk); border-radius: var(--radius-lg);
}
.chk-faq-h {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 20px; font-size: 21px;
}
.chk-faq-h::after { content: ""; flex: 1; height: 1px; background: var(--rule-strong); }
.chk-faq { margin: 0; }
.chk-faq-item { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--rule); }
.chk-faq-item:last-child { border-bottom: 0; }
.chk-faq dt {
	position: relative; padding-left: 1.7em;
	font-size: 16px; font-weight: 700; line-height: 1.6;
}
.chk-faq dt::before {
	content: "Q"; position: absolute; left: 0; top: 0;
	font-family: var(--mono); font-weight: 700; color: var(--accent);
}
.chk-faq dd {
	position: relative; margin: 10px 0 0; padding-left: 1.7em;
	font-size: 14.5px; line-height: 1.95; color: var(--ink);
}
.chk-faq dd::before {
	content: "A"; position: absolute; left: 0; top: 0;
	font-family: var(--mono); font-weight: 700; color: var(--ink-3);
}

@media (max-width: 760px) {
	.chk-faq-block { margin-top: 44px; padding: 22px 20px 4px; border-radius: var(--radius-lg); }
	.chk-faq-h { font-size: 18.5px; }
}

/* ---- ページ見出しの写真 */

/* 品目・条件別ページ。見出しと説明を左、写真を右 */
.chk-pagehead {
	display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 48px; align-items: center; margin-bottom: 12px;
}
.chk-pagehead .chk-title { margin-bottom: 14px; }
.chk-pagehead-photo { margin: 0; }
.chk-pagehead-photo img {
	display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
}

/* 固定ページ。見出しの下に横長の写真 */
.chk-page-photo { margin: 4px 0 36px; }
.chk-page-photo img { display: block; width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: var(--radius-lg); }

@media (max-width: 760px) {
	.chk-pagehead { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.chk-pagehead-photo { order: -1; }
	.chk-pagehead-photo img { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
	.chk-page-photo img { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
}

/* ---- お問い合わせフォーム */

.chk-form { max-width: 40em; margin-top: 12px; }
.chk-field { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.chk-field > label, .chk-field > legend {
	display: flex; align-items: center; gap: 8px;
	margin-bottom: 8px; padding: 0; font-size: 14.5px; font-weight: 700;
}
.chk-req {
	padding: 1px 6px; border-radius: 4px; background: var(--surface-tint); color: var(--accent-deep);
	font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
}
.chk-field input[type="text"], .chk-field input[type="email"], .chk-field textarea {
	display: block; width: 100%;
	padding: 12px 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius);
	background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.7;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.chk-field textarea { resize: vertical; min-height: 180px; }
.chk-field input:focus, .chk-field textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11, 95, 174, .16); }
.chk-field input[aria-invalid="true"], .chk-field textarea[aria-invalid="true"] { border-color: #c2412d; background: #fff8f6; }
.chk-field-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--ink-3); }
.chk-field-err { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: #b23a27; }
.chk-form-alert {
	margin: 0 0 28px; padding: 14px 16px; border-radius: var(--radius);
	background: #fff4f1; border: 1px solid #f1c7bd; color: #8f2e1f; font-size: 14px;
}

.chk-choices { display: grid; gap: 8px; }
.chk-choice {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius);
	font-size: 14.5px; cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.chk-choice:hover { border-color: var(--accent); }
.chk-choice:has(input:checked) { border-color: var(--accent); background: var(--surface-sunk); }
.chk-choice input, .chk-agree input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
.chk-agree { display: flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; }

.chk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.chk-form-submit { min-width: 220px; padding: 15px 28px; font-size: 15px; border: 0; cursor: pointer; font-family: inherit; }

.chk-form-done {
	max-width: 40em; margin-top: 12px; padding: 24px 24px 20px;
	border-radius: var(--radius); background: var(--surface-sunk); border-left: 4px solid var(--accent);
}
.chk-form-done b { display: block; margin-bottom: 6px; font-size: 17px; }
.chk-form-done p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

.chk-deftable {
	width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 1.8em;
	background: var(--surface); border-top: 1px solid var(--rule-ink);
}
.chk-deftable th, .chk-deftable td {
	padding: 14px 16px; text-align: left; vertical-align: top;
	border-bottom: 1px solid var(--rule);
}
.chk-deftable th { width: 32%; font-weight: 700; white-space: nowrap; background: var(--surface-sunk); }
.chk-deftable thead th { font-size: 12px; letter-spacing: .05em; color: var(--ink-2); }

/* ---- pagination */

.pagination { margin-top: 56px; font-size: 14px; }
.pagination .page-numbers {
	display: inline-block; min-width: 40px; padding: 9px 12px; margin-right: 6px;
	text-align: center; border: 1px solid var(--rule); border-radius: var(--radius);
	background: var(--surface); text-decoration: none;
}
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pagination .page-numbers.current { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---- footer */

.chk-footer { border-top: 1px solid var(--rule); background: var(--surface-sunk); padding-block: 64px calc(32px + env(safe-area-inset-bottom)); }
.chk-footer-grid {
	display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, .85fr));
	gap: 40px 28px; padding-bottom: 40px;
}
.chk-footer-about { max-width: 30em; font-size: 13px; line-height: 1.9; color: var(--ink-2); }
.chk-footer-about p { margin: 0 0 18px; }
.chk-footer-logo { margin-bottom: 14px !important; line-height: 1; }
.chk-footer-logo a { text-decoration: none; display: inline-block; }
.chk-footer-cta {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 10px 16px; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink);
	font-size: 13px; font-weight: 700; text-decoration: none; transition: background .18s ease;
}
.chk-footer-cta::after { content: ""; width: 6px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.chk-footer-cta:hover { background: var(--accent-deep); }

.chk-footer-h { margin: 0 0 14px; font-size: 13px; font-weight: 700; color: var(--ink); }
.chk-flist { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.6; }
.chk-flist li + li { margin-top: 9px; }
.chk-flist a { text-decoration: none; color: var(--ink-2); transition: color .18s ease; }
.chk-flist a:hover { color: var(--accent); text-decoration: underline; }
.chk-footer-col:first-of-type .chk-flist { columns: 2; column-gap: 20px; }
.chk-footer-col:first-of-type .chk-flist li { break-inside: avoid; }
.chk-footer-col:first-of-type .chk-flist li + li { margin-top: 0; }
.chk-footer-col:first-of-type .chk-flist li { padding-bottom: 9px; }

/* PR表記と料金の時点（1行） */
.chk-disclosure {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
	margin: 0; padding-top: 20px; border-top: 1px solid var(--rule-strong);
	font-size: 12px; line-height: 1.7; color: var(--ink-3);
}
.chk-disclosure .is-pr {
	padding: 1px 7px; border-radius: 4px; background: var(--surface); border: 1px solid var(--rule-strong);
	font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--ink-2);
}

.chk-copy { margin: 24px 0 0; font-size: 12px; color: var(--ink-3); }

/* ---- 補助パーツ */

.chk-skip {
	position: absolute; left: -9999px; top: 0; z-index: 50;
	padding: 10px 16px; background: var(--accent); color: var(--accent-ink); font-size: 14px;
}
.chk-skip:focus { left: 0; }

.chk-crumbs { margin-bottom: 24px; font-size: 12px; color: var(--ink-3); }
.chk-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; list-style: none; margin: 0; padding: 0; }
.chk-crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--rule-strong); }
.chk-crumbs a { text-decoration: none; }
.chk-crumbs a:hover { color: var(--accent); text-decoration: underline; }

.chk-hero-img { margin: 32px 0 40px; max-width: min(100%, 860px); }
.chk-hero-img img {
	width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
	border-radius: var(--radius); border: 1px solid var(--rule);
}

.chk-svc-h {
	font-size: 21px; margin: 60px 0 18px; padding-left: 14px;
	border-left: 4px solid var(--accent); max-width: min(100%, 860px);
}
.chk-svc-days { font-size: 14px; color: var(--ink-2); }
.chk-svc-days b { font-size: 17px; color: var(--accent-deep); }

.chk-compare-narrow { min-width: 520px; }

.chk-empty {
	max-width: min(100%, 860px);
	padding: 28px 26px; margin-block: 28px;
	background: var(--surface-sunk); border-radius: var(--radius); color: var(--ink-2); font-size: 14px;
}
.chk-empty b { display: block; margin-bottom: 6px; font-size: 16px; color: var(--ink); }

.chk-page .chk-deftable, .chk-article .chk-deftable { max-width: min(100%, 860px); }

/* ---- 記事に差し込む案件紹介 */

/* 本文幅からはみ出させない */
.chk-body .chk-offer,
.chk-body .chk-rank-list,
.chk-body .chk-proscons,
.chk-body .chk-box { max-width: min(100%, 860px); }

/* 記事内の案件紹介。本文の .chk-body p などに負けないよう .chk-offer から書く */
.chk-offer {
	--offer-pad: 26px;
	margin-block: 40px; overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--rule); border-radius: var(--radius-lg);
	box-shadow: 0 18px 40px -30px rgba(20, 24, 28, .45);
}

/* 画像と社名は重ねない。左にバナーか写真、右に社名を置く */
.chk-offer .chk-offer-head {
	display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 22px; align-items: center;
	padding: var(--offer-pad);
	background: var(--surface-sunk);
	border-bottom: 1px solid var(--rule);
}
.chk-offer .chk-offer-media { min-width: 0; }
/* 提携済みはASPのバナー。素材は拡大せず、実寸より大きくしない */
.chk-offer .chk-offer-media a { display: block; }
.chk-offer .chk-offer-media img {
	display: block; margin-inline: auto;
	max-width: 100%; height: auto;
	border-radius: var(--radius);
}
/* 写真はバナーと同じ6:5に切って、カードの形をそろえる */
.chk-offer.has-photo .chk-offer-photo-img {
	width: 100%; aspect-ratio: 6 / 5; object-fit: cover; object-position: center 45%;
}
.chk-offer .chk-offer-headline { min-width: 0; }
.chk-offer .chk-offer-label {
	display: inline-block; margin: 0 0 10px; padding: 3px 10px;
	background: var(--accent-deep); border-radius: 2px;
	font-size: 12px; font-weight: 700; line-height: 1.6; letter-spacing: 0.04em;
	color: #fff;
}
.chk-offer .chk-offer-name {
	display: flex; align-items: center; gap: 10px;
	margin: 0; font-size: clamp(20px, 2.4vw, 24px); font-weight: 700;
	line-height: 1.35; letter-spacing: 0.01em;
}
.chk-offer .chk-offer-name a { color: var(--ink); text-decoration: none; }
.chk-offer .chk-offer-name a:hover { color: var(--accent-deep); text-decoration: underline; text-decoration-thickness: 1px; }
.chk-offer .chk-offer-logo {
	flex: 0 0 40px; width: 40px; height: 40px; padding: 4px;
	background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
}
.chk-offer .chk-offer-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.chk-offer .chk-offer-catch {
	margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-2);
}
.chk-offer .chk-offer-score {
	display: inline-flex; align-items: baseline; gap: 2px;
	margin: 12px 0 0; padding: 5px 12px 6px;
	background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
	font-size: 11px; line-height: 1; color: var(--ink-3); white-space: nowrap;
}
.chk-offer .chk-offer-score span { margin-right: 4px; }
.chk-offer .chk-offer-score b {
	font-size: 22px; color: var(--accent-deep);
	font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}

.chk-offer .chk-offer-body { padding: 22px var(--offer-pad) var(--offer-pad); }

/* 料金は預かり札の形。半券と本体をミシン目で分ける */
.chk-offer .chk-offer-price {
	display: grid; grid-template-columns: 58px minmax(0, 1fr);
	border: 1px solid var(--rule-strong); border-radius: var(--radius);
	background: var(--surface);
}
.chk-offer .chk-offer-price-key {
	position: relative; display: flex; align-items: center; justify-content: center;
	margin: 0; padding: 22px 0 12px;
	background: var(--surface-sunk);
	border-right: 1px dashed var(--rule-strong);
	border-radius: var(--radius) 0 0 var(--radius);
	font-size: 12px; font-weight: 700; letter-spacing: 0.3em; color: var(--ink-3);
	writing-mode: vertical-rl;
}
.chk-offer .chk-offer-price-key::before {
	content: ""; position: absolute; top: 9px; left: 50%;
	width: 8px; height: 8px; margin-left: -4px;
	border: 1px solid var(--rule-strong); border-radius: 50%; background: var(--surface);
}
.chk-offer .chk-offer-price-val {
	margin: 0; padding: 14px 18px;
	font-size: 17px; font-weight: 700; line-height: 1.6;
	font-variant-numeric: tabular-nums; color: var(--accent-deep);
	align-self: center;
}
.chk-offer .chk-offer-price-val small {
	display: block; margin-top: 2px;
	font-size: 12.5px; font-weight: 400; color: var(--ink-3);
}

/* 保管・送料・納期は3列、縦罫線で区切る */
.chk-offer .chk-offer-spec {
	display: flex; margin: 14px 0 0; padding: 0;
}
.chk-offer .chk-offer-spec > div { flex: 1 1 0; min-width: 0; padding: 4px 16px 14px; }
/* 納期は注記が長い会社があるので広め */
.chk-offer .chk-offer-spec > div:nth-child(3) { flex-grow: 1.6; }
.chk-offer .chk-offer-spec > div:first-child { padding-left: 2px; }
.chk-offer .chk-offer-spec > div + div { border-left: 1px solid var(--rule); }
.chk-offer .chk-offer-spec dt { font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink-3); }
.chk-offer .chk-offer-spec dd { margin: 3px 0 0; font-size: 14.5px; font-weight: 700; line-height: 1.55; }

.chk-offer .chk-offer-pros { margin: 18px 0 0; padding: 0; list-style: none; }
.chk-offer .chk-offer-pros li {
	position: relative; margin: 0; padding: 3px 0 3px 28px;
	font-size: 14.5px; line-height: 1.7;
}
.chk-offer .chk-offer-pros li::before {
	content: ""; position: absolute; left: 0; top: 0.5em;
	width: 18px; height: 18px; border-radius: 50%; background: var(--surface-tint);
}
.chk-offer .chk-offer-pros li::after {
	content: ""; position: absolute; left: 6px; top: calc(0.5em + 4px);
	width: 5px; height: 9px;
	border: solid var(--accent); border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.chk-offer .chk-offer-actions {
	display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
	gap: 14px 24px; margin-top: 20px; padding-top: 22px;
	border-top: 1px solid var(--rule);
}
.chk-offer .chk-offer-cta { margin: 0; flex: 0 1 auto; }
.chk-offer .chk-offer-cta .chk-cta {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	min-width: 280px; padding: 16px 26px;
	border-radius: 6px; font-size: 16px;
	box-shadow: 0 10px 22px -14px rgba(11, 95, 174, .9);
}
/* 外部サイトへ移ることを矢印で示す */
.chk-offer .chk-offer-cta .chk-cta::after {
	content: ""; flex: 0 0 auto; width: 16px; height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.chk-offer .chk-offer-cta .chk-micro { margin-top: 8px; }
.chk-offer .chk-offer-more {
	margin: 0; padding-top: 14px; font-size: 13.5px; line-height: 1.6;
}
.chk-offer .chk-offer-more a { color: var(--accent); text-decoration: none; }
.chk-offer .chk-offer-more a::after { content: " ›"; }
.chk-offer .chk-offer-more a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: no-preference) {
	.chk-offer .chk-offer-cta .chk-cta::after { transition: transform .18s ease; }
	.chk-offer .chk-offer-cta .chk-cta:hover::after { transform: translateX(3px); }
}

/* ボタン単体（chk-micro で押す前の説明を添える） */
.chk-btnwrap { margin-block: 26px; }
.chk-cta-lg { padding: 15px 30px; font-size: 15.5px; }
.chk-micro { display: block; margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--ink-3); }

/* 文中のテキストリンク。外部へ出ることを矢印で示す */
.chk-textlink { font-weight: 700; }
.chk-textlink::after { content: "\2197"; margin-left: 2px; font-size: 0.85em; color: var(--ink-3); }

/* ランキング */
.chk-rank-list { display: grid; gap: 12px; margin-block: 32px; }
.chk-rank-item {
	display: flex; gap: 14px; padding: 16px 18px;
	background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
.chk-rank-no { flex: 0 0 auto; padding-top: 2px; }
.chk-rank-body { flex: 1 1 auto; min-width: 0; }
.chk-rank-thumb { float: right; width: 84px; margin: 0 0 8px 14px; }
.chk-rank-thumb img { width: 100%; border-radius: var(--radius); }
.chk-rank-name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.45; }
.chk-rank-name a { color: var(--ink); text-decoration: none; }
.chk-rank-name a:hover { color: var(--accent); text-decoration: underline; }
.chk-rank-catch { margin: 5px 0 0; font-size: 13.5px; color: var(--ink-2); }
.chk-rank-price { margin: 9px 0 0; font-size: 15px; font-weight: 700; }
.chk-rank-price small { margin-left: 8px; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.chk-rank-cta { margin: 12px 0 0; clear: both; }

/* 向いている点・注意したい点。片側だけなら1列 */
.chk-proscons {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 12px; margin-block: 28px;
}
.chk-pc-col {
	padding: 16px 18px; background: var(--surface);
	border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
.chk-pc-col.is-cons { background: var(--hot-sunk); border-color: #f0ded9; }
.chk-pc-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.03em; }
.chk-pc-col.is-cons .chk-pc-title { color: var(--hot); }
.chk-pc-col ul { margin: 0; padding-left: 1.25em; }
.chk-pc-col li { font-size: 14px; line-height: 1.75; }

/* ASPのバナーは素材サイズを超えて引き伸ばさない */
.chk-banner { margin-block: 28px; }
.chk-banner.is-center { margin-inline: auto; text-align: center; }
.chk-banner.is-right { margin-left: auto; text-align: right; }
.chk-banner a { display: inline-block; max-width: 100%; }
.chk-banner img { max-width: 100%; height: auto; }
/* 計測用の1×1画像 */
.chk-px { position: absolute; width: 1px; height: 1px; border: 0; }

/* 注意書き・補足。左線の色で種類を示す */
.chk-box {
	margin-block: 28px; padding: 18px 20px;
	background: var(--surface-sunk);
	border: 1px solid var(--rule); border-left: 4px solid var(--rule-strong);
	border-radius: var(--radius-lg);
}
.chk-box.is-warn { background: var(--hot-sunk); border-color: #f0ded9; border-left-color: var(--hot); }
.chk-box.is-good { background: var(--surface-tint); border-color: #d6e4f1; border-left-color: var(--accent); }
.chk-box-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.chk-box.is-warn .chk-box-title { color: var(--hot); }
.chk-box-body > :last-child { margin-bottom: 0; }
.chk-box-body p { margin: 0 0 0.8em; font-size: 14.5px; line-height: 1.85; }

/* ---- responsive */

@media (max-width: 1100px) {
	.chk-logo small { display: none; }
	.chk-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 10px; }
	.chk-panel-inner { grid-template-columns: 180px minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 1000px) {
	.chk-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.chk-side { position: static; max-height: none; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 960px) {
	.chk-postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
	.chk-gnav { display: none; }
	.chk-menu-btn { display: flex; }
	.chk-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }
	.chk-footer-about { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 600px) {
	.chk-side { grid-template-columns: minmax(0, 1fr); }
	.chk-layout-wrap { padding-block: 24px 64px; }
	.chk-footer { padding-block: 44px calc(96px + env(safe-area-inset-bottom)); }
	.chk-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding-bottom: 28px; }
	.chk-footer-col:first-of-type { grid-column: 1 / -1; }
	.chk-footer-col:first-of-type .chk-flist { columns: 3; column-gap: 12px; }

	/* 記事一覧は写真を左に置いた横並びにして件数を優先する */
	.chk-postgrid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.chk-pg-item { border-bottom: 1px solid var(--rule); }
	.chk-pg-item:first-child { border-top: 1px solid var(--rule); }
	.chk-pg-item > a {
		display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 14px;
		padding: 16px 2px;
	}
	.chk-pg-thumb { grid-row: 1 / span 2; aspect-ratio: 4 / 3; align-self: start; }
	.chk-pg-item > a:hover .chk-pg-thumb img { transform: none; }
	.chk-pg-body { padding-top: 0; }
	.chk-pg-cat { margin-bottom: 5px; }
	.chk-pg-title { font-size: 14.5px; -webkit-line-clamp: 3; }
	.chk-pg-excerpt { display: none; }
	.chk-pg-date { padding-top: 7px; }

	/* 案件紹介は左右の余白を詰めて本文と幅をそろえる */
	.chk-offer { --offer-pad: 16px; margin-block: 32px; }
	.chk-offer .chk-offer-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.chk-offer .chk-offer-media { max-width: 300px; margin-inline: auto; }
	.chk-offer .chk-offer-name { font-size: 21px; }
	.chk-offer .chk-offer-catch { font-size: 13px; }
	.chk-offer .chk-offer-score { margin-top: 10px; }
	.chk-offer .chk-offer-body { padding-top: 18px; }
	.chk-offer .chk-offer-price { grid-template-columns: 44px minmax(0, 1fr); }
	.chk-offer .chk-offer-price-val { padding: 12px 14px; font-size: 16px; }
	/* 3列だと納期の注記が細切れになるので、見出しと値を横に並べた行にする */
	.chk-offer .chk-offer-spec { display: block; margin-top: 6px; }
	.chk-offer .chk-offer-spec > div,
	.chk-offer .chk-offer-spec > div:first-child {
		display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px;
		padding: 11px 2px; border-top: 1px solid var(--rule);
	}
	.chk-offer .chk-offer-spec > div + div { border-left: 0; }
	.chk-offer .chk-offer-spec > div:first-child { border-top: 0; }
	.chk-offer .chk-offer-spec dt { padding-top: 2px; }
	.chk-offer .chk-offer-spec dd { margin: 0; font-size: 14px; }
	.chk-offer .chk-offer-actions { display: block; }
	.chk-offer .chk-offer-cta .chk-cta { display: flex; min-width: 0; width: 100%; }
	.chk-offer .chk-offer-more { text-align: center; }
	.chk-rank-item { padding: 14px 14px; gap: 10px; }
	.chk-rank-thumb { width: 64px; margin-left: 10px; }
	.chk-box { padding: 16px 16px; }
	/* ボタンは指で押せる幅に。文言が長い会社もあるので折り返しを許す */
	.chk-btnwrap .chk-cta, .chk-offer-cta .chk-cta { display: block; text-align: center; white-space: normal; }
	.chk-btnwrap .chk-micro, .chk-offer-cta .chk-micro { text-align: center; }
}

@media (max-width: 760px) {
	.chk-card.has-banner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "head" "media" "spec" "cta";
		grid-template-rows: none;
	}
	.chk-card-media { width: 100%; max-width: 300px; margin: 22px auto 0; }
	.chk-svc-apply { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 16px 24px; }
	.chk-svc-apply-media { width: 100%; max-width: 300px; margin-inline: auto; }
	.chk-svc-apply-body { text-align: center; }
	.chk-svc-apply .chk-cta { display: block; white-space: normal; }
}

@media (max-width: 720px) {

	.chk-sec { padding-block: 56px; }
	.chk-card-thumb { flex-basis: 100%; }
}

/* ---- 動きの抑制 */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
	.chk-header, .chk-footer, .chk-cta, .chk-menu-btn, .chk-drawer, .chk-toc { display: none; }
	.chk-compare { min-width: 0; font-size: 11px; }
}

/* ---- 記事への導線 */

/* ヘッダーのパネル（お役立ち記事） */
.chk-panel-more, .chk-drawer-more, .chk-side-more {
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--accent-deep);
	text-decoration: none;
}
.chk-panel-more::after, .chk-drawer-more::after {
	content: ""; width: 5px; height: 5px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
}
.chk-panel-more:hover, .chk-drawer-more:hover { text-decoration: underline; }
.chk-panel-arts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; }
.chk-panel-sub {
	margin: 0 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3);
}

/* 記事カテゴリーのタイル。メニュー・一覧・ドロワーで共用 */
.chk-cats {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px;
}
.chk-cats a {
	display: block; text-decoration: none; color: var(--ink);
	border-radius: var(--radius); overflow: hidden;
	transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.chk-cats img {
	width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
	background: var(--surface-sunk); border-radius: var(--radius);
	transition: filter .25s ease;
}
.chk-cat-text { display: block; }
/* 余白はここで取る。.chk-cat-text に付けるとチップ（.chk-catchips）で上が二重になる */
.chk-cats .chk-cat-text { padding: 10px 2px 0; }
.chk-cat-name { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.5; }
.chk-cat-note { display: block; margin-top: 3px; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.chk-cats a:hover { transform: translateY(-2px); }
.chk-cats a:hover img { filter: saturate(1.08) brightness(1.03); }
.chk-cats a:hover .chk-cat-name { color: var(--accent-deep); }
.chk-cats a.is-now .chk-cat-name { color: var(--accent-deep); }
.chk-cats a.is-now img { outline: 2px solid var(--accent); outline-offset: -2px; }

/* 少数のとき1枚だけ巨大にならないよう auto-fill */
.chk-cats.is-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 18px; }
.chk-cats.is-drawer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }

.chk-catnav { margin: 4px 0 28px; }
.chk-catnav-h {
	margin: 0 0 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3);
}

/* 記事一覧・カテゴリーの導入 */
.chk-arc-head {
	display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start;
	padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--rule);
}
.chk-arc-head .chk-title { margin-bottom: 14px; }
.chk-arc-head .chk-lede { max-width: 42em; font-size: 15.5px; line-height: 1.95; color: var(--ink-2); }
.chk-arc-box {
	margin: 24px 0 0; border: 1px solid var(--rule-strong); border-radius: var(--radius);
	background: var(--surface);
}
.chk-arc-box-h {
	margin: 0; padding: 9px 16px; border-bottom: 1px solid var(--rule);
	background: var(--surface-sunk);
	font-size: 12.5px; font-weight: 700; color: var(--ink);
}
.chk-arc-points {
	list-style: none; margin: 0; padding: 14px 16px;
	display: grid; gap: 10px;
}
.chk-arc-points li {
	position: relative; padding-left: 26px;
	font-size: 13.5px; line-height: 1.8; color: var(--ink-2);
}
.chk-arc-points li::before {
	content: ""; position: absolute; left: 2px; top: .6em;
	width: 8px; height: 2px; background: var(--accent);
}
.chk-arc-points b { display: block; font-size: 14px; color: var(--ink); }
.chk-arc-links { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 18px 0 0; }
.chk-arc-links a {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 13.5px; font-weight: 700; color: var(--accent-deep); text-decoration: none;
}
.chk-arc-links a::after {
	content: ""; width: 5px; height: 5px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
}
.chk-arc-links a:hover { text-decoration: underline; }
.chk-arc-img { margin: 0; }
.chk-arc-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); display: block; }
.chk-arc-h { font-size: 18px; margin-bottom: 20px; }
.chk-tiles + .chk-arc-h, .chk-cats + .chk-arc-h, .chk-svlist + .chk-arc-h { margin-top: 48px; }

/* 記事のカード */
.chk-acards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.chk-acards a {
	display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px;
	text-decoration: none; color: var(--ink);
}
.chk-acards img {
	width: 96px; aspect-ratio: 16 / 10; object-fit: cover;
	border-radius: var(--radius); background: var(--surface-sunk);
}
.chk-acard-cat { display: block; font-size: 11px; color: var(--ink-3); margin-bottom: 3px; }
.chk-acard-title { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.6; }
.chk-acards a:hover .chk-acard-title { color: var(--accent-deep); }

/* 料金への導線（記事の後・一覧の後） */
.chk-band {
	display: grid; grid-template-columns: minmax(0, 1fr) 320px;
	margin: 56px 0 0; border: 1px solid var(--rule-strong); border-radius: var(--radius);
	background: var(--surface);
}
.chk-band-main { padding: 26px 28px 24px; border-right: 1px solid var(--rule); }
.chk-band-eyebrow {
	display: inline-block; margin: 0 0 10px; padding: 3px 8px;
	background: var(--ink); color: #fff;
	font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.chk-band-h { font-size: 19px; line-height: 1.65; margin-bottom: 10px; }
.chk-band-lede { margin: 0 0 18px; font-size: 13.5px; line-height: 1.85; color: var(--ink-2); max-width: 32em; }
.chk-band-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0; }
.chk-band-link {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none;
}
.chk-band-link::after {
	content: ""; width: 5px; height: 5px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
}
.chk-band-link:hover { text-decoration: underline; }

.chk-band-rank { padding: 20px 22px; background: var(--surface-sunk); }
.chk-band-rank-h {
	margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-strong);
	font-size: 11.5px; font-weight: 700; color: var(--ink-2);
}
.chk-band-rank ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.chk-band-rank li {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
	padding-bottom: 9px; border-bottom: 1px dotted var(--rule-strong);
}
.chk-band-rank li:last-child { border-bottom: 0; padding-bottom: 0; }
.chk-band-rank a { font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; }
.chk-band-rank a:hover { color: var(--accent); text-decoration: underline; }
.chk-band-rank span { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--hot); }
.chk-band-rank small { font-size: 10.5px; font-weight: 700; margin-left: 1px; }

/* 記事の後の「次に読む」 */
.chk-next { margin-top: 48px; }
.chk-next-h { font-size: 18px; margin-bottom: 18px; }
.chk-next .chk-acards { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px 20px; }

/* サイドバーとドロワーでは少し詰める */
.chk-acards.is-side a, .chk-acards.is-drawer a { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
.chk-acards.is-side img, .chk-acards.is-drawer img { width: 76px; }
.chk-acards a.is-nothumb,
.chk-acards.is-side a.is-nothumb,
.chk-acards.is-drawer a.is-nothumb { grid-template-columns: minmax(0, 1fr); }
.chk-acards.is-drawer { margin-top: 14px; }

@media (max-width: 1000px) {
	.chk-panel-arts { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 760px) {
	.chk-catlist.is-row { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.chk-catnav { margin-top: 16px; }
	.chk-next { margin-top: 40px; }
}

@media (max-width: 1000px) {
	.chk-arc-head { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.chk-arc-img { order: -1; }
	.chk-arc-img img { aspect-ratio: 21 / 9; }
}
/* スマホの記事一覧は、1画面目に記事が入るよう上部を詰める */
@media (max-width: 760px) {
	.blog .chk-crumbs, .category .chk-crumbs { margin-bottom: 12px; }
	.chk-arc-head { display: block; padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
	.chk-arc-img, .chk-arc-links { display: none; }
	.chk-arc-head .chk-title { margin-bottom: 6px; font-size: 22px; }
	.chk-arc-head .chk-lede {
		display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
		margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--ink-3);
	}
	.chk-arc-head .chk-lede.is-clamped { cursor: pointer; }
	.chk-arc-head .chk-lede.is-open { display: block; overflow: visible; }
	.chk-lede-more {
		display: inline-flex; align-items: center; gap: 6px;
		padding: 4px 0; background: none; border: 0; cursor: pointer;
		font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.4; color: var(--accent-deep);
	}
	.chk-lede-more::after {
		content: ""; width: 5px; height: 5px; margin-top: -3px;
		border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
	}

	.chk-catnav { margin: 14px -20px 20px; }
	.chk-catnav-h {
		position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
		clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
	}
	.chk-catnav .chk-catchips {
		position: relative; flex-wrap: nowrap; gap: 6px; padding: 2px 20px;
		overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
	}
	.chk-catnav .chk-catchips::-webkit-scrollbar { display: none; }
	.chk-catnav .chk-catchips li { flex: 0 0 auto; }
	.chk-catnav .chk-catchips a { padding: 7px 12px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 1000px) {
	.chk-band { grid-template-columns: minmax(0, 1fr); }
	.chk-band-main { border-right: 0; border-bottom: 1px solid var(--rule); }
}
@media (max-width: 760px) {
	.chk-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.chk-cats.is-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.chk-band { margin-top: 44px; border-radius: var(--radius-lg); }
	.chk-band-main { padding: 28px 22px 26px; }
	.chk-band-h { font-size: 19px; }
	.chk-band-rank { padding: 22px; }
	.chk-arc-points { gap: 12px; }
}

@media (max-width: 760px) {
	.chk-list-item a { grid-template-columns: 110px minmax(0, 1fr); gap: 0 14px; padding: 16px 2px; }
	.chk-list-title { font-size: 15px; }
	.chk-list-excerpt { display: none; }
}

@media (max-width: 760px) {
	.chk-body > h2 { font-size: 20px; margin-top: 52px; }
	.chk-body > h2::after { width: 56px; }
	.chk-body > h3 { font-size: 16.5px; }
}

@media (max-width: 760px) {
	.chk-logo-img { height: 38px; }
}

/* ---- 掲載サービスの一覧 */

.chk-svlist { list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--rule-strong); }
.chk-svlist li {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px;
	padding: 16px 4px; border-bottom: 1px solid var(--rule);
}
.chk-svlist.is-plain li { grid-template-columns: minmax(0, 1fr) auto; }
.chk-svlist-name { font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: none; }
.chk-svlist-name:hover { color: var(--accent); text-decoration: underline; }
.chk-svlist-fig { font-size: 19px; font-weight: 700; color: var(--hot); font-variant-numeric: tabular-nums; }
.chk-svlist-fig small { font-size: 11.5px; margin-left: 2px; }
.chk-svlist-sub { grid-column: 2 / -1; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
.chk-svlist.is-plain .chk-svlist-sub { grid-column: 1 / -1; }

/* ---- 404 */

.chk-404-search { margin-top: 26px; }
.chk-404-search label { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; }
.chk-404-search span { display: flex; gap: 10px; max-width: 30em; }
.chk-404-search input {
	flex: 1; min-width: 0; padding: 10px 12px;
	border: 1px solid var(--rule-strong); border-radius: var(--radius);
	font: inherit; font-size: 14px; background: var(--surface); color: var(--ink);
}
.chk-404-search input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11, 95, 174, .16); }
.chk-404-search .chk-cta { padding: 10px 20px; }

/* ---- サイトマップ */

.chk-sitemap { display: grid; gap: 34px; margin: 8px 0 0; }
.chk-sm-h {
	font-size: 15px; margin: 0 0 12px; padding-bottom: 8px;
	border-bottom: 2px solid var(--ink);
}
.chk-sm-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 2px 20px;
}
.chk-sm-list li { border-bottom: 1px solid var(--rule); }
.chk-sm-list a {
	display: block; padding: 9px 2px; font-size: 13.5px; line-height: 1.6;
	color: var(--ink); text-decoration: none;
}
.chk-sm-list a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 760px) {
	.chk-svlist li { grid-template-columns: auto minmax(0, 1fr); }
	.chk-svlist-fig { grid-column: 2; justify-self: end; }
	.chk-404-search span { flex-direction: column; }
}

/* トップのFAQの下に置く「すべて見る」 */
.chk-faq-more { margin: 28px 0 0; }
/* /faq/ ページのQ&A（本文の中に出す） */
.chk-faq.is-page { margin-top: 8px; }

/* 条件・品目ページの下に置く「ほかの探し方」 */
.chk-tax-more { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--rule); }
.chk-tax-more .chk-arc-h { margin-top: 0; }
.chk-tax-more .chk-tiles + .chk-arc-h { margin-top: 44px; }

/* 終了したサービスの案内 */
.chk-closed-note {
	margin: 0 0 28px; padding: 16px 18px;
	border: 1px solid var(--rule-strong); border-left: 4px solid var(--hot);
	border-radius: var(--radius); background: var(--hot-sunk);
	font-size: 14px; line-height: 1.85;
}
.chk-closed-note b { display: block; margin-bottom: 4px; font-size: 15px; }
.chk-cta-closed {
	display: inline-block; padding: 8px 14px; border: 1px solid var(--rule-strong);
	border-radius: var(--radius); background: var(--surface-sunk);
	font-size: 12.5px; font-weight: 700; color: var(--ink-3);
}

/* 品目ページの解説 */
.chk-item-note { margin-top: 44px; max-width: 46em; }
.chk-item-note p { margin: 0 0 1.6em; font-size: 15px; line-height: 1.95; color: var(--ink-2); }

/* オプション加工の表 [chk_options]。.wp-block-table と同じ見え方。料金と備考は折り返さない */
.chk-optlist { position: relative; margin: 28px 0; overflow-x: auto; }
.chk-optlist table {
	width: 100%; border-collapse: collapse;
	font-size: 14px; background: var(--surface); font-variant-numeric: tabular-nums;
}
.chk-optlist caption {
	caption-side: top; margin-bottom: 8px;
	font-size: 12.5px; color: var(--ink-3); text-align: left;
}
.chk-optlist thead th {
	padding: 11px 12px; border-bottom: 2px solid var(--rule-ink);
	font-size: 12.5px; font-weight: 700; text-align: left; white-space: nowrap;
}
.chk-optlist tbody th, .chk-optlist tbody td {
	padding: 12px; border-bottom: 1px solid var(--rule);
	vertical-align: top; line-height: 1.7; text-align: left;
}
.chk-optlist tbody th { font-weight: 700; white-space: normal; min-width: 9.5em; }
.chk-optlist tbody td { white-space: nowrap; }
.chk-optlist tbody th small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.chk-optlist tbody tr:last-child th, .chk-optlist tbody tr:last-child td { border-bottom: 1px solid var(--rule-ink); }
@media (max-width: 760px) {
	.chk-optlist table { font-size: 13.5px; }
	.chk-optlist tbody th, .chk-optlist tbody td, .chk-optlist thead th { padding: 10px; }
}

/* ---- 目次（Eio WP Expansion） */

/* プラグインの色変数をこのサイトの青に寄せる（薄水色の地でコントラストが足りないため） */
.chk-body .ewe-toc {
	--toc-toggle-color: var(--accent-deep);
	--toc-counter-color: var(--accent);
}

/* スマホは1画面の情報量を優先して文字を一段小さくする。13.5px以下の注記・表と入力欄（16px未満だとiOSが拡大する）は据え置き */
@media (max-width: 760px) {
	body { font-size: 14.5px; line-height: 1.8; }
	.chk-body { font-size: 14.5px; }
	.chk-body > h2 { margin: 44px 0 16px; padding-bottom: 12px; font-size: 18px; }
	.chk-body > h3 { margin: 34px 0 12px; font-size: 15.5px; }
	.chk-body > h4 { font-size: 14.5px; }

	.chk-title, .chk-arc-head .chk-title { font-size: 20px; }
	.chk-lede { font-size: 13.5px; line-height: 1.85; }
	.chk-sec-h { font-size: 19px; }
	.chk-sec-lede { font-size: 13.5px; }
	.chk-arc-h, .chk-next-h { font-size: 16.5px; }
	.chk-svc-h { font-size: 17px; }

	.chk-list-title { font-size: 14px; }
	.chk-pg-title, .chk-cat-name { font-size: 13.5px; }
	.chk-name { font-size: 14.5px; }
	.chk-compare caption { font-size: 15px; }
	.chk-card-title > a { font-size: 17px; }
	.chk-card-spec dd { font-size: 14.5px; }
	.chk-offer .chk-offer-name { font-size: 18px; }
	.chk-rank-name { font-size: 15.5px; }
	.chk-box-body p { font-size: 13.5px; }
	.chk-band-h { font-size: 17px; }
	.chk-svlist-name { font-size: 15px; }
	.chk-item-note p { font-size: 14px; line-height: 1.85; }
}
/* ブラウザの拡大表示でCSS上の幅が極端に狭くなっても横にはみ出さないように */
@media (max-width: 359px) {
	.chk-cta, .chk-btn { white-space: normal; }
	.chk-tab { overflow: hidden; }
	.chk-tab-well { width: 100%; max-width: 44px; }
	.chk-tab-label { font-size: 9.5px; letter-spacing: 0; }
}