@charset "utf-8";
/* CSS Document */





/* --------------------

topics

-------------------- */
#activities #topics, 
#activities #topics_reports, 
#activities #topics_voices {
    margin-bottom: 60px;
}
@media only screen and (max-width: 768px) {
    #activities #topics, 
    #activities #topics_reports, 
    #activities #topics_voices {
        margin-bottom: 10.7vw;
    }
}



#topics .thumb_exp_wrap, 
#activities02 #topics02 .thumb_exp_wrap, 
#topics_reports .thumb_exp_wrap, 
#topics_voices .thumb_exp_wrap {
    position: relative;
    margin-top: 80px;
}
@media only screen and (max-width: 768px) {
    #topics .thumb_exp_wrap, 
    #activities02 #topics02 .thumb_exp_wrap, 
    #topics_reports .thumb_exp_wrap, 
    #topics_voices .thumb_exp_wrap {
/*        margin-top: calc( 40 * 100vw / 375 ); */
        margin-top: calc( calc( 43 + 18.5 ) * 100vw / 375 );
    }
}



#topics .thumb_exp_wrap .thumb, 
#topics .thumb_exp_wrap .exp, 
#topics .thumb_exp_wrap .category_wrap .update_date, 
#activities02 #topics02 .thumb_exp_wrap .thumb, 
#activities02 #topics02 .thumb_exp_wrap .exp, 
#activities02 #topics02 .thumb_exp_wrap .category_wrap .update_date, 
#topics_reports .thumb_exp_wrap .thumb, 
#topics_reports .thumb_exp_wrap .exp, 
#topics_reports .thumb_exp_wrap .category_wrap .update_date, 
#topics_voices .thumb_exp_wrap .thumb, 
#topics_voices .thumb_exp_wrap .exp, 
#topics_voices .thumb_exp_wrap .category_wrap .update_date {
    transition: opacity 0.5s;
}
#topics .thumb_exp_wrap.effect_topics_inview .thumb, 
#topics .thumb_exp_wrap.effect_topics_inview .exp, 
#topics .thumb_exp_wrap.effect_topics_inview .category_wrap .update_date, 
#activities02 #topics02 .thumb_exp_wrap.effect_topics_inview .thumb, 
#activities02 #topics02 .thumb_exp_wrap.effect_topics_inview .exp, 
#activities02 #topics02 .thumb_exp_wrap.effect_topics_inview .category_wrap .update_date, 
#topics_reports .thumb_exp_wrap.effect_topics_inview .thumb, 
#topics_reports .thumb_exp_wrap.effect_topics_inview .exp, 
#topics_reports .thumb_exp_wrap.effect_topics_inview .category_wrap .update_date, 
#topics_voices .thumb_exp_wrap.effect_topics_inview .thumb, 
#topics_voices .thumb_exp_wrap.effect_topics_inview .exp, 
#topics_voices .thumb_exp_wrap.effect_topics_inview .category_wrap .update_date {
    opacity: 1;
}
#topics .thumb_exp_wrap:not(.effect_topics_inview) .thumb, 
#activities02 #topics02 .thumb_exp_wrap:not(.effect_topics_inview) .thumb, 
#topics_reports .thumb_exp_wrap:not(.effect_topics_inview) .thumb, 
#topics_voices .thumb_exp_wrap:not(.effect_topics_inview) .thumb {
    opacity: 0.3;
}
#topics .thumb_exp_wrap:not(.effect_topics_inview) .exp, 
#activities02 #topics02 .thumb_exp_wrap:not(.effect_topics_inview) .exp, 
#topics_reports .thumb_exp_wrap:not(.effect_topics_inview) .exp, 
#topics_voices .thumb_exp_wrap:not(.effect_topics_inview) .exp {
    opacity: 0.1;
}
#topics .thumb_exp_wrap:not(.effect_topics_inview) .category_wrap .update_date, 
#activities02 #topics02 .thumb_exp_wrap:not(.effect_topics_inview) .category_wrap .update_date, 
#topics_reports .thumb_exp_wrap:not(.effect_topics_inview) .category_wrap .update_date, 
#topics_voices .thumb_exp_wrap:not(.effect_topics_inview) .category_wrap .update_date {
    opacity: 0.1;
}
@media only screen and (max-width: 768px) {
}



#topics .topics_inview .thumb .image,
#topics .topics_inview .exp .txt, 
#activities02 #topics02 .topics_inview .thumb .image,
#activities02 #topics02 .topics_inview .exp .txt, 
#topics_reports .topics_inview .thumb .image,
#topics_reports .topics_inview .exp .txt, 
#topics_voices .topics_inview .thumb .image,
#topics_voices .topics_inview .exp .txt {
    /*動きのないページもあるため、このCSSには.topics_inviewをつけて制御*/
	transition: all 0.9s;
	top: 0;
}
@media only screen and (max-width: 768px) {
}



#topics .thumb_exp, 
#activities02 #topics02 .thumb_exp, 
#topics_reports .thumb_exp, 
#topics_voices .thumb_exp {
    min-height: 190px;
    padding: 20px;
    background-color: #fff;
    border-radius: 0.5rem 0.5rem;
}
@media only screen and (max-width: 768px) {
    #topics .thumb_exp, 
    #activities02 #topics02 .thumb_exp, 
    #topics_reports .thumb_exp, 
    #topics_voices .thumb_exp {
        min-height: calc( 272 * 100vw / 375 );
        padding: calc( 15 * 100vw / 375 );
    }
}



#topics .reports .thumb, 
#topics .voices .thumb, 
#topics .plans .thumb, 
#activities02 #topics02 .reports .thumb, 
#activities02 #topics02 .voices .thumb, 
#activities02 #topics02 .plans .thumb, 
#topics_reports .reports .thumb, 
#topics_reports .voices .thumb, 
#topics_reports .plans .thumb, 
#topics_voices .reports .thumb, 
#topics_voices .voices .thumb, 
#topics_voices .plans .thumb {
    background-color: #fff;
}
#topics .thumb .image, 
#activities02 #topics02 .thumb .image, 
#topics_reports .thumb .image, 
#topics_voices .thumb .image {
    mix-blend-mode: normal;
}
#topics .thumb .image.image_gray, 
#activities02 #topics02 .thumb .image.image_gray, 
#topics_reports .thumb .image.image_gray, 
#topics_voices .thumb .image.image_gray {
    filter: none;
}
@media only screen and (max-width: 768px) {
}



#topics .exp .txt, 
#activities02 #topics02 .exp .txt, 
#topics_reports .exp .txt, 
#topics_voices .exp .txt {
    height: 100%;
    padding-top: 24px;
    padding-bottom: 24px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: 0.103em;
}
#topics .thumb_exp_wrap .exp .txt:before, 
#activities02 #topics02 .thumb_exp_wrap .exp .txt:before, 
#topics_reports .thumb_exp_wrap .exp .txt:before, 
#topics_voices .thumb_exp_wrap .exp .txt:before {
    content: none;
}
#topics .exp .txt p, 
#activities02 #topics02 .exp .txt p, 
#topics_reports .exp .txt p, 
#topics_voices .exp .txt p {
    top: auto;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
@media only screen and (max-width: 768px) {
    #topics .exp .txt, 
    #activities02 #topics02 .exp .txt, 
    #topics_reports .exp .txt, 
    #topics_voices .exp .txt {
        font-size: calc( 15 * 100vw / 375 );
        line-height: 1.55;
        letter-spacing: 0.076em;
    }
    #topics .thumb_exp_wrap .exp .txt:before, 
    #activities02 #topics02 .thumb_exp_wrap .exp .txt:before, 
    #topics_reports .thumb_exp_wrap .exp .txt:before, 
    #topics_voices .thumb_exp_wrap .exp .txt:before {
    }
    #topics .exp .txt p, 
    #activities02 #topics02 .exp .txt p, 
    #topics_reports .exp .txt p, 
    #topics_voices .exp .txt p {
        top: auto;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
}



#topics .category_wrap, 
#activities02 #topics02 .category_wrap, 
#topics_reports .category_wrap, 
#topics_voices .category_wrap {
    position: absolute;
    bottom: 10px;
    /*
    */
    right: 20px;
    display: inline-flex;
    align-items: flex-end;
    flex-direction: column;
    /*
    height: calc( 100% + 8.5px );
    */
    z-index: 10;
}
#topics .category, 
#activities02 #topics02 .category, 
#topics_reports .category, 
#topics_voices .category {
    top: 0px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 37px;
    padding: 0 1em;
}
#topics .reports .category, 
#activities02 #topics02 .reports .category, 
#topics_reports .reports .category, 
#topics_voices .reports .category {
    background-color: #90D1F2;
}
#topics .voices .category, 
#activities02 #topics02 .voices .category, 
#topics_reports .voices .category, 
#topics_voices .voices .category {
    background-color: #F2C3B7;
}
#topics .plans .category, 
#activities02 #topics02 .plans .category, 
#topics_reports .plans .category, 
#topics_voices .plans .category {
    background-color: #96ccbb;
}
#topics .update_date, 
#activities02 #topics02 .update_date, 
#topics_reports .update_date, 
#topics_voices .update_date {
    top: 0px;
    color: #8C8C8C;
}
@media only screen and (max-width: 768px) {
    #topics .category_wrap, 
    #activities02 #topics02 .category_wrap, 
    #topics_reports .category_wrap, 
    #topics_voices .category_wrap {
        position: absolute;
        top: auto;
        left: calc( 15 * 100vw / 375 );
        bottom: 10px;
        right: auto;
        display: inline-flex;
        align-items: flex-start;
        flex-direction: row;
        width: calc( 100% - calc( 30 * 100vw / 375 ) );
        height: auto;
        z-index: 10;
    }
    #topics .category, 
    #activities02 #topics02 .category, 
    #topics_reports .category, 
    #topics_voices .category {
        top: 0px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: 37px;
        padding: 0 1em;
    }
    #topics .reports .category, 
    #activities02 #topics02 .reports .category, 
    #topics_reports .reports .category, 
    #topics_voices .reports .category {
    }
    #topics .voices .category, 
    #activities02 #topics02 .voices .category, 
    #topics_reports .voices .category, 
    #topics_voices .voices .category {
    }
    #topics .plans .category, 
    #activities02 #topics02 .plans .category, 
    #topics_reports .plans .category, 
    #topics_voices .plans .category {
    }
    #topics .update_date, 
    #activities02 #topics02 .update_date, 
    #topics_reports .update_date, 
    #topics_voices .update_date {
        margin-top: calc( -15 * 100vw / 375 );
    }
}