/* ================================================
   不眠症 FV（Figma：PC 5320:39905 1440×720 / SP 5320:40900 375×700）
   --u = デザイン上の1px。PCは横1440、SPは横375を基準に画面幅へ比例縮小
   ================================================ */
.ifv {
  position: relative;
  background: linear-gradient(90deg, #10285a 50%, #b5bec7 50%);
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: none;
  color: #fff;
}
.ifv *, .ifv *::before, .ifv *::after { box-sizing: border-box; }
:where(.ifv) :where(p, ul, h1) { margin: 0; padding: 0; }
:where(.ifv) ul { list-style: none; }
.ifv img { display: block; max-width: none; }
.ifv__sp { display: none !important; }

.ifv__stage {
  --u: calc(100cqw / 1440);
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  aspect-ratio: 1440 / 720;
  container-type: inline-size;
  background: url("../img/fv/ifv-bg.webp") no-repeat center / cover;
}

/* h1 */
.ifv__h1 { font-size: inherit; font-weight: 900; white-space: nowrap; }
.ifv__eye { position: absolute; left: calc(56 * var(--u)); top: calc(84 * var(--u)); display: flex; flex-direction: column; }
.ifv__eye-t { display: block; color: #c7d8e9; font-weight: 700; font-size: calc(40.1 * var(--u)); line-height: normal; }
.ifv__eye-line { display: flex; align-items: center; gap: calc(4.456 * var(--u)); }
.ifv__eye-line img:not(.ifv__plane) { width: calc(360.9 * var(--u)); height: calc(2.228 * var(--u)); }
.ifv__eye-line .ifv__plane { width: calc(31.189 * var(--u)); height: calc(31.189 * var(--u)); }
.ifv__l1, .ifv__l2 { position: absolute; display: block; }
.ifv__l1 { left: calc(300 * var(--u)); top: calc(215 * var(--u)); transform: translate(-50%, -50%); font-size: calc(122 * var(--u)); line-height: 1; }
.ifv__l1 small { font-size: calc(80 * var(--u)); }
.ifv__l2 {
  left: calc(781.5 * var(--u)); top: calc(146.8 * var(--u)); transform: translateX(-50%);
  font-size: calc(130 * var(--u)); line-height: 1.1; letter-spacing: calc(-1.3 * var(--u));
  text-shadow: 0 0 calc(16 * var(--u)) #144372, 0 calc(4 * var(--u)) calc(48 * var(--u)) rgba(20, 67, 114, .45);
}

/* 雲 */
.ifv__cloud { position: absolute; inset: 0; pointer-events: none; }
.ifv__cloud img { position: absolute; }
.ifv__cloud p {
  position: absolute; transform: translateX(-50%);
  font-weight: 700; font-size: calc(32 * var(--u)); line-height: 1.3; letter-spacing: calc(0.64 * var(--u));
  text-align: center; white-space: nowrap;
}
.ifv__cloud--1 .ifv__pc { left: calc(72.05 * var(--u)); top: calc(286 * var(--u)); width: calc(410 * var(--u)); height: calc(194 * var(--u)); transform: rotate(-3deg); }
.ifv__cloud--2 .ifv__pc { left: calc(467.69 * var(--u)); top: calc(292.07 * var(--u)); width: calc(378.02 * var(--u)); height: calc(178.868 * var(--u)); transform: rotate(2deg); }
.ifv__cloud--1 p { left: calc(277.5 * var(--u)); top: calc(346.6 * var(--u)); }
.ifv__cloud--2 p { left: calc(658 * var(--u)); top: calc(346.6 * var(--u)); }

/* 価格ボックス */
.ifv__box {
  position: absolute; left: calc(47 * var(--u)); top: calc(501 * var(--u));
  display: flex; flex-direction: column; gap: calc(4 * var(--u));
  padding: calc(12 * var(--u)) calc(28 * var(--u)); border-radius: calc(16 * var(--u));
  background: rgba(255, 255, 255, .48);
}
.ifv__row { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.ifv__lead { font-weight: 700; line-height: 1.4; white-space: nowrap; }
.ifv__lead-1 { font-size: calc(32 * var(--u)); }
.ifv__lead-2 { font-size: calc(24 * var(--u)); }
.ifv__cost {
  display: flex; justify-content: center; align-items: center;
  padding: calc(2 * var(--u)) calc(16 * var(--u)); border: calc(2 * var(--u)) solid #323f61; background: #323f61; white-space: nowrap;
}
.ifv__num { font-weight: 700; font-size: calc(32 * var(--u)); line-height: normal; }
.ifv__num b { font-family: "Inter", sans-serif; font-weight: 700; font-size: calc(57.69 * var(--u)); }
.ifv__per { align-self: stretch; display: flex; align-items: flex-end; padding-bottom: calc(9.869 * var(--u)); color: #c7d8e9; font-weight: 700; font-size: calc(24 * var(--u)); line-height: normal; }
.ifv__kome { display: flex; flex-direction: column; gap: calc(2 * var(--u)); color: #ecf2f9; font-size: calc(14 * var(--u)); line-height: normal; white-space: nowrap; }

/* 丸3つ */
.ifv__circles { position: absolute; left: calc(440 * var(--u)); top: calc(533 * var(--u)); display: flex; gap: calc(7.21 * var(--u)); }
.ifv__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: rgba(255, 255, 255, .8); border: calc(1.802 * var(--u)) solid #323f61; border-radius: 50%;
  text-align: center; white-space: nowrap;
}
.ifv__cl { display: block; color: #666; font-weight: 700; font-size: calc(25.23 * var(--u)); line-height: 1; }
.ifv__cv { display: block; color: #323f61; font-weight: 900; font-size: calc(25.23 * var(--u)); line-height: 1; }
.ifv__cv b { font-family: "Inter", sans-serif; font-weight: 900; font-size: calc(48 * var(--u)); }

/* CTA（LINE） */
.ifv__cta { position: absolute; left: calc(907 * var(--u)); top: calc(557 * var(--u)); }
.ifv__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, #e37e73, #edad45);
  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;
}
.ifv__btn:hover { opacity: .9; transform: translateY(calc(2 * var(--u))); }
.ifv__btn-in { display: flex; align-items: center; gap: calc(16 * var(--u)); }
.ifv__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: #e38071; font-weight: 900; font-size: calc(32 * var(--u)); line-height: 1; text-align: center;
}
.ifv__btn-24 > span { display: block; }
.ifv__btn-24 > span:first-child { font-family: "Inter", sans-serif; }
.ifv__btn-24 b { font-weight: 900; font-size: calc(40 * var(--u)); }
.ifv__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); }
.ifv__arrow { position: relative; flex-shrink: 0; width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.ifv__arrow img { position: absolute; left: calc(-1 * var(--u)); top: calc(-1 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); }

/* ---------- SP ---------- */
@media screen and (max-width: 760px) {
  .ifv { background: #183f74; }
  .ifv__pc { display: none !important; }
  .ifv__sp { display: block !important; }
  .ifv__stage { --u: calc(100cqw / 375); max-width: 480px; aspect-ratio: 375 / 700; background-image: url("../img/fv/ifv-bg-sp.webp"); }

  .ifv__eye { left: calc(17 * var(--u)); top: calc(23 * var(--u)); }
  .ifv__eye-t { color: #323f61; font-size: calc(19.2 * var(--u)); }
  .ifv__eye-line { gap: calc(2.133 * var(--u)); }
  .ifv__eye-line img:not(.ifv__plane) { width: calc(172.8 * var(--u)); height: calc(1.067 * var(--u)); }
  .ifv__eye-line .ifv__plane { width: calc(14.933 * var(--u)); height: calc(14.933 * var(--u)); }
  .ifv__l1 { left: calc(188 * var(--u)); top: calc(232.9 * var(--u)); font-size: calc(73 * var(--u)); }
  .ifv__l1 small { font-size: calc(38 * var(--u)); }
  .ifv__l2 { left: 50%; top: calc(274.57 * var(--u)); font-size: calc(73.68 * var(--u)); letter-spacing: calc(-0.7368 * var(--u)); text-shadow: 0 0 calc(9.93 * var(--u)) #144372, 0 calc(2.483 * var(--u)) calc(29.791 * var(--u)) rgba(20, 67, 114, .45); }

  .ifv__cloud p { font-size: calc(12.965 * var(--u)); letter-spacing: calc(0.2593 * var(--u)); }
  .ifv__cloud--1 .ifv__sp { left: calc(9.94 * var(--u)); top: calc(65.29 * var(--u)); width: calc(166.114 * var(--u)); height: calc(78.6 * var(--u)); }
  .ifv__cloud--2 .ifv__sp { left: calc(18.22 * var(--u)); top: calc(130.65 * var(--u)); width: calc(153.157 * var(--u)); height: calc(72.469 * var(--u)); }
  .ifv__cloud--1 p { left: calc(93 * var(--u)); top: calc(90.53 * var(--u)); color: #666; }
  .ifv__cloud--2 p { left: calc(95.25 * var(--u)); top: calc(153.41 * var(--u)); color: #444; }

  .ifv__box { left: 50%; top: calc(372 * var(--u)); transform: translateX(-50%); gap: calc(4 * var(--u)); padding: calc(7.952 * var(--u)) calc(16 * var(--u)); border-radius: calc(8 * var(--u)); }
  .ifv__row { flex-direction: row; align-items: center; gap: calc(4 * var(--u)); }
  .ifv__lead-1, .ifv__lead-2 { display: block; }
  .ifv__lead-1 { font-size: calc(24 * var(--u)); }
  .ifv__lead-2 { font-size: calc(15.905 * var(--u)); }
  .ifv__cost { align-self: stretch; padding: calc(1.325 * var(--u)) calc(8 * var(--u)); border-width: calc(1.325 * var(--u)); }
  .ifv__num { font-size: calc(21.207 * var(--u)); }
  .ifv__num b { font-size: calc(39.242 * var(--u)); }
  .ifv__per { padding-bottom: calc(6.54 * var(--u)); font-size: calc(15.905 * var(--u)); }
  .ifv__kome { gap: calc(1.325 * var(--u)); font-size: calc(9.278 * var(--u)); }

  .ifv__circles { left: calc(39 * var(--u)); top: calc(480 * var(--u)); gap: calc(4.839 * var(--u)); }
  .ifv__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)); }
  .ifv__cl, .ifv__cv { font-size: calc(16.94 * var(--u)); }
  .ifv__cv b { font-size: calc(32.215 * var(--u)); }

  .ifv__cta { left: 50%; top: calc(587 * var(--u)); transform: translateX(calc(-50% + 0.2 * var(--u))); }
  .ifv__btn { gap: calc(11.559 * var(--u)); padding: calc(11.559 * var(--u)) calc(23.118 * var(--u)); border-width: calc(1.445 * var(--u)); border-radius: calc(72.242 * var(--u)); box-shadow: calc(5.779 * var(--u)) calc(5.779 * var(--u)) calc(8.669 * var(--u)) 0 #a79b9a; }
  .ifv__btn-in { gap: calc(11.559 * var(--u)); }
  .ifv__btn-24 { padding: calc(5.779 * var(--u)); border-radius: calc(7.224 * var(--u)); filter: drop-shadow(calc(0.722 * var(--u)) calc(1.445 * var(--u)) calc(0.722 * var(--u)) rgba(0, 0, 0, .15)); font-size: calc(23.118 * var(--u)); }
  .ifv__btn-24 b { font-size: calc(28.897 * var(--u)); }
  .ifv__btn-txt { font-size: calc(23.118 * var(--u)); text-shadow: calc(0.722 * var(--u)) calc(1.445 * var(--u)) calc(1.445 * var(--u)) rgba(0, 0, 0, .15); }
  .ifv__arrow { width: calc(23.118 * var(--u)); height: calc(23.118 * var(--u)); }
  .ifv__arrow img { left: calc(-0.722 * var(--u)); top: calc(-0.722 * var(--u)); width: calc(26.008 * var(--u)); height: calc(26.008 * var(--u)); }
}