@charset "utf-8";
/* ==========================================================================
   依頼書725：この記事の要点（.c-digest）
   出典＝モトザワさん案1（Desktop\sample.html）の「▼ ここから純粋なパーツ用スタイル ▼」
   の範囲のみ。sample.html の「サンプル表示用」（body / .c-digest の width）は取り込まない。
   色はサイトごとに上書きできるよう変数（--c-digest-color）にしている。
   ========================================================================== */

.c-digest {
	--c-digest-color: #F19D54;
	/* 枠の内側パディング（本文と見出しの左端をこの1つの値でそろえる＝下の【I-2】）。
	   1.6rem＝16px＝本文16pxの 1em ／ 2.7rem＝27px＝本文18px（下の 112.5%）の 1.5em。
	   根拠＝テーマ純正の囲み部品 .c-point-block__body の実測（SP 1em → 641px以上 1.5em）。 */
	--c-digest-pad: 1.6rem;
	/* 箇条書きの丸（テーマ標準 .post-body ul li::before の実測値をそのまま写した5px円SVG）。
	   色は子テーマごとに違う（light-green=#8DC031／utsuwa-mira=#F27689）ため、
	   サイト側で1行差し替えられるよう変数にしてある。既定＝サイト標準の緑。 */
	--c-digest-marker: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%205%22%3E%3Ccircle%20cx%3D%222.5%22%20cy%3D%222.5%22%20r%3D%222.5%22%20stroke-width%3D%220%22%20fill%3D%22%238DC031%22%2F%3E%3C%2Fsvg%3E");
	border: 3px solid var(--c-digest-color);
	border-radius: 5px;
	position: relative;
	z-index: 1;
	container-type: inline-size;
	/* 【R-1】枠の下の余白＝ページの縦リズムに合わせる。
	   根拠＝同ページ実測 .post-eyecatch 20px→(641px以上)40px／.post-overview 30px→40px／.c-point-block 40px */
	margin-bottom: 20px;
}

@media all and (min-width: 641px) {
	.c-digest {
		--c-digest-pad: 2.7rem;
		margin-bottom: 40px;
	}
}

.c-digest__title {
	width: fit-content;
	max-width: 100%;
	padding-inline: .3em;
	display: grid;
	align-items: center;
	grid-template-columns: auto 1fr;
	gap: .3em;
	font-size: clamp(1.8rem, 2.6cqw, 2rem);
	font-weight: bold;
	line-height: 1;
	float: none;
	/* 【I-2】見出しの文字左端を本文の左端にそろえる（枠の内側パディング − 見出し自身の padding-inline）。
	   審査の案は calc(1em - .3em) だったが、1em は見出し自身の文字サイズ（18〜19.6px）で
	   本文の内側パディングとは別物のため、パディングそのもの（--c-digest-pad）から引く形にした。 */
	margin-left: calc(var(--c-digest-pad) - .3em);
}

.c-digest__title .c-digest__icon {
	color: var(--c-digest-color);
	display: inline-block;
	line-height: 1;
}

/* 【R-3】枠の中のタイポ＝周りの文章とそろえる（テーマが自分で使っている値をそのまま採る）。
   根拠＝.post-overview の実測 line-height 1.8／.u-text-SizeUpAll の実測 font-size 112.5%（16px→18px）／
         .c-point-block__body の実測 padding SP 1em → 641px以上 1.5em。 */
.c-digest__body {
	padding: var(--c-digest-pad);
	line-height: 1.8;
}

@media all and (min-width: 641px) {
	.c-digest__body {
		font-size: 112.5%;
	}
}

/* 【R-3】枠の中の縦の重なり＝テーマの囲み部品と同じ。
   根拠＝.c-point-block__body > * { margin-top: 1em } ／ …> *:first-child { margin-top: 0 } */
.c-digest__body > * {
	margin-top: 1em;
}

.c-digest__body > *:first-child {
	margin-top: 0;
}

/* 【R-2】箇条書き＝テーマ標準（.post-body ul li）と同じ作法にそろえる。
   根拠＝loaded-style.min.css の .post-body ul:not(…) li / li::before の実測値をそのまま採用。
   （この枠は .post-body の外にあるためテーマ標準の規則が当たらず、ブラウザ標準の黒丸が
     枠の内側パディングへ食い込んでいた＝審査 R-2） */
.c-digest__body ul {
	list-style: none;
	padding-left: 0;
}

.c-digest__body ul > li {
	position: relative;
	padding-left: 1em;
}

.c-digest__body ul > li::before {
	content: "・";
	color: rgba(0, 0, 0, 0);
	background: var(--c-digest-marker) no-repeat center left/5px 5px;
	position: absolute;
	top: 0;
	left: 0;
}

/* 番号つき（ol）も同じ欠陥（数字が枠の内側パディングへ食い込む）が起きるため同時に塞ぐ。
   マーカーはブラウザ標準の数字のまま＝新しい意匠は作らない。 */
.c-digest__body ol {
	padding-left: 1.5em;
}

/* ==========================================================================
   【作業505番・2026-09-15 榎本さん「Bにしましょう。」】箇条書きの部分＝方眼のメモ。
   榎本さん原文（2026-09-15）＝「文字だらけで威圧感があり読みにくい」「箇条書き部分は「メモ書き」っぽく、
   背景を「方眼」や「罫線」をつけるとか」→ 方向ラフ5案（05_モック\設計モック_505_この記事の要点）からBを採用。
   変えるのは箇条書き（ul）の背景と内側の余白だけ。枠・見出し・文字の大きさ・行間・丸印は上のまま。
   ========================================================================== */
.c-digest {
	/* 方眼の線＝枠の色（--c-digest-color）を薄くしたもの。紙色は枠の中の白よりわずかに温かい色。 */
	--c-digest-grid: rgba(241, 157, 84, .16);
	--c-digest-paper: #fffdf8;
}

.c-digest__body ul {
	padding: .9em 1em;
	border-radius: 4px;
	background-color: var(--c-digest-paper);
	background-image:
		linear-gradient(var(--c-digest-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--c-digest-grid) 1px, transparent 1px);
	background-size: 16px 16px;
}

.c-digest__body ul > li {
	padding-left: 1.1em;
}

.c-digest__body ul > li::before {
	left: .1em;
}