@charset "UTF-8";

/*基本：左右配置　上下センター　折り返しなし*/
.fbox {    
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}
/*折り返しなし*/
.fbox.nowrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
/*左寄せ*/
.fbox.bxstart {
  -webkit-box-pack: start;
     -ms-flex-pack: start;
   justify-content: flex-start;
}
/*右寄せ*/
.fbox.bxend {
  -webkit-box-pack: end;
     -ms-flex-pack: end;
   justify-content: flex-end;
}
/*中央寄せ*/
.fbox.bxcenter {
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
}
/*上寄せ*/
.fbox.alstart {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
/*下寄せ*/
.fbox.alend {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
/*上下中央*/
.fbox.alcenter {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
/*上下端*/
.fbox.albt {
  -ms-flex-line-pack: justify;
       align-content: space-between;
}
/*上下均等*/
.fbox.linedist {
  -ms-flex-line-pack: distribute;
       align-content: space-around;
}
/*子要素に設定　順番を1番目に*/
.fbox .pos0 {
  -webkit-box-ordinal-group: 1;
             -ms-flex-order: -1;
                      order: -1;
}


h1#hl_headline > span {
  display:inline-block;
  height:210px;
  background:rgba(0,0,0,.25);
  color:#ffffff;
  font-size:21px;
  box-sizing:border-box;
  padding:3em 1em 0;
}
h1#hl_headline > span span {
  display:block;
  color:#0599d9;
  font-size:24px;
  text-shadow:1px 1px 0px #ffffff,-1px 1px 0px #ffffff,1px -1px 0px #ffffff,-1px -1px 0 #ffffff;
}

#sdgs {
  padding-top:60px;
}
#sdgs .sdgs1 {
  margin-bottom:90px;
}
#sdgs .sdgs1 img {
  width:calc(40% - 30px);
}
#sdgs .sdgs1 p {
  width:calc(60% - 30px);
  font-size:26px;
  font-weight:600;
  margin:0;
}
#sdgs > img {
  margin-bottom:60px;
}
#sdgs h2 {
  color:#783c34;
  font-size:24px;
  text-align:center;
  border-bottom:1px solid #cccccc;
  margin-bottom:1em;
}
#sdgs .sdgs2 > div {
  width:calc(50% - 10px);
  margin-bottom:20px;
  box-sizing:border-box;
  background:#efefef;
  padding:15px;
}
#sdgs .sdgs2 > div > img {
  width:calc(40% - 30px);
}
#sdgs .sdgs2 > div > div {
  width:60%;
}
#sdgs .sdgs2 > div > div h3 {
  line-height:1.3em;
  margin-bottom:0.5em;
}
#sdgs .sdgs2 > div > div h3 span {
  font-size:21px;
  display:block;
  line-height:1.5em;
  color:#e4011e;
}
#sdgs .sdgs2 > div > div h3 span span {
  display:inline-block;
  font-size:28px;
  margin-left:0.2em;
}
#sdgs .sdgs2 > div > div ul {
}
#sdgs .sdgs2 > div > div li {
  line-height:1.3em;
  margin-bottom:0.5em;
  position:relative;
  padding-left:1em;
}
#sdgs .sdgs2 > div > div li::before {
  content:'';
  display:block;
  width:4px;
  height:4px;
  background:#000000;
  border-radius:2px;
  position:absolute;
  left:0.3em;
  top:0.5em;
}
#sdgs .sdgs2 > div > div li:last-child {
  margin:0;
}