:root{
    --teal:#01b1ae;--teal-dark:#018583;--teal-bright:#00c9a7;--teal-pale:#b3e9e8;--teal-mist:#e6f7f6;
    --line-green:#06c755;--ink:#122323;--gray:#5c6a6a;--line:#e4eeee;--soft:#f6fbfb;
    --maxw:1280px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:"Noto Sans JP",sans-serif;font-size:16px;color:var(--ink);background:#fff;line-height:1.85;-webkit-font-smoothing:antialiased;}
  img{max-width:100%;display:block;}
  a{color:inherit;}
  .lftop-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

  /* セクション共通見出し */
  .lftop-sec{padding:96px 0;}
  .lftop-sec-head{text-align:center;margin-bottom:32px;}
  .lftop-sec-head .lftop-en{color:var(--teal);font-weight:800;font-size:12px;letter-spacing:.22em;}
  .lftop-sec-head h2{font-size:32px;font-weight:800;margin-top:10px;line-height:1.4;}
  .lftop-sec-head p{color:var(--gray);margin-top:12px;font-size:16px;}

  /* ヘッダー */
  .lftop-siteheader{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line);}
  .lftop-siteheader .lftop-wrap{display:flex;align-items:center;justify-content:space-between;height:76px;}
  .lftop-logo-img{height:38px;width:auto;}
  .lftop-nav{display:flex;align-items:center;gap:34px;font-size:15px;}
  .lftop-nav .lftop-links{display:flex;gap:30px;}
  .lftop-nav .lftop-links a{color:var(--ink);text-decoration:none;font-weight:500;}
  .lftop-nav .lftop-links a:hover{color:var(--teal);}
  .lftop-btn-head{background:var(--teal);color:#fff;text-decoration:none;padding:12px 24px;border-radius:10px;font-weight:700;font-size:14px;white-space:nowrap;box-shadow:0 6px 16px rgba(1,177,174,.28);}
  .lftop-btn-head:hover{background:var(--teal-dark);}
  .lftop-menu-check{display:none;}
  .lftop-menu-btn{display:none;}
  .lftop-sp-menu{display:none;}
  .lftop-menu-ovl{display:none;}
  .lftop-br-sp{display:none;}
  .lftop-nw{white-space:nowrap;}

  /* ボタン */
  .lftop-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:700;border-radius:12px;padding:20px 30px;font-size:16px;transition:.22s;white-space:nowrap;}
  .lftop-btn-primary{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-bright) 100%);color:#fff;box-shadow:0 14px 30px rgba(1,177,174,.34);}
  .lftop-btn-primary:hover{transform:translateY(-3px);}
  .lftop-btn-line{background:#fff;color:var(--teal);border:1.5px solid var(--teal);}
  .lftop-btn-line:hover{border-color:var(--teal-dark);background:#e9f7f7;transform:translateY(-3px);}
  .lftop-btn-ghost{background:transparent;color:var(--teal);border:1.5px solid var(--teal);}
  .lftop-btn-ghost:hover{background:var(--teal-mist);}

  /* ============ FV ============ */
  .lftop-hero{position:relative;overflow:hidden;background:#fff url('https://lflow.net/wp-content/themes/LFLOW-theme/img/toppage/fv-back_s30.webp') no-repeat center center;background-size:cover;min-height:720px;}
  .lftop-hero .lftop-wrap{position:relative;z-index:2;display:flex;align-items:flex-start;}
  .lftop-hero .lftop-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;}
  .lftop-hero .lftop-copy{position:relative;z-index:2;flex:1 1 auto;max-width:640px;padding:0;transform:translateY(-5px);}
  .lftop-fvform{flex:0 0 540px;background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(6,60,58,.12);padding:20px 28px 18px;margin:44px 0;z-index:3;position:relative;text-align:left;}
  .lftop-fvform h2{font-size:19px;text-align:center;margin-bottom:12px;}
  .lftop-fvform .lftop-fgroup{margin-bottom:9px;}
  .lftop-fvform label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:4px;}
  .lftop-fvform .lftop-req{display:inline-block;background:#e25c5c;color:#fff;font-size:10.5px;font-weight:700;border-radius:4px;padding:1px 7px;margin-left:6px;vertical-align:1px;}
  .lftop-fvform input[type="text"],.lftop-fvform input[type="tel"],.lftop-fvform input[type="email"],.lftop-fvform input[type="url"],.lftop-fvform textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:14px;background:#f8fbfb;font-family:inherit;line-height:normal;}  /* line-height:normal はテーマのリセットで行間を継承して背が高くなるのを防ぐ（2026-08-17） */
  .lftop-fvform input:focus,.lftop-fvform textarea:focus{outline:2px solid var(--teal);outline-offset:0;background:#fff;}
  .lftop-fvform .lftop-radio-row{display:flex;gap:22px;}
  .lftop-fvform .lftop-radio-wrap{flex-wrap:wrap;gap:5px 14px;}
  .lftop-fvform .lftop-radio-row label{display:flex;align-items:center;gap:9px;font-weight:500;font-size:14px;margin:0;}
  /* ラジオは現行HP（LFLOW-theme）と同デザイン: 20px・#CCC枠・選択時#01B1AE塗りつぶし */
  .lftop-fvform .lftop-radio-row input{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1px solid #CCCCCC;border-radius:100%;background:#fff;margin:0;cursor:pointer;flex:0 0 auto;transition:background-color .3s;}
  .lftop-fvform .lftop-radio-row input:checked{background-color:var(--teal);}
  .lftop-fvform .lftop-privacy{font-size:11.5px;color:var(--gray);text-align:center;margin:8px 0 10px;}
  .lftop-fvform .lftop-privacy a{color:var(--teal);}
  /* CF7は <input type="submit"> を出力する。inline-flexでは中の文字が中央に寄らないため text-align で指定する（2026-08-18） */
  .lftop-fvform .lftop-fsubmit{width:100%;background:#eef2f2;border-color:#c9d4d4;color:#9fadad;cursor:not-allowed;font-family:inherit;text-align:center;}
  .lftop-fvform .lftop-fsubmit.lftop-ready{background:#fff;border-color:var(--teal);color:var(--teal);cursor:pointer;}
  /* 押した感（へこむ） */
  .lftop-fvform .lftop-fsubmit.lftop-ready:active{transform:translateY(1px);background:#e9f7f7;}
  /* 送信中は物理的にクリックを受け付けない＝二重送信・多重メールの防止 */
  .lftop-fvform form.lftop-sending .lftop-fsubmit{pointer-events:none;opacity:.55;cursor:progress;}

  /* メダル型バッジ（デザイナー支給の画像版・白背景は透過加工済み） */
  .lftop-medals{display:flex;gap:14px;flex-wrap:wrap;margin-top:31px;margin-bottom:22px;}
  .lftop-medal-img{width:140px;height:auto;flex:0 0 auto;filter:drop-shadow(0 10px 22px rgba(6,60,58,.10));}

  .lftop-hero .lftop-eyebrow{font-size:18px;font-weight:700;color:#01b1ae;letter-spacing:.04em;margin-bottom:14px;}
  .lftop-hero h1{font-size:56px;line-height:1.4;font-weight:800;letter-spacing:.01em;}
  .lftop-hero h1 .lftop-hl{position:relative;color:var(--teal);white-space:nowrap;}
  .lftop-hero h1 .lftop-hl::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.28em;background:var(--teal-pale);z-index:-1;border-radius:2px;}
  .lftop-hero .lftop-sub{margin-top:26px;font-size:18px;color:var(--ink);font-weight:500;}
  .lftop-hero .lftop-cta-note{margin-top:14px;font-size:13px;color:var(--gray);}
  .lftop-hero .lftop-disclaimer{margin-top:12px;font-size:11px;color:var(--gray);line-height:1.6;}
  .lftop-cta-row{display:flex;gap:20px;margin-top:34px;max-width:520px;}
  .lftop-cta-row .lftop-btn{flex:1;padding-left:16px;padding-right:16px;}

  .lftop-features{display:flex;gap:4px;margin-top:38px;flex-wrap:nowrap;width:fit-content;}
  .lftop-feat{display:flex;gap:6px;align-items:flex-start;}
  .lftop-feat .lftop-fi{width:20px;height:20px;color:var(--teal);flex:0 0 auto;margin-top:1px;}
  .lftop-feat .lftop-fi svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .lftop-feat b{font-size:14px;display:block;line-height:1.5;white-space:nowrap;}
  .lftop-feat small{font-size:12px;color:var(--gray);line-height:1.55;display:block;margin-top:2px;white-space:nowrap;}

  /* ============ RESULTS（導入事例のマーキー：スマホモックアップ＋成果・左から右へ） ============ */
  .lftop-results{padding:36px 0 56px;overflow:hidden;background:#fff;}
  #lftop-works{background:var(--soft);}
  #lftop-service{background:var(--soft);}
  .lftop-talk{background:#fff;}  /* 2026-08-12: FLOWをCOLUMNの上へ移動した結果、SERVICE(soft)と隣接して境目が消えたため白に変更 */
  #lftop-faq{background:var(--soft);}
  .lftop-results-lead{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px 52px;margin:0 22px 42px;}
  .lftop-results-lead img{height:110px;width:auto;}
  .lftop-results-lead b{color:var(--teal);font-size:36px;line-height:1;margin:0 2px;}
  .lftop-results-track{display:flex;width:max-content;animation:lftop-marquee 90s linear infinite;}
  @keyframes lftop-marquee{from{transform:translateX(-50%);}to{transform:translateX(0);}}
  .lftop-result{flex:0 0 auto;width:222px;margin-right:12px;text-align:center;display:block;text-decoration:none;}
  .lftop-result-shot{width:150px;height:303px;object-fit:contain;margin:0 auto;filter:drop-shadow(0 14px 24px rgba(6,60,58,.18));}
  .lftop-result-frame{display:block;width:150px;height:303px;margin:0 auto;background:#161f21;border-radius:26px;padding:6px;box-shadow:0 14px 26px rgba(6,60,58,.2);position:relative;}
  .lftop-result-frame::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:64px;height:13px;background:#161f21;border-radius:0 0 9px 9px;}
  .lftop-result-frame img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:20px;display:block;}
  .lftop-result-plate{display:block;position:relative;margin:-34px auto 0;width:196px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 28px rgba(6,60,58,.14);padding:14px 12px 12px;}
  .lftop-result-ind{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11.5px;font-weight:700;color:#fff;background:var(--teal);border-radius:999px;padding:3px 13px;}
  .lftop-result-lbl{display:block;margin-top:6px;font-size:12.5px;font-weight:600;color:#5c6a6a;line-height:1.45;}
  .lftop-result-num{display:block;font-size:31px;font-weight:800;color:#25bda3;line-height:1.15;}
  .lftop-result-num small{font-size:15px;margin-left:1px;}

  /* ============ FVビジュアル：ダッシュボード型（スマホ1台＋KPIカード4枚） ============ */
  .lftop-fvd{position:absolute;z-index:1;top:96px;right:-26px;width:730px;height:640px;pointer-events:none;display:none;}


  /* スマホ本体 */
  .lftop-fvd-phone{position:absolute;left:33%;top:2%;width:302px;rotate:8deg;background:#161f21;border-radius:46px;padding:11px;box-shadow:0 48px 90px rgba(6,60,58,.32),0 10px 26px rgba(6,60,58,.18);}
  .lftop-fvd-phone::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:110px;height:22px;background:#161f21;border-radius:0 0 14px 14px;z-index:5;}
  .lftop-fvd-screen{background:#e6edf3;border-radius:36px;overflow:hidden;display:flex;flex-direction:column;height:600px;}
  .lftop-fvd-status{background:#20313a;color:#fff;font-size:10px;font-weight:700;padding:8px 22px 2px;display:flex;justify-content:space-between;}
  .lftop-fvd-head{background:#20313a;color:#fff;font-size:12px;font-weight:700;padding:7px 13px 9px;display:flex;align-items:center;gap:7px;}
  .lftop-fvd-head .lftop-fvd-oaico{width:17px;height:17px;border-radius:5px;background:linear-gradient(135deg,var(--teal),var(--teal-bright));display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:800;flex:0 0 auto;}
  .lftop-fvd-head .lftop-fvd-hics{margin-left:auto;letter-spacing:4px;font-size:11px;opacity:.85;}
  .lftop-fvd-chat{flex:1;padding:12px 12px 10px;display:flex;flex-direction:column;gap:9px;overflow:hidden;}
  .lftop-fvd-bubrow{display:flex;gap:6px;align-items:flex-start;}
  .lftop-fvd-av{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-bright));color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
  .lftop-fvd-bub{background:#fff;border-radius:4px 14px 14px 14px;padding:8px 11px;font-size:10px;color:#3c4b4b;line-height:1.6;box-shadow:0 2px 6px rgba(0,0,0,.05);}
  .lftop-fvd-card{background:#fff;border-radius:14px;box-shadow:0 4px 12px rgba(6,60,58,.07);}
  .lftop-fvd-diag{padding:13px 14px 14px;position:relative;}
  .lftop-fvd-diag-cap{color:var(--teal);font-size:11px;font-weight:800;}
  .lftop-fvd-diag-title{font-size:15.5px;font-weight:800;color:#22343f;line-height:1.35;}
  .lftop-fvd-diag-title span{border-bottom:2.5px solid var(--teal-pale);}
  .lftop-fvd-diag p{font-size:9.5px;color:var(--gray);margin-top:5px;}
  .lftop-fvd-diag-thumb{position:absolute;top:12px;right:12px;width:58px;height:44px;border-radius:9px;background:linear-gradient(135deg,#dff2f1,#bfe9e6);display:flex;align-items:center;justify-content:center;}
  .lftop-fvd-diag-thumb svg{width:24px;height:24px;stroke:var(--teal-dark);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .lftop-fvd-btn{margin-top:10px;background:linear-gradient(135deg,var(--teal),var(--teal-bright));color:#fff;font-size:11.5px;font-weight:800;text-align:center;padding:10px;border-radius:999px;box-shadow:0 6px 14px rgba(1,177,174,.3);}
  .lftop-fvd-row{display:flex;align-items:center;gap:10px;padding:11px 13px;}
  .lftop-fvd-row b{font-size:11.5px;color:#22343f;display:block;}
  .lftop-fvd-row small{font-size:9px;color:var(--gray);display:block;margin-top:2px;}
  .lftop-fvd-rico{margin-left:auto;width:30px;height:30px;border-radius:50%;background:var(--teal-mist);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
  .lftop-fvd-rico svg{width:15px;height:15px;stroke:var(--teal-dark);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .lftop-fvd-menu{display:grid;grid-template-columns:repeat(3,1fr);background:linear-gradient(135deg,var(--teal-dark),var(--teal) 55%,var(--teal-bright));}
  .lftop-fvd-menu div{color:#fff;text-align:center;padding:11px 4px 12px;font-size:10px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:5px;border-right:1px solid rgba(255,255,255,.22);}
  .lftop-fvd-menu div:last-child{border-right:0;}
  .lftop-fvd-menu svg{width:19px;height:19px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}

  /* スマホ画像モックアップ（傾き・影は画像側に含まれる） */
  .lftop-fvd-scene{position:absolute;left:-351px;top:-43px;width:1155px;max-width:none;height:auto;z-index:1;}

  /* KPIカード */
  .lftop-fvd-kpi{position:absolute;background:#fff;border-radius:20px;box-shadow:0 24px 50px rgba(56,78,86,.09),0 6px 16px rgba(56,78,86,.04);padding:18px 20px;z-index:4;}
  .lftop-fvd-lbl{font-size:13.5px;color:#5c6a6a;font-weight:700;letter-spacing:.02em;line-height:1.3;}
  .lftop-fvd-num{font-size:34px;font-weight:800;color:#25bda3;line-height:1.25;letter-spacing:.01em;}
  .lftop-fvd-num small{font-size:16px;font-weight:800;}
  .lftop-fvd-num .lftop-fvd-arrow{font-size:25px;color:#25bda3;margin-left:2px;}
  .lftop-fvd-chip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:#8d9c9b;font-weight:700;margin-top:5px;}
  .lftop-fvd-chip b{background:#e7f7f2;color:#27ab92;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:800;}
  .lftop-fvd-cico{display:inline-flex;align-items:center;margin-left:10px;vertical-align:-3px;}
  .lftop-fvd-cico svg{width:32px;height:32px;stroke:#2bab93;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .lftop-fvd-k1{left:38px;top:6px;width:182px;height:168px;}
  .lftop-fvd-k2{right:54px;top:44px;width:152px;}
  .lftop-fvd-k3{right:54px;top:280px;width:180px;}
  .lftop-fvd-k4{left:10px;top:372px;width:138px;padding-bottom:12px;}
  .lftop-fvd-k1 svg.lftop-fvd-area{display:block;position:absolute;right:15px;bottom:10px;width:76%;height:auto;margin:0;}
  .lftop-fvd-k3 svg.lftop-fvd-bars{display:block;margin-top:5px;width:92%;height:auto;}
  .lftop-fvd-donut{width:68px;height:68px;border-radius:50%;margin:8px auto 0;background:conic-gradient(#2fc3a9 0 34%,#57d0b8 34% 58%,#8fe0cd 58% 76%,#c3efe4 76% 90%,#e9f8f4 90% 100%);position:relative;}
  .lftop-fvd-donut::after{content:"";position:absolute;inset:18px;border-radius:50%;background:#fff;}

  /* 点線コネクタ（丸ドットの曲線パス＋光点） */
  .lftop-fvd-paths{position:absolute;inset:0;width:100%;height:100%;z-index:2;}
  .lftop-fvd-paths path{fill:none;stroke:#aadfd4;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:.1 8;}
  .lftop-fvd-paths .lftop-fvd-node{fill:#3bd3b6;}
  .lftop-fvd-paths .lftop-fvd-halo{fill:rgba(59,211,182,.22);}

  /* 旧・4台配置ビジュアル（現在未使用） */
  .lftop-fv-visual{position:absolute;z-index:1;top:116px;right:0;width:660px;aspect-ratio:660/540;pointer-events:none;}
  .lftop-fvp{position:absolute;}
  .lftop-fvp img{width:100%;height:auto;display:block;filter:drop-shadow(0 22px 34px rgba(6,60,58,.24));}
  .lftop-fvp1{width:27%;left:0;top:13%;rotate:-7deg;z-index:1;}
  .lftop-fvp2{width:27%;left:24%;top:3%;rotate:-2deg;z-index:2;}
  .lftop-fvp3{width:27.5%;left:48%;top:1%;rotate:2deg;z-index:3;}
  .lftop-fvp4{width:27%;left:72.5%;top:9%;rotate:7deg;z-index:2;}

  /* 実績カード（業種ピル＋大きな数値＋上昇アイコン） */
  .lftop-fvk{position:absolute;z-index:6;background:#fff;border:1px solid var(--teal-mist);border-radius:15px;box-shadow:0 16px 34px rgba(6,60,58,.18);padding:10px 15px 9px;white-space:nowrap;}
  .lftop-fvk-ind{display:inline-block;background:var(--teal);color:#fff;font-size:10px;font-weight:800;padding:2px 10px;border-radius:999px;letter-spacing:.02em;}
  .lftop-fvk-row{display:flex;align-items:center;gap:8px;margin-top:3px;}
  .lftop-fvk-val{font-size:25px;font-weight:800;color:var(--teal-dark);line-height:1.1;}
  .lftop-fvk-val small{font-size:13px;}
  .lftop-fvk-lbl{font-size:11px;color:var(--ink);font-weight:700;line-height:1.35;}
  .lftop-fvk-up{width:24px;height:24px;border-radius:50%;background:var(--teal-mist);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
  .lftop-fvk-up svg{width:13px;height:13px;stroke:var(--teal-dark);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .lftop-fvk1{left:2%;bottom:7%;}
  .lftop-fvk2{left:22%;top:0;}
  .lftop-fvk3{left:46%;bottom:3%;}
  .lftop-fvk4{right:0;top:6%;}

  /* ============ CHECK/悩み ============ */
  .lftop-worry{background:#fff;}
  .lftop-worry .lftop-grid{display:grid;grid-template-columns:repeat(3,calc((100% - 66px)/4));gap:22px;justify-content:center;}  /* カード幅・gapはSERVICE(.lftop-steps=4列gap22px)と同一 */
  .lftop-worry .lftop-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 28px;text-align:center;box-shadow:0 10px 30px rgba(6,60,58,.05);}
  .lftop-worry .lftop-card .lftop-qi{width:52px;height:52px;border-radius:14px;background:var(--teal-mist);color:var(--teal);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
  .lftop-worry .lftop-card .lftop-qi svg{width:28px;height:28px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .lftop-worry .lftop-card p{font-size:16px;font-weight:600;}

  /* ============ MOVIE（代表によるサービス紹介動画。SERVICEセクション内）※2026-08-12にマークアップを一時削除中。CSSは復活用に残置 ============ */
  .lftop-movie-lead{display:flex;align-items:center;justify-content:center;gap:13px;margin:72px 0 28px;font-size:20px;font-weight:800;line-height:1.5;}
  .lftop-movie-lead-ico{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-bright));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;padding-left:3px;box-shadow:0 8px 18px rgba(1,177,174,.32);flex:0 0 auto;}
  .lftop-movie-lead-hl{position:relative;white-space:nowrap;}
  .lftop-movie-lead-hl::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.42em;background:var(--teal-pale);z-index:-1;border-radius:2px;}
  .lftop-movie-frame{max-width:860px;margin:0 auto;aspect-ratio:16/9;border-radius:18px;overflow:hidden;position:relative;background:linear-gradient(135deg,#0f1c1c,#204a49);box-shadow:0 18px 44px rgba(6,60,58,.16);}
  .lftop-movie-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  .lftop-movie-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#fff;}
  .lftop-movie-play{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;font-size:24px;padding-left:6px;}
  .lftop-movie-coming{background:var(--teal);color:#fff;font-size:12px;font-weight:800;padding:5px 16px;border-radius:999px;letter-spacing:.04em;}

  /* ============ STEP（ご支援内容／流れ） ============ */
  .lftop-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  .lftop-step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 24px 28px;text-align:center;position:relative;box-shadow:0 10px 30px rgba(6,60,58,.05);}
  .lftop-step .lftop-no{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--teal),var(--teal-bright));color:#fff;font-weight:800;font-size:13px;padding:6px 16px;border-radius:999px;letter-spacing:.06em;}
  .lftop-step .lftop-si{width:60px;height:60px;margin:16px auto 18px;border-radius:16px;background:var(--teal-mist);color:var(--teal);display:flex;align-items:center;justify-content:center;}
  .lftop-step .lftop-si svg{width:30px;height:30px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
  .lftop-step h3{font-size:18px;font-weight:800;}
  .lftop-step p{font-size:14px;color:var(--ink);margin-top:10px;}

  /* ============ カード共通(WORKS/COLUMN/TALK) ============ */
  .lftop-cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
  .lftop-ccard{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;transition:.22s;box-shadow:0 10px 28px rgba(6,60,58,.05);}
  .lftop-ccard:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(6,60,58,.12);}
  .lftop-ccard .lftop-cimg{aspect-ratio:16/9;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#eaeef0;}
  .lftop-ccard .lftop-cbody{padding:22px 22px 26px;}
  .lftop-ccard .lftop-meta{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--gray);}
  .lftop-ccard .lftop-meta .lftop-cat{background:var(--teal-mist);color:var(--teal-dark);font-weight:800;padding:4px 12px;border-radius:999px;}
  .lftop-ccard h3{font-size:16px;font-weight:700;margin-top:14px;line-height:1.7;}
  .lftop-center{text-align:center;margin-top:48px;}
  .lftop-center .lftop-btn{min-width:240px;}

  /* ============ TALK（対談動画） ============ */
  .lftop-talk .lftop-cimg{position:relative;background-image:linear-gradient(135deg,#0f1c1c,#204a49);}  /* background一括指定はbackground-size:coverをリセットするためbackground-imageで指定 */
  .lftop-talk .lftop-cimg::after{content:"▶";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;opacity:.9;}
  .lftop-talk .lftop-ribbon{display:inline-block;background:var(--teal);color:#fff;font-size:11px;font-weight:800;padding:4px 12px;border-radius:999px;}
  .lftop-talk .lftop-note{text-align:center;color:var(--gray);font-size:13px;margin-top:24px;}

  /* ============ FLOW（運用開始までの流れ） ============ */
  .lftop-flow{background:#fff;}
  .lftop-flow .lftop-sec-head{margin-bottom:52px;}  /* STEPバッジがカード上に-14pxはみ出すため通常(32px)より広く */

  /* ============ 中間CTA ============ */
  .lftop-midcta{background:linear-gradient(120deg,var(--teal),var(--teal-bright));color:#fff;position:relative;overflow:hidden;}
  .lftop-midcta::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1.2px,transparent 1.2px);background-size:24px 24px;opacity:.5;}
  .lftop-midcta .lftop-wrap{position:relative;z-index:2;text-align:center;padding:74px 24px;}
  .lftop-midcta h2{font-size:30px;font-weight:800;}
  .lftop-midcta p{margin-top:14px;opacity:.96;font-size:16px;}
  .lftop-midcta .lftop-row{display:flex;gap:18px;justify-content:center;margin:34px auto 0;max-width:540px;}
  .lftop-midcta .lftop-row .lftop-btn{flex:1;padding-left:16px;padding-right:16px;}
  .lftop-midcta .lftop-btn-white{background:#fff;color:var(--teal-dark);}
  .lftop-midcta .lftop-btn-white:hover{transform:translateY(-3px);}
  .lftop-midcta .lftop-btn-outline{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.75);}
  .lftop-midcta .lftop-btn-outline:hover{background:rgba(255,255,255,.2);transform:translateY(-3px);}

  /* ============ COLUMN ============ */
  .lftop-column{background:var(--soft);}

  /* ============ FAQ ============ */
  .lftop-faq .lftop-list{max-width:860px;margin:0 auto;}
  .lftop-faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:2px 24px;margin-bottom:14px;box-shadow:0 6px 18px rgba(6,60,58,.04);}
  .lftop-faq summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:700;font-size:16px;position:relative;padding-right:28px;}
  .lftop-faq summary::-webkit-details-marker{display:none;}
  .lftop-faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);line-height:1;color:var(--teal);font-weight:800;font-size:22px;}
  .lftop-faq details[open] summary::after{content:"−";}
  .lftop-faq details p{padding:0 0 22px;color:var(--gray);font-size:16px;line-height:1.85;}

  /* ============ NEWS ============ */
  .lftop-news .lftop-list{max-width:900px;margin:0 auto;border-top:1px solid var(--line);}
  .lftop-news .lftop-item{display:flex;align-items:center;gap:24px;padding:22px 8px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:.15s;}
  .lftop-news .lftop-item:hover{background:var(--soft);}
  .lftop-news .lftop-item .lftop-date{font-size:14px;color:var(--gray);font-weight:700;flex:0 0 104px;}
  .lftop-news .lftop-item .lftop-cat{font-size:12px;font-weight:800;color:var(--teal-dark);background:var(--teal-mist);padding:4px 14px;border-radius:999px;flex:0 0 auto;}
  .lftop-news .lftop-item h3{font-size:16px;font-weight:500;}

  /* ============ CONTACT ============ */
  .lftop-contact{position:relative;overflow:hidden;background:
      radial-gradient(1000px 520px at 92% -12%, #bfeeeb 0%, transparent 58%),
      radial-gradient(860px 500px at 4% 112%, #bfeeeb 0%, transparent 58%),
      #fff;}
  .lftop-contact .lftop-wrap{position:relative;z-index:2;text-align:center;padding:96px 24px;}
  .lftop-contact .lftop-en{color:var(--teal);font-weight:800;font-size:12px;letter-spacing:.22em;}
  .lftop-contact h2{font-size:32px;font-weight:800;margin-top:10px;}
  .lftop-contact .lftop-lead{max-width:680px;margin:22px auto 0;color:var(--gray);font-size:16px;}
  .lftop-contact .lftop-row{display:flex;gap:18px;justify-content:center;margin:40px auto 0;max-width:540px;}
  .lftop-contact .lftop-row .lftop-btn{flex:1;padding-left:16px;padding-right:16px;}

  /* ============ フッター（2026-08-13: 現行サイトのフッターと同じ構成に統一） ============ */
  .lftop-footer{background:#0f1c1c;color:#c7d2d2;}
  .lftop-footer .lftop-wrap{padding:56px 24px;display:flex;align-items:center;justify-content:space-between;gap:40px;}
  .lftop-footer .lftop-flogo{height:38px;}
  .lftop-footer .lftop-fcopy{font-size:12.5px;color:#839797;margin-top:18px;}
  .lftop-fnav{display:flex;align-items:center;flex-wrap:wrap;}
  .lftop-fnav a{color:#c7d2d2;text-decoration:none;font-size:14px;font-weight:500;line-height:1;padding:0 22px;border-right:1px solid rgba(255,255,255,.24);}
  .lftop-fnav a:first-child{padding-left:0;}
  .lftop-fnav a:last-child{padding-right:0;border-right:0;}
  .lftop-fnav a:hover{color:#fff;}

  /* ============ SP版 ============ */
  /* ============ 中間幅（1201〜1399px）：PCデザインを等比縮小（Airレジ方式） ============ */
  /* body の等比拡大は全ページ共通になったため、header.php と 追加CSS へ移動（2026-08-18） */

  @media(max-width:1200px){
    .lftop-wrap{padding:0 22px;}
    .lftop-sec{padding:64px 0;}
    .lftop-sec-head h2{font-size:25px;}
    .lftop-nav .lftop-links{display:none;}
    .lftop-btn-head{display:none;}  /* 2026-08-17: 狭い画面で文字が折り返すためSPでは非表示。導線はドロワー内のCTAへ */
    .lftop-nav{gap:14px;}
    .lftop-menu-btn{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:5px;width:44px;height:42px;padding:0 10px;cursor:pointer;border:1px solid var(--line);border-radius:10px;background:#fff;}
    .lftop-menu-btn span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:.25s;}
    .lftop-menu-check:checked ~ .lftop-siteheader .lftop-menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .lftop-menu-check:checked ~ .lftop-siteheader .lftop-menu-btn span:nth-child(2){opacity:0;}
    .lftop-menu-check:checked ~ .lftop-siteheader .lftop-menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
    .lftop-menu-check:checked ~ .lftop-siteheader{z-index:60;}
    .lftop-menu-ovl{display:block;position:fixed;inset:0;background:rgba(12,35,33,.35);opacity:0;pointer-events:none;transition:opacity .25s;z-index:58;}
    .lftop-menu-check:checked ~ .lftop-menu-ovl{opacity:1;pointer-events:auto;}
    .lftop-sp-menu{display:block;position:fixed;top:0;right:0;bottom:0;width:min(76vw,300px);background:#fff;z-index:59;transform:translateX(105%);transition:transform .28s ease;box-shadow:-10px 0 34px rgba(6,60,58,.16);padding:92px 26px 24px;overflow-y:auto;}
    .lftop-menu-check:checked ~ .lftop-sp-menu{transform:translateX(0);}
    .lftop-sp-menu a{display:block;text-align:left;padding:15px 4px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;border-bottom:1px solid var(--line);}
    .lftop-sp-menu .lftop-sp-menu-cta{margin-top:22px;background:var(--teal);color:#fff;text-align:center;border-radius:10px;padding:14px;border-bottom:none;}

    /* FV：コピー中央寄せ。ビジュアルはh1直下に挿し込む（copyをdisplay:contents化してorderで並べ替え） */
    .lftop-hero{min-height:auto;background:#fff url('https://lflow.net/wp-content/themes/LFLOW-theme/img/toppage/fv-back-sp_s30.webp') no-repeat top center/100% auto;}
    .lftop-hero .lftop-wrap{display:flex;flex-direction:column;align-items:center;min-height:auto;padding:22px;text-align:center;}
    .lftop-fvform{display:none;}
    .lftop-hero .lftop-copy{display:contents;}
    .lftop-hero .lftop-eyebrow{order:1;margin-bottom:6px;}
    .lftop-hero h1{order:2;font-size:34px;}
    .lftop-fvd{order:5;position:relative;top:auto;right:auto;left:auto;flex:0 0 auto;margin:20px 0 0;transform:none;zoom:.53;}
    .lftop-medals{order:4;justify-content:center;margin-top:16px;margin-bottom:10px;}
    .lftop-hero .lftop-sub{order:3;max-width:640px;margin-top:14px;}
    .lftop-hero .lftop-sub br{display:none;}
    .lftop-cta-row,.lftop-midcta .lftop-row,.lftop-contact .lftop-row{flex-direction:column;max-width:none;}
    .lftop-cta-row{order:6;max-width:520px;width:100%;margin-top:16px;}
    .lftop-hero .lftop-disclaimer{order:8;margin-top:4px;}
    .lftop-features{order:7;flex-wrap:wrap;gap:14px 20px;margin-top:28px;justify-content:center;}
    .lftop-feat{text-align:left;}
    .lftop-fv-visual{position:relative;top:auto;right:auto;width:100%;margin:36px 0 20px;}
    .lftop-fvk{padding:6px 10px;border-radius:12px;}
    .lftop-fvk-ind{font-size:8.5px;padding:1px 8px;}
    .lftop-fvk-row{gap:5px;margin-top:2px;}
    .lftop-fvk-val{font-size:17px;}
    .lftop-fvk-val small{font-size:9.5px;}
    .lftop-fvk-lbl{font-size:8.5px;}
    .lftop-fvk-up{width:17px;height:17px;}
    .lftop-fvk-up svg{width:9px;height:9px;}
    .lftop-fvk1{left:0;}
    .lftop-fvk4{right:0;}

    /* セクション各種 */
    .lftop-movie-lead{font-size:17px;gap:10px;margin:56px 0 24px;padding:0 10px;}
    .lftop-movie-lead-ico{width:30px;height:30px;font-size:10px;}
    .lftop-worry .lftop-grid,.lftop-steps,.lftop-cardgrid{grid-template-columns:1fr;}
    .lftop-results{padding:40px 0;}
    .lftop-results-lead{gap:10px 28px;margin-bottom:30px;}
    .lftop-results-lead img{height:95px;}
    .lftop-results-lead span{gap:8px;}
    .lftop-result{width:180px;margin-right:10px;}
    .lftop-result-shot,.lftop-result-frame{width:126px;height:255px;}
    .lftop-result-plate{width:162px;margin-top:-28px;padding:12px 10px 10px;}
    .lftop-result-num{font-size:26px;}
    .lftop-result-num small{font-size:13px;}
    .lftop-result-lbl{font-size:12px;}
    .lftop-step{padding-top:36px;}
    .lftop-news .lftop-item{flex-wrap:wrap;gap:8px 16px;}
    .lftop-news .lftop-item .lftop-date{flex:0 0 auto;}
    .lftop-midcta h2{font-size:24px;}
    .lftop-contact h2{font-size:26px;}
    .lftop-footer .lftop-wrap{flex-direction:column;align-items:flex-start;gap:26px;padding:44px 22px;}
  }

  /* タブレット帯はSPレイアウトのままFVビジュアルを拡大 */
  @media(min-width:641px) and (max-width:1024px){
    .lftop-hero h1{font-size:42px;}
  }
  @media(min-width:1025px) and (max-width:1200px){
    .lftop-hero h1{font-size:46px;}
  }

  /* ============ スマホビュー（640px以下）：390px基準の微調整 ============ */
  @media(max-width:640px){
    .lftop-hero .lftop-eyebrow{font-size:14px;}
    /* 2026-08-13: 3行になるときは3行目を「売上に繋がる〜」から始める。
       2つ目のかたまりは font-size×17.0 の幅が要るので、狭い画面では字を縮めて必ず1行に収める */
    .lftop-hero .lftop-sub{font-size:min(calc((100vw - 61px) / 17.3),16px);}
    .lftop-hero .lftop-sub br{display:inline;}
    /* 2026-08-13: h1は必ず2行。2行目「CVR直結型のLINE運用」は font-size×10.41 の幅が要るため、
       左右padding 22px を引いた実効幅から逆算して字を縮める（左右44px＋スクロールバー17pxを引き、10.5で割る） */
    .lftop-hero h1{font-size:min(calc((100vw - 61px) / 10.5),33px);}
    .lftop-results-lead{gap:8px 20px;}
    .lftop-results-lead img{height:66px;}
    .lftop-medals{gap:10px;justify-content:center;}
    .lftop-medal-img{width:106px;}
    .lftop-feat small br{display:none;}
    .lftop-features{order:8;flex-direction:column;align-items:flex-start;justify-content:flex-start;}
    .lftop-fvd{order:4;margin-top:52px;left:22px;}
    .lftop-medals{order:5;}
    .lftop-hero .lftop-disclaimer{order:6;}
    .lftop-cta-row{order:7;}
    .lftop-fnav a{font-size:12.5px;padding:0 12px;}
  }

  /* ============ テーマCSSとの干渉対策（2026-08-17） ============ */
  /* テーマの style.css に input[type=radio]{opacity:0;position:absolute} があり、
     CF7用の独自ラジオ（ラベルの::beforeで丸を描く）に合わせた指定になっている。
     モック版は素のinputを表示する必要があるので、直下のlabel内だけ元に戻す */
  .lftop-fvform .lftop-radio-row > label input[type="radio"]{opacity:1;position:static;}

  /* ============ Contact Form 7 差し替え用（STEP 4で有効になる） ============ */
  /* CF7を入れると、丸はテーマの .wpcf7-list-item-label::before が描く（新デザインと同一の見た目）。
     テーマは縦並び指定なので、横並びに戻すだけでよい */
  .lftop-fvform .wpcf7{margin:0;}
  .lftop-fvform .wpcf7-form-control-wrap{display:block;}
  .lftop-fvform .screen-reader-response{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .lftop-fvform .lftop-radio-row .wpcf7-radio{display:flex;flex-direction:row;gap:22px;padding-top:0;}
  .lftop-fvform .lftop-radio-row .wpcf7-list-item{margin:0;}
  .lftop-fvform .wpcf7-list-item-label{font-size:14px;align-items:center;}
  .lftop-fvform .wpcf7-not-valid-tip{font-size:11.5px;color:#e25c5c;margin-top:3px;font-weight:500;}

  @media(max-width:480px){
    .lftop-sec-head h2{font-size:22px;}
  }
	
  /* ============================================================
     1000〜1200px も PC レイアウトで表示する（2026-09-04）
     上の @media(max-width:1200px) は無改変。カラム幅も PC のまま変えない。
     縮小は header.php の等比拡大スクリプト（1400px設計）に任せる。
     同じ内容を 外観 > カスタマイズ > 追加CSS にも入れている（他ページのヘッダー用）。
     ============================================================ */
  @media(min-width:1000px) and (max-width:1200px){
    /* ---- ヘッダー ---- */
    .lftop-nav .lftop-links{display:flex;}
    .lftop-btn-head{display:inline-block;}
    .lftop-menu-btn,.lftop-menu-ovl,.lftop-sp-menu{display:none;}

    /* ---- FV：PC と同じ配置・同じ幅・同じ余白に戻す ---- */
    .lftop-hero{min-height:720px;background:#fff url('https://lflow.net/wp-content/themes/LFLOW-theme/img/toppage/fv-back_s30.webp') no-repeat center center;background-size:cover;}
    .lftop-hero .lftop-wrap{flex-direction:row;align-items:center;justify-content:space-between;
      text-align:left;gap:16px;padding:0 24px;}
    .lftop-hero .lftop-copy{display:block;flex:1 1 auto;max-width:640px;min-width:0;
      padding:0;transform:translateY(-5px);}
    .lftop-fvform{display:block;flex:0 0 540px;}
    .lftop-hero .lftop-eyebrow,.lftop-hero h1,.lftop-hero .lftop-sub,
    .lftop-medals,.lftop-cta-row,.lftop-hero .lftop-disclaimer,.lftop-features{order:0;}
    .lftop-hero .lftop-eyebrow{margin-bottom:14px;}
    .lftop-hero h1{font-size:56px;}
    .lftop-hero .lftop-sub{margin-top:26px;max-width:none;}
    .lftop-hero .lftop-sub br{display:inline;}
    .lftop-medals{justify-content:flex-start;margin-top:31px;margin-bottom:22px;}
    .lftop-cta-row{flex-direction:row;width:auto;max-width:520px;margin-top:34px;}
    .lftop-hero .lftop-disclaimer{margin-top:12px;}
    .lftop-features{flex-wrap:nowrap;width:fit-content;justify-content:flex-start;gap:4px;margin-top:38px;}
    .lftop-fvd{display:none;}
    .lftop-fv-visual{position:absolute;top:116px;right:0;width:660px;margin:0;}

    /* ---- 余白・文字サイズは 1200px 以下の値のまま。段組みだけ戻す ---- */
    .lftop-worry .lftop-grid{grid-template-columns:repeat(3,calc((100% - 66px)/4));justify-content:center;}
    .lftop-steps{grid-template-columns:repeat(4,1fr);}
    .lftop-cardgrid{grid-template-columns:repeat(3,1fr);}
    .lftop-midcta .lftop-row,.lftop-contact .lftop-row{flex-direction:row;}
    .lftop-news .lftop-item{flex-wrap:nowrap;}
    .lftop-footer .lftop-wrap{flex-direction:row;align-items:center;}
  }
  /* JSが効かない場合の保険（FVのみ） */
  @media(min-width:1000px) and (max-width:1200px){ .lftop-hero{zoom:.78;} }

  /* CONTACTのリード文の改行はPCのみ（2026-09-04） */
  .lftop-pcbr{display:inline;}
  @media(max-width:999px){ .lftop-pcbr{display:none;} }

  /* タブレット（768〜999px）のカード段組み（2026-09-04）
     ※「弊社のご支援内容」と「運用開始までの流れ」は同じ .lftop-steps を使っているため、
       流れの方は .lftop-flow を付けて2列に分けている。 */
  @media(min-width:768px) and (max-width:999px){
    /* 導入事例・対談動画・コラム → 3列 */
    .lftop-cardgrid{grid-template-columns:repeat(3,1fr);gap:16px;}
    /* そのLINE運用、売上に繋がっていますか？ → 3列 */
    .lftop-worry .lftop-grid{grid-template-columns:repeat(3,1fr);gap:16px;}
    /* 弊社のご支援内容（4枚）・運用開始までの流れ（4枚） → どちらも2列 */
    .lftop-steps{grid-template-columns:repeat(2,1fr);gap:20px;}
  }