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

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

:root,
.editor-styles-wrapper {
	/* 色 — rekimee.co.jp の実測値。ここに無い色を足すとテイストが崩れる */
	--rkd-ink:        #111111;
	--rkd-paper:      #ffffff;
	--rkd-tint:       #f4f4f2;
	--rkd-violet:     #5b3df5;
	--rkd-violet-lt:  #9b8cff;
	--rkd-magenta:    #ff2e88;
	--rkd-yellow:     #ffe01b;
	--rkd-lime:       #b8ff3c;
	--rkd-mute:       #6b6b6b;

	/* 形 */
	--rkd-skew:       skewX(-18deg);
	--rkd-unskew:     skewX(18deg);
	--rkd-bw-soft:    2px;
	--rkd-tint-soft:  #f7f7f5;

	/* 版面。rekimee.co.jp の --maxw の実測値 */
	--rkd-maxw:       1180px;

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

	/* 文字 */
	--rkd-ff-display: "Archivo Black", "Zen Kaku Gothic New", system-ui, sans-serif;
	--rkd-ff-body:    "Zen Kaku Gothic New", system-ui, -apple-system,
	                  "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;

	/* 切り替わるトークン — 既定はフル版 */
	--rkd-bw:         3px;
	--rkd-shadow:     6px 6px 0 var(--rkd-ink);
	--rkd-shadow-sm:  4px 4px 0 var(--rkd-ink);
	--rkd-shadow-lg:  10px 10px 0 var(--rkd-ink);
	--rkd-boxbg:      var(--rkd-paper);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.rkd-mk-yellow     { background: var(--rkd-yellow);     color: var(--rkd-ink); }  /* 6.8 以上 */
.rkd-mk-lime       { background: var(--rkd-lime);       color: var(--rkd-ink); }  /* 十分 */
.rkd-mk-violet-lt  { background: var(--rkd-violet-lt);  color: var(--rkd-ink); }  /* 6.83 */
.rkd-mk-magenta    { background: var(--rkd-magenta);    color: var(--rkd-ink); }  /* 5.39 */
.rkd-mk-violet     { background: var(--rkd-violet);     color: #fff; }            /* 6.12 */
.rkd-mk-ink        { background: var(--rkd-ink);        color: #fff; }

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

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

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

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

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

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

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

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

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

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

[class*="rkd-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(--rkm-c, #ffe01b) 50%),
		linear-gradient(108deg, var(--rkm-c, #ffe01b) 50%, transparent 50%),
		linear-gradient(var(--rkm-c, #ffe01b), var(--rkm-c, #ffe01b));
}

/* 文字色は真っ直ぐな版と同じ判断。コントラスト実測に基づく */
.rkd-mks-yellow    { --rkm-c: var(--rkd-yellow);    color: var(--rkd-ink); }
.rkd-mks-lime      { --rkm-c: var(--rkd-lime);      color: var(--rkd-ink); }
.rkd-mks-violet-lt { --rkm-c: var(--rkd-violet-lt); color: var(--rkd-ink); }
.rkd-mks-magenta   { --rkm-c: var(--rkd-magenta);   color: var(--rkd-ink); }
.rkd-mks-violet    { --rkm-c: var(--rkd-violet);    color: #fff; }
.rkd-mks-ink       { --rkm-c: var(--rkd-ink);       color: #fff; }