@charset "utf-8";
/* ============================================================
   FV v3 — fig-v2 のFVに重ねる差分スタイル

   fig-v2 は Figma の 1440×944.56 をステージにして、要素を全部
   left/top の % で絶対配置している。座標がFigmaと1対1で対応する反面、
   ・要素の間隔が固定比率なので、詰めたくても詰められない
   ・--fvw を (100vh - 80px) から算出しているため、画面の縦が足りないと
     余白だけでなく文字やパネルまで一緒に縮む
   という作りになっていた。

   v3 では PC のステージだけをフロー（flex column）に組み替えて、
   縦の間隔を vh ベースで詰められるようにしている。
   SP（767px以下）は元から縦積みなので、間隔と書体の調整だけ。

   読み込みは fig-v2 のインライン <style> より後ろ。
   セレクタは .figfv を前置して詳細度で勝たせている。
   ============================================================ */

/* ------------------------------------------------------------
   0. 書体 — 2つに絞って役割を固定する

   fig-v2 は Noto Sans JP 1書体で、太さ（500/600/700）と字間
   （-0.88px / normal / +2.52px）の差だけで階層を作っていた。
   同じ書体を太らせただけの見出しは金や紺と釣り合わず、
   全体が量販店のチラシに見える原因になっていた。

   v3 は「語るところは明朝、読ませるところはゴシック」に固定する。
     ・Shippori Mincho B1 … 見出し・強調・数字（格と重み）
     ・Noto Sans JP      … 説明文・UI・チェックリスト（可読性）
   2書体しか使わないので、混ざって見えることがなくなる。
   ------------------------------------------------------------ */
:root {
    /* 金は明るい黄金を中心に。くすんだベージュ寄りだと金に見えない */
    --gold: linear-gradient(177deg, #fffdf0 0%, #ffeeae 18%, #ffd964 38%, #f5c02f 56%, #e0a51c 72%, #ffe38f 88%, #fff6cf 100%);
    /* 游明朝の読み心地に近く、抑揚が穏やかで紺地でも沈まない Noto Serif JP を基本に。
       游明朝はフォールバック（Windowsの游明朝は太字が細く弱いので基本には据えない） */
    --serif: "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
    --sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    --gold-line: #b99a4c;

    /* 字間もここで一元化する。要素ごとにバラバラだったものを3段階に固定 */
    --ls-display: .05em;   /* 見出し・強調 */
    --ls-text: .02em;      /* 説明文 */
    --ls-num: .01em;       /* 数字 */
}

/* ============================================================
   全体のタイポグラフィ

   明朝は「ここぞ」だけに使う。
   具体的には ①読み手への投げかけ ②セリフ（引用） の2つに限定し、
   セクションの見出し・数字・本文は fig-v2 のままゴシックで通す。

   見出しまで明朝にすると、明朝が「特別な一言」ではなく
   ただの装飾になってしまい、投げかけの効きが薄れる。
   ============================================================ */

/* --- 明朝を当てるのはこの2種類だけ --- */

/* ① 投げかけ */
.figfv .figfv__em,                    /* まだ余地があります。 */
.l-main .p-why__conclusion .txt,      /* どの銀行の、どの支店の、どの担当者に、どう持ち込むか。 */
.l-main .p-why__cta .ttl {            /* いまの融資条件、一度確かめてみませんか */
    font-family: var(--serif);
    /* 明朝も 700。Noto Serif JP は 500;600;700 を読み込んでいるので出る */
    font-weight: 700;
    letter-spacing: var(--ls-display);
}

/* ② セリフ（FVの3つのカギ括弧）は .figfv__insight .q 側で指定 */

/* --- 数字は桁だけ揃える。書体はゴシックのまま --- */
.l-main .p-case__box-item-desc .price dd,
.l-main .new-graph .percentage-bar-num,
.figfv .figfv__stat-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-num);
}

/* ------------------------------------------------------------
   本文の大きさ

   fig-v2 は共通CSSが html{font-size:62.5%}（1rem=10px）で、
   本文の多くが 1.4rem = 14px になっていた。PCの本文としては小さく、
   小さい字は色が濃くても薄く見える。

   個別クラスを潰すと 261 箇所を追いかけることになるので、
   ルートを 11px に上げてページ全体を一段大きくする。
   rem ベースの指定はすべて比例して大きくなり、レイアウトの比率は崩れない。
   FVは --fvw ベースの calc なので影響を受けない。
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   左右の余白

   コンテナが 1100px 固定で、1440 の画面では左右に 170px ずつ空く。
   FVは画面幅いっぱいなので、そこから下だけ急に痩せて見えていた。
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   薄い文字を濃くする

   白地に薄いグレー（#8b94a0 や #999）は、それだけで手抜きに見える。
   本文と同じ濃さまでは戻さず、読める濃さ（#4a5568 前後）に上げる。
   ------------------------------------------------------------ */

/* 白地に乗るブルーの投げかけは、明朝にしたぶん一段濃くして沈まないようにする */
.l-main .p-why__conclusion .txt { color: #0f5f92 }

/* --- 字間だけ全体で統一する --- */
.l-main p,
.l-main li,
.l-main dd,
.l-main dt,
.l-main .ttl,
.l-main .new-graph__ttl {
    letter-spacing: var(--ls-text);
}
.l-main .c-title__en { letter-spacing: .16em }

/* ------------------------------------------------------------
   1. 背景 — 単色の横グラデ1枚だったものを層にする
      中央上のスポット光で視線を集め、下端を締めて人物を浮かせる
   ------------------------------------------------------------ */
.figfv {
    background:
        radial-gradient(ellipse 62% 48% at 50% 16%, rgba(104, 148, 214, .32) 0%, rgba(104, 148, 214, 0) 68%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .58) 100%),
        linear-gradient(90deg, #000 0%, #0b1e3c 13%, #12305a 50%, #0b1e3c 87%, #000 100%);
}

/* ごく薄いフィルムグレイン。のっぺりした紺に質感を出すためだけのもの */
.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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 左上から右下へ抜ける淡い光条。金の罫と平行にならないよう斜めに1本だけ */
.figfv::after {
    content: "";
    position: absolute;
    inset: -20% -10%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(104deg,
        rgba(255, 255, 255, 0) 38%,
        rgba(160, 195, 245, .07) 47%,
        rgba(255, 255, 255, 0) 56%);
}

.figfv__stage { z-index: 1 }

/* 左右の金罫にごくわずかな発光を足す（額縁の金箔らしさ） */
.figfv .figfv__rail { filter: drop-shadow(0 0 5px rgba(201, 169, 97, .38)) }

/* ============================================================
   PC — ステージをフロー配置に組み替える
   ============================================================ */
@media (min-width: 768px) {

    /* --fvw を横基準に戻す。文字とパネルは常に大きいまま、余白だけが伸縮する */
    .figfv {
        --fvw: min(100vw, 1440px);
        --stage-h: clamp(560px, calc(100vh - 80px), 880px);

        /* 余白スケール。要素間を等間隔にせず、
           「塊の中」と「塊と塊の間」で明確に段差をつける */
        --gap-in: clamp(2px, .7vh, 10px);     /* 同じ塊の中（リード→強調→罫） */
        --gap-mid: clamp(12px, 2.2vh, 30px);  /* 塊の中の小休止 */
        --gap-out: clamp(18px, 3.4vh, 46px);  /* 塊と塊の間 */
    }

    .figfv .figfv__stage {
        width: min(100vw, 1440px);
        max-width: none;
        aspect-ratio: auto;
        /* 高さは「最低これだけ」に留める。固定にすると縦の低い画面で
           中身が溢れ、figfv 側の overflow:hidden で上下が切れてしまう */
        height: auto;
        min-height: var(--stage-h);
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 中身を上下の中央に置く。上詰めだと画面が高いときに下だけ間延びする */
        justify-content: center;
        padding: clamp(14px, 2.4vh, 34px) 0 clamp(12px, 2vh, 26px);
    }

    /* 絶対配置の解除（left/top/transform の解除漏れに注意） */
    .figfv .figfv__stage > * {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        transform: none;
        width: auto;
        height: auto;
    }

    /* 罫と人物だけは絶対配置のまま */
    .figfv .figfv__rail {
        position: absolute;
        top: 0;
        bottom: 0;
        width: calc(var(--fvw) * 10.15 / 1440);
        height: auto;
    }
    .figfv .figfv__rail--l { left: calc(var(--fvw) * 14 / 1440) }
    .figfv .figfv__rail--r { right: calc(var(--fvw) * 14 / 1440) }

    /* 金罫より内側に置く。罫は画面端から 14/1440 なので、それより内へ。
       344 → 328：チェックリストの1行目を2行に折ったぶんパネルが縦に伸び、
       パネルの右下角と人物の左上が 63×12 重なった。
       bottom:0 で下端が固定なので、幅を縮めると上端が下がって逃げる */
    .figfv .figfv__person {
        position: absolute;
        right: calc(50% - var(--fvw) / 2 + var(--fvw) * 46 / 1440);
        bottom: 0;
        width: calc(var(--fvw) * 328 / 1440);
        z-index: 2;
    }

    /* ---- 塊1：問い ----
       強調行を主役にするための差は「大きさと書体」でつける。
       ウェイトを落として細くすると、以降のセクションのゴシックより
       弱くなってFVだけ頼りなく見えるので、太さと明度は落とさない */
    .figfv .figfv__lead {
        font-family: var(--sans);
        color: #eef3fa;
        font-weight: 700;
        font-size: calc(var(--fvw) * 28 / 1440);
        line-height: 1.55;
        letter-spacing: var(--ls-text);
    }

    .figfv .figfv__em {
        margin-top: var(--gap-in);
        font-family: var(--serif);
        font-weight: 700;
        font-size: calc(var(--fvw) * 72 / 1440);
        line-height: 1.18;
        letter-spacing: var(--ls-display);
        text-shadow: 0 2px 22px rgba(0, 0, 0, .5);
    }

    /* 「余地」だけ金の箔にする。行全体を金にすると紺地で可読性が落ちるので一語だけ */
    .figfv .figfv__em .accent {
        background-image: var(--gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .figfv .figfv__line {
        margin-top: var(--gap-in);
        width: calc(var(--fvw) * 700 / 1440);
    }

    /* ---- 塊2：材料（白い紙のパネル） ---- */
    .figfv .figfv__panel {
        position: relative;
        margin-top: var(--gap-out);
        width: calc(var(--fvw) * 786 / 1440);
        height: auto;
        padding: clamp(13px, 2.1vh, 26px) 0;
        filter: drop-shadow(0 20px 42px rgba(0, 0, 0, .5));
    }

    .figfv .figfv__keywords {
        column-gap: calc(var(--fvw) * 30 / 1440);
        row-gap: clamp(4px, 1vh, 12px);
    }

    /* 紙の上は読ませる場所なのでゴシック。細字にすると白地でも弱く見える */
    .figfv .figfv__keywords li {
        font-family: var(--sans);
        color: #101a26;
        font-weight: 700;
        font-size: calc(var(--fvw) * 25 / 1440);
        line-height: 1.4;
        letter-spacing: var(--ls-text);
        gap: calc(var(--fvw) * 13 / 1440);
        padding-bottom: calc(var(--fvw) * 6 / 1440);
        border-bottom: 1px solid rgba(185, 154, 76, .28);
    }
    .figfv .figfv__keywords li.is-wide { font-size: calc(var(--fvw) * 23 / 1440) }

    /* チェックボックスを黒の四角から金の枠に。事務書類ではなく目録に見せる */
    .figfv .figfv__keywords li::before {
        width: calc(var(--fvw) * 25 / 1440);
        height: calc(var(--fvw) * 25 / 1440);
        border: calc(var(--fvw) * 1.6 / 1440) solid var(--gold-line);
        background: linear-gradient(180deg, #fffdf6 0%, #f3ead4 100%);
        box-shadow: inset 0 1px 2px rgba(90, 70, 20, .10);
    }

    /* ---- 塊3：約束（引き出します） ----
       右下に人物がいるぶん、実際に使える横幅はステージ幅より狭い。
       max-width で人物の手前に折り返させる */
    .figfv .figfv__insight { margin-top: var(--gap-mid) }
    .figfv .figfv__insight .pre { font-size: calc(var(--fvw) * 20 / 1440) }
    .figfv .figfv__insight .tail { font-size: calc(var(--fvw) * 20 / 1440) }

    /* 3つのカギ括弧＋「を引き出します」を1行に並べると、右下の人物に
       かかってしまう。幅を絞って 2＋1 で折り返させ、引用を塊として見せる */
    .figfv .figfv__insight .main {
        font-size: calc(var(--fvw) * 27 / 1440);
        max-width: calc(var(--fvw) * 640 / 1440);
        margin-inline: auto;
    }

    /* ---- 塊4：行動 ---- */
    .figfv .figfv__cta { margin-top: var(--gap-out) }

    .figfv .figfv__cta-btn {
        position: relative;
        overflow: hidden;
        padding: calc(var(--fvw) * 25 / 1440) calc(var(--fvw) * 48 / 1440);
        box-shadow:
            0 12px 28px rgba(0, 0, 0, .45),
            inset 0 1px 0 rgba(255, 255, 255, .75),
            inset 0 -2px 7px rgba(120, 85, 20, .38);
    }
    .figfv .figfv__cta-btn .label,
    .figfv .figfv__cta-btn .label span {
        font-family: var(--sans);
        font-weight: 700;
        font-size: calc(var(--fvw) * 31 / 1440);
        letter-spacing: var(--ls-text);
    }

    /* ---- 実績 ---- */
    .figfv .figfv__stats {
        margin-top: var(--gap-mid);
        width: auto;
        height: auto;
        justify-content: center;
        gap: clamp(18px, 3.4vw, 58px);
    }
    .figfv .figfv__stat { height: auto; gap: calc(var(--fvw) * 10 / 1440) }
    .figfv .figfv__laurel { height: calc(var(--fvw) * 60 / 1440) }
    .figfv .figfv__stat-body { gap: calc(var(--fvw) * 3 / 1440) }
    .figfv .figfv__stat-label {
        font-family: var(--sans);
        font-weight: 700;
        font-size: max(14px, calc(var(--fvw) * 15.5 / 1440));
        letter-spacing: .08em;
    }
    .figfv .figfv__stat-value {
        font-family: var(--sans);
        letter-spacing: var(--ls-num);
        font-variant-numeric: tabular-nums;
    }
    .figfv .figfv__stat-value b { font-size: max(26px, calc(var(--fvw) * 44 / 1440)); font-weight: 700 }
    .figfv .figfv__stat-value .unit { font-size: max(14px, calc(var(--fvw) * 22 / 1440)) }
    .figfv .figfv__stat-value .unit-s { font-size: max(13px, calc(var(--fvw) * 17 / 1440)) }
}

/* 画面が低いときは、余白だけでは吸収しきれないので文字も一段落とす。
   ノートPC（900px前後）でもFVが1画面に収まるようにするための調整 */
@media (min-width: 768px) and (max-height: 790px) {
    .figfv .figfv__person { width: calc(var(--fvw) * 300 / 1440) }
    .figfv .figfv__lead { font-size: calc(var(--fvw) * 24 / 1440) }
    .figfv .figfv__em { font-size: calc(var(--fvw) * 60 / 1440) }
    .figfv .figfv__line { width: calc(var(--fvw) * 600 / 1440) }
    .figfv .figfv__panel { width: calc(var(--fvw) * 720 / 1440) }
    .figfv .figfv__keywords li { font-size: calc(var(--fvw) * 23 / 1440) }
    .figfv .figfv__keywords li.is-wide { font-size: calc(var(--fvw) * 20.5 / 1440) }
    .figfv .figfv__insight .pre { font-size: calc(var(--fvw) * 18 / 1440) }
    .figfv .figfv__insight .main { font-size: calc(var(--fvw) * 25 / 1440) }
    .figfv .figfv__insight .tail { font-size: calc(var(--fvw) * 19 / 1440) }
    .figfv .figfv__cta-btn .label { font-size: calc(var(--fvw) * 27 / 1440) }
    .figfv .figfv__laurel { height: calc(var(--fvw) * 52 / 1440) }
    .figfv .figfv__stat-value b { font-size: calc(var(--fvw) * 38 / 1440) }
}

/* ============================================================
   「引き出します」の一文（PC / SP 共通の見た目）

   3つのカギ括弧が主役。前後の地の文はぐっと小さくして、
   引用が浮き上がって見えるようにする
   ============================================================ */
.figfv .figfv__insight {
    text-align: center;
    color: #e4ebf5;
    font-family: var(--sans);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: var(--ls-text);
}
.figfv .figfv__insight .pre { display: block }
.figfv .figfv__insight .main { display: block }

.figfv .figfv__insight .q {
    /* 括弧の途中で改行させないよう、ひとかたまりとして扱う */
    display: inline-block;
    font-family: var(--serif);
    font-weight: 700;
    color: #f0e2bd;
    letter-spacing: .03em;
}
/* カギ括弧の前後の余白は括弧の字面ぶんだけで足りるので、詰めておく */
.figfv .figfv__insight .q + .q { margin-left: -.15em }

.figfv .figfv__insight .tail {
    font-family: var(--sans);
    font-weight: 700;
    color: #e4ebf5;
    margin-left: .3em;
}

/* ============================================================
   CTA の光沢
   金のグラデを一度だけ横切らせる。動きは控えめに
   ============================================================ */
.figfv .figfv__cta-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    animation: fv3-sheen 3.4s ease-in-out .9s 2;
}
.figfv .figfv__cta-btn:hover::after { animation: fv3-sheen 1.1s ease-in-out }

@keyframes fv3-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 — 縦積みの構造はそのまま。書体と間隔だけ揃える
   ============================================================ */
@media (max-width: 767px) {
    .figfv .figfv__stage { padding: 8.4vw 3.44vw 0 }

    .figfv .figfv__lead {
        font-family: var(--sans);
        font-weight: 700;
        color: #eef3fa;
        letter-spacing: var(--ls-text);
    }
    .figfv .figfv__em {
        margin-top: 3.2vw;
        font-family: var(--serif);
        font-weight: 700;
        font-size: 7.6vw;
        letter-spacing: var(--ls-display);
    }
    .figfv .figfv__em .accent {
        background-image: var(--gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .figfv .figfv__panel { margin-top: 4.2vw }
    .figfv .figfv__keywords li {
        font-family: var(--sans);
        color: #101a26;
        font-weight: 700;
        padding-bottom: 1vw;
        border-bottom: 1px solid rgba(185, 154, 76, .28);
    }
    .figfv .figfv__keywords li::before {
        border-color: var(--gold-line);
        background: linear-gradient(180deg, #fffdf6 0%, #f3ead4 100%);
    }

    /* SPの並びは fig-v2 が order 1〜7 で決めている。
       追加した一文は order 未指定だと先頭に飛ぶので、パネルの後に差し込む。

       人物は「…を引き出します」の直下（2026-08-07 の定例で確定）。
       元は最下部で、スマホの折り返しに引っかかって首から上だけが覗いていた。
       LP01/02 と同じ考えで、ファーストビューの中で本人を見せきる。
       CTAは押し出されてFVの外に出るが、それでよいとOKが出ている */
    .figfv .figfv__person { order: 5; margin-top: 3vw }
    .figfv .figfv__insight { order: 6; margin-top: 6vw }
    .figfv .figfv__stats { order: 7 }
    .figfv .figfv__cta { order: 8 }

    /* CTAの下端がFVの下端と一致していて、次のセクションが 0px で接していた。
       ボタンが次のセクションに食い込んで見えるので、下に余白を持たせる */
    .figfv .figfv__stage { padding-bottom: 11vw }

    .figfv .figfv__insight .pre { font-size: 3.4vw }
    .figfv .figfv__insight .main { font-size: 4.3vw; line-height: 1.8 }
    .figfv .figfv__insight .tail { font-size: 3.6vw }
    /* SPは1行に3つ並べると窮屈なので、括弧ごとに折り返させる。
       「を引き出します」も途中で切れないよう独立させる */
    .figfv .figfv__insight .q { display: inline-block }
    .figfv .figfv__insight .tail { display: block; margin-left: 0 }

    .figfv .figfv__cta { margin-top: 6.4vw }
    /* PC側は .label と .label span の両方に 700 を当てているが、
       SPは .label にしか当てていなかった。実際に文字を持つのは中の
       .sp-label（span）なので、そこが weight 500 のまま残っていた */
    .figfv .figfv__cta-btn .label,
    .figfv .figfv__cta-btn .label span {
        font-family: var(--sans);
        font-weight: 700;
        letter-spacing: var(--ls-text);
    }

    .figfv .figfv__stats { margin-top: 6.4vw }
    /* 「全国150行超」が縦に割れないように */
    .figfv .figfv__stat-value { white-space: nowrap }
    .figfv .figfv__stat-label { font-family: var(--sans); font-weight: 700; letter-spacing: .08em }
    .figfv .figfv__stat-value {
        font-family: var(--sans);
        letter-spacing: var(--ls-num);
        font-variant-numeric: tabular-nums;
    }

    .figfv .figfv__person { margin-top: 7vw }

    /* 写真（maeda01.webp）は腰のあたりで切り抜きが直線に終わっていて、
       紺地に白いジャケットの切り口がそのまま見える（2026-08-20 指摘）。
       背景は横グラデ＋スポット光の多層で、単色のオブジェクトを重ねると
       色が合わせきれないので、画像側をマスクで下端だけフェードさせて
       背景に溶かす。PCは bottom:0 でFV下端に接しているため対象外 */
    .figfv .figfv__person img {
        -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
        mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
    }
}

/* ============================================================
   CASE 01 / 02 — 「知らなかった」をデザインで伝える

   会話は「世間話 → 種明かし → 驚き」の3拍で出来ているのに、
   吹き出しが全部おなじ体裁なので、どこが山なのか見えない。
   （「いえ、特には……」と「知らなかったです、それ」が同じ見え方）

   弱いほうを薄く・小さくして差をつけるのは逆効果なので、
   最後の2拍だけを強くする。

   両ケースとも並びが同じなので、位置で拾える:
     種明かし = 最後の is-q = :nth-last-child(2)
     驚き     = 最後の is-a = :last-child
   ============================================================ */

/* ---- 見出し：PCで見切れるのを止める ----
   common-v3.css の `.l-main .c-title__jp { font-size: 4.6rem }` は
   `.p-knowhow .c-title__jp` の clamp と詳細度が同じ（クラス2つ）で、
   後読みのぶん常に勝つ。この見出しはLP内で最長（44字）かつ
   word-break: keep-all なので、PCの1行目「資金繰りが上手い経営者ほど
   こうした情報にアクセス、」が 25字 × 46px ≒ 1150px となり、
   .l-container の max-width 1100px を超えて見切れていた（2026-08-28 指摘。SPは 5vw なので無事）。
   セクション個別に指定を戻す（詳細度はクラス3つで common-v3 に勝つ）。 */
@media (min-width: 768px) {
    .l-main .p-knowhow .c-title__jp {
        font-size: clamp(2.6rem, 3vw, 3.6rem);
        line-height: 1.5;
    }
}

/* ---- 見出しの強調 ----
   この節の主張は「情報を知っているかどうかで差がつく」。
   下のCASEが黄色マーカーを使うので、見出しは別の手にする
   （同じ黄色を2階層で使うと、どちらが山なのか分からなくなる）。
   LP03 の紺×金に合わせて、金の下線を二重で引く。
   マーカーは文字に重なる帯、こちらは文字の下に離して引く線なので混ざらない。 */
.l-main .p-knowhow .c-title__jp .em {
    padding-bottom: .2em;
    background-image:
        linear-gradient(90deg, #c9992b 0%, #f0d98a 45%, #c9992b 100%),
        linear-gradient(90deg, rgba(201, 153, 43, .38), rgba(201, 153, 43, .38));
    background-repeat: no-repeat, no-repeat;
    background-size: 100% .07em, 100% .022em;
    background-position: 0 calc(100% - .1em), 0 100%;
}

/* ---- 種明かし：事実の部分に黄色マーカー ----
   マーカーは本家 full-support-hojokin.com が使っている表現。
   線を引くのは事実の部分だけ。述部と問いかけには引かない
   （事実だけに線が入るから、線＝知らなかった事実、として読める）。

   2026-08-28: 末尾1つだけ外す :not(:last-child) では線が伸びすぎていた。
     CASE 01「…新しい保証協会の制度が／できたのは／ご存知ですか？」
     CASE 02「…いつでも返せる仕組みです。／使わない間は／利息もかかりません」
   どちらも .u-phrase は5つで、事実は先頭3つ。よって末尾2つを外す。
   ★吹き出しの改行位置（.u-phrase の切り方）を変えたら、ここも見直すこと。 */
.l-main .p-knowhow__row:nth-last-child(2) .p-knowhow__bubble .u-phrase:not(:nth-last-child(-n+2)) {
    background-image: linear-gradient(transparent 64%, #ffe27a 0);
    padding-bottom: .06em;
}

/* 種明かしの吹き出し自体も、世間話の吹き出しから一段前に出す */
.l-main .p-knowhow__row:nth-last-child(2) .p-knowhow__bubble {
    border-color: rgba(214, 160, 30, .55);
    box-shadow: 0 6px 18px rgba(27, 45, 65, .13);
}

/* ---- 驚き：社長の反応 ---- */
.l-main .p-knowhow__row:last-child .p-knowhow__bubble {
    position: relative;
    background: linear-gradient(180deg, #23a3e0 0%, #1683bb 100%);
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(9, 70, 106, .3);
}
.l-main .p-knowhow__row:last-child .p-knowhow__bubble,
.l-main .p-knowhow__row:last-child .p-knowhow__bubble p,
.l-main .p-knowhow__row:last-child .p-knowhow__bubble span {
    font-weight: 700;
}

/* 気づきの線。吹き出しの左上に、外へ放射する3本を置く。
   吹き出しの中に記号を足すとセリフに読めてしまうので、外に出す */
.l-main .p-knowhow__row:last-child .p-knowhow__bubble::before {
    content: "";
    position: absolute;
    left: -.78em;
    top: -.86em;
    width: 1.95em;
    height: 1.7em;
    z-index: 1;
    pointer-events: none;
    transform-origin: 78% 82%;
    background: no-repeat center/contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='30' fill='none' stroke='%23f0a81e' stroke-width='4.2' stroke-linecap='round'%3E%3Cpath d='M4 27 L1.5 15'/%3E%3Cpath d='M15 21 L14 5'/%3E%3Cpath d='M26 25 L32 12'/%3E%3C/svg%3E");
    animation: fs-surprise-burst 4.2s ease-in-out infinite;
}

/* 「ドンッ」と外へ広がる輪。吹き出しの背面に置くので、
   吹き出しの外にだけ見える（中の文字にはかからない） */
.l-main .p-knowhow__row:last-child .p-knowhow__bubble::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 3px solid rgba(240, 168, 30, .85);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    animation: fs-surprise-ring 4.2s ease-out infinite;
}

/* 驚いた瞬間に、ひとつだけ「びくっ」と跳ねる。
   右揃えの吹き出しなので、起点は右にする（左端が動くと行が揺れて見える） */
.l-main .p-knowhow__row:last-child .p-knowhow__bubble {
    transform-origin: right center;
    /* 輪を z-index:-1 で背面に置くので、吹き出し自身に重ね合わせの文脈を作る。
       これが無いと、輪が白いカードの背面にまで潜って見えなくなる */
    isolation: isolate;
    animation: fs-surprise-pop 4.2s ease-in-out infinite;
}

/* 「びくっ」と一度跳ねて、揺り戻して収まる。
   等速で拡大縮小するだけだと呼吸に見えるので、跳ね返りを2回入れる */
@keyframes fs-surprise-pop {
    0%, 70%, 100% { transform: scale(1) rotate(0deg) }
    75%           { transform: scale(1.085) rotate(-1.1deg) }
    80%           { transform: scale(.985) rotate(.7deg) }
    85%           { transform: scale(1.04) rotate(-.4deg) }
    90%           { transform: scale(.996) rotate(.2deg) }
    95%           { transform: scale(1) rotate(0deg) }
}
@keyframes fs-surprise-burst {
    0%, 68%, 100% { transform: scale(1) rotate(0deg); opacity: .9 }
    75%           { transform: scale(1.55) rotate(-8deg); opacity: 1 }
    84%           { transform: scale(.92) rotate(3deg); opacity: 1 }
    92%           { transform: scale(1.05) rotate(0deg); opacity: 1 }
}
@keyframes fs-surprise-ring {
    0%, 70% { opacity: 0; transform: scale(.98) }
    74%     { opacity: .9; transform: scale(1) }
    100%    { opacity: 0; transform: scale(1.3) }
}

/* 動きを減らす設定のときは、線と大きさだけで見せる */
@media (prefers-reduced-motion: reduce) {
    .l-main .p-knowhow__row:last-child .p-knowhow__bubble,
    .l-main .p-knowhow__row:last-child .p-knowhow__bubble::before,
    .l-main .p-knowhow__row:last-child .p-knowhow__bubble::after { animation: none }
    .l-main .p-knowhow__row:last-child .p-knowhow__bubble::after { display: none }
}

@media (min-width: 768px) {
    /* 大きさで山を作る。1.7rem → 2.3rem */
    .l-main .p-knowhow__row:last-child .p-knowhow__bubble { font-size: 2.3rem; line-height: 1.55 }
    .l-main .p-knowhow__row:nth-last-child(2) .p-knowhow__bubble { font-size: 1.85rem }
}
@media (max-width: 767px) {
    .l-main .p-knowhow__row:last-child .p-knowhow__bubble { font-size: 1.9rem; line-height: 1.6 }
}

/* ============================================================
   FV以降のトーン — 色の付いた面だけをFV側に寄せる

   FVはネイビー＋金なのに、1スクロールで LP01/02 と同じ
   サーモン・青のポップな面が並び、別のLPに見えていた。

   白い面はそのまま残す。この長さのLPで全部を濃くすると重くなるので、
   直すのは「色が付いている面」だけに絞る。
   ============================================================ */
:root {
    /* p-manifesto が元から使っている紺。濃い面はこれを基準に揃える */
    --navy: #1b2d41;
    /* 濃い面が隣り合うときに境目を残すための一段深い紺 */
    --navy-deep: #14243a;
    /* 水色の代わりに敷く、紺に寄せた淡いグレー */
    --paper: #eef1f6;
}

/* --- 濃い面 --- */
/* p-manifesto → p-media は隣接しているので、media を一段深くして境目を残す */
.l-main .p-media { background: var(--navy-deep) }
.l-main .p-case { background: var(--navy) }

/* --- 淡い面 --- */
.l-main .u-bg__sky { background: var(--paper) }

/* --- 濃くした面に乗る文字を起こす ---
   どちらもサーモン地・青地の前提で色が決まっていたので、紺にすると沈む */
.l-main .p-media .c-title__jp { color: #fff }
/* p-case__sup / p-manifesto__sup は3ページ共通の問題なので common-v3.css 側で直した */

/* --- 残った差し色を高額側に寄せる --- */
/* 事例カードのタグ。青のままだと差し色が金と2色になる */
.l-main .p-case__box-item-head .label {
    background: var(--gold);
    color: #1b2d41;
    text-shadow: none;
}
/* カードの中の水色ブロックも、面の水色と同じ淡いグレーへ */
.l-main .p-case .voice,
.l-main .p-case .voice .ttl { background: var(--paper) }

/* 白カードの中のサーモンの強調は、本家が使っている黄色マーカーに置き換える。
   紺の太字＋マーカーなら、赤系を足さずに強調が立つ。

   色は元CSSが `.u-txt__or{color:#f3815e!important}` を持っているので
   !important でないと当たらない。マーカーの止め位置は本家の
   `.u-txt__marker` と同じ 70% に合わせる（別々の値だと段差になる） */
.l-main .p-media .u-txt__or {
    color: #1b2d41 !important;
    font-weight: 700 !important;
    background: linear-gradient(transparent 70%, #ffe898 0);
}

/* 金の座布団に白文字だと読めない。
   元CSSが `color:#FFF!important` を持っているので、同じ強さで返す */
.l-main .p-case__box-item-head .label { color: #1b2d41 !important }

/* 事例カードの会社名バー。地が紺になったぶん、
   半透明（.85）のままだと地に溶けてカードの下辺が消える */
.l-main .p-case__box-item-head .ttl { background: #24374e }

/* 見出し下の英字。紺地に 50% の白は薄い */
.l-main .p-case .c-title__en { color: rgba(255, 255, 255, .85) }

/* 送りの矢印。青のままだと紺に沈む */
.l-main .p-case__box .case-button-prev::after,
.l-main .p-case__box .case-button-next::after { color: #e8c463 }

/* --- CASE のチャット --- */
/* 社長の吹き出し。青のままだと、面を淡いグレーにしても
   ここだけ LP01/02 のトーンに戻ってしまう */
.l-main .p-knowhow__row.is-a .p-knowhow__bubble {
    background: #2c4260;
}

/* 驚きの吹き出しは、色を変えても「際立つ」役を保たせる。
   濃紺で締めたぶん、金の細い縁で持ち上げる。
   （このルールは .is-a と同詳細度なので、必ず後ろに置くこと） */
.l-main .p-knowhow__row:last-child .p-knowhow__bubble {
    background: linear-gradient(180deg, #22405f 0%, #16283c 100%);
    box-shadow:
        0 8px 20px rgba(9, 22, 38, .34),
        inset 0 0 0 1.5px rgba(232, 196, 99, .85);
}

/* ============================================================
   CTA — FVの金にそろえる

   本文のCTAは「メールで問い合わせ（サーモン）」と
   「打ち合わせのご予約（青）」の2つ1組で、ヘッダー・本文4箇所・
   下端の固定バーの計6箇所に出てくる。

   両方を金にすると主副が消えて、ただ金が多いページになる。
   本命の「ご予約」だけを金にして、もう一方は白＋金の枠に落とす。
   ============================================================ */

/* 主 — 打ち合わせのご予約 */
.l-header .l-header__btn.is-sub,
.c-cta .c-cta__btn.video,
.l-main .p-why__cta .btn.is-sub,
.cta-fixed .cta-fixed__btn.video {
    background: var(--gold);
    box-shadow: 0 8px 16px rgba(176, 133, 40, .3);
}

/* 副 — メールで問い合わせ。白に落として金の枠で受ける */
.l-header .l-header__btn.is-fill,
.c-cta .c-cta__btn.mail,
.l-main .p-why__cta .btn.is-fill,
.cta-fixed .cta-fixed__btn.mail {
    background: #fff;
    box-shadow:
        inset 0 0 0 2px var(--gold-line),
        0 6px 14px rgba(20, 36, 58, .18);
}

/* 文字は両方とも濃紺。元CSSが `.c-cta__btn{color:#fff!important}` を持つので
   同じ強さで返す。白と金のどちらの面でも、白文字では読めない */
.l-header .l-header__btn.is-sub,
.l-header .l-header__btn.is-fill,
.c-cta .c-cta__btn,
.l-main .p-why__cta .btn,
.cta-fixed .cta-fixed__btn { color: #1b2d41 !important }

/* ボタン右の矢印も白で描かれている。文字と同じ濃紺に。
   軸（::before）は塗り、頭（::after）は 9px の箱の上辺と右辺だけを
   45度回した線なので、background を当てると菱形に潰れる。border を替える */
.c-cta .c-cta__btn span::before { background: #1b2d41 }
.c-cta .c-cta__btn span::after {
    border-top-color: #1b2d41;
    border-right-color: #1b2d41;
}

/* ホバー。元は赤（#d80c18）や濃い青に振っていたので、金の側へ寄せ直す */
.l-header .l-header__btn.is-sub:hover,
.c-cta .c-cta__btn.video:hover,
.l-main .p-why__cta .btn.is-sub:hover,
.cta-fixed .cta-fixed__btn.video:hover {
    background: linear-gradient(177deg, #fffdf0 0%, #ffe08a 40%, #eab21f 72%, #fff2c4 100%);
}
.l-header .l-header__btn.is-fill:hover,
.c-cta .c-cta__btn.mail:hover,
.l-main .p-why__cta .btn.is-fill:hover,
.cta-fixed .cta-fixed__btn.mail:hover {
    background: #fdf7e6;
}

/* ============================================================
   p-manifesto — 紺地に残っていたサーモンを金に

   箇条書きの強調は color 指定ではなく `animation: fadeColor forwards`
   の終了色で塗られている。アニメーションは通常の宣言より強いので、
   同名の @keyframes を後ろで定義し直して終了色ごと差し替える。
   （LP01/02 は lp-v3.css を読まないので、そちらのサーモンは残る）
   ============================================================ */
@keyframes fadeColor {
    from { opacity: 0; color: #fff }
    to   { opacity: 1; color: #e8c463 }
}

/* 35px もある行が weight 500 だと、線の細さだけが目立つ */
.l-main .p-manifesto__lead ul li,
.l-main .p-manifesto__lead ul li .u-phrase { font-weight: 700 }

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

   LP02 と同じ作りで、maeda02.webp が .l-container::before の
   背景として入っていて、FVの人物と同じ指差しポーズが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 {
        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 }
}