/* ========================================
   Page Hero
======================================== */

.dd-page-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(520px, 52vw, 680px);

	overflow: hidden;
	isolation: isolate;

	background: #102533;
	color: #fff;
}


/* ========================================
   Background
======================================== */

.dd-page-hero__media {
	position: absolute;
	inset: 0;
	z-index: -3;
}


.dd-page-hero__image {
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}


/* ========================================
   Overlay
======================================== */

.dd-page-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -2;

	background:
		linear-gradient(
			90deg,
			rgb(7 27 42 / 78%) 0%,
			rgb(7 27 42 / 58%) 38%,
			rgb(7 27 42 / 22%) 68%,
			rgb(7 27 42 / 5%) 100%
		);
}


/* ========================================
   Inner
======================================== */

.dd-page-hero__inner {
	width: min(1200px, calc(100% - 48px));
	margin-inline: auto;

	padding:
		80px 0
		calc(80px + var(--dd-wave-depth, 100px));
}


/* ========================================
   Copy
======================================== */

.dd-page-hero__copy {
	display: flex;
	align-items: stretch;
	gap: 48px;

	max-width: 760px;
}


.dd-page-hero__line {
	flex: 0 0 5px;

	background: #77d5d5;
	border-radius: 999px;
}


.dd-page-hero__en {
	margin: 0 0 18px;

	color: rgb(255 255 255 / 78%);

	font-size: 14px;
	font-weight: 600;

	letter-spacing: .35em;
}


.dd-page-hero__title {
	margin: 0 0 30px;

	color: #fff;

	font-size: clamp(42px, 5vw, 68px);
	font-weight: 600;

	line-height: 1.25;
	letter-spacing: .08em;

	text-shadow: 0 3px 24px rgb(0 0 0 / 25%);
}


.dd-page-hero__lead {
	margin: 0;

	color: #fff;

	font-size: clamp(18px, 2vw, 25px);
	font-weight: 500;

	line-height: 1.9;
	letter-spacing: .04em;

	text-shadow: 0 2px 18px rgb(0 0 0 / 30%);
}


/* ========================================
   Wave
======================================== */

.dd-page-hero .dd-hero__wave {
	position: absolute;

	bottom: -1px;
	left: 0;

	width: 100%;
	height: var(--dd-wave-depth, 100px);

	/* color: #f2f3ef; */
    color: #fff;

	pointer-events: none;
}
/* 会社案内だけ、次のセクションに合わせて薄いグレー */
.dd-company .dd-page-hero .dd-hero__wave {
	color: #f2f3ef;
}

/* ========================================
   Mobile
======================================== */

@media (max-width: 767px) {

	.dd-page-hero {
		min-height: 520px;
	}


	.dd-page-hero__image {
		object-position: 65% center;
	}


	.dd-page-hero__inner {
		width: calc(100% - 40px);

		padding:
			64px 0
			calc(64px + var(--dd-wave-mobile-depth, 48px));
	}


	.dd-page-hero__copy {
		gap: 22px;
	}


	.dd-page-hero__line {
		flex-basis: 3px;
	}


	.dd-page-hero__en {
		font-size: 12px;
	}


	.dd-page-hero__title {
		font-size: clamp(36px, 11vw, 50px);
	}


	.dd-page-hero__lead {
		font-size: 17px;
		line-height: 1.8;
	}


	.dd-page-hero .dd-hero__wave {
		height: var(--dd-wave-mobile-depth, 48px);
	}

}