/*
 * 記事の部品の見た目の決まり（2026-10-27 CS の要望③④⑥）。
 * 色はこの5つだけを使う。新しい部品を足すときも、ここの色から選ぶ（直接の色の指定を増やさない）。
 * エディタの「スタイル」メニュー（inc/editor.php）は、ここのクラスを付ける。
 * 灰色（文字 #333・線 #e0e0e0）は色の数に入れない。
 */
/* 記事の右の追尾する目次（css/site.css の .m-sideToc）も同じ色を使う */
.post_content,
.mce-content-body,
.m-sideToc {
	--m-blue: #0277bd;      /* メインの青：見出しの線・操作の名前・リンクの部品・補足 */
	--m-red: #d32f2f;       /* 注意の赤：注意の文字・注意の枠 */
	--m-green: #2e7d32;     /* 成功の緑：手順・できたことの確認 */
	--m-info-bg: #e1f5fe;   /* 補足の薄い青 */
	--m-warn-bg: #fff3e0;   /* 注意の薄い橙 */
	--m-line: #e0e0e0;
}

/* ---------- 見出し（エディタで段を選ぶだけで飾りが付く。引用で囲まない） ----------
   h2＝大きな区切り、h3＝その中の項目、h4＝手順の段、h5＝補足の小見出し。h1 はタイトルが使うので本文では使わない */
:is(.post_content, .mce-content-body) h2:not(.case-heading, .step-heading, .faq-q, .m-kb__ttl, .m-page *) {
	padding: 0 0 10px;
	border-bottom: 3px solid var(--m-blue);
	margin: 40px 0 20px;
}
:is(.post_content, .mce-content-body) h3:not(.case-heading, .step-heading, .faq-q, .m-page *) {
	padding: 10px 0 10px 16px;
	border-left: 6px solid var(--m-blue);
	margin: 32px 0 16px;
}
:is(.post_content, .mce-content-body) h4:not(.case-heading, .step-heading, .faq-q, .m-page *) {
	padding: 8px 0 8px 16px;
	border-left: 5px solid var(--m-line);
	margin: 28px 0 14px;
}
:is(.post_content, .mce-content-body) h5:not(.case-heading, .step-heading, .faq-q, .m-page *) {
	color: var(--m-blue);
	font-weight: bold;
	margin: 20px 0 10px;
}
/* 本文の先頭の見出しは上を空けない */
.post_content > :is(h2, h3, h4, h5):first-child { margin-top: 0; }
/* 中身の無い見出し（<h4></h4>。61記事・114か所）は飾りも間も出さない（旧テーマは高さ 0 で見えなかった）。目次の空の項目も出さない */
.post_content :is(h1, h2, h3, h4, h5, h6):empty,
:is(.p-toc, .m-sideToc) li:has(> .p-toc__link:empty) { display: none; }

/* ---------- 文字の装飾 ---------- */
.m-red { color: var(--m-red); font-weight: bold; }
.m-blue { color: var(--m-blue); font-weight: bold; }
.m-marker,
.marker-yellow { background: linear-gradient(transparent 60%, var(--m-warn-bg) 60%); font-weight: bold; }
.highlight-yellow { background: var(--m-warn-bg); font-weight: bold; padding: 2px 6px; border-radius: 4px; margin: 0 2px; }

/* ---------- 枠 ---------- */
:is(.post_content, .mce-content-body) :is(.box-info, .box-warning, .step-summary) {
	padding: 16px 20px;
	border-radius: 6px;
	margin: 24px 0;
	line-height: 1.7;
	font-size: 15px;
}
:is(.post_content, .mce-content-body) .box-info { background: var(--m-info-bg); border-left: 5px solid var(--m-blue); }
:is(.post_content, .mce-content-body) .box-info strong { color: var(--m-blue); }
:is(.post_content, .mce-content-body) .box-warning { background: var(--m-warn-bg); border-left: 5px solid var(--m-red); }
:is(.post_content, .mce-content-body) .box-warning strong { color: var(--m-red); }
:is(.post_content, .mce-content-body) .step-summary { background: #fff; border: 1px solid var(--m-line); border-left: 5px solid var(--m-green); }
:is(.post_content, .mce-content-body) :is(.box-info, .box-warning, .step-summary) > :last-child { margin-bottom: 0; }

/* よくある質問（.faq-box の中に .faq-q と .faq-a） */
:is(.post_content, .mce-content-body) .faq-box { border: 1px solid var(--m-line); border-radius: 6px; padding: 20px 24px; margin: 0 0 20px; }
:is(.post_content, .mce-content-body) .faq-q,
:is(.post_content, .mce-content-body) .faq-a { position: relative; padding-left: 40px; line-height: 1.7; }
:is(.post_content, .mce-content-body) .faq-q { font-weight: bold; padding-bottom: 14px; margin: 0 0 14px; border-bottom: 1px dashed var(--m-line); }
:is(.post_content, .mce-content-body) .faq-a { font-size: 15px; }
:is(.post_content, .mce-content-body) :is(.faq-q, .faq-a)::before {
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	border-radius: 4px;
	color: #fff;
	font: bold 15px/28px Arial, sans-serif;
	text-align: center;
}
:is(.post_content, .mce-content-body) .faq-q::before { content: 'Q'; background: var(--m-blue); }
:is(.post_content, .mce-content-body) .faq-a :is(p, ul, ol) { margin: 0 0 12px; }
:is(.post_content, .mce-content-body) .faq-a > :last-child { margin-bottom: 0; }
:is(.post_content, .mce-content-body) .faq-a::before { content: 'A'; background: var(--m-green); }

/* ---------- 手順 ---------- */
/* 手順の大見出し・場合分けの小見出し */
.post_content h4.step-heading { padding: 10px 0 10px 20px; border-left: 6px solid var(--m-green); font-size: 22px; font-weight: bold; margin: 48px 0 20px; line-height: 1.4; }
.post_content .case-heading { font-size: 17px; font-weight: bold; padding-bottom: 8px; border-bottom: 2px solid var(--m-line); margin: 32px 0 14px; }

/* 番号の丸と縦線でつないだ手順（ol.step-list） */
.post_content ol.step-list { counter-reset: step-counter; list-style: none; padding-left: 0; margin: 0 0 24px; }
.post_content ol.step-list > li { position: relative; padding: 0 0 28px 44px; margin: 0; line-height: 1.7; }
.post_content ol.step-list > li::before {
	content: counter(step-counter);
	counter-increment: step-counter;
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--m-blue);
	color: #fff;
	font: bold 14px/28px Arial, sans-serif;
	text-align: center;
	z-index: 1;
}
.post_content ol.step-list > li::after { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--m-line); }
.post_content ol.step-list > li:last-child::after { content: none; }
.post_content ol.step-list img,
.post_content .sub-step-list img { display: block; margin: 14px 0 20px; max-width: 100%; height: auto; }

/* 番号だけの小さな手順（.sub-step-list の中に li か .step-item） */
.post_content .sub-step-list { counter-reset: sub-step-counter; list-style: none; padding-left: 0; margin: 0 0 20px; }
.post_content .sub-step-list > :is(li, .step-item) { position: relative; padding: 0 0 16px 28px; margin: 0; line-height: 1.7; }
/* 手順・答えの中の箇条書き（番号の手順の li は list-style: none なので、中の ul に黒丸を付け直す） */
.post_content :is(.step-list, .sub-step-list, .faq-a) ul { list-style: disc; padding-left: 1.5em; margin: 8px 0 12px; }
.post_content .sub-step-list > :is(li, .step-item)::before { content: counter(sub-step-counter) "."; counter-increment: sub-step-counter; position: absolute; left: 0; top: 0; font-weight: bold; }

/* ---------- 別の記事へのリンク ---------- */
.post_content a.reference-link {
	display: flex;
	align-items: center;
	border: 1px solid var(--m-line);
	border-left: 4px solid var(--m-blue);
	border-radius: 6px;
	padding: 14px 20px;
	margin: 24px 0;
	color: var(--m-blue);
	font-weight: bold;
	font-size: 15px;
	text-decoration: none;
	transition: background-color .2s;
}
.post_content a.reference-link:hover { background: var(--m-info-bg); }
.post_content a.text-link { display: inline-flex; align-items: center; color: var(--m-blue); font-weight: bold; font-size: 15px; text-decoration: none; margin-top: 8px; }
.post_content a.text-link:hover { text-decoration: underline; }
.post_content :is(a.reference-link, a.text-link)::after {
	content: '';
	width: 7px;
	height: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	margin-left: 10px;
}
.post_content a.reference-link::after { margin-left: auto; }

/* ---------- リスト（⑥） ---------- */
/* 項目の間を少し空け、入れ子は字下げを浅くして上下を詰める */
.post_content :where(ul, ol):not(.p-toc__list, .p-toc__childList, .display-posts-listing, .step-list, .sub-step-list) > li { margin-bottom: 6px; line-height: 1.7; }
.post_content :where(ul, ol):not(.p-toc__list, .p-toc__childList, .display-posts-listing, .step-list, .sub-step-list) :where(ul, ol) { margin: 6px 0 0; padding-left: 1.5em; }
.post_content ul.reference-list { list-style: disc; padding-left: 1.5em; margin: 10px 0 24px; }
.post_content ul.reference-list a.text-link { margin-top: 0; }