@charset "utf-8";

/*toggle-menu*/
.toggle-menu {
  width: 1100px;
  margin: 90px auto 30px;
}
.toggle-menu-button {
  height: 18px;
  font: 600 14px 'semplicitapro', sans-serif;
  display: inline-block;
  overflow: hidden;
  letter-spacing: .1em;
  background: url(../img/brand/2018/ico-menu.png) no-repeat left center;
  padding: 1px 0 0 35px;
  cursor: pointer;
}

.toggle-menu-button span {
  display: block;
  height: 18px;
  line-height: 18px;
  -webkit-transition: .3s;
          transition: .3s;
}
.toggle-menu-button.open span {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}


.item-facet {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #d9d9d9;
  border-bottom: none;
}


.item-facet-section {
  border-bottom: 1px solid #d9d9d9;
}
.item-facet-title {
  font: 500 14px 'Poppins', 'Yu Gothic', '游ゴシック', 'YuGothic', '游ゴシック体', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', Meiryo, メイリオ, Helvetica, Arial, sans-serif;
  letter-spacing: .12em;
  padding: 16px 25px 13px;
  position: relative;
  cursor: pointer;
}
.item-facet-title::before,
.item-facet-title::after {
  content: '';
  width: 15px;
  height: 1px;
  background: #969596;
  position: absolute;
  top: 24px;
  right: 31px;
  -webkit-transition: .3s;
          transition: .3s;
}
.item-facet-title.is-close::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

/*共通*/
.item-facet-button h5 {
  font: 500 14px 'Poppins', sans-serif;
  letter-spacing: .12em;
  padding: 16px 25px 13px;
}

.item-facet-button ul li a {
  font: 400 14px 'Poppins', 'Yu Gothic', '游ゴシック', 'YuGothic', '游ゴシック体', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', Meiryo, メイリオ, Helvetica, Arial, sans-serif;
  letter-spacing: .1em;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 15px 55px 14px 45px;
  position: relative;
}
.item-facet-button ul li a.on,
.item-facet-button ul li a:hover {
  background: #eeeeee;
}
.item-facet-button ul li a:hover {
  text-decoration: none;
}

.item-facet-button li a:before {
  content: '';
  box-sizing: border-box;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
}

/*checkbox*/
.item-facet-button-checkbox li a:before {
  width: 16px;
  height: 16px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  top: 16px;
  right: 30px;
}
.item-facet-button-checkbox li a.on:before {
  background-image: url(../img/brand/2018/ico-checked-black.png);
}

/*link*/
.item-facet-button-link li a:before {
  width: 4px;
  height: 7px;
  background-image: url(../img/brand/2018/arrow-right-facet.png);
  top: 20px;
  right: 36px;
}

/*color*/
.item-facet-button-color li a::before {
  width: 16px;
  height: 16px;
  top: 16px;
  right: 30px;
}

.item-facet-button-color .color-0 a::before { background-color: #fff; border: 1px solid #666; }
.item-facet-button-color .color-1 a::before { background-color: #b6b6b5; }
.item-facet-button-color .color-2 a::before { background-color: #4e953f; }
.item-facet-button-color .color-3 a::before { background-color: #e3db25; }
.item-facet-button-color .color-4 a::before { background-color: #6d513b; }
.item-facet-button-color .color-5 a::before { background-color: #efcf66; }
.item-facet-button-color .color-6 a::before { background-color: #d92018; }
.item-facet-button-color .color-7 a::before { background-color: #eb6788; }
.item-facet-button-color .color-8 a::before { background-color: #be529a; }
.item-facet-button-color .color-9 a::before { background-color: #4265af; }
.item-facet-button-color .color-I a::before { background-color: #0C2374; }
.item-facet-button-color .color-B a::before { background-color: #000000; }
.item-facet-button-color .color-C a::before { background-color: #9f742b; }
.item-facet-button-color .color-D a::before { background-color: #f3a416; }
.item-facet-button-color .color-F a::before { background-color: #c9c9c9; }
.item-facet-button-color .color-G a::before { background-color: #d1a138; }
.item-facet-button-color .color-Z a::before { background-color: #fff; border: 1px dashed #666; }

.item-facet-button-color .color-E a::before {
  background-image: url(../img/brand/2018/bg-multi-color.png);
}
.item-facet-button-color .color-H a::before {
  background-image: url(../img/brand/2018/bg-leopard.png);
  background-size: cover;
}

.item-facet-button-color li a.on::after {
  content: '';
  box-sizing: border-box;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../img/brand/2018/ico-checked-white.png);
  position: absolute;
  top: 16px;
  width: 16px;
  height: 16px;
  right: 30px;
}
.item-facet-button-color li.color-0 a.on::after,
.item-facet-button-color li.color-Z a.on::after {
  background-image: url(../img/brand/2018/ico-checked-black.png);
}

/*カテゴリー*/
.item-facet-button-link > ul > li {
  position: relative;
}
.item-facet-popup {
  width: 260px;
  background: #fff;
  border: 1px solid #d9d9d9;
  position: absolute;
  top: 0;
  left: 258px;
  z-index: 10;
}