@charset "UTF-8";
/* ===== 波形つきセクション共通 ===== */
.cnt03, .cnt02 {
  position: relative;
  isolation: isolate;
  padding-block-end: 22.7272727273cqw;
}
.cnt03::before, .cnt02::before, .cnt03::after, .cnt02::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  z-index: -1;
  width: 100%;
  aspect-ratio: 660/147;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}
.cnt03::after, .cnt02::after {
  inset-block-end: 9.0909090909cqw;
}

/* ===== cnt01 ===== */
.texture-photo {
  width: 90.7575757576cqw;
  margin-inline: auto;
}
.texture-photo img {
  width: 100%;
}

/* ===== cnt02 3つのうるおい成分 ===== */
.cnt02 {
  margin-block-start: 30px;
}
.cnt02::before, .cnt02::after {
  background-image: url("/sukoyakasuhada/assets/images/index/cnt03-bg-top.png");
}
.cnt02::before {
  inset-block-start: 16.6666666667cqw;
}
.cnt02 .point-img {
  width: 71.6666666667cqw;
  max-width: 473px;
}
.cnt02 .cnt02--content {
  background-color: var(--color-pink-light);
}
.cnt02 .cnt02-txt {
  margin-block-start: 40px;
  margin-block-end: 50px;
  padding-inline: 6.8181818182cqw;
  text-align: start;
}
.cnt02 .skin-photo {
  width: 91.2121212121cqw;
  margin-inline: auto;
}
.cnt02 .skin-photo img {
  width: 100%;
}
.cnt02 .point-heading {
  --heading-decoration-gap: 26px;
}
.cnt02 .speech-bubble {
  margin-block-start: 40px;
}
.cnt02 .feature-list {
  margin-block-start: 30px;
}

.box-swiper .item_box {
  margin-inline-start: 0;
}

/* ===== cnt02-pro 製品とカート ===== */
.cnt02-pro {
  padding-inline: var(--gutter-inline);
  background-color: var(--color-white);
  border-radius: 5px;
}
@media screen and (width > 750px) {
  .cnt02-pro {
    padding-block-end: 60px;
  }
}
@media screen and (width <= 750px) {
  .cnt02-pro {
    padding-block-end: 30px;
  }
}

/* ===== cnt03 使い方 ===== */
.cnt03::before, .cnt03::after {
  background-image: url("/sukoyakasuhada/assets/images/index/cnt04-bg-top.png");
}
.cnt03::before {
  inset-block-start: 15.1515151515cqw;
}
.cnt03 .cnt03--content {
  padding-block-start: 6.0606060606cqw;
  background-color: var(--color-yellow-light);
}
.cnt03 .point-heading {
  padding-block-start: 30px;
}
.cnt03 p {
  padding-inline: 6.8181818182cqw;
  text-align: start;
}
.cnt03 .howto-photo {
  width: 89.8484848485cqw;
  margin-inline: auto;
}
.cnt03 .howto-photo img {
  width: 100%;
}
.cnt03 .howto-photo--wide {
  width: 90.9090909091cqw;
}

.point-img-link {
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 6.0606060606cqw;
       column-gap: 6.0606060606cqw;
}
.point-img-link > * {
  position: relative;
  width: 18.4848484848cqw;
}
.point-img-link .isDisabled {
  width: 26.8181818182cqw;
}
.point-img-link .off {
  opacity: 0.6;
}
@media (any-hover: hover) {
  .point-img-link a:hover {
    opacity: 0.8;
  }
}
.point-img-link img {
  width: 100%;
}
.point-img-link > :not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -4.5454545455cqw;
  width: 2.4242424242cqw;
  aspect-ratio: 17/19;
  background: url("/sukoyakasuhada/images/common/arrow-next.png") no-repeat center/100% auto;
  translate: -30% 50%;
}

/* ===== cnt04 シリーズ ===== */
.cnt04 {
  text-align: center;
}

.link-pro-footer {
  display: flex;
  align-items: center;
  -moz-column-gap: 20px;
       column-gap: 20px;
}
@media screen and (width > 750px) {
  .link-pro-footer {
    margin-block-end: 20px;
  }
}
@media screen and (width <= 750px) {
  .link-pro-footer {
    flex-direction: column;
  }
}
.link-pro-footer img {
  width: 100%;
}
@media (any-hover: hover) {
  .link-pro-footer a:hover {
    opacity: 0.8;
  }
}
.link-pro-footer .main-pro {
  margin-block-start: 40px;
}
@media screen and (width > 750px) {
  .link-pro-footer .main-pro {
    width: 50%;
    margin-inline-end: -9.0909090909cqw;
  }
}
@media screen and (width <= 750px) {
  .link-pro-footer .main-pro {
    width: 100%;
  }
}
@media screen and (width > 750px) {
  .link-pro-footer .text-con {
    width: 60%;
    margin-block-start: 80px;
  }
}
@media screen and (width <= 750px) {
  .link-pro-footer .text-con {
    width: 100%;
    margin-block-start: 40px;
  }
}
@media screen and (width > 750px) {
  .link-pro-footer .text-con > p {
    margin-block: 20px;
  }
}
@media screen and (width <= 750px) {
  .link-pro-footer .text-con > p {
    margin-block: 7.5757575758cqw;
  }
}

/* ===== mv ===== */
.mv {
  margin-block-end: 30px;
}

/* ===== cnt02 ===== */
.cnt02 .cnt02-txt {
  padding-inline: 7.5757575758cqw;
}

.box-slide .item_box-cont {
  padding-inline-end: 6.0606060606cqw;
}

/* ===== cnt03 ===== */
.cnt03 p {
  padding-inline: 7.5757575758cqw;
}

/* ===== cnt04 ===== */
@media screen and (width > 750px) {
  .main-pro--wide img {
    width: 115%;
    max-width: none;
    margin-inline-start: -4.5454545455cqw;
  }
}
/*# sourceMappingURL=cream.css.map */