@charset "UTF-8";
/* =====================================================
   MC260807handserum / HAND SERUM LP
   単位・命名などの規約は coding-guidelines.md を参照
   ===================================================== */
#Contents .main-area {
  padding-top: 0;
}
#Contents .main-area.lp {
  margin-bottom: 0;
}
.header[data-header-theme="light"].c-active,
.header[data-header-theme="dark"] {
  background: unset;
}

.main-area * {
  color: var(--black);
}

/* ▼ -----------可変設定---------- ▼ */
.lp_variable {
  /*デザインの値*/
  --pc-width: 1400;/*PCデザイン幅*/
  --sp-width: 750;/*SPデザイン幅*/
  --pc-artboard-width: 406.2528;/*PC時の中央コンテンツ列の幅*/
  --sp-artboard-width: 750;/*SP時の中央コンテンツ列の幅*/
 /*可変率の計算式*/
  --formula: calc(var(--variable) * var(--ratio));/*SP,PC共通箇所の可変割合の計算式*/
  --formula_pc: calc(var(--variable) * 1);/*PCデザインの可変割合の計算式*/
 }

/* PC画面幅 1400px以上 固定 */
@media (min-width: 1401px) {
  .lp_variable {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
  --variable: 1px;
  }
 }

 /* PC画面幅 768～1400px 可変 */
 @media (min-width: 768px) and (max-width: 1400px) {
  .lp_variable {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
  --variable: calc(100vw / var(--pc-width));
  }
 }

 /* SP画面幅 767px以下 可変 */
 @media (max-width: 767px) {
  .lp_variable {
  --ratio: 1;
  --variable: calc(100vw / var(--sp-width));
  }
 }
/* ▲ -----------可変設定---------- ▲ */

/* ▼ -----------カスタムプロパティ---------- ▼ */
#MC260807handserum {
  --color-blue: #126081;
  --color-gold: #c1b493;
  --color-gray: #3c3c3c;
  --color-bg-pale: #e6eef2;
  --color-bg: #fff;
  --font-mincho: "dnp-shuei-mincho-pr6n", sans-serif;
  --font-en: "matrix-ii", serif;
  --font-en-sans: "akzidenz-grotesk-next", sans-serif;
  --ease-base: cubic-bezier(0.51, 0.21, 0.41, 1);
  --duration-base: 2s;
  --lp-header-offset: 0px; /* サイト共通ヘッダー高（追従サブの逃げ） */
}
/* ▲ -----------カスタムプロパティ---------- ▲ */

/* font-family: "matrix-ii", serif;
book:300
"dnp-shuei-mincho-pr6n", sans-serif */

/* ▼ -----------LPスコープ リセット---------- ▼ */
#MC260807handserum * {
  box-sizing: border-box;
  font: inherit;
  letter-spacing: inherit;
  font-feature-settings: "palt";
}

#MC260807handserum img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transition: unset;
}

#MC260807handserum picture {
  display: block;
}

#MC260807handserum button {
  padding: 0;
  cursor: pointer;
  appearance: none;
  color: inherit;
  background-color: unset;
  border: unset;
}

#MC260807handserum a {
  color: inherit;
  text-decoration: none;
}

#MC260807handserum ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 行送りの余白を打ち消してデザインの文字ボックス基準に揃える
   （lh 単位が使えない環境ではフォールバックの 0 が適用される） */
#MC260807handserum :is(h1, h2, h3, h4, p, li) {
  margin-block: 0;
  margin-block: calc((1em - 1lh) / 2);
  letter-spacing: 0.1em;
}

/* 見出しの負マージンがセクション外へ相殺されるのを防ぐ */
#MC260807handserum .lp-layout__primary > section {
  display: flow-root;
}

/* 表示制御ユーティリティ */
@media (min-width: 768px) {
  #MC260807handserum .is-hidden--desktop { display: none !important; }
}

@media (max-width: 767px) {
  #MC260807handserum .is-hidden--mobile { display: none !important; }
}
/* ▲ -----------LPスコープ リセット---------- ▲ */

/* ▼ -----------ベーススタイル---------- ▼ */
#MC260807handserum {
  color: var(--color-blue);
  font-family: var(--font-mincho);
  line-height: 1.75;
  letter-spacing: 0.1em;
  font-weight: 500;
  overflow: clip;
  background-color: var(--color-bg);

  padding-top: min(50px, calc(50 * (100vw / 1440)));
}

@media (max-width: 767px) {
  #MC260807handserum {
      padding-top: calc(50 * (100vw / 375));
  }
}
/* ▲ -----------ベーススタイル---------- ▲ */

/* ▼ -----------出現アニメーション---------- ▼ */
/* その場でふんわりフェードイン */
#MC260807handserum .lp-fade {
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-base);
}

#MC260807handserum .lp-fade.is-active {
  opacity: 1;
}

/* マスクの内側だけズームアウト（MV） */
#MC260807handserum .lp-mv__visual-inner {
  opacity: 0;
  transform: scale(1.1);
  transform-origin: 49.4% 69.4%;
  transition: transform var(--duration-base) cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity var(--duration-base) cubic-bezier(0.22, 0.61, 0.36, 1);
}

#MC260807handserum .lp-mv__visual.is-active .lp-mv__visual-inner {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  #MC260807handserum .lp-fade,
  #MC260807handserum .lp-mv__visual-inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ▲ -----------出現アニメーション---------- ▲ */

/* ▼ -----------レイアウト（3カラム）---------- ▼ */
#MC260807handserum .lp-inner {
  width: calc(var(--sp-artboard-width) * var(--formula));
  margin-inline: auto;
}
@media (min-width: 768px) {
  #MC260807handserum .lp-inner {
    width: calc(var(--pc-artboard-width) * var(--formula_pc));
  }
}

@media (min-width: 768px) {
  #MC260807handserum .lp-layout { display: grid; align-items: start; }
  #MC260807handserum .lp-layout--col-2 { grid-template-columns: 1fr 1fr; }
  #MC260807handserum .lp-layout--col-3 {
    grid-template-columns: 1fr calc(406.2528 * var(--formula_pc)) 1fr;
  }
}

#MC260807handserum .lp-layout__primary {
  overflow-x: clip;
  background-image: linear-gradient(180deg,
    var(--color-bg-pale) 0%,
    var(--color-bg-pale) 10.23%,
    var(--color-bg) 17.67%,
    var(--color-bg) 40.07%,
    var(--color-bg-pale) 47.51%,
    var(--color-bg-pale) 82.43%,
    var(--color-bg) 89.87%,
    var(--color-bg) 100%);
}

#MC260807handserum .lp-layout__sub { display: none; }
@media (min-width: 768px) {
  #MC260807handserum .lp-layout__sub {
    display: grid;
    place-items: center;
    position: sticky;
    top: var(--lp-header-offset, 0px);
    height: calc(100dvh - var(--lp-header-offset, 0px));
    overflow: hidden;
  }
}
/* ▲ -----------レイアウト（3カラム）---------- ▲ */

/* =====================================================
   共通パーツ
   ===================================================== */

/* 見出し（和文） */
#MC260807handserum .lp-heading {
  font-size: calc(40 * var(--formula));
  line-height: 2;

  text-align: center;
}

/* 見出し（欧文 Matrix II OT） */
#MC260807handserum .lp-heading-en {
  font-family: var(--font-en);
  font-size: calc(50 * var(--formula));
  line-height: 1;
  letter-spacing: 0.025em;
  text-align: center;
  font-weight: 300;
}

#MC260807handserum .lp-heading-en__star {
  display: inline-block;
  width: calc(21 * var(--formula));
  height: calc(20 * var(--formula));
  margin-inline: calc(24 * var(--formula));
  vertical-align: calc(6 * var(--formula));
  background: url(../img/star.png) no-repeat center / contain;
}


#MC260807handserum .lp-lineup .lp-heading-en__star{
  margin-inline: calc(46 * var(--formula));
}

/* 本文 */
#MC260807handserum .lp-text {
  font-size: calc(24 * var(--formula));
  line-height: 2;
  text-align: center;
}

/* 3つ星の区切り */
#MC260807handserum .lp-stars {
  width: calc(118.58 * var(--formula));
  margin-inline: auto;
}

/* 商品クレジット */
#MC260807handserum .lp-credit {
  display: block;
  font-size: calc(24 * var(--formula));
  line-height: 2;
  text-align: center;
  margin-block: 0;
  margin-block: calc((1em - 1lh) / 2);
}

/* アーチ枠（商品） */
#MC260807handserum .lp-arch {
  position: relative;
  width: calc(600 * var(--formula));
  margin-inline: auto;
}

#MC260807handserum .lp-arch__frame {
  width: 100%;
}

#MC260807handserum .lp-arch__item {
  position: absolute;
  left: calc(155 * var(--formula));
  top: calc(220 * var(--formula));
  width: calc(290 * var(--formula));
}

#MC260807handserum .lp-arch__credit {
  position: absolute;
  left: calc(75 * var(--formula));
  top: calc(910 * var(--formula));
  width: calc(450 * var(--formula));
}

/* アコーディオン */
#MC260807handserum .lp-accordion__body {
  overflow: hidden;
  transition: max-height 0.8s ease, opacity 1s ease;
}

#MC260807handserum .lp-accordion__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--formula));
  margin-inline: auto;
  font-family: var(--font-mincho);
  color: var(--color-blue);
  padding-bottom: calc(13 * var(--formula));
}

#MC260807handserum .lp-habit__body .lp-accordion__btn::after{
  content: "";
  position: absolute;
  bottom: 0;
  width: calc(141 * var(--formula));
  height: 1px;
  background: var(--color-blue);
}

#MC260807handserum .lp-accordion__label {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: calc(28 * var(--formula));
  line-height: 1;
  letter-spacing: 0.025em;
}

#MC260807handserum .lp-accordion__label--close {
  display: none;
}

#MC260807handserum .lp-accordion.is-open .lp-accordion__label--open {
  display: none;
}

#MC260807handserum .lp-accordion.is-open .lp-accordion__label--close {
  display: inline;
}

#MC260807handserum .lp-accordion__icon {
  position: relative;
  display: block;
  width: calc(20 * var(--formula));
  height: calc(20 * var(--formula));
}

#MC260807handserum .lp-accordion__icon::before,
#MC260807handserum .lp-accordion__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  background-color: currentColor;
  transition: opacity 0.4s ease;
}

#MC260807handserum .lp-accordion__icon::before {
  width: 100%;
  height: calc(2 * var(--formula));
}

#MC260807handserum .lp-accordion__icon::after {
  width: calc(2 * var(--formula));
  height: 100%;
}

#MC260807handserum .lp-accordion__btn[aria-expanded="true"] .lp-accordion__icon::after {
  opacity: 0;
}

/* =====================================================
   MV
   ===================================================== */
#MC260807handserum .lp-mv {
  position: relative;
  height: calc(1100 * var(--formula));
  overflow: hidden;
}

#MC260807handserum .lp-mv__visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* デザイン同様、同じ写真を上下に連ねて枠を満たす */
#MC260807handserum .lp-mv__visual-inner {
  position: absolute;
  left: calc(-52.04 * var(--formula));
  top: calc(-1049.14 * var(--formula));
  width: calc(864.3 * var(--formula));
}

#MC260807handserum .lp-mv__visual-inner img {
  width: 100%;
  height: calc(1152.29 * var(--formula));
}

/* 上側は反転して繋ぎ目を消す */
#MC260807handserum .lp-mv__visual-inner img:first-child {
  transform: scaleY(-1);
}

/* サブピクセルの隙間を塞ぐ */
#MC260807handserum .lp-mv__visual-inner img + img {
  margin-top: -1px;
}

#MC260807handserum .lp-mv__frame {
  position: absolute;
  left: calc(-118.74 * var(--formula));
  top: calc(13.25 * var(--formula));
  width: calc(987.48 * var(--formula));
  pointer-events: none;
}

#MC260807handserum .lp-mv__title {
  position: absolute;
  left: calc(176.48 * var(--formula));
  top: calc(175 * var(--formula));
  width: calc(397.04 * var(--formula));
  pointer-events: none;
}

#MC260807handserum .lp-mv__lead {
  position: absolute;
  left: calc(207.21 * var(--formula));
  top: calc(256.04 * var(--formula));
  width: calc(335.57 * var(--formula));
  pointer-events: none;
}

/* =====================================================
   リード
   ===================================================== */
#MC260807handserum .lp-lead {
  padding-top: calc(80 * var(--formula));
  padding-bottom: calc(150 * var(--formula));
}

#MC260807handserum .lp-lead__catch {
  font-size: calc(34 * var(--formula));
  line-height: 2;
  letter-spacing: 0.1em;
  text-align: center;
}

#MC260807handserum .lp-lead__logo {
  margin-top: calc(100 * var(--formula));
}

#MC260807handserum .lp-lead__logo-title {
  width: calc(294.11 * var(--formula));
  margin-inline: auto;
}

#MC260807handserum .lp-lead__logo-emblem {
  width: calc(211.57 * var(--formula));
  margin: calc(40 * var(--formula)) auto 0;
}

#MC260807handserum .lp-lead__logo-lead {
  width: calc(205.43 * var(--formula));
  margin: calc(40 * var(--formula)) auto 0;
}

#MC260807handserum .lp-lead .lp-stars {
  margin-top: calc(150 * var(--formula));
}

/* =====================================================
   ハンドクリームの前に、美容液という新習慣
   ===================================================== */
#MC260807handserum .lp-habit__desc {
  margin-top: calc(45 * var(--formula));
}

#MC260807handserum .lp-habit .lp-arch {
  margin-top: calc(100 * var(--formula));
}

/* フリー系アイコン */
#MC260807handserum .lp-free {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: calc(15 * var(--formula));
  row-gap: calc(38 * var(--formula));
  width: calc(645 * var(--formula));
  margin: calc(85 * var(--formula)) auto 0;
}

#MC260807handserum .lp-free__item {
  position: relative;
  width: calc(150 * var(--formula));
}

#MC260807handserum .lp-free__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-gold);
  font-size: calc(24 * var(--formula));
  line-height: 1.75;
  text-align: center;
}

/* 全成分アコーディオン */
#MC260807handserum .lp-accordion--ingredient {
  margin-top: calc(85 * var(--formula));
}

#MC260807handserum .lp-accordion--ingredient .lp-accordion__body {
  max-height: 0;
  opacity: 0;
}

#MC260807handserum .lp-accordion--ingredient .lp-accordion__body.is-open {
  opacity: 1;
}

#MC260807handserum .lp-accordion--ingredient .lp-accordion__inner {
  padding-top: calc(53 * var(--formula));
}

#MC260807handserum .lp-accordion--ingredient .lp-accordion__desc {
  width: calc(670 * var(--formula));
  margin-inline: auto;
  text-align: justify;
}

#MC260807handserum .lp-habit .lp-stars {
  margin-top: calc(150 * var(--formula));
}

/* =====================================================
   美容液発想の処方
   ===================================================== */
#MC260807handserum .lp-formula {
  padding-top: calc(150 * var(--formula));
  padding-bottom: calc(100 * var(--formula));
}

#MC260807handserum .lp-formula__desc {
  margin-top: calc(50 * var(--formula));
}

#MC260807handserum .lp-formula__visual {
  position: relative;
  width: calc(420 * var(--formula));
  height: calc(560 * var(--formula));
  margin: calc(60 * var(--formula)) auto 0;
  overflow: hidden;
}

#MC260807handserum .lp-formula__visual img {
  position: absolute;
  left: calc(-66.25 * var(--formula));
  top: calc(-63.54 * var(--formula));
  width: calc(557.59 * var(--formula));
  height: calc(697.06 * var(--formula));
}

/* =====================================================
   リポソーム化したバイオ生セラミド®
   ===================================================== */
#MC260807handserum .lp-ceramide {
  padding-bottom: calc(150 * var(--formula));
}

#MC260807handserum .lp-ceramide__desc {
  margin-top: calc(50 * var(--formula));
}

/* 図解 */
#MC260807handserum .lp-diagram {
  position: relative;
  width: calc(659 * var(--formula));
  margin: calc(77 * var(--formula)) auto 0;
  padding: calc(70 * var(--formula)) 0;
  background-color: var(--color-bg);
}

/* 内側 10px に 2px の枠線 */
#MC260807handserum .lp-diagram::before {
  content: "";
  position: absolute;
  inset: calc(10 * var(--formula));
  border: calc(2 * var(--formula)) solid var(--color-bg-pale);
  pointer-events: none;
}

#MC260807handserum .lp-diagram__img {
  width: calc(386.59 * var(--formula));
  margin-inline: auto;
}

#MC260807handserum .lp-diagram__img--01 {
  margin-top: calc(41 * var(--formula));
}

#MC260807handserum .lp-diagram__img--02 {
  margin-top: calc(39 * var(--formula));
}

#MC260807handserum .lp-diagram__caption + .lp-diagram__img {
  margin-top: calc(41 * var(--formula));
}

#MC260807handserum .lp-diagram__img + .lp-diagram__caption {
  margin-top: calc(47 * var(--formula));
}

/* ポイント（チェックリスト） */
#MC260807handserum .lp-point {
  width: calc(630 * var(--formula));
  margin: calc(150 * var(--formula)) auto 0;
}

#MC260807handserum .lp-point__item + .lp-point__item {
  margin-top: calc(60 * var(--formula));
}

#MC260807handserum .lp-point__title {
  position: relative;
  padding-left: calc(74 * var(--formula));
  font-size: calc(36 * var(--formula));
  line-height: 1.2;
}

#MC260807handserum .lp-point__check {
  position: absolute;
  left: 0;
  top: calc(2 * var(--formula));
  width: calc(44 * var(--formula));
}

#MC260807handserum .lp-point__desc {
  margin-top: calc(20 * var(--formula));
  padding-left: calc(74 * var(--formula));
  letter-spacing: 0.05em;
  text-align: left;
}

#MC260807handserum .lp-ceramide .lp-stars {
  margin-top: calc(150 * var(--formula));
}

/* =====================================================
   AROMATIC MUSK
   ===================================================== */
#MC260807handserum .lp-musk {
  padding-bottom: calc(149 * var(--formula));
}

#MC260807handserum .lp-musk__en {
  margin-top: calc(100 * var(--formula));
  letter-spacing: 0.025em;
}

#MC260807handserum .lp-accordion--musk {
  position: relative;
  margin-top: calc(60 * var(--formula));
}

#MC260807handserum .lp-accordion--musk .lp-accordion__body {
  max-height: calc(168 * var(--formula));
}

/* 閉じているときは本文の下端をふんわり消す */
#MC260807handserum .lp-accordion--musk::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(30 * var(--formula));
  width: 100%;
  height: calc(168 * var(--formula));
  background: linear-gradient(180deg, rgba(230, 238, 242, 0) 0%, var(--color-bg-pale) 60%, var(--color-bg-pale) 100%);
  pointer-events: none;
  transition: opacity 0.5s ease;
}

#MC260807handserum .lp-accordion--musk.is-open::after {
  opacity: 0;
}

#MC260807handserum .lp-accordion--musk .lp-accordion__desc {
  width: calc(630 * var(--formula));
  margin-inline: auto;
  text-align: justify;
}

#MC260807handserum .lp-accordion--musk .lp-accordion__btn {
  margin-top: calc(40 * var(--formula));
  padding-bottom: calc(13 * var(--formula));
  border-bottom: calc(2 * var(--formula)) solid currentColor;
  column-gap: calc(10 * var(--formula));
}

/* =====================================================
   STEP & LINE UP
   ===================================================== */
#MC260807handserum .lp-lineup__desc {
  text-align: left;
  width: calc(633 * var(--formula));
  margin: calc(47 * var(--formula)) auto 0;
  letter-spacing: 0.1em;
}

#MC260807handserum .lp-lineup .lp-arch {
  margin-top: calc(88 * var(--formula));
}

#MC260807handserum .lp-arch--lineup .lp-slider {
  position: absolute;
  inset: 0;
}

#MC260807handserum .lp-slider__arrow {
  position: absolute;
  top: calc(509 * var(--formula));
  z-index: 1;
  width: calc(60 * var(--formula));
  height: calc(13 * var(--formula));
}

#MC260807handserum .lp-slider__arrow--prev {
  left: calc(83 * var(--formula));
}

#MC260807handserum .lp-slider__arrow--next {
  right: calc(83 * var(--formula));
}

#MC260807handserum .lp-slider__arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#MC260807handserum .lp-arch--lineup .lp-arch__item {
  top: calc(200 * var(--formula));
}

#MC260807handserum .lp-arch--lineup .lp-arch__credit {
  top: calc(890 * var(--formula));
}

/* =====================================================
   CHECK ALL ITEMS
   ===================================================== */
#MC260807handserum .lp-allitems {
  padding-top: calc(150 * var(--formula));
  padding-bottom: calc(60 * var(--formula));
}

#MC260807handserum .lp-allitems__body {
  font-family: var(--font-en);
  font-size: calc(60 * var(--formula));
  line-height: 1;
  text-align: center;
  letter-spacing: 0.025em;
  font-weight: 300;
}

#MC260807handserum .lp-allitems__link {
  position: relative;
  display: inline-block;
  max-width: calc(756 * var(--formula));
  padding-bottom: calc(19 * var(--formula));
  font-weight: 300;
  /* border-bottom: calc(2 * var(--formula)) solid currentColor; */
}

#MC260807handserum .lp-allitems__link::after{
  content: "";
  position: absolute;
  width: calc(550 * var(--formula));
  height: 1px;
  background-color: var(--color-blue);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

#MC260807handserum .lp-allitems__star {
  display: inline-block;
  width: calc(21 * var(--formula));
  height: calc(20 * var(--formula));
  margin-inline: calc(24 * var(--formula));
  vertical-align: calc(8 * var(--formula));
  background: url(../img/star.png) no-repeat center / contain;
}

#MC260807handserum .lp-allitems__copyright {
  margin-top: calc(147 * var(--formula));
  color: var(--color-gray);
  font-family: var(--font-en-sans);
  font-weight: 400;
  font-size: calc(20 * var(--formula));
  line-height: 1.55;
  letter-spacing: 0.08em;
  text-align: center;
}

/* =====================================================
   PC 左右レール／固定背景
   ===================================================== */
@media (min-width: 768px) {
  /* 背景は画面に固定（左右レールと同じ 100vh） */
  #MC260807handserum {
    background-color: transparent;
  }

  #MC260807handserum::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-pale) 100%);
    pointer-events: none;
  }

  #MC260807handserum .lp-side--left img {
    width: calc(204.59 * var(--formula_pc));
  }

  #MC260807handserum .lp-side__body {
    font-family: var(--font-en);
    font-size: calc(30 * var(--formula_pc));
    line-height: 1;
    letter-spacing: 0.04em;
    text-align: center;
  }

  #MC260807handserum .lp-side__allitems {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    padding-bottom: calc(9 * var(--formula_pc));
    /* border-bottom: calc(1.5 * var(--formula_pc)) solid currentColor; */
    font-weight: 300;
    letter-spacing: 0.025em;
  }

  #MC260807handserum .lp-side__allitems::after{
    content: "";
    position: absolute;
    height: 1px;
    width: calc(275 * var(--formula_pc));
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-blue);
  }

  #MC260807handserum .lp-side__star {
    display: inline-block;
    width: calc(10.5 * var(--formula_pc));
    height: calc(10 * var(--formula_pc));
    margin-inline: calc(14 * var(--formula_pc));
    vertical-align: calc(4 * var(--formula_pc));
    background: url(../img/star.png) no-repeat center / contain;
  }
}