@charset "UTF-8";
/*!
 * ヒキトリブロック — 以前の版 独自ブロックのスタイル
 *
 * STORK19 の既存パーツには一切触らない。hkt- 接頭辞の中だけで完結する。
 *
 * 色    … .hkt-c-* で --hkb-accent / --hkb-on / --hkb-line / --hkb-text / --hkb-face を
 *          切り替える（ブランド6色）
 * サイズ … --hkb-pad / --hkb-fs / --hkb-bw / --hkb-sh / --hkb-gap を
 *          ブロックがインラインで持つ。既定値と同じときは書き出さない（body スコープを潰さないため）。
 */

/* ══════════════════════════════════════════════
   色プリセット
   ══════════════════════════════════════════════ */

/*
 * --hkb-accent … 面（ベタ塗り）に使う色
 * --hkb-on     … その面に載せる文字色。コントラスト実測で色ごとに決めてある
 *                magenta を白文字にすると 3.50 で WCAG AA 不合格になるため黒文字（5.39）
 * --hkb-line   … 白地の上の**罫・帯**に使う色。plain だけ ink に落とす
 *                （紙と同じ白なので、比 1.00 ＝ 本当に何も無い）。
 * --hkb-text   … 白地の上の**文字**に使う色。yellow / lime / plain を ink に落とす
 *                （細い字画では色みが効かず、白地で読めなくなるため）。
 * --hkb-face   … **枠を持たない色面**に使う色。plain だけ ink に落とす（blocks.css 下部で定義）。
 *
 * 罫と文字を分けたのは、面積で見え方が変わるため。詳しくは .hkt-c-* の定義の下に書いた。
 */
.hkt-c-violet  { --hkb-accent: var(--hkt-violet);  --hkb-on: #ffffff;      --hkb-line: var(--hkt-violet);  --hkb-text: var(--hkt-violet); }
.hkt-c-magenta { --hkb-accent: var(--hkt-magenta); --hkb-on: var(--hkt-ink); --hkb-line: var(--hkt-magenta); --hkb-text: var(--hkt-magenta); }
.hkt-c-ink     { --hkb-accent: var(--hkt-ink);     --hkb-on: #ffffff;      --hkb-line: var(--hkt-ink);     --hkb-text: var(--hkt-ink); }
.hkt-c-yellow  { --hkb-accent: var(--hkt-yellow);  --hkb-on: var(--hkt-ink); --hkb-line: var(--hkt-yellow);  --hkb-text: var(--hkt-ink); }
.hkt-c-lime    { --hkb-accent: var(--hkt-lime);    --hkb-on: var(--hkt-ink); --hkb-line: var(--hkt-lime);    --hkb-text: var(--hkt-ink); }
.hkt-c-plain   { --hkb-accent: var(--hkt-paper);   --hkb-on: var(--hkt-ink); --hkb-line: var(--hkt-ink);     --hkb-text: var(--hkt-ink); }

/*
 * --hkb-line（罫・帯）と --hkb-text（白地に載る文字）を分けた理由。【2026-09-09】
 *
 * もとは白地に載るもの全部を1つの --hkb-line で扱い、
 * **イエロー・ライム・白は黒に落としていた**（白地との比 1.32 / 1.21 / 1.00）。
 * その結果、この3色を選んでも罫が黒のままで、
 * ユーザーからは「色を変えても反映されない」に見えた。
 *
 * 実際に白地の上に並べて見た（2026-09-09、be-pilot.jp で実測）：
 *   ・3px 以上の罫や帯は、イエローもライムも**はっきり見える**
 *   ・34px 太字の数字や 20px の記号は、イエローだと**目に痛いほど薄い**
 *
 * コントラスト比は輝度だけの尺度で、色みの差を数えない。
 * 面積のある罫では色みが効き、細い字画では効かない。
 * **だから面積で分けた。罫は色、文字は黒。**
 *
 * plain だけは両方とも黒。紙と同じ白なので、これは知覚の話ではなく
 * 本当に何も無い（比 1.00）。
 */

/*
 * --hkb-face … **枠を持たない色面**（見出しの「斜めチップ」「色面」）に使う色。
 *
 * ふつうは --hkb-accent と同じ。違うのは plain だけ。
 * plain の accent は紙と同じ白なので、枠のない面にすると
 * **文字色まで黒のまま、面が完全に消える**（2026-09-09 実測、白地との比 1.00）。
 * 線の色（--hkb-line）を plain で黒に落としたのと同じ理由で、面も黒に落とす。
 *
 * ※ yellow / lime は白地との比が 1.32 / 1.21 だが、そのままにしてある。
 *   コントラスト比は輝度だけの尺度で、色みの差を数えない。
 *   黄色や黄緑の面は、比が低くても実際には見える（実機のスクリーンショットで確認）。
 *   **数字が低いからという理由だけでブランド色を捨てない。**
 */
.hkt-c-violet, .hkt-c-magenta, .hkt-c-ink, .hkt-c-yellow, .hkt-c-lime {
	--hkb-face: var(--hkb-accent);
	--hkb-onface: var(--hkb-on);
}
.hkt-c-plain { --hkb-face: var(--hkt-ink); --hkb-onface: #ffffff; }

/* ══════════════════════════════════════════════
   サイズの既定値
   ══════════════════════════════════════════════ */

/*
 * 枠と地色は「2系統トークン」から引く。
 *   固定ページ（body.hkt-full）   … --hkt-bw 3px / --hkt-boxbg 白
 *   投稿本文  （body.hkt-article）… --hkt-bw 2px / --hkt-boxbg #f7f7f5
 * 2026-09-08 ユーザー決定（語彙見本 §04 のB案）。
 * これを無視すると、同じ記事の中でコアブロック版と独自ブロック版の見た目が割れる。
 */
.hkt-box, .hkt-cta, .hkt-steps, .hkt-faq, .hkt-card, .hkt-voice {
	--hkb-pad: 18px;
	--hkb-fs:  15px;
	--hkb-bw:  var(--hkt-bw, 3px);
	--hkb-sh:  6px;
	--hkb-gap: 14px;
	--hkb-bg:  var(--hkt-boxbg, #ffffff);
	box-sizing: border-box;
	font-family: var(--hkt-ff-body);
}

.hkt-box *, .hkt-cta *, .hkt-steps *, .hkt-faq *, .hkt-card *, .hkt-voice * { box-sizing: border-box; }

/* 記事本文では影を落とす（ボタンだけは例外。押せることを影が伝えるため） */
body.hkt-article :is(.hkt-box, .hkt-steps, .hkt-faq, .hkt-card, .hkt-voice) { --hkb-sh: 0px; }

.hkt-box, .hkt-step, .hkt-faq, .hkt-card, .hkt-voice__body {
	box-shadow: var(--hkb-sh) var(--hkb-sh) 0 var(--hkt-ink, #111);
}

/* 余白はモバイルで頭打ちにする。6vw を超えると本文が1行8文字まで潰れる */
.hkt-box, .hkt-step, .hkt-faq__a, .hkt-card, .hkt-voice__body {
	padding: min(var(--hkb-pad), 6vw);
}

/* ══════════════════════════════════════════════
   1. ボックス
   ══════════════════════════════════════════════ */

.hkt-box {
	position: relative;
	border: var(--hkb-bw) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkb-bg, #fff);
	margin-block: 1.8em;
	font-size: var(--hkb-fs);
	line-height: 1.85;
}

/* ラベルが枠をまたいで浮くので、上に逃げ場を作る */
.hkt-box--labeled { margin-top: 2.6em; }

/*
 * 型3：ラベルは平行四辺形。ただし文字は傾けない。
 *
 * 要素そのものを skew して中の span で戻す方式は使えない。
 * RichText は中身を素のテキストで保存するので、打ち消す子要素が存在しないため。
 * **背景と枠だけを擬似要素で傾ける。** 文字は常にまっすぐになる。
 *
 * 配置は枠の左上。カードのバッジと同じ方式で、枠線をまたいで載る。
 * 本文の流れから外れるので、行送りに影響しない。
 */
.hkt-box__label {
	position: absolute;
	top: calc(var(--hkb-bw) * -1 - 12px);
	left: 14px;
	z-index: 2;
	display: inline-block;
	isolation: isolate;
	color: var(--hkb-on, #fff);
	padding: 4px 13px;
	margin: 0;
	font-size: max(11.5px, .76em);
	font-weight: 800;
	line-height: 1.5;
	white-space: nowrap;
}

.hkt-box__label::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: var(--hkt-skew, skewX(-18deg));
	background: var(--hkb-accent, #5b3df5);
	border: 2px solid var(--hkt-ink, #111);
}

.hkt-box__body > :first-child { margin-top: 0; }
.hkt-box__body > :last-child  { margin-bottom: 0; }

/* ラベルなしのときは、左に色帯を出して種別を示す。線用の色を使う */
.hkt-box:not(.hkt-box--labeled) {
	border-left-width: calc(var(--hkb-bw) + 5px);
	border-left-color: var(--hkb-line, #111);
}

/* ══════════════════════════════════════════════
   2. セクション見出し（型4：英字アイブロウ＋和文見出し）
   ══════════════════════════════════════════════ */

.hkt-sechead {
	margin-block: 1.8em;
	/*
	 * 自分で既定値を持つ。これが無いと、ボックスやステップの中に置いたときに
	 * 親の --hkb-fs（本文用の 15px）を継承して、見出しが本文サイズで出てしまう。
	 */
	--hkb-fs: 32px;
}

.hkt-sechead__eyebrow {
	display: inline-block;
	font-family: var(--hkt-ff-display);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1;
	margin: 0 0 8px;
	color: var(--hkt-ink, #111);
	border-bottom: 3px solid var(--hkb-line, #111);
	padding-bottom: 4px;
}

.hkt-sechead__title {
	font-family: var(--hkt-ff-display);
	font-size: var(--hkb-fs, 32px);
	/*
	 * 700 は 以前の版で実測した値。
	 * Archivo Black は単一ウェイトなので欧文には影響しないが、
	 * 和文は Zen Kaku Gothic New に落ちるため、ここを指定しないと
	 * テーマの見出しウェイトを打ち消した分だけ細くなる。
	 */
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: .01em;
	text-wrap: balance;
}

/* ── 見出しの型 ────────────────────────────────
   既定は「下罫」で、クラスは付かない（＝上の指定のまま）。
   以下は 5 つの別型。**新しい要素は足していない。**
   3px の黒枠・ずらした影・-18度の斜め・平らな原色という、
   すでにある語彙の組み替えだけで作っている。

   斜めは transform を使わない。
   見出しの中に入れ子の span を置けない（RichText が直接書き出す）ので、
   **斜めを背景の側に持たせる**。マーカー（hkt-mks-*）と同じ手。
   108deg ＝ 縦から18度傾いた境目に対する垂直方向（18 + 90）。
   ────────────────────────────────────────────── */

/* 斜めの色面。chip と slab で共有する */
.hkt-sechead--chip .hkt-sechead__eyebrow,
.hkt-sechead--slab .hkt-sechead__title {
	background-repeat: no-repeat;
	background-position: left center, right center, center;
	background-size: .42em 100%, .42em 100%, calc(100% - .84em) 100%;
	background-image:
		linear-gradient(108deg, transparent 50%, var(--hkb-face, #5b3df5) 50%),
		linear-gradient(108deg, var(--hkb-face, #5b3df5) 50%, transparent 50%),
		linear-gradient(var(--hkb-face, #5b3df5), var(--hkb-face, #5b3df5));
	color: var(--hkb-onface, #fff);
}

/* 型：左帯 */
.hkt-sechead--bar { position: relative; padding-left: 22px; }
.hkt-sechead--bar::before {
	content: "";
	position: absolute;
	left: 0; top: .12em; bottom: .12em;
	width: 18px;
	box-sizing: border-box;
	background: var(--hkb-accent, #5b3df5);
	border: var(--hkt-bw, 3px) solid var(--hkt-ink, #111);
}

/* 型：斜めチップ（英字ラベルを色面に） */
.hkt-sechead--chip .hkt-sechead__eyebrow {
	border-bottom: 0;
	padding: 6px .9em 5px;
	margin-inline: .1em;
}

/* 型：色面（見出しそのものを斜めの面に載せる）
   display:inline にするのは、折り返した行それぞれに面を持たせるため。
   box-decoration-break が効くのは分割された断片に対してだけ。 */
.hkt-sechead--slab .hkt-sechead__title {
	display: inline;
	padding: .12em .5em;
	line-height: 1.65;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
/*
 * 英字ラベルは既定で inline-block。見出しを inline にした「色面」では、
 * **同じ行に並んでしまう**（実測。ラベルが色面の左隣に出た）。ここだけ block に戻す。
 * width: max-content は、下罫がラベルの幅で止まるようにするため。
 */
.hkt-sechead--slab .hkt-sechead__eyebrow {
	display: block;
	width: max-content;
	max-width: 100%;
	margin-bottom: 10px;
}

/* 型：囲み（ボックスと同じ骨格。英字ラベルは枠の左上にバッジで載る） */
.hkt-sechead--frame {
	border-radius: var(--hkt-radius, 0px);
	position: relative;
	box-sizing: border-box;
	background: var(--hkt-boxbg, #fff);
	border: var(--hkt-bw, 3px) solid var(--hkt-ink, #111);
	box-shadow: var(--hkt-shadow, 6px 6px 0 #111);
	padding: 22px min(24px, 5vw);
}
.hkt-sechead--frame .hkt-sechead__eyebrow {
	position: absolute;
	top: 0; left: 16px;
	transform: translateY(-50%);
	background: var(--hkb-accent, #5b3df5);
	color: var(--hkb-on, #fff);
	border: var(--hkt-bw, 3px) solid var(--hkt-ink, #111);
	padding: 4px 10px;
}

/* ── ラベルなし ────────────────────────────────
   英字ラベルを消すと、**下罫・チップ・バッジ・左右の罫が一緒に消える。**
   色の置き場所がそこにしか無い型があるので、型ごとに移し先を決める。
   何も移さないと「色を選んだのに、どこにも色が出ない」ブロックになる。

   | 型   | ラベルありのとき | ラベルなしのとき   |
   |------|------------------|--------------------|
   | 下罫 | ラベルの下罫     | 見出しの下罫       |
   | 左帯 | （帯は本体側）   | そのまま           |
   | チップ | ラベルが色面   | 見出しの前に斜めの印 |
   | 色面 | （見出しが色面） | そのまま           |
   | 囲み | 左上のバッジ     | 枠の上辺を太い色帯に |
   | 中央 | ラベルの左右の罫 | 見出しの下に短い罫 |
   ────────────────────────────────────────────── */

/* 既定（下罫）：罫を見出しの下へ。打ち消し層の border:0 に勝つ必要がある */
.hkt-sechead--nolabel .hkt-sechead__title {
	border-bottom: var(--hkt-bw, 3px) solid var(--hkb-line, #111) !important;
	padding-bottom: 12px !important;
}

/* 罫を引かない型では戻す。:is() は中でいちばん強いものの詳細度になる */
.hkt-sechead--nolabel:is(
	.hkt-sechead--bar, .hkt-sechead--chip, .hkt-sechead--slab,
	.hkt-sechead--frame, .hkt-sechead--center
) .hkt-sechead__title {
	border-bottom: 0 !important;
}

/*
 * 下パディングを戻すのは**色面以外**。
 * 色面は文字が面に載っているので .12em の下パディングが要る。
 * まとめて 0 にしていたら、**文字が色面の下端に密着していた**
 *（2026-09-09 実測、上 3.84px / 下 0px）。
 */
.hkt-sechead--nolabel:is(
	.hkt-sechead--bar, .hkt-sechead--chip,
	.hkt-sechead--frame, .hkt-sechead--center
) .hkt-sechead__title {
	padding-bottom: 0 !important;
}

/*
 * チップ：見出しの前に斜めの色印を置く。打ち消し層が ::before を殺しているので戻す。
 *
 * **ここは全部 !important が要る。** content と display だけ戻したら、
 * テーマの吹き出しの尻尾（h_balloon）の指定が生き残って、
 * 幅25.6px・45度回転の三角が出た（2026-09-09 実測、
 * transform が matrix(0.53,0.71,-0.53,0.71) になっていた）。
 * テーマ側は (0,3,2) でこちらは (0,3,0)。**同じ土俵では届かない。**
 */
.hkt-sechead--chip.hkt-sechead--nolabel .hkt-sechead__title::before {
	content: "" !important;
	display: inline-block !important;
	position: static !important;
	width: .34em !important;
	height: .74em !important;
	margin: 0 .34em 0 0 !important;
	border: 0 !important;
	border-radius: var(--hkt-radius, 0px) !important;
	background: var(--hkb-face, #5b3df5) !important;
	transform: var(--hkt-skew, skewX(-18deg)) !important;
}

/* 囲み：色は枠の上辺に出す。カードのバッジ無しと同じ考え方 */
.hkt-sechead--frame.hkt-sechead--nolabel {
	border-top-width: 9px;
	border-top-color: var(--hkb-line, #111);
}

/* 中央：見出しの下に短い罫 */
/* 中央：見出しの下に短い罫。::before と同じ理由で全部 !important */
.hkt-sechead--center.hkt-sechead--nolabel .hkt-sechead__title::after {
	content: "" !important;
	display: block !important;
	position: static !important;
	width: 56px !important;
	height: var(--hkt-bw, 3px) !important;
	margin: 16px auto 0 !important;
	border: 0 !important;
	border-radius: var(--hkt-radius, 0px) !important;
	background: var(--hkb-line, #111) !important;
	transform: none !important;
}

/* 型：中央（英字ラベルの左右に短い罫を出す） */
.hkt-sechead--center { text-align: center; }
.hkt-sechead--center .hkt-sechead__eyebrow {
	border-bottom: 0;
	padding-bottom: 0;
	display: inline-flex;
	align-items: center;
	gap: .8em;
}
.hkt-sechead--center .hkt-sechead__eyebrow::before,
.hkt-sechead--center .hkt-sechead__eyebrow::after {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	background: var(--hkb-line, #111);
}

/* ══════════════════════════════════════════════
   3. CTA（型2：押せる面）
   ══════════════════════════════════════════════ */

.hkt-cta { margin-block: 1.8em; text-align: center; }

.hkt-cta__micro {
	font-size: max(12px, .8em);
	color: var(--hkt-mute, #6b6b6b);
	margin: 0 0 7px;
}

.hkt-cta__btn {
	display: inline-block;
	border: var(--hkb-bw) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkb-accent, #111);
	color: var(--hkb-on, #fff);
	/* 余白 0 でも押せる大きさを割らない（WCAG 2.5.8 の 24×24px） */
	padding: max(calc(var(--hkb-pad) * .66), 9px) max(calc(var(--hkb-pad) * 1.4), 18px);
	font-size: var(--hkb-fs);
	font-weight: 800;
	line-height: 1.5;
	text-decoration: none;
	box-shadow: var(--hkb-sh) var(--hkb-sh) 0 var(--hkt-ink, #111);
	transition: transform .12s ease, box-shadow .12s ease;
}

.hkt-cta--wide .hkt-cta__btn { display: block; }

/* 影を 0 にしたら、触っても影は出さない */
.hkt-cta__btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: calc(var(--hkb-sh) * 1.7) calc(var(--hkb-sh) * 1.7) 0 var(--hkt-ink, #111);
}

.hkt-cta__btn:active {
	transform: translate(3px, 3px);
	box-shadow: calc(var(--hkb-sh) * .34) calc(var(--hkb-sh) * .34) 0 var(--hkt-ink, #111);
}

/* マゼンタのボタンでハローにならないよう、黒＋白の二重リングにする */
.hkt-cta__btn:focus-visible {
	outline: 3px solid var(--hkt-ink, #111);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px #fff, var(--hkb-sh) var(--hkb-sh) 0 var(--hkt-ink, #111);
}

/* href の無い CTA（URL未入力）はボタンに見せない */
.hkt-cta__btn:not([href]) { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* ══════════════════════════════════════════════
   4. ステップ（番号は 01・02 の2桁ゼロ埋め）
   ══════════════════════════════════════════════ */

/*
 * ── テーマのリスト装飾を打ち消す ──
 *
 * <ol> で出力しているので、テーマの順序リスト装飾を浴びる。
 * STORK19 の実測（2026-09-08）:
 *   .entry-content ol > li::before { content: counter(number); background-color: var(--main-ttl-bg); }
 *      → 黄色い丸数字が、こちらの 01・02 とは別に並んで出る
 *   .entry-content ol > li { padding-left: calc(var(--stk-list-icon-size, 1.8em) + .1em); }
 *      → 左に余計な余白が入る
 *
 * 詳細度は テーマ (0,1,2) / (0,1,1)。クラス2つで組んで勝つ。
 */
.hkt-steps {
	counter-reset: hkt-step;
	display: grid;
	/* 列数。既定はスマホ1列・PC1列（＝縦積み）。ブロック側で指定できる */
	grid-template-columns: repeat(var(--hks-cols-sp, 1), minmax(0, 1fr));
	/* 間隔 0 ＋ 影ありだと、前のカードの影が次のカードに被る */
	/*
	 * 縦は 26px を下限にする。バッジが枠の上へ 15px はみ出すので、
	 * 間隔が狭いと前のカードの下辺に重なる。
	 */
	column-gap: max(var(--hkb-gap), var(--hkb-sh));
	row-gap: max(var(--hkb-gap), var(--hkb-sh), 26px);
	/* margin-block だけ。横は触らない（エディターの中央寄せを残すため） */
	margin-block: 1.8em;
	padding-left: 0;
	list-style: none;
}

.hkt-steps > .hkt-step {
	counter-increment: hkt-step;
	/* バッジを枠の左上に載せるための基準 */
	position: relative;
	border: var(--hkb-bw) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkb-bg, #fff);
	font-size: var(--hkb-fs);
	line-height: 1.85;
	list-style: none;
	padding: min(var(--hkb-pad), 6vw);
}

/* テーマが li に足すカウンタ（黄色い丸数字）を止める */
.hkt-steps > .hkt-step::before,
.hkt-steps > .hkt-step::marker {
	content: none;
	display: none;
	background: none;
	border: 0;
}

/*
 * 番号は「文字色」ではなくベタ塗りにする（型5）。
 * 文字色だと yellow / lime / plain で白地に埋もれて消える。
 * 面にすれば --hkb-on が効くので、6色すべてで読める。
 */
/*
 * 番号の前に自由文字列を置ける（既定は STEP）。
 * 番号だけだと、それがステップなのか他の数字なのか読み手に伝わらないため。
 * 文字列はブロック側が --hks-prefix に引用符付きで渡す。
 */
/*
 * 番号はボックスのラベルと同じ扱いにする（0.10.5〜）。
 * **枠の左上に、枠線をまたいで載る斜めのバッジ。**
 *
 * 本文の流れから外れるので行送りに影響せず、
 * 番号のぶんだけ1行目が下がることも無くなる。
 * ボックス・カード・ステップで「ラベルは枠の左上」に揃った。
 *
 * ボックスのラベルは要素自身が文字を持つが、こちらの文字は
 * counter() ＝ ::before なので、**斜めの面は ::after に置く。**
 */
.hkt-step__num {
	position: absolute;
	top: calc(var(--hkb-bw) * -1 - 12px);
	left: 14px;
	z-index: 2;
	isolation: isolate;
	display: inline-block;
	color: var(--hkb-on, #fff);
	padding: 4px 13px;
	margin: 0;
	font-family: var(--hkt-ff-display);
	font-size: max(12px, .8em);
	font-weight: 800;
	line-height: 1.5;
	white-space: nowrap;
	/*
	 * カードからはみ出させない。
	 * left が 14px なので、右にも同じだけ残す。
	 * **接頭辞が長い＋列数が多いと、隣のカードに重なっていた**
	 *（2026-09-09 実測、375px・4列・'STEP ' で 10.81 × 14px の重なり）。
	 * 折り返させるとバッジが縦に伸びて見出しに被るので、切る方を選んだ。
	 * 番号まで切れる場合は、接頭辞を短くするか列数を減らすこと。
	 */
	max-width: calc(100% - 28px);
	/*
	 * **overflow: hidden にしてはいけない。**
	 * 斜めの面は ::before / ::after を skewX(-18deg) したものなので、
	 * 要素の箱から左右へ約4px はみ出す。hidden で切ると
	 * **右端が垂直にスパッと切れる**（2026-09-09、ユーザー報告のキャプチャ）。
	 *
	 * clip + overflow-clip-margin なら「文字は箱で切る／はみ出しは 8px まで残す」
	 * が両立する。text-overflow: ellipsis も clip で効くことを実機で確認済み。
	 * 対応していない古いブラウザでは切られなくなるだけで、切れて見えるよりは良い。
	 */
	overflow: clip;
	overflow-clip-margin: 8px;
	text-overflow: ellipsis;
}

.hkt-step__num::before {
	content: var(--hks-prefix, "") counter(hkt-step, decimal-leading-zero);
}

.hkt-step__num::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: var(--hkt-skew, skewX(-18deg));
	background: var(--hkb-accent, #5b3df5);
	border: 2px solid var(--hkt-ink, #111);
}

.hkt-step__title {
	font-weight: 800;
	font-size: 1.05em;
	margin: 0 0 6px;
}

.hkt-step__body > :last-child { margin-bottom: 0; }

@media (min-width: 768px) {
	.hkt-steps { grid-template-columns: repeat(var(--hks-cols-pc, 1), minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════
   5. FAQ／アコーディオン
   ══════════════════════════════════════════════ */

.hkt-faq {
	border: var(--hkb-bw) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkb-bg, #fff);
	margin-block: 1.6em;
	font-size: var(--hkb-fs);
	padding: 0;
}

.hkt-faq__q {
	cursor: pointer;
	list-style: none;
	display: block;
	position: relative;
	margin: 0;
	padding: calc(min(var(--hkb-pad), 6vw) * .8);
	padding-right: calc(min(var(--hkb-pad), 6vw) + 34px);
	padding-left: min(var(--hkb-pad), 6vw);
	font-weight: 800;
	line-height: 1.6;
}

.hkt-faq__q::-webkit-details-marker { display: none; }

/*
 * 閉じているときの ＋ に色を出す。
 * **閉じたまま色を変えても、何も変わらなかった**（2026-09-09 発覚）。
 * 地色が出るのは開いたときだけなので、閉じている間は色の置き場所が無い。
 * 白地に載るので --hkb-line（イエロー・ライム・白は黒に落ちる）。
 */
.hkt-faq__q::after {
	color: var(--hkb-text, #111);
	content: "+";
	position: absolute;
	right: min(var(--hkb-pad), 6vw);
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--hkt-ff-display);
	font-size: max(18px, 1.3em);
	line-height: 1;
}

.hkt-faq__q:focus-visible { outline: 3px solid var(--hkt-ink, #111); outline-offset: -4px; }

/* 開いたら見出しが反転する */
.hkt-faq[open] > .hkt-faq__q {
	background: var(--hkb-accent, #111);
	color: var(--hkb-on, #fff);
}

.hkt-faq[open] > .hkt-faq__q::after { color: var(--hkb-on, #fff); content: "\2212"; }
.hkt-faq[open] > .hkt-faq__q:focus-visible { outline-color: var(--hkb-on, #fff); }

.hkt-faq__a {
	border-top: 2px solid var(--hkt-ink, #111);
	line-height: 1.85;
}

.hkt-faq__a > :first-child { margin-top: 0; }
.hkt-faq__a > :last-child  { margin-bottom: 0; }

/* 印刷では答えを必ず出す */
@media print {
	.hkt-faq > .hkt-faq__a { display: block !important; }
	.hkt-faq__q::after { content: ""; }
}

/* 編集画面では details を使わないので、常に開いた見た目にする */
.editor-styles-wrapper .hkt-faq > .hkt-faq__q { background: var(--hkb-accent); color: var(--hkb-on); }
/* 編集画面は常に開いた見た目なので、＋ の色も反転側に合わせる */
.editor-styles-wrapper .hkt-faq > .hkt-faq__q::after { color: var(--hkb-on, #fff); content: "\2212"; }

/* ══════════════════════════════════════════════
   6. カード
   ══════════════════════════════════════════════ */

.hkt-card {
	position: relative;
	border: var(--hkb-bw) solid var(--hkt-ink, #111);
	border-top-width: calc(var(--hkb-bw) + 4px);
	border-top-color: var(--hkb-line, #111);   /* 色はここに出す（バッジが無くても分かる） */
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkb-bg, #fff);
	margin-block: 1.8em;
	font-size: var(--hkb-fs);
	line-height: 1.8;
}

.hkt-card--badged { margin-top: 2.6em; }

/* ボックスのラベルと同じ方式。こちらは右上に載る */
/*
 * **2026-09-09、右上から左上へ移した。**
 * ボックス・ステップ・関連記事カードのラベルはすべて枠の左上にある。
 * block-mapping.md §10 は「揃った」と書いていたが、**カードだけ右上のままだった**
 * （設計担当が実装との食い違いとして報告）。
 * 1つだけ逆にする理由が説明できないので、揃えた。
 * すでに置いてあるカードは見た目が変わる（save() は変わらない）。
 */
.hkt-card__badge {
	position: absolute;
	top: calc(var(--hkb-bw) * -1 - 14px);
	left: 14px;   /* 2026-09-09、右上から左上へ。下の注記を見ること */
	z-index: 3;
	display: inline-block;
	isolation: isolate;
	color: var(--hkb-on, #fff);
	padding: 4px 13px;
	font-size: max(11.5px, .74em);
	font-weight: 800;
	line-height: 1.5;
	white-space: nowrap;
}

.hkt-card__badge::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: var(--hkt-skew, skewX(-18deg));
	background: var(--hkb-accent, #5b3df5);
	border: 2px solid var(--hkt-ink, #111);
}

.hkt-card__en {
	font-family: var(--hkt-ff-display);
	font-size: max(11px, .72em);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hkt-mute, #6b6b6b);
	margin: 0;
}

.hkt-card__name {
	font-size: 1.22em;
	font-weight: 800;
	line-height: 1.35;
	margin: 2px 0 8px;
}

/*
 * カード全面リンクはやめた。
 * 本文中のリンク（出典・内部リンク）が押せなくなり、テキスト選択もできなくなるため。
 * 見出しだけをリンクにし、ホバーとフォーカスはカード全体で表現する。
 */
.hkt-card__name a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 2px;
}

.hkt-card:has(.hkt-card__name a:hover) {
	transform: translate(-2px, -2px);
	box-shadow: calc(var(--hkb-sh) * 1.7) calc(var(--hkb-sh) * 1.7) 0 var(--hkt-ink, #111);
}

.hkt-card:has(.hkt-card__name a:focus-visible) {
	outline: 3px solid var(--hkt-ink, #111);
	outline-offset: 3px;
}

.hkt-card { transition: transform .12s ease, box-shadow .12s ease; }

.hkt-card__body > :first-child { margin-top: 0; }
.hkt-card__body > :last-child  { margin-bottom: 0; }

/* ══════════════════════════════════════════════
   7. 吹き出し（アイコンは丸くしない）
   ══════════════════════════════════════════════ */

.hkt-voice {
	display: flex;
	align-items: flex-start;
	gap: var(--hkb-gap);
	margin-block: 1.8em;
	font-size: var(--hkb-fs);
}

.hkt-voice--r { flex-direction: row-reverse; }

.hkt-voice__icon {
	flex: none;
	width: 66px;
	margin: 0;
	text-align: center;
}

/* アイコンも名前も無いときは、空の柱を残さない */
.hkt-voice__icon:empty { display: none; }

.hkt-voice__icon img,
.hkt-voice__placeholder {
	display: block;
	width: 66px;
	height: 66px;
	object-fit: cover;
	border: var(--hkb-bw) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkt-tint, #f4f4f2);
}

.hkt-voice__placeholder {
	display: grid;
	place-items: center;
	font-family: var(--hkt-ff-display);
	color: var(--hkt-mute, #6b6b6b);
}

/*
 * 名前を色付きのチップにする。
 * 以前は吹き出し本文そのものを accent 地にしていたが、
 * バイオレット地に白文字で長文を読ませることになり、
 * さらに中に入れた白地ブロックの文字が白のまま消える不具合が出た。
 * **色は名前チップと、吹き出しの上辺に出す。本文の地は白のまま。**
 *
 * 上辺にも出すのは、**名前が空のとき、色の置き場所が名前チップしか無く、
 * 色を変えても何も変わらなかったため**（2026-09-09、色の反映漏れの点検で発覚。
 * 元のコメントは「枠に出す」と書いてあったが、枠は黒のままだった）。
 * カード・著者と同じ「上辺の罫に色」を使う。
 * 太さは変えない。太くすると尻尾の位置がずれる。
 */
.hkt-voice__icon figcaption {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 7px;
	/*
	 * 枠は付けない（2026-09-09、依頼で外した）。
	 * 代わりに面の色を --hkb-face にしてある。
	 * accent のままだと **plain（白）で面が紙に溶けて、名前が消える**。
	 * face は plain だけ黒に落ちるので、枠が無くてもチップとして成立する。
	 */
	background: var(--hkb-face, #5b3df5);
	color: var(--hkb-onface, #fff);
	font-size: max(11px, .72em);
	font-weight: 700;
	line-height: 1.4;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.hkt-voice__body {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;                     /* 長いURLで本文幅を突き破らないように */
	border: var(--hkb-bw) solid var(--hkt-ink, #111);
	border-top-color: var(--hkb-line, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkb-bg, #fff);
	line-height: 1.85;
	overflow-wrap: anywhere;
}

.hkt-voice__body > :first-child { margin-top: 0; }
.hkt-voice__body > :last-child  { margin-bottom: 0; }

/* 尻尾も直線。枠の色と地の色で2枚重ねる */
.hkt-voice__body::before,
.hkt-voice__body::after {
	content: "";
	position: absolute;
	/* 余白 0・文字最小でも本体からはみ出さない位置に収める */
	top: clamp(0px, calc(min(var(--hkb-pad), 6vw) + .35em), calc(100% - 22px));
	width: 0;
	height: 0;
	border: 11px solid transparent;
}

.hkt-voice--l .hkt-voice__body::before {
	left: calc(var(--hkb-bw) * -1 - 22px);
	border-right-color: var(--hkt-ink, #111);
}
.hkt-voice--l .hkt-voice__body::after {
	left: calc(var(--hkb-bw) * -1 - 17px);
	border-right-color: var(--hkb-bg, #fff);
}

.hkt-voice--r .hkt-voice__body::before {
	right: calc(var(--hkb-bw) * -1 - 22px);
	border-left-color: var(--hkt-ink, #111);
}
.hkt-voice--r .hkt-voice__body::after {
	right: calc(var(--hkb-bw) * -1 - 17px);
	border-left-color: var(--hkb-bg, #fff);
}

/* ══════════════════════════════════════════════
   8. 出典
   ══════════════════════════════════════════════ */

.hkt-source {
	border-radius: var(--hkt-radius, 0px);
	border-left: 5px solid var(--hkb-line, #111);
	background: var(--hkt-tint, #f4f4f2);
	padding: 12px 16px;
	margin-block: 1.4em;
	font-size: max(12.5px, .84em);
	line-height: 1.8;
	color: var(--hkt-ink, #111);
}

.hkt-source__label {
	font-family: var(--hkt-ff-display);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hkt-mute, #6b6b6b);
	display: block;
	margin-bottom: 3px;
}

.hkt-source__pub { font-weight: 700; }
.hkt-source__meta { color: var(--hkt-mute, #6b6b6b); }

/* ══════════════════════════════════════════════
   アクセシビリティ・レスポンシブ
   ══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.hkt-cta__btn, .hkt-card { transition: none; }
	.hkt-cta__btn:hover, .hkt-cta__btn:active,
	.hkt-card:has(.hkt-card__name a:hover) { transform: none; }
}

@media (max-width: 600px) {
	.hkt-voice__icon,
	.hkt-voice__icon img,
	.hkt-voice__placeholder { width: 52px; }
	.hkt-voice__icon img,
	.hkt-voice__placeholder { height: 52px; }
}

/* ══════════════════════════════════════════════
   テーマ規則との衝突を断ち切る

   **実測に基づく（2026-09-08 www.919good.jp / STORK19 / h_balloon）。**
   推測で足さないこと。増やすときは必ず実機で測ってから。

   ■ なぜ !important なのか
     詳細度で勝とうとしたが、実測で負けることが確定した。
       テーマ  .entry-content h2:not([class*="is-style-style"])          (0,2,1)
       テーマ  .h_balloon .entry-content h2:not(...)::before             (0,3,2)
       自社    .hkt-sechead__title.hkt-sechead__title（クラス2回）        (0,2,0) ← 負け
     クラスを3回書いても尻尾の (0,3,2) に届かない。4回なら勝つが、
     それは「テーマの詳細度を知っている」前提の入札で、次のテーマで黙って壊れる。
     **静かに負ける方式は採らない。** !important なら DevTools で打ち消し線が見える。

   ■ 3つの約束
     1. 対象は **プラグインが出力した要素だけ**。
        InnerBlocks の中（__body / __a）には一歩も入らない。
        あそこはユーザーの文章で、テーマの体裁で読まれるのが正しい。
     2. **カスタムプロパティ（--hkb-* / --hkt-*）には !important を付けない。**
        付けるとサイズ調整と記事版スコープの切り替えが両方死ぬ。
     3. 自社の擬似要素（.hkt-step__num::before など）は打ち消さない。
   ══════════════════════════════════════════════ */

/* ── 見出し ──
   実測：背景 #b50505 / padding 20.6px 22.66px / font-size 20.6px / position relative
   が乗る。h_balloon では ::before で吹き出しの尻尾も足される。 */
.hkt-sechead__title {
	position: static !important;
	background: none !important;
	border: 0 !important;
	border-radius: var(--hkt-radius, 0px) !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin-block: 0 !important;
	color: inherit !important;
	font-family: var(--hkt-ff-display) !important;
	font-size: var(--hkb-fs, 32px) !important;
	font-weight: 700 !important;
	line-height: 1.28 !important;
}

.hkt-sechead__title::before,
.hkt-sechead__title::after {
	content: none !important;
	display: none !important;
}

/*
 * 480px 以下で、テーマが h2 を左右へ -2vw 引っぱる。
 *   jstork19/style.css @media (max-width:480px)
 *   .entry-content h2:not([class*="is-style-style"]):not(.alignwide):not(.alignfull)
 *     { margin-right: var(--stk-h2-margin-rl, -2vw); margin-left: … }
 * テーマ自身の見出しは全幅の色帯なので外へ出て正しいが、
 * こちらの見出しは本文と行頭を揃えたい。**380px で片側 7.6px ずれていた**（実測）。
 *
 * 横マージンに !important を使うのは、これが唯一の例外。
 * 編集画面の中央寄せを壊した 2026-09-09 の事故は
 * `.wp-block`（ブロックの外枠）の margin-inline: auto を潰したことが原因で、
 * ここで触るのはブロックの**中**の h2。外枠には一歩も入らない。
 */
@media only screen and ( max-width: 480px ) {
	.hkt-sechead .hkt-sechead__title { margin-inline: 0 !important; }
}

/*
 * 見出しの型が要る分だけ、上の打ち消しを戻す。
 * 上の一式は (0,1,0)+!important。こちらは (0,2,0)+!important なので勝つ。
 * **戻すのは型が実際に使うプロパティだけ。** まとめて戻すと、
 * テーマの背景色や吹き出しの尻尾まで一緒に復活する。
 */
.hkt-sechead--slab .hkt-sechead__title {
	background-image:
		linear-gradient(108deg, transparent 50%, var(--hkb-face, #5b3df5) 50%),
		linear-gradient(108deg, var(--hkb-face, #5b3df5) 50%, transparent 50%),
		linear-gradient(var(--hkb-face, #5b3df5), var(--hkb-face, #5b3df5)) !important;
	background-color: transparent !important;
	padding: .12em .5em !important;
	color: var(--hkb-onface, #fff) !important;
	line-height: 1.65 !important;
}

/* 段落として出している英字ラベルの余白・字送りも、型ごとに上書きする。
   .hkt-sechead__eyebrow の margin-block / font-size は !important で当ててあるため */
.hkt-sechead--chip .hkt-sechead__eyebrow   { margin-block: 0 12px !important; }
.hkt-sechead--slab .hkt-sechead__eyebrow   { margin-block: 0 10px !important; }
.hkt-sechead--frame .hkt-sechead__eyebrow  { margin-block: 0 !important; }
.hkt-sechead--center .hkt-sechead__eyebrow { margin-block: 0 10px !important; }

/*
 * 「囲み」はバッジが枠の上に半分乗るので、上の余白を足す（ボックスと同じ扱い）。
 *
 * クラス2回書いているのは詳細度のため。**1回だと効かない。**
 * 縦のリズムの `.hkt-sechead`（0,1,0 + !important）とこちらが同点になり、
 * 記述順で後ろにある向こうが勝っていた（2026-09-09 実測、期待70px に対し 56px）。
 */
.hkt-sechead.hkt-sechead--frame { margin-top: calc(var(--hkt-flow-lg, 56px) + 14px) !important; }

/* バッジが無ければ張り出しも無い。足した分を戻す */
.hkt-sechead.hkt-sechead--frame.hkt-sechead--nolabel { margin-top: var(--hkt-flow-lg, 56px) !important; }

/*
 * ステップも、番号のバッジが枠の上へ 15px はみ出すようになった（0.10.5〜）。
 * ボックスのラベル付きと同じだけ、上に余白を足す。
 * クラス2回は詳細度のため（縦のリズムの .hkt-steps と同点になり、記述順で負けるため）。
 */
.hkt-steps.hkt-steps { margin-top: calc(var(--hkt-flow, 28px) + 16px) !important; }

/* ── ステップ ──
   実測：li に padding-left 31.3px、li::before に counter(number) の丸数字が乗る。
   こちらの 01・02 とは別に、テーマの番号が二重で並ぶ。 */
/*
 * ⚠️ **横方向のマージンには手を出さない。**
 *
 * エディターは .wp-block { margin-left: auto; margin-right: auto } でブロックを中央に寄せる。
 * margin-left / margin ショートハンドを !important で潰すと、
 * **編集画面でブロックが左端に飛び出す**（2026-09-09、実際に固定ページの編集画面が崩れた）。
 *
 * そもそもテーマ側は ol に margin: 0 0 1em を当てており、左マージンは元から 0。
 * 打ち消す必要が無かった。**必要な分だけ潰す。**
 */
/*
 * counter-reset も打ち消す。
 * .hkt-steps（0,1,0）は テーマの .entry-content ol { counter-reset: number }（0,1,1）に**負けていた**。
 * 実機検証で computed が `number 0` になっていることを確認（2026-09-09）。
 * 描画は Chrome の暗黙リセットで結果的に合っていたが、根拠のない成立なので直す。
 */
.hkt-steps {
	counter-reset: hkt-step !important;
	padding-left: 0 !important;
	list-style: none !important;
}

.hkt-steps > .hkt-step {
	padding: min(var(--hkb-pad), 6vw) !important;
	/*
	 * 上だけは下限を持たせる。
	 * バッジは枠の上へ 14px 分せり出しているので、
	 * **間隔 = 内側の余白 + 枠の太さ − 14** になる。
	 * 内側の余白は 0 まで下げられるため、そのままだと
	 * 余白+枠 < 14px でバッジが見出しに重なる（2026-09-09 実測、21通りで確認）。
	 * 4px 残るところで止める。既定（余白18・枠3）では何も変わらない。
	 */
	padding-top: max(min(var(--hkb-pad), 6vw), calc(18px - var(--hkb-bw))) !important;
	/* .entry-content li { margin: .7em 0 } は縦だけ。だから縦だけ潰す。
	   ショートハンドで横まで 0 にすると、上記のとおり中央寄せが死ぬ */
	margin-block: 0 !important;
	list-style: none !important;
}

.hkt-steps > .hkt-step::before,
.hkt-steps > .hkt-step::marker {
	content: none !important;
	display: none !important;
}

/* ── 段落として出している要素 ──
   実測：.entry-content p が margin-bottom 26.4px と font-size 16.48px を乗せる。
   これらは段落ではなくラベル・番号・見出しなので、余白を持たせない。 */
.hkt-sechead__eyebrow { margin-block: 0 8px !important; font-size: 12px !important; }
.hkt-box__label       { margin-block: 0 !important; font-size: max(11.5px, .76em) !important; }
.hkt-cta__micro       { margin-block: 0 7px !important; font-size: max(12px, .8em) !important; }
.hkt-card__en         { margin-block: 0 !important; font-size: max(11px, .72em) !important; }
.hkt-card__name       { margin-block: 2px 8px !important; font-size: 1.22em !important; }
.hkt-step__title      { margin-block: 0 6px !important; font-size: 1.05em !important; }

/* ── リンク ──
   実測：テーマのリンク色 rgb(27,180,211) と下線が乗る。
   CTA ボタンは水色の下線付き文字になっていた。 */
.hkt-cta__btn {
	color: var(--hkb-on, #fff) !important;
	background: var(--hkb-accent, #111) !important;
	text-decoration: none !important;
}

.hkt-card__name a { color: inherit !important; }

.hkt-source a {
	color: inherit !important;
	text-decoration: none !important;
}

/* ── リンクに差し込まれる外部リンクアイコン ──
   実測：.entry-content a:not(.no-icon)[target="_blank"]::after  (0,3,1)
   出典ブロックの <a> は save() が常に target="_blank" を出すので、必ず付く。
   CTA ボタンとカード見出しにも付く。 */
.hkt-cta__btn::after,
.hkt-card__name a::after,
.hkt-source a::after {
	content: none !important;
	display: none !important;
}

/* ── 記事の先頭に置いたときのラベル被り ──
   実測：.single .entry-content > :first-child { margin-top: 0 }  (0,3,0)
   ボックスが記事の1つ目だと上マージンが 0 にされ、
   枠の上に載るラベルが前の要素に食い込む。 */
.hkt-box--labeled { margin-top: 2.6em !important; }
.hkt-card--badged { margin-top: 2.6em !important; }

/* ── 吹き出しのアイコン ──
   実測：.entry-content img { margin-bottom: 1.5em } が素通りして 24.72px の隙間。
   height:auto は同点でテーマ勝ち（自社CSSが先に読まれるため）→ 正方形が崩れる。 */
.hkt-voice__icon img {
	margin-block: 0 !important;
	width: 66px !important;
	height: 66px !important;
}

@media (max-width: 600px) {
	.hkt-voice__icon img {
		width: 52px !important;
		height: 52px !important;
	}
}

/* 実測：figcaption { opacity: .9 } で名前チップが薄くなる */
.hkt-voice__icon figcaption {
	opacity: 1 !important;
	margin-block: 6px 0 !important;
}

/* ══════════════════════════════════════════════
   9. 統計値 — 引用されるための数字
   ══════════════════════════════════════════════ */

.hkt-stat {
	border-radius: var(--hkt-radius, 0px);
	--hkb-pad: 18px;
	--hkb-bw:  var(--hkt-bw, 3px);
	--hkb-bg:  var(--hkt-boxbg, #ffffff);
	position: relative;
	box-sizing: border-box;
	border: var(--hkb-bw) solid var(--hkt-ink, #111);
	border-left-width: calc(var(--hkb-bw) + 5px);
	border-left-color: var(--hkb-line, #111);
	background: var(--hkb-bg, #fff);
	padding: min(var(--hkb-pad), 6vw);
	margin-block: 1.8em;
	font-family: var(--hkt-ff-body);
	line-height: 1.8;
}

.hkt-stat__label { font-size: 13px; font-weight: 700; color: var(--hkt-mute, #6b6b6b); }

.hkt-stat__value {
	font-family: var(--hkt-ff-display);
	line-height: 1.05;
	display: flex;
	align-items: baseline;
	gap: .12em;
	flex-wrap: wrap;
}

/*
 * 数値にも色を出す。**説明文は「数値と左罫の色です」と言っていたのに、
 * 色が出ていたのは左罫だけだった**（2026-09-09、色の反映漏れの点検で発覚）。
 * 白地に載る文字なので --hkb-accent ではなく --hkb-line を使う。
 * イエロー・ライム・白は黒に落ちる（白地との比が 1.32 / 1.21 / 1.00 で読めないため）。
 */
.hkt-stat__value { color: var(--hkb-text, #111); }

.hkt-stat__num  { font-size: clamp(34px, 7vw, 56px); font-variant-numeric: tabular-nums; }
.hkt-stat__unit { font-size: clamp(15px, 3vw, 22px); font-weight: 800; }

.hkt-stat__def {
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--hkt-ink, #111);
	border-top: 2px dashed var(--hkt-ink, #111);
	padding-top: 9px;
}

.hkt-stat__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	font-size: 12px;
	color: var(--hkt-mute, #6b6b6b);
}

.hkt-stat__src { font-style: normal; }
.hkt-stat__src a { color: inherit; }

/* 出典が空のときは、書き手に見えるように赤で警告する */
.hkt-stat__meta:not(:has(.hkt-stat__src)) { color: var(--hkt-magenta, #ff2e88); font-weight: 700; }

/* ══════════════════════════════════════════════
   10. 引用ボタン（統計値・このページを引用 共通）
   ══════════════════════════════════════════════ */

.hkt-cite-btn {
	display: inline-block;
	border: 2px solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkt-paper, #fff);
	color: var(--hkt-ink, #111);
	padding: 6px 14px;
	font-family: var(--hkt-ff-body);
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.5;
	cursor: pointer;
	box-shadow: 3px 3px 0 var(--hkt-ink, #111);
	transition: transform .12s ease, box-shadow .12s ease;
}

.hkt-cite-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--hkt-ink, #111); }
.hkt-cite-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--hkt-ink, #111); }
.hkt-cite-btn:focus-visible { outline: 3px solid var(--hkt-magenta, #ff2e88); outline-offset: 3px; }
.hkt-cite-btn.is-done   { background: var(--hkt-lime, #b8ff3c); }
.hkt-cite-btn.is-failed { background: var(--hkt-magenta, #ff2e88); }

/* ══════════════════════════════════════════════
   11. このページを引用する
   ══════════════════════════════════════════════ */

.hkt-cite {
	border-radius: var(--hkt-radius, 0px);
	--hkb-pad: 18px;
	box-sizing: border-box;
	border: var(--hkt-bw, 3px) solid var(--hkt-ink, #111);
	background: var(--hkt-tint, #f4f4f2);
	padding: min(var(--hkb-pad), 6vw);
	margin-block: 2em;
	font-family: var(--hkt-ff-body);
}

.hkt-cite__head {
	border-radius: var(--hkt-radius, 0px);
	display: inline-block;
	background: var(--hkb-accent, #111);
	color: var(--hkb-on, #fff);
	border: 2px solid var(--hkt-ink, #111);
	padding: 4px 13px;
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.5;
}

.hkt-cite__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }

.hkt-cite__tab {
	border: 2px solid var(--hkt-ink, #111);
	background: var(--hkt-paper, #fff);
	color: var(--hkt-ink, #111);
	padding: 3px 12px;
	font-family: var(--hkt-ff-body);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.hkt-cite__tab.is-on { background: var(--hkt-ink, #111); color: #fff; }
.hkt-cite__tab:focus-visible { outline: 3px solid var(--hkt-magenta, #ff2e88); outline-offset: 2px; }

.hkt-cite__out {
	border: 2px solid var(--hkt-ink, #111);
	background: var(--hkt-paper, #fff);
	padding: 12px 14px;
	margin: 0 0 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.7;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	max-height: 180px;
	overflow-y: auto;
}

.hkt-cite__hint,
.hkt-cite__note { font-size: 12px; color: var(--hkt-mute, #6b6b6b); margin: 10px 0 0; line-height: 1.7; }

/* ══════════════════════════════════════════════
   12. 著者・監修者
   ══════════════════════════════════════════════ */

.hkt-author {
	border-radius: var(--hkt-radius, 0px);
	--hkb-pad: 18px;
	box-sizing: border-box;
	border: var(--hkt-bw, 3px) solid var(--hkt-ink, #111);
	border-top-width: calc(var(--hkt-bw, 3px) + 4px);
	border-top-color: var(--hkb-line, #111);
	background: var(--hkt-boxbg, #fff);
	padding: min(var(--hkb-pad), 6vw);
	margin-block: 2em;
	font-family: var(--hkt-ff-body);
}

.hkt-author__head { display: flex; align-items: center; gap: 14px; }

.hkt-author__img {
	flex: none;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border: 3px solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkt-tint, #f4f4f2);
}

.hkt-author__name { font-size: 15.5px; font-weight: 800; line-height: 1.4; }
.hkt-author__name a { color: inherit; }
.hkt-author__role { font-size: 12.5px; color: var(--hkt-mute, #6b6b6b); line-height: 1.5; }
.hkt-author__bio  { font-size: 13.5px; line-height: 1.8; margin-top: 12px; }

/* ── テーマ規則との衝突（新ブロック分） ── */
.hkt-stat__label, .hkt-stat__value, .hkt-stat__def, .hkt-stat__meta,
.hkt-cite__head, .hkt-cite__hint, .hkt-cite__note, .hkt-cite__out,
.hkt-author__name, .hkt-author__role, .hkt-author__bio {
	margin-block: 0;
}

.hkt-stat__value  { margin-block: 4px !important; }
.hkt-stat__def    { margin-top: 10px !important; margin-bottom: 10px !important; }
.hkt-author__bio  { margin-top: 12px !important; margin-bottom: 0 !important; }
.hkt-stat__label, .hkt-stat__meta, .hkt-cite__head, .hkt-author__name, .hkt-author__role { margin-block: 0 !important; }
.hkt-cite__hint, .hkt-cite__note { margin-block: 10px 0 !important; }
.hkt-stat__src a, .hkt-author__name a { color: inherit !important; }
.hkt-stat__src a::after, .hkt-author__name a::after { content: none !important; display: none !important; }
.hkt-author__img { margin-block: 0 !important; width: 56px !important; height: 56px !important; }
.hkt-cite-btn::after { content: none !important; display: none !important; }

/* ══════════════════════════════════════════════
   13. ヒーロー

   背景は blocks.js が組み立てて、カスタムプロパティで渡す。
     --hkh-bg    地の色
     --hkh-img   重ねる層（ストライプ／グラデーション／画像＋色フィルタ）
     --hkh-size  auto（ストライプ・グラデーション）／ cover（画像）
     --hkh-min   高さの下限
     --hkh-fg    文字色（未指定なら継承）
   ══════════════════════════════════════════════ */

.hkt-hero {
	box-sizing: border-box;
	position: relative;
	/*
	 * 地色は要素に、柄は ::before に置く。
	 * 「中心を薄くする」ためにマスクを掛けるが、要素に直接掛けると
	 * **地色と中の文字まで一緒に消えてしまう**。柄だけを別の層に分ける。
	 */
	background-color: var(--hkh-bg, #ffffff);
	/* 未指定ならテーマの本文色ではなく ink。暗い背景色を選んだときに読めなくなるのを避ける */
	color: var(--hkh-fg, var(--hkt-ink, #111));
	min-height: var(--hkh-min, 320px);
	display: flex;
	align-items: center;
	/* 型1：下辺の黒罫。以前の版と同じ */
	border-bottom: var(--hkt-bw, 3px) solid var(--hkt-ink, #111);
	padding-block: clamp(36px, 6vw, 64px);
	padding-inline: clamp(16px, 4vw, 32px);
	font-family: var(--hkt-ff-body);
	overflow: hidden;
}

/* 柄の層。マスクはここだけに掛かる */
.hkt-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--hkh-img, none);
	background-size: var(--hkh-size, auto);
	background-position: var(--hkh-pos, center);
	background-repeat: repeat;
	-webkit-mask-image: var(--hkh-mask, none);
	mask-image: var(--hkh-mask, none);
	pointer-events: none;
}

/* 画像のときだけ敷き詰めをやめる（cover と repeat は両立しない） */
.hkt-hero--image::before { background-repeat: no-repeat; }

/*
 * 横幅いっぱい。
 * **STORK19 は .alignfull / .alignwide のCSSを1本も持っていない**
 * （2026-09-09 実測：両サイトの全スタイルシートを走査して0件）ので、自前で用意する。
 *
 * エディターには効かせない。編集画面はブロックを本文幅に収めて配置するので、
 * ここで 100vw に広げるとエディターのレイアウトが壊れる。
 */
body .hkt-hero--bleed {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.hkt-hero__inner {
	width: 100%;
	max-width: var(--hkt-maxw, 1180px);
	margin-inline: auto;
}

.hkt-hero--center { text-align: center; }
.hkt-hero--center .hkt-hero__inner { margin-inline: auto; }
.hkt-hero--center .hkt-hero__lede { margin-inline: auto; }

/* 型4：英字アイブロウ */
.hkt-hero__eyebrow {
	display: inline-block;
	font-family: var(--hkt-ff-display);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1;
	color: inherit;
}

.hkt-hero__title {
	font-family: var(--hkt-ff-display);
	font-size: clamp(30px, 7.2vw, 62px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: inherit;
	text-wrap: balance;
}

.hkt-hero__lede {
	font-size: 15px;
	line-height: 1.85;
	max-width: 62ch;
	color: inherit;
	opacity: .82;
}

.hkt-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hkt-hero--center .hkt-hero__actions { justify-content: center; }
.hkt-hero__actions > :first-child { margin-top: 0; }
.hkt-hero__actions > :last-child  { margin-bottom: 0; }

/* ── テーマ規則との衝突（ヒーロー分） ──
   .entry-content h1 / p の余白と文字サイズを浴びるので打ち消す */
/*
 * ⚠️ **ここも margin ショートハンドを使わない。** margin-block だけにする。
 *
 * .hkt-hero__lede は max-width:62ch で幅が絞られているので、
 * 中央寄せには margin-inline:auto が要る。
 * margin: 0 0 22px !important で潰すと、**箱が左詰めのまま残り、
 * 中の文字だけ中央に揃う**という状態になる（実測で 82〜116px ずれた）。
 * ステップで起きたのと同じ穴。2026-09-09 実機検証 FAIL 3。
 */
.hkt-hero__eyebrow { margin-block: 0 10px !important; font-size: 12px !important; }
.hkt-hero__title   { margin-block: 0 14px !important; padding: 0 !important; background: none !important; border: 0 !important; }
.hkt-hero__title::before, .hkt-hero__title::after { content: none !important; display: none !important; }
.hkt-hero__lede    { margin-block: 0 22px !important; }
.hkt-hero__actions { margin-block: 0 !important; }

@media (max-width: 600px) {
	.hkt-hero { min-height: auto; }
	.hkt-hero__actions { gap: 10px; }
}


/* ══════════════════════════════════════════════
   14. 縦のリズム（全ブロック共通）

   **2026-09-09、実際のページを測ったら 0 / 16 / 30 / 39px とバラバラだった。**
   原因は2つ。
     1. ブロックごとに em で書いていた。em の基準が font-size なので、
        ブロックによって実寸が変わっていた（1.4em でも 19px と 27px になる）
     2. ステップは <ol> なので、テーマの
        .entry-content ol { margin: 0 0 1em }（0,1,1）に負けて 16px になっていた

   トークン1つに寄せて、詳細度も確保する。
   **!important は縦（margin-block）だけ。横に付けると編集画面の中央寄せが死ぬ。**
   ── 横方向のマージンは、内部要素も含めて一切 !important にしない ──
   横が 0 のショートハンドでも margin-block に書き換えてある。
   margin-inline:auto（中央寄せ）を潰す事故を、構造的に起こらなくするため。
   2026-09-09、ステップとヒーローのリード文で2回起こした。
   ══════════════════════════════════════════════ */

.hkt-hero, .hkt-sechead, .hkt-box, .hkt-cta, .hkt-steps, .hkt-faq,
.hkt-card, .hkt-voice, .hkt-stat, .hkt-cite, .hkt-author, .hkt-source {
	margin-block: var(--hkt-flow, 28px) !important;
}

/* セクション見出しは「まとまりの始まり」。前だけ広く取る */
.hkt-sechead { margin-block: var(--hkt-flow-lg, 56px) var(--hkt-flow, 28px) !important; }

/* ヒーローはページの先頭。上は詰め、下だけ広く */
.hkt-hero { margin-block: 0 var(--hkt-flow-lg, 56px) !important; }

/* ラベルとバッジが枠の上に載る分だけ、上を足す */
.hkt-box--labeled, .hkt-card--badged {
	margin-top: calc(var(--hkt-flow, 28px) + 14px) !important;
}

/* ══════════════════════════════════════════════
   15. ヒーローの幅

   **STORK19 の「フルワイド」テンプレートでも、本文コンテナは 980px のまま**
   （2026-09-09 実測）。テーマは .alignfull のCSSを持っていないので、自前で用意する。

   100vw は縦スクロールバーの幅を含むため、そのまま使うと横スクロールが出る。
   view.js が実測した --hkt-sbw（スクロールバーの幅）を引いて、正確に画面幅へ合わせる。
   ══════════════════════════════════════════════ */

/*
 * ⚠️ ここだけは横マージンを !important で上書きする。**狙ってやっている。**
 *
 * エディターは .editor-styles-wrapper .wp-block { margin-inline: auto }（0,2,0）で
 * ブロックを中央に寄せる。.hkt-hero--bleed（0,1,0）では負けるため、
 * **編集画面では広がらず、保存後のプレビューでだけ広がる**という状態になっていた
 * （2026-09-09 ユーザー報告）。
 *
 * ステップやリード文で起こした事故は「中央寄せを"うっかり"潰した」もの。
 * こちらは「全幅にするために中央寄せを"意図的に"外す」もので、目的が逆。
 * **--bleed が付いたときだけに限定してあるので、他のブロックには波及しない。**
 *
 * apiVersion 3 でキャンバスが iframe 化されているため、
 * 編集画面の 100vw はキャンバスの幅になる。フロントと同じ見え方になる。
 */
.hkt-hero--bleed {
	width: calc(100vw - var(--hkt-sbw, 0px)) !important;
	max-width: none !important;
	margin-inline: calc(50% - (100vw - var(--hkt-sbw, 0px)) / 2) !important;
}

/*
 * 編集画面ではスクロールバー幅を測れない。
 *
 * view.js はフロント専用（wp_enqueue_scripts）なので、エディターの iframe 内では
 * --hkt-sbw が未設定になり、calc(100vw - 0px) が iframe のスクロールバー分だけはみ出す。
 * **実機検証で、キャンバス 2265px に対しヒーロー 2280px、横スクロール発生を確認**（2026-09-09）。
 *
 * 編集画面だけ 15px を既定にする。Chrome の標準的なスクロールバー幅。
 * 実測ではないので数pxずれることがあるが、**編集画面の見た目だけの話**で、
 * 公開ページは view.js が実測した正確な値を使う。はみ出しは起きない。
 */
.editor-styles-wrapper { --hkt-sbw: 15px; }

/*
 * 幾何ノードの Canvas。
 * 最背面に敷き、文字とボタンはその手前に置く。
 * pointer-events を切ってあるので、ボタンのクリックを妨げない。
 */
.hkt-hero__canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.hkt-hero__inner { position: relative; z-index: 1; }

/* Canvas が動いているあいだは、下敷きの静止画を消す（二重に見えるため） */
.hkt-hero.is-nodes-live::before { background-image: none; }

/* 中身の最大幅。本文コンテナに合わせる */
.hkt-hero__inner { max-width: var(--hkh-inner, var(--hkt-maxw, 1180px)); }

/*
 * ボックスとステップの横幅（%指定）。
 * CTA ボタンと同じで px ではなく % なので、画面幅が変わっても比率が保たれる。
 * margin-inline: auto は編集画面の .wp-block が元から持っている値と同じ。
 * **打ち消しではないので、2026-09-09 の中央寄せ事故の条件には当たらない。**
 */
.hkt-box--sized, .hkt-steps--sized {
	width: var(--hkb-w, 100%);
	max-width: 100%;
	margin-inline: auto;
}

/*
 * ステップだけ、中央寄せがテーマに負けていた（2026-09-09 実測、左余白が常に 0）。
 *   テーマ  .entry-content ol:not(li ol) { margin: 0 0 var(--stk-list-margin, 1em) }
 *   自社    .hkt-steps--sized            { margin-inline: auto }
 * :not(li ol) のぶんテーマが重く、**しかも後読み**。二重に負けている。
 * ボックスは div なのでこの規則に当たらず、最初から効いていた。
 *
 * **auto を !important にするのであって、0 を焼き付けるのではない。**
 * 横マージンを 0 で潰すと編集画面の中央寄せが死ぬ（2026-09-09 の事故）。
 * auto は編集画面の .wp-block が元から持っている値と同じなので、衝突しない。
 */
.hkt-steps.hkt-steps--sized { margin-inline: auto !important; }

/*
 * CTA の横幅（%指定）。
 * px ではなく % にしているので、画面幅が変わっても比率が保たれる。
 * 0.8.1 までの .hkt-cta--wide（横幅いっぱいのトグル）も、そのまま動く。
 */
.hkt-cta--sized .hkt-cta__btn {
	display: block;
	width: var(--hkc-w, auto);
	margin-inline: auto;
}

/*
 * 複数行を書ける欄は、改行をそのまま出す。
 *
 * これらは TextareaControl（複数行入力）で書くのに、
 * 素のテキストとして保存されるため、既定の white-space:normal では
 * **改行が空白1つに潰れる**（2026-09-09 ユーザー報告）。
 *
 * 改行文字は保存されたHTMLに残っている（実測で確認）ので、
 * save() は変えずCSSだけで直せる。既存ブロックは無傷。
 * pre-line なので、余分な空白は詰めつつ改行だけ活かす。
 */
.hkt-author__bio,
.hkt-stat__def,
.hkt-cite__note {
	white-space: pre-line;
}

/* ══════════════════════════════════════════════
   13. 関連記事カード（型：濃さの階段）
   設計：references/design-history/new-blocks-design-2026-09-09.md §1
   ══════════════════════════════════════════════ */

.hkt-bcard {
	--hkb-pad: 16px;
	--hkb-fs:  14.5px;
	--hkb-bw:  var(--hkt-bw, 3px);
	--hkb-sh:  6px;
	--hkb-bg:  var(--hkt-boxbg, #ffffff);
	position: relative;
	box-sizing: border-box;
	/* メタ行を下辺へ押し付けるため。説明が空でも並べたとき下が揃う */
	display: flex;
	flex-direction: column;
	border: var(--hkb-bw) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkb-bg);
	box-shadow: var(--hkb-sh) var(--hkb-sh) 0 var(--hkt-ink, #111);
	font-family: var(--hkt-ff-body);
	font-size: var(--hkb-fs);
	line-height: 1.8;
}
.hkt-bcard * { box-sizing: border-box; }
body.hkt-article .hkt-bcard { --hkb-sh: 0px; }

.hkt-bcard--side, .hkt-bcard--wide { flex-direction: row; }

/*
 * **横並びの型では align-self を指定しないと比が効かない。**
 *
 * flex 行の既定は align-items: stretch。flex: 0 0 88px はメインサイズ（幅）しか
 * 固定しないので、高さはカードの高さまで引き伸ばされ、aspect-ratio が黙って無効になる。
 * 実測（2026-09-09）：88×88 のはずが 88×106.88、380px では 88×129.56。
 * 縦積みの --grid / --slab で比が効いていたのは、幅が先に確定していたから。
 *
 * flex-start で伸びを止める。--side は高さも直接書いて二重に押さえる。
 */
.hkt-bcard--side .hkt-bcard__thumb {
	flex: 0 0 88px;
	align-self: flex-start;
	height: 88px;
	aspect-ratio: 1 / 1;
}
.hkt-bcard--grid .hkt-bcard__thumb { aspect-ratio: 16 / 9; }
.hkt-bcard--wide .hkt-bcard__thumb {
	flex: 0 0 42%;
	align-self: flex-start;
	aspect-ratio: 4 / 3;
}
.hkt-bcard--slab .hkt-bcard__thumb { aspect-ratio: 21 / 9; }

/*
 * 「大」は狭い画面では縦積みにする。
 * 横のままだと、幅42%の画像が 105px しか高さを持てず、
 * 隣の文章（155px前後）との差がそのまま画像の下の空白になる（実測 380px）。
 * 画像を上に回して 16:9 にすれば空白が出ない。
 */
@media (max-width: 600px) {
	.hkt-bcard--wide { flex-direction: column; }
	.hkt-bcard--wide .hkt-bcard__thumb {
		flex: 0 0 auto;
		align-self: stretch;
		width: 100%;
		aspect-ratio: 16 / 9;
		border-right: 0;
		border-bottom: var(--hkb-bw) solid var(--hkt-ink, #111);
	}
}

/*
 * 「行」だけ枠を持たない。
 * **「本文の流れを止めない」と「3px の黒枠」は両立しない。**
 * 枠がこのデザインの identity である以上、止めない型は枠を捨てるしかない。
 * 色は左の 5px の縦罫に出す（ラベルなしボックスと同じ手）。
 */
.hkt-bcard--row {
	display: block;
	border: 0;
	border-bottom: 2px solid var(--hkt-ink, #111);
	border-left: 5px solid var(--hkb-line, #111);
	box-shadow: none;
	padding: 8px 0 8px 12px;
}

/* ── 画像 ── */
.hkt-bcard__thumb {
	position: relative;
	flex: none;
	overflow: hidden;
	background: var(--hkt-tint, #f4f4f2);
	border-right: var(--hkb-bw) solid var(--hkt-ink, #111);
}
.hkt-bcard--grid .hkt-bcard__thumb,
.hkt-bcard--slab .hkt-bcard__thumb {
	border-right: 0;
	border-bottom: var(--hkb-bw) solid var(--hkt-ink, #111);
}

/*
 * 画像が無いときも窓は残す。
 * 並べたときに画像の有無で高さがガタつくのを防ぐため。
 * 柄はヒーローと同じ −18度・線2px・周期28px。**角度と周期は変えない。**
 * 濃度だけ上げてある（小さい窓では 4.5% だと見えないため）。
 */
.hkt-bcard__thumb--empty {
	background-color: var(--hkt-tint, #f4f4f2);
	background-image: repeating-linear-gradient(-18deg,
		transparent 0 26px, rgba(17, 17, 17, .10) 26px 28px);
}

/* ── バッジ。ボックスのラベルと同じ骨格（枠の左上・−18度） ── */
.hkt-bcard__badge {
	position: absolute;
	top: calc(var(--hkb-bw) * -1 - 12px);
	left: 14px;
	z-index: 3;
	display: inline-block;
	isolation: isolate;
	color: var(--hkb-on, #fff);
	padding: 4px 13px;
	font-size: max(11.5px, .74em);
	font-weight: 800;
	line-height: 1.5;
	white-space: nowrap;
	/* ステップで踏んだ「隣のカードに被る」の再発防止 */
	max-width: calc(100% - 28px);
	/*
	 * **overflow: hidden にしてはいけない。**
	 * 斜めの面は ::before / ::after を skewX(-18deg) したものなので、
	 * 要素の箱から左右へ約4px はみ出す。hidden で切ると
	 * **右端が垂直にスパッと切れる**（2026-09-09、ユーザー報告のキャプチャ）。
	 *
	 * clip + overflow-clip-margin なら「文字は箱で切る／はみ出しは 8px まで残す」
	 * が両立する。text-overflow: ellipsis も clip で効くことを実機で確認済み。
	 * 対応していない古いブラウザでは切られなくなるだけで、切れて見えるよりは良い。
	 */
	overflow: clip;
	overflow-clip-margin: 8px;
	text-overflow: ellipsis;
}
.hkt-bcard__badge::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: var(--hkt-skew, skewX(-18deg));
	background: var(--hkb-accent, #5b3df5);
	border: 2px solid var(--hkt-ink, #111);
}

/*
 * 外部リンクのバッジは色を持たない。**色のあるバッジ＝自サイト、白いバッジ＝よそ。**
 * 読み手が覚える規則を1つにする。
 * ドメインは必ず欧文なので、Archivo Black がフルに効く唯一のラベルになる。
 */
.hkt-bcard--ext .hkt-bcard__badge {
	color: var(--hkt-ink, #111);
	font-family: var(--hkt-ff-display);
	letter-spacing: .1em;
}
.hkt-bcard--ext .hkt-bcard__badge::before { background: var(--hkt-paper, #fff); }

/* ── 文字 ── */
.hkt-bcard__foot {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: min(var(--hkb-pad), 6vw);
}
.hkt-bcard--row .hkt-bcard__foot { padding: 0; }

.hkt-bcard__title {
	font-size: 1.08em;
	font-weight: 800;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.hkt-bcard--row .hkt-bcard__title { -webkit-line-clamp: 1; }

/*
 * カード全体を押せるようにする。**リンクは1本のまま。**
 * ::after ではなく ::before を使うのは、::after をテーマの外部リンクアイコンに
 * 使われており、こちらで打ち消しているため（下）。
 */
.hkt-bcard__title a { position: static; }
.hkt-bcard__title a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.hkt-bcard__desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hkt-bcard--side .hkt-bcard__desc { -webkit-line-clamp: 2; }

.hkt-bcard--row .hkt-bcard__meta { display: none; }
.hkt-bcard__meta {
	/* 説明が空でも下辺が揃う（並べたとき） */
	margin-top: auto;
	padding-top: 6px;
	font-family: var(--hkt-ff-display);
	font-size: max(11px, .72em);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hkt-mute, #6b6b6b);
}

/* ── 面（主導線）── */
.hkt-bcard--slab { --hkb-sh: 10px; }
body.hkt-article .hkt-bcard--slab { --hkb-sh: 0px; }
.hkt-bcard--slab .hkt-bcard__foot {
	background: var(--hkb-face, #5b3df5);
	color: var(--hkb-onface, #fff);
}
.hkt-bcard--slab .hkt-bcard__desc,
.hkt-bcard--slab .hkt-bcard__meta { color: inherit; }

/* 編集画面で出す注意書き。保存には入らない */
.hkt-bcard__hint {
	margin: 0 0 8px;
	padding: 8px 12px;
	border: 2px dashed var(--hkt-mute, #6b6b6b);
	color: var(--hkt-mute, #6b6b6b);
	font-size: 13px;
	line-height: 1.6;
}

/* ══════════════════════════════════════════════
   14. タブ
   ══════════════════════════════════════════════ */

.hkt-tabs {
	--hkb-pad: 18px;
	--hkb-fs:  15px;
	--hkb-bw:  var(--hkt-bw, 3px);
	--hkb-bg:  var(--hkt-boxbg, #ffffff);
	box-sizing: border-box;
	font-family: var(--hkt-ff-body);
	font-size: var(--hkb-fs);
}
.hkt-tabs * { box-sizing: border-box; }

/*
 * タブ列とパネルは**繋がない**（8px 離す）。
 * 「線が切れて、その隙間に何かが入る」形は補足説明枠に割り当てた。
 * 同じ形を2つの意味に使わない。
 */
.hkt-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-block: 0 8px;
	padding: 0;
	list-style: none;
}
.hkt-tabs--scroll .hkt-tabs__list {
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
}
/* JS が動く前・落ちたときに、空の箱を出さない */
.hkt-tabs:not(.is-live) .hkt-tabs__list { display: none; }

.hkt-tabs__btn {
	flex: 0 0 auto;
	border: var(--hkb-bw) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkt-paper, #fff);
	color: var(--hkt-ink, #111);
	font-family: var(--hkt-ff-body);
	font-size: max(13px, .88em);
	font-weight: 800;
	line-height: 1.5;
	padding: 8px 16px;
	min-height: 40px;
	cursor: pointer;
}
/*
 * 選択＝黒への反転。**.hkt-cite__tab.is-on と同じ値。3つ目の表現を作らない。**
 * accent のベタ塗りにしないのは、同じUIが色によって「選択」の強さを変えるため
 * （violet は強く、yellow は弱い）。黒なら6色すべてで同じ強さになる。
 */
.hkt-tabs__btn.is-on { background: var(--hkt-ink, #111); color: #fff; }
.hkt-tabs__btn:focus-visible { outline: 3px solid var(--hkt-magenta, #ff2e88); outline-offset: 2px; }

/* 反転が黒固定なので、選んだ色はパネルの上辺に出す（カード・著者と同じ手） */
.hkt-tabs__panels {
	border: var(--hkb-bw) solid var(--hkt-ink, #111);
	border-top-width: calc(var(--hkb-bw) + 4px);
	border-top-color: var(--hkb-line, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkb-bg);
}

.hkt-tab { padding: min(var(--hkb-pad), 6vw); line-height: 1.85; }
.hkt-tab > .hkt-tab__body > :first-child { margin-top: 0; }
.hkt-tab > .hkt-tab__body > :last-child  { margin-bottom: 0; }
/* テーマやコアの display 指定に負けないようにする */
.hkt-tab[hidden] { display: none !important; }
.hkt-tab:focus-visible { outline: 3px solid var(--hkt-ink, #111); outline-offset: -4px; }

/*
 * JS が無いときは全パネルが縦に並ぶ。そのままだと**どれが何のタブか分からない**ので、
 * 名前を属性から出す。中身は最初から HTML にあるので、検索にも印刷にも渡る。
 */
.hkt-tabs:not(.is-live) .hkt-tab + .hkt-tab { border-top: 2px solid var(--hkt-ink, #111); }

/*
 * タブ名が空のときは番号を出す。**view.js の (i+1) と同じ値にするため。**
 * 空のまま attr() を使うと、JS前は「名前のない罫と17pxの空き」、
 * JS後は「1」「3」と、同じ空に対して2つの見え方が出る（2026-09-09 実測）。
 * counter を使えば CSS 側でも同じ番号が出せる。
 * !important はテーマの .entry-content が counter-reset を持つため（ステップと同じ）。
 */
.hkt-tabs__panels { counter-reset: hkt-tab !important; }
.hkt-tab { counter-increment: hkt-tab !important; }
.hkt-tabs:not(.is-live) .hkt-tab[data-hkt-label=""]::before { content: counter(hkt-tab); }

.hkt-tabs:not(.is-live) .hkt-tab::before {
	content: attr(data-hkt-label);
	display: block;
	font-weight: 800;
	border-bottom: var(--hkb-bw) solid var(--hkb-line, #111);
	padding-bottom: 4px;
	margin-bottom: 10px;
	width: max-content;
	max-width: 100%;
}

/* 編集中に出す注意書き。保存には入らない */
.hkt-tabs__note {
	/* ショートハンドは使わない。横まで 0 にすると編集画面の中央寄せが死ぬ */
	margin-block: 0 8px !important;
	font-size: 12px !important;
	color: var(--hkt-mute, #6b6b6b);
}
.hkt-tab__label {
	margin-block: 0 8px !important;
	font-weight: 800;
	font-size: max(13px, .88em) !important;
	border-bottom: var(--hkb-bw) solid var(--hkb-line, #111);
	padding-bottom: 4px;
	width: max-content;
	max-width: 100%;
}

@media (max-width: 600px) {
	.hkt-tabs__btn { flex: 1 1 calc(50% - 6px); }
	.hkt-tabs--scroll .hkt-tabs__btn { flex: 0 0 auto; }
}

/* 印刷ではタブ列を消し、全パネルに名前を付けて出す */
@media print {
	.hkt-tabs__list { display: none !important; }
	.hkt-tab[hidden] { display: block !important; }
	.hkt-tab[data-hkt-label=""]::before { content: counter(hkt-tab) !important; }
	.hkt-tab::before {
		content: attr(data-hkt-label) !important;
		display: block !important;
		font-weight: 800;
		border-bottom: 2px solid #111;
		margin-bottom: 8px;
	}
}

/* ══════════════════════════════════════════════
   15. アコーディオン
   FAQ との差は見た目ではなく「FAQPage の構造化データを出すか」
   ══════════════════════════════════════════════ */

.hkt-acc {
	--hkb-pad: 18px;
	--hkb-fs:  15px;
	--hkb-bw:  var(--hkt-bw, 3px);
	--hkb-sh:  6px;
	--hkb-bg:  var(--hkt-boxbg, #ffffff);
	box-sizing: border-box;
	border: var(--hkb-bw) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkb-bg);
	box-shadow: var(--hkb-sh) var(--hkb-sh) 0 var(--hkt-ink, #111);
	font-family: var(--hkt-ff-body);
	font-size: var(--hkb-fs);
}
.hkt-acc * { box-sizing: border-box; }
body.hkt-article .hkt-acc { --hkb-sh: 0px; }

.hkt-acc__item + .hkt-acc__item { border-top: 2px solid var(--hkt-ink, #111); }

.hkt-acc__q {
	cursor: pointer;
	list-style: none;
	display: block;
	position: relative;
	/* 閉じているときも 5px 確保する。開くたびに文字が横へ跳ねないように */
	border-left: 5px solid transparent;
	padding: calc(min(var(--hkb-pad), 6vw) * .8) calc(min(var(--hkb-pad), 6vw) + 34px)
	         calc(min(var(--hkb-pad), 6vw) * .8) min(var(--hkb-pad), 6vw);
	font-weight: 800;
	line-height: 1.6;
	margin: 0;
}
.hkt-acc__q::-webkit-details-marker { display: none; }

.hkt-acc__q::after {
	content: "+";
	position: absolute;
	right: min(var(--hkb-pad), 6vw);
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--hkt-ff-display);
	font-size: max(18px, 1.3em);
	line-height: 1;
	/* 白地に載る文字。yellow / lime / plain は黒に落ちる */
	color: var(--hkb-text, #111);
}
.hkt-acc__q:focus-visible { outline: 3px solid var(--hkt-ink, #111); outline-offset: -4px; }

/*
 * 開いた印は反転ではなく左の色帯。
 * 反転は FAQ とタブがすでに使っている。**同じ意味に同じ形、違う意味に違う形。**
 */
.hkt-acc__item[open] > .hkt-acc__q { border-left-color: var(--hkb-line, #111); }
.hkt-acc__item[open] > .hkt-acc__q::after { content: "\2212"; }

.hkt-acc__a {
	padding: 0 min(var(--hkb-pad), 6vw) min(var(--hkb-pad), 6vw)
	         calc(min(var(--hkb-pad), 6vw) + 5px);
	line-height: 1.85;
}
.hkt-acc__a > :first-child { margin-top: 0; }
.hkt-acc__a > :last-child  { margin-bottom: 0; }

/* 編集画面では details を使わないので、常に開いた見た目にする（FAQ と同じ扱い） */
.editor-styles-wrapper .hkt-acc__q { border-left-color: var(--hkb-line, #111); }
.editor-styles-wrapper .hkt-acc__q::after { content: "\2212"; }

@media print {
	.hkt-acc__a { display: block !important; }
	.hkt-acc__q::after { content: ""; }
}

/* ══════════════════════════════════════════════
   16. 補足説明枠（枠線の左上が切れて、そこにタイトルが入る）
   ══════════════════════════════════════════════ */

/*
 * **紙の色で線を隠す方式は採らない。**
 * タイトルは枠をまたぐので背後が上下2色になり、1色では隠せない。
 * 背景あり／なしで隠す色も変わる。border-image はタイトル幅に追随できない。
 *
 * 上辺そのものを捨て、見出しの行が「短いひげ ＋ タイトル ＋ 残り全部」を描く。
 * これなら背景が何色でも、塗りがあってもなくても成立する。
 *
 * ボックスとの使い分け：
 *   ボックスのラベル … 貼られた付箋（読み飛ばすな）。浮く（影あり）
 *   補足枠のタイトル … 枠の名前（読み飛ばしてよい）。沈む（影なし）
 */
.hkt-note {
	--hkb-pad: 18px;
	--hkb-fs:  14.5px;
	--hkb-bw:  var(--hkt-bw, 3px);
	--hkb-bg:  transparent;
	box-sizing: border-box;
	/*
	 * flow-root が要る。見出しに負のマージンを当てると、
	 * **マージンが親の上辺を突き抜けてブロック全体が上へ動く**（margin collapsing）。
	 * BFC を作って「見出しだけが上へはみ出す」に閉じ込める。
	 */
	display: flow-root;
	border: var(--hkb-bw) solid var(--hkt-ink, #111);
	border-top: 0;
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkb-bg);
	box-shadow: none;
	padding: 0 min(var(--hkb-pad), 6vw) min(var(--hkb-pad), 6vw);
	font-family: var(--hkt-ff-body);
	font-size: var(--hkb-fs);
	line-height: 1.85;
}
.hkt-note * { box-sizing: border-box; }
.hkt-note--tint { --hkb-bg: var(--hkt-tint, #f4f4f2); }

/* タイトルが無いときは、上辺を普通に引く */
.hkt-note:not(.hkt-note--titled) {
	border-top: var(--hkb-bw) solid var(--hkt-ink, #111);
	padding-top: min(var(--hkb-pad), 6vw);
}
.hkt-note:not(.hkt-note--titled) .hkt-note__body { padding-top: 0; }

/*
 * 見出しの行が、そのまま枠の上辺。
 * 行の縦中央を枠の上端から bw/2 だけ下げると、
 * 罫（高さ bw）の上端が枠の上端とぴったり一致する。
 * −0.75em は line-height 1.5 の半分。**この 1.5 に依存している**ので、
 * 打ち消し層でも line-height を明示してある。
 */
.hkt-note__head {
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1.5;
	margin-block: calc(-0.75em + var(--hkb-bw) / 2) 0;
	font-size: max(13px, .92em);
	font-weight: 800;
	color: var(--hkt-ink, #111);
}
/* 左の短い罫＝唯一の色の置き場所 */
.hkt-note__head::before {
	content: "";
	flex: 0 0 22px;
	height: var(--hkb-bw);
	background: var(--hkb-line, #111);
}
/* 右は残り全部。ここは枠の続きなので黒 */
.hkt-note__head::after {
	content: "";
	flex: 1 1 auto;
	min-width: 12px;
	height: var(--hkb-bw);
	background: var(--hkt-ink, #111);
}
.hkt-note__title {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 本文の上余白は padding で取る。margin だと隣接マージンで潰れる */
.hkt-note__body { padding-top: min(var(--hkb-pad), 6vw); }
.hkt-note__body > :first-child { margin-top: 0; }
.hkt-note__body > :last-child  { margin-bottom: 0; }

/* ══════════════════════════════════════════════
   17. コンテンツスライダー（ライブラリなし。scroll-snap で作る）
   ══════════════════════════════════════════════ */

.hkt-slider {
	--hkb-gap: 14px;
	--hkb-sh:  6px;
	--hksl-sp: 1.15;   /* 1枚＋次の見切れ */
	--hksl-pc: 3;
	box-sizing: border-box;
	font-family: var(--hkt-ff-body);
}
.hkt-slider * { box-sizing: border-box; }
body.hkt-article .hkt-slider { --hkb-sh: 0px; }

/* 操作の行はカードの上。**重ねない。**半透明を使わないので、重ねると隠れる */
.hkt-slider__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block: 0 10px;
}
.hkt-slider__dots { display: flex; flex-wrap: wrap; gap: 6px; }
.hkt-slider__nav  { display: flex; gap: 8px; margin-left: auto; }

/* 点は正方形。12px を18度傾けても傾きが見えないので、ここは斜めにしない */
.hkt-slider__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 2px solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkt-paper, #fff);
	cursor: pointer;
}
.hkt-slider__dot.is-on { background: var(--hkb-line, #111); }
.hkt-slider__dot:focus-visible { outline: 3px solid var(--hkt-magenta, #ff2e88); outline-offset: 2px; }

/* 矢印は CTA ボタンを小さくしたもの */
.hkt-slider__prev,
.hkt-slider__next,
.hkt-slider__pause {
	width: 40px;
	height: 40px;
	padding: 0;
	display: grid;
	place-items: center;
	border: var(--hkt-bw, 3px) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkt-paper, #fff);
	box-shadow: 3px 3px 0 var(--hkt-ink, #111);
	color: var(--hkt-ink, #111);
	font-family: var(--hkt-ff-body);
	font-size: 11px;
	font-weight: 800;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease;
}
.hkt-slider__prev:hover, .hkt-slider__next:hover, .hkt-slider__pause:hover {
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--hkt-ink, #111);
}
.hkt-slider__prev:active, .hkt-slider__next:active, .hkt-slider__pause:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--hkt-ink, #111);
}
.hkt-slider__prev:disabled, .hkt-slider__next:disabled {
	opacity: .35;
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
}
.hkt-slider__pause[hidden], .hkt-slider__dots[hidden] { display: none !important; }
.hkt-slider__prev:focus-visible, .hkt-slider__next:focus-visible, .hkt-slider__pause:focus-visible {
	outline: 3px solid var(--hkt-magenta, #ff2e88);
	outline-offset: 2px;
}

/* 矢印は文字ではなく三角。Archivo Black に矢印が無いため。吹き出しの尻尾と同じ手 */
.hkt-slider__prev::before, .hkt-slider__next::before {
	content: "";
	width: 0;
	height: 0;
	border: 7px solid transparent;
}
.hkt-slider__prev::before { border-right-color: var(--hkt-ink, #111); margin-right: 6px; }
.hkt-slider__next::before { border-left-color:  var(--hkt-ink, #111); margin-left:  6px; }

.hkt-slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - (var(--hksl-sp) - 1) * var(--hkb-gap)) / var(--hksl-sp) );
	gap: var(--hkb-gap);
	align-items: stretch;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/*
	 * ★ 左パディングは 0 のまま。**入れると点の飛び先がズレる**
	 *   （view.js は track.scrollTo({ left: i * step() }) で飛ぶ）。
	 *   スマホの見切れはカード幅（grid-auto-columns）で作っている。
	 * ★ 下と右は影の逃げ場。overflow-x: auto は overflow-y も auto にするので、
	 *   ずらした影（6px 6px）は逃げ場が無いと切れる。
	 */
	padding: 0 var(--hkb-sh) var(--hkb-sh) 0;
	margin-block: 0;
	list-style: none;
}
.hkt-slide { scroll-snap-align: start; min-width: 0; }
.hkt-slide > :first-child { margin-top: 0; }
.hkt-slide > :last-child  { margin-bottom: 0; }
.hkt-slider__track:focus-visible { outline: 3px solid var(--hkt-ink, #111); outline-offset: 2px; }

@media (min-width: 768px) {
	.hkt-slider__track {
		grid-auto-columns: calc(
			(100% - (var(--hksl-pc) - 1) * var(--hkb-gap)) / var(--hksl-pc) );
	}
}

@media (prefers-reduced-motion: reduce) {
	.hkt-slider__track { scroll-behavior: auto; }
	.hkt-slider__prev, .hkt-slider__next, .hkt-slider__pause { transition: none; }
	.hkt-slider__prev:hover,  .hkt-slider__next:hover,
	.hkt-slider__prev:active, .hkt-slider__next:active { transform: none; }
}

/* 印刷では全部を縦に並べる。横スクロールは紙に残らない */
@media print {
	.hkt-slider__bar { display: none !important; }
	.hkt-slider__track {
		display: block !important;
		overflow: visible !important;
		padding: 0 !important;
	}
	.hkt-slide + .hkt-slide { margin-top: 14px; }
}

/* ══════════════════════════════════════════════
   18. 新しいブロックのテーマ干渉つぶし・縦のリズム・幅
   （既存の方針どおり、打ち消しは必要なプロパティだけ。横マージンには触らない）
   ══════════════════════════════════════════════ */

/* ── 画像 ──
   実測：.entry-content img に margin-bottom 1.5em と height:auto が乗る（(0,1,1)）。
   吹き出しアイコンで 24.72px の隙間と正方形の崩れが起きた前例がある。 */
.hkt-bcard__thumb img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	margin-block: 0 !important;
	border-radius: var(--hkt-radius, 0px) !important;
}

/* ── 段落として出している要素 ──
   実測：.entry-content p が margin-bottom 26.4px と font-size 16.48px を乗せる。
   .hkt-note__head は line-height も明示する。上の −0.75em が 1.5 を前提にしているため。 */
.hkt-note__head {
	margin-block: calc(-0.75em + var(--hkb-bw) / 2) 0 !important;
	font-size: max(13px, .92em) !important;
	line-height: 1.5 !important;
}
.hkt-acc__q { margin-block: 0 !important; }

/* ── リンク ──
   実測：テーマのリンク色 rgb(27,180,211) と下線が乗る。
   さらに .entry-content a:not(.no-icon)[target="_blank"]::after (0,3,1) で
   外部リンクアイコンが付く。カード全体を押せるようにする ::before と干渉するので消す。 */
.hkt-bcard__title a {
	color: inherit !important;
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 2px;
}
.hkt-bcard__title a::after { content: none !important; display: none !important; }

/* ── ボタン ──
   テーマが button に地色や角丸を当てていても、こちらの骨格を保つ */
.hkt-tabs__btn, .hkt-slider__dot,
.hkt-slider__prev, .hkt-slider__next, .hkt-slider__pause {
	border-radius: var(--hkt-radius, 0px) !important;
	text-decoration: none !important;
}

/* ── 縦のリズム ──
   §14 の列挙に新しいブロックを足す。足し忘れると .entry-content の余白を素通しで浴びる */
.hkt-bcard, .hkt-tabs, .hkt-acc, .hkt-note, .hkt-slider {
	margin-block: var(--hkt-flow, 28px) !important;
}

/*
 * バッジ・見出しが枠の上へはみ出すぶん、上に余白を足す。
 * **クラス2回**なのは、上の列挙（0,1,0 + !important）と同点になって
 * 記述順で負けるため。「囲み」で踏んだのと同じ罠。
 */
.hkt-bcard.hkt-bcard--badged { margin-top: calc(var(--hkt-flow, 28px) + 14px) !important; }
.hkt-note.hkt-note--titled   { margin-top: calc(var(--hkt-flow, 28px) + 12px) !important; }

/* 「行」は本文を止めないための型。前後の余白も詰める */
.hkt-bcard.hkt-bcard--row { margin-block: 14px !important; }

/* ── 幅（％のゲージ）── */
.hkt-bcard--sized, .hkt-tabs--sized, .hkt-acc--sized,
.hkt-note--sized, .hkt-slider--sized {
	width: var(--hkb-w, 100%);
	max-width: 100%;
	margin-inline: auto;
}
/* ステップと同じ理由。ol/ul に当たるテーマ規則に横マージンを取られる型があるため */
.hkt-slider.hkt-slider--sized, .hkt-acc.hkt-acc--sized { margin-inline: auto !important; }

/* ══════════════════════════════════════════════
   19. 二連CTA（電話 ＋ WEBフォーム）
   設計：references/hikitori-brand/hikitori-new-blocks-2026-09-10.md §2
   ══════════════════════════════════════════════ */

/*
 * 電話＝橙（相談）／WEB＝緑（進む）で**固定**。色は選ばせない。
 * 選べるようにすると、競合と同じ赤×緑の組み合わせを選べてしまう。
 *
 * **PC では電話側が「押せるもの」から外れる。**
 * PC で電話は掛けられないのに影を付けると、押せない物に押せる印を付けることになる。
 * だから要素ごと差し替える（ボタン → 読む番号のパネル）。
 */
.hkt-ctaduo {
	--hkb-pad: 18px;
	--hkb-fs:  16px;
	--hkb-bw:  var(--hkt-bw, 3px);
	--hkb-gap: 14px;
	--hkb-sh:  4px;              /* 固定。影は押せるの印なので、記事ごとに強弱を選ばせない */
	box-sizing: border-box;
	font-family: var(--hkt-ff-body);
	margin-block: var(--hkt-flow, 28px);
	max-width: var(--hkb-w, 100%);
	margin-inline: auto;
}
.hkt-ctaduo * { box-sizing: border-box; }

/*
 * 呼びかけの一行。**面にしない。**
 * 面が縦に3つ重なると、どれがボタンか分からなくなる。
 * 書体で対比が作れないので、サイズとウェイトだけで立てる。
 */
.hkt-ctaduo__headline {
	margin-block: 0 8px !important;
	text-align: center;
	font-weight: 800;
	font-size: clamp(17px, 4.2vw, 22px) !important;
	line-height: 1.5;
	color: var(--hkt-text, var(--hkt-ink, #111));
}

.hkt-ctaduo__micro {
	margin-block: 0 8px !important;
	text-align: center;
	font-size: max(12px, .8em) !important;
	color: var(--hkt-mute, #6b6b6b);
}

.hkt-ctaduo__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hkb-gap);
	align-items: stretch;        /* 中身の量が違っても下辺が揃う */
}
@media (min-width: 600px) {
	.hkt-ctaduo__grid { grid-template-columns: 1fr 1fr; }
}

.hkt-ctaduo__btn,
.hkt-ctaduo__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	border: var(--hkb-bw) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkb-accent, #111);
	color: var(--hkb-on, #fff) !important;
	padding: max(calc(var(--hkb-pad) * .8), 14px) min(var(--hkb-pad), 6vw);
	font-size: var(--hkb-fs);
	line-height: 1.5;
	text-align: center;
	text-decoration: none !important;
}
/* テーマの外部リンクアイコンを消す */
.hkt-ctaduo__btn::after { content: none !important; display: none !important; }

/* 押せるものだけが影を持つ */
.hkt-ctaduo__btn {
	box-shadow: 0 var(--hkb-sh) 0 var(--hkb-shade, var(--hkt-ink, #111));
	transition: transform .1s ease, box-shadow .1s ease;
}
.hkt-ctaduo__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 calc(var(--hkb-sh) + 1px) 0 var(--hkb-shade, var(--hkt-ink, #111));
}
/* 押し込むと底に着く。総高さが変わらないので行が動かない */
.hkt-ctaduo__btn:active {
	transform: translateY(var(--hkb-sh));
	box-shadow: 0 0 0 var(--hkb-shade, var(--hkt-ink, #111));
}
.hkt-ctaduo__btn:focus-visible {
	outline: 3px solid var(--hkt-ink, #111);
	outline-offset: 3px;
}

/* パネル（PC の電話側）は影を持たない ＝ 押すものではない */
.hkt-ctaduo__panel { box-shadow: none; }

.hkt-ctaduo__label { font-weight: 800; font-size: max(13px, .86em); }
.hkt-ctaduo__sub,
.hkt-ctaduo__lead  { font-size: max(11.5px, .76em); font-weight: 700; opacity: .92; }

/* 欧文が出るのは数字だけ。表示処理は数字にだけ効かせる */
.hkt-ctaduo__num {
	font-family: var(--hkt-ff-num, var(--hkt-ff-display));
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	font-weight: 800;
	font-size: clamp(22px, 6.4vw, 30px);
	letter-spacing: .02em;
	line-height: 1.15;
}

/* 但し書きは「確認」の黄。面ではなく罫にする（面積の問題） */
.hkt-ctaduo__note {
	margin-block: 10px 0 !important;
	padding-left: 10px;
	border-left: var(--hkt-bw-soft, 2px) solid var(--hkt-yellow, #ffe01b);
	font-size: max(12px, .8em) !important;
	line-height: 1.7;
	color: var(--hkt-text, var(--hkt-ink, #111));
}

/*
 * PC / SP の切り替え。**幅では分けない。**
 * 幅で分けるとタブレットを誤判定する。指で触る端末かどうかで分ける。
 */
.hkt-ctaduo__panel { display: none; }

@media (hover: hover) and (pointer: fine) {
	.hkt-ctaduo__btn--tel { display: none; }
	.hkt-ctaduo__panel    { display: flex; }
	.hkt-ctaduo__panel .hkt-ctaduo__num { font-size: clamp(26px, 3vw, 34px); }
}

/* 記事本文でも影は残す。CTA は例外（既存の hikitori/cta と同じ扱い） */
body.hkt-article .hkt-ctaduo { --hkb-sh: 4px; }

/* ══════════════════════════════════════════════
   20. 対応エリア
   ══════════════════════════════════════════════ */

/*
 * 対応する都県のタイルだけを置く。**図の中に47という分母を持ち込まない。**
 * 「47のうち9」と書けば弱く見え、「9都県だけ！」と叫べば強がりに見える。
 * 対応するものだけを置けば、読者が見るのは「9つの塊」であって
 * 「38が欠けた47」ではない。
 *
 * **タイルは aria-hidden。正はその下のリスト。**
 * タイルは塊を目で掴ませるための図で、読み上げに流すと都県名が2回読まれる。
 */
.hkt-area {
	--hkb-pad: 18px;
	--hkb-fs:  15px;
	--hkb-bw:  var(--hkt-bw, 3px);
	box-sizing: border-box;
	border: var(--hkb-bw) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkt-boxbg, #fff);
	padding: min(var(--hkb-pad), 6vw);
	margin-block: var(--hkt-flow, 28px);
	font-family: var(--hkt-ff-body);
	font-size: var(--hkb-fs);
	line-height: 1.8;
	max-width: var(--hkb-w, 100%);
	margin-inline: auto;
}
.hkt-area * { box-sizing: border-box; }

.hkt-area__lead { margin-block: 0 12px !important; font-size: 1em !important; }

.hkt-area__map {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	max-width: 330px;
	margin: 0 auto 14px;
}
.hkt-area__tile {
	grid-column: var(--hka-x, 1);
	grid-row: var(--hka-y, 1);
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	border: var(--hkt-bw-soft, 2px) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkb-accent, #b8ff3c);
	color: var(--hkb-on, #111);
	font-size: max(12px, .8em);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
}

.hkt-area__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin-block: 0 !important;
	padding-left: 0 !important;
	list-style: none !important;
}
.hkt-area__list > li {
	margin: 0 !important;
	/*
	 * !important が要る。テーマの `.entry-content li { padding-left: 1.35em }` と
	 * **詳細度が同点 (0,1,1)** で、読み込み順で負けていた
	 *（2026-09-10 実測：期待 10px に対し 17.01px）。
	 * 同じ宣言ブロックの中で margin は勝ち、padding だけ負けていた。
	 * **順序に依存しない形にする。**
	 */
	padding: 3px 10px !important;
	border: var(--hkt-bw-soft, 2px) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	font-size: max(12.5px, .84em);
	font-weight: 700;
	list-style: none !important;
}
.hkt-area__list > li::before,
.hkt-area__list > li::marker { content: none !important; display: none !important; }

.hkt-area__note {
	margin-block: 12px 0 !important;
	font-size: max(12px, .8em) !important;
	color: var(--hkt-mute, #6b6b6b);
}

.hkt-area__more {
	display: inline-block;
	margin-top: 10px;
	font-weight: 800;
	color: var(--hkb-text, var(--hkt-ink, #111)) !important;
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 2px;
}
.hkt-area__more::after { content: none !important; display: none !important; }

/* 幅のゲージ */
.hkt-ctaduo--sized, .hkt-area--sized { width: var(--hkb-w, 100%); max-width: 100%; margin-inline: auto; }

/* ══════════════════════════════════════════════
   21. 必要書類
   設計：references/hikitori-brand/hikitori-blocks-2-2026-09-10.md §1
   ══════════════════════════════════════════════ */

/*
 * **絞り込みのUIを持たない。**「自分に要るものだけ残る」形を採らなかった理由は3つ。
 *   1. YMYL の入力ミスが「必要書類が消える」として現れ、**読者は消えたものに気づけない**
 *   2. 絞るタブは押せる要素。影を付ければ「影＝押せる」の希少性が壊れ、
 *      付けなければ「押せると分からない押しもの」ができる
 *   3. 必要書類は**最も印刷される部品**。絞ると紙・読み上げ・AI検索に乗らない
 * 代わりに「並び」と「条件ラベル」で読み分けさせる。
 */
.hkt-docs {
	--hkb-pad: 18px;
	--hkb-gap: 14px;
	--hkb-fs:  16px;
	box-sizing: border-box;
	border: var(--hkt-bw, 3px) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkt-boxbg, #fff);
	padding: min(var(--hkb-pad), 6vw);
	margin-block: var(--hkt-flow, 28px);
	font-family: var(--hkt-ff-body);
	font-size: var(--hkb-fs);
	line-height: 1.85;
	color: var(--hkt-text, var(--hkt-ink, #111));
	max-width: var(--hkb-w, 100%);
	margin-inline: auto;
}
.hkt-docs * { box-sizing: border-box; }

.hkt-docs__lead {
	margin-block: 0 12px !important;
	font-size: 1.05em !important;
	font-weight: 800;
}
.hkt-docs__list {
	display: grid;
	gap: var(--hkb-gap);
	margin-block: 0 !important;
	padding-left: 0 !important;
	list-style: none !important;
}
.hkt-doc {
	display: flex;
	gap: 12px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.hkt-doc::before,
.hkt-doc::marker { content: none !important; display: none !important; }

/* 行頭の四角。色の唯一の置き場所 */
.hkt-doc > div::before {
	content: "";
	float: left;
	width: .85em;
	height: .85em;
	margin: .5em .7em 0 0;
	border: var(--hkt-bw-soft, 2px) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkb-accent, #ffe01b);
}

/* 条件は書類名の前に出す。読者は先に「自分に要るか」を判定する */
.hkt-doc__cond {
	margin-block: 0 2px !important;
	font-size: max(12px, .78em) !important;
	font-weight: 800;
	color: var(--hkb-text, #3e3e3e);
}
.hkt-doc__name { margin-block: 0 !important; font-weight: 700; font-size: 1em !important; }
.hkt-doc__meta {
	margin-block: 4px 0 !important;
	font-size: max(12px, .8em) !important;
	line-height: 1.7;
	color: var(--hkt-mute, #6b6b6b);
}
.hkt-doc__key {
	display: inline-block;
	margin-right: 6px;
	padding: 0 6px;
	border: 1px solid currentColor;
	border-radius: var(--hkt-radius, 0px);
	font-size: .9em;
}
.hkt-doc__val { margin-right: 12px; }
.hkt-doc__val--exp { font-family: var(--hkt-ff-num, inherit); font-variant-numeric: tabular-nums; }

.hkt-docs__note {
	margin-block: 14px 0 !important;
	font-size: max(12px, .8em) !important;
	line-height: 1.7;
	color: var(--hkt-mute, #6b6b6b);
}

/* ══════════════════════════════════════════════
   22. 還付金の目安
   ══════════════════════════════════════════════ */

/*
 * **金額の欄を持たない。持たなければ出せない。**
 * 税額は年式・排気量・残り月数で変わる。ブロックが数字を持つと、
 * それが事実として書かれてしまう。
 * 色は選ばせない。**状態（戻る／条件つき／戻らない）が色を決める。**
 */
.hkt-refund {
	--hkb-pad: 18px;
	--hkb-fs:  16px;
	box-sizing: border-box;
	border: var(--hkt-bw, 3px) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkt-boxbg, #fff);
	padding: min(var(--hkb-pad), 6vw);
	margin-block: var(--hkt-flow, 28px);
	font-family: var(--hkt-ff-body);
	font-size: var(--hkb-fs);
	line-height: 1.85;
	color: var(--hkt-text, var(--hkt-ink, #111));
	max-width: var(--hkb-w, 100%);
	margin-inline: auto;
}
.hkt-refund * { box-sizing: border-box; }
.hkt-refund__lead { margin-block: 0 12px !important; font-weight: 800; font-size: 1.05em !important; }
.hkt-refund__note {
	margin-block: 14px 0 !important;
	font-size: max(12px, .8em) !important;
	line-height: 1.7;
	color: var(--hkt-mute, #6b6b6b);
}

/* 段の区切りは罫。間隔ではなく線で分ける（数えやすくするため） */
.hkt-rfi + .hkt-rfi { border-top: var(--hkt-bw-soft, 2px) solid var(--hkt-ink, #111); }
.hkt-rfi {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	padding: 12px 0;
}
.hkt-rfi__name { grid-column: 1; margin-block: 0 !important; font-weight: 800; font-size: 1em !important; }
.hkt-rfi__when {
	grid-column: 1 / -1;
	margin-block: 2px 0 !important;
	font-size: max(12.5px, .84em) !important;
	line-height: 1.7;
	color: var(--hkt-mute, #6b6b6b);
}
.hkt-rfi__from { margin-left: 10px; }

/* 状態の札。語はブロックが持つ。書き換えられない。横に並べて比べられるようにするため */
.hkt-rfi__state {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	margin-block: 0 !important;
	padding: 2px 12px;
	border: var(--hkt-bw-soft, 2px) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	font-size: max(12px, .8em) !important;
	font-weight: 800;
	white-space: nowrap;
}
.hkt-rfi--yes  .hkt-rfi__state { background: var(--hkt-lime, #b8ff3c);   color: var(--hkt-ink, #111); }
.hkt-rfi--cond .hkt-rfi__state { background: var(--hkt-yellow, #ffe01b); color: var(--hkt-ink, #111); }
.hkt-rfi--no   .hkt-rfi__state { background: var(--hkt-paper, #fff);     color: var(--hkt-mute, #6b6b6b); }

/* ══════════════════════════════════════════════
   23. 料金の内訳
   ══════════════════════════════════════════════ */

/*
 * **無彩色。0円を大きくしない。**
 * 6つの色スロットは役割で埋まっていて、「金額の色」は構造的に存在しない。
 * 0円を赤や緑で大きく出すのは、値引きの見せ方であって内訳の見せ方ではない。
 * **代わりに「誰が払うか」を出す。** これが内訳の本体。
 */
.hkt-price {
	--hkb-pad: 18px;
	--hkb-gap: 14px;
	--hkb-fs:  16px;
	box-sizing: border-box;
	border: var(--hkt-bw, 3px) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkt-boxbg, #fff);
	padding: min(var(--hkb-pad), 6vw);
	margin-block: var(--hkt-flow, 28px);
	font-family: var(--hkt-ff-body);
	font-size: var(--hkb-fs);
	line-height: 1.85;
	color: var(--hkt-text, var(--hkt-ink, #111));
	max-width: var(--hkb-w, 100%);
	margin-inline: auto;
}
.hkt-price * { box-sizing: border-box; }
.hkt-price__lead { margin-block: 0 12px !important; font-weight: 800; font-size: 1.05em !important; }
.hkt-price__list { display: grid; gap: calc(var(--hkb-gap) * .5); }

.hkt-pri {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 0 12px;
	padding-bottom: calc(var(--hkb-gap) * .5);
	border-bottom: 1px solid var(--hkt-mute, #6b6b6b);
}
.hkt-pri__item { grid-column: 1; margin-block: 0 !important; font-size: 1em !important; }
.hkt-pri__who  {
	grid-column: 1;
	margin-block: 0 !important;
	font-size: max(12px, .78em) !important;
	color: var(--hkt-mute, #6b6b6b);
}
.hkt-pri__amt  { grid-column: 2; grid-row: 1 / span 2; margin-block: 0 !important; white-space: nowrap; }
.hkt-pri__val  {
	font-family: var(--hkt-ff-num, inherit);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	font-weight: 800;
	font-size: 1.1em;
}
.hkt-pri__unit { margin-left: 2px; font-size: .84em; }

.hkt-price__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-block: 14px 0 !important;
	padding-top: 12px;
	border-top: var(--hkt-bw, 3px) solid var(--hkt-ink, #111);
	font-weight: 800;
}
.hkt-price__totalLabel { font-size: max(13px, .88em); }
.hkt-price__totalVal {
	font-family: var(--hkt-ff-num, inherit);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	font-size: clamp(22px, 5vw, 28px);
}
.hkt-price__unit { margin-left: 2px; font-size: .7em; }
.hkt-price__note {
	margin-block: 12px 0 !important;
	font-size: max(12px, .8em) !important;
	line-height: 1.7;
	color: var(--hkt-mute, #6b6b6b);
}

/* ══════════════════════════════════════════════
   24. 全幅のCV帯
   ══════════════════════════════════════════════ */

/*
 * **地は黒で固定。** 消去法で1つに決まった。
 *   黄 … 競合の識別点そのもの（調査 §10-3 が禁止）
 *   赤 … 「このサイトのもの」を全幅で叫ぶことになる
 *   橙・緑 … 中のボタンと同じ色になり、ボタンが地に沈む
 *   白 … 帯にならない
 * 黒は「構造」の色で意味が一致し、黒地の上では橙と緑のボタンだけが色を持つ。
 *
 * **--hkt-ink をここで上書きしてはいけない。**
 * 上書きすると --hkb-on が白になり、橙の面に白文字（比 2.23）が出る。
 */
.hkt-cvband {
	--hkb-pad: 18px;
	--hkb-gap: 14px;
	box-sizing: border-box;
	background: var(--hkt-ink, #111);
	color: var(--hkt-paper, #fff);
	padding: min(var(--hkb-pad), 6vw) min(var(--hkb-pad), 5vw);
	margin-block: var(--hkt-flow-lg, 56px);
	font-family: var(--hkt-ff-body);
}
.hkt-cvband * { box-sizing: border-box; }

/*
 * **全幅にする指定は、ぜんぶ .is-bleed 側に置く。**
 *
 * ── なぜ --bleed だけでは効かせてはいけないか（2026-09-10 実機で確認）──
 * `is-bleed` を付けるのは view.js で、view.js は wp_enqueue_scripts で読まれる。
 * **編集画面には読まれない。** 一方 blocks.css は enqueue_block_assets なので
 * **編集画面にも読まれる。**
 * そのため編集画面では is-bleed が付かないまま max-width/margin の !important だけが残り、
 * エディター側の中央寄せ（.wp-block の margin:auto と max-width）に打ち勝ってしまう。
 * 実測：本文段落が 左776/幅728 のところ、CV帯が 左8/幅2264。**左に768pxはみ出していた。**
 *
 * 指定を is-bleed 側へ寄せると、編集画面は素の .wp-block の中央寄せに戻る
 * （実測：左776/幅728 で本文段落と完全一致）。
 *
 * ── 倒れる方向 ──
 * JS が動く前・落ちたときは、この規則がまるごと当たらない＝**本文幅のきれいな帯**で止まる。
 * `margin-inline: calc(50% - 50vw)` を既定にすると、サイドバーのあるページで
 * 「幅の足りない帯（右に白が残る）」という壊れた見え方で止まるので、そちらは採らない。
 *
 * ── なぜ calc(50% - 50vw) を使わないか ──
 * **50% は「本文列の50%」であって、画面の50%ではない。**
 * STORK19 の投稿ページは右にサイドバーがあり、本文列は画面の中央より左にある。
 * 実測（2026-09-10）：1280px で帯が -191..1089 に出て、**右に192pxの白が残った**。
 * `#container` が overflow-x: clip なので横スクロールは出ないが、
 * それは「はみ出していない」証拠ではなく、左の192pxが切り落とされているだけ。
 * CSS だけでは本文列の左端を知る手段が無いので、view.js が測って --hkt-bleed-l に入れる。
 */
.hkt-cvband--bleed.is-bleed {
	max-width: none !important;
	margin-left: var(--hkt-bleed-l, 0) !important;
	margin-right: var(--hkt-bleed-r, 0) !important;
	width: calc(100vw - var(--hkt-sbw, 0px)) !important;
}
.hkt-cvband__inner {
	max-width: var(--hkt-maxw, 1180px);
	margin-inline: auto;
	display: grid;
	gap: var(--hkb-gap);
}
.hkt-cvband__lead {
	max-width: var(--hkt-maxw, 1180px);
	margin: 0 auto 12px !important;
	text-align: center;
	font-weight: 800;
	font-size: clamp(17px, 4.2vw, 22px) !important;
	line-height: 1.5;
	color: var(--hkt-paper, #fff);
}
/*
 * 帯の中の文字は、黒地の上なので薄いグレーにしない。
 * **__headline を入れ忘れて 1.96 で沈んでいた**（2026-09-10 実測）。
 * 白抜きにする対象は「帯の中に出るテキストすべて」。個別に列挙すると、また漏れる。
 */
.hkt-cvband .hkt-ctaduo__headline,
.hkt-cvband .hkt-ctaduo__micro,
.hkt-cvband .hkt-ctaduo__note { color: var(--hkt-paper, #fff) !important; }
.hkt-cvband .hkt-ctaduo { margin-block: 0; }

/* ══════════════════════════════════════════════
   25. タグ一覧
   ══════════════════════════════════════════════ */

/*
 * 既定は無彩色（plain ＝ よそ・中立）。
 * 車種や状態は、このサイトの主張ではなく、読者が自分を見つけるための目印。
 * 赤（このサイトのもの）を車種に付けると、意味が合わない。
 *
 * 高さは WCAG 2.5.8（Target Size Minimum 24×24）を割らないようにしてある。
 * だから文字サイズの欄を作っていない。
 */
.hkt-tags {
	--hkb-gap: 14px;
	box-sizing: border-box;
	margin-block: var(--hkt-flow, 28px);
	font-family: var(--hkt-ff-body);
}
.hkt-tags__lead {
	margin-block: 0 8px !important;
	font-size: max(12.5px, .84em) !important;
	font-weight: 800;
	color: var(--hkt-text, var(--hkt-ink, #111));
}
.hkt-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--hkb-gap) * .5);
	margin-block: 0 !important;
	padding-left: 0 !important;
	list-style: none !important;
}
.hkt-tag {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.hkt-tag::before, .hkt-tag::marker { content: none !important; display: none !important; }

.hkt-tag__label,
.hkt-tag__a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 3px 12px;
	border: var(--hkt-bw-soft, 2px) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkb-accent, #fff);
	color: var(--hkb-on, #111) !important;
	font-size: max(12.5px, .82em);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none !important;
}
.hkt-tag__a::after { content: none !important; display: none !important; }
.hkt-tag__a:hover { text-decoration: underline !important; text-underline-offset: .18em; }
.hkt-tag__a:focus-visible { outline: 3px solid var(--hkt-magenta, #ff2e88); outline-offset: 2px; }
/* リンクの中のラベルは二重に枠を持たない */
.hkt-tag__a .hkt-tag__label {
	border: 0;
	padding: 0;
	min-height: 0;
	background: none;
	display: inline;
}

/* ══════════════════════════════════════════════
   26. 枠なしの囲み（3段階のいちばん弱いもの）
   ══════════════════════════════════════════════ */

/*
 * ボックス   … ラベルが枠の左上。**強い。**結論・注意
 * 補足説明枠 … 線が切れてタイトルが入る。**中。**本文の脇の注記
 * これ       … **枠が無い。地の色だけ。いちばん弱い。**本文と同じ速さで読める
 *
 * ラベルも罫も持たないので、地が唯一の色の置き場所になる。
 * だから「1つの囲みが色を2箇所で言う」ことにならない。
 * **ラベル欄を作らない判断とセットで初めて成立する**（作ればボックスと同じになる）。
 */
.hkt-pbox {
	--hkb-pad: 18px;
	box-sizing: border-box;
	/* 枠が無いので、余白だけが境界を作る＝ padding が形そのもの */
	padding: min(var(--hkb-pad), 6vw);
	border-radius: var(--hkt-radius, 0px);
	background: color-mix(in srgb, var(--hkb-accent, #ffe01b) var(--hkb-tintmix, var(--hkt-tintmix, 10%)), var(--hkt-paper, #fff));
	margin-block: var(--hkt-flow, 28px);
	font-family: var(--hkt-ff-body);
	line-height: 1.85;
	color: var(--hkt-text, var(--hkt-ink, #111));
}
/* color-mix が使えない環境では、うすい地の代わりに左罫で区切る */
@supports not (background: color-mix(in srgb, red 10%, white)) {
	.hkt-pbox {
		background: var(--hkt-tint, #f4f4f2);
		border-left: 5px solid var(--hkb-line, #111);
	}
}
/*
 * 色ごとの混合率。**同じ濃さに見えるように合わせてある。**
 * 基準はサイト自身の薄い赤 #fff2f2 ＝ 紙との比 1.092。
 * 実測（2026-09-10）に基づく：
 *   violet  5% → 1.096   magenta 12% → 1.09 前後
 *   yellow 40% → 1.093   lime    12% → 1.09 前後
 *   ink     4% → 1.09 前後
 * **黄だけ 40% が要るのは、黄の輝度が白に近いため。**
 * 一律の値にすると、赤と黒が濃すぎるか、黄が消えるかのどちらかになる。
 */
.hkt-c-violet  .hkt-pbox, .hkt-pbox.hkt-c-violet  { --hkb-tintmix: 5%; }
.hkt-c-magenta .hkt-pbox, .hkt-pbox.hkt-c-magenta { --hkb-tintmix: 12%; }
.hkt-c-yellow  .hkt-pbox, .hkt-pbox.hkt-c-yellow  { --hkb-tintmix: 40%; }
.hkt-c-lime    .hkt-pbox, .hkt-pbox.hkt-c-lime    { --hkb-tintmix: 12%; }
.hkt-c-ink     .hkt-pbox, .hkt-pbox.hkt-c-ink     { --hkb-tintmix: 4%; }

/*
 * **白は何%混ぜても白のまま**（紙との比 1.000 ＝ 囲みが存在しないのと同じ）。
 * 混ぜるのをやめて、地の色と左罫で区切る。
 * 「選んでも変わらない」を1つも作らないための分岐。
 */
.hkt-c-plain .hkt-pbox, .hkt-pbox.hkt-c-plain {
	background: var(--hkt-tint, #f4f4f2);
	border-left: 5px solid var(--hkb-line, #111);
}

.hkt-pbox > :first-child { margin-top: 0; }
.hkt-pbox > :last-child  { margin-bottom: 0; }

/* ══════════════════════════════════════════════
   27. 新ブロックの縦のリズムと幅
   ══════════════════════════════════════════════ */

.hkt-docs, .hkt-refund, .hkt-price, .hkt-tags, .hkt-pbox {
	margin-block: var(--hkt-flow, 28px) !important;
}
.hkt-cvband { margin-block: var(--hkt-flow-lg, 56px) !important; }

.hkt-docs--sized, .hkt-refund--sized, .hkt-price--sized {
	width: var(--hkb-w, 100%);
	max-width: 100%;
	margin-inline: auto;
}

/* ══════════════════════════════════════════════
   28. どちらか選ぶ
   ══════════════════════════════════════════════ */

/*
 * 2択の表が解いているのは「比較」ではなく **「判別」**。
 * 表は2つを等しく並べる装置で、読者が「自分はどちらか」を決める助けにならない。
 * だから**条件を先に、反転帯で**出す。選択肢の名前はそのあと。
 *
 * スマホは縦積み。横スクロールにしない（表の min-width 問題も同時に消える）。
 * **両方とも同じ色。** 片方に色を付けると、サイトがそちらを推していることになる。
 */
.hkt-pick {
	--hkb-pad: 18px;
	--hkb-fs:  16px;
	--hkb-bw:  var(--hkt-bw, 3px);
	--hkb-gap: 14px;
	box-sizing: border-box;
	margin-block: var(--hkt-flow, 28px);
	font-family: var(--hkt-ff-body);
	font-size: var(--hkb-fs);
	max-width: var(--hkb-w, 100%);
	margin-inline: auto;
}
.hkt-pick * { box-sizing: border-box; }

.hkt-pick__q {
	margin-block: 0 10px !important;
	text-align: center;
	font-weight: 800;
	font-size: max(13px, .88em) !important;
	color: var(--hkt-text, var(--hkt-ink, #111));
}

.hkt-pick__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hkb-gap);
	align-items: stretch;
}
@media (min-width: 600px) {
	.hkt-pick__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

.hkt-side {
	display: flex;
	flex-direction: column;
	border: var(--hkb-bw) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkt-boxbg, #fff);
	line-height: 1.85;
	color: var(--hkt-text, var(--hkt-ink, #111));
}

/* 条件は反転帯。**読者が最初に読む行がここ** */
.hkt-side__cond {
	margin-block: 0 !important;
	padding: 8px min(var(--hkb-pad), 6vw);
	background: var(--hkb-accent, #ffe01b);
	color: var(--hkb-on, #111);
	font-weight: 800;
	font-size: max(13px, .88em) !important;
	line-height: 1.5;
	border-bottom: var(--hkb-bw) solid var(--hkt-ink, #111);
}

/* 選択肢の名前は <p>。**見出しにしない**（記事の見出し階層に割り込ませない） */
.hkt-side__title {
	margin-block: 0 !important;
	padding: min(var(--hkb-pad), 6vw) min(var(--hkb-pad), 6vw) 0;
	font-weight: 800;
	font-size: 1.1em !important;
	line-height: 1.4;
}
.hkt-side__body { padding: 8px min(var(--hkb-pad), 6vw) min(var(--hkb-pad), 6vw); }
.hkt-side__body > :first-child { margin-top: 0; }
.hkt-side__body > :last-child  { margin-bottom: 0; }

/* ══════════════════════════════════════════════
   29. 引き取り事例
   ══════════════════════════════════════════════ */

/*
 * **無彩色。** 6つの色スロットは役割で埋まっていて、「金額の色」が構造的に存在しない。
 * 必須の数字は「かかった費用」と「引き取りまでの日数」。買取額は任意。
 * このサイトは金額を主張していないので、**金額が主役のカードにしない。**
 */
.hkt-cases {
	--hkb-pad: 18px;
	--hkb-fs:  16px;
	--hkb-bw:  var(--hkt-bw, 3px);
	--hkb-gap: 14px;
	--hkcs-pc: 2;
	--hkcs-sp: 1;
	box-sizing: border-box;
	margin-block: var(--hkt-flow, 28px);
	font-family: var(--hkt-ff-body);
	font-size: var(--hkb-fs);
	max-width: var(--hkb-w, 100%);
	margin-inline: auto;
}
.hkt-cases * { box-sizing: border-box; }

.hkt-cases__grid {
	display: grid;
	grid-template-columns: repeat(var(--hkcs-sp), minmax(0, 1fr));
	gap: var(--hkb-gap);
	align-items: stretch;
}
@media (min-width: 768px) {
	.hkt-cases__grid { grid-template-columns: repeat(var(--hkcs-pc), minmax(0, 1fr)); }
}

.hkt-case {
	display: flex;
	flex-direction: column;
	border: var(--hkb-bw) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkt-boxbg, #fff);
	overflow: hidden;
	line-height: 1.8;
	color: var(--hkt-text, var(--hkt-ink, #111));
}
/* 写真は任意。**無ければ窓ごと出さない**（事例は写真が主役ではない） */
.hkt-case__thumb {
	display: block;
	aspect-ratio: 4 / 3;
	border-bottom: var(--hkb-bw) solid var(--hkt-ink, #111);
	background: var(--hkt-tint, #f4f4f2);
}
.hkt-case__thumb img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	margin-block: 0 !important;
	border-radius: 0 !important;
}
.hkt-case__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: min(var(--hkb-pad), 6vw);
}
.hkt-case__car { margin-block: 0 !important; font-weight: 800; font-size: 1.02em !important; }

.hkt-case__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-block: 6px 0 !important;
}
.hkt-case__tag {
	padding: 1px 9px;
	border: var(--hkt-bw-soft, 2px) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkt-paper, #fff);
	font-size: max(11.5px, .76em);
	font-weight: 700;
	line-height: 1.5;
}

/* 数字。欧文が出るのは数字だけなので、書体処理はここに効かせる */
.hkt-case__nums {
	display: grid;
	gap: 6px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: var(--hkt-bw-soft, 2px) solid var(--hkt-ink, #111);
}
.hkt-case__num { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hkt-case__numLabel { font-size: max(12px, .78em); color: var(--hkt-mute, #6b6b6b); }
.hkt-case__numVal {
	font-family: var(--hkt-ff-num, inherit);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	font-weight: 800;
	font-size: clamp(19px, 4.4vw, 24px);
	line-height: 1.15;
	margin-left: auto;
}
.hkt-case__numUnit { font-size: max(12px, .8em); font-weight: 700; }

.hkt-case__meta {
	/* 説明の量が違っても下辺が揃う */
	margin-top: auto !important;
	margin-bottom: 0 !important;
	padding-top: 10px;
	font-size: max(12px, .78em) !important;
	color: var(--hkt-mute, #6b6b6b);
}

.hkt-cases__note {
	margin-block: 12px 0 !important;
	font-size: max(12px, .8em) !important;
	line-height: 1.7;
	color: var(--hkt-mute, #6b6b6b);
}

/* ══════════════════════════════════════════════
   30. お客様の声
   ══════════════════════════════════════════════ */

/*
 * **星は無い。集計値も出さない。**
 * 埋めるのは星ではなく**裏づけ** ＝ 引き取り事例との結びつき。
 * 色は plain（よそ・中立）。**他人の言葉に自社の色を塗らない。**
 * 吹き出しの形にしないのは、吹き出しが「書き手が作った会話」の形だから。
 */
.hkt-testi {
	--hkb-pad: 18px;
	--hkb-fs:  16px;
	--hkb-bw:  var(--hkt-bw, 3px);
	box-sizing: border-box;
	position: relative;
	border: var(--hkb-bw) solid var(--hkt-ink, #111);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkt-boxbg, #fff);
	padding: min(var(--hkb-pad), 6vw);
	margin-block: var(--hkt-flow, 28px);
	font-family: var(--hkt-ff-body);
	font-size: var(--hkb-fs);
	line-height: 1.85;
	color: var(--hkt-text, var(--hkt-ink, #111));
}
.hkt-testi * { box-sizing: border-box; }

/* 引用の印。左の色罫だけ。囲みの中に囲みを作らない */
.hkt-testi__body {
	padding-left: 14px;
	border-left: 5px solid var(--hkb-line, #111);
}
.hkt-testi__body > :first-child { margin-top: 0; }
.hkt-testi__body > :last-child  { margin-bottom: 0; }

.hkt-testi__who {
	margin-block: 12px 0 !important;
	font-size: max(12.5px, .82em) !important;
	font-weight: 700;
	color: var(--hkt-mute, #6b6b6b);
}
.hkt-testi__ref { margin-block: 6px 0 !important; font-size: max(12.5px, .82em) !important; }
.hkt-testi__ref a {
	color: var(--hkb-text, var(--hkt-ink, #111)) !important;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 2px;
}
.hkt-testi__ref a::after { content: none !important; display: none !important; }

/* ══════════════════════════════════════════════
   31. この3つの縦のリズムと幅
   ══════════════════════════════════════════════ */

.hkt-pick, .hkt-cases, .hkt-testi { margin-block: var(--hkt-flow, 28px) !important; }

.hkt-pick--sized, .hkt-cases--sized {
	width: var(--hkb-w, 100%);
	max-width: 100%;
	margin-inline: auto;
}