/*
Theme Name:   Arkhe Child
Template:     arkhe
Version:      1.4.3
Description:  Arkhe 子テーマ。JIN からの移行互換レイヤー（concept-box / kromegt）を同梱。
*/

/* =========================================================
   JIN → Arkhe 互換レイヤー（全媒体共通・色はメインカラー連動）
   既存記事の JIN 装飾クラスを Arkhe 上で正しく描画する。
   ・Arkhe の本文ラッパーは .c-postContent。
   ・色は Arkhe のカラー変数 var(--ark-color--main) を参照 →
     各サイトが「外観→カスタマイズ→メインカラー」を設定すれば
     ボックス色も自動で各サイトの配色になる（サイト個別CSS不要）。
   ========================================================= */

/* --- 囲みボックス（JIN: kromeelmwar = 左アクセント＋淡色地） --- */
.c-postContent .kromeelmwar {
	margin: 1.6em 0;
	padding: 1.1em 1.3em;
	background: color-mix(in srgb, var(--ark-color--main) 7%, #fff);
	border-left: 4px solid var(--ark-color--main);
	border-radius: 4px;
}

/* --- 囲みボックス（JIN: kromeny = 太枠・締め用） --- */
.c-postContent .kromeny {
	margin: 1.6em 0;
	padding: 1.1em 1.3em;
	background: #fff;
	border: 2px solid var(--ark-color--main);
	border-radius: 6px;
}

/* ボックス内テキストの詰まり防止（JIN由来の <p> 前提を踏襲） */
.c-postContent .kromeelmwar p,
.c-postContent .kromeny p {
	margin-bottom: .9em;
}
.c-postContent .kromeelmwar p:last-child,
.c-postContent .kromeny p:last-child {
	margin-bottom: 0;
}

/* --- 一言メッセージ（JIN: kromegt = 付箋風の強調） --- */
.c-postContent .kromegt {
	position: relative;
	margin: 1.8em 0;
	padding: .95em 1.2em .95em 2.7em;
	background: color-mix(in srgb, var(--ark-color--main) 5%, #fff);
	border: 1px dashed color-mix(in srgb, var(--ark-color--main) 45%, #fff);
	border-radius: 6px;
	font-weight: 700;
	color: var(--ark-color--text);
}
.c-postContent .kromegt::before {
	content: "\201C";
	position: absolute;
	left: .5em;
	top: .05em;
	font-size: 1.9em;
	line-height: 1;
	color: var(--ark-color--main);
}
.c-postContent .kromegt p {
	margin: 0;
}

/* 予備：kromemt（万一使われた場合の最低限の体裁） */
.c-postContent .kromemt {
	margin: 1.6em 0;
	padding: .9em 1.2em;
	background: var(--ark-color--gray);
	border-left: 4px solid var(--ark-color--main);
	border-radius: 4px;
}
.c-postContent .kromemt p { margin: 0; }

/* --- 追加の囲みボックス（JIN: kromeurnat/4/5） --- */
/* box3 = 2重線 / box4 = 太点線 / box5 = 背景色ベタ（意味合いはJIN準拠の近似） */
.c-postContent .kromeurnat {
	margin: 1.6em 0; padding: 1.1em 1.3em; background: #fff;
	border: 3px double var(--ark-color--main); border-radius: 5px;
}
.c-postContent .kromevex {
	margin: 1.6em 0; padding: 1.1em 1.3em; background: #fff;
	border: 2px dashed var(--ark-color--main); border-radius: 6px;
}
.c-postContent .kromexandri {
	margin: 1.6em 0; padding: 1.1em 1.3em;
	background: color-mix(in srgb, var(--ark-color--main) 10%, #fff);
	border-radius: 6px;
}
.c-postContent .kromeurnat p,
.c-postContent .kromevex p,
.c-postContent .kromexandri p { margin-bottom: .9em; }
.c-postContent .kromeurnat p:last-child,
.c-postContent .kromevex p:last-child,
.c-postContent .kromexandri p:last-child { margin-bottom: 0; }

/* --- 蛍光マーカー（JIN: <span class="kromeopal">） --- */
.c-postContent .kromeopal {
	background: linear-gradient(transparent 60%, color-mix(in srgb, var(--ark-color--main) 22%, #fff) 60%);
	padding: 0 .05em; font-weight: 700;
}

/* --- 会話ふきだし（JIN: [chat] の shim 出力） --- */
.c-postContent .kromenoltar {
	display: flex; align-items: flex-start; gap: .7em; margin: 1.8em 0;
}
.c-postContent .kromenoltar--r { flex-direction: row-reverse; }
.c-postContent .kromenoltar__cr {
	flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%;
	overflow: hidden; display: flex; align-items: center; justify-content: center;
	background: var(--ark-color--main); color: #fff; font-weight: 700; font-size: 22px;
	border: 2px solid color-mix(in srgb, var(--ark-color--main) 55%, #fff);
}
.c-postContent .kromenoltar__cr img { width: 100%; height: 100%; object-fit: cover; }
.c-postContent .kromenoltar__pd { flex: 1 1 auto; min-width: 0; }
.c-postContent .kromenoltar__dn { display: block; font-size: .8em; font-weight: 700; color: var(--ark-color--main); margin-bottom: .25em; }
.c-postContent .kromenoltar__jarl {
	position: relative; background: var(--ark-color--gray);
	border: 1px solid color-mix(in srgb, var(--ark-color--main) 20%, #fff);
	border-radius: 10px; padding: .85em 1.1em;
}
.c-postContent .kromenoltar__jarl p { margin: 0; }
/* ふきだしの尻尾 */
.c-postContent .kromenoltar--l .kromenoltar__jarl::before,
.c-postContent .kromenoltar--r .kromenoltar__jarl::before {
	content: ""; position: absolute; top: 16px; width: 0; height: 0;
	border: 8px solid transparent;
}
.c-postContent .kromenoltar--l .kromenoltar__jarl::before {
	left: -15px; border-right-color: var(--ark-color--gray);
}
.c-postContent .kromenoltar--r .kromenoltar__jarl::before {
	right: -15px; border-left-color: var(--ark-color--gray);
}

/* =========================================================
   アクセントカラー変数（既定＝メインカラー）
   Arkhe にはアクセント項目が無いため子テーマで定義する。
   サイト固有のアクセントを使う場合のみ、各サイトの
   「外観→カスタマイズ→追加CSS」に1行だけ置く：
     :root{ --ark-color--accent:#22B8C4; }   ← 例: site8
   置かなければメインカラーがそのまま使われる。
   ========================================================= */
:root { --ark-color--accent: var(--ark-color--main); }

/* =========================================================
   見出し・表・引用・リスト・強調（全媒体共通）
   ・main 連動＝H2塗り帯 / H4 / 引用 / 表 / 強調
   ・accent 連動＝H3色帯 / リストマーカー（サイトの差し色）
   ========================================================= */
.c-postContent h2 {
	background: var(--ark-color--main); color: #fff;
	padding: .6em .8em; border-radius: 4px; font-feature-settings: "palt";
}
.c-postContent h3 {
	border-left: 6px solid var(--ark-color--accent);
	padding: .1em .7em; border-radius: 2px;
}
.c-postContent h4 {
	border-left: 2px solid var(--ark-color--main); padding-left: .6em;
}
.c-postContent blockquote {
	border-left: 4px solid var(--ark-color--main);
	background: var(--ark-color--gray);
}
.c-postContent table th {
	background: var(--ark-color--main); color: #fff;
}
.c-postContent ul li {
	list-style: none; position: relative; padding-left: 1.4em; margin: .4em 0;
}
.c-postContent ul li::before {
	content: ""; position: absolute; left: .2em; top: .62em;
	width: .55em; height: .55em; background: var(--ark-color--accent);
	border-radius: 2px; transform: rotate(45deg);
}
.c-postContent strong {
	color: color-mix(in srgb, var(--ark-color--main) 80%, #000);
}

/* =========================================================
   会話ふきだし：JIN 生HTML版（balloon-* / site5 等）
   [chat] shim（.kromenoltar）とは別に、記事に直書きされた
   JIN balloon マークアップも Arkhe 上で描画する。
   ========================================================= */
.c-postContent .kromeqn {
	display: flex; align-items: flex-start; gap: .7em; margin: 1.8em 0;
}
.c-postContent .kromeqn.balloon-right { flex-direction: row-reverse; }
.c-postContent .kromewo {
	flex: 0 0 auto; width: 64px; text-align: center;
}
.c-postContent .kromewo img {
	width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
	border: 2px solid color-mix(in srgb, var(--ark-color--main) 45%, #fff);
}
.c-postContent .kromeyarn {
	flex: 0 0 auto; font-size: .72em; font-weight: 700;
	color: var(--ark-color--main); text-align: center; width: 64px;
	margin-top: .2em; order: 3;
}
.c-postContent .kromehurnet {
	flex: 1 1 auto; min-width: 0; position: relative;
	background: var(--ark-color--gray);
	border: 1px solid color-mix(in srgb, var(--ark-color--main) 20%, #fff);
	border-radius: 10px; padding: .85em 1.1em;
}
.c-postContent .kromeqn.balloon-bg-none .kromehurnet { background: #fff; }
.c-postContent .kromehurnet::before {
	content: ""; position: absolute; top: 16px; left: -15px;
	width: 0; height: 0; border: 8px solid transparent;
	border-right-color: var(--ark-color--gray);
}
.c-postContent .kromeqn.balloon-bg-none .kromehurnet::before {
	border-right-color: #fff;
}
.c-postContent .kromemurk p:last-child,
.c-postContent .kromemurk:last-child { margin-bottom: 0; }

/* =========================================================
   Contact Form 7（全媒体共通・メインカラー連動）
   各サイトの カスタマイズ.md §H を貼らなくても、メインカラーを
   設定すればフォームも自動でその配色になる。色は var(--ark-color--main)。
   ========================================================= */
.wpcf7 { max-width: 680px; margin: 0 auto; }
.wpcf7 label {
	display: block; font-weight: 700; margin: 14px 0 6px;
	color: color-mix(in srgb, var(--ark-color--main) 72%, #000);
}
.wpcf7-form-control {
	width: 100%; padding: 12px 14px; font-size: 16px; box-sizing: border-box;
	border: 1px solid color-mix(in srgb, var(--ark-color--main) 22%, #fff);
	border-radius: 6px; background: #fff; color: var(--ark-color--text);
	transition: border-color .2s, box-shadow .2s;
}
.wpcf7-form-control:focus {
	border-color: var(--ark-color--main);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ark-color--main) 20%, transparent);
	outline: none;
}
.wpcf7-textarea { min-height: 160px; resize: vertical; }
.wpcf7-submit {
	display: inline-block; margin-top: 18px; padding: 14px 40px; border: none;
	border-radius: 8px; background: var(--ark-color--main); color: #fff;
	font-weight: 700; font-size: 16px; cursor: pointer;
	transition: background .2s, transform .05s;
}
.wpcf7-submit:hover { background: color-mix(in srgb, var(--ark-color--main) 82%, #000); }
.wpcf7-submit:active { transform: translateY(1px); }
.wpcf7 .required,
.wpcf7-required { color: var(--ark-color--main); }
.wpcf7-not-valid-tip { color: #c0392b; font-size: .85em; margin-top: 4px; }
.wpcf7-form-control.wpcf7-not-valid { border-color: #c0392b; }
.wpcf7-response-output {
	margin: 18px 0 0 !important; padding: 12px 16px !important;
	border-radius: 6px; font-size: .9em;
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--ark-color--main); background: var(--ark-color--gray);
}
.wpcf7-spinner { background-color: var(--ark-color--main); }

/* ここから下に、各案件の独自CSS（あれば）を手打ちしていく */


/* =========================================================
   ★美装リファイン v2（2026-07-14）― 見た目の格上げ・color連動維持
   既存ルールを後勝ちで上書き。shim/変数連動はそのまま。
   ========================================================= */

/* 見出し：ベタ塗り帯 → 軽いエディトリアル（左バー＋下ヘアライン） */
.c-postContent h2 {
	background: transparent; color: var(--ark-color--text);
	padding: .1em 0 .5em .85em; border-radius: 0;
	border-left: 5px solid var(--ark-color--main);
	border-bottom: 2px solid color-mix(in srgb, var(--ark-color--main) 22%, #fff);
	font-weight: 800; letter-spacing: .01em;
}
.c-postContent h3 {
	border-left: 5px solid var(--ark-color--main); border-radius: 0;
	padding: .05em .7em; font-weight: 700;
}

/* 囲みボックス1：ソフトカード（角丸大＋淡影） */
.c-postContent .kromeelmwar {
	margin: 1.9em 0; padding: 1.25em 1.45em; border: none;
	background: color-mix(in srgb, var(--ark-color--main) 5%, #fff);
	border-left: 4px solid var(--ark-color--main);
	border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
/* 囲みボックス2：フレームカード（細枠＋淡影） */
.c-postContent .kromeny {
	margin: 1.9em 0; padding: 1.25em 1.45em; background: #fff;
	border: 1.5px solid color-mix(in srgb, var(--ark-color--main) 55%, #fff);
	border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

/* 付箋：破線 → クリーンな POINT ピル付きカード */
.c-postContent .kromegt {
	position: relative; margin: 2.1em 0; padding: 1.5em 1.3em 1.1em;
	background: color-mix(in srgb, var(--ark-color--main) 6%, #fff);
	border: none; border-left: 4px solid var(--ark-color--main);
	border-radius: 12px; font-weight: 700; color: var(--ark-color--text);
}
.c-postContent .kromegt::before {
	content: "POINT"; position: absolute; left: 1.3em; top: -.8em;
	background: var(--ark-color--main); color: #fff;
	font-size: .62em; font-weight: 800; letter-spacing: .1em;
	padding: .35em .85em; border-radius: 999px; line-height: 1;
	box-shadow: 0 2px 4px color-mix(in srgb, var(--ark-color--main) 30%, transparent);
}

/* 会話ふきだし：影付きアバター＋白バブル（モダンなメッセンジャー風） */
.c-postContent .kromenoltar__cr {
	width: 52px; height: 52px; font-size: 20px; border: none;
	box-shadow: 0 2px 6px color-mix(in srgb, var(--ark-color--main) 32%, transparent);
}
.c-postContent .kromenoltar__jarl {
	background: #fff; border-radius: 14px; padding: .9em 1.15em;
	border: 1px solid color-mix(in srgb, var(--ark-color--main) 16%, #fff);
	box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.c-postContent .kromenoltar--l .kromenoltar__jarl::before { border-right-color: #fff; }
.c-postContent .kromenoltar--r .kromenoltar__jarl::before { border-left-color: #fff; }

/* 強調：太字＋メイン色のみ（下線は == マーカー側＝役割分離） */
.c-postContent strong {
	color: color-mix(in srgb, var(--ark-color--main) 82%, #000);
	background: none;
}

/* ★会話ふきだし：アイコンとバブルの高さ揃え（2026-07-14） */
.c-postContent .kromenoltar { align-items: center; }
.c-postContent .kromenoltar__jarl {
	min-height: 52px; display: flex; align-items: center;
}
.c-postContent .kromenoltar__raskol { display: block; width: 100%; min-width: 0; }
/* 名前ラベルはバブル上に小さく載せ、中央合わせの基準から外す */
.c-postContent .kromenoltar__dn { margin-bottom: .3em; }

/* ★会話ふきだし v2：名前を絶対配置で逃がし、アイコン＝バブルを完全同高整列（2026-07-14） */
.c-postContent .kromenoltar { align-items: center; margin-top: 2.6em; }
.c-postContent .kromenoltar__pd { position: relative; }
.c-postContent .kromenoltar__dn {
	position: absolute; top: -1.4em; left: .3em; right: auto;
	margin: 0; line-height: 1;
}
.c-postContent .kromenoltar--r .kromenoltar__dn { left: auto; right: .3em; }

/* ★左アクセント帯の途切れ解消：左角を直角にして帯をフル直線に（2026-07-14） */
.c-postContent .kromeelmwar,
.c-postContent .kromegt,
.c-postContent .kromemt {
	border-radius: 0 12px 12px 0;
}

/* =========================================================
   自作ブログカード（内部URL単独行 → カード / メインカラー連動）
   ========================================================= */
.c-postContent a.kromeblyth {
	display: flex; align-items: stretch; gap: 0; margin: 1.8em 0;
	border: 1px solid color-mix(in srgb, var(--ark-color--main) 20%, #fff);
	border-radius: 12px; overflow: hidden; text-decoration: none;
	background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06);
	transition: box-shadow .2s, transform .05s, border-color .2s;
}
.c-postContent a.kromeblyth:hover {
	box-shadow: 0 4px 14px color-mix(in srgb, var(--ark-color--main) 22%, transparent);
	border-color: color-mix(in srgb, var(--ark-color--main) 45%, #fff);
}
.c-postContent .kromeblyth__cove {
	flex: 0 0 34%; max-width: 200px; background: var(--ark-color--gray);
	display: block; overflow: hidden;
}
.c-postContent .kromeblyth__cove img {
	width: 100%; height: 100%; min-height: 100%; object-fit: cover; display: block;
}
.c-postContent .kromeblyth__cove--none {
	background: color-mix(in srgb, var(--ark-color--main) 10%, #fff);
}
.c-postContent .kromeblyth__tv {
	flex: 1 1 auto; min-width: 0; padding: .85em 1.1em;
	display: flex; flex-direction: column; justify-content: center; gap: .3em;
}
.c-postContent .kromeblyth__ju {
	font-size: .68em; font-weight: 800; letter-spacing: .08em;
	color: var(--ark-color--main);
}
.c-postContent .kromeblyth__ferl {
	font-size: 1em; font-weight: 700; line-height: 1.4; color: var(--ark-color--text);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.c-postContent .kromeblyth__holmen {
	font-size: .82em; line-height: 1.6; color: color-mix(in srgb, var(--ark-color--text) 72%, #fff);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.c-postContent .kromeblyth__ivor {
	flex: 0 0 auto; align-self: center; padding: 0 .7em 0 .2em;
	font-size: 1.6em; color: color-mix(in srgb, var(--ark-color--main) 55%, #fff);
}
@media (max-width: 600px) {
	.c-postContent .kromeblyth__cove { flex-basis: 32%; }
	.c-postContent .kromeblyth__holmen { display: none; }
}

/* 会話ふきだし内の NG/OK ラベル（文頭にinlineの色付き太字。背景・ヘッダーなし） */
.c-postContent .kromenoltar__jarl .kromeprow { font-weight: 800; margin-right: .1em; }
.c-postContent .kromenoltar__jarl .kromeprow--ng { color: #d0392b; }
.c-postContent .kromenoltar__jarl .kromeprow--ok { color: var(--ark-color--main); }

/* =========================================================
   目次（TOC）― functions.php 自動生成 / メインカラー連動
   ========================================================= */
.c-postContent .kromezp {
	margin: 2em 0; padding: .4em 1.4em 1em;
	background: color-mix(in srgb, var(--ark-color--main) 4%, #fff);
	border: 1px solid color-mix(in srgb, var(--ark-color--main) 20%, #fff);
	border-radius: 12px;
}
.c-postContent .kromezp__ar {
	font-weight: 800; color: var(--ark-color--main); cursor: pointer;
	padding: .7em .2em; list-style: none; outline: none;
	display: flex; align-items: center; gap: .5em;
}
.c-postContent .kromezp__ar::-webkit-details-marker { display: none; }
.c-postContent .kromezp__ar::before {
	content: "▾"; font-size: .9em; transition: transform .2s;
	color: color-mix(in srgb, var(--ark-color--main) 60%, #fff);
}
.c-postContent .kromezp details:not([open]) .kromezp__ar::before,
.c-postContent details:not([open]) > .kromezp__ar::before { transform: rotate(-90deg); }
.c-postContent .kromezp__silt, .c-postContent .kromezp__isk { list-style: none; margin: 0; padding: 0; }
.c-postContent .kromezp__silt { counter-reset: toc2; }
.c-postContent .kromezp__silt > li { counter-increment: toc2; margin: .5em 0; }
.c-postContent .kromezp__silt > li > a::before {
	content: counter(toc2) ". "; color: var(--ark-color--main); font-weight: 700; margin-right: .1em;
}
.c-postContent .kromezp__isk { counter-reset: toc3; padding-left: 1.5em; margin: .35em 0 .2em; }
.c-postContent .kromezp__isk > li { counter-increment: toc3; margin: .3em 0; }
.c-postContent .kromezp__isk > li > a::before {
	content: counter(toc2) "-" counter(toc3) " ";
	color: color-mix(in srgb, var(--ark-color--main) 70%, #fff); font-weight: 700; margin-right: .1em;
}
.c-postContent .kromezp a {
	color: var(--ark-color--text); text-decoration: none; line-height: 1.5;
}
.c-postContent .kromezp a:hover { color: var(--ark-color--main); text-decoration: underline; }
.c-postContent .kromezp__isk > li > a { font-size: .92em; color: color-mix(in srgb, var(--ark-color--text) 82%, #fff); }
/* アンカー移動時に見出しがヘッダー下へ隠れないよう余白 */
.c-postContent h2, .c-postContent h3 { scroll-margin-top: 90px; }

/* =========================================================
   本文タイポグラフィ（行間・字間 / スマホ対応）全 Arkhe 媒体共通
   ・行間はゆったり、字間は既定より少し広く（読みやすさ優先）
   ・スマホは字間・行間をわずかに詰めて詰まり過ぎを防ぐ
   ========================================================= */
.c-postContent { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.c-postContent p,
.c-postContent li {
	line-height: 1.95;
	letter-spacing: 0.04em;   /* 文字間を少しだけ広く（行間は不変） */
}
.c-postContent p { margin: 0 0 1.5em; }

/* スマホ（〜600px）：字間・行間をわずかに調整＋段落間を最適化 */
@media (max-width: 600px) {
	.c-postContent p,
	.c-postContent li {
		line-height: 2.05;          /* スマホは詰まりやすいので広めに */
	}
	.c-postContent p { margin: 0 0 1.7em; }   /* 段落間もゆったり */
}

/* =========================================================
   フォント装飾（強調・マーカー）全 Arkhe 媒体共通
   方針：蛍光/背景ハイライトは使わない。強調＝太字＋テーマ色下線、
   マーカー＝少し大きな文字＋テーマ色の太い下線（背景なし）。
   ========================================================= */
.c-postContent strong {
	font-weight: 700;
	color: color-mix(in srgb, var(--ark-color--main) 82%, #000);
	background: none;
}  /* 役割分離：** は太字＋メイン色のみ（下線は == マーカー側） */
.c-postContent .kromeopal {
	background: none;
	font-weight: 700;
	font-size: 1.06em;
	border-bottom: 3px solid color-mix(in srgb, var(--ark-color--main) 48%, #fff);
	padding-bottom: .05em;
}


/* =========================================================
   まとめボックスの番号リスト（①②③まとめ→<ol class="kromelume">）
   メインカラーの丸番号。締め文はリスト後の段落として残る。
   ========================================================= */
.c-postContent .kromelume {
	list-style: none; counter-reset: bl; margin: .3em 0 .5em; padding: 0;
}
.c-postContent .kromelume > li {
	counter-increment: bl; position: relative; padding-left: 2em;
	margin: .55em 0; line-height: 1.7;
}
.c-postContent .kromelume > li::before {
	content: counter(bl); position: absolute; left: 0; top: .15em;
	width: 1.5em; height: 1.5em; line-height: 1.5em; text-align: center;
	background: var(--ark-color--main); color: #fff; border-radius: 50%;
	font-size: .78em; font-weight: 800;
}
.c-postContent .kromelume + p { margin-top: .6em; }


/* =========================================================
   [B案] ラベルタブ型 concept-box（2026-07-15 刷新）
   左バー＋淡色地を廃止 → 白カード＋細枠、角に役割タブ（::before）
   box1=POINT（メイン色）／box2=注意（アクセント色）。色は var() 連動＝各サイトのメインカラーに追従。
   ※末尾に置き、先行の美装リファイン/左角直角ルールを上書き
   ========================================================= */
.c-postContent .kromeelmwar,
.c-postContent .kromeny {
	position: relative;
	margin: 2.5em 0 1.7em;
	padding: 1.55em 1.4em 1.2em;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--ark-color--main) 20%, #fff);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.c-postContent .kromeelmwar::before,
.c-postContent .kromeny::before {
	position: absolute; top: -.82em; left: 1.2em;
	display: inline-block; padding: .34em .95em;
	font-size: .72em; font-weight: 800; letter-spacing: .12em;
	color: #fff; line-height: 1; border-radius: 6px;
}
.c-postContent .kromeelmwar::before {
	content: "POINT";
	background: var(--ark-color--main);
	box-shadow: 0 2px 4px color-mix(in srgb, var(--ark-color--main) 26%, transparent);
}
.c-postContent .kromeny::before {
	content: "注意";
	background: var(--ark-color--accent);
	box-shadow: 0 2px 4px color-mix(in srgb, var(--ark-color--accent) 30%, transparent);
}
.c-postContent .kromeelmwar > p:first-child,
.c-postContent .kromeny > p:first-child { margin-top: .15em; }


/* =========================================================
   [A案] kromegt → プルクオート（引用型・POINTピル廃止）2026-07-15
   POINTピルをやめ、太いアクセント帯＋大きな引用符“で一言メッセージに。
   concept-box の POINT タブとは別物として視覚分離。色は accent 連動。
   ========================================================= */
.c-postContent .kromegt {
	position: relative;
	margin: 2.4em 0;
	padding: .3em 0 .3em 1.5em;
	background: none;
	border: none;
	border-left: 5px solid var(--ark-color--accent);
	border-radius: 0;
	font-weight: 700;
	font-size: 1.13em;
	line-height: 1.9;
	color: var(--ark-color--main);
}
.c-postContent .kromegt::before { content: none; }
.c-postContent .kromegt p {
	margin: 0;
	padding-left: 1.4em;
	position: relative;
}
.c-postContent .kromegt p::before {
	content: "\201C";
	position: absolute; left: -.1em; top: -.42em;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2.5em; line-height: 1;
	color: color-mix(in srgb, var(--ark-color--accent) 48%, #fff);
	pointer-events: none;
}


/* kromeelmwar の枠を二重線に（2026-07-15・kromeny は単線のまま） */
.c-postContent .kromeelmwar {
	border: 3px double color-mix(in srgb, var(--ark-color--main) 42%, #fff);
}


/* kromeelmwar：太いボーダー＋角丸なし（四角）2026-07-15・v139二重線を後勝ちで上書き */
.c-postContent .kromeelmwar {
	border: 3px solid var(--ark-color--main);
	border-radius: 0;
}
.c-postContent .kromeelmwar::before { border-radius: 0; }

/* =========================================================
   個別レイヤー（配色＋装飾）
   出自＝当サイトの CSS用.md（原本 engine/kits/_css-core.md）。
   共通レイヤーより後ろ＝同一詳細度ならこちらが勝つ。
   ========================================================= */

/* カスタマイザー未設定でも本文だけは本サイトの配色で描画する */
.c-postContent {
  --ark-color--main:   #37414B;
  --ark-color--accent: #5E8CA0;
}

/* 配色（このサイト固有） */
:root {
  --krome-main:   #37414B;
  --krome-accent: #5E8CA0;
  --krome-text:   #24303A;
}

/* ============================================================
   共通CSSコア ― Arkhe 子テーマの装飾6項目（配色は変数参照）
   原本: engine/kits/_css-core.md ／ 各サイト CSS用.md へ配布
   前提: 各サイトの :root で --krome-main / --krome-accent を定義
   ============================================================ */

/* ---- main から濃淡を自動導出（変数を増やさないため） ---- */
.c-postContent {
  --kromem:  var(--krome-main);
  --kromek:  color-mix(in srgb, var(--krome-main) 78%, #000);
  --kromec:   var(--krome-accent);
  --kromex:  #24303A;
  --kromen:  color-mix(in srgb, var(--krome-main) 18%, #fff);
  --kromef:  color-mix(in srgb, var(--krome-main) 8%,  #fff);
}

/* ============================================================
   1. マーカー ― 蛍光ハイライトを廃止し「太字＋テーマ色下線＋大きめ」
   ※ 記事の ==テキスト== → <span class="kromeopal">（wp_publish.py）
   ※ engine 子テーマの background: linear-gradient(...) を打ち消す
      （オーナー指示：蛍光マーカーは使わない・下線で強調）
   ============================================================ */
.c-postContent .kromeopal {
  background: none !important;
  padding: 0 !important;
  font-weight: 700;
  font-size: 1.08em;
  color: var(--kromek);
  border-bottom: 3px solid var(--kromec);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-bottom: 1px !important;
}

/* ============================================================
   2. 囲みボックス ― 見た目を刷新（クラス名は新旧どちらも受ける）
   新 s12-note→汎用 .kromekp（補足・送り）／.kromelorneth（禁止線）／.kromedunmar（要点）
   旧 kromeelmwar / kromeny / kromeurnat,4,5 も同じ見た目で受ける
   ============================================================ */
.c-postContent .kromekp,
.c-postContent .kromeelmwar,
.c-postContent .kromeurnat,
.c-postContent .kromevex,
.c-postContent .kromexandri {
  margin: 1.8em 0;
  padding: 1.1em 1.3em 1.1em 1.5em;
  background: var(--kromef);
  border: 0;
  border-left: 5px solid var(--kromem);
  border-radius: 0 6px 6px 0;
  color: var(--kromex);
}
.c-postContent .kromekp p:last-child,
.c-postContent .kromeelmwar p:last-child { margin-bottom: 0; }

.c-postContent .kromelorneth,
.c-postContent .kromeny {
  margin: 1.8em 0;
  padding: 1.2em 1.3em;
  background: color-mix(in srgb, var(--krome-accent) 8%, #fff);
  border: 0;
  border-top: 3px solid var(--kromec);
  border-bottom: 3px solid var(--kromec);
  border-radius: 0;
  color: var(--kromex);
}
.c-postContent .kromelorneth p:last-child,
.c-postContent .kromeny p:last-child { margin-bottom: 0; }

.c-postContent .kromedunmar {
  margin: 1.8em 0; padding: 1.2em 1.3em; background: #fff;
  border: 2px solid var(--kromem); border-radius: 6px;
}
.c-postContent .kromedunmar p:last-child { margin-bottom: 0; }

/* ============================================================
   3. 番号リスト ― 丸バッジの連番（engine 子テーマに定義が無かった）
   ★Docker検証で確定：素の `ol` に当てると目次(.kromezp)・パンくず
     (.p-breadcrumb__list)・サイドバー(.wp-block-latest-comments)へ誤爆し、
     ⓪バッジ・二重番号・「1. Home 2.」が出る。本文直下の ol だけに限定する。
     「保険」で list-style:revert / counter-increment:none を書くと逆に
     テーマの既定を壊す（パンくず数字化・目次カウンター破壊）＝書かない。
   ============================================================ */
.c-postContent > ol,
.c-postContent > * > ol:not([class]) {
  list-style: none; counter-reset: s-li; padding-left: 0; margin: 1.4em 0;
}
.c-postContent > ol > li,
.c-postContent > * > ol:not([class]) > li {
  counter-increment: s-li; position: relative;
  padding: .1em 0 .1em 2.4em; margin-bottom: .7em; line-height: 1.9; list-style: none;
}
.c-postContent > ol > li::before,
.c-postContent > * > ol:not([class]) > li::before {
  content: counter(s-li); position: absolute; left: 0; top: .25em;
  width: 1.7em; height: 1.7em; line-height: 1.7em; text-align: center;
  border-radius: 50%; background: var(--kromem); color: #fff;
  font-weight: 700; font-size: .85em;
}

/* ============================================================
   4. moreタグ ― 「続きを読む」ボタン
   ============================================================ */
.c-postContent .more-link {
  display: inline-block; margin-top: .8em; padding: .45em 1.2em;
  border: 2px solid var(--kromem); border-radius: 4px;
  font-weight: 700; text-decoration: none; color: var(--kromem);
}
.c-postContent .more-link:hover { background: var(--kromem); color: #fff; }

/* ============================================================
   5. 内部リンクカード（kromeblyth）
   ============================================================ */
.c-postContent a.kromeblyth {
  border: 1px solid var(--kromen) !important;
  border-left: 5px solid var(--kromem) !important;
  border-radius: 0 8px 8px 0 !important;
  background: #fff !important; box-shadow: none !important;
  transition: box-shadow .2s ease, transform .2s ease;
}
.c-postContent a.kromeblyth:hover {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--krome-main) 18%, transparent) !important;
  transform: translateY(-1px);
}
.c-postContent .kromeblyth__ju {
  color: #fff !important; background: var(--kromem) !important;
  border-radius: 3px; padding: .1em .7em; font-weight: 700; letter-spacing: .04em;
}
.c-postContent .kromeblyth__ferl { color: var(--kromex) !important; font-weight: 700; }
.c-postContent .kromeblyth__ivor { color: var(--kromec) !important; }

/* ============================================================
   6. 吹き出し（[chat] → .kromenoltar）
   ★Docker検証で確定：アバター背景だけ淡色にして color を指定しないと
     親テーマの color:#fff が残り「白地に白文字」で頭文字が消える。
     背景と文字色は必ずセットで指定する。
   ※ 名札(.kromenoltar__dn)の表示/非表示は各サイト判断。既定は表示。
     一人語り運用のサイト（話者が1人）は各サイトの CSS用.md で display:none。
   ============================================================ */
.c-postContent .kromenoltar__dn { color: var(--kromem) !important; letter-spacing: .04em; }
.c-postContent .kromenoltar__cr {
  border: 2px solid var(--kromem) !important;
  background: #fff !important; color: var(--kromem) !important; font-weight: 700;
}
.c-postContent .kromenoltar--r .kromenoltar__jarl {
  background: var(--kromef) !important; border: 1px solid var(--kromem) !important; border-radius: 10px !important;
}
.c-postContent .kromenoltar--r .kromenoltar__jarl::before { border-left-color: var(--kromem) !important; }
.c-postContent .kromenoltar--l .kromenoltar__jarl {
  background: #fff !important; border: 1px solid var(--kromen) !important; border-radius: 10px !important;
}
.c-postContent .kromenoltar--l .kromenoltar__jarl::before { border-right-color: var(--kromen) !important; }

/* ============================================================
   7. 下地（リンク・h3・表）※ h2 は各サイトの個性なので共通化しない
   ============================================================ */
.c-postContent a:not(.kromeblyth) { color: var(--kromek); }
.c-postContent a:not(.kromeblyth):hover { color: var(--kromec); }
.c-postContent h3 { border-bottom: 2px solid var(--kromen); padding-bottom: .3em; }
.c-postContent table th { background: var(--kromef); color: var(--kromex); }

/* 見出し */
.c-postContent h2 {
	background: transparent; color: var(--krome-text);
	border: none; border-radius: 0;
	border-bottom: 3px solid var(--krome-main);
	padding: .1em 0 .3em;
}