/* ==========================================================================
   かなさホーム — 役立つコラムの本文の部品（bin/import-column.py が本文に入れる。2026-10-03）
   - 箇条書き・表・図のキャプション（project-column.css にない分。foundation が class 付きの ul・ol の印を消すため、本文の中だけ戻す）
   - c-column-note: 注意書き（原稿で「※」から始まる段落）。白い箱
   - c-column-figure: 図解（content/images/ の PNG）。細い緑の枠
   - c-column-faq: 本文の「よくある質問」（中身はテーマの p-kanasa-faq__item。ページの地がクリームなので箱は白に）
   - c-column-sources: 最後の「参考にした情報」（公式の出典の一覧）
   - c-column-supervisor: 本文のあとの「この記事の監修」（inc/column-supervisor.php。監修の方が確かめた記事だけ）
   置く場所は記事の本文（.p-kanasa-column-single__content）だけ。Figma にはまだない（TODO.md「Figma に反映すること」）
   ========================================================================== */

/* 小見出し（h3）の上は、段落どうしの間より広く（PC 32・SP 24。塗装・防水と同じ） */
.p-kanasa-column-single__content > * + h3 {
	margin-top: var(--space-xl);
}

.p-kanasa-column-single__content ul.wp-block-list {
	list-style: disc;
}

.p-kanasa-column-single__content ol.wp-block-list {
	list-style: decimal;
}

.p-kanasa-column-single__content li + li {
	margin-top: var(--space-2xs);
}

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

.p-kanasa-column-single__content table {
	width: 100%;
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
	background: var(--kanasa-bg-surface);
}

.p-kanasa-column-single__content :is(th, td) {
	padding: var(--space-sm) var(--space-md);
	text-align: left;
	text-wrap: pretty; /* 窓口の名前が SP で「ちゃーがんじゅう／課」と1字だけ落ちていた（2026-10-05） */
	vertical-align: top;
	border: 1px solid var(--kanasa-border-default);
}

.p-kanasa-column-single__content th {
	background: var(--kanasa-bg-green-soft);
}

.p-kanasa-column-single__content .c-column-figure img {
	width: 100%;
	border: 1px solid var(--kanasa-border-default);
}

/* PC は図を中央に 560px で出す（かなさの図の文字は 48px 以上で描くので、本文の幅 800px いっぱいでは約40px になり見出しより大きく見える。
   560px で約28px。2026-10-05 ユーザー決定）。SP は本文の幅いっぱい */
@media (min-width: 768px) {
	.p-kanasa-column-single__content .c-column-figure {
		max-width: 560px;
		margin-inline: auto;
	}
}

.p-kanasa-column-single__content figcaption {
	margin-top: var(--space-xs);
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-secondary);
}

.p-kanasa-column-single__content .c-column-note {
	padding: var(--space-md) var(--space-lg);
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
	background: var(--kanasa-bg-surface);
	border-radius: var(--radius-xl);
}

.p-kanasa-column-single__content .p-kanasa-faq__item {
	background: var(--kanasa-bg-surface);
}

.p-kanasa-column-single__content .p-kanasa-faq__heading {
	font: inherit; /* 本文の h3 の文字・色（project-column.css）を、よくある質問の中では使わない */
	color: inherit;
}

.p-kanasa-column-single__content .c-column-sources {
	margin-top: var(--space-xl);
	padding: var(--space-lg) 28px;
	background: var(--kanasa-bg-surface);
	border-radius: var(--kanasa-radius-card);
}

.p-kanasa-column-single__content .c-column-sources__title {
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-green);
}

.p-kanasa-column-single__content .c-column-sources__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: 0;
	margin-top: var(--space-sm);
	list-style: none;
}

.p-kanasa-column-single__content .c-column-sources__item {
	margin: 0;
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
	text-wrap: balance; /* 資料の名前の最後の行が1〜2字だけにならないように（塗装・防水のコラムと同じ。2026-10-05） */
}

.p-kanasa-column-single__content .c-column-sources__meta {
	display: block;
	color: var(--kanasa-text-secondary);
}

/* この記事の監修（template-parts/kanasa/column-supervisor.php。本文のあと。白い箱・資格は緑の札） */
.c-column-supervisor {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: 28px var(--space-xl);
	background: var(--kanasa-bg-surface);
	border-radius: var(--kanasa-radius-card);
}

.c-column-supervisor__label {
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-green);
}

.c-column-supervisor__body {
	display: flex;
	gap: var(--space-lg);
	align-items: flex-start;
}

.c-column-supervisor__photo {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 50%;
}

.c-column-supervisor__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 0;
}

.c-column-supervisor__name {
	font: var(--text-kanasa-h4);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-primary);
}

.c-column-supervisor__role {
	display: block;
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-secondary);
}

.c-column-supervisor__quals {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.c-column-supervisor__qual {
	padding: 2px 14px;
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-green);
	background: var(--kanasa-bg-green-soft);
	border-radius: var(--radius-full);
}

.c-column-supervisor__profile {
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
}

@media (max-width: 767px) {
	/* SP の本文は 16px・注意書きの箱・表・キャプションは 15px（塗装・防水と同じ。2026-10-05 ユーザー決定）。
	   ほかのかなさのページは Kanasa/SP の 15px・14px のまま。--text-* は :root で値が決まるので、ここで組み直す */
	.p-kanasa-column-single__content {
		--fs-kanasa-body: 16px;
		--fs-kanasa-body-s: 15px;
		--text-kanasa-body: 500 var(--fs-kanasa-body)/2 var(--font-kanasa);
		--text-kanasa-body-s: 500 var(--fs-kanasa-body-s)/1.9 var(--font-kanasa);
	}

	.p-kanasa-column-single__content > * + h3 {
		margin-top: var(--space-lg);
	}

	.p-kanasa-column-single__content .c-column-note {
		padding: var(--space-sm) var(--space-md);
	}

	/* 表のセルの左右を 12px に（375px で窓口の名前が「ちゃーがんじゅ／う課」と2字だけ落ちず、1行に入る。2026-10-05）。
	   360px 未満は 12px でも入らず「…じゅ／う課」になるので、16px のまま pretty で「ちゃーがんじ／ゅう課」に（下の @media） */
	.p-kanasa-column-single__content :is(th, td) {
		padding-inline: var(--space-sm);
	}

	.p-kanasa-column-single__content .c-column-sources {
		padding: var(--space-md) 20px;
		border-radius: var(--radius-xl);
	}

	.c-column-supervisor {
		padding: var(--space-lg) 20px;
		border-radius: var(--radius-xl);
	}

	/* SP は写真と名前を横に、資格とひとことは下に全幅（細い列で札が折り返さないように） */
	.c-column-supervisor__body {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--space-sm) var(--space-md);
		align-items: center;
	}

	.c-column-supervisor__text {
		display: contents;
	}

	.c-column-supervisor__name {
		grid-column: -2 / -1;
	}

	.c-column-supervisor__quals,
	.c-column-supervisor__profile {
		grid-column: 1 / -1;
	}

	.c-column-supervisor__photo {
		width: 72px;
		height: 72px;
	}
}

@media (max-width: 359px) {
	.p-kanasa-column-single__content :is(th, td) {
		padding-inline: var(--space-md);
	}
}

/* SP の表：列を等分する固定の組み方（WordPress の has-fixed-layout）だと 320px の3列の表は1列に約4字しか入らないので、
   列の幅を中身に合わせ、1列は最低 7字ぶん。入らない表だけ、表の箱（.wp-block-table。WordPress で overflow-x: auto）の中で横にスクロールする（2026-10-06 ユーザー決定） */
@media (max-width: 767px) {
	.p-kanasa-column-single__content .wp-block-table {
		overflow-x: auto;
	}

	.p-kanasa-column-single__content .wp-block-table table {
		table-layout: auto;
	}

	.p-kanasa-column-single__content .wp-block-table :is(th, td) {
		min-width: 7em;
		line-break: strict; /* 「ー」・小さいかなを行の頭にしない */
		text-wrap: balance; /* 行の長さをそろえ、最後の行を1字にしない */
	}

	/* Safari（文節で折れない）：語のかたまりごとに折る指定（text-wrap.js が付ける keep-all）だと、かたまりが列より長いとき字の途中で切られ、
	   「、」が行の頭に出たり1字の行ができたりした。表のセルは日本語のふつうの折り返し（行の頭の禁則あり）にして、行の長さをそろえる。
	   pretty は細い列で行を全部短く組み直すので使わない（2026-10-06） */
	@supports not (word-break: auto-phrase) {
		.p-kanasa-column-single__content .wp-block-table :is(th, td) {
			word-break: normal !important;
			overflow-wrap: break-word !important;
			text-wrap: balance;
		}
	}
}