/* ======================
jqフィルタリングcss
用途によって個別設定が必要
======================== */

#filter {
	margin: 0 auto;
	padding: 15px 0;
	width: 700px;
	text-align: center;
}
#filter a { text-decoration:none; display:inline-block; }
#filter .active {
	font-weight: bold;
}
#filter a.active:link { height:25px; border-style:outset; text-decoration:none; background-color:dimgray; color:mistyrose; display:inline-block;}
#filter a.active:visited { height:25px; border-style:outset; text-decoration:none; 
background-color:dimgray; color:mistyrose; display:inline-block;}
#filter a.active:active { height:25px; border-style:outset; text-decoration:none; 
background-color:dimgray; color:mistyrose; display:inline-block;}
#filter a.active:hover { height:25px; border-style:outset; text-decoration:none; 
background-color:dimgray; color:mistyrose; display:inline-block;}

#filterlist {
	margin: 0 auto;
	width: 700px;
	text-align: left;
        overflow: hidden;
}
#filterlist ul li {
    margin: 5px;
    width: 200px; height: 50px;
    text-align: left;
    float: left;
    display: inline;
    overflow: hidden;
}
#filterlist a { width: 200px; height: 50px; display: inline-block; }
/*後に記述してあるほうが優先度が上*/
.marumo { border: 2px solid aqua; }
.koini { border: 2px solid aqua; }
.missdevil { border: 2px solid aqua; }
.ossan { border: 2px solid aqua; }
.maou { border: 2px solid aqua; }
.gintokin { border: 2px solid aqua; }
.ten { border: 2px solid aqua; }
.hero { border: 2px solid aqua; }
.kurokochi { border: 2px solid aqua; }
.kuronoonna { border: 2px solid aqua; }
.bokuno { border: 2px solid aqua; }
.toshidensetsu { border: 2px solid aqua; }
.yoshinaga { border: 2px solid aqua; }
.yabe { border: 2px solid aqua; }
.link {  border: 2px solid gold;}
.variety { border: 2px solid lime;}
.drama { border: 2px solid aqua; }
.sports { border: 2px solid blue; }
.music { border: 2px solid red; }

/* =======================================
	ClearFixElements
======================================= */
#filterlist ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}
#filterlist ul {
	display: inline-block;
}

@media screen and (max-device-width: 480px) {
 /* スマホ用のCSS */
#filter {
	margin: 0 auto;
	padding: 15px 0;
	width: 300px;
	text-align: center;
}
#filterlist {
	margin: 0 auto;
	width: 300px;
	text-align: left;
}
#filterlist ul li {
    margin: 5px;
    width: 200px; height: 50px;
    text-align: center;
    display:block;
}
}