/* ==========================================================================
   FV (Figma: PC/top > FV 1440x650 / SP/top > FV 390x540)
   PCは中央1000px、SPは390pxのアートボードとして組み、幅に合わせて縮小する。
   ========================================================================== */

.fv {
  position: relative;
  overflow: hidden;
  background: linear-gradient(86.19deg, #064c97 2.26%, #0062ed 98.94%);
  color: var(--white);
}

.fv__inner {
  --u: calc(100cqw / 390);
  aspect-ratio: 390 / 540;
}

@media (min-width: 768px) {
  .fv {
    background: var(--grad-fv);
  }

  .fv__inner {
    --u: calc(100cqw / 1000);
    max-width: var(--container);
    margin-inline: auto;
    aspect-ratio: 1000 / 600;
  }

  /* 1000px + 余白に満たない幅では左右に余白を確保 */
  .fv__wrap {
    padding-inline: var(--gutter);
  }
}

/* --- Collage of items ---------------------------------------------------- */
.fv__collage {
  left: 0;
  top: calc(174 * var(--u));
  width: calc(390 * var(--u));
  height: calc(284 * var(--u));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, transparent calc(43.5 * var(--u)), #000 calc(66.4 * var(--u)), #000 calc(188 * var(--u)), transparent calc(267.5 * var(--u)));
  mask-image: linear-gradient(to top, transparent calc(43.5 * var(--u)), #000 calc(66.4 * var(--u)), #000 calc(188 * var(--u)), transparent calc(267.5 * var(--u)));
}

.fv__item {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

.fv__item--washer { left: calc(-17 * var(--u)); top: calc(21 * var(--u)); width: calc(121 * var(--u)); height: calc(176 * var(--u)); }
.fv__item--drawer { left: calc(89 * var(--u)); top: calc(32 * var(--u)); width: calc(130 * var(--u)); height: calc(109 * var(--u)); }
.fv__item--tv { left: calc(228 * var(--u)); top: calc(48 * var(--u)); width: calc(165 * var(--u)); height: calc(106 * var(--u)); }
.fv__item--sofa { left: calc(58.96 * var(--u)); top: calc(72.08 * var(--u)); width: calc(224.38 * var(--u)); height: calc(128.69 * var(--u)); rotate: -1.56deg; }
.fv__item--small { left: calc(120 * var(--u)); top: calc(146 * var(--u)); width: calc(54 * var(--u)); height: calc(82 * var(--u)); }
.fv__item--vacuum { left: calc(-29.57 * var(--u)); top: calc(149.76 * var(--u)); width: calc(178.9 * var(--u)); height: calc(113.93 * var(--u)); rotate: -7.2deg; }

@media (min-width: 768px) {
  .fv__collage {
    left: calc(545 * var(--u));
    top: calc(31 * var(--u));
    width: calc(455 * var(--u));
    height: calc(275 * var(--u));
    -webkit-mask-image: none;
    mask-image: none;
  }

  .fv__item--washer { left: calc(6.68 * var(--u)); top: calc(22.16 * var(--u)); width: calc(146.97 * var(--u)); height: calc(213.71 * var(--u)); }
  .fv__item--drawer { left: calc(110.18 * var(--u)); top: calc(10.38 * var(--u)); width: calc(144.78 * var(--u)); height: calc(121.4 * var(--u)); }
  .fv__item--tv { left: calc(231.38 * var(--u)); top: calc(0.46 * var(--u)); width: calc(223.63 * var(--u)); height: calc(143.86 * var(--u)); }
  .fv__item--sofa { left: calc(147.05 * var(--u)); top: calc(66.19 * var(--u)); width: calc(269.82 * var(--u)); height: calc(154.74 * var(--u)); }
  .fv__item--small { left: calc(164.05 * var(--u)); top: calc(149.25 * var(--u)); width: calc(58.02 * var(--u)); height: calc(89.03 * var(--u)); }
  .fv__item--vacuum { left: calc(-2.58 * var(--u)); top: calc(136.69 * var(--u)); width: calc(206.3 * var(--u)); height: calc(131.37 * var(--u)); }
}

/* --- Circle / staff ------------------------------------------------------ */
.fv__circle {
  left: calc(198 * var(--u));
  top: calc(349.12 * var(--u));
  width: calc(266 * var(--u));
  height: calc(266 * var(--u));
  max-width: none;
}

.fv__staff {
  z-index: 2;
  left: calc(200 * var(--u));
  top: calc(277 * var(--u));
  width: calc(190 * var(--u));
  height: calc(263 * var(--u));
}

/* Figmaでトリミング済みの画像（表示範囲の2倍解像度）をそのまま使う */
.fv__staff img {
  width: 100%;
  height: 100%;
  max-width: none;
}

@media (min-width: 768px) {
  .fv__circle {
    left: calc(562 * var(--u));
    top: calc(319 * var(--u));
    width: calc(438 * var(--u));
    height: calc(438 * var(--u));
  }

  .fv__staff {
    z-index: auto;
    left: calc(608 * var(--u));
    top: calc(217 * var(--u));
    width: calc(327 * var(--u));
    height: calc(383 * var(--u));
  }
}

/* --- Title --------------------------------------------------------------- */
.fv__title {
  z-index: 4;
  inset: 0;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

.fv__title > span {
  position: absolute;
  left: calc(24 * var(--u));
  translate: 0 -50%;
}

.fv__title-lead {
  top: calc(52 * var(--u));
  font-size: calc(45 * var(--u));
  letter-spacing: -0.04em;
}

.fv__title-lead small {
  font-size: 0.7778em;
}

.fv__title-main {
  top: calc(127 * var(--u));
  font-size: calc(85 * var(--u));
}

.fv__sparkle {
  z-index: 4;
  left: calc(332.9 * var(--u));
  top: calc(77.9 * var(--u));
  width: calc(52.12 * var(--u));
  height: calc(52.12 * var(--u));
  max-width: none;
}

@media (min-width: 768px) {
  .fv__title > span {
    left: 0;
  }

  .fv__title-lead {
    top: calc(63.5 * var(--u));
    font-size: calc(52.178 * var(--u));
  }

  .fv__title-main {
    top: calc(158.2 * var(--u));
    font-size: calc(123.713 * var(--u));
  }

  .fv__sparkle {
    left: calc(449.45 * var(--u));
    top: calc(85.45 * var(--u));
    width: calc(75.86 * var(--u));
    height: calc(75.86 * var(--u));
  }
}

/* --- Catch (他社より1円でも高く買います！) ------------------------------- */
.fv__catch {
  z-index: 5;
  left: calc(24 * var(--u));
  top: calc(191 * var(--u));
  width: calc(342 * var(--u));
  height: calc(50.02 * var(--u));
  padding-top: 0.13em;
  text-align: center;
  font-size: calc(20.939 * var(--u));
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0;
  white-space: nowrap;
  background: url("../img/fv-dots.svg") left bottom / 100% calc(3.49 * var(--u)) no-repeat;
}

/* 大きい文字は line-height:0 にして行ボックスを広げない（点線との間隔を保つ） */
.fv__catch span {
  display: inline-block;
  line-height: 0;
}

.fv__catch-a { letter-spacing: 0.11em; }
.fv__catch-s { font-size: 0.8889em; }
.fv__catch-num {
  margin-left: 0.1em;
  font-family: var(--font-num);
  font-size: 2.611em;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.fv__catch-yen { font-weight: 900; letter-spacing: 0.06em; }
.fv__catch-demo { margin-left: 0.1em; font-size: 0.8889em; }
.fv__catch-big { margin-left: 0.15em; font-size: 1.6667em; letter-spacing: -0.03em; }
.fv__catch-buy { font-weight: 900; letter-spacing: 0.02em; }
.fv__catch-ex { font-size: 1.3333em; rotate: 30deg; translate: -0.1em 0; }

@media (min-width: 768px) {
  .fv__catch {
    z-index: 3;
    left: 0;
    top: calc(247 * var(--u));
    width: calc(497.76 * var(--u));
    height: calc(72.8 * var(--u));
    font-size: calc(30.475 * var(--u));
    background-size: 100% calc(5.08 * var(--u));
  }
}

/* --- Tags (愛知県全域対応 / 家具・家電まとめて査定) ------------------------ */
.fv__tags {
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.fv__tag {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  height: 1.636em;
  padding-left: 0.727em;
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--white);
}

.fv__tag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--primary-700);
  opacity: 0.8;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.66em) 100%, 0 100%);
}

.fv__tag em {
  font-style: normal;
  color: var(--highlight);
  letter-spacing: 0.05em;
}

.fv__tag--area {
  top: calc(304 * var(--u));
  width: calc(196 * var(--u));
}

.fv__tag--area small { font-size: 0.818em; letter-spacing: 0.05em; }

.fv__tag--items {
  top: calc(344 * var(--u));
  width: calc(238 * var(--u));
}

.fv__tag--items em { letter-spacing: 0.033em; }
.fv__tag--items small { font-size: 0.727em; letter-spacing: 0.05em; }
.fv__tag-tight { letter-spacing: -0.22em !important; }

@media (min-width: 768px) {
  .fv__tags {
    z-index: 6;
  }

  .fv__tag {
    top: calc(343 * var(--u));
    height: 1.636em;
    padding-left: 0.89em;
    font-size: calc(26 * var(--u));
  }

  .fv__tag::before {
    clip-path: polygon(0.68em 0, 100% 0, calc(100% - 0.66em) 100%, 0 100%);
  }

  .fv__tag--area { width: calc(229.52 * var(--u)); }
  .fv__tag--items { left: calc(221.85 * var(--u)); width: calc(279.15 * var(--u)); padding-left: 0.846em; }
}

/* --- Points (当日搬出 / 出張料・査定料0円 / その場で現金化) -------------- */
.fv__points {
  z-index: 3;
  left: calc(24 * var(--u));
  top: calc(406.37 * var(--u));
  width: calc(342 * var(--u));
  display: flex;
  gap: calc(8 * var(--u));
  font-size: calc(14 * var(--u));
}

.fv__point {
  --hl-top: 73%;
  --hl-bottom: 95%;
  position: relative;
  flex: 1 1 0;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 0.571em;
  border-radius: 0.5714em;
  background: var(--white);
  color: var(--black);
  text-align: center;
}

.fv__point-icon {
  position: absolute;
  top: -0.5836em;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.2858em;
  height: 2.2858em;
  translate: -50% 0;
  border: 0.2857em solid var(--white);
  border-radius: var(--radius-full);
  background: var(--secondary-500);
}

.fv__point-icon img {
  width: 1.7143em;
  height: 1.7143em;
  max-width: none;
}

.fv__point-label {
  margin-bottom: -0.571em;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 「出張料・査定料」だけ字間 0 */
.fv__point-label--free { letter-spacing: 0; }

.fv__point-label .tight { letter-spacing: -0.114em; }

.fv__point-value {
  display: inline-block;
  padding-inline: 0.08em;
  background: linear-gradient(transparent var(--hl-top), var(--highlight) var(--hl-top), var(--highlight) var(--hl-bottom), transparent var(--hl-bottom));
  color: var(--attention);
  font-size: 2em;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.fv__point-value small {
  font-size: 0.5em;
  font-weight: 700;
}

.fv__point-value--num {
  font-size: 2.5714em;
  line-height: 1.25;
}

.fv__point-value--num small {
  font-size: 0.5em;
}

@media (min-width: 768px) {
  .fv__points {
    left: 0;
    top: calc(420 * var(--u));
    width: calc(500.61 * var(--u));
    gap: calc(11.71 * var(--u));
    font-size: calc(20.493 * var(--u));
  }

  .fv__point {
    --hl-top: 68%;
    --hl-bottom: 91%;
    aspect-ratio: auto;
    height: calc(140 * var(--u));
    padding-top: 0.976em;
  }

  .fv__point-label {
    margin-bottom: -0.718em;
  }

  .fv__point-label .tight { letter-spacing: -0.078em; }
}

/* FVは読み込み直後なので、スクロール表示より短く（約1.4秒で全体がそろう） */
.fv .js-reveal {
  transition-duration: 0.7s, 0.7s, 0.8s;
}