@charset "UTF-8";

.inner img:not(header .inner img,footer .inner img){width: 100%;}

/* SDGsリスト-------------------------------------------------- */

.sdgs_list div{
    border-bottom: 1px solid #FF9901;
    margin-bottom: 30px;
    padding-bottom: 30px;
    text-align: center;
}
.sdgs_list ul{
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.sdgs_list ul li{margin-right: 10px;}

/* 新着一覧-------------------------------------------------- */

#catelist2 {padding-top: 20px;}
.catelist-title{
    display: flex;
    justify-content: space-between;
    margin-bottom: 26px;
}
.catelist-title .main-title{margin: 0;}
.tab_cate{
    width: 100%;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;

}
.tab_cate li{
    width: calc(100% / 4);
    text-align: center;
    padding: 20px;
    line-height: 1;
    font-size: 18px;
    color: #222;
    border-bottom: 2px solid #696969;
    background: #fff;
    cursor: pointer;
}

/* .tab_cate li:nth-of-type(1){
   background: #157d78;
}
.tab_cate li:nth-of-type(2){
   background: #07429a;
}
.tab_cate li:nth-of-type(3){
   background: #a10602;
}
.tab_cate li:nth-of-type(4){
   background: #d85311;
}

.tab_cate li:nth-of-type(5){
   background: #008C85;
   } */

   .tab_cate li.active{
    background: #eee;
    color: #333;
   }

   .tab_cate li a, .tab_cate li a:link, .tab_cate li a:hover, .tab_cate li a:visited, .tab_cate li a:active {
    color: #fff;
   }

   .area > div {display: none;}
   .area > div.show {display: block;}

   /* 記事 */
   #catelist3 .show{
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    align-items: flex-start;
   }

   .catelistrow a {
    display: block;
   }
   
   #catelist3 .catelistrow{
     width: calc((100% / 4) - 20px);
     height: 340px;
     background: #fff;
     box-sizing: border-box;
     padding: 14px;
     margin: 0 10px 20px;
   }



   #catelist3 .catelistrow .cate{
    width: auto;
    background: #009b4b;
    border-radius: 5px;
    color: #fff;
    padding: 5px 10px;
    display: table;
    font-size: 14px;
    text-align: center;
    line-height: 1;
   }

#catelist3 .catelistrow .cate.cate_95{background: #25a739;font-size: 60%;padding: 5px;line-height: 1.5;}
#catelist3 .catelistrow .cate.cate_96{background: #dc007a;font-size: 60%;padding: 5px;line-height: 1.5;}
#catelist3 .catelistrow .cate.cate_97{background: #0076ba;}

#catelist3 .catelistrow .cate_wrap{
    /* width: 15%; */
    display: flex;
    margin-right: 20px;
}

#catelist3 .catelistrow .thumb{text-align: center; margin-bottom: 10px;}
#catelist3 .catelistrow .thumb img{width: 100%; height: 100%;}

#catelist3 .catelistrow .date{width: 10%; margin-right: 20px;}
#catelist3 .catelistrow .text{width: 100%; text-align: left; line-height: 1.4;}


.new-txt{
    color: #ffffff;
    background: #f00;
    font-weight: 400;
    /* display: inline-block; */
    /* padding: 0.2rem 0.2rem; */
    /* margin-bottom: 0.4rem; */
    padding: 5px 10px;
    line-height: 1;
    margin-left: 10px;
    font-size: 14px;
    border-radius: 5px;
}


@media screen and (max-width: 736px) {

    .topics-area{padding: 0 10px;}

    .catelist-title{
        display: block;
    }

    .catelist-title .main-title span{text-align: center;}

    .tab_cate{flex-wrap: wrap;}
    .tab_cate li{
        width: 100%;
        font-size: 10px;
        padding: 10px 0px;
    }



    #catelist3 .catelistrow{
        width: calc((100% / 2) - 20px);
        height: 270px;
        padding: 10px;
        font-size: 12px;
        flex-wrap: wrap;
    }




    #catelist3 .catelistrow .date{margin-right: 10px;}

    #catelist3 .catelistrow .date{width: 10%;}
    #catelist3 .catelistrow .text{width: 100%;}
    #catelist3 .catelistrow .text a{display: block;margin: 5px 0;}



}