@charset "utf-8";
/* CSS Document */

article{
background-color: #FFF9D6;
padding: 3em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 940px;
float: right;
margin: 0 0 0 40px;
}
#main article p,
#main article h2{
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
article > h2.h-title{
display: flex;
  justify-content: center;
  align-items: center;
justify-content: space-between;
}
article > h2.h-title img{
max-width:73%;
width: auto;
height: auto;
}

article > section{
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:1vw 0 0 0;
margin-bottom: 2vw;
}
article > section a{
color:#25A7E1;
}
article > section a:hover{
color: #2F93D0;
text-decoration: underline;
}

article section h2{
font-size:1.8rem;
padding:0.5em 0 0.5em 2.5em;
background-image: url("../images/sdgs_pic/h2icon.png");
background-position: left center;
background-repeat: no-repeat;
background-size: auto 100%;
margin: 0 0 1em 0;
}
article section .wbox{
background-color: #fff;
padding: 1em;
display: block;
border: 3px solid #25A7E1;
border-radius:1.5em;
}
article section .wbox:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
article section .wbox img{
max-width: 100%;
width: auto;
height: auto;
}

article section .wbox p{
margin: 0;
}
article section .fleft{
float: left;
}
article section .fright{
float: right;
}
article section .wbox.fleft,
article section .wbox.fright{
width: 74%;
}
article section .wbox h3{
display: flex;
  justify-content: center;
  align-items: center;
justify-content: space-between;
margin: 0;
}
article section .wbox h3 img:nth-of-type(1){
margin-left:20%;
}

#main article section ul.torikumi{
clear: both;
	display:flex;
	justify-content:flex-start;
	align-items: center;	
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin:0 0 0 0;
padding:2vw 0 0 0;
}
#main article section ul.torikumi li{
clear: both;
display: block;
width: 100%;
padding-bottom:1vw;
margin-bottom:1vw;
}
#main article section ul.torikumi li h3{
font-weight: normal;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
margin: 0 0 0.5em 0;
}
#main article section ul.torikumi li h4{
font-size: 1.8rem;
margin:0.5em 0;
color: #0E6EB8;
}
#main article section ul.torikumi li p{
max-width:82%;
text-align: left;
font-size: 17px;
margin: 0 0 1em 0;
}

#main article section ul.torikumi li img{
max-width:80%;
width: auto;
height: auto;
}

/*---------------------------------------------*
* width 1200px
*----------------------------------------------*/
@media screen and (max-width:1200px) {
main article{
    width: 760px;
    margin: 0 0 0 20px;
}

img.chara{
max-width: 20%;
}
article section .wbox h3 img:nth-of-type(1) {
    margin-left:inherit;
}
#main article section ul.torikumi li img {
    max-width:78%;
    width: auto;
    height: auto;
}
#main article section ul.torikumi li p{
max-width:100%;
}

#main article section ul.torikumi {
padding: 4vw 0 0 0;
}

}
/* width 1200px end --------------------------------------------*/

/*---------------------------------------------*
* width 1023px
*----------------------------------------------*/
@media screen and (max-width:1023px) {

main article{
    width:100%;
    margin: 0 auto;
    padding: 3em 1em;
}

#main{
background-color: #FFF9D6;
}
.center{
width:100%;
padding:0 3%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
}
footer .center{
background-color: #231816;
}
main article {
    padding: 3vw 2%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
}
}
/* width 1000px end --------------------------------------------*/

/*---------------------------------------------*
* width 768px
*----------------------------------------------*/
@media screen and (max-width:768px) {
article > h2.h-title{
display: block;
}
article > h2.h-title img{
max-width: 100%;
}
article > h2.h-title img.chara{
float: right;
margin: 1em 0 0 0;
max-width:20%;
}

article section .wbox.fleft, article section .wbox.fright {
    width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img.chara {
    max-width:20%;
}
article > section {
    padding:2vw 0 0 0;
    margin-bottom:4vw;
}
article section .wbox h3 {
display: block;
}
article section .wbox h3 img.chara{
max-width:20%;
float: right;
}
article section h2 {
height:40px;
	display:flex;
	justify-content:flex-start;
	align-items: center;	
    font-size: 1.8rem;
    padding: 0.5em 0 0.5em 3em;
    background-size: auto 80%;
    margin: 0 0 0.5em 0;
    line-height: 1.5;
}

#main article section ul.torikumi li img {
    max-width: 78%;
}
#main article section ul.torikumi li img.fright{
    max-width:20%;
}
#main article section ul.torikumi li h4 {
    font-size:4.2vw;
    line-height: 1.5;
}

}
/* width 768px end --------------------------------------------*/

/*---------------------------------------------*
* width 640px
*----------------------------------------------*/
@media screen and (max-width:640px) {
}
/* width 640px end --------------------------------------------*/

/*---------------------------------------------*
* width 480px
*----------------------------------------------*/
@media screen and (max-width:480px) {
}
/* width 480px end --------------------------------------------*/

/*---------------------------------------------*
* width 375px
*----------------------------------------------*/
@media screen and (max-width:375px) {
}