/* お気に入りボタン用のCSS */
/*ラベル制御*/
.btn-favorite-pc.favorite::after {
    content: 'お気に入り';
    color: #8f8f8f;
    font-weight: 500;
}
.btn-favorite-pc.favorited::after {
    content: 'お気に入り済';
    color: #ff6869;
}
/*幅調整　済が入ると2行になるため*/
.product-wrap__info--buttons .btn-outline-gray.btn-favorite-pc.favorited {
    width: 100%;
    max-width: 170px;
margin: 0;
background: #ff686910;
    border: 1px solid #ff6869;
    padding: 12px 20px;
    gap: 6px;
}
/*アイコン表示制御*/
.favorite .img-favorite{
    display: block;
    opacity: 1;
    filter: brightness(0.8);
    margin-left: 8px;
}
.favorite .img-favorited{
    display: none;
    opacity: 0;
}
.favorited .img-favorite{
    display: none;
    opacity: 0;
}
.favorited .img-favorited{
    display: block;
    opacity: 1;
}
.btn-favorite-list.favorited .img-favorite{
    display: none;
    opacity: 0;
}

.btn-favorite-list.favorited svg{
    /* display: none; */
    /* opacity: 0; */
}

/*アイコンheart-solidサイズ調整*/
.btn-favorite-pc.favorited .img-favorited{
    width: 33px;
}
.btn-favorite-sp.favorited .img-favorited{
    width: 21px;
}
/* animation */
.btn-favorite-pc.favorited.animate img {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
}

.btn-favorite-sp.favorited.animate 
, .btn-favorite-list.favorited.animate {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
}

/*現行animate.cssよりアニメーション*/
@-webkit-keyframes rubberBand {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);
    }
  
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);
    }
  
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
      transform: scale3d(1.15, 0.85, 1);
    }
  
    65% {
      -webkit-transform: scale3d(.95, 1.05, 1);
      transform: scale3d(.95, 1.05, 1);
    }
  
    75% {
      -webkit-transform: scale3d(1.05, .95, 1);
      transform: scale3d(1.05, .95, 1);
    }
  
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  
  @keyframes rubberBand {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);
    }
  
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);
    }
  
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
      transform: scale3d(1.15, 0.85, 1);
    }
  
    65% {
      -webkit-transform: scale3d(.95, 1.05, 1);
      transform: scale3d(.95, 1.05, 1);
    }
  
    75% {
      -webkit-transform: scale3d(1.05, .95, 1);
      transform: scale3d(1.05, .95, 1);
    }
  
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }