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


/* =========================================================
  FV / 斜めパラレル型ビジュアル：PC
  ---------------------------------------------------------
  左にコピー、右に斜めの平行四辺形風ビジュアルを置く
  Variation K 専用CSSです。
========================================================= */


/* ---------------------------------------------------------
  FV全体
  ---------------------------------------------------------
  セクション全体の背景と余白を設定します。
  overflow:hidden は、斜め枠や装飾のはみ出しを防ぐためです。
--------------------------------------------------------- */
.fv-parallel {
  position: relative;
  overflow: hidden;
  padding: 88px 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カラムです。
  右側を広めにして、斜めビジュアルを大きく見せます。
--------------------------------------------------------- */
.fv-parallel__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(460px, 1.22fr);
  align-items: center;
  gap: 56px;
  min-height: 620px;
}


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


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


/* ---------------------------------------------------------
  メインコピー
  ---------------------------------------------------------
  FVで最も目立たせる見出しです。
  行数は2〜3行程度にすると、このレイアウトに合います。
--------------------------------------------------------- */
.fv-parallel__title {
  color: var(--color-text);
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.05em;
}


/* ---------------------------------------------------------
  リード文
  ---------------------------------------------------------
  メインコピーの補足文です。
  左側の幅が狭めなので、長くしすぎないのがポイントです。
--------------------------------------------------------- */
.fv-parallel__lead {
  max-width: 30em;
  margin-top: 28px;
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 2;
}


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


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


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


/* ---------------------------------------------------------
  右側ビジュアルエリア
  ---------------------------------------------------------
  斜めパラレル型の画像枠を配置する場所です。
--------------------------------------------------------- */
.fv-parallel__visual {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-items: center;
}


/* ---------------------------------------------------------
  斜めパラレル型画像枠
  ---------------------------------------------------------
  clip-pathで平行四辺形のような形を作っています。
  ワイヤーフレームの右側大ビジュアル部分です。
--------------------------------------------------------- */
.fv-parallel__image-frame {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 3.8 / 5;
  overflow: hidden;
  clip-path: polygon(18% 0, 100% 0, 82% 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.78);
  border: 1px solid rgba(31, 122, 122, 0.16);
  box-shadow: var(--shadow-soft);
}


/* ---------------------------------------------------------
  斜め枠の外側ライン風装飾
  ---------------------------------------------------------
  画像枠の内側にもう1本ラインを重ねて、
  ワイヤーフレームの二重枠感を出します。
--------------------------------------------------------- */
.fv-parallel__image-frame::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 2;
  clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%);
  border: 1px solid rgba(31, 122, 122, 0.18);
  pointer-events: none;
}


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


/* ---------------------------------------------------------
  画像がない時の仮枠
  ---------------------------------------------------------
  imgを使わず確認したい時のプレースホルダーです。
--------------------------------------------------------- */
.fv-parallel__placeholder {
  display: grid;
  place-items: center;
  width: min(100%, 560px);
  aspect-ratio: 3.8 / 5;
  clip-path: polygon(18% 0, 100% 0, 82% 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.78);
  border: 1px solid rgba(31, 122, 122, 0.16);
  color: var(--color-text-light);
  font-weight: 700;
  text-align: center;
}


/* ---------------------------------------------------------
  PC専用改行
  ---------------------------------------------------------
  <br class="u-pc"> をPCでは表示します。
--------------------------------------------------------- */
.u-pc {
  display: inline;
}
/* =========================================================
  FV / 円形・オーバルビジュアル型：PC
  ---------------------------------------------------------
  Variation L 専用CSSです。
  上部ヘッダー + 左コピー / 右ビジュアルの構成を作ります。
========================================================= */


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


/* ---------------------------------------------------------
  FV内側
  ---------------------------------------------------------
  全体を1つの大きなカードのように見せるための枠です。
--------------------------------------------------------- */
.fv-oval__inner {
  position: relative;
  padding: 28px 28px 36px;
  border-radius: var(--radius-l);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(31, 122, 122, 0.12);
  box-shadow: var(--shadow-soft);
}


/* ---------------------------------------------------------
  ヘッダー
  ---------------------------------------------------------
  ロゴ / ナビ / CTA を横並びに配置します。
--------------------------------------------------------- */
.fv-oval__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 6px 0 18px;
  border-bottom: 1px solid rgba(31, 122, 122, 0.10);
}


/* ---------------------------------------------------------
  ロゴ
  ---------------------------------------------------------
  ロゴマークと文字を横並びにします。
--------------------------------------------------------- */
.fv-oval__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
}


/* ロゴマーク */
.fv-oval__logo-mark {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 2px solid var(--color-main);
  border-radius: 50%;
  position: relative;
}

/* ロゴマークの内側装飾 */
.fv-oval__logo-mark::before,
.fv-oval__logo-mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(31, 122, 122, 0.45);
  border-radius: 50%;
}

.fv-oval__logo-mark::after {
  inset: 8px;
}

/* ロゴ文字 */
.fv-oval__logo-text {
  font-size: 1.9rem;
  line-height: 1;
}


/* ---------------------------------------------------------
  ナビ
  ---------------------------------------------------------
  中央のグローバルナビです。
--------------------------------------------------------- */
.fv-oval__nav {
  justify-self: center;
}

.fv-oval__nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}

.fv-oval__nav-item a {
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}


/* ---------------------------------------------------------
  ヘッダーCTA
  ---------------------------------------------------------
  右上の問い合わせボタンです。
--------------------------------------------------------- */
.fv-oval__header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.fv-oval__header-btn:hover {
  transform: translateY(-2px);
}


/* ---------------------------------------------------------
  メイン本体
  ---------------------------------------------------------
  左テキスト / 右ビジュアルの2カラムです。
--------------------------------------------------------- */
.fv-oval__body {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(380px, 1.06fr);
  align-items: center;
  gap: 56px;
  min-height: 620px;
  padding: 36px 8px 24px;
}


/* ---------------------------------------------------------
  左側コピーエリア
  ---------------------------------------------------------
  見出し・本文・CTAをまとめます。
--------------------------------------------------------- */
.fv-oval__content {
  min-width: 0;
}


/* リードコピー */
.fv-oval__eyebrow {
  color: var(--color-text-light);
  font-size: 0.95rem;
  font-weight: 700;
}


/* ---------------------------------------------------------
  メインコピー
  ---------------------------------------------------------
  FVの主役となる見出しです。
--------------------------------------------------------- */
.fv-oval__title {
  margin-top: 24px;
  color: var(--color-text);
  font-size: clamp(2.7rem, 4.9vw, 4.8rem);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0.03em;
}


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


/* ---------------------------------------------------------
  CTAボタンエリア
  ---------------------------------------------------------
  2つのボタンを横並びにします。
--------------------------------------------------------- */
.fv-oval__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}


/* メインCTA */
.fv-oval__main-btn {
  min-width: 270px;
  gap: 12px;
  border-radius: 999px;
}

/* サブCTA */
.fv-oval__sub-btn {
  min-width: 230px;
  gap: 12px;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.fv-oval__sub-btn:hover {
  transform: translateY(-2px);
}

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


/* ---------------------------------------------------------
  CTA補足文
  ---------------------------------------------------------
  申し込みのハードルを下げる一言です。
--------------------------------------------------------- */
.fv-oval__microcopy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--color-text-light);
  font-size: 0.86rem;
  font-weight: 700;
}

.fv-oval__microcopy-icon {
  font-size: 0.82rem;
}


/* ---------------------------------------------------------
  右側ビジュアル
  ---------------------------------------------------------
  円形・オーバル画像を中央に配置します。
--------------------------------------------------------- */
.fv-oval__visual {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: center;
  min-height: 520px;
}


/* ---------------------------------------------------------
  円形 / オーバル画像枠
  ---------------------------------------------------------
  きれいな円形寄りのビジュアル枠です。
  外周に線をつけて、ワイヤー風にも見えるようにしています。
--------------------------------------------------------- */
.fv-oval__image-frame {
  position: relative;
  z-index: 2;
  width: min(100%, 500px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
  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.82);
  border: 1px solid rgba(31, 122, 122, 0.18);
  box-shadow: var(--shadow-soft);
}

/* 内側の細い輪郭線 */
.fv-oval__image-frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 2;
  border: 1px solid rgba(31, 122, 122, 0.16);
  border-radius: 50%;
  pointer-events: none;
}


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


/* ---------------------------------------------------------
  影
  ---------------------------------------------------------
  円形ビジュアルの下に置く楕円影です。
--------------------------------------------------------- */
.fv-oval__image-shadow {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 1;
  width: 62%;
  height: 28px;
  border-radius: 50%;
  background: rgba(31, 122, 122, 0.12);
  filter: blur(8px);
  transform: translateX(-50%);
}


/* ---------------------------------------------------------
  プレースホルダー
  ---------------------------------------------------------
  画像がまだない時の確認用です。
--------------------------------------------------------- */
.fv-oval__placeholder {
  display: grid;
  place-items: center;
  width: min(100%, 500px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  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.82);
  border: 1px solid rgba(31, 122, 122, 0.18);
  color: var(--color-text-light);
  font-weight: 700;
  text-align: center;
}


/* ---------------------------------------------------------
  スクロール誘導
  ---------------------------------------------------------
  下向きアイコンで次のセクションへ誘導します。
--------------------------------------------------------- */
.fv-oval__scroll {
  display: grid;
  place-items: center;
  margin-top: 10px;
}

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


/* ---------------------------------------------------------
  PC専用改行
  ---------------------------------------------------------
  PCでのみ表示したい改行です。
--------------------------------------------------------- */
.u-pc {
  display: inline;
}
/* =========================================================
  FV / 重なりカードビジュアル型：PC
  ---------------------------------------------------------
  左にコピー・CTA・実績、
  右に重なったカード型ビジュアルを配置する
  Variation M 専用CSSです。
========================================================= */


/* ---------------------------------------------------------
  FV全体
  ---------------------------------------------------------
  セクション全体の背景と余白を設定します。
--------------------------------------------------------- */
.fv-stack {
  position: relative;
  overflow: hidden;
  padding: 88px 0 96px;
  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では左にコピー、右に重なりカードを配置します。
--------------------------------------------------------- */
.fv-stack__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1.1fr);
  align-items: center;
  gap: 72px;
  min-height: 600px;
}


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


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


/* ---------------------------------------------------------
  メインコピー
  ---------------------------------------------------------
  FVで一番目立たせる見出しです。
--------------------------------------------------------- */
.fv-stack__title {
  color: var(--color-text);
  font-size: clamp(2.55rem, 4.8vw, 4.55rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
}


/* ---------------------------------------------------------
  リード文
  ---------------------------------------------------------
  メインコピーの補足文です。
--------------------------------------------------------- */
.fv-stack__lead {
  max-width: 34em;
  margin-top: 26px;
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 2;
}


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


/* ---------------------------------------------------------
  メインCTA
  ---------------------------------------------------------
  common.css の .c-btn を使いながら、
  FV用に少し横幅を持たせます。
--------------------------------------------------------- */
.fv-stack__main-btn {
  min-width: 220px;
  gap: 12px;
}


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


/* ---------------------------------------------------------
  サブ導線リンク
  ---------------------------------------------------------
  資料ダウンロードなど、メインCTAより控えめな導線です。
--------------------------------------------------------- */
.fv-stack__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-stack__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 36px;
}


/* ---------------------------------------------------------
  実績1項目
  ---------------------------------------------------------
  アイコンとテキストを横並びにします。
--------------------------------------------------------- */
.fv-stack__stat {
  display: flex;
  align-items: center;
  gap: 10px;
}


/* ---------------------------------------------------------
  実績アイコン
  ---------------------------------------------------------
  丸型アイコンで信頼情報を視覚化します。
--------------------------------------------------------- */
.fv-stack__stat-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.1rem;
}


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


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


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


/* ---------------------------------------------------------
  右側：重なりカードエリア
  ---------------------------------------------------------
  カードを絶対配置で重ねるための土台です。
--------------------------------------------------------- */
.fv-stack__visual {
  position: relative;
  min-height: 460px;
}


/* ---------------------------------------------------------
  共通カードスタイル
  ---------------------------------------------------------
  重なったカードすべてに共通する見た目です。
--------------------------------------------------------- */
.fv-stack__card {
  position: absolute;
  width: min(100%, 500px);
  aspect-ratio: 4 / 3.15;
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(31, 122, 122, 0.14);
  box-shadow: var(--shadow-card);
}


/* ---------------------------------------------------------
  背面カード1
  ---------------------------------------------------------
  一番奥のカードです。
  少し上にずらして奥行きを作ります。
--------------------------------------------------------- */
.fv-stack__card--back-1 {
  top: 20px;
  right: 32px;
  z-index: 1;
  transform: rotate(4deg);
}


/* ---------------------------------------------------------
  背面カード2
  ---------------------------------------------------------
  2枚目の背面カードです。
  少し右下へずらして重なりを表現します。
--------------------------------------------------------- */
.fv-stack__card--back-2 {
  top: 58px;
  right: 0;
  z-index: 2;
  transform: rotate(-3deg);
}


/* ---------------------------------------------------------
  前面カード
  ---------------------------------------------------------
  一番前にあるメインビジュアルカードです。
--------------------------------------------------------- */
.fv-stack__card--main {
  top: 80px;
  right: 48px;
  z-index: 3;
  overflow: hidden;
  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.82);
  box-shadow: var(--shadow-soft);
}


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


/* ---------------------------------------------------------
  画像がない時の仮枠
  ---------------------------------------------------------
  imgを使わない時のプレースホルダーです。
--------------------------------------------------------- */
.fv-stack__placeholder {
  display: grid;
  place-items: center;
  position: absolute;
  top: 80px;
  right: 48px;
  z-index: 4;
  width: min(100%, 500px);
  aspect-ratio: 4 / 3.15;
  border-radius: var(--radius-m);
  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.82);
  border: 1px solid rgba(31, 122, 122, 0.14);
  color: var(--color-text-light);
  font-weight: 700;
  text-align: center;
}