/* ================================================================
   LINE公式アカウント無料診断 LP  |  NYX   （2026 refresh）
   tool_lp_deliver 準拠：色は全て --lp-* トークン経由（ハードコード色禁止）
   ================================================================ */

:root{
  /* --- surface --- */
  --lp-white:#ffffff;
  --lp-bg:#ffffff;
  --lp-bg-alt:#F6F8FA;
  --lp-border:#e7ebf0;
  --lp-border-soft:#eef1f4;
  --lp-border-dash:#c3cad6;

  /* --- text --- */
  --lp-text:#1F2A44;
  --lp-text-sub:#5a6478;
  --lp-text-muted:#8a93a6;
  --lp-text-lead:#39445e;
  --lp-text-faint:#b5bdca;
  --lp-on-dark:#ffffff;
  --lp-on-dark-body:rgba(255,255,255,.88);
  --lp-on-dark-70:rgba(255,255,255,.72);
  --lp-on-dark-45:rgba(255,255,255,.45);
  --lp-on-dark-card:#242b73;
  --lp-on-dark-border:rgba(255,255,255,.16);

  /* --- brand --- */
  --lp-accent:#06C755;            /* LINEグリーン：装飾・アイコン用 */
  --lp-accent-weak:rgba(6,199,85,.10);
  --lp-accent-weak2:rgba(6,199,85,.13);
  --lp-accent-bar:rgba(6,199,85,.35);
  --lp-marker:rgba(6,199,85,.28);
  --lp-accent-deep:#059a44;
  --lp-navy:#171C61;              /* NYXネイビー */
  --lp-navy-deep:#10143f;
  --lp-navy-weak:rgba(23,28,97,.08);

  /* --- CTA（白文字4.5:1以上を満たす濃緑。WCAG AA 準拠） --- */
  --lp-cta:#018738;
  --lp-cta-hover:#016A2C;
  --lp-cta-text:#ffffff;
  --lp-cta-shadow:rgba(1,135,56,.30);
  --lp-cta-shadow-hover:rgba(1,135,56,.38);

  /* --- LINEトークモック --- */
  --lp-chat-bg:#8CABD8;
  --lp-chat-shop:#ffffff;
  --lp-chat-user:#8de055;

  /* --- shadow --- */
  --lp-shadow-card:0 4px 16px rgba(31,42,68,.06);
  --lp-shadow-soft:0 2px 10px rgba(31,42,68,.04);
  --lp-shadow-float:0 12px 28px rgba(31,42,68,.18);
  --lp-shadow-phone:0 24px 48px rgba(31,42,68,.14);
  --lp-shadow-form:0 10px 30px rgba(31,42,68,.06);
  --lp-shadow-bar:0 -4px 16px rgba(31,42,68,.10);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans JP','Yu Gothic','Hiragino Sans',sans-serif;color:var(--lp-text);background:var(--lp-bg);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{text-decoration:none}
img{max-width:100%}
.container{max-width:1000px;margin:0 auto;padding:0 24px}
.marker{background:linear-gradient(transparent 60%,var(--lp-marker) 60%)}

/* ===== 共通パーツ ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:var(--lp-cta);color:var(--lp-cta-text);font-weight:700;border-radius:999px;padding:14px 36px;font-size:16px;box-shadow:0 6px 18px var(--lp-cta-shadow);transition:background .25s ease,transform .25s ease,box-shadow .25s ease}
.btn:hover{background:var(--lp-cta-hover);transform:translateY(-2px);box-shadow:0 10px 22px var(--lp-cta-shadow-hover)}
.btn.large{padding:18px 56px;font-size:18px;min-height:56px}
.label{display:block;text-align:center;font-size:12px;font-weight:700;letter-spacing:.28em;color:var(--lp-navy);margin-bottom:14px}
h2{font-size:34px;text-align:center;font-weight:900;line-height:1.4;margin-bottom:48px;letter-spacing:.01em}
.sec{padding:100px 0}
.sec.alt{background:var(--lp-bg-alt)}
.card{background:var(--lp-white);border-radius:16px;box-shadow:var(--lp-shadow-card);padding:32px}
.cta-center{text-align:center;margin-top:52px}
.cta-center .micro{display:block;margin-top:12px}
.micro{font-size:12px;color:var(--lp-text-muted)}

/* ふわっと表示（JSで .on 付与） */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.on{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ===== つなぎコピー（オープンループ） ===== */
.bridge{background:var(--lp-bg);padding:34px 0 30px}
.bridge.alt{background:var(--lp-bg)}
.bridge .container{text-align:center}
.bridge p{font-size:19px;font-weight:700;color:var(--lp-text);line-height:1.6}
.bridge-arrow{display:block;color:var(--lp-accent-deep);font-size:24px;font-weight:900;margin-top:8px;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.bridge-arrow{animation:none}}

/* ===== 0. ヘッダー ===== */
header{position:sticky;top:0;z-index:100;background:var(--lp-white);border-bottom:1px solid var(--lp-border-soft);padding:10px 0}
header .container{display:flex;justify-content:space-between;align-items:center;gap:16px}
.logo{display:flex;align-items:center;min-height:44px}
.logo img{height:32px;width:auto;display:block}
.logo small{font-size:12px;font-weight:700;color:var(--lp-text-muted);margin-left:12px;letter-spacing:.05em}
header .btn{padding:11px 26px;font-size:14px;min-height:44px}

/* ===== 1. FV ===== */
.fv{padding:76px 0 40px}
.fv .container{display:flex;gap:40px;align-items:center}
.fv-left{flex:1.5}
.fv-right{flex:1;position:relative}
.fv-eyebrow{display:inline-block;background:var(--lp-navy-weak);color:var(--lp-navy);font-size:13px;font-weight:700;border-radius:999px;padding:6px 16px;margin-bottom:20px;line-height:1.5}
h1{font-size:46px;font-weight:900;line-height:1.34;margin-bottom:22px;letter-spacing:.01em}
.fv-sub{font-size:17px;font-weight:500;color:var(--lp-text-sub);margin-bottom:30px;line-height:1.9}
.fv-left .micro{display:block;margin-top:12px}
.phone{width:280px;margin:0 auto;background:var(--lp-white);border-radius:26px;border:1px solid var(--lp-border-soft);box-shadow:var(--lp-shadow-phone);overflow:hidden}
.phone-head{background:var(--lp-accent);color:var(--lp-on-dark);padding:12px 18px;font-size:13px;font-weight:700}
.chat{background:var(--lp-chat-bg);padding:18px 14px;display:flex;flex-direction:column;gap:10px}
.bubble{max-width:82%;padding:10px 13px;border-radius:14px;font-size:12px;line-height:1.6}
.bubble.shop{background:var(--lp-chat-shop);align-self:flex-start;border-top-left-radius:4px}
.bubble.user{background:var(--lp-chat-user);align-self:flex-end;border-top-right-radius:4px}
.float-graph{position:absolute;left:-28px;bottom:20px;width:186px;background:var(--lp-white);border-radius:16px;box-shadow:var(--lp-shadow-float);padding:16px 18px}
.fg-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700}
.fg-arrow{color:var(--lp-accent-deep);font-size:22px;font-weight:900;line-height:1}
.bars{display:flex;align-items:flex-end;gap:7px;height:80px;margin-top:10px}
.bars i{flex:1;background:var(--lp-accent-bar);border-radius:4px 4px 0 0}
.bars i.last{background:var(--lp-accent)}
.float-mini{position:absolute;right:-12px;top:20px;background:var(--lp-white);border-radius:999px;box-shadow:var(--lp-shadow-float);padding:10px 18px;font-size:13px;font-weight:700}

/* ===== 2. 悩み（Bento） ===== */
.grid2{display:flex;flex-wrap:wrap;gap:20px}
.grid2 .card{width:calc(50% - 10px);display:flex;gap:18px;align-items:flex-start}
.grid2 .card.feature{width:100%;background:var(--lp-navy);color:var(--lp-on-dark);align-items:center}
.grid2 .card.feature .tile{background:var(--lp-on-dark-card)}
.grid2 .card.feature p{color:var(--lp-on-dark)}
.tile{flex-shrink:0;width:52px;height:52px;border-radius:14px;background:var(--lp-accent-weak);display:flex;align-items:center;justify-content:center;font-size:26px}
.grid2 .card p{font-size:16px;font-weight:500;line-height:1.8;padding-top:4px}

/* ===== 3. 原因 ===== */
.center-lead{max-width:760px;margin:0 auto 52px;text-align:center;font-size:16px;line-height:1.95;color:var(--lp-text-lead)}
.center-lead b{color:var(--lp-text)}
.grid4{display:flex;gap:20px}
.grid4 .card{flex:1;text-align:center;padding:30px 14px}
.grid4 .tile{margin:0 auto 14px}
.grid4 h3{font-size:18px;font-weight:700;margin-bottom:6px}
.grid4 p{font-size:13px;color:var(--lp-text-muted);line-height:1.7}

/* ===== 4. Big Idea + 2段階診断 ===== */
.bigidea{text-align:center;font-size:28px;font-weight:900;line-height:1.5;margin-bottom:44px;letter-spacing:.01em}
.flow{display:flex;gap:12px;align-items:stretch}
.arrow{align-self:center;color:var(--lp-border-dash);font-size:22px;font-weight:700}
.plan{flex:1;background:var(--lp-white);border-radius:20px;box-shadow:var(--lp-shadow-card);padding:36px 34px}
.plan.simple{border-top:4px solid var(--lp-accent)}
.plan.detail{border-top:4px solid var(--lp-navy)}
.ptag{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:5px 16px;margin-bottom:14px}
.plan.simple .ptag{background:var(--lp-accent-weak2);color:var(--lp-accent-deep)}
.plan.detail .ptag{background:var(--lp-navy-weak);color:var(--lp-navy)}
.plan h3{font-size:22px;font-weight:900;margin-bottom:14px}
.check{display:flex;gap:14px;align-items:flex-start;padding:9px 0;font-size:16px;font-weight:500;line-height:1.75}
.check svg{flex-shrink:0;margin-top:4px}
.note{text-align:center;font-size:16px;color:var(--lp-text-muted);margin-top:28px;line-height:1.8}

/* ===== 5. 実績（ダークセクション） ===== */
.sec.dark{background:var(--lp-navy);background:linear-gradient(160deg,var(--lp-navy) 0%,var(--lp-navy-deep) 100%);color:var(--lp-on-dark)}
.sec.dark .label{color:var(--lp-accent)}
.sec.dark h2{color:var(--lp-on-dark)}
.stat-hero{text-align:center;margin:8px 0 56px}
.stat-num{font-size:96px;font-weight:900;line-height:1;color:var(--lp-accent);letter-spacing:-.02em}
.stat-num .unit{font-size:48px;margin-left:4px}
.stat-cap{font-size:16px;color:var(--lp-on-dark-body);font-weight:700;margin-top:12px}
.grid3{display:flex;gap:24px}
.grid3.on-dark .dcard{flex:1;text-align:center;background:var(--lp-on-dark-card);border:1px solid var(--lp-on-dark-border);border-radius:16px;padding:34px 26px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.grid3.on-dark .dcard .tile{margin:0 auto 16px;background:rgba(6,199,85,.20)}
.grid3.on-dark .dcard h3{font-size:19px;font-weight:900;margin-bottom:12px;color:#fff}
.grid3.on-dark .dcard p{font-size:16px;color:#eef1fb;line-height:1.9}

/* ===== 6. FAQ ===== */
.qa{background:var(--lp-white);border-radius:12px;padding:22px 28px;margin:0 auto 12px;max-width:780px;box-shadow:var(--lp-shadow-soft)}
.q{font-weight:700;display:flex;gap:12px;font-size:16px}
.q span{color:var(--lp-accent-deep);font-weight:900}
.a{margin-top:8px;color:var(--lp-text-sub);font-size:16px;display:flex;gap:12px;line-height:1.85}
.a span{color:var(--lp-text-faint);font-weight:900}

/* ===== 7. 損失回避クロージング ===== */
.sec.closing{background:var(--lp-bg-alt);text-align:center}
.closing-h{margin-bottom:24px}
.closing-lead{max-width:680px;margin:0 auto;font-size:17px;color:var(--lp-text-sub);line-height:1.95}

/* ===== 8. フォーム ===== */
#form{scroll-margin-top:90px}
.form-lead{text-align:center;color:var(--lp-text-sub);font-size:15px;line-height:1.8;margin:-30px auto 34px;max-width:640px}
.form-card{max-width:780px;margin:0 auto;background:var(--lp-white);border:1px solid var(--lp-border);border-radius:20px;padding:44px;box-shadow:var(--lp-shadow-form)}
.hs-form-frame{display:block;min-height:420px;width:100%}
.hs-form-frame:empty::before{content:"フォームを読み込んでいます…";display:flex;align-items:center;justify-content:center;min-height:420px;color:var(--lp-text-muted);font-size:14px}

/* ===== 9. フッター ===== */
footer{background:var(--lp-navy);color:var(--lp-on-dark);padding:48px 0 40px}
footer .container{text-align:center}
.flogo{height:36px;width:auto;margin-bottom:14px}
footer nav{display:flex;gap:20px;justify-content:center;margin-bottom:10px;flex-wrap:wrap}
footer nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--lp-on-dark-70);font-size:14px;transition:color .2s}
footer nav a:hover{color:var(--lp-on-dark)}
footer .copy{font-size:12px;color:var(--lp-on-dark-45)}

/* ===== スマホ用 追従CTAバー ===== */
.sticky-cta{display:none}

/* ===== モバイル ===== */
@media (max-width:640px){
  .sec{padding:60px 0}
  h1{font-size:29px;line-height:1.4}
  h2{font-size:24px;margin-bottom:32px}
  .fv{padding:40px 0 32px}
  .fv .container{flex-direction:column;gap:40px}
  .bridge{padding:26px 0 22px}
  .bridge p{font-size:16px}
  .bigidea{font-size:22px;margin-bottom:32px}
  .grid2 .card{width:100%}
  .grid4{flex-wrap:wrap}
  .grid4 .card{flex:none;width:calc(50% - 10px)}
  .grid3,.flow{flex-direction:column}
  .arrow{transform:rotate(90deg);text-align:center}
  .stat-num{font-size:74px}
  .stat-num .unit{font-size:36px}
  .form-card{padding:28px 20px}
  footer{padding:36px 0 28px}
  header{padding:8px 0}
  header .btn{padding:10px 18px;font-size:13px;min-height:44px}
  .logo small{display:none}
  .float-graph{left:0}
  .float-mini{right:0}
  body{padding-bottom:78px}
  .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--lp-white);box-shadow:var(--lp-shadow-bar);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .sticky-cta .btn{width:100%;font-size:16px;padding:14px 20px}
}