@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');

/* common.css */

.pc {
    display: block;
}
.phone {
    display: none;
}
.clear {
    clear: both;
    height: 1px;
    overflow: hidden;
}
/* clearfix */
.clearfix {
    zoom: 1;
    min-height: 1px;
}
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 1px;
    line-height: 1px;
    margin-top: -1px;
    visibility: hidden;
}

@media screen and (min-width: 640px) {
    body table.t_header,
    #child_main,
    body table.t_footer {
        width: 980px;
        margin: 0 auto;
    }
}

.t_footer, footer {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.t_header .pankuzu {
    padding: 10px 5px 0;
    color: #1b1b1b;
    /* font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 11px;
}
.t_header .pankuzu a {
	color: #0087e6;
    /*color: #1b1b1b;*/
    text-decoration: none;
}
.t_header .pankuzu a:hover {
	color: #0087e6;
    /*color: #0066CC;*/
    text-decoration: underline;
}

#child_main #headerContainer h1 {
    color: #FFFFFF;
    background-color: #09F;
    font-weight: normal;
    font-size: 30px;
    width: 100%;
    height: auto;
}
.h1_area {
    padding-top: 0.9em;
    padding-bottom: 0.8em;
    padding-left: 0.5em;
}
#child_main {
    width: 980px;
    font-size: 100%;
    position: relative;
    z-index: 0;
}
#child_main * {
    /* font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
#child_main p {
    margin: 0 0 1.429em;
    padding: 0;
}
#child_main a {
    display: inline;
    color: #333333;
    text-decoration: none;
}
#child_main a:hover {
    color: #0087e6;
    text-decoration: underline;
}
#child_main p, #child_main span, #child_main li, #child_main dt, #child_main dd, #child_main th, #child_main td {
    line-height: 1.68;
    font-size: 14px;
    letter-spacing: normal;
    color: #333333;
}
#child_main th, #child_main td {
    vertical-align: top;
}
#child_main dd {
    padding: 0;
    margin: 0;
}

#child_main .pankuzu {
    padding: 10px 11px 0;
    font-size: 11px;
}
#child_main .pankuzu a {
    display: inline-block;
   color: #0087e6;
    font-size: 11px;
    text-decoration: none;
}

/* common layout style */
#child_main #headerContainer {
    margin-top: 8px;
    margin-bottom: 20px;
}
#child_main #contents {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-flow: row-reverse nowrap;
    flex-flow: row-reverse nowrap;
    width: 940px;
    margin-bottom: 20px;
}



/*  コンテンツ内基本設定
--------------------------------------------------------- */
#child_main #contents p {
    margin: 0 0 1.429em;
    text-align: left;
}
#child_main #contents ul {
    list-style: none;
    margin: 0 0 1.429em;
    padding: 0;
}
#child_main #contents ul li {
    margin: 0;
    padding: 0 0 0 18px;
    background: url("../about_act_img/icon_circle_black01.png") 4px 0.65em no-repeat;
    background-size: 3px 3px;
}
#child_main #contents ul.asterisk li {
    text-indent: -1em;
    background: none;
}
#child_main #contents ul.asterisk li:before {
    display: inline;
    content: "※";
}

#child_main #contents ul.ib li {
  display:inline-block;
  background: none !important;
  padding-left: 0 !important;
}
#child_main #contents ul.ib li a {
  margin-right: 20px;
}


/**/
#child_main #contents .fa {
    font-family: FontAwesome;
}
#child_main #contents .fa.fa-file-pdf-o {
    color: #e10000;
}
#child_main #contents .fa.fa-arrow-circle-right {
    color: #09F;
}


/* メインコンテンツ
--------------------------------------------------------- */
#child_main #contents #main {
    width: 692px;
}
@media screen and (max-width: 639px) {
    #child_main #contents #main {
        width: 100%;
    }
}



/* タイトル
--------------------------------------------------------- */
#child_main #contents #main h2 {
    clear: both;
    margin: 50px 0 25px;
    padding: 0 0 5px;
    border-bottom: 5px solid #333333;
    color: #333333;
    font-size: 30px;
    font-weight: normal;
}
#child_main #contents #main h2.cat01 {
    border-bottom-color: #458de1; /* 保健 */
    color: #458de1;
}
#child_main #contents #main h2.cat02 {
    border-bottom-color: #fdb7ad; /* HIV/エイズ */
    color: #fdb7ad;
}
#child_main #contents #main h2.cat03 {
    border-bottom-color: #24a8ce; /* 水と衛生 */
    color: #24a8ce;
}
#child_main #contents #main h2.cat04 {
    border-bottom-color: #ff8522; /* 栄養 */
    color: #ff8522;
}
#child_main #contents #main h2.cat05 {
    border-bottom-color: #f99cd0; /* 教育 */
    color: #f99cd0;
}
#child_main #contents #main h2.cat06 {
    border-bottom-color: #96c18b; /* 子どもの保護 */
    color: #96c18b;
}
#child_main #contents #main h2.cat07 {
    border-bottom-color: #edc563; /* インクルージョン */
    color: #edc563;
}
#child_main #contents #main h2.cat08 {
    border-bottom-color: #e85f55; /* 緊急支援・人道支援 */
    color: #e85f55;
}
#child_main #contents #main h2.cat09 {
    border-bottom-color: #7959bc; /* ジェンダーの平等 */
    color: #7959bc;
}
#child_main #contents #main h3 {
    clear: both;
    margin: 50px 0 25px;
    padding: 0 0 2px;
    border-bottom: 0 none;
    background: url("../about_act_img/main_title02_bg01_00.png") left bottom repeat-x;
    color: #333333;
    font-size: 22px;
    font-weight: normal;
    text-align: center;
}
#child_main #contents #main h3.cat01 {
    background-image: url("../about_act_img/main_title02_bg01_01.png");
}
#child_main #contents #main h3.cat02 {
    background-image: url("../about_act_img/main_title02_bg01_02.png");
}
#child_main #contents #main h3.cat03 {
    background-image: url("../about_act_img/main_title02_bg01_03.png");
}
#child_main #contents #main h3.cat04 {
    background-image: url("../about_act_img/main_title02_bg01_04.png");
}
#child_main #contents #main h3.cat05 {
    background-image: url("../about_act_img/main_title02_bg01_05.png");
}
#child_main #contents #main h3.cat06 {
    background-image: url("../about_act_img/main_title02_bg01_06.png");
}
#child_main #contents #main h3.cat07 {
    background-image: url("../about_act_img/main_title02_bg01_07.png");
}
#child_main #contents #main h3.cat08 {
    background-image: url("../about_act_img/main_title02_bg01_08.png");
}
#child_main #contents #main h3.cat09 {
    background-image: url("../about_act_img/main_title02_bg01_09.png");
}
#child_main #contents #main h4 {
    clear: both;
    margin: 50px 0 20px;
    padding: 0 0 5px;
    border-bottom: 1px solid #333333;
    color: #333333;
    font-size: 22px;
    font-weight: normal;
}
#child_main #contents #main h4.cat01 {
    border-bottom-color: #458de1;
    color: #458de1;
}
#child_main #contents #main h4.cat02 {
    border-bottom-color: #fdb7ad;
    color: #fdb7ad;
}
#child_main #contents #main h4.cat03 {
    border-bottom-color: #24a8ce;
    color: #24a8ce;
}
#child_main #contents #main h4.cat04 {
    border-bottom-color: #ff8522;
    color: #ff8522;
}
#child_main #contents #main h4.cat05 {
    border-bottom-color: #f99cd0;
    color: #f99cd0;
}
#child_main #contents #main h4.cat06 {
    border-bottom-color: #96c18b;
    color: #96c18b;
}
#child_main #contents #main h4.cat07 {
    border-bottom-color: #edc563;
    color: #edc563;
}
#child_main #contents #main h4.cat08 {
    border-bottom-color: #e85f55;
    color: #e85f55;
}
#child_main #contents #main h4.cat09 {
    border-bottom-color: #7959bc;
    color: #7959bc;
}
@media screen and (max-width: 639px) {
    #child_main #contents #main h2 {
        line-height: 1.5;
    }
    #child_main #contents #main h2.fs_s {
        font-size: 20px;
    }
}
#child_main #contents #main h5 {
    font-size: 14px;
}


/* メインコンテンツ内各タグ基本設定
--------------------------------------------------------- */
#child_main #contents #main * {
    word-break: break-all;
}
#child_main #contents #main a {
    /*color: #333333;*/
	color: #0099ff;
    text-decoration: none;
}
#child_main #contents #main a:hover {
	color: #6FC6FF;
	text-decoration: underline;
}



/* ローマ数字形式のリスト */
#child_main #contents #main .about_act_list01 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 20px;
}
#child_main #contents #main .about_act_list01 dt {
    width: 2.2em;
    margin: 0;
    padding: 0;
}
#child_main #contents #main .about_act_list01 dd {
    width: calc(100% - 2.2em);
    margin: 0;
    padding: 0;
}

/* バナー　フロート */
#child_main #contents #main .bnr_flt {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: space-between;
}
#child_main #contents #main .bnr_flt p {
    width: calc( 100% / 4 );
    text-align: center;
}
@media screen and (max-width: 639px) {
  #child_main #contents #main .bnr_flt p {
      width: calc( 100% / 2 );
  }
}

/* 青枠　*/
#child_main #contents #main .blue_frame {
  border: 1px solid #09f;
  padding: 15px 15px 0;
}

/* 青枠内リスト　*/
#child_main #contents #main .blue_frame ul li {
  margin-bottom: 4px;
}
#child_main #contents #main .blue_frame ul li:last-child {
  margin-bottom: 0px;
}

/* 画像幅スマホ用　*/
@media screen and (max-width: 639px) {
  #child_main #contents #main .cmn_img img {
      max-width: 400px;
      width: 100%;
      height: auto;
  }
}

/* 幅広画像のスマホ対応　*/
#child_main #contents #main .wide_img img {
    width: 100%;
}
#child_main #contents #main .wide_img .cap {
  display: block;
  margin: 4px 0 0;
  padding: 0;
  font-size: 10px;
  text-align: right;
}
@media screen and (max-width: 414px) {
  #child_main #contents #main .wide_img {
      overflow-x: scroll;
  }
  #child_main #contents #main .wide_img img {
      min-width: 150vw;
      width: 100%;
  }
}

/* レイアウト
--------------------------------------------------------- */
#child_main #contents #main .item_left {
    float: left;
    margin: 0 20px 20px 0;
}
#child_main #contents #main .item_left > img {
    display: block;
}
#child_main #contents #main .item_left .cap {
    display: block;
    margin: 4px 0 0;
    padding: 0;
    font-size: 10px;
    text-align: right;
}
#child_main #contents #main .item_left .cap .cap_inner_left {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 10px;
    text-align: left;
}
#child_main #contents #main .item_right {
    float: right;
    margin: 0 0 10px 20px;
}
#child_main #contents #main .item_right.w240pc {
    width:240px;
}
#child_main #contents #main .item_right > img {
    display: block;
}
#child_main #contents #main .item_right .cap {
    display: block;
    margin: 4px 0 0;
    padding: 0;
    font-size: 10px;
    text-align: right;
}
#child_main #contents #main .item_right .cap .cap_inner_left {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 10px;
    text-align: left;
}
#child_main #contents #main .item_right .link {
    display: block;
    margin: 4px 0 0;
    padding: 0;
    text-align: center;
}

@media screen and (max-width: 414px) {
	#child_main .pankuzu {
	display:none ;
  }

    #child_main #contents #main .item_left {
        float: none;
        width: 70%;
        margin: 0 auto 20px;
    }
    #child_main #contents #main .item_left > img {
        width: 100%;
    }
    #child_main #contents #main .item_right {
        float: none;
        width: 70%;
        margin: 0 auto 20px;
    }
    #child_main #contents #main .item_right.w240pc {
        width: 70%;
    }
    #child_main #contents #main .item_right > img {
        width: 100%;
    }


	#child_main .pankuzu a {
    display: inline-block;
    color: #0087e6;
    font-size: 11px;
    text-decoration: none;
}

	#child_main .t_header .pankuzu {
    padding: 10px 5px 0;
    color: #1b1b1b;
    /* font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 11px;
}

	#child_main .pankuzu a:hover {
	color: #0087e6;
    /*color: #0066CC;*/
    text-decoration: underline;
}

}



/* コンテンツ内ナビ
--------------------------------------------------------- */
#child_main #contents #main .local_nav01 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 20px 0 20px;
}
#child_main #contents #main .local_nav01 .item {
    display: block;
    position: relative;
    width: calc((100% - 20px - 0.1pt) / 3);
    margin: 0 10px 10px 0;
    padding: 14px 10px 11px 24px;
    box-sizing: border-box;
    background: #333333;
    color: #ffffff;
    font-size: 15px;
}
@media screen and (min-width: 640px) {
    #child_main #contents #main .local_nav01 .item:nth-of-type(3n) {
        margin-right: 0;
    }
}
#child_main #contents #main .local_nav01 .item.cat01 {
    background-color: #458de1;
}
#child_main #contents #main .local_nav01 .item.cat02 {
    background-color: #fdb7ad;
}
#child_main #contents #main .local_nav01 .item.cat03 {
    background-color: #24a8ce;
}
#child_main #contents #main .local_nav01 .item.cat04 {
    background-color: #ff8522;
}
#child_main #contents #main .local_nav01 .item.cat05 {
    background-color: #f9b1d9;
}
#child_main #contents #main .local_nav01 .item.cat06 {
    background-color: #96c18b;
}
#child_main #contents #main .local_nav01 .item.cat07 {
    background-color: #edc563;
}
#child_main #contents #main .local_nav01 .item.cat08 {
    background-color: #e85f55;
}
#child_main #contents #main .local_nav01 .item.cat09 {
    background-color: #7959bc;
}
#child_main #contents #main .local_nav01 .item:hover {
    text-decoration: none;
    opacity: .7;
}
#child_main #contents #main .local_nav01 .item:before {
    display: block;
    position: absolute;
    top: 16px;
    left: 10px;
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-family: FontAwesome;
    font-size: 15px;
    content:'\f105';
}
@media screen and (max-width: 639px) {
    #child_main #contents #main .local_nav01 .item {
        width: calc((100% - 10px) / 2);
    }
    #child_main #contents #main .local_nav01 .item:nth-of-type(2n) {
        margin-right: 0;
    }
    #child_main #contents #main .local_nav01 .item:before {
        top: 13px;
    }
}
@media screen and (max-width: 414px) {
    #child_main #contents #main .local_nav01 .item {
        width: 100%;
        margin-right: 0;
    }
}

/**/
#child_main #contents #main .local_nav02 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 40px 0 20px;
}
#child_main #contents #main .local_nav02 .card {
    width : calc((100% - 0.1pt) / 3);
    margin: 0 0 20px;
    padding: 0 15px;
    box-sizing: border-box;
}
#child_main #contents #main .local_nav02 .card:hover {
    text-decoration: none;
    opacity: 0.7;
    filter:alpha(opacity=70);
	-moz-opacity: 0.7;
}
#child_main #contents #main .local_nav02 .card .thumbnail {
    display: block;
    overflow: hidden;
    margin: 0 0 13px;
    padding: 5px;
    border: 8px solid #333333;
    border-radius: 50%;
    box-sizing: content-box;
}
#child_main #contents #main .local_nav02 .card.cat01 .thumbnail {
    border-color: #458de1;
}
#child_main #contents #main .local_nav02 .card.cat02 .thumbnail {
    border-color: #fdb7ad;
}
#child_main #contents #main .local_nav02 .card.cat03 .thumbnail {
    border-color: #24a8ce;
}
#child_main #contents #main .local_nav02 .card.cat04 .thumbnail {
    border-color: #ff8522;
}
#child_main #contents #main .local_nav02 .card.cat05 .thumbnail {
    border-color: #f9b1d9;
}
#child_main #contents #main .local_nav02 .card.cat06 .thumbnail {
    border-color: #96c18b;
}
#child_main #contents #main .local_nav02 .card.cat07 .thumbnail {
    border-color: #edc563;
}
#child_main #contents #main .local_nav02 .card.cat08 .thumbnail {
    border-color: #e85f55;
}
#child_main #contents #main .local_nav02 .card.cat09 .thumbnail {
    border-color: #7959bc;
}
#child_main #contents #main .local_nav02 .card .thumbnail img {
    display: block;
    width: 100%;
    border-radius: 50%;
}
/*
#child_main #contents #main .local_nav02 .card .title {
    display: block;
    position: relative;
    padding: 0 8px 0 24px;
    font-size: 16px;
}
*/
#child_main #contents #main .local_nav02 .card .title {
    display: inline-block;
    padding: 0 15px 0 24px;
    font-size: 16px;
}
#child_main #contents #main .local_nav02 .card:hover .title {
    color: #09F;
}
/*
#child_main #contents #main .local_nav02 .card .title:before {
    display: block;
    position: absolute;
    top: -4px;
    left: 8px;
    margin: 0;
    padding: 0;
    color: #333333;
    font-family: FontAwesome;
    font-size: 20px;
    content:'\f105';
}
*/
#child_main #contents #main .local_nav02 .card .title:before {
    display: inline-block;
    margin: 0 0 0 -15px;
    padding: 0 8px 0 0;
    color: #333333;
    font-family: FontAwesome;
    font-size: 20px;
    content:'\f105';
}
#child_main #contents #main .local_nav02 .card:hover .title:before {
    color: #09F;
}
@media screen and (max-width: 414px) {
    #child_main #contents #main .local_nav02 {
        margin: 40px 0 20px;
    }
    #child_main #contents #main .local_nav02 .card {
        width : calc(100% / 2);
        padding: 0;
    }
    #child_main #contents #main .local_nav02 .card:nth-of-type(odd) {
        padding-right: 5px;
    }
    #child_main #contents #main .local_nav02 .card:nth-of-type(even) {
        padding-left: 5px;
    }
    #child_main #contents #main .local_nav02 .card .thumbnail {
/*        padding: 2px;*/
    }
}



/*
--------------------------------------------------------- */
#child_main #contents #main .card_list01 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 30px;
}
#child_main #contents #main .card_list01 .card {
    width: calc((100% - 20px - 0.1pt) / 3);
    margin: 0 10px 10px 0;
    padding: 5px 5px 0;
    border: 1px solid #333333;
    box-sizing: border-box;
}
#child_main #contents #main .card_list01 .card.cat01 {
    border-color: #458de1;
}
#child_main #contents #main .card_list01 .card.cat02 {
    border-color: #fdb7ad;
}
#child_main #contents #main .card_list01 .card.cat03 {
    border-color: #24a8ce;
}
#child_main #contents #main .card_list01 .card.cat04 {
    border-color: #ff8522;
}
#child_main #contents #main .card_list01 .card.cat05 {
    border-color: #f37dbf;
}
#child_main #contents #main .card_list01 .card.cat06 {
    border-color: #96c18b;
}
#child_main #contents #main .card_list01 .card.cat07 {
    border-color: #edc563;
}
#child_main #contents #main .card_list01 .card.cat08 {
    border-color: #e85f55;
}
#child_main #contents #main .card_list01 .card.cat09 {
    border-color: #7959bc;
}
@media screen and (min-width: 640px) {
    #child_main #contents #main .card_list01 .card:nth-of-type(3n) {
        margin-right: 0;
    }
}
#child_main #contents #main .card_list01 .card .img {
    margin: 0 0 16px;
}
#child_main #contents #main .card_list01 .card .img img {
    width: 100%;
}
#child_main #contents #main .card_list01 .card .text {
    padding: 0 6px 4px;
}
#child_main #contents #main .card_list01 .card .text .title {
    margin: 0 0 10px;
    font-size: 16px;
}
#child_main #contents #main .card_list01 .card.cat01 .text .title {
    color: #458de1;
}
#child_main #contents #main .card_list01 .card.cat02 .text .title {
    color: #fdb7ad;
}
#child_main #contents #main .card_list01 .card.cat03 .text .title {
    color: #24a8ce;
}
#child_main #contents #main .card_list01 .card.cat04 .text .title {
    color: #ff8522;
}
#child_main #contents #main .card_list01 .card.cat05 .text .title {
    color: #f37dbf;
}
#child_main #contents #main .card_list01 .card.cat06 .text .title {
    color: #96c18b;
}
#child_main #contents #main .card_list01 .card.cat07 .text .title {
    color: #edc563;
}
#child_main #contents #main .card_list01 .card.cat08 .text .title {
    color: #e85f55;
}
#child_main #contents #main .card_list01 .card.cat09 .text .title {
    color: #7959bc;
}
#child_main #contents #main .card_list01 .card .text p {
    margin: 0 0 10px;
    font-size: 13px;
}
@media screen and (max-width: 639px) {
    #child_main #contents #main .card_list01 {
        margin: 0 0 30px;
    }
    #child_main #contents #main .card_list01 .card {
        width: calc((100% - 10px) / 2);
        margin: 0 10px 10px 0;
    }
    #child_main #contents #main .card_list01 .card:nth-of-type(2n) {
        margin-right: 0;
    }
}
@media screen and (max-width: 414px) {
    #child_main #contents #main .card_list01 {
        margin: 0 0 30px;
    }
    #child_main #contents #main .card_list01 .card {
        width: 100%;
        margin: 0 0 10px 0;
    }
}

/* movie */
#child_main #contents #main .movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#child_main #contents #main .movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/**/
#child_main #contents #main .about_act_pagetop {
    margin: 30px 0 0;
    padding: 0;
    text-align: right;
}
#child_main #contents #main .about_act_pagetop a {}
#child_main #contents #main .about_act_pagetop a i {
    display: inline-block;
    margin: 0 0 2px 12px;
    font-size: 40px;
    color: #0099ff;
    vertical-align: middle;
}

/* sdgs_block */
#child_main #contents #main .sdgs_block {
  border: 3px solid #93cddd;
  padding: 10px;
}
  #child_main #contents #main .sdgs_block.sdgs03 {
    border: 3px solid #a4dd93;
  }
  #child_main #contents #main .sdgs_block.sdgs04 {
    border: 3px solid #c5192d;
  }
  #child_main #contents #main .sdgs_block.sdgs05 {
    border: 3px solid #ff3a21;
  }
  #child_main #contents #main .sdgs_block.sdgs06 {
    border: 3px solid #93cddd;
  }
  #child_main #contents #main .sdgs_block.sdgs08 {
    border: 3px solid #dd93a8;
  }
  #child_main #contents #main .sdgs_block.sdgs02 {
    border: 3px solid #DBA63B;
  }
#child_main #contents #main .sdgs_block p {
  display: table-cell;
  width: 90px;
  vertical-align: top;
}
  #child_main #contents #main .sdgs_block p img {
    width: 100%;
    height: auto;
  }
#child_main #contents #main .sdgs_block dl {
  display: table-cell;
  margin: 0;
  padding: 0 0 0 10px;
  vertical-align: middle;
}
#child_main #contents #main .sdgs_block dl dt {
  margin: 0;
  padding: 4px;
  font-weight: bold;
}
  #child_main #contents #main .sdgs_block dl dt span {
    border: 1px solid #4c9f38;
    margin-right: 6px;
    padding: 2px 10px;
    color: #4c9f38;
    text-align:center;
  }
  #child_main #contents #main .sdgs_block.sdgs04 dl dt span {
    border: 1px solid #c5192d;
    color: #c5192d;
  }
  #child_main #contents #main .sdgs_block.sdgs05 dl dt span {
    border: 1px solid #ff3a21;
    color: #ff3a21;
  }
  #child_main #contents #main .sdgs_block.sdgs06 dl dt span {
    border: 1px solid #26BDE2;
    color: #26BDE2;
  }
  #child_main #contents #main .sdgs_block.sdgs08 dl dt span {
    border: 1px solid #e85f55;
    color: #e85f55;
  }
#child_main #contents #main .sdgs_block dl dd {
  margin: 10px 0 0;
  padding: 0;
}
@media screen and (max-width: 639px) {
  #child_main #contents #main .sdgs_block p,
  #child_main #contents #main .sdgs_block dl {
    vertical-align: top;
  }
}


/*  サイドバー
--------------------------------------------------------- */
#child_main #contents #side {
    width: 220px;
}
@media screen and (max-width: 639px) {
    #child_main #contents #side {
        display: none;
    }
}
#child_main #contents #side .side_nav01 {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px dashed #9acff3;
}
#child_main #contents #side .side_nav01 * {
    font-size: 14px;
}
#child_main #contents #side .side_nav01 li {
    margin: 0;
    padding: 0;
    background: none;
    border-top: 1px dashed #9acff3;
}
#child_main #contents #side .side_nav01 > li:first-of-type {
    border-top: 0 none;
}
#child_main #contents #side .side_nav01 li a {
    display: block;
    position: relative;
    padding: 8px 0 6px 16px;
}
#child_main #contents #side .side_nav01 li a:hover,
#child_main #contents #side .side_nav01 li.current > a {
    background: #bfe5ff;
    color: #333333;
    text-decoration: none;
}
#child_main #contents #side .side_nav01 li a:before {
    display: block;
    position: absolute;
    top: 0.3em;
    left: 1px;
    margin: 0;
    padding: 0;
    color: #0099ff;
    font-family: FontAwesome;
    font-size: 16px;
    content:'\f105';
}
#child_main #contents #side .side_nav01 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#child_main #contents #side .side_nav01 ul li {}
#child_main #contents #side .side_nav01 ul li a {
    padding-left: 36px;
}
#child_main #contents #side .side_nav01 ul li a:before {
    left: 21px;
}



@media screen and (max-width: 639px) {
    body {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #child_main img {
        max-width: 100%;
    }
    .pc {
        display: none;
    }
    .phone {
        display: block;
    }
    #child_main #headerContainer h1 .h1_area {
        color: #FFFFFF;
        background-color: #09F;
        font-weight: normal;
		font-size: 22px;
        width: auto;
        height: auto;
        padding-top: 0.3em;
        padding-bottom: 0.2em;
        padding-left: 0.5em;
        margin-top: 0.4em;
        margin-bottom: 0.5em;
        line-height: 1.5em;
    }
    #child_main #headerContainer h1 .h1_area .txt_s {
        font-size: 12px;
        color: #FFFFFF;
        padding-top: 10em;
        padding-left: 0em;
    }
    #header {
        background-color: #0099ff;
        background-image: none;
        width: auto;
		/* height:55px; */
    }
    #child_main {
        width: auto;
        margin: 0;
    }
    #contents {
        width: auto;
        margin: 0;
    }
    .h1_small {
        font-size: 14px;
    }
    #child_main #contents {
        width: auto;
        margin: 0 0 7.8vw;
        padding: 2vw 20px 0;
        float: none;
    }
    #child_main #headerContainer {
        margin: 0;
        padding: 0;
    }
    #menu_button > a {
        text-decoration: none;
        font-size: 14px;
    }
}
@supports (-ms-ime-align:auto) and (max-width: 639px){
    #menu_button > a > i{
        height: 25px\0;
    }
}



@media screen and (max-width: 414px) {
    #child_main #contents {
        width: auto;
        margin: 0 0 7.8vw;
        padding: 2vw 10px 0;
        float: none;
    }

	 #child_main #headerContainer h1 .h1_area_ {
			 font-size: 20px;
	}

	 #child_main #contents #main h2 {
    /*line-height: 1.5;*/
		font-size: 26px;
    }
    #child_main #contents #main h2.fs_s {
     font-size: 18px;
    }
}



/*  汎用クラス
--------------------------------------------------------- */
/* ----- margin ----- */
.m_t0 { margin-top: 0 !important; }
.m_t15 { margin-top: 15px !important; }
.m_b0 { margin-bottom: 0 !important; }
.m_b20 { margin: 0 0 1.429em !important; }

@media print, screen and (max-width: 639px) {
    .m_b20-sm { margin: 0 0 20px !important; }
}


/* ----- cellpadding ----- */
.p_r10 { padding-right: 10px !important; }

/* ----- text-align ----- */
.ta_l { text-align: left !important; }
.ta_c { text-align: center !important; }
.ta_r { text-align: right !important; }
.ta_j { text-align: justify !important; }
@media print, screen and (min-width: 640px) {}
@media print, screen and (max-width: 639px) {}
@media print, screen and (max-width: 414px) {}

/* ----- 幅設定 ----- */
.w160 { width: 160px; }
.w240 { width: 240px; }

/* ----- font ----- */
.fw_n { font-weight:normal; }
.fs_l { font-size: 20px !important; }


/*　　角丸バナー　　
----------------------------------------------------------*/

/*ユニセフの主な活動分野一覧ページへ*/
.ichiran_bnr .bt {
		width:100%;
		margin-top:50px;
		margin-right: auto;
	    margin-left: auto;
	text-align:center;

}

#child_main #contents #main .ichiran_bnr .bt a{
	border: 2px solid #0099FF;
	background-color: #FFF;
	color: #0099FF;
	display: block;
	font-size: 18px;
	text-align: center;
	text-decoration: none;
	/*border-radius: 5px;*/
	box-shadow: 1px 1px 1px #ccc;
	margin-top: 10px;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
	padding-top: 20px;
	padding-right: 2%;
	padding-bottom: 20px;
	padding-left: 2%;
}

#child_main #contents #main .ichiran_bnr .bt a:hover{
	border: 2px solid #0099FF;
	background-color: #0099FF;
	color: #FFF;
}

/* フォントカラー設定 */
#child_main #contents #main .fc_cat01 { color: #458de1; }
#child_main #contents #main .fc_cat02 { color: #fdb7ad; }
#child_main #contents #main .fc_cat03 { color: #24a8ce; }
#child_main #contents #main .fc_cat04 { color: #ff8522; }
#child_main #contents #main .fc_cat05 { color: #f9b1d9; }
#child_main #contents #main .fc_cat06 { color: #96c18b; }
#child_main #contents #main .fc_cat07 { color: #edc563; }
#child_main #contents #main .fc_cat08 { color: #e85f55; }
#child_main #contents #main .fc_cat09 { color: #7959bc; }


/*　 共通募金フッター　
----------------------------------------------------------*/
.Story_box {
  display:flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin-top: 80px;
}
.Story_content {
  width: 58%;
}
.Story_picture {
  width: 39%;
}
.Story_picture img {
  width: 100%;
  height: auto;
}
.Story_content_country {
  margin: 0!important;
}
.Story_content_name {
  font-weight: 800;
}
.Story_content_txt {
  line-height: 1.8;
}
.Story_box .cap {
  display: block;
  margin: 4px 0 0 !important;
  padding: 0;
  font-size: 10px !important;
  text-align: right !important;
}

.Story_movie {
    display: block;
    width: 39%;
    height: 56.25%;
}
.Story_movie .youtube_movie {
    position: relative;
    width: 100%;
    cursor: pointer;
    padding-top: 56.25%;
}
    .Story_movie .youtube_movie iframe {
        position: absolute;
        top:0;
    }
.Story_movie .thumb {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.Story_movie .movie_icon {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
.Story_movie .movie_icon:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    content: "";
    background-image: url(../about_act_img/movie-icon.png);
    background-repeat: no-repeat;
    width: 58px;
    height: 58px;
    opacity: 0.7;
    z-index: 99;
}
.Story_movie img {
    width: 100%;
    height: auto;
}


@media screen and (max-width: 639px) {
  .Story_box {
    display:flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  .Story_picture {
    width: 100%!important;
  }
  .Story_content {
    margin: 10px 0 0;
    width: 100%;
  }
  .Story_movie {
    width: 100%!important;
    }
}