/* ==========================================================================
   POC薬剤部 新POCデザイン共通：カテゴリーTOP／記事ページの汎用パーツ
   body.poc-top の共通トークン・共通部品（poc-top.css / poc-calc.css）を再利用し、
   ここでは「カテゴリーTOPのヘッダー部」「記事本文の見出し・表・リスト」等、
   キャリア・実務など複数のエリアで共通に使う部分だけを追加する。
   エリア固有の色は .poc-article-wrap--<area> 側の1〜2行だけで拡張する
   （今後「学ぶ」「AIを使う」等を追加する場合も同様に1ブロック追加するだけでよい）。
   ========================================================================== */

/* ------------------------------------------------------------------
 * カテゴリーTOP（共通）
 * ------------------------------------------------------------------ */
.poc-page-top { padding: 20px 0 0; }
.poc-page-top__head { margin: 0 0 20px; }
body.poc-top .poc-heading--lg { font-size: 22px; }
.poc-page-top__lead { margin: 8px 0 0; color: var(--poc-muted); font-size: 14px; line-height: 1.7; }
.poc-page-top__list { margin-top: 18px; }

/* カテゴリーTOP見出し＋代表イラスト（画像が設定されているカテゴリーのみ横並びにする） */
.poc-page-top__head--with-art { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.poc-page-top__head--with-art .poc-page-top__body { flex: 1 1 320px; min-width: 0; }
.poc-page-top__art { flex: 0 0 160px; }
.poc-page-top__art img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; object-position: center; }
@media only screen and (max-width: 599px) {
	.poc-page-top__head--with-art { flex-direction: column; gap: 10px; }
	/* 縦並びではPC用の幅320pxを本文の高さとして使わない。 */
	.poc-page-top__head--with-art .poc-page-top__body { flex-basis: auto; }
	.poc-page-top__art { flex: none; width: 130px; align-self: center; }
}

/* ------------------------------------------------------------------
 * 記事ページ：ヘッダー（パンくず・カテゴリー・タイトル・日付）
 * ------------------------------------------------------------------ */
.poc-article-wrap { padding: 20px 0 0; }
.poc-article-head { margin: 0 0 22px; }
.poc-article-head__cat { margin: 0 0 8px; }
.poc-article-head__cat a {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--c-career-bg);
	color: #9a5200; /* 橙のままだと淡橙の背景で 2.3:1。AA(4.5:1)を満たす濃さ(5.27:1) */
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
}
/* エリアごとの配色（キャリア＝オレンジ／実務＝グリーン。将来追加分はここに1行足すだけ） */
.poc-article-wrap--practice .poc-article-head__cat a { background: var(--c-practice-bg); color: #23753a; }
.poc-article-wrap--learn .poc-article-head__cat a { background: var(--c-learn-bg); color: #5b43c4; }

body.poc-top .poc-article-head__title {
	margin: 0 0 10px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.45;
	color: var(--poc-ink);
}
.poc-article-head__meta { margin: 0; color: var(--poc-muted); font-size: 13px; }
.poc-article-head__meta time + time { margin-left: 8px; }

/* ------------------------------------------------------------------
 * 記事ページ：本文（見出し・表・リスト等）
 * the_content() を書き換えずに出力するため、プレーンな h2/h3/ul/ol/table 等に
 * 直接スタイルを当てる（.poc-calc-wrap が旧AFFINGERの見出し装飾を打ち消した上に重ねる）。
 * ------------------------------------------------------------------ */
.poc-article-body {
	--poc-article-inset: 28px; /* 本文の左右内側余白（PC）。見出し・TOCは以下で打ち消して現状幅を維持する */
	font-size: 15.5px;
	line-height: 1.9;
	color: var(--poc-ink);
	padding: 0 var(--poc-article-inset);
}
.poc-article-body > p { margin: 0 0 1.3em; }

/* 見出しの見た目（色線・文字サイズ等）はネストの深さに関わらず適用する
   （比較ページのカード内見出し等、入れ子になった見出しも同じ意匠にするため）。
   親AFFINGERテーマの「見出しデザイン」機能（style.css／customizer生成のst-themecss-loader.php）が、
   クラシックエディタで見出しデザインを設定した投稿のh2/h3に対して非常に詳細度の高いセレクタ
   （:not(#id)を含むものはID相当の詳細度）でグレー背景・上下罫線・別のfont-size/weight/paddingを
   !importantで強制してくるため、.poc-article-body内のh2/h3に限定してそれを安全に上回る詳細度を
   持たせる。:not(#_):not(#__) は「id="_"／"__"を持たない」という常に真になる条件を2つ付けるだけで、
   対象範囲・マッチする要素は一切変えず、詳細度（ID相当×2）だけを親テーマの該当セレクタより
   確実に高く引き上げるための標準的な手法（実在しないIDを参照するため実害はない。h3側の親セレクタは
   :not()が多数連なり通常のクラス重ねでは対抗しづらいため、ID相当を2重にして安全側に倒している）。 */
body.poc-top .poc-article-body h2:not(#_):not(#__) {
	margin: 2.2em 0 0.9em !important;
	padding: 2px 0 2px 14px !important;
	background: none !important;
	border-top: 0 !important;
	border-right: 0 !important;
	border-bottom: 0 !important;
	border-left: 5px solid var(--poc-blue) !important;
	font-size: 19px !important;
	font-weight: 800 !important;
	line-height: 1.5 !important;
	color: var(--poc-ink) !important;
}
.poc-article-body h2:first-child { margin-top: 0 !important; }

body.poc-top .poc-article-body h3:not(#_):not(#__) {
	margin: 1.8em 0 0.7em !important;
	padding: 1px 0 1px 11px !important;
	background: none !important;
	border-top: 0 !important;
	border-right: 0 !important;
	border-bottom: 0 !important;
	border-left: 4px solid var(--poc-blue) !important;
	font-size: 16.5px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	color: var(--poc-ink) !important;
}

/* 本文の左右余白を打ち消し、これまでどおり全幅・元の位置を維持するのは、
   直下の子要素（記事本文の本来のセクション見出し）だけ。
   （「見出しを狭くしない／中央寄せにしない」という要件に対応。本文だけを内側へ入れる。
   比較ページ等のカード内部に入れ子になった見出しは、カード自身の余白の中に収める） */
body.poc-top .poc-article-body > h2 {
	margin-left: calc(var(--poc-article-inset) * -1) !important;
	margin-right: calc(var(--poc-article-inset) * -1) !important;
}
body.poc-top .poc-article-body > h3 {
	margin-left: calc(var(--poc-article-inset) * -1) !important;
	margin-right: calc(var(--poc-article-inset) * -1) !important;
}

.poc-article-body ul, .poc-article-body ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.poc-article-body ul { list-style: disc; }
.poc-article-body ol { list-style: decimal; }
.poc-article-body li { margin: 0 0 0.5em; padding: 0; line-height: 1.8; }
.poc-article-body strong { color: var(--poc-ink); }
.poc-article-body a { color: var(--poc-blue-d); }
/* 記事本文内のボタン（例: 転職比較の「公式サイトで確認する」）は、上のリンク色（青）に負けず白文字にする */
.poc-article-body a.poc-btn--primary, .poc-article-body a.poc-btn--primary:hover { color: #fff; }
/* 親テーマの「関連記事」見出し（.point）のラベルは白文字で 3.68:1 のため、濃い青にする */
.poc-article-wrap h4.point .point-in { background-color: var(--poc-blue-btn) !important; } /* 親テーマの動的CSS（st-themecss-loader）が後から読み込まれるため !important */

.poc-article-body table { font-size: 14px; }
.poc-article-body .scroll-box { margin: 0 0 1.4em; border: 1px solid var(--poc-line); border-radius: 10px; }
.poc-article-body .scroll-box table { margin: 0; }

/* [st_toc] のボックスも見出し同様に全幅（元の見た目）を維持する */
.poc-article-body #st_toc_container { margin: 0 calc(var(--poc-article-inset) * -1) 1.6em; }

/* サムネイル未設定時のプレースホルダー（poc_post_card()の.poc-post__ph を再利用） */
.poc-page-top__list .poc-post__ph { display: flex; align-items: center; justify-content: center; }

/* 学ぶ：.poc-calc-wrap li { padding:0 } の共通リセット（要素セレクタ分だけ詳細度が高い）が
   .poc-card--main／.poc-card--sub 本来のカード内側余白まで打ち消してしまうため、
   学ぶページに限定してカード内側余白を明示的に復元する（他エリアの見た目には影響しない）。 */
.poc-learn-hub .poc-card--main { padding: 0 16px 60px; }
.poc-learn-top .poc-card--sub { padding: 14px 14px 54px; }

/* 学ぶTOP：3本柱カードは説明文がやや長く2行になるため、スマホ幅では画像を上・文章を縦積みにして
   （キャリア等の既存カードと同じ.poc-card--mainを再利用しつつ）ボタンとの重なりを防ぐ */
@media only screen and (max-width: 599px) {
	.poc-learn-hub .poc-card--main {
		display: block;
		min-height: 0;
		padding: 16px 16px 46px;
	}
	.poc-learn-hub .poc-card--main .poc-card__img {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
		margin: 0 0 10px;
		border-radius: 14px;
	}
	.poc-learn-hub .poc-card--main .poc-card__go {
		top: auto;
		bottom: 14px;
		margin-top: 0;
	}
	.poc-learn-top .poc-card--sub { padding: 12px 46px 12px 12px; }
}

@media only screen and (max-width: 767px) {
	.poc-article-body { --poc-article-inset: 16px; }
	body.poc-top .poc-article-head__title { font-size: 21px; }
	.poc-article-body { font-size: 15px; }
	body.poc-top .poc-article-body h2:not(#_):not(#__) { font-size: 17px !important; }
	body.poc-top .poc-article-body h3:not(#_):not(#__) { font-size: 15.5px !important; }
}

/* キャリア記事「よくある質問」（アコーディオン、FAQPage schemaなし・UI表示のみ） */
.poc-faq-box {
	margin: 28px 0 0;
	padding: 18px 20px;
	background: var(--poc-bg, #f4f8fe);
	border: 1px solid var(--poc-line, #dbe7f6);
	border-radius: var(--poc-radius, 18px);
}

.poc-faq-box__title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--poc-ink, #17324d);
}

.poc-faq-item {
	background: #fff;
	border: 1px solid var(--poc-line, #dbe7f6);
	border-radius: 12px;
	margin: 0 0 10px;
	overflow: hidden;
}

.poc-faq-item:last-child { margin-bottom: 0; }

.poc-faq-item__q {
	cursor: pointer;
	padding: 14px 16px;
	font-weight: 700;
	color: var(--poc-ink, #17324d);
	list-style: none;
}

.poc-faq-item__q::-webkit-details-marker { display: none; }

.poc-faq-item__q::before {
	content: "Q";
	display: inline-block;
	margin-right: 8px;
	color: var(--poc-blue-d, #1d5fd0);
	font-weight: 700;
}

.poc-faq-item[open] .poc-faq-item__q { border-bottom: 1px solid var(--poc-line, #dbe7f6); }

.poc-faq-item__a {
	margin: 0;
	padding: 14px 16px;
	color: var(--poc-muted, #5a6f86);
	font-size: 14px;
	line-height: 1.8;
}

/* Privacy page: heading labels already include article numbers. */
body.page-id-12 #st_toc_container.only-toc .st_toc_list > li {
	list-style-type: none;
}