@charset "utf-8";
/* =========================================================
   article.css — 読みもの（/column/ ・ /knowledge/ ・ /news/）
   一覧（タブ＋カード）と記事詳細（目次・本文・執筆者・記事末の回遊）
   本文の整形は .p-articleBody の中だけで行う（WP出力との干渉を避けるため）
   ========================================================= */

/* ---- 記事のヘッド（パンくず＋メタ＋h1＋アイキャッチ）--------------------- */
/* 詳細ページの①（白）。KV 画像の下の --sp-l はこの padding-block-end で取る（KV の margin ではなく。§9）*/
.p-artHead {
	padding-block: var(--sp-xs) var(--sp-l);

	/* パンくず → タイトル → タグ → KV（§9）。タグはタイトルの下に --sp-xs */
	& .p-artHead-meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5em 1em;
		margin-block-start: var(--sp-xs);
		color: var(--cl-text-sub);
		font-size: var(--fs-ui);
		line-height: var(--lh-ui);
	}

	& .p-artHead-title {
		margin-block-start: var(--sp-m);
		max-width: var(--w-text);
		font-size: var(--fs-xl);
		font-weight: var(--fw-head);
		line-height: var(--lh-tight);
		letter-spacing: -0.015em;
	}

	& .p-artHead-pic {
		margin-block-start: var(--sp-m);
		aspect-ratio: 16 / 10;
		overflow: clip;
	}

	& .p-artHead-pic img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---- 本文 ----------------------------------------------------------------
   WPの記事本文はここに入る。見出し・リスト・引用などの整形はこの中だけ */
.p-articleBody {
	max-width: var(--w-text);
	line-height: var(--lh-body);

	/* 記事本文の段落・リストだけ --lh-read（§9）。見出し・囲み・キャプションは各自の行間 */
	& :is(p, li) { line-height: var(--lh-read); }

	& > * + * { margin-block-start: 1.4em; }

	& h2 {
		margin-block-start: 2em;
		padding-block-end: 0.5em;
		border-block-end: 1px solid var(--cl-line);
		font-size: var(--fs-l);
		font-weight: var(--fw-head);
		line-height: var(--lh-tight);
		letter-spacing: -0.01em;
	}

	& h3 {
		margin-block-start: 1.8em;
		font-size: var(--fs-m);
		font-weight: var(--fw-bold);
		line-height: var(--lh-tight);
	}

	& :is(ul, ol) { padding-inline-start: 1.4em; }
	& ul { list-style: disc; }
	& ol { list-style: decimal; }
	& li + li { margin-block-start: 0.5em; }

	& blockquote {
		padding: var(--card-pad-sm);
		background-color: var(--cl-bg-sub);
		border-radius: var(--radius);
		color: var(--cl-text-sub);
	}

	& :is(img, figure img) { width: 100%; height: auto; }
	& figcaption { margin-block-start: 0.6em; color: var(--cl-text-sub); font-size: var(--fs-ui); }

	& strong { font-weight: var(--fw-bold); }

	& :is(table, .c-table) { margin-block-start: 1.4em; }
	& hr { margin-block: 2em; border: 0; border-block-start: 1px solid var(--cl-line); }

	& :is(code, pre) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
	& code { padding: 0.15em 0.4em; background-color: var(--cl-bg-sub); border-radius: 0.3rem; }
	& pre { padding: var(--card-pad-sm); background-color: var(--cl-bg-sub); border-radius: var(--radius); overflow-x: auto; }
	& pre code { padding: 0; background-color: transparent; }

	/* 画像を2枚並べる */
	& .p-articleBody-figs { display: grid; gap: var(--sp-xs); grid-template-columns: 1fr 1fr; }

	/* 動画などの埋め込み（16:9）*/
	& .p-articleBody-embed { aspect-ratio: 16 / 9; }
	& .p-articleBody-embed iframe { width: 100%; height: 100%; border: 0; }

	/* 囲みボックス（ポイント・注意）*/
	& .p-articleBody-box {
		padding: var(--card-pad-sm);
		background-color: var(--cl-bg-sub);
		border-radius: var(--radius);
	}

	& .p-articleBody-boxTitle {
		margin-block-end: 0.5em;
		font-size: var(--fs-m);
		font-weight: var(--fw-bold);
		line-height: var(--lh-tight);
	}

	/* 注意：見出しは黒のまま。強調したい1語だけ <strong> でオレンジにする（見出し丸ごとは使わない。§8）*/
	& .p-articleBody-box._attention .p-articleBody-boxTitle strong { color: var(--cl-accent); }

	/* 本文中のボタン・矢印リンク */
	& .c-btn { margin-block-start: 0.4em; }

	/* 吹き出しは前後を少し広めに空ける */
	& .c-balloon { margin-block: 1.8em; }

	/* 本文中の注釈 */
	& .p-articleBody-note {
		padding-inline-start: var(--sp-xs);
		border-inline-start: 2px solid var(--cl-line-strong);
		color: var(--cl-text-sub);
		font-size: var(--fs-ui);
	}
}

/* ---- 記事末の回遊 --------------------------------------------------------
   1段目＝関連記事／2段目＝次に読むページ／3段目＝CTA（黒帯・共通パーツ）
   計測は data-ga="related_click" と data-pos で位置別に取る（docs/measurement.md）*/
/* 見出しは共通の c-secTitle */
/* 関連（前後の記事・関連記事・関係するページ）を --sp-l で積む。先頭には余白を付けない */
* + .p-artNav { margin-block-start: var(--sp-l); }

/* 前後の記事 */
.p-artPrevNext {
	display: grid;
	gap: var(--sp-xs);
	padding-block: var(--sp-s);
	border-block: 1px solid var(--cl-line);

	& .p-artPrevNext-item {
		display: grid;
		align-content: start;
		gap: 0.3em;
		font-weight: var(--fw-bold);
		line-height: var(--lh-tight);
	}

	& .p-artPrevNext-label { color: var(--cl-text-sub); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
	& ._next { text-align: end; }
}

@media print, screen and (min-width: 640px) {
	/* ラベルとタイトルの行を左右でそろえる（片方が2行になっても段がずれない）*/
	.p-artPrevNext {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		gap: 0.5em var(--sp-s);
	}

	.p-artPrevNext .p-artPrevNext-item {
		grid-row: span 2;
		grid-template-rows: subgrid;
		gap: 0;
	}
}

/* ---- 既存記事の互換（WP化のときに効いてくる）-----------------------------
   現行の記事は吹き出しを WP のカラムブロックで組んでいる。
   本文スコープの中だけで、新しい .c-balloon と同じ見た目に寄せる
   （ブロックエディタ用CSSを読み込まなくても崩れないようにするため）*/
.p-articleBody .p-balloon {
	display: grid;
	/* 吹き出しは、短い文は文字の幅に合わせ、長い文は列の幅（画面）で折り返す。
	   minmax(0, max-content)：最大でも「1行に並べた幅」まで広がり、足りなければ縮む（はみ出さない）。auto ではないので、余白に引き伸ばされない */
	grid-template-columns: max-content minmax(0, max-content);
	align-items: start;
	gap: var(--sp-xs);
	margin-block: 1.8em;

	/* 向きは旧サイトの意味に合わせる：-right＝吹き出しがアイコンの右（アイコンが左）、-left＝吹き出しがアイコンの左（アイコンが右）。
	   記事によって HTML の順番（アイコン→吹き出し／吹き出し→アイコン）が違うので、order で並べる */
	& .p-balloon__icon { order: 1; width: 8rem; }
	& .p-balloon__icon img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 50%; }
	& .p-balloon__icon p { color: var(--cl-text-sub); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-align: center; }

	& .p-balloon__area {
		order: 2;
		position: relative;
		padding: var(--card-pad-sm);
		background-color: var(--cl-bg-sub);
		border-radius: var(--radius);
		line-height: var(--lh-body);
	}

	/* 吹き出しのしっぽ（c-balloon と同じ）*/
	& .p-balloon__area::before {
		content: "";
		position: absolute;
		inset-block-start: 2.4rem;
		inset-inline-start: -0.8rem;
		width: 1.6rem;
		height: 1.6rem;
		background-color: inherit;
		rotate: 45deg;
	}

	/* アイコンが右：同じく吹き出しは文字の幅に合わせ、全体を右端に寄せる */
	&.-left { grid-template-columns: minmax(0, max-content) max-content; justify-content: end; }
	&.-left .p-balloon__icon { order: 2; }
	&.-left .p-balloon__area { order: 1; }
	&.-left .p-balloon__area::before { inset-inline: auto -0.8rem; }
}

/* ---- 記事末の親テーマ（f5 の面の上に、白の c-issueCard を1枚）---------------- */
.p-artParent {
	padding: var(--sp-xs);
	background-color: var(--cl-bg-sub);
	border-radius: var(--radius);
}