/**
 * core/paragraph のブロックスタイル（標準のパネルでは作れない形だけを持つ）
 *
 * - 「英字の飾り」 is-style-section-en … ごく薄い大きな英字を、すぐ下の見出しの後ろに敷く
 *     文字揃え・文字の大きさはパネルで変えられる（大きさのプリセットを選ぶと、ここの既定より優先される）
 * - 「結論」 is-style-statement … 上に下向きの三角。太字にした所をグラデーションの丸い札にする
 *     文字の大きさ・太さ・行間・揃えはパネル
 * （「札（左上・斜め）」「札（右上・斜め）」は第8段階で廃止：事例のラベルをカードの外の控えめな見出しにしたため。今はパネルの線と文字だけ）
 * - 「番号（丸）」 is-style-number-circle … 文字を丸の中央に置く（丸の色＝背景のグラデーション、角丸＝丸はパネル）
 * - 「太字にマーカー」 is-style-marker … 太字にした所の下半分に、LP のアクセントの淡いマーカーを引く（2026-10-06・静的サイト化LP）。
 *     パネルの「ハイライト」は文字の後ろ全体を塗るので、下半分だけの塗りは CSS
 */

/* ---------- 英字の飾り ---------- */
.wp-block-paragraph.is-style-section-en,
p.is-style-section-en {
	margin-block: 0 -0.4em;
	color: rgb(0 0 0 / 0.055);
	font-family: var(--wp--preset--font-family--en);
	font-size: clamp(76px, 2rem + 10vw, 190px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	pointer-events: none;
	user-select: none;
}

/* 後ろに敷くので、次の見出しは上に重ねる（上の余白も詰める） */
p.is-style-section-en + * {
	position: relative;
	margin-block-start: 0;
}

/* ---------- 結論 ---------- */
p.is-style-statement::before {
	content: "";
	display: block;
	width: 0;
	margin: 0 auto 44px;
	border-inline: 22px solid transparent;
	border-top: 24px solid var(--wp--preset--color--lp-accent);
}

p.is-style-statement strong {
	display: inline-block;
	margin: 0 0.1em 0 0;
	padding: 0 0.28em 0.04em;
	border-radius: 100px;
	background: var(--wp--preset--gradient--lp-accent);
	font-size: 1.2em;
	line-height: 1.4;
}

/* ---------- 番号（丸） ---------- */
p.is-style-number-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.08em;
	height: 2.08em;
	/* 背景色を付けた段落にコアが入れる余白（has-background）を外す */
	padding: 0;
	letter-spacing: -0.01em;
}

/* スマホ（theme.json viewport.mobile 767px） */
@media (max-width: 767px) {
	/* 折り返しは文節で（はみ出さない）。改行位置は本文の <br> */
	p.is-style-statement { letter-spacing: 0; word-break: auto-phrase; overflow-wrap: anywhere; }
	p.is-style-statement::before { margin-bottom: 30px; border-inline-width: 16px; border-top-width: 18px; }
	p.is-style-statement strong { font-size: 1.25em; }
	p.is-style-number-circle { width: 2.1em; height: 2.1em; }
}

/* ---------- 太字にマーカー ---------- */
p.is-style-marker strong {
	background: linear-gradient(transparent 55%, color-mix(in srgb, var(--wp--preset--color--lp-accent) 28%, white) 55%);
}

/* ---------- 札（上の端に重ねる）：カード（「少し傾ける」などの position: relative の箱）の上の端に、札を半分かけて重ねる（静的サイト化LP・2026-10-06）。
   位置・傾きはパネルに無いので CSS。札の色・角丸・余白・文字はパネル ---------- */
p.is-style-tag-edge,
p.is-style-tag-edge-right {
	position: absolute;
	z-index: 1;
	top: 0;
	margin: 0 !important;
}

p.is-style-tag-edge { left: 32px; transform: translateY(-50%) rotate(-2deg); }
p.is-style-tag-edge-right { right: 32px; transform: translateY(-50%) rotate(2deg); }

@media (max-width: 767px) {
	p.is-style-tag-edge { left: 20px; }
	p.is-style-tag-edge-right { right: 20px; }
}

/* ---------- 大きな番号（下のカードに重ねる） is-style-num-overlap（トップ改修・2026-10-08）----------
   「01」などの大きな英字の番号を、すぐ下のカードの上の端に少しかけて置く（本番の「できること」の番号と同じ見せ方）。
   文字の大きさ・色はパネル。重ね方（下の余白をマイナスにして、次のブロックを上に重ねる）はパネルに無いので CSS。
   横並び・縦並び（flex）のグループの中ではコアが子の余白を 0 にする（.is-layout-flex > :is(*, div)）ので、それより強い指定にしている */
p.wp-block-paragraph.is-style-num-overlap,
p.is-style-num-overlap {
	margin-block: 0 -0.2em;
	font-family: var(--wp--preset--font-family--en);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
}

p.is-style-num-overlap + * {
	position: relative;
	margin-block-start: 0;
}

/* ---------- 数字を大きく（控えめ） is-style-big-number-s（段落版・トップ改修 2026-10-08）----------
   ハイライト（文字色）の中の太字を、英字フォントで 1.6 倍の数字にする（例：「300件以上」の「300」）。見出し版は heading-big-number.css */
p.is-style-big-number-s mark {
	background: none;
}

p.is-style-big-number-s mark strong {
	margin-right: 1px;
	font-family: var(--wp--preset--font-family--en);
	font-size: 1.6em;
	line-height: 1;
}