/* ================================================
   美容内服薬 FV（Figma：PC 5320:58137 1440×720 / SP 5320:58172 375×603）
   --u = デザイン上の1px。PCは横1440、SPは横375を基準に画面幅へ比例縮小
   ================================================ */
.sfv { position: relative; background: #f2fafc; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: none; }
.sfv *, .sfv *::before, .sfv *::after { box-sizing: border-box; }
:where(.sfv) :where(p, ul, h1) { margin: 0; padding: 0; }
:where(.sfv) ul { list-style: none; }
.sfv img { display: block; max-width: none; }
.sfv__sp { display: none !important; }
.sfv__stage { --u: calc(100cqw / 1440); position: relative; max-width: 1440px; margin: 0 auto; aspect-ratio: 1440 / 720; container-type: inline-size; }
.sfv__photo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sfv__photo img { position: absolute; }
.sfv__h1 { font-size: inherit; font-weight: 900; white-space: nowrap; }
.sfv__vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* 丸3つ */
.sfv__circles { position: absolute; display: flex; gap: calc(7.21 * var(--u)); }
.sfv__circle {
  width: calc(144.194 * var(--u)); height: calc(144.194 * var(--u)); padding: calc(21.629 * var(--u));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; border: calc(1.802 * var(--u)) solid #0da0c1; border-radius: 50%; text-align: center; white-space: nowrap;
}
.sfv__cl { display: block; color: #666; font-weight: 700; font-size: calc(25.23 * var(--u)); line-height: 1; }
.sfv__cv { display: block; color: #0da0c1; font-weight: 900; font-size: calc(25.23 * var(--u)); line-height: 1.3; }
.sfv__cv b { font-family: "Inter", sans-serif; font-weight: 900; font-size: calc(53.262 * var(--u)); line-height: 1; }

/* CTA（LINE） */
.sfv__cta { position: absolute; }
.sfv__btn {
  display: flex; align-items: center; justify-content: center; gap: calc(16 * var(--u));
  padding: calc(16 * var(--u)) calc(32 * var(--u)); border: calc(2 * var(--u)) solid #fff; border-radius: calc(100 * var(--u));
  background: linear-gradient(to right, #e48195, #df5a5c); box-shadow: calc(8 * var(--u)) calc(8 * var(--u)) calc(12 * var(--u)) 0 #a79b9a;
  text-decoration: none; white-space: nowrap; transition: opacity .2s, transform .2s;
}
.sfv__btn:hover { opacity: .9; transform: translateY(calc(2 * var(--u))); }
.sfv__btn-in { display: flex; align-items: center; gap: calc(16 * var(--u)); }
.sfv__btn-24 {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(8 * var(--u)); border-radius: calc(10 * var(--u)); background: #fff; filter: drop-shadow(calc(1 * var(--u)) calc(2 * var(--u)) calc(1 * var(--u)) rgba(0, 0, 0, .15));
  color: #e48195; font-weight: 900; font-size: calc(32 * var(--u)); line-height: 1; text-align: center;
}
.sfv__btn-24 > span { display: block; }
.sfv__btn-24 > span:first-child { font-family: "Inter", sans-serif; }
.sfv__btn-24 b { font-weight: 900; font-size: calc(40 * var(--u)); }
.sfv__btn-txt { color: #fff; font-weight: 700; font-size: calc(32 * var(--u)); line-height: normal; text-align: center; text-shadow: calc(1 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, .15); }
.sfv__arrow { position: relative; flex-shrink: 0; width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.sfv__arrow img { position: absolute; left: calc(-1 * var(--u)); top: calc(-1 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); }

/* 価格ピル（共通部） */
.sfv__cost { display: flex; justify-content: center; align-items: center; background: #7dcce0; border: calc(2 * var(--u)) solid #7dcce0; color: #fff; white-space: nowrap; }
.sfv__num { font-weight: 700; line-height: normal; }
.sfv__num b { font-family: "Inter", sans-serif; font-weight: 700; }
.sfv__per { align-self: stretch; display: flex; align-items: flex-end; color: #c8e9f0; font-weight: 700; line-height: normal; }

.sfv__photo .sfv__pc { left: calc(866 * var(--u)); top: 0; width: calc(632 * var(--u)); height: calc(718 * var(--u)); }
.sfv__eye { position: absolute; left: calc(101 * var(--u)); top: calc(61.32 * var(--u)); color: #0da0c1; font-weight: 700; font-size: calc(28 * var(--u)); line-height: 1.5; white-space: nowrap; }
.sfv__badge, .sfv__l2, .sfv__l3 { position: absolute; display: block; font-weight: 900; }
.sfv__badge { left: calc(101 * var(--u)); top: calc(111 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); border-radius: calc(8 * var(--u)); background: #0da0c1; color: #fff; font-size: calc(100 * var(--u)); line-height: 1; letter-spacing: calc(2 * var(--u)); }
.sfv__l2 { left: calc(101 * var(--u)); top: calc(241 * var(--u)); color: #0da0c1; font-size: calc(105 * var(--u)); line-height: 1.18; letter-spacing: calc(2.1 * var(--u)); }
.sfv__l3 { left: calc(101 * var(--u)); top: calc(379 * var(--u)); font-size: calc(71 * var(--u)); line-height: 1.18; letter-spacing: calc(1.42 * var(--u)); background: linear-gradient(to right, #e48195, #df5a5c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sfv__box { position: absolute; left: calc(87 * var(--u)); top: calc(482 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(8 * var(--u)); padding: calc(16 * var(--u)) calc(28 * var(--u)) calc(24 * var(--u)); background: rgba(255, 255, 255, .48); }
.sfv__lead { color: #444; font-weight: 700; font-size: calc(30 * var(--u)); line-height: 1.4; white-space: nowrap; }
.sfv__lead span { display: block; }
.sfv__cost { height: calc(78 * var(--u)); padding: calc(2 * var(--u)) calc(16 * var(--u)); }
.sfv__num { font-size: calc(32 * var(--u)); }
.sfv__num b { font-size: calc(54 * var(--u)); }
.sfv__per { padding-bottom: calc(9.869 * var(--u)); font-size: calc(24 * var(--u)); }
.sfv__circles { left: calc(453 * var(--u)); top: calc(537 * var(--u)); }
.sfv__cta { left: calc(938 * var(--u)); top: calc(544 * var(--u)); }

/* ---------- SP ---------- */
@media screen and (max-width: 760px) {
  .sfv__pc { display: none !important; }
  .sfv__sp { display: block !important; }
  .sfv__stage { --u: calc(100cqw / 375); max-width: 480px; aspect-ratio: 375 / 603; }
  .sfv__circles { gap: calc(5.5 * var(--u)); }
  .sfv__circle { width: calc(110 * var(--u)); height: calc(110 * var(--u)); padding: calc(16.5 * var(--u)); border-width: calc(1.375 * var(--u)); }
  .sfv__cl, .sfv__cv { font-size: calc(19.25 * var(--u)); }
  .sfv__cv b { font-size: calc(40.631 * var(--u)); }
  .sfv__btn { gap: calc(11.457 * var(--u)); padding: calc(11.457 * var(--u)) calc(22.914 * var(--u)); border-width: calc(1.432 * var(--u)); border-radius: calc(71.605 * var(--u)); box-shadow: calc(5.728 * var(--u)) calc(5.728 * var(--u)) calc(8.593 * var(--u)) 0 #a79b9a; }
  .sfv__btn-in { gap: calc(11.457 * var(--u)); }
  .sfv__btn-24 { padding: calc(5.728 * var(--u)); border-radius: calc(7.161 * var(--u)); filter: drop-shadow(calc(0.716 * var(--u)) calc(1.432 * var(--u)) calc(0.716 * var(--u)) rgba(0, 0, 0, .15)); font-size: calc(22.914 * var(--u)); }
  .sfv__btn-24 b { font-size: calc(28.642 * var(--u)); }
  .sfv__btn-txt { font-size: calc(22.914 * var(--u)); text-shadow: calc(0.716 * var(--u)) calc(1.432 * var(--u)) calc(1.432 * var(--u)) rgba(0, 0, 0, .15); }
  .sfv__arrow { width: calc(22.914 * var(--u)); height: calc(22.914 * var(--u)); }
  .sfv__arrow img { left: calc(-0.716 * var(--u)); top: calc(-0.716 * var(--u)); width: calc(25.778 * var(--u)); height: calc(25.778 * var(--u)); }

  .sfv__photo .sfv__sp { left: calc(214 * var(--u)); top: 0; width: calc(161 * var(--u)); height: calc(305.5 * var(--u)); }
  .sfv__eye { left: calc(21 * var(--u)); top: calc(21.18 * var(--u)); width: calc(175 * var(--u)); font-size: calc(25 * var(--u)); line-height: 1.3; text-align: center; white-space: normal; }
  .sfv__eye span { display: block; }
  .sfv__badge { left: calc(12 * var(--u)); top: calc(106 * var(--u)); padding: calc(3.649 * var(--u)) calc(7.299 * var(--u)); border-radius: calc(3.649 * var(--u)); font-size: calc(45.619 * var(--u)); letter-spacing: calc(0.9124 * var(--u)); }
  .sfv__l2 { left: calc(12 * var(--u)); top: calc(165.3 * var(--u)); font-size: calc(42 * var(--u)); letter-spacing: calc(0.84 * var(--u)); }
  .sfv__l3 { left: calc(12 * var(--u)); top: calc(221.3 * var(--u)); font-size: calc(31 * var(--u)); letter-spacing: calc(0.62 * var(--u)); }
  .sfv__box { left: 50%; top: calc(263 * var(--u)); transform: translateX(calc(-50% - 0.06 * var(--u))); flex-direction: row; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); }
  .sfv__lead { font-size: calc(11.162 * var(--u)); }
  .sfv__cost { height: calc(36.277 * var(--u)); padding: calc(0.93 * var(--u)) calc(7.441 * var(--u)); border-width: calc(0.93 * var(--u)); }
  .sfv__num { font-size: calc(14.883 * var(--u)); }
  .sfv__num b { font-size: calc(25.115 * var(--u)); }
  .sfv__per { padding-bottom: calc(4.59 * var(--u)); font-size: calc(11.162 * var(--u)); }
  .sfv__circles { left: 50%; top: calc(324 * var(--u)); transform: translateX(-50%); }
  .sfv__cta { left: 50%; top: calc(474 * var(--u)); transform: translateX(-50%); }
  .sfv__btn { width: calc(341 * var(--u)); }
}