@charset "UTF-8";
/* ==========================================================================
   コラムのページ
   - コラム一覧・カテゴリーごとの一覧（home.php / category.php）
   - コラム詳細（single.php）

   記事カードは template-parts/column/card.php（見た目は common.css の c-card・c-column-card）
   絞り込み（c-filter）・カードの並び（c-card-grid）・ページ送り（c-pager）は common.css の共通部品
   ブレイクポイントは common.css と同じ（768px / 1024px）

   目次
   1. 詳細：アイキャッチ画像
   2. 詳細：記事のまわり・SUMMARY
   3. 詳細：本文（ブロックエディタで書いた見出し・文章・箇条書き・表・画像）
   ========================================================================== */


/* ==========================================================================
   1. 詳細：アイキャッチ画像
   ========================================================================== */
.p-column-eyecatch {
	padding:
		clamp(28px, calc(28px + 44 * (100vw - 390px) / 1050), 72px)
		var(--sec-px)
		0;
	background: var(--c-surface);
}

.p-column-eyecatch__inner {
	max-width: 960px;
	margin-inline: auto;
}

.p-column-eyecatch__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	background: var(--c-placeholder);
	object-fit: cover;
	object-position: center;
}


/* ==========================================================================
   2. 詳細：記事のまわり・SUMMARY
   ========================================================================== */
.p-column-article {
	padding:
		clamp(40px, calc(40px + 32 * (100vw - 390px) / 1050), 72px)
		var(--sec-px)
		clamp(72px, calc(72px + 48 * (100vw - 390px) / 1050), 120px);
	background: var(--c-surface);
}

.p-column-article__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(26px, calc(26px + 6 * (100vw - 390px) / 1050), 32px);
	max-width: 760px;
	margin-inline: auto;
}

/* 記事の冒頭の結論（カスタムフィールド「SUMMARY（結論）」。空なら出さない） */
.p-column-summary {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 22px 18px;
	border-radius: 8px;
	background: var(--c-surface-gray);
}

.p-column-summary__bar {
	flex-shrink: 0;
	align-self: stretch;
	width: 6px;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--c-blue-600) 0%, var(--c-sky-400) 100%);
}

.p-column-summary__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.p-column-summary__label {
	color: var(--c-blue-600);
	font-family: var(--ff-en);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
}

.p-column-summary p {
	color: var(--c-navy-900);
	font-size: clamp(16px, calc(16px + 1 * (100vw - 390px) / 1050), 17px);
	font-weight: 500;
	line-height: 1.9;
}

@media (min-width: 768px) {
	.p-column-summary {
		padding: 28px 32px;
	}
}


/* ==========================================================================
   3. 詳細：本文
   ブロックエディタが出す HTML（h2・h3・p・ul・ol・table・figure）にそのまま当てる。
   記事の中の要素の間隔は、親の gap（32px / SP 26px）で決める。
   ========================================================================== */
.p-column-body {
	display: flex;
	flex-direction: column;
	gap: clamp(26px, calc(26px + 6 * (100vw - 390px) / 1050), 32px);
	color: var(--c-ink);
	overflow-wrap: anywhere;
}

.p-column-body > * {
	margin: 0;
}

.p-column-body p {
	font-size: 16px;
	line-height: 2;
}

.p-column-body strong {
	font-weight: 700;
}

.p-column-body a {
	color: var(--c-blue-600);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.p-column-body a:hover {
	text-decoration: none;
}

/* --- 見出し --- */
.p-column-body h2 {
	margin-top: 24px;
	padding-bottom: 16px;
	color: var(--c-navy-900);
	font-family: var(--ff-display);
	font-size: clamp(21px, calc(21px + 5 * (100vw - 390px) / 1050), 26px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.03em;
	/* 見出しの下の線（短いグラデーション＋細い線）。ほかのページの c-heading__line と同じ */
	background:
		linear-gradient(90deg, var(--c-blue-600) 0%, var(--c-sky-400) 100%) left bottom / 56px 3px no-repeat,
		linear-gradient(var(--c-line), var(--c-line)) left bottom 1px / 100% 1px no-repeat;
}

.p-column-body h3 {
	margin-top: 8px;
	color: var(--c-blue-600);
	font-family: var(--ff-display);
	font-size: clamp(18px, calc(18px + 2 * (100vw - 390px) / 1050), 20px);
	font-weight: 700;
	line-height: 1.5;
}

.p-column-body h4 {
	color: var(--c-navy-900);
	font-family: var(--ff-display);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
}

/* --- 箇条書き・番号つきの一覧 --- */
.p-column-body ul,
.p-column-body ol {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	list-style: none;
}

.p-column-body li {
	position: relative;
	padding-left: 22px;
	line-height: 1.9;
}

.p-column-body ul > li::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 2px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-sky-400);
}

.p-column-body ol {
	counter-reset: column-list;
}

.p-column-body ol > li {
	padding-left: 30px;
	counter-increment: column-list;
}

.p-column-body ol > li::before {
	content: counter(column-list) ".";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--c-blue-600);
	font-family: var(--ff-en);
	font-weight: 500;
}

/* --- 表（1列目を見出しの見た目にする。横にはみ出すときはスクロール） --- */
.p-column-body .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #D5DCE1;
	border-radius: 8px;
	background: #FFFFFF;
}

.p-column-body table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	background: #FFFFFF;
	color: var(--c-ink);
	font-size: 15px;
	line-height: 1.8;
}

.p-column-body th,
.p-column-body td {
	min-width: 150px;
	padding: 14px 16px;
	border: none;
	border-bottom: 1px solid #DDE3E7;
	text-align: left;
	vertical-align: top;
}

.p-column-body td + td,
.p-column-body th + th {
	border-left: 1px solid #DDE3E7;
}

.p-column-body thead th {
	border-bottom: 2px solid #0A4F8A;
	background: #0A4F8A;
	color: #FFFFFF;
	font-family: var(--ff-display);
	font-weight: 700;
}

.p-column-body thead th + th {
	border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.p-column-body tbody td:first-child {
	width: 1%;
	min-width: 0;
	border-right: 1px solid #DDE3E7;
	background: #F5F7F9;
	color: var(--c-navy-900);
	font-family: var(--ff-display);
	font-weight: 700;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.p-column-body table {
		min-width: 100%;
		font-size: 16px;
	}
}

/* --- 画像・引用・区切り線 --- */
.p-column-body figure {
	margin: 0;
}

.p-column-body img {
	height: auto;
	border-radius: 8px;
}

.p-column-body figcaption {
	margin-top: 8px;
	color: var(--c-ink-muted);
	font-size: 13px;
	line-height: 1.7;
}

.p-column-body blockquote {
	padding: 4px 0 4px 20px;
	border-left: 4px solid var(--c-sky-400);
	color: var(--c-ink-muted);
}

.p-column-body hr {
	border: none;
	border-top: 1px solid var(--c-line);
}