@charset "utf-8";

/* ODAスマートフォン対応用CSS */

/* ============================================================ *\
$
\* ============================================================ */

.sp-only-inline, .sp-only-block {display: block;}
.pc-only-inline, .pc-only-block {display: none!important;}
#navi-global {display: none;}
#contents {min-width: 320px;}
#contents .contents_wrapper {
position: relative;
padding-top: 15px;
width:100%;
}

#menu{display:none;}
#breadcrumb{display:none;}

#contents h1.title1 {margin-bottom: 0;}

#contents #main,
#contents #sub {float: none!important;}

#contents #main {
width: 100%!important;
padding-bottom: 10px;
border-bottom: 1px solid #d5d5d5;
}
#contents #sub {
display: block!important;
padding-top: 10px;
margin: 0 auto;
}
#contents #sub #oda_menu_icon {
display: block;
position: absolute;
top: -46px;
right: 5px;
width: 40px;
height: 40px;
z-index: 1;
}

.page-single #contents #sub #oda_menu_icon{
top: -59px;
}
#contents #sub #oda_gmenu_area {
display: none;
position: absolute;
top: -1px;
left: 0;
width: 100%;
z-index: 1;
box-shadow: 0px 5px 15px -5px #000;
background-color:#fff;
}
.page-single #contents #sub #oda_gmenu_area{
top: -15px;
}

#contents #sub #oda_gmenu_area #oda_gmenu {
width: 100%;
margin: 0;
background-color: #e0f1f7;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

#contents #sub #oda_gmenu_area #oda_gmenu:after {
content: "";
display: block;
overflow: hidden;
clear: both;
}
#contents #sub #oda_gmenu_area #oda_gmenu dt {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

#oda_gmenu dt.selected,#oda_recommend dt.selected {
background-color: #1756BD;
line-height: 40px;
color: #FFFFFF;
font-weight: bold;
padding: 0 0 0 10px;
}

#oda_gmenu dt.selected a:link {
color: #000099;
}
#oda_gmenu dt.selected a {
text-decoration: underline;
color: #000099;
}

#oda_gmenu dt.selected,#oda_recommend dt.selected a:visited,
a:hover,
a:active,
a:visited:hover {
color: #5533cc;
background-color: transparent;
}

#contents #sub #oda_gmenu_area #oda_gmenu dd {	display: none!important;}

/* ============================================================ *\
$ODAトップページ用
\* ============================================================ */

#contents #main .top_slider {	width: 96%;}
#contents #main .top_slider .bx-wrapper .bx-viewport {	padding: 0!important;}
#contents #main .top_slider .bx-viewport .bxslider li {	width: 100%!important;}
#contents #main .top_slider .bx-wrapper .bx-viewport img {	height: auto;}
#contents #main .top_slider .bx-wrapper .bx-controls-direction a {
/*display: none;*/
width: 44px;
height: 44px;
top: inherit;
bottom: -44px;
background: none;
z-index: 1;
}
#contents #main .top_slider {
padding: 0;
padding-bottom: 10px;
background-color: #FFFFFF;
}

#contents #main .top_slider .bx-wrapper .bx-controls-direction a:after {
content:"";
display: block;
width: 32px;
height: 32px;
position: relative;
top: -17px;
left: 6px;
display: none;
}

#contents #main .top_slider .bx-wrapper {
border: solid 1px #CCCCCC;
}

#contents #main .top_slider .bx-wrapper .bx-controls-direction .bx-prev:after {
background: url(/mofaj/gaiko/oda/files/000069926.png) no-repeat 0 -32px;
}
#contents #main .top_slider .bx-wrapper .bx-controls-direction .bx-next:after {
background: url(/mofaj/gaiko/oda/files/000069926.png) no-repeat -43px -32px;
}

#contents #main #top_menu_contents #top_gmenu {
padding: 0 5px 5px;
}
#contents #main #top_menu_contents #top_gmenu:after {
content: "";
display: block;
overflow: hidden;
clear: both;
}
#contents #main #top_menu_contents #top_gmenu dd,
#contents #main #top_menu_contents #top_gmenu .oda_gmenu_title {
display: none;
}
#contents #main #top_menu_contents #top_gmenu dt {
width: 50%;
height: 50px;
padding: 1px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
float: left;
}
#contents #main #top_menu_contents #top_gmenu dt .oda_gmenu_list {
display: table;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #1756bd;
background-color: #BCE0FA;
}
#contents #main #top_menu_contents #top_gmenu dt .oda_gmenu_list a {
display: table-cell;
width: 100%;
height: 100%;
padding-left: 10px;
padding-right: 25px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
position: relative;
vertical-align: middle;
line-height: 1.2em;
font-weight: bold;
background: transparent;
}
#contents #main #top_menu_contents .top_link_list {
padding: 0 5px 5px
}
#contents #main #top_menu_contents .top_link_list:after {
content: "";
display: block;
overflow: hidden;
clear: both;
}
#contents #main #top_menu_contents .top_link_list li {
width: 50%;
padding-left: 2px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
float: left;
}
#contents #main #top_menu_contents .top_link_list li:first-child {
padding-left: 0;
}
#contents #main #top_menu_contents .top_link_list li a {
display: inline-block;
width: 100%;
height: 100%;
padding: 3px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #1756bd;
text-align: center;
}

#contents #main #top_menu_contents #top_gmenu dt .oda_gmenu_list a {
}
#contents #main #top_menu_contents #top_gmenu dt .oda_gmenu_list a:after {
width: 15px;
height: 15px;
content: "";
border: solid #000;
border-width: 1px 1px 0 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
display: block;
position: absolute;
top: 50%;
right: 10px;
margin-top: -8px;
}



#page-topindex div#main h2.link a {
background-image:none;
}

#page-topindex div#main h2.link a {
position: absolute;
right: -1px;
top: -1px;
border-top-color: #1756bd;
border-right-color: #1756bd;
border-left-color: #1756bd;
color: #fff;
text-decoration: none;
width: 90px !important;
box-sizing: border-box;
background-color:#1756bd !important;
display: block;
padding: 5px 8px 11px 12px;
font-size: 80% !Important;
}

#page-topindex div#main h2.link a:hover {

}

#page-topindex div#main h2.link a:before{
width: 20px;
height: 20px;
content: "";
border-radius: 50%;
display: block;
position: absolute;
top: 50%;
right: 9px;
margin-top: -9px;
background-color: #fff;
}
#page-topindex div#main h2.link a:after{
border-width: 1px 1px 0px 0px;
border-color: #1756bd;
border-style:solid;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
right: 16px;
margin-top: -3px;
width: 7px;
height: 7px;
content: "";
display: block;
position: absolute;
top: 50%;
}

#page-topindex div#main h2.link.toggle a.open:after{
border-width: 0px 1px 1px 0px;
right: 15px;
margin-top: -1px;
}
#page-topindex div#main h2.link.toggle a.close:after{
border-width: 1px 0px 0px 1px;
right: 15px;
margin-top: -1px;
}

#page-topindex div#main h2.link.toggle a.open,
#page-topindex div#main h2.link.toggle a.close{
display:none
}

#page-topindex div#main .top_recommend_contents {
padding: 10px;
}
#page-topindex div#main .top_recommend_contents ul {
border: 1px solid #d5d5d5;
}
#page-topindex div#main .top_recommend_contents li {
border-top: 1px solid #d5d5d5;
}
#page-topindex div#main .top_recommend_contents li:first-child {
border-top: none;
}
#page-topindex div#main .top_recommend_contents li a {
display: inline-block;
width: 100%;
padding: 8px;
padding-right: 25px;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

list-date .top_recommend_contents li a:after {
width: 15px;
height: 15px;
content: "";
border: solid #000;
border-width: 1px 1px 0 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
display: block;
position: absolute;
top: 50%;
right: 10px;
margin-top: -8px;
}


#contents #main dl.list-date {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);

margin: 0 2%;}

#contents #main dl.list-date dt {
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}


#contents #main .list-date dt {
border-top: none;
margin-top: 0;
padding-top: 10px;
}

#contents #main .list-date dt:first-child {
padding-top: 10px;
}

#contents #main dl.list-date dd ul.link-arrow {
margin-bottom: 0 !important;
}

.oda_mail_magazine_cont {
margin-top: 10px;
}

div#footer .bg-navy .wrapper {
width: 100%;
padding-left: 0px;
padding-right: 0px;
}

body div#footer .menu-sub{
float: none;
}

div#footer .bg-navy .wrapper{
height:auto;
}

div#footer .bg-navy p{
float:none;
}

body div#footer .link-warrow a:hover{
background:none;
color:#ffffff;
}

body div#footer .link-warrow a.link-map{
font-size: 1.1em;
text-decoration: underline;
text-align: center;
color: #192a80 !important;
width: auto;
background-color: #fff !important;
background-image: none;
display: block;
position: relative;
border: none;
padding: 10px 25px 10px 10px !important;
margin: 10px 0;
}

body div#footer .link-warrow a.link-map:before {
width: 15px;
height: 15px;
content: "";
border-radius: 50%;
display: block;	
position: absolute;
top: 50%;
right: 9px;
margin-top: -7px;
}

body div#footer .link-warrow a.link-map:after {
width: 6px;
height: 6px;
content: "";
border: solid #fff;
display: block;	
position: absolute;
top: 50%;
}
body div#footer .link-warrow a.link-map:after {
border-width: 1px 1px 0 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
right: 14px;
margin-top: -3px;
}
/* ============================================================ *\
$左メニュー
\* ============================================================ */

/* リンクリスト */
ul.link_list {
width: auto;
margin: 0;
padding: 0;
list-style-type: none;
}
ul.link_list li {
border: 1px solid #AAB5C0;
border-top:0;
margin-bottom: 0px;
background-color:#fff;
}
ul.link_list li a {
display: block;
text-align: left;
padding: 12px 5px 12px 9px;
line-height: 1.2;
}

#contents #oda_gmenu_area ul{margin-bottom:0;}

#oda_menu_icon a:hover{
background:none;
}

#oda_menu_icon a.menu_icon{
display:block;
width:40px;
height:40px;
background-image:url(/mofaj/gaiko/oda/files/000070022.png);
background-position:0px 0px;
background-repeat: no-repeat;
}

#oda_menu_icon.selected a.menu_icon{
background-position:0px -40px;
}

/*スマホ用imgクラス*/
img.sp_image {
width: 100% !important;
}

.country_select .link li {
list-style: none;
width: 100%;
padding-right: 10px;
}
ul.list2 {
-webkit-padding-start: 0;
}

body.page-index div.twocolumn {
padding: 0;
}

body.page-single .column-wrapper div.twocolumn {
width: auto;
margin-left: 0;
margin-bottom: 15px;
box-sizing: border-box;
float: none;
padding: 0;
}

body.page-single .column-wrapper div.threecolumn {
width: auto;
margin-left: 0;
/*margin-bottom: 15px;*/
box-sizing: border-box;
float: none;
padding: 10px;
}

/* リンクと画像横並び*/
body.page-single .link_image ul.link {
width: 50%;
}

body.page-single .link_image ul.link li {
list-style: none;
}

body.page-single .link_image ul.image {
-webkit-padding-start: 0 !important;
float: none;
}

body.page-single .link_image ul.image img{
margin-bottom: 5px;
}

body.page-single .link_image ul.image li {
list-style: none;
}


/* 画像と説明文*/

body.page-single .image_description .description {
width: auto;
}

body.page-single .image_description .image {
max-width: none;
margin: 0 auto;
float: none;
}


/* カテゴリー内新着情報*/
.category_news dl {
margin-bottom: 10px;
border-bottom: dashed 1px #CCCCCC;
}
.image_description div.description{
width:auto!impotant;
}
.category_news dt {
float: none;
}

.category_news dd {
float: none;
width: auto;
-webkit-margin-start: 0px;
}


/* 2カラムテンプレート*/
body.page-single .column-wrapper div.twocolumn dl.float dd {
float: right;
width: 220px;
}

/* ============================================================ *\
$国別情報
\* ============================================================ */
.area_select .pc_map{
display:none;
}
.area_select .sp_map{
display:block;
}

.country_select .map {
width: auto;
border: solid 1px #666666;
}

.country_select .map img {
width: auto;
}

.country_select .link {
float:left;
border-bottom: solid 1px #CCCCCC;
margin-bottom: 5px;
}

.country_select .link ul {
width: 48%;
-webkit-padding-start: 5px;
}

.country_select .link li {
list-style: none;
padding-right: 10px;
width: 90%;
}

.country_select .link ul.one_column li {
float: left;
width: 43%;
margin-right: 5px !important;
margin-left: 5px !important;
}

.country_select .link ul.two_column li {
float: left;
width: 43%;
margin-right: 5px !important;
margin-left: 5px !important;
}

.country_select .pc_map{
display:none;
}
.country_select .sp_map{
display:block;
}
/* ============================================================ *\
$国際協力とNGO
\* ============================================================ */
/* 国際協力とNGOの画像横並び*/
body.page-single ul.img_left{
margin: 0 auto;
}
body.page-single ul.img_left li{
float: none;
list-style: none;
text-align: center;
display: block;
vertical-align: middle;
}

/* ============================================================ *\
$テーブルデザイン（共通）
\* ============================================================ */

/*フォーム用テーブル*/
.form_table01 table {
margin-bottom: 1.5em;
border: none;
width:96%;
}

.form_table01 table tr {
display: block;
margin-bottom: 1.5em;
}

.form_table01 table th,
.form_table01 table td,
.form_table01 table td.midashi {
display: list-item;
border: none;
width: 92%;
text-align: left;
padding: 0px;
font-weight: bold;
background-color: #FFFFFF;
list-style:none;
}

.form_table01 table td input,
.form_table01 table td textarea {
width: 100%;
}

.form_table01 input[type="submit"] {
width: 60%;
padding: 10px;
margin-right: 10px;
}

.form_table01 input[type="reset"] {
width: 30%;
padding: 10px;
}

/*PC強制表示*/
body.page-single p.archive-link a.pc-layout-link {
padding-right: 21px;
background: url(/mofaj/gaiko/oda/files/000003447.png) center right no-repeat;
background-size: 19px 16px;
display: inherit;
float: right;
}

/*PC強制表示　captionと並列用*/
body.page-single span.archive-link a.pc-layout-link {
padding-right: 21px;
background: url(/mofaj/gaiko/oda/files/000003447.png) center right no-repeat;
background-size: 19px 16px;
font-size: 14px;
font-weight: normal;
float: right;
display: inherit;
}
/* SP時のみ非表示とするクラス */
.pc_disp_none{
display:none !important;
}

/* ============================================================ *\
$トップページ
\* ============================================================ */
/*　メルマガエリア　*/

.oda_mail_magazine_cont .mail_magazine_area{
width:auto;
height:auto;
background:none;
border:none;
margin:0 2%;
}

.oda_mail_magazine_cont .mail_magazine_tite{
width:auto;
margin:10px 0 0 10px;
color:#fff;
}
.oda_mail_magazine_cont .mail_magazine_titesub{
width:auto;
margin-top:2px;
}

.oda_mail_magazine_cont .mail_magazine_text{
width: auto;
margin:5px 10px 10px 10px;
}

.mail_magazine_titearea{
/* float:none; */
width:auto;
height:auto;
background-image:url(/mofaj/gaiko/oda/files/000070023.png);
margin-top:5px;
border: solid 2px #e2e2e2;
box-sizing: border-box;

}
.mail_magazine_btarea{
display:block;
float:none;
width: auto;
margin: 5px 0;
box-sizing: border-box;
height: 53px;
}

.oda_mail_magazine_cont .mail_magazine_backnumber,
.oda_mail_magazine_cont .mail_magazine_add,
.oda_mail_magazine_cont .mail_magazine_qr{
float:none;
height: 51px;
min-height: 51px;
margin:0px;
position: static;
background-image:none;
text-decoration: none;
}

.oda_mail_magazine_cont .mail_magazine_backnumber{
width: 49%;
box-sizing: border-box;
float:left;
margin:5px 0 0 0;
}

.oda_mail_magazine_cont .mail_magazine_add{
width:49%;
float:right;
box-sizing: border-box;
margin:5px 0 0 0;
}

.oda_mail_magazine_cont .mail_magazine_qr{
display:none
}

.oda_mail_magazine_cont .mail_magazine_bt_title{
background-image: url(/mofaj/gaiko/oda/files/000070024.png);
background-repeat: no-repeat;
position: static; 
width: 120px;
height: 46px;
line-height:50px;
background-size:50px;
margin:0 auto;
padding-left:30px;
font-size:90%;
}

.mail_magazine_backnumber .mail_magazine_bt_title{
background-position: 5px 0px;
}

.mail_magazine_add .mail_magazine_bt_title{
background-position: 2px -93px;
}
/*　メルマガ一覧　*/
table.bdr th, table.oda_bdr th.date {
width: 51px;
}

table.bdr th, table.oda_bdr th.number {
width: 55px;
}

/* ============================================================ *\
$ミレニアム開発目標（MDGs），ポスト2015年開発アジェンダ
$/oda/doukou/mdgs.html
\* ============================================================ */
.mdgs_bn ul {
-webkit-padding-start: 0;
}

.mdgs_bn li {
width: 93%;
height: 45px;
float: left;
border: solid 1px #CCCCCC;
margin: 0 0 10px;
}


.mdgs_bn dl {
padding: 0;
margin: 0;
}

.mdgs_bn dt {
float: left;
margin-right: 5px;
}

.mdgs_bn dd {
text-align: center;
line-height: 120%;
}

.mdgs_bn dd.line1 {
padding-top: 15px;
}

.mdgs_bn dd.line2 {
padding-top: 7px;
}

/* ============================================================ *\
$各国の国別援助方針・事業展開計画
$/oda/seisaku/kuni_enjyo_kakkoku.html
\* ============================================================ */

.listtable ul.data li.title {
display: block;
width: 100%;
}

#contents .listtable ul.data li.styled2{
margin-left:20px;
}

/* ============================================================ *\
$メルマガバックナンバー　/oda/mail/bn.html
\* ============================================================ */
#fy_list2 .date,
#fy_list .date{min-width:50px;width:60px;}
#fy_list2 .number,
#fy_list .number{min-width:50px;width:60px;}


/*　世界地図位置調整　*/
.sectionBody p.area_select {
margin-left: 0px;
}

/*PC版で非表示にしたエリアを表示*/
.oda_pagetop_area  {
  display: block;
}

/*PC版で追加したリンクエリアを非表示*/
.contents_link_area {
  display: none;
}

/* ============================================================ *\
$英語ページへのリンク
\* ============================================================ */
.lang_en {
  margin: 0px auto 10px;
  width: 96%;
  box-sizing: border-box;
  font-size:14px;
}

.lang_en a.lang_en_a{
  padding: 6px 10px;
}
#oda_recommend {
margin-bottom: 15px
}

div#main h2.title2{
    padding-bottom: 0.7em;
}