/* -----------------------
  sns
----------------------- */
.sns {
  background: url(../img/sns_bg.jpg) no-repeat center top / cover;
  padding-bottom: min(14.1vw, 110px);
}


.sns .ttl-box::after {
  background: url(../img/sns_ttl_underline.png) no-repeat center top / contain;
  width: min(29.49vw, 230px);
  height: min(4.36vw, 34px);
  left: min(6.54vw, 51px);
  bottom: min(5.51vw, 43px);
}

.sns .slider-area {
  position: relative;
  margin-bottom: min(10.51vw, 82px);
}
.sns .slider-area .slick-slider div {
  transition: none;
}
.sns .bg-slider + .bg-slider {
  margin-top: min(2.82vw, 22px);
}
.sns .bg-slider .slick-slide {
  margin: 0 min(1.28vw, 10px);
}
.sns .bg-slider .slick-slide img {
  max-width: 100%;
}

.sns .slider-area::before {
  content: '';
  background: url(../img/sns_slider_bg.png) no-repeat center top / contain;
  width: 100%;
  height: min(123.85vw, 966px);
  position: absolute;
  top: min(26.67vw, 208px);
  z-index: 2;
}
.sns .main-slider {
  width: min(55.38vw, 432px);
  height: min(97.05vw, 757px);
  position: absolute;
  top: min(38.21vw, 298px);
  left: calc(50% - min(27.69vw, 216px));
  z-index: 3;
}
.sns .main-slider .slick-arrow {
  position: absolute;
  width: min(12.82vw, 100px);
  height: min(12.82vw, 100px);
  top: min(41.79vw, 326px);
  z-index: 4;
}
.sns .main-slider .prev {
  left: max(-17.18vw, -134px);
}
.sns .main-slider .next {
  right: max(-17.18vw, -134px);
}

.sns .reviews {
  position: relative;
}
.sns .reviews .dot-line-vertical {
  height: min(8.72vw, 68px);
  position: absolute;
  top: min(8.59vw, 67px);
  left: calc(50% - min(0.26vw, 2px));
}
.sns .reviews .stars {
  display: flex;
  gap: 1px;
}

.sns .reviews .kuchikomi .stars {
  justify-content: center;
  gap: min(0.51vw, 4px);
}
.sns .reviews .kuchikomi .stars .star {
  width: min(12.82vw, 100px);
  height: min(12.82vw, 100px);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%,
    68% 57%, 79% 91%,
    50% 70%, 21% 91%,
    32% 57%, 2% 35%,
    39% 35%);
  background: #312008;
  opacity: 1;
  transform: rotate(0deg);
  transition: .3s;
}
.sns .reviews .kuchikomi .stars.trigger.move .star {
  animation: fill-color 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: var(--delay);

}
@keyframes fill-color {
  0% {
    background: #312008;
    transform: rotate(-144deg);
  }
  50% {
    background: #a27b50;
    transform: rotate(0deg);
  }
  100% {
    background: #a27b50;
    transform: rotate(0deg);
  }
}
.sns .reviews .kuchikomi .stars.trigger.move .star.partial {
  animation: fill-color-partial 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: var(--delay);
}
@keyframes fill-color-partial {
  0% {
    background: #312008;
    transform: rotate(-144deg);
  }
  50% {
    background: #312008;
    transform: rotate(0deg);
  }
  100% {
    background: linear-gradient(to right, #a27b50, #a27b50) no-repeat left center / 80% 100%, #312008;
    transform: rotate(0deg);
  }
}