@media screen and (min-width: 768px) {
  .lipstick-slide-pc {
    display: block !important;
  }
}
@media screen and (max-width: 767px) {
  .lipstick-slide-pc {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .lipstick-slide-sp {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .lipstick-slide-sp {
    display: block !important;
  }
}

@media screen and (min-width: 768px) {
  .step-panel {
    width: calc(clamp(0px, 16.1054172767vw, 220px) * 1);
    text-align: center;
    display: flex;
    flex-direction: column;
  }
}
@media screen and (max-width: 767px) {
  .step-panel {
    font-size: calc(clamp(0px, 6.4vw, 6.4vw) * 1);
    width: calc(clamp(0px, 58.6666666667vw, 58.6666666667vw) * 1);
  }
}
.step-panel .step-details {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .step-panel .step-details {
    height: calc(clamp(0px, 12.4450951684vw, 170px) * 1);
  }
}
@media screen and (max-width: 767px) {
  .step-panel .step-details {
    text-align: center;
    height: calc(clamp(0px, 40.6666666667vw, 40.6666666667vw) * 1);
  }
}
.step-panel .step-title {
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .step-panel .step-title {
    margin-top: calc(clamp(0px, 1.4641288433vw, 20px) * 1);
    font-size: calc(clamp(0px, 1.0980966325vw, 15px) * 1);
    line-height: 1.6;
  }
}
@media screen and (max-width: 767px) {
  .step-panel .step-title {
    margin-top: calc(clamp(0px, 6.6666666667vw, 6.6666666667vw) * 1);
    font-size: calc(clamp(0px, 4vw, 4vw) * 1);
  }
}
@media screen and (min-width: 768px) {
  .step-panel .step-txt {
    line-height: 1;
    margin-top: calc(clamp(0px, 0.7320644217vw, 10px) * 1);
    font-size: calc(clamp(0px, 1.0248901903vw, 14px) * 1);
  }
}
@media screen and (max-width: 767px) {
  .step-panel .step-txt {
    margin-top: calc(clamp(0px, 4vw, 4vw) * 1);
    font-size: calc(clamp(0px, 3.7333333333vw, 3.7333333333vw) * 1);
  }
}
.step-panel .step-link {
  margin-top: auto;
}
.step-panel .step-link > a {
  background-color: #040a2b;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .step-panel .step-link > a {
    zoom: 1;
    font-size: calc(clamp(0px, 0.878477306vw, 12px) * 1);
    letter-spacing: 0.15em;
    width: calc(clamp(0px, 11.1273792094vw, 152px) * 1);
    height: calc(clamp(0px, 2.9282576867vw, 40px) * 1);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .step-panel .step-link > a {
    letter-spacing: 0.3em;
    width: 100%;
    height: calc(clamp(0px, 10.6666666667vw, 10.6666666667vw) * 1);
    font-size: calc(clamp(0px, 3.2vw, 3.2vw) * 1);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    box-sizing: border-box;
    font-weight: bold;
  }
}
.content-formatter:has(.step-panel),
.content-formatter:has(.step-panel) .content-formatter__text,
.content-formatter:has(.step-panel) .content-formatter__line,
.content-formatter:has(.step-panel) .content-formatter__rendered-item {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .content-formatter:has(.step-panel) .content-formatter__rendered-item {
    max-width: calc(clamp(0px, 16.1054172767vw, 220px) * 1);
  }
}
.content-formatter:has(.step-panel) .slick-list {
  padding: 0;
  overflow: visible;
}
.content-formatter:has(.step-panel) {
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .content-formatter:has(.step-panel) {
    margin-top: calc(clamp(0px, 2.9282576867vw, 40px) * 1);
    padding-bottom: calc(clamp(0px, 7.3206442167vw, 100px) * 1);
  }
}
@media screen and (max-width: 767px) {
  .content-formatter:has(.step-panel) {
    margin-top: calc(clamp(0px, 6.6666666667vw, 6.6666666667vw) * 1);
    padding-bottom: calc(clamp(0px, 13.3333333333vw, 13.3333333333vw) * 1);
  }
}

.slick-carousel:has(.step-panel) {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.slick-carousel:has(.step-panel) .content-formatter__rendered-item .basic-textarea-v1 {
  display: flex;
  justify-content: center;
}
.slick-carousel:has(.step-panel) .slick-list {
  padding: 0 calc(clamp(0px, 5.3333333333vw, 5.3333333333vw) * 1);
  overflow: visible;
}
.slick-carousel:has(.step-panel) .slick-prev,
.slick-carousel:has(.step-panel) .slick-next {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-color: transparent;
  transform: rotate(0);
  z-index: 1;
  top: calc(clamp(0px, 21.3333333333vw, 21.3333333333vw) * 1);
  width: calc(clamp(0px, 5.3333333333vw, 5.3333333333vw) * 1);
  height: calc(clamp(0px, 16.8vw, 16.8vw) * 1);
}
.slick-carousel:has(.step-panel) .slick-prev:not(.slick-disabled),
.slick-carousel:has(.step-panel) .slick-next:not(.slick-disabled) {
  opacity: 1;
}
.slick-carousel:has(.step-panel) .slick-prev {
  left: calc(clamp(0px, 5.3333333333vw, 5.3333333333vw) * 1);
  background-image: url("/media/export/cms_2.0/LP/lipstick/20250731/arrow-prev.png") !important;
}
.slick-carousel:has(.step-panel) .slick-next {
  right: calc(clamp(0px, 5.3333333333vw, 5.3333333333vw) * 1);
  background-image: url("/media/export/cms_2.0/LP/lipstick/20250731/arrow-next.png") !important;
}
.slick-carousel:has(.step-panel) .slick-dots {
  display: none !important;
}