@charset "UTF-8";
:root, body {
  --pc-content-width: min(100vw, 1920px);
  --sp-content-width: 100vw;
}

@media screen and (min-width: 1280px) {
  .spp__container {
    --pc-content-width: min(calc(100vw - 144px), 1776px);
  }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .spp__container {
    --pc-content-width: calc(100vw - 128px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .spp__container {
    --sp-content-width: calc(100vw - 88px);
  }
}
@media screen and (min-width: 540px) and (max-width: 767px) {
  .spp__container {
    --sp-content-width: calc(100vw - 72px);
  }
}
@media screen and (min-width: 480px) and (max-width: 539px) {
  .spp__container {
    --sp-content-width: calc(100vw - 56px);
  }
}
@media screen and (max-width: 479px) {
  .spp__container {
    --sp-content-width: calc(100vw - 40px);
  }
}

@media screen and (min-width: 1024px) {
  #serum {
    padding-top: calc(0.05 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  #serum {
    padding-top: calc(0.16 * var(--sp-content-width));
  }
}

.lp-hob {
  /* ----------------------------------------
  	serum
  ---------------------------------------- */
}
.lp-hob .serum {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center top;
  /* ----------------------------------------
  	複数の整肌成分が、くすみ*2印象に多角的にアプローチ。
  ---------------------------------------- */
}
@media screen and (min-width: 1024px) {
  .lp-hob .serum {
    padding-inline: calc(0.11875 * var(--pc-content-width));
    background-image: url("/media/export/cms2.0/lp/house-of-brightening/260731/img/serum__bg.png");
    padding-bottom: calc(0.05 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum {
    height: calc(4.7066666667 * var(--sp-content-width));
    padding-top: calc(1.08 * var(--sp-content-width));
    background-image: url("/media/export/cms2.0/lp/house-of-brightening/260731/img/serum__bg.sp.png");
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .serum .serum__head {
    height: calc(0.421875 * var(--pc-content-width));
    padding-top: calc(0.1401041667 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__head {
    padding-inline: calc(0.0533333333 * var(--sp-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .title-block {
    font-size: calc(0.064 * var(--sp-content-width));
    line-height: 150%;
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .serum .serum__lead {
    margin-block: calc(0.00625 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__lead {
    margin-block: calc(0.032 * var(--sp-content-width));
  }
}
.lp-hob .serum .serum__sub {
  line-height: 170%;
}
@media screen and (min-width: 1024px) {
  .lp-hob .serum .serum__sub {
    margin-bottom: calc(0.0125 * var(--pc-content-width));
    font-size: calc(0.0083333333 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__sub {
    width: 102%;
    margin-bottom: calc(0.064 * var(--sp-content-width));
    font-size: calc(0.0346666667 * var(--sp-content-width));
    letter-spacing: -2%;
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .serum .serum__sub span {
    font-size: calc(0.0067708333 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__sub span {
    font-size: calc(0.0266666667 * var(--sp-content-width));
  }
}
.lp-hob .serum .serum__approach {
  margin-inline: auto;
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__approach {
    margin-top: calc(0.16 * var(--sp-content-width));
  }
}
.lp-hob .serum .serum__approach .title-sub {
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__approach .title-sub {
    font-size: calc(0.0533333333 * var(--sp-content-width));
    line-height: 150%;
    letter-spacing: -2%;
  }
}
.lp-hob .serum .serum__list {
  position: relative;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center top;
}
@media screen and (min-width: 1024px) {
  .lp-hob .serum .serum__list {
    width: calc(0.6973958333 * var(--pc-content-width));
    height: calc(0.35625 * var(--pc-content-width));
    margin-top: calc(-0.0109375 * var(--pc-content-width));
    margin-left: calc(0.0208333333 * var(--pc-content-width));
    background-image: url("/media/export/cms2.0/lp/house-of-brightening/260731/img/serum__approach.png");
    background-size: calc(0.353375 * var(--pc-content-width));
    background-position: left calc(0.1774947917 * var(--pc-content-width)) bottom calc(0.00625 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__list {
    height: calc(2.6746666667 * var(--sp-content-width));
    padding-inline: calc(0.0533333333 * var(--sp-content-width));
    background-image: url("/media/export/cms2.0/lp/house-of-brightening/260731/img/serum__approach.sp.png");
    background-position: left 0 top 0;
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .serum .serum__item {
    position: absolute;
    width: calc(0.2135416667 * var(--pc-content-width));
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .serum .serum__item--01 {
    top: calc(0.0458333333 * var(--pc-content-width));
    left: 0;
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__item--01 {
    width: calc(0.4826666667 * var(--sp-content-width));
    padding-top: calc(0.2 * var(--sp-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__item--01 .serum__item-text {
    width: calc(0.3546666667 * var(--sp-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__item--01 .serum__item-note {
    width: calc(0.4213333333 * var(--sp-content-width));
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .serum .serum__item--02 {
    top: calc(0.165625 * var(--pc-content-width));
    left: calc(0.0713541667 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__item--02 {
    width: calc(0.6133333333 * var(--sp-content-width));
    margin-top: calc(0.072 * var(--sp-content-width));
    margin-left: calc(0.08 * var(--sp-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__item--02 .serum__item-text {
    width: calc(0.5226666667 * var(--sp-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__item--02 .serum__item-note {
    width: calc(0.4213333333 * var(--sp-content-width));
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .serum .serum__item--03 {
    top: calc(0.2755208333 * var(--pc-content-width));
    left: calc(0.0463541667 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__item--03 {
    width: calc(0.6133333333 * var(--sp-content-width));
    margin-top: calc(0.0853333333 * var(--sp-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__item--03 .serum__item-text {
    width: calc(0.584 * var(--sp-content-width));
  }
}
.lp-hob .serum .serum__item--04 {
  text-align: right;
}
@media screen and (min-width: 1024px) {
  .lp-hob .serum .serum__item--04 {
    width: calc(0.1817708333 * var(--pc-content-width));
    top: calc(0.1005208333 * var(--pc-content-width));
    left: calc(0.5067708333 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__item--04 {
    width: calc(0.5386666667 * var(--sp-content-width));
    margin-top: calc(0.1626666667 * var(--sp-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__item--04 .serum__item-text {
    width: calc(0.2933333333 * var(--sp-content-width));
  }
}
.lp-hob .serum .serum__item--05 {
  text-align: right;
}
@media screen and (min-width: 1024px) {
  .lp-hob .serum .serum__item--05 {
    top: calc(0.2515625 * var(--pc-content-width));
    left: calc(0.4776041667 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__item--05 {
    width: calc(0.5386666667 * var(--sp-content-width));
    margin-top: calc(0.264 * var(--sp-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__item--05 .serum__item-text {
    width: calc(0.432 * var(--sp-content-width));
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .serum .serum__item--04,
  .lp-hob .serum .serum__item--05 {
    margin-left: calc(0.00625 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__item--04,
  .lp-hob .serum .serum__item--05 {
    margin-right: 0;
    margin-left: auto;
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .serum .serum__item--04 .serum__item-title,
  .lp-hob .serum .serum__item--05 .serum__item-title {
    margin-right: calc(0.00625 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__item--04 .serum__item-text,
  .lp-hob .serum .serum__item--05 .serum__item-text {
    margin-right: 0;
    margin-left: auto;
  }
}
.lp-hob .serum .serum__item-title {
  line-height: 150%;
  border-bottom: 1px solid #1A1A1A;
}
@media screen and (min-width: 1024px) {
  .lp-hob .serum .serum__item-title {
    margin-bottom: calc(0.00625 * var(--pc-content-width));
    padding-bottom: calc(0.0052083333 * var(--pc-content-width));
    border-width: calc(0.0005208333 * var(--pc-content-width));
    font-size: calc(0.0125 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__item-title {
    font-size: calc(0.0426666667 * var(--sp-content-width));
    padding-bottom: calc(0.0133333333 * var(--sp-content-width));
    margin-bottom: calc(0.0213333333 * var(--sp-content-width));
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .serum .serum__item-title span {
    font-size: calc(0.0088541667 * var(--pc-content-width));
    padding-right: calc(0.0036458333 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__item-title span {
    font-size: calc(0.032 * var(--sp-content-width));
    padding-right: calc(0.008 * var(--sp-content-width));
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .serum .serum__item-text {
    line-height: 170%;
    font-size: calc(0.009375 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__item-text {
    line-height: 150%;
    font-size: calc(0.0306666667 * var(--sp-content-width));
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .serum .serum__item-note {
    line-height: 170%;
    margin-top: calc(0.0041666667 * var(--pc-content-width));
    font-size: calc(0.0078125 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .serum .serum__item-note {
    line-height: 150%;
    margin-top: calc(0.0213333333 * var(--sp-content-width));
    font-size: calc(0.0266666667 * var(--sp-content-width));
  }
}