/* HAKUSO トップページ専用スタイル
   index.html の <head> にインラインで置かれていた3つの <style> を、出現順のまま外部化したもの。
   head が10万文字あるとクローラやAIがページ本文に到達できないため分離した。
   読み込み位置は元の1つ目の <style> と同じ（css/style.css と外部フォントの後）。 */

/* ===== from <style> ===== */
/* ===== 塗装特化トップ専用スコープCSS（このインライン<style>はindex.htmlのみ＝サブpage非波及） ===== */
    /* 提案書 実値カラー。:rootへ追加するが新規名のため既存--primary/--secondaryは不変 */
    :root{
      --pNavy:#0f2342; --pNavy2:#16335c; --pTeal:#15604e; --pOrange:#e8762e; --pOrangeD:#c2591a;
      --pGreen:#1f7a5a; --pCell:#eef4fb; --pLine:#d7e0ec; --pInk:#1d2b40; --pGray:#4c5a6d;
    }
    .lp-paint{ font-family:"Noto Sans JP",sans-serif; color:var(--pInk); }
    /* キーボード操作のフォーカス可視化（a11y） */
    .lp-paint a:focus-visible, .lp-paint button:focus-visible, .lp-paint [tabindex]:focus-visible, .lp-paint input:focus-visible, .lp-paint summary:focus-visible{ outline:3px solid var(--pOrange); outline-offset:3px; border-radius:0; }
    .lp-container{ max-width:1040px; margin:0 auto; padding:0 24px; }
    .lp-en{ font-size:13px; font-weight:800; letter-spacing:.24em; color:var(--pGreen); }
    .lp-ul{ width:84px; height:7px; background:var(--pOrange); border-radius:0; margin:16px 0 0; }
    .lp-ul.center{ margin-left:auto; margin-right:auto; }
    /* pill chips（ヒーローのダーク背景でも使える白系） */
    .lp-chips{ display:flex; gap:12px; flex-wrap:wrap; }
    .lp-chip{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.45); color:#fff; font-size:14px; font-weight:700; padding:8px 20px; border-radius:999px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); text-decoration:none; cursor:pointer; transition:background .2s,border-color .2s,transform .2s; }
    a.lp-chip:hover{ background:rgba(255,255,255,.3); border-color:#fff; transform:translateY(-2px); }
    a.lp-chip::after{ content:"\f063"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:10px; opacity:.7; }
    .lp-scroll-target{ scroll-margin-top:96px; }

    /* === ヒーロー：CTA安心一行＋運営者信頼バッジ＋希少性 === */
    .hero-cta-note{ margin:14px 0 0; font-size:13px; font-weight:600; color:rgba(255,255,255,.82); display:flex; align-items:center; gap:8px; line-height:1.5; }
    .hero-cta-note i{ color:#5fd0a0; flex:0 0 auto; }
    .hero-trust{ display:flex; align-items:center; gap:13px; margin:18px 0 0; padding:13px 16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:0; max-width:500px; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
    .hero-trust-img{ flex:0 0 52px; width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.55); background:#fff; }
    .hero-trust-txt{ margin:0; font-size:13px; font-weight:600; line-height:1.55; color:rgba(255,255,255,.92); }
    .hero-trust-txt b{ color:#fff; font-weight:800; }
    .hero-trust-txt em{ color:#ffce86; font-style:normal; font-weight:800; }
    @media(max-width:600px){ .hero-trust{ max-width:none; } .hero-cta-note{ font-size:12px; } }

    /* === 統計の結論コール（自分ごと化） === */
    .lp-stat-conclusion{ max-width:760px; margin:34px auto 0; background:var(--pCell); border-left:5px solid var(--pOrange); border-radius:0; padding:17px 24px; font-size:clamp(13.5px,2.3vw,15.5px); font-weight:700; line-height:1.65; color:var(--pNavy); }
    .lp-stat-conclusion i{ color:var(--pOrange); margin-right:7px; }
    .lp-stat-conclusion b{ color:var(--pOrange); }

    /* === 無料診断オファー（何が届くか） === */
    .lp-diag-offer{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:34px; align-items:center; max-width:1080px; margin:0 auto; background:linear-gradient(150deg,#16335c,#0f2342); border-radius:0; padding:40px 42px; box-shadow:none; }
    .lp-diag-report-img{ display:block; border-radius:0; overflow:hidden; box-shadow:none; background:#fff; }
    .lp-diag-report-img img{ width:100%; height:auto; display:block; }
    .lp-diag-offer-l .lp-en{ display:block; color:var(--pOrange); margin-bottom:8px; }
    .lp-diag-offer-l h2{ color:#fff; font-size:clamp(19px,2.5vw,23px); font-weight:900; line-height:1.45; margin:0 0 12px; text-wrap:balance; }
    .lp-diag-offer-l h2 em{ color:#ffce86; font-style:normal; }
    .lp-diag-offer-lead{ color:#cdd8e8; font-weight:600; font-size:14.5px; line-height:1.7; margin:0 0 20px; }
    .lp-diag-offer-l .lp-cta-btn{ display:inline-flex; align-items:center; gap:9px; }
    .lp-diag-offer-note{ color:#9fb1c8; font-size:12.5px; font-weight:600; margin:13px 0 0; }
    .lp-diag-card{ background:#fff; border-radius:0; padding:24px 26px; box-shadow:none; }
    .lp-diag-card-head{ font-weight:900; color:var(--pNavy); font-size:16px; margin-bottom:16px; display:flex; align-items:center; gap:9px; padding-bottom:14px; border-bottom:2px solid var(--pCell); }
    .lp-diag-card-head i{ color:var(--pOrange); }
    .lp-diag-card ul{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
    .lp-diag-card li{ display:flex; gap:11px; align-items:flex-start; font-size:14px; font-weight:700; color:#3a4a60; line-height:1.5; }
    .lp-diag-card li i{ flex:0 0 18px; color:var(--pGreen); margin-top:2px; }
    .lp-diag-card li b{ color:var(--pNavy); }
    /* 診断レポートのサンプル図 */
    .lp-report-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:900; color:var(--pNavy); font-size:14.5px; margin-bottom:15px; }
    .lp-report-head i{ color:var(--pOrange); margin-right:6px; }
    .lp-report-sample{ font-size:10.5px; font-weight:900; letter-spacing:.08em; color:#fff; background:var(--pOrange); padding:3px 9px; border-radius:999px; }
    .lp-report-rank .rlabel{ font-size:12px; font-weight:800; color:var(--pGray); margin-bottom:7px; }
    .lp-report-rank .rbar{ position:relative; height:12px; border-radius:999px; background:linear-gradient(90deg,#f0d9cb,#cfe6dc); }
    .lp-report-rank .rmark{ position:absolute; top:50%; left:15%; transform:translate(-50%,-50%); width:26px; height:26px; border-radius:50%; background:var(--pOrange); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; box-shadow:none; border:2px solid #fff; }
    .lp-report-rank .rscale{ display:flex; justify-content:space-between; font-size:10.5px; font-weight:800; color:var(--pGray); margin-top:6px; }
    .lp-report-rank .rscale span:last-child{ color:var(--pGreen); }
    .lp-report-bars{ margin-top:16px; display:grid; gap:8px; }
    .lp-report-bars .brow{ display:grid; grid-template-columns:54px 1fr 56px; align-items:center; gap:9px; }
    .lp-report-bars .bl{ font-size:11.5px; font-weight:800; color:var(--pNavy); }
    .lp-report-bars .bt{ height:9px; border-radius:999px; background:var(--pCell); overflow:hidden; }
    .lp-report-bars .bf{ display:block; height:100%; border-radius:999px; }
    .lp-report-bars .bf.you{ background:var(--pOrange); }
    .lp-report-bars .bf.comp{ background:var(--pGreen); }
    .lp-report-bars .bv{ font-size:10.5px; font-weight:800; color:var(--pGray); text-align:right; }
    .lp-report-divider{ height:1px; background:var(--pCell); margin:18px 0 16px; }
    .lp-report-note{ font-size:11px; color:var(--pGray); font-weight:600; line-height:1.55; margin:14px 0 0; }
    @media(max-width:820px){ .lp-diag-offer{ grid-template-columns:1fr; gap:24px; padding:30px 24px; } }

    /* === お客様の声（実在・許諾済み） === */
    .lp-voice-wrap{ position:relative; max-width:860px; margin:0 auto; background:#fff; border:1px solid var(--pLine); border-radius:0; padding:42px 46px 34px; box-shadow:none; }
    .lp-voice-q{ position:absolute; top:24px; left:30px; font-size:38px; color:var(--pCell); }
    .lp-voice-text{ position:relative; font-size:clamp(16px,2.7vw,20px); font-weight:700; line-height:1.95; color:var(--pNavy); margin:0 0 26px; padding-left:6px; }
    .lp-voice-person{ display:flex; align-items:center; gap:18px; border-top:1px solid var(--pLine); padding-top:22px; }
    .lp-voice-img{ flex:0 0 74px; width:74px; height:74px; border-radius:50%; object-fit:cover; border:3px solid var(--pCell); }
    .lp-voice-name{ font-size:15.5px; font-weight:900; color:var(--pNavy); line-height:1.4; }
    .lp-voice-cat{ font-size:12px; font-weight:600; color:#6b7890; margin-top:4px; line-height:1.55; }
    .lp-voice-link{ display:inline-block; margin-top:5px; font-size:13px; font-weight:800; color:var(--pOrange); text-decoration:none; }
    .lp-voice-link:hover{ text-decoration:underline; }
    .lp-voice-badge{ display:inline-flex; align-items:center; gap:6px; margin-top:20px; background:#eafaf3; color:var(--pGreen); font-size:12px; font-weight:800; padding:6px 13px; border-radius:999px; }
    .lp-voice-badge i{ font-size:12px; }
    @media(max-width:600px){ .lp-voice-wrap{ padding:30px 22px 26px; } .lp-voice-person{ flex-wrap:wrap; gap:14px; } }

    /* === 3本柱：デスクトップ＆motion許可時のみフルスクリーン中央寄せ（GSAPでピン留め展開） === */
    @media(min-width:769px) and (prefers-reduced-motion: no-preference){
      #lp-pillars{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; background:var(--pCell); position:relative; z-index:1; }
    }
    /* 提案書色の主CTA（オレンジ）— scope外でも使えるよう実値 */
    .lp-cta-btn{ display:inline-flex; align-items:center; gap:10px; background:var(--pOrange); color:#fff; font-size:clamp(15px,2.6vw,18px); font-weight:900; padding:18px 34px; border-radius:999px; text-decoration:none; box-shadow:none; transition:transform .25s,box-shadow .25s; letter-spacing:.02em; }
    .lp-cta-btn:hover{ transform:translateY(-2px); box-shadow:none; }
    .lp-cta-sub{ display:inline-flex; align-items:center; gap:8px; color:var(--pNavy); font-size:14px; font-weight:700; text-decoration:none; border-bottom:2px solid var(--pLine); padding-bottom:3px; }
    /* ===== 課題定義（自分事化）セクション ===== */
    .lp-pain{ background:linear-gradient(180deg,#fff 0%,var(--pCell) 100%); padding:74px 0 84px; }
    .lp-pain-head{ text-align:center; margin-bottom:30px; }
    .lp-pain-head .lp-h2{ font-family:var(--font-display); font-size:clamp(27px,3.9vw,54px); font-weight:800; color:var(--pNavy); line-height:1.24; letter-spacing:-.01em; margin:12px 0 0; }
    .lp-pain-head .lp-h2 em{ font-style:normal; color:var(--pOrange); }
    .lp-lead{ text-align:center; max-width:760px; margin:0 auto 30px; font-size:15px; font-weight:700; color:var(--pGray); line-height:1.7; }
    .lp-trigger{ max-width:760px; margin:0 auto 40px; background:var(--pNavy); border-radius:0; padding:30px 32px; text-align:center; }
    .lp-trigger p{ color:#fff; font-size:clamp(17px,3.3vw,25px); font-weight:900; line-height:1.5; margin:0; }
    .lp-trigger .q{ color:#ffb38a; }
    .lp-trigger small{ display:block; margin-top:14px; color:#bcd0ee; font-size:13.5px; font-weight:600; line-height:1.6; }
    .lp-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:840px; margin:0 auto 16px; }
    .lp-stat{ background:#fff; border:2px solid var(--pLine); border-radius:0; padding:26px 16px; text-align:center; }
    .lp-stat .n{ font-size:clamp(34px,7vw,54px); font-weight:900; color:var(--pOrangeD); line-height:1; }
    .lp-stat .c{ font-size:12px; font-weight:900; color:var(--pGray); margin-top:8px; }
    .lp-stat .t{ font-size:14px; font-weight:700; color:var(--pNavy); margin-top:10px; line-height:1.45; }
    .lp-stat .t b{ color:var(--pOrange); }
    .lp-src{ text-align:center; font-size:12px; color:var(--pGray); font-weight:600; max-width:840px; margin:0 auto; line-height:1.5; }
    .lp-bridge{ max-width:820px; margin:34px auto 0; background:#fff5ef; border-left:8px solid var(--pOrange); border-radius:0; padding:24px 28px; font-size:clamp(15px,2.8vw,19px); font-weight:800; color:#7a3414; line-height:1.6; }
    .lp-bridge b{ color:var(--pOrange); }
    .lp-check-h{ text-align:center; margin:52px auto 6px; font-size:clamp(20px,3.6vw,28px); font-weight:900; color:var(--pNavy); line-height:1.4; }
    .lp-check-h em{ font-style:normal; color:var(--pOrange); }
    /* セルフ診断＋結果をPCで横並び */
    .lp-diag-row{ display:grid; grid-template-columns:1fr 1fr; gap:48px; max-width:1100px; margin:20px auto 0; align-items:center; }
    .lp-diag-row .lp-diag, .lp-diag-row .lp-result{ margin:0; max-width:none; }
    @media(max-width:900px){ .lp-diag-row{ grid-template-columns:1fr; max-width:680px; gap:22px; } }
    .lp-check-sub{ text-align:center; font-size:14px; color:var(--pGray); font-weight:700; margin-bottom:24px; }
    .lp-checklist{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
    .lp-check{ display:flex; align-items:center; gap:18px; background:#fbfcfe; border:2px solid var(--pLine); border-radius:0; padding:18px 22px; }
    .lp-check .ic{ flex:0 0 56px; width:56px; height:56px; border-radius:0; background:var(--pNavy); color:#ffce86; font-size:26px; font-weight:900; display:flex; align-items:center; justify-content:center; }
    .lp-check .tx{ flex:1; font-size:15px; font-weight:700; color:var(--pNavy); line-height:1.45; }
    .lp-check .tx .k{ color:var(--pOrange); font-weight:900; }
    .lp-check .yn{ flex:0 0 auto; display:flex; gap:6px; }
    .lp-check .yn span{ font-size:11px; font-weight:900; color:#fff; background:var(--pGray); border-radius:0; padding:5px 9px; }
    .lp-verdict{ max-width:760px; margin:44px auto 0; background:var(--pNavy); border-radius:0; padding:30px 30px; text-align:center; }
    .lp-verdict .t{ color:#fff; font-size:clamp(17px,3.2vw,24px); font-weight:900; line-height:1.5; }
    .lp-verdict .t em{ font-style:normal; color:#ffb38a; }
    .lp-verdict .b{ color:#cfdcef; font-size:14px; font-weight:700; margin-top:14px; line-height:1.55; }
    /* セルフ診断の結果＝HP健康度ゲージ（タップで動的変化） */
    .lp-result{ max-width:680px; margin:44px auto 0; background:#fff; border:2px solid var(--pLine); border-radius:0; padding:26px 30px; box-shadow:none; }
    .lp-result-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; flex-wrap:wrap; }
    .lp-result-label{ font-size:15px; font-weight:900; color:var(--pNavy); display:inline-flex; align-items:center; }
    .lp-result-dots{ display:inline-flex; gap:6px; margin-left:11px; }
    .lp-result-dots .d{ width:13px; height:13px; border-radius:50%; background:var(--pLine); transition:background .3s; }
    .lp-result-dots .d.on{ background:var(--pGreen); }
    .lp-result-score{ font-size:15px; font-weight:800; color:var(--pGray); }
    .lp-result-score b{ color:var(--pOrange); font-size:23px; }
    .lp-result-bar{ height:13px; border-radius:999px; background:var(--pCell); overflow:hidden; }
    .lp-result-fill{ display:block; height:100%; width:0; border-radius:999px; background:#d9534f; transition:width .55s cubic-bezier(.16,1,.3,1), background .4s; }
    .lp-result-msg{ font-size:clamp(15px,2.8vw,19px); font-weight:900; color:var(--pNavy); line-height:1.5; margin:18px 0 0; text-wrap:pretty; }
    .lp-result-msg em{ font-style:normal; color:var(--pOrange); }
    .lp-result-sub{ font-size:13px; color:var(--pGray); font-weight:700; margin:8px 0 0; line-height:1.6; }
    .lp-result-cta{ display:inline-flex; align-items:center; gap:9px; margin-top:18px; background:var(--pOrange); color:#fff; font-weight:900; font-size:15px; padding:13px 26px; border-radius:999px; text-decoration:none; box-shadow:none; transition:transform .25s,box-shadow .25s; }
    .lp-result-cta:hover{ transform:translateY(-2px); box-shadow:none; }
    .lp-cta-row{ display:flex; gap:18px 22px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:30px; }
    /* スマホ追従CTAバー */
    /* --- 報告書代行ティーザー --- */
    .hk-teaser{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:44px; align-items:center; max-width:1040px; margin:0 auto; }
    .hk-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
    .hk-points li{ display:flex; align-items:flex-start; gap:12px; font-size:14.5px; font-weight:600; color:var(--pNavy,#16335c); line-height:1.7; }
    .hk-points li i{ color:var(--pGreen,#1f7a5a); font-size:15px; margin-top:4px; flex:0 0 18px; text-align:center; }
    .hk-stat{ margin-top:22px; background:rgba(31,122,90,.08); border:1px solid rgba(31,122,90,.22); border-radius:0; padding:16px 20px; display:flex; align-items:center; gap:16px; }
    .hk-stat-num{ font-family:var(--font-en,'Archivo',sans-serif); font-size:clamp(20px,3vw,26px); font-weight:700; color:var(--pGreen,#1f7a5a); white-space:nowrap; display:inline-flex; align-items:center; gap:8px; }
    .hk-stat-num i{ font-size:14px; }
    .hk-stat-txt{ font-size:12.5px; color:#555; line-height:1.7; }
    .hk-teaser-imgs{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; text-decoration:none; }
    .hk-teaser-imgs img{ max-width:100%; }
    .hk-teaser-imgs img{ width:100%; height:auto; display:block; border-radius:0; border:1px solid #e2e2e2; box-shadow:none; transition:transform .35s ease, box-shadow .35s ease; }
    .hk-teaser-imgs:hover img{ transform:translateY(-4px); box-shadow:none; }
    @media(max-width:860px){ .hk-teaser{ grid-template-columns:1fr; gap:30px; } .hk-teaser-imgs{ max-width:440px; margin:0 auto; } }
    /* 報告書代行=画像左・文章右／ぬりカルテ=文章左・画像右(シラクラ指示 2026-07-24) */
    .lp-sticky-cta{ display:none; }
    @media (max-width:768px){
      .lp-stats{ grid-template-columns:1fr; max-width:380px; }
      .lp-check .yn{ display:none; }
      .lp-check .ic{ flex-basis:48px; width:48px; height:48px; font-size:22px; }
      .lp-sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:9000; background:var(--pNavy); padding:9px 12px calc(9px + env(safe-area-inset-bottom)); display:flex; justify-content:center; box-shadow:none; }
      .lp-sticky-cta a{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; max-width:420px; background:var(--pOrange); color:#fff; font-size:15px; font-weight:900; padding:14px; border-radius:0; text-decoration:none; }
    }

    /* ===== 共感・3本柱・サービス・効果（提案書P2/P4/P5/P6） ===== */
    /* ヒーロー見出し：1行目(dim)を小さくして3行相当に収める（4行になると上が見切れる） */
    .hero-h1 .dim{ display:block; font-size:.55em; letter-spacing:-.01em; margin-bottom:2px; }
    .hero-h1{ font-size:clamp(32px,4.15vw,60px) !important; margin-bottom:14px !important; }
    .hero-lead{ margin-bottom:0 !important; }
    .hero-content .lp-chips{ margin:14px 0 2px !important; }
    .hero-cta-group{ margin-top:14px !important; }
    .hero-cta-note{ margin-top:8px !important; }
    .hero-trust{ margin-top:12px !important; }
    .hero-bottom-bar{ padding-top:9px !important; padding-bottom:9px !important;
      left:auto !important; right:5% !important; transform:none !important; bottom:106px !important; }
    @media(max-width:900px){ .hero-bottom-bar{ left:50% !important; right:auto !important; transform:translateX(-50%) !important; } }
    .lp-sec{ padding:72px 0; }
    .lp-sec.alt{ background:var(--pCell); }
    /* ===== セクション見出し：案B タイポで殴る（2026-07-17 チケット01）=====
       ゴシック→明朝／サイズを大幅に上げる。
       揃えは中央（2026-07-17 シラクラ指示）。カード側が text-align:center のため、
       見出しだけ左揃えにするとセクション内で揃えが食い違う。
       左揃えで殴るのはヒーローだけに限定する。 */
    .lp-sec-head{ text-align:center; margin-bottom:48px; }
    .lp-sec-head .lp-en{ display:inline-flex; align-items:center; gap:14px; margin-bottom:14px; color:var(--pOrange); }
    .lp-sec-head .lp-en::before{ content:""; width:56px; height:1px; background:var(--pOrange); flex:0 0 auto; }
    .lp-sec-head .lp-en::after{ content:""; width:56px; height:1px; background:var(--pOrange); flex:0 0 auto; }
    .lp-sec-head .lp-h2{ font-family:var(--font-display); font-size:clamp(27px,3.9vw,54px); font-weight:800; color:var(--pNavy); line-height:1.24; letter-spacing:-.01em; margin:0; }
    .lp-sec-head .lp-h2 em{ font-style:normal; color:var(--pOrange); }
    .lp-sec-head .lp-lead2{ margin:20px auto 0; max-width:680px; font-size:15px; font-weight:400; color:var(--pGray); line-height:1.95; }
    @media(max-width:760px){
      .lp-sec-head{ margin-bottom:32px; }
      .lp-sec-head .lp-en::before, .lp-sec-head .lp-en::after{ width:24px; }
    }
    /* 共感 */
    .lp-greet{ max-width:880px; margin:0 auto; display:flex; gap:40px; align-items:center; background:#fff; border:2px solid var(--pLine); border-radius:0; padding:40px; }
    .lp-greet img{ width:132px; height:132px; border-radius:50%; object-fit:cover; object-position:center top; flex-shrink:0; border:4px solid var(--pCell); }
    .lp-greet .gh{ font-size:clamp(19px,3.4vw,26px); font-weight:900; color:var(--pNavy); line-height:1.45; margin:0 0 14px; }
    .lp-greet .gh em{ font-style:normal; color:var(--pOrange); }
    .lp-greet p{ font-size:14.5px; line-height:1.85; color:#3a4658; margin:0 0 10px; }
    .lp-greet .gn{ margin-top:14px; font-size:13px; color:var(--pGray); font-weight:700; }
    .lp-greet .gn b{ color:var(--pNavy); }
    /* 3本柱 */
    .lp-pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:980px; margin:0 auto; }
    .lp-pillar{ background:#fff; border:2px solid var(--pLine); border-radius:0; overflow:hidden; display:flex; flex-direction:column; }
    .lp-pillar .top{ padding:22px 24px; color:#fff; }
    .lp-pillar.c1 .top{ background:var(--pGreen); } .lp-pillar.c2 .top{ background:var(--pOrange); } .lp-pillar.c3 .top{ background:var(--pNavy); }
    .lp-pillar .top .k{ font-size:12px; font-weight:800; letter-spacing:.18em; opacity:.9; }
    .lp-pillar .top .t{ font-size:21px; font-weight:900; margin-top:6px; line-height:1.4; }
    .lp-pillar .top .s{ font-size:12.5px; font-weight:700; opacity:.92; margin-top:4px; }
    .lp-pillar .bd{ padding:22px 24px; flex:1; }
    .lp-pillar .bd li{ list-style:none; font-size:13.5px; font-weight:700; color:var(--pNavy); line-height:1.5; padding:7px 0 7px 24px; position:relative; }
    .lp-pillar .bd li::before{ content:"\2713"; position:absolute; left:0; top:7px; color:var(--pOrange); font-weight:900; }
    .lp-pillar .res{ background:var(--pCell); padding:14px 22px; font-size:13.5px; font-weight:800; color:var(--pNavy); }
    .lp-pillar.c1 .res{ box-shadow:none; }
    .lp-pillar.c2 .res{ box-shadow:none; }
    .lp-pillar.c3 .res{ box-shadow:none; }
    .lp-pillar .res em{ font-style:normal; color:var(--pOrange); }
    /* サービス4 */
    .lp-services{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:900px; margin:0 auto; }
    .lp-svc{ background:#fff; border:2px solid var(--pLine); border-radius:0; padding:30px 28px; display:flex; gap:22px; align-items:center; }
    .lp-svc img{ width:78px; height:78px; flex-shrink:0; border:1.5px solid var(--pLine); border-radius:0; box-shadow:none; background:#fff; }
    .lp-svc .badge{ display:inline-block; font-size:11px; font-weight:900; letter-spacing:.1em; color:#fff; background:var(--pGreen); border-radius:0; padding:4px 10px; margin-bottom:8px; }
    .lp-svc .badge.o{ background:var(--pOrange); } .lp-svc .badge.n{ background:var(--pNavy); }
    .lp-svc h3{ font-size:18px; font-weight:900; color:var(--pNavy); margin:0 0 6px; }
    .lp-svc p{ font-size:13.5px; line-height:1.7; color:#48566a; margin:0; }
    .lp-svc p b{ color:var(--pOrange); }
    .lp-promises{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:900px; margin:28px auto 0; }
    .lp-promise{ background:var(--pNavy); border-radius:0; padding:24px 22px; color:#fff; }
    .lp-promise .pn{ font-size:11px; font-weight:800; letter-spacing:.12em; color:#ffb38a; }
    .lp-promise .pt{ font-size:17px; font-weight:900; margin:8px 0 8px; }
    .lp-promise .pp{ font-size:13px; line-height:1.6; color:#cfdcef; }
    /* 効果データ */
    .lp-impact-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:860px; margin:0 auto 16px; }
    .lp-impact-stat{ background:#fff; border:3px solid var(--pLine); border-radius:0; padding:30px 18px; text-align:center; }
    .lp-impact-stat.reco{ border-color:var(--pOrange); background:#fff7f0; }
    .lp-impact-stat .lab{ font-size:13px; font-weight:900; color:var(--pGray); }
    .lp-impact-stat .num{ font-size:clamp(40px,9vw,72px); font-weight:900; line-height:.95; color:var(--pOrangeD); letter-spacing:-.02em; margin-top:4px; }
    .lp-impact-stat .num small{ font-size:.42em; }
    .lp-ba{ max-width:860px; margin:28px auto 0; border-radius:0; overflow:hidden; border:2px solid var(--pLine); }
    .lp-ba img{ width:100%; display:block; }
    .lp-ba .cap{ background:var(--pNavy); color:#dfe8f5; font-size:13.5px; font-weight:700; line-height:1.6; padding:18px 22px; }
    .lp-ba .cap b{ color:#ffb38a; }
    .lp-cost{ max-width:860px; margin:24px auto 0; background:var(--pNavy); border-radius:0; padding:26px 28px; }
    .lp-cost .t{ color:#fff; font-size:clamp(16px,3vw,21px); font-weight:900; line-height:1.45; }
    .lp-cost .t em{ font-style:normal; color:#ffb38a; }
    .lp-cost .b{ color:#cfdcef; font-size:14px; font-weight:700; margin-top:12px; line-height:1.6; }
    .lp-cost .b b{ color:#fff; }
    .lp-disclaim{ max-width:860px; margin:18px auto 0; font-size:11.5px; color:var(--pGray); font-weight:600; line-height:1.6; text-align:left; }
    @media (max-width:768px){
      .lp-pillars,.lp-services,.lp-promises,.lp-impact-stats{ grid-template-columns:1fr; max-width:480px; }
      .lp-greet{ flex-direction:column; text-align:center; padding:32px 24px; gap:24px; }
    }

    /* ===== 料金・安心・アコーディオン・相談（提案書P7-P12） ===== */
    .lp-price-wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:980px; margin:0 auto; align-items:stretch; }
    .lp-plan{ background:#fff; border:2px solid var(--pLine); border-radius:0; padding:30px 24px; display:flex; flex-direction:column; }
    .lp-plan.reco{ border-color:var(--pOrange); box-shadow:none; position:relative; }
    .lp-plan .reco-badge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--pOrange); color:#fff; font-size:12px; font-weight:900; padding:6px 18px; border-radius:999px; white-space:nowrap; }
    .lp-plan .pname{ font-size:18px; font-weight:900; color:var(--pNavy); }
    .lp-plan .psub{ font-size:12px; font-weight:700; color:var(--pGray); margin-top:4px; }
    .lp-plan .pprice{ font-size:32px; font-weight:900; color:var(--pNavy); margin:14px 0 2px; }
    .lp-plan .pprice small{ font-size:14px; font-weight:800; color:var(--pGray); }
    .lp-plan .ptax{ font-size:11px; color:var(--pGray); font-weight:600; }
    .lp-plan ul{ list-style:none; margin:18px 0 0; padding:0; flex:1; }
    .lp-plan li{ font-size:12.5px; font-weight:600; color:#3a4658; line-height:1.5; padding:8px 0 8px 22px; position:relative; border-top:1px solid #eef2f7; }
    .lp-plan li::before{ content:"\2713"; position:absolute; left:0; top:8px; color:var(--pGreen); font-weight:900; }
    .lp-plan li.x{ color:#9aa6b4; } .lp-plan li.x::before{ content:"\2014"; color:#c4ccd6; }
    .lp-plan .pfit{ margin-top:16px; padding-top:14px; border-top:1px solid #eef2f7; font-size:12.5px; font-weight:700; color:#3a4658; line-height:1.55; }
    .lp-plan .pgoal{ margin-top:10px; font-size:12.5px; font-weight:700; color:#3a4658; line-height:1.55; }
    .lp-plan .pgoal b{ color:var(--pNavy); }
    .lp-plan .pfit-l,.lp-plan .pgoal-l{ display:block; font-size:10px; font-weight:900; letter-spacing:.05em; margin-bottom:3px; }
    .lp-plan .pfit-l{ color:var(--pGray); }
    .lp-plan .pgoal-l{ color:var(--pGreen); }
    .lp-plan .pex{ margin-top:auto; padding-top:18px; font-size:11.5px; font-weight:800; color:var(--pGreen); }
    /* 料金プラン比較マトリクス（一目で違いが分かる） */
    .lp-pmatrix-wrap{ max-width:860px; margin:36px auto 0; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:0; box-shadow:none; }
    .lp-pmatrix{ width:100%; min-width:560px; border-collapse:collapse; background:#fff; }
    .lp-pmatrix th,.lp-pmatrix td{ padding:13px 12px; text-align:center; border-bottom:1px solid var(--pLine); font-size:13px; color:var(--pNavy); }
    .lp-pmatrix thead th{ background:var(--pNavy); color:#fff; font-weight:900; }
    .lp-pmatrix thead th.reco{ background:var(--pOrange); }
    .lp-pmatrix thead th .pr{ display:block; font-size:10px; font-weight:800; opacity:.92; margin-top:2px; }
    .lp-pmatrix td.feat{ text-align:left; font-weight:800; white-space:nowrap; }
    .lp-pmatrix td.reco{ background:#fff7f0; font-weight:900; }
    .lp-pmatrix .mk{ color:var(--pGreen); font-weight:900; font-size:17px; }
    .lp-pmatrix .dash{ color:#c4ccd6; font-weight:900; }
    .lp-pmatrix tbody tr:last-child td{ border-bottom:0; }
    .lp-pmatrix .price-row td{ font-weight:900; font-size:15px; background:var(--pCell); }
    .lp-pmatrix .price-row td.reco{ background:#ffeede; }
    .lp-pmatrix-cap{ text-align:center; font-size:12px; color:var(--pGray); font-weight:700; margin:12px 0 0; }
    /* 制作・スポット料金表 */
    .lp-spot-h{ text-align:center; font-size:clamp(17px,3vw,22px); font-weight:900; color:var(--pNavy); margin:54px 0 0; }
    .lp-spot-h span{ display:block; font-size:13px; font-weight:700; color:var(--pGray); margin-top:6px; }
    .lp-spot-wrap{ max-width:880px; margin:22px auto 0; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:0; box-shadow:none; }
    .lp-spot{ width:100%; min-width:620px; border-collapse:collapse; background:#fff; }
    .lp-spot th,.lp-spot td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--pLine); font-size:13px; color:var(--pNavy); vertical-align:middle; }
    .lp-spot thead th{ background:var(--pNavy); color:#fff; font-weight:900; font-size:12.5px; }
    .lp-spot thead th small{ font-size:10px; font-weight:700; opacity:.85; }
    .lp-spot .svc{ font-weight:800; }
    .lp-spot td.price{ font-weight:900; color:var(--pOrange); white-space:nowrap; font-size:16px; }
    .lp-spot td.market{ color:var(--pGray); font-weight:700; white-space:nowrap; text-decoration:line-through; text-decoration-color:#c4ccd6; }
    .lp-spot td small{ font-size:11px; color:var(--pGray); font-weight:700; }
    .lp-spot tbody tr:last-child td{ border-bottom:0; }
    .lp-spot tbody tr:nth-child(even){ background:#fafcff; }
    .lp-spot-note{ max-width:880px; margin:14px auto 0; font-size:12.5px; color:var(--pGray); font-weight:600; line-height:1.7; }
    .lp-spot-note i{ color:var(--pOrange); margin-right:6px; }
    .lp-spot-note b{ color:var(--pNavy); }
    /* 御社 vs HAKUSO 分担表（写真を送るだけ＝丸投げOKの可視化） */
    .lp-task{ display:grid; grid-template-columns:1fr 1.55fr; gap:16px; max-width:900px; margin:40px auto 0; align-items:stretch; }
    .lp-task-col{ border-radius:0; padding:26px 28px; }
    .lp-task-you{ background:var(--pCell); border:2px solid var(--pLine); display:flex; flex-direction:column; }
    .lp-task-us{ background:linear-gradient(158deg,#1c3c69,#0f2342); color:#fff; box-shadow:none; }
    .lp-task-cap{ font-size:11px; font-weight:900; letter-spacing:.06em; padding:5px 12px; border-radius:999px; display:inline-block; margin-bottom:16px; }
    .lp-task-you .lp-task-cap{ background:#fff; color:var(--pNavy); border:1px solid var(--pLine); }
    .lp-task-us .lp-task-cap{ background:var(--pOrange); color:#fff; }
    .lp-task-big{ font-size:clamp(20px,3.2vw,27px); font-weight:900; color:var(--pNavy); line-height:1.4; display:flex; align-items:center; gap:14px; }
    .lp-task-big .ic{ flex:0 0 56px; width:56px; height:56px; border-radius:0; background:var(--pGreen); color:#fff; display:flex; align-items:center; justify-content:center; font-size:25px; }
    .lp-task-note{ font-size:13px; font-weight:700; color:var(--pGray); margin:16px 0 0; line-height:1.6; }
    .lp-task-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:11px 18px; }
    .lp-task-list li{ font-size:13.5px; font-weight:800; display:flex; gap:8px; align-items:center; line-height:1.35; }
    .lp-task-list li i{ color:#ffce86; font-size:13px; flex:0 0 auto; }
    @media(max-width:680px){ .lp-task{ grid-template-columns:1fr; } .lp-task-list{ grid-template-columns:1fr; } }
    /* お客様導線ファネル（検索→発見→信頼→指名） */
    .lp-funnel-h{ text-align:center; font-size:clamp(16px,2.8vw,21px); font-weight:900; color:var(--pNavy); margin:40px 0 0; }
    .lp-funnel-h em{ font-style:normal; color:var(--pOrange); }
    .lp-funnel{ display:flex; align-items:flex-start; justify-content:center; flex-wrap:wrap; gap:6px; max-width:1000px; margin:24px auto 0; }
    .lp-funnel-step{ flex:1 1 0; min-width:140px; text-align:center; padding:6px 8px; }
    .lp-funnel-ic{ width:66px; height:66px; margin:0 auto 12px; border-radius:50%; background:#fff; border:2px solid var(--pLine); display:flex; align-items:center; justify-content:center; font-size:26px; color:var(--pNavy); box-shadow:none; }
    .lp-funnel-step.goal .lp-funnel-ic{ background:var(--pOrange); border-color:var(--pOrange); color:#fff; box-shadow:none; }
    .lp-funnel-t{ font-size:14px; font-weight:900; color:var(--pNavy); line-height:1.35; }
    .lp-funnel-d{ font-size:11.5px; color:var(--pGray); font-weight:700; margin-top:5px; line-height:1.5; }
    .lp-funnel-ar{ display:flex; align-items:center; color:#9aa7b8; font-size:16px; padding-top:22px; }
    @media(max-width:680px){ .lp-funnel{ flex-direction:column; align-items:stretch; } .lp-funnel-ar{ justify-content:center; transform:rotate(90deg); padding:0; } .lp-funnel-step{ min-width:0; } }
    .lp-trial{ max-width:980px; margin:22px auto 0; background:var(--pNavy); border-radius:0; padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
    .lp-trial .tt{ color:#fff; font-size:16px; font-weight:900; } .lp-trial .tt b{ color:#ffb38a; }
    .lp-trial .ts{ color:#bcd0ee; font-size:12.5px; font-weight:600; margin-top:4px; }
    .lp-invest{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:980px; margin:22px auto 0; }
    .lp-invest .box{ background:#fff7f0; border:1px solid #f2d7c2; border-radius:0; padding:20px 22px; }
    .lp-invest .box.b2{ background:var(--pCell); border-color:var(--pLine); }
    .lp-invest h4{ font-size:14px; font-weight:900; color:var(--pOrangeD); margin:0 0 8px; } .lp-invest .box.b2 h4{ color:var(--pNavy); }
    .lp-invest p{ font-size:12.5px; line-height:1.7; color:#48566a; margin:0; text-wrap:pretty; }
    .lp-invest .note{ font-size:11px; color:var(--pGray); margin-top:8px; }
    /* 投資回収のROI図解（棒の長さで直感的に） */
    .lp-roi{ max-width:760px; margin:30px auto 0; background:#fff; border:2px solid var(--pLine); border-radius:0; padding:26px 30px; box-shadow:none; }
    .lp-roi-h{ text-align:center; font-size:clamp(15px,2.7vw,19px); font-weight:900; color:var(--pNavy); margin:0 0 22px; }
    .lp-roi-h em{ font-style:normal; color:var(--pOrange); }
    .lp-roi-row{ display:grid; grid-template-columns:135px 1fr; align-items:center; gap:16px; margin-bottom:14px; }
    .lp-roi-lab{ font-size:13px; font-weight:800; color:var(--pNavy); line-height:1.35; }
    .lp-roi-lab span{ display:block; font-size:10.5px; color:var(--pGray); font-weight:700; margin-top:3px; }
    .lp-roi-bar{ height:46px; border-radius:0; display:flex; align-items:center; padding:0 18px; color:#fff; font-weight:900; font-size:clamp(15px,2.5vw,20px); white-space:nowrap; box-shadow:none; }
    .lp-roi-bar.cost{ width:42%; min-width:120px; background:linear-gradient(90deg,#e8762e,#f0935a); }
    .lp-roi-bar.rev{ width:100%; background:linear-gradient(90deg,#16335c,#27548a); }
    .lp-roi-concl{ text-align:center; margin:20px 0 0; font-size:clamp(14px,2.6vw,17px); font-weight:900; color:var(--pNavy); line-height:1.5; }
    .lp-roi-concl em{ font-style:normal; color:var(--pOrange); }
    .lp-roi-note{ text-align:center; font-size:11px; color:var(--pGray); font-weight:600; margin:10px 0 0; line-height:1.5; }
    @media(max-width:560px){ .lp-roi-row{ grid-template-columns:1fr; gap:6px; } .lp-roi-bar{ height:42px; } }
    /* accordion（採用・比較・ロードマップ＝native details） */
    .lp-accwrap{ max-width:920px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
    .lp-acc{ border:2px solid var(--pLine); border-radius:0; background:#fff; overflow:hidden; }
    .lp-acc summary{ list-style:none; cursor:pointer; padding:20px 24px; font-size:clamp(15px,2.8vw,17px); font-weight:900; color:var(--pNavy); display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .lp-acc summary::-webkit-details-marker{ display:none; }
    .lp-acc summary .more{ font-size:12px; font-weight:800; color:var(--pOrange); white-space:nowrap; }
    .lp-acc summary .more i{ transition:transform .25s; margin-left:6px; }
    .lp-acc[open] summary .more i{ transform:rotate(180deg); }
    .lp-acc .accbody{ padding:4px 24px 24px; }
    .lp-acc .accbody>p{ font-size:13.5px; line-height:1.75; color:#48566a; margin:0 0 14px; }
    .accgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
    .accgrid .it{ background:var(--pCell); border-radius:0; padding:13px 15px; font-size:13px; font-weight:700; color:var(--pNavy); line-height:1.5; }
    .accgrid .it b{ color:var(--pOrange); }
    .lp-table{ width:100%; border-collapse:collapse; font-size:13px; }
    .lp-table th,.lp-table td{ padding:12px 8px; text-align:center; border-bottom:1px solid var(--pLine); }
    .lp-table thead th{ background:var(--pNavy); color:#fff; font-weight:900; }
    .lp-table thead th.h{ background:var(--pOrange); }
    .lp-table td.l{ text-align:left; font-weight:800; color:var(--pNavy); }
    .lp-table .x{ color:#b04a3a; font-weight:800; } .lp-table .o{ color:var(--pGreen); font-weight:900; }
    .lp-road{ display:flex; flex-direction:column; gap:14px; }
    .lp-road .step{ display:flex; gap:16px; align-items:flex-start; }
    .lp-road .ph{ flex:0 0 92px; background:var(--pNavy); color:#fff; border-radius:0; padding:12px 8px; text-align:center; font-size:12px; font-weight:900; }
    .lp-road .ph small{ display:block; font-size:10px; color:#ffb38a; margin-top:2px; }
    .lp-road .ct h4{ font-size:15px; font-weight:900; color:var(--pNavy); margin:0 0 4px; }
    .lp-road .ct p{ font-size:13px; color:#48566a; margin:0; line-height:1.6; }
    /* WHY HAKUSO：決定的な2つ＋比較表（見える化） */
    .lp-edge2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
    .lp-edge2 .e{ background:var(--pCell); border-radius:0; padding:15px 16px; border:1px solid var(--pLine); }
    .lp-edge2 .et{ font-size:10.5px; font-weight:900; letter-spacing:.05em; color:#fff; background:var(--pOrange); display:inline-block; padding:3px 10px; border-radius:999px; margin-bottom:9px; }
    .lp-edge2 .ed{ font-size:12.5px; font-weight:800; color:var(--pNavy); line-height:1.55; }
    .lp-edge2 .ed b{ color:var(--pOrange); }
    .lp-table-wrap{ max-width:760px; margin:30px auto 0; }
    .lp-more-blocks{ display:flex; flex-direction:column; gap:56px; margin-bottom:48px; }
    @media(max-width:768px){ .lp-edge2{ grid-template-columns:1fr; } .lp-more-blocks{ gap:40px; } }
    /* Before/Afterスライダー（ドラッグで体感） */
    .lp-ba-interactive{ max-width:720px; margin:34px auto 0; }
    .lp-ba-lead{ text-align:center; }
    /* 動画×集客の効果インフォグラフィック */
    .lp-effect-fig{ max-width:840px; margin:30px auto 0; border-radius:0; overflow:hidden; box-shadow:none; border:1px solid var(--pLine); }
    .lp-effect-fig a{ display:block; } .lp-effect-fig img{ width:100%; height:auto; display:block; }
    .lp-stat-banner{ max-width:1000px; margin:48px auto 0; }
    .lp-change-banner{ max-width:1000px; margin:24px auto 0; }
    .lp-flow-banner{ max-width:500px; margin:30px auto 0; }
    /* .lp-table-img は料金表を画像で出していた頃の名残。実テーブル化に伴い削除（2026-08-10） */
    .lp-basis{ max-width:760px; margin:18px auto 0; background:var(--pCell); border:1px solid var(--pLine); border-radius:0; padding:0 20px; }
    .lp-basis summary{ list-style:none; cursor:pointer; padding:14px 4px; font-size:13.5px; font-weight:800; color:var(--pNavy); display:flex; align-items:center; gap:8px; }
    .lp-basis summary::-webkit-details-marker{ display:none; }
    .lp-basis summary::before{ content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:11px; color:var(--pGray); transition:transform .25s; }
    .lp-basis[open] summary::before{ transform:rotate(180deg); }
    .lp-basis p{ font-size:13px; color:var(--pGray); font-weight:600; line-height:1.7; margin:0 0 12px; }
    .lp-basis p.note{ font-size:11.5px; }
    .lp-change-demo{ max-width:640px; margin:30px auto 0; }
    .lp-change-demo .lp-demo-cap{ margin-top:14px; }
    .lp-change-cols2{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; max-width:1160px; margin:24px auto 0; }
    .lp-change-cols2 .lp-change-demo{ max-width:none; margin:0; }
    .lp-change-cols2 .lp-change-banner{ max-width:none; margin:0; }
    @media(max-width:860px){ .lp-change-cols2{ grid-template-columns:1fr; gap:24px; max-width:640px; } }
    /* AI施工事例動画ショーケース（縦動画3本） */
    .lp-vcase{ max-width:720px; margin:38px auto 0; }
    .lp-vcase-h{ text-align:center; font-weight:900; color:var(--pNavy); font-size:clamp(15px,2.7vw,19px); margin:0 0 18px; }
    .lp-vcase-h i{ color:var(--pOrange); margin-right:8px; }
    .lp-vcase-h em{ font-style:normal; color:var(--pOrange); }
    .lp-vcase-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
    .lp-vcase-item{ margin:0; border-radius:0; overflow:hidden; box-shadow:none; background:#0a1626; position:relative; }
    .lp-vcase-item video{ width:100%; aspect-ratio:9/16; object-fit:cover; display:block; }
    .lp-vcase-item figcaption{ position:absolute; left:0; right:0; bottom:0; padding:18px 12px 11px; font-size:12px; font-weight:800; color:#fff; background:linear-gradient(transparent,rgba(10,22,38,.88)); }
    .lp-vcase-note{ text-align:center; font-size:11px; color:var(--pGray); font-weight:600; margin:12px 0 0; line-height:1.5; }
    @media(max-width:560px){ .lp-vcase-grid{ gap:10px; } }
    .lp-baslider{ position:relative; max-width:680px; margin:8px auto 6px; height:230px; border-radius:0; overflow:hidden; box-shadow:none; border:1px solid var(--pLine); user-select:none; touch-action:none; }
    .bas-panel{ position:absolute; inset:0; display:flex; }
    .bas-inner{ width:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; padding:18px; text-align:center; }
    .bas-before .bas-inner{ margin-right:auto; }
    .bas-after .bas-inner{ margin-left:auto; }
    .bas-before{ background:linear-gradient(160deg,#e9edf2,#d6dde6); z-index:1; }
    .bas-after{ background:linear-gradient(160deg,#1c3c69,#0f2342); clip-path:inset(0 0 0 var(--pos)); z-index:2; }
    .bas-icn{ width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; }
    .bas-before .bas-icn{ background:#c2ccd8; color:#8190a3; }
    .bas-after .bas-icn{ background:var(--pOrange); color:#fff; box-shadow:none; }
    .bas-rank{ font-size:17px; font-weight:900; line-height:1.35; }
    .bas-before .bas-rank{ color:#6b7889; } .bas-after .bas-rank{ color:#fff; }
    .bas-rank span{ display:block; font-size:11.5px; font-weight:700; margin-top:3px; opacity:.85; }
    .bas-stars{ font-size:13px; font-weight:800; letter-spacing:.05em; }
    .bas-before .bas-stars{ color:#9aa6b4; } .bas-after .bas-stars{ color:#ffce86; }
    .bas-stars b{ font-size:11.5px; margin-left:5px; }
    .bas-before .bas-stars b{ color:#8190a3; } .bas-after .bas-stars b{ color:#cfdcef; }
    .bas-tag{ position:absolute; top:13px; font-size:11px; font-weight:900; letter-spacing:.08em; padding:4px 11px; border-radius:999px; }
    .bas-tag-b{ left:13px; background:#fff; color:#6b7889; }
    .bas-tag-a{ right:13px; background:var(--pOrange); color:#fff; }
    .bas-divider{ position:absolute; top:0; bottom:0; width:3px; background:#fff; transform:translateX(-50%); box-shadow:none; pointer-events:none; z-index:3; }
    .bas-knob{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; background:#fff; color:var(--pNavy); display:flex; align-items:center; justify-content:center; font-size:15px; box-shadow:none; }
    .bas-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:4; }
    .bas-range:focus-visible + .bas-divider .bas-knob, .lp-baslider:focus-within .bas-knob{ outline:3px solid var(--pOrange); outline-offset:2px; }
    .bas-note{ text-align:center; font-size:11.5px; color:var(--pGray); font-weight:600; margin:4px 0 0; }
    @media(max-width:600px){ .lp-baslider{ height:200px; } .bas-rank{ font-size:15px; } }
    /* 相談・最終CTA */
    .lp-final{ background:var(--pNavy); padding:74px 0; }
    .lp-final .lp-container{ text-align:center; }
    .lp-final .fen{ font-size:13px; font-weight:800; letter-spacing:.24em; color:#7fae9c; }
    .lp-final h2{ font-size:clamp(25px,5vw,38px); font-weight:900; color:#fff; line-height:1.4; margin:10px 0 0; }
    .lp-final h2 em{ font-style:normal; color:#ffb38a; }
    .lp-final .fsub{ color:#bcd0ee; font-size:15px; font-weight:700; margin:18px auto 0; max-width:640px; line-height:1.7; }
    .lp-flow{ display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; margin:32px 0; }
    .lp-flow .fstep{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:0; padding:16px 16px 15px; min-width:124px; text-align:center; transition:transform .3s,background .3s; }
    .lp-flow .fstep:hover{ transform:translateY(-5px); background:rgba(255,255,255,.13); }
    .lp-flow .fstep .fic{ width:50px; height:50px; border-radius:0; background:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; box-shadow:none; }
    .lp-flow .fstep .fic img{ width:31px; height:31px; object-fit:contain; display:block; }
    .lp-flow .fstep .fic i{ font-size:26px; color:#e8762e; }
    .lp-flow .fstep .fn{ font-size:11px; font-weight:900; color:#ffb38a; letter-spacing:.06em; } .lp-flow .fstep .fl{ font-size:12.5px; font-weight:800; color:#fff; margin-top:4px; }
    .lp-flow .farrow{ color:rgba(255,255,255,.4); font-size:12px; }
    .lp-final .fbtn{ display:inline-flex; align-items:center; gap:10px; background:var(--pOrange); color:#fff; font-size:clamp(16px,3vw,19px); font-weight:900; padding:20px 38px; border-radius:999px; text-decoration:none; box-shadow:none; transition:transform .25s; }
    .lp-final .fbtn:hover{ transform:translateY(-2px); }
    .lp-final .fcontact{ margin-top:24px; color:#bcd0ee; font-size:14px; font-weight:700; } .lp-final .fcontact a{ color:#fff; text-decoration:underline; }
    .lp-final .fnote{ margin-top:12px; color:#8aa0c2; font-size:12px; line-height:1.6; }
    @media (max-width:768px){
      .lp-price-wrap,.lp-invest,.accgrid{ grid-template-columns:1fr; }
      .lp-table{ font-size:11px; } .lp-table th,.lp-table td{ padding:8px 4px; }
      .lp-road .ph{ flex-basis:74px; font-size:11px; }
      .lp-flow .farrow{ display:none; }
    }

    /* === 監査修正: 中間幅(〜1024px)の文字詰まり緩和 === */
    @media (max-width:1024px){
      .lp-pillar .top .t{ font-size:clamp(17px,2.2vw,21px); }
      .lp-impact-stat .num{ font-size:clamp(36px,6.5vw,58px); }
      .lp-sec-head .lp-h2{ font-size:clamp(22px,4.4vw,34px); }
    }
    /* === 監査修正: スマホ下部の固定要素の重なり解消（文字かぶり対策） === */
    @media (max-width:768px){
      .floating-cta{ display:none !important; }
      .chatbot-trigger{ bottom:calc(78px + env(safe-area-inset-bottom)) !important; }
      .chatbot-window{ bottom:calc(146px + env(safe-area-inset-bottom)) !important; max-height:calc(100vh - 220px) !important; }
      body{ padding-bottom:66px; }
    }

    /* === 背景の動き＋模様（全幅・前デザイン踏襲で殺風景を解消） === */
    .lp-sec, .lp-pain{ position:relative; overflow:hidden; }
    .lp-container{ position:relative; z-index:1; max-width:1180px; }
    .lp-deco{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
    .lp-deco .dotgrid{ position:absolute; inset:0; background-image:radial-gradient(rgba(15,35,66,0.05) 1.2px, transparent 1.4px); background-size:30px 30px; }
    .lp-deco .b{ position:absolute; border-radius:50%; }
    .lp-deco .ring{ position:absolute; border-radius:50%; border:1.6px solid; }
    @keyframes lpDrift{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(var(--dx,28px),var(--dy,-20px)) scale(1.06); } }
    .lp-deco .float{ animation:lpDrift var(--dur,15s) ease-in-out infinite; }
    @media (prefers-reduced-motion:reduce){ .lp-deco .float{ animation:none; } }
    /* 主要グリッドも少し広く＝横幅を活かす */
    .lp-pillars{ max-width:1060px; } .lp-price-wrap{ max-width:1060px; }
    .lp-services{ max-width:1000px; } .lp-promises{ max-width:1000px; } .lp-accwrap{ max-width:1040px; }
    .lp-impact-stats{ max-width:920px; } .lp-stats{ max-width:900px; }

    /* === KVバナーの旧・負マージン解除（アコーディオンとの重なり修正） === */
    .kv-banners{ margin-top:0 !important; }
    /* === セクション内イラスト（カナウ素材で視覚的に分かりやすく） === */
    .lp-figure{ display:flex; justify-content:center; margin:26px auto 0; }
    .lp-figure img{ width:100%; max-width:560px; height:auto; border-radius:0; box-shadow:none; }
    .lp-figure.sm img{ max-width:400px; }
    .lp-figure.acc img{ max-width:480px; border-radius:0; box-shadow:none; }

    /* === 動きのあるUI/UX強化（全幅・背景模様・スクロール演出） === */
    .lp-container{ max-width:1220px; }
    .lp-deco .dotgrid{ background-image:radial-gradient(rgba(15,35,66,0.075) 1.3px, transparent 1.5px); background-size:26px 26px; }
    .lp-reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); will-change:opacity,transform; }
    .lp-reveal.in{ opacity:1; transform:none; }
    @media (prefers-reduced-motion:reduce){ .lp-reveal{ opacity:1 !important; transform:none !important; transition:none !important; } }
    /* JSが動かない環境（無効・読み込み失敗）ではトップの本文がまるごと消えるため開けておく。
       .in を付けるのはJS。2026-08-11 に再現したので追加した。 */
    @media (scripting:none){ .lp-reveal{ opacity:1 !important; transform:none !important; transition:none !important; } }

    /* === サービス＝Before/After 特集行（左右交互・大イラスト＋説明） === */
    .lp-features{ display:flex; flex-direction:column; gap:26px; max-width:1080px; margin:0 auto; }
    .lp-feat{ display:flex; gap:38px; align-items:center; background:#fff; border:2px solid var(--pLine); border-radius:0; padding:26px 32px; }
    .lp-feat.rev{ flex-direction:row-reverse; }
    .lp-feat-img{ flex:0 0 46%; display:flex; justify-content:center; }
    .lp-feat-img img{ max-width:100%; max-height:360px; width:auto; height:auto; border-radius:0; }
    .lp-feat-body{ flex:1; }
    .lp-feat-body .badge{ display:inline-block; font-size:11px; font-weight:900; letter-spacing:.1em; color:#fff; background:var(--pGreen); border-radius:0; padding:4px 11px; }
    .lp-feat-body .badge.o{ background:var(--pOrange); } .lp-feat-body .badge.n{ background:var(--pNavy); }
    .lp-feat-body h3{ font-size:23px; font-weight:900; color:var(--pNavy); margin:12px 0 10px; }
    .lp-feat-body p{ font-size:15px; line-height:1.85; color:#48566a; margin:0; }
    .lp-feat-body p b{ color:var(--pNavy); }
    .lp-feat-steps{ display:flex; align-items:stretch; flex-wrap:wrap; gap:10px; margin-top:22px; }
    .lp-feat-steps .st{ flex:1 1 0; min-width:120px; background:var(--pCell); border:1.5px solid var(--pLine); border-radius:0; padding:14px 16px; font-size:15px; font-weight:800; color:var(--pNavy); line-height:1.35; display:flex; flex-direction:column; justify-content:center; gap:2px; }
    .lp-feat-steps .st .stn{ font-size:11px; font-weight:900; letter-spacing:.06em; color:var(--pGray); margin-bottom:4px; }
    .lp-feat-steps .st.goal{ background:var(--pNavy); color:#fff; border-color:var(--pNavy); }
    .lp-feat-steps .st.goal .stn{ color:#ffce86; }
    .lp-feat-steps .ar{ display:flex; align-items:center; color:#9aa7b8; font-size:15px; flex:0 0 auto; }
    @media(max-width:560px){ .lp-feat-steps{ flex-direction:column; align-items:stretch; gap:8px; } .lp-feat-steps .ar{ transform:rotate(90deg); align-self:center; } .lp-feat-steps .st{ min-width:0; } }
    @media(max-width:768px){ .lp-feat, .lp-feat.rev{ flex-direction:column; gap:18px; padding:22px; } .lp-feat-img{ flex-basis:auto; width:100%; } .lp-feat-img img{ max-height:300px; } }
    /* === 料金カードのトップ画像バナー === */
    .lp-plan-img{ margin:-30px -24px 20px; border-radius:0; overflow:hidden; aspect-ratio:16/8; background:var(--pCell); }
    .lp-plan-img img{ width:100%; height:100%; object-fit:cover; display:block; }

    /* === 比較表: 紺(ふつうのWeb屋)とオレンジ(HAKUSO)の列幅を揃える === */
    .lp-table{ table-layout:fixed; }
    .lp-table thead th:first-child{ background:transparent !important; }
    .lp-table th:first-child, .lp-table td:first-child{ width:26%; text-align:left; }
    .lp-table th:nth-child(2), .lp-table td:nth-child(2),
    .lp-table th:nth-child(3), .lp-table td:nth-child(3){ width:37%; }

    /* === ミニマル版: 4つの働きを短いキーワードに === */
    .lp-check4{ max-width:720px; margin:6px auto 0; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
    .lp-check4 > div{ display:flex; align-items:center; gap:14px; background:#fff; border:2px solid var(--pLine); border-radius:0; padding:16px 20px; font-size:clamp(14px,2.4vw,16px); font-weight:800; color:var(--pNavy); }
    .lp-check4 .k{ flex:0 0 42px; width:42px; height:42px; border-radius:0; background:var(--pNavy); color:#ffce86; font-size:20px; font-weight:900; display:flex; align-items:center; justify-content:center; }
    @media(max-width:768px){ .lp-check4{ grid-template-columns:1fr; max-width:430px; } }

    /* === HP健康診断シート（カルテ風） === */
    .lp-diag{ max-width:680px; margin:20px auto 0; background:#fff; border:2px solid var(--pLine); border-radius:0; box-shadow:none; overflow:hidden; }
    .lp-diag-head{ display:flex; align-items:center; gap:12px; background:var(--pNavy); color:#fff; padding:15px 22px; font-weight:900; font-size:clamp(15px,2.6vw,18px); letter-spacing:.02em; }
    .lp-diag-head .lp-diag-ico{ flex:0 0 34px; width:34px; height:34px; border-radius:0; background:rgba(255,255,255,.14); color:#ffce86; display:flex; align-items:center; justify-content:center; font-size:17px; }
    .lp-diag-head .lp-diag-note{ margin-left:auto; font-size:12px; font-weight:800; color:#bcccdf; background:rgba(255,255,255,.09); padding:5px 12px; border-radius:999px; white-space:nowrap; }
    .lp-diag-list{ list-style:none; margin:0; padding:6px 0; }
    .lp-diag-list li{ display:flex; align-items:center; gap:15px; padding:16px 22px; border-bottom:1px dashed var(--pLine); transition:background .25s; cursor:pointer; -webkit-tap-highlight-color:transparent; }
    .lp-diag-list li:last-child{ border-bottom:0; }
    .lp-diag-list li:hover{ background:var(--pCell); }
    .lp-diag-ic2{ flex:0 0 44px; width:44px; height:44px; border-radius:0; background:var(--pCell); color:var(--pNavy); display:flex; align-items:center; justify-content:center; font-size:19px; }
    .lp-diag-list li:nth-child(2) .lp-diag-ic2{ color:var(--pGreen); }
    .lp-diag-list li:nth-child(3) .lp-diag-ic2{ color:var(--pOrange); }
    .lp-diag-list li:nth-child(4) .lp-diag-ic2{ color:var(--pNavy2); }
    .lp-diag-txt{ flex:1; font-weight:800; color:var(--pNavy); font-size:clamp(14px,2.5vw,16.5px); line-height:1.4; }
    .lp-diag-txt b{ color:var(--pOrange); }
    .lp-diag-box{ flex:0 0 30px; width:30px; height:30px; border-radius:0; border:2.5px solid var(--pLine); color:transparent; display:flex; align-items:center; justify-content:center; font-size:15px; transition:.25s; }
    .lp-diag-list li:hover .lp-diag-box{ border-color:var(--pOrange); color:var(--pOrange); background:#fff5ee; }
    .lp-diag-list li.on{ background:#f1faf5; }
    .lp-diag-list li.on .lp-diag-box{ border-color:var(--pGreen); background:var(--pGreen); color:#fff; }
    .lp-diag-list li.on:hover .lp-diag-box{ border-color:var(--pGreen); background:var(--pGreen); color:#fff; }
    .lp-diag-foot{ background:var(--pCell); padding:14px 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:900; color:var(--pNavy); font-size:14px; flex-wrap:wrap; }
    .lp-diag-foot .lp-diag-hint{ font-size:12px; font-weight:700; color:var(--pGray); display:flex; align-items:center; gap:6px; }
    .lp-diag-foot .lp-diag-hint i{ color:var(--pOrange); }
    .lp-diag-foot .cnt{ color:var(--pOrange); font-size:18px; }
    @media(max-width:600px){ .lp-diag-list li{ padding:14px 16px; gap:12px; } .lp-diag-ic2{ flex-basis:38px; width:38px; height:38px; font-size:16px; } }

    /* === Before→After 変化が見えるブロック === */
    .lp-change{ max-width:1060px; margin:54px auto 6px; }
    .lp-change-cols{ display:grid; grid-template-columns:1.05fr 1fr; gap:30px; align-items:center; margin-top:22px; }
    .lp-change-cols .lp-table-wrap{ max-width:none; margin:0; }
    .lp-change-cols .lp-demo-cap{ margin-top:14px; }
    @media(max-width:900px){ .lp-change-cols{ grid-template-columns:1fr; gap:22px; } }
    .lp-change-head{ text-align:center; margin-bottom:20px; }
    .lp-change-head .lp-en2{ display:inline-block; font-weight:900; font-size:12px; letter-spacing:.22em; color:var(--pOrange); margin-bottom:8px; }
    .lp-change-head h3{ font-size:clamp(19px,3.7vw,27px); font-weight:900; color:var(--pNavy); line-height:1.42; margin:0; }
    .lp-change-head h3 em{ color:var(--pOrange); font-style:normal; }
    .lp-change-head p{ color:var(--pGray); font-weight:700; margin:9px 0 0; font-size:14px; }
    /* 実デモのブラウザ枠 */
    .lp-browser{ max-width:760px; margin:0 auto 14px; border-radius:0; overflow:hidden; box-shadow:none; border:1px solid #d9e1ec; background:#fff; }
    .lp-browser-bar{ display:flex; align-items:center; gap:7px; padding:11px 16px; background:#e9eef5; border-bottom:1px solid #d9e1ec; }
    .lp-browser-bar .dot{ width:11px; height:11px; border-radius:50%; background:#c4cedd; }
    .lp-browser-bar .dot:nth-child(1){ background:#ff5f57; } .lp-browser-bar .dot:nth-child(2){ background:#febc2e; } .lp-browser-bar .dot:nth-child(3){ background:#28c840; }
    .lp-browser .lp-url{ margin-left:10px; flex:1; background:#fff; border-radius:0; padding:6px 12px; font-size:12px; font-weight:700; color:#6b7890; display:flex; align-items:center; gap:7px; overflow:hidden; white-space:nowrap; }
    .lp-browser .lp-url i{ font-size:10px; color:var(--pGreen); }
    .lp-browser img{ display:block; width:100%; height:auto; }
    .lp-demo-cap{ max-width:700px; margin:0 auto 10px; text-align:center; font-size:14px; font-weight:700; color:#3a4a60; line-height:1.65; }
    .lp-demo-cap .ic{ color:var(--pGreen); margin-right:5px; }
    .lp-demo-cap b{ color:var(--pNavy); }
    .lp-demo-cap .demo-link{ display:inline-block; margin-top:5px; color:var(--pOrange); font-weight:900; text-decoration:none; }
    .lp-demo-cap .demo-link:hover{ text-decoration:underline; }

    /* === 制作デモ・ギャラリー === */
    .lp-sec-sub{ text-align:center; color:#5b6b80; font-weight:700; font-size:clamp(14px,2.4vw,15.5px); line-height:1.7; max-width:680px; margin:10px auto 0; }
    .lp-works-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1100px; margin:26px auto 0; }
    .lp-work{ display:block; text-decoration:none; background:#fff; border:1px solid var(--pLine); border-radius:0; overflow:hidden; box-shadow:none; transition:transform .3s,box-shadow .3s; }
    .lp-work:hover{ transform:translateY(-6px); box-shadow:none; }
    .lp-work-shot{ position:relative; overflow:hidden; border-bottom:1px solid var(--pLine); aspect-ratio:1000/520; background:var(--pCell); }
    .lp-work-shot img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .5s; }
    .lp-work:hover .lp-work-shot img{ transform:scale(1.045); }
    .lp-work-badge{ position:absolute; top:10px; left:10px; z-index:2; background:rgba(15,35,66,.9); color:#fff; font-size:11px; font-weight:900; padding:4px 11px; border-radius:999px; letter-spacing:.04em; }
    .lp-work-meta{ padding:16px 18px 20px; }
    .lp-work-cat{ display:inline-block; font-size:11px; font-weight:900; color:var(--pOrange); letter-spacing:.05em; margin-bottom:5px; }
    .lp-work-meta h3{ font-size:17px; font-weight:900; color:var(--pNavy); margin:0 0 6px; }
    .lp-work-meta p{ font-size:13px; color:#5b6b80; font-weight:600; line-height:1.55; margin:0 0 11px; }
    .lp-work-link{ font-size:13px; font-weight:900; color:var(--pOrange); }
    @media(max-width:880px){ .lp-works-grid{ grid-template-columns:1fr; max-width:440px; } }
    /* サービスの中身（Before/After図解ギャラリー） */
    /* サービス図解ギャラリーは横幅いっぱい・2列・大きく */
    #lp-services2 .lp-container{ max-width:1760px; padding-left:clamp(14px,2vw,40px); padding-right:clamp(14px,2vw,40px); }
    .lp-svc2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,28px); max-width:none; margin:0; }
    .lp-svc2-item{ display:block; border-radius:0; overflow:hidden; box-shadow:none; border:1px solid var(--pLine); background:#fff; transition:transform .3s,box-shadow .3s; }
    .lp-svc2-item:hover{ transform:translateY(-5px); box-shadow:none; }
    .lp-svc2-item img{ width:100%; height:auto; display:block; }
    .lp-svc2-cap{ text-align:center; font-size:11.5px; color:var(--pGray); font-weight:700; margin:16px 0 0; }
    @media(max-width:760px){ .lp-svc2-grid{ grid-template-columns:1fr; max-width:560px; } }
    .lp-change-grid{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:16px; }
    .lp-cc{ border-radius:0; padding:22px 22px 24px; }
    .lp-cc .cc-tag{ display:inline-block; font-size:12px; font-weight:900; padding:5px 12px; border-radius:999px; margin-bottom:14px; }
    .lp-cc ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
    .lp-cc li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; font-weight:700; line-height:1.45; }
    .lp-cc li i{ flex:0 0 20px; margin-top:2px; font-size:15px; text-align:center; }
    .lp-cc.before{ background:#eef1f5; border:2px solid #dde3ec; }
    .lp-cc.before .cc-tag{ background:#d7dde7; color:#5f6e82; }
    .lp-cc.before li{ color:#6b7890; }
    .lp-cc.before li i{ color:#9aa7ba; }
    .lp-cc.before b{ color:#5f6e82; }
    .lp-cc.after{ background:linear-gradient(160deg,#16335c,#0f2342); border:2px solid #16335c; box-shadow:none; }
    .lp-cc.after .cc-tag{ background:var(--pOrange); color:#fff; }
    .lp-cc.after li{ color:#eaf1fb; }
    .lp-cc.after li i{ color:#5fd0a0; }
    .lp-cc.after b{ color:#ffce86; }
    .cc-arrow{ display:flex; align-items:center; justify-content:center; color:var(--pOrange); font-size:30px; }
    @media(max-width:760px){ .lp-change-grid{ grid-template-columns:1fr; } .cc-arrow{ transform:rotate(90deg); padding:2px 0; } }

    /* === 画面フル幅レイアウト（中央寄り解消・横いっぱい） === */
    .lp-container{ max-width:1800px; padding:0 clamp(20px,4vw,72px); }
    .lp-features, .lp-pillars{ max-width:1560px; }
    .lp-services, .lp-promises, .lp-price-wrap, .lp-accwrap{ max-width:1440px; }
    .lp-impact-stats{ max-width:1240px; } .lp-check4{ max-width:1120px; } .lp-stats{ max-width:1100px; }
    /* 見出し・本文は読みやすい幅を維持して中央（プロースは伸ばしすぎない） */
    .lp-sec-head .lp-lead2{ max-width:760px; } .lp-src, .lp-disclaim{ max-width:900px; }
    /* === 背景をリッチに（殺風景を解消） === */
    .lp-deco .dotgrid{ background-image:radial-gradient(rgba(15,35,66,0.09) 1.5px, transparent 1.7px); background-size:24px 24px; }
    .lp-sec.alt{ background-color:#f6f1ea; }   /* 温かいクリームで全幅の帯にリズム */

    /* ヒーロー動画は複数本（自社AI制作）＝前/次ナビ表示 */

    /* === 課題定義を横幅いっぱいに（縦積み解消） === */
    .lp-pain-split{ display:flex; gap:48px; align-items:center; max-width:1480px; margin:0 auto 12px; }
    .lp-pain-split .lp-trigger{ flex:1; max-width:none; margin:0; text-align:left; }
    .lp-pain-split .lp-trigger p{ font-size:clamp(19px,2.2vw,28px); }
    .lp-pain-split .lp-split-fig{ flex:0 0 46%; }
    .lp-pain-split .lp-split-fig img{ width:100%; height:auto; border-radius:0; box-shadow:none; display:block; }
    @media(max-width:900px){ .lp-pain-split{ flex-direction:column; gap:24px; } .lp-pain-split .lp-trigger{ text-align:center; } .lp-pain-split .lp-split-fig{ flex-basis:auto; width:100%; max-width:500px; } }
    /* 4キーワードを1行(4列)に・統計も幅広に＝横いっぱい */
    .lp-check4{ grid-template-columns:repeat(4,1fr); max-width:1480px; }
    .lp-stats{ max-width:1400px; }
    @media(max-width:1024px){ .lp-check4{ grid-template-columns:repeat(2,1fr); } }
    @media(max-width:600px){ .lp-check4{ grid-template-columns:1fr; } }

    /* === Steam風 全幅ブランド動画 === */
    .lp-vid-full{ max-width:1040px; margin:10px auto 40px; aspect-ratio:16/9; border-radius:0; overflow:hidden; background:#0a1626; position:relative; box-shadow:none; border:1px solid var(--pLine); }
    .lp-vid-full video{ width:100%; height:100%; object-fit:cover; display:block; }
    @media(max-width:1100px){ .lp-vid-full{ max-width:none; margin-left:clamp(16px,4vw,40px); margin-right:clamp(16px,4vw,40px); border-radius:0; } }
    .lp-vid-full .vtag{ position:absolute; left:clamp(16px,4vw,48px); bottom:clamp(16px,4vw,40px); z-index:2; background:rgba(10,22,38,.7); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; font-size:clamp(12px,2vw,15px); font-weight:800; padding:10px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.25); }
    .lp-vid-full .vtag i{ color:#ffb38a; margin-right:6px; }

    /* === チラシ・会社案内 制作サンプル === */
    .lp-split2{ display:flex; gap:52px; align-items:center; max-width:1120px; margin:0 auto; }
    .lp-split2-img{ flex:0 0 340px; position:relative; }
    .lp-split2-img img{ width:100%; height:auto; border-radius:0; box-shadow:none; display:block; }
    .lp-sample-badge{ position:absolute; top:12px; left:12px; background:rgba(10,22,38,.82); color:#fff; font-size:12px; font-weight:800; padding:6px 13px; border-radius:0; }
    .lp-split2-body{ flex:1; }
    .lp-split2-body .lp-en{ display:block; margin-bottom:10px; }
    .lp-split2-body h2{ font-size:clamp(24px,3.6vw,38px); font-weight:900; color:var(--pNavy); line-height:1.4; margin:0 0 16px; }
    .lp-split2-body h2 em{ font-style:normal; color:var(--pOrange); }
    .lp-split2-body p{ font-size:15px; line-height:1.85; color:#48566a; margin:0; }
    .lp-split2-body p b{ color:var(--pOrange); }
    @media(max-width:768px){ .lp-split2{ flex-direction:column; gap:28px; } .lp-split2-img{ flex-basis:auto; max-width:320px; } .lp-split2-body{ text-align:center; } }

    /* === 課題定義リデザイン: 検索バー風＋傾けたイラスト＋千鳥統計 === */
    .lp-q{ flex:1; text-align:left; }
    .lp-q-label{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--pGreen); background:rgba(31,122,90,.1); padding:7px 16px; border-radius:999px; }
    .lp-searchbar{ display:flex; align-items:center; gap:12px; background:#fff; border:2px solid var(--pNavy); border-radius:999px; padding:12px 12px 12px 22px; margin:18px 0; box-shadow:none; max-width:460px; }
    .lp-searchbar > i{ color:var(--pGray); font-size:18px; }
    .lp-searchbar span.kw{ flex:1; font-size:clamp(17px,2.4vw,22px); font-weight:900; color:var(--pNavy); }
    .lp-searchbar .lp-searchbtn{ flex:0 0 auto; background:var(--pOrange); color:#fff; font-size:13px; font-weight:900; padding:9px 18px; border-radius:999px; }
    .lp-q-text{ font-size:clamp(24px,3.4vw,38px); font-weight:900; color:var(--pNavy); line-height:1.4; margin:0 0 14px; }
    .lp-q-text em{ font-style:normal; color:var(--pOrange); }
    .lp-q-note{ font-size:14px; line-height:1.8; color:var(--pGray); font-weight:600; max-width:500px; margin:0; }
    .lp-q-fig{ flex:0 0 46%; position:relative; }
    .lp-q-fig::before{ content:""; position:absolute; inset:-10% -6% -12% -4%; background:radial-gradient(circle at 62% 42%, rgba(232,118,46,.20), transparent 64%); z-index:0; }
    .lp-q-fig img{ position:relative; z-index:1; width:100%; height:auto; border-radius:0; transform:rotate(-1.6deg); box-shadow:none; border:5px solid #fff; }
    @media(max-width:900px){ .lp-q{ text-align:center; } .lp-q-fig{ flex-basis:auto; width:100%; max-width:520px; } .lp-searchbar{ margin-left:auto; margin-right:auto; } }
    .lp-stats2{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1080px; margin:54px auto 0; align-items:start; }
    .lp-stat2{ background:#fff; border:1px solid var(--pLine); border-radius:0; padding:30px 22px 26px; text-align:center; box-shadow:none; position:relative; overflow:hidden; transition:transform .35s,box-shadow .35s; }
    .lp-stat2:hover{ transform:translateY(-6px); box-shadow:none; }
    .lp-stat2.s-navy:hover{ transform:translateY(-30px); }
    .lp-stat2::before{ content:""; position:absolute; top:0; left:0; right:0; height:6px; }
    .lp-stat2.s-orange{ --c:var(--pOrange); } .lp-stat2.s-navy{ --c:var(--pNavy); } .lp-stat2.s-green{ --c:var(--pGreen); }
    .lp-stat2::before{ background:var(--c); }
    .lp-stat2.s-navy{ transform:translateY(-24px); }
    .lp-stat2-ring{ width:134px; height:134px; border-radius:50%; margin:6px auto 16px; display:grid; place-items:center; background:conic-gradient(var(--c) calc(var(--p,0)*1%), var(--pCell) 0); }
    .lp-stat2-ring::before{ content:""; grid-area:1/1; width:106px; height:106px; background:#fff; border-radius:50%; box-shadow:none; }
    .lp-stat2 .n{ grid-area:1/1; z-index:1; font-size:clamp(28px,4.2vw,35px); font-weight:900; color:var(--c); line-height:1; }
    .lp-stat2 .c{ font-size:12px; font-weight:900; color:var(--pGray); margin-top:2px; letter-spacing:.03em; }
    .lp-stat2 .t{ font-size:14px; font-weight:700; color:var(--pNavy); margin-top:10px; line-height:1.5; }
    .lp-stat2 .t b{ color:var(--c); }
    @media(max-width:768px){ .lp-stats2{ grid-template-columns:1fr; max-width:420px; } .lp-stat2.s-navy{ transform:none; } }

    /* === 脱・単調: 4つの働き＝色違いの円バッジ（縦型カード＋ホバー） === */
    .lp-check4 > div{ flex-direction:column; text-align:center; gap:12px; padding:26px 18px; transition:transform .3s,box-shadow .3s; }
    .lp-check4 > div:hover{ transform:translateY(-6px); box-shadow:none; }
    .lp-check4 .k{ width:58px; height:58px; border-radius:50%; font-size:27px; color:#fff !important; box-shadow:none; }
    .lp-check4 > div:nth-child(1) .k{ background:var(--pNavy); }
    .lp-check4 > div:nth-child(2) .k{ background:var(--pGreen); }
    .lp-check4 > div:nth-child(3) .k{ background:var(--pOrange); }
    .lp-check4 > div:nth-child(4) .k{ background:var(--pNavy2); }
    /* === 脱・単調: 3本柱に大きな番号＋ホバー === */
    .lp-pillar{ transition:transform .35s,box-shadow .35s; }
    .lp-pillar:hover{ transform:translateY(-7px); box-shadow:none; }
    .lp-pillar .top{ position:relative; overflow:hidden; }
    .lp-pillar .top::after{ position:absolute; top:0; right:16px; font-family:var(--font-en); font-size:58px; font-weight:700; color:#fff; opacity:.16; line-height:1; }
    .lp-pillar.c1 .top::after{ content:"01"; } .lp-pillar.c2 .top::after{ content:"02"; } .lp-pillar.c3 .top::after{ content:"03"; }
    /* === 脱・単調: 安心の約束＝大きな円バッジ（#lp-promise限定） === */
    #lp-promise .lp-promise{ text-align:center; transition:transform .3s,box-shadow .3s; }
    #lp-promise .lp-promise:hover{ transform:translateY(-5px); }
    .lp-pbadge{ width:66px; height:66px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:31px; font-weight:900; color:#fff; margin:0 auto 16px; box-shadow:none; }
    #lp-promise .lp-promise:nth-child(1) .lp-pbadge{ background:var(--pGreen); }
    #lp-promise .lp-promise:nth-child(2) .lp-pbadge{ background:var(--pOrange); }
    #lp-promise .lp-promise:nth-child(3) .lp-pbadge{ background:#3d5a8a; }
    #lp-promise .lp-promise-img{ border-radius:0; overflow:hidden; margin:0 0 16px; background:#fff; box-shadow:none; }
    #lp-promise .lp-promise-img img{ width:100%; height:auto; display:block; }

    /* === 3本柱に画像バナー === */
    .lp-pillar-img{ aspect-ratio:16/10; overflow:hidden; background:var(--pCell); }
    .lp-pillar-img img{ width:100%; height:100%; object-fit:cover; display:block; }
    /* === サービスの3つの約束＝アイコン円バッジ（#lp-services限定） === */
    #lp-services .lp-promise{ text-align:center; background:linear-gradient(158deg,#1c3c69 0%,#0f2342 100%); border:1px solid rgba(255,255,255,.08); box-shadow:none; transition:transform .3s,box-shadow .3s; }
    #lp-services .lp-promise:hover{ transform:translateY(-6px); box-shadow:none; }
    #lp-services .lp-promise .lp-pbadge{ font-size:27px; box-shadow:none; }
    #lp-services .lp-promise:nth-child(1) .lp-pbadge{ background:var(--pGreen); }
    #lp-services .lp-promise:nth-child(2) .lp-pbadge{ background:var(--pOrange); }
    #lp-services .lp-promise:nth-child(3) .lp-pbadge{ background:#3d5a8a; }

    /* Pain Points - Full width, impactful */
    .pain-section { padding: 120px 0 100px; background: var(--dark); position: relative; overflow: hidden; }
    .pain-section::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 30% 50%, rgba(22,51,92,0.12) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(31,122,90,0.08) 0%, transparent 50%); pointer-events:none; }
    .pain-wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.6s ease; }
    .pain-section:hover .pain-wave-canvas { opacity: 1; }
    .pain-section .container { position: relative; z-index: 1; }
    .pain-header { text-align: center; margin-bottom: 60px; position: relative; }
    .pain-subtitle { font-family: var(--font-en); font-size: 14px; font-weight: 600; letter-spacing: 0.2em; color: var(--secondary); margin-bottom: 16px; }
    .pain-title { font-size: 32px; font-weight: 700; line-height: 1.5; color: #fff; white-space: nowrap; }
    .pain-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto 60px; position: relative; }
    .pain-item { display: flex; align-items: center; gap: 18px; background: rgba(255,255,255,0.06); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-radius:0; padding: 24px 28px; border: 1px solid rgba(255,255,255,0.1); border-left: 4px solid var(--primary); transition: all 0.4s cubic-bezier(0.16,1,0.3,1); }
    .pain-item:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
    .pain-icon { color: var(--secondary); font-size: 24px; flex-shrink: 0; margin-top: 2px; }
    .pain-item p { font-size: 16px; line-height: 1.8; color: rgba(255,255,255,0.85); margin: 0; }
    .pain-answer { text-align: center; position: relative; }
    .pain-answer-text { font-size: 20px; font-weight: 700; color: #fff; line-height: 1.6; position: relative; display: inline-block; }
    .pain-answer-text::after { content: ''; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius:0; }

    /* Testimonials - grid, bigger cards */
    .testimonials-section { padding: 80px 0 60px; position: relative; background: linear-gradient(180deg, #faf8ff 0%, #fff 40%, #f0fdfa 100%); overflow: hidden; }
    .testimonials-section::before { content:''; position:absolute; top:-60px; right:-120px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(22,51,92,0.06) 0%, transparent 70%); pointer-events:none; animation: floatBlob 12s ease-in-out infinite; }
    .testimonials-section::after { content:''; position:absolute; bottom:-80px; left:-100px; width:350px; height:350px; border-radius:50%; background:radial-gradient(circle, rgba(31,122,90,0.06) 0%, transparent 70%); pointer-events:none; animation: floatBlob 15s ease-in-out infinite reverse; }
    @keyframes floatBlob { 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(30px,-20px) scale(1.05); } 66%{ transform:translate(-20px,15px) scale(0.95); } }
    .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 40px 0 0; position: relative; z-index: 1; }
    .testimonial-card { background: rgba(255,255,255,0.7); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border: 1px solid rgba(22,51,92,0.08); border-radius:0; padding: 36px; transition: all 0.4s cubic-bezier(0.16,1,0.3,1); position: relative; }
    .testimonial-card::before { content:''; position:absolute; inset:-1px; border-radius:0; background:linear-gradient(135deg, rgba(22,51,92,0.15), transparent 50%, rgba(31,122,90,0.15)); z-index:-1; opacity:0; transition:opacity 0.4s; }
    .testimonial-card:hover { transform: translateY(-6px); box-shadow:none; }
    .testimonial-card:hover::before { opacity:1; }
    .testimonial-stars { color: #FFB800; font-size: 18px; margin-bottom: 18px; letter-spacing: 3px; }
    .testimonial-body { font-size: 15px; line-height: 1.9; color: #444; margin-bottom: 24px; min-height: 90px; }
    .testimonial-meta { display: flex; align-items: center; gap: 14px; }
    .testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
    .testimonial-name { font-size: 15px; font-weight: 600; color: var(--dark); margin: 0; }
    .testimonial-company { font-size: 13px; color: #888; margin: 4px 0 0; }

    /* --- Decorative ambient shapes for white sections --- */
    .ambient-shapes { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
    .ambient-dot { position:absolute; border-radius:50%; }
    .ambient-dot--purple { background:rgba(22,51,92,0.08); }
    .ambient-dot--teal { background:rgba(31,122,90,0.07); }
    .ambient-dot--gray { background:rgba(196,200,204,0.12); }
    .ambient-ring { position:absolute; border-radius:50%; border:1.5px solid; }
    .ambient-ring--purple { border-color:rgba(22,51,92,0.08); }
    .ambient-ring--teal { border-color:rgba(31,122,90,0.07); }
    @keyframes drift { 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(var(--dx,15px),var(--dy,-10px)); } }
    .ambient-float { animation: drift var(--dur,8s) ease-in-out infinite; }

    /* --- WHY HAKUSO stat cards glow --- */
    .why-stat-card { padding:36px 20px; border-radius:0; background:rgba(255,255,255,0.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(22,51,92,0.06); transition:all 0.4s cubic-bezier(0.16,1,0.3,1); position:relative; }
    .why-stat-card:hover { transform:translateY(-4px); box-shadow:none; border-color:rgba(22,51,92,0.15); }
    .why-stat-num { font-family:var(--font-en); font-size:48px; font-weight:700; color:var(--primary); line-height:1; margin-bottom:12px; }
    .why-stat-num span { font-size:20px; color:var(--secondary); }

    /* --- FOUNDER section bg --- */
    .section-banners { position:relative; overflow:hidden; }
    .section-banners::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(22,51,92,0.15), rgba(31,122,90,0.15), transparent); }
    .section-banners::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(31,122,90,0.15), rgba(22,51,92,0.15), transparent); }

    /* --- Section separator wave --- */
    .section-wave { display:block; width:100%; height:60px; position:relative; z-index:2; }
    .section-wave--flip { transform:scaleY(-1); }

    /* --- Noise texture overlay for depth --- */
    .noise-overlay { position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.025; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat:repeat; background-size:128px 128px; mix-blend-mode:overlay; }

    /* --- Animated gradient accent line --- */
    .gradient-line { height:3px; background:linear-gradient(90deg, var(--primary), var(--secondary), var(--primary)); background-size:200% 100%; animation:gradientSlide 4s linear infinite; }
    @keyframes gradientSlide { 0%{ background-position:0% 50%; } 100%{ background-position:200% 50%; } }

    /* --- Mobile: hide large ambient shapes, reduce wave height --- */
    @media (max-width:768px) {
      .ambient-shapes .ambient-dot[style*="width:180px"],
      .ambient-shapes .ambient-dot[style*="width:220px"],
      .ambient-shapes .ambient-ring[style*="width:250px"],
      .ambient-shapes .ambient-ring[style*="width:200px"] { display:none; }
      .section-wave { height:36px; }
    }

    /* WHY HAKUSO responsive */
    @media (max-width: 1024px) {
      #why-hakuso .links-inline { grid-template-columns: repeat(2,1fr) !important; gap: 20px !important; }
    }
    @media (max-width: 480px) {
      #why-hakuso .links-inline { grid-template-columns: 1fr !important; }
      .why-stat-card { padding: 28px 16px; }
      .why-stat-num { font-size: 36px; }
    }

    @media (max-width: 1024px) {
      .pain-list { grid-template-columns: repeat(2, 1fr); gap: 20px; }
      .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .pain-section { padding: 60px 0 50px; }
      .pain-header { margin-bottom: 40px; }
      .pain-list { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
      .pain-title { font-size: 22px; white-space: normal; }
      .pain-answer-text { font-size: 16px; }
      .pain-item { padding: 18px 20px; gap: 14px; border-radius:0; }
      .pain-item p { font-size: 14px; line-height: 1.6; }
      .pain-icon { font-size: 20px; }
      .pain-subtitle { font-size: 12px; margin-bottom: 12px; }
      .testimonials-section { padding: 50px 0 40px; }
      .testimonials-section .section-header { align-items: center; text-align: center; }
      .testimonials-grid { grid-template-columns: 1fr; }
      .testimonial-card { text-align: center; }
      .testimonial-meta { justify-content: center; }
      #why-hakuso .section-header { align-items: center; text-align: center; }
      .why-stat-card { text-align: center; }
      .floating-cta { bottom: 20px; right: 20px; padding: 14px 22px; font-size: 14px; }
      .floating-cta span { display: none; }
    }
    @media (max-width: 480px) {
      .pain-section { padding: 48px 0 40px; }
      .pain-header { margin-bottom: 32px; }
      .pain-title { font-size: 20px; }
      .pain-answer-text { font-size: 15px; line-height: 1.7; }
      .pain-item { padding: 16px 18px; gap: 12px; }
      .pain-item p { font-size: 13px; }
      .pain-icon { font-size: 18px; }
    }

    /* Works card mockup thumbnails */
    .works-mockup-wrap {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(135deg, #1A1A2E 0%, #16335c 60%, #0D4F4F 100%);
    }
    /* Subtle dot grid pattern */
    .works-mockup-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
      background-size: 16px 16px;
      z-index: 0;
    }
    /* Stacked pages behind the browser */
    .works-mockup-stack {
      position: absolute;
      width: 72%;
      height: 62%;
      z-index: 1;
    }
    .works-mockup-stack::before,
    .works-mockup-stack::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius:0;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
    }
    .works-mockup-stack::before {
      transform: rotate(-4deg) translate(-8px, 6px);
    }
    .works-mockup-stack::after {
      transform: rotate(3deg) translate(6px, -4px);
    }
    /* Browser frame */
    .works-mockup-browser {
      position: relative;
      z-index: 2;
      width: 78%;
      border-radius:0;
      overflow: hidden;
      box-shadow:none;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
    }
    .news-card:hover .works-mockup-browser {
      transform: translateY(-4px) scale(1.03);
      box-shadow:none;
    }
    .works-mockup-bar {
      height: 22px;
      background: #2D2D44;
      display: flex;
      align-items: center;
      padding: 0 8px;
      gap: 5px;
    }
    .works-mockup-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
    }
    .works-mockup-dot:nth-child(1) { background: #ff5f57; }
    .works-mockup-dot:nth-child(2) { background: #ffbd2e; }
    .works-mockup-dot:nth-child(3) { background: #28c840; }
    .works-mockup-browser img {
      width: 100%;
      height: 120px;
      object-fit: cover;
      object-position: top;
      display: block;
    }
    /* Category badge */
    .works-mockup-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 3;
      background: rgba(22,51,92,0.85);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius:0;
      letter-spacing: 0.04em;
      -webkit-backdrop-filter:blur(4px);
      backdrop-filter:blur(4px);
    }
    /* Phone mockup for app cases */
    .works-mockup-phone {
      position: relative;
      z-index: 2;
      width: 35%;
      aspect-ratio: 9 / 17;
      border-radius:0;
      overflow: hidden;
      border: 2.5px solid rgba(255,255,255,0.18);
      box-shadow:none;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
    }
    .news-card:hover .works-mockup-phone {
      transform: translateY(-4px) scale(1.03);
      box-shadow:none;
    }
    .works-mockup-phone-notch {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 40%;
      height: 12px;
      background: #000;
      border-radius:0;
      z-index: 3;
    }
    .works-mockup-phone img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .works-mockup-phone-nav {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-around;
      padding: 5px 6px;
      background: rgba(0,0,0,0.5);
      -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
      z-index: 2;
    }
    .works-mockup-phone-tab {
      width: 14px;
      height: 2.5px;
      border-radius:0;
      background: rgba(255,255,255,0.3);
    }
    .works-mockup-phone-tab.active {
      background: #fff;
      width: 20px;
    }

/* ===== from <style id="heroMovieCss"> ===== */
.hero-movie{ position:relative; flex:0 1 560px; min-width:0; z-index:5; display:flex; align-items:center; justify-content:center; }
    .hero-movie-frame{ width:100%; max-width:560px; aspect-ratio:16/9; background:#0b1220; border:1px solid rgba(255,255,255,.16); overflow:hidden; position:relative; }
    .hero-movie-frame::after{ content:""; position:absolute; left:0; top:0; width:44px; height:3px; background:var(--accent-warm,#e8762e); }
    .hero-movie-frame video{ width:100%; height:100%; object-fit:cover; display:block; }
    .hero-movie-sound{ position:absolute; right:10px; bottom:10px; z-index:3; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(11,18,32,.62); color:#fff; font-size:12px; font-weight:700; letter-spacing:.02em; cursor:pointer; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); transition:background .2s, border-color .2s; }
    .hero-movie-sound:hover{ background:rgba(232,118,46,.9); border-color:rgba(232,118,46,.9); }
    .hero-movie-sound i{ font-size:13px; }
    .hero-movie-sound.is-on{ background:rgba(232,118,46,.9); border-color:rgba(232,118,46,.9); }
    @media (max-width:980px){ .hero-movie{ flex-basis:440px; } }
    @media (max-width:768px){ .hero-movie{ order:0; flex-basis:auto; width:100%; margin-top:14px; margin-bottom:6px; } .hero-movie-frame{ max-width:100%; } }

/* ===== from <style> ===== */
/* 上部のスクロール進捗バー */
    #scrollProgress{ position:fixed; top:0; left:0; height:3px; width:0;
      background:linear-gradient(90deg,#e8762e,#f0a868,#1f7a5a); z-index:99999; pointer-events:none;
      box-shadow:0 0 12px rgba(232,118,46,.55); transition:width .08s linear; }

    /* ボタンに光が走る */
    .hero-cta-btn, .cando-cta-diag, .cando-cta-line, .lp-final .fbtn, .util-cta{
      position:relative; overflow:hidden; }
    .hero-cta-btn::after, .cando-cta-diag::after, .cando-cta-line::after, .lp-final .fbtn::after, .util-cta::after{
      content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
      background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
      transform:skewX(-22deg); pointer-events:none; }
    .hero-cta-btn:hover::after, .cando-cta-diag:hover::after, .cando-cta-line:hover::after,
    .lp-final .fbtn:hover::after, .util-cta:hover::after{ animation:hkShine .85s ease; }
    @keyframes hkShine{ to{ left:135%; } }

    /* 実績の矢印が脈打つ */
    #lp-results .rz-b .arw{ animation:hkArrow 2.6s ease-in-out infinite; }
    @keyframes hkArrow{ 0%,100%{ transform:translateX(0); opacity:1; } 50%{ transform:translateX(6px); opacity:.7; } }

    /* 実績の数字がふわっと光る */
    #lp-results .rz-b .af{ text-shadow:0 0 0 rgba(232,118,46,0); animation:hkGlow 3.4s ease-in-out infinite; }
    @keyframes hkGlow{ 0%,100%{ text-shadow:0 0 0 rgba(232,118,46,0); } 50%{ text-shadow:0 0 26px rgba(232,118,46,.32); } }

    /* カードが浮く */
    #lp-funnel .fn-card, #lp-results .rz-b, #lp-results .rz-fig,
    #lp-cando .cando-card, .lp-plan{ transition:transform .34s cubic-bezier(.16,1,.3,1), border-color .34s ease; }
    #lp-funnel .fn-card:hover{ transform:translateY(-7px); border-top-color:var(--pOrange,#e8762e); }
    #lp-results .rz-b:hover{ transform:translateY(-7px); }
    #lp-results .rz-fig:hover{ transform:translateY(-5px); }
    .lp-plan:hover{ transform:translateY(-7px); }

    /* 画像がゆっくり寄る */
    #lp-results .rz-fig > a{ overflow:hidden; display:block; }
    #lp-results .rz-fig img{ transition:transform .7s cubic-bezier(.16,1,.3,1); }
    #lp-results .rz-fig > a:hover img{ transform:scale(1.045); }

    /* セクション見出しの背後で、点線のリングがゆっくり回る */
    .lp-sec-head{ position:relative; }
    .lp-sec-head::before{ content:""; position:absolute; top:50%; left:50%; width:340px; height:340px;
      margin:-170px 0 0 -170px; border:1px dashed rgba(232,118,46,.20); border-radius:50%;
      animation:hkSpin 34s linear infinite; pointer-events:none; z-index:0; }
    .lp-sec-head::after{ content:""; position:absolute; top:50%; left:50%; width:220px; height:220px;
      margin:-110px 0 0 -110px; border:1px dashed rgba(22,51,92,.14); border-radius:50%;
      animation:hkSpin 22s linear infinite reverse; pointer-events:none; z-index:0; }
    .lp-sec-head > *{ position:relative; z-index:1; }
    @keyframes hkSpin{ to{ transform:rotate(360deg); } }
    @media(max-width:700px){ .lp-sec-head::before, .lp-sec-head::after{ display:none; } }

    /* 英字ラベルの左右の線が伸びる */
    .lp-sec-head .lp-en::before, .lp-sec-head .lp-en::after{ animation:hkLine 2.8s ease-in-out infinite; }
    @keyframes hkLine{ 0%,100%{ width:56px; opacity:1; } 50%{ width:26px; opacity:.55; } }

    /* 緑のバッジがふわっと明滅 */
    #lp-results .rz-b .up{ animation:hkBadge 3s ease-in-out infinite; }
    @keyframes hkBadge{ 0%,100%{ box-shadow:0 0 0 rgba(31,122,90,0); } 50%{ box-shadow:0 0 16px rgba(31,122,90,.45); } }

    @media (prefers-reduced-motion:reduce){
      #lp-results .rz-b .arw, #lp-results .rz-b .af, #lp-results .rz-b .up,
      .lp-sec-head::before, .lp-sec-head::after, .lp-sec-head .lp-en::before, .lp-sec-head .lp-en::after{ animation:none !important; }
    }
/* ===== 料金プラン比較表（2026-08-10 画像 plan-table.webp から実テーブル化） =====
   画像のままだと中身を編集できず、AIやクローラも表の構造を読めないため置き換えた。 */
.lp-plan-table{ max-width:1080px; margin:0 auto 18px; }
.lp-plan-table .ptt-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--pLine,#d7e0ec); background:#fff; }
.lp-plan-table table{ width:100%; border-collapse:collapse; min-width:820px; font-size:14px; }
.lp-plan-table th, .lp-plan-table td{ padding:13px 14px; text-align:center; border-bottom:1px solid var(--pLine,#d7e0ec); vertical-align:middle; }
.lp-plan-table thead th{ background:#16335c; color:#fff; font-weight:800; line-height:1.5; border-bottom:none; }
.lp-plan-table thead th:first-child{ background:#fff; }
.lp-plan-table thead th.is-reco{ background:#1f7a5a; }
.lp-plan-table .ptt-amount{ display:block; font-size:19px; font-weight:900; letter-spacing:.01em; }
.lp-plan-table .ptt-amount small{ font-size:12px; font-weight:700; }
.lp-plan-table .ptt-badge{ display:inline-block; background:#f5c451; color:#16335c; font-size:11px; font-weight:900; border-radius:999px; padding:3px 12px; margin-bottom:6px; }
.lp-plan-table tbody th{ text-align:left; font-weight:800; color:#16335c; background:#f7fafd; white-space:nowrap; }
.lp-plan-table tbody tr:nth-child(even) td{ background:#fbfdff; }
.lp-plan-table td.is-reco{ background:#f2f9f6 !important; }
.lp-plan-table .ptt-no{ color:#9aa7b8; }
.lp-plan-table .ptt-yes{ color:#1f7a5a; font-weight:800; }
.lp-plan-table caption{ caption-side:top; text-align:left; font-size:13px; color:#5b6b80; padding:0 0 10px; }
.lp-plan-table .ptt-opt{ font-size:12.5px; color:#5b6b80; line-height:1.9; margin:12px 2px 0; }
@media (max-width:700px){
  .lp-plan-table table{ font-size:13px; }
  .lp-plan-table th, .lp-plan-table td{ padding:10px 11px; }
  .lp-plan-table .ptt-amount{ font-size:17px; }
}

/* ===== 制作・スポット料金表（2026-08-10 画像 spot-table.webp から実テーブル化） ===== */
.lp-spot-table{ max-width:1080px; margin:0 auto 10px; }
.lp-spot-table .stt-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--pLine,#d7e0ec); background:#fff; }
.lp-spot-table table{ width:100%; border-collapse:collapse; min-width:720px; }
.lp-spot-table caption{ caption-side:top; text-align:left; font-size:13px; color:#5b6b80; padding:0 0 10px; }
.lp-spot-table th, .lp-spot-table td{ border-bottom:1px solid var(--pLine,#d7e0ec); padding:15px 18px; vertical-align:middle; }
.lp-spot-table tr:last-child th, .lp-spot-table tr:last-child td{ border-bottom:none; }
.lp-spot-table th[scope="row"]{ text-align:left; background:#f2f7fc; color:#16335c; font-weight:800; font-size:15px; width:30%; }
.lp-spot-table .stt-price{ text-align:right; white-space:nowrap; width:26%; color:#16335c; font-weight:900; font-size:23px; letter-spacing:.01em; }
.lp-spot-table .stt-price small{ font-size:13px; font-weight:800; }
.lp-spot-table .stt-price .stt-note{ font-size:12px; font-weight:700; color:#5b6b80; }
.lp-spot-table .stt-desc{ font-size:13.5px; color:#55667a; line-height:1.8; }
@media (max-width:700px){
  .lp-spot-table th, .lp-spot-table td{ padding:12px 13px; }
  .lp-spot-table th[scope="row"]{ font-size:14px; }
  .lp-spot-table .stt-price{ font-size:19px; }
  .lp-spot-table .stt-desc{ font-size:12.5px; }
}
