/* =========================================================
  FV / ファーストビュー
  ---------------------------------------------------------
  このCSSは、FV専用のレイアウト・装飾です。
  色・角丸・影・横幅などは common.css の :root 変数を使います。
========================================================= */


/* =========================================================
  FV / コピー＋特徴カード連動型：PC
  ---------------------------------------------------------
  左にコピー・CTA、右に画像と特徴カードを配置する
  Variation G 専用CSSです。
========================================================= */


/* ---------------------------------------------------------
  FV全体
  ---------------------------------------------------------
  セクション全体の背景と余白を設定します。
--------------------------------------------------------- */
.fv-feature {
  position: relative;
  overflow: hidden;
  padding: 88px 0 96px;
  background:
    radial-gradient(circle at 16% 24%, rgba(95, 195, 184, 0.12), transparent 28%),
    linear-gradient(135deg, var(--color-bg) 0%, var(--color-sub) 100%);
}


/* ---------------------------------------------------------
  FV内側レイアウト
  ---------------------------------------------------------
  PCでは左にコピー、右に画像＋特徴カードを置く2カラムです。
--------------------------------------------------------- */
.fv-feature__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(460px, 1.05fr);
  align-items: center;
  gap: 72px;
}


/* ---------------------------------------------------------
  左側コンテンツ
  ---------------------------------------------------------
  ラベル・見出し・リード文・CTAをまとめるエリアです。
--------------------------------------------------------- */
.fv-feature__content {
  position: relative;
  z-index: 2;
}


/* ---------------------------------------------------------
  補足ラベル
  ---------------------------------------------------------
  common.css の .c-label に、FV用の余白を追加します。
--------------------------------------------------------- */
.fv-feature__label {
  margin-bottom: 24px;
}


/* ---------------------------------------------------------
  メインコピー
  ---------------------------------------------------------
  FVで最も目立たせる見出しです。
--------------------------------------------------------- */
.fv-feature__title {
  color: var(--color-text);
  font-size: clamp(2.35rem, 4.4vw, 4.15rem);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: 0.04em;
}


/* ---------------------------------------------------------
  リード文
  ---------------------------------------------------------
  メインコピーを補足する説明文です。
--------------------------------------------------------- */
.fv-feature__lead {
  margin-top: 28px;
  color: var(--color-text);
  font-size: 1.02rem;
  line-height: 2;
}


/* ---------------------------------------------------------
  CTAエリア
  ---------------------------------------------------------
  メインCTAとサブCTAを横並びにします。
--------------------------------------------------------- */
.fv-feature__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}


/* ---------------------------------------------------------
  CTAボタン
  ---------------------------------------------------------
  common.css の .c-btn を使いつつ、FV用の横幅に調整します。
--------------------------------------------------------- */
.fv-feature__main-btn,
.fv-feature__sub-btn {
  min-width: 220px;
  gap: 10px;
}


/* ---------------------------------------------------------
  ボタン内アイコン
  ---------------------------------------------------------
  ダウンロードや資料感を出す小さなアイコンです。
--------------------------------------------------------- */
.fv-feature__btn-icon {
  font-size: 1rem;
  line-height: 1;
}


/* ---------------------------------------------------------
  右側：画像＋特徴カードエリア
  ---------------------------------------------------------
  メイン画像と特徴カード3枚を縦に並べる領域です。
--------------------------------------------------------- */
.fv-feature__visual-area {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 24px;
}


/* ---------------------------------------------------------
  メイン画像枠
  ---------------------------------------------------------
  ワイヤーフレーム右上の大きな画像エリアです。
--------------------------------------------------------- */
.fv-feature__image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-m);
  background:
    linear-gradient(45deg, transparent 49.7%, rgba(31, 122, 122, 0.18) 50%, transparent 50.3%),
    linear-gradient(-45deg, transparent 49.7%, rgba(31, 122, 122, 0.18) 50%, transparent 50.3%),
    rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(31, 122, 122, 0.12);
  box-shadow: var(--shadow-card);
}


/* ---------------------------------------------------------
  メイン画像
  ---------------------------------------------------------
  画像を枠いっぱいに表示します。
--------------------------------------------------------- */
.fv-feature__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ---------------------------------------------------------
  特徴カード一覧
  ---------------------------------------------------------
  画像の下に3枚の特徴カードを並べます。
--------------------------------------------------------- */
.fv-feature__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}


/* ---------------------------------------------------------
  特徴カード1枚
  ---------------------------------------------------------
  アイコン・見出し・説明文を縦に並べます。
--------------------------------------------------------- */
.fv-feature__card {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 24px 18px 22px;
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(31, 122, 122, 0.12);
  box-shadow: var(--shadow-card);
  text-align: center;
}


/* ---------------------------------------------------------
  特徴カードのアイコン
  ---------------------------------------------------------
  丸型のアイコンを配置します。
--------------------------------------------------------- */
.fv-feature__card-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(95, 195, 184, 0.14);
  border: 1px solid rgba(31, 122, 122, 0.12);
  color: var(--color-main);
  font-size: 1.45rem;
  font-weight: 700;
}


/* ---------------------------------------------------------
  特徴カード見出し
  ---------------------------------------------------------
  「かんたん導入」などの短い強みです。
--------------------------------------------------------- */
.fv-feature__card-title {
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.5;
}


/* ---------------------------------------------------------
  特徴カード説明文
  ---------------------------------------------------------
  強みを補足する短いテキストです。
--------------------------------------------------------- */
.fv-feature__card-text {
  color: var(--color-text-light);
  font-size: 0.82rem;
  line-height: 1.7;
}
/* =========================================================
  FV / 動画・実績帯付き型：PC
  ---------------------------------------------------------
  左にコピー、右に動画・デモ枠、
  下に実績・数値バンドを配置するVariation H専用CSSです。
========================================================= */


/* ---------------------------------------------------------
  FV全体
  ---------------------------------------------------------
  セクション全体の余白と背景を設定します。
--------------------------------------------------------- */
.fv-demo {
  position: relative;
  overflow: hidden;
  padding: 80px 0 88px;
  background:
    radial-gradient(circle at 18% 24%, rgba(95, 195, 184, 0.12), transparent 28%),
    linear-gradient(135deg, var(--color-bg) 0%, var(--color-sub) 100%);
}


/* ---------------------------------------------------------
  FV内側
  ---------------------------------------------------------
  全体をカード状にまとめる外枠です。
  ワイヤーフレームのブラウザ画面のようなまとまりを作ります。
--------------------------------------------------------- */
.fv-demo__inner {
  position: relative;
  padding: 56px 48px 34px;
  border-radius: var(--radius-l);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(31, 122, 122, 0.12);
  box-shadow: var(--shadow-soft);
}


/* ---------------------------------------------------------
  上段メインレイアウト
  ---------------------------------------------------------
  PCでは左コピー・右動画の2カラムにします。
--------------------------------------------------------- */
.fv-demo__main {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  align-items: center;
  gap: 64px;
}


/* ---------------------------------------------------------
  左側コピーエリア
  ---------------------------------------------------------
  ラベル・見出し・リード文・CTAをまとめる領域です。
--------------------------------------------------------- */
.fv-demo__content {
  min-width: 0;
}


/* ---------------------------------------------------------
  補足ラベル
  ---------------------------------------------------------
  common.css の .c-label に、FV用の余白を追加します。
--------------------------------------------------------- */
.fv-demo__label {
  margin-bottom: 24px;
}


/* ---------------------------------------------------------
  メインコピー
  ---------------------------------------------------------
  FVの主役となる見出しです。
--------------------------------------------------------- */
.fv-demo__title {
  color: var(--color-text);
  font-size: clamp(2.35rem, 4.4vw, 4.1rem);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: 0.04em;
}


/* ---------------------------------------------------------
  リード文
  ---------------------------------------------------------
  メインコピーを補足する説明文です。
--------------------------------------------------------- */
.fv-demo__lead {
  margin-top: 26px;
  color: var(--color-text);
  font-size: 1.02rem;
  line-height: 2;
}


/* ---------------------------------------------------------
  CTAエリア
  ---------------------------------------------------------
  メインCTAとサブCTAを横並びにします。
--------------------------------------------------------- */
.fv-demo__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}


/* ---------------------------------------------------------
  CTAボタン
  ---------------------------------------------------------
  common.css の .c-btn を使用しつつ、
  このFVに合わせて幅を調整します。
--------------------------------------------------------- */
.fv-demo__main-btn {
  min-width: 280px;
  gap: 10px;
}

.fv-demo__sub-btn {
  min-width: 210px;
  gap: 10px;
}


/* ---------------------------------------------------------
  CTA内の小アイコン
  ---------------------------------------------------------
  メール・矢印などの補助アイコンです。
--------------------------------------------------------- */
.fv-demo__btn-icon,
.fv-demo__btn-arrow {
  font-size: 1rem;
  line-height: 1;
}


/* ---------------------------------------------------------
  CTA補足文
  ---------------------------------------------------------
  「1分で完了します」のような安心材料です。
--------------------------------------------------------- */
.fv-demo__microcopy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--color-text-light);
  font-size: 0.86rem;
  font-weight: 700;
}


/* ---------------------------------------------------------
  右側：動画エリア
  ---------------------------------------------------------
  動画・デモ枠を配置する領域です。
--------------------------------------------------------- */
.fv-demo__video-area {
  min-width: 0;
}


/* ---------------------------------------------------------
  動画カード
  ---------------------------------------------------------
  動画やデモ画面を見せるための大きな枠です。
--------------------------------------------------------- */
.fv-demo__video-card {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-l);
  background:
    linear-gradient(45deg, transparent 49.7%, rgba(31, 122, 122, 0.16) 50%, transparent 50.3%),
    linear-gradient(-45deg, transparent 49.7%, rgba(31, 122, 122, 0.16) 50%, transparent 50.3%),
    rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(31, 122, 122, 0.14);
  box-shadow: var(--shadow-card);
}


/* ---------------------------------------------------------
  再生ボタン
  ---------------------------------------------------------
  動画・デモであることを直感的に伝える丸ボタンです。
--------------------------------------------------------- */
.fv-demo__play-button {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 1px solid rgba(31, 122, 122, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-main);
  font-size: 2rem;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}


/* ---------------------------------------------------------
  動画枠の説明テキスト
  ---------------------------------------------------------
  「動画・デモ」などの補足を表示します。
--------------------------------------------------------- */
.fv-demo__video-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28%;
  color: var(--color-text-light);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
}


/* ---------------------------------------------------------
  実際にvideoタグを使う場合
  ---------------------------------------------------------
  動画を枠いっぱいに表示します。
--------------------------------------------------------- */
.fv-demo__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ---------------------------------------------------------
  実績・数値バンド
  ---------------------------------------------------------
  FV下部に置く横長の信頼要素です。
--------------------------------------------------------- */
.fv-demo__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 56px;
  padding: 22px 0;
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(31, 122, 122, 0.12);
  box-shadow: var(--shadow-card);
}


/* ---------------------------------------------------------
  実績1項目
  ---------------------------------------------------------
  アイコン・数値・補足文を横並びで配置します。
--------------------------------------------------------- */
.fv-demo__stat {
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 32px;
}


/* 2項目目以降に縦線を入れる */
.fv-demo__stat + .fv-demo__stat {
  border-left: 1px solid rgba(31, 122, 122, 0.14);
}


/* ---------------------------------------------------------
  実績アイコン
  ---------------------------------------------------------
  丸いアイコンで、各数値の意味を視覚的に伝えます。
--------------------------------------------------------- */
.fv-demo__stat-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(95, 195, 184, 0.14);
  color: var(--color-main);
  font-size: 1.45rem;
}


/* ---------------------------------------------------------
  実績テキスト全体
  ---------------------------------------------------------
  ラベル・数値・補足文を縦に並べます。
--------------------------------------------------------- */
.fv-demo__stat-body {
  display: grid;
  gap: 2px;
}


/* 実績ラベル */
.fv-demo__stat-label {
  color: var(--color-text-light);
  font-size: 0.82rem;
  font-weight: 700;
}


/* 実績数値 */
.fv-demo__stat-value {
  color: var(--color-text);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
}


/* 数値の単位 */
.fv-demo__stat-value span {
  margin-left: 2px;
  font-size: 0.92rem;
}


/* 実績補足 */
.fv-demo__stat-note {
  color: var(--color-text-light);
  font-size: 0.78rem;
}


/* ---------------------------------------------------------
  スクロール誘導
  ---------------------------------------------------------
  下向き矢印を作り、次のセクションへ視線を誘導します。
--------------------------------------------------------- */
.fv-demo__scroll {
  display: grid;
  place-items: center;
  margin-top: 28px;
}

.fv-demo__scroll span {
  width: 24px;
  height: 24px;
  border-right: 2px solid var(--color-main);
  border-bottom: 2px solid var(--color-main);
  transform: rotate(45deg);
}
/* =========================================================
  FV / アーチ型ビジュアル：PC
  ---------------------------------------------------------
  左にコピー、右にアーチ型ビジュアルを置く
  Variation I 専用CSSです。
========================================================= */


/* ---------------------------------------------------------
  FV全体
  ---------------------------------------------------------
  セクション全体の余白・背景を設定します。
--------------------------------------------------------- */
.fv-arch {
  position: relative;
  overflow: hidden;
  padding: 88px 0 72px;
  background:
    radial-gradient(circle at 18% 24%, rgba(95, 195, 184, 0.12), transparent 28%),
    linear-gradient(135deg, var(--color-bg) 0%, var(--color-sub) 100%);
}


/* ---------------------------------------------------------
  FV内側レイアウト
  ---------------------------------------------------------
  PCでは左にコピー、右にアーチ型画像を置く2カラムです。
--------------------------------------------------------- */
.fv-arch__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.88fr);
  align-items: center;
  gap: 72px;
  min-height: 600px;
}


/* ---------------------------------------------------------
  左側コピーエリア
  ---------------------------------------------------------
  見出し・リード文・CTAをまとめる場所です。
--------------------------------------------------------- */
.fv-arch__content {
  position: relative;
  z-index: 2;
}


/* ---------------------------------------------------------
  メインコピー
  ---------------------------------------------------------
  FVで最も目立たせる見出しです。
  文字間を少し広げて、上品で印象的に見せます。
--------------------------------------------------------- */
.fv-arch__title {
  color: var(--color-text);
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.08em;
}


/* ---------------------------------------------------------
  リード文
  ---------------------------------------------------------
  メインコピーの補足文です。
  余白をしっかり取り、読みやすくします。
--------------------------------------------------------- */
.fv-arch__lead {
  margin-top: 32px;
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 2;
}


/* ---------------------------------------------------------
  CTAエリア
  ---------------------------------------------------------
  ボタンを配置する場所です。
--------------------------------------------------------- */
.fv-arch__buttons {
  margin-top: 40px;
}


/* ---------------------------------------------------------
  CTAボタン
  ---------------------------------------------------------
  common.css の .c-btn を使いつつ、
  FV用に少し横幅を広めにします。
--------------------------------------------------------- */
.fv-arch__btn {
  min-width: 300px;
  gap: 16px;
}


/* ---------------------------------------------------------
  CTA矢印
  ---------------------------------------------------------
  ボタン内の右向き矢印です。
--------------------------------------------------------- */
.fv-arch__btn-arrow {
  font-size: 1.1rem;
  line-height: 1;
}


/* ---------------------------------------------------------
  右側ビジュアルエリア
  ---------------------------------------------------------
  アーチ型画像を置く場所です。
--------------------------------------------------------- */
.fv-arch__visual {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
}


/* ---------------------------------------------------------
  アーチ型画像枠
  ---------------------------------------------------------
  上部を大きく丸めて、アーチ型にします。
  border-radius: 上左 上右 下右 下左 の順です。
--------------------------------------------------------- */
.fv-arch__image-frame {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 3 / 4.2;
  overflow: hidden;
  border-radius: 220px 220px var(--radius-s) var(--radius-s);
  background:
    linear-gradient(45deg, transparent 49.7%, rgba(31, 122, 122, 0.18) 50%, transparent 50.3%),
    linear-gradient(-45deg, transparent 49.7%, rgba(31, 122, 122, 0.18) 50%, transparent 50.3%),
    rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(31, 122, 122, 0.16);
  box-shadow: var(--shadow-soft);
}


/* ---------------------------------------------------------
  アーチ型画像の外枠装飾
  ---------------------------------------------------------
  画像の少し外側にもう1本線を出して、
  ワイヤーフレームの二重枠風にします。
--------------------------------------------------------- */
.fv-arch__image-frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 2;
  border: 1px solid rgba(31, 122, 122, 0.18);
  border-radius: 210px 210px var(--radius-s) var(--radius-s);
  pointer-events: none;
}


/* ---------------------------------------------------------
  メイン画像
  ---------------------------------------------------------
  アーチ型の枠いっぱいに画像を表示します。
--------------------------------------------------------- */
.fv-arch__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ---------------------------------------------------------
  画像が無い時の仮枠
  ---------------------------------------------------------
  imgの代わりに使えるプレースホルダーです。
--------------------------------------------------------- */
.fv-arch__placeholder {
  display: grid;
  place-items: center;
  width: min(100%, 420px);
  aspect-ratio: 3 / 4.2;
  border-radius: 220px 220px var(--radius-s) var(--radius-s);
  background:
    linear-gradient(45deg, transparent 49.7%, rgba(31, 122, 122, 0.18) 50%, transparent 50.3%),
    linear-gradient(-45deg, transparent 49.7%, rgba(31, 122, 122, 0.18) 50%, transparent 50.3%),
    rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(31, 122, 122, 0.16);
  color: var(--color-text-light);
  font-weight: 700;
  text-align: center;
}


/* ---------------------------------------------------------
  スクロール誘導
  ---------------------------------------------------------
  下向き矢印を作り、次のセクションへの流れを出します。
--------------------------------------------------------- */
.fv-arch__scroll {
  display: grid;
  place-items: center;
  margin-top: 12px;
}

.fv-arch__scroll span {
  width: 22px;
  height: 22px;
  border-right: 2px solid var(--color-main);
  border-bottom: 2px solid var(--color-main);
  transform: rotate(45deg);
}


/* ---------------------------------------------------------
  PC専用改行
  ---------------------------------------------------------
  <br class="u-pc"> をPCでは表示します。
--------------------------------------------------------- */
.u-pc {
  display: inline;
}
/* =========================================================
  FV / オーガニック曲線ビジュアル型：PC
  ---------------------------------------------------------
  左にコピー、右にオーガニック形状のビジュアルを置く
  Variation J 専用CSSです。
========================================================= */


/* ---------------------------------------------------------
  FV全体
  ---------------------------------------------------------
  セクション全体の余白と背景を設定します。
  position: relative は装飾の疑似要素を重ねるために必要です。
--------------------------------------------------------- */
.fv-organic {
  position: relative;
  overflow: hidden;
  padding: 88px 0 72px;
  background:
    radial-gradient(circle at 18% 24%, rgba(95, 195, 184, 0.12), transparent 28%),
    linear-gradient(135deg, var(--color-bg) 0%, var(--color-sub) 100%);
}


/* ---------------------------------------------------------
  背景のやわらかい曲線装飾（上）
  ---------------------------------------------------------
  ワイヤーフレームにある、上側のうねる線を疑似要素で表現します。
--------------------------------------------------------- */
.fv-organic::before {
  content: "";
  position: absolute;
  left: -8%;
  top: 110px;
  width: 70%;
  height: 220px;
  border-top: 2px solid rgba(31, 122, 122, 0.10);
  border-radius: 50% 50% 45% 55% / 70% 55% 45% 30%;
  transform: rotate(3deg);
  pointer-events: none;
}


/* ---------------------------------------------------------
  背景のやわらかい曲線装飾（下）
  ---------------------------------------------------------
  下側のうねる線です。
--------------------------------------------------------- */
.fv-organic::after {
  content: "";
  position: absolute;
  left: -6%;
  bottom: 42px;
  width: 62%;
  height: 180px;
  border-top: 2px solid rgba(31, 122, 122, 0.10);
  border-radius: 55% 45% 50% 50% / 60% 50% 50% 40%;
  transform: rotate(-3deg);
  pointer-events: none;
}


/* ---------------------------------------------------------
  FV内側レイアウト
  ---------------------------------------------------------
  PCでは左にコピー、右にビジュアルを置く2カラムです。
--------------------------------------------------------- */
.fv-organic__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.98fr);
  align-items: center;
  gap: 72px;
  min-height: 600px;
}


/* ---------------------------------------------------------
  左側コピーエリア
  ---------------------------------------------------------
  見出し・本文・CTAをまとめる領域です。
--------------------------------------------------------- */
.fv-organic__content {
  position: relative;
  z-index: 2;
}


/* ---------------------------------------------------------
  メインコピー
  ---------------------------------------------------------
  一番目立たせたい見出しです。
  大きめサイズと少し広めの字間で印象的に見せます。
--------------------------------------------------------- */
.fv-organic__title {
  color: var(--color-text);
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.05em;
}


/* ---------------------------------------------------------
  リード文
  ---------------------------------------------------------
  メインコピーの補足です。
  少し小さめにして読みやすい行間を与えます。
--------------------------------------------------------- */
.fv-organic__lead {
  max-width: 34em;
  margin-top: 28px;
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 2;
}


/* ---------------------------------------------------------
  CTAエリア
  ---------------------------------------------------------
  メインCTAとサブCTAを横並びにします。
--------------------------------------------------------- */
.fv-organic__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}


/* ---------------------------------------------------------
  メインCTA
  ---------------------------------------------------------
  一番押してほしいボタンです。
--------------------------------------------------------- */
.fv-organic__main-btn {
  min-width: 220px;
  gap: 12px;
}


/* ---------------------------------------------------------
  サブCTA
  ---------------------------------------------------------
  common.css の .c-btn をベースに、
  白背景・枠線ありの第2ボタンとして見せます。
--------------------------------------------------------- */
.fv-organic__sub-btn {
  min-width: 220px;
  gap: 10px;
  background: var(--color-white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: none;
}


/* ---------------------------------------------------------
  サブCTA hover時
  ---------------------------------------------------------
  少し浮くようにして、押せる感じを出します。
--------------------------------------------------------- */
.fv-organic__sub-btn:hover {
  transform: translateY(-2px);
}


/* ---------------------------------------------------------
  ボタン内アイコン・矢印
  ---------------------------------------------------------
  ボタンの補助視覚要素です。
--------------------------------------------------------- */
.fv-organic__btn-arrow,
.fv-organic__btn-icon {
  font-size: 1rem;
  line-height: 1;
}


/* ---------------------------------------------------------
  右側ビジュアルエリア
  ---------------------------------------------------------
  オーガニック形状の画像枠を配置するエリアです。
--------------------------------------------------------- */
.fv-organic__visual {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: center;
  min-height: 520px;
}


/* ---------------------------------------------------------
  装飾ドット
  ---------------------------------------------------------
  周辺に浮かぶ丸い装飾です。
--------------------------------------------------------- */
.fv-organic__dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(31, 122, 122, 0.12);
  pointer-events: none;
}

.fv-organic__dot--lg {
  left: 4%;
  bottom: 18%;
  width: 36px;
  height: 36px;
}

.fv-organic__dot--sm {
  left: -2%;
  bottom: 12%;
  width: 12px;
  height: 12px;
  background: rgba(31, 122, 122, 0.08);
}


/* ---------------------------------------------------------
  オーガニック形状の画像枠
  ---------------------------------------------------------
  border-radius を複雑に設定して、
  有機的な曲線フレームを作ります。
--------------------------------------------------------- */
.fv-organic__image-frame {
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 42% 58% 45% 55% / 39% 45% 55% 61%;
  background:
    linear-gradient(45deg, transparent 49.7%, rgba(31, 122, 122, 0.16) 50%, transparent 50.3%),
    linear-gradient(-45deg, transparent 49.7%, rgba(31, 122, 122, 0.16) 50%, transparent 50.3%),
    rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(31, 122, 122, 0.16);
  box-shadow: var(--shadow-soft);
}


/* ---------------------------------------------------------
  外側のライン装飾
  ---------------------------------------------------------
  ワイヤーフレームの“輪郭線”っぽさを出すための二重枠です。
--------------------------------------------------------- */
.fv-organic__image-frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 2;
  border: 1px solid rgba(31, 122, 122, 0.16);
  border-radius: 41% 59% 47% 53% / 41% 44% 56% 59%;
  pointer-events: none;
}


/* ---------------------------------------------------------
  メイン画像
  ---------------------------------------------------------
  画像を枠いっぱいに表示します。
--------------------------------------------------------- */
.fv-organic__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ---------------------------------------------------------
  プレースホルダー
  ---------------------------------------------------------
  画像が無い時の確認用です。
--------------------------------------------------------- */
.fv-organic__placeholder {
  display: grid;
  place-items: center;
  width: min(100%, 500px);
  aspect-ratio: 1 / 1;
  border-radius: 42% 58% 45% 55% / 39% 45% 55% 61%;
  background:
    linear-gradient(45deg, transparent 49.7%, rgba(31, 122, 122, 0.16) 50%, transparent 50.3%),
    linear-gradient(-45deg, transparent 49.7%, rgba(31, 122, 122, 0.16) 50%, transparent 50.3%),
    rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(31, 122, 122, 0.16);
  color: var(--color-text-light);
  font-weight: 700;
  text-align: center;
}


/* ---------------------------------------------------------
  スクロール誘導
  ---------------------------------------------------------
  下向き矢印を作り、次のセクションに視線を誘導します。
--------------------------------------------------------- */
.fv-organic__scroll {
  display: grid;
  place-items: center;
  margin-top: 8px;
}

.fv-organic__scroll span {
  width: 22px;
  height: 22px;
  border-right: 2px solid var(--color-main);
  border-bottom: 2px solid var(--color-main);
  transform: rotate(45deg);
}