/* ===============================
   privacy-hero: パンくず・ページタイトル
   =============================== */

.privacy-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--color-bg);
	background-image: url("../../img/bg_top-concrete.webp");
	background-repeat: repeat;
}

.privacy-hero::before,
.privacy-hero::after {
	position: absolute;
	display: block;
	background: url("../../img/bg_top-flower02.webp") no-repeat center / contain;
	content: "";
	pointer-events: none;
	opacity: 0.24;
}

.privacy-hero::before {
	top: calc(var(--space-10) * -1);
	left: calc(var(--space-12) * -1);
	width: calc(var(--space-13) * 2);
	height: calc(var(--space-13) * 2);
	transform: rotate(180deg);
}

.privacy-hero::after {
	right: calc(var(--space-12) * -1);
	bottom: calc(var(--space-13) * -1);
	width: calc(var(--space-13) * 2);
	height: calc(var(--space-13) * 2);
}

.privacy-hero__inner {
	position: relative;
	z-index: 1;
}

.privacy-hero .page-breadcrumb {
	padding-top: var(--space-5);
}

.privacy-hero .page-breadcrumb__list {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-sub);
	font-size: var(--fs-body);
	letter-spacing: 0.08em;
}

.privacy-hero .page-breadcrumb__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.privacy-hero .page-breadcrumb__item + .page-breadcrumb__item::before {
	width: var(--space-2);
	height: var(--space-2);
	border-top: 1px solid var(--color-main);
	border-right: 1px solid var(--color-main);
	content: "";
	transform: rotate(45deg);
}

.privacy-hero__body {
	display: flex;
	min-height: calc(var(--space-13) + var(--space-9));
	flex-direction: column;
	justify-content: center;
	padding-block: var(--space-8) var(--space-10);
}

.privacy-hero__title {
	color: var(--color-sub);
	font-size: var(--fs-h2-mobile);
	font-weight: var(--fw-medium);
	letter-spacing: 0.12em;
}

.privacy-hero__title::after {
	display: block;
	width: var(--space-10);
	margin-top: var(--space-5);
	border-top: 1px solid var(--color-main);
	content: "";
}

.privacy-hero__lead {
	margin-top: var(--space-5);
	color: var(--color-text-muted);
	font-size: var(--fs-body);
	line-height: var(--lh-loose);
	letter-spacing: 0.04em;
}

@media (min-width: 768px) {
	.privacy-hero .page-breadcrumb {
		padding-top: var(--space-8);
	}

	.privacy-hero .page-breadcrumb__list {
		font-size: var(--fs-body-pc);
	}

	.privacy-hero__body {
		min-height: calc(var(--space-13) * 2);
		padding-block: var(--space-10) var(--space-12);
	}

	.privacy-hero__title {
		font-size: var(--fs-hero);
	}

	.privacy-hero__lead {
		margin-top: var(--space-6);
		font-size: var(--fs-body-pc);
	}

	.privacy-hero__break {
		display: none;
	}
}