/* =========================================================
   Inyo Studio LP — v4 デザイン（Stripe の設計DNAを実値で踏襲）
   原典：stripe.com（プロの手触りの最高峰）
   実トークン：ink #0A2540 / body #425466 / soft #F6F9FC / accent #635BFF（紫1点）
   哲学：ほぼモノクロ＋電光バイオレット1点／軽いタイポ＋強い負の字間／斜めパステルグラデ／多層の影
   ※色・値はStripe踏襲、文章・構成はInyoオリジナル
   ========================================================= */
:root{
  --ink:#0a2540; --body:#425466; --sub:#697386;
  --bg:#ffffff; --soft:#f6f9fc; --soft2:#eef2f7;
  --line:#e3e8ee; --line2:#cfd7e3;
  --accent:#635bff; --accent-d:#5546e8; --accent-soft:#f5f3ff; --accent-ink:#4338ca;
  --maxw:1080px;
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --display:"Hanken Grotesk","Noto Sans JP",sans-serif;
  --num:"Hanken Grotesk","Noto Sans JP",sans-serif;
  /* Stripe風の多層シャドウ */
  --sh:0 2px 5px -1px rgba(50,50,93,.18),0 1px 3px -1px rgba(0,0,0,.15);
  --sh-md:0 13px 27px -5px rgba(50,50,93,.20),0 8px 16px -8px rgba(0,0,0,.22);
  --sh-lg:0 30px 60px -12px rgba(50,50,93,.22),0 18px 36px -18px rgba(0,0,0,.25);
  --sh-sm:0 1px 3px rgba(50,50,93,.12),0 1px 2px rgba(0,0,0,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--jp);color:var(--body);background:var(--bg);line-height:1.78;font-weight:400;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.sec-title,.hero h1{font-family:var(--display);color:var(--ink);overflow-wrap:anywhere;word-break:normal;text-wrap:balance}
.sec-lead,.hero .lead,.g-title,.why-line,.eq-box .eq-main,.layer-card .lc-title{text-wrap:balance}
p,li,.faq-a,.g-text,.note{text-wrap:pretty}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2}
a{color:inherit;text-decoration:none}
.btn:focus-visible,.btn-sm:focus-visible,.faq-q:focus-visible,.car-btn:focus-visible,.car-dots button:focus-visible,.logo:focus-visible,.float-cta:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
strong{font-weight:600;color:var(--ink)}
.mark{background:linear-gradient(90deg,#635bff,#0a2540);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500}
.accent{color:var(--accent)}
.num{font-family:var(--num);font-weight:600;line-height:1;font-feature-settings:"tnum" 1}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s}

/* ===== ボタン：紫のピル・コンパクト・多層の影（Stripe流） ===== */
.btn{position:relative;display:inline-block;white-space:nowrap;background:var(--accent);color:#fff;font-family:var(--display);font-weight:600;
  border:none;border-radius:999px;padding:13px 28px;font-size:16px;letter-spacing:.01em;
  box-shadow:0 2px 5px -1px rgba(50,50,93,.25),0 1px 3px -1px rgba(0,0,0,.18);
  transition:background .15s,transform .15s,box-shadow .15s;cursor:pointer}
.btn:hover{background:var(--accent-d);transform:translateY(-1px);box-shadow:0 6px 16px -2px rgba(99,91,255,.4)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:9px 18px;font-size:14px;box-shadow:var(--sh-sm)}
.btn-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.btn-pill{background:var(--accent-soft);color:var(--accent);border:1px solid #e0ddff;font-weight:600;font-size:13px;padding:6px 15px;border-radius:999px}
.btn-pill::after{display:none}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:var(--display);font-weight:700;font-size:21px;color:var(--ink);letter-spacing:-.01em}
.logo span{color:var(--accent)}

/* ===== hero：白＋斜めパステル・メッシュグラデ（Stripe signature）＋ダーク文字 ===== */
.hero{position:relative;overflow:hidden;padding:72px 0 78px;text-align:center;background:#fff}
.hero-bg{display:none}
.hero::before{content:"";position:absolute;left:-10%;right:-10%;top:-180px;height:680px;z-index:0;transform:skewY(-7deg);transform-origin:top left;
  background:
    radial-gradient(45% 60% at 12% 22%,#ffe1cc 0,transparent 62%),
    radial-gradient(40% 55% at 44% 8%,#e6d4ff 0,transparent 60%),
    radial-gradient(45% 60% at 82% 18%,#ffd2ea 0,transparent 62%),
    radial-gradient(55% 70% at 68% 46%,#c3c8ff 0,transparent 62%),
    radial-gradient(40% 55% at 26% 60%,#d6f0ff 0,transparent 60%);
  opacity:.92}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#fff 92%);z-index:0}
.hero .wrap{z-index:3}.hero .lines{display:none}
.kicker{display:inline-block;background:rgba(255,255,255,.7);color:var(--accent);font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.01em;padding:6px 15px;border-radius:999px;margin-bottom:24px;border:1px solid #e0ddff;backdrop-filter:blur(4px)}
.hero h1{font-size:54px;line-height:1.12;font-weight:400;color:var(--ink);letter-spacing:-.035em}
.hero .lead{color:var(--body);font-size:19px;margin:24px auto 32px;max-width:620px;font-weight:400;line-height:1.7}
.hero .lead strong{color:var(--ink);font-weight:600}
.micro{color:var(--sub);font-size:13px;margin-top:6px}

/* trust badges */
.badges{display:flex;justify-content:center;gap:18px;margin:48px auto 0;flex-wrap:wrap;position:relative;z-index:5}
.badge{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 26px;min-width:190px;box-shadow:var(--sh-md);transition:transform .2s,box-shadow .2s}
.badge:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.badge .b-num{font-family:var(--num);font-weight:600;font-size:34px;color:var(--accent);line-height:1.1;letter-spacing:-.02em}
.badge .b-num small{font-size:16px}
.badge .b-label{font-size:12.5px;color:var(--sub);margin-top:6px;font-weight:500;line-height:1.55}

/* sections */
.sec{padding:66px 0;position:relative}
.sec-soft{background:var(--soft)}
.sec-alt{background:var(--soft)}
.sec-soft.pull{padding-top:84px}
.sec-title{text-align:center;font-size:38px;font-weight:400;color:var(--ink);margin-bottom:16px;letter-spacing:-.03em;line-height:1.2}
.sec-lead{text-align:center;color:var(--sub);margin-bottom:40px;font-weight:400;font-size:18px;max-width:660px;margin-left:auto;margin-right:auto;line-height:1.65}

/* ===== カード：白・細い境界・多層の柔らかい影 ===== */
.cards{display:grid;gap:26px}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px 30px;box-shadow:var(--sh);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.card p{color:var(--sub);font-weight:400}
.card.feature{border-top:none}
.card.feature h3{font-size:19px;color:var(--ink);margin-bottom:12px;display:flex;align-items:center;gap:13px;font-weight:600;letter-spacing:-.01em}
.card.feature .fn{font-family:var(--num);font-weight:600;font-size:30px;color:var(--accent);flex:none;letter-spacing:-.02em}
.card.feature .basis{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);padding:5px 12px;border-radius:7px}
.card.feature .basis a{text-decoration:underline}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px 24px 26px;box-shadow:var(--sh);overflow:hidden;transition:transform .2s,box-shadow .2s}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.step .sn{position:absolute;top:2px;right:14px;font-family:var(--num);font-weight:600;font-size:54px;color:var(--soft2);line-height:1;z-index:0;letter-spacing:-.03em}
.step h3{position:relative;font-size:17px;color:var(--ink);margin:0 0 9px;z-index:1;font-weight:600}
.step p{position:relative;color:var(--sub);font-size:14px;font-weight:400;z-index:1}
.note{color:var(--sub);font-size:13px;text-align:center;margin-top:30px}

/* ===== 比較表：クリーン ===== */
.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh-md)}
.compare th,.compare td{padding:18px 16px;text-align:center;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.compare thead th{background:var(--ink);color:#fff;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.01em}
.compare thead th.hot{background:var(--accent)}
.compare tbody th{text-align:left;font-weight:600;color:var(--ink);background:var(--soft);width:34%;border-right:1px solid var(--line)}
.compare td.ours,.compare td.big{background:var(--accent-soft)}
.compare td.ours{font-weight:700;color:var(--accent-ink)}
.compare tr:last-child td,.compare tr:last-child th{border-bottom:none}
.price-row td{font-family:var(--num);font-weight:600;font-size:18px;letter-spacing:-.01em}
.price-row .big{font-size:30px;color:var(--accent)}

/* profile */
.profile{position:relative;max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:40px 42px;box-shadow:var(--sh-md);overflow:hidden}
.profile::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--accent)}
.profile h3{color:var(--ink);font-size:21px;margin-bottom:4px;font-weight:600}
.profile .role{color:var(--accent);font-weight:600;font-size:14px;margin-bottom:16px}
.profile ul{list-style:none;margin:14px 0}
.profile li{padding:9px 0 9px 28px;position:relative;color:var(--sub);font-weight:400}
.profile li::before{content:"";position:absolute;left:3px;top:16px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.profile .attn{font-size:12px;color:var(--sub);margin-top:16px;border-top:1px solid var(--line);padding-top:13px;line-height:1.7}
.why-line{text-align:center;font-size:25px;font-weight:400;color:var(--ink);margin-top:46px;letter-spacing:-.02em}

/* ===== FAQ アコーディオン ===== */
.faq{max-width:760px;margin:0 auto}
.faq-item{border:1px solid var(--line);border-radius:14px;margin-bottom:14px;overflow:hidden;background:#fff;box-shadow:var(--sh-sm);transition:box-shadow .2s}
.faq-item.open{box-shadow:var(--sh-md)}
.faq-q{width:100%;text-align:left;background:none;border:none;color:var(--ink);font-family:var(--display);font-size:16px;font-weight:600;padding:20px 56px 20px 24px;cursor:pointer;position:relative;letter-spacing:-.01em}
.faq-q::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);width:26px;height:26px;display:grid;place-items:center;background:var(--accent-soft);border-radius:50%;color:var(--accent);font-weight:600;font-size:18px;transition:transform .25s,background .2s,color .2s}
.faq-item.open .faq-q::after{transform:translateY(-50%) rotate(135deg);background:var(--accent);color:#fff}
.faq-a{max-height:0;overflow:hidden;color:var(--sub);padding:0 24px;transition:max-height .3s,padding .3s;font-weight:400}
.faq-item.open .faq-a{max-height:340px;padding:0 24px 22px}

/* ===== CTA：濃紺 #0A2540 ＋ 斜めグラデの気配 ===== */
.cta{position:relative;overflow:hidden;margin-top:0;color:#fff;text-align:center;padding:74px 0;background:var(--ink)}
.cta::before{content:"";position:absolute;left:-10%;right:-10%;top:-200px;height:520px;transform:skewY(-7deg);
  background:radial-gradient(40% 60% at 30% 40%,rgba(99,91,255,.5),transparent 60%),radial-gradient(40% 60% at 75% 30%,rgba(255,140,180,.25),transparent 60%);opacity:.5}
.cta h2{font-size:38px;font-weight:400;color:#fff;margin-bottom:14px;letter-spacing:-.03em;position:relative}
.cta p{color:#adb8c8;margin-bottom:6px;font-weight:400;position:relative}
.form{position:relative;max-width:520px;margin:30px auto 0;background:#fff;border-radius:18px;padding:34px;text-align:left;box-shadow:var(--sh-lg)}
.form label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:15px 0 6px}
.form input,.form textarea,.form select{width:100%;border:1px solid var(--line2);border-radius:8px;padding:13px 14px;font-family:inherit;font-size:15px;color:var(--body);background:#fff;transition:border-color .15s,box-shadow .15s}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,91,255,.15)}
.form .btn{width:100%;margin-top:24px}
.form .formnote{font-size:12px;color:var(--sub);text-align:center;margin-top:13px;font-weight:400}
.cta-backup{margin-top:20px;font-size:13px;color:#8a97a8;position:relative}

/* footer */
.site-footer{background:var(--ink);color:#8a97a8;padding:42px 0;text-align:center;border-top:1px solid rgba(255,255,255,.08)}
.site-footer .logo{font-size:20px;color:#fff}
.site-footer .logo span{color:var(--accent)}
.site-footer p{font-size:13px;margin-top:8px}

/* floating */
.float-cta{position:fixed;right:20px;bottom:20px;z-index:60;background:var(--accent);color:#fff;font-family:var(--display);font-weight:600;padding:13px 24px;border-radius:999px;box-shadow:0 8px 22px rgba(99,91,255,.4);font-size:15px;opacity:0;transform:translateY(20px);transition:.25s;pointer-events:none}
.float-cta.show{opacity:1;transform:translateY(0);pointer-events:auto}
.float-cta:hover{background:var(--accent-d);transform:translateY(-2px)}

/* eyebrow */
.eyebrow{display:block;text-align:center;font-family:var(--display);font-weight:600;letter-spacing:.14em;font-size:13px;color:var(--accent);margin-bottom:14px;text-transform:uppercase}
.eyebrow.on-dark{color:#a99fff}

.sec-title{position:relative}
.deco{overflow:hidden}

/* 仕組み図解（数式型） */
.eq{display:flex;align-items:stretch;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:8px}
.eq-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 26px;box-shadow:var(--sh);text-align:center;min-width:200px;display:flex;flex-direction:column;justify-content:center}
.eq-box .eq-cap{font-size:13px;color:var(--sub);font-weight:500}
.eq-box .eq-main{font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink);margin-top:6px;letter-spacing:-.01em}
.eq-box.res{background:var(--ink);border-color:var(--ink);color:#fff}
.eq-box.res .eq-cap{color:#9fb0c4}.eq-box.res .eq-main{color:#fff}
.eq-box.res .eq-main b{color:#a99fff;font-weight:600}
.eq-op{display:flex;align-items:center;font-family:var(--num);font-weight:500;font-size:30px;color:var(--accent)}

/* 約束帯（淡背景・クリーン） */
.promise{position:relative;background:var(--soft);padding:66px 0;border-top:1px solid var(--line)}
.promise .sec-title{color:var(--ink)}
.promise .eyebrow{color:var(--accent)}
.promise-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:780px;margin:0 auto}
.promise-item{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:var(--sh-sm)}
.promise-item .pc{flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;font-weight:600;color:var(--accent);font-size:14px}
.promise-item h4{font-size:16px;margin-bottom:4px;color:var(--ink);font-weight:600}
.promise-item p{color:var(--sub);font-size:14px;font-weight:400}

/* おすすめリボン */
.compare thead th.hot{position:relative;padding-top:30px}
.compare thead th.hot .rib{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:#fff;color:var(--accent);font-size:11px;font-weight:600;padding:2px 13px;border-radius:999px;white-space:nowrap}

.br-sp{display:none}

/* 写真レイアウト */
.hero-figure{max-width:760px;margin:46px auto 0;position:relative}
.hero-figure img{width:100%;border-radius:16px;box-shadow:var(--sh-lg);display:block}
.hero-figure .cap{position:absolute;right:-8px;bottom:-12px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-size:12px;font-weight:600;color:var(--ink);box-shadow:var(--sh)}
.media-row{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;max-width:980px;margin:0 auto}
.media-row.rev .m-fig{order:2}
.m-fig{position:relative}
.m-fig img{width:100%;height:auto;border-radius:16px;box-shadow:var(--sh-md);display:block}
.m-fig .cap{position:absolute;left:-10px;bottom:-12px;background:var(--ink);color:#fff;border-radius:8px;padding:8px 13px;font-size:12px;font-weight:600}
.m-text h3{font-size:25px;color:var(--ink);margin-bottom:15px;font-weight:500;line-height:1.4;letter-spacing:-.02em}
.m-text p{color:var(--sub);font-weight:400}
.m-text .chk{list-style:none;margin-top:18px}
.m-text .chk li{padding:9px 0 9px 30px;position:relative;color:var(--body);font-weight:500}
.m-text .chk li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.m-text .chk.x-list li{padding:15px 16px 15px 44px;background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:13px;box-shadow:var(--sh-sm);color:var(--sub);font-weight:400}
.m-text .chk.x-list li strong{color:var(--ink)}
.m-text .chk.x-list li::before{content:"";left:18px;top:21px;width:8px;height:8px;border-radius:50%;background:#cdd6e2}

/* グラデ文字（見出しのキーフレーズ）・手描き廃止 */
.grad{background:linear-gradient(90deg,#635bff,#0a2540);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}
.lines,.hatch,.diagline,.orb{display:none}
.circled{font-weight:600;color:var(--accent)}
.tilt{transition:transform .2s ease,box-shadow .2s}

/* ヒーローの「AIの回答」モック（白カード／多層の影／Stripe調） */
.ai-mock{max-width:460px;margin:50px auto 0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-lg);padding:22px 24px;text-align:left;will-change:transform}
.ai-mock-q{font-family:var(--display);font-weight:500;color:var(--ink);font-size:15px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:12px 15px;line-height:1.6;letter-spacing:-.01em}
.ai-mock-q b{color:var(--accent)}
.ai-mock-a{margin-top:16px}
.ai-mock-label{display:inline-block;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--sub);margin-bottom:10px;text-transform:uppercase}
.ai-mock-a ul{list-style:none;margin:0}
.ai-mock-a li{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:9px;font-weight:500;font-size:14.5px;margin-bottom:8px}
.ai-mock-a li::before{flex:none;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;font-size:12px;font-weight:700}
.ai-mock-a li.hit{color:var(--ink);background:var(--soft)}
.ai-mock-a li.hit::before{content:"✓";background:#e7e4ff;color:var(--accent)}
.ai-mock-a li.miss{color:#e5484d;background:#fff1f1;border:1px dashed #f0a8a8;font-weight:700}
.ai-mock-a li.miss::before{content:"✕";background:#ffe0e0;color:#e5484d}
.ai-mock-cap{margin-top:14px;font-size:12px;color:var(--sub);text-align:center}

/* ===== SEMRUSH型 2カラムヒーロー（構造の踏襲・中身はInyoオリジナル） ===== */
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;text-align:left}
.hero-grid h1{font-size:46px;line-height:1.18;letter-spacing:-.035em;margin:0;font-weight:400}
.hero-grid .lead{margin:14px 0 0;max-width:540px}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:20px}
.hero-tags .tag{background:#fff;color:var(--sub);border:1px solid var(--line2);font-family:var(--display);font-weight:600;font-size:12.5px;padding:5px 12px;border-radius:7px}
.hero-tags .hero-tags-label{font-size:13px;color:var(--sub);font-weight:600;margin-left:4px}
.hero-badges{display:flex;gap:24px;margin:16px 0 4px;flex-wrap:wrap}
.hero-badges .hbadge{display:flex;flex-direction:column;gap:2px}
.hero-badges .hb-num{font-family:var(--num);font-weight:600;font-size:23px;color:var(--accent);letter-spacing:-.02em;line-height:1.1}
.hero-foot{font-size:10.5px;color:var(--sub);margin:0 0 14px;font-weight:500}
.hero-badges .hb-num small{font-size:13px;font-weight:600}
.hero-badges .hb-label{font-size:11.5px;color:var(--sub);font-weight:500;line-height:1.4}
.hero-form{display:flex;gap:12px;max-width:560px;margin:16px 0 8px}
.pain-acc{max-width:none;margin:0}
.pain-acc .faq-item{margin-bottom:10px}
.hero-form .btn{white-space:nowrap;padding:17px 34px;font-size:17px;box-shadow:0 6px 20px rgba(99,91,255,.45)}
.hero-form .btn:hover{box-shadow:0 10px 28px rgba(99,91,255,.5)}
.hero-form input{flex:1;min-width:0;border:1px solid var(--line2);border-radius:999px;padding:14px 20px;font-size:15px;font-family:inherit;color:var(--body);background:#fff;transition:border-color .15s,box-shadow .15s}
.hero-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,91,255,.15)}
.hero .hero-grid .micro{margin-top:0;display:block}
.hero-visual{position:relative}
.hero-visual .ai-mock{margin:0}
.score-chip{position:absolute;left:-14px;bottom:-42px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-md);padding:12px 16px;display:flex;flex-direction:column;gap:2px;will-change:transform}
.score-chip .sc-top{font-size:13px;color:var(--ink);font-weight:600}
.score-chip b{font-family:var(--num);font-size:20px;color:var(--accent);letter-spacing:-.01em}
.score-chip .sc-sub{font-size:11px;color:var(--sub);font-weight:500}

/* ===== 保証セクション（営業5ステップの⑤＝意思決定の勇気づけ／金色で別格に目立たせる） ===== */
.guarantee-sec{background:var(--soft)}
.guarantee{position:relative;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;max-width:940px;margin:0 auto;background:#fff;border:1px solid #ecd9a8;border-radius:20px;padding:42px 46px;box-shadow:0 22px 54px rgba(180,140,40,.16)}
.guarantee::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(244,205,107,.10),transparent 42%);pointer-events:none}
.g-seal{flex:none;width:128px;height:128px;border-radius:50%;background:linear-gradient(150deg,#f4cd6b,#d99b2b);box-shadow:0 10px 24px rgba(199,140,30,.42),inset 0 0 0 4px rgba(255,255,255,.4);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;color:#5a3d00;font-family:var(--display);line-height:1.05;position:relative}
.g-seal .g-seal-top{font-size:15px;font-weight:700}
.g-seal .g-seal-main{font-size:32px;font-weight:800;letter-spacing:-.01em}
.g-seal .g-seal-sub{font-size:13px;font-weight:700;letter-spacing:.24em;padding-left:.24em}
.g-body .eyebrow{text-align:left;color:#c8901f}
.g-title{font-size:30px;font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1.3;margin-bottom:12px}
.g-title .g-hl{background:linear-gradient(transparent 58%,#fbe3a0 58%);font-weight:700;padding:0 .08em}
.g-text{color:var(--body);font-size:16px;margin-bottom:10px}
.g-text strong{color:var(--ink)}
.g-cond{list-style:none;margin:0 0 14px}
.g-cond li{position:relative;padding:6px 0 6px 26px;color:var(--body);font-size:14.5px;font-weight:500}
.g-cond li::before{content:"✓";position:absolute;left:0;top:6px;color:#c8901f;font-weight:800}
.g-cond li b{color:var(--ink);font-weight:700}

/* ===== 横流しマーキー（自動エフェクト：AIに聞かれてる質問が流れる帯） ===== */
.marquee-band{background:var(--ink);color:#fff;padding:24px 0;overflow:hidden}
.marquee-band .mq-label{text-align:center;font-size:13px;color:#9fb0c4;margin-bottom:16px;font-family:var(--display);font-weight:600;letter-spacing:.04em}
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex;gap:14px;width:max-content;animation:mq 36s linear infinite}
.mq-track span{flex:none;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:10px 20px;font-size:14px;color:#dbe4f0;white-space:nowrap;font-weight:500}
.mq-track span b{color:#a99fff;font-weight:600}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mq-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}

/* ===== AI評価軸：4層カード（PCは4列・SPは横スワイプ） ===== */
.layer-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.layer-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 20px;box-shadow:var(--sh);transition:transform .2s,box-shadow .2s}
.layer-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.layer-card .lc-no{font-family:var(--num);font-weight:700;color:var(--accent);font-size:20px;letter-spacing:-.02em}
.layer-card .lc-title{font-size:18px;font-weight:600;color:var(--ink);margin:2px 0 14px;letter-spacing:-.01em}
.layer-card .lc-what{font-size:13px;color:var(--sub);margin:0 0 12px;line-height:1.6}
.layer-card .lc-what b{display:block;font-size:10.5px;letter-spacing:.08em;color:var(--accent-ink);margin-bottom:3px;font-weight:700}
.layer-card .lc-why{font-size:13.5px;color:var(--ink);font-weight:600;background:var(--accent-soft);border-radius:8px;padding:11px 13px;line-height:1.55;margin:0}
.g-note{color:var(--sub);font-size:12.5px;line-height:1.75;margin-bottom:22px}
.g-btn{background:#eaad33;color:#2a1c00;box-shadow:0 6px 18px rgba(199,140,30,.42)}
.g-btn:hover{background:#d99b2b;color:#2a1c00;box-shadow:0 10px 26px rgba(199,140,30,.5)}
/* ヒーロー用の短縮版・金色の返金保証バッジ */
.hero-guarantee{display:inline-flex;align-items:center;gap:10px;margin-top:16px;background:linear-gradient(180deg,#fffaf0,#fcefd2);border:1px solid #ecd9a8;border-radius:999px;padding:6px 16px 6px 7px;box-shadow:0 4px 14px rgba(199,140,30,.18)}
.hero-guarantee .hg-seal{flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(150deg,#f4cd6b,#d99b2b);color:#5a3d00;font-family:var(--display);font-weight:800;font-size:10.5px;display:grid;place-items:center;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.hero-guarantee .hg-text{font-size:13px;color:#7a5a14;font-weight:600}
.hero-guarantee .hg-text b{color:#5a3d00;font-weight:700}
/* トップのキャンペーンバナー（ダークネイビー×シャンパンゴールド＝高級感） */
.topbar{display:flex;align-items:center;justify-content:center;gap:14px;background:#0a2540;color:#e9d7a6;padding:9px 20px;font-size:13.5px;font-weight:600;letter-spacing:.01em;position:relative;text-align:center}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#f4cd6b,transparent);opacity:.7}
.topbar .tb-seal{flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(150deg,#f4cd6b,#d99b2b);color:#3a2700;font-family:var(--display);font-weight:800;font-size:9.5px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.topbar .tb-text b{color:#f7d77a;font-weight:700}
.topbar .tb-cta{flex:none;color:#fff;font-weight:700;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:1px}
.topbar:hover .tb-cta{border-bottom-color:#fff}
@media(max-width:600px){.topbar{font-size:11.5px;gap:9px;padding:8px 12px}.topbar .tb-cta{display:none}}
@media(max-width:760px){
  .guarantee{grid-template-columns:1fr;gap:24px;padding:32px 26px;text-align:center}
  .g-seal{margin:0 auto;width:112px;height:112px}
  .g-title{font-size:23px}
  .g-body .eyebrow{text-align:center}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero-grid h1{font-size:33px}
  .hero-visual{margin-top:4px}
  .hero-visual{text-align:center}
  .hero-visual .ai-mock{margin:0 auto}
  .score-chip{position:static;display:inline-flex;margin:14px auto 0}
  .hero-form{max-width:none}
}
@media(max-width:560px){
  .hero-form{flex-direction:column}.hero-form .btn{width:100%}
  .hero-badges{gap:18px}
}

/* ===== カルーセル ===== */
.carousel{position:relative;max-width:980px;margin:46px auto 0}
.carousel-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 4px 24px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-md);overflow:hidden}
@media(min-width:720px){.slide{flex-basis:calc(50% - 12px)}}
.slide img{width:100%;height:300px;object-fit:cover;display:block;border-bottom:1px solid var(--line)}
.slide figcaption{padding:16px 20px;font-family:var(--display);font-weight:600;color:var(--ink);font-size:14px}
.car-btn{position:absolute;top:42%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--accent);font-size:22px;font-weight:600;line-height:1;cursor:pointer;box-shadow:var(--sh-md);display:grid;place-items:center;z-index:3;transition:transform .12s,box-shadow .15s}
.car-btn:hover{transform:translateY(-50%) scale(1.06);box-shadow:var(--sh-lg)}
.car-btn:active{transform:translateY(-50%) scale(.96)}
.car-btn.prev{left:-12px}.car-btn.next{right:-12px}
.car-dots{display:flex;justify-content:center;gap:10px;margin-top:6px}
.car-dots button{width:8px;height:8px;border-radius:50%;border:none;background:var(--line2);cursor:pointer;padding:0;transition:background .15s,transform .15s}
.car-dots button.on{background:var(--accent);transform:scale(1.4)}

@media(max-width:820px){
  .br-pc{display:none}.br-sp{display:inline}
  .btn{font-size:15px;padding:12px 22px}
  .media-row{grid-template-columns:1fr;gap:26px}.media-row.rev .m-fig{order:0}
  .hero-figure{margin-top:32px}.m-text h3{font-size:21px}
  .eq-op{font-size:26px}.eq-box{min-width:0;width:100%}
  .promise-grid{grid-template-columns:1fr}
  .hero{padding:60px 0 72px}.hero h1{font-size:33px;line-height:1.2}.hero .lead{font-size:16.5px}
  .hero::before{top:-120px;height:520px}
  .sec{padding:60px 0}.sec-title{font-size:28px}
  .cards-3,.cards-2,.steps{grid-template-columns:1fr}
  .compare{font-size:11.5px}.compare th,.compare td{padding:11px 6px}
  .compare thead th{font-size:11px}.compare thead th.hot{padding-top:26px}
  .compare thead th.hot .rib{font-size:9.5px;padding:2px 9px;top:6px}
  .price-row td{font-size:12.5px}.price-row .big{font-size:15px}
  .cta{padding:66px 0}.cta h2{font-size:28px}.why-line{font-size:21px}
  .car-btn{width:40px;height:40px;font-size:20px}.car-btn.prev{left:-2px}.car-btn.next{right:-2px}
  .slide img{height:210px}
}
@media(max-width:560px){
  .table-scroll{overflow:visible}
  .compare{display:block;width:100%;box-shadow:none;background:transparent;border:none;border-radius:0;table-layout:auto}
  .compare colgroup,.compare thead{display:none}
  .compare tbody,.compare tr,.compare th,.compare td{display:block;width:auto}
  .compare tbody tr{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-sm);margin-bottom:14px;padding:16px 18px}
  .compare tbody th{background:none;color:var(--ink);font-size:15px;padding:0 0 8px;border:none}
  .compare tbody td{display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:right;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
  .compare tbody td:last-child{border-bottom:none}
  .compare tbody td::before{content:attr(data-label);font-weight:600;color:var(--sub);font-size:12px;text-align:left;white-space:nowrap}
  .compare tbody td.ours,.compare tbody td.big{color:var(--accent);font-weight:600}
  .compare tbody td.ours::before,.compare tbody td.big::before{color:var(--ink)}
  .price-row td.big{font-size:19px}
}
@media(max-width:400px){.hero h1{font-size:29px}.sec-title{font-size:25px}.btn{font-size:14px;padding:12px 18px}}

/* ===== モバイル最適化：横スワイプ＆凝縮で縦長を防ぐ ===== */
@media(max-width:820px){
  .sec{padding:48px 0}
  .sec-lead{margin-bottom:30px}
  /* 4ステップ・特徴カード・4層をモバイルでは横スワイプに（縦積みの長さを解消・横の動きで見せる） */
  .steps,.cards-2,.cards-3,.layer-cards{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 2px 12px;margin:0 -2px;-webkit-mask:linear-gradient(90deg,#000 92%,transparent);mask:linear-gradient(90deg,#000 92%,transparent)}
  .steps::-webkit-scrollbar,.cards-2::-webkit-scrollbar,.cards-3::-webkit-scrollbar,.layer-cards::-webkit-scrollbar{display:none}
  .steps>*,.cards-2>*,.cards-3>*,.layer-cards>*{flex:0 0 82%;scroll-snap-align:center}
  /* ≠の方程式を横一列に圧縮 */
  .eq{flex-wrap:nowrap;gap:8px}
  .eq-box{width:auto;min-width:0;flex:1;padding:16px 10px}
  .eq-box .eq-cap{font-size:10.5px}
  .eq-box .eq-main{font-size:13.5px}
  .eq-op{font-size:20px}
}
/* 実測表：モバイルは縦積みにせず横スクロール＋先頭列固定でコンパクトに */
@media(max-width:560px){
  .matrix-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .matrix-scroll .compare.nostack{display:table;width:max-content;min-width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-md);font-size:11.5px}
  .matrix-scroll .compare.nostack thead{display:table-header-group}
  .matrix-scroll .compare.nostack tbody{display:table-row-group}
  .matrix-scroll .compare.nostack tr{display:table-row;background:none;border:none;box-shadow:none;margin:0;padding:0}
  .matrix-scroll .compare.nostack th,.matrix-scroll .compare.nostack td{display:table-cell;padding:8px 10px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
  .matrix-scroll .compare.nostack thead th{font-size:11px;padding:9px 10px}
  /* ブランド列を左に固定して、横スクロール中も見えるように */
  .matrix-scroll .compare.nostack tbody th{position:sticky;left:0;z-index:2;background:var(--soft);text-align:left;min-width:92px;box-shadow:1px 0 0 var(--line)}
  .matrix-scroll .compare.nostack thead th:first-child{position:sticky;left:0;z-index:3;min-width:92px}
  .matrix-scroll .compare.nostack td::before{content:none}
}

/* ===== 料金カルーセル（PC/SP共通・横流し／LP制作を金色で別格に） ===== */
.price-cards{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px 2px 16px;-webkit-mask:linear-gradient(90deg,#000 94%,transparent);mask:linear-gradient(90deg,#000 94%,transparent)}
.price-cards::-webkit-scrollbar{display:none}
.price-card{flex:0 0 290px;scroll-snap-align:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;box-shadow:var(--sh);display:flex;flex-direction:column}
.price-card .pc-item{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:14px;letter-spacing:-.01em}
.price-card .pc-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;font-size:13.5px}
.price-card .pc-row .pc-k{color:var(--sub);flex:none}
.price-card .pc-old{border-bottom:1px dashed var(--line)}
.price-card .pc-old .pc-v{color:var(--sub)}
.price-card.featured .pc-old .pc-v{text-decoration:line-through}
.price-card .pc-ours .pc-v{color:var(--accent-ink);font-weight:700;text-align:right}
.price-card .pc-price{font-family:var(--num);font-size:20px;letter-spacing:-.01em}
/* LP制作＝一番お得を金色で強調（きらびやか） */
.price-card.featured{flex-basis:312px;border:2px solid #e6b34d;background:linear-gradient(180deg,#fffaf0,#fff 60%);box-shadow:0 18px 44px rgba(199,140,30,.24);position:relative;overflow:hidden}
.price-card.featured::after{content:"";position:absolute;top:-40%;right:-30%;width:180px;height:180px;background:radial-gradient(circle,rgba(244,205,107,.35),transparent 70%);pointer-events:none}
.price-card.featured .pc-tag{align-self:flex-start;display:inline-block;background:linear-gradient(150deg,#f4cd6b,#d99b2b);color:#3a2700;font-family:var(--display);font-weight:800;font-size:11px;padding:5px 14px;border-radius:999px;margin-bottom:14px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.price-card.featured .pc-ours .pc-v{color:#b5790f}
.price-card.featured .pc-price{font-size:27px}
.pc-save{align-self:flex-start;margin-top:16px;background:#eaad33;color:#2a1c00;font-weight:700;font-size:13px;padding:7px 15px;border-radius:999px}
@media(max-width:820px){.price-card{flex-basis:80%}.price-card.featured{flex-basis:84%}}

/* ===== 実績#0：自社LPのBefore/After（実データ 61→78） ===== */
.proof{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:36px 40px;box-shadow:var(--sh-md)}
.proof-score{display:flex;align-items:center;justify-content:center;gap:26px;margin-bottom:30px}
.proof-score .ps-label{display:block;font-family:var(--display);font-size:11px;color:var(--sub);font-weight:700;letter-spacing:.12em;margin-bottom:2px}
.proof-score .ps-num{font-family:var(--num);font-size:56px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.03em}
.proof-score .ps-after .ps-num{color:var(--accent)}
.proof-score .ps-arrow{font-family:var(--num);font-size:34px;color:var(--line2);font-weight:600}
.proof-score .ps-up{display:inline-block;margin-left:8px;background:rgba(15,157,107,.12);color:#0f9d6b;font-weight:700;font-size:13px;padding:3px 10px;border-radius:999px;vertical-align:super}
.proof-bars{display:flex;flex-direction:column;gap:13px}
.pbar{display:grid;grid-template-columns:92px 1fr 54px;align-items:center;gap:12px}
.pbar .pb-name{font-size:13px;font-weight:600;color:var(--ink)}
.pbar .pb-track{position:relative;height:10px;background:var(--soft2);border-radius:999px;overflow:hidden}
.pbar .pb-now{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),#8a84ff)}
.pbar .pb-val{font-family:var(--num);font-size:12.5px;color:var(--accent-ink);font-weight:700;text-align:right}
@media(max-width:560px){.proof{padding:28px 22px}.proof-score .ps-num{font-size:44px}.pbar{grid-template-columns:72px 1fr 48px;gap:9px}}

/* ===== サンクスページ ===== */
.thanks{min-height:100vh;display:grid;place-items:center;background:var(--soft);padding:24px}
.thanks-card{max-width:520px;width:100%;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-lg);padding:48px 40px;text-align:center}
.thanks-check{width:64px;height:64px;margin:0 auto 22px;border-radius:50%;background:rgba(15,157,107,.12);color:#0f9d6b;display:grid;place-items:center;font-size:32px;font-weight:800}
.thanks-card h1{font-family:var(--display);font-size:26px;color:var(--ink);margin-bottom:14px;font-weight:600;letter-spacing:-.02em}
.thanks-card p{color:var(--body);margin-bottom:10px;line-height:1.8}
.thanks-card .thanks-sub{font-size:13px;color:var(--sub)}
.thanks-card .btn{margin-top:26px;display:inline-block}
@media(max-width:560px){.thanks-card{padding:38px 24px}.thanks-card h1{font-size:22px}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.carousel-track{scroll-behavior:auto}}