@charset "utf-8";
/* ============================================================
   common-v3.css — 3ページ共通の底上げ

   fig-v2 は3本とも同じ共通CSS（base/css）を使っているので、
   「細い・小さい・薄い・左右が空く」も3本に共通して出ている。
   ここはページを問わず同じルールで潰す。

   ・書体は fig-v2 のまま Noto Sans JP 一本（明朝は使わない）
   ・ただし細字は使わない。細く薄い文字はそれだけで安っぽく見える

   読み込みは fig-v2 のインライン <style> より後ろ。
   FVのレイアウトはページごとに違うので lp0X-fv.css 側で当てる。
   ============================================================ */

:root {
    --sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

    /* 字間は要素ごとにバラバラ（-0.88px / normal / +2.52px）だったので3段階に固定 */
    --ls-display: .04em;   /* 見出し */
    --ls-text: .02em;      /* 本文 */
    --ls-num: .01em;       /* 数字 */

    /* フルサポの既存カラー（本家 full-support-hojokin.com から） */
    --fs-salmon: #f3815e;
    --fs-blue: #1892ce;
    --fs-navy: #1b2d41;
    --fs-sky: #d7e6ed;
    --fs-gold: #f2c45f;
}

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

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

   個別クラスを潰すと数百箇所を追うことになるので、
   ルートを 11px に上げてページ全体を一段大きくする。
   rem ベースの指定はすべて比例して大きくなり、レイアウトの比率は崩れない。
   FVは --fvw ベースの calc なので影響を受けない。
   ------------------------------------------------------------ */
@media (min-width: 768px) {
    html { font-size: 68.75% }
}

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

   コンテナが 1100px 固定で、1440 の画面では左右に 170px ずつ空く。
   FVは画面幅いっぱいなので、そこから下だけ急に痩せて見えていた。
   ------------------------------------------------------------ */
@media (min-width: 1200px) {
    /* max-width だけ広げても、共通CSSの width:90% が先に効いて 1138px 止まりになる。
       幅そのものを広げてから上限を上げる */
    .l-main .l-container { width: 94%; max-width: 1320px }
    .l-main .l-container.sml { width: 94%; max-width: 1160px }

    /* コンテナの中にも独自の max-width を持つブロックが多く、
       そこで再び痩せていた。中身のあるブロックはまとめて広げる */
    .l-main .p-oneshot__graph,
    .l-main .p-why__grid,
    .l-main .p-why__cta,
    .l-main .p-detail__inner { max-width: 1240px }

    .l-main .p-trouble__list,
    .l-main .c-cta__box,
    .l-main .p-flow__frame,
    .l-main .p-faq__list { max-width: 1120px }

    .l-main .p-trouble__phase { max-width: 960px }

    /* read（1行の文章）は広げすぎると読みにくいので控えめに */
    .l-main .p-oneshot__lead,
    .l-main .p-flow__lead { max-width: 920px }
}

/* ------------------------------------------------------------
   本文のウェイト

   **このLPに「細くていい場所」は無い。本文も注記もボタンも 700 で通す。**
   500 は日本語だと線が痩せて見え、それだけで既製品らしさが出る。
   2026-08-05 に 500 → 700 へ全面的に引き上げた（それ以前は 500 だった）。

   ★ :where() で詳細度を 0 にしてあるのが肝。
     ふつうに `.l-main p { font-weight:700 }` と書くと、
     元CSSで 900 が当たっている <p class="figfv__pill"> などを
     まとめて 700 に落としてしまい、
     「太かったものが細くなる」という逆効果になる。
     詳細度0なら、元CSSに指定がある要素はそちらが勝ち、
     指定がない要素だけが 700 になる。

   ★★ ただし `.l-main :where(...)` と書くと、`.l-main` のぶん詳細度が
      0,1,0 のまま残る。すると同じ詳細度の `.figfv__pill{font-weight:900}` に
      後勝ちしてしまい、結局「太字が 700 に落ちる」。
      祖先側も :where() で包んで、セレクタ全体の詳細度を 0 にすること。
   ------------------------------------------------------------ */
:where(.l-main) :where(p, li, dd, dt, .txt, .outline_txt, .lead, .conclusion_sub) {
    font-weight: 700;
}

/* 詳細度0では勝てない＝元CSSが weight:400 を明示している箇所。
   ここは個別に上書きする。:where() だけで済ませると、
   「太字は守れたが細字も直らない」状態になる。 */
.l-main .p-media__box-content .txt,
.l-main .p-media__box-content .txt span,
.l-main .p-case__box-item-head .label,
.l-main .p-case__box-item-desc .outline_txt,
.l-main .p-case__box-item-desc .outline_txt span,
.l-main .p-case__box-item-desc .voice .txt,
.l-main .p-case__box-item-desc .voice .txt span,
.l-main .new-graph__inr .exp li,
.l-main .p-detail__box-contents-exp .dl dd,
.l-main .p-detail__box-contents-exp .dl dd span,
.l-main .p-msg__text,
.l-main .p-msg__text span,
.l-main .c-cta__btn span,
.l-main .p-knowhow__body .name,
.l-main .p-knowhow__bubble,
.l-main .p-knowhow__bubble span { font-weight: 700 }

/* 上で拾いきれない「小さい字」も底上げする */
.l-main .p-knowhow__row .p-knowhow__body .name,
.l-main .p-flow__item .no .s { font-size: 1.3rem }

/* 元CSSが weight:400 / 500 を明示している親を、残らず 700 にする。
   中の .u-phrase は指定を持たないので、親を直せば継承される。
   （＝ .u-phrase を個別に指定して回る必要はない） */
.l-main .txt,
.l-main .sub,
.l-main .list dd,
.l-main .ul li,
.l-main .dl dd,
.l-main .p-detail__box .p-detail__box-lead,
.l-main .p-detail__box .p-detail__box-notice,
.l-main .p-detail__box-contents-exp p,
.l-main .p-detail__title .p-detail__title-ttlsup,
.l-main .p-flow__lead,
.l-main .p-manifesto__sup,
.l-main .p-case__sup,
.l-main .source,
.l-main .conclusion_sub,
.l-main .p-trouble__list-inner .p-trouble__leadsup,
.l-main .p-trouble__phase .p-trouble__phasesup,
.l-main .p-msg__text,
.l-main a span { font-weight: 700 }

/* ------------------------------------------------------------
   大きい文字は太くする

   44px もある見出しが weight 500 だと、大きいぶんだけ線の細さが目立ち、
   「読ませる気がない」印象になる。
   大きさと太さは連動させる（大きい＝主役＝太い）。
   ------------------------------------------------------------ */
.l-main .p-trouble__copy2 .txt,
.l-main .p-trouble__copy2 .txt span,
.l-main .p-trouble__copy .p-trouble__copy-01,
.l-main .p-trouble__copy .p-trouble__copy-02,
.l-main .p-trouble__copy .p-trouble__copy-03,
.l-main .p-reason__lead .txt01,
.l-main .p-reason__lead .txt01 span,
.l-main .p-reason__lead .txt02,
.l-main .p-reason__lead .txt02 span,
.l-main .p-reason__box-item-text p,
.l-main .p-reason__box-item-text p span,
.l-main .p-reason__box-item-text .sml,
.l-main .p-reason__box-item-text .md,
.l-main .p-oneshot__lead,
.l-main .p-oneshot__lead span,
.l-main .p-why__conclusion .txt,
.l-main .p-msg__catch,
.l-main .p-msg__catch span { font-weight: 700 }

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

   白地に薄いグレー（#8b94a0 や #999）は、それだけで手抜きに見える。
   本文と同じ濃さまでは戻さず、読める濃さに上げる。
   ------------------------------------------------------------ */
.l-main .p-why__cta p:not(.ttl) { color: #39414f; font-size: 1.4rem }

/* グラフまわりの補足・軸ラベル・注記。#8b94a0 / #6b7280 / #9aa5b1 と薄い順に3種あった。
   ★ .note の中の .sub は .note より詳細度が高く、親を濃くしても勝てない。
     入れ子の子要素まで指定すること */
.l-main .p-oneshot__graph-chart .axis,
.l-main .p-oneshot__graph-chart .axis span,
.l-main .p-oneshot__graph-sup,
.l-main .p-oneshot__graph-sup span,
.l-main .p-oneshot__graph-notes .note,
.l-main .p-oneshot__graph-notes .note .tag,
.l-main .p-oneshot__graph-notes .note .tag span,
.l-main .p-oneshot__graph-notes .note .sub,
.l-main .p-oneshot__graph-notes .note .sub span,
.l-main .p-oneshot__graph-notes .note .val,
.l-main .note,
.l-main .note .tag,
.l-main .note .tag span,
.l-main .note .sub,
.l-main .note .sub span,
.l-main .note span { color: #46505f }

/* 注記類は 13px と小さいので、サイズも上げる。小さい字ほど細いと読めない */
.l-main .p-oneshot__graph-sup,
.l-main .p-oneshot__graph-chart .axis,
.l-main .note,
.l-main .note .tag,
.l-main .note .sub { font-weight: 700 }

/* フッターは .l-main の外なので、上のルールがどれも当たらない。
   規約リンクとコピーライトが weight 400 のまま残っていた */
.l-footer .navi a,
.l-footer .navi a span,
.l-footer .copy,
.l-footer .copy span { font-weight: 700 }

/* ------------------------------------------------------------
   小さすぎる字の底上げ

   注記・出典・ラベルが 12〜13px で置かれている箇所が多い。
   「注記だから小さくていい」ではなく、小さい字はそれだけで安っぽく見える。
   14px 相当まで引き上げる。
   ------------------------------------------------------------ */
/* ★ font-size に :where() を使ってはいけない。
     詳細度0だと元CSSの小さい指定（13px など）がそのまま勝ってしまう。
     :where() を使うのは font-weight だけ（元の太字を壊さないため）。
     大きさと色は、元より詳細度の高いセレクタで確実に上書きする。 */
.l-main .p-case__sup,
.l-main .p-case__sup .u-phrase,
.l-main .source,
.l-main .source .u-phrase,
.l-main .p-manifesto__sup,
.l-main .p-trouble__leadsup,
.l-main .p-trouble__phasesup,
.l-main .p-detail__box-notice,
.l-main .p-detail__title .p-detail__title-ttlsup,
.l-main .p-oneshot__graph .p-oneshot__graph-sup,
.l-main .p-oneshot__graph-chart .axis,
.l-main .p-oneshot__graph-chart .axis span,
.l-main .p-oneshot__graph-notes .note,
.l-main .p-oneshot__graph-notes .note .sub,
.l-main .p-oneshot__graph-notes .note .tag,
.l-main .note .sub,
.l-main .conclusion_sub,
.l-main .ttl .comment,
.l-main .p-case__box-item-desc .voice .txt { font-size: 1.35rem }

.l-main .p-case__box-item-desc .price dt { font-size: 1.3rem }
.l-main .p-flow__item .no .s { font-size: 1.35rem }

/* ------------------------------------------------------------
   読ませたい一文を大きくする

   セクションの主題と、その直下のリード文が小さいと
   「読ませる気がない」ページに見える。
   ------------------------------------------------------------ */
@media (min-width: 768px) {
    .l-main .c-title__jp { font-size: 4.6rem; line-height: 1.4 }
    .l-main .p-oneshot__lead { font-size: 2.4rem; line-height: 1.7 }
    .l-main .p-flow__lead { font-size: 2.2rem; line-height: 1.7 }
    .l-main .p-why__cta .ttl { font-size: 3.2rem }
    .l-main .p-knowhow__bubble { font-size: 1.7rem; line-height: 1.75 }
}

/* CTAボタンを大きく。押す場所は大きいほうがいい */
@media (min-width: 768px) {
    .l-main .c-cta__btn {
        padding: 1.35em 1.6em;
        font-size: 2.1rem;
    }
    .l-main .c-cta__btn span { font-size: inherit }
    .l-main .l-header__btn { padding: .95em 1.5em; font-size: 1.45rem }
}

/* ------------------------------------------------------------
   薄い文字をもう一段濃く

   #4a5568 / #55606f でも、13〜15px の小さい字だと白地に沈む。
   注記は「読ませない前提」で薄くされがちだが、
   薄いグレーはそれ自体が安っぽさの原因になる。
   ------------------------------------------------------------ */
.l-main .p-detail__box-notice,
.l-main .p-why__cta p:not(.ttl),
.l-main .p-why__cta .sub,
.l-main .p-why__cta .sub span,
.l-main .source,
.l-main .source span,
.l-main .p-trouble__leadsup,
.l-main .p-trouble__phasesup,
.l-main .p-oneshot__graph-chart .axis,
.l-main .p-oneshot__graph-chart .axis span,
.l-main .p-oneshot__graph-sup,
.l-main .p-oneshot__graph-sup span,
.l-main .note,
.l-main .note .tag,
.l-main .note .tag span,
.l-main .note .sub,
.l-main .note .sub span { color: #39414f }

/* ただし、この2つの注記は濃い地の上に置かれている
   （p-manifesto は3ページとも #1b2d41、p-case は青または紺）。
   元CSSは白で置いていたので、上の一覧に混ぜると逆に読めなくなる。
   薄いグレーではなく、地から浮く明るい色で受ける */
.l-main .p-manifesto__sup,
.l-main .p-manifesto__sup span,
.l-main .p-case__sup,
.l-main .p-case__sup span { color: #c9d3e0 }

/* ------------------------------------------------------------
   字間の統一
   ------------------------------------------------------------ */
.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 }
.l-main .c-title__jp { letter-spacing: var(--ls-display) }

/* 数字は桁を揃える */
.l-main .p-case__box-item-desc .price dd,
.l-main .new-graph .percentage-bar-num {
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-num);
}

/* ============================================================
   UGC — 使った社長のインタビュー（3ページ共通）

   2026-08-07 の定例で「実際に言ってる動画のキャプチャを、
   いいセリフのところだけ並べる／喜びの声のプラス版」と決まったもの。
   HTMLは `ugc_block.html` をビルドが「お客様の声」の直後に差し込む。

   地は白のまま。3本とも基調色（サーモン／ブルー／ネイビー）が違うので、
   ここに色を敷くとLPごとに作り直しになる。
   キャプチャ自体が色を持っているので、台紙は白で受けるのが一番きれい。
   ============================================================ */
.l-main .p-ugc {
    padding: 88px 0 96px;
    background: #fff;
}

.l-main .p-ugc__head {
    text-align: center;
    margin-bottom: 40px;
}
.l-main .p-ugc__label {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .18em;
    /* #8a7a4e → #6b5b28 でもまだ audit の「薄い色」に出たので、さらに濃く。
       金の系統は残しつつ、白地で沈まない濃さまで下げる */
    color: #4f4116;
    margin-bottom: 10px;
}
.l-main .p-ugc__ttl {
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .04em;
    color: #1b2d41;
}
.l-main .p-ugc__who {
    margin-top: 18px;
    font-size: 1.5rem;
    line-height: 1.6;
    color: #39414f;
}
.l-main .p-ugc__role { display: block }
/* PCは1行で「所属／役職」。区切りは文字として持たずCSSで足す */
.l-main .p-ugc__role-a::after { content: "／" }
.l-main .p-ugc__name {
    display: inline-block;
    margin-top: 4px;
    font-size: 1.8rem;
    color: #1b2d41;
}

/* 横一列。PCは5枚が収まり、SPは横スクロールになる */
.l-main .p-ugc__list {
    display: flex;
    gap: 16px;
    /* スクロールしたときに端で切れて見えないよう、内側の余白を持たせる */
    padding: 4px 0 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.l-main .p-ugc__item {
    flex: 0 0 auto;
    width: calc((100% - 64px) / 5);
    border-radius: 12px;
    overflow: hidden;
    scroll-snap-align: start;
    box-shadow: 0 10px 24px rgba(20, 36, 58, .18);
}
.l-main .p-ugc__item img {
    display: block;
    width: 100%;
    height: auto;
}

.l-main .p-ugc__note {
    margin-top: 18px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: #39414f;
}

@media (max-width: 767px) {
    .l-main .p-ugc { padding: 56px 0 60px }
    .l-main .p-ugc__head { margin-bottom: 26px }
    .l-main .p-ugc__ttl { font-size: 2.4rem; line-height: 1.5 }
    .l-main .p-ugc__who { font-size: 1.3rem }
    .l-main .p-ugc__name { font-size: 1.6rem }
    /* 1行に収まらず「代表取締役」だけが次行に落ちていた。
       意味の切れ目（所属／役職）で分ける */
    .l-main .p-ugc__role-a,
    .l-main .p-ugc__role-b { display: block }
    .l-main .p-ugc__role-a::after { content: none }

    /* 1枚を画面いっぱいにせず、次のカードの端を見せて
       「横に続きがある」と分かるようにする */
    .l-main .p-ugc__list {
        gap: 12px;
        /* コンテナからはみ出して画面端まで使う。
           端で切れると「並んでいる」ことが伝わらない */
        margin: 0 calc(50% - 50vw);
        padding: 4px calc(50vw - 50% + 5vw) 12px;
    }
    .l-main .p-ugc__item { width: 62vw }
}