@charset "utf-8";

/*========= sdgs ===============*/


.sdgs_area {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 50px auto 200px auto;
	width: 90%;
	max-width: 1200px;
	height: auto;
	border-bottom: 1px solid #a2a2a2;
}

.sdgs_area_title {
	display: block;
	position: relative;
	padding: 0 0 8px 0;
	margin: 0 0 0 0;
	width: 100%;
  color: #302d2a;
	font-weight: 300;
	font-family: "M PLUS Rounded 1c";
	font-size: 3em;
	line-height: 1.2em;
	letter-spacing: 2px;
	text-align: center;
}

.sdgs_area_lead {
	display: block;
	position: relative;
	padding: 0 0 18px 0;
	margin: 0 0 0 0;
	width: 100%;
  color: #302d2a;
	font-weight: 300;
	font-family: "M PLUS Rounded 1c";
	font-size: 1.4em;
	line-height: 1.2em;
	letter-spacing: 2px;
	text-align: center;
}


.sdgs_area_inner {
	display: block;
	position: relative;
	padding: 80px 0 80px 0;
	margin: 0 0 0 0;
	width: 100%;
	height: auto;
	border-top: 1px solid #a2a2a2;
}


/* ナンバー */
.number {
	display: block;
	position: absolute;
	top: -30px;
	right: 0;
	font-size: 12em;
	color: #ecd13e;
	font-weight: 300;
	font-family: 'Noto serif JP';
}

.number span {
	display: block;
	position: absolute;
	top: 60px;
	left: -40px;
	font-size: 0.3em;
}

@media screen and (max-width:768px) {

	.number {
		display: block;
		position: absolute;
		top: -54px;
		right: 0;
		font-size: 12em;
		color: #ecd13e;
		font-weight: 300;
		font-family: 'Noto serif JP';
	}

}

.sdgs_title_block {
	display: block;
	position: relative;
	padding: 0 0 0 24px;
	margin: 0 0 28px 0;
	border-left: 8px solid #302d2a;
	overflow: hidden;
}

.sdgs_title {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
  color: #302d2a;
	font-weight: 700;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.4em;
	line-height: 1.2em;
	letter-spacing: 1px;
}

.sdgs_lead {
	display: block;
	position: relative;
	padding: 12px 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
  color: #302d2a;
	font-weight: 400;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.6em;
	line-height: 160%;
}



/* 本文 + 画像 */
.sdgs_content {
	display: block;
	position: relative;
	padding: 20px 0 20px 0;
	margin: 0 0 0 0;
	width: 100%;
	height: auto;
	overflow: hidden;
}

/* 100% */
.sdgs_txt {
	display: block;
	position: relative;
	padding: 12px 0 12px 0;
	margin: 0 0 0 0;
	width: 100%;
  color: #363636;
	font-weight: 400;
	font-family: "M PLUS Rounded 1c";
	font-size: 1.1em;
	line-height: 200%;
}

/* 60% */
.sdgs_txt_60 {
	display: block;
	position: relative;
	padding: 12px 0 12px 0;
	margin: 0 0 0 0;
	width: 55%;
  color: #363636;
	font-weight: 400;
	font-family: "M PLUS Rounded 1c";
	font-size: 1.1em;
	line-height: 200%;
	float: left;
}

.sdgs_content p {
	display: block;
	position: relative;
	padding: 0 0 28px 0;
	margin: 0 auto 0 auto;
	width: 92%;
}



/* リストスタイル */
.sdgs_content ol {
	padding: 0 0 24px 0;
	margin: 0 0 0 36px;
  list-style: disc;
  list-style-position: outside;
}

.sdgs_content ol li {
  position: relative;
	padding: 0 0 12px 0;
	margin: 0 0 0 -6px;
  color: #363636;
	font-weight: 400;
	font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.3em;
}

.sdgs_content ol li::marker {
  color: #9d8666;
  font-size: 1.4em;
}






@media screen and (max-width:940px) {

	/* 100% */
	.sdgs_txt {
		display: block;
		position: relative;
		padding: 12px 0 12px 0;
		margin: 0 auto 0 auto;
		width: 90%;
		color: #363636;
		font-weight: 400;
		font-family: "M PLUS Rounded 1c";
		font-size: 1.1em;
		line-height: 200%;
		float: none;
	}
	
	/* 60% */
	.sdgs_txt_60 {
		display: block;
		position: relative;
		padding: 12px 0 12px 0;
		margin: 0 auto 0 auto;
		width: 90%;
		color: #363636;
		font-weight: 400;
		font-family: "M PLUS Rounded 1c";
		font-size: 1.1em;
		line-height: 200%;
		float: none;
	}

	.sdgs_content p {
		display: block;
		position: relative;
		padding: 0 0 28px 0;
		margin: 0 0 0 0;
		width: 100%;
	}
	
}


/* 画像01 */

.sdgs_pict01 {
	display: block;
	position: relative;
	padding: 0 0 0 30px;
	margin: 0 0 0 0;
	width: 45%;
	float: left;
}

.sdgs_pict01 ul {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
	list-style: none;
}

.sdgs_pict01 ul li {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
}

.sdgs_pict01 ul li img {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
	height: auto;
}

@media screen and (max-width:940px) {

	.sdgs_pict01 {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 40px auto 0 auto;
		width: 80%;
		float: none;
	}

}


/* 画像02 */

.sdgs_pict02 {
	display: block;
	position: relative;
	padding: 0 0 0 30px;
	margin: 0 0 0 0;
	width: 45%;
	float: left;
}

.sdgs_pict02 ul {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
	list-style: none;
}

.sdgs_pict02 ul li {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 2% 2% 0;
	width: 48%;
	float: left;
}

.sdgs_pict02 ul li:nth-child(odd){
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 2% 0;
	width: 48%;
	float: left;
}

.sdgs_pict02 ul li:first-child {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 2% 2% 0;
	width: 98%;
}

.sdgs_pict02 ul li img {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
	height: auto;
}

@media screen and (max-width:940px) {

	.sdgs_pict02 {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 40px auto 0 auto;
		width: 80%;
		float: none;
	}

	.sdgs_pict02 ul li,
	.sdgs_pict02 ul li:nth-child(odd),
	.sdgs_pict02 ul li:first-child {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 0 0 2% 0;
		width: 100%;
		float: none;
	}

}











.sdgs_pict01 .sdgs_pict_cap {
	clear: both;
	display: block;
	position: relative;
	padding: 0 0 12px 0;
	margin: 18px auto 0 auto;
	width: 100%;
	color: #363636;
	font-weight: 400;
	font-family: "M PLUS Rounded 1c";
	font-size: 0.9em;
	line-height: 180%;
}

.sdgs_pict02 .sdgs_pict_cap {
	clear: both;
	display: block;
	position: relative;
	padding: 0 0 12px 0;
	margin: 18px 2% 0 0;
	width: 98%;
	color: #363636;
	font-weight: 400;
	font-family: "M PLUS Rounded 1c";
	font-size: 0.9em;
	line-height: 180%;
}


@media screen and (max-width:940px) {

	.sdgs_pict02 .sdgs_pict_cap {
		clear: both;
		display: block;
		position: relative;
		padding: 0 0 12px 0;
		margin: 18px 0 0 0;
		width: 100%;
	}

}


/* アイコン */
.sdgs_icon {
	clear: both;
	display: block;
	position: relative;
	padding: 18px 0 18px 0;
	margin: 0 0 0 0;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.sdgs_icon ul {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
	height: auto;
}

.sdgs_icon ul li {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 12px 12px 0;
	width: 90px;
	height: auto;
	float: left;
}

.sdgs_icon ul li img {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
	height: auto;
}

/* アンダーテキスト */

.sdgs_content_un {
	clear: both;
	display: block;
	position: relative;
	padding: 18px 0 18px 30px;
	margin: 20px auto 20px auto;
	width: 90%;
	color: #363636;
	font-weight: 400;
	font-family: "M PLUS Rounded 1c";
	font-size: 1em;
	line-height: 200%;
	border-left: 1px solid #a2a2a2;
	overflow: hidden;
}





/* 2024_08追加 */

.sus,
.sus_area {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

/* H4 */
.sus_title {
	display: block;
	position: relative;
	padding: 0 0 0 16px;
	margin: 36px 0 18px 0;
	font-size: 2.8em;
	height: 80px;
	line-height: 80px;
	letter-spacing: 3px;
}

.sus_title span {
	padding: 0 0 0 8px;
	font-size: 0.5em;
	letter-spacing: 0;
}

.sus .color01 {
	color: #fff;
	background-color: #009899;
	width: 100%;
}

.sus .color02 {
	color: #fff;
	background-color: #bf9100;
	width: 100%;
}

.sus .color03 {
	color: #fff;
	background-color: #333e50;
	width: 100%;
}




.color1 .sus_each {
	display: block;
	position: relative;
	padding: 30px 24px 30px 24px;
	margin: 0 auto 18px auto;
	width: 95%;
	height: auto;
	min-height: 350px;
	background-color: #fff;
	border-left: 8px solid #009899;
}

.color2 .sus_each {
	display: block;
	position: relative;
	padding: 30px 24px 30px 24px;
	margin: 0 auto 18px auto;
	width: 95%;
	height: auto;
	min-height: 350px;
	background-color: #fff;
	border-left: 8px solid #bf9100;
}

.color3 .sus_each {
	display: block;
	position: relative;
	padding: 30px 24px 30px 24px;
	margin: 0 auto 18px auto;
	width: 95%;
	height: auto;
	min-height: 350px;
	background-color: #fff;
	border-left: 8px solid #333e50;
}




.color1 .sus_each_title {
	display: block;
	position: relative;
	padding: 0 0 0 8px;
	margin: 0 0 24px 0;
	color: #009899;
	font-size: 1.8em;
	line-height: 1.8em;
	border-top: 2px solid #009899;
	border-bottom: 2px solid #009899;
}

.color2 .sus_each_title {
	display: block;
	position: relative;
	padding: 0 0 0 8px;
	margin: 0 0 24px 0;
	color: #bf9100;
	font-size: 1.8em;
	line-height: 1.8em;
	border-top: 2px solid #bf9100;
	border-bottom: 2px solid #bf9100;
}

.color3 .sus_each_title {
	display: block;
	position: relative;
	padding: 0 0 0 8px;
	margin: 0 0 24px 0;
	color: #333e50;
	font-size: 1.8em;
	line-height: 1.8em;
	border-top: 2px solid #333e50;
	border-bottom: 2px solid #333e50;
}





.point {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 24px 24px;
	list-style: none;
}

.point li {
	display: block;
	position: relative;
	padding: 0 0 0 1em;
	margin: 0 0 0 0;
	list-style: none;
	text-indent: -1em;
	font-size: 1.2em;
	line-height: 180%;
}



.color1 .torikumi {
	display: block;
	position: relative;
	padding: 18px 18px 18px 18px;
	margin: 14px auto 8px auto;
	width: 95%;
	border: 1px solid #009899;
}

.color2 .torikumi {
	display: block;
	position: relative;
	padding: 18px 18px 18px 18px;
	margin: 14px auto 8px auto;
	width: 95%;
	border: 1px solid #bf9100;
}

.color3 .torikumi {
	display: block;
	position: relative;
	padding: 18px 18px 18px 18px;
	margin: 14px auto 8px auto;
	width: 95%;
	border: 1px solid #333e50;
}





.color1 .torikumi_title {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 16px 0;
	font-size: 1.6em;
	line-height: 1.2em;
	color: #009899;
}

.color2 .torikumi_title {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 16px 0;
	font-size: 1.6em;
	line-height: 1.2em;
	color: #bf9100;
}

.color3 .torikumi_title {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 16px 0;
	font-size: 1.6em;
	line-height: 1.2em;
	color: #333e50;
}




.torikumi ul {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 10px 16px;
	list-style: disc;
}

.torikumi ul li {
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	font-size: 1.1em;
	line-height: 160%;
	list-style-position: inside;
}