@charset "utf-8";
/* Report */
.report{position: relative; z-index: 10;}
.report-tit{font-size: 3.8rem; line-height: 1.4; padding: 80px 0; color: #009869; text-align: center;}
.report-tit:before{content: ''; width: 33px; height: 33px; margin-right: 20px; display: inline-block; background: url("../img/common/ic-pen.svg") no-repeat top left/100% 100%;}

@media screen and (max-width: 767px){
    .report-tit{font-size: 2.6rem; padding: 50px 0 40px;}
    .report-tit:before{display: block; margin: 0 auto 10px; width: 28px; height: 28px;}
}

/* Filter */
.filter{background: #e2e4d1; border-radius: 10px; margin-bottom: 50px; padding: 30px 3.7%; text-align: center;}
.filter-tit{font-size: 2rem; line-height: 1.5; font-weight: bold; margin-bottom: 15px; color: #343434;}
.filter-tit:before{content: ""; width: 16px; height: 16px; background: url("../img/common/ic-filter.svg") no-repeat top center/100% 100%; margin-right: 10px; display: inline-block;}

.filter-nav{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.filter-nav a{width: 24%; border: 2px solid #009869; color: #009869; background: #fff; font-size: min(1.8vw,1.8rem); line-height: 1.3; font-weight: bold; border-radius: 46px; height: 46px; display: flex; justify-content: center; align-items: center; cursor: pointer;}  
.filter-nav a:before{content: ""; margin-right: 0.5em; display: inline-block; background: #009869; position: relative; top: 1px;}

.filter-nav a#f-all:before{display: none;}
.filter-nav a#f-wood:before{width: 0.792em; height: 0.958em; mask: url(../img/common/ic-leaf.svg) no-repeat top left / 100% auto; -webkit-mask: url(../img/common/ic-leaf.svg) no-repeat top left / 100% auto;}
.filter-nav a#f-recycle:before {width: 0.875em; height: 1.125em; mask: url(../img/common/ic-recycle.svg) no-repeat top left / 100% auto; -webkit-mask: url(../img/common/ic-recycle.svg) no-repeat top left / 100% auto;}
.filter-nav a#f-kinomori:before{width: 0.834em; height: 1.042em; mask: url(../img/common/ic-tree.svg) no-repeat top left / 100% auto; -webkit-mask: url(../img/common/ic-tree.svg) no-repeat top left / 100% auto;}

.filter-nav a:hover,
.filter-nav a.is-active{background: #009869; color: #fff;}
.filter-nav a:hover:before,
.filter-nav a.is-active:before{background: #fff;}

@media screen and (max-width: 767px){    
    .filter{padding: 20px; margin-bottom: 40px;}
    .filter-tit{font-size: 1.8rem;}
    .filter-tit:before{width: 13px; height: 13px;}
    .filter-nav a{width: 49%; margin-bottom: 2%; font-size: min(3.4vw,1.6rem);}
}

/* Report List */
.report-list{display: flex; flex-wrap: wrap;}
.report-item .tit{font-size: 1.8rem; line-height: 1.6;}
.report-item .tit.soon{margin: 15px 0 0 0; font-size: 1.6rem;}
.report-item .txt{line-height: 1.6; font-weight: bold; margin-top: 5px; font-family: "Zen Kaku Gothic New", serif;}

.report-item .progress{display: flex; overflow: hidden; position: absolute; bottom: 0; left: 0; z-index: 1;}
.report-item .progress li{min-width: 70px; height: 32px; display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; text-align: center; font-size: 1.4rem; font-weight: bold; line-height: 1.3; color: #fff; background: #009869; font-family: "Zen Kaku Gothic New", serif;}
.report-item .progress .new{background: #ffdb29; color: #343434; font-family: "Lato", serif; font-size: 1.6rem;}

.report-item .cate{font-family: "Zen Kaku Gothic New", serif; color: #009869; margin: 15px 0 5px; line-height: 1.7;}
.report-item .cate li:before{content: ''; margin-right: 10px; display: inline-block; position: relative; top: 3px;}
.report-item .cate01:before{width: 16px; height: 20px; background: url("../img/common/ic-leaf.svg") no-repeat top left/100% auto;}
.report-item .cate02:before{width: 14px; height: 18px; background: url("../img/common/ic-recycle.svg") no-repeat top left/100% auto;}
.report-item .cate03:before{width: 16px; height: 18px; background: url("../img/common/ic-tree.svg") no-repeat top left/100% auto;}

.report-item .hashtag{display: flex; flex-wrap: wrap; margin-top: 13px;}
.report-item .hashtag li{padding: 3px 10px 4px; border: 1px solid #009869; color: #009869; font-size: 1.4rem; line-height: 1.5; margin: 0 6px 6px 0;}

.report-item .m-photo{border-radius: 10px 10px 10px 0;}
.report-item .m-photo img{width: 100%;}

.report-item a:hover .photo img{opacity: .8;}
.report-item a:hover{color: #009869;}

@media screen and (min-width: 1150px){
    .report-list{margin: 0 -33px;}
	.report-item{width: 316px; margin: 0 33px 40px;}
}

@media screen and (max-width: 1149px) and (min-width: 768px){
    .report-list{margin: 0 -20px;}
	.report-item{width: calc(33.33% - 40px); margin: 0 20px 40px;}
}

@media screen and (max-width: 767px){    
    .report-item{width: 100%; margin: 0 0 30px 0;}    
    .report-item:last-of-type{margin: 0;}
    .report-item .tit{font-size: 1.6rem; line-height: 1.6875;}
    .report-item .tit.soon{font-size: 1.4rem;}
    .report-item .progress li{width: 61px; height: 30px;}
    .report-item .progress .new{width: 55px; font-size: 1.4rem;}
    .report-item .hashtag li{font-size: 1.2rem;}
}