/*
Theme Name:   Arkhe Child
Template:     arkhe
Version:      1.4.3
Description:  Arkhe 子テーマ。JIN 互換レイヤー＋自作TOC／ブログカードに加え、配色・装飾を末尾に同梱。追加CSSへの貼り付けは不要。
*/

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

/* --- 囲みボックス（JIN: point-box = 左アクセント＋淡色地） --- */
.c-postContent .point-box {
	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: warn-box = 太枠・締め用） --- */
.c-postContent .warn-box {
	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 .point-box p,
.c-postContent .warn-box p {
	margin-bottom: .9em;
}
.c-postContent .point-box p:last-child,
.c-postContent .warn-box p:last-child {
	margin-bottom: 0;
}

/* --- 一言メッセージ（JIN: pull-quote = 付箋風の強調） --- */
.c-postContent .pull-quote {
	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 .pull-quote::before {
	content: "\201C";
	position: absolute;
	left: .5em;
	top: .05em;
	font-size: 1.9em;
	line-height: 1;
	color: var(--ark-color--main);
}
.c-postContent .pull-quote p {
	margin: 0;
}

/* 予備：jin-fusen1（万一使われた場合の最低限の体裁） */
.c-postContent .jin-fusen1 {
	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 .jin-fusen1 p { margin: 0; }

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

/* --- 蛍光マーカー（JIN: <span class="marker">） --- */
.c-postContent .marker {
	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 .jinchat {
	display: flex; align-items: flex-start; gap: .7em; margin: 1.8em 0;
}
.c-postContent .jinchat--r { flex-direction: row-reverse; }
.c-postContent .jinchat__face {
	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 .jinchat__face img { width: 100%; height: 100%; object-fit: cover; }
.c-postContent .jinchat__body { flex: 1 1 auto; min-width: 0; }
.c-postContent .jinchat__name { display: block; font-size: .8em; font-weight: 700; color: var(--ark-color--main); margin-bottom: .25em; }
.c-postContent .jinchat__bubble {
	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 .jinchat__bubble p { margin: 0; }
/* ふきだしの尻尾 */
.c-postContent .jinchat--l .jinchat__bubble::before,
.c-postContent .jinchat--r .jinchat__bubble::before {
	content: ""; position: absolute; top: 16px; width: 0; height: 0;
	border: 8px solid transparent;
}
.c-postContent .jinchat--l .jinchat__bubble::before {
	left: -15px; border-right-color: var(--ark-color--gray);
}
.c-postContent .jinchat--r .jinchat__bubble::before {
	right: -15px; border-left-color: var(--ark-color--gray);
}

/* =========================================================
   アクセントカラー変数（既定＝メインカラー）
   Arkhe にはアクセント項目が無いため子テーマで定義する。
   サイト固有のアクセントを使う場合のみ、各サイトの
   「外観→カスタマイズ→追加CSS」に1行だけ置く：
     :root{ --ark-color--accent:#22B8C4; }   ← 記述例
   置かなければメインカラーがそのまま使われる。
   ========================================================= */
: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-*）
   [chat] shim（.jinchat）とは別に、記事に直書きされた
   JIN balloon マークアップも Arkhe 上で描画する。
   ========================================================= */
.c-postContent .balloon-box {
	display: flex; align-items: flex-start; gap: .7em; margin: 1.8em 0;
}
.c-postContent .balloon-box.balloon-right { flex-direction: row-reverse; }
.c-postContent .balloon-icon {
	flex: 0 0 auto; width: 64px; text-align: center;
}
.c-postContent .balloon-icon 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 .icon-name {
	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 .balloon-serif {
	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 .balloon-box.balloon-bg-none .balloon-serif { background: #fff; }
.c-postContent .balloon-serif::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 .balloon-box.balloon-bg-none .balloon-serif::before {
	border-right-color: #fff;
}
.c-postContent .balloon-content p:last-child,
.c-postContent .balloon-content: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 .point-box {
	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 .warn-box {
	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 .pull-quote {
	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 .pull-quote::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 .jinchat__face {
	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 .jinchat__bubble {
	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 .jinchat--l .jinchat__bubble::before { border-right-color: #fff; }
.c-postContent .jinchat--r .jinchat__bubble::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 .jinchat { align-items: center; }
.c-postContent .jinchat__bubble {
	min-height: 52px; display: flex; align-items: center;
}
.c-postContent .jinchat__text { display: block; width: 100%; min-width: 0; }
/* 名前ラベルはバブル上に小さく載せ、中央合わせの基準から外す */
.c-postContent .jinchat__name { margin-bottom: .3em; }

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

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

/* =========================================================
   自作ブログカード（内部URL単独行 → カード / メインカラー連動）
   ========================================================= */
.c-postContent a.arkhe-blogcard {
	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.arkhe-blogcard: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 .arkhe-blogcard__thumb {
	flex: 0 0 34%; max-width: 200px; background: var(--ark-color--gray);
	display: block; overflow: hidden;
}
.c-postContent .arkhe-blogcard__thumb img {
	width: 100%; height: 100%; min-height: 100%; object-fit: cover; display: block;
}
.c-postContent .arkhe-blogcard__thumb--none {
	background: color-mix(in srgb, var(--ark-color--main) 10%, #fff);
}
.c-postContent .arkhe-blogcard__body {
	flex: 1 1 auto; min-width: 0; padding: .85em 1.1em;
	display: flex; flex-direction: column; justify-content: center; gap: .3em;
}
.c-postContent .arkhe-blogcard__label {
	font-size: .68em; font-weight: 800; letter-spacing: .08em;
	color: var(--ark-color--main);
}
.c-postContent .arkhe-blogcard__title {
	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 .arkhe-blogcard__excerpt {
	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 .arkhe-blogcard__arrow {
	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 .arkhe-blogcard__thumb { flex-basis: 32%; }
	.c-postContent .arkhe-blogcard__excerpt { display: none; }
}

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

/* =========================================================
   目次（TOC）― functions.php 自動生成 / メインカラー連動
   ========================================================= */
.c-postContent .arkhe-toc {
	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 .arkhe-toc__title {
	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 .arkhe-toc__title::-webkit-details-marker { display: none; }
.c-postContent .arkhe-toc__title::before {
	content: "▾"; font-size: .9em; transition: transform .2s;
	color: color-mix(in srgb, var(--ark-color--main) 60%, #fff);
}
.c-postContent .arkhe-toc details:not([open]) .arkhe-toc__title::before,
.c-postContent details:not([open]) > .arkhe-toc__title::before { transform: rotate(-90deg); }
.c-postContent .arkhe-toc__list, .c-postContent .arkhe-toc__sub { list-style: none; margin: 0; padding: 0; }
.c-postContent .arkhe-toc__list { counter-reset: toc2; }
.c-postContent .arkhe-toc__list > li { counter-increment: toc2; margin: .5em 0; }
.c-postContent .arkhe-toc__list > li > a::before {
	content: counter(toc2) ". "; color: var(--ark-color--main); font-weight: 700; margin-right: .1em;
}
.c-postContent .arkhe-toc__sub { counter-reset: toc3; padding-left: 1.5em; margin: .35em 0 .2em; }
.c-postContent .arkhe-toc__sub > li { counter-increment: toc3; margin: .3em 0; }
.c-postContent .arkhe-toc__sub > 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 .arkhe-toc a {
	color: var(--ark-color--text); text-decoration: none; line-height: 1.5;
}
.c-postContent .arkhe-toc a:hover { color: var(--ark-color--main); text-decoration: underline; }
.c-postContent .arkhe-toc__sub > 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 .marker {
	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="box-list">）
   メインカラーの丸番号。締め文はリスト後の段落として残る。
   ========================================================= */
.c-postContent .box-list {
	list-style: none; counter-reset: bl; margin: .3em 0 .5em; padding: 0;
}
.c-postContent .box-list > li {
	counter-increment: bl; position: relative; padding-left: 2em;
	margin: .55em 0; line-height: 1.7;
}
.c-postContent .box-list > 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 .box-list + p { margin-top: .6em; }


/* =========================================================
   [B案] ラベルタブ型 concept-box（2026-07-15 刷新）
   左バー＋淡色地を廃止 → 白カード＋細枠、角に役割タブ（::before）
   box1=POINT（メイン色）／box2=注意（アクセント色）。色は var() 連動＝各サイトのメインカラーに追従。
   ※末尾に置き、先行の美装リファイン/左角直角ルールを上書き
   ========================================================= */
.c-postContent .point-box,
.c-postContent .warn-box {
	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 .point-box::before,
.c-postContent .warn-box::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 .point-box::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 .warn-box::before {
	content: "注意";
	background: var(--ark-color--accent);
	box-shadow: 0 2px 4px color-mix(in srgb, var(--ark-color--accent) 30%, transparent);
}
.c-postContent .point-box > p:first-child,
.c-postContent .warn-box > p:first-child { margin-top: .15em; }


/* =========================================================
   [A案] pull-quote → プルクオート（引用型・POINTピル廃止）2026-07-15
   POINTピルをやめ、太いアクセント帯＋大きな引用符“で一言メッセージに。
   concept-box の POINT タブとは別物として視覚分離。色は accent 連動。
   ========================================================= */
.c-postContent .pull-quote {
	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 .pull-quote::before { content: none; }
.c-postContent .pull-quote p {
	margin: 0;
	padding-left: 1.4em;
	position: relative;
}
.c-postContent .pull-quote 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;
}


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


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


/* =========================================================
   個別レイヤー（配色＋装飾）  2026-07-21 同梱
   出自＝当サイトの CSS用.md（原本 engine/kits/_css-core.md ＋ apply-css.py）
   本来は「外観→カスタマイズ→追加CSS」へ貼る内容を、テーマ同梱に切替。
   ・上の共通レイヤーより後ろ＝同一詳細度なら常にこちらが勝つ。
   ・クラス名は functions.php / wp_publish.py の出力名。絶対に変更しない。
   ・原本を直した時は apply-css.py 実行 → CSS用.md をこの区画へ再同梱する。
   ========================================================= */

/* Arkhe カラー変数の本文内フォールバック。
   カスタマイザーで メインカラー #5B3B8C を設定していれば同値。
   未設定でも記事本文だけは本サイトの配色で描画されるようにする。
   （ヘッダー/フッター等の本文外は従来どおりカスタマイザー側で設定する） */
.c-postContent {
  --ark-color--main:   #5B3B8C;
  --ark-color--accent: #D9A441;
}

:root {
  --mx-main:   #5B3B8C;
  --mx-accent: #D9A441;
  --mx-text:   #24303A;
}

.c-postContent {
  --mxm:  var(--mx-main);
  --mxk:  color-mix(in srgb, var(--mx-main) 78%, #000);
  --mxc:   var(--mx-accent);
  --mxx:  #24303A;
  --mxn:  color-mix(in srgb, var(--mx-main) 18%, #fff);
  --mxf:  color-mix(in srgb, var(--mx-main) 8%,  #fff);
}

.c-postContent .marker {
  background: none !important;
  padding: 0 !important;
  font-weight: 700;
  font-size: 1.08em;
  color: var(--mxk);
  border-bottom: 3px solid var(--mxc);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-bottom: 1px !important;
}

.c-postContent .box-note,
.c-postContent .point-box,
.c-postContent .concept-box3,
.c-postContent .concept-box4,
.c-postContent .concept-box5 {
  margin: 1.8em 0;
  padding: 1.1em 1.3em 1.1em 1.5em;
  background: var(--mxf);
  border: 0;
  border-left: 5px solid var(--mxm);
  border-radius: 0 6px 6px 0;
  color: var(--mxx);
}
.c-postContent .box-note p:last-child,
.c-postContent .point-box p:last-child { margin-bottom: 0; }

.c-postContent .box-caution,
.c-postContent .warn-box {
  margin: 1.8em 0;
  padding: 1.2em 1.3em;
  background: color-mix(in srgb, var(--mx-accent) 8%, #fff);
  border: 0;
  border-top: 3px solid var(--mxc);
  border-bottom: 3px solid var(--mxc);
  border-radius: 0;
  color: var(--mxx);
}
.c-postContent .box-caution p:last-child,
.c-postContent .warn-box p:last-child { margin-bottom: 0; }

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

.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(--mxm); color: #fff;
  font-weight: 700; font-size: .85em;
}

.c-postContent .more-link {
  display: inline-block; margin-top: .8em; padding: .45em 1.2em;
  border: 2px solid var(--mxm); border-radius: 4px;
  font-weight: 700; text-decoration: none; color: var(--mxm);
}
.c-postContent .more-link:hover { background: var(--mxm); color: #fff; }

.c-postContent a.arkhe-blogcard {
  border: 1px solid var(--mxn) !important;
  border-left: 5px solid var(--mxm) !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.arkhe-blogcard:hover {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--mx-main) 18%, transparent) !important;
  transform: translateY(-1px);
}
.c-postContent .arkhe-blogcard__label {
  color: #fff !important; background: var(--mxm) !important;
  border-radius: 3px; padding: .1em .7em; font-weight: 700; letter-spacing: .04em;
}
.c-postContent .arkhe-blogcard__title { color: var(--mxx) !important; font-weight: 700; }
.c-postContent .arkhe-blogcard__arrow { color: var(--mxc) !important; }

.c-postContent .jinchat__name { color: var(--mxm) !important; letter-spacing: .04em; }
.c-postContent .jinchat__face {
  border: 2px solid var(--mxm) !important;
  background: #fff !important; color: var(--mxm) !important; font-weight: 700;
}
.c-postContent .jinchat--r .jinchat__bubble {
  background: var(--mxf) !important; border: 1px solid var(--mxm) !important; border-radius: 10px !important;
}
.c-postContent .jinchat--r .jinchat__bubble::before { border-left-color: var(--mxm) !important; }
.c-postContent .jinchat--l .jinchat__bubble {
  background: #fff !important; border: 1px solid var(--mxn) !important; border-radius: 10px !important;
}
.c-postContent .jinchat--l .jinchat__bubble::before { border-right-color: var(--mxn) !important; }

.c-postContent a:not(.arkhe-blogcard) { color: var(--mxk); }
.c-postContent a:not(.arkhe-blogcard):hover { color: var(--mxc); }
.c-postContent h3 { border-bottom: 2px solid var(--mxn); padding-bottom: .3em; }
.c-postContent table th { background: var(--mxf); color: var(--mxx); }

.c-postContent h2 {
	background: transparent; color: var(--mx-text);
	border: none; border-radius: 0;
	border-left: 6px solid var(--mx-main);
	padding: .1em 0 .1em .7em;
}