/* ============================================================
   LP02 — 納品(2026-08-12)のあとに当方で入れた修正
   このファイルは納品物ではない。lp02-fv.css の後ろに重ねる。
   ============================================================ */

/* ------------------------------------------------------------
   人物写真の下端が直線でブツっと切れて見える問題

   写真は背景ごと矩形なので、下辺がそのまま境界線として出る。
   fig-v2 のSPでは人物の直後の「盛り上がり曲線」が下辺を覆っていたが、
   納品版でSPの並びが変わった際、曲線がチェックリストを覆うため外され、
   下辺がむき出しになった。PCは元から覆うものが無い。

   Figma「フルサポV2」(node 33:53) と同じ作りにする。あちらは人物が
   Mask group に入っていて、**大きな円の弧で写真の下側が切られており**、
   弧の外は明るい青(#1A92CE)、内は基準の青(#1088C4)。
   人物がその面の後ろに立っているように見える。

   Figmaの実寸から弧を採寸（1440×1024のフレーム上）:
     中心 (1338, 1626) / 半径 923 → 頂点 (1338, 703)
   人物ボックス（x957.5 / y295 / w367.9 / h492）を基準に直すと
     頂点X = ボックス左 + 103.4%（右端のわずか外）
     頂点Y = ボックス上 + 82.9%
     半径  = ボックス幅 × 251%
   この比率をこちらのレイアウトへ移植する。

   ★ 弧は2つで1組
     ① 写真の mask … 弧の内側を落とす（＝Figmaのマスク）
     ② 面の ::after … 弧の内側をわずかに沈める（＝Figmaの2トーン）
     ①はimg、②は親のcase要素に置く。両方を親に置くと
     マスクが自分の::afterまで消してしまうため。
   ------------------------------------------------------------ */

.figfv .figfv__person { position: relative }

/* ------------------------------------------------------------
   人物が四角く見える問題

   人物画像は背景が透過されたWebPなので、画像自体は四角くない。
   四角く見えていたのは納品CSSの
     .figfv__person { filter: drop-shadow(0 20px 34px rgba(4,46,74,.45)) }
   が原因。画像には左端の焼き込みクレジットを落とすための
   clip-path: inset(0 0 0 28%) が掛かっており、これと drop-shadow が
   噛み合って、切り口を左辺とする矩形の影が落ちていた。
   （ドット柄が写真の箱の中だけ消えて見えるのもこれ）

   Figmaの人物にも影は付いていないので、影ごと外す。
   ------------------------------------------------------------ */
.figfv .figfv__person,
.figfv .figfv__person > img { filter: none }

/* 面。人物ボックス基準で置くので、PC/SPどちらもレイアウトに追従する */
.figfv .figfv__person::after {
    content: "";
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    aspect-ratio: 1;
    /* Figmaは #1A92CE の地に #1088C4 の面で、差はごくわずか。
       こちらの地はグラデーションなので、薄く敷いて同じ差をつくる */
    background: rgba(3, 58, 92, .13);
    pointer-events: none;
}

/* コピーと弧が重なる位置関係になるので、文字側を前に出しておく。
   .figfv__body は SP で display:contents になり
   `.figfv__stage > *` の z-index:1 が効かないため、個別に指定する */
.figfv .figfv__lead,
.figfv .figfv__pillbox { position: relative; z-index: 2 }

/* ---- PC ---- */
@media (min-width: 768px) {
    /* 元からある装飾の楕円のうち、右下の fv-ellipse-a は上辺が弧になっていて、
       新しく入れた弧とほぼ同じ場所を走る。PCで見ると弧が二重に見えるので、
       奥のこちらを落として手前の1本だけにする。
       左上に掛かる fv-ellipse-b は地の面づくりに効いているので残す */
    .figfv .figfv__ellipse--a { display: none }

    /* 写真を弧で切る。imgボックス(550×550)基準 */
    .figfv .figfv__person > img {
        -webkit-mask-image: radial-gradient(ellipse 180.7% 180.7% at 102.5% 263.6%,
            transparent 99.6%, #000 100%);
        mask-image: radial-gradient(ellipse 180.7% 180.7% at 102.5% 263.6%,
            transparent 99.6%, #000 100%);
    }
    /* 面。人物ボックス(396×550)基準で、写真のマスクと同じ円になる値 */
    .figfv .figfv__person::after {
        left: -147.6%;
        top: 82.9%;
        width: 502%;
    }
}

/* ---- SP ---- */
@media (max-width: 767px) {
    /* SPの人物ボックスは正方形で、PCと同じ曲率だと写真の左下が弧からはみ出す。
       半径を大きく（幅の400%）取って弧を寝かせ、下辺を端から端まで切る */
    .figfv .figfv__person > img {
        -webkit-mask-image: radial-gradient(ellipse 400% 400% at 103.3% 483%,
            transparent 99.6%, #000 100%);
        mask-image: radial-gradient(ellipse 400% 400% at 103.3% 483%,
            transparent 99.6%, #000 100%);
    }
    .figfv .figfv__person::after {
        left: -296.7%;
        top: 82.9%;
        width: 800%;
    }
}


/* ------------------------------------------------------------
   2026-08-28 STMマーケ定例：「フルサポのオンリーワンの理由が伝わっていない」

   理由そのもの（どの銀行の・どの支店の・どの担当者に、まで言える）は
   p-why__conclusion に既に書いてある。ただし3枚のカードの下に地の文で
   置かれているだけなので、ここが結論だと分からない。

   ラベルを足して結論だと分かるようにし、他社が言えない粒度
   （支店・担当者）にだけ線を引く。「銀行」までなら誰でも言えるので、
   線はそこには引かない。

   線は下の p-detail が黄色マーカーを使っているので、それとは変える。
   LP02は青基調なので、文字の下に離して引く青の線にする。
   ------------------------------------------------------------ */
.l-main .p-why__conclusion .lbl {
    display: table;
    margin: 0 auto .8em;
    padding: .3em 1.4em;
    border-radius: 9999px;
    background: var(--fs-navy);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.l-main .p-why__conclusion .em {
    padding-bottom: .16em;
    background-image: linear-gradient(90deg, var(--fs-blue), #0f5f92);
    background-repeat: no-repeat;
    background-size: 100% .06em;
    background-position: 0 100%;
}

/* ------------------------------------------------------------
   2026-08-28 同定例：「融資だけでなく資金調達もサポートする」を
   補助金の話が始まる直前に入れる（.p-bridge）

   融資のLPなのに p-trouble から急に補助金/助成金の話に変わるので、
   読み手には話が飛んで見える。冒頭に置くのは的外れ（そこはまだ融資の話）
   なので、境目に置いて接続する。
   ------------------------------------------------------------ */
.l-main .p-bridge {
    padding: 7vw 0;
    background: #fff;
}

.l-main .p-bridge .l-container {
    max-width: 860px;
    text-align: center;
}

.l-main .p-bridge__ttl {
    margin: 0 0 .6em;
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1.6;
    color: var(--fs-navy);
    letter-spacing: var(--ls-display);
}

/* 揃えは見出しと本文で変えない。SPだけ本文が左になっていて、
   中央揃えから急に切り替わって驚く（2026-08-28 指摘）。
   2〜3行の短い文なので、中央のままで読みにくくならない。 */
.l-main .p-bridge__txt {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.9;
    color: var(--fs-navy);
}

@media (min-width: 768px) {
    .l-main .p-why__conclusion .lbl { font-size: 1.5rem }
    .l-main .p-bridge { padding: 52px 0 }
    .l-main .p-bridge__ttl { font-size: 2.2rem }
    .l-main .p-bridge__txt { font-size: 1.7rem }
}