@charset "utf-8";

@media screen and (min-width:750px){
  #crosssell-box {
    font-size: 28px;
    max-width: 750px;
    margin: 0 auto;
  }
}
#crosssell-box img,
#crosssell-box p {
  list-style:  none;
  padding: 0;
  margin: 0;
  font-size: 0;
}
#crosssell-box img {
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: bottom;
}
#crosssell-box .lp {
  position: relative;
}
#crosssell-box .mv-box {
  position: absolute;
  bottom: 17%;
  left: 0%;
  right: 0;
  margin: 0 auto;
  width: 89%;
}
#crosssell-box .btn {
  margin: 0 auto;
  width: 89%;
}
#crosssell-box .cta-btn {
  position: absolute;
  bottom: 17%;
  left: 0%;
  right: 0;
  margin: 0 auto;
  width: 89%;
}
#crosssell-box div {
  position: relative;
}
/* bounce */
#crosssell-box .bounce {
  -webkit-animation-name: bounce;
  -moz-animation-name: bounce;
  -o-animation-name: bounce;
  animation-name: bounce;
  -webkit-animation-duration: 1.2s;
  -moz-animation-duration: 1.2s;
  -o-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  -o-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
  0%   {
    -webkit-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -ms-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -o-transform: scale(1,1)      translate3d(0 , 0 , 0);
    transform: scale(1,1)      translate3d(0 , 0 , 0);
  }
  10%  {
    -webkit-transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
    -ms-transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
    -o-transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
    transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
  }
  30%  {
    -webkit-transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
    -ms-transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
    -o-transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
    transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
  }
  50%  {
    -webkit-transform: scale(1.02,.97) translate3d(0 , 0 , 0);
    -ms-transform: scale(1.02,.97) translate3d(0 , 0 , 0);
    -o-transform: scale(1.02,.97) translate3d(0 , 0 , 0);
    transform: scale(1.02,.97) translate3d(0 , 0 , 0);
  }
  57%  {
    -webkit-transform: scale(1,1)      translate3d(0 , -2% , 0);
    -ms-transform: scale(1,1)      translate3d(0 , -2% , 0);
    -o-transform: scale(1,1)      translate3d(0 , -2% , 0);
    transform: scale(1,1)      translate3d(0 , -2% , 0);
  }
  64%  {
    -webkit-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -ms-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -o-transform: scale(1,1)      translate3d(0 , 0 , 0);
    transform: scale(1,1)      translate3d(0 , 0 , 0);
  }
  100% {
    -webkit-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -ms-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -o-transform: scale(1,1)      translate3d(0 , 0 , 0);
    transform: scale(1,1)      translate3d(0 , 0 , 0);
  }
}
@keyframes bounce {
  0%   {
    -webkit-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -ms-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -o-transform: scale(1,1)      translate3d(0 , 0 , 0);
    transform: scale(1,1)      translate3d(0 , 0 , 0);
  }
  10%  {
    -webkit-transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
    -ms-transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
    -o-transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
    transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
  }
  30%  {
    -webkit-transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
    -ms-transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
    -o-transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
    transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
  }
  50%  {
    -webkit-transform: scale(1.02,.97) translate3d(0 , 0 , 0);
    -ms-transform: scale(1.02,.97) translate3d(0 , 0 , 0);
    -o-transform: scale(1.02,.97) translate3d(0 , 0 , 0);
    transform: scale(1.02,.97) translate3d(0 , 0 , 0);
  }
  57%  {
    -webkit-transform: scale(1,1)      translate3d(0 , -2% , 0);
    -ms-transform: scale(1,1)      translate3d(0 , -2% , 0);
    -o-transform: scale(1,1)      translate3d(0 , -2% , 0);
    transform: scale(1,1)      translate3d(0 , -2% , 0);
  }
  64%  {
    -webkit-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -ms-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -o-transform: scale(1,1)      translate3d(0 , 0 , 0);
    transform: scale(1,1)      translate3d(0 , 0 , 0);
  }
  100% {
    -webkit-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -ms-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -o-transform: scale(1,1)      translate3d(0 , 0 , 0);
    transform: scale(1,1)      translate3d(0 , 0 , 0);
  }
}
/* 画像マップを使用している画像が原因で座標がずれる問題の対策 */
.cart-buttons-wrapper {
    position: relative;
    width: 100%;
    max-width: 750px; /* 画像の元の最大幅 */
    margin: 0 auto; /* 中央寄せ */
    background-size: contain;
    background-repeat: no-repeat;
    display: flex; /* 内部のリンクを横並びにする */
}

.cart-buttons-wrapper a {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%; /* 幅を均等に2分割 */
    display: block; /* 領域全体をクリック可能にする */
    /* リンクの青い下線などを消す */
    text-decoration: none; 
    border: none;
}

/* 左側のリンク */
.cart-buttons-wrapper a:first-child {
    left: 0;
}

/* 右側のリンク */
.cart-buttons-wrapper a:last-child {
    right: 0;
}