/* Responsive Layoutの設定
------------------------------------------------------------ */

/* Nav bar */
#navbar_res_btn {
    background:#4d881d;
    border: 1px solid #fff;
    border-radius: 0.65rem;
    position: absolute;
    right: 30px;
    top: 40px;
    z-index: 1000;
    cursor: pointer;
    display: none;
}

#navbar_res_btn span {color:#fff;}

/* Languages bar */
#header_top .lang .dropdown-menu {background:#367503;}
#header_top .lang .dropdown-menu a {
    color:#fff;
    font-size: 0.8rem;
    padding: 5px 10px;
    border-bottom:1px solid #428f04;
}
#header_top .lang .dropdown-menu a:last-child {border:none;}


.dropdown-menu {max-height:0}
.dropdown-menu.show {max-height:1000px}

/******** For Footer Background ********/
@media only screen and (max-width: 1400px) {
    #site_footer #navi {background-size: auto; background-color:#3b5001}
}

@media only screen and (max-width: 1216px) {
    #subscription .btn_style01 {margin: 0.71em 0.64em;}
}

/******** over Xl ********/
@media only screen and (min-width: 1200px) {
    #slider_container .news-slider .text-content p {overflow: hidden; font-size: 15px!important;}
    #slider_container .news-slider .text-content h2 {margin-bottom: 12px; font-size: 22px!important;}
}


/******** Xl ********/
@media only screen and (max-width: 1199px) {
    #slider_container .news-slider {min-height: auto;}
    #slider_container .news-slider .text-content p {font-size: 15px;}
    #slider_container .news-slider .text-content h2 {margin-bottom: 12px; font-size: 22px;}
    
    .layout1 #contents, .layout2 #contents, .layout_narrow #contents, #header_title, .layout_2col #bottom_contents, .layout_2col #wrap_contents, 
    .standrd_lyout #bottom_contents, .standrd_lyout #wrap_contents, .layout_2col #top_contents {padding:0 30px 10px;} /*Preserve padding bottom for page content area when in small screen*/
    
    .layout_2col #wrap_contents #main_contents, .layout_2col #wrap_contents #side_contents_right {width: 50%;}
    
    #subscription {background-size: auto;}
    
    #tfu .apps_store .title {display:block}
    
    #top_resources .col-no3 {border-right: none;}
    #top_resources .col-md-6, #top_resources .outframe:nth-child(n+4) {border-top: 1px solid #ccc;}
    #top_resources .outframe {margin: 10px 0; padding: 30px 15px;}
    #top_resources .morebtn {bottom:0}

    .sdg_img_px-1{
        padding-right: .25rem;
        padding-left: .25rem;
    }
    .sdg_img_py-1{
        padding-top: .01rem;
        padding-bottom: .01rem;
    }

}

/******** lg ********/
@media only screen and (max-width: 991px) {
    #main_menu {
        background: #1c3b03;
        margin-top: 16px;
    }
    #main_menu .navbar {padding: 0;}
    #main_menu nav .nav-link br {
        display:none;
    }
    #navbar_res_btn {display:block;}
    #main_menu nav a {
        color:#fff;
        text-align: left;
        padding: 15px 20px;
        border-bottom: 1px solid #2c6002;
        border-top: 1px solid #000000;p
    }
    #main_menu nav a.btn-success {
        padding: 15px 20px 15px 25px !important; 
        margin:0 !important;
    }
    #main_menu nav li:first-child a {border-top: none;}
    #main_menu nav li.active .nav-link {/*background: url('/files/user/facelift/menu_active_mb.png') no-repeat 16px 12px;*/}
    #main_menu nav .dropdown:hover .dropdown-menu {padding-top: 0;}
    #main_menu nav .active {background-color: #152c02;}
    #main_menu nav .dropdown-menu {margin: 0; padding: 0;}
    #main_menu nav .wrap a {padding-left: 60px;}
    #main_menu nav .dropdown-toggle::after {color:#fff;}
    #header_main {padding-bottom: 0; background-position:top center;}
    #header_top .lang li.dropdown {display:block !important;}
    #announcements .slider {
    margin-left: 0;
    }

    #subscription {background-size: auto;}
    #subscription .btn_style01 {margin: 0.71em auto; display: block; max-width:500px}
    
    #site_footer #navi .collapse {display: none !important;}
    #site_footer #navi .collapse.show {display: block !important; border-bottom: 1px solid #6a8817;}
    #site_footer #navi .section:last-child .collapse.show {border-bottom: none;}
    #site_footer .section:last-child .collapse_link[aria-expanded="true"] {border-bottom: 1px solid #6a8817 !important;} 
    
    .layout2 #main_contents {width: 100%; float: none; background: none; padding-right: 0;}
    .layout2 #side_contents_right {width: 100%; float: none; border:none; padding: 0 0 50px 0;}
    .layout2 #main_module {min-height:auto; background: none;}
    
    .subpage_sidebar .collapse, #side_contents_right .collapse {display: none;}
    .subpage_sidebar .collapse.show, #subpage_sidebar .collapse.show, #side_contents_right .collapse.show {display: block;}
    
    #slider_container .news-slider .text-content h2 {font-size: 20px!important;}
    #slider_container .news-slider .text-content {padding: 2vw}
    #slider_container .news-slider .sy-pager {text-align:center; right:inherit; bottom: -30px;}
    #slider_container {margin-bottom: 60px !important;}
    #slider_container .news-slider {overflow:inherit}
    
    table.list th {width:25%!important;}
    
    #tfu #wrap_contents #main_contents, #tfu #wrap_contents #side_contents_right {width: 100%; float:none; padding:0;}
    #tfu .mobile_banner {display:block}
    #tfu .desktop_banner {display:none}
    
    .tab_menu_side_lg {border:1px solid #ececec; border-right:none; border-left:none; box-shadow:none;}
    .tab_menu_side_lg .nav {display:inherit; border:none;}
    .tab_menu_side_lg  a {display: inline-block !important; padding: 5px 15px; margin: 5px 0;}
    .tab_menu_side_lg .nav-pills .nav-link.active {border:1px solid #ddd; border-radius:5px;}
    
    .subpage_sidebar .collapse, #side_contents_right .collapse {display: none !important;}
    .subpage_sidebar .collapse.show, #subpage_sidebar .collapse.show, #side_contents_right .collapse.show {display: block !important;}
    
    .sf_2005 .files li {width:100%;}
    
    #tfu .apps_store .title {display:inline}
    
    .tfu_register p.tfu_submit, .tfu_register h3 {position:relative;}

    .small-only{display:block}
    
    .t-checkbox_wrap {
        min-width: 120px;
        max-width: 120px;
    }
    
    .t-sidebar_bg-lg-none {
        background: none; 
        padding-left: 15px; /*Back to bootstrap normal columns padding*/
        min-height: inherit;
    }
}

/******** md ********/
@media only screen and (max-width: 767px) {

    .t-border_top-md {border-top: 1px solid #ddd;}

    .t-sidebar_bg-md-none {
        background: none; 
        padding-left: 15px; /*Back to bootstrap normal columns padding*/
        min-height: inherit;
    }
    
    .t-sidebar_sdg {
        position: fixed;
        bottom: 0;
        z-index: 999;
        background: #fff;
        width: 100%;
        left: 0;
    }
    .t-sidebar_sdg-wrap {
        overflow-x:scroll;
        padding: 0 10px;
    }
    .t-sidebar_sdg-icons {
        flex-wrap: nowrap;
    }
    .t-sidebar_sdg-icons .icon-sdg_wrap {
        max-width:120px; 
        min-width:120px;
    }
    .t-sidebar_title {
        font-size: 1.2rem;
        margin: 0 0 5px !important;
    }
    .t-sidebar_sdg .icon-sdg {
        background-size: auto 28px;
        line-height: 16px;
    }
    .t-sidebar_related_sdg .icon-sdg img {
        max-height: 160px !important;
        width: auto !important;
    }

    .l-double_col {
        display: inherit;
    }
    .l-double_col-item,
    .l-double_col-item.card.normal {
        width: 100%;
        margin-right: 0;
    }

    .icon-sdg {
        max-height: inherit;
        font-size: 1.1em;
    }
    .brder_md_none {border:none;}
    .brder_md_top {border-top:1px solid #eee;}
    
    .mw-md-100, .w-md-100 {width:100%!important}
    
    .mt-md-none {margin-top:0!important}
    
    #header_main {min-height: inherit;}
    #header_top .searchbar input.searchfield {
        width: 100%;
        max-width: 100px;
    }
    .bootstrap_ver_gallery_fix .searchbar, #projects_photo_gallery .searchbar {max-width: 160px;}
    #top_quicklink .content {
	background: url('/files/user/facelift/quicklink_bg.png') repeat-x bottom;
    }
    #top_quicklink .wrap .row {min-height: 155px;}
    #announcements .slider {padding:10px 0;}
    #announcements .slider div {padding:13px 0; border-bottom:1px solid #f2f2f2;}
    #announcements .slider div:last-child {border:none;}
    #news_event .proposal {margin-top: 30px;}
    #news_event .news {padding-bottom: 0;}
    #top_resources .outframe {border:none !important; border-bottom:1px solid #ededed !important; padding: 10px; margin: 0; margin-top:20px;}
    #top_resources .header {border-right:1px solid #ededed;}
    #top_resources h6 {font-size:1em; text-align:left;}
    #subscription .links {font-size:0.90em;}
    
    .news_list .date_info {text-align:left; margin-bottom:10px;}
    .news_list .date {margin-left: 2.14285714em;}
    .news_list .files ul {margin:10px 0}
    .news_list .date {margin-left:0;}
    .news_list .fa-ul {margin-left: 10px;}
    
    .tfu_register .top_title {margin-top:0;}
    .tfu_register h3 span {padding:0;}
    .tfu_register .other_option {position: relative;}
    .tfu_register {padding: 10px 0 10px;}
    
    #slider_container .news-slider {overflow:inherit; height: 55vw;}
    #slider_container .news-slider .text-content {margin: 0; bottom: -3px; height: auto; top:inherit; width: 100%; background-color:rgba(0, 0, 0, 0.6); padding-bottom: 25px;}
    #slider_container .news-slider .image-content {height:55vw; width: 100%;}
    #slider_container .news-slider .image-content img {width: 100%; margin: auto; max-height: 55vw;}
    #slider_container .news-slider .sy-pager li {width:auto; margin: 0 5px;}
    #slider_container .news-slider .sy-pager li a {width: 38px; height: 36px;}
    #slider_container .sy-controls {width: 100%;}
    
    #tab_menu_normal li a {padding-left:0; padding-right:0;}
    
    #main_menu, #navbarTogglerDemo02 {max-width:100%}
    #main_menu .dropdown-menu, #main_menu nav .dropdown-menu {max-width:100%; overflow:hidden;}
    #main_menu .dropdown-item {white-space:normal;}
    
    .layout_2col_sm #side_contents_left {width:35%;}
    
    .sf_2005 #main_contents {padding-right:0; width: 65%;}
    .SFM-map td {display:block; width:100% !important;}

    #mis_detail .topics_contents > table:first-child > tbody > tr > td, #mis_detail .topics_contents > table:first-child > tbody > tr > td:first-child {width:100% !important; display:block; border:none;}
    #mis_detail .topics_contents > table:first-child > tbody > tr > td:first-child + td {padding-left:0;}
    #mis_detail .topics_contents .brder_right {border:none}
    
    #brochures .pbcation_list .cus_content br {display:none;}
    
    #bsPhotoGalleryModal a.bsp-controls.previous {left: 0 !important}
    #bsPhotoGalleryModal a.bsp-controls.next {right: 0 !important}
    
    .resource_menu #tab_menu_itto .nav-item {
        padding: 10px 0;
        background-size: 40px 41px;
        background-position: left 10px;
        border-bottom: 1px solid #ccc;
        width: 100%;
    }
    .resource_menu #tab_menu_itto .nav-link {
        border:none;
        text-align: left;
        padding-left: 50px;
    }
    .resource_menu .nav-tabs .nav-item.show .nav-link {background-color: transparent; border:none!important}
    li.nav-tabs_bgImage::before,
    li.nav-tabs_bgImage.active::before {
        top: 8px;
        width: 40px;
        height: 41px;
        margin: inherit;
        left: 0;
        right: inherit;
        padding-top: 8px;
        animation: inherit;
        font-size: 20px;
    }

    /* Form align setting : back to align left when text transform from 1 row to 2 row / col-12 */
    form .row > div.col-md-4.col-12, form .row .title {text-align:left!important}
    
    .normal_form_style .row {margin-top:15px}
    
    .ittc_banner {background-size:auto}

    .p-projectdb_donor {width: 100%;}
    .p-projectdb_donor td {display: table-cell !important}
}


/******** sm ********/
@media only screen and (max-width: 575px) {
    #slider_container .news-slider .text-content a.button-link {padding: 0.25em 0;}
    #social_media_link {margin: 0 0 10px; padding: 0 0 5px; border-bottom: 1px solid #406d1b; font-size:17px;}
    #footer #social_media_link {border:none}
    #news_event h3 {font-size:1.5em; padding: 0;}
    #news_event h3 span {display: block; padding: 18px 0 18px 25px;}
    .tfu_cover {min-width: inherit;}
    #slider_container .news-slider .sy-pager li a {width: 25px; height: 23px;}
    
    .print_btn {display:none !important;}
    
    li.featured, ul.featured, p.featured {display:none}
    #top_resources .header img {max-width: 60px}
    
    .brder_sm_none {border:none;}
    ul.list_sm_block li {display:block;}
    table.list th, table.responsive th {display:block; min-width:100%;}
    table.list td, table.responsive td {display:block; min-width:100%;}
    table.responsive th {padding-top:10px; width:auto;}
    table.responsive th.nonres, table.responsive td.nonres, table.responsive tr.nonres td, table.responsive table.nonres td {display:inline-block; min-width:inherit;}
    .sm_w30 {width:30% !important;}
    .sm_w50 {width:50% !important;}
    
    .tfu_logo .issue {position: relative; float: none; display: block; text-align: right; padding-top: 10px;}
    .tfu_other_col img {max-width:80px}
    .tfu_other_col .descrptn {display:none;}
    #tfu .tfu_other_col {min-height:150px; max-height:150px;}
    #tfu .full_edition .apps_store {position:relative; text-align:center;}
    #tfu .full_edition .apps_store img {margin:5px 0;}
    #tfu .mobile_banner {text-align:center}
    
    .layout_2col_sm #side_contents_left {width:100%;}
    
    .sf_2005 #main_contents {padding: 0; width: 100%;}
    .sf_2005 .photo_area {display:block; text-align:center; float:none!important; width:100%;}
    #sfm_2011 .pbcation_list {margin-bottom:0 !important;}

    .tfu_nav a, .page_nav a {padding:0 10px;}
    
    .itto_fellowship_pager {text-align: left;}
    
    .icon-sdg_headline img {
        max-width: 150px;
     }
    .sdg_img_py-1{
        padding-top: .25rem;
        padding-bottom: .25rem;
    }
    .sdg_img_px-1{
        padding-right: .01rem;
        padding-left: .01rem;
    } 
    .p-sdg_landing-catdetail.align-bottom img,
    .p-sdg_landing-catdetail.custom-align img {
        position: inherit !important;
        top: 0 !important;
    }
     
    
    .pbcation_list .style02 table.table_details th {/*width:auto;*/ min-width: 100px}
    
    .pbcation_list .style02 .photo_area {width: 100%; text-align: center;}
    .pbcation_list .style02 .status {width: 100%;}
    .pbcation_list .cus_content img {display: block; float: none !important; margin: 10px auto;}
    .pbcation_list .cus_content {padding-bottom:15px;}
    
    .table_list table th {border:none; background:#eee; margin-top: 10px;}
    .table_list table tr td {border:none}
    
    .subpage_sidebar h5 .badge {top:16px}
    
    #tfu .apps_store .title {display:block; padding-bottom:10px}
    
    .responsive-sm td {width:100%; display:block}
    
    .division .staff_col {
        margin-left: 0!important;
    }
    
    .ittc_banner {background-size: auto 150px; min-height: 150px;}
    .ittc_menu .list a {font-size: 0.95em; line-height: 1.3em}
    
    /* Form align setting : back to align left when text transform from 1 row to 2 row / col-12 */
    form .row > div.col-sm-3.col-12,
    form label.col-form-label,
    .form_item th, table.host_table th
    {text-align:left}
    
    /* Custom forms that still need to remain align right due to 1 row */
    #table_info_1_0 th, #table_info_1_1 th {text-align:right}
    
    .card-columns-sm-1 {column-count: 1}

    /*Cards are used for the photo blocks of Activities in Japan & Focus Areas*/
    .card-columns-2 {column-count: 1}
    
    .t-checkbox_wrap {
        min-width: 105px;
        max-width: 105px;
    }

    /*Resources*/
    .p-top_resources-tab-bg.icon_lm::before {
        max-width: 60px;
        max-height: 59px;
        border-width: 2px;
        font-size: 25px;
        padding-top: 18px;
    }
    
}
/******** xsm ********/
@media only screen and (max-width: 290px) {
    body {overflow-x: scroll;}
    
    #news_event h3 {font-size:1.2rem;}
    #header_top .searchbar input.searchfield {width:50px;}
    #header_main {background-position: top center;}
    
    .tab_menu_side_lg  a {display: block !important; padding: 8px;}
}

/******** For Main Menu ********/
@media only screen and (max-width: 430px) {
    #navbar_res_btn {border:none; top: 0!important; right:10px; border-radius: 0.65rem 0.65rem 0 0;}
    #navbar_res_btn .fa-2x, #navbar_res_btn .fa {font-size:1.5em}
    #header_main {padding-top:30px}
    #main_menu {padding-top: 35px; border-top: none; position: relative; margin-top: 0; background:none}
    #header_main button[aria-expanded="true"] {}
    #main_menu nav {background: #1c3b03; border-top: 3px solid #4d881d}
    
    #rc-imageselect, .g-recaptcha {transform:scale(0.80);-webkit-transform:scale(0.80);transform-origin:0 0;-webkit-transform-origin:0 0;}
}

/******** For TFU ********/
@media only screen and (max-width: 500px) {
    #tfu .topics_contents .text, #tfu .tfu_contents .textS-N {clear: both;}
    #tfu .photo_area {float:none; text-align:center; padding-top:10px}
}

/******** For Main Menu ********/
@media only screen and (max-width: 350px) {
    #rc-imageselect, .g-recaptcha {transform:scale(0.70);-webkit-transform:scale(0.70);transform-origin:0 0;-webkit-transform-origin:0 0;}
    .languegebar {padding: 0;}
    .languegebar ul li {padding-left: 0!important}
    
    .page_nav a {border-right:none; display:block} /*Removed of no longer needed page border seperater between each page nav links when in small screen vertical list view, example page: MIS back issue*/
}

/******** For Main Menu 3 Columns dropdown ********/
@media only screen and (max-width: 1100px) {
    #main_menu .dropdown-menu .multi_col {max-width:990px;}
    #main_menu .dropdown-menu-large .multi_col {max-width:inherit;}
}
@media only screen and (max-width: 960px) {
    #main_menu .dropdown-menu .multi_col {max-width:inherit; flex-wrap:wrap;}
}

/******** For Banner Slider ********/
@media only screen and (max-width: 1300px) {
    #sliderwrap {overflow:hidden !important;}
    .jssort09-600-45 .t {width:400px;}
    .jssorb01 {right:-400px !important;}
}
@media only screen and (max-width: 1250px) {
    .jssort09-600-45 .t {width:350px;}
    .jssorb01 {right:-350px !important;}
}
@media only screen and (max-width: 1180px) {
    .jssort09-600-45 .t {width:250px;}
    .jssorb01 {right:-250px !important;}
}
@media only screen and (max-width: 1080px) {
     #sliderwrap {background:#0000;}
    #jssor_1 {margin:0 auto;}
    .bannercaption{top: auto !important; right:0 !important; left: 0 !important; bottom: 0; padding-bottom: 0; width: 807px !important; height: 200px;}
    .bannercaption .captionwrap{filter:alpha(opacity=40.0);opacity:0.5; background:#000 !important;}
    .jssort09-600-45 .p {width: 807px; height: 200px;}
    .jssort09-600-45 .t {width: 96%; height:96%; padding: 2%;}
    .jssort09-600-45 .p a {display: none;}
}
@media only screen and (max-width: 1079px) {
    .jssorb01 {position:absolute; bottom:-35px !important; right:40% !important;}
    .jssort09-600-45 .p h1 {margin-bottom: 0;}
    .bannercaption, .jssort09-600-45 .p {height: 180px;}
    .jssort09-600-45 .p p, .jssort09-600-45 .p a {color:#fff;}
    #sliderwrap {
    padding-bottom: 45px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(91%, #275502), color-stop(9%, white));
    background: -webkit-linear-gradient(top, #275502 91%, white 9%);
    background: -o-linear-gradient(top, #275502 91%, white 9%);
    background: linear-gradient(to bottom, #275502 91%, white 9%);}
}
@media only screen and (max-width: 800px) {
    #sliderwrap {background: none;}
    .jssort09-600-45 .p p {display:none;}
    .bannercaption, .jssort09-600-45 .p {height: 100px;}
}
@media only screen and (max-width: 700px) {
    .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {width: 43px; height: 41px; margin:0 5px;}
    .jssorb01 {position:absolute; bottom:-55px !important;}
    #slider_container .news-slider .slide-descrip {display:none;}
}
@media only screen and (max-width: 400px) {
    .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {width: 53px; height: 51px; margin:0 5px;}
    .jssorb01 {position:absolute; bottom:-65px !important;}
}