.post-content .kochi-charm {
	--kochi-charm-background-color: #fff;
}

[data-theme='blue-theme'] .post-content .kochi-charm,
.post-content [data-theme='blue-theme'] .kochi-charm {
	--kochi-charm-background-color: #e1efff;
}

[data-theme='black-theme'] .post-content .kochi-charm,
.post-content [data-theme='black-theme'] .kochi-charm {
	--kochi-charm-background-color: #f8f8f8;
}

.post-content .kochi-charm > ol {
	padding-block: 0;
	display: grid;
}

.post-content .kochi-charm > ol > li {
	padding-block: 0;
	padding-inline-start: 0;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.post-content .kochi-charm > ol > li::before {
	display: none;
}

.post-content .kochi-charm > ol > li .kochi-charm-list-item-content {
	flex-grow: 1;
	padding-block: 24px;
	padding-inline: 24px;
	background-color: var(--kochi-charm-background-color);
}

.post-content .kochi-charm > ol > li .kochi-charm-list-item-content > .wp-heading {
	margin-block-start: 0;
	padding-inline-start: 0;
	border-inline-start: 0;
	font-weight: 700;
}

.post-content .kochi-charm > ol > li .kochi-charm-list-item-content > p {
	padding-block: 0;
	font-feature-settings: 'pwid' on;
	font-size: var(--font-size-small);
}

@media screen and (max-width: 1024px) {

	.post-content .kochi-charm {
		padding-block: 12px;
	}

	.post-content .kochi-charm > ol > li .kochi-charm-list-item-content > .wp-heading {
		font-size: var(--font-size-p-sp);
	}

	.post-content .kochi-charm > ol > li .kochi-charm-list-item-content > p {
		margin-block-start: 12px;
	}
}

@media screen and (min-width: 1025px) {

	.post-content .kochi-charm {
		padding-block: 16px;
	}

	.post-content .kochi-charm > ol {
		-moz-column-gap: 24px;
		column-gap: 24px;
		row-gap: 24px;
	}

	.post-content .kochi-charm > ol > li .kochi-charm-list-item-content > .wp-heading {
		font-size: var(--font-size-p-pc);
	}

	.post-content .kochi-charm > ol > li .kochi-charm-list-item-content > p {
		margin-block-start: 16px;
	}
}

@media screen and (max-width: 767px) {

	.post-content .kochi-charm > ol {
		row-gap: 16px;
	}
}

@media screen and (min-width: 768px) {

	.post-content .kochi-charm > ol {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media screen and (max-width: 1024px) and (min-width: 768px) {

	.post-content .kochi-charm > ol {
		-moz-column-gap: 16px;
		column-gap: 16px;
		row-gap: 16px;
	}
}