@charset "UTF-8" ;

/* == 共通ベース設定 ===================================================== */

div#sdgs {
	overflow : hidden ;
	text-align: left ;
}


div#sdgs img.w100 { width : 100% ; }

@media only screen and (max-width : 768px) {
	div#sdgs img.w100 { width : 100% ; }
}


div#sdgs p{
	text-align : left ;
	line-height: 180% ;
	margin : 0px 0px 7px 0px ;
}

div#sdgs strong { font-weight: bold; }
div#sdgs .sm { font-size : 84% ; }



/* == メイン画像設定 ======================================================= */

div#topimage {
	width: 100% ;
	margin : 20px auto ;
	position: relative;
}

div#topimage img {
	width: 100% ;
	margin : 20px auto ;
}



/* == タイトル設定 ======================================================= */

div#sdgs div#sdgs-header {
	text-align : center ;
	padding : 0px 30px 50px 30px ;
}


div#sdgs div#sdgs-header h2 {
	color : #54585a;
	font-size : 24px;
	line-height : 1.4;
	font-weight : normal ;
	text-align : center ;

}

div#sdgs div#sdgs-header img {
	width: 90%;
	max-width: 700px;
	margin : 20px auto 40px;
}

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

	div#sdgs div#sdgs-header h1 {
		font-size : 130% ;
		margin : 20px 0px  ;
		line-height : 150% ;
	}

	div#sdgs div#sdgs-header h2 {
		font-size : 100% ;
		text-align : left ;
	}

	div#sdgs div#sdgs-header h2 br {
		display : none ;
	}

	div#sdgs div#sdgs-header img {
		margin : 10px auto ;
	}
}



/* == コンテンツ設定 ===================================================== */

div#sdgs-contents {
	margin : 0px ;
	padding-bottom : 30px ;
}

div#sdgs-contents div.para {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width : 100% ;
	max-width : 1200px ;
	padding : 0px 0px 0px 0px ;
	margin : 0px auto 100px;
	border : 0px solid #ff0000 ;
}


div#sdgs-contents div.image40 {
	width : 50% ;
	margin : 0px ;
	padding : 0 0 0 30px;
}

div#sdgs-contents div.detail60 {
	width : 50%;
	margin : 0px ;
	padding : 0 30px 0 0;
	font-size: 16px;
}


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

	div#sdgs-contents div.image40 {
		width : 100% ;
		padding : 30px 30px 20px 30px ;
		clear: none;
	}

	div#sdgs-contents div.detail60 {
		width : 100% ;
		clear: none;
	}

}



/* == 見出し設定 ======================================================= */


div#sdgs-contents h2 {
	width: 100%;
	color : #54585a ;
	text-align : center ;
	font-size :160% ;
	font-weight : bold ;
	margin : 50px 0px 0px;
	padding-bottom : 30px ;
	border-bottom : 1px solid #54585a ;
}

div#sdgs-contents h3 {
	width: 100%;
	color : #54585a ;
	font-size :140% ;
	text-align : center ;
	text-decoration : underline ;
	font-weight : bold ;
	margin : 35px 0px;
}

div#sdgs-contents h4 {
	font-size :110% ;
	font-weight : bold ;
	margin : 0px 0px 20px 0px ;
}


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

	div#sdgs-contents h2 {
		font-size :140% ;
		font-weight : bold ;
		margin : 0px 0px 0px 0px ;
		padding-bottom : 10px ;
	}

	div#sdgs-contents h3 {
		font-size :140% ;
		margin : 50px 0px 30px 0px ;
	}

	div#sdgs-contents h4 {
		font-size :110% ;
		font-weight : bold ;
		margin : 0px 0px 20px 0px ;
	}


}


/* == sdgs設定 ======================================================= */

div#sdgs_area {
	margin-bottom : 20px ;
	text-align : center ;
}

div#sdgs_button {
	width: 100%;
}

div#sdgs_button a {
	display : inline-block ;
	width : 30% ;
	background-color : #ececeb ;
	text-align : center ;
	margin : 10px 10px 10px 10px ;
	padding : 0px 0px 15px 0px ;
	border-radius: 10px;
	font-size : 15px;
	vertical-align : top ;
}
div#sdgs_button a picture {
	display: block;
	aspect-ratio: 6/4;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin : 0px 0px 15px 0px ;
	overflow: hidden;
}
div#sdgs_button a picture img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

div#sdgs_button a:link { color: #54585a ; text-decoration : none ; }
div#sdgs_button a:hover { color: #ffffff ; background-color : rgb(84,88,90); }
div#sdgs_button a:hover img { opacity: 0.8; }



div#sdgs_mark {
	width: 100%;
	margin : 0 auto 50px;
	text-align : center ;
}

div#sdgs_mark a {
	display : inline-block ;
	background-color : #000000 ;
	max-width : 100px ;
	margin : 5px ;
}

div#sdgs_mark img {
	width: 100% ;
}

div#sdgs_mark a:hover img { opacity: 0.5;  }


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

	div#sdgs_button a {
		width : 45% ;
	}

}


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

	div#sdgs_button a {
		width : 90% ;
	}

	div#sdgs_mark {
		margin-bottom : 30px ;
	}

	div#sdgs_mark a {
		max-width : 80px ;
		margin : 3px ;
	}


}


/* == モーダル設定 ======================================================= */


div#sdgs-contents .modal{
	display: none;
	height: 100vh;
	position: fixed;
	top: 0;
	left : 0 ;
	width: 100%;
	z-index : 100000 ;
}
div#sdgs-contents .modal__bg{
	background: rgba(0,0,0,0.8);
	height: 100vh;
	position: absolute;
	width: 100%;
}
div#sdgs-contents .modal__content{
	background: #ececeb;
	left: 50%;
	padding: 20px;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 60%;
}
div#sdgs-contents .modal__content div.bdr {
	border : 2px solid #54585a ;
	padding: 40px;
	position: relative;
	text-align : left ;
	line-height : 180% ;
}

div#sdgs-contents .modal__content a {
	text-decoration : underline ;
}

div#sdgs-contents .modal__content div.scr {
	overflow : auto ;
	max-height: calc(100vh - 200px);
	padding-right : 10px ;
}

div#sdgs-contents .modal__content div.de {
	font-size : 84% ;
	border : 1px solid #54585a ;
	padding : 10px ;
	margin : 10px 0px  ;
}

div#sdgs-contents .modal__content img {
	margin : 0px auto 20px auto ;
}


div#sdgs-contents .js-modal-close {
	position: absolute;
	top: 0px;
	right: 0px;
}


div#sdgs-contents .modal__content h3 {
	font-size :140% ;
	text-align : center ;
	text-decoration : none ;
	font-weight : bold ;
	margin : 0px 0px 50px 0px ;
}


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

	div#sdgs-contents .modal__content{
		width: 80%;
	}

}


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


	div#sdgs-contents .modal__content{
		width: 90%;
	}
	div#sdgs-contents .modal__content div.bdr {
		padding: 20px;
	}

	div#sdgs-contents .js-modal-close {
		position: absolute;
		top: 0px;
		right: 0px;
	}

	div#sdgs-contents .modal__content h3 {
		font-size :120% ;
		margin : 15px 0px 20px 0px ;
	}

}

div#ihg {
	background-color: #ececeb ;
	text-align : center ;
	padding : 30px 30px 50px 30px ;
}
div#ihg a {
	text-decoration: underline;
	}


div#ihg div.ihg-title  {
	font-size : 180% ;
	text-align : center ;
	margin : 20px 0px  ;
	font-weight : normal ;
	line-height : 150% ;
}

div#ihg div.ihg-catch {
	color : #54585a ;
	font-size : 130% ;
	font-weight : normal ;
	text-align : center ;
	line-height : 200% ;
}

div#ihg  img {
	width: 100% ;
	max-width : 200px ;
	margin : 0px auto ;
}