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


/* =========================================================
  FV / 画像メイン型：PC
  ---------------------------------------------------------
  左側に大きなビジュアル、右側にコピーカードを配置する
  Variation D 専用CSSです。
========================================================= */


/* ---------------------------------------------------------
  FV全体
  ---------------------------------------------------------
  セクション全体の余白と背景を設定します。
  overflow: hidden は、装飾や画像がはみ出した時に切るためです。
--------------------------------------------------------- */
.fv-visual {
  position: relative;
  overflow: hidden;
  padding: 72px 0 88px;
  background:
    radial-gradient(circle at 15% 30%, rgba(95, 195, 184, 0.12), transparent 28%),
    linear-gradient(135deg, var(--color-bg) 0%, var(--color-sub) 100%);
}


/* ---------------------------------------------------------
  FV内側レイアウト
  ---------------------------------------------------------
  PCでは左に大きな画像、右にコピーカードを配置します。
  右側のカードを少し画像側に重ねるため、
  gridとtransformを使います。
--------------------------------------------------------- */
.fv-visual__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
  align-items: center;
  gap: 0;
}


/* ---------------------------------------------------------
  左側：ビジュアルエリア
  ---------------------------------------------------------
  メイン画像を大きく表示する領域です。
--------------------------------------------------------- */
.fv-visual__image-area {
  position: relative;
  min-height: 560px;
}


/* ---------------------------------------------------------
  メインビジュアル枠
  ---------------------------------------------------------
  左側に大きく表示する画像枠です。
  画像がない場合でも、背景色と枠でエリアが分かるようにしています。
--------------------------------------------------------- */
.fv-visual__image-frame {
  position: relative;
  width: 100%;
  min-height: 560px;
  overflow: hidden;
  border-radius: var(--radius-l) 0 0 var(--radius-l);
  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);
}


/* ---------------------------------------------------------
  メイン画像
  ---------------------------------------------------------
  画像を枠いっぱいに表示します。
  object-fit: cover で、比率が違う画像でもきれいに収めます。
--------------------------------------------------------- */
.fv-visual__image {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
}


/* ---------------------------------------------------------
  スライダー風ドット
  ---------------------------------------------------------
  左下にドットを置いて、ビジュアルに動きやストーリー感を出します。
  実際のスライダー機能を入れない場合でも、装飾として使えます。
--------------------------------------------------------- */
.fv-visual__dots {
  position: absolute;
  left: 32px;
  bottom: 28px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}


/* ドット1つ分 */
.fv-visual__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(31, 122, 122, 0.25);
}


/* 現在表示中のドット */
.fv-visual__dot--active {
  background: var(--color-main);
}


/* 01 / 04 のようなカウント表示 */
.fv-visual__count {
  margin-left: 12px;
  color: var(--color-text-light);
  font-size: 0.82rem;
  font-weight: 700;
}


/* ---------------------------------------------------------
  右側：コピーカード
  ---------------------------------------------------------
  見出し・説明・CTA・実績カードをまとめるパネルです。
  画像側に少し重ねて、印象的なレイアウトにします。
--------------------------------------------------------- */
.fv-visual__panel {
  position: relative;
  z-index: 3;
  margin-left: -72px;
  padding: 48px 44px 40px;
  border-radius: var(--radius-l);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(31, 122, 122, 0.12);
  box-shadow: var(--shadow-soft);
}


/* ---------------------------------------------------------
  補足ラベル
  ---------------------------------------------------------
  common.css の .c-label を使い、
  サービス種別や対象者を短く示します。
--------------------------------------------------------- */
.fv-visual__label {
  margin-bottom: 24px;
}


/* ---------------------------------------------------------
  メインコピー
  ---------------------------------------------------------
  右側パネルの主役です。
  課題解決やベネフィットが伝わる見出しにします。
--------------------------------------------------------- */
.fv-visual__title {
  color: var(--color-text);
  font-size: clamp(2.1rem, 3.6vw, 3.7rem);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0.04em;
}


/* ---------------------------------------------------------
  リード文
  ---------------------------------------------------------
  メインコピーの補足文です。
  長すぎると重くなるため、3〜4行程度を目安にします。
--------------------------------------------------------- */
.fv-visual__lead {
  margin-top: 24px;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.95;
}


/* ---------------------------------------------------------
  CTAエリア
  ---------------------------------------------------------
  メインボタンとサブリンクを縦に並べます。
--------------------------------------------------------- */
.fv-visual__buttons {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-top: 34px;
}


/* ---------------------------------------------------------
  メインCTAボタン
  ---------------------------------------------------------
  common.css の .c-btn を使いつつ、
  パネル内でしっかり目立つ横幅にします。
--------------------------------------------------------- */
.fv-visual__main-btn {
  min-width: 300px;
  gap: 12px;
}


/* ボタン左の小さなアイコン */
.fv-visual__btn-icon {
  font-size: 1rem;
}


/* ボタン右の矢印 */
.fv-visual__btn-arrow {
  margin-left: auto;
  font-size: 1.05rem;
}


/* ---------------------------------------------------------
  サブリンク
  ---------------------------------------------------------
  資料ダウンロードなど、メインCTAより控えめな導線です。
--------------------------------------------------------- */
.fv-visual__text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--color-main);
  color: var(--color-main);
  font-weight: 700;
}


/* ---------------------------------------------------------
  実績・信頼エリア
  ---------------------------------------------------------
  導入企業数や満足度などを表示するカード群です。
  点線の枠で、ワイヤーフレームの「信頼指標」感を出します。
--------------------------------------------------------- */
.fv-visual__trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 34px;
  padding: 16px;
  border: 1px dashed rgba(31, 122, 122, 0.28);
  border-radius: var(--radius-m);
}


/* ---------------------------------------------------------
  実績カード1つ分
  ---------------------------------------------------------
  アイコンと数値を横並びにします。
--------------------------------------------------------- */
.fv-visual__trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-s);
  background: var(--color-white);
  border: 1px solid rgba(31, 122, 122, 0.10);
}


/* 実績アイコン */
.fv-visual__trust-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(95, 195, 184, 0.14);
  color: var(--color-main);
  font-size: 1.2rem;
  font-weight: 700;
}


/* 実績テキスト全体 */
.fv-visual__trust-body {
  display: grid;
  gap: 2px;
}


/* 「実績」「満足度」などの小見出し */
.fv-visual__trust-label {
  color: var(--color-text-light);
  font-size: 0.75rem;
  font-weight: 700;
}


/* 数値 */
.fv-visual__trust-value {
  color: var(--color-text);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
}


/* 補足文 */
.fv-visual__trust-note {
  color: var(--color-text-light);
  font-size: 0.72rem;
}
/* =========================================================
  FV / 斜め分割レイアウト型：PC
  ---------------------------------------------------------
  左にコピー、右に斜めカットのメインビジュアルを置く
  Variation E 専用CSSです。
========================================================= */


/* ---------------------------------------------------------
  FV全体
  ---------------------------------------------------------
  セクション全体の余白と背景を設定します。
  overflow:hidden は斜め画像や装飾がはみ出した時に切るためです。
--------------------------------------------------------- */
.fv-slant {
  position: relative;
  overflow: hidden;
  padding: 72px 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内側レイアウト
  ---------------------------------------------------------
  PCでは「左：コピー」「右：画像」の2カラムにします。
  gapを小さめにして、右画像を大きく見せます。
--------------------------------------------------------- */
.fv-slant__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(480px, 1.14fr);
  align-items: stretch;
  gap: 0;
  min-height: 620px;
}


/* ---------------------------------------------------------
  左側コンテンツ
  ---------------------------------------------------------
  コピー・実績・CTAを縦に並べるエリアです。
  justify-content:center で縦中央に寄せます。
--------------------------------------------------------- */
.fv-slant__content {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: start;
  padding: 56px 48px 56px 0;
}


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


/* ---------------------------------------------------------
  メインコピー
  ---------------------------------------------------------
  FVで最も目立たせる見出しです。
  clamp()で画面幅に合わせて自然にサイズ調整します。
--------------------------------------------------------- */
.fv-slant__title {
  color: var(--color-text);
  font-size: clamp(2.5rem, 4.8vw, 4.5rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.04em;
}


/* ---------------------------------------------------------
  リード文
  ---------------------------------------------------------
  メインコピーの補足説明です。
  文字を少し落ち着かせ、読みやすい行間にします。
--------------------------------------------------------- */
.fv-slant__lead {
  margin-top: 28px;
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 2;
}


/* ---------------------------------------------------------
  実績・信頼要素
  ---------------------------------------------------------
  導入社数・満足度などを横並びカードで見せます。
  ワイヤーフレームの小さな実績ボックス部分です。
--------------------------------------------------------- */
.fv-slant__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}


/* ---------------------------------------------------------
  実績カード1つ分
  ---------------------------------------------------------
  アイコンとテキストを横並びにします。
--------------------------------------------------------- */
.fv-slant__stat {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 170px;
  padding: 14px 16px;
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(31, 122, 122, 0.14);
  box-shadow: var(--shadow-card);
}


/* ---------------------------------------------------------
  実績アイコン
  ---------------------------------------------------------
  小さな丸アイコンです。
--------------------------------------------------------- */
.fv-slant__stat-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(95, 195, 184, 0.14);
  color: var(--color-main);
  font-size: 1rem;
  font-weight: 700;
}


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


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


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


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


/* ---------------------------------------------------------
  CTAボタン
  ---------------------------------------------------------
  common.css の .c-btn を使いながら、
  FV用に少しだけ横幅を調整します。
--------------------------------------------------------- */
.fv-slant__main-btn,
.fv-slant__sub-btn {
  min-width: 210px;
  gap: 12px;
}


/* ボタン内の矢印 */
.fv-slant__btn-arrow {
  font-size: 1.05rem;
  line-height: 1;
}


/* ---------------------------------------------------------
  右側ビジュアルエリア
  ---------------------------------------------------------
  大きな画像を入れる場所です。
  高さを左側と揃えるため、height:100% を使います。
--------------------------------------------------------- */
.fv-slant__visual {
  position: relative;
  min-width: 0;
}


/* ---------------------------------------------------------
  斜め画像枠
  ---------------------------------------------------------
  clip-path で左側を斜めに切ります。
  ワイヤーフレームの「斜め分割」部分です。
--------------------------------------------------------- */
.fv-slant__image-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 620px;
  overflow: hidden;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  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.10);
}


/* ---------------------------------------------------------
  画像本体
  ---------------------------------------------------------
  斜め枠いっぱいに画像を敷きます。
--------------------------------------------------------- */
.fv-slant__image {
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
}


/* ---------------------------------------------------------
  画像が無い時の仮枠
  ---------------------------------------------------------
  画像未設定時に使うプレースホルダーです。
--------------------------------------------------------- */
.fv-slant__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 620px;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  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);
  color: var(--color-text-light);
  font-weight: 700;
  text-align: center;
}


/* ---------------------------------------------------------
  PC専用改行
  ---------------------------------------------------------
  <br class="u-pc"> をPCでは表示します。
--------------------------------------------------------- */
.u-pc {
  display: inline;
}
/* =========================================================
  FV / 背景ビジュアル＋コピーカード型：PC
  ---------------------------------------------------------
  背景に大きなビジュアルを敷き、
  その上にコピーカードと信頼バーを重ねるVariation Fです。
========================================================= */


/* ---------------------------------------------------------
  FV全体
  ---------------------------------------------------------
  セクション全体の余白・背景を設定します。
  overflow:hidden は、背景画像や装飾のはみ出しを防ぐためです。
--------------------------------------------------------- */
.fv-bgcard {
  position: relative;
  overflow: hidden;
  padding: 72px 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内側
  ---------------------------------------------------------
  背景ビジュアル、コピーカード、信頼バーを重ねる土台です。
  min-height でFVらしい高さを確保します。
--------------------------------------------------------- */
.fv-bgcard__inner {
  position: relative;
  min-height: 660px;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid rgba(31, 122, 122, 0.12);
  box-shadow: var(--shadow-soft);
}


/* ---------------------------------------------------------
  背景ビジュアルエリア
  ---------------------------------------------------------
  FVの背面に大きく敷く画像エリアです。
  画面全体に広がるメインビジュアルとして使います。
--------------------------------------------------------- */
.fv-bgcard__visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  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);
}


/* ---------------------------------------------------------
  背景画像
  ---------------------------------------------------------
  背景ビジュアルを全面に敷きます。
  画像がない時は、上の背景線だけでもワイヤーフレーム確認できます。
--------------------------------------------------------- */
.fv-bgcard__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ---------------------------------------------------------
  背景オーバーレイ
  ---------------------------------------------------------
  背景画像の上に白い膜を重ねて、コピーカードが見やすくなるようにします。
--------------------------------------------------------- */
.fv-bgcard__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      rgba(252, 254, 254, 0.82) 0%,
      rgba(252, 254, 254, 0.66) 46%,
      rgba(252, 254, 254, 0.30) 100%
    );
  pointer-events: none;
}


/* ---------------------------------------------------------
  コピーカード
  ---------------------------------------------------------
  背景ビジュアルの上に浮かせるカードです。
  左下寄りに配置し、ワイヤーフレームの構成に寄せます。
--------------------------------------------------------- */
.fv-bgcard__copy-card {
  position: absolute;
  left: 36px;
  bottom: 132px;
  z-index: 3;
  width: min(100% - 72px, 560px);
  padding: 38px 36px;
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(31, 122, 122, 0.14);
  box-shadow: var(--shadow-soft);
}


/* ---------------------------------------------------------
  補足ラベル
  ---------------------------------------------------------
  common.css の .c-label をベースに、
  コピーカード内の上部に配置します。
--------------------------------------------------------- */
.fv-bgcard__label {
  margin-bottom: 22px;
}


/* ---------------------------------------------------------
  メインコピー
  ---------------------------------------------------------
  コピーカード内で最も目立つ見出しです。
  2〜3行で強いベネフィットを伝えます。
--------------------------------------------------------- */
.fv-bgcard__title {
  color: var(--color-text);
  font-size: clamp(2.1rem, 3.6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0.04em;
}


/* ---------------------------------------------------------
  リード文
  ---------------------------------------------------------
  メインコピーの補足説明です。
--------------------------------------------------------- */
.fv-bgcard__lead {
  margin-top: 20px;
  color: var(--color-text);
  font-size: 0.98rem;
  line-height: 1.9;
}


/* ---------------------------------------------------------
  CTAエリア
  ---------------------------------------------------------
  メインボタンとサブリンクを横並びにします。
--------------------------------------------------------- */
.fv-bgcard__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}


/* ---------------------------------------------------------
  メインCTAボタン
  ---------------------------------------------------------
  common.css の .c-btn を使いながら、
  カード内に収まりやすいサイズにします。
--------------------------------------------------------- */
.fv-bgcard__main-btn {
  min-width: 190px;
  min-height: 52px;
  gap: 12px;
}


/* ---------------------------------------------------------
  ボタン矢印
  ---------------------------------------------------------
  右方向の行動を示す矢印です。
--------------------------------------------------------- */
.fv-bgcard__btn-arrow {
  font-size: 1.05rem;
  line-height: 1;
}


/* ---------------------------------------------------------
  サブリンク
  ---------------------------------------------------------
  「サービス内容を見る」などの補助導線です。
  ボタンより控えめに表示します。
--------------------------------------------------------- */
.fv-bgcard__text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--color-main);
  color: var(--color-main);
  font-weight: 700;
}


/* ---------------------------------------------------------
  信頼・ロゴバー
  ---------------------------------------------------------
  FV下部に配置する実績・受賞歴などの帯です。
  横長のバーにすることで、ワイヤーフレーム下部の信頼要素を再現します。
--------------------------------------------------------- */
.fv-bgcard__trust-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 104px;
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid rgba(31, 122, 122, 0.12);
}


/* ---------------------------------------------------------
  信頼要素1つ分
  ---------------------------------------------------------
  4つの実績情報を均等に並べます。
--------------------------------------------------------- */
.fv-bgcard__trust-item {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 16px 18px;
  text-align: center;
}


/* 2つ目以降に区切り線を入れる */
.fv-bgcard__trust-item + .fv-bgcard__trust-item {
  border-left: 1px solid rgba(31, 122, 122, 0.12);
}


/* ---------------------------------------------------------
  信頼要素の装飾
  ---------------------------------------------------------
  月桂樹風・受賞感を出す小さな装飾です。
  実案件ではSVGアイコンに差し替えてOKです。
--------------------------------------------------------- */
.fv-bgcard__trust-decoration {
  color: var(--color-main);
  font-size: 1rem;
  line-height: 1;
}


/* ---------------------------------------------------------
  信頼要素ラベル
  ---------------------------------------------------------
  「導入社数」「継続率」などの項目名です。
--------------------------------------------------------- */
.fv-bgcard__trust-label {
  color: var(--color-text-light);
  font-size: 0.75rem;
  font-weight: 700;
}


/* ---------------------------------------------------------
  信頼要素の数値
  ---------------------------------------------------------
  一番目立たせたい実績数値です。
--------------------------------------------------------- */
.fv-bgcard__trust-value {
  color: var(--color-text);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
}


/* ---------------------------------------------------------
  信頼要素の補足
  ---------------------------------------------------------
  「突破」「※2024年実績」などの小さい説明です。
--------------------------------------------------------- */
.fv-bgcard__trust-note {
  color: var(--color-text-light);
  font-size: 0.72rem;
}