@charset "UTF-8";


article {padding: 230px 0 0;}

@media screen and (max-width: 767px) {
article {padding: 60px 0 0;}
}



.main {
width: 100%;
height: 520px;
position: relative;
background-image: url("images/main.jpg");
background-image: image-set(url("images/main.jpg") 1x, url("images/main@2x.jpg") 2x);
background-image: -webkit-image-set(url("images/main.jpg") 1x, url("images/main@2x.jpg") 2x);
background-size: cover;
background-position: center bottom;;
}
.main .main_title {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);}
.main .main_title img {height: 60px;width: auto;margin: 0 0 20px;}
.main .main_title h1 {font-size: 48px;line-height: 2;font-weight: 700;}

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

.main {
width: 100%;
height: 40vh;
position: relative;
background-image: url("images/main.jpg");
background-image: image-set(url("images/main.jpg") 1x, url("images/main@2x.jpg") 2x);
background-image: -webkit-image-set(url("images/main.jpg") 1x, url("images/main@2x.jpg") 2x);
background-size: cover;
background-position: center bottom;;
}
.main .main_title {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);}
.main .main_title img {height: 6vh;width: auto;margin: 0 0 2.5vh;}
.main .main_title h1 {font-size: 5vw;line-height: 2;font-weight: 700;}
}
@media screen and (max-width: 767px) {


}




.sdgs {width: 100%;margin: auto; position: relative;padding: 250px 0;}
.sdgs:before {
content: '';/*何も入れない*/
display: inline-block;
width: 100%;/*画像の幅*/
height:240px;/*画像の高さ*/
background-image: url("images/back_color1.jpg");
background-image: image-set(url("images/back_color1.jpg") 1x, url("images/back_color1@2x.jpg") 2x);
background-image: -webkit-image-set(url("images/back_color1.jpg") 1x, url("images/back_color1@2x.jpg") 2x);
background-size: contain;
background-position: left top;
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.sdgs:after {
content: '';/*何も入れない*/
display: inline-block;
width: 100%;/*画像の幅*/
height:240px;/*画像の高さ*/
background-image: url("images/back_color2.jpg");
background-image: image-set(url("images/back_color2.jpg") 1x, url("images/back_color2@2x.jpg") 2x);
background-image: -webkit-image-set(url("images/back_color2.jpg") 1x, url("images/back_color2@2x.jpg") 2x);
background-size: contain;
background-position: right bottom;
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
.sdgs_logo {margin: 0 auto 40px;}
.sdgs_logo img {}
.sdgs_icon {width: 960px;margin:0 auto 100px;}
.sdgs_icon ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.sdgs_icon ul li{width: 15%;margin: 0 2% 2% 0;}
.sdgs_icon ul li:nth-child(6n) {margin: 0 0 2%;}
li:nth-child(6n+1):nth-last-child(-n+6),
li:nth-child(6n+1):nth-last-child(-n+6) ~ li {margin-bottom: 0;}
.sdgs_icon ul li img{width:100%;height:auto;}
@media screen and (max-width: 1060px) {


.sdgs {width: 100%;margin: auto; position: relative;padding: 12.5vh 0;}
.sdgs:before {
content: '';/*何も入れない*/
display: inline-block;
width: 100%;/*画像の幅*/
height:10vh;/*画像の高さ*/
background-image: url("images/back_color1.jpg");
background-image: image-set(url("images/back_color1.jpg") 1x, url("images/back_color1@2x.jpg") 2x);
background-image: -webkit-image-set(url("images/back_color1.jpg") 1x, url("images/back_color1@2x.jpg") 2x);
background-size: contain;
background-position: left top;
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.sdgs:after {
content: '';/*何も入れない*/
display: inline-block;
width: 100%;/*画像の幅*/
height:10vh;/*画像の高さ*/
background-image: url("images/back_color2.jpg");
background-image: image-set(url("images/back_color2.jpg") 1x, url("images/back_color2@2x.jpg") 2x);
background-image: -webkit-image-set(url("images/back_color2.jpg") 1x, url("images/back_color2@2x.jpg") 2x);
background-size: contain;
background-position: right bottom;
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
.sdgs_logo {margin: 0 auto 5%;}
.sdgs_logo img {width: auto;height: 4vh;}
.sdgs_icon {width: 90%;margin:0 auto 10%;}
.sdgs_icon ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.sdgs_icon ul li{width: 15%;margin: 0 2% 2% 0;}
.sdgs_icon ul li:nth-child(6n) {margin: 0 0 2%;}
li:nth-child(6n+1):nth-last-child(-n+6),
li:nth-child(6n+1):nth-last-child(-n+6) ~ li {margin-bottom: 0;}
.sdgs_icon ul li img{width:100%;height:auto;}


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

.sdgs {width: 100%;margin: auto; position: relative;padding: 12.5vh 0;}
.sdgs:before {
content: '';/*何も入れない*/
display: inline-block;
width: 100%;/*画像の幅*/
height:8vh;/*画像の高さ*/
background-image: url("images/back_color1.jpg");
background-image: image-set(url("images/back_color1.jpg") 1x, url("images/back_color1@2x.jpg") 2x);
background-image: -webkit-image-set(url("images/back_color1.jpg") 1x, url("images/back_color1@2x.jpg") 2x);
background-size: contain;
background-position: left top;
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.sdgs:after {
content: '';/*何も入れない*/
display: inline-block;
width: 100%;/*画像の幅*/
height:8vh;/*画像の高さ*/
background-image: url("images/back_color2.jpg");
background-image: image-set(url("images/back_color2.jpg") 1x, url("images/back_color2@2x.jpg") 2x);
background-image: -webkit-image-set(url("images/back_color2.jpg") 1x, url("images/back_color2@2x.jpg") 2x);
background-size: contain;
background-position: right bottom;
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
.sdgs_logo {margin: 0 auto 5%;}
.sdgs_logo img {width: auto;height: 4vh;}
.sdgs_icon {width: 90%;margin:0 auto 10%;}
.sdgs_icon ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.sdgs_icon ul li{width: 15%;margin: 0 2% 2% 0;}
.sdgs_icon ul li:nth-child(6n) {margin: 0 0 2%;}
li:nth-child(6n+1):nth-last-child(-n+6),
li:nth-child(6n+1):nth-last-child(-n+6) ~ li {margin-bottom: 0;}
.sdgs_icon ul li img{width:100%;height:auto;}
}




.block {width: 960px;margin:0 auto 100px;}
.block dl {}
.block dl dt {font-size: 36px;line-height: 140px;font-weight: 700; height: 140px;background-position: center center;background-repeat: no-repeat;background-size: contain;position: relative;margin: 0 0 80px;}
.block dl dt:after {
content: '';/*何も入れない*/
display: inline-block;
width: 204px;/*画像の幅*/
height:6px;/*画像の高さ*/
background-image: url("images/line.svg");
background-size: contain;
background-position: right bottom;
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit- transform:translateX(-50%);
bottom: -40px;
}
.block dl dt.no1 {background-image: url("images/no01.svg");}
.block dl dt.no2 {background-image: url("images/no02.svg");}
.block dl dt.no3 {background-image: url("images/no03.svg");}
.block dl dt.no4 {background-image: url("images/no04.svg");}
.block dl dd {}
.block dl dd ul {margin: 0 0 40px;}
.block dl dd ul li {width: 100px; margin: 0 2% 0 0; display:inline-block;}
.block dl dd ul li:last-child {margin: 0;}
.block dl dd ul li img {width: 100%;height: auto;}
.block p {font-size: 18px;line-height: 2;font-weight: 700; display: inline-block;text-align: left;}

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

.block {width: 90%;margin:0 auto 10%;}
.block dl {}
.block dl dt {font-size:4vw;line-height: 10vh;font-weight: 700; height: 10vh;background-position: center center;background-repeat: no-repeat;background-size: contain;position: relative;margin: 0 0 10%;}
.block dl dt:after {
content: '';/*何も入れない*/
display: inline-block;
width: 204px;/*画像の幅*/
height:6px;/*画像の高さ*/
background-image: url("images/line.svg");
background-size: contain;
background-position: right bottom;
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit- transform:translateX(-50%);
bottom: -40px;
}
.block dl dt.no1 {background-image: url("images/no01.svg");}
.block dl dt.no2 {background-image: url("images/no02.svg");}
.block dl dt.no3 {background-image: url("images/no03.svg");}
.block dl dt.no4 {background-image: url("images/no04.svg");}
.block dl dd {}
.block dl dd ul {margin: 0 0 40px;}
.block dl dd ul li {width: 100px; margin: 0 2% 0 0; display:inline-block;}
.block dl dd ul li:last-child {margin: 0;}
.block dl dd ul li img {width: 100%;height: auto;}
.block p {font-size: 2vw;line-height: 2;font-weight: 700; display: inline-block;text-align: left;}

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

.block {width: 90%;margin:0 auto 10%;}
.block dl {}
.block dl dt {font-size:5vw;line-height: 10vh;font-weight: 700; height: 10vh;background-position: center center;background-repeat: no-repeat;background-size: contain;position: relative;margin: 0 0 6vh;}
.block dl dt:after {
content: '';/*何も入れない*/
display: inline-block;
width: 204px;/*画像の幅*/
height:4px;/*画像の高さ*/
background-image: url("images/line.svg");
background-size: contain;
background-position: center bottom;
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit- transform:translateX(-50%);
bottom: -3vh;
}
.block dl dt.no1 {background-image: url("images/no01.svg");}
.block dl dt.no2 {background-image: url("images/no02.svg");}
.block dl dt.no3 {background-image: url("images/no03.svg");}
.block dl dt.no4 {background-image: url("images/no04.svg");}
.block dl dd {}
.block dl dd ul {margin: 0 0 5%;}
.block dl dd ul li {width: 18%; margin: 0 2% 0 0; display:inline-block;}
.block dl dd ul li:last-child {margin: 0;}
.block dl dd ul li img {width: 100%;height: auto;}
.block p {font-size: 2.8vw;line-height: 2;font-weight: 700; display: block;text-align: left;}

}



.unicef {width: 760px;margin:0 auto 40px;}
.unicef img {width: 100%;height: auto;margin: 0 0 20px;}
.unicef dl {}
.unicef dl dt {font-size: 24px;line-height: 2;font-weight: 700;text-align: center;}
.unicef dl dd {font-size: 18px;line-height: 2;font-weight: 700;text-align: center;}

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

.unicef {width: 80vw;margin:0 auto 5%;}
.unicef img {width: 100%;height: auto;margin: 0 0 5%;}
.unicef dl {}
.unicef dl dt {font-size: 3vw;line-height: 2;font-weight: 700;text-align: center;}
.unicef dl dd {font-size: 2vw;line-height: 2;font-weight: 700;text-align: center;}

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

.unicef {width: 100vw;margin:0 auto 5%;}
.unicef img {width: 70%;height: auto;margin: 0 0 5%;}
.unicef dl {}
.unicef dl dt {font-size: 3.8vw;line-height: 2;font-weight: 700;text-align: center;}
.unicef dl dd {font-size: 2.6vw;line-height: 2;font-weight: 700;text-align: center;}
}