@charset "UTF-8";
/* CSS Document */
#sdgsBG{
	background-position: center;
	background-size: cover;
	background-origin: round;
	background-attachment: fixed;
	background-image: url(../sdgs/image/sdgs-BG.jpg);
}
.sdgs{
	max-width: 1024px;
	margin: 0 auto;
	margin-top:10vh;
}
@media screen and (max-width: 600px) {
	.sdgs{
		margin-top:5vh;
	}	
}
#sdgsTop #pc img{
	width: 100%;
	overflow: hidden;
	justify-content: center;
	padding: 75px 0 0 0;
}
#sdgsTop #tablet img{
	display: none;
}
#sdgsTop #mobile img{
	display: none;
}
@media screen and (max-width: 1024px) {
	#sdgsTop #pc img{
		display: none;
	}
	#sdgsTop #tablet img{
		display: block;
		width: 100%;
		overflow: hidden;
		justify-content: center;
		padding: 75px 0 0 0;			
	}
	#sdgsTop #mobile img{
		display: none;
	}
}
@media screen and (max-width: 600px) {
	#sdgsTop #pc img{
		display: none;
	}
	#sdgsTop #tablet img{
		display: none;
	}
	#sdgsTop #mobile img{
		display: block;
		width: 100%;
		overflow: hidden;
		justify-content: center;
		padding: 50px 0 0 0;			
	}
}
.index{
	width: 60%;
	padding: 5% 10%;
	margin: 0 auto ;
	border: solid 1px #00a6d9 ;
	background: #fff;
}
.index a{
	display: block;
	font-size: 1.2em;
	color: #00a6d9 ;
	border-bottom: solid 1px #00a6d9 ;
	padding: 1em;
}
.mincho{
	font-family: ften-mincho-text, serif;
}
.sdgsC1{
	color:#e4011e ;
}
.sdgsC2{
	color:#d6a600 ;
}
.sdgsC3{
	color:#1b973a ;
}
.sdgsC4{
	color:#c50e28 ;
}
.sdgsC5{
	color:#e83418 ;
}
.sdgsC6{
	color:#00a6d9 ;
}
.sdgsC6Border{
	border-bottom:solid 4px #00a6d9 ;
}
.sdgsC7{
	color:#fabd00 ;
}
.sdgsC7Border{
	border-bottom:solid 4px #fabd00 ;
}
.sdgsC8{
	color:#970a31 ;
}
.sdgsC9{
	color:#ec6a06 ;
}
.sdgsC10{
	color:#dc097b ;
}
.sdgsC11{
	color:#f5a20b ;
}
.sdgsC12{
	color:#d39206 ;
}
.sdgsC13{
	color:#407936 ;
}
.sdgsC14{
	color:#0075ba ;
}
.sdgsC15{
	color:#28a838 ;
}
.sdgsC15Border{
	border-bottom:solid 4px #28a838 ;
}
.sdgsC16{
	color:#004c88 ;
}
.sdgsC17{
	color:#023067 ;
}
#sdgsarea h1,
#sdgsarea h2.h1ttl{
	text-align: center;
	font-size: 2.75em;
	font-weight: bold;
	margin-bottom: 0.5vh;
	text-shadow:0 0 10px #fff;
}
#sdgsarea h2{
	font-family: feffra, noto-sans-cjk-jp;
	text-align: center;
	font-size: 2.75em;
	font-weight: bold;
	margin-bottom: 0.5vh;
	text-shadow:0 0 10px #fff;
}
@media screen and (max-width: 600px) {
	#sdgsarea h1,
	#sdgsarea h2.h1ttl{
		font-size: 1.8em;
	}
	#sdgsarea h2{
		font-size: 1.8em;
	}	
}
.sdgsBlock01{
	padding: 4vh;
	background: #fff;
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
	margin: 4vh 0;
	border-radius: 1em;
}
.sdgsBlock01 p{
	text-align: justify;
}
#sdgsarea .border{
	width: 100%;
	margin-bottom: 3vh;
}
.sdgsBlock01 h3{
	font-family: feffra, noto-sans-cjk-jp, "游ゴシック体";
	font-size: 2.3em;
	font-weight: bold;
	margin-bottom: 1vh;
	text-align: center;
}
@media screen and (max-width: 600px) {
	.sdgsBlock01{
		padding: 2vh;
		margin: 1vh 0;
	}
	#sdgsarea .border{
		margin-bottom: 1vh;
	}
	.sdgsBlock01 h3{
		font-size: 1.2em;
	}
}
.sdgsBlock01 h3 span{
	font-family: feffra, noto-sans-cjk-jp, "游ゴシック体";
}
.sdgsBlock01 .size100{
	width: 100%;
	clear: both;
}
.sdgsBlock01 .iconBox{
	float: right;
	width: 30%;
}
.sdgsBlock01 .iconBox img{
	width: 30%;
}
@media screen and (max-width: 600px) {
	.sdgsBlock01 .iconBox{
		float: none;
		width: 100%;
		padding: 0 0 2vh 0;
		text-align: center;
	}
	.sdgsBlock01 .iconBox img{
		width: 20%;
	}
}
.sdgsBlock01 .sdgsBox01{
	display: flex;
	justify-content: space-between;	
	margin: 2vh 0;	
}
@media screen and (max-width: 600px) {
	.sdgsBlock01 .sdgsBox01{
		display: block;
	}
}
.sdgsBlock01 .sdgsBox02{
	margin: 2vh 0;	
}
.sdgsBlock01 .sdgsBox02 h4{
	font-size:1.5em;
	font-weight: 400;
	padding: 0.2em 0;
	border-bottom: 2px dotted #999;
}
.sdgsBlock01 .sdgsBox02 p{
	text-align: justify;
	margin: 2vh 0;
}
.sdgsBlock02{
	padding: 4vh;
	background: #fff;
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
	margin: 4vh 0;
	border-radius: 1em;
}
.sdgsBlock02 .title h3{
	font-family: feffra, noto-sans-cjk-jp, "游ゴシック体";
	font-size: 2.3em;
	font-weight: bold;
	text-align: center;
}
.sdgsBlock02 .title p{
	text-align: center;
	letter-spacing: 0.5em;
}
.sdgsBlock02 .iconBox{
	float: right;
	width: 40%;
}
.sdgsBlock02 .iconBox img{
	width: 18%;
}
@media screen and (max-width: 600px) {
	.sdgsBlock02 .iconBox{
		float: none;
		width: 100%;
		padding: 0 0 2vh 0;
		text-align: center;
	}
	.sdgsBlock02 .iconBox img{
		width: 20%;
	}
}
.sdgsBox03{
	margin: 3vh 0 ;
}
.sdgsBox03 h4{
	display: inline-block;
	font-size:1.5em;
	font-weight: 400;
	padding: 0.2em 0;
}
.sdgsBox03 p .big{
	font-size: 1.2em;
	font-weight: 400;
}
.sdgsBox01 .left{
	width: 30%;
}
.sdgsBox01 .right{
	width: 70%;
}
@media screen and (max-width: 600px) {
	.sdgsBox01 .left{
		width: 100%;
	}
	.sdgsBox01 .right{
		width: 100%;
	}
}
.sdgsBox01 .right ul{
	font-size: 1.1em;
}
.sdgsBox01 .right h4{
	font-size:1.5em;
	font-weight: 400;
	padding: 0.2em 0;
	border-bottom: 2px dotted #999;
}
.sdgsBox01 .right ul {
	padding: 0.25em 0em 0.25em 1.8em;
	position: relative;
  }
.sdgsBox01 .right  ul li {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;
	text-align: justify;
  }
.sdgsBox01 .right ul li:before {
	font-family: "Font Awesome 5 Free";
	content: "\f138";/*アイコンの種類*/
	position: absolute;
	left : 0.5em;/*左端からのアイコンまでの距離*/
	color: skyblue;/*アイコン色*/
  }
.sdgsBox01 .left img{
	width: 100%;
}
.marginTop1vh{
	clear: both;
	margin-top: 5vh;
}
@media screen and (max-width: 600px) {
	.marginTop1vh{
		margin-top: 1vh;
	}
}

ol {
	counter-reset:num;
	list-style-type: none!important;
	padding:0;
	margin:0;
}
ol li {
	position: relative;
	padding-left: 30px;
	line-height: 1.5em;
	padding: 0.5em 0.5em 0.5em 30px;
}
ol li:before {
	position: absolute;
	counter-increment: num;
	content: counter(num);
	display:inline-block;
	background: #555;
	color: #FFF;
	font-family: 'Arial',sans-serif;
	font-weight:bold;
	font-size: 14px;
	border-radius: 50%;
	left: 0;
	width: 22px;
	height: 22px;
	line-height: 22px;
	text-align: center;
	top: 10px;
}
@media screen and (max-width:768px) {
	.sdgs{
		width: 80vw;		
	}
}
@media screen and (max-width:414px) {
	.sdgs{
		width: 90vw;		
	}
}

/*--20241024 追加 SDGsの注意点について--*/
.sdgsBox02 .meishi-img{
	text-align: center;
}
.sdgsBox02 .meishi-img p{
	text-align: center;
}
.sdgsBox02 .meishi-img img{
	max-width: 280px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}