@charset "UTF-8";
/* ------------------------------------------------------------------
   コラム（CPT: column）追補スタイル
   app.css の後に読み込む。app.css は編集せず本ファイルのみで完結させる。
   ※ SCSSソースが無いための暫定方式（fujisawa2025_coding_rules §6-1 案B）
------------------------------------------------------------------ */

:root {
	/* 色＝役割ベース命名（直書き禁止） */
	--accent: #738b95;
	--accent-cta: #0a2530;
	--accent-hover: #0a2530;
	--column-ink: #0a2530;
	--column-ink-sub: #707070;
	--column-surface: #f0f4f0;
	--column-border: #bbcdd5;
	--column-white: #ffffff;
	--column-shadow: rgba(10, 37, 48, 0.08);

	/* 余白＝8の倍数。セクション間は通常/大休符の2種類のみ */
	--column-sec: 80px;
	--column-sec-lg: 120px;
}

/* ---------- 見出し（app.css の .page_ttl{min-height:500px} を打ち消す） ---------- */
/* 施工事例アーカイブ（.works .page_ttl）と同じ扱いに揃える */
.column .page_ttl {
	min-height: 0;
	margin-bottom: 2.5rem;
}

.column .page_ttl .head {
	padding-bottom: 0;
}

/* ---------- 一覧 ---------- */
/* margin は .inner の `0 auto` を維持する（0 にすると左寄りになる） */
.column_list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px 32px;
	list-style: none;
	padding: 0;
	margin: 0 auto;
}

.column_item {
	display: block;
	text-decoration: none;
	color: var(--column-ink);
}

.column_item .thumb {
	overflow: hidden;
	border-radius: 8px;
}

/* app.css の .has_img は height:0 固定。テーマ既定の padding-top 比率方式に合わせる（16:10） */
.column_item .has_img {
	padding-top: 62.5%;
	background: var(--column-surface);
}

.column_item .has_img img {
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.column_item:hover .has_img img {
	transform: scale(1.06);
}

.column_item .column_ttl {
	padding-top: 16px;
}

.column_item .head {
	font-size: 20px;
	line-height: 1.8;
	font-weight: 500;
	margin: 0;
	color: var(--column-ink);
}

.column_item:hover .head {
	color: var(--accent-hover);
}

.column_item ._date {
	font-size: 14px;
	line-height: 1.8;
	color: var(--column-ink-sub);
	margin: 8px 0 0;
}

.cate-wr {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.column .cate {
	display: inline-block;
	font-size: 12px;
	line-height: 1.8;
	padding: 0 12px;
	border: 1px solid var(--column-border);
	border-radius: 2px;
	color: var(--accent);
	text-decoration: none;
}

.column_empty {
	font-size: 16px;
	line-height: 1.8;
	text-align: center;
	padding: 80px 0;
	color: var(--column-ink-sub);
}

/* ---------- 詳細 ---------- */
.column_single {
	max-width: 800px;
}

.column_head {
	padding-bottom: 32px;
	border-bottom: 1px solid var(--column-border);
}

.column_head .head {
	font-size: 32px;
	line-height: 1.6;
	font-weight: 500;
	margin: 8px 0 0;
	color: var(--column-ink);
}

.column_head ._date {
	font-size: 14px;
	line-height: 1.8;
	color: var(--column-ink-sub);
	margin: 16px 0 0;
}

.column_mv {
	margin-top: 32px;
	overflow: hidden;
	border-radius: 8px;
}

.column_mv .has_img {
	padding-top: 56.25%;
	background: var(--column-surface);
}

.column_mv .has_img img {
	height: 100%;
	object-fit: cover;
}

.column_body {
	font-size: 16px;
	line-height: 1.8;
	color: var(--column-ink);
	padding-top: 40px;
}

.column_body p {
	margin: 0 0 24px;
}

.column_body h2 {
	font-size: 24px;
	line-height: 1.6;
	font-weight: 500;
	margin: 48px 0 16px;
	padding-left: 16px;
	border-left: 4px solid var(--accent);
	scroll-margin-top: 24px;
}

/* ---------- 目次 ---------- */
.column_toc {
	background: var(--column-surface);
	border: 1px solid var(--column-border);
	border-radius: 8px;
	padding: 24px 32px;
	margin: 8px 0 40px;
}

.column_toc ._ttl {
	font-size: 18px;
	line-height: 1.8;
	font-weight: 500;
	text-align: center;
	margin: 0 0 16px;
	color: var(--column-ink);
}

/* .column_body ol / .column_body li より詳細度を上げる（後方で padding-left:24px / margin-bottom:8px が当たるため） */
.column_body .column_toc ._list {
	counter-reset: toc;
	list-style: none;
	margin: 0;
	padding: 0;
}

.column_body .column_toc ._list li {
	counter-increment: toc;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px dashed var(--column-border);
}

.column_body .column_toc ._list li:last-child {
	border-bottom: none;
}

.column_toc ._list a {
	display: flex;
	gap: 12px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--column-ink);
	text-decoration: none;
}

.column_toc ._list a::before {
	content: counter(toc, decimal-leading-zero);
	color: var(--accent);
	font-family: var(--ff-en, "Poppins", sans-serif);
	font-weight: 500;
	/* 折り返した2行目以降が番号の下へ回り込まないようにする（ぶら下げ） */
	flex-shrink: 0;
}

.column_toc ._list a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

.column_body h3 {
	font-size: 20px;
	line-height: 1.6;
	font-weight: 500;
	margin: 40px 0 16px;
}

.column_body ul,
.column_body ol {
	margin: 0 0 24px;
	padding-left: 24px;
}

.column_body li {
	margin-bottom: 8px;
}

.column_body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.column_body figure {
	margin: 0 0 24px;
}

.column_body figure img {
	width: 100%;
	display: block;
}

.column_body figcaption {
	font-size: 12px;
	line-height: 1.8;
	color: var(--column-ink-sub);
	text-align: center;
	margin-top: 8px;
}

/* クラシックエディタの [caption] ショートコード（.wp-caption）互換用。
   WPがインラインで固定px幅(style="width:...")を付与するため width:auto !important で打ち消す */
.column_body .wp-caption {
	max-width: 100%;
	width: auto !important;
	margin: 0 0 24px;
}

.column_body .wp-caption img {
	max-width: 100%;
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}

.column_body .wp-caption-text {
	font-size: 12px;
	line-height: 1.8;
	color: var(--column-ink-sub);
	text-align: center;
	margin-top: 8px;
}

/* ---------- 記事下ナビ ---------- */
.column_nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: var(--column-sec);
	padding-top: 32px;
	border-top: 1px solid var(--column-border);
}

.column_nav a {
	font-size: 14px;
	line-height: 1.8;
	color: var(--column-ink);
	text-decoration: none;
}

.column_nav a:hover {
	color: var(--accent-hover);
}

.column_nav ._next {
	text-align: right;
}

/* ---------- 関連記事 ---------- */
.column_related {
	margin-top: var(--column-sec-lg);
}

.column_related .blo_ttl {
	margin-bottom: 32px;
}

/* ---------- SP（PC比 −2px・下限10px） ---------- */
@media screen and (max-width: 900px) {
	.column_list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 600px) {
	:root {
		--column-sec: 64px;
		--column-sec-lg: 96px;
	}

	.column_list {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.column_item .head {
		font-size: 18px;
	}

	.column_item ._date,
	.column_head ._date,
	.column_nav a {
		font-size: 12px;
	}

	.column .cate {
		font-size: 10px;
	}

	.column_empty {
		font-size: 14px;
	}

	.column_head .head {
		font-size: 20px;
	}

	.column_body {
		font-size: 14px;
		padding-top: 32px;
	}

	.column_body h2 {
		font-size: 18px;
	}

	.column_body h3 {
		font-size: 18px;
	}

	/* 目次: 左右余白を詰めて折り返しを減らし、行間と項目間に差をつくる */
	.column_toc {
		padding: 24px 16px;
		margin: 8px 0 32px;
	}

	.column_toc ._ttl {
		font-size: 16px;
		margin-bottom: 8px;
	}

	.column_body .column_toc ._list li {
		padding: 12px 0;
	}

	.column_toc ._list a {
		gap: 8px;
		font-size: 12px;
	}

	.column_nav {
		flex-wrap: wrap;
	}
}