.hero {
	position: relative;
	width: 100%;
	height: 800px;
	overflow: hidden;
	background-color: var(--c-white);
	color: var(--c-black);
}

.hero__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.8s ease;
	pointer-events: none;
}

.hero__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.hero__image {
	display: block;
	width: 100%;
	height: 100%;
}

.hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hero__content {
	position: absolute;
	top: 0px;
	left: 0;
	height: 100%;
	z-index: 2;
	padding-left: var(--inner-pad-pc);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 33px;
	width: 600px;
}

.hero__title {
	font-family: var(--ff-en);
	font-weight: var(--fw-medium);
	font-size: var(--fs-heading);
	letter-spacing: var(--ls-hero);
	line-height: var(--lh-tight);
	display: flex;
	flex-direction: column;
}

.hero__lead {
	font-family: var(--ff-jp);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	display: flex;
	flex-direction: column;
}

.hero__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ff-en);
	font-weight: var(--fw-medium);
	font-size: var(--fs-small);
	letter-spacing: var(--ls-small);
	line-height: var(--lh-tight);
}

.hero__link-icon {
	display: inline-block;
	width: 23px;
	height: 14px;
	background-image: url("../../images/icon-arrow.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.hero__pager {
	position: absolute;
	bottom: 82px;
	left: var(--inner-pad-pc);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ff-num);
	font-size: var(--fs-body);
	color: var(--c-black);
}

.hero__pager-num {
	display: inline-block;
	width: 21px;
	text-align: left;
	line-height: 1;
}

.hero__pager-num--total {
	text-align: right;
}

.hero__pager-track {
	position: relative;
	display: inline-block;
	width: 80px;
	height: 2px;
	background-color: var(--c-gray-2);
}

.hero__pager-bar {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 50%;
	background-color: var(--c-gray-1);
	transition: width 0.5s ease;
}

/* SP: テキスト黒, バー位置・色変更, パディング調整 */
@media (max-width: 1023px) {
	.hero,
	.hero * {
		color: var(--c-black);
	}

	.hero__content {
		width: 100%;
		padding-left: var(--side-pad-sp);
		padding-top: 122px;
		justify-content: flex-start;
	}

	.hero__title {
		font-size: 28px;
		letter-spacing: 1.68px;
	}

	.hero__pager {
		left: var(--side-pad-sp);
		bottom: 41px;
	}

	.hero__pager-track {
		width: calc(100vw - var(--side-pad-sp) * 2 - 21px * 2 - 12px * 2);
		max-width: 263px;
		background-color: rgba(217, 217, 217, 0.4);
	}

	.hero__pager-bar {
		background-color: #d9d9d9;
	}
}

/* ===== 反転モード（PC/SP独立、スライド単位で切替）=====
   JS（main.js）が active スライドの data-invert-pc / data-invert-sp を読み、
   .hero に .hero--invert-pc / .hero--invert-sp を toggle します。
   スライドフェード（0.8s）と歩調を合わせるため文字色も transition させます。 */

.hero__title,
.hero__lead,
.hero__link,
.hero__pager,
.hero__pager-num,
.hero__pager-num--total,
.hero__pager-track,
.hero__pager-bar {
	transition: color 0.6s ease, background-color 0.6s ease;
}

.hero__link-icon {
	transition: filter 0.6s ease;
}


/* PC 反転：背景画像が暗いとき */
@media (min-width: 1024px) {
	.hero--invert-pc,
	.hero--invert-pc .hero__title,
	.hero--invert-pc .hero__lead,
	.hero--invert-pc .hero__link,
	.hero--invert-pc .hero__pager,
	.hero--invert-pc .hero__pager-num,
	.hero--invert-pc .hero__pager-num--total {
		color: var(--c-white);
	}

	.hero--invert-pc .hero__link-icon {
		filter: invert(1) brightness(2);
	}

	.hero--invert-pc .hero__pager-track {
		background-color: rgba(255, 255, 255, 0.3);
	}

	.hero--invert-pc .hero__pager-bar {
		background-color: var(--c-white);
	}
}

/* SP 反転：背景画像が暗いとき */
@media (max-width: 1023px) {
	.hero.hero--invert-sp,
	.hero.hero--invert-sp *,
	.hero--invert-sp .hero__title,
	.hero--invert-sp .hero__lead,
	.hero--invert-sp .hero__link,
	.hero--invert-sp .hero__pager,
	.hero--invert-sp .hero__pager-num,
	.hero--invert-sp .hero__pager-num--total {
		color: var(--c-white);
	}

	.hero--invert-sp .hero__link-icon {
		filter: invert(1) brightness(2);
	}

	.hero--invert-sp .hero__pager-track {
		background-color: rgba(255, 255, 255, 0.3);
	}

	.hero--invert-sp .hero__pager-bar {
		background-color: var(--c-white);
	}
}