/* === カラム間隔 (gap) === */
.wp-block-columns.has-columns-gap-20 {
	gap: 20px !important;
}

.wp-block-columns.has-columns-gap-60 {
	gap: 60px !important;
}

/* === 767px以下のカラム間隔 (gap) === */
/* 未指定の場合はPCのgapをそのまま引き継ぐ */
@media (max-width: 767px) {
	.wp-block-columns.has-columns-gap-sp-0 {
		gap: 0 !important;
	}

	.wp-block-columns.has-columns-gap-sp-10 {
		gap: 10px !important;
	}

	.wp-block-columns.has-columns-gap-sp-20 {
		gap: 20px !important;
	}

	.wp-block-columns.has-columns-gap-sp-30 {
		gap: 30px !important;
	}

	.wp-block-columns.has-columns-gap-sp-40 {
		gap: 40px !important;
	}

	.wp-block-columns.has-columns-gap-sp-60 {
		gap: 60px !important;
	}
}

/* === カラム横方向配置 (space-between) === */
.wp-block-columns.is-justify-between {
	justify-content: space-between !important;
}

/* === エディタ内でも同じ見た目に === */
.editor-styles-wrapper .wp-block-columns.has-columns-gap-20 {
	gap: 20px !important;
}

.editor-styles-wrapper .wp-block-columns.has-columns-gap-60 {
	gap: 60px !important;
}

.editor-styles-wrapper .wp-block-columns.is-justify-between {
	justify-content: space-between !important;
}

@media (max-width: 767px) {
	.editor-styles-wrapper .wp-block-columns.has-columns-gap-sp-0 {
		gap: 0 !important;
	}

	.editor-styles-wrapper .wp-block-columns.has-columns-gap-sp-10 {
		gap: 10px !important;
	}

	.editor-styles-wrapper .wp-block-columns.has-columns-gap-sp-20 {
		gap: 20px !important;
	}

	.editor-styles-wrapper .wp-block-columns.has-columns-gap-sp-30 {
		gap: 30px !important;
	}

	.editor-styles-wrapper .wp-block-columns.has-columns-gap-sp-40 {
		gap: 40px !important;
	}

	.editor-styles-wrapper .wp-block-columns.has-columns-gap-sp-60 {
		gap: 60px !important;
	}
}