/**
 * core/list のブロックスタイル「チェックの丸」（と、下の「小さな点」） is-style-check（LP 用・2026-10-06）
 *
 * 行頭を、LP のアクセントの丸に白いチェックにする。文字の大きさ・太さ・行の間隔はパネル。
 * 行頭の印（擬似要素）はパネルに無いので CSS。
 */
.wp-block-list.is-style-check {
	padding-left: 0;
	list-style: none;
}

.wp-block-list.is-style-check > li {
	position: relative;
	padding-left: 34px;
}

.wp-block-list.is-style-check > li + li { margin-top: 14px; }

.wp-block-list.is-style-check > li::before {
	content: "";
	position: absolute;
	top: 0.3em;
	left: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wp--preset--color--lp-accent) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="M6 11.5l3.2 3.2L16 8" fill="none" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 100% no-repeat;
}

/* ---------- 「小さな点」 is-style-dot：行頭を小さなグレーの点にする（静的サイト化LP の「向いていない方」）。印は擬似要素なので CSS ---------- */
.wp-block-list.is-style-dot {
	padding-left: 0;
	list-style: none;
}

.wp-block-list.is-style-dot > li {
	position: relative;
	padding-left: 34px;
}

.wp-block-list.is-style-dot > li + li { margin-top: 14px; }

.wp-block-list.is-style-dot > li::before {
	content: "";
	position: absolute;
	top: 0.75em;
	left: 7px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #bdbdbd;
}

/* ---------- 「チェック欄（押せる）」 is-style-check-box（無料診断LP・2026-10-07）----------
   ノートの罫線（項目ごとの下線）と、行頭の手書き風の四角いチェック欄。グループのスタイル「ノート（チェックリスト）」の中で使う。
   JS が無いときは、四角は見た目だけ（擬似要素）。lp.js が各項目に本物のチェックボックス（label＋input）を入れると、押せる形になる
   （.is-interactive）。チェックした数は「無料で診断する」のボタンの角のバッジに出る（lp.css・lp.js）。
   文字の大きさ・太さはパネル。罫線・四角・チェックの印はパネルに無いので CSS。色は LP のアクセントに追従する */
.wp-block-list.is-style-check-box {
	--hpcode-check-line: color-mix(in srgb, var(--wp--preset--color--lp-accent) 14%, white);
	margin: 0;
	padding-left: 0;
	border-top: 1.5px solid var(--hpcode-check-line);
	list-style: none;
}

.wp-block-list.is-style-check-box > li {
	/* 最小の高さ（min-height）に上下の余白を含める（デザイン版と同じ 60px の行） */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 60px;
	margin: 0;
	padding: 12px 4px 12px 2px;
	border-bottom: 1.5px solid var(--hpcode-check-line);
	line-height: 1.5;
}

/* 見た目だけの四角（JS が無いとき） */
.wp-block-list.is-style-check-box > li::before {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	border: 2.5px solid var(--wp--preset--color--lp-accent);
	border-radius: 6px 7px 5px 6px;
	background: var(--wp--preset--color--base);
	transform: rotate(-4deg);
}

.wp-block-list.is-style-check-box > li:nth-child(even)::before { transform: rotate(3deg); }

/* 押せる形（lp.js が label＋input を入れたとき） */
.wp-block-list.is-style-check-box.is-interactive > li::before { content: none; }

.wp-block-list.is-style-check-box .lp-check__label {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 16px;
	min-height: 36px;
	cursor: pointer;
}

.wp-block-list.is-style-check-box .lp-check__box {
	flex: none;
	width: 26px;
	height: 26px;
	margin: 0;
	border: 2.5px solid var(--wp--preset--color--lp-accent);
	border-radius: 6px 7px 5px 6px;
	background: var(--wp--preset--color--base) center / 80% no-repeat;
	cursor: pointer;
	transform: rotate(-4deg);
	transition: background-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wp-block-list.is-style-check-box > li:nth-child(even) .lp-check__box { transform: rotate(3deg); }

.wp-block-list.is-style-check-box .lp-check__box:checked {
	background-color: var(--wp--preset--color--lp-accent);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7" fill="none" stroke="white" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.wp-block-list.is-style-check-box .lp-check__box:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--wp--preset--color--lp-accent) 35%, white);
	outline-offset: 3px;
}

.wp-block-list.is-style-check-box .lp-check__label:hover .lp-check__box:not(:checked) {
	background-color: var(--wp--preset--color--lp-accent-pale);
}

/* チェックした行は、文字を濃いアクセント色に（取り消し線は付けない：当てはまった＝消すものではないため） */
.wp-block-list.is-style-check-box .lp-check__box:checked + span {
	color: var(--wp--preset--color--lp-accent-dark);
}

@media (max-width: 767px) {
	.wp-block-list.is-style-check-box > li { gap: 12px; min-height: 52px; padding: 10px 2px; }
	.wp-block-list.is-style-check-box > li::before { width: 20px; height: 20px; border-width: 2.2px; }
	.wp-block-list.is-style-check-box .lp-check__label { gap: 12px; }
	.wp-block-list.is-style-check-box .lp-check__box { width: 22px; height: 22px; border-width: 2.2px; }
}

/* ---------- 「チェック（✓だけ）」 is-style-check-mark（トップ改修・2026-10-08）----------
   行頭を、LP のアクセント色の「✓」だけにする（本番の「できること」のリストと同じ）。丸は付けない。
   文字の大きさ・太さ・行の高さはパネル。行頭の印（擬似要素）と行の間隔はパネルに無いので CSS */
.wp-block-list.is-style-check-mark {
	display: grid;
	gap: 8px;
	padding-left: 0;
	list-style: none;
}

.wp-block-list.is-style-check-mark > li {
	display: flex;
	gap: 0.4em;
	margin: 0;
}

.wp-block-list.is-style-check-mark > li::before {
	content: "✓";
	flex: none;
	color: var(--wp--preset--color--lp-accent);
	font-weight: 900;
}