/* 「無料ではじめる」のボタンと、下に追従する帯（2026-10-09・ユーザー指示「アプリないから無料ではじめるボタンを各所において。
   フッターにも追従で途中から出して。ピカっとたまにひかるアニメーション。カーソルおいたときは青インクが広がるようなアニメーションで。
   インクの質感はLPに装飾されてるインクと同じ感じで」）。
   LP（/lp）と plax labo（/labo）で同じもの。付け方：ボタンの a に class="cta" を足し、/cta/cta.css と /cta/cta.js を読む。
     cta.js が中に .cta-ink（広がるインク）を入れ、カーソルの入った場所を --x/--y に入れる。ときどき光る（::after）のは CSS だけ
   地       … 紺色のインク（/lp/ink/tex-navy-v1.webp＝LP のインクの面 tex.webp を紺に染め直したもの・白い文字が読める濃さ）。
              2026-10-09・ユーザー指示「最初は紺色のインク、カーソル合わせた時今の青インクに」。模様の見える所はボタンごとに変える（--bx/--by）
   インク   … カーソルを合わせると青インク（/lp/ink/splat-3.webp の形で /lp/ink/tex.webp の水彩の面を抜く）。広がりきったら面ごと塗る（::before）
   ⚠ 右のポッチ（.button-dot・<i>）は付けない（2026-10-09・ユーザー指示「無料ではじめるの右のポッチいらない」）
   ⚠ 「視差効果を減らす」設定と LP の「アニメーションを停止」（body.motion-off）では、光らせない・広げない（塗りが替わるだけ） */

a.cta,a.cta:hover{background:#0b1626 url(/lp/ink/tex-navy-v1.webp) var(--bx,30%) var(--by,40%)/380px auto;color:#fff}
.cta{position:relative;overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent}
.cta:hover,.cta:focus-visible{text-shadow:0 1px 3px rgba(0,22,64,.55)}

/* 広がるインク：入った場所を中心に、飛び散りの形で大きくなる（大きさ --d は cta.js がボタンの大きさから決める） */
.cta>.cta-ink{position:absolute;left:var(--x,50%);top:var(--y,50%);width:var(--d,640px);aspect-ratio:1;translate:-50% -50%;scale:0;opacity:0;z-index:-1;pointer-events:none;
  background:url(/lp/ink/tex.webp) center/var(--d,640px) auto;
  -webkit-mask:url(/lp/ink/splat-3.webp) center/contain no-repeat;mask:url(/lp/ink/splat-3.webp) center/contain no-repeat;
  rotate:var(--r,0deg);transition:scale .75s cubic-bezier(.2,.8,.25,1),opacity .2s}
/* 広がりきったら、すき間なく塗る（飛び散りの腕のあいだに紺が残らないように） */
.cta::before{content:'';position:absolute;inset:0;z-index:-2;background:url(/lp/ink/tex.webp) 30% 40%/480px auto;opacity:0;transition:opacity .35s .3s;pointer-events:none}
.cta:hover>.cta-ink,.cta:focus-visible>.cta-ink{scale:1;opacity:1}
.cta:hover::before,.cta:focus-visible::before{opacity:1}
/* 離れたら、インクはすぐ引く（次に入ったときに、また入った場所から広がる） */
.cta:not(:hover):not(:focus-visible)>.cta-ink{transition:scale .3s ease-in,opacity .3s}
.cta:not(:hover):not(:focus-visible)::before{transition:opacity .25s}

/* ときどき光る：斜めの光が左から右へ走る（5.5秒に1回。ボタンごとに始まりをずらす＝cta.js の --shine-delay） */
.cta::after{content:'';position:absolute;top:-40%;bottom:-40%;left:0;width:36%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 15%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.55) 55%,rgba(255,255,255,0) 85%);
  translate:-180% 0;rotate:14deg;animation:cta-shine 5.5s ease-in-out infinite;animation-delay:var(--shine-delay,1.2s)}
@keyframes cta-shine{0%{translate:-180% 0}13%{translate:360% 0}100%{translate:360% 0}}
.cta:hover::after,.cta:focus-visible::after{animation-play-state:paused;opacity:0}

@media(prefers-reduced-motion:reduce){.cta::after{display:none}.cta>.cta-ink,.cta::before{transition:none!important}}
body.motion-off .cta::after{display:none}
body.motion-off .cta>.cta-ink,body.motion-off .cta::before{transition:none!important}

/* ── 下に追従する帯（cta.js の PLAXCTA.bar）。「ログイン」と「無料ではじめる」の2つ。途中から出て、いちばん下の「はじめる」の所では引っ込む ── */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid #e4eaf0;box-shadow:0 -10px 30px -18px rgba(16,29,40,.35);
  translate:0 110%;visibility:hidden;transition:translate .4s cubic-bezier(.2,.8,.25,1),visibility 0s .4s}
.cta-bar.is-on{translate:0 0;visibility:visible;transition:translate .4s cubic-bezier(.2,.8,.25,1),visibility 0s}
.cta-bar-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:12px}
.cta-bar .cta-btn,.cta-bar .cta-login{flex:none;display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 32px;border-radius:40px;
  font-size:15px;font-weight:800;text-decoration:none;white-space:nowrap;transition:transform .25s,background .2s}
.cta-bar .cta-btn:hover,.cta-bar .cta-login:hover{transform:translateY(-2px)}
/* ログイン：上の帯のログインと同じ淡いグレーの丸 */
.cta-bar .cta-login{background:#eef2f6;color:#101d28;padding:0 28px}
.cta-bar .cta-login:hover{background:#e3e9ef}
.cta-bar .cta-login:focus-visible,.cta-bar .cta-btn:focus-visible{outline:3px solid #5daaff;outline-offset:3px}
@media(max-width:560px){
  .cta-bar{padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  /* スマホは横いっぱいに2つ（ログインは細め） */
  .cta-bar-in{display:grid;grid-template-columns:2fr 3fr;gap:10px}
  .cta-bar .cta-btn,.cta-bar .cta-login{height:48px;padding:0 12px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.cta-bar,.cta-bar.is-on{transition:none}}
body.motion-off .cta-bar,body.motion-off .cta-bar.is-on{transition:none}
@media print{.cta-bar{display:none}}