/**
 * core/list のブロックスタイル「吹き出し（縦にずらす）」 is-style-bubbles-stack … 縦に並べて、左右にずらす（困りごと）
 *
 * 横に並べる吹き出し（FV・相談）は、第8段階で段落ブロック＋グループ「吹き出しの並び」に作り替えた（paragraph-bubble.css）。
 * そのため、リストの「吹き出し（しっぽ）」（横並び）は廃止した
 *
 * 白い丸い箱・下向きのしっぽ・傾きは、擬似要素と transform が要るので CSS で持つ。
 * 文字の大きさはリストブロックの「タイポグラフィ」（プリセット）で選ぶ。箱の余白は文字の大きさに合わせて em で決まる。
 * 既存の「吹き出し（斜線）」（group-balloon.css）とは別物。
 */

.wp-block-list.is-style-bubbles-stack {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-list.is-style-bubbles-stack > li {
	position: relative;
	margin: 0;
	padding: 0.6em 1.3em;
	border-radius: 100px;
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	line-height: 1.4;
}

/* しっぽ：箱と同じ白の正方形を45度回して下にのぞかせる */
.wp-block-list.is-style-bubbles-stack > li::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -7px;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	background: inherit;
	transform: rotate(45deg);
}

/* ---- 縦にずらす：奇数番目は左・偶数番目は右に交互に置き、しっぽも左右を入れ替える（項目がいくつでも交互になる。第15段階で 3 個区切りから変更） ---- */
.wp-block-list.is-style-bubbles-stack {
	flex-direction: column;
	gap: 34px;
	max-width: 880px;
	margin-inline: auto;
}

.wp-block-list.is-style-bubbles-stack > li {
	align-self: flex-start;
	padding: 0.95em 1.7em;
	line-height: 1.5;
}

.wp-block-list.is-style-bubbles-stack > li::after {
	left: 64px;
	bottom: -8px;
	width: 18px;
	height: 18px;
	margin-left: 0;
}

.wp-block-list.is-style-bubbles-stack > li:nth-child(odd) { transform: rotate(-2deg); }
.wp-block-list.is-style-bubbles-stack > li:nth-child(even) { align-self: flex-end; transform: rotate(2deg); }
.wp-block-list.is-style-bubbles-stack > li:nth-child(even)::after { left: auto; right: 64px; }
/* 同じ側の2つ目以降は少し内側へ寄せ、傾きも少し変えて、きっちり揃いすぎないようにする */
.wp-block-list.is-style-bubbles-stack > li:nth-child(4n + 3) { margin-left: 6%; transform: rotate(-1deg); }
.wp-block-list.is-style-bubbles-stack > li:nth-child(4n) { margin-right: 6%; transform: rotate(1deg); }

/* スマホ（theme.json viewport.mobile 767px）：箱を詰め、角を少し小さく */
@media (max-width: 767px) {
	.wp-block-list.is-style-bubbles-stack { gap: 24px; }
	.wp-block-list.is-style-bubbles-stack > li { max-width: 92%; padding: 0.9em 1.4em; border-radius: 28px; }
	.wp-block-list.is-style-bubbles-stack > li::after { left: 40px; bottom: -6px; width: 14px; height: 14px; }
	.wp-block-list.is-style-bubbles-stack > li:nth-child(even)::after { right: 40px; }
	.wp-block-list.is-style-bubbles-stack > li:nth-child(4n + 3) { margin-left: 0; }
	.wp-block-list.is-style-bubbles-stack > li:nth-child(4n) { margin-right: 0; }
}

/**
 * core/list のブロックスタイル「吹き出し（横に並べて傾ける）」 is-style-bubbles-wrap（トップ改修・2026-10-08）
 *
 * トップの「こんな小さなことから、ご相談ください」。PC は横に並べて（折り返しあり・中央）、1つずつ少し傾けて上下にずらす。
 * しっぽは左下・右下を交互に。スマホは縦に並べ、左・右に交互に寄せる（「縦にずらす」と同じ並べ方）。
 * 悩みなので傾けている（CEO 方針：傾きはお悩みのセクションだけ）。
 * 長い項目は、項目の中に改行（Shift+Enter）を入れて PC で2行にする。スマホではその改行を無視して1行に流す（文章は変えない）。
 * 文字の大きさはリストのパネル。箱・しっぽ・傾き・並べ方はパネルに無いので CSS。
 */
.wp-block-list.is-style-bubbles-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 22px 18px;
	max-width: 1100px;
	margin-inline: auto;
	padding: 0;
	list-style: none;
}

.wp-block-list.is-style-bubbles-wrap > li {
	position: relative;
	margin: 0;
	padding: 14px 26px;
	border-radius: 100px;
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.wp-block-list.is-style-bubbles-wrap > li::after {
	content: "";
	position: absolute;
	left: 36px;
	bottom: -6px;
	width: 14px;
	height: 14px;
	background: inherit;
	transform: rotate(45deg);
}

.wp-block-list.is-style-bubbles-wrap > li:nth-child(even)::after { left: auto; right: 36px; }
.wp-block-list.is-style-bubbles-wrap > li:nth-child(5n + 1) { transform: rotate(-2deg) translateY(4px); }
.wp-block-list.is-style-bubbles-wrap > li:nth-child(5n + 2) { transform: rotate(1.5deg) translateY(-6px); }
.wp-block-list.is-style-bubbles-wrap > li:nth-child(5n + 3) { transform: rotate(-1deg) translateY(6px); }
.wp-block-list.is-style-bubbles-wrap > li:nth-child(5n + 4) { transform: rotate(2deg); }
.wp-block-list.is-style-bubbles-wrap > li:nth-child(5n) { transform: rotate(-1.5deg) translateY(-4px); }

@media (max-width: 767px) {
	.wp-block-list.is-style-bubbles-wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
	.wp-block-list.is-style-bubbles-wrap > li { max-width: 92%; padding: 11px 20px; border-radius: 28px; text-align: left; }
	.wp-block-list.is-style-bubbles-wrap > li br { display: none; }
	.wp-block-list.is-style-bubbles-wrap > li:nth-child(even) { align-self: flex-end; }
}

/**
 * core/list のブロックスタイル「吹き出し（ばらばらに集める）」 is-style-bubbles-scatter（トップ改修・2026-10-08）
 *
 * トップの「こんな所をご評価いただいております。」。コメントの吹き出しがにぎやかに集まっている見え方。
 * 1つずつ形（角丸）・大きさ・余白・上下の位置・しっぽの左右・地の色（白／淡いアクセント／線）をばらす（10個で1周）。傾けない。
 * しっぽは全部下向き。文字は黒。地の淡い色・線の色は LP のアクセント（lp-accent）から作るので、色の切り替えに追従する。
 * 並べ方（横・折り返し・中央）と、1つずつの形はパネルに無いので CSS。
 */
.wp-block-list.is-style-bubbles-scatter {
	--hpcode-scatter-pale: color-mix(in srgb, var(--wp--preset--color--lp-accent) 9%, white);
	--hpcode-scatter-line: 1.5px solid color-mix(in srgb, var(--wp--preset--color--lp-accent) 60%, transparent);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 36px 18px;
	margin: 0;
	padding: 10px 0 14px;
	list-style: none;
}

.wp-block-list.is-style-bubbles-scatter > li {
	position: relative;
	margin: 0;
	padding: 14px 24px;
	border-radius: 22px;
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
	color: var(--wp--preset--color--contrast);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
}

.wp-block-list.is-style-bubbles-scatter > li::after {
	content: "";
	position: absolute;
	left: 26px;
	bottom: -6px;
	width: 13px;
	height: 13px;
	background: inherit;
	transform: rotate(45deg);
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.04);
}

.wp-block-list.is-style-bubbles-scatter > li:nth-child(10n + 1) { padding: 16px 30px; border-radius: 100px; font-size: 17px; transform: translateY(6px); }
.wp-block-list.is-style-bubbles-scatter > li:nth-child(10n + 2) { border-radius: 14px; background-color: var(--hpcode-scatter-pale); transform: translateY(-8px); }
.wp-block-list.is-style-bubbles-scatter > li:nth-child(10n + 2)::after { left: auto; right: 22px; }
.wp-block-list.is-style-bubbles-scatter > li:nth-child(10n + 3) { padding: 10px 18px; border-radius: 100px; font-size: 14px; transform: translateY(14px); }
.wp-block-list.is-style-bubbles-scatter > li:nth-child(10n + 3)::after { left: 50%; margin-left: -6px; }
.wp-block-list.is-style-bubbles-scatter > li:nth-child(10n + 4) { padding: 18px 28px; border-radius: 26px 26px 26px 8px; font-size: 18px; transform: translateY(-4px); }
.wp-block-list.is-style-bubbles-scatter > li:nth-child(10n + 4)::after { left: 40px; }
.wp-block-list.is-style-bubbles-scatter > li:nth-child(10n + 5) { padding: 16px 26px; border: var(--hpcode-scatter-line); border-radius: 18px; box-shadow: none; transform: translateY(10px); }
.wp-block-list.is-style-bubbles-scatter > li:nth-child(10n + 5)::after { left: auto; right: 40px; bottom: -7px; border-right: var(--hpcode-scatter-line); border-bottom: var(--hpcode-scatter-line); box-shadow: none; }
.wp-block-list.is-style-bubbles-scatter > li:nth-child(10n + 6) { border-radius: 100px; transform: translateY(-10px); }
.wp-block-list.is-style-bubbles-scatter > li:nth-child(10n + 6)::after { left: auto; right: 30px; }
.wp-block-list.is-style-bubbles-scatter > li:nth-child(10n + 7) { padding: 12px 20px; border-radius: 12px; background-color: var(--hpcode-scatter-pale); font-size: 14px; transform: translateY(8px); }
.wp-block-list.is-style-bubbles-scatter > li:nth-child(10n + 8) { padding: 16px 26px; border-radius: 26px 26px 8px 26px; font-size: 16px; transform: translateY(-6px); }
.wp-block-list.is-style-bubbles-scatter > li:nth-child(10n + 8)::after { left: auto; right: 36px; }
.wp-block-list.is-style-bubbles-scatter > li:nth-child(10n + 9) { padding: 15px 28px; border-radius: 100px; font-size: 16px; transform: translateY(12px); }
.wp-block-list.is-style-bubbles-scatter > li:nth-child(10n + 9)::after { left: auto; right: 28px; }
.wp-block-list.is-style-bubbles-scatter > li:nth-child(10n) { padding: 18px 30px; border: var(--hpcode-scatter-line); border-radius: 20px; box-shadow: none; font-size: 17px; transform: translateY(-2px); }
.wp-block-list.is-style-bubbles-scatter > li:nth-child(10n)::after { left: 34px; bottom: -7px; border-right: var(--hpcode-scatter-line); border-bottom: var(--hpcode-scatter-line); box-shadow: none; }

@media (max-width: 767px) {
	.wp-block-list.is-style-bubbles-scatter { gap: 26px 10px; padding-inline: 2px; }
	.wp-block-list.is-style-bubbles-scatter > li:nth-child(n) { max-width: 100%; padding: 10px 16px; font-size: 13px; }
	.wp-block-list.is-style-bubbles-scatter > li:is(:nth-child(10n + 1), :nth-child(10n + 4), :nth-child(10n)) { padding: 12px 18px; font-size: 14px; }
	.wp-block-list.is-style-bubbles-scatter > li:nth-child(odd) { transform: translateY(4px); }
	.wp-block-list.is-style-bubbles-scatter > li:nth-child(even) { transform: translateY(-4px); }
}