///////////////////////////////////////
// カエレバ・ヨメレバ
///////////////////////////////////////

.booklink-box,
.kaerebalink-box,
.tomarebalink-box,
.product-item-box {
  padding: 22px 25px;
  width: 96%;
  // margin-bottom: 1.2em;
  border: 3px solid #dfdfdf;
  box-sizing: border-box;
  position: relative;
  // div{
  //   display: block;
  // }
}

.product-item-box{
  position: relative;
  &::after{
    content: '\ea87';
    font-family: icomoon;
    position: absolute;
    bottom: 0;
    right: 6px;
    font-size: 24px;
    color: $thin;
  }
  .image-thumb{
    img{
      border: none;
      box-shadow: none;
    }
  }
}

.rakuten-item-box::after{
  content: '\e903';
  font-family: icomoon;
}

.product-item-error.cf{
  display: block;
  line-height: 1.2;
}

.booklink-image,
.kaerebalink-image,
.tomarebalink-image,
.product-item-thumb {
  width: 160px;
  min-width: 160px;
  margin: 0 auto 1em !important;
  float: none !important;
  text-align: center;
  //position: relative;
  *{
    display: block;
  }
  >a>img{
    margin: 0 auto;
  }
}

.image-content{
  //display: none;
  visibility: hidden;
  position: absolute;
  z-index: 99;
  right: 0;
  //left: 0;
  top: 0;
  //padding: 10px;
  border: 1px solid $x_thin;
  background-color: $xx_thin;
  border-radius: $badge_border_radius;
  transition: all .3s ease;
  opacity: 0;
  max-width: calc(100% - 160px);
  img{
    display: block;
  }
  amp-img{
    min-width: 500px;
  }
}

.image-thumb:hover > .image-content{
  //display: block;
  visibility: visible;
  opacity: 1;
  &:hover{
    display: none;
  }
}

.swatchimages{
  display: flex;
  flex-wrap: wrap;
  margin-top: 3px;
  >*{
    border: 1px solid $thin;
    //padding: 1px;
    margin: 1px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover{
      box-shadow: 0 0 4px #f79901;
    }

    >img{
      display: block;
      //width: 18px;
    }
  }

  &:hover{
    .si-thumb{
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

}

.pis-l .si-thumb{
  width: 30px;
}
.pis-m .si-thumb{
  width: 18%;
}
.pis-s .si-thumb{
  width: 30%;
}

@media screen and (max-width: 480px){
  .pis-m .si-thumb{
    width: 30%;
  }
}

.booklink-info,
.kaerebalink-info,
.tomarebalink-info,
.product-item-content {
  line-height: 125%;
  width: 100%;
}

.product-item-snippet{
  font-size: 0.8em;
  margin-top: 6px;
}

.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date {
   font-size: 12px;
}
.booklink-detail, .kaerebalink-detail, .tomarebalink-address {
  color: #333;
  font-size: 12px;
  margin: 0 0 10px;
}

.kaerebalink-link1,
.booklink-link2,
.tomarebalink-link1,
.product-item-buttons {
  >*{
    background: none !important;
    padding: 0 !important;
    display: block !important;
  }
  a{
    width: 90%;
    display: block;
    margin: 0px auto 8px;
    padding: 6px 12px;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    &:hover{
      opacity: 0.6;
    }
  }

  // >div>a{
  //   background: #fff;
  // }
}

.product-item-buttons{
  margin-top: 1em;
}

.product-item-image-only img{
  border: 0;
  box-shadow: none;
}


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

  .booklink-box,
  .kaerebalink-box,
  .tomarebalink-box,
  .product-item-box {
    text-align: left;
    display: flex;
    font-size: inherit !important;
  }

  .booklink-image,
  .kaerebalink-image,
  .tomarebalink-image,
  .product-item-thumb {
    vertical-align: top;
    box-sizing: border-box;
    min-width: auto !important;
  }


  .booklink-info,
  .kaerebalink-info,
  .tomarebalink-info,
  .product-item-content {
    line-height: 125%;
    vertical-align: top;
    box-sizing: border-box;
    //display: table-cell;
    padding-left: 25px;
    width: 100%;
  }

  .booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date {
    margin: 6px 0 0;
  }

  .booklink-detail, .kaerebalink-detail {
    margin: 0 0 14px;
  }


  .booklink-link2,
  .kaerebalink-link1,
  .tomarebalink-link1,
  .product-item-buttons {
    display: flex;
    flex-wrap: wrap;
    a{
      width: auto;
      text-align: center;
      //margin: 0;
      border-radius: 3px;
      img{
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
    >*{
      margin: 0.5%;
      box-sizing: border-box;
    }
  }

}

.shoplinkbtn{
  position: relative;
  img{
    position: absolute;
  }
}
.shoplinkbtn1 a {
  background: #192f60;
}
.shoplinkbtn2 a {
  background: #007b43;
}
.shoplinkbtn3 a {
  background: #522f60;
}
.shoplinkamazon a {
  background: #f79901;
}
.shoplinkrakuten a {
  background: #bf0000;
}
.shoplinkyahoo a {
  background: #e60033;
  position: relative;
}
.shoplinkdmm a {
  background: #00bcd4;
}
.shoplinkseven a {
  background: #008837;
}
.shoplinkbellemaison a {
  background: #80bd22;
}
.shoplinkcecile a {
  background: #8d124b;
}
.shoplinkkakakucom a {
  background: #051d93;
}
.shoplinkkindle a {
  background: #0074c1;
}
.shoplinkrakukobo a {
  background: #bf0000;
}
.shoplinkbk1 a {
  background: #0085cd;
}
.shoplinkehon a {
  background: #000066;
}
.shoplinkkino a {
  background: #004097;
}
.shoplinktoshokan a {
  background: #15b0e7;
}
.shoplinkjalan a{
  background: #ff5600;
}
.shoplinkjtb a{
  background: #C71628;
}
.shoplinkikyu a{
  background: #1C4678;
}
.shoplinkrurubu a{
  background: #000066;
}
.shoplinkwowma a {
  background: #FF6100;
}

.product-item-admin{
  position: absolute;
  bottom: 3px;
  left: 6px;
  >*{
  font-size: 10px;
  color: #777;
  margin: 6px;
  }
}

///////////////////////////////////////
// サイズ指定
///////////////////////////////////////
.pis-s{
  padding: 1em;
  &::after{
    font-size: 18px;
  }
  .product-item-thumb{
    width: 90px;
    min-width: 90px;
  }

  // .product-item-buttons a{
  //   padding: 5px 8px;
  // }
}

.pis-l{
  &.product-item-box{
    display: block;
  }

  figure.product-item-thumb{
    width: 100%;
    min-width: auto;
  }
}

.item-price{
  color: #c9171e;
}

.acquired-date{
  font-size: 0.9em;
}

@mixin product_item_box_834{
  .booklink-box, .kaerebalink-box, .tomarebalink-box, .product-item-box{
    padding: 10px 10px 24px;
    display: block;
  }

  .booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb{
    width: 120px;
    min-width: 120px;
    margin-right: 3% !important;
    float: left !important;
    height: 100% !important;
  }

  // .product-item-content{
  //   margin-bottom: 18px;
  // }


  .booklink-link2,
  .kaerebalink-link1,
  .tomarebalink-link1,
  .product-item-buttons{
    //clear: both;
    display: flex;
    flex-wrap: wrap;
    //justify-content: space-between;
    >*{
      width: auto;
      margin: 0 .5% !important;
      //flex: 1 1 auto;
      >a{
        width: auto;
        font-size: 11px;
        //padding: 6px 0;
      }
    }
  }

  .product-item-box::after{
    font-size: 18px;
  }
}

@mixin product_item_box_480{
  .booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb{
    width: 80px;
    min-width: 80px;
  }

  .booklink-info, .kaerebalink-info, .tomarebalink-info, .product-item-content{
    width: auto !important;
    overflow: visible !important;
    text-align: center !important;
    padding: 0 !important;
  }

  .booklink-link2,
  .kaerebalink-link1,
  .tomarebalink-link1,
  .product-item-buttons{
    >*{
      width: 100%;
      margin: 0 .5% !important;
    }
  }
}

.nwa{
  @include product_item_box_834;
  @include product_item_box_480;
}

//834px以下
@media screen and (max-width: 834px){
  @include product_item_box_834;
}

//480px以下
@media screen and (max-width: 480px){
  @include product_item_box_480;
}