@charset "utf-8";
/* ============================================================
   lp01-fv.css — 創業融資LP のFV差分

   元は背景がオレンジ1色（#d98060）のベタ塗り。
   面が単色だと、人物の周りの空きが「奥行き」ではなく
   「埋まっていない余白」に見えてしまう。

   本家 full-support-hojokin.com のサーモン（#f3815e）を軸に、
   光と影で面に奥行きを作り、文字とボタンを一段前に立たせる。
   書体は fig-v2 のままゴシック1本。
   ============================================================ */

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

    /* 本家 full-support-hojokin.com は、サーモンとブルーを
       ニュアンスで混ぜずに「面ではっきり分ける」使い方をしている
       （FVは左サーモン／右ブルーの2分割、以降もセクションごとに交互）。
       LP01も同じ考え方で、上をサーモン、下をブルーの2面構成にする。
       混ぜると濁るので、境界をはっきりさせるのが要点。 */
    background:
        radial-gradient(ellipse 74% 52% at 50% 20%, rgba(255, 226, 205, .5) 0%, rgba(255, 226, 205, 0) 62%),
        linear-gradient(176deg, #f89568 0%, #f3815e 46%, #ee7752 100%);
}

/* ニュアンス柄。細いドットを薄く敷いて、ベタ塗りの単調さだけを消す。
   色を混ぜずに「面に表情をつける」ためのもの */
.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, .30) 1.4px, transparent 1.6px),
        radial-gradient(circle at center, rgba(255, 255, 255, .16) 1.1px, transparent 1.3px);
    background-size: 26px 26px, 26px 26px;
    background-position: 0 0, 13px 13px;
}

/* 差し色のブルーは、CTAボタンだけで十分効いている。
   下端に細い帯を足すと「わずかに色が入っている」だけの半端な線になるので置かない */

/* 元の茶色い曲線SVGは、単色の面と相性が悪いので隠す */
.figfv .figfv__curve { display: none }

/* ごく薄い粒状感。ベタ面ののっぺりを消す */
.figfv::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .055;
    mix-blend-mode: multiply;
    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: 34%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 100%);
}

.figfv__stage { z-index: 1 }
.figfv .figfv__stage > *:not(.figfv__curve) { z-index: 1 }

/* 検索ボックスの中を白に。実際の検索窓に見えるうえ、
   オレンジ地から一段浮いて「ちょっと待って！」への導線になる */
.figfv .figfv__search {
    background: #fff;
    box-shadow: 0 8px 18px rgba(97, 57, 43, .28);
}
.figfv .figfv__search-word { color: #3f2419; font-weight: 700 }
.figfv .figfv__search-caret { background: #3f2419 }

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

   元は 1440×943 のステージに、要素が小さめに置かれていて、
   人物の左右と上下に「埋まっていないオレンジ」が広く残っていた。
   ステージ比を縦に詰めたうえで、各要素を一回り大きくして面を埋める。
   ============================================================ */
@media (min-width: 768px) {
    /* 943 → 830。横幅はそのままに、上下の空きぶんだけステージを縮める */
    .figfv .figfv__stage { aspect-ratio: 1440 / 830 }
    .figfv { --fvw: min(100vw, 1440px, (100vh - 80px) * 1440 / 830) }

    /* 検索ボックスと「ちょっと待って！」を一回り大きく、上に寄せる */
    /* 検索窓は元CSSが rotate(-6.28deg) で傾けているので、
       矩形の下端で合わせると**左下の角だけが下に張り出して**
       「ちょっと待って！」の上に乗る。下端が matte の上端に接する位置まで上げる */
    .figfv .figfv__search { left: 31.5%; top: 9.8%; width: 35.5%; height: 8.6% }
    .figfv .figfv__cursor { left: 66.5%; top: 15.6%; width: 2.4%; height: 5.8% }

    /* 「ちょっと待って！」は白のアウトライン画像で色を変えられない。
       検索ボックスを白にしたぶん白が白に乗ってしまうので、
       drop-shadow を4方向に重ねて濃い縁取りを作り、輪郭を立てる */
    .figfv .figfv__matte {
        left: 23.5%;
        top: 18.4%;
        width: 50%;
        height: 11.6%;
        filter:
            drop-shadow(2px 0 0 #8a3f22) drop-shadow(-2px 0 0 #8a3f22)
            drop-shadow(0 2px 0 #8a3f22) drop-shadow(0 -2px 0 #8a3f22)
            drop-shadow(0 8px 18px rgba(84, 34, 18, .55));
    }

    /* 幅を広げてから字を大きくする。元の 43.38% のままサイズだけ上げると
       「電話しようとしていませんか？」が3行に割れる */
    /* 人物の頭にかからない高さに置く（下端が人物の上端より上） */
    .figfv .figfv__lead {
        left: 21%;
        top: 31.5%;
        width: 58%;
        font-family: var(--sans);
        font-weight: 700;
        font-size: calc(var(--fvw) * 46 / 1440);
        line-height: 1.34;
        letter-spacing: var(--ls-display);
        text-shadow: 0 2px 10px rgba(120, 52, 30, .35);
    }

    /* 元は 22px / weight 500。細くて小さく、オレンジ地に沈んでいた。
       右下の説明はCTAの直前に読ませたい一文なので、太く大きくする */
    /* 2行目「借りられる額もこの先の会社の業績も、」は18文字。
       幅か字の大きさが足りないと「も、」だけが次行に落ちるので、
       この行が1行で収まる幅と字送りに合わせている */
    .figfv .figfv__sub {
        top: 60.5%;
        width: 35%;
        right: 1.2%;
        left: auto;
        font-family: var(--sans);
        font-weight: 700;
        font-size: calc(var(--fvw) * 25 / 1440);
        line-height: 1.62;
        letter-spacing: 0;
        text-shadow: 0 2px 8px rgba(120, 52, 30, .3);
    }

    /* ---- CTA ---- */
    .figfv .figfv__cta {
        top: 76.5%;
        right: 1.2%;
        width: 35%;
    }
    .figfv .figfv__cta-btn {
        position: relative;
        overflow: hidden;
        padding: calc(var(--fvw) * 26 / 1440) calc(var(--fvw) * 30 / 1440);
        background: linear-gradient(180deg, #2ea6e0 0%, #1892ce 52%, #0f6ea3 100%);
        filter: none;
        box-shadow:
            0 14px 28px rgba(120, 48, 26, .42),
            0 0 0 calc(var(--fvw) * 5 / 1440) rgba(255, 255, 255, .28),
            inset 0 2px 0 rgba(255, 255, 255, .55),
            inset 0 -3px 7px rgba(10, 70, 108, .45);
    }
    .figfv .figfv__cta-btn .label,
    .figfv .figfv__cta-btn .label span {
        color: #fff;
        text-shadow: 0 2px 6px rgba(8, 62, 96, .5);
        font-weight: 700;
        font-size: calc(var(--fvw) * 30 / 1440);
        letter-spacing: var(--ls-text);
    }
    .figfv .figfv__cta-btn:hover { animation-play-state: paused; transform: translateY(-3px) }

    /* ---- 人物 ----
       LP03と同じ考え方。画像は横に一切切らず、原寸比のまま幅いっぱいに置いて、
       下端（＝ステージ下端）だけで切る。こうすると両肩・両腕が欠けず、
       画像左端に焼き込まれた縦書きクレジットもそのまま残る。
       top 47% ＋ height 53% でちょうどステージ下端に接する */
    .figfv .figfv__person {
        left: 40%;
        top: 47%;
        width: 22%;
        height: 53%;
        filter: drop-shadow(0 18px 30px rgba(97, 42, 22, .38));
    }

    /* ---- 実績バッジ ----
       白文字だと色数が足りず、地にも溶ける。金の箔にして、
       左に大きく空いていた面へ引き上げる（左右のボリューム差の解消も兼ねる）。
       人物の左に完全に収めること。はみ出すと足元と数字が重なる。

       金は明度がサーモンに近いので、影だけでは輪郭が立たない。
       LP02と同じ考え方で濃い面を敷いて、金を地から確実に分ける */
    /* 右端は、人物画像の左端に焼き込まれた縦書きクレジットに当たる。
       字を小さくせず、座布団の内側（padding・gap・月桂樹）だけを詰めて逃がす */
    .figfv .figfv__badges {
        left: 2.5%;
        top: 72%;
        flex-direction: row;
        align-items: center;
        gap: calc(var(--fvw) * 5 / 1440);
        padding: calc(var(--fvw) * 12 / 1440) calc(var(--fvw) * 12 / 1440);
        background: linear-gradient(180deg, rgba(78, 30, 14, .58) 0%, rgba(58, 20, 8, .66) 100%);
        border: 1px solid rgba(250, 239, 212, .34);
        border-radius: calc(var(--fvw) * 14 / 1440);
        backdrop-filter: blur(2px);
        box-shadow:
            0 10px 24px rgba(88, 34, 16, .34),
            inset 0 1px 0 rgba(255, 236, 190, .20);
    }
    .figfv .figfv__badges li {
        font-family: var(--sans);
        gap: calc(var(--fvw) * 5 / 1440);
    }
    /* 金の箔にする。白のままだと色数が足りず、地にも溶ける */
    .figfv .figfv__badge-label,
    .figfv .figfv__badge-value {
        background-image: var(--gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    /* 面を敷いたので、影は輪郭を締めるぶんだけに留める。
       強い影を残すと金の上に灰色がかぶって濁る */
    .figfv .figfv__badges li {
        filter: drop-shadow(0 1px 2px rgba(30, 10, 4, .45));
    }
    .figfv .figfv__badge-label {
        font-weight: 700;
        font-size: max(14px, calc(var(--fvw) * 15.5 / 1440));
        letter-spacing: .04em;
    }
    .figfv .figfv__badge-value {
        font-size: max(16px, calc(var(--fvw) * 21 / 1440));
        font-variant-numeric: tabular-nums;
        letter-spacing: var(--ls-num);
    }
    .figfv .figfv__badge-value b { font-size: max(28px, calc(var(--fvw) * 40 / 1440)) }
    /* 月桂樹SVGは白なので、フィルタで金に寄せる */
    .figfv .figfv__laurel {
        filter: brightness(0) saturate(100%) invert(78%) sepia(31%) saturate(602%) hue-rotate(2deg) brightness(93%) contrast(87%);
    }
    .figfv .figfv__badges li:nth-child(2) .figfv__badge-value { font-size: max(14px, calc(var(--fvw) * 18 / 1440)) }
    .figfv .figfv__laurel { width: calc(var(--fvw) * 15 / 1440); height: calc(var(--fvw) * 58 / 1440) }
}

/* ============================================================
   「ちょっと待って！」に動きをつける

   FVで一番言いたい一言なのに、静止していると検索窓の飾りに見える。
   「検索して電話しようとしている手を止める」ことばなので、
   その順番どおりに見せる。

     ① 検索窓のキャレットが点滅している（＝いま入力している）
     ② カーソルが検索ボタンを押しにいく
     ③ そこへ「ちょっと待って！」が飛び込んで止める

   ②③は5秒に一度だけ。ずっと動かすと安っぽくなるので、
   動くのは1秒弱で、あとは静止させる。
   ============================================================ */

/* ① キャレット。実際の入力欄に見えるので、これだけは常に点滅させる */
.figfv .figfv__search-caret { animation: fv-caret 1.1s infinite }
@keyframes fv-caret {
    0%, 49%   { opacity: 1 }
    50%, 100% { opacity: 0 }
}

/* ② カーソル。元CSSが transform:rotate(-48.55deg) で傾けているので、
      その回転を保ったまま動かす（消すと角度が戻って別物になる） */
.figfv .figfv__cursor { animation: fv-cursor-click 5s ease-in-out infinite }
@keyframes fv-cursor-click {
    0%, 52%, 100% { transform: rotate(-48.55deg) translate(0, 0) }
    56%           { transform: rotate(-48.55deg) translate(-4%, -7%) }
    60%           { transform: rotate(-48.55deg) translate(0, 3%) }
    65%           { transform: rotate(-48.55deg) translate(0, 0) }
}

/* ③ 「ちょっと待って！」。行き過ぎてから収まる形にすると、
      「膨らむ」ではなく「飛び込んでくる」に見える */
.figfv .figfv__matte { animation: fv-attention 5s cubic-bezier(.2, .8, .3, 1) infinite }
@keyframes fv-attention {
    0%, 62%, 100% { transform: scale(1) rotate(0deg) }
    68%           { transform: scale(1.085) rotate(-1.6deg) }
    73%           { transform: scale(.97) rotate(1deg) }
    78%           { transform: scale(1.035) rotate(-.6deg) }
    84%           { transform: scale(.996) rotate(.25deg) }
    90%           { transform: scale(1) rotate(0deg) }
}

@media (prefers-reduced-motion: reduce) {
    .figfv .figfv__search-caret,
    .figfv .figfv__cursor,
    .figfv .figfv__matte { animation: none }
}

/* 押してほしいボタンなので、光沢を繰り返し流して視線を集める。
   ゆっくり息をするような上下動も足す（動きすぎない範囲で） */
.figfv .figfv__cta-btn {
    animation: fv-cta-breath 3.6s ease-in-out infinite;
}
.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, .85) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    animation: fv-sheen 4.2s ease-in-out 1.2s infinite;
}

@keyframes fv-cta-breath {
    0%, 100% { transform: translateY(0) }
    50%      { transform: translateY(-3px) }
}
.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,
    .figfv .figfv__cta-btn::after,
    .figfv .figfv__cta-btn:hover::after { animation: none }
}

/* 人物はどのビューでもバストアップ（全身は使わない） */
.figfv .figfv__person { overflow: hidden; position: relative }
/* 画像（maeda04.webp 280×756）は全身カットで、左端に縦書きの
   アンバサダー表記が焼き込まれている。
   横に広げてオフセットすると、クレジットが枠外に出るうえに
   両肩と両腕まで切れてしまう。
   横は原寸比のまま width:100% で置き、切るのは下だけにする。
   クレジットは画像の縦 2.8%〜41.5% にあるので、下端で切っても残る */
.figfv .figfv__person img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: auto;
}

/* ============================================================
   SP — PCと同じ考え方をそのまま縦積みに落とす

   元のSPは絶対座標で組まれていて、字を大きくすると
   CTAや実績バッジが人物に重なってぐちゃぐちゃになる。
   ここは絶対配置を解除してフローに組み替え、
   PCと同じ「サーモン→ブルーの2面」「金のバッジ」「サーモンのCTA」を再現する。
   ============================================================ */
@media (max-width: 767px) {
    .figfv .figfv__stage {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 7vw 4vw 8vw;
    }
    /* PC用の絶対座標を全部解除してから縦に積み直す */
    .figfv .figfv__stage > * {
        position: static;
        left: auto; right: auto; top: auto; bottom: auto;
        width: auto; height: auto; transform: none;
    }

    .figfv .figfv__search { order: 1; position: relative; width: 84vw; height: 13vw }
    .figfv .figfv__cursor { display: none }
    .figfv .figfv__matte  { order: 2; width: 84vw; margin-top: -1vw }
    .figfv .figfv__matte img { position: static; width: 100%; height: auto }
    /* ---- SPの並び ----
       人物を「ちょっと待って！」の**直下**に置く。こうすると
       彼女がそのセリフを言っている構図になる（2026-08-07 の定例で確定）。

       元は人物が最下部（CTAの後）で、スマホの折り返しに引っかかって
       首から上だけが覗く格好になっていた。
       「あっちゃんを『続き』にしちゃだめ」「首だけ出てるのは気持ち悪い」
       「前田敦子はみんな知っているから出してあげたい」という指摘。

       押し出されたCTAはファーストビューの外に出るが、
       「無料相談はコミュニケーションの後だからFVに出さなくていい」でOKが出ている */
    /* 人物はリード文の下（2026-08-10 変更）。
       「ちょっと待って！ → その理由 → 本人」の順にすると、
       コピーが先に読まれてから彼女が出てくる。
       あわせて 56vw → 48vw に縮めたところ、CTAまで1画面に収まるようになった */
    .figfv .figfv__lead   { order: 3; margin-top: 3.5vw; font-size: 5.4vw; line-height: 1.45; text-align: center }
    /* 画像は 280×756。width:48vw で置くと縦は 129.6vw になるので、
       頭〜腰（＝縦47%）＝61vw で切る。クレジットは縦41.5%までなので収まる
       （比率は 56vw:71vw と同じ。片方だけ変えると腰から下が入る） */
    .figfv .figfv__person { order: 4; width: 48vw; height: 61vw; overflow: hidden; margin: 4vw auto 0 }
    /* 腰の位置の直線の切り口をフェードで地に溶かす（LP03と同じ考え方。2026-08-22）。
       LP03は画像自体の下端が切り口なので img にマスクを当てたが、
       こちらは全身写真を枠の overflow:hidden で切っているため、
       img に当てると基準が画像全長（129.6vw）になり位置が合わない。
       枠（61vw）のほうに当てて、見えている範囲の下2割をフェードさせる */
    .figfv .figfv__person {
        -webkit-mask-image: linear-gradient(180deg, #000 87%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 87%, transparent 100%);
    }
    /* リードと同じ体裁の文章が続くと、SPでは文字量が多く見える。
       実績バッジを間に挟んで、サブはCTAの直前の一文として置く */
    .figfv .figfv__badges { order: 5; margin-top: 5.5vw }
    .figfv .figfv__sub    { order: 6; margin-top: 5vw; font-size: 3.9vw; line-height: 1.7; text-align: center }
    .figfv .figfv__cta    { order: 7; margin-top: 4vw }

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

    .figfv .figfv__lead {
        font-weight: 700;
        letter-spacing: var(--ls-text);
        text-shadow: 0 2px 8px rgba(120, 52, 30, .32);
    }
    .figfv .figfv__sub { font-weight: 700; letter-spacing: var(--ls-text) }
    .figfv .figfv__matte {
        filter:
            drop-shadow(1.5px 0 0 #8a3f22) drop-shadow(-1.5px 0 0 #8a3f22)
            drop-shadow(0 1.5px 0 #8a3f22) drop-shadow(0 -1.5px 0 #8a3f22)
            drop-shadow(0 6px 14px rgba(84, 34, 18, .5));
    }

    /* 【2026-09-01で置き換え済み】この修正はChromeにしか効かなかった。
       現行の実装はファイル末尾の「SVG画像からWebフォントに置き換え」を参照。
       下のimg用ルールは対象が消えており効いていない（animation:noneだけ
       末尾ブロックで上書きされる前提で生きている）。

       「ちょっと待って！」がSPでガビる問題（2026-08-28 指摘。PCは無事）

       原因は上の filter と、.figfv__matte に掛けたアニメーション
       fv-attention（scale(1.085) rotate(-1.6deg)）の組み合わせ。
       filter の掛かった要素はブラウザが一度ビットマップに焼いてから
       transform で拡大するので、元がSVGでも拡大時にジャギーが出る。
       SPは幅84vwと大きいぶん目立ち、PCは相対的に小さいので気づきにくい。

       直し方は「動かす要素」と「フィルタを掛ける要素」を分けること。
       h2（フィルタ側）は動かさず、中の img を動かす。
       transform がフィルタの内側の内容になるので、毎フレーム
       実解像度で描き直され、焼いたビットマップの拡大にならない。
       動き自体は見た目が変わらないので、SPだけ差し替える。 */
    .figfv .figfv__matte { animation: none }
    .figfv .figfv__matte img {
        animation: fv-attention 5s cubic-bezier(.2, .8, .3, 1) infinite;
        transform-origin: center;
    }
    .figfv .figfv__person { filter: drop-shadow(0 10px 20px rgba(97, 42, 22, .34)) }

    /* CTA：PCと同じサーモン。押してほしいので大きく */
    .figfv .figfv__cta-btn {
        padding: 4.2vw 6.5vw;
        background: linear-gradient(180deg, #2ea6e0 0%, #1892ce 52%, #0f6ea3 100%);
        box-shadow:
            0 10px 22px rgba(120, 48, 26, .40),
            0 0 0 4px rgba(255, 255, 255, .28),
            inset 0 2px 0 rgba(255, 255, 255, .5);
    }
    .figfv .figfv__cta-btn .label,
    .figfv .figfv__cta-btn .label span {
        color: #fff;
        font-size: 4.7vw;
        text-shadow: 0 2px 5px rgba(8, 62, 96, .5);
    }

    /* 実績バッジ：PCと同じ金の箔＋濃い面 */
    .figfv .figfv__badges {
        display: flex;
        gap: 2.6vw;
        padding: 2.6vw 3.4vw;
        background: linear-gradient(180deg, rgba(78, 30, 14, .58) 0%, rgba(58, 20, 8, .66) 100%);
        border: 1px solid rgba(250, 239, 212, .34);
        border-radius: 3.2vw;
        backdrop-filter: blur(2px);
        box-shadow: 0 8px 18px rgba(88, 34, 16, .32), inset 0 1px 0 rgba(255, 236, 190, .20);
    }
    .figfv .figfv__badges li { gap: 1.2vw }
    .figfv .figfv__badge-label,
    .figfv .figfv__badge-value {
        background-image: var(--gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    /* 面を敷いたので、影は輪郭を締めるぶんだけ */
    .figfv .figfv__badges li {
        filter: drop-shadow(0 1px 2px rgba(30, 10, 4, .45));
    }
    .figfv .figfv__badge-label { font-weight: 700; font-size: 2.7vw }
    .figfv .figfv__badge-value { font-size: 3.6vw; font-variant-numeric: tabular-nums }
    .figfv .figfv__badge-value b { font-size: 6.2vw }
    .figfv .figfv__badges li:nth-child(2) .figfv__badge-value { font-size: 2.8vw }
    .figfv .figfv__laurel {
        width: 3.2vw; height: 10vw; margin-top: 0;
        filter: brightness(0) saturate(100%) invert(78%) sepia(31%) saturate(602%) hue-rotate(2deg) brightness(93%) contrast(87%);
    }
}

/* ============================================================
   リード文を吹き出しにする（2026-08-10）

   「ちょっと待って！」に続く一文なので、地の上に白文字で置くより
   吹き出しにしたほうが「話しかけられている」形になる。
   しっぽは下向き。下にいる本人が言っている見え方にする。

   PC/SP 共通で当てる。PCは絶対配置なので、幅を内容に合わせたぶん
   left/transform で中央に置き直している。
   ============================================================ */
.figfv .figfv__lead {
    background: #fff;
    /* 検索窓の文字と同じ濃茶。白地なのでコントラストは十分取れる */
    color: #3f2419;
    /* 白地に乗るので、地の上に置くための影は消す */
    text-shadow: none;
    border-radius: 1.1em;
    padding: .62em 1.15em .68em;
    box-shadow: 0 10px 24px rgba(120, 52, 30, .3);
}

/* しっぽ。本体と同じ白を三角に置く */
.figfv .figfv__lead::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 0;
    height: 0;
    border: .38em solid transparent;
    border-top-color: #fff;
    border-bottom: 0;
    transform: translateX(-50%);
    /* 本体の影と繋げる。box-shadow だと三角の外接矩形に付いて四角く出る */
    filter: drop-shadow(0 6px 5px rgba(120, 52, 30, .22));
}

@media (min-width: 768px) {
    /* 幅を文章に合わせる。58% のままだと座布団だけ横に伸びる */
    .figfv .figfv__lead {
        left: 50%;
        width: max-content;
        max-width: 62%;
        transform: translateX(-50%);
        /* 座布団のぶん下に伸びて人物の頭にかぶるので、
           上下の詰めを浅くしたうえで位置ごと引き上げる */
        padding: .42em 1.15em .46em;
        /* 座布団になったぶん、上の「ちょっと待って！」とも下の人物とも詰まる。
           元CSSは matte の下に 39px 空けていたので、そこまで戻す。
           字も落として吹き出し自体を薄くする */
        top: 32.5%;
        font-size: calc(var(--fvw) * 39 / 1440);
    }
    /* 人物も下げて、吹き出しの下端との間に余白を作る
       （top + height = 100% でステージ下端に接する関係は保つ） */
    .figfv .figfv__person { top: 52%; height: 48% }
}

@media (max-width: 767px) {
    .figfv .figfv__lead {
        width: max-content;
        /* 86vw だと1行目が収まらず「に」だけが次行に落ちた。
           座布団の内側を詰めたうえで、収まる幅まで広げる */
        max-width: 92vw;
        margin-left: auto;
        margin-right: auto;
        border-radius: 3.6vw;
        padding: 2.4vw 3.6vw 2.8vw;
    }
}


/* ------------------------------------------------------------
   2026-08-28 STMマーケ定例：創業融資のターゲットを
   「創業2年以内／これから開業する人」に設定（決定事項）。
   FVの直後に対象者の帯（.p-target）を置く。

   置き場所をFVの中ではなく直後にしたのは、FVは
   「誰に相談するかで変わる」という主張の場で、対象条件を混ぜると
   主張がぼやけるため。読んで「自分の話だ」と分かってから本文に入る。
   ------------------------------------------------------------ */
/* 2026-08-28 追記：帯が幅を取りすぎて、直後の
   「創業融資は、一度きりのボーナスタイム。」より目立ってしまっていた。
   訴求として強いのはあちらなので、この帯はさりげなく置く。
   3ブロック（見出し＋チップ＋注記）から2行に落とし、余白も詰める。 */
.l-main .p-target {
    padding: 5vw 0;
    background: #fff;
}

.l-main .p-target .l-container {
    max-width: 780px;
}

.l-main .p-target__lead {
    margin: 0 0 .5em;
    text-align: center;
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.7;
    color: var(--fs-navy);
    letter-spacing: var(--ls-display);
}

/* 対象の2条件だけを立てる。線はコーラルで、下の本文で使う
   黄色マーカーとぶつからないようにする */
.l-main .p-target__lead .em {
    padding-bottom: .14em;
    background-image: linear-gradient(90deg, var(--fs-salmon), #e0603a);
    background-repeat: no-repeat;
    background-size: 100% .06em;
    background-position: 0 100%;
}

.l-main .p-target__note {
    margin: 0;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(27, 45, 65, .72);
}

@media (min-width: 768px) {
    .l-main .p-target { padding: 34px 0 }
    .l-main .p-target__lead { font-size: 2rem }
    .l-main .p-target__note { font-size: 1.4rem }
}


/* SPで動きを img 側に移した（上のSPブロック参照）ぶん、
   動きを減らす設定のときはそちらを止める。
   前方の prefers-reduced-motion ブロックはSPの指定より前にあるため、
   同じ詳細度では打ち消せない。だから末尾に置く。 */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .figfv .figfv__matte img { animation: none }
}


/* ------------------------------------------------------------
   2026-08-28 追記：対象者の帯（.p-target）と、その直後の
   「創業融資は、一度きりのボーナスタイム。」が同じ見え方で
   地続きに見える、という指摘。

   訴求として強いのはボーナスタイムのほうなので、そちらに
   マーカーを引いて山を作る。帯を弱めるのではなく見出しを強める。
   （帯をこれ以上弱めると、対象者を伝えるという役目を果たせない）

   色は本文で既に使っている黄色マーカー（.u-txt__marker と同じ #ffe898）。
   見出しなので本文より太く、止め位置を上げて面積を出す。
   ------------------------------------------------------------ */
.l-main .p-oneshot .c-title__jp .u-phrase {
    background-image: linear-gradient(transparent 58%, #ffe898 0);
    padding-bottom: .04em;
}

/* 帯と見出しが続けて出るので、あいだの余白を整える。
   **足しているのではなく、詰めている。** 既定は .c-sec の SP 48px / PC 96px で、
   下の 9vw（375px幅で約34px）と 72px はどちらもそれより小さい。
   帯のすぐ下に見出しが来る並びでは、既定のままだと離れすぎて別の話に見えたため。
   数字を大きくしたくなったら、先に帯と見出しが1つのかたまりに見えるかを確かめること */
.l-main .p-target + .p-oneshot { padding-top: 9vw }

@media (min-width: 768px) {
    .l-main .p-target + .p-oneshot { padding-top: 72px }
}


/* ------------------------------------------------------------
   2026-09-01 試作：「ちょっと待って！」をSVG画像からWebフォントに置き換え。

   08-28のガビり修正（動かす要素とfilterの分離）はChromeには効いたが、
   iOS実機では filter付きレイヤーの低解像度ラスタライズが残り、
   ジャギーに加えて4方向の細い縁取りごと潰れていた。
   テキスト＋text-strokeなら filter を使わないので、この経路ごと消える。

   フォントは Noto Sans JP 800（headで8文字だけサブセット読み込み）。
   元SVGより線が細いので、本体にも白の text-stroke を重ねて太らせる。
   茶の縁取りは data-text 複製（::before）を背面に置いて太いstrokeで描く。
   本体側のstrokeを茶にしないのは、strokeが字面を内側にも侵食するため */

/* 8文字サブセット（1.6KB）を自サイトから配信。Google Fonts経由をやめたのは、
   外部リクエストの遅延ぶん最重要コピーが表示されない時間ができたため。
   swap＝読み込み中は代替フォントで即表示し、届き次第差し替える。
   パスは本番(/lp/sogyo/css/)・リポジトリ(shared/v3/css/)のどちらから
   3階層上がってもルート→assets/fonts/に届く */
@font-face {
    font-family: 'Noto Sans JP Matte';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../../../assets/fonts/notosansjp-800-chottomatte.woff2') format('woff2');
    unicode-range: U+3061, U+3063, U+3066, U+3068, U+3087, U+5F85, U+FF01;
}

.figfv .figfv__matte-text {
    display: block;
    position: relative;
    z-index: 0; /* ::before(z-index:-1)をこのspanの背面までに留める */
    /* Noto Sans JP 800（2026-09-02決定）。900+白strokeだと「待」などの
       カウンターが潰れたため1段軽く。太さは白strokeで補う。
       family名を本文の'Noto Sans JP'と分けているのは重要。同名にすると
       unicode-range内の8文字だけが本文のfont-weight:800要素（p-why見出し等）
       でも真の800で描かれ、900代替の他の文字と太さムラになるため。
       サブセット読み込み失敗時はスタック2番目の本文用Notoへ
       同じ字形のまま落ちる。strokeの角がわずかに丸く描かれる性質が、
       元SVGの「角ゴだが角が立ちすぎない」見た目に効いている */
    font-family: 'Noto Sans JP Matte', 'Noto Sans JP', sans-serif;
    font-weight: 800;
    color: #fff;
    -webkit-text-stroke: .05em #fff;
    letter-spacing: -.03em;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    /* 768px前後の小数ビューポート（ズーム等）でどちらのmediaにも
       当たらない場合の保険。SP値をベースに置き、PC側で上書きする */
    font-size: 10.6vw;
}
.figfv .figfv__matte-text::before {
    /* 複製はスクリーンリーダーに読ませない。代替テキスト構文(/ "")は
       非対応の旧ブラウザだと2行目ごと無効になるので、1行目を保険に残す */
    content: attr(data-text);
    content: attr(data-text) / "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* 本体の白strokeを太らせたぶん縁が食われるので、こちらも太くして
       見えの縁取り幅（約.03em）を保つ */
    -webkit-text-stroke: .18em #8a3f22;
    text-shadow: 0 .08em .2em rgba(84, 34, 18, .5);
}

@media (min-width: 768px) {
    /* 枠の高さは画像の名残。テキストはfont-sizeで決まるので解除 */
    .figfv .figfv__matte { filter: none; height: auto }
    .figfv .figfv__matte-text { font-size: calc(var(--fvw) * 96 / 1440) }
}

@media (max-width: 767px) {
    .figfv .figfv__matte { filter: none }
    .figfv .figfv__matte-text { font-size: 10.6vw }
    /* filterが無くなったのでアニメはh2に戻す（imgはもう存在しない） */
    .figfv .figfv__matte { animation: fv-attention 5s cubic-bezier(.2, .8, .3, 1) infinite }
}

/* SPでh2のアニメを復活させたぶん、動きを減らす設定では改めて止める（末尾必須） */
@media (prefers-reduced-motion: reduce) {
    .figfv .figfv__matte { animation: none }
}