@charset "utf-8";
/* Merchant Webinar のツールLP。
   白地＋ファーストビューだけエフェクト、というMERCHANT TOOLSの新しい方向に合わせている。
   締め(.closing)はアクセントを溶かした黒、マーチャントクラブの帯(.mc-footer)は共通の#16181A。
   ここを同じ色にすると、ページの終わりではなく「よその塊」に見える。 */

:root{
  --accent:#3F5BC9; --accent-d:#2F469E; --accent-soft:#E6EAFB; --accent-br:#7286E0;
  --paper:#FFFFFF; --paper2:#F4F6FC;
  --ink:#161B24; --ink2:#4A525E; --ink3:#8A93A0;
  --line:#E2E6F0; --line2:#EFF2F8;
  --jp:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --shadow:0 1px 2px rgba(22,27,36,.04),0 8px 24px rgba(22,27,36,.07);
  --shadow-l:0 2px 4px rgba(22,27,36,.05),0 20px 54px rgba(22,27,36,.11);
  --w:1080px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.lpt{
  background:var(--paper); color:var(--ink2);
  font-family:var(--jp); font-size:15.5px; line-height:2.05; letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--accent-d)}

.sec{max-width:var(--w); margin:0 auto; padding:0 22px}
.sec.narrow{max-width:760px}
.lpsec{padding:clamp(64px,8vw,104px) 0}
h2.h{
  font-size:clamp(21px,4.2vw,29px); font-weight:600; letter-spacing:.07em; line-height:1.65;
  color:var(--ink); margin:0 0 16px; text-align:center; text-wrap:balance;
}
p.sub{
  text-align:center; color:var(--ink3); font-size:14px; margin:0 auto 44px;
  max-width:34em; line-height:2.05;
}

/* ---------------- ヘッダ ---------------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--w); margin:0 auto; padding:14px 22px; display:flex; align-items:center; gap:14px}
.logo{font-size:13.5px; letter-spacing:.2em; color:var(--ink2); font-weight:500; text-decoration:none}
.logo b{font-weight:600; color:var(--accent-d)}
.nav-sp{margin-left:auto}
.nav-a{font-size:13px; color:var(--ink2); text-decoration:none; letter-spacing:.06em}
.nav-a:hover{color:var(--accent-d)}

/* ---------------- ヒーロー ---------------- */
.hero{position:relative; overflow:hidden; background:var(--paper);
  padding:clamp(72px,9vw,116px) 0 clamp(60px,7vw,88px)}
.ml-fx{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.46}
.heroIn{position:relative; z-index:1; max-width:820px; margin:0 auto; padding:0 22px; text-align:center}
/* 白地では文字の背後だけ白を敷かないと、エフェクトと重なって読みにくい */
.heroIn::before{
  content:""; position:absolute; left:50%; top:-6%; transform:translateX(-50%);
  width:min(880px,104%); height:112%; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 52% at 50% 42%, #fff 0%, rgba(255,255,255,.86) 52%, rgba(255,255,255,0) 100%);
}
.eyebrow{
  display:inline-block; font-size:10.5px; letter-spacing:.26em; font-weight:600;
  color:var(--accent-d); background:var(--accent-soft);
  border:1px solid #D3DAF6; border-radius:999px; padding:7px 18px; margin-bottom:26px;
}
.hero h1{
  margin:0; font-size:clamp(27px,6vw,45px); font-weight:600; line-height:1.55; letter-spacing:.045em;
  color:var(--ink); text-wrap:balance;
}
.hero h1 em{font-style:normal; color:var(--accent-d)}
.hero .lead{margin:26px auto 0; max-width:32em; font-size:15.5px; color:var(--ink2); line-height:2.1}
.hero .cta{margin-top:38px}
.hero .memo{margin:18px 0 0; font-size:12px; color:var(--ink3); letter-spacing:.05em}

.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:16px; font-weight:600; letter-spacing:.1em; text-decoration:none; color:#fff;
  background:linear-gradient(180deg,var(--accent),var(--accent-d));
  padding:18px 46px; border-radius:999px;
  box-shadow:0 12px 30px rgba(63,91,201,.28), inset 0 1px 0 rgba(255,255,255,.32);
  transition:transform .14s ease, box-shadow .14s ease;
}
.cta:hover{transform:translateY(-1px); box-shadow:0 16px 38px rgba(63,91,201,.34), inset 0 1px 0 rgba(255,255,255,.32)}
.cta.ghost{background:none; color:var(--accent-d); border:1px solid var(--line); box-shadow:none}
.cta.ghost:hover{border-color:var(--accent); transform:none; box-shadow:none}

/* ---------------- 課題 ---------------- */
.why{background:var(--paper2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.whys{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:800px){.whys{grid-template-columns:1fr}}
.whyc{background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 22px; box-shadow:var(--shadow)}
.whyc h3{margin:0 0 9px; font-size:14.5px; font-weight:600; letter-spacing:.05em; color:var(--ink); line-height:1.7}
.whyc p{margin:0; font-size:13.5px; color:var(--ink3); line-height:2}

/* ---------------- 流れ ---------------- */
.steps{counter-reset:s; display:grid; gap:14px}
.step{
  display:grid; grid-template-columns:52px 1fr; gap:20px; align-items:start;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 24px; box-shadow:var(--shadow);
}
.step::before{
  counter-increment:s; content:counter(s);
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-d); font-size:19px; font-weight:600; letter-spacing:.04em;
}
.step h3{margin:6px 0 8px; font-size:16px; font-weight:600; letter-spacing:.05em; color:var(--ink); line-height:1.65}
.step p{margin:0; font-size:14px; color:var(--ink2); line-height:2.05}
@media(max-width:560px){.step{grid-template-columns:1fr; gap:12px}}

/* ---------------- 機能 ---------------- */
.feats{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media(max-width:800px){.feats{grid-template-columns:1fr}}
.feat{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 24px; box-shadow:var(--shadow)}
.feat .k{
  display:inline-block; font-size:10px; letter-spacing:.2em; font-weight:600;
  color:var(--accent-d); margin-bottom:12px;
}
.feat h3{margin:0 0 10px; font-size:16px; font-weight:600; letter-spacing:.05em; color:var(--ink); line-height:1.7}
.feat p{margin:0; font-size:13.5px; color:var(--ink2); line-height:2.05}
.feat.wide{grid-column:1 / -1}

/* ---------------- 締め ---------------- */
.closing{
  background:#1B2138;
  background:color-mix(in srgb, var(--accent) 16%, #101214);
  color:#E7E9F2; position:relative; overflow:hidden;
}
.closing::before{
  content:""; position:absolute; inset:auto -20% -60% 30%; height:120%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(114,134,224,.20), rgba(114,134,224,0) 70%);
}
.closing .sec{position:relative; z-index:1; max-width:760px; text-align:center}
.closing h2{color:#fff}
.closing p{color:rgba(231,233,242,.74); margin:18px auto 30px; max-width:32em; font-size:15px}
.closing .cta{background:#fff; color:#20264A; box-shadow:0 12px 30px rgba(0,0,0,.30)}
.closing .cta:hover{background:#fff; color:#20264A}

/* ---------------- 免責 ---------------- */
.disc{max-width:var(--w); margin:0 auto; padding:38px 22px 46px; color:var(--ink3); font-size:12px; line-height:1.95}
.disc b{display:block; color:var(--ink2); font-size:12.5px; margin-bottom:9px; letter-spacing:.08em}
.disc ul{margin:0; padding-left:1.2em}
.disc li{margin-bottom:7px}