/**
 * カタログトップCSS
 */

a:not(.not-mini) > div.cartButton {
  font-size:12px;
  color:#FFF;
  width:100px;
  text-align:center;
  line-height:2em;
  height:2em;
  display:block;
  text-decoration:none;
  vertical-align:middle;
  margin:0 auto;
}
.cartButton.orange {
  background: #ff6600;
  background: -moz-linear-gradient(top,  #ff6600 75%, #d25300 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(75%,#ff6600), color-stop(100%,#d25300));
  background: -webkit-linear-gradient(top,  #ff6600 75%,#d25300 100%);
  background: -o-linear-gradient(top,  #ff6600 75%,#d25300 100%);
  background: -ms-linear-gradient(top,  #ff6600 75%,#d25300 100%);
  background: linear-gradient(to bottom,  #ff6600 75%,#d25300 100%);
}
.cartButton.blue {
  background: #00ADEE;
  background: -moz-linear-gradient(top,  #00ADEE 75%, #005080 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(75%,#00ADEE), color-stop(100%,#005080));
  background: -webkit-linear-gradient(top,  #00ADEE 75%,#005080 100%);
  background: -o-linear-gradient(top,  #00ADEE 75%,#005080 100%);
  background: -ms-linear-gradient(top,  #00ADEE 75%,#005080 100%);
  background: linear-gradient(to bottom,  #00ADEE 75%,#005080 100%);
}
.cartButton.red {
  background: #e62727;
  background: -moz-linear-gradient(top,  #e62727 75%, #902020 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(75%,#e62727), color-stop(100%,#902020));
  background: -webkit-linear-gradient(top,  #e62727 75%,#902020 100%);
  background: -o-linear-gradient(top,  #e62727 75%,#902020 100%);
  background: -ms-linear-gradient(top,  #e62727 75%,#902020 100%);
  background: linear-gradient(to bottom,  #e62727 75%,#902020 100%);
}
a:not(.not-mini) > div.popup {
  position:absolute;
  bottom:25px;
  right:-70px;
  text-align:center;
  line-height:1.2;
  width:140px;
  padding:5px 2px;
  font-size:12px;
  display:none;
  text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 1px 1px 1px #ccc;
  -moz-box-shadow: 1px 1px 1px #ccc;
  -webkit-text-shadow: 1px 1px 1px #ccc;
  -moz-text-shadow: 1px 1px 1px #ccc;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  z-index:99;
}

/** タブ **/
.catalog-switch-tab{
  width:auto;
  padding:20px 0 0 0;
  border-bottom:5px solid #179DFF;
  margin:0 0 -2px 0
}
.catalog-switch-tab li{
  width:250px;
  *width:174px;
  height:40px;
  *float:left;
  display:table-cell;
  *display:block;
  vertical-align:middle;
  text-align:center;
  border-right:1px solid #FFF;
  background:#DCF1FF;
/*
  border-top-left-radius: 20px; 
  border-top-right-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-topright: 20px; 
*/
}
.catalog-switch-tab li.last-child{
  border-right:none
}  
.catalog-switch-tab li a.wrap{
  width:250px;
  *width:auto;
  height:40px;
  color:#333;
  text-decoration:none;
  display:table-cell;
  *display:block;
  text-align:center;
  vertical-align:middle
}
.catalog-switch-tab li span.arrow{
  display:block;
  position:relative;
  bottom:0px
}
.catalog-switch-tab li.current a{
  color:#FFF;
  background:#179DFF;
/*
  border-top-left-radius: 20px; 
  border-top-right-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-topright: 20px; 
*/
}
.catalog-switch-tab li.current span.arrow:after{
  content:"";
  display:block;
  position:absolute;
  bottom:-8px;
  border-top:8px solid #179DFF;
  border-right:6px solid transparent;
  border-left:6px solid transparent;
  left:50%;
  margin-left:-6px
}

/** カタログリスト **/
.catalog-switch-list-group{
  padding-top:15px;
  border-top:5px solid #179DFF;
}
.catalog-switch-list{
 /*
  *width:710px;
  padding:0 0 20px 0;
  margin:0 -10px 0 0;
*/
  width:auto;
  display:table;
  overflow:hidden;
  padding:10px;
  position:relative;
  top:-15px;
}
.catalog-switch-list li{
  *width:61px;
  *float:left;
  padding:0 10px 0 0;
  text-align:center;
  display:table-cell;
  *display:block;
  vertical-align:middle;
  font-size:1.4em;
  line-height:1.2;
  *line-height:50px
}
.catalog-switch-list li{
  *width:132px;
  *float:left;
  padding:0 10px 0 0;
  text-align:center;
  display:table-cell;
  *display:block;
  vertical-align:middle;
  font-size:1.4em;
  line-height:1.2;
  *line-height:50px
}
.catalog-switch-list li a{
  width:350px;
  *width:auto;
  height:50px;
  *line-height:50px;
  border:1px solid #AAAAAA;
  display:table-cell;
  *display:block;
  vertical-align:middle;
  color:#333;
  text-decoration:none;

  border-radius:3px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFFFFF), color-stop(1.00, #EEEEEE));
  background: -webkit-linear-gradient(#FFFFFF, #EEEEEE);
  background: -moz-linear-gradient(#FFFFFF, #EEEEEE);
  background: -o-linear-gradient(#FFFFFF, #EEEEEE);
  background: -ms-linear-gradient(#FFFFFF, #EEEEEE);
  background: linear-gradient(#FFFFFF, #EEEEEE);
}
.catalog-switch-list li.current a,
.catalog-switch-list li a:hover{
  color:#FFF;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #AAAAAA), color-stop(1.00, #888888));
  background: -webkit-linear-gradient(#AAAAAA, #888888);
  background: -moz-linear-gradient(#AAAAAA, #888888);
  background: -o-linear-gradient(#AAAAAA, #888888);
  background: -ms-linear-gradient(#AAAAAA, #888888);
  background: linear-gradient(#AAAAAA, #888888);
}

/** 見出し **/
.head-h2-catalog-01{
  font-size:1.8em;
  font-weight:normal;
  line-height:1.3;
  background:#FF1493;
  padding:5px 10px;
  color:#FFF;
}

a {
  text-decoration:none;
  color:#0066FF;
}

/** 行列表示 **/
div.catalog-list {
  width:100%;
}
div.catalog-list > ul > li {
  width:150px;
  margin:0px -2px 20px -2px;
  padding:0px 12px 20px 12px;
  display:inline-block;
  text-align:center;
  border-bottom:3px ridge #CCCCCC;
}
div.catalog-list > ul > li > p.cl-index {
  font-size:1.0em;
  font-weight:bold;
  margin:0px 0px 5px 0px;
  padding:3px 0px 3px 5px;
  text-align:left;
  background-color:#EFEFEF;
}
.cl-b01 { border-left:5px solid #0051B1; }
.cl-b02 { border-left:5px solid #666; }
.cl-b03 { border-left:5px solid #4142AB; }
.cl-b04 { border-left:5px solid #A5434E; }
.cl-b05 { border-left:5px solid #99784C; }
.cl-b06 { border-left:5px solid #489774; }
div.catalog-list > ul > li > p.cl-title {
  font-weight:bold;
  margin:5px 0px 0px 0px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  -webkit-text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
}
div.catalog-list > ul > li > a:not(.js-add-cart) {
  height:180px;
  display:inline-block;
}
div.catalog-list > ul > li > a > img {
  max-width:150px;
  max-height:180px;
  width:auto;
  display:table-cell;
  vertical-align:middle;
  -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
  -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
  box-shadow: 3px 3px 4px rgba(0,0,0,.5);
}

/** ランキング **/
.ranking-1st{
  width:50px;
  height:40px;
  color:#FFF;
  font-size:14px;
  line-height:50px;
  padding:10px 0 0 0;
  text-align:center;
  background:url(/resource/img/icon/ranking-icon_x1.gif) no-repeat left top
}
.ranking-2nd{
  width:50px;
  height:40px;
  color:#FFF;
  font-size:14px;
  line-height:50px;
  padding:10px 0 0 0;
  text-align:center;
  background:url(/resource/img/icon/ranking-icon_x1.gif) no-repeat -100px top
}
.ranking-3rd{
  width:50px;
  height:40px;
  color:#FFF;
  font-size:14px;
  line-height:50px;
  padding:10px 0 0 0;
  text-align:center;
  background:url(/resource/img/icon/ranking-icon_x1.gif) no-repeat right top
}
.ranking-00th{
  width:40px;
  height:40px;
  color:#FFF;
  font-size:14px;
  line-height:40px;
  text-align:center;
  background:#FCB800
}