@property --page-width {
	syntax: "<length> | <percentage>";
	inherits: true;
	initial-value: 0%;
}

body {
	container-type: inline-size;
	@media screen and (min-width: 751px) {
		min-width: 1320px;
		width: 100%;
	}
	.tpl-inner-wrap {
		--page-width: 100cqw;
	}
}

.second-contents {
	padding-bottom: 0;
}
.second-main-visual {
	background-image: url(/assets/sustainability/top/img/main-visual_pc.jpg);

	@media screen and (max-width: 750px) {
		background-image: url(/assets/sustainability/top/img/main-visual.jpg);
	}
}
.sus-lead {
	margin: 0 30px 95px;
	font-size: 26px;
	line-height: 1.56;
	text-align: center;

	@media screen and (max-width: 750px) {
		margin: 0 0 15px;
		padding: 15px;
		font-size: 16px;
		text-align: left;
	}
}
.sus-sec {
	padding: 80px 0;
	@media screen and (max-width: 750px) {
		padding: 30px 15px;
	}

	&.bg-color {
		background-color: #E7EEFA;
	}
	.bg-color {
		background-color: #E7EEFA;
	}

	&.bg-full {
		width: var(--page-width);
  	margin-inline:calc(50% - calc(var(--page-width)/2)); ;

		@media screen and (max-width: 750px) {
			padding: 30px;
		}

		.sus-sec-inner {
			@media screen and (min-width: 751px) {
				max-width: 1260px;
				margin-right: auto;
				margin-left: auto;
			}
		}
	}

	.tpl-heading-01 {
		padding-top: 0;

		@media screen and (max-width: 750px) {
			font-size: 22px;
		}
	}

	.tpl-heading-02 {
		&.no-border {
			border: none;
			margin-bottom: 30px;
			padding-bottom: 0;
		}
		@media screen and (max-width: 750px) {
			font-size: 16px;
		}
	}

	&:last-of-type {
		padding-bottom: 130px;

		@media screen and (max-width: 750px) {
			padding-bottom: 40px;
		}
	}
}
.sus-sec-inner {
	&.col2 {
		display: flex;
		gap: 30px;

		@media screen and (min-width: 751px) {
			flex-wrap: wrap;
			justify-content: space-between;

			> * {
				flex: 0 0 48.7%;

				&.full {
					flex: 1;
				}
			}
		}

		@media screen and (max-width: 750px) {
			flex-direction: column;
		}

		&.no-gap {
			gap: 0;
			> * {
				flex: 0 0 50%;
			}
		}
	}

	&.vertical {
		display: flex;
		flex-direction: column;
		gap: 30px;
	}

	&:has(+ .sus-sec-inner) {
		margin-bottom: 30px;
	}
}
.sus-feature {
	@media screen and (min-width: 751px) {
		display: flex;
	}
	&.vertical {
		flex-direction: column;

		.sus-feature-body {
			justify-content: revert;
			padding: 25px 25px 30px;
			@media screen and (min-width: 751px) {
				align-items: center;
				flex: 1;
			}

			.tpl-base-btn {
				margin-top: auto;
			}
		}
	}
	&.has-border {
		border: 2px solid #013895;
	}
	&:has(> .compact) {
		.sus-feature-body {
			@media screen and (min-width: 751px) {
				padding: 40px;
			}
		}
	}
	.tpl-text {
		@media screen and (max-width: 750px) {
			margin-bottom: 20px;
		}
	}
}
.sus-feature-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 0 0 50%;
	background-color: #fff;
	padding: 50px 60px;

	@media screen and (max-width: 750px) {
		padding: 25px;
	}

	@media screen and (min-width: 751px) {
		.tpl-base-btn {
			width: 300px;
			margin: 0 auto;
		}
	}

	&:has(+ .compact) {
		padding: 30px;
	}
}
.sus-feature-image {
	img {
		aspect-ratio: 5 / 3;
		object-fit: cover;
		width: 100%;
	}

	&.compact {
		@media screen and (min-width: 751px) {
			flex: 0 0 45%;

			& + .sus-feature-body {
				flex: 1;
			}
		}
	}
}
.sus-heading {
	font-size: 24px;
	color: #013895;
	line-height: 1.5;
	margin-bottom: 20px;

	@media screen and (max-width: 750px) {
		font-size: 18px;
	}
}