@charset "utf-8";

/*!
 * TEMP： プラグイン用CSS
 * ECCUBE：v3.14
 * CSS Information： plugin style
 * Copyright shiro8 all rights reserved.
 */

/* -------------------------------------------------------
 商品一覧ページ list・grid表示切替プラグイン
--------------------------------------------------------- */

#result_info_box__menu_box .pagenumberarea{
  float:right;
}
/* スイッチボタン */
#s8grid_menu{
  display:inline-block;
  position:relative;
  border-radius:5px;
  float:right;
  margin-right:15px;
  margin-bottom: 5px;
}
#s8grid_menu .btn-view span{
  display:inline-block;
/*
  width:25px;
  height:20px;
*/
  width:20px;
  height:15px;
  padding:0;
  float:left;
  margin-right:5px;
}
#s8grid_menu .icon-list{
  background:url(../img/view_list.png) left center no-repeat;
  background-size:24px;
}
#s8grid_menu .icon-grid {
 background:url(../img/view_grid.png) left center no-repeat;
  background-size:24px;
}

.viewbox{
  padding-top:8px;
  padding-bottom:8px;
  height:auto; }

.product_item{
  margin-bottom: 20px;
  padding: 0;
  background:#FFF;
}
.product_item:before,
.product_item:after {
  content: " ";
  display: table;
}
.product_item:after {
  clear: both;
}
.product_item{
  *zoom: 1;
}
#item_list .viewbox.grid-view{
  transition: all 0.3s linear;
}
.viewbox.list-view{
  float: none;
  width: 100%;
  display:inline-block;
  clear:both;
  height:auto;
  background-color: #fff;
  margin:0 0 10px;
  padding:8px;
  transition: all 0.3s linear;
  border-bottom:#CCC dotted 1px;
}
.viewbox.list-view:hover{
  background: #eee;
}
.viewbox.list-view .product_item{
  height:auto;
  max-height:171px;
  margin: 0;
  padding:10px;
}
.viewbox.list-view:before, .viewbox.list-view:after{
  display: table;
  content: " ";
}
.viewbox.list-view .item_photo{
  width:auto;
  min-width:110px;
  height:150px;
  max-height:150px;
  float: left;
  margin-bottom:0;
  margin-right:15px;
  position:relative;
}
.viewbox.list-view:after{
  clear: both;
}
.viewbox.list-view .item_photo img{
  height:100%;
  width:auto;
}

/* btn */
.btn-view {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
/*   padding:10px; */
  padding:6px;
  font-weight:normal;
  font-size:14px;
  font-size:1.4rem;
  text-align:left;
  line-height:20px;
  height:30px;
/*   height:40px; */
  vertical-align:middle;
  box-sizing:border-box;
}
.btn-view:focus,
.btn-view.focus {
  color: #333;
  background-color: #eee;
  border-color: #8c8c8c;
}
.btn-view:hover {
  color: #333;
  background-color: #eee;
  border-color: #adadad;
}
.btn-view:active,
.btn-view.active,
.open > .dropdown-toggle.btn-view {
  color: #333;
  background-color: #eee;
  border-color: #adadad;
}
.btn-view:active:hover,
.btn-view.active:hover,
.open > .dropdown-toggle.btn-view:hover,
.btn-view:active:focus,
.btn-view.active:focus,
.open > .dropdown-toggle.btn-view:focus,
.btn-view:active.focus,
.btn-view.active.focus,
.open > .dropdown-toggle.btn-view.focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.btn-view:active,
.btn-view.active,
.open > .dropdown-toggle.btn-view {
  background-image: none;
}
.btn-view.disabled:hover,
.btn-view[disabled]:hover,
fieldset[disabled] .btn-view:hover,
.btn-view.disabled:focus,
.btn-view[disabled]:focus,
fieldset[disabled] .btn-view:focus,
.btn-view.disabled.focus,
.btn-view[disabled].focus,
fieldset[disabled] .btn-view.focus {
  background-color: #fff;
  border-color: #ccc;
}
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

※Bootstrapの.btn-groupに関する部分のみ抜粋追記
 */

.btn-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.btn-group > .btn{
  position: relative;
  float: left;
  border-radius:3px;
}
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active{
  z-index: 2;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
  margin-left: -1px;
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0;
}
.btn-group > .btn:first-child {
  margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.btn-group > .btn-group {
  float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}


@media screen and (max-width: 480px) {
.viewbox.list-view .product_item{
  height:auto;
  max-height:151px;
  margin: 0;
  padding:10px;
}
.viewbox.list-view .item_photo{
  width:auto;
  min-width:80px;
  height:130px;
  max-height:130px;
  float: left;
  margin-bottom:0;
  margin-right:15px;
  position:relative;
}
}