@charset "UTF-8";
.night_beauty {
  /* タイムラインの1マス */
  /* 左側のアイコンが配置される縦長のゾーン */
  /* 星型アイコン画像 */
  /* 中間の線丸アイコン */
  /* 右側のテキストコンテンツ */
  /* タイトル */
  /* 大きなタイトル（1晩 / 20日後） */
  /* 小さなタイトル（3日後 / 7日後） */
  /* 説明文テキスト */
}
.night_beauty .outline__effect {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #ffffff;
}
@media screen and (min-width: 768px) {
  .night_beauty .outline__effect {
    margin-top: calc(clamp(0px, 6.588579795vw, 90px) * 1);
    padding-top: calc(clamp(0px, 6.9546120059vw, 95px) * 1);
    padding-bottom: calc(clamp(0px, 7.3206442167vw, 100px) * 1);
    background-image: url(/media/export/cms_2.0/LP/night_beauty/20260601/outline_background.jpg);
  }
}
@media screen and (max-width: 767px) {
  .night_beauty .outline__effect {
    padding-top: calc(clamp(0px, 11.3333333333vw, 11.3333333333vw) * 1);
    padding-bottom: calc(clamp(0px, 11.3333333333vw, 11.3333333333vw) * 1);
    background-image: url(/media/export/cms_2.0/LP/advanced-night-repair/20260601/outline__bg.sp.jpg);
  }
}
.night_beauty .outline__effect .outline__effect__title {
  color: #e8c481;
  text-align: center;
  font-family: "游明朝", "arial important", YuMincho, "ヒラギノ明朝 ProN W3", HiraMinProN-W3, "ＭＳ Ｐ明朝", "MS PMincho", serif, sans-serif, Tahoma;
  font-weight: normal;
}
@media screen and (min-width: 768px) {
  .night_beauty .outline__effect .outline__effect__title {
    font-size: calc(clamp(0px, 3.074670571vw, 42px) * 1);
    line-height: 1.3095238095;
  }
}
@media screen and (max-width: 767px) {
  .night_beauty .outline__effect .outline__effect__title {
    font-size: calc(clamp(0px, 6.1333333333vw, 6.1333333333vw) * 1);
    line-height: 1.6;
    letter-spacing: unset;
  }
}
.night_beauty .skin-timeline {
  position: relative;
}
@media screen and (min-width: 768px) {
  .night_beauty .skin-timeline {
    margin: calc(clamp(0px, 2.196193265vw, 30px) * 1) auto 0;
    padding-left: calc(clamp(0px, 14.8609077599vw, 203px) * 1);
  }
}
@media screen and (max-width: 767px) {
  .night_beauty .skin-timeline {
    margin: calc(clamp(0px, 5.0666666667vw, 5.0666666667vw) * 1) auto 0;
    padding-left: calc(clamp(0px, 6.4vw, 6.4vw) * 1);
  }
}
.night_beauty .skin-timeline::before {
  content: "";
  position: absolute;
  background-color: #e8c481;
  z-index: 1;
  width: 1px;
}
@media screen and (min-width: 768px) {
  .night_beauty .skin-timeline::before {
    left: calc(calc(clamp(0px, 14.8609077599vw, 203px) * 1) + calc(clamp(0px, 1.4275256223vw, 19.5px) * 1));
    top: calc(clamp(0px, 4.0263543192vw, 55px) * 1);
    bottom: calc(clamp(0px, 1.4641288433vw, 20px) * 1);
    height: 53%;
  }
}
@media screen and (max-width: 767px) {
  .night_beauty .skin-timeline::before {
    left: calc(calc(clamp(0px, 6.4vw, 6.4vw) * 1) + calc(clamp(0px, 4vw, 4vw) * 1));
    top: calc(clamp(0px, 9.3333333333vw, 9.3333333333vw) * 1);
    height: 49%;
  }
}
.night_beauty .skin-timeline__item {
  display: flex;
  position: relative;
}
@media screen and (min-width: 768px) {
  .night_beauty .skin-timeline__item {
    padding-bottom: calc(clamp(0px, 2.4524158126vw, 33.5px) * 1);
  }
}
@media screen and (max-width: 767px) {
  .night_beauty .skin-timeline__item {
    padding-bottom: calc(clamp(0px, 6.6666666667vw, 6.6666666667vw) * 1);
  }
}
@media screen and (min-width: 768px) {
  .night_beauty .skin-timeline__item:nth-child(3) {
    padding-bottom: calc(clamp(0px, 1.4641288433vw, 20px) * 1);
  }
}
@media screen and (max-width: 767px) {
  .night_beauty .skin-timeline__item:nth-child(3) {
    padding-bottom: calc(clamp(0px, 5.8666666667vw, 5.8666666667vw) * 1);
  }
}
.night_beauty .skin-timeline__item--last {
  padding-bottom: 0;
}
.night_beauty .skin-timeline__icon-zone {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  margin-right: calc(clamp(0px, 1.0980966325vw, 15px) * 1);
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .night_beauty .skin-timeline__icon-zone {
    width: calc(clamp(0px, 2.9282576867vw, 40px) * 1);
  }
}
@media screen and (max-width: 767px) {
  .night_beauty .skin-timeline__icon-zone {
    width: calc(clamp(0px, 8vw, 8vw) * 1);
  }
}
.night_beauty .skin-timeline__icon-img {
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
}
@media screen and (min-width: 768px) {
  .night_beauty .skin-timeline__icon-img {
    width: calc(clamp(0px, 2.635431918vw, 36px) * 1);
    height: calc(clamp(0px, 2.8916544656vw, 39.5px) * 1);
  }
}
@media screen and (max-width: 767px) {
  .night_beauty .skin-timeline__icon-img {
    width: calc(clamp(0px, 7.3333333333vw, 7.3333333333vw) * 1);
    height: calc(clamp(0px, 8.1333333333vw, 8.1333333333vw) * 1);
  }
}
@media screen and (min-width: 768px) {
  .night_beauty .skin-timeline__icon-img--first {
    margin-top: calc(clamp(0px, 0.5124450952vw, 7px) * 1);
  }
}
@media screen and (max-width: 767px) {
  .night_beauty .skin-timeline__icon-img--first {
    margin-top: calc(clamp(0px, 0.8vw, 0.8vw) * -1);
  }
}
.night_beauty .skin-timeline__icon-circle {
  display: block;
  border: 1px solid #e8c481;
  border-radius: 50%;
  background-color: #0b1326;
}
@media screen and (min-width: 768px) {
  .night_beauty .skin-timeline__icon-circle {
    width: calc(clamp(0px, 0.8052708638vw, 11px) * 1);
    height: calc(clamp(0px, 0.8052708638vw, 11px) * 1);
    margin-top: calc(clamp(0px, 0.7320644217vw, 10px) * 1);
  }
}
@media screen and (max-width: 767px) {
  .night_beauty .skin-timeline__icon-circle {
    width: calc(clamp(0px, 2.1333333333vw, 2.1333333333vw) * 1);
    height: calc(clamp(0px, 2.1333333333vw, 2.1333333333vw) * 1);
    margin-top: calc(clamp(0px, 1.6vw, 1.6vw) * 1);
  }
}
@media screen and (min-width: 768px) {
  .night_beauty .skin-timeline__content {
    padding-top: calc(clamp(0px, 0.1464128843vw, 2px) * 1);
  }
}
.night_beauty .skin-timeline__title {
  font-family: "游明朝", "arial important", YuMincho, "ヒラギノ明朝 ProN W3", HiraMinProN-W3, "ＭＳ Ｐ明朝", "MS PMincho", serif, sans-serif, Tahoma;
  letter-spacing: 0.05em;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .night_beauty .skin-timeline__title {
    font-size: calc(clamp(0px, 1.4641288433vw, 20px) * 1);
    margin: 0 0 calc(clamp(0px, 0.3660322108vw, 5px) * 1) 0;
  }
}
@media screen and (max-width: 767px) {
  .night_beauty .skin-timeline__title {
    font-size: calc(clamp(0px, 4vw, 4vw) * 1);
  }
}
.night_beauty .skin-timeline__title--large {
  color: #e8c481;
}
@media screen and (min-width: 768px) {
  .night_beauty .skin-timeline__title--large {
    font-size: calc(clamp(0px, 2.196193265vw, 30px) * 1);
  }
}
@media screen and (max-width: 767px) {
  .night_beauty .skin-timeline__title--large {
    font-size: calc(clamp(0px, 5.0666666667vw, 5.0666666667vw) * 1);
    line-height: 1.3157894737;
  }
}
.night_beauty .skin-timeline__title--sub {
  color: #e8c481;
}
@media screen and (min-width: 768px) {
  .night_beauty .skin-timeline__title--sub {
    font-size: calc(clamp(0px, 1.4641288433vw, 20px) * 1);
  }
}
.night_beauty .skin-timeline__text {
  font-family: "游明朝", "arial important", YuMincho, "ヒラギノ明朝 ProN W3", HiraMinProN-W3, "ＭＳ Ｐ明朝", "MS PMincho", serif, sans-serif, Tahoma;
  color: #ffffff;
}
@media screen and (min-width: 768px) {
  .night_beauty .skin-timeline__text {
    font-size: calc(clamp(0px, 1.4641288433vw, 20px) * 1);
    line-height: 1.6;
    margin: 0 0 calc(clamp(0px, 0.2196193265vw, 3px) * 1) 0;
    letter-spacing: 0.03em;
  }
}
@media screen and (max-width: 767px) {
  .night_beauty .skin-timeline__text {
    font-size: calc(clamp(0px, 4vw, 4vw) * 1);
    line-height: 1.6;
    margin-top: calc(clamp(0px, 1.0666666667vw, 1.0666666667vw) * 1);
  }
}
@media screen and (min-width: 768px) {
  .night_beauty .skin-timeline__text--large {
    font-size: calc(clamp(0px, 1.9033674963vw, 26px) * 1);
    line-height: 1.4230769231;
  }
}
@media screen and (max-width: 767px) {
  .night_beauty .skin-timeline__text--large {
    font-size: calc(clamp(0px, 4.8vw, 4.8vw) * 1);
    line-height: 1.5;
    margin-top: calc(clamp(0px, 1.6vw, 1.6vw) * 1);
  }
}
.night_beauty .skin-timeline__text:last-child {
  margin-bottom: 0;
}