@charset "Shift-JIS";

/*========================================================================
*
*    [file]      itemlist.css
*    [version]   1.0
*    [copyright]
*    [structure]
*    [notes]
*
*========================================================================*/

/*===== PC・スマホ表示切替 =====*/
/*
スマートフォンの最大表示横幅を480と定義する。
480以内の横幅でページを表示する場合は要素「pc」を非表示にし、
481以上の横幅でページを表示する場合は要素「sp」を非表示にする。
主要な使用先：検索結果のページ切り替え
*/
/*
ranking
--------------------------------------------------------------------
*/
body.ranking main .sidebar {
	display: none;
}
body.ranking main .contents {
	float: none;
	width: 1000px;
	left: 10%;
	float: none;
	margin-left: auto;
	margin-right: auto;
}
body.ranking main .contents ul.item_list li {
	float:left;
	width:175px;
	margin:0 22px 30px 0;
}
body.ranking main .contents ul.item_list li:nth-child(1) {margin:0 66px 30px 115px;width:200px;}
body.ranking main .contents ul.item_list li:nth-child(2) {margin:0 66px 30px 0;width:200px;}
body.ranking main .contents ul.item_list li:nth-child(3) {margin:0 0 30px;width:200px;}
body.ranking main .contents ul.item_list li:nth-child(4),
body.ranking main .contents ul.item_list li:nth-child(9),
body.ranking main .contents ul.item_list li:nth-child(14),
body.ranking main .contents ul.item_list li:nth-child(19),
body.ranking main .contents ul.item_list li:nth-child(24),
body.ranking main .contents ul.item_list li:nth-child(29) {
	clear:both;
}
body.ranking main .contents ul.item_list li .img {
	position:relative;
}
body.ranking main .contents ul.item_list li .img img {
	/*border:1px solid #ececec;*/
	width:100%;
	height:100%;
}

body.ranking main .contents ul.item_list li { counter-increment: calc-ex9;}
/*
body.ranking main .contents ul.item_list li .img:before { content: counter(calc-ex9); font-size: 13px; position:absolute; top:-10px; left: 5px; border-radius: 50%; color: #969598; z-index: 1; background: #fff; width: 28px; height: 28px; overflow: hidden; text-align: center; border: 1px solid #969598; line-height: 2.2; }

body.ranking main .contents ul.item_list li:nth-child(1) .img:before { background: url(../images/common/bg-rank01.png) 0 0 no-repeat; background-size: contain; color: #fff; border: 0; width: 30px; height: 30px; line-height: 3; }
body.ranking main .contents ul.item_list li:nth-child(2) .img:before { background: url(../images/common/bg-rank02.png) 0 0 no-repeat; background-size: contain; color: #fff; border: 0; width: 30px; height: 30px; line-height: 3; }
body.ranking main .contents ul.item_list li:nth-child(3) .img:before { background: url(../images/common/bg-rank03.png) 0 0 no-repeat; background-size: contain; color: #fff; border: 0; width: 30px; height: 30px; line-height: 3; }
*/
body.ranking main .contents ul.item_list li .img .num { position: absolute;top:0;left:2px;width:40px;height:40px;border-radius: 50%;background: #626262;color:#ffffff;font-size:18px;text-align: center;line-height:40px; }

body.ranking main .contents ul.item_list li .img .num.first {background: #c8af72;}
body.ranking main .contents ul.item_list li .img .num.second {background: #b8b8b8;}
body.ranking main .contents ul.item_list li .img .num.third {background: #d1856a;}
div .tag { text-align: left; margin-top: 10px; }
div .tagChild {
	display: inline-block;
	border: 1px solid #c4c4c4;
	font-size: 10px;
	min-width: 32px;
	text-align: center;
	padding: 4px;
	line-height: 1;
	margin-bottom: 2px;
}
div .tagChild .sale { color:red; }
div .no-icon {display: none;}

body.ranking main .itemname {
	font-size: 14px;
    font-weight: bold;
}

body.ranking main .contents ul.item_list li .icons {
	margin-right:-4px;
	overflow:hidden;
}
body.ranking main .contents ul.item_list li .icons span {
	display:block;
	float:left;
	margin-right:4px;
}
body.ranking main .contents ul.item_list li .title {
	font-size:12px;
	color:#5c5c5c;
	padding-left: 1px;
}
body.ranking main .contents ul.item_list li .price {
    font-size: 11px;
    padding-top: 4px;
    font-weight: normal;
    display: block;
    color: #676767;
}
body.ranking main .contents ul.item_list li .price.sale {
	color:#c72743;
}
body.ranking .contents select.sort_brand {
	display:none;
}

/* ecs */

.search_results.alphabet_str {
	font-size: 30px;
	margin-bottom: 20px;
}

main .contents ul.sort_brand {
	/*border-top: 1px solid #d3d3d3;*/
	/*border-bottom: 1px solid #d3d3d3;*/
	margin-bottom: 100px;
	margin-left: 100px;
	min-width: 1000px;
}

main .contents ul.sort_brand li {
	float: left;
	border-top: 1px solid #d3d3d3;
	border-bottom: 1px solid #d3d3d3;
	position: relative;
	/*max-width: 142.5px;*/
}

main .contents ul.sort_brand li.current a {
	background: #f0f0f0;
	border-radius: 16px;
}

main .contents ul.sort_brand li.current img {
	filter: brightness(0) invert(1);
	-webkit-filter: brightness(0) invert(1);
}

main .contents ul.sort_brand li::after {
	content: "";
	display: block;
	width: 1px;
	height: 35px;
	position: absolute;
	top: calc(50% - 17.5px);
	right: 0px;
	background: #d3d3d3;
}

main .contents ul.sort_brand li:nth-child(6n)::after {
	display: none;
}

main .contents ul.sort_brand li:nth-child(n+8) {
	border-bottom: none;
}

main .contents ul.sort_brand li a {
	display: block;
	/*width: calc(100% - 30px);*/
	height: auto;
	margin-right: 0px;
	white-space: nowrap;
	margin: 0px 0px;
	padding: 8px 15px;
	box-sizing: content-box;
}

main .contents ul.sort_brand li p {margin:8px 15px 8px 15px;font-size:12px;text-align: center;padding:8px 0;letter-spacing: 0.28em;cursor: pointer;font-weight: bold;}

main .contents ul.sort_brand li a img {
	width: 100%;
	height: auto;
}

/* ecs */

main .contents ul.sort_brand li.all a {background-position:0 -45px;}
main .contents ul.sort_brand li.all.active a {background-position:0 0;}
main .contents ul.sort_brand li.LAPLAJ a {background-position:-192px -45px;}
main .contents ul.sort_brand li.LAPLAJ.active a {background-position:-192px 0;}
main .contents ul.sort_brand li.LAPJOC a {background-position:-578px -45px;}
main .contents ul.sort_brand li.LAPJOC.active a {background-position:-578px 0;}
main .contents ul.sort_brand li.LAPMIS a {background-position:-770px -45px;}
main .contents ul.sort_brand li.LAPMIS.active a {background-position:-770px 0;}
main .contents ul.sort_brand li.LAPBLU a {background-position:-962px -45px;}
main .contents ul.sort_brand li.LAPBLU.active a {background-position:-962px 0;}


body.ranking main .contents h2.search_results {
    color: #444;
    font-size: 44px;
    font-weight: bold;
    font-style: italic;
    font-family: adobe-garamond-pro, serif;
    letter-spacing: .05em;
    -webkit-font-smoothing: antialiased;
    text-align: center;

}

@media (max-width: 769px){
	body.ranking main .contents ul.item_list li .img .num { position: absolute;top:0;left:0;width:8.53vw;height:8.53vw;border-radius: 50%;background: #626262;color:#ffffff;font-size:3.73vw;text-align: center;line-height:8.53vw; }

	body.ranking main .contents {
		width: 100%;
	}

	body.ranking .contents ul.sort_brand {
		display:none;
	}

	body.ranking .contents select.sort_brand {
		display:block;
		width:95%;
		margin-bottom:20px;
		padding:7px 8px;
		border:1px solid #231815;
		font-size:14px;
		background: url(../images/common/ico.png)no-repeat right 10px center;
		background-size:3%;
		margin: 0px 0px 9px 9px;
	}
	body.ranking  main .contents {
		float: none;
		width: 100%;
		margin: 0px 3.125%;
		margin-left: -25px;
		margin-left: auto;
		margin-right: auto;
	}
	body.ranking main .contents h1 {
		font-size:19px;
		padding-bottom:4px;
		border-bottom:1px solid #cccccc;
		margin-bottom:10px;
		text-align:center;
	}
	body.ranking main .contents ul.sort_brand{
		padding-left:0 !important;
	}

	body.ranking main .contents ul.item_list {width:100%;margin:0;}
	body.ranking main .contents ul.item_list li:nth-child(4),
	body.ranking main .contents ul.item_list li:nth-child(9),
	body.ranking main .contents ul.item_list li:nth-child(14),
	body.ranking main .contents ul.item_list li:nth-child(19),
	body.ranking main .contents ul.item_list li:nth-child(24),
	body.ranking main .contents ul.item_list li:nth-child(29) {
		clear:none;
	}

	body.ranking main .contents ul.item_list li:nth-child(2n+1) {
		float: right;
		width: 46%;
		margin: 0px 7px 15px 7px;
	}
	body.ranking main .contents ul.item_list li:nth-child(2n) {
		clear:both;
		float: left;
		width: 46%;
		margin: 0px 7px 15px 7px;
		clear:both;
	}
	body.ranking main .contents ul.item_list li:nth-child(1) {
		width: 60%;
		margin: 6% auto 4%;
		float: none;
	}
	body.ranking main .contents ul.item_list li .img img {	width:100%;}
	body.ranking main .contents ul.item_list li .icons span {
		width:37.2362%;
		margin-right:2.1277%;
	}
	body.ranking main .contents ul.item_list li .icons span:nth-child(2n+1) {	clear:both;}
	body.ranking main .contents ul.item_list li .icons span:nth-child(2n) {	margin-right:0;}
	body.ranking main .contents ul.item_list li .icons span img {	width:100%;}
	body.ranking main .contents ul.item_list li .title {font-size:9px;padding-left: 1px;}
	body.ranking main .contents ul.item_list li .price {font-size:12px;}
	body.ranking main .contents h2.search_results {
		margin: 0 0 15px;
	    font-size: 1.9rem;
	}
}

@media (max-width: 480px){
body.ranking main .contents ul.item_list li:nth-child(1){
width: 95%;
}
}
/*
ranking
--------------------------------------------------------------------
/*===== PC・スマホ表示切替 =====*/