/* 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;
      /* 白文字を乗せるとき用の橙（2026-09-04）。#e8762e に白は 2.97:1 しかない。
         78%まで暗くすると 4.64:1 で 4.5 を満たす（80%は4.45で足りない）。
         新しい色は足さず、--pOrange から作る（pricing.css と同じやり方）。 */
      --pOrangeCta:#b55c24;
      --pOrangeCta:color-mix(in srgb, var(--pOrange) 78%, #000);
    /* 明るい地に橙の文字を置くとき用（2026-09-08）。#e8762e は白地で 2.97:1 しかなく、
       小さいラベルに使うと 4.5:1 を割る。66%まで暗くすると 6.06:1。
       pricing.css の --pl-premium-ink と同じ作り方・同じ値。 */
    --pOrangeInk:#994e1e;
    --pOrangeInk:color-mix(in srgb, var(--pOrange) 66%, #000);
      --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安心一行＋運営者信頼バッジ＋希少性 === */
    /* flex-wrap が無いと、下の span が次の行に回れず中で折れる（2026-08-26） */
    .hero-cta-note{ margin:14px 0 0; font-size:13px; font-weight:600; color:rgba(255,255,255,.82); display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; line-height:1.6; }
    .hero-cta-note i{ color:#5fd0a0; flex:0 0 auto; }
    /* 2つの文を inline-block にして、折るなら文の切れ目で折らせる。
       幅が足りないときは中でふつうに折り返すので、はみ出す心配はない。 */
    .hero-cta-note span{ display:inline-block; }
    .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:12.5px; } }

    /* === 統計の結論コール（自分ごと化） === */
    .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(--pOrangeInk); 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(--pOrangeCta); 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(--pOrangeCta); 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:12.5px; font-weight:600; color:#5f6875; 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:12.5px; 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(--pOrangeCta); 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(--pOrangeCta); 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(--pOrangeInk); }
    .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(--pOrangeCta); 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(--pOrangeCta); 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(--pOrangeCta); border-color:var(--pOrangeCta); 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; }
    /* 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(--pOrangeCta); 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:12.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(--pOrangeCta); 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(--pOrangeCta); 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:#c8d6ea; font-size:12.5px; line-height:1.7; }
    @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); }
    }
    /* === 監査修正: スマホ下部の固定要素の重なり解消（文字かぶり対策） ===
       :has(.lp-sticky-cta) で「下部バーがあるページ」に限定する（2026-09-04）。
       home.css は index / price / hikaku / kadai / rank の5ページが読むが、
       .lp-sticky-cta を持つのは index だけ。限定していなかったため、
       残り4ページはスマホで常時表示のCTAが1つも無い状態になっていた。
       390px の実測で、本文中の最初のCTAまで price=87%地点 / hikaku=86%地点。 */
    @media (max-width:768px){
      body:has(.lp-sticky-cta) .floating-cta{ display:none !important; }
      body:has(.lp-sticky-cta) .chatbot-trigger{ bottom:calc(78px + env(safe-area-inset-bottom)) !important; }
      body:has(.lp-sticky-cta) .chatbot-window{ bottom:calc(146px + env(safe-area-inset-bottom)) !important; max-height:calc(100vh - 220px) !important; }
      body:has(.lp-sticky-cta){ 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(--pOrangeCta); 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(--pOrangeCta); 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; }
    @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:12.5px; 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; }
}

/* ===================================================================
   2026-08-24　案2（白倉が2案から選択）＋ 実測で見つかった読みにくさの直し
   スマホ幅375pxで実測 → 直した項目だけをここに置く。
   既存の指定は消していない（元に戻しやすくするため上書きで足す）。
   =================================================================== */

/* ① オレンジのボタンの文字を白→濃紺に。オレンジ自体は変えない。
      白×#e8762e は実測 2.97:1（基準4.5:1）。濃紺にすると 5.9:1。
      サイトで一番押してほしいボタンなので、屋外でも読める側を取る。 */
.lp-sticky-cta a,
.lp-final .fbtn,
.hero-cta-btn.is-orange{
  color:#0f2342 !important;
}

/* ② ヒーロー1行目。白42%（実測4.03:1）をやめて白のまま小さく置く。
      元は .dim だったクラス名を .lede に変えている（index.html側も変更済み）。 */
.hero-h1 .lede{
  display:block;
  font-size:.55em;
  letter-spacing:-.01em;
  margin-bottom:2px;
  color:#fff;
}

/* ③ 案2で足した補足1行（チラシ・Googleマップ…）。
      リードを1文に削ったぶん、種類はここで小さく出す。 */
.hero-lead-sub{
  font-family:var(--font-ja);
  font-size:15px;
  line-height:1.7;
  color:rgba(255,255,255,.82);
  margin:10px 0 0;
  padding-left:22px;
}

/* ④ 案2で目次4つの代わりに置いた1つ。押せる高さを48pxにする。 */
.hero-more{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  margin-top:16px;
  padding:0 22px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  color:#fff;
  font-family:var(--font-ja);
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  transition:background .2s, border-color .2s;
}
.hero-more:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); }

/* ⑥ ヒーロー下のバー。8pxの英語ラベル（METHOD/EXCLUSIVE/CONTACT）を
      index.html から消したので、残った日本語だけで組み直す。 */
.hero-bottom-value{ font-size:14px !important; color:rgba(255,255,255,.92) !important; }

/* ⑦ そのバーが左にずれて、1つ目「1件が決まるまでの流れ」が画面の外に出ていた。
      これは元からの不具合。スマホでは position:static になるのに
      transform:translateX(-50%) だけ残っていて、箱ごと151px左に動いていた
      （実測 左端 -115px）。static のときは transform も left も要らない。 */
@media (max-width:768px){
  .hero-bottom-bar{
    transform:none !important;
    left:auto !important;
    right:auto !important;
    margin:0 auto !important;
    max-width:none !important;
    width:calc(100% - 24px) !important;
  }
  .hero-bottom-value{ white-space:normal !important; line-height:1.45; }
}
@media (max-width:480px){
  .hero-bottom-value{ font-size:13px !important; }
}

/* ⑧ その帯が、左下の信頼カード（.hero-trust）に重なっていた（2026-09-04 実測）。
      「1エリア1業種1社の限定。あなたの地域はまだ空いています。」の行が
      帯の下に潜って読めなくなる。帯は right:5% / bottom:106px の絶対配置なので、
      幅が狭くなるほど左に伸びて、カードの上に乗る。

      実測（帯の下端 → カードの上端。重なっていた値 → 190pxに上げた後）
        900px   694 → 627  重なる ／ 610 → 627  離れる
        1024px  662 → 624  重なる ／ 578 → 624  離れる
        1152px  694 → 628  重なる ／ 610 → 628  離れる
        1279px  重なっていないが、同じ帯なのでそろえる

      1280px以上（帯が右に寄ってカードと横に離れる）と
      768px以下（帯が静的配置で下に回る）は元から重ならないので触らない。 */
@media (min-width:769px) and (max-width:1279px){
  .hero-bottom-bar{ bottom:190px !important; }
}

/* ===================================================================
   2026-08-24　案1（白倉が2案から選択）＝文字の色だけ濃くする
   大きさ・並び・行数は変えない。ボタン・罫線・アイコンのオレンジも変えない。
   本番をスマホ幅375pxで実測した17カ所だけを対象にしている。
   判定＝大きい文字（太字18.66px以上か24px以上）は3:1、それ以外は4.5:1。
   =================================================================== */

/* 文字に使うオレンジ。ボタンの #e8762e とは別に持つ（ボタンは白抜きなので条件が違う） */
:root{ --pOrangeText:#b8551a; }

/* ① お客様の声カードのサイトURL（13px・6件）2.97:1 → 4.6:1 */
.lp-voice-link{ color:var(--pOrangeText) !important; }

/* ② 同じカードの業種・地域（12px・6件）4.45:1 → 7.4:1 */
.lp-voice-cat{ color:#4d5769 !important; }

/* ③ 見出しの強調（22px）2.65:1 → 4.1:1。大きい文字の基準3:1を超える */
.lp-sec-head .lp-h2 em,
.lp-pain-head .lp-h2 em{ color:var(--pOrangeText); }

/* ④ 「実績ページで全社の推移を見る」（11.5px）2.97:1 → 4.6:1。
      index.html にインラインで色が書いてあるので !important で上書きする */
#lp-results a[href="results/"]{ color:var(--pOrangeText) !important; }

/* ⑤ 「ふつうは」のラベル（12px）2.39:1 → 5.9:1。
      対になる「HAKUSOは」と見分ける唯一の手がかりなので、いちばん薄いのは困る */
.chg-usual .chg-lb{ color:#5b6577 !important; }

/* ⑥ 「当てはまるものを押すと…」の案内（13.5px）3.36:1 → 5.4:1 */
.chg-intro{ color:#5b6577 !important; }

/* ⑦ 実績の注記（11.5px）3.67:1 → 5.4:1 */
#lp-results .rz-disc{ color:#5b6577 !important; }

/* 2026-08-26 追加：FAQの回答文が1行103字あって読めなかったので絞る。
   アコーディオンの箱(1440px)は広いままでよいが、中の地の文は別。 */
.lp-acc .accbody p,
.lp-acc .accbody li{ max-width: 880px; }

/* ===========================================================
   会社紹介（2026-09-02 構造変更）

   h-scape.com の About セクションの並びに合わせた。
     横線つきの英字ラベル → 大きな和文見出し → 本文 → 折りたたみ2枚（Mission / Vision）
   前は Mission 1枚だけを平置きしていたが、
   ミッションとビジョンを分けて、読みたい人だけ開く形にした。

   開閉は <details> を使う。JSを足していない。
   キーボード操作と読み上げが最初から効き、JSが落ちても中身が読める。

   背景は白。直前の .pos-strip が紺、直後が白と続くのでここは白のまま。
   文字は16pxを下限にする。
   =========================================================== */
.lp-mission{ background:#fff; }

.ms-wrap{ max-width:var(--w-read, 1120px); margin:0 auto; }

/* 英字ラベル。左に横線を引く（h-scape と同じ形） */
.ms-label{ display:flex; align-items:center; gap:16px; margin:0 0 14px; }
.ms-label::before{
  content:""; width:56px; height:1px; background:var(--pGreen,#1f7a5a); flex:0 0 auto;
}
.ms-label .en{
  font-family:var(--font-en,'Archivo',sans-serif);
  font-size:16px; font-weight:700; letter-spacing:.14em;
  color:var(--pGreen,#1f7a5a);
}

.ms-head{
  font-size:clamp(30px,5vw,46px); font-weight:900; line-height:1.4;
  color:var(--pNavy,#0f2342); margin:0 0 30px; letter-spacing:.02em;
}

.ms-body p{
  font-size:clamp(16px,1.5vw,17px); line-height:2.05; color:var(--pGray,#4c5a6d);
  margin:0 0 22px; max-width:46em;
}
.ms-body p:last-child{ margin-bottom:0; }
.ms-lead{ color:var(--pInk,#1d2b40) !important; font-weight:700; }

/* ---- 折りたたみ2枚 ---- */
.ms-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:38px 0 0;
}
.ms-card{
  background:#f2f7f5; border:1px solid var(--pLine,#d7e0ec);
}
.ms-card summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:14px;
  min-height:88px; padding:18px 22px; text-align:center;
}
.ms-card summary::-webkit-details-marker{ display:none; }
.ms-card summary:focus-visible{ outline:3px solid var(--pOrange,#e8762e); outline-offset:-3px; }
.c-ttl{ display:flex; flex-direction:column; gap:4px; }
.c-en{
  font-family:var(--font-en,'Archivo',sans-serif);
  font-size:16px; font-weight:700; letter-spacing:.1em; color:var(--pGreen,#1f7a5a);
}
.c-ja{ font-size:19px; font-weight:900; color:var(--pNavy,#0f2342); letter-spacing:.14em; }

/* 矢印はCSSで描く。画像もアイコンフォントも使わない */
.c-chev{
  width:13px; height:13px; flex:0 0 auto;
  border-right:2px solid var(--pGray,#4c5a6d);
  border-bottom:2px solid var(--pGray,#4c5a6d);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .25s ease;
}
.ms-card[open] .c-chev{ transform:rotate(225deg) translate(-3px,-3px); }

.ms-card-in{ padding:0 22px 24px; }
.ms-card-in .c-head{
  font-size:clamp(18px,2.2vw,22px); font-weight:900; line-height:1.6;
  color:var(--pNavy,#0f2342); margin:0 0 14px;
}
/* #e8762e はこの薄緑の地に対して 2.75:1 しかなく、大きい文字の3:1にも届かない。
   --pOrange から暗い側を作って 6.7:1 にする。新しい色は足していない。 */
.ms-card-in .c-head em{
  font-style:normal;
  color:var(--pOrangeD,#c2591a);
  color:color-mix(in srgb, var(--pOrange,#e8762e) 66%, #000);
}
.ms-card-in p{
  font-size:16px; line-height:1.95; color:var(--pGray,#4c5a6d); margin:0 0 12px;
}
.ms-card-in p:last-child{ margin-bottom:0; }

.ms-sign{
  margin:32px 0 0; padding-top:18px; border-top:1px solid var(--pLine,#d7e0ec);
  font-size:16px; color:var(--pGray,#4c5a6d); font-weight:700;
}
.ms-sign b{ color:var(--pNavy,#0f2342); }

@media(max-width:760px){
  .ms-cards{ grid-template-columns:1fr; gap:14px; }
  .ms-body p{ max-width:none; }
  .ms-label::before{ width:34px; }
}
@media (prefers-reduced-motion: reduce){
  .c-chev{ transition:none; }
}

/* ===================================================================
   追従CTAバーと本文の重なり（2026-09-02 スマホ375pxで実測して修正）

   実測した値
     バーの高さ                     73px
     body の padding-bottom（既存）  66px  → 7px 足りない
     バー側だけ env(safe-area-inset-bottom) を足していた
       → iPhoneのホームバーがある機種では、さらに約34px 足りない

   直したこと
     1. バーの高さを1か所（--sticky-cta-h）に持つ
     2. body の下余白と、アンカーで飛んだときの停止位置の両方から
        同じ値を引く。片方だけ直すと、リンクで飛んだ先がバーの下に隠れる
     3. バーに上向きの影を付ける
        影が無いと、上の行がバーに切られたように見える。
        影があると「バーが上に乗っている」と読めるので、
        表の途中で切れていても壊れて見えない

   固定バーである以上、スクロール中に本文がバーの下を通ること自体は
   避けられない。避けられるのは「一番下まで送っても最後の行が
   バーに隠れたまま」という状態で、そこを直している。
   =================================================================== */
:root{ --sticky-cta-h: 74px; }

/* こちらも下部バーのあるページだけに限定する（2026-09-04）。
   限定していなかったので、バーが無い4ページではフッターの下に
   74pxの空白だけが残っていた（実測 padding-bottom=74px）。 */
@media (max-width:768px){
  body:has(.lp-sticky-cta){ padding-bottom: calc(var(--sticky-cta-h) + env(safe-area-inset-bottom)); }
  html:has(.lp-sticky-cta){ scroll-padding-bottom: calc(var(--sticky-cta-h) + 12px + env(safe-area-inset-bottom)); }
  .lp-sticky-cta{ box-shadow: 0 -8px 20px rgba(15,35,66,.22); }
}

/* ===================================================================
   制作・スポット料金表を、899px以下でリストにする
   （2026-09-02 案Aと同じ考え方。白倉決定）

   375pxで実測したところ、この表は幅720pxのうち331pxしか見えず、
   389px（54%）が画面の外にあった。横スクロールはできるが、
   スクロールできると分かる合図が無く、切れているようにしか見えない。

   表の形をやめ、1件ずつのカードにする。
   品名 → 金額 → 説明 の縦並び。横にはみ出す場所が無くなる。
   900px以上は表のまま。パソコンの見た目は変えていない。
   =================================================================== */
@media (max-width:899px){
  .lp-spot-table .stt-scroll{ overflow-x:visible; border:0; background:transparent; }
  .lp-spot-table table{ min-width:0; }
  /* table を display:block にすると caption だけ内容幅の細い柱になる。
     caption も block にして横幅いっぱいに戻す。 */
  .lp-spot-table caption{ display:block; text-align:left; font-size:14px; line-height:1.85; color:#55667a; }
  .lp-spot-table table,
  .lp-spot-table tbody,
  .lp-spot-table tr,
  .lp-spot-table th,
  .lp-spot-table td{ display:block; width:auto; }
  .lp-spot-table tr{
    background:#fff;
    border:1px solid var(--pLine,#d7e0ec);
    margin-bottom:-1px;
    padding:15px 16px;
  }
  .lp-spot-table tr:last-child th,
  .lp-spot-table tr:last-child td{ border-bottom:none; }
  .lp-spot-table th[scope="row"]{
    /* width:auto をここにも書く。上の th[scope="row"] は
       属性セレクタのぶん強く、.lp-spot-table th の width:auto では勝てない。
       30%のままだと「会社案内パ／ンフレット」と途中で折れる。 */
    width:auto;
    background:none; border:0; padding:0 0 6px;
    font-size:16px; line-height:1.6;
  }
  .lp-spot-table .stt-price{
    text-align:left; width:auto; padding:0;
    font-size:24px; white-space:normal;   /* チラシの行は金額が2つ入る。nowrapだとはみ出す */
  }
  .lp-spot-table .stt-desc{
    padding:8px 0 0; font-size:16px; line-height:1.85; color:#4a5261;
  }
}

/* ===================================================================
   制作・スポット料金：いくらが、いくらになるのか
   （2026-09-02 白倉指示「何円から何円になるかを赤や黄色で強調」）

   これまでは通常価格しか出しておらず、6割になることは
   表の上の一文でしか言っていなかった。読み手が自分で計算しないと
   いくら得なのか分からない。両方の数字を並べて出す。

   上段 通常価格   灰色＋取り消し線
   下段 契約中     赤い字を黄色の帯に乗せる

   色は目立たせるためだけに強くしているのではなく、
   数字が2つ並ぶので「どちらが今の値段か」を色で分けている。

   赤は最初 #b81f17 にしたが、黄 #ffe45c の上で 4.35:1 しかなかった。
   27pxの数字は大きい文字なので3:1で足りるが、
   同じ色の「円〜」は15pxで、そこは4.5:1が要る。
   黄を薄くするとドンキ的な強さが消えるので、赤の側を暗くした。
     #b81f17 を黄 #ffe45c の上に置いて 5.08:1
     同じ #b81f17 を地にして白い「契約中」札が 6.47:1
     「（片面）」などの注記 #8a1f16 が 7.21:1
   =================================================================== */
.lp-spot-table .stt-price{ width:30%; }

.lp-spot-table .stt-was{
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #6b7280;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  margin: 0 0 7px;
  letter-spacing: 0;
}
.lp-spot-table .stt-was small{ font-size: 14px; font-weight: 700; }

/* 割引前の値段ではない金額（公開後の微修正 5,000円/回 など・2026-09-08）。
   .stt-was は取り消し線が入るので使えない。素直に出す。 */
.lp-spot-table .stt-after{
  display: block;
  margin: 7px 0 0;
  font-size: 17px;
  font-weight: 800;
  color: #3c4756;
  letter-spacing: 0;
}
.lp-spot-table .stt-after small{ font-size: 14px; font-weight: 700; }
/* 説明文のおしまいに置くリンク。折り返しで矢印だけ次の行に落ちないように */
.lp-spot-table .stt-more{ white-space: nowrap; color: inherit;
  text-decoration: underline; text-underline-offset: 2px; }
.lp-spot-table .stt-more:hover{ color: var(--primary); }

.lp-spot-table .stt-now{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px 9px;
  background: #ffe45c;
  padding: 7px 13px;
  color: #b81f17;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.2;
}
.lp-spot-table .stt-now i{
  font-style: normal;
  background: #b81f17;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  padding: 4px 9px;
  line-height: 1.4;
  white-space: nowrap;
  align-self: center;
}
.lp-spot-table .stt-now small{ font-size: 15px; font-weight: 900; }
.lp-spot-table .stt-now .stt-note{ font-size: 14px; font-weight: 800; color: #8a1f16; }

@media (max-width:899px){
  /* リストなので左寄せ。札と金額は横に並べたまま折り返す */
  .lp-spot-table .stt-price{ width:auto; }
  .lp-spot-table .stt-was{ font-size:16px; margin-bottom:8px; }
  .lp-spot-table .stt-now{ justify-content:flex-start; font-size:26px; padding:8px 12px; }
}

/* ===================================================================
   ヒーロー下の3つの帯を、狭い画面では縦に積む
   （2026-09-02 白倉指摘「この辺モバイルだと見れない」）

   375pxで実測した状態
     バーの幅 303px を3等分 → 1項目 90px
     「1件が決まるまでの流れ」は13px×11文字で143px必要
     → 90pxに入らず3行に折れ、項目の高さが67pxになっていた
     文字も13pxで、サイトの基準（16px）より小さい

   横に3つ並べるのを、狭い画面ではやめる。
   1行に1つ、左寄せ、頭に印を置く。文字は16pxに戻す。
   区切りの縦線は横線に変える。
   =================================================================== */
@media (max-width:600px){
  .hero-bottom-bar{
    flex-direction:column !important;
    align-items:stretch !important;
    padding:6px 16px !important;
  }
  .hero-bottom-item{
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:left !important;
    padding:11px 0 !important;
    gap:10px !important;
    flex:0 0 auto !important;
  }
  .hero-bottom-item::before{
    content:"";
    flex:0 0 auto;
    width:7px; height:7px;
    background:var(--pOrange,#e8762e);
  }
  .hero-bottom-value{
    font-size:16px !important;
    line-height:1.5;
    white-space:nowrap !important;   /* 1行に収まる幅があるので折らない */
  }
  .hero-bottom-divider{
    width:100% !important;
    height:1px !important;
  }
}

/* ==========================================================
   ヒーローの可読性まわり（2026-09-04）

   比較ラボで3案（可読性／導線／タイポ）を作って見比べたが、
   ヒーローは料金セクションほどの問題を抱えていなかった。
   見た目を変える案は採らず、数字で欠陥と言い切れる3つだけを直す。

   .hero-lead / .hero-sidebar-social / :focus-visible の元の指定は
   css/style.css にある。あちらは197ページが読んでいて、1行足すだけで
   全ページの ?v= を付け直すことになる。ヒーローは index にしか無いので、
   home.css（5ページ）側から #hero 付きで上書きする。
   ========================================================== */

/* 1. リードの不透明度 .74 → .92

   ヒーローの背景動画は 2026-09-04 に4本の入れ替えから1本
   （hero-hakuso-cut.mp4／2秒カットで12枚つないだ24秒）に変わった。

   最初は「動画の生の明るさ＝背景」と考えて測っていたが、それは間違いだった。
   .hero-bg::before の左スクリム（0.92→0）が文字の側をしっかり暗くしている。
   生の動画だけで測ると、4〜6秒のオレンジの握手の区間で 2.92:1 まで落ちて
   見えるが、実際に画面を撮って合成後の色を測ると：

     文字帯のすぐ上 y=342   rgb( 42, 44, 46) → 12.09:1
     文字帯のすぐ下 y=414   rgb( 39, 47, 47) → 11.82:1
     見出しの帯    y=250   rgb( 62, 60, 64) →  9.53:1
     CTA の下      y=560   rgb( 60, 73, 80) →  8.17:1   ← いちばん厳しい所

   いちばん明るいコマでも 8:1 以上ある。.92 のままで問題ない。
   ※ 測るときは必ず「画面を撮ってから」。生の動画で測ると過小評価になる。 */
#hero .hero-lead{ color: rgba(255,255,255,.92); }

/* 2. Instagram の当たり判定が 14x29 しかない

   WCAG 2.2 の 2.5.8 Target Size (Minimum) は 24x24 CSS px。幅が足りない。
   アイコンの見た目は変えず、擬似要素で判定だけ 44x44 に広げる。
   動画切り替えのドットは 32x32 で、24x24 は満たしている。
   隣と34px間隔なので、広げると当たり判定が重なる。触らない。 */
#hero .hero-sidebar-social a{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#hero .hero-sidebar-social a::after{
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%,-50%);
}

/* 3. フォーカスの輪郭が動画の上で見えない

   style.css の既定は 2px solid var(--secondary)（#1f7a5a）。
   図形に要るのは 3:1（WCAG 1.4.11）だが、
     暗いコマ（輝度0.01）の上 … 3.32:1（かろうじて通る）
     明るいコマの上          … 1.24:1（通らない）
   白なら明るいコマの上でも 6.55:1 になる。ヒーローの中だけ白にする。
   （測ったのは素材の hero-hakuso-3。動画は1本にまとめ、素材は削除した） */
#hero a:focus-visible,
#hero button:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 3px;
}
