.post-content .kochi-magazine-banners {
	--kochi-magazine-banner-background-color: #fff;
}

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

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

.post-content .kochi-magazine-banners > ul {
	padding-block: 0;
	display: grid;
}

.post-content .kochi-magazine-banners > ul > li {
	padding-block: 0;
	padding-inline-start: 0;
}

.post-content .kochi-magazine-banners > ul > li::before {
	display: none;
}

.post-content .kochi-magazine-banners > ul > li > a {
	padding-block: 16px;
	padding-inline: 16px;
	border: 1px solid transparent;
	border-radius: 16px;
	display: grid;
	align-items: center;
	color: #000;
	background-color: var(--kochi-magazine-banner-background-color);
	text-decoration: none;
}

.post-content .kochi-magazine-banners > ul > li > a .kochi-magazine-banner-content {
	display: grid;
	place-items: center start;
}

.post-content .kochi-magazine-banners > ul > li > a .kochi-magazine-banner-content .kochi-magazine-banner-title {
	font-weight: 700;
	transition: color 300ms ease-out;
}

.post-content .kochi-magazine-banners > ul > li > a::after {
	content: '';
	display: block;
	background-color: #004ea2;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: left 300ms ease-out;
	position: relative;
	left: 0;
	z-index: 1;
}

.post-content .kochi-magazine-banners > ul > li > a.is-icon-internal::after {
	-webkit-mask-image: url(../images/icon/arrow-right.svg);
	mask-image: url(../images/icon/arrow-right.svg);
}

.post-content .kochi-magazine-banners > ul > li > a.is-icon-external::after {
	-webkit-mask-image: url(../images/icon/is-external.svg);
	mask-image: url(../images/icon/is-external.svg);
}

.post-content .kochi-magazine-banners > ul > li > a.is-icon-pdf::after {
	-webkit-mask-image: url(../images/icon/is-pdf.svg);
	mask-image: url(../images/icon/is-pdf.svg);
}

.post-content .kochi-magazine-banners > ul > li > a:hover,
.post-content .kochi-magazine-banners > ul > li > a:active,
.post-content .kochi-magazine-banners > ul > li > a:focus-visible {
	border-color: #004ea2;
}

.post-content .kochi-magazine-banners > ul > li > a:hover .kochi-magazine-banner-content .kochi-magazine-banner-title,
.post-content .kochi-magazine-banners > ul > li > a:active .kochi-magazine-banner-content .kochi-magazine-banner-title,
.post-content .kochi-magazine-banners > ul > li > a:focus-visible .kochi-magazine-banner-content .kochi-magazine-banner-title {
	color: #004ea2;
}

.post-content .kochi-magazine-banners > ul > li > a:hover::after,
.post-content .kochi-magazine-banners > ul > li > a:active::after,
.post-content .kochi-magazine-banners > ul > li > a:focus-visible::after {
	left: 8px;
}

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

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

	.post-content .kochi-magazine-banners > ul > li > a {
		grid-template-columns: 42px auto 24px;
	}

	.post-content .kochi-magazine-banners > ul > li > a .kochi-magazine-banner-image {
		aspect-ratio: 42/60;
	}

	.post-content .kochi-magazine-banners > ul > li > a .kochi-magazine-banner-content {
		padding-inline: 16px 8px;
	}

	.post-content .kochi-magazine-banners > ul > li > a .kochi-magazine-banner-content .kochi-magazine-banner-prefix {
		font-size: var(--font-size-p-sp);
	}

	.post-content .kochi-magazine-banners > ul > li > a .kochi-magazine-banner-content .kochi-magazine-banner-title {
		font-size: var(--font-size-h4-sp);
	}

	.post-content .kochi-magazine-banners > ul > li > a::after {
		width: 24px;
		height: 24px;
	}
}

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

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

	.post-content .kochi-magazine-banners > ul > li > a {
		grid-template-columns: 71px auto 40px;
	}

	.post-content .kochi-magazine-banners > ul > li > a .kochi-magazine-banner-image {
		aspect-ratio: 71/100;
	}

	.post-content .kochi-magazine-banners > ul > li > a .kochi-magazine-banner-content {
		padding-inline: 24px;
	}

	.post-content .kochi-magazine-banners > ul > li > a .kochi-magazine-banner-content .kochi-magazine-banner-prefix {
		font-size: var(--font-size-p-pc);
	}

	.post-content .kochi-magazine-banners > ul > li > a .kochi-magazine-banner-content .kochi-magazine-banner-title {
		font-size: var(--font-size-h4-pc);
	}

	.post-content .kochi-magazine-banners > ul > li > a::after {
		width: 40px;
		height: 40px;
	}
}

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

	.post-content .kochi-magazine-banners > ul {
		gap: 8px;
	}
}

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

	.post-content .kochi-magazine-banners > ul {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}