/* ===============================
   access-hero: パンくず・ページヒーロー
   =============================== */

.access-hero {
	--photo-fv-object-position: 50% 25%;

	position: relative;
	background: var(--color-page-bg);
}

.access-hero__visual {
	display: flex;
	flex-direction: column;
	margin-inline: 29px;
}

.access-hero__media {
	order: 1;
	height: 230px;
	overflow: hidden;
	background: var(--color-bg-subtle);
}

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

.access-hero__content {
	order: 2;
	min-height: 77px;
	padding: 9px 12px 6px;
}

.access-hero__title {
	color: var(--color-primary);
	font-size: 19px;
	letter-spacing: 0.1em;
}

.access-hero__lead {
	margin-top: 4px;
	font-size: 11px;
	line-height: 1.25;
	letter-spacing: 0.03em;
}

@media (max-width: 767px) {
	.access-hero__visual {
		margin-inline: 0;
	}

}

@media (min-width: 768px) {
	.access-hero > .page-breadcrumb--hero {
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		width: auto;
		margin: 0;
		padding: 41px 56px;
	}

	.access-hero > .page-breadcrumb--hero::after {
		display: none;
	}

	.access-hero > .page-breadcrumb--hero .page-breadcrumb__list {
		gap: 12px;
		font-size: var(--fs-body-pc);
	}

	.access-hero > .page-breadcrumb--hero .page-breadcrumb__item {
		gap: 12px;
	}

	.access-hero__visual {
		display: grid;
		grid-template-columns: 42% 58%;
		height: 715px;
		margin-inline: 0;
	}

	.access-hero__media {
		position: relative;
		order: 2;
		height: 715px;
	}

	.access-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			90deg,
			var(--color-page-bg) 0,
			color-mix(in srgb, var(--color-page-bg) 72%, transparent) 12%,
			transparent 32%
		);
		pointer-events: none;
	}

	.access-hero__image {
		object-position: center 42%;
	}

	.access-hero__content {
		position: relative;
		z-index: 1;
		order: 1;
		align-self: center;
		width: 680px;
		min-height: 0;
		padding: 0 0 0 80px;
		transform: translateY(-29px);
	}

	.access-hero__title {
		color: var(--color-text);
		font-size: 58px;
		letter-spacing: 0.05em;
		white-space: nowrap;
	}

	.access-hero__lead {
		margin-top: 26px;
		font-size: 23px;
		line-height: 2;
		letter-spacing: 0.04em;
	}
}