/* ================================================
   GLP-1 FV（Figma：PC 5320:44779 1440×720 / SP 5320:43791 375×700）
   --u = デザイン上の1px。PCは横1440、SPは横375を基準に画面幅へ比例縮小
   ================================================ */
.gfv {
  position: relative;
  isolation: isolate;
  /* 背景：Figmaの「#f3e8e7＋水彩テクスチャ（カラー合成90%）」の見た目を再現 */
  background: #fee3e2 radial-gradient(ellipse 60% 70% at 50% 45%, #f7e6e5 0%, rgba(253, 227, 227, 0) 100%);
  font-family: "Noto Sans JP", sans-serif;
}
.gfv *, .gfv *::before, .gfv *::after { box-sizing: border-box; }
:where(.gfv) :where(p, ul, h1) { margin: 0; padding: 0; }
/* Figmaと同じ字幅に（Interの可変オプティカルサイズを無効化） */
.gfv { font-optical-sizing: none; }
:where(.gfv) ul { list-style: none; }

.gfv__stage {
  --u: calc(100cqw / 1440);
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  aspect-ratio: 1440 / 720;
  container-type: inline-size;
}
.gfv__girl { position: absolute; display: block; max-width: none; pointer-events: none; }
.gfv__girl--pc { left: calc(8 * var(--u)); top: 0; width: calc(661 * var(--u)); height: calc(720 * var(--u)); object-fit: cover; object-position: bottom; }
.gfv__girl--sp { display: none; }

/* h1：GLP-1バッジ＋「マンジャロのオンライン診療」 */
.gfv__h1 { font-weight: 900; font-size: inherit; line-height: 1; }
.gfv__badge {
  position: absolute; left: calc(539 * var(--u)); top: calc(118 * var(--u)); width: calc(277 * var(--u)); height: calc(160 * var(--u));
  border: calc(2 * var(--u)) solid #dc7f8a; border-radius: calc(8 * var(--u));
}
.gfv__glp {
  position: absolute; left: 0; right: 0; top: calc(44 * var(--u));
  font-family: "Inter", sans-serif; font-weight: 700; font-size: calc(75.636 * var(--u)); line-height: normal;
  color: #e14a5c; text-align: center; white-space: nowrap;
}
.gfv__ico { position: absolute; top: calc(-34 * var(--u)); width: calc(64 * var(--u)); height: calc(64 * var(--u)); display: block; }
.gfv__ico--1 { left: calc(67 * var(--u)); }
.gfv__ico--2 { left: calc(142 * var(--u)); }
.gfv__ttl { position: absolute; left: calc(841 * var(--u)); top: calc(102 * var(--u)); color: #e14a5c; font-weight: 900; white-space: nowrap; }
.gfv__ttl-1, .gfv__ttl-2 { display: block; line-height: 1.13; }
.gfv__ttl-1 { font-size: calc(83 * var(--u)); }
.gfv__ttl-1 small { font-size: calc(55.003 * var(--u)); margin-left: calc(18 * var(--u)); }
.gfv__ttl-2 { font-size: calc(75 * var(--u)); }

/* 価格ボックス */
.gfv__box {
  position: absolute; left: calc(537 * var(--u)); top: calc(299 * var(--u));
  display: flex; align-items: center; gap: calc(16 * var(--u));
  padding: calc(20 * var(--u)) calc(28 * var(--u)); border-radius: calc(9.869 * var(--u));
  background: rgba(255, 255, 255, .48);
}
.gfv__lead { color: #666; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.gfv__lead-1, .gfv__lead-2 { display: block; }
.gfv__lead-1 { font-size: calc(37.61 * var(--u)); }
.gfv__lead-2 { font-size: calc(39.477 * var(--u)); }
.gfv__price { display: flex; flex-direction: column; align-items: flex-end; gap: calc(4 * var(--u)); }
.gfv__cost {
  display: flex; justify-content: center; align-items: center;
  padding: calc(2 * var(--u)) calc(16 * var(--u)); border: calc(2 * var(--u)) solid #e14a5c; border-radius: calc(4 * var(--u));
  background: #e14a5c; color: #fff; white-space: nowrap;
}
.gfv__num { font-weight: 700; font-size: calc(39.477 * var(--u)); line-height: normal; }
.gfv__num b { font-family: "Inter", sans-serif; font-weight: 700; font-size: calc(59.215 * var(--u)); }
.gfv__per { align-self: stretch; display: flex; align-items: flex-end; padding-bottom: calc(9.869 * var(--u)); color: #eccccd; font-weight: 700; font-size: calc(29.607 * var(--u)); line-height: normal; }
.gfv__kome { width: 0; min-width: 100%; color: #dc7f8a; font-size: calc(14 * var(--u)); line-height: normal; }

/* 丸3つ */
.gfv__circles { position: absolute; left: calc(393 * var(--u)); top: calc(539 * var(--u)); display: flex; gap: calc(7.21 * var(--u)); }
.gfv__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 #e14a5c; border-radius: 50%;
  text-align: center; white-space: nowrap;
}
.gfv__cl { display: block; color: #666; font-weight: 700; font-size: calc(25.23 * var(--u)); line-height: 1; }
.gfv__cv { display: block; color: #e14a5c; font-weight: 900; font-size: calc(25.23 * var(--u)); line-height: 1; }
.gfv__cv b { font-family: "Inter", sans-serif; font-weight: 900; font-size: calc(43.258 * var(--u)); }

/* CTA（LINE） */
.gfv__cta { position: absolute; left: calc(858 * var(--u)); top: calc(552 * var(--u)); }
.gfv__btn {
  display: flex; align-items: 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, #ffa04f, #ff7a2e);
  box-shadow: calc(8 * var(--u)) calc(8 * var(--u)) calc(12 * var(--u)) 0 #c9692f;
  text-decoration: none; white-space: nowrap; transition: opacity .2s, transform .2s;
}
.gfv__btn:hover { opacity: .9; transform: translateY(calc(2 * var(--u))); }
.gfv__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: #e8651c; font-weight: 900; font-size: calc(32 * var(--u)); line-height: 1; text-align: center;
}
.gfv__btn-24 > span { display: block; }
.gfv__btn-24 > span:first-child { font-family: "Inter", sans-serif; }
.gfv__btn-24 b { font-weight: 900; font-size: calc(40 * var(--u)); }
.gfv__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); }
.gfv__arrow { position: relative; flex-shrink: 0; width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.gfv__arrow img { position: absolute; left: calc(-1 * var(--u)); top: calc(-1 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); max-width: none; display: block; }

/* ---------- SP ---------- */
@media screen and (max-width: 760px) {
  .gfv__stage { --u: calc(100cqw / 375); max-width: 480px; aspect-ratio: 375 / 700; }
  .gfv__girl--pc { display: none; }
  .gfv__girl--sp { display: block; left: calc(-8.29 * var(--u)); top: 0; width: calc(354.576 * var(--u)); height: calc(492 * var(--u)); }

  .gfv__badge { left: calc(196 * var(--u)); top: calc(81.33 * var(--u)); width: calc(150 * var(--u)); height: calc(86.643 * var(--u)); border-width: calc(1.083 * var(--u)); border-radius: calc(4.332 * var(--u)); }
  .gfv__glp { top: calc(23.83 * var(--u)); font-size: calc(40.958 * var(--u)); }
  .gfv__ico { top: calc(-18.41 * var(--u)); width: calc(34.657 * var(--u)); height: calc(34.657 * var(--u)); }
  .gfv__ico--1 { left: calc(36.28 * var(--u)); }
  .gfv__ico--2 { left: calc(76.9 * var(--u)); }
  /* SP：見出し（Figma 5320:44769） */
  .gfv__ttl { left: calc(25 * var(--u)); top: calc(183 * var(--u)); text-shadow: 0 0 calc(16 * var(--u)) #fff, 0 0 calc(16 * var(--u)) #fff; }
  .gfv__ttl-1, .gfv__ttl-2 { line-height: 1.05; }
  .gfv__ttl-1 { font-size: calc(58 * var(--u)); letter-spacing: calc(-1.74 * var(--u)); }
  .gfv__ttl-1 small { font-size: calc(32 * var(--u)); letter-spacing: calc(-0.96 * var(--u)); margin-left: calc(11 * var(--u)); }
  .gfv__ttl-2 { font-size: calc(49 * var(--u)); letter-spacing: calc(-1.47 * var(--u)); }

  .gfv__box { left: calc(139 * var(--u)); top: calc(311 * var(--u)); flex-direction: column; align-items: flex-start; gap: calc(4 * var(--u)); padding: calc(11.292 * var(--u)) calc(12 * var(--u)); border-radius: calc(5.572 * var(--u)); background: rgba(255, 255, 255, .64); }
  .gfv__lead { font-size: calc(16 * var(--u)); }
  .gfv__lead-1, .gfv__lead-2 { display: inline; font-size: calc(16 * var(--u)); }
  .gfv__price { width: calc(196 * var(--u)); align-items: stretch; gap: calc(2.258 * var(--u)); }
  .gfv__cost { padding: calc(1.129 * var(--u)) calc(9.034 * var(--u)); border-width: calc(1.129 * var(--u)); border-radius: calc(2.258 * var(--u)); }
  .gfv__num { font-size: calc(22 * var(--u)); }
  .gfv__num b { font-size: calc(34 * var(--u)); }
  .gfv__per { padding-bottom: calc(5.572 * var(--u)); font-size: calc(16 * var(--u)); }
  .gfv__kome { width: auto; min-width: 0; font-size: calc(8 * var(--u)); }

  .gfv__circles { left: calc(23 * var(--u)); top: calc(470 * var(--u)); gap: calc(5 * var(--u)); }
  .gfv__circle { width: calc(104 * var(--u)); height: calc(104 * var(--u)); padding: calc(15.6 * var(--u)); border-width: calc(1.3 * var(--u)); }
  .gfv__cl, .gfv__cv { font-size: calc(18.2 * var(--u)); }
  .gfv__cv b { font-size: calc(31.2 * var(--u)); }

  .gfv__cta { left: calc(17 * var(--u)); top: calc(583 * var(--u)); }
  .gfv__btn { gap: calc(11.453 * var(--u)); padding: calc(11.453 * var(--u)) calc(22.905 * var(--u)); border-width: calc(1.432 * var(--u)); border-radius: calc(71.579 * var(--u)); box-shadow: calc(5.726 * var(--u)) calc(5.726 * var(--u)) calc(8.589 * var(--u)) 0 #c9692f; }
  .gfv__btn-24 { padding: calc(5.726 * var(--u)); border-radius: calc(7.158 * 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.905 * var(--u)); }
  .gfv__btn-24 b { font-size: calc(28.632 * var(--u)); }
  .gfv__btn-txt { font-size: calc(22.905 * var(--u)); text-shadow: calc(0.716 * var(--u)) calc(1.432 * var(--u)) calc(1.432 * var(--u)) rgba(0, 0, 0, .15); }
  .gfv__arrow { width: calc(22.905 * var(--u)); height: calc(22.905 * var(--u)); }
  .gfv__arrow img { left: calc(-0.716 * var(--u)); top: calc(-0.716 * var(--u)); width: calc(25.77 * var(--u)); height: calc(25.77 * var(--u)); }
}