/* --------------------------------------------------------------------------------------
	サステナビリティ
--------------------------------------------------------------------------------------- */

.key-sub { background-image: url(../img/sustainability/key_image.jpg); }

.sustainability-wrap { overflow: hidden ;}

.lead h2 {
	font-size: 2.4rem;
	font-weight: 600;
	letter-spacing: 1px;
}

.lead h2 span { color: #00b0e3; }

.lead p {
	font-size: 1.8rem;
	margin-top: 24px;
}

.sustainability-details {
	background: url(../img/sustainability/main_bg.svg) no-repeat center top;
	min-height: 2533px;
	padding-top: 190px;
}

@media (min-width: 1681px) { .sustainability-details { background-size: cover; } }

.target h3 {
	margin: 50px auto 0;
	max-width: 782px;
}

.target > ul {
	display: flex;
	justify-content: center;
	margin-top: 50px;
}

.target > ul li {
	margin-left: 3px;
	width: 140px;
}

.target > ul li:first-child { margin-left: 0; }

.sustainability-column-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 80px;
	position: relative;
}

.sustainability-column-wrap::before {
	background: url(../img/sustainability/deco_left.svg) no-repeat;
	content: '';
	height: 895px;
	position: absolute;
	right: 810px;
	top: -46px;
	width: 1057px;
	z-index: -1;
}

.sustainability-column-wrap::after {
	background: url(../img/sustainability/deco_right.svg) no-repeat;
	content: '';
	height: 858px;
	left: 733px;
	position: absolute;
	top: 985px;
	width: 1016px;
	z-index: -1;
}

.sustainability-column-wrap .column {
	background-color: #fff;
	border-radius: 16px;
	padding: 40px;
	position: relative;
}

.sustainability-column-wrap .column:first-child {
	display: flex;
	flex-direction: column;
	padding: 56px 40px 56px 290px;
	padding-left: 290px;
}


.sustainability-column-wrap .column h4 {
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: 1px;
}

.sustainability-column-wrap .column:first-child div {
	left: 40px;
	position: absolute;
	top: calc(50% - 112.5px);
	width: 225px;
}

.sustainability-column-wrap .column:first-child p {
	font-size: 1.8rem;
	margin-top: 24px;
}

.sustainability-column-wrap .column:first-child h4 { font-size: 2.4rem; }

.sustainability-column-wrap .column:nth-child(n+2) {
	margin-top: 32px;
	width: 484px;
}

.sustainability-column-wrap .column:nth-child(n+2) section {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.sustainability-column-wrap .column:nth-child(n+2) section div { width: 140px; }

.sustainability-column-wrap .column:nth-child(n+2) section h4 { width: 240px; }

.sustainability-column-wrap .column:nth-child(n+2) > p:not(.p) {
	font-weight: 400;
	letter-spacing: 0;
	margin-top: 24px;
}

.sustainability-column-wrap .column:nth-child(n+2) .p {
	align-items: center;
	background: url(../img/common/pmark.svg) no-repeat left center / 85px auto;
	display: flex;
	margin-top: 20px;
	min-height: 85px;
	padding-left: 110px;
}

.attempt {
	margin-bottom: 70px;
	margin-top: 70px;
}

.attempt h2 { text-align: center; }

.attempt ul {
	align-items: center;
	display: flex;
	justify-content: center;
	margin-top: 60px;
}

.attempt li { margin-left: 44px; }
.attempt li:first-child { margin-left: 0; }
.attempt li img {max-height: 104px; }

.attempt p {
	font-weight: 400;
	margin-top: 28px;
}

@media (max-width: 1016px) {

	.sustainability-details {
		background-position: center bottom;
		background-size: cover;
		padding-bottom: 100px;
	}

	.sustainability-column-wrap .column:nth-child(n+2) { width: 48%; }

	.sustainability-column-wrap .column:nth-child(n+2) section h4 { width: 52%; }
}

@media (max-width: 749px) {

	.key-sub { background-position: left top; }

	.lead h2 { font-size: 5.6vw; }

	.lead p {
		font-size: 4.267vw;
		margin-left: 4.267vw;
		margin-right: 4.267vw;
		text-align: left;
	}

	.lead p br { display: none; }

	.sustainability-details {
		background-position: left top;
		background-size: 100% auto;
		margin-top: 9.333vw;
		min-height: inherit;
		padding-bottom: 13.333vw;
		padding-top: 17.333vw;
		position: relative;
	}

	.sustainability-details::after {
		background-color: #e6f7fd;
		bottom: 0;
		content: '';
		display: block;
		height: 90%;
		left: 0;
		position: absolute;
		width: 100%;
		z-index: -1;
	}

	.target h3 {
		margin-top: 9.333vw;
		max-width: 70%;
	}

	.target > ul {
		flex-wrap: wrap;
		justify-content: space-between;
		margin-left: 4.267vw;
		margin-right: 4.267vw;
		margin-top: 5vw;
	}

	.target > ul li {
		margin-left: 0;
		width: 32%;
	}

	.target > ul li:nth-child(n+4) { margin-top: 1.333vw; }

	.sustainability-column-wrap {
		margin-left: 4.267vw;
		margin-right: 4.267vw;
		margin-top: 8vw;
	}

	.sustainability-column-wrap .column {
		border-radius: 2.133vw !important;
		display: block !important;
		padding: 6.4vw !important;
	}

	.sustainability-column-wrap .column:first-child div {
		float: left;
		left: auto;
		margin-right: 4.333vw;
		position: relative;
		top: auto;
		width: 33.333vw;
	}

	.sustainability-column-wrap .column:first-child h4 {
		align-items: center;
		display: flex;
		font-size: 4.633vw;
		min-height: 33.333vw;
	}

	.sustainability-column-wrap .column:first-child p {
		font-size: 4vw;
		margin-top: 4vw;
	}

	.sustainability-column-wrap .column:nth-child(n+2) section div { width: 33.333vw; }

	.sustainability-column-wrap .column:nth-child(n+2) {
		margin-top: 6.133vw;
		width: 100%;
	}

	.sustainability-column-wrap .column:nth-child(n+2) section h4 { font-size: 4.633vw; }

	.sustainability-column-wrap .column:nth-child(n+2) section h4 br { display: none; }

	.sustainability-column-wrap .column:nth-child(n+2) > p:not(.p) { margin-top: 4vw; }

	.attempt { margin: 10vw 4.267vw 0; }

	.attempt ul {
		margin: 9vw auto 0;
		max-width: 84%;
	}

	.attempt li { margin-left: 5.333vw; }

	.attempt p { margin-top: 5.333vw; }
	.attempt p br { display: none; }
}