@charset "utf-8";
/* ============================================================
   lp02-fv.css — 追加融資LP のFV差分

   元も斜めグラデは入っているが、明→暗の差が小さく面が平坦。
   装飾の楕円もほとんど効いていないので、結果として
   「青いベタ塗りの上に白文字が乗っているだけ」に見えていた。

   本家 full-support-hojokin.com のブルー（#1892ce）を軸に、
   光・陰・重なりで奥行きを作る。書体は fig-v2 のままゴシック1本。
   ============================================================ */

.figfv {
    /* 金の箔。実績バッジに使う（LP01・LP03と揃える） */
    --gold: linear-gradient(177deg, #fffdf0 0%, #ffeeae 18%, #ffd964 38%, #f5c02f 56%, #e0a51c 72%, #ffe38f 88%, #fff6cf 100%);

    background:
        /* 見出しの背後を明るく抜いて、コピーを前に出す */
        radial-gradient(ellipse 62% 56% at 26% 26%, rgba(126, 205, 245, .45) 0%, rgba(126, 205, 245, 0) 62%),
        linear-gradient(134deg, #0e5f8c 0%, #1a92ce 34%, #23a3e0 52%, #1a92ce 72%, #0e5f8c 100%);
}

/* 差し色のサーモンは、CTAボタンだけで十分効いている。
   下端に細い帯を足しても「わずかに色が入っている」だけの半端な線になるので置かない
   （LP01の水色帯と同じ理由で外した） */

/* ニュアンス柄。細いドットを薄く敷いて、ベタ塗りの単調さだけを消す */
.figfv .figfv__stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        radial-gradient(circle at center, rgba(255, 255, 255, .26) 1.4px, transparent 1.6px),
        radial-gradient(circle at center, rgba(255, 255, 255, .14) 1.1px, transparent 1.3px);
    background-size: 26px 26px, 26px 26px;
    background-position: 0 0, 13px 13px;
}

.figfv .figfv__stage > * { z-index: 1 }

/* 粒状感 */
.figfv::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 上端の光の帯 */
.figfv::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 30%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 100%);
}

.figfv__stage { z-index: 1 }

/* 背景の楕円をもう少し効かせる。面の重なりが奥行きになる */
.figfv .figfv__ellipse { opacity: .5; mix-blend-mode: soft-light }

/* ============================================================
   PC — 面の空きを潰す

   左カラムと人物の間、そして下半分に空きが残っていたので、
   ステージ比を縦に詰めたうえで各要素を一回り大きくする。
   ============================================================ */
@media (min-width: 768px) {
    /* 944 → 880。これ以上詰めるとチェックリストの最終行に実績バッジが重なる */
    .figfv .figfv__stage { aspect-ratio: 1440 / 880 }
    .figfv { --fvw: min(100vw, 1440px, (100vh - 80px) * 1440 / 880) }

    /* 左カラムを外側に寄せて広げる */
    .figfv .figfv__body {
        left: 7%;
        top: 10.5%;
        width: 58%;
        gap: calc(var(--fvw) * 46 / 1440);
    }

    /* ---- コピー ---- */
    .figfv .figfv__heading {
        font-family: var(--sans);
        font-size: calc(var(--fvw) * 76 / 1440);
        line-height: 1.2;
        letter-spacing: var(--ls-display);
        text-shadow: 0 4px 18px rgba(4, 46, 74, .5);
        white-space: normal;
    }
    /* 「本当の」は受け。小さく落として主役を立てる */
    .figfv .figfv__heading .figfv__heading-sm {
        display: inline-block;
        font-size: calc(var(--fvw) * 46 / 1440);
        vertical-align: .12em;
        margin-right: .12em;
        opacity: .95;
    }
    /* 主役。大きさ・色・縁取りの3つで、リード文とはっきり差をつける */
    .figfv .figfv__heading .figfv__heading-hl {
        display: inline-block;
        font-size: calc(var(--fvw) * 92 / 1440);
        background-image: var(--gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        /* ★ background-clip:text の要素に text-shadow を効かせてはいけない。
           描画順が「背景 → 影 → 文字」で、文字は transparent なので、
           影が金グラデの“上”に乗って黒いもやになる。
           親 .figfv__heading の text-shadow が継承されるので明示的に消す */
        text-shadow: none;
        /* 縁取りを重ねると金が濁る。落ち影も、ぼかしを効かせすぎると
           細い画線の内側まで灰色が回るので、締めるぶんだけに留める */
        filter: drop-shadow(0 3px 6px rgba(3, 34, 56, .42));
    }

    /* 元は 22px / weight 500。読ませたい一文なのに細く小さく、青地に沈んでいた */
    .figfv .figfv__sub {
        font-family: var(--sans);
        font-weight: 700;
        font-size: calc(var(--fvw) * 26 / 1440);
        line-height: 1.6;
        letter-spacing: var(--ls-text);
        text-shadow: 0 2px 10px rgba(4, 46, 74, .35);
    }

    /* ---- 「決算書を共有するだけ」のピル ---- */
    .figfv .figfv__pill {
        background: linear-gradient(180deg, #fff 0%, #eef7fd 100%);
        color: #0d6ea3;
        letter-spacing: var(--ls-text);
        box-shadow:
            0 8px 18px rgba(4, 46, 74, .32),
            inset 0 1px 0 rgba(255, 255, 255, .95),
            inset 0 -2px 5px rgba(120, 175, 210, .35);
    }

    /* ---- チェックリスト ---- */
    .figfv .figfv__checks li {
        font-family: var(--sans);
        letter-spacing: var(--ls-text);
        text-shadow: 0 2px 8px rgba(4, 46, 74, .32);
    }
    .figfv .figfv__checks img { filter: drop-shadow(0 2px 4px rgba(4, 46, 74, .35)) }

    /* ---- 人物 ---- */
    /* 左は見出し・チェックリスト・実績で詰まっているのに、右は人物が小さく空いて見える。
       人物を一回り大きくして右側の面を埋める。

       効いている制約は3つ:
         ・元CSSの clip-path: inset(0 0 0 28%) で、見えるのはボックスの右72%だけ
         ・クレジットSVGはボックス幅の 92.22%〜104.88% に置かれていて、右にはみ出す
           → left + 1.049 × width ≦ 99.5% に収める
         ・画像は 400×400 が最大。上げすぎると眠くなるので 1.3倍程度に留める

       ★ ボックスは「実際に見えている範囲」に一致させる。
          元の指定のままだと、左28%が透明なだけの箱が見出しの上まで伸びて、
          見た目は当たっていないのに計測では重なりとして出てしまう。
          画像を 1/0.72 = 138.9% に広げ、同じぶん左へ送って、
          切り取り後の人物がボックスにちょうど収まるようにする */
    .figfv .figfv__person {
        left: 67.8%;
        top: 13%;
        width: 29.5%;
        filter: drop-shadow(0 20px 34px rgba(4, 46, 74, .45));
    }
    .figfv .figfv__person > img {
        width: 138.9%;
        max-width: none;
        margin-left: -38.9%;
    }
    /* クレジットの座標はボックス基準の％なので、ボックスを縮めたぶん置き直す
       （ステージ基準では 94.1%〜99.3% のまま） */
    .figfv .figfv__credit { left: 89.1%; width: 17.6% }

    /* ---- CTA ---- */
    .figfv .figfv__cta { left: 60%; top: 82.5% }
    .figfv .figfv__cta-btn {
        position: relative;
        overflow: hidden;
        background: linear-gradient(180deg, #ffa579 0%, #f3815e 52%, #e0673f 100%);
        filter: none;
        box-shadow:
            0 14px 28px rgba(4, 46, 74, .48),
            0 0 0 calc(var(--fvw) * 5 / 1440) rgba(255, 255, 255, .30),
            inset 0 2px 0 rgba(255, 255, 255, .5),
            inset 0 -3px 7px rgba(160, 62, 34, .42);
    }
    .figfv .figfv__cta-btn .label,
    .figfv .figfv__cta-btn .label span {
        font-weight: 700;
        font-size: calc(var(--fvw) * 32 / 1440);
        letter-spacing: var(--ls-text);
    }
    .figfv .figfv__cta-btn:hover { transform: translateY(-2px) }

    /* ---- 実績 ----
       白文字が青地に溶けていたので、濃い面を敷いてから数字を大きくする */
    .figfv .figfv__stats {
        left: 6.6%;
        top: 84.5%;
        gap: calc(var(--fvw) * 10 / 1440);
        padding: calc(var(--fvw) * 12 / 1440) calc(var(--fvw) * 20 / 1440);
        background: rgba(6, 46, 74, .38);
        border: 1px solid rgba(250, 239, 212, .32);
        border-radius: calc(var(--fvw) * 14 / 1440);
        backdrop-filter: blur(2px);
        box-shadow: 0 8px 20px rgba(4, 46, 74, .3);
    }
    .figfv .figfv__stat { text-shadow: none }
    .figfv .figfv__stat-label,
    .figfv .figfv__stat-value {
        background-image: var(--gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .figfv .figfv__stat > img {
        filter: brightness(0) saturate(100%) invert(78%) sepia(31%) saturate(602%) hue-rotate(2deg) brightness(93%) contrast(87%);
    }
    .figfv .figfv__stat-label { font-weight: 700; font-size: max(14px, calc(var(--fvw) * 18 / 1440)); letter-spacing: .06em }
    .figfv .figfv__stat-value {
        font-size: max(16px, calc(var(--fvw) * 26 / 1440));
        font-variant-numeric: tabular-nums;
        letter-spacing: var(--ls-num);
    }
    .figfv .figfv__stat-value b { font-size: max(28px, calc(var(--fvw) * 50 / 1440)) }
    .figfv .figfv__stat-value .sm { font-size: max(14px, calc(var(--fvw) * 20 / 1440)) }
    .figfv .figfv__stat > img { width: calc(var(--fvw) * 24 / 1440); height: calc(var(--fvw) * 76 / 1440) }
}

/* CTAに光沢を一度だけ流す */
.figfv .figfv__cta-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 42%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    animation: fv-sheen 3.4s ease-in-out 1s 2;
}
.figfv .figfv__cta-btn:hover::after { animation: fv-sheen 1.1s ease-in-out }

@keyframes fv-sheen {
    0%   { left: -60% }
    55%  { left: 130% }
    100% { left: 130% }
}
@media (prefers-reduced-motion: reduce) {
    .figfv .figfv__cta-btn::after,
    .figfv .figfv__cta-btn:hover::after { animation: none }
}

/* ============================================================
   SP — PCと同じ「青とサーモンが半分ずつ」を、縦積みで再現する
   ============================================================ */
@media (max-width: 767px) {
    .figfv { background: linear-gradient(180deg, #23a3e0 0%, #1a92ce 60%, #1180bb 100%) }

    .figfv .figfv__stage > * { position: relative; z-index: 1 }

    .figfv .figfv__heading {
        letter-spacing: var(--ls-display);
        text-shadow: 0 2px 12px rgba(4, 46, 74, .4);
        line-height: 1.24;
    }
    .figfv .figfv__heading .figfv__heading-sm { font-size: 5.6vw; display: inline-block; vertical-align: .1em }
    .figfv .figfv__heading .figfv__heading-hl {
        display: inline-block;
        font-size: 10.4vw;
        background-image: var(--gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        /* PCと同じ理由。継承した text-shadow が金の上に乗るので消す */
        text-shadow: none;
        filter: drop-shadow(0 2px 5px rgba(3, 34, 56, .42));
    }
    .figfv .figfv__sub {
        font-weight: 700;
        font-size: 3.6vw;
        line-height: 1.6;
        letter-spacing: var(--ls-text);
    }
    .figfv .figfv__pill {
        background: linear-gradient(180deg, #fff 0%, #eef7fd 100%);
        color: #0d6ea3;
        box-shadow: 0 6px 14px rgba(4, 46, 74, .3), inset 0 1px 0 rgba(255, 255, 255, .95);
    }
    .figfv .figfv__checks li { text-shadow: 0 2px 6px rgba(4, 46, 74, .3) }
    .figfv .figfv__person { filter: drop-shadow(0 12px 22px rgba(4, 46, 74, .4)) }

    /* サーモン地に乗るのでCTAはブルー（PCと同じ考え方） */
    .figfv .figfv__cta-btn {
        background: linear-gradient(180deg, #ffa579 0%, #f3815e 52%, #e0673f 100%);
        box-shadow:
            0 10px 20px rgba(4, 46, 74, .4),
            0 0 0 4px rgba(255, 255, 255, .3),
            inset 0 2px 0 rgba(255, 255, 255, .45);
    }

    /* 実績バッジも金で統一 */
    .figfv .figfv__stats {
        padding: 3vw 4vw;
        background: rgba(6, 46, 74, .30);
        border: 1px solid rgba(250, 239, 212, .32);
        border-radius: 3.2vw;
        backdrop-filter: blur(3px);
    }
    .figfv .figfv__stat-label { font-weight: 700 }
    .figfv .figfv__stat-label,
    .figfv .figfv__stat-value {
        background-image: var(--gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .figfv .figfv__stat-value { font-variant-numeric: tabular-nums }
    .figfv .figfv__stat > img {
        filter: brightness(0) saturate(100%) invert(78%) sepia(31%) saturate(602%) hue-rotate(2deg) brightness(93%) contrast(87%);
    }
}

/* ============================================================
   人物はバストアップで使う（全身は使わない）
   PC・SPとも、コンテナで切って上半身だけを見せる
   ============================================================ */
/* SPは縦に切らない。
   maeda02_sp.webp は 400×400 で、もともと頭〜腰のバストアップ。
   左端に焼き込まれたクレジットは元CSSの clip-path が横に切って落とし、
   代わりに lp02-credit.svg を右に重ねる作りになっている。

   ここで height + overflow:hidden を足して縦に切ると、
   ボックスの外（右 94%〜110.5%）に置かれたクレジットSVGまで一緒に消える。
   素材がすでにバストアップなので、そもそも切る必要がない。 */

/* ============================================================
   FVと同じポーズの人物カットは、FV以外では出さない
   ============================================================ */

/* 「サポート実績3,000社突破！」のセクション。
   maeda02.webp が .l-container::before の背景で入っていて、
   FV（maeda02_sp.webp）と同じ指差しポーズが2連続で出ていた。
   <img> ではなく擬似要素なので、前回の削除から漏れていた箇所 */
.l-main .p-manifesto .l-container::before { display: none }
/* 人物のぶんだけ空けてあった場所を詰める。
   PCは右に margin、SPは上に padding で空けてあり、逃がし方が違う */
@media (min-width: 768px) {
    .l-main .p-manifesto__lead ul {
        margin-right: 0;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 767px) {
    /* 元は padding-top:232px で、その上に人物が乗っていた。
       人物を出さないので、見出しとの間隔だけ残して詰める */
    .l-main .p-manifesto__lead ul { padding-top: 2.4rem }
}

/* 「社長の右腕として、ずっとフルサポート！」の人物カット。
   こちらも外して、コピーだけで見せる（空いたぶんは中央で大きく組み直す） */
.l-main .p-trouble__copy2 .pic { display: none }
.l-main .p-trouble__copy2 {
    justify-content: center;
    text-align: center;
}
@media (min-width: 768px) {
    .l-main .p-trouble__copy2 .txt {
        font-size: 4.4rem;
        line-height: 1.5;
        font-weight: 700;
    }
}

/* ============================================================
   「融資可能額」の金に光沢を流す

   LP01は「ちょっと待って！」、LP03はチャットの返答が動いているのに、
   LP02だけ静止していると、かえって止まって見える。
   FVで一番言いたい語＝金の3文字を光らせて、そこに視線を集める。

   金グラデの“上”に白い帯をもう1枚重ねて、位置だけ動かす。
   background-clip:text は背景レイヤーを全部まとめて文字型に切るので、
   帯も文字の中だけを走り、金が金のまま光って見える。

   ★ 帯は必ず「文字より狭く」しておくこと（background-size 45%）。
      文字より広いと ％指定の向きが反転して、狙いと逆に動く。
   ============================================================ */
.figfv .figfv__heading .figfv__heading-hl {
    background-image:
        linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .92) 50%,
            rgba(255, 255, 255, 0) 100%),
        var(--gold);
    background-repeat: no-repeat, no-repeat;
    background-size: 45% 100%, 100% 100%;
    /* 待機中は帯を完全に画面外へ。少しでも掛かっていると金が白っぽく濁る */
    background-position: -110% 0, 0 0;
    animation: fv-gold-shine 4.6s ease-in-out infinite;
}

@keyframes fv-gold-shine {
    0%, 60%   { background-position: -110% 0, 0 0 }
    85%, 100% { background-position: 200% 0, 0 0 }
}

@media (prefers-reduced-motion: reduce) {
    .figfv .figfv__heading .figfv__heading-hl { animation: none }
}

/* ============================================================
   SP — 実績バッジをサブコピーの直下へ

   元の並びは 見出し → サブ → ピル＋チェックリスト → 人物 → CTA → 実績バッジ で、
   バッジが一番下（CTAの後）にあった。

   「なるほどね を引き出します」の直後に置きたいが、
   バッジは .figfv__stage の直下、サブは .figfv__body > .figfv__lead の中と
   親が違うので、order だけでは間に割り込めない。

   .figfv__body を display:contents にして、その子（lead / pillbox）を
   stage の flex item に引き上げてから order で並べ替える。
   body が持っていた align-items:center と gap:19.9px は失われるので、
   margin auto と margin-top で付け直す。
   （position:relative / z-index:1 は上の `.figfv__stage > *` が拾うので不要）
   ============================================================ */
@media (max-width: 767px) {
    .figfv .figfv__body { display: contents }

    /* 人物はサブコピーの下（2026-08-10 変更）。
       一度は見出しとサブの“間”に挟んだが、
       「コピーを読ませてから本人を出す」順に戻した。
       間に挟まないので `.figfv__lead` を display:contents で畳む必要はなく、
       lead が元から持っている gap と幅がそのまま効く */
    .figfv .figfv__lead    { order: 1; margin-left: auto; margin-right: auto }
    /* 281px では画面を占めすぎたので 242px（62vw）に。
       左右に地が見えるが、ドット柄が入っているので空きには見えない */
    /* ボックスは中央寄せだが、画像は clip-path で左26.5%が落ちているため、
       見えている人物は中心より右（クリップ幅の半分＝約8vw）にずれる。
       左の空きが目立つ（2026-08-19 指摘）ので、そのぶん左へ送って
       見えている人物を実際の中央に置く */
    .figfv .figfv__person  { order: 2; width: 62vw; margin: 4vw auto 0; transform: translateX(-8.2vw) }
    /* 元は 5vw（393px幅で約20px）。人物との間の空きも指摘されたのでゼロに詰め、
       バッジを人物画像の下端（盛り上がり曲線の稜線）に接して置く。
       弧のマスクで写真はボックス下端より上で切れているため、人物には被らない */
    .figfv .figfv__stats   { order: 3; margin-top: 0 }
    .figfv .figfv__pillbox { order: 4; margin-top: 5vw; margin-left: auto; margin-right: auto }
    /* 下端の曲線。元は margin-top:-6.36vw で上に食い込んでいて、
       **チェックリストの3行目「面談調整まで、フルサポで完結」を覆っていた**。
       CTAが被っているように見えるが、実際に乗っているのはこの曲線 */
    .figfv .figfv__curve   { order: 5; margin-top: 0 }
    /* チェックリストとの間が曲線の帯のぶん74px空いて見えたので（2026-08-19指摘）、
       負マージンで曲線の上に引き上げる（CTAは z-index:3 で曲線より手前） */
    .figfv .figfv__cta     { order: 6; margin-top: -4vw }
}

/* ============================================================
   差し色 — 「のべっとしている」を解く

   3本並べたとき、LP02 だけ青一色に見えていた。
   （2026-08-07 の定例「真ん中はまだのべっと。もうちょっと色味の
     パターンがあってもいい／差し色がない」）

   面をもう1色足すのは Skill のルール8に反するので、
   差し色を「点」で増やす。
   ============================================================ */

/* 経営者の反応の3つを目立たせる。カギ括弧ごとの span は build_lp.py で足している。

   一度は黄色い座布団＋濃紺文字（文字を反転）にしたが、
   **黄色の面が増えてFVのトーンから浮いた**。
   帯は本家と同じ「文字の下だけ」に戻し、視認性は文字側で上げる。

   ★ 白文字に濃紺の細い縁を1px回すのが肝。
     青地の上でも黄色の帯の上でもエッジが立つので、
     帯を濃くしたり太くしたりしなくても言葉のほうが先に読める。 */
.figfv .figfv__sub .figfv__mk {
    background: linear-gradient(transparent 64%, rgba(255, 225, 120, .95) 0);
    padding: 0 .12em;
    color: #fff;
    text-shadow:
        1px 1px 0 rgba(6, 44, 72, .9),
        -1px 1px 0 rgba(6, 44, 72, .9),
        1px -1px 0 rgba(6, 44, 72, .9),
        -1px -1px 0 rgba(6, 44, 72, .9),
        0 3px 12px rgba(4, 46, 74, .5);
}

/* チェックリストの ☑ は <img> なので color では変えられない。
   filter で色を回すことはできるが、黄色マーカー＋オレンジのCTA＋金の
   見出し・バッジに加えるとこの面だけ色数が増えすぎるので置かない
   （Skill のルール8「差し色は点で入れる。面や数を増やさない」） */