/**
 * コラム（一覧 / 詳細）専用 CSS
 *
 *   ・archive-column.php    → C-1：Featured + 2列グリッド + サイドバー
 *   ・single-column.php     → C-2：ヒーロー + アイキャッチ + 目次 + 本文 + In-CTA + 著者 + 関連 + サイドバー
 *
 *   設計思想：design-comp-content.html の C-1 / C-2 をベースに、
 *   tokens.css の CSS 変数（--paper, --ink, --accent ほか）に整合させて
 *   実装している。クラス命名は BEM 風（cl-, col-, cs-, side-）。
 *
 * @package mitsukarukun
 */

/* ============================================================
 *  ルートガード：右端見切れ防止
 *  （col-pickup の box-shadow / 長い日本語タイトル等で
 *   モバイルで右にはみ出すケースを物理的にカット）
 * ============================================================ */
.column-archive,
.column-single {
	overflow-x: clip;
	max-width: 100vw;
	width: 100%;
	/* iPhone のノッチ／ホームバー領域 (safe-area-inset) を考慮 */
	padding-left: env(safe-area-inset-left, 0);
	padding-right: env(safe-area-inset-right, 0);
}
.column-archive *,
.column-single * {
	/* grid / flex 子要素が min-content 以上に膨らんで親を超えるのを防ぐ */
	min-width: 0;
}

/* ============================================================
 * 共通：カテゴリカラー（記事カード／ヒーローパッチで共有）
 * ============================================================ */
.c-money { background: var(--accent); color: #fff; }
.c-dorm  { background: #1976D2; color: #fff; }
.c-job   { background: #43A047; color: #fff; }
.c-story { background: #7B1FA2; color: #fff; }
.c-howto { background: #E53935; color: #fff; }
.c-faq   { background: var(--ink); color: var(--paper); }

/* ============================================================
 *  パンくず（C-1 / C-2 共通）
 * ============================================================ */
.cl-crumb,
.cs-crumb {
	max-width: 1280px;
	margin: 0 auto;
	padding: 14px 28px 0;
	font-family: "Yusei Magic", sans-serif;
	font-size: 12px;
	color: var(--ink2);
}
.cl-crumb a,
.cs-crumb a { color: var(--ink2); text-decoration: none; }
.cl-crumb__sep,
.cs-crumb__sep { margin: 0 8px; color: var(--ink3); }
.cl-crumb__cur,
.cs-crumb__cur,
.cs-crumb__cat { color: var(--ink); }

/* ============================================================
 *  C-1. コラム一覧
 * ============================================================ */

/* ── ページヘッダー ── */
.cl-head {
	max-width: 1280px;
	margin: 0 auto;
	padding: 30px 28px 28px;
	text-align: center;
}
.cl-head__title {
	font-family: "Yusei Magic", sans-serif;
	font-size: 38px;
	line-height: 1.3;
	position: relative;
	padding-top: 16px;
	color: var(--ink);
}
.cl-head__title::before {
	content: "";
	display: block;
	width: 80px;
	height: 5px;
	background: var(--ink);
	margin: 0 auto 14px;
	border-radius: 3px;
}
.cl-head__en {
	display: block;
	font-family: "Yusei Magic", sans-serif;
	font-size: 14px;
	color: var(--accent);
	margin-bottom: 6px;
	letter-spacing: .15em;
}
.cl-head__lead {
	font-family: "Yusei Magic", sans-serif;
	font-size: 14px;
	color: var(--ink2);
	margin-top: 10px;
}

/* ============================================================
 *  スマホ専用：カテゴリタグバー（タイトル直下、横スクロール）
 *   ・PC ではサイドバーの「カテゴリ」と重複するため非表示
 *   ・スマホは横一列、はみ出した分は横スクロールで閲覧
 *   ・縦幅は 28px 前後でコンパクトに（リード文と詰まらない padding）
 * ============================================================ */
.cl-cat-pillbar { display: none; }
@media (max-width: 900px) {
	/* スマホのカテゴリー絞り込みバー（刷新）：
	   ・「📂 カテゴリーで探す」ラベルで用途を明示
	   ・ピルを大型化（タップしやすい高さ40px）＋テーマらしい影で視認性UP
	   ・選択中はオレンジ塗りで一目でわかる
	   ・右端フェードで「まだ続く」を示唆／1枚目との間に余白 */
	.cl-cat-pillbar {
		display: block;
		max-width: 1200px;
		margin: 16px auto 22px;   /* 下に余白を足して1枚目と離す */
		padding: 0 var(--gutter);
		position: relative;
		-webkit-overflow-scrolling: touch;
	}
	.cl-cat-pillbar::before {
		content: "📂 カテゴリーで探す";
		display: block;
		font-family: var(--font-display);
		font-size: 12px;
		font-weight: bold;
		color: var(--ink2);
		margin: 0 2px 8px;
	}
	.cl-cat-pillbar__inner {
		display: flex;
		flex-wrap: nowrap;
		gap: 9px;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 3px 2px 8px;
		scrollbar-width: none;          /* スクロールバーは隠してフェードで誘導 */
		scroll-snap-type: x proximity;
	}
	.cl-cat-pillbar__inner::-webkit-scrollbar { display: none; }
	/* 右端のフェード（横スクロールできることを示す） */
	.cl-cat-pillbar::after {
		content: "";
		position: absolute;
		right: var(--gutter);
		bottom: 8px;
		width: 40px;
		height: 44px;
		background: linear-gradient(to right, transparent, var(--paper) 70%);
		pointer-events: none;
	}
	.cl-cat-pill {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		padding: 9px 18px;
		font-family: var(--font-display);
		font-size: 13px;
		font-weight: bold;
		line-height: 1.2;
		color: var(--ink);
		background: var(--paper);
		border: 2px solid var(--ink);
		border-radius: 999px;
		box-shadow: 2px 2px 0 var(--ink);
		text-decoration: none;
		white-space: nowrap;
		scroll-snap-align: start;
		transition: background .15s, color .15s, transform .1s, box-shadow .1s;
	}
	.cl-cat-pill.is-active {
		background: var(--accent);   /* 選択中＝オレンジ塗りで明確に */
		color: #fff;
		border-color: var(--ink);
	}
	.cl-cat-pill:active {
		transform: translate(1px, 1px);
		box-shadow: 1px 1px 0 var(--ink);
	}
	.cl-cat-pill:hover { text-decoration: none; }
}

/* ── 並び替えタブ（オススメ / 人気 / 最新）──
 *   archive-column では追従なし（普通に上部に置くだけ）。
 *   ページ最上部の一回だけ表示されて、スクロールで流れて消える。
 *   TOPのコラムセクションタブ（.col-tabs）と統一感のあるデザイン。
 */
.cl-sort-tabs {
	display: flex;
	gap: 10px;
	justify-content: center;
	max-width: 1280px;
	margin: 0 auto 24px;
	padding: 8px 4px;
	background: transparent;
	width: fit-content;
}
.cl-sort-tabs .col-tab {
	font-family: "Yusei Magic", sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding: 6px 18px;            /* 縦幅をコンパクトに */
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	background: var(--paper);     /* タブ単体に背景を付ける（後ろの記事が透けない） */
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
	transition: transform .15s, box-shadow .15s, background .15s;
}
@media (hover: hover) {
	.cl-sort-tabs .col-tab:hover {
		transform: translate(-1px, -1px);
		box-shadow: 2px 2px 0 var(--ink);
	}
}
.cl-sort-tabs .col-tab.is-active {
	background: var(--ink);
	color: var(--paper);
	box-shadow: 2px 2px 0 var(--ink);
}
@media (max-width: 768px) {
	.cl-sort-tabs {
		gap: 6px;
		padding: 6px 2px;
		margin: 0 auto 18px;
	}
	.cl-sort-tabs .col-tab {
		font-size: 12px;
		padding: 5px 14px;
	}
}

/* ジャンプ先：sort タブ切替後のスクロール終着点。
 *   sticky ヘッダー(80px) + sticky タブ(高さ約 60px) ぶんオフセットを取って、
 *   ページ遷移時にちょうど結果の最初の記事が見える位置に着地。
 */
#cl-result-top {
	scroll-margin-top: 150px;
}
body.admin-bar #cl-result-top { scroll-margin-top: 182px; }
@media (max-width: 768px) {
	#cl-result-top { scroll-margin-top: 130px; }
	body.admin-bar #cl-result-top { scroll-margin-top: 176px; }
}

/* ── 2 カラム ── */
.cl-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 28px 40px;
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 28px;
}
.cl-main { min-width: 0; }
.cl-side {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* ── Featured（PICK UP） ── */
.col-pickup {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	background: var(--paper);
	border: 2.5px solid var(--ink);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 6px 6px 0 var(--ink);
	margin-bottom: 28px;
	font-family: "Yusei Magic", sans-serif;
	position: relative;
}
.col-pickup__visual {
	position: relative;
	border-right: 2.5px solid var(--ink);
	min-height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--ink);
	font-family: "Yusei Magic", sans-serif;
	font-size: 13px;
	padding: 24px;
	text-decoration: none;
	background: repeating-linear-gradient(135deg, #FFD89A, #FFD89A 10px, #FFC465 10px, #FFC465 11px);
}
.col-pickup__visual--c-money  { background: repeating-linear-gradient(135deg, #FFD89A, #FFD89A 10px, #FFC465 10px, #FFC465 11px); }
.col-pickup__visual--c-dorm   { background: repeating-linear-gradient(135deg, #C5DDF5, #C5DDF5 10px, #91BEEC 10px, #91BEEC 11px); }
.col-pickup__visual--c-job    { background: repeating-linear-gradient(135deg, #CFE5D2, #CFE5D2 10px, #95C99C 10px, #95C99C 11px); }
.col-pickup__visual--c-story  { background: repeating-linear-gradient(135deg, #E1C5E8, #E1C5E8 10px, #B98FC5 10px, #B98FC5 11px); }
.col-pickup__visual--c-howto  { background: repeating-linear-gradient(135deg, #F5C5C5, #F5C5C5 10px, #E89191 10px, #E89191 11px); }
/* 本物のアイキャッチ画像（管理画面で割当）が入った時はストライプを隠して画像で埋める */
.col-pickup__visual.has-img { padding: 0; background: none; }
.col-pickup__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.col-pickup__badge {
	position: absolute;
	top: 18px;
	left: 18px;
	background: var(--red, #E53935);
	color: #fff;
	font-family: "Yusei Magic", sans-serif;
	font-size: 13px;
	padding: 6px 16px;
	border-radius: 6px;
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
	transform: rotate(-3deg);
	z-index: 2;
}
.col-pickup__label {
	display: inline-block;
	background: rgba(255, 255, 255, .92);
	border: 1.2px solid var(--ink2);
	padding: 6px 12px;
	border-radius: 4px;
	white-space: pre-wrap;
}
.col-pickup__body {
	padding: 32px 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
}
.col-pickup__meta {
	font-size: 12px;
	color: var(--ink2);
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
}
.col-pickup__cat {
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 11px;
	color: #fff;
}
.col-pickup__h {
	font-family: "Yusei Magic", sans-serif;
	font-size: 26px;
	line-height: 1.5;
	color: var(--ink);
	overflow-wrap: anywhere;
	word-break: break-word;
}
.col-pickup__excerpt,
.col-card__h,
.cs-hero__h,
.rank-ttl,
.rel-card__ttl {
	overflow-wrap: anywhere;
	word-break: break-word;
}
.col-pickup__h mark {
	background: linear-gradient(transparent 55%, var(--sticky, #FFE98A) 55%);
	padding: 0 2px;
	color: var(--ink);
}
.col-pickup__excerpt {
	font-family: "Yusei Magic", sans-serif;
	font-size: 13px;
	color: var(--ink2);
	line-height: 1.85;
}
/* ピックアップの「続きを読む」：グリッドカード同様に横長中央配置・影なし。
   ただしボタンらしさを保つため、オレンジ塗り + 白フチで CTA っぽく（2026-07-01）*/
.col-pickup__more {
	margin-top: 12px;
	width: 100%;
}
.col-pickup__more .btn {
	text-decoration: none;
	display: flex;
	width: 100%;
	justify-content: center;
	padding: 14px 20px;
	box-shadow: none;
	font-weight: bold;
	font-size: 15px;
	background: var(--accent);
	color: #fff;
	border-color: var(--ink);
}
.col-pickup__more .btn:hover {
	background: var(--accent2);
	transform: translateY(-1px);
	box-shadow: none;
}

/* ── 2 列グリッド ── */
.col-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.col-card {
	background: var(--paper);
	border: 2.5px solid var(--ink);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 5px 5px 0 var(--ink);
	font-family: "Yusei Magic", sans-serif;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--ink);
	transition: transform .12s;
}
/* タッチ端末でタップした時に下線が出ないように（base.css の a:hover 下線を打ち消す）。
   ※ @media (hover: hover) の外に置くことで、スマホのタップ時にも効く。 */
.col-card,
.col-card:hover,
.col-card:active,
.col-card:focus,
.col-card:focus-within {
	text-decoration: none;
}
@media (hover: hover) {
	.col-card:hover {
		transform: translate(-2px, -2px);
		box-shadow: 7px 7px 0 var(--ink);
		text-decoration: none;   /* base.css の a:hover 下線がカード全体に出ないように打ち消す */
	}
	/* ホバーは「浮き上がり」だけ。タイトルの下線は出さない（ユーザー要望） */
	.col-card:hover .col-card__h {
		text-decoration: none;
	}
}
.col-card__visual {
	position: relative;
	aspect-ratio: 16 / 10;   /* 求人カードと同じ比率にそろえる */
	border-bottom: 2.5px solid var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: repeating-linear-gradient(135deg, #F5EBD2, #F5EBD2 10px, #EFE0BE 10px, #EFE0BE 11px);
	color: var(--ink2);
	font-size: 12px;
	padding: 14px;
}
/* カテゴリタグは画像内ではなく、本文 meta 行（日付の左）に配置 */
.col-card__cat {
	display: inline-flex;
	align-items: center;
	font-family: "Yusei Magic", sans-serif;
	font-size: 11px;
	font-weight: bold;
	padding: 3px 10px;
	border: 1.5px solid var(--ink);
	border-radius: 4px;
	background: var(--ink);
	color: var(--paper);
	letter-spacing: .04em;
	white-space: nowrap;
}
/* カテゴリカラー（TOP の col-tcard__cat と統一） */
.col-card__cat.c-money { background: var(--accent); color: #fff; }
.col-card__cat.c-dorm  { background: #1976D2; color: #fff; }
.col-card__cat.c-job   { background: #43A047; color: #fff; }
.col-card__cat.c-story { background: #7B1FA2; color: #fff; }
.col-card__cat.c-howto { background: #E53935; color: #fff; }
.col-card__label {
	display: inline-block;
	background: rgba(255, 255, 255, .9);
	border: 1.2px solid var(--ink2);
	padding: 4px 10px;
	border-radius: 4px;
	white-space: pre-wrap;
	font-size: 11px;
	color: var(--ink);
	max-width: 90%;
}
/* 本物のアイキャッチ画像（管理画面で割当）が入った時はストライプを隠して画像で埋める */
.col-card__visual.has-img { padding: 0; background: none; }
.col-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.col-card__body {
	padding: 16px 18px 18px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* meta 行：カテゴリタグ + 日付 + views を横並びに */
.col-card__meta {
	font-size: 11px;
	color: var(--ink2);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-family: "Yusei Magic", sans-serif;
}
.col-card__date,
.col-card__views {
	display: inline-flex;
	align-items: center;
	color: var(--ink2);
}
.col-card__views {
	margin-left: auto;  /* 右端へ寄せる：カテゴリ/日付は左、views は右 */
}
.col-card__h {
	font-family: "Yusei Magic", sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink);
	font-weight: normal;
}
/* グリッドカードの短い抜粋（2行まで・本文を埋めて高さをそろえる） */
.col-card__excerpt {
	font-family: var(--font-body);
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--ink2);
	margin: 0;
	flex: 1;                 /* 余白を埋めて「続きを読む」を下端へ */
	display: -webkit-box;
	-webkit-line-clamp: 2;   /* 2行で省略 */
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.col-card__tags {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}
.col-card__tags span {
	font-size: 10px;
	background: var(--paper2);
	border: 1.2px solid var(--ink2);
	padding: 2px 7px;
	border-radius: 3px;
	color: var(--ink2);
}
/* グリッドカードの「続きを読む」：ピックアップ側と統一（2026-07-01 ユーザー指示）
   ・align-self を stretch にしてカード幅いっぱい
   ・オレンジ塗り + 白文字で CTA ボタン感を出す
   ・影は無し */
.col-card__more {
	align-self: stretch;
	margin-top: 10px;
	display: flex;
	justify-content: center;
	padding: 12px 20px;
	box-shadow: none;
	font-weight: bold;
	background: var(--accent);
	color: #fff;
	border-color: var(--ink);
	text-decoration: none;
}
.col-card__more:hover {
	background: var(--accent2);
	transform: translateY(-1px);
	box-shadow: none;
}

/* ── ページャ ── */
.cl-pager {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 30px;
	font-family: "Yusei Magic", sans-serif;
	flex-wrap: wrap;
}
.cl-pager__btn {
	min-width: 40px;
	height: 40px;
	border: 2px solid var(--ink);
	background: var(--paper);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	border-radius: 8px;
	padding: 0 12px;
	box-shadow: 2px 2px 0 var(--ink);
	color: var(--ink);
	text-decoration: none;
}
.cl-pager__btn--active {
	background: var(--ink);
	color: var(--paper);
}
.cl-pager__btn--disabled {
	opacity: .4;
	cursor: not-allowed;
}
.cl-pager__sep {
	display: inline-flex;
	align-items: center;
	padding: 0 6px;
	color: var(--ink2);
}

/* ============================================================
 *  絞り込み結果ヘッダー & 結果ナシ表示
 * ============================================================ */
.cl-result {
	background: var(--paper);
	border: 2.5px solid var(--ink);
	border-radius: 14px;
	box-shadow: 5px 5px 0 var(--ink);
	padding: 18px 22px;
	margin-bottom: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	font-family: "Yusei Magic", sans-serif;
}
.cl-result__head { min-width: 0; flex: 1; }
.cl-result__h {
	font-size: 20px;
	color: var(--ink);
	margin-bottom: 4px;
	line-height: 1.4;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.cl-result__count { font-size: 13px; color: var(--ink2); margin: 0; }
.cl-result__count b { color: var(--accent); font-size: 18px; }
.cl-result__reset {
	background: var(--paper2);
	border: 1.8px solid var(--ink2);
	color: var(--ink2);
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 12px;
	text-decoration: none;
	white-space: nowrap;
}
@media (hover: hover) {
	.cl-result__reset:hover {
		background: var(--ink);
		border-color: var(--ink);
		color: var(--paper);
	}
}

.cl-empty {
	background: var(--paper);
	border: 2.5px dashed var(--ink2);
	border-radius: 14px;
	padding: 48px 24px;
	text-align: center;
	font-family: "Yusei Magic", sans-serif;
	color: var(--ink2);
}
.cl-empty__icon { font-size: 48px; margin-bottom: 10px; }
.cl-empty__msg { font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.cl-empty__sub { font-size: 13px; margin-bottom: 22px; }

/* ============================================================
 *  サイドバー共通（C-1 / C-2）
 * ============================================================ */
.cs-side {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.side-card {
	background: var(--paper);
	border: 2.5px solid var(--ink);
	border-radius: 14px;
	box-shadow: 5px 5px 0 var(--ink);
	padding: 18px;
}
.side-card__h {
	font-family: "Yusei Magic", sans-serif;
	font-size: 15px;
	border-bottom: 2px solid var(--ink);
	padding-bottom: 8px;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--ink);
}
.side-card__ico {
	display: inline-flex;
	width: 24px;
	height: 24px;
	background: var(--sticky, #FFE98A);
	border: 1.5px solid var(--ink);
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	font-size: 13px;
}

/* ── 検索 ── */
#cl-search {
	/* フローティング「記事を探す」ボタンのジャンプ先：sticky ヘッダー分のオフセット */
	scroll-margin-top: 110px;
}
body.admin-bar #cl-search { scroll-margin-top: 142px; }  /* + admin-bar 32px */
@media (max-width: 782px) {
	body.admin-bar #cl-search { scroll-margin-top: 156px; }  /* + admin-bar 46px */
}
.side-search {
	display: flex;
	gap: 6px;
}
.side-search input {
	flex: 1;
	min-width: 0;
	padding: 9px 10px;
	border: 1.8px solid var(--ink);
	border-radius: 6px;
	font-family: "Yusei Magic", sans-serif;
	font-size: 12px;
	background: var(--paper);
	color: var(--ink);
}
/* iOS Safari 自動ズーム回避：input の font-size が 16px 未満だと
   フォーカス時に画面が拡大される。スマホだけ 16px に上書き。 */
@media (max-width: 768px) {
	.side-search input {
		font-size: 16px;
	}
}
.side-search button {
	background: var(--ink);
	color: var(--paper);
	border: 1.8px solid var(--ink);
	padding: 0 14px;
	border-radius: 6px;
	font-family: "Yusei Magic", sans-serif;
	cursor: pointer;
	font-size: 12px;
}

/* ── カテゴリリスト ── */
.cat-list {
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-family: "Yusei Magic", sans-serif;
}
.cat-list__item {
	display: flex;
	justify-content: space-between;
	padding: 9px 12px;
	font-size: 13px;
	background: var(--paper2);
	border: 1.5px solid var(--ink2);
	border-radius: 6px;
	text-decoration: none;
	color: var(--ink);
	align-items: center;
}
.cat-list__item .cnt {
	color: var(--ink3);
	font-size: 11px;
	background: var(--paper);
	border: 1px solid var(--ink3);
	border-radius: 3px;
	padding: 1px 6px;
}
.cat-list__item.is-active {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}
.cat-list__item.is-active .cnt {
	background: transparent;
	border-color: var(--paper);
	color: var(--paper);
}

/* ── タグクラウド ── */
.tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.tag-cloud__item {
	font-size: 11px;
	font-family: "Yusei Magic", sans-serif;
	background: var(--paper2);
	border: 1.5px solid var(--ink2);
	padding: 4px 9px;
	border-radius: 4px;
	cursor: pointer;
	color: var(--ink);
	text-decoration: none;
	display: inline-block;
}
.tag-cloud__item.is-active {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}
@media (hover: hover) {
	.tag-cloud__item:hover {
		background: var(--sticky, #FFE98A);
		border-color: var(--ink);
	}
}

/* ── 人気記事ランキング ── */
.rank-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.rank-item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 10px 0;
	border-bottom: 1px dashed var(--ink2);
	font-family: "Yusei Magic", sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink);
	text-decoration: none;
}
.rank-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.rank-num {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	background: var(--ink2);
	color: var(--paper);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: bold;
}
.rank-ttl { flex: 1; }
.rank-item.top1 .rank-num { background: #FFD700; color: var(--ink); border: 1.5px solid var(--ink); }
.rank-item.top2 .rank-num { background: #C0C0C0; color: var(--ink); border: 1.5px solid var(--ink); }
.rank-item.top3 .rank-num { background: #CD7F32; color: #fff; border: 1.5px solid var(--ink); }

/* ── サイド CTA ── */
.side-cta {
	background: var(--ink);
	color: var(--paper);
	border-radius: 14px;
	padding: 20px;
	text-align: center;
	font-family: "Yusei Magic", sans-serif;
	border: 2.5px solid var(--ink);
	box-shadow: 5px 5px 0 var(--accent);
}
.side-cta__h {
	font-size: 16px;
	margin-bottom: 6px;
	color: var(--paper);
}
.side-cta__p {
	font-size: 11px;
	color: var(--paper2);
	margin-bottom: 14px;
	line-height: 1.6;
}
.side-cta__btns {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.side-cta .btn {
	box-shadow: none;
	border-color: transparent;
}

/* ============================================================
 *  C-2. コラム詳細
 * ============================================================ */

/* ── ヒーロー ── */
.cs-hero-wrap {
	background: var(--paper2);
	padding: 36px 28px 28px;
	border-bottom: 2px solid var(--ink2);
}
.cs-hero {
	max-width: 1080px;
	margin: 0 auto;
	text-align: center;
}
.cs-meta-top {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	font-family: "Yusei Magic", sans-serif;
	font-size: 12px;
	flex-wrap: wrap;
}
.cs-cat {
	padding: 5px 16px;
	border-radius: 6px;
	font-size: 13px;
	border: 2px solid var(--ink);
	box-shadow: 2px 2px 0 var(--ink);
	background: var(--accent);
	color: #fff;
}
.cs-date,
.cs-views,
.cs-read {
	color: var(--ink2);
	display: inline-flex;
	gap: 4px;
	align-items: center;
}
.cs-hero__h {
	font-family: "Yusei Magic", sans-serif;
	font-size: 34px;
	line-height: 1.55;
	margin-bottom: 18px;
	color: var(--ink);
	text-wrap: balance;
}
.cs-hero__h mark {
	background: linear-gradient(transparent 55%, var(--sticky, #FFE98A) 55%);
	padding: 0 4px;
	color: var(--ink);
}
.cs-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
}
.cs-tags span {
	font-size: 11px;
	background: var(--paper);
	border: 1.5px solid var(--ink2);
	padding: 4px 10px;
	border-radius: 4px;
	font-family: "Yusei Magic", sans-serif;
	color: var(--ink);
}

/* ── アイキャッチ（メインカラム内・サイドバーと並列） ──
 *
 *   ・実画像が入った時にレイアウトが崩れないよう aspect-ratio で固定
 *   ・design comp の 1200×630 (≒ 1.9:1) ベース。実用的に 16:9 を採用
 *   ・height は親要素（cs-body の幅）に対する aspect-ratio で自動算出
 *     PC：メイン幅 ≈ 700-880px → 高さ 約 395-495px → max-height 360px でキャップ
 */
.cs-eyecatch {
	width: 100%;
	aspect-ratio: 16 / 10;   /* 求人カードと同じ比率にそろえる（旧 16:9 / max-height は廃止） */
	border: 2.5px solid var(--ink);
	border-radius: 0;          /* 四角（角丸なし） */
	overflow: hidden;
	background: repeating-linear-gradient(135deg, #FFD89A, #FFD89A 12px, #FFC465 12px, #FFC465 13px);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 28px;
}
.cs-eyecatch__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cs-eyecatch--ph .cs-eyecatch__label {
	display: inline-block;
	background: rgba(255, 255, 255, .92);
	border: 1.2px solid var(--ink2);
	padding: 6px 14px;
	border-radius: 4px;
	font-family: "Yusei Magic", sans-serif;
	font-size: 12px;
	color: var(--ink);
}

/* ── 2 カラムレイアウト ── */
.cs-layout {
	max-width: 1280px;
	margin: 0 auto;
	padding: 36px 28px 50px;
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 32px;
}
.cs-body {
	font-family: apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, 'Yu Gothic', Verdana, Meiryo, sans-serif;
	min-width: 0;
}

/* コラム本文（.pal-body）の階層づけ：
   見出し（h2/h3/h4）＝左端のまま／本文（段落・箇条書き・引用）＝少し内側にインデント。
   色付きボックス・表は全幅のまま → 幅にメリハリが出て「全部同じ幅でずんぐり」を解消。
   ※コラム限定スコープ（.cs-body 配下）なので、ピックアップ記事LPには影響しない。 */
.cs-body .pal-body > p,
.cs-body .pal-body > ul,
.cs-body .pal-body > ol,
.cs-body .pal-body > blockquote {
	margin-left: 1.4em;
	max-width: 42em;  /* 1行を読みやすい長さに（PC で横長になりすぎない） */
}
@media ( max-width: 768px ) {
	/* スマホは画面が狭いのでインデントは控えめに（見出しより少しだけ内側） */
	.cs-body .pal-body > p,
	.cs-body .pal-body > ul,
	.cs-body .pal-body > ol,
	.cs-body .pal-body > blockquote {
		margin-left: 0.7em;
	}
}

/* ── 目次（メイン内） ── */
.toc {
	background: var(--paper);
	border: 2.5px solid var(--ink);
	border-radius: 14px;
	padding: 22px 26px;
	margin-bottom: 32px;
	position: relative;
	font-family: "Yusei Magic", sans-serif;
}
.toc::before {
	content: "目次";
	position: absolute;
	top: -14px;
	left: 22px;
	background: var(--ink);
	color: var(--paper);
	font-family: "Yusei Magic", sans-serif;
	font-size: 12px;
	padding: 3px 14px;
	border-radius: 4px;
}
.toc__h {
	font-family: "Yusei Magic", sans-serif;
	font-size: 16px;
	margin-bottom: 14px;
}
.toc__list {
	padding-left: 22px;
	font-size: 14px;
	font-family: "Yusei Magic", sans-serif;
	margin: 0;
}
.toc__list li {
	margin-bottom: 8px;
	color: var(--ink);
}
.toc__list a {
	color: inherit;
	text-decoration: none;
}
@media (hover: hover) {
	.toc__list a:hover { color: var(--accent); }
}

/* ── 本文 ── */
.cs-body__content {
	scroll-margin-top: 100px;
}
.cs-body__content h2 {
	font-family: "Yusei Magic", sans-serif;
	font-size: 24px;
	line-height: 1.45;
	letter-spacing: 0.02em;
	margin: 44px 0 20px;
	padding: 14px 18px;
	background: var(--paper2);
	border-left: 8px solid var(--accent);
	border-radius: 0 8px 8px 0;
	color: var(--ink);
	scroll-margin-top: 100px;
}
.cs-body__content h2 .num {
	color: var(--accent);
	font-family: "Yusei Magic", sans-serif;
	margin-right: 8px;
}
.cs-body__content h3 {
	font-family: "Yusei Magic", sans-serif;
	font-size: 18px;
	line-height: 1.45;
	letter-spacing: 0.02em;
	margin: 32px 0 14px;
	border-bottom: 2px dashed var(--ink2);
	padding-bottom: 8px;
	color: var(--ink);
}
.cs-body__content p {
	font-family: apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, 'Yu Gothic', Verdana, Meiryo, sans-serif;
	/* 可読性リサーチ反映：本文16px / 行間1.9 / 字間0.03em / 段落間は約1.6文字分 */
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: 0.03em;
	color: var(--ink);
	margin: 0 0 1.6em;
	font-feature-settings: "palt" 1;  /* 日本語の約物アキを詰めて読みやすく */
}
.cs-body__content p.lead {
	font-size: 16px;
	font-weight: 500;
	background: var(--paper2);
	padding: 18px 22px;
	border-radius: 10px;
	border-left: 5px solid var(--ink2);
}
.cs-body__content strong {
	background: linear-gradient(transparent 55%, var(--sticky, #FFE98A) 55%);
	padding: 0 2px;
	font-weight: bold;
}
/* 箇条書き（リスト）も本文と同じ読みやすさに揃える */
.cs-body__content ul,
.cs-body__content ol {
	margin: 0 0 1.6em;
	padding-left: 1.4em;
}
.cs-body__content li {
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: 0.03em;
	margin-bottom: 8px;
}
.cs-body__content li:last-child {
	margin-bottom: 0;
}
/* 階層づけ：見出し＝左端のまま／本文（段落・箇条書き）＝少し内側に下げる。
   さらに1行を読みやすい長さ（約42字）に制限して、全幅で「ずんぐり」見えるのを防ぐ。
   ※色付きボックス・表・見出しは全幅のまま → 幅にメリハリが出て読みやすくなる。 */
.cs-body__content > p,
.cs-body__content > ul,
.cs-body__content > ol,
.cs-body__content > blockquote {
	margin-left: 1.5em;
	max-width: 42em;
}

/* ── Callout（💡） ── */
.cs-body__content .callout {
	background: #FFF6CC;
	border: 2.5px solid var(--ink);
	border-radius: 14px;
	padding: 26px 26px 22px;
	margin: 32px 0 28px;
	font-family: "Yusei Magic", sans-serif;
	box-shadow: 4px 4px 0 var(--ink);
	position: relative;
}
.cs-body__content .callout::before {
	content: "💡";
	position: absolute;
	top: -18px;
	left: 24px;
	background: var(--ink);
	color: var(--paper);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	border: 2.5px solid var(--ink);
}
.cs-body__content .callout b {
	display: block;
	margin-bottom: 10px;
	font-size: 16px;
	color: var(--ink);
	padding-left: 32px;
}
.cs-body__content .callout p {
	font-family: "Yusei Magic", sans-serif;
	font-size: 14px;
	line-height: 1.85;
	color: var(--ink);
	margin: 0;
}

/* ── 表（spec） ── */
.cs-body__content table.spec {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 2px solid var(--ink);
	border-radius: 10px;
	overflow: hidden;
	font-family: "Yusei Magic", sans-serif;
	margin: 18px 0;
	font-size: 14px;
}
.cs-body__content table.spec th,
.cs-body__content table.spec td {
	padding: 12px 16px;
	border-bottom: 1.5px solid var(--ink2);
	text-align: left;
	vertical-align: top;
	color: var(--ink);
}
.cs-body__content table.spec tr:last-child th,
.cs-body__content table.spec tr:last-child td {
	border-bottom: none;
}
.cs-body__content table.spec th {
	background: var(--paper2);
	width: 35%;
	font-weight: bold;
	border-right: 1.5px solid var(--ink2);
}

/* ── 本文中の CTA（in-CTA） ── */
.cs-body__content .in-cta {
	background: var(--ink);
	color: var(--paper);
	border-radius: 18px;
	padding: 32px 28px;
	text-align: center;
	margin: 36px 0;
	font-family: "Yusei Magic", sans-serif;
	border: 2.5px solid var(--ink);
	box-shadow: 6px 6px 0 var(--accent);
	position: relative;
	overflow: hidden;
}
.cs-body__content .in-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(rgba(255, 255, 255, .05) 2px, transparent 2px);
	background-size: 24px 24px;
	pointer-events: none;
}
.cs-body__content .in-cta h4 {
	font-family: "Yusei Magic", sans-serif;
	font-size: 22px;
	margin-bottom: 8px;
	position: relative;
	color: var(--paper);
}
.cs-body__content .in-cta p {
	font-family: "Yusei Magic", sans-serif;
	font-size: 13px;
	color: var(--paper2);
	margin-bottom: 18px;
	position: relative;
	line-height: 1.7;
}
.cs-body__content .in-cta .in-cta__btns {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}
.cs-body__content .in-cta .btn {
	box-shadow: 3px 3px 0 rgba(0, 0, 0, .4);
}

/* ── 著者 ── */
.cs-author {
	display: flex;
	gap: 18px;
	align-items: center;
	background: var(--paper2);
	border: 2.5px solid var(--ink);
	border-radius: 14px;
	padding: 18px 22px;
	margin-top: 30px;
	font-family: "Yusei Magic", sans-serif;
	box-shadow: 4px 4px 0 var(--ink);
}
.cs-author__photo {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 2.5px solid var(--ink);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--sticky, #FFE98A);
	box-shadow: 2px 2px 0 var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
}
.cs-author__avatar { font-size: 30px; }
.cs-author__name {
	font-family: "Yusei Magic", sans-serif;
	font-size: 16px;
	margin-bottom: 4px;
	color: var(--ink);
}
.cs-author__role {
	display: inline-block;
	background: var(--ink);
	color: var(--paper);
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 3px;
	margin-left: 8px;
	vertical-align: middle;
}
.cs-author__bio {
	font-family: "Yusei Magic", sans-serif;
	font-size: 12px;
	color: var(--ink2);
	line-height: 1.7;
	margin: 0;
}

/* ── 関連記事 ── */
.cs-related { margin-top: 40px; }
.cs-related__h {
	font-family: "Yusei Magic", sans-serif;
	font-size: 24px;
	line-height: 1.3;
	border-left: 8px solid var(--accent);
	padding-left: 14px;
	margin-bottom: 22px;
	color: var(--ink);
}
.cs-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.rel-card {
	background: var(--paper);
	border: 2px solid var(--ink);
	border-radius: 10px;
	overflow: hidden;
	font-family: "Yusei Magic", sans-serif;
	box-shadow: 3px 3px 0 var(--ink);
	text-decoration: none;
	color: var(--ink);
	display: block;
	transition: transform .12s;
}
@media (hover: hover) {
	.rel-card:hover {
		transform: translate(-2px, -2px);
		box-shadow: 5px 5px 0 var(--ink);
	}
}
.rel-card__img {
	position: relative;
	aspect-ratio: 16 / 10;   /* 関連記事のアイキャッチを 16:10 に統一 */
	border-bottom: 2px solid var(--ink);
	background: repeating-linear-gradient(135deg, #F5EBD2, #F5EBD2 10px, #EFE0BE 10px, #EFE0BE 11px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
/* 関連記事カードの実アイキャッチを枠いっぱいに表示 */
.rel-card__imgel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rel-card__cat {
	position: absolute;
	top: 6px;
	left: 6px;
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 3px;
	border: 1.2px solid var(--ink);
	color: var(--paper);
	background: var(--ink);
	z-index: 2;
}
.rel-card__label {
	display: inline-block;
	background: rgba(255, 255, 255, .9);
	border: 1.2px solid var(--ink2);
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 10px;
	color: var(--ink);
	max-width: 90%;
	white-space: pre-wrap;
}
.rel-card__ttl {
	padding: 14px 14px 16px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink);
	font-weight: 500;
}

/* ── サイドバー目次（追尾しない・記事と一緒に流れる） ── */
.side-toc {
	/* PC でも目次は記事と一緒にスクロール流れる：
	 * 「目次の追尾はいらない、人気の記事が見えなくなる」というユーザーフィードバック対応 */
	position: static;
}
.side-toc__list {
	padding-left: 20px;
	font-size: 13px;
	font-family: "Yusei Magic", sans-serif;
	color: var(--ink2);
	margin: 0;
}
.side-toc__list li {
	margin-bottom: 9px;
	line-height: 1.5;
}
.side-toc__list a {
	color: inherit;
	text-decoration: none;
}
.side-toc__list li.is-active {
	color: var(--accent);
	font-weight: bold;
	position: relative;
}
.side-toc__list li.is-active::before {
	content: "▶";
	position: absolute;
	left: -16px;
	color: var(--accent);
	font-size: 10px;
	top: 2px;
}

/* ── サイドバー全体の追尾：PC のみ ──
 *
 * position: sticky の挙動：
 *   ・ページ読み込み時：grid 内の自然な位置
 *   ・スクロールでサイドバー上端が画面上 120px に達したら、そこで固定
 *   ・親（.cs-layout）下端が画面上 120px + サイドバー高さ に達したら、また流れる
 *
 * これで、メイン記事を読み進めるうちに「サイドバー全体」が画面上部に張り付き、
 * 人気の記事・カテゴリー・LINE相談CTAが常に視界に入る。
 * align-self: start が無いと grid アイテムは縦方向に伸びるため必須。
 */
@media (min-width: 981px) {
	.cs-side {
		position: sticky;
		top: 120px;
		align-self: start;
		max-height: calc(100vh - 140px);
		overflow-y: auto;
		/* スクロールバーは控えめに */
		scrollbar-width: thin;
		scrollbar-color: var(--ink2) var(--paper2);
	}
	.cs-side::-webkit-scrollbar { width: 6px; }
	.cs-side::-webkit-scrollbar-thumb { background: var(--ink2); border-radius: 3px; }
	.cs-side::-webkit-scrollbar-track { background: var(--paper2); }
	body.admin-bar .cs-side {
		top: 152px;
		max-height: calc(100vh - 172px);
	}
}

/* ============================================================
 *  レスポンシブ
 * ============================================================ */

/* タブレット：1 カラムへ */
@media (max-width: 980px) {
	.cl-wrap,
	.cs-layout {
		grid-template-columns: 1fr;
		padding-left: 20px;
		padding-right: 20px;
	}
	.col-pickup {
		grid-template-columns: 1fr;
	}
	.col-pickup__visual {
		border-right: none;
		border-bottom: 2.5px solid var(--ink);
		aspect-ratio: 16 / 10;   /* 縦積み時は求人カードと同じ16:10にそろえる */
		min-height: 0;
	}
	.side-toc { display: none; }  /* スマホ・タブレットでは下部の重複目次を隠す（上に目次があるため） */
	/* .cs-eyecatch は 16:10 を維持（max-height で潰さない） */
	.cs-hero__h { font-size: 26px; }
	.cl-head__title { font-size: 30px; }
}

/* スマホ：余白とサイズ調整
 *
 *  ※ tokens.css の --gutter は 28px だが、これはスマホ画面（375-430px）では
 *    box-shadow と合わせて右端ギリギリになる。
 *    ここでは固定値 14px で確実に左右余白を確保する（!important で他からの影響を排除）。
 */
@media (max-width: 640px) {
	.cl-crumb,
	.cs-crumb {
		padding: 12px 14px 0 !important;
		font-size: 11px;
	}
	.cl-head {
		padding: 22px 14px 22px !important;
	}
	.cl-head__title { font-size: 24px; }
	.cl-head__en { font-size: 12px; }
	.cl-head__lead { font-size: 13px; }

	.cl-wrap,
	.cs-layout {
		padding-left: 14px !important;
		padding-right: 14px !important;
		gap: 18px;
		max-width: 100%;
	}
	.cl-wrap { padding-bottom: 30px; }
	.cs-layout { padding-top: 22px; padding-bottom: 36px; }

	.col-pickup {
		margin-bottom: 20px;
		/* スマホでは box-shadow を完全に削除して右端見切れを根絶 */
		box-shadow: none;
		max-width: 100%;
	}
	.col-pickup__body { padding: 22px 16px; gap: 10px; }
	.col-pickup__visual { aspect-ratio: 16 / 10; min-height: 0; padding: 18px; }
	.col-pickup__h { font-size: 18px; line-height: 1.45; }
	.col-pickup__excerpt { font-size: 12px; }
	.col-pickup__badge {
		top: 12px;
		left: 12px;
		font-size: 11px;
		padding: 4px 12px;
	}

	.col-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.col-card {
		box-shadow: 3px 3px 0 var(--ink);
		max-width: 100%;
	}
	/* スマホでも 16:10 を維持（固定高さは指定しない） */
	.col-card__h { font-size: 15px; }

	.cs-hero-wrap { padding: 24px 14px 22px !important; }
	.cs-hero__h { font-size: 22px; line-height: 1.5; }
	.cs-meta-top { font-size: 11px; gap: 8px; }
	.cs-cat { padding: 4px 12px; font-size: 12px; }

	.cs-eyecatch {
		/* 16:10 を維持（max-height で潰さない） */
		box-shadow: 4px 4px 0 var(--ink);
		margin-bottom: 18px;
	}

	.toc { padding: 22px 20px 18px; margin-bottom: 24px; }

	.cs-body__content h2 {
		font-size: 19px;
		padding: 12px 14px;
		margin: 30px 0 14px;
		border-left-width: 6px;
	}
	.cs-body__content h3 { font-size: 17px; margin: 26px 0 12px; }
	/* スマホこそ16pxが読みやすい（14pxは小さすぎた）。段落間も少し広めに。 */
	.cs-body__content p { font-size: 16px; line-height: 1.85; margin-bottom: 1.5em; }
	.cs-body__content li { font-size: 16px; line-height: 1.85; }
	.cs-body__content p.lead { font-size: 16px; padding: 14px 16px; }
	/* スマホは画面が狭いのでインデントは控えめに（見出しより少しだけ内側） */
	.cs-body__content > p,
	.cs-body__content > ul,
	.cs-body__content > ol,
	.cs-body__content > blockquote {
		margin-left: 0.8em;
	}
	.cs-body__content p.lead { margin-left: 0; }

	.cs-body__content .callout {
		padding: 22px 18px 18px;
	}
	.cs-body__content .callout b { padding-left: 28px; font-size: 14px; }

	.cs-body__content .in-cta {
		padding: 24px 18px;
		margin: 28px 0;
	}
	.cs-body__content .in-cta h4 { font-size: 18px; }
	.cs-body__content .in-cta .in-cta__btns { gap: 8px; }

	.cs-author {
		flex-direction: column;
		text-align: center;
		padding: 18px;
	}
	.cs-related__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.rel-card__img { height: auto; aspect-ratio: 16 / 10; }
}

/* ============================================================
 *  本文系フォント上書き（最下部・後勝ち集約）
 *
 *   ユーザー要望（範囲）：
 *     ・対象は「記事詳細ページの本文（読み物として読まれる文章）」のみ
 *     ・サイドバー・カード一覧・パンくず・メタ情報・タグなど補助 UI は
 *       Yusei Magic（クラフト感）のまま維持
 *
 *   見出し（h2/h3/h4、___h, cs-related__h など）は Yusei Magic 保持。
 *   ここでは「読まれる本文」のみシステムフォントスタックに置換する。
 *   （apple-system / BlinkMacSystemFont / Helvetica Neue / YuGothic / Meiryo …）
 * ============================================================ */
.cs-body__content,
.cs-body__content p,
.cs-body__content p.lead,
.cs-body__content strong,
.cs-body__content .callout p,
.cs-body__content .callout b,
.cs-body__content .callout ul,
.cs-body__content .callout li,
.cs-body__content table.spec,
.cs-body__content table.spec th,
.cs-body__content table.spec td,
.cs-body__content .in-cta p,
.cs-author__bio {
	font-family: apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, 'Yu Gothic', Verdana, Meiryo, sans-serif !important;
}