@charset "UTF-8";

.dir_title h1:after{
	content: "SUSTAINABLE DEVELOPMENT GOALS";
}

.ttl_wrapper{
	border:solid 1px #626262;
	padding:26px 24px 0 24px;
	margin-bottom:90px;
}
.subttl{
	font-size:16px;
	color:#626262;
	margin-bottom:50px;
}
.sect1{
	width:96%;
	max-width:980px;
	margin:0 auto;

}
.sect1 h2{
	font-size:28px;
	text-align: center;
	padding-bottom:100px;
	color:#626262;
}
.sect1 .lead{
	text-align: center;
	font-size:16px;
	padding-bottom:60px;
}
@media screen and (max-width: 834px) {
	.ttl_wrapper{
		padding: 14px 17px 0 17px;
		margin-bottom:63px;
	}
	.subttl{
		margin-bottom:35px;
	}
	.sect1 h2{
		padding-bottom:70px;
	}
	.sect1 .lead{
		padding-bottom:42px;
	}
}




.pt_wrapper{
	min-height: 380px;
	display:flex;
	justify-content:space-between;
	align-items: center;
	border-top:#f3f5f8 solid 1px;
}
.pt_wrapper:last-of-type{
	border-bottom:#f3f5f8 solid 1px;
}
.pt_wrapper .pics{
	padding:0 4%;
	width:50%;
	display:flex;
	justify-content: space-between;
	align-items: center;
}
.pt_wrapper .pics img{
	width:46.6%;
}
.pt_wrapper .txt{
	width:40%;
	color:#626262;
}
.pt_wrapper .txt li{
	line-height: 2;
	margin-bottom:2em;
	overflow: hidden;
	font-size:16px;
	padding-left:1.1em;
	text-indent:-1.1em;
}
.pt_wrapper .txt li:last-of-type{
	margin-bottom: 0;
}
.pt_wrapper .txt li:before{
	content:"●";
}
.pt_wrapper .txt li .link_r{
	text-align: right;
	padding:1em 0 0;
}
.pt_wrapper .txt li .link_r a{
	color:#15336c;
}
@media screen and (max-width: 834px) {
	.pt_wrapper{
		display:block;
		padding:6% 0;
	}
	.pt_wrapper .pics{
		width:auto;
		justify-content: center;
		margin-bottom:6%;
	}
	.pt_wrapper .pics img{
		width:40%;
		margin:0 4%;
	}
	.pt_wrapper .txt{
		padding:0 4%;
		width:auto;
	}
	.pt_wrapper .txt li{
		margin-bottom:3%;
	}
	.pt_wrapper .txt li .link_r{
		padding:0.7em 0 0;
	}
}





.link_r a{
	text-decoration: underline;
	color:#002f7c;
}



.sect2{
	background:#f3f5f8;
	padding:80px 0 100px;
}
.sect2_container{
	width:94%;
	max-width:980px;
	margin:0 auto;
}
.sect2 .white{
	background:#fff;
	padding:80px 10px 60px;
	text-align: center;
	margin:0 auto 30px;
}
.sect2 .white .ttl{
	margin-bottom: 40px;
}
.sect2 .white .ttl img{
	width:80%;
	max-width:680px;
}
.sect2 .white p{
	line-height: 1.8;
	font-size:20px;
	color:#002f7c;
	font-weight: bold;
}
.sect2 .link_r{
	font-size:16px;
	text-align: right;
}
.sect2 .white + .link_r{
	margin-bottom:110px;
}

.sect2 h3{
	font-size:24px;
	text-align: center;
	line-height: 1.6;
	padding-bottom:10px;
	color:#626262;
	border-bottom:2px solid #15336c;
	margin-bottom:44px;
}
.sect2 .lead{
	color:#626262;
	text-align: center;
	margin-bottom:44px;
	font-size:16px;
}
.sect2 dl+.link_r{
	margin-bottom:30px;
}
.sect2 .link_r{
	line-height: 1.5;
}
.sect2 dl{
	width:94%;
	max-width:720px;
	margin:0 auto 10px;
	background:#fff;
	display:flex;
	justify-content: space-between;
	padding:20px 24px;
	box-sizing: border-box;
}
.sect2 dl:last-of-type{
	margin-bottom:66px;
}
.sect2 dl dt{
	font-size:20px;
	font-weight: bold;
	color:#002f7c;
	flex:1;
}
.sect2 dl dd{
	color:#626262;
	font-size: 16px;
	width:284px;
}

#page_content main .btn_wrapper{
	width:90%;
	max-width:720px;
	margin:0 auto 100px;
	padding-top:60px;
	display:flex;
	justify-content: space-between;
}
#page_content main .btn_wrapper > p{
	width:220px;
}
#page_content main .btn_wrapper > p a{
	height:48px;
	line-height: 48px;
	display:block;
	position:relative;
	border: solid 1px #626262;
    box-sizing: border-box;
    text-align: left;
	padding-left:12px;
    font-size: 16px;
}
#page_content main .btn_wrapper > p a i{
	display: block;
    width: 1.1em;
    height: 1.1em;
    content: "";
    background: url(/common2021/img/i_arrow1.svg) no-repeat center center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 0.9em;
    transform: translateY(-50%);
}





@media screen and (max-width: 834px) {
	#page_content main .btn_wrapper{
		flex-wrap:wrap;
		justify-content: center;
	}
	#page_content main .btn_wrapper > p{
		margin:0 20px 20px;
	}
}
@media screen and (max-width: 599px) {
	#page_content main .btn_wrapper{
		margin:0 auto 70px;
		display:flex;
		flex-direction: column;
	}
	#page_content main .btn_wrapper > p{
		margin:10px auto;
	}
}





@media screen and (max-width: 626px) {
	.sect2 dl{
		display:block;
	}
	.sect2 dl dt{
		margin-bottom:10px;
	}
	.sect2 dl dd{
		width:100%;
	}
	.sect2 dl:last-of-type{
		margin-bottom:46px;
	}
}