/* =========================================================
   sections/fv.css — ファーストビュー（Figma フレーム "fv" / 1440×974）
   【C-2：重なり構図の absolute 解体 → Grid(重なり)／2層構造＋背景PC/SP出し分け】
   - 旧構造は content / illust / cta が absolute+% の重なり（illust が両方に重なるのが要）。
     PC は CSS Grid で「コピー(左) × イラスト(右・前面) を上段に重ね、CTAボックスを下段」に再現。
     illust は上段〜下段にまたいで cta 上部に重ねる（z-index 前面）。DOM順は保持。
   - 背景は「外側に全幅で敷く」。PC/SP でファイル出し分け（HTML の <picture>）：
       PC/タブレット(≥768)=fv-bg.png / SP(≤767)=fv-bg-sp.png（いずれも絵柄なし装飾のみ）。
   - タブレット/SP は Grid を解除して縦積み（コピー→イラスト→CTA は order で。DOMは不変）。
   - 2層：外側 .fv=全幅背景 / 内側 .fv__inner=max1440中央寄せ＋cqw基準。aspect等の高さ固定なし。
   - BP：PC ≥1024 / タブレット 768–1023 / SP ≤767（最小375）。生px禁止・トークン/%参照。
     @media / <picture> の条件式は var() 不可のため px 直書き＋トークン名（--bp-*）をコメント併記。
   ========================================================= */

/* ---- 外側：全幅の背景レイヤー ---- */
.fv {
  position: relative;               /* .fv__bg の配置基準 */
  background: var(--color-white);   /* 画像外・読込前の地色フォールバック */
  overflow: hidden;
}
.fv__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ---- 内側：中央寄せコンテンツ（bg より前面・cqw の基準） ----
   PC/タブレット：単一カラムの Grid。上段(top)にコピーとイラストを重ね、下段(cta)にボックス。
   illust は top〜cta をまたいで右・前面に置き、原案の「イラストが CTA 上部に重なる」を再現。 */
.fv__inner {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  width: 100%;
  max-width: var(--container-max);  /* 1440px */
  margin-inline: auto;
  padding-block: var(--space-72);
  padding-inline: var(--space-56);  /* PC 左右ガター */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "top"
    "cta";
  row-gap: var(--space-120);        /* コピー→CTA の縦余白（PC 120px） */
}

/* 前面イラスト（右・最前面）。top〜cta にまたいで cta 上部に重ねる */
/* 前面イラスト：重なり装飾として .fv__inner 基準の絶対配置（原案の重なり構図を再現）。
   Grid の段組みでは下段CTAに重ねられないため absolute にして下げ＋拡大。
   ※ top（縦位置）と width（大きさ）は目視微調整前提のツマミ。SP/タブレットでは下で解除。 */
.fv__illust {
  position: absolute;
  top: 18%;                         /* ← 縦位置：値を上げるほど下がる（PC下部がCTA上辺に乗る高さ） */
  margin-top: var(--space-48);      /* 実値で48px下げてCTA上辺に乗せる（40→48・1段下へ） */
  right: 8.333%;                    /* 右から約120px @1440（6.667%→8.333%・1段左へ） */
  width: 28.333%;                   /* ← 大きさ：408px相当（原案）。上げるほど拡大 */
  height: auto;
  z-index: 2;                       /* CTAボックス(z-index:1)より前面 */
}

/* ---- テキストブロック（上段・左） ---- */
.fv__content {
  grid-area: top;
  z-index: 1;
  justify-self: start;
  align-self: start;
  width: 57.778cqw;                 /* 832px */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);             /* 23px */
}

/* サブコピーの黄色帯 */
.fv__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-24); /* 縦8→16（帯の高さを増やす）/ 横24は不変 */
  margin-bottom: var(--space-16);     /* badge直下に16px追加（content gap24 に加算＝badge↔title 40px） */
  background: var(--color-badge);
  font-weight: 600;
  font-size: var(--fs-lg);          /* 33.531px */
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
}

/* メインコピー（2 行） */
.fv__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
}
.fv__title-line1 { font-size: var(--fs-5xl); } /* 80.375px */
.fv__title-line2 {
  font-size: var(--fs-6xl);                  /* 95.679px */
  margin-top: var(--space-16);               /* 行間 実測16px */
}
/* line2 内：価格を強調（「20,000」を黄／数字は大きいまま、月額・,・円を一段小） */
.fv__price { color: var(--color-primary); }  /* 「20,000」を黄（全BP・色のみ） */
.fv__unit,
.fv__comma {
  font-size: var(--fs-2xl);                  /* 月額 / , / 円 を 56px（※PCのみ。≤1023 で inherit にリセット） */
  color: var(--color-primary);               /* 月額 / , / 円 も黄（全BP・色のみ） */
}
.fv__de { font-size: var(--fs-2xl); }        /* 「で」を 56px（色は現状の黒のまま。※PCのみ、下で解除） */

/* リード文 */
.fv__lead {
  font-weight: 400;
  font-size: var(--fs-base);        /* 24px */
  line-height: 1.55;
  color: var(--color-text);
}

/* ---- CTA ボックス（下段・中央・白枠） ---- */
.fv__cta {
  grid-area: cta;
  z-index: 1;
  justify-self: center;
  width: 70.625cqw;                 /* 1017px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);             /* 32px */
  padding: var(--space-40) var(--space-56) var(--space-40); /* 上下40で統一 / 左右60 */
  border-radius: 4.514cqw;          /* 65px */
  background: var(--color-white);
  box-shadow: inset 0 0 0 0.347cqw var(--color-primary); /* 5px 枠 */
}

.fv__cta-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-16);             /* title→sub の間隔（8→16・1段広げ） */
}

/* 「最初の3ヶ月は月額費用0円！」3 と 0 を強調 */
.fv__cta-title {
  font-weight: 700;
  font-size: var(--fs-xl);          /* 40px */
  line-height: 1.2;
  color: var(--color-text);
  white-space: nowrap;
}
.fv__cta-title .num {
  font-size: calc(var(--fs-3xl) * 1.2); /* 64×1.2=76.8px（3・0を1.2倍強調） */
  color: var(--color-primary);      /* 「3」「0」を黄で強調 */
  margin-inline: calc(var(--space-8) / 2); /* 数字の両側に約4px余白 */
}

.fv__cta-sub {
  font-weight: 500;
  font-size: var(--fs-base);        /* 24.583px */
  line-height: 1;
  color: var(--color-black);
  white-space: nowrap;
}

/* CTA ボタン（高さは padding 依存＝auto） */
.fv__cta-btn {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-24) var(--space-104); /* 上下24 / 左右104（88の約1.2倍） */
  border-radius: 3.313cqw;          /* 47.706px */
  background: var(--color-primary);
  box-shadow: var(--shadow-btn);
  font-weight: 600;
  font-size: var(--fs-lg);          /* 32px */
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
}
.fv__cta-btn-arrow {
  width: 1.7cqw;
  height: auto;
  fill: currentColor;
  flex: none;
}

/* =========================================================
   レスポンシブ（price/problem/form の型を併用）
   ※ @media は var() 不可のため px 直書き＋トークン名をコメント併記。
   ========================================================= */

/* ---- タブレット以下（<1024＝--bp-tablet 未満）----
   96px 見出し＋重なりは入らないため Grid を解除し縦積み。
   視覚順は「コピー→イラスト→CTA」を order で作る（DOM順は不変）。 */
@media (max-width: 1023px) {
  .fv__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-40);
  }
  .fv__content { order: 0; width: 100%; z-index: auto; align-items: center; text-align: center; }
  /* PC の絶対配置を解除して通常フロー（中央寄せ）に戻す */
  .fv__illust  { order: 1; width: 40%; z-index: auto; position: static; top: auto; right: auto; margin-top: 0; }
  .fv__cta     { order: 2; width: 100%; z-index: auto; }

  /* line2 の部分縮小は PC 限定。タブレット/SP では他の文字と揃える（レイアウト不変） */
  .fv__unit,
  .fv__comma,
  .fv__de { font-size: inherit; }

  /* 見出し：2段下げ＋折返し */
  .fv__title { align-items: center; white-space: normal; }
  .fv__title-line1 { font-size: var(--fs-3xl); }   /* 80→64 */
  .fv__title-line2 { font-size: var(--fs-4xl); }   /* 96→72 */
  .fv__badge { white-space: normal; }

  /* CTA 内テキスト・ボタンを折返し可に（ボタン高さは padding 依存で自動） */
  .fv__cta-title { white-space: normal; }
  .fv__cta-sub   { white-space: normal; }
  .fv__cta-btn   { padding-inline: var(--space-40); white-space: normal; }
}

/* ---- タブレット（768–1023）：fv 専用ブロック【新規追加】 ----
   fv には従来タブレット専用ブロックが無かったため新設。共有<1024より後方＝タブレットで後勝ち。
   ★このブロックは @media(min-width:768px)and(max-width:1023px) なので SP(≤767)/PC(≥1024) には一切適用されない。 */
@media (min-width: 768px) and (max-width: 1023px) {
  /* ① イラスト：完全にフロー配置（重なりゼロ）＋幅40%・中央寄せ */
  .fv__illust {
    position: static;
    top: auto; right: auto; left: auto; bottom: auto;
    float: none;
    width: 40%;
    margin-inline: auto;
  }
  /* ③ CTAボタン：テキスト幅に追従してボタン内に収める・中央配置（base の align-self:stretch を解除）。
     長文は折返し可（はみ出し保険）。矢印もボタン内に収まる。 */
  .fv__cta-btn {
    align-self: center;
    width: auto;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-32);
    white-space: normal;
  }
}

/* ---- SP（≤767＝--bp-sp 未満）：SPデザインに組み直し（最小375） ----
   構成（上から）：バッジ全幅帯 → コピー(左寄せ) → イラスト(絶対配置で右に重ね)
                  → リード(左寄せ) → CTA全幅白ボックス。
   ※ .fv__inner は基底の position:relative をイラスト絶対配置の基準に流用。
      <1024 ブロックの「中央寄せ・イラストstatic」を本ブロックで上書き（同一詳細度＝後勝ち）。
      本ブロックは全て @media(max-width:767px) 内＝PC(≥1024)/タブレット(768–1023)は不変。 */
@media (max-width: 767px) {
  .fv__inner {
    padding-inline: var(--container-pad); /* 画面端ガター16px */
    padding-block: var(--space-32) var(--space-64); /* 上32（半分・ユーザー指定の意図的逸脱）/ 下64維持 */
    align-items: stretch;                 /* 帯・コピー・CTAを全幅基準に（<1024 の center を上書き） */
    gap: var(--space-24);                 /* リード(コピー下端)→CTA を24pxに（<1024 の40を上書き） */
  }

  /* コピー群：左寄せ。gap依存をやめ margin で各間隔を個別制御（form と同方針）。
     Figma375：badge→見出し24 / 見出し→リード8（下の各要素の margin で作る）。 */
  .fv__content {
    width: 100%;
    align-items: flex-start;
    text-align: left;
    gap: 0;                               /* gap撤去（二重加算回避）。間隔は各要素の margin で */
  }

  /* バッジ：全幅の黄帯・中央テキスト・2行可（PCのインライン幅を上書き） */
  .fv__badge {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding-block: var(--space-8);        /* 上下paddingを半分に（基底16→8）。左右は下行で維持 */
    padding-inline: var(--space-24);      /* 帯内側の左右余白 24px（維持） */
    margin-bottom: var(--space-24);       /* badge→見出し 24px（gap0のため margin で直接） */
    font-size: var(--fs-base);            /* 24px */
    line-height: 1.5;                     /* 2行の行間を広げる */
    white-space: normal;                  /* 2行許可 */
  }

  /* 見出し：左寄せ・行間詰め（<1024 の中央寄せを上書き） */
  .fv__title { align-items: flex-start; text-align: left; line-height: 1.3; } /* 3行の行間を広げる（1→1.3） */
  .fv__title-line1 { font-size: var(--fs-28); }              /* 28px */
  .fv__title-line2 { font-size: var(--fs-36); margin-top: 0; } /* 「自動化」36px・行間余白0（基底の+16解除） */
  /* line2 内訳（黄色・部分色ルールは基底のまま維持。サイズのみ Figma375 実測へ）
     HTML 不変のため隣接/先頭セレクタで「月額」と「円」を出し分け（同じ .fv__unit クラス）。 */
  .fv__title-line2 > .fv__unit:first-child { font-size: var(--fs-lg); }  /* 月額 32px */
  .fv__de                { font-size: var(--fs-lg); }        /* で 32px */
  .fv__price             { font-size: var(--fs-48); }        /* 20,000 48px（内包の「,」も追従） */
  .fv__price + .fv__unit { font-size: var(--fs-48); }        /* 円 48px（priceに続くunit） */

  /* リード：12px・左寄せ。SPは br を有効化して4行に（既存<br>＝共通改行／不要。・システムを後は sp-only） */
  .fv__lead { font-size: var(--fs-12); text-align: left; margin-top: var(--space-8); line-height: 1.8; } /* 12px・見出し→リード 8px・4行の行間を広げる（基底1.55→1.8） */

  /* イラスト：absolute で右上に配置（Figma375 実測 W176 / 右24 / 上278）。
     ※ width:176px / top:278px は SP実測の一点もの配置＝実寸px許容（実機で微調整可）。
        電球が「自動化」付近の右、人物がその下に来る位置。 */
  .fv__illust {
    position: absolute;                   /* <1024 の static を上書き */
    top: 256px;                           /* 上から256px（実測・実機微調整可） */
    right: var(--space-24);               /* 右端から24px */
    width: 176px;                         /* 実測W176（実寸指定・height:autoで比率追従） */
    height: auto;
    margin-top: 0;
    z-index: 2;                           /* コピーより前面 */
  }

  /* CTA ボックス：画面両端から24px・内テキストは実測サイズ */
  .fv__cta {
    width: auto;                          /* <1024 の width:100% を解除（margin と併用で溢れ防止） */
    margin-inline: var(--space-8);        /* inner の16 + 8 = 画面端から24px */
    padding: var(--space-24) var(--space-16) var(--space-24); /* 上24 / 左右16 / 下32→24 */
    gap: var(--space-8);                  /* head↔btn（②→③）を8pxに（24→8） */
  }
  .fv__cta-head       { gap: var(--space-8); }      /* title↔sub（①→②）を8pxに（基底16→8） */
  .fv__cta-title      { font-size: var(--fs-md); }  /* 20px */
  .fv__cta-title .num { font-size: var(--fs-lg); }  /* 32px（「3」「0」） */
  .fv__cta-sub        { font-size: var(--fs-sm); line-height: 1.5; } /* 16px・折返し時の行間を広げる（基底1→1.5） */
  .fv__cta-btn        { font-size: var(--fs-sm); padding-block: calc(var(--space-32) / 3); padding-inline: var(--space-16); border-radius: var(--space-96); text-align: center; line-height: 1.5; } /* 16px・上下32の1/3(≈10.7px)・フル丸・中央揃え・行間1.5 */
  .fv__cta-btn-arrow  { width: 14px; } /* SP矢印を中サイズ14pxに統一（旧24px。全ボタン共通） */
}

/* ---- 狭いPC（1024–1370）：fv 専用ブロック【書き換え：1440デザインの比例縮小】 ----
   FV内の固定px を cqw（.fv__inner=container-type:inline-size の基準）に換算。
   1370px時の content-box W=1258px（1370 − padding-inline 56×2）、1cqw≈12.58px、換算＝px÷12.58。
   → 1370で現行px値と一致（1370/1371で段差なし）→1024へ滑らかに比例縮小。white-space は基底のまま=nowrap維持＝折返しゼロ。
   ★min-width:1024〜max-width:1370 のため ≥1371(完成版1440)/タブレット(768–1023)/SP(≤767) には一切適用されない。
   ★横padding(56px)は cqw基準を保つため据え置き。content幅57.778cqw・illust位置(%)・cta幅等の既存cqw/%は基底のまま比例追従。 */
@media (min-width: 1024px) and (max-width: 1370px) {
  .fv__inner  { padding-block: 5.723cqw; row-gap: 9.539cqw; }        /* 72 / 120 */
  .fv__illust { margin-top: 3.815cqw; }                             /* 48（位置%は基底のまま比例追従） */
  .fv__content { gap: 1.908cqw; }                                   /* 24 */

  .fv__badge { font-size: 2.544cqw; padding: 1.272cqw 1.908cqw; margin-bottom: 1.272cqw; } /* 32 / 16 24 / 16 */

  .fv__title-line1 { font-size: 6.359cqw; }                         /* 80 */
  .fv__title-line2 { font-size: 7.631cqw; margin-top: 1.272cqw; }   /* 96 / 16 */
  .fv__unit  { font-size: 4.452cqw; }                               /* 56（月額・円） */
  .fv__comma { font-size: 4.452cqw; }                               /* 56 */
  .fv__de    { font-size: 4.452cqw; }                               /* 56 */
  /* .fv__price（数字）と裸テキスト「自動化」は line2(7.631cqw) を継承 */

  .fv__lead { font-size: 1.908cqw; }                                /* 24 */

  .fv__cta { gap: 2.544cqw; padding: 3.180cqw 4.452cqw; }           /* 32 / 上下40・左右56 */
  .fv__cta-head { gap: 1.272cqw; }                                  /* 16 */
  .fv__cta-title { font-size: 3.180cqw; }                           /* 40 */
  .fv__cta-title .num { font-size: 6.105cqw; margin-inline: 0.318cqw; } /* 76.8 / 4 */
  .fv__cta-sub { font-size: 1.908cqw; }                             /* 24 */
  .fv__cta-btn { font-size: 2.544cqw; gap: 0.636cqw; padding: 1.908cqw 8.267cqw; } /* 32 / 8 / 上下24・左右104 */
}