@charset "UTF-8";
/* SPの基準を375pxデザインに変更 */
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum {
    margin-top: calc(clamp(0px, 6.25vw, 120px) * 1);
    background: url("/media/export/cms2.0/lp/early-summer-2026/260529/img/ms-serum__bg.png") no-repeat top calc(clamp(0px, 1.5625vw, 30px) * 1) center/contain;
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum {
    margin-top: calc(clamp(0px, 16vw, 163.68px) * 1);
    background: url("/media/export/cms2.0/lp/early-summer-2026/260529/img/ms-serum__bg.sp.png") no-repeat top calc(clamp(0px, 16vw, 163.68px) * 1) center/contain;
  }
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__title .medium {
    font-size: calc(clamp(0px, 2.2916666667vw, 44px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__title .medium {
    font-size: calc(clamp(0px, 3.7333333333vw, 38.192px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__title small {
    margin-top: calc(clamp(0px, 0.8vw, 8.184px) * 1);
  }
}
.early-summer .ms-serum .ms-serum__logo {
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__logo {
    gap: calc(clamp(0px, 2.9166666667vw, 56px) * 1);
    margin-top: calc(clamp(0px, 2.9166666667vw, 56px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__logo {
    gap: calc(clamp(0px, 4.2666666667vw, 43.648px) * 1);
    margin-top: calc(clamp(0px, 9.3333333333vw, 95.48px) * 1);
  }
}
.early-summer .ms-serum .ms-serum__logo::before, .early-summer .ms-serum .ms-serum__logo::after {
  content: "";
  display: block;
  background: url("/media/export/cms2.0/lp/early-summer-2026/260529/img/ms-serum__logo__bg.png") no-repeat center/cover;
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__logo::before, .early-summer .ms-serum .ms-serum__logo::after {
    height: calc(clamp(0px, 10.3125vw, 198px) * 1);
    width: calc(clamp(0px, 5.4166666667vw, 104px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__logo::before, .early-summer .ms-serum .ms-serum__logo::after {
    height: calc(clamp(0px, 22.6666666667vw, 231.88px) * 1);
    width: calc(clamp(0px, 12vw, 122.76px) * 1);
  }
}
.early-summer .ms-serum .ms-serum__logo::after {
  transform: rotateY(180deg);
}
.early-summer .ms-serum .ms-serum__logo .ms-serum__logo__en {
  font-family: "CliniqueHelveticaNeueRegular", "Helvetica" !important;
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__logo .ms-serum__logo__en {
    font-size: calc(clamp(0px, 1.25vw, 24px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__logo .ms-serum__logo__en {
    font-size: calc(clamp(0px, 2.9333333333vw, 30.008px) * 1);
  }
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__logo .ms-serum__logo__title {
    font-size: calc(clamp(0px, 2.5vw, 48px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__logo .ms-serum__logo__title {
    margin-top: calc(clamp(0px, 0.5333333333vw, 5.456px) * 1);
    font-size: calc(clamp(0px, 5.6vw, 57.288px) * 1);
  }
}
.early-summer .ms-serum .ms-serum__logo .ms-serum__text {
  line-height: 1.6;
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__logo .ms-serum__text {
    margin-top: calc(clamp(0px, 0.5208333333vw, 10px) * 1);
    font-size: calc(clamp(0px, 1.09375vw, 21px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__logo .ms-serum__text {
    margin-top: calc(clamp(0px, 0.8vw, 8.184px) * 1);
    font-size: calc(clamp(0px, 3.2vw, 32.736px) * 1);
  }
}
.early-summer .ms-serum .ms-serum__lead {
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__lead {
    line-height: 1.6;
    margin-top: calc(clamp(0px, 1.25vw, 24px) * 1);
    font-size: calc(clamp(0px, 1.09375vw, 21px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__lead {
    line-height: 1.7;
    margin-top: calc(clamp(0px, 4.2666666667vw, 43.648px) * 1);
    font-size: calc(clamp(0px, 3.4666666667vw, 35.464px) * 1);
  }
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__feature {
    width: calc(clamp(0px, 32.1354166667vw, 617px) * 1);
    margin-top: calc(clamp(0px, 4.6875vw, 90px) * 1);
    margin-inline: auto calc(clamp(0px, 17.96875vw, 345px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__feature {
    margin-top: calc(clamp(0px, 116.8vw, 1194.864px) * 1);
    padding-inline: calc(clamp(0px, 5.3333333333vw, 54.56px) * 1);
  }
}
.early-summer .ms-serum .ms-serum__feature .ms-serum__feature__title {
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__feature .ms-serum__feature__title {
    font-size: calc(clamp(0px, 1.8229166667vw, 35px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__feature .ms-serum__feature__title {
    font-size: calc(clamp(0px, 4.5333333333vw, 46.376px) * 1);
  }
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__feature .ms-serum__feature__list {
    margin-top: calc(clamp(0px, 1.25vw, 24px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__feature .ms-serum__feature__list {
    margin-top: calc(clamp(0px, 4.2666666667vw, 43.648px) * 1);
  }
}
.early-summer .ms-serum .ms-serum__feature .ms-serum__feature__item {
  display: flex;
  align-items: center;
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__feature .ms-serum__feature__item {
    font-size: calc(clamp(0px, 1.09375vw, 21px) * 1);
    gap: calc(clamp(0px, 0.4166666667vw, 8px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__feature .ms-serum__feature__item {
    font-size: calc(clamp(0px, 3.4666666667vw, 35.464px) * 1);
    gap: calc(clamp(0px, 1.6vw, 16.368px) * 1);
  }
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__feature .ms-serum__feature__item:not(:first-child) {
    margin-top: calc(clamp(0px, 0.4166666667vw, 8px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__feature .ms-serum__feature__item:not(:first-child) {
    margin-top: calc(clamp(0px, 1.6vw, 16.368px) * 1);
  }
}
.early-summer .ms-serum .ms-serum__feature .ms-serum__feature__item::before {
  content: "";
  display: block;
  border: 1px solid #1A1A1A;
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__feature .ms-serum__feature__item::before {
    width: calc(clamp(0px, 0.8333333333vw, 16px) * 1);
    height: calc(clamp(0px, 0.8333333333vw, 16px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__feature .ms-serum__feature__item::before {
    width: calc(clamp(0px, 3.7333333333vw, 38.192px) * 1);
    height: calc(clamp(0px, 3.7333333333vw, 38.192px) * 1);
  }
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__feature__button {
    margin-top: calc(clamp(0px, 1.6666666667vw, 32px) * 1);
  }
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__comment {
    margin-top: calc(clamp(0px, 7.03125vw, 135px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__comment {
    margin-top: calc(clamp(0px, 12vw, 122.76px) * 1);
    padding-inline: calc(clamp(0px, 5.3333333333vw, 54.56px) * 1);
  }
}
.early-summer .ms-serum .ms-serum__comment__item {
  position: relative;
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__comment__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(clamp(0px, 2.34375vw, 45px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__comment__item01 .ms-serum__comment__image {
    left: 0;
  }
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__comment__item01 .ms-serum__comment__text {
    filter: drop-shadow(0px calc(clamp(0px, 0.15625vw, 3px) * 1) calc(clamp(0px, 0.4166666667vw, 8px) * 1) rgba(255, 142, 159, 0.55));
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__comment__item01 .ms-serum__comment__text {
    margin-left: auto;
    filter: drop-shadow(0px calc(clamp(0px, 0.8vw, 8.184px) * 1) calc(clamp(0px, 1.3333333333vw, 13.64px) * 1) rgba(255, 142, 159, 0.55));
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__comment__item01 .ms-serum__comment__text span {
    display: inline-block;
    margin-left: calc(clamp(0px, 13.3333333333vw, 136.4px) * 1);
  }
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__comment__item01 .ms-serum__comment__text::before {
    margin-left: calc(clamp(0px, 1.0416666667vw, 20px) * -1);
    left: 0;
    transform: translateY(-50%);
  }
}
.early-summer .ms-serum .ms-serum__comment__item02 {
  flex-direction: row-reverse;
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__comment__item02 {
    margin-top: calc(clamp(0px, 2.9166666667vw, 56px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__comment__item02 {
    margin-top: calc(clamp(0px, 12vw, 122.76px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__comment__item02 .ms-serum__comment__image {
    right: 0;
  }
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__comment__item02 .ms-serum__comment__text {
    filter: drop-shadow(0px calc(clamp(0px, 0.15625vw, 3px) * 1) calc(clamp(0px, 0.4166666667vw, 8px) * 1) rgba(222, 127, 182, 0.55));
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__comment__item02 .ms-serum__comment__text {
    filter: drop-shadow(0px calc(clamp(0px, 0.8vw, 8.184px) * 1) calc(clamp(0px, 1.3333333333vw, 13.64px) * 1) rgba(222, 127, 182, 0.55));
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__comment__item02 .ms-serum__comment__text span {
    display: inline-block;
  }
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__comment__item02 .ms-serum__comment__text::before {
    margin-right: calc(clamp(0px, 1.0416666667vw, 20px) * -1);
    right: 0;
    transform: translateY(-50%) rotateY(180deg);
  }
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__comment__image {
    width: calc(clamp(0px, 10.9375vw, 210px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__comment__image {
    position: absolute;
    top: calc(clamp(0px, 2.1333333333vw, 21.824px) * -1);
    z-index: 1;
    width: calc(clamp(0px, 22.4vw, 229.152px) * 1);
  }
}
.early-summer .ms-serum .ms-serum__comment__text {
  position: relative;
  background: #fff;
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__comment__text {
    padding: calc(clamp(0px, 2.34375vw, 45px) * 1) calc(clamp(0px, 1.9791666667vw, 38px) * 1);
    font-size: calc(clamp(0px, 1.09375vw, 21px) * 1);
    line-height: 1.6;
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__comment__text {
    width: calc(clamp(0px, 84vw, 859.32px) * 1);
    padding: calc(clamp(0px, 3.7333333333vw, 38.192px) * 1) calc(clamp(0px, 5.3333333333vw, 54.56px) * 1);
    font-size: calc(clamp(0px, 3.2vw, 32.736px) * 1);
    line-height: 1.66;
  }
}
.early-summer .ms-serum .ms-serum__comment__text::before {
  content: "";
  display: block;
  position: absolute;
}
@media screen and (min-width: 1024px) {
  .early-summer .ms-serum .ms-serum__comment__text::before {
    z-index: -1;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: calc(clamp(0px, 1.0416666667vw, 20px) * 1) solid transparent;
    border-bottom: calc(clamp(0px, 1.0416666667vw, 20px) * 1) solid transparent;
    border-right: calc(clamp(0px, 1.875vw, 36px) * 1) solid #fff;
    border-left: 0;
    top: 50%;
  }
}
@media screen and (max-width: 1023px) {
  .early-summer .ms-serum .ms-serum__comment__text::before {
    width: 0;
    height: 0;
    border-style: solid;
    border-right: calc(clamp(0px, 2.9333333333vw, 30.008px) * 1) solid transparent;
    border-left: calc(clamp(0px, 2.9333333333vw, 30.008px) * 1) solid transparent;
    border-bottom: calc(clamp(0px, 5.6vw, 57.288px) * 1) solid #fff;
    border-top: 0;
    top: calc(clamp(0px, 5.3333333333vw, 54.56px) * -1);
    transform: translateX(-50%);
    left: 50%;
  }
}