.post-content .kochi-top-charm {
	display: grid;
	position: relative;
}

.post-content .kochi-top-charm .kochi-top-charm-decoration-above,
.post-content .kochi-top-charm .kochi-top-charm-decoration-below {
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.post-content .kochi-top-charm .kochi-top-charm-decoration-above::before,
.post-content .kochi-top-charm .kochi-top-charm-decoration-below::before {
	content: '';
	border-radius: 100%;
	display: block;
	background-color: #2974c4;
	position: absolute;
	right: 0;
	left: 0;
	z-index: 1;
}

.post-content .kochi-top-charm .kochi-top-charm-decoration-above::before {
	top: 0;
}

.post-content .kochi-top-charm .kochi-top-charm-decoration-below::before {
	bottom: 0;
}

.post-content .kochi-top-charm .kochi-top-charm-inner {
	position: relative;
	z-index: 1;
}

.post-content .kochi-top-charm .kochi-top-charm-inner::before {
	content: '';
	margin-inline: calc(50% - 50cqi);
	background-color: #2974c4;
	position: absolute;
	inset: 0;
	z-index: 1;
}

.post-content .kochi-top-charm .kochi-top-charm-header {
	display: grid;
	position: relative;
	z-index: 1;
}

.post-content .kochi-top-charm .kochi-top-charm-header .kochi-top-charm-title {
	margin-block: 0;
	padding-inline-start: 0;
	border-inline-start: 0;
	color: #fff;
	font-weight: 700;
}

.post-content .kochi-top-charm .kochi-top-charm-header .kochi-top-charm-title .kochi-top-charm-title-outlined {
	display: block;
	filter: url(#title-outlined);
	position: relative;
	z-index: 1;
}

.post-content .kochi-top-charm .kochi-top-charm-header .kochi-top-charm-title .kochi-top-charm-title-outlined svg:has(filter) {
	position: absolute;
	visibility: hidden;
}

.post-content .kochi-top-charm .kochi-top-charm-header .kochi-top-charm-lead {
	padding-block: 0;
	color: #fff;
	font-size: var(--font-size-small);
}

.post-content .kochi-top-charm .kochi-top-charm-list {
	position: relative;
	z-index: 1;
}

.post-content .kochi-top-charm .kochi-top-charm-list > ol {
	padding-block: 0;
	counter-reset: charm-num;
	display: grid;
}

.post-content .kochi-top-charm .kochi-top-charm-list > ol > li {
	display: grid;
	color: #000;
	background-color: #e1efff;
	counter-increment: charm-num;
	min-width: 0;
}

.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-image img {
	-o-object-fit: cover;
	object-fit: cover;
}

.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-title {
	margin-block-start: 0;
	padding-inline-start: 0;
	border-inline-start: 0;
}

.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-description > p {
	padding-block: 0;
}

.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-data > p {
	padding-block: 0;
	display: flex;
	align-items: center;
	-moz-column-gap: 4px;
	column-gap: 4px;
	color: #004ea2;
	font-weight: 700;
}

.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-note > p {
	padding-block: 0;
}

.post-content .kochi-top-charm .kochi-top-charm-link {
	position: relative;
	z-index: 1;
}

.post-content .kochi-top-charm .kochi-top-charm-link .wp-block-buttons {
	padding-block: 0;
}

.post-content .kochi-top-charm .kochi-top-charm-link .wp-block-button .wp-block-button__link {
	border-color: currentcolor;
	background-color: transparent;
	color: #fff;
}

.post-content .kochi-top-charm .kochi-top-charm-link .wp-block-button .wp-block-button__link::after {
	background-color: currentcolor;
}

.post-content .kochi-top-charm .kochi-top-charm-link .wp-block-button .wp-block-button__link:hover,
.post-content .kochi-top-charm .kochi-top-charm-link .wp-block-button .wp-block-button__link:active,
.post-content .kochi-top-charm .kochi-top-charm-link .wp-block-button .wp-block-button__link:focus-visible {
	border-color: #9fc9f7;
	background-color: #fff;
	color: #004ea2;
}

.post-content .kochi-top-charm .kochi-top-charm-link .wp-block-button .wp-block-button__link:hover::after,
.post-content .kochi-top-charm .kochi-top-charm-link .wp-block-button .wp-block-button__link:active::after,
.post-content .kochi-top-charm .kochi-top-charm-link .wp-block-button .wp-block-button__link:focus-visible::after {
	background-color: currentcolor;
}

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

	.post-content .kochi-top-charm {
		grid-template-rows: 32px auto 32px;
	}

	.post-content .kochi-top-charm .kochi-top-charm-decoration-above,
	.post-content .kochi-top-charm .kochi-top-charm-decoration-below {
		margin-inline: calc(50% - 87.733333335cqi);
	}

	.post-content .kochi-top-charm .kochi-top-charm-decoration-above::before,
	.post-content .kochi-top-charm .kochi-top-charm-decoration-below::before {
		width: 175.46666667cqi;
		height: 337px;
	}

	.post-content .kochi-top-charm .kochi-top-charm-header {
		row-gap: 16px;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list {
		margin-block: 16px;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li {
		padding-block: 12px;
		padding-inline: 12px;
		border-radius: 16px;
		grid-template-columns: 80px auto;
		align-items: center;
		-moz-column-gap: 12px;
		column-gap: 12px;
	}

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

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li:nth-child(-n + 4) {
		grid-column: span 2;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li:nth-child(n + 5) {
		grid-template-columns: none;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li:nth-child(n + 5) .kochi-top-charm-list-item-image {
		display: none;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li:nth-child(n + 5) .kochi-top-charm-list-item-title {
		margin-block-end: 4px;
		text-align: center;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li:nth-child(n + 5) .kochi-top-charm-list-item-description > p {
		text-align: center;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li:nth-child(n + 5) .kochi-top-charm-list-item-data > p {
		justify-content: center;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-image {
		grid-column: 1/2;
		grid-row: 1/4;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-image img {
		width: 80px;
		height: 80px;
		aspect-ratio: 1/1;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-title {
		margin-block-end: 4px;
	}
}

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

	.post-content .kochi-top-charm {
		grid-template-rows: 60px auto 60px;
	}

	.post-content .kochi-top-charm .kochi-top-charm-decoration-above,
	.post-content .kochi-top-charm .kochi-top-charm-decoration-below {
		margin-inline: calc(50% - 87.6953125cqi);
	}

	.post-content .kochi-top-charm .kochi-top-charm-decoration-above::before,
	.post-content .kochi-top-charm .kochi-top-charm-decoration-below::before {
		width: 175.390625cqi;
		height: 631px;
	}

	.post-content .kochi-top-charm .kochi-top-charm-header {
		padding-block-start: 48px;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list::before {
		top: -184px;
		width: 360px;
		height: 387px;
	}

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

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li {
		padding-inline: 16px;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-image img {
		border-radius: 24px;
		width: 200px;
		height: 140px;
		aspect-ratio: 200/140;
	}
}

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

	.post-content .kochi-top-charm {
		grid-template-rows: 120px auto 120px;
	}

	.post-content .kochi-top-charm .kochi-top-charm-decoration-above,
	.post-content .kochi-top-charm .kochi-top-charm-decoration-below {
		margin-inline: calc(50% - 87.7083335cqi);
	}

	.post-content .kochi-top-charm .kochi-top-charm-decoration-above::before,
	.post-content .kochi-top-charm .kochi-top-charm-decoration-below::before {
		width: 175.416667cqi;
		height: 1263px;
	}

	.post-content .kochi-top-charm .kochi-top-charm-header {
		padding-block-start: 24px;
	}

	.post-content .kochi-top-charm .kochi-top-charm-header .kochi-top-charm-title {
		font-size: var(--font-size-h2-pc);
	}

	.post-content .kochi-top-charm .kochi-top-charm-header .kochi-top-charm-title .kochi-top-charm-title-outlined {
		font-size: var(--font-size-title-pc);
	}

	.post-content .kochi-top-charm .kochi-top-charm-list::before {
		top: -192px;
		width: 420px;
		height: 452px;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol {
		gap: 24px;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li {
		padding-inline: 24px;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-image img {
		border-radius: 24px;
		width: 234px;
		height: 140px;
		aspect-ratio: 234/140;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-title {
		font-size: var(--font-size-h4-pc);
	}

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

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-data .kochi-top-charm-list-item-data-number {
		font-size: var(--font-size-title-pc);
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-data .kochi-top-charm-list-item-data-unit {
		font-size: var(--font-size-h4-pc);
	}
}

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

	.post-content .kochi-top-charm .kochi-top-charm-header {
		grid-template-columns: max-content auto;
		-moz-column-gap: 48px;
		column-gap: 48px;
		align-items: center;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list {
		margin-block: 40px;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list::before {
		content: '';
		position: absolute;
		right: 0;
		background-image: url(../images/charm/charm-palm-tree.png);
		background-size: cover;
		background-repeat: no-repeat;
	}

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

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li {
		padding-block: 24px 16px;
		border-radius: 40px;
		grid-template-rows: subgrid;
		grid-row: span 5;
		row-gap: 0;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li::before {
		content: counter(charm-num, decimal-leading-zero);
		border: 3px solid #fff;
		border-radius: 100%;
		display: grid;
		place-items: center;
		line-height: 1;
		color: #fff;
		background-color: #2974c4;
		font-weight: 700;
		min-width: 3em;
		min-height: 3em;
		top: -16px;
		left: -16px;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-image {
		margin-block-end: 16px;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-title {
		margin-block-end: 12px;
		display: grid;
		place-items: center;
		text-align: center;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-description {
		display: grid;
		place-items: center;
		text-align: center;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-data > p {
		padding-block: 4px;
		justify-content: center;
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-note > p {
		font-feature-settings: 'pwid' on;
		font-size: var(--font-size-small);
		text-align: center;
	}
}

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

	.post-content .kochi-top-charm .kochi-top-charm-header .kochi-top-charm-title {
		font-size: var(--font-size-h2-sp);
	}

	.post-content .kochi-top-charm .kochi-top-charm-header .kochi-top-charm-title .kochi-top-charm-title-outlined {
		font-size: var(--font-size-title-sp);
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-title {
		font-size: var(--font-size-h4-sp);
	}

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

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-data .kochi-top-charm-list-item-data-number {
		font-size: var(--font-size-h1-sp);
	}

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li .kochi-top-charm-list-item-data .kochi-top-charm-list-item-data-unit {
		font-size: var(--font-size-h4-sp);
	}
}

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

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li::before {
		font-size: var(--font-size-h4-sp);
	}
}

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

	.post-content .kochi-top-charm .kochi-top-charm-list > ol > li::before {
		font-size: var(--font-size-h4-pc);
	}
}
