/**
 * core/group のブロックスタイル「ノート（チェックリスト）」 is-style-note（LP 用・2026-10-07 無料診断LP）
 *
 * ノートに書いたチェックリストの紙：左にパンチ穴、左の余白の縦線、上にテープ、少し傾ける。
 * 中に置くリストは、リストのスタイル「チェック欄（押せる）」（list-check.css）を選ぶ。
 * 紙の色（白）・角丸はパネル。穴・テープ・縦線（擬似要素と背景の線）・傾き・紫がかった影はパネルに無いので CSS。
 * 余白は、穴と縦線の位置と組みになっているので、ここで持つ（パネルの余白は使わない）。
 * 色は LP のアクセント（lp-accent 系）から作るので、LP 全体の色（セクションスタイル）に追従する。
 * 傾きは、お悩み（チェックリスト）のセクションだけで使う（CEO の方針）。
 */
.wp-block-group.is-style-note {
	--hpcode-note-line: color-mix(in srgb, var(--wp--preset--color--lp-accent) 16%, white);
	position: relative;
	padding: 52px 56px 44px 104px;
	/* 左の余白の縦線（左から 80px）。背景色（白）はパネルの背景色 */
	background-image: linear-gradient(to right, transparent 79px, var(--hpcode-note-line) 79px, var(--hpcode-note-line) 81px, transparent 81px);
	box-shadow:
		0 2px 4px color-mix(in srgb, var(--wp--preset--color--lp-accent-dark) 6%, transparent),
		0 10px 28px color-mix(in srgb, var(--wp--preset--color--lp-accent-dark) 10%, transparent);
	transform: rotate(-1.2deg);
}

/* 左のパンチ穴：地の色（薄いグレー）の丸を縦に並べる。内側に少しだけ影 */
.wp-block-group.is-style-note::before {
	content: "";
	position: absolute;
	top: 34px;
	bottom: 34px;
	left: 26px;
	width: 22px;
	background: radial-gradient(circle at 11px 11px, var(--wp--preset--color--gray-light) 0 8px, color-mix(in srgb, var(--wp--preset--color--lp-accent-dark) 12%, transparent) 8.5px 9.5px, transparent 10px) 0 0 / 22px 46px repeat-y;
}

/* 上のテープ：淡いアクセント色の半透明 */
.wp-block-group.is-style-note::after {
	content: "";
	position: absolute;
	top: -16px;
	left: 50%;
	width: 132px;
	height: 34px;
	margin-left: -66px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--wp--preset--color--lp-accent) 22%, transparent);
	transform: rotate(-3deg);
}

.wp-block-group.is-style-note > * {
	margin-block: 0;
}

/* スマホ（theme.json viewport.mobile 767px） */
@media (max-width: 767px) {
	.wp-block-group.is-style-note {
		margin-inline: 4px;
		padding: 40px 18px 30px 56px;
		background-image: linear-gradient(to right, transparent 43px, var(--hpcode-note-line) 43px, var(--hpcode-note-line) 45px, transparent 45px);
		transform: rotate(-1deg);
	}

	.wp-block-group.is-style-note::before {
		top: 24px;
		bottom: 24px;
		left: 12px;
		width: 18px;
		background: radial-gradient(circle at 9px 9px, var(--wp--preset--color--gray-light) 0 6.5px, color-mix(in srgb, var(--wp--preset--color--lp-accent-dark) 12%, transparent) 7px 8px, transparent 8.5px) 0 0 / 18px 38px repeat-y;
	}

	.wp-block-group.is-style-note::after {
		top: -13px;
		width: 100px;
		height: 28px;
		margin-left: -50px;
	}
}