/* ================================================
   ピル FV（Figma：PC 5320:47565 1440×720 / SP 5320:48795 375×664）
   --u = デザイン上の1px。PCは横1440、SPは横375を基準に画面幅へ比例縮小
   ================================================ */
.pfv { position: relative; background: #f5f0eb; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: none; }
.pfv *, .pfv *::before, .pfv *::after { box-sizing: border-box; }
:where(.pfv) :where(p, ul, h1) { margin: 0; padding: 0; }
:where(.pfv) ul { list-style: none; }
.pfv img { display: block; max-width: none; }
.pfv__sp { display: none !important; }
.pfv__stage { --u: calc(100cqw / 1440); position: relative; max-width: 1440px; margin: 0 auto; aspect-ratio: 1440 / 720; container-type: inline-size; }
.pfv__photo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pfv__photo img { position: absolute; }
.pfv__h1 { font-size: inherit; font-weight: 900; white-space: nowrap; }
.pfv__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つ */
.pfv__circles { position: absolute; display: flex; gap: calc(7.21 * var(--u)); }
.pfv__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 #fd723d; border-radius: 50%; text-align: center; white-space: nowrap;
}
.pfv__cl { display: block; color: #666; font-weight: 700; font-size: calc(25.23 * var(--u)); line-height: 1; }
.pfv__cv { display: block; color: #fd723d; font-weight: 900; font-size: calc(25.23 * var(--u)); line-height: 1.3; }
.pfv__cv b { font-family: "Inter", sans-serif; font-weight: 900; font-size: calc(53.262 * var(--u)); line-height: 1; }

/* CTA（LINE） */
.pfv__cta { position: absolute; }
.pfv__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, #5d86d9, #448cc7); 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;
}
.pfv__btn:hover { opacity: .9; transform: translateY(calc(2 * var(--u))); }
.pfv__btn-in { display: flex; align-items: center; gap: calc(16 * var(--u)); }
.pfv__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: #fd723d; font-weight: 900; font-size: calc(32 * var(--u)); line-height: 1; text-align: center;
}
.pfv__btn-24 > span { display: block; }
.pfv__btn-24 > span:first-child { font-family: "Inter", sans-serif; }
.pfv__btn-24 b { font-weight: 900; font-size: calc(40 * var(--u)); }
.pfv__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); }
.pfv__arrow { position: relative; flex-shrink: 0; width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.pfv__arrow img { position: absolute; left: calc(-1 * var(--u)); top: calc(-1 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); }

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

.pfv__photo .pfv__pc { left: 0; top: calc(2 * var(--u)); width: calc(577 * var(--u)); height: calc(718 * var(--u)); }
.pfv__l1, .pfv__l2 { position: absolute; display: block; color: #fd723d; line-height: 1.1; }
.pfv__l1 { left: calc(508 * var(--u)); top: calc(96.17 * var(--u)); font-size: calc(139 * var(--u)); letter-spacing: calc(2.78 * var(--u)); }
.pfv__l2 { left: calc(508 * var(--u)); top: calc(249.07 * var(--u)); font-size: calc(119 * var(--u)); letter-spacing: calc(2.78 * var(--u)); }
.pfv__sub { position: absolute; left: calc(1002 * var(--u)); top: calc(131.34 * var(--u)); display: flex; flex-direction: column; }
.pfv__sub-t { display: block; color: #eda386; font-weight: 700; font-size: calc(40.1 * var(--u)); line-height: 1.2; }
.pfv__sub-t span { display: block; }
.pfv__sub-line { display: flex; align-items: center; gap: calc(4.456 * var(--u)); }
.pfv__sub-line .pfv__line { width: calc(360.9 * var(--u)); height: calc(2.228 * var(--u)); }
.pfv__sub-line .pfv__plane { width: calc(31.189 * var(--u)); height: calc(31.189 * var(--u)); }
.pfv__sub-line img.pfv__sp { display: none !important; }
.pfv__box { position: absolute; left: calc(82 * var(--u)); top: calc(506 * 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); }
.pfv__lead { color: #444; font-weight: 700; font-size: calc(32 * var(--u)); line-height: 1.4; white-space: nowrap; }
.pfv__row { display: flex; align-items: stretch; gap: calc(8 * var(--u)); }
.pfv__cost { padding: calc(2 * var(--u)) calc(16 * var(--u)); }
.pfv__num { font-size: calc(39.477 * var(--u)); }
.pfv__num b { font-size: calc(59.215 * var(--u)); }
.pfv__per { padding-bottom: calc(9.869 * var(--u)); font-size: calc(29.607 * var(--u)); }
.pfv__side { color: #666; font-weight: 500; font-size: calc(22 * var(--u)); line-height: 1.2; white-space: nowrap; }
.pfv__side span { display: block; }
.pfv__circles { left: calc(845 * var(--u)); top: calc(407 * var(--u)); }
.pfv__cta { left: calc(832 * var(--u)); top: calc(565 * var(--u)); }

/* ---------- SP ---------- */
@media screen and (max-width: 760px) {
  .pfv__pc { display: none !important; }
  .pfv__sp { display: block !important; }
  .pfv__stage { --u: calc(100cqw / 375); max-width: 480px; aspect-ratio: 375 / 664; }
  .pfv__circles { gap: calc(4.839 * var(--u)); }
  .pfv__circle { width: calc(96.774 * var(--u)); height: calc(96.774 * var(--u)); padding: calc(14.516 * var(--u)); border-width: calc(1.21 * var(--u)); }
  .pfv__cl, .pfv__cv { font-size: calc(16.94 * var(--u)); }
  .pfv__cv b { font-size: calc(35.746 * var(--u)); }
  .pfv__btn { gap: calc(11.482 * var(--u)); padding: calc(11.482 * var(--u)) calc(22.965 * var(--u)); border-width: calc(1.435 * var(--u)); border-radius: calc(71.764 * var(--u)); box-shadow: calc(5.741 * var(--u)) calc(5.741 * var(--u)) calc(8.612 * var(--u)) 0 #a79b9a; }
  .pfv__btn-in { gap: calc(11.482 * var(--u)); }
  .pfv__btn-24 { padding: calc(5.741 * var(--u)); border-radius: calc(7.176 * var(--u)); filter: drop-shadow(calc(0.718 * var(--u)) calc(1.435 * var(--u)) calc(0.718 * var(--u)) rgba(0, 0, 0, .15)); font-size: calc(22.965 * var(--u)); }
  .pfv__btn-24 b { font-size: calc(28.706 * var(--u)); }
  .pfv__btn-txt { font-size: calc(22.965 * var(--u)); text-shadow: calc(0.718 * var(--u)) calc(1.435 * var(--u)) calc(1.435 * var(--u)) rgba(0, 0, 0, .15); }
  .pfv__arrow { width: calc(22.965 * var(--u)); height: calc(22.965 * var(--u)); }
  .pfv__arrow img { left: calc(-0.718 * var(--u)); top: calc(-0.718 * var(--u)); width: calc(25.836 * var(--u)); height: calc(25.836 * var(--u)); }

  .pfv__photo .pfv__sp { left: 0; top: calc(15.684 * var(--u)); width: calc(232 * var(--u)); height: calc(357.632 * var(--u)); }
  .pfv__l1 { left: auto; right: calc(27 * var(--u)); top: calc(130.56 * var(--u)); font-size: calc(65 * var(--u)); letter-spacing: 0; text-shadow: 0 0 calc(8 * var(--u)) #fff; }
  .pfv__l2 { left: 50%; top: calc(214.6 * var(--u)); transform: translateX(-50%); font-size: calc(49 * var(--u)); letter-spacing: calc(0.98 * var(--u)); text-shadow: 0 0 calc(16 * var(--u)) #fff, calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) rgba(255, 255, 255, .25); }
  .pfv__sub { left: calc(182 * var(--u)); top: calc(54 * var(--u)); width: calc(201 * var(--u)); }
  .pfv__sub-t { font-size: calc(21.81 * var(--u)); }
  .pfv__sub-line { gap: calc(1.868 * var(--u)); }
  .pfv__sub-line .pfv__line { width: calc(151.297 * var(--u)); height: calc(0.934 * var(--u)); }
  .pfv__sub-line .pfv__plane { width: calc(13.075 * var(--u)); height: calc(13.075 * var(--u)); }
  .pfv__box { left: 50%; top: calc(279 * var(--u)); width: calc(304 * var(--u)); transform: translateX(calc(-50% + 0.5 * var(--u))); gap: calc(4.033 * var(--u)); padding: calc(8.066 * var(--u)) calc(14.115 * var(--u)) calc(12.098 * var(--u)); background: rgba(255, 255, 255, .64); }
  .pfv__lead { font-size: calc(16.131 * var(--u)); }
  .pfv__row { flex-direction: column; align-items: flex-start; gap: calc(4.033 * var(--u)); }
  .pfv__cost { align-self: flex-start; padding: calc(1.513 * var(--u)) calc(12.107 * var(--u)); border-width: calc(1.513 * var(--u)); }
  .pfv__num { font-size: calc(29.872 * var(--u)); }
  .pfv__num b { font-size: calc(44.807 * var(--u)); }
  .pfv__per { padding-bottom: calc(7.468 * var(--u)); font-size: calc(22.404 * var(--u)); }
  .pfv__side { font-size: calc(14 * var(--u)); }
  .pfv__side span { display: inline; }
  .pfv__side .pfv__s2 { display: block; }
  .pfv__circles { left: 50%; top: calc(431 * var(--u)); transform: translateX(calc(-50% + 0.5 * var(--u))); }
  .pfv__cta { left: 50%; top: calc(544 * var(--u)); transform: translateX(calc(-50% + 0.17 * var(--u))); }
}