@charset "utf-8";

/*
 * バリュープラン・エネ日和共通
 * 各セクションの内容が境界へ密着しないよう、ページ全体で余白を統一する。
 */
.product-lease-service #product-valueplan > section:not(.product-hero),
.product-lease-service #product-valueplan > div:not(.product-hero):not(.l-inner),
.product-lease-service #product-enebiyori > section:not(.product-hero),
.product-lease-service #product-enebiyori > div:not(.product-hero):not(.l-inner) {
	margin-top: 0 !important;
	padding-top: clamp(64px, 7vw, 96px);
	padding-bottom: clamp(64px, 7vw, 96px);
}

.product-lease-service #product-valueplan > .valueplan__comicomi,
.product-lease-service #product-enebiyori > .enebiyori__initial {
	padding-top: clamp(64px, 6.5vw, 88px);
	padding-bottom: clamp(64px, 6.5vw, 88px);
}

/* エネ日和の導入部と「5つの特長」の間にある区切り線。 */
.product-lease-service #product-enebiyori > .enebiyori__initial + .l-inner {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* 内側にも余白を持つお問い合わせ枠は、外側を少し控えめにする。 */
.product-lease-service #product-valueplan > .valueplan__contact,
.product-lease-service #product-enebiyori > .enebiyori__contact {
	padding-top: clamp(48px, 5vw, 72px);
	padding-bottom: clamp(48px, 5vw, 72px);
}

@media screen and (max-width: 768px) {
	.product-lease-service #product-enebiyori .product-hero {
		display: flex;
		flex-direction: column;
		height: auto;
		padding-bottom: 0;
	}
	.product-lease-service #product-enebiyori .product-hero::before {
		position: relative;
		inset: auto;
		order: 3;
		flex: none;
		width: 100%;
		height: clamp(220px, 60vw, 420px);
		background-size: cover;
		background-position: right bottom;
		-webkit-mask-image: none;
		mask-image: none;
		opacity: 1;
	}
	.product-lease-service #product-enebiyori .product-hero__content { max-width: none; }
	.product-lease-service #product-enebiyori .enebiyori-hero-catch { display: block; font-size: 20px; letter-spacing: .02em; margin-bottom: 12px; }
}

/* パンくずを通常の配置に戻し、折り返した場合も見出しと重ねない。 */
@media screen and (max-width: 1024px) {
	.product-lease-service .product-hero > .breadcrumb {
		position: relative !important;
		inset: auto;
		transform: none;
		height: auto;
		margin-block: 0 !important;
		padding-top: 14px !important;
		padding-bottom: 20px !important;
		flex-wrap: wrap;
	}

	.product-lease-service .product-hero > .l-inner {
		height: auto;
		padding-top: 16px;
	}
}

@media screen and (max-width: 768px) {
	.product-lease-service #product-valueplan > section:not(.product-hero),
	.product-lease-service #product-valueplan > div:not(.product-hero):not(.l-inner),
	.product-lease-service #product-enebiyori > section:not(.product-hero),
	.product-lease-service #product-enebiyori > div:not(.product-hero):not(.l-inner) {
		padding-top: 52px;
		padding-bottom: 52px;
	}

	.product-lease-service #product-valueplan > .valueplan__comicomi,
	.product-lease-service #product-enebiyori > .enebiyori__initial {
		padding-top: 44px;
		padding-bottom: 44px;
	}

	.product-lease-service #product-valueplan > .valueplan__contact,
	.product-lease-service #product-enebiyori > .enebiyori__contact {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}