/**
 * core/group のブロックスタイル（静的サイト化LP で足したもの・2026-10-06）
 *
 * - 「少し左に傾ける」 is-style-tilt-left／「少し右に傾ける」 is-style-tilt-right
 *     カードを ±1度だけ傾けて、等間隔の四角が並ぶ硬さをなくす。中の「札（上の端に重ねる）」の基準にもなる（position: relative）。
 *     傾き（transform）はパネルに無いので CSS
 * - 「番号を点線でつなぐ」 is-style-flow-line
 *     縦に並べた「番号（丸）」の中心を、縦の点線でつなぐ（流れ）。番号の段落の文字の大きさは xxx-large（丸の幅＝2.08em）を前提に、
 *     線の位置を同じプリセットから計算する。線（擬似要素）はパネルに無いので CSS
 */
.wp-block-group.is-style-tilt-left,
.wp-block-group.is-style-tilt-right {
	position: relative;
}

.wp-block-group.is-style-tilt-left { transform: rotate(-1deg); }
.wp-block-group.is-style-tilt-right { transform: rotate(1deg); }

.wp-block-group.is-style-flow-line {
	position: relative;
}

.wp-block-group.is-style-flow-line::before {
	content: "";
	position: absolute;
	top: 36px;
	bottom: 36px;
	left: calc(var(--wp--preset--font-size--xxx-large) * 1.04 - 1.5px);
	border-left: 3px dotted color-mix(in srgb, var(--wp--preset--color--lp-accent) 40%, white);
}

.wp-block-group.is-style-flow-line > * {
	position: relative;
}

/**
 * - 「カード全体をリンクに」 is-style-link-card（トップ改修・2026-10-08）
 *     カードの中の最初のリンク（例：実績カードのお名前）を、カード全体で押せるようにする（リンクは1つのまま。読み上げ・Tab も1回）。
 *     マウスを乗せると影を少し濃く。リンクの文字は本文と同じ色・下線なし（カード全体が押せるので）。
 *     押せる範囲を広げる（擬似要素）・ホバーの影はパネルに無いので CSS
 */
.wp-block-group.is-style-link-card {
	position: relative;
	transition: box-shadow 0.25s ease;
}

.wp-block-group.is-style-link-card:hover {
	box-shadow: var(--wp--preset--shadow--card-strong) !important;
}

.wp-block-group.is-style-link-card a {
	color: inherit;
	text-decoration: none;
}

.wp-block-group.is-style-link-card a:first-of-type::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	border-radius: inherit;
}

.wp-block-group.is-style-link-card:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--lp-accent-dark);
	outline-offset: 2px;
}

.wp-block-group.is-style-link-card a:focus-visible {
	outline: none;
}

/**
 * - 「行の高さをそろえる（グリッド）」 is-style-rows-equal（トップ改修・2026-10-08）
 *     レイアウトが「グリッド」のグループで、すべての段を同じ高さにする（いちばん高い段に合わせる）。
 *     トップの「「お困り」のことはありますか？」の上3枚・下2枚のカード。コアのグリッドは段ごとに高さが決まり、
 *     パネルでは段の高さを指定できないので CSS。スマホ（1列）では、カードごとの高さのまま
 */
@media (min-width: 768px) {
	.wp-block-group.is-style-rows-equal.is-layout-grid {
		grid-auto-rows: 1fr;
	}
}