@charset "UTF-8";
/* CSS Document */
.sdgs {
	padding-bottom: 40px;
}
.sdgs-part {
	margin-bottom: 60px;
}
.sdgs-ttl {
	text-align: center;
	padding: 80px 0;
}
.sdgs-ttl h2 {
	display: inline-block;
	border-top: 1px solid #005bac;
	border-bottom: 1px solid #005bac;
	padding: 20px 100px;
	color: #005bac;
	font-size: 35px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 300;
}
.part-ttl {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #005bac;
	padding-bottom: 0;
}
.part-ttl h3 {
	font-size: 35px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 300;
	color: #005bac;
	padding-left: 10px;
	line-height: 1.5;
	border-left: 10px solid #005bac;
	margin-bottom: 0;
}
.sdgs-icon img {
		margin: 2px;
	}
.part-con {
	margin-top: 30px;
}
.part-con-img {
	display: flex;
	justify-content: space-between;
	width: 60%;
	float: right;
	margin: 0 15px 15px 15px;
	align-items: flex-start;
}
.part-para {
	font-size: 20px;
	position: relative;
	line-height: 1.6;
	margin: 10px 0 0 20px;
}
.part-para::before {
	position: absolute;
	content: "";
	width: 15px;
	height: 15px;
	top: 7px;
	left: -20px;
	border: 1px solid #333;
	border-radius: 50%;
}
.blue {
	color: #005bac;
}




/*
-----------------------------------------------
flex
----------------------------------------------- */
.container01{
display:flex;
flex-wrap:wrap;
}

.container02{
display:flex;
flex-wrap:nowrap;
}

.container03{
display:flex;
flex-wrap:wrap-reverse;
}

.al-item01{
align-items:flex-end;
}

.al-item02{
align-items:center;
}

.c-type01{
justify-content:space-between;
}

.c-type02{
justify-content:space-around;
}

.c-type03{
justify-content:flex-start;
}

.c-type04{
justify-content:center;
}




/* ZEH */

.zeh {
	padding-bottom: 40px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 300;
}

.zeh-wrap{
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
padding-left:5%;
padding-right:5%;
}
}



.zeh-ttl {
	text-align: center;
	padding: 60px 0 10px 0;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
	padding: 10px 0 5px 0;
}
}


.zeh-ttl h2 {
	display: block;
	padding: 0 20px 20px 20px;
	font-size: 45px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 300;
	letter-spacing:0.15em;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
	font-size: 28px;
	letter-spacing:0;
}
}


.zeh-ttl h2:after{
content:"";
display:block;
width:60px;
border-bottom:solid 2px;
margin-left:auto;
margin-right:auto;
margin-top:3%;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
}
}

.zeh-box{
background:#fff;
border:solid 2px #015cab;
padding:50px 66px;
margin-bottom:10%;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
padding:20px 15px;
margin-bottom:10%;
}
}


.zeh-box ul{
list-style-type:none;
margin:0;
padding:0;
font-size:20px;
letter-spacing:-0.04em;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
font-size:16px;
}
}


.zeh-box li{
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
align-items:flex-start;
margin-bottom:25px;
line-height:1.6;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
margin-bottom:20px;
}
}



.zeh-box li br{
@media screen and (max-width: 1024px) {
display:none;
}
@media screen and (max-width: 599px) {
}
}


.zeh-box li span{
display:block;
}

.spn01{
width:5%;margin-top:-2px;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
width:6%;
margin-right:1%;
}
}


.spn02{
width:94%;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
width:93%;
}
}


.zeh-box .container02 div{
margin-left:5%;
margin-right:5%;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
margin-left:2%;
margin-right:2%;

}
}


.tbl-wrap{
box-sizing:border-box;
padding:0;
margin:0;
margin-bottom:50px;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
margin-bottom:30px;
}
}


.al-01{
justify-content: flex-start;
}

.zeh-tbl,
.zeh-tbl td,
.zeh-tbl th{
box-sizing:border-box;
padding:0;
margin:0;
border:solid 1px;
font-family: 'Noto Sans JP', sans-serif;
}

.zeh-name{
width:20%;
color:#fff;
position:relative;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
width:100%;
}
}

.zeh-name h3{
position:absolute;
font-size:30px;
font-weight:300;
line-height:1.0;
white-space: nowrap;
padding:0;
margin:0;
top: 50%;
left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
@media screen and (max-width: 1024px) {
font-size:24px;
}
@media screen and (max-width: 599px) {
font-size:20px;
position:relative;
padding:10px;
}
}

#zeh-name1{background:#2450a1;}
#zeh-name2{background:#f5621b;}
#zeh-name3{background:#45b035;}


.zeh-name span{
text-align:center;
display:block;
}

.zeh-tbl{
width:80%;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
width:100%;
}
}


.zeh-tbl td{
font-size:22px;
text-align:center;
background:#fff;
padding:10px;
vertical-align:middle;
@media screen and (max-width: 1024px) {
font-size:18px;
}
@media screen and (max-width: 599px) {
font-size:18px;
}
}



.zeh-tbl .td01{
font-size:22px;
text-align:center;
background:#f2f2f2;
padding:10px;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
padding:5px;
font-size:16px;
}
}

.zeh-tbl .td01b{
font-size:17px;
text-align:center;
background:#f2f2f2;
padding:5px;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
padding:5px;
font-size:13px;
}
}

.zeh-tbl .td02{
font-size:33px;
font-weight:bold;
text-align:center;
background:#fffcdb;
padding:10px;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
padding:5px 1px;
font-size:16px;
}
}


.zeh-tbl th{
padding:5px;
font-size:20px;
text-align:center;
background:#f2f2f2;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
font-size:17px;
}
}


#zeh-tbl1 th{color:#2450a1;}
#zeh-tbl2 th{color:#f5621b;}
#zeh-tbl3 th{color:#45b035;}

#zeh-tbl1 .td02{color:#2450a1;}
#zeh-tbl1 .td03{color:#2450a1;}
#zeh-tbl2 .td02{color:#f5621b;}
#zeh-tbl3 .td02{color:#45b035;}

#zeh-tbl1 table,
#zeh-tbl1 td,
#zeh-tbl1 th{
border-color:#2450a1 !important;
}

#zeh-tbl2 table,
#zeh-tbl2 td,
#zeh-tbl2 th{
border-color:#f5621b !important;
}

#zeh-tbl3 table,
#zeh-tbl3 td,
#zeh-tbl3 th{
border-color:#45b035 !important;
}



#zeh-tbl1 .tr_type01 th{
color:#000 !important;
font-size:19px !important;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
font-size:14px !important;
}
}

#zeh-tbl1 .tr_type02 th{
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
font-size:12px !important;
padding:4px 0;
}
}


#zeh-tbl1 .td01{
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
font-size:14px !important;
padding:4px 2px;
}
}

#zeh-tbl1 .td02{
font-size:28px !important;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
padding:5px 1px;
font-size:14px;
}
}

.zeh-tbl .td03{
font-size:28px !important;
font-weight:bold;
text-align:center;
padding:10px;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
padding:5px 1px;
font-size:14px;
}
}



#zeh-tbl3 th,
#zeh-tbl3 td{
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 599px) {
padding:5px 2px !important;
font-size:14px !important;
}
}

#zeh-tbl3 .td01b{
@media screen and (max-width: 599px) {
font-size:12px !important;
}
}

#zeh-tbl3 .td02{
@media screen and (max-width: 599px) {
font-size:16px !important;
}
}

#zeh-tbl3 .spbr{
display:none;
@media screen and (max-width: 1024px) {
display:none;
}
@media screen and (max-width: 599px) {
display:block;
}
}


.hyoka_wrap{
padding-top:40px;
margin-bottom:40px;
padding-left:30px;
padding-right:30px;
@media screen and (max-width: 1024px) {
padding-left:0;
padding-right:0;
}
@media screen and (max-width: 599px) {
padding-left:0;
padding-right:0;
}
}

.hyoka{
margin-bottom:20px;
text-align:center;
width:50%;
font-family: 'Noto Sans JP', sans-serif;
font-size:23px;
@media screen and (max-width: 1024px) {
width:49%;
font-size:19px;
}
@media screen and (max-width: 600px) {
width:100%;
font-size:17px;
}
}

.hyoka a{
color:#009933;
text-decoration:none;
}

.hyoka img{
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 999px) {
margin-left:auto;
margin-right:auto;
}
}

.gaikan_img p{
color:#009933;
}


.gaikan_img{
margin-left:auto;
margin-right:auto;
text-align:center;
font-family: 'Noto Sans JP', sans-serif;
font-size:22px;
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 600px) {
font-size:17px;
}
}


/*sp*/
@media only screen and (max-width: 999px) {
	.sdgs {
	padding-bottom: 30px;
}
	.sdgs-part {
	margin-bottom: 30px;
}
	.sdgs-ttl {
		padding: 40px 0;
}
	.sdgs-ttl h2 {
		font-size: 24px;
		padding: 20px;
	}
	.part-ttl h3 {
		font-size: 22px;
		line-height: 2;
		border-left: 8px solid #005bac;
	}
	.sdgs-icon {
		margin-top: 20px;
	}
	.sdgs-icon img {
		width: 15%;
	}
	.part-con {
		display: flex;
		flex-direction: column;
	}
	.part-para {
		font-size: 14px;
		margin-left: 20px;
	}
	.part-para::before {
		width: 10px;
		height: 10px;
		left: -15px;
		top: 5px;
	}
	.part-con-img {
		clear: both;
		width: 100%;
		margin: 0;
	}
	.part-con-img img {
		max-width: 50%;
	}
}