.post-content .kochi-top-hero-movie {
	--movie-banner-background-color: #2974c4;
}

[data-theme='blue-theme'] .post-content .kochi-top-hero-movie,
.post-content [data-theme='blue-theme'] .kochi-top-hero-movie {
	--movie-banner-background-color: #003d7f;
}

[data-theme='black-theme'] .post-content .kochi-top-hero-movie,
.post-content [data-theme='black-theme'] .kochi-top-hero-movie {
	--movie-banner-background-color: #1a1a1a;
}

.post-content .kochi-top-hero-movie {
	margin-inline: calc(50% - 50cqi);
	position: relative;
	z-index: 1;
}

.post-content .kochi-top-hero-movie video {
	display: block;
	width: 100%;
	height: auto;
}

.post-content .kochi-top-hero-movie .kochi-top-hero-movie-inner {
	position: relative;
}

.post-content .kochi-top-hero-movie .kochi-top-hero-movie-pc {
	position: relative;
	z-index: 1;
}

.post-content .kochi-top-hero-movie .kochi-top-hero-movie-sp {
	position: relative;
	z-index: 1;
}

.post-content .kochi-top-hero-movie .kochi-top-hero-movie-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: absolute;
	right: 0;
	left: 0;
	z-index: 1;
	margin-inline: auto;
	padding: 0;
	border: 0;
	border-radius: 100%;
	width: 40px;
	height: 40px;
	overflow: hidden;
	cursor: pointer;
}

.post-content .kochi-top-hero-movie .kochi-top-hero-movie-control::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: #000;
	-webkit-mask-image: url(../images/top-hero-movie/icon/movie-pause.svg);
	mask-image: url(../images/top-hero-movie/icon/movie-pause.svg);
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.post-content .kochi-top-hero-movie .kochi-top-hero-movie-control.is-stop::before {
	-webkit-mask-image: url(../images/top-hero-movie/icon/movie-play.svg);
	mask-image: url(../images/top-hero-movie/icon/movie-play.svg);
}

.post-content .kochi-top-hero-movie .kochi-top-hero-movie-scroll::after {
	content: '';
	align-self: center;
	width: 1px;
	height: 100%;
	background-color: #fff;
	animation: scroll-down 2s infinite;
}

.post-content .kochi-top-hero-movie .kochi-top-hero-youtube {
	position: absolute;
	z-index: 1;
}

.post-content .kochi-top-hero-movie .kochi-top-hero-youtube a,
.post-content .kochi-top-hero-movie .kochi-top-hero-youtube img {
	display: block;
}

.post-content .kochi-top-hero-movie .kochi-top-hero-banner .kochi-top-hero-banner-toggle::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(../images/top-hero-movie/icon/movie-banner-close.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.post-content .kochi-top-hero-movie .kochi-top-hero-banner .kochi-top-hero-banner-toggle.is-banner-hide {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.post-content .kochi-top-hero-movie .kochi-top-hero-banner .kochi-top-hero-banner-toggle.is-banner-hide::before {
	background-image: url(../images/top-hero-movie/icon/movie-banner-open.svg);
}

.post-content .kochi-top-hero-movie .kochi-top-hero-banner > a {
	display: grid;
	color: #fff;
	background-color: var(--movie-banner-background-color);
	text-decoration: none;
	overflow: hidden;
}

.post-content .kochi-top-hero-movie .kochi-top-hero-banner > a::after {
	content: '';
	align-self: center;
	width: 24px;
	height: 24px;
	background-color: #fff;
	-webkit-mask-image: url(../images/icon/is-external.svg);
	mask-image: url(../images/icon/is-external.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: left 300ms ease-out;
	position: relative;
	left: 0;
	z-index: 1;
}

.post-content .kochi-top-hero-movie .kochi-top-hero-banner > a:hover .kochi-top-hero-banner-image::before,
.post-content .kochi-top-hero-movie .kochi-top-hero-banner > a:active .kochi-top-hero-banner-image::before,
.post-content .kochi-top-hero-movie .kochi-top-hero-banner > a:focus-visible .kochi-top-hero-banner-image::before {
	background-color: rgba(255, 255, 255, 0.3);
}

.post-content .kochi-top-hero-movie .kochi-top-hero-banner > a:hover::after,
.post-content .kochi-top-hero-movie .kochi-top-hero-banner > a:active::after,
.post-content .kochi-top-hero-movie .kochi-top-hero-banner > a:focus-visible::after {
	left: 8px;
}

.post-content .kochi-top-hero-movie .kochi-top-hero-banner .kochi-top-hero-banner-image {
	overflow: hidden;
	position: relative;
}

.post-content .kochi-top-hero-movie .kochi-top-hero-banner .kochi-top-hero-banner-image::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: rgba(255, 255, 255, 0);
	transition: background-color 300ms ease-out;
}

.post-content .kochi-top-hero-movie .kochi-top-hero-banner .kochi-top-hero-banner-image img {
	position: relative;
	z-index: 1;
}

.post-content .kochi-top-hero-movie .kochi-top-hero-banner .kochi-top-hero-banner-text-content {
	font-weight: 700;
}

@keyframes scroll-down {

	0% {
		transform: scale(1, 0);
		transform-origin: 0 0;
	}

	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}

	51% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}

	100% {
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}

.home .l-common-header {
	height: 0;
}

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

	.post-content .kochi-top-hero-movie .kochi-top-hero-movie-pc {
		display: none;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-movie-sp {
		display: block;
		aspect-ratio: 9/16;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-movie-scroll {
		display: none;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-banner {
		margin-block: 12px;
		margin-inline: auto;
		padding-inline: 24px;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-banner .kochi-top-hero-banner-toggle {
		display: none;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-banner > a {
		padding-block: 12px;
		padding-inline: 12px;
		border-radius: 8px;
		grid-template-columns: 80px auto 24px;
		-moz-column-gap: 8px;
		column-gap: 8px;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-banner .kochi-top-hero-banner-image {
		border-radius: 8px;
		width: 80px;
		aspect-ratio: 16/9;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-banner .kochi-top-hero-banner-text-content {
		font-size: var(--font-size-h4-sp);
	}
}

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

	.post-content .kochi-top-hero-movie .kochi-top-hero-movie-pc {
		display: block;
		aspect-ratio: 16/9;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-movie-sp {
		display: none;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-movie-scroll {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		display: grid;
		color: #fff;
		font-feature-settings: 'pwid' on;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		text-transform: uppercase;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-banner {
		position: absolute;
		right: 0;
		bottom: 80px;
		z-index: 1;
		display: grid;
		grid-template-columns: 32px auto;
		gap: 8px;
		align-items: center;
		transition: translate 300ms ease-out;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-banner:has(.is-banner-hide) {
		translate: calc(100% - 32px);
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-banner .kochi-top-hero-banner-toggle {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding: 0;
		border: 0;
		border-radius: 8px;
		width: 32px;
		height: 32px;
		overflow: hidden;
		cursor: pointer;
		transition: border-radius 300ms ease-out;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-banner > a {
		padding-block: 16px;
		border-top-left-radius: 8px;
		border-bottom-left-radius: 8px;
		-moz-column-gap: 16px;
		column-gap: 16px;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-banner .kochi-top-hero-banner-text-prefix + .kochi-top-hero-banner-text-content {
		margin-block-start: 4px;
	}
}

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

	.post-content .kochi-top-hero-movie .kochi-top-hero-movie-control {
		bottom: 16px;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-youtube {
		right: 16px;
		bottom: 16px;
		width: 80px;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-banner .kochi-top-hero-banner-text-prefix {
		font-feature-settings: 'pwid' on;
		font-size: var(--font-size-p-sp);
	}
}

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

	.post-content .kochi-top-hero-movie .kochi-top-hero-movie-control {
		bottom: 24px;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-movie-scroll {
		padding-block-end: 16px;
		grid-template-columns: auto 84px;
		gap: 8px;
		font-size: var(--font-size-p-pc);
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-youtube {
		right: 24px;
		bottom: 24px;
		width: 120px;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-banner > a {
		padding-inline: 16px 24px;
		grid-template-columns: 160px auto 24px;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-banner .kochi-top-hero-banner-image {
		border-radius: 16px;
		width: 160px;
		aspect-ratio: 16/9;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-banner .kochi-top-hero-banner-text-prefix {
		font-size: var(--font-size-p-pc);
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-banner .kochi-top-hero-banner-text-content {
		min-width: 232px;
		font-size: var(--font-size-h2-sp);
	}
}

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

	.post-content .kochi-top-hero-movie .kochi-top-hero-movie-scroll {
		padding-block-end: 8px;
		grid-template-columns: auto 51px;
		gap: 4px;
		font-size: var(--font-size-p-sp);
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-banner > a {
		padding-inline: 16px;
		grid-template-columns: 100px auto 24px;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-banner .kochi-top-hero-banner-image {
		border-radius: 8px;
		width: 100px;
		aspect-ratio: 25/14;
	}

	.post-content .kochi-top-hero-movie .kochi-top-hero-banner .kochi-top-hero-banner-text-content {
		min-width: 180px;
		font-size: var(--font-size-h3-sp);
	}
}