@charset "UTF-8";


/** ***********************************************

SLIK Last Update:2019/5/29

*********************************************** **/

#slik-bns .col{background-size:cover; background-position: center;vertical-align: top}
#slik-bns .col-1{padding: 1px}
#slik-bns ul{font-size: 0; vertical-align: top}
#slik-bns li{display:inline-block; vertical-align: top; width: 50%; font-size: 12px;background-size:cover; background-position: center; vertical-align: top;padding: 1px;}
#slik-bns li img{vertical-align: top}


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

#slik-bns .col{width:100%}

} 




/** SLIK SORTER STYLE **/
#slik-sorter{background-color: #f5f5f5; padding-bottom: 30px; border-top:solid 1px #eee; border-bottom:solid 1px #ddd}
#slik-sorter table{margin: auto; width:100%; border-spacing: 10px;  }
#slik-sorter td{background-color: #fff; padding: 20px 10px; vertical-align: top;border-radius: 5px; border:solid 1px #eee }
#slik-sorter td.td-1{width: 60%}
#slik-sorter td.td-2{width: 22%}
#slik-sorter td.td-4{width: 18%}

#slik-sorter p.bold{margin-bottom: 15px; font-size: 14px;letter-spacing: 1px}
#slik-sorter p.heading{margin-bottom: 20px;margin-left: 10px;  font-size: 16px; color:cadetblue}

#slik-sorter .cols-3{width: 100%}
#slik-sorter .col{padding: 0 10px 0 10px}
#slik-sorter .td-1 .col-1{width: 25%}
#slik-sorter .td-1 .col-2{width:45%}
#slik-sorter .td-1 .col-3{width: 30%}


#slik-sorter li{border:solid 1px #ddd; border-radius: 5px; padding: 4px 4px 5px;margin-top: 10px; background-color: #fff;  }
#slik-sorter li:hover,
#slik-sorter li.on{background-color: #333; color:#fff; border:solid 1px #333}

#slik-sorter label{font-size: 14px; cursor:pointer; vertical-align: middle}
#slik-sorter li:hover label{background-color: transparent}

#slik-sorter input[type="radio"]{display: inline-block;width: 15px; vertical-align: middle}
#slik-sorter .item{display: inline-block;width: 80%; vertical-align: middle}


#slik-sorter li.reset{font-size: 12px;color:#333;cursor:pointer;background-color: #fff; width: 80px; text-align: center; padding: 5px;}
#slik-sorter li.reset:hover{opacity: .8}
#slik-sorter li.reset-spec4{font-size: 12px;color:#333;cursor:pointer;background-color: #fff; width: 80px; text-align: center; padding: 5px;}
#slik-sorter li.reset-spec4:hover{opacity: .8}

#slik-sorter .show-sub{position: relative;padding: 4px 8px 5px;}
#slik-sorter .li-spec li.show-sub:hover{background-color: #fff!important;color:#333;border:solid 1px #ddd}
#slik-sorter .show-sub label{text-indent: 0em; margin-left: 0em}
#slik-sorter .sub{padding-bottom: 30px; display: none}
#slik-sorter .show-sub i.arrow-b{font-size: 10px;position: absolute; top:10px; right:5px; border-left:solid 1px #ddd; padding: 0 5px}


#slik-sort-box li.reset{font-size: 10px;color:#333;margin: 10px 0 20px 0px!important; text-indent: 0!important;;cursor:pointer;background-color: #fff; width: 80px; text-align: center; padding: 5px;border:solid 1px #333;background-color: #eee; font-weight: bold}
#slik-sort-box li.reset:hover{opacity: .8}


.search-box_label {font-weight: bold;}




.results-1{text-align: center; padding: 10px}
.results-1 .result-num{font-weight: bold; font-size: 20px}
.results-2{text-align: center; padding: 10px; display: none}


.bt-sort-close{display: none}

/** SLIK ITEM LIST  **/

#slik-item-list .tags{padding: 0 20px}
#slik-item-list .cat{margin-bottom: 5px}
#slik-item-list .wrap-tag{display: none}




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

#slik-sorter p.bold{font-size: 13px}
#slik-sorter ul label{font-size: 12px}
#slik-sorter table{background-color: #f5f5f5}
#slik-sorter td{display: block; width: 100%}
#slik-sorter td.td-1{width: 100%}
#slik-sorter td.td-2{display: inline-block; width: 50%}
#slik-sorter td.td-4{display: inline-block; width: 50%}


} 


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

#slik-sorter table{width: 100%}
#slik-sorter td{margin-bottom: 20px;}
#slik-sorter td.td-2{display: block; width: 100%}
#slik-sorter td.td-4{display: block; width: 100%}
#slik-sorter .col{padding: 0; width: 100%!important}
#slik-sorter .col-1{margin-bottom: 20px}
#slik-sorter .td-1 .col-2{margin-bottom: 20px}
#slik-sorter ul li{display: block; margin-right: 0px}

.bt-sort-close{ font-size: 12px; display: block; text-align: right;padding: 10px; background-color: #fff; border:solid 1px #eee; border-radius: 5px; width: 100%; }

} 


.wrap-compare{position: absolute; top:5px; left: 8px; font-size: 14px}
/*
.wrap-compare input[type=checkbox]{
-ms-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
margin-right: 3px;
vertical-align: middle
}
*/

.wrap-compare input{margin-right: 3px;}

@media screen and (min-width:800px){

.wrap-compare input:before {
	position: absolute;
	z-index: 1;
	top: 0.25rem;
	left: 0.1875rem;
	width: 0.70rem;
	height: 0.375rem;
	content: '';
	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	        transition:         transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	-webkit-transform: rotate(-45deg) ;
	        transform: rotate(-45deg);
	border: 2px solid #fff;
	border-top-style: none;
	border-right-style: none;
}
.wrap-compare input:after {
	position: absolute;
	top: 1px;
	left: 0;
	width: 1rem;
	height: 1rem;
	content: '';
	cursor: pointer;
	border: 1px solid #ccc;
	background: #ffffff;
}
.wrap-compare input:checked:after {background-color:#0071bc;border:solid 1px #0071bc }






}




.wrap-compare a{color:#999; pointer-events: none;}
.wrap-compare a.on{color:#0071bc; text-decoration: underline; pointer-events:inherit}


/** 比較表 **/
.show-compare{position: fixed; top:0; left: 0; z-index: 2000; width: 100%; height: 100%;padding: 30px; text-align: center;overflow: auto;display: none; -webkit-overflow-scrolling: touch;overflow-scrolling: touch}
.slik-bg-layer{background-color: rgba(0,0,0,.8); position: fixed; top:0; left: 0; width: 100%; height: 100%; z-index: 1000;display: none}
.bt-close{display: none; font-style:normal; font-size: 30px; color:#fff;position: fixed; top:10px; right:30px; z-index: 3000}
.show-compare .wrap-table{max-width: 800px; margin: 0 auto;position: relative; z-index: 999;font-size: 0; text-align: left; background-color: #fff}
.show-compare .wrap-table table{display: inline-block;border-spacing: 1px; background-color: #ddd; vertical-align: top;font-size: 14px;width: 25%}
.show-compare .wrap-table th{background-color: #f5f5f5; padding: 10px;font-size: 14px; text-align: right;
width: 200px}
.show-compare .wrap-table .table-td td{background-color: #fff; padding: 10px;font-size: 14px;width: 200px}
.show-compare .wrap-table tr:nth-of-type(1) td{font-weight: bold}
.show-compare .wrap-table a{color:#0071bc}
.show-compare .wrap-table .item-02{height: 200px}
.show-compare .wrap-table td .wrap-img{text-align: center; width: 100%; background-image: url(../images/common/loader-white.gif); background-size: 30px auto; background-position: center;min-height: 150px}
.show-compare .wrap-table td .wrap-img img{max-height:150px; width: auto}
.show-compare .wrap-table tr:nth-of-type(odd) td{background-color: #f5f5f5}
.show-compare .wrap-table .bt{display: block; background-color: #29abe2; color:#fff; padding: 10px; border-radius: 2px}
.show-compare .wrap-table .bt:hover{background-color: #e25a24}



/** 右の選択製品 **/

#choosed-items{width: 150px; position: fixed; top:150px; right: 0; background-color: #fff; text-align: center; z-index: 999; border:solid 1px #ddd;display: none}
#choosed-items ul{}
#choosed-items li{display: block;padding: 10px; text-align: center; position: relative}
#choosed-items li p{font-size: 12px}
#choosed-items li img{width:auto;height:auto; max-width: 100px; max-height: 100px}
#choosed-items li i{position: absolute; top:3px; right: 5px; font-size: 18px; cursor:pointer; z-index: 100;display: block;font-style: normal}
#choosed-items .bt{display: inline-block; width: 90%; text-align: center; padding: 10px; background-color: #0071bc; color:#fff; font-size: 14px; margin-top: 20px}


.bt-compare{width: 250px; text-align: center; padding: 3px 10px; background-color: #0071bc;color:#fff; font-size: 12px; border-radius: 100px}
.bt-compare.on{background-color: #ccc; color:#333}


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

/** 比較表 **/
.show-compare{padding: 30px 20px}
.bt-close{font-size: 20px; top:0; right:5px;}
.show-compare .wrap-table {width: 900px}
.show-compare .wrap-table th{font-size: 12px}
.show-compare .wrap-table .table-td td{font-size: 12px}
.show-compare .wrap-table .item-02{height: 120px}
.show-compare .wrap-table td .wrap-img{background-size: 25px auto; min-height: 100px}
.show-compare .wrap-table td .wrap-img img{max-height:100px}

}



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

#choosed-items{width: 100%; position: fixed; top:inherit;bottom:0; right: 0; background-color: #fff; text-align: center; z-index: 999; border:solid 1px #ddd; display: none}
#choosed-items li{display: inline-block;font-size: 10px; padding: 10px;width: 33.3333333%; vertical-align: top}
#choosed-items li img{width:auto;height:auto; max-width: 50px; max-height: 50px}
#choosed-items .bt{display: block; margin: 0px auto; width: 100%}
#choosed-items li i{font-size: 24px}

}