@charset "UTF-8";

.filter_wrap {
    display: grid;
    grid-template-columns: 1fr 30rem;
    margin: 3.2rem auto 0;
    align-items: center;
    background:#efefef;
}
.filter_wrap ul{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-gap:4rem;
    width:100%;
    box-sizing:border-box;
    position:relative;
    padding:0 2rem
}
.filter_wrap ul label li{
    position: relative;
    box-sizing: border-box;
    padding: 1.2rem 1.6rem;
    background: #fff;
    text-align: center;
    border:0.1rem solid #999;
}
.filter_wrap ul label li > input {
    content: '';
    display: block;
    position: absolute;
    border: 0.1rem solid #999;
    width: 1.8rem;
    height: 1.8rem;
    top: 52%;
    left: 1rem;
    transform: translate(0, -50%);
    margin: 0;
    border-radius: 0.6rem;
}
.filter_wrap ul label,.filter_wrap ul label *{
    transition:opacity .5s;
}
.filter_wrap ul label:hover,.filter_wrap ul label:hover *{
    opacity:.7;
    cursor:pointer;
}

.filter_wrap ul label li.active{
    border:0.1rem solid var(--orange);
    background: #f7dfd1;
}
.filter_wrap ul label li.active > input:before { 
    content: '';
    display: block;
    position: absolute;
    background:var(--orange);
    width: 1.2rem;
    height: 1.2rem;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    border-radius: 0.4rem;
}
.filter_wrap .c-button-wrapper {
    box-sizing: border-box;
    background: #ccc;
    padding: 1.6rem 2rem;
    display: block;
    text-align: right;
    position:relative;
    height:100%;
}
.filter_wrap .c-button-wrapper:before {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 0;
    left: 0;
    top: 0;
    z-index: +1;
    border-left: 2.4rem solid #efefef;
    border-top: 4.1rem solid transparent;
    border-bottom: 4.1rem solid transparent;
}
.filter_wrap .c-button-wrapper span.icon {
    position: absolute;
    z-index: +2;
    left: 2rem;
    top: 50%;
    width: 2.6rem;
    transform: translate(0, -50%);
}

#research_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 4rem;
}
#research_wrap .research_card{
    border: 0.1rem solid #ccc;
    border-radius: 0.4rem;
    box-sizing: border-box;
    position: relative;
    box-shadow:1px 1px 5px rgba(0,0,0,.3);
    transition:transform .5s;
}
#research_wrap .research_card:hover{
    transform:translate(-0.6rem,-0.6rem);
}
#research_wrap .research_card picture{
    display:block;
    margin-bottom:1rem;
    padding:0.8rem;
    box-sizing: border-box;
    position: relative;
}
#research_wrap .research_text {
    padding: 0.4rem 1.6rem 1.6rem;
    box-sizing: border-box;
    position: relative;
}
#research_wrap .sub_ttl {
    font-size: 1.4rem;
    font-weight:bold;
    
}
#research_wrap .exp_txt {
    font-size: 1.2rem;
}
#research_wrap span.ttllabel_wrap {
    display: block;
    box-sizing: border-box;
    padding: 0.4rem 0.8rem;
    border-radius: 0.6rem;
    border: 0.1rem solid #999;
    width: 100%;
    max-width: fit-content;
    margin: 0 0 0.4rem;
    font-size: 85%;
}
@media screen and (max-width:769px){
    .filter_wrap{
        grid-template-columns: 1fr 1fr;
        box-sizing: border-box;
        position:relative;
    }
    .filter_wrap ul {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 1rem;
        font-size: 1.1rem;
        padding: 2rem 1rem;
    }
    .filter_wrap .c-button {
        max-width: 100%;
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
        font-size: 1.2rem;
        width: 75%;
        padding-left: 0;
        padding-right: 0;
        margin: auto auto auto 1.6rem;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }
    .filter_wrap .c-button-wrapper span.icon{width:1.6rem;}
    .filter_wrap .c-button-wrapper:before {
        content: '';
        display: block;
        position: absolute;
        height: 100%;
        width: 0;
        left: -0.1rem;
        top: 0;
        z-index: +1;
        border-left: 2.0rem solid #efefef;
        border-top: 9.3rem solid transparent;
        border-bottom: 9.3rem solid transparent;
    }
}

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

    #research_wrap {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width:500px){
    #research_wrap {
        grid-template-columns: 1fr;
    }    
}