/**
 * core/columns のブロックスタイル「お悩みの吹き出し（真ん中を向く）」 is-style-talk-around（保守LP・2026-10-15）
 *
 * 3つのカラム（左：吹き出しのカード／真ん中：見出しとイラスト／右：吹き出しのカード）で、
 * 左右のカードに、真ん中のほうを向いた吹き出しのしっぽを付ける。カードは左右のカラムの直下のグループ
 * （背景・角丸・余白はカードのパネル）。
 * - PC：左のカラムのカードは右向き、右のカラムのカードは左向き。カードの左右の位置を少しずつずらす（デザインカンプは 60px。真ん中の見出しを2行に収めるため 40px に詰めた）
 * - スマホ：真ん中（見出しとイラスト）を先に出し、カードは左寄せ（しっぽ右）と右寄せ（しっぽ左）を交互に並べる
 *
 * しっぽ（擬似要素）・カードのずらし方・スマホの並べ替えはパネルに無いので CSS。
 * しっぽの形はデザインカンプの SVG（talk-tail.svg）をマスクに使い、色はカードと同じ白。
 */

.wp-block-columns.is-style-talk-around > .wp-block-column:is(:first-child, :last-child) > .wp-block-group {
	position: relative;
	/* しっぽの分だけ、カードの横幅を左右のカラムより狭くする */
	--hpcode-talk-tail: 31px;
}

.wp-block-columns.is-style-talk-around > .wp-block-column:is(:first-child, :last-child) > .wp-block-group::after {
	content: "";
	position: absolute;
	top: calc(50% - 33.5px);
	width: 41px;
	height: 67px;
	background-color: var(--wp--preset--color--base);
	-webkit-mask: url("../images/lp/hosyu/talk-tail.svg") center / 100% 100% no-repeat;
	mask: url("../images/lp/hosyu/talk-tail.svg") center / 100% 100% no-repeat;
	pointer-events: none;
}

/* しっぽ右向き（左のカラム）：デザインカンプの「Frame 20」を 180 度回したもの */
.wp-block-columns.is-style-talk-around > .wp-block-column:first-child > .wp-block-group::after {
	right: calc(var(--hpcode-talk-tail) * -1);
	transform: rotate(180deg);
}

/* しっぽ左向き（右のカラム） */
.wp-block-columns.is-style-talk-around > .wp-block-column:last-child > .wp-block-group::after {
	left: calc(var(--hpcode-talk-tail) * -1);
}

@media (min-width: 768px) {
	/* カードのずらし方（デザインカンプ PC：左のカラムは 1・3 枚目を左に、2 枚目を右に。右のカラムは 1 枚目を右に、2 枚目を左に） */
	.wp-block-columns.is-style-talk-around > .wp-block-column:first-child > .wp-block-group:nth-child(odd) { margin-right: calc(var(--hpcode-talk-tail) + 40px); }
	.wp-block-columns.is-style-talk-around > .wp-block-column:first-child > .wp-block-group:nth-child(3) { margin-right: calc(var(--hpcode-talk-tail) + 24px); }
	.wp-block-columns.is-style-talk-around > .wp-block-column:first-child > .wp-block-group:nth-child(even) { margin-right: var(--hpcode-talk-tail); margin-left: 40px; }
	.wp-block-columns.is-style-talk-around > .wp-block-column:last-child > .wp-block-group:nth-child(odd) { margin-left: calc(var(--hpcode-talk-tail) + 40px); }
	.wp-block-columns.is-style-talk-around > .wp-block-column:last-child > .wp-block-group:nth-child(even) { margin-right: 40px; margin-left: var(--hpcode-talk-tail); }
}

/* スマホ（theme.json viewport.mobile 767px） */
@media (max-width: 767px) {
	/* 真ん中（見出しとイラスト）を先に */
	.wp-block-columns.is-style-talk-around > .wp-block-column:nth-child(2) { order: -1; }

	/* 左右のカラムの間も、カード同士と同じ間隔にする（カラムの間隔はパネル） */
	.wp-block-columns.is-style-talk-around > .wp-block-column:first-child > .wp-block-group,
	.wp-block-columns.is-style-talk-around > .wp-block-column:last-child > .wp-block-group {
		--hpcode-talk-side: calc(var(--hpcode-talk-tail) + 8px);
	}

	/* 通しの順で 1・3・5 枚目＝左寄せ（しっぽ右）、2・4 枚目＝右寄せ（しっぽ左）。左のカラムは 3 枚・右のカラムは 2 枚の前提 */
	.wp-block-columns.is-style-talk-around > .wp-block-column:first-child > .wp-block-group:nth-child(odd),
	.wp-block-columns.is-style-talk-around > .wp-block-column:last-child > .wp-block-group:nth-child(even) {
		margin-right: var(--hpcode-talk-side);
		margin-left: 0;
	}

	.wp-block-columns.is-style-talk-around > .wp-block-column:first-child > .wp-block-group:nth-child(even),
	.wp-block-columns.is-style-talk-around > .wp-block-column:last-child > .wp-block-group:nth-child(odd) {
		margin-right: 0;
		margin-left: var(--hpcode-talk-side);
	}

	.wp-block-columns.is-style-talk-around > .wp-block-column:first-child > .wp-block-group:nth-child(odd)::after,
	.wp-block-columns.is-style-talk-around > .wp-block-column:last-child > .wp-block-group:nth-child(even)::after {
		right: calc(var(--hpcode-talk-tail) * -1);
		left: auto;
		transform: rotate(180deg);
	}

	.wp-block-columns.is-style-talk-around > .wp-block-column:first-child > .wp-block-group:nth-child(even)::after,
	.wp-block-columns.is-style-talk-around > .wp-block-column:last-child > .wp-block-group:nth-child(odd)::after {
		right: auto;
		left: calc(var(--hpcode-talk-tail) * -1);
		transform: none;
	}
}