@charset "UTF-8";
/*
 * sdgs.css
 *
 */

/* !SDGs
---------------------------------------------------------- */
.sdgs {
	width:100%;
	padding:0 50px 100px 50px;
}
	.sdgs div.inner {
		width:100%;
		max-width:1240px;
		margin:0 auto;
	}
		.sdgs div.inner h2 {
			font-size:44px;
			font-weight: 600;
			letter-spacing: 0.04em;
			line-height: 1.6;
			text-align: center;
			margin-bottom: 30px;
		}
		.sdgs div.inner h3.subCopy {
			text-align: center;
			margin-bottom: 40px;
		}
			.sdgs div.inner h3.subCopy span {
				position: relative;
				font-size:26px;
				font-weight: 600;
				color: #004E8A;
				letter-spacing: 0.04em;
				padding:0 30px;
			}
				.sdgs div.inner h3.subCopy span:before,
				.sdgs div.inner h3.subCopy span:after {
					position: absolute;
					content:"";
					width:15px;
					height: 1px;
					background: #004E8A;
					top:50%;
				}
				.sdgs div.inner h3.subCopy span:before {
					left:0;
				}
				.sdgs div.inner h3.subCopy span:after {
					right:0;
				}
		.sdgs div.inner img.earth {
			display: block;
			width:100%;
			max-width: 320px;
			margin: 0 auto 80px auto;
		}
		.sdgs div.inner div.detail {
			width:100%;
			max-width:1100px;
			margin: 0 auto;
			background: url("../../sdgs/img/sdgs_top_bg.png") top center no-repeat;
			padding-top:60px;
			background-size: contain;
		}
		.sdgs div.inner div.detail img.kawasaki {
			display: block;
			width:100%;
			max-width: 400px;
			margin: 0 auto 40px auto;
		}
		.sdgs div.inner div.detail p.tit {
			font-size:30px;
			font-weight: 600;
			text-align: center;
			line-height: 1.6;
			margin-bottom: 50px;
		}
			.sdgs div.inner div.detail p.tit br {
				display: none;
			}
		.sdgs div.inner div.detail ul.sdgsList {
			width:100%;
			display: flex;
		}
			.sdgs div.inner div.detail ul.sdgsList li {
				width:13%;
				margin-right: 1.5%;
			}
			.sdgs div.inner div.detail ul.sdgsList li:last-child {
				margin-right: 0;
			}

@media screen and (max-width:1039px){
.sdgs {
	padding:0 30px 80px 30px;
}
		.sdgs div.inner h2 {
			font-size:36px;
			margin-bottom: 25px;
		}
		.sdgs div.inner h3.subCopy {
			margin-bottom: 35px;
		}
			.sdgs div.inner h3.subCopy span {
				font-size:20px;
			}
		.sdgs div.inner img.earth {
			max-width: 280px;
			margin: 0 auto 70px auto;
		}
		.sdgs div.inner div.detail {
			padding-top:50px;
		}
		.sdgs div.inner div.detail img.kawasaki {
			max-width: 360px;
			margin: 0 auto 40px auto;
		}
		.sdgs div.inner div.detail p.tit {
			font-size:26px;
			margin-bottom: 40px;
		}
}

@media screen and (max-width:767px){
.sdgs {
	padding:0 25px 70px 25px;
}
		.sdgs div.inner h2 {
			font-size:20px;
			margin-bottom: 20px;
		}
		.sdgs div.inner h3.subCopy {
			margin-bottom: 30px;
		}
			.sdgs div.inner h3.subCopy span {
				font-size:15px;
				padding:0 22px;
			}
				.sdgs div.inner h3.subCopy span:before,
				.sdgs div.inner h3.subCopy span:after {
					width:12px;
				}
		.sdgs div.inner img.earth {
			max-width: 220px;
			margin: 0 auto 60px auto;
		}
		.sdgs div.inner div.detail {
			padding-top:40px;
		}
		.sdgs div.inner div.detail img.kawasaki {
			max-width: 300px;
			margin: 0 auto 30px auto;
		}
		.sdgs div.inner div.detail p.tit {
			font-size:18px;
			margin-bottom: 40px;
		}
			.sdgs div.inner div.detail p.tit br {
				display: inherit;
			}
		.sdgs div.inner div.detail ul.sdgsList {
			max-width:400px;
			display: flex;
			flex-wrap: wrap;
			margin: 0 auto;
		}
			.sdgs div.inner div.detail ul.sdgsList li {
				width:31%;
				margin-right: 3.5%;
				margin-bottom: 10px;
			}
			.sdgs div.inner div.detail ul.sdgsList li:nth-child(3n) {
				margin-right: 0;
			}
}

@media screen and (max-width:360px){
		.sdgs div.inner h2 {
			font-size:19px;
		}
		.sdgs div.inner div.detail p.tit {
			font-size:16px;
		}
}

@media screen and (max-width:359px){
		.sdgs div.inner h2 {
			font-size:17px;
		}
		.sdgs div.inner h3.subCopy {
			margin-bottom: 30px;
		}
			.sdgs div.inner h3.subCopy span {
				font-size:13px;
				padding:0 22px;
			}
				.sdgs div.inner h3.subCopy span:before,
				.sdgs div.inner h3.subCopy span:after {
					width:12px;
				}
		.sdgs div.inner img.earth {
			max-width: 220px;
			margin: 0 auto 60px auto;
		}
		.sdgs div.inner div.detail p.tit {
			font-size:15px;
		}
}

/* !サステナビリティ
---------------------------------------------------------- */
.sustainabilityWrap {
	width:100%;
	position: relative;
}
.sustainabilityWrap div.bgTop {
	display: block;
	width:100%;
	line-height: 1;
	margin-bottom: -2px;
}
.sustainabilityWrap div.bgBtm {
	display: block;
	width:100%;
	line-height: 1;
}
.sustainability {
	width:100%;
	background: #EFF7FC;
	padding:70px 50px 80px 50px;
}
	.sustainability div.inner {
		width:100%;
		max-width:1240px;
		margin: 0 auto;
	}
	.sustainability div.inner p.enTit {
		font-size:16px;
		font-weight: 600;
		color: #007EC0;
		letter-spacing: 0.04em;
		position: relative;
		padding-left:16px;
	}
		.sustainability div.inner p.enTit:before {
			position: absolute;
			content:"";
			width:5px;
			height: 5px;
			background: #FDD000;
			border-radius: 50%;
			top:47%;
			left:0;
		}
	.sustainability div.inner h2 {
		font-size:40px;
		font-weight: 600;
		line-height: 1.6;
		margin-bottom: 50px;
	}
	.sustainability div.inner div.sustainabilityBox {
		width:100%;
		max-width: 1240px;
		background: #FFF;
		display: flex;
		justify-content: space-between;
		padding:60px 60px 60px 60px;
		border-radius: 16px;
		margin: 0 auto 30px auto;
	}
		.sustainability div.inner div.sustainabilityBox div.left {
			width:32%;
		}
			.sustainability div.inner div.sustainabilityBox div.left img {
				display: block;
				width:100%;
				border-radius: 4px;
			}
		.sustainability div.inner div.sustainabilityBox div.right {
			width:62%;
		}
		.sustainability div.inner div.sustainabilityBox div.right h3 {
			font-size:30px;
			font-weight: 600;
			line-height: 1.6;
			margin-bottom: 30px;
		}
		.sustainability div.inner div.sustainabilityBox div.right p.read {
			margin-bottom: 30px;
		}
		.sustainability div.inner div.sustainabilityBox div.right h4.tit {
			font-size:18px;
			font-weight: 600;
			line-height: 1.6;
			margin-bottom: 15px;
			text-align: center;
		}
		.sustainability div.inner div.sustainabilityBox div.right img.ratio {
			display: block;
			width:220px;
			margin: 0 auto;
		}

@media screen and (max-width:1039px){
.sustainability {
	padding:60px 30px 70px 30px;
}
		.sustainability div.inner p.enTit {
			font-size:15px;
			padding-left:16px;
		}
		.sustainability div.inner h2 {
			font-size:36px;
			margin-bottom: 45px;
		}
	.sustainability div.inner div.sustainabilityBox {
		padding:50px 40px 50px 40px;
		margin: 0 auto 30px auto;
	}
		.sustainability div.inner div.sustainabilityBox div.left {
			width:35%;
		}
		.sustainability div.inner div.sustainabilityBox div.right {
			width:60%;
		}
		.sustainability div.inner div.sustainabilityBox div.right h3 {
			font-size:24px;
		}
		.sustainability div.inner div.sustainabilityBox div.right p.read {
			margin-bottom: 30px;
		}
		.sustainability div.inner div.sustainabilityBox div.right h4.tit {
			font-size:18px;
		}
		.sustainability div.inner div.sustainabilityBox div.right img.ratio {
			width:200px;
			margin: 0 auto;
		}
}
	
@media screen and (max-width:767px){
.sustainability {
	padding:40px 25px 60px 25px;
}
		.sustainability div.inner p.enTit {
			font-size:14px;
			padding-left:14px;
		}
			.sustainability div.inner p.enTit:before {
				top:48%;
			}
		.sustainability div.inner h2 {
			font-size:26px;
			margin-bottom: 35px;
		}
	.sustainability div.inner div.sustainabilityBox {
		flex-wrap: wrap;
		padding:30px 20px 30px 20px;
		border-radius: 12px;
		margin: 0 auto 20px auto;
	}
		.sustainability div.inner div.sustainabilityBox div.left {
			width:100%;
			margin-bottom: 30px;
		}
			.sustainability div.inner div.sustainabilityBox div.left img {
				max-width:320px;
				margin: 0 auto;
			}
		.sustainability div.inner div.sustainabilityBox div.right {
			width:100%;
		}
		.sustainability div.inner div.sustainabilityBox div.right h3 {
			font-size:18px;
			margin-bottom: 25px;
		}
		.sustainability div.inner div.sustainabilityBox div.right p.read {
			margin-bottom: 25px;
		}
		.sustainability div.inner div.sustainabilityBox div.right h4.tit {
			font-size:16px;
		}
		.sustainability div.inner div.sustainabilityBox div.right img.ratio {
			width:180px;
		}
}