@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);
  }
}

.lp-hob {
  /* ----------------------------------------
  	series
  ---------------------------------------- */
  /* ----------------------------------------
  	スキンケア ラインナップ
  ---------------------------------------- */
  /* ----------------------------------------
  	スキンケア メイクアップ
  ---------------------------------------- */
}
.lp-hob .series {
  text-align: center;
  /* ----------------------------------------
  	ラインナップ
  ---------------------------------------- */
}
@media screen and (min-width: 1024px) {
  .lp-hob .series {
    width: calc(0.925 * var(--pc-content-width));
    margin-inline: auto;
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .series .title-section {
    padding-top: calc(0.05 * var(--pc-content-width));
    margin-bottom: calc(0.0125 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series .title-section {
    padding-top: calc(0.152 * var(--sp-content-width));
    margin-bottom: calc(0.064 * var(--sp-content-width));
    font-size: calc(0.064 * var(--sp-content-width));
    line-height: 150%;
  }
}
.lp-hob .series .series__head-category {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: 150%;
}
@media screen and (min-width: 1024px) {
  .lp-hob .series .series__head-category {
    margin-bottom: calc(0.0125 * var(--pc-content-width));
    gap: calc(0.00625 * var(--pc-content-width));
    font-size: calc(0.0166666667 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series .series__head-category {
    margin-bottom: calc(0.0266666667 * var(--sp-content-width));
    gap: calc(0.01344 * var(--sp-content-width));
    font-size: calc(0.048 * var(--sp-content-width));
  }
}
.lp-hob .series .series__head-category::before, .lp-hob .series .series__head-category::after {
  content: "";
  background-color: #1A1A1A;
}
@media screen and (min-width: 1024px) {
  .lp-hob .series .series__head-category::before, .lp-hob .series .series__head-category::after {
    width: calc(0.0104166667 * var(--pc-content-width));
    height: calc(0.0005208333 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series .series__head-category::before, .lp-hob .series .series__head-category::after {
    width: calc(0.032 * var(--sp-content-width));
    height: calc(0.0026666667 * var(--sp-content-width));
  }
}
.lp-hob .series .series__list {
  position: relative;
  color: #1a1a1a;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 1024px) {
  .lp-hob .series .series__list {
    display: flex;
    justify-content: center;
    gap: calc(0.0125 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series .series__list {
    width: calc(0.7333333333 * var(--sp-content-width));
    margin-inline: auto;
  }
}
.lp-hob .series .series__item {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1024px) {
  .lp-hob .series .series__item {
    height: calc(0.390625 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series .series__item {
    height: calc(1.2853333333 * var(--sp-content-width));
  }
}
.lp-hob .series .series__category {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  background: #fafafa;
  line-height: 150%;
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .lp-hob .series .series__category {
    width: calc(0.221875 * var(--pc-content-width));
    height: calc(0.234375 * var(--pc-content-width));
    border-radius: calc(0.0166666667 * var(--pc-content-width));
    font-size: calc(0.0145833333 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series .series__category {
    height: calc(0.7733333333 * var(--sp-content-width));
    border-radius: calc(0.064 * var(--sp-content-width));
    font-size: calc(0.048 * var(--sp-content-width));
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .series .series__category-title {
    margin-top: calc(0.0208333333 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series .series__category-title {
    margin-top: calc(0.0666666667 * var(--sp-content-width));
  }
}
.lp-hob .series .series__detail-name {
  line-height: 150%;
}
@media screen and (min-width: 1024px) {
  .lp-hob .series .series__detail-name {
    margin-top: calc(0.0166666667 * var(--pc-content-width));
    font-size: calc(0.0125 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series .series__detail-name {
    margin-top: calc(0.0533333333 * var(--sp-content-width));
    font-size: calc(0.0426666667 * var(--sp-content-width));
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .series .series__detail-name span {
    font-size: calc(0.0109375 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series .series__detail-name span {
    font-size: calc(0.0346666667 * var(--sp-content-width));
  }
}
.lp-hob .series .series__detail-title {
  line-height: 150%;
}
@media screen and (min-width: 1024px) {
  .lp-hob .series .series__detail-title {
    margin-top: calc(0.00625 * var(--pc-content-width));
    font-size: calc(0.009375 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series .series__detail-title {
    margin-top: calc(0.01608 * var(--sp-content-width));
    font-size: calc(0.0346666667 * var(--sp-content-width));
  }
}
.lp-hob .series .series__detail-list {
  text-align: left;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
@media screen and (min-width: 1024px) {
  .lp-hob .series .series__detail-list {
    margin-top: calc(0.00625 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series .series__detail-list {
    margin-top: calc(0.01592 * var(--sp-content-width));
  }
}
.lp-hob .series .series__detail-item {
  line-height: 170%;
  display: flex;
  align-items: flex-start;
}
@media screen and (min-width: 1024px) {
  .lp-hob .series .series__detail-item {
    font-size: calc(0.0083333333 * var(--pc-content-width));
    gap: calc(0.0036458333 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series .series__detail-item {
    font-size: calc(0.0266666667 * var(--sp-content-width));
    gap: calc(0.0093333333 * var(--sp-content-width));
  }
}
.lp-hob .series .series__detail-item::before {
  content: "";
  display: block;
  flex-shrink: 0;
  border: 1px solid #1A1A1A;
}
@media screen and (min-width: 1024px) {
  .lp-hob .series .series__detail-item::before {
    width: calc(0.0083333333 * var(--pc-content-width));
    height: calc(0.0083333333 * var(--pc-content-width));
    border-width: calc(0.0005208333 * var(--pc-content-width));
    margin-top: calc((1.7em - calc(0.0083333333 * var(--pc-content-width))) / 2);
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series .series__detail-item::before {
    width: calc(0.0266666667 * var(--sp-content-width));
    height: calc(0.0266666667 * var(--sp-content-width));
    border-width: calc(0.0026666667 * var(--sp-content-width));
    margin-top: calc((1.53em - calc(0.0266666667 * var(--sp-content-width))) / 2);
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .series .series__detail-item + .series__detail-item {
    margin-top: calc(0.0041666667 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series .series__detail-item + .series__detail-item {
    margin-top: calc(0.0148266667 * var(--sp-content-width));
  }
}
.lp-hob .series .series__detail-link {
  margin-top: auto;
  text-decoration: underline;
  display: inline-block;
}
@media screen and (min-width: 1024px) {
  .lp-hob .series .series__detail-link {
    margin-top: calc(0.0166666667 * var(--pc-content-width));
    font-size: calc(0.0083333333 * var(--pc-content-width));
    line-height: calc(0.0125 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series .series__detail-link {
    margin-top: calc(0.0533333333 * var(--sp-content-width));
    font-size: calc(0.0293333333 * var(--sp-content-width));
    line-height: calc(0.04 * var(--sp-content-width));
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .series--skincare .series__category-image.series__category-image--01 {
    width: calc(0.0380208333 * var(--pc-content-width));
    margin-bottom: calc(0.0046875 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series--skincare .series__category-image.series__category-image--01 {
    width: calc(0.12592 * var(--sp-content-width));
    margin-bottom: calc(0.0143466667 * var(--sp-content-width));
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .series--skincare .series__category-image.series__category-image--02 {
    width: calc(0.0427552083 * var(--pc-content-width));
    margin-bottom: calc(0.0130208333 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series--skincare .series__category-image.series__category-image--02 {
    width: calc(0.1374666667 * var(--sp-content-width));
    margin-bottom: calc(0.0426666667 * var(--sp-content-width));
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .series--skincare .series__category-image.series__category-image--03 {
    width: calc(0.1161458333 * var(--pc-content-width));
    margin-bottom: calc(0.0072916667 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series--skincare .series__category-image.series__category-image--03 {
    width: calc(0.3632533333 * var(--sp-content-width));
    margin-bottom: calc(0.0213333333 * var(--sp-content-width));
  }
}
@media screen and (min-width: 1024px) {
  .lp-hob .series--makeup .series__head {
    margin-top: calc(0.05 * var(--pc-content-width));
  }
}
@media screen and (max-width: 1023px) {
  .lp-hob .series--makeup .series__head {
    margin-top: calc(0.16 * var(--sp-content-width));
  }
}