@charset "UTF-8";
/* CSS Document */


/* ============================== CartCSS ============================== */
#cart_icon { width: 45px; height: 35px; position: relative; margin: 0 auto; top:5px }

#cart_icon #cart_arrow { position: absolute; border-top: 4px solid #ccc; border-left: 8px solid transparent; border-right: 8px solid transparent; left: 12px; top: 0; opacity: 0; }

#cart_icon svg { fill: #ccc; width: 45px; height: 35px; }

#cart_icon #goods_count { position: absolute; border: #fff 2px solid; background: #ccc; left: -12px; bottom: -6px; border-radius: 25px; width: 23px; height: 23px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 14px; color: #fff; font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif; line-height: 1; -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); }

#cart_icon #cell span { display: block; position: absolute; border-top: 4px solid #ccc; border-left: 1px solid transparent; border-right: 1.4px solid transparent; -webkit-animation: cellIn 2.3s linear; animation: cellIn 2.3s linear; }

#cart_icon #cell span:nth-child(1) { width: 21px; left: 10px; top: 19px; }

#cart_icon #cell span:nth-child(2) { width: 24px; left: 8px; top: 14px; }

#cart_icon #cell span:nth-child(3) { width: 28px; left: 6px; top: 9px; }

#cart_icon.max svg { fill: #fa08af; }

#cart_icon.max #goods_count { background: #fa08af; }

#cart_icon.max #cell span, #cart_icon.max #cart_arrow { border-top-color: #fa08af; }

#cart_icon.active #cart_arrow { -webkit-animation: arrow 2.3s linear; animation: arrow 2.3s linear; }

#cart_icon.active #goods_count { -webkit-animation: bound 0.9s 1.5s ease-in-out; animation: bound 0.9s 1.5s ease-in-out; }

@-webkit-keyframes cellIn { 0% { -webkit-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); }
  10% { opacity: 1; }
  11% { opacity: 0; }
  29% { opacity: 1; }
  30% { opacity: 1; }
  31% { opacity: 0; }
  49% { opacity: 1; }
  50% { opacity: 1; }
  51% { opacity: 0; }
  79% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 0; }
  80% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); }
  100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }

@keyframes cellIn { 0% { -webkit-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); }
  10% { opacity: 1; }
  11% { opacity: 0; }
  29% { opacity: 1; }
  30% { opacity: 1; }
  31% { opacity: 0; }
  49% { opacity: 1; }
  50% { opacity: 1; }
  51% { opacity: 0; }
  79% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 0; }
  80% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); }
  100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }

@-webkit-keyframes bound { 0% { -webkit-transform: translate3d(0, 0, 0) scale(0.7); transform: translate3d(0, 0, 0) scale(0.7); }
  15% { -webkit-transform: translate3d(0, 2px, 0) scaleX(0.7) scaleY(0.5); transform: translate3d(0, 2px, 0) scaleX(0.7) scaleY(0.5); }
  30% { -webkit-transform: translate3d(0, -5px, 0) scale(0.7); transform: translate3d(0, -5px, 0) scale(0.7); }
  50% { -webkit-transform: translate3d(0, -5px, 0) scale(0.7); transform: translate3d(0, -5px, 0) scale(0.7); }
  75% { -webkit-transform: translate3d(0, 1px, 0) scale(0.7); transform: translate3d(0, 1px, 0) scale(0.7); }
  90% { -webkit-transform: translate3d(0, 1px, 0) scaleX(0.7) scaleY(0.6); transform: translate3d(0, 1px, 0) scaleX(0.7) scaleY(0.6); }
  100% { -webkit-transform: translate3d(0, 0, 0) scale(0.7); transform: translate3d(0, 0, 0) scale(0.7); } }

@keyframes bound { 0% { -webkit-transform: translate3d(0, 0, 0) scale(0.7); transform: translate3d(0, 0, 0) scale(0.7); }
  15% { -webkit-transform: translate3d(0, 2px, 0) scaleX(0.7) scaleY(0.5); transform: translate3d(0, 2px, 0) scaleX(0.7) scaleY(0.5); }
  30% { -webkit-transform: translate3d(0, -5px, 0) scale(0.7); transform: translate3d(0, -5px, 0) scale(0.7); }
  50% { -webkit-transform: translate3d(0, -5px, 0) scale(0.7); transform: translate3d(0, -5px, 0) scale(0.7); }
  75% { -webkit-transform: translate3d(0, 1px, 0) scale(0.7); transform: translate3d(0, 1px, 0) scale(0.7); }
  90% { -webkit-transform: translate3d(0, 1px, 0) scaleX(0.7) scaleY(0.6); transform: translate3d(0, 1px, 0) scaleX(0.7) scaleY(0.6); }
  100% { -webkit-transform: translate3d(0, 0, 0) scale(0.7); transform: translate3d(0, 0, 0) scale(0.7); } }

@-webkit-keyframes arrow { 0% { -webkit-transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0);
    opacity: 0; }
  5% { opacity: 1; }
  15% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 1; }
  17% { -webkit-transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0);
    opacity: 0; }
  30% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 1; }
  32% { -webkit-transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0);
    opacity: 0; }
  45% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 1; }
  47% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 0; }
  70% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 0; }
  71% { -webkit-transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0);
    opacity: 0; } }

@keyframes arrow { 0% { -webkit-transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0);
    opacity: 0; }
  5% { opacity: 1; }
  15% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 1; }
  17% { -webkit-transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0);
    opacity: 0; }
  30% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 1; }
  32% { -webkit-transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0);
    opacity: 0; }
  45% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 1; }
  47% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 0; }
  70% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 0; }
  71% { -webkit-transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0);
    opacity: 0; } }

@-webkit-keyframes cell { 0% { opacity: 0; }
  5% { opacity: 1; }
  15% { opacity: 0; }
  17% { opacity: 1; }
  32% { -webkit-transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0);
    opacity: 0; }
  45% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 1; }
  47% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 0; }
  70% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 0; }
  71% { -webkit-transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0);
    opacity: 0; }
  75% { opacity: 1; }
  80% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 1; }
  100% { opacity: 0; } }

@keyframes cell { 0% { opacity: 0; }
  5% { opacity: 1; }
  15% { opacity: 0; }
  17% { opacity: 1; }
  32% { -webkit-transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0);
    opacity: 0; }
  45% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 1; }
  47% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 0; }
  70% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 0; }
  71% { -webkit-transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0);
    opacity: 0; }
  75% { opacity: 1; }
  80% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
    opacity: 1; }
  100% { opacity: 0; } }