@charset "utf-8";

/* ==================================================== */
/*					いろいろな単位top						*/
/* ==================================================== */


ul.list_box{
	width: 985px!important;
}

ul.list_box li{
	position: relative;
	display: block;
	width: 220px;
	float: left;
	padding: 21px 25px 0 0;
}
ul.list_box li:nth-child(4n) { margin-right: 0;}


ul.list_box li div.list_new{
	background: #E60012;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	font-size: 115%;
	border-radius: 10px;
}

ul.list_box li .newMark img.sp_dn{
    position: absolute;
    left: 149px;
    top: 28px;}


/* フィルター */
.main {
	position: relative;
	z-index: 999;
}


#filter .filter_bt li {
	padding: 0px 0px 0px 190px;
}


#filter .filter_tit {
	font-size: 19px;
	padding: 6px 0 8px 28px;
	background: url(/unit/images/list/triangle03.png) no-repeat 4px center;
}

#filter .filter_bt a {
	display: inline-block;
	color: #666;
	border: 1px solid #808080;
	border-radius: 5px;
    text-decoration: none;
	font-size: 19px;
	line-height: 1;
	padding: 7px 10px 6px 20px;
	margin: 0px 14px 14px 0px;
	background: url(/unit/images/list/triangle02_01.png) no-repeat 6px center #f2f2f2;
}
#filter .filter_bt .current{
	background: #222;
	border: 1px solid #222;
	color: #fff;
	background: url(/unit/images/list/triangle02_02.png) no-repeat 6px center #222;
}
#filter .filter_bt a:hover {
	background: #777;
	border: 1px solid #777;
	color: #fff;
	background: url(/unit/images/list/triangle02_02.png) no-repeat 6px center #777;
}


#filter .filter_bt .fst {
    float: left;
	padding: 0;
}
#filter .filter_bt .fst a {
	min-width: 120px;
	width: 120px;
	padding: 7px 6px 6px 26px;
	border-radius: 8px;
	background: url(/unit/images/list/triangle01_01.png) no-repeat 8px center #f2f2f2;
}
#filter .filter_bt .fst .current{
	background: url(/unit/images/list/triangle01_02.png) no-repeat 8px center #222;
}
#filter .filter_bt .fst a:hover {
	background: url(/unit/images/list/triangle01_02.png) no-repeat 8px center #777;
}




#filter select,
#filter .minict_wrapper{
	display: none;
}

.minict_wrapper {
    font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	color: #333;
    background: #fff;
    position: relative;
    width: 300px;
    height: 3.5rem;

	border: solid 1px #888;
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
	text-align: center;
	padding: 0;
}
.minict_wrapper:after {
    content: "\25BC";
    display: block;
    position: absolute;
    height: 3.5rem;
    width: 3.3rem;
    top: 0;
    right: 0;
    font-size: 1.28rem;
    font-size: 3.41vw;
    line-height: 2.5em;
    text-align: center;
    background: #ddd;
    color: #555;
}
.minict_wrapper.active:after {
    content: "\25BC";
}
.minict_wrapper span {
    font-size: 1.6rem;
    font-size: 4.26vw;
    display: block;
    border: 0;
    outline: none;
    background: none;
    color: #333;
    height: 3.5rem;
    line-height: 2.25em;
    padding: 0 5.44rem 0 0.64rem;
    padding: 0 14.5vw 0 1.7vw;
    cursor: default;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.minict_wrapper span:empty:before {
    content: attr(data-placeholder);
    color: #333;
    background: #fff;
    line-height: 23px;
    line-height: 1.5rem;
}
.minict_wrapper ul {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: -1px;
    position: absolute;
    width: 100%;
    width: -webkit-calc(100% + 2px);
    width: -moz-calc(100% + 2px);
    width: calc(100% + 2px);
    border: none;
    border-top: 1px solid;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    top: 3.5rem;
    left: 0;
    max-height: 35rem;
    overflow-y: auto;
    z-index: 999999;
}
.minict_wrapper ul li {
    font-size: 1.6rem;
    font-size: 4.26vw;
    list-style: none;
    padding: 0 5.44rem 0 0.64rem;
    padding: 0 14.5vw 0 1.7vw;
    cursor: pointer;
    background: #aaa;
	color: #fff;
    height: 3.5rem;
    line-height: 2.25em;
	border: solid 1px #888;
	border-top: none;
}
.minict_wrapper ul li.selected {
    color: #333;
    background: #fff;
}


/* 追加 */
.intro {
    font-size: 1.2rem;
    font-size: 3.2vw;
    text-align: center;
    margin: 1.5rem 2rem 0 2rem;
    margin: 4vw 5.33vw 0 5.33vw;
}

/* ==================================================== */
/*					スマートフォン対応						*/
/* ==================================================== */
@media only screen and (max-width: 768px) {

	ul.list_box{
		width: 100%!important;
		margin: 0 0 0 4%;
	}
	ul.list_box li{
		width: 28%;
		padding: 4% 4% 0 0;
	}

	ul.list_box li .newMark {
		position: absolute;
		top: 15.5%;
		right: 15%;
		width: 2.5em;
		height: auto;
	}




	/* フィルター */
	#filter ul {
		display: none;
	}
	#filter .minict_wrapper {
		display: block;
		width: 92%;
		margin: 2em 4% 1em 4%;
	}

	#mainArea {
		min-height: 100%;
		height: 100%;
	}


}