@charset "shift_jis";

/*---------------------------
  チェックボックス枠組み
---------------------------*/
table.form-horizontal{
width: 100%;
margin: 0.4em 0 2em 0;
    border-collapse: collapse;
    border: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;

}
table.form-horizontal tr td{
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
padding: .6em 0;
}
table.form-horizontal tr td:nth-child(odd){
background-color: #DDDDDD;
width: 75px;
vertical-align: middle;
padding: .1em;
line-height: 1.2;
color: #000;
border: 1px solid lightgrey;
}
table.form-horizontal tr:first-child td:nth-child(odd){
border-top: 0;
}
table.form-horizontal tr:last-child td:nth-child(odd){
border-bottom: 0;
}
table.form-horizontal tr td:nth-child(3) ,
table.form-horizontal tr td:nth-child(5) {
border-bottom: 1px solid lightgrey;
}
table.form-horizontal tr td:last-child:nth-child(even){
background-color: #FFFFFF;
}
.col-sm-1{
display: inline-block;

}
p.control-label {
width:100%;
height: 100%;
text-align: center;
padding: 3px auto;
vertical-align: top;
line-height: 1.2em;
}
div.col-sm-1 {
width:100%;
border-bottom: 1px solid #DDDDDD;
}
div.col-sm-1:last-child {
border-bottom: 0;
}
div.checkbox {
display: inline-block;
padding: 0 2% 0 0;
}

/*---------------------------
  チェックボックス装飾
---------------------------*/

input[type=radio], input[type=checkbox] {
	display:none;
}

.checkbox label span.checkbtn {
padding: 5px;
line-height: 1em;
}
.checkbox label {
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 2px 2px;
  padding: 5px 0 5px 30px;
  border-radius: 3px;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap; 
}

.checkbox label:hover {
  background-color: #EEEEEE;
}

.checkbox label .radiobtn:after, .checkbox label .checkbtn:after {
  -webkit-transition: border-color 0.2s linear;
  transition: border-color 0.2s linear;
  position: absolute;
  top: 52%;
  left: 8px;
  display: block;
  margin-top: -10px;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  content: '';
}

.checkbox label .radio:hover:after, .checkbox label .checkbox:hover:after {
  border-color: #999999;
}

.checkbox label input[type=radio]:checked ~ .radiobtn:after, .checkbox label input[type=checkbox]:checked ~ .checkbtn:after {
  border-color: #999999;
}

.checkbox label input[type=radio]:checked ~ .radiobtn , .checkbox label input[type=checkbox]:checked ~ .checkbtn {
	color:#999999;
}


.checkbox label input[type=radio]:checked ~ .radiobtn:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 48%;
  left: 12px;
  display: block;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #999999;
  content: ' ';
}



.checkbox label input[type=checkbox]:checked ~ .checkbtn:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 14px;
  display: block;
  margin-top: -7px;
  width: 7px;
  height: 11px;
  border-right: 3px solid #999999;
  border-bottom: 3px solid #999999;
  content: ' ';
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  display:block;
}


.checkbox label.rebtn:hover {
  background-color: #efefef;
}
.checkbox label.rebtn .radio:hover:after ,.checkbox label.rebtn input[type=radio]:checked ~ .radiobtn:after {
  border-color: #cc0000;
}
.checkbox label.rebtn input[type=radio]:checked ~ .radiobtn {
	color:#cc0000;
}

.checkbox label.rebtn input[type=radio]:checked ~ .radiobtn:before {
  background-color: #cc0000;
}


/*---------------------------
  非表示処理
---------------------------*/
div.checkbox[title="なし"] {
display: none;
}

#result {
	margin:0;
	padding:0;
	position:relative;
}

#result.over {
	height:600px;
	overflow:hidden;
}

#result .grad {
	width:100%;
	height:100px;
	position:absolute;
	bottom:0%;
	left:0%;
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
	display:none;
}

#result .grad a {
	margin:40px auto 0;
	padding:15px 0;
	font-size:1.4em;
	font-weight:bold;
	color:#2B5DBB;
	text-align:center;
	width:420px;
	display:block;
	background-color:#FFFFFF;
	border-radius:10px;
	border:2px solid #2B5DBB;
}

#result.over .grad {
	display:block;
	z-index:100;
}

#result .grad a img {
	margin:0 5px;
	width:15px;
	height:16px;
}

.hyo {
	width:100%;
	border:0;
	border-collapse: collapse;
	table-layout:fixed;
}

table#keyboard-hyo  th {
	padding-bottom:20px;
}
table#keyboard-hyo thead tr .header {
	background-image: url(../img/ico_sort_off.png);
	background-repeat: no-repeat;
	background-position: 50% 90%;
	cursor: pointer;
}
table#keyboard-hyo thead tr .headerSortUp {
	background-image: url(../img/ico_sort_up.png);
}
table#keyboard-hyo thead tr .headerSortDown {
	background-image: url(../img/ico_sort_down.png);
}
table#keyboard-hyo thead tr .headerSortDown, table#keyboard-hyo thead tr .headerSortUp {
background-color: #999999;
}


#contents .hyo a,#contents hyo a:hover {
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}

.hyo th {
	border:1px solid lightgrey;
	border-collapse: collapse;
	text-align:center;
	padding:10px 0;
	background:#fff;
	line-height: 1.3;
}
.hyo thead th {
	background:#DDDDDD;
	font-weight:normal;
	color:#000;
}
.hyo tr {
    margin: .3em 0;
    width: 100%;
    display: inline-table;
}
.hyo td {
	border-right: 1px #ddd dashed;
	border-left: 1px #ddd dashed;
	border-top: 0;
	border-bottom: 1px #666 solid;
	border-collapse: collapse;
	text-align: center;
	font-size: 0.8em;
/*	color:#ff0000;*/
	background:#fff;
	vertical-align: middle;
	line-height: 1.3em;
}
.hyo td a img {
	border:0;
	max-width:120px;
	max-height:120px;
	width: 100%;
	vertical-align: middle;
	margin-bottom: .3em;
}

.hyo td .hinban {
	display: block;
	font-size: .8em;
	color: #333;
}

.hyo td.cable {
	color:#000000;
}
.hyo td.cable span {
	font-size:1.3em;
	color:#1954B4;
}

.hyo td.price {
	font-size:1em;
}
.hyo td.nodata {
	color:#FFFFFF;
}


/* 価格 */
.hyo td.price p.price {
	text-align: right;
	font-size: 1.3em;
	color: #ff0000;
	margin: 0;
	padding: 0;
	display: inline-block;
	line-height: 1;
}
.hyo td.price p.price .tax {
    font-weight: normal;
    font-size: 0.5em;
}
.hyo td.price span.itemst {
    border: 1px solid #03689A;
    color: #03689A;
    font-weight: normal;
    display: inline-block;
    font-size: 11px;
    text-align: center;
    width: 55px;
    line-height: 1.3 !important;
    background: #FFF none repeat scroll 0% 0%;
    margin-left: 3px;
    padding: 2px 0 0 0;
    vertical-align: middle;
}
.itemre:empty, .itemst:empty, .itemdlv:empty , .newTxt {
	border:0 !important;
}


/* マウスオーバー時 */
.hyo th.hover {background-color:#FFCF95 !important;}
.hyo td.hover {background-color:#FCE6C5 !important;}

/* クリック時 */
.hyo th.click {background-color:#feffab !important;}
.hyo td.click {background-color:#feffab !important;}


.border-0 {
border: 0 !Important;
}


/* -------------------------
絞り込み結果幅
------------------------- */
/* スマホ */
.hyo th:nth-child(1) {
width:16%;
border-right: 0;
border-left: 0;
}
.hyo td:nth-child(1) {
width:16%;
border-right: 0;
border-left: 0;
}
.hyo td:nth-child(2) ,
.hyo th:nth-child(2) {
width:14%;
border-left: 0;
}
.hyo td:nth-child(3) ,
.hyo th:nth-child(3) {
width:10%;
}
.hyo td:nth-child(4) ,
.hyo th:nth-child(4) {
width:10%;
}
.hyo td:nth-child(5) ,
.hyo th:nth-child(5) {
width:7%;
}
.hyo td:nth-child(6) {
width:10%;
border-right: 0;
}
.hyo th:nth-child(6) {
width:10%;
border-right: 0;
}
.hyo td:nth-child(8) ,
.hyo th:nth-child(8) {
width:7%;
}
.hyo td:nth-child(9) ,
.hyo th:nth-child(9) {
width:16%;
}
/* PC */

@media screen and (min-width:1024px) {
.hyo th:nth-child(1) {
width:16%;
border-right: 0;
border-left: 0;
}
.hyo td:nth-child(1) {
width:16%;
border-right: 0;
border-left: 0;
}
.hyo td:nth-child(2) ,
.hyo th:nth-child(2) {
width:14%;
border-left: 0;
}
.hyo td:nth-child(3) ,
.hyo th:nth-child(3) {
width:10%;
}
.hyo td:nth-child(4) ,
.hyo th:nth-child(4) {
width:10%;
}
.hyo td:nth-child(5) ,
.hyo th:nth-child(5) {
width:7%;
}
.hyo td:nth-child(6) {
width:10%;
border-right: 0;
}
.hyo th:nth-child(6) {
width:10%;
border-right: 0;
}
.hyo td:nth-child(8) ,
.hyo th:nth-child(8) {
width:7%;
}
.hyo td:nth-child(9) ,
.hyo th:nth-child(9) {
width:16%;
}



.hyo td a.item-num {
padding: 1.5em 0 0 0;
}

}


/*---------------------------
  非表示処理
---------------------------*/
div.checkbox[title="なし"] {
display: none;
}

@media screen and (max-width:480px) { 
/* ========== for iPhone ========== */
.sp-none {
display: none;
}
table.data tr th:nth-child(6) ,
table.data tr th:nth-child(7) ,
table.data tr th:nth-child(8) ,
table.data tr td:nth-child(6) ,
table.data tr td:nth-child(7) ,
table.data tr td:nth-child(8) {
display: none;
}