@charset "UTF-8";

.sort-btn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding:50px 20px;
}

.sort-btn li{
    list-style:none;
	cursor: pointer;
}

.sort-btn li:nth-child(1).active{
	color: #528CE0;
    border-top: solid 2px #528CE0;	
}

.sort-btn li:nth-child(2).active{
	color: #795ACE;
    border-top: solid 2px #795ACE;	
}

.sort-btn li:nth-child(3).active{
	color: #FF55AA;
    border-top: solid 2px #FF55AA;	
}

.sort-btn li:nth-child(4).active{
	color: #FF7272;
    border-top: solid 2px #FF7272;	
}

.sort-btn li:nth-child(5).active{
	color: #FF8900;
    border-top: solid 2px #FF8900;	
}

.sort-btn li:nth-child(6).active{
	color: #32B920;
    border-top: solid 2px #32B920;	
}



@media only screen and (min-width: 835px) {
    .sort-btn{
        justify-content: space-between;
    }
        
    .sort-btn li{
        width:48%;
        margin:0 0 10px 0;
        text-align:center;
    }	


    /*＝＝＝Muuriのレイアウトのための調整 */
    .grid {
        position: relative;
        left: 3%;
    }

    /*各画像の横幅などの設定*/
    .item {
        display: block;
        position: absolute;
        width: 28%;
        margin: 0 5% 5% 0;
        z-index: 1;
        list-style:none;
    }

    /*内側のボックスの高さが崩れないように維持*/
    .item-content {
        position: relative;
        width: 100%;
        height: 100%;
    }

    /*画像の横幅を100%にしてレスポンシブ化*/
    .grid img{
        width:100%;
        height:auto;
        vertical-align: bottom;/*画像の下にできる余白を削除*/
    }
}
    


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

    .grid {
        position: relative;
        left: 7%;
    }

    .item {
        display: block;
        position: absolute;
        width: 40%;
        margin: 0 5% 5% 0;
        z-index: 1;
        list-style:none;
    }

    .item-content {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .grid img{
        width:100%;
        height:auto;
        vertical-align: bottom;
    }

}