@charset "UTF-8";
/*!
 * ヒキトリブロック 0.4.0 — トークン ＋ コアブロック用のブロックスタイル
 *
 * ここに残すのは「独自ブロックが無いもの」だけ。
 * ボックス・ボタン・アイブロウ・マイクロコピーは blocks.js の独自ブロックに移した
 * （2026-09-08。同じ装飾が2通りで作れると、記事エージェントがどちらを吐くか決められないため）。
 *
 * 正データ: references/design-history/hikitori-design-vocabulary.md
 * 仕様    : references/design-history/block-mapping.md
 *
 * 命名規則: hkt- 接頭辞。STORK19 の予約接頭辞（stk- / stk_ / span-stk- / oc- / pre--）は使わない。
 * 表記    : gray に統一。glay は作らない。
 */

/* ══════════════════════════════════════════════
   1. トークン
   ══════════════════════════════════════════════ */

:root,
.editor-styles-wrapper {
	/* 色 — hikitori.co.jp の実測値。ここに無い色を足すとテイストが崩れる */
	--hkt-ink: #000000;
	--hkt-paper: #ffffff;
	--hkt-tint: #f7f7f7;
	--hkt-violet: #b50505;
	--hkt-violet-lt: #fff2f2;
	--hkt-magenta: #ef9b2f;
	--hkt-yellow: #fcee21;
	--hkt-lime: #39cd75;
	--hkt-mute: #6b6b6b;

	/* 形 */
	--hkt-skew: none;
	--hkt-unskew: none;
	--hkt-bw-soft: 2px;
	--hkt-tint-soft: #f7f7f7;

	/* 版面。hikitori.co.jp の --maxw の実測値 */
	--hkt-maxw: 980px;

	/*
	 * 縦のリズム（2026-09-09 実測で決定）
	 *
	 *   STORK19（be-pilot.jp）… 段落どうし 26px ／ 見出しの前 41px
	 *   hikitori.co.jp        … 部品どうし 18〜26px ／ セクションの padding 88px
	 *
	 * 両者とも「本文レベルの間隔は 26px 前後」で一致していた。28px を標準にする。
	 * まとまりの切れ目（セクション見出しの前）は 56px。
	 * hikitori.co.jp の 88px は section の padding によるもので、
	 * 記事の中に持ち込むと空きすぎるため採らない。
	 */
	--hkt-flow:       28px;
	--hkt-flow-lg:    56px;

	/* 文字 */
	--hkt-ff-display: "Helvetica Neue", Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	--hkt-ff-body: "Helvetica Neue", Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

	/* 切り替わるトークン — 既定はフル版 */
	/*
	 * 角の丸み。**以前の版 では 0 が identity** なので既定は 0。
	 * トークンにしてあるのは、スキンで差し替えるため
	 *（ヒキトリレンジャーは実測で 3px を13箇所使っている）。
	 * 0 のあいだは書いても書かなくても同じ結果になるので、既存の見た目は変わらない。
	 */
	/*
	 * 本文の文字色。**以前の版は枠と文字を --hkt-ink で兼ねている**ので、既定は ink と同値。
	 * 分けてあるのは、兼ねていないサイトがあるため
	 *（ヒキトリレンジャーは 枠 #000 ／ 本文 #3e3e3e で実測が分かれている）。
	 * 兼ねたままだと、出典枠や統計の説明文だけ本文より黒くなる。
	 */
	--hkt-text: #3e3e3e;
	--hkt-shade: #000000;
	--hkt-ff-num: "Helvetica Neue", Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	/*
	 * 枠なしの囲みで、役割色を紙にどれだけ混ぜるか。
	 *
	 * **一律の値をやめて、色ごとに変えた**（2026-09-10 実測を受けて）。
	 * 一律 10% だと、赤と黒は濃すぎ、黄はほとんど見えなかった。
	 * 黄は自身の輝度が白に近く、**90% まで上げても紙との比が 1.191 で頭打ち**になる。
	 *
	 * 基準は**サイト自身の薄い赤 #fff2f2（紙との比 1.092）**。
	 * 6色ぜんぶが「同じ濃さに見える」ところへ合わせてある。
	 * 値は .hkt-c-* が --hkb-tintmix として入れる（blocks.css の下部）。
	 */
	--hkt-tintmix:    10%;
	--hkt-radius: 3px;
	--hkt-bw: 4px;
	--hkt-shadow: none;
	--hkt-shadow-sm: none;
	--hkt-shadow-lg: none;
	--hkt-boxbg:      var(--hkt-paper);
}

/* 記事版（投稿本文）。2026-09-08 決定 B案：枠 2px / 影なし / 地 #f7f7f5 */
body.hkt-article {
	--hkt-bw:      var(--hkt-bw-soft);
	--hkt-shadow:  none;
	--hkt-boxbg:   var(--hkt-tint-soft);
}

/* ══════════════════════════════════════════════
   2. 見出し — 削除（2026-09-08）

   ここには「テーマが出したコアの h2/h3 を、本文の中だけで装飾する」
   規則が入っていた。削除した理由は2つ。

   1. **ユーザー指示に反していた。**「既存のSTORK19パーツのスタイルを
      変更するのではなく」という指示に対し、コアの h2 はまさに
      テーマが出したパーツだった。
   2. **テーマ依存だった。** 本文コンテナ（.entry-content）と
      STORK19 の命名（:not([class*="stk"])）を知らないと書けない規則で、
      「テーマ非依存」を名乗りながらテーマ名を埋め込んでいた。

   見出しのデザインは hikitori/section-heading ブロックに一本化する。
   記事エージェントにも、コア見出しではなくこのブロックを吐かせる。
   ══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   5. リスト（マーカーは丸ではなく正方形）
   ══════════════════════════════════════════════ */

[class*="is-style-hkt-list-"] {
	list-style: none;
	padding-left: 0;
	margin-block: 1.6em;
}

[class*="is-style-hkt-list-"] > li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
	line-height: 1.85;
}

[class*="is-style-hkt-list-"] > li::before {
	position: absolute;
	left: 0;
	top: .42em;
	width: 18px;
	height: 18px;
	display: grid;
	place-items: center;
	border: 2px solid var(--hkt-ink);
	font-family: var(--hkt-ff-display);
	font-size: 11px;
	line-height: 1;
}

.is-style-hkt-list-check > li::before { content: "\2713"; background: var(--hkt-lime);    color: var(--hkt-ink); }
.is-style-hkt-list-arrow > li::before { content: "\203A"; background: var(--hkt-paper);   color: var(--hkt-ink); font-size: 14px; }
.is-style-hkt-list-warn  > li::before { content: "!";     background: var(--hkt-yellow);  color: var(--hkt-ink); }
.is-style-hkt-list-good  > li::before { content: "\25CB"; background: var(--hkt-lime);    color: var(--hkt-ink); }
.is-style-hkt-list-bad   > li::before { content: "\00D7"; background: var(--hkt-magenta); color: var(--hkt-ink); }

/* ══════════════════════════════════════════════
   6. 引用・表
   ══════════════════════════════════════════════ */

.is-style-hkt-quote {
	position: relative;
	border: var(--hkt-bw) solid var(--hkt-ink);
	border-radius: var(--hkt-radius, 0px);
	background: var(--hkt-boxbg);
	padding: 26px 22px 20px;
	margin-block: 1.8em;
}

.is-style-hkt-quote::before {
	content: "\201C";
	position: absolute;
	top: -6px;
	left: 14px;
	font-family: var(--hkt-ff-display);
	font-size: 52px;
	line-height: 1;
	color: var(--hkt-violet);
}

.is-style-hkt-quote cite {
	display: block;
	margin-top: 12px;
	font-size: 12.5px;
	font-style: normal;
	color: var(--hkt-mute);
}

.is-style-hkt-table {
	border: var(--hkt-bw) solid var(--hkt-ink);
	background: var(--hkt-paper);
	overflow-x: auto;          /* スマホでの横スクロール（調査：実務上ほぼ必須） */
	margin-block: 1.8em;
}

.is-style-hkt-table table {
	border-collapse: collapse;
	width: 100%;
	min-width: 480px;
	font-size: 14.5px;
}

.is-style-hkt-table th,
.is-style-hkt-table td {
	padding: 11px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 2px solid var(--hkt-ink);
	font-variant-numeric: tabular-nums;
}

.is-style-hkt-table thead th {
	background: var(--hkt-ink);
	color: #fff;
	font-family: var(--hkt-ff-display);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.is-style-hkt-table tbody tr:last-child td { border-bottom: 0; }

/* ══════════════════════════════════════════════
   7. マーカー（型5）— ブランド6色
      2026-09-08 決定 Q2「ブランド色すべて作る」
      文字色はコントラスト実測で色ごとに決めている。
      magenta は白文字だと 3.50 で WCAG AA 不合格のため黒文字にした（5.39）。
   ══════════════════════════════════════════════ */

[class*="hkt-mk-"] {
	padding: 0 .14em;
	font-weight: 700;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/*
 * 濃い5色。素の色をそのまま面に使う。
 * 文字色は「白と黒を両方あてて、コントラスト比が高いほう」を実測で選んだ結果。
 * 好みではない。**オレンジは白文字だと 2.24 で落ちるので黒**、赤は白文字で 7.03。
 * 括弧の中はその文字とのコントラスト比。すべて WCAG AA（4.5）以上。
 */
.hkt-mk-yellow  { background: var(--hkt-yellow);  color: var(--hkt-ink); }  /* 黒 17.39 */
.hkt-mk-lime    { background: var(--hkt-lime);    color: var(--hkt-ink); }  /* 黒 10.16 */
.hkt-mk-magenta { background: var(--hkt-magenta); color: var(--hkt-ink); }  /* 黒  9.40 */
.hkt-mk-violet  { background: var(--hkt-violet);  color: #fff; }            /* 白  7.03 */
.hkt-mk-ink     { background: var(--hkt-ink);     color: #fff; }            /* 白 21.00 */

/*
 * 薄い5色。**混合率を色ごとに変えている。揃えると揃わない。**
 *
 * ── なぜコントラスト比で決めないか ──
 * 薄い面が紙から見分くかは、明度比では測れない。
 * 黄は素の色でも紙との明度比が 1.19 しかないのに、実際にははっきり見える。
 * 明度が同じでも色みが違えば見えるからで、**明度比はその差を数えていない。**
 * そこで紙との差は CIEDE2000 の色差で測り、**5色すべて ΔE ≒ 12 に揃えた。**
 * 12 の根拠：5 前後は「並べれば分かる」、10 超で「単独で色が付いて見える」。
 * マーカーは本文中に単独で出るので後者が要る。
 *
 * 同じ ΔE 12 に揃えるのに必要な混合率は色ごとに違う（黄 16% / オレンジ 24%）。
 * **一律 20% にすると、黄が濃すぎてオレンジが薄すぎる。**
 *
 * 薄い5色どうしの色差は最小 9.6（オレンジ薄 と イエロー薄）。隣り合っても紛れない。
 * 文字は全部黒。括弧の中は「黒文字とのコントラスト比 / 紙との色差」。
 */
.hkt-mk-yellow-lt {
	background: color-mix(in srgb, var(--hkt-yellow) 16%, #ffffff);
	color: var(--hkt-ink);                                          /* 黒 20.22 / ΔE 12.5 */
}
.hkt-mk-lime-lt {
	background: color-mix(in srgb, var(--hkt-lime) 16%, #ffffff);
	color: var(--hkt-ink);                                          /* 黒 18.63 / ΔE 12.1 */
}
.hkt-mk-magenta-lt {
	background: color-mix(in srgb, var(--hkt-magenta) 24%, #ffffff);
	color: var(--hkt-ink);                                          /* 黒 17.42 / ΔE 12.4 */
}
.hkt-mk-violet-lt {
	background: color-mix(in srgb, var(--hkt-violet) 15%, #ffffff);
	color: var(--hkt-ink);                                          /* 黒 15.83 / ΔE 12.6 */
}
.hkt-mk-ink-lt {
	background: color-mix(in srgb, var(--hkt-ink) 22%, #ffffff);
	color: var(--hkt-ink);                                          /* 黒 12.41 / ΔE 12.4 */
}

/*
 * color-mix が無いブラウザ用。**上と同じ見た目になる値を直に書いている**（計算済み）。
 * ここが上とずれると、環境によって色が変わる。値を変えるときは必ず両方直す。
 */
@supports not (background: color-mix(in srgb, red 20%, white)) {
	.hkt-mk-yellow-lt  { background: #fffcdb; }
	.hkt-mk-lime-lt    { background: #dff7e9; }
	.hkt-mk-magenta-lt { background: #fbe7cd; }
	.hkt-mk-violet-lt  { background: #f4d9d9; }
	.hkt-mk-ink-lt     { background: #c7c7c7; }
}

/* ラベル（型3）— インラインの平行四辺形 */
[class*="hkt-chip-"] {
	border-radius: var(--hkt-radius, 0px);
	display: inline-block;
	transform: var(--hkt-skew);
	border: 2px solid var(--hkt-ink);
	padding: 2px 11px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
}

[class*="hkt-chip-"] > span { display: inline-block; transform: var(--hkt-unskew); }

.hkt-chip-violet  { background: var(--hkt-violet);  color: #fff; }
.hkt-chip-magenta { background: var(--hkt-magenta); color: var(--hkt-ink); }
.hkt-chip-yellow  { background: var(--hkt-yellow);  color: var(--hkt-ink); }
.hkt-chip-lime    { background: var(--hkt-lime);    color: var(--hkt-ink); }
.hkt-chip-ink     { background: var(--hkt-ink);     color: #fff; }
.hkt-chip-plain   { background: var(--hkt-paper);   color: var(--hkt-ink); }

/* ══════════════════════════════════════════════
   8. アクセシビリティ
   ══════════════════════════════════════════════ */

/* このファイルには動きのある装飾は残っていない（ボタンは blocks.css の .hkt-cta__btn） */

/* ══════════════════════════════════════════════
   9. マーカー（斜め端）— 左右の端を 18度に傾けた版

   ラベル（型3）と同じ -18度。このデザイン唯一の斜め角。

   ── 擬似要素の skew を使わない理由 ──
   ラベルやバッジは position:absolute の ::before を傾けているが、
   **マーカーは本文の途中で折り返す。**
   絶対配置の擬似要素は、折り返すと「行をまたいだ外接矩形」を覆ってしまい、
   まったく別の形になる。

   そこで背景を3層に分ける。
     左端  … 斜めの境界を持つグラデーション（左側が透明）
     右端  … 同じ境界で左右が逆
     中央  … 単色。両端の幅だけ内側に縮める
   box-decoration-break: clone なので、**折り返した各行がそれぞれ端を持つ。**

   境界の角度 108deg の出どころ：
     「/」の向き（垂直から18度）に対して、グラデーションの向きは直角。
     18 + 90 = 108。
   ══════════════════════════════════════════════ */

[class*="hkt-mks-"] {
	/* 傾いた分だけ内側に余白を取る。文字が斜面に乗らないように */
	padding: 0 .45em;
	margin-inline: .06em;
	font-weight: 700;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	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(--hkm-c, #ffe01b) 50%),
		linear-gradient(108deg, var(--hkm-c, #ffe01b) 50%, transparent 50%),
		linear-gradient(var(--hkm-c, #ffe01b), var(--hkm-c, #ffe01b));
}

/*
 * 色は真っ直ぐな版（.hkt-mk-*）と同じ値を使う。**形だけが違う。**
 * 両方を並べたときに「同じ黄なのに濃さが違う」が起きないように、必ず対にして直すこと。
 *
 * 薄い側の斜めについて：端の斜線は「紙 ↔ --hkm-c」の境目なので、
 * **斜めが見えるかどうかは、面が紙から見分くかと同じ条件**になる。
 * 薄い5色は紙との色差 ΔE ≒ 12 に揃えてあるので、斜めの端もそのぶん見える。
 */
.hkt-mks-yellow    { --hkm-c: var(--hkt-yellow);    color: var(--hkt-ink); }  /* 黒 17.39 */
.hkt-mks-lime      { --hkm-c: var(--hkt-lime);      color: var(--hkt-ink); }  /* 黒 10.16 */
.hkt-mks-magenta   { --hkm-c: var(--hkt-magenta);   color: var(--hkt-ink); }  /* 黒  9.40 */
.hkt-mks-violet    { --hkm-c: var(--hkt-violet);    color: #fff; }            /* 白  7.03 */
.hkt-mks-ink       { --hkm-c: var(--hkt-ink);       color: #fff; }            /* 白 21.00 */

.hkt-mks-yellow-lt  { --hkm-c: color-mix(in srgb, var(--hkt-yellow) 16%, #ffffff);  color: var(--hkt-ink); }
.hkt-mks-lime-lt    { --hkm-c: color-mix(in srgb, var(--hkt-lime) 16%, #ffffff);    color: var(--hkt-ink); }
.hkt-mks-magenta-lt { --hkm-c: color-mix(in srgb, var(--hkt-magenta) 24%, #ffffff); color: var(--hkt-ink); }
.hkt-mks-violet-lt  { --hkm-c: color-mix(in srgb, var(--hkt-violet) 15%, #ffffff);  color: var(--hkt-ink); }
.hkt-mks-ink-lt     { --hkm-c: color-mix(in srgb, var(--hkt-ink) 22%, #ffffff);     color: var(--hkt-ink); }

/* color-mix が無いブラウザ用。真っ直ぐな版のフォールバックと同じ値にすること */
@supports not (background: color-mix(in srgb, red 20%, white)) {
	.hkt-mks-yellow-lt  { --hkm-c: #fffcdb; }
	.hkt-mks-lime-lt    { --hkm-c: #dff7e9; }
	.hkt-mks-magenta-lt { --hkm-c: #fbe7cd; }
	.hkt-mks-violet-lt  { --hkm-c: #f4d9d9; }
	.hkt-mks-ink-lt     { --hkm-c: #c7c7c7; }
}

/* ══════════════════════════════════════════════
   ヒキトリレンジャーの型ごとの上書き
   （もとは別ファイルのスキンだったものを畳んだ。切り替えを無くしたので分ける理由が無い）
   ══════════════════════════════════════════════ */


/* ══════════════════════════════════════════════
   2. 6つの色スロット

   スロット名（hkt-c-violet など）は保存済みクラスなので変えられない。
   **入れる色と役割だけ差し替える。**

   面に載る文字（--hkb-on）はプラグイン側の指定がそのまま合格するので触らない：
     violet  #b50505 に白  → 7.03（AA）
     magenta #ef9b2f に黒  → 9.40
     lime    #39cd75 に黒  → 10.16
     yellow  #fcee21 に黒  → 17.39
   **以前の版が magenta 3.50 の事故から作った「面ごとに文字色を決める」仕組みが、
   そのままヒキトリを救っている。**
   ══════════════════════════════════════════════ */

/*
 * 白地に載る「文字」。橙 2.23 / 緑 2.07 / 黄 1.21 は本文色に落とす。
 * **罫（--hkb-line）は色のまま残す** ＝ 面積で分ける規則は維持
 *（3px 以上の罫は比が低くても色みで見え、細い字画では効かない。block-mapping §11 の実測）。
 */
.hkt-c-magenta,
.hkt-c-lime,
.hkt-c-yellow,
.hkt-c-ink,
.hkt-c-plain { --hkb-text: var(--hkt-text); }

/* 赤だけは 7.03 で合格するので、文字にも出せる */
.hkt-c-violet { --hkb-text: var(--hkt-violet); }

/*
 * CTA の「側面」。
 * 実測2組（#39cd75→#20b45c / #ef9b2f→#d68216）は**色相が完全に一致し、明度が −9.8pt**。
 * 規則が1つに決まるので、実測の無い赤と黄は同じ規則で導出した。
 */
.hkt-c-violet  { --hkb-shade: #840404; }   /* 導出 */
.hkt-c-magenta { --hkb-shade: #d68216; }   /* 実測 */
.hkt-c-yellow  { --hkb-shade: #e8d903; }   /* 導出 */
.hkt-c-lime    { --hkb-shade: #20b45c; }   /* 実測 */
.hkt-c-ink     { --hkb-shade: #000000; }   /* 黒に暗い版は無い。押し込みは高さで伝わる */
.hkt-c-plain   { --hkb-shade: #000000; }   /* 白いキーに黒い側面＝キーボードのキーそのもの */

/* ══════════════════════════════════════════════
   3. 影は「押せる」の印にしか使わない

   ヒキトリの実測は `0 4px 0` ＋ 押し込み色（#20b45c / #d68216）。
   これは光源を仮定した「浮く板」ではなく、**側面のあるキー**。
   だから CTA 以外から影を全部落とす。
   ══════════════════════════════════════════════ */

.hkt-box,
.hkt-step,
.hkt-faq,
.hkt-card,
.hkt-voice__body,
.hkt-bcard,
.hkt-bcard--slab,
.hkt-acc,
.hkt-sechead--frame { box-shadow: none; }

/* CTA だけが影を持つ */
.hkt-cta { --hkb-sh: 4px; }

.hkt-cta__btn {
	box-shadow: 0 var(--hkb-sh) 0 var(--hkb-shade, #000);
	transition: transform .1s ease, box-shadow .1s ease;
}
/* 板ではなくキーなので、浮く量はごく小さい */
.hkt-cta__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 calc(var(--hkb-sh) + 1px) 0 var(--hkb-shade, #000);
}
/* 押し込むと底に着く。**総高さが変わらないのでレイアウトが動かない** */
.hkt-cta__btn:active {
	transform: translateY(var(--hkb-sh));
	box-shadow: 0 0 0 var(--hkb-shade, #000);
}
.hkt-cta__btn:focus-visible {
	box-shadow: 0 0 0 3px #fff, 0 var(--hkb-sh) 0 var(--hkb-shade, #000);
}

/* スライダーの矢印も「押せるもの」。同じ規則に揃える */
.hkt-slider__prev,
.hkt-slider__next,
.hkt-slider__pause { box-shadow: 0 3px 0 var(--hkt-ink, #000); }
.hkt-slider__prev:hover, .hkt-slider__next:hover, .hkt-slider__pause:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 0 var(--hkt-ink, #000);
}
.hkt-slider__prev:active, .hkt-slider__next:active, .hkt-slider__pause:active {
	transform: translateY(3px);
	box-shadow: 0 0 0 var(--hkt-ink, #000);
}
.hkt-cite-btn:hover  { transform: none; box-shadow: 0 5px 0 var(--hkt-ink, #000); }
.hkt-cite-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--hkt-ink, #000); }
.hkt-cite-btn        { box-shadow: 0 4px 0 var(--hkt-ink, #000); }

/* ══════════════════════════════════════════════
   4. 斜めをベタ面に置き換える

   --hkt-skew: none で transform は消えるが、
   linear-gradient(108deg …) でハードコードした3箇所は残る。
   ══════════════════════════════════════════════ */

.hkt-sechead--chip .hkt-sechead__eyebrow,
.hkt-sechead--slab .hkt-sechead__title {
	background-image: none;
	background-color: var(--hkb-face, #000);
}
/* blocks.css 末尾の打ち消し層（!important 版）に勝つ必要がある */
.hkt-sechead--slab .hkt-sechead__title {
	background-image: none !important;
	background-color: var(--hkb-face, #000) !important;
}
/* 空サムネの柄。柄の目的は「高さのガタつき防止」なので、ベタで足りる */
.hkt-bcard__thumb--empty { background-image: none; }
/* 「斜めチップ・ラベルなし」の印。skew が消えるので縦棒になる */
.hkt-sechead--chip.hkt-sechead--nolabel .hkt-sechead__title::before {
	width: .28em !important;
}

/* ══════════════════════════════════════════════
   5. 書体で作れない対比を、和文の設定で作る
   ══════════════════════════════════════════════ */

/* uppercase と .14em は欧文の大文字用。**和文に当てると字間が壊れる** */
.hkt-sechead__eyebrow,
.hkt-hero__eyebrow,
.hkt-card__en,
.hkt-source__label,
.hkt-bcard__meta,
.hkt-bcard--ext .hkt-bcard__badge,
.is-style-hkt-table thead th {
	text-transform: none;
	letter-spacing: .04em;
}
/* 既定型のラベルは「弱い」ままにする。反転はチップ型・FAQ・thead の3箇所だけ */
.hkt-sechead__eyebrow {
	font-size: 12.5px !important;
	font-weight: 800;
	color: var(--hkb-text, #3e3e3e);
	padding-bottom: 5px;
}

/*
 * **欧文が出るのは数字だけ。だから表示処理は数字にだけ効かせる。**
 * 以前の版の裏返しになっている（あちらは英字ラベルが表示書体の置き場所だった）。
 */
.hkt-stat__num,
.hkt-stat__unit,
.hkt-step__num,
.hkt-bcard__meta {
	font-family: var(--hkt-ff-num);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
.hkt-stat__num { font-weight: 800; }

/* ══════════════════════════════════════════════
   6. 枠は黒、文字は #3e3e3e
   ══════════════════════════════════════════════ */

.hkt-box,
.hkt-step,
.hkt-faq,
.hkt-card,
.hkt-bcard,
.hkt-voice__body,
.hkt-note,
.hkt-source,
.hkt-tab,
.hkt-acc__a,
.hkt-stat__def { color: var(--hkt-text); }

.hkt-note__head { color: var(--hkt-text); }

/* ══════════════════════════════════════════════
   7. 囲みの本文サイズ

   実測の本文が 16.48px。15px だと差が 1.48px になり「補足扱い」に見える。
   **YMYL の説明文が本文より小さいのは筋が通らない。**
   ══════════════════════════════════════════════ */

.hkt-box, .hkt-cta, .hkt-steps, .hkt-faq,
.hkt-card, .hkt-voice, .hkt-tabs, .hkt-acc { --hkb-fs: 16px; }

/* ══════════════════════════════════════════════
   8. 角丸の例外

   補足説明枠は border-top: 0 で上辺を捨て、見出しの行が上辺を描いている。
   角丸を入れると左右の罫の上端が丸まって「線が細って見える」。
   **この型だけ 0 に戻す。**
   ══════════════════════════════════════════════ */

.hkt-note { --hkt-radius: 0px; }

/* ══════════════════════════════════════════════
   9. 「出典」ラベルと、英語名の非表示

   ラベルは和文。カードの英語名（.hkt-card__en）は
   **サイトに英語の見出しが1つも無い**ので出さない。
   ══════════════════════════════════════════════ */

.hkt-card__en { display: none; }

/*
 * 赤を「重要」に使わせない。
 * リストの ✕ は magenta スロット＝橙になる（トークン差し替えで自動）。
 * ここはその確認用のコメントで、宣言は要らない。
 */