/* -----------------------
  sns
----------------------- */
.sns {
  background: url(../img/sns_bg.png?v1) no-repeat center top / cover, #EC987F;
  padding-top: min(11.88vw, 114px);
}

.sns .ttl {
  position: relative;
}
.sns .ttl::before,
.sns .ttl::after {
  content: '';
  width: min(19.06vw, 183px);
  height: min(20.94vw, 201px);
  position: absolute;
  bottom: min(4.06vw, 39px);
  animation: kakukaku 1s steps(2, end) infinite;
}
.sns .ttl::before {
  background: url(../img/sns_ttl_icon_left.png) no-repeat center / contain;
  left: min(8.13vw, 78px);
}
.sns .ttl::after {
  background: url(../img/sns_ttl_icon_right.png) no-repeat center / contain;
  right: min(8.13vw, 78px);
  animation-direction: reverse;
}

.sns .slider {
  background: url(../img/sns_slider_bg.png) no-repeat center / auto 100%;
}
.sns .slider .slide-item {
  background: url(../img/sns_slider_item_bg.png) no-repeat center bottom / auto min(22.6vw, 217px);
  margin: 0 min(5.63vw, 54px);
  padding: min(13.65vw, 131px) 0 min(24.06vw, 231px);
  position: relative;
}

.sns .slider .slide-item .comment-balloon {
  position: absolute;
  width: 100%;
  height: min(20vw, 192px);
  top: 0;
  left: 0;
}
.sns .slider .slide-item .movie-wrap {
  overflow: hidden;
  line-height: 0;
  width: min(63.23vw, 607px);
  max-width: 100%;
  height: min(103.75vw, 996px);
  border-radius: min(8.02vw, 77px);
  margin: 0 auto;
}
.sns .slider .slide-item .movie-wrap video {
  width: 200%;
  max-width: 100%;
  height: 100%;
  vertical-align: bottom;
  margin: 0 0 0 auto;
  object-fit: cover;
}

.sns .slider .slide-item.slick-slide .icon-heart {
  width: min(6.98vw, 67px);
  height: min(6.25vw, 60px);
  position: absolute;
  bottom: min(10.1vw, 97px);
  left: min(2.81vw, 27px);
  opacity: 0;
}
/* ハートのアニメーション：デフォルト処理class ↓ */
.sns .slider .slide-item.slick-slide.slick-center .icon-heart, 
/* slick2周目用class ↓ */
.sns .slider .slide-item.slick-current .icon-heart,
.sns .slider .slide-item.is-active-next .icon-heart {
  animation: like 0.3s 0.5s ease-in-out forwards; /* delayはスライダーの速さに合わせて0.4s以上に */
}

@keyframes like {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  45% {
    opacity: 1;
    transform: scale(1);
  }
  90% {
    opacity: 1;
    transform: scale(1.45, 1.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }

}