/**************************/
/* trial heading */
/**************************/
.trialHeading { background: var(--base1); }
.trialHeading-inner {
	position: relative;
	height: 220px;
	padding: 25px 35px;
	overflow: hidden;
}
.trialPhoto {
	position: absolute;
	right: 0;
	top: 0;
	width: 43%;
	height: 220px;
	overflow: hidden;
}
.trialPhoto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 58% 46%;
}
.trialHeading-inner::after {
	content: "";
	position: absolute;
	inset: 0 0 0 57%;
	background: linear-gradient(90deg, var(--base1), transparent 40%, var(--base1));
}
.trialLogo {
	display: block;
	position: absolute;
	top: 15px;
	left: 35px;
	z-index: 2;
	width: 196px;
}
.trialLogo img { width: 100%; height: auto; }
.trialHeading h1 {
	position: relative;
	z-index: 1;
	margin-top: 105px;
	color: var(--base3);
	font-family: var(--fontSerif);
	font-size: clamp(28px, calc(2.162vw + 11.135px), 36px);
	font-weight: var(--BoldF);
	line-height: 45px;
}
@media (min-width: 781px) {
	.trialHeading h1 { white-space: nowrap; }
}
.trialReservationBlock { background: var(--base2); }

@media (max-width: 780px) {
	.siteHeader { background: var(--base1); }
	.trialHeading-inner { width: 100%; height: 180px; padding: 15px; }
	.trialPhoto { width: 196px; height: 180px; }
	.trialPhoto img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 55% center;
	}
	.trialHeading-inner::after {
		left: 38%;
		background: linear-gradient(90deg, var(--base1) 0%, rgb(34 40 67 / 72%) 22%, transparent 65%, rgb(34 40 67 / 20%) 100%);
	}
	.trialLogo { top: 15px; left: 15px; width: 141px; }
	.trialHeading h1 { margin-top: 75px; line-height: 34px; }
}