/* 演者向け LP だけの見た目（色・上の帯の型は ../style.css＝HP と同じ。スマホの中の画面は screens.css）
   方針：目に残すのは「スクロールで動くスマホ」と「数え上がる受け取りの数字」の2つ。ほかは静かに。見出しの1語だけ色を変えることはしない */

.lp main{padding-top:72px;overflow-x:clip} /* スマホの後ろのにじみが横にはみ出さないように（clip なので止まる区切りは効いたまま） */
.lp-actions{display:flex;align-items:center;gap:clamp(12px,2vw,22px)}
.lp-textlink{font-family:"Noto Sans JP",sans-serif;font-size:14px;font-weight:500;color:var(--fg);opacity:.72;transition:opacity .2s}
.lp-textlink:hover{opacity:1}
.nw{white-space:nowrap}
.js:not(.ab-ready) [data-ab]{visibility:hidden}

/* ボタン：アカウント作成＝色（A/B：グラデーション or Meta のブルー）、資料請求＝線だけ */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 30px;border-radius:999px;white-space:nowrap;
  font-family:"Noto Sans JP",sans-serif;font-size:16px;font-weight:600;color:#fff;
  background:linear-gradient(100deg,var(--g1),var(--g2));transition:filter .2s,transform .2s}
:root[data-cta="blue"] .lp-btn:not(.ghost){background:var(--g1)}
.lp-btn:hover{filter:brightness(1.08)}
.lp-btn:active{transform:scale(.98)}
.lp-btn.ghost{color:var(--fg);background:none;border:1px solid var(--line)}
.lp-btn.ghost:hover{border-color:var(--fg);filter:none}
.lp-btn.sm{height:38px;padding:0 18px;font-size:14px}

/* 一番上 */
/* 開いた画面で、文と動画を上下の真ん中に置く（CEO 2026-10-17「上と下の余白バランスおかしくない？」）。
   高い画面：下の声の波まで画面に収め、残りの真ん中に。低い画面（高さ720まで）：文と動画だけで画面の真ん中に置き、声の波はスクロールした先に（波が半分切れて下だけ詰まって見えないように） */
.lp-hero{position:relative;overflow:hidden;--wh:clamp(72px,12vh,120px);--vh:100vh}
@supports (height:1svh){ .lp-hero{--vh:100svh} }
.lp-hero-grid{box-sizing:border-box;min-height:calc(var(--vh) - 72px - var(--wh) - 32px);padding-top:clamp(32px,6vh,80px);padding-bottom:clamp(32px,6vh,80px);
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(36px,5vw,80px);align-items:center;align-content:center}
@media (max-height:720px) and (min-width:761px){ .lp-hero-grid{min-height:calc(var(--vh) - 72px)} }
.lp-for{font-family:"Noto Sans JP",sans-serif;font-size:14px;font-weight:500;color:var(--sub)}
.lp h1{margin-top:20px;font-family:"Noto Sans JP",sans-serif;font-weight:600;font-size:clamp(36px,3.9vw,62px);line-height:1.25;letter-spacing:.01em}
.lp-lead{margin-top:28px;font-family:"Noto Sans JP",sans-serif;font-size:clamp(16px,1.35vw,19px);line-height:1.95;color:var(--fg);opacity:.86}
.lp-cta{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px}
.lp-note{margin-top:16px;font-family:"Noto Sans JP",sans-serif;font-size:13px;color:var(--sub)}
.lp-video{position:relative}
.lp-video-glow{position:absolute;inset:6% 4%;border-radius:40px;background:linear-gradient(120deg,var(--g1),var(--g2));filter:blur(70px);opacity:.38}
.lp-video video{position:relative;display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:24px;background:#000;
  box-shadow:0 0 0 1px rgba(127,127,127,.18),0 30px 80px rgba(0,0,0,.18)}
.lp-sound{position:absolute;right:16px;bottom:16px;height:36px;padding:0 16px;border-radius:999px;
  font-family:"Noto Sans JP",sans-serif;font-size:13px;font-weight:600;color:#fff;background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lp-sound[aria-pressed="true"]{background:rgba(0,0,0,.35)}
.lp-wave{margin:0 0 32px;height:var(--wh);display:flex;align-items:center;justify-content:space-between;gap:5px;padding:0 4px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lp-wave i{flex:1;min-width:2px;max-width:5px;border-radius:9px;background:linear-gradient(var(--g1),var(--g2));transform-origin:50% 50%;
  animation:lp-bar 1.6s ease-in-out infinite alternate}
@keyframes lp-bar{from{transform:scaleY(.35)}to{transform:scaleY(1)}}

/* 区切りの共通 */
.lp section{border-top:1px solid var(--line)}
.lp .lp-hero,.lp .lp-story{border-top:0}
.lp h2{font-family:"Noto Sans JP",sans-serif;font-weight:600;font-size:clamp(28px,3.2vw,46px);line-height:1.45;letter-spacing:.02em}
.lp h3{font-family:"Noto Sans JP",sans-serif;font-weight:600;font-size:19px;line-height:1.5}
.lp-body{margin-top:28px;font-family:"Noto Sans JP",sans-serif;font-size:clamp(16px,1.2vw,18px);line-height:2;max-width:32em}
.lp-body.sub{margin-top:16px;color:var(--sub);font-size:15px}
.lp-small{margin-top:20px;font-family:"Noto Sans JP",sans-serif;font-size:13px;line-height:1.9;color:var(--sub)}

/* 見えたら出る（JavaScript が動くときだけ隠しておく。動かなければ最初から見える） */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}

/* 悩み：大きな文を1つずつ */
.lp-pain{padding:clamp(110px,14vw,200px) 0 clamp(96px,12vw,160px)}
.lp-pain-line + .lp-pain-line{margin-top:clamp(90px,11vw,150px)}
.lp-pain-line h2{font-size:clamp(32px,4.4vw,64px);line-height:1.35}
.lp-pain-line p{margin-top:22px;font-family:"Noto Sans JP",sans-serif;font-size:clamp(16px,1.4vw,20px);line-height:1.9;color:var(--sub)}
.lp-turn{margin-top:clamp(120px,15vw,210px)}
.lp-turn > h2{font-size:clamp(32px,4.4vw,64px);line-height:1.35}
.lp-vs{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px)}
.lp-vs-box{padding:clamp(24px,3vw,40px);border-radius:28px;background:var(--bg2);font-family:"Noto Sans JP",sans-serif}
.lp-vs-box.vl{background:var(--bg);box-shadow:inset 0 0 0 2px var(--g1),0 30px 70px color-mix(in srgb,var(--g1) 14%,transparent)}
.lp-vs .lab{display:inline-block;font-size:13px;font-weight:600;padding:5px 14px;border-radius:999px;background:var(--line);color:var(--sub)}
.lp-vs .vl .lab{background:linear-gradient(100deg,var(--g1),var(--g2));color:#fff}
.lp-vs h3{margin-top:16px;font-size:clamp(20px,2vw,28px)}
.lp-vs p{margin-top:20px;font-size:15px;line-height:1.9;color:var(--sub)}
.lp-vs .tl{position:relative;height:56px;margin-top:18px}
.lp-vs .tl .bar{position:absolute;left:0;right:0;top:30px;height:16px;border-radius:9px;background:var(--line)}
.lp-vs .tl b{position:absolute;left:var(--x);display:grid;place-items:center;font-family:"Inter",sans-serif;font-weight:600}
.lp-vs .tl .q{top:0;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);color:var(--sub);font-size:14px;background:var(--bg2)}
.lp-vs .tl .c{top:24px;width:48px;height:28px;border-radius:14px;color:#fff;font-size:15px;background:linear-gradient(100deg,var(--g1),var(--g2));
  box-shadow:0 8px 18px color-mix(in srgb,var(--g1) 30%,transparent)}
.lp-vs .tl .c.h{background:var(--g2)}
.js .lp-vs .tl .c{opacity:0;transform:translateY(-16px) scale(.6);transition:opacity .45s ease,transform .55s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(var(--d) + .5s)}
.js .rv.in .lp-vs .tl .c{opacity:1;transform:none}

/* 流れ：見出しは止まる区切りの外（スマホで高さが足りるように） */
.lp-story-head{padding:clamp(96px,12vw,160px) 0 0}
.lp-story{position:relative}
.lp-story[data-steps="5"]{height:520vh}
.lp-story[data-steps="7"]{height:700vh}
.lp-story-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
/* ファンのスマホは左・演者のスマホは右。--side（0＝左〜1＝右）は creators.js がスクロールに合わせて動かす。文はスマホの無い側に出る（CEO 2026-10-16「左右で分けて」「隠れてる方に文字で」） */
.lp-story-grid{--side:0;position:relative;width:100%;height:min(86vh,740px);height:min(86svh,740px)}
.lp-story .lp-phone{position:absolute;top:calc(50% + 18px);left:calc(25% + 50% * var(--side));transform:translate(-50%,-50%)}
.lp-story-text{position:absolute;inset:0}
.lp-steps{position:absolute;inset:0}
.lp-step{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;will-change:opacity,transform}
.lp-step[data-phone="L"]{left:54%;right:4%}
.lp-step[data-phone="R"]{left:4%;right:54%}
.js .lp-step{opacity:0}
.lp-step .who{font-family:"Noto Sans JP",sans-serif;font-size:13px;font-weight:600;color:var(--sub);display:flex;align-items:center;gap:10px;margin-bottom:12px}
.lp-step .who::before{content:"";width:24px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--g1),var(--g2))}
.lp-step h3{font-size:clamp(24px,2.5vw,36px);line-height:1.4}
.lp-step p:not(.who){margin-top:14px;font-family:"Noto Sans JP",sans-serif;font-size:16px;line-height:1.95;color:var(--sub);max-width:26em}
.lp-dots{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;gap:8px}
.lp-dots i{position:relative;width:40px;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.lp-dots i::after{content:"";position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--f,0));background:linear-gradient(90deg,var(--g1),var(--g2))}
/* JavaScript が動かないとき：文を全部並べる */
html:not(.js) .lp-story{height:auto}
html:not(.js) .lp-story-pin{position:static;height:auto;padding:60px 0}
html:not(.js) .lp-steps{display:grid;gap:28px}
html:not(.js) .lp-step{position:static}
html:not(.js) .lp-story-grid{height:auto}
html:not(.js) .lp-story .lp-phone{position:relative;left:auto;top:auto;transform:none;margin:40px auto 0;display:block}
html:not(.js) .lp-story-text{position:static}
html:not(.js) .lp-dots{display:none}

.lp-phone-cap{position:absolute;left:0;right:0;bottom:calc(100% + 14px);display:grid;justify-items:center;font-family:"Noto Sans JP",sans-serif;font-size:15px;font-weight:600}
.lp-phone-cap span{grid-area:1/1;padding:7px 16px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);white-space:nowrap}
.lp-phone-cap .c-fan{opacity:calc(1 - var(--side))}
.lp-phone-cap .c-art{opacity:var(--side)}
/* 札の色：ファンは青・演者はピンク（声の波のグラデーションの両端）。切り替わりが色でも分かるように（CEO 2026-10-17「スマホで見た時にファンと演者同じところで切り替わってる」） */
.lp-story .lp-phone-cap span{border:0;color:#fff}
/* 色はロック画面（screens.css の .s-lock）の左上と右下の色にそろえる（CEO 2026-10-17「このモックの一番左上の色と右下の色で」）。声の波のピンクだと鮮やかすぎて字が読みにくかった */
.lp-story .lp-phone-cap .c-fan{background:#0866FF}
.lp-story .lp-phone-cap .c-art{background:#FD6AFB}
@media (color-gamut: p3){ .lp-story .lp-phone-cap .c-art{background:color(display-p3 1 .36 1)} } /* ロック画面の右下（screens.css の --a3 の P3 版）と同じ */
/* スマホの形（中の画面は 375×812 で作り、creators.js が枠の大きさに合わせて縮める） */
/* 枠の太さはスマホの高さ（--ph）から決める（% だと親の幅が基準になり太くなる＝2026-10-16 に太くなった原因） */
.lp-phone{--ph:min(74vh,660px);--bz:calc(var(--ph) * .0072);justify-self:center;height:var(--ph);aspect-ratio:375/812;position:relative;border-radius:calc(var(--ph) * .074);padding:var(--bz);
  background:#1B1B1D;box-shadow:0 0 0 1px #5A5A60,0 0 0 2px rgba(0,0,0,.35),0 40px 90px rgba(0,0,0,.20)}
@supports (height:1svh){ .lp-phone{--ph:min(74svh,660px)} }
.lp-phone::before{content:"";position:absolute;inset:-6% -60%;z-index:-1;opacity:.30;pointer-events:none; /* にじみはぼかしのフィルターを使わず、ぼやけた丸の色で描く（スクロール中に重くならないように） */
  background:radial-gradient(closest-side at 35% 45%,var(--g1),transparent),radial-gradient(closest-side at 65% 58%,var(--g2),transparent)}
.lp-screen{position:relative;width:100%;height:100%;border-radius:calc(var(--ph) * .074 - var(--bz));overflow:hidden;background:#fff;isolation:isolate}
.lp-screen::after{content:"";position:absolute;z-index:30;left:50%;top:1.4%;width:32%;height:4.1%;transform:translateX(-50%);border-radius:999px;background:#000;pointer-events:none} /* 内カメ（ダイナミックアイランド） */

/* 安心 */
.lp-safe{padding:clamp(96px,12vw,170px) 0}
.lp-safe-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:center}
.lp-safe-phones{display:flex;justify-content:center;gap:clamp(16px,2.4vw,32px)}
.lp-phone.sm{--ph:min(64vh,540px)}
@supports (height:1svh){ .lp-phone.sm{--ph:min(64svh,540px)} }
.lp-safe-phones .lp-phone.sm:nth-child(2){margin-top:12%}

/* URL を1つ置く：投稿の例 */
.lp-url{padding:clamp(96px,12vw,170px) 0}
.lp-url-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.lp-post{justify-self:center;width:min(420px,100%);padding:26px;border-radius:24px;border:1px solid var(--line);background:var(--bg);font-family:"Noto Sans JP",sans-serif;
  box-shadow:0 24px 60px rgba(0,0,0,.06)}
.lp-post-head{display:flex;gap:12px;align-items:center}
.lp-post-av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g2))}
.lp-post-head div{display:grid}
.lp-post-head b{font-size:15px}
.lp-post-head span{font-size:13px;color:var(--sub)}
.lp-post > p{margin-top:16px;font-size:16px;line-height:1.9}
.lp-post-link{margin-top:16px;display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--bg2)}
.lp-post-link img{width:34px;height:34px;border-radius:9px;background:#fff}
.lp-post-link div{display:grid}
.lp-post-link b{font-size:13px}
.lp-post-link span{font-size:13px;color:var(--sub)}

/* 受け取り：大きな数字が数え上がる */
.lp-money{padding:clamp(110px,14vw,200px) 0}
.lp-money-h{font-size:clamp(34px,4.8vw,72px)!important;line-height:1.3!important}
.lp-money-h .num,.lp-calc .num{font-family:"Inter","Noto Sans JP",sans-serif;font-variant-numeric:tabular-nums;font-weight:600}
.lp-money-sub{margin-top:22px;font-family:"Noto Sans JP",sans-serif;font-size:15px;color:var(--sub)}
.lp-calc{margin-top:clamp(48px,6vw,80px);display:flex;align-items:flex-end;flex-wrap:wrap;gap:clamp(12px,2vw,28px);font-family:"Noto Sans JP",sans-serif}
.lp-calc > div{display:grid;gap:10px}
.lp-calc b{font-size:clamp(28px,3.4vw,52px);font-weight:600;line-height:1;white-space:nowrap}
.lp-calc > div > span{font-size:13px;color:var(--sub)}
.lp-calc > .calc-br{display:none}
.lp-calc > i{font-style:normal;font-size:clamp(22px,2.4vw,34px);color:var(--sub);padding-bottom:30px}
.lp-calc .res b{background:linear-gradient(100deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-money-grid{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.lp-bars{padding:clamp(24px,3vw,40px);border-radius:28px;background:var(--bg2);font-family:"Noto Sans JP",sans-serif}
.lp-ex-cap{font-size:14px;color:var(--sub);margin-bottom:18px}
.bars-row{display:grid;grid-template-columns:9.5em 1fr 5.2em;align-items:center;gap:14px;padding:9px 0;font-size:14px}
.bars-row .k{color:var(--sub);white-space:nowrap}
.bars-row .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.bars-row .b{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--g1),var(--g2));width:var(--w);transform-origin:0 50%;opacity:.55}
.bars-row.hl .b{opacity:1}
.bars-row.hl .k,.bars-row.hl .v{color:var(--fg);font-weight:600}
.js .lp-bars .b{transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.js .lp-bars.in .b{transform:scaleX(1)}
.js .lp-bars.in .bars-row:nth-child(3) .b{transition-delay:.08s}.js .lp-bars.in .bars-row:nth-child(4) .b{transition-delay:.16s}
.js .lp-bars.in .bars-row:nth-child(5) .b{transition-delay:.24s}.js .lp-bars.in .bars-row:nth-child(6) .b{transition-delay:.32s}.js .lp-bars.in .bars-row:nth-child(7) .b{transition-delay:.4s}
.lp-free{font-family:"Noto Sans JP",sans-serif}
.lp-free h3{font-size:15px;color:var(--sub);font-weight:600}
.lp-free h3 + ul{margin:12px 0 28px}
.lp-free ul{list-style:none;display:grid;gap:10px;font-size:17px;line-height:1.7}
.lp-free li{padding-left:18px;position:relative}
.lp-free li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g2))}
.lp-free li b{font-weight:600}

/* よくある質問：押すと開く */
.lp-faq{padding:clamp(96px,12vw,160px) 0}
.lp-faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(32px,5vw,80px)}
.lp-qa details{border-bottom:1px solid var(--line)}
.lp-qa details:first-child{border-top:1px solid var(--line)}
.lp-qa summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;font-family:"Noto Sans JP",sans-serif;font-size:17px;font-weight:500}
.lp-qa summary::-webkit-details-marker{display:none}
.lp-qa summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.lp-qa details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.lp-qa details p{padding:0 0 24px;font-family:"Noto Sans JP",sans-serif;font-size:15px;line-height:1.95;color:var(--sub);max-width:40em}

/* 始め方 */
.lp-start{padding:clamp(96px,12vw,160px) 0 clamp(80px,10vw,140px)}
.lp-start-steps{margin-top:clamp(40px,5vw,64px);list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.lp-start-steps li{counter-increment:s;padding-top:20px;border-top:2px solid var(--line);position:relative}
.lp-start-steps li::before{content:"";position:absolute;top:-2px;left:0;width:36px;height:2px;background:linear-gradient(90deg,var(--g1),var(--g2))}
.lp-start-steps li::after{content:counter(s);position:absolute;top:20px;right:0;font-family:"Inter",sans-serif;font-size:13px;font-weight:600;color:var(--sub)}
.lp-inlink{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.lp-start-steps p{margin-top:10px;font-family:"Noto Sans JP",sans-serif;font-size:15px;line-height:1.9;color:var(--sub)}
.lp-final{margin-top:clamp(56px,7vw,96px);text-align:center}
.lp-cta.center{justify-content:center}
.lp-final .lp-note a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}

/* 下の帯 */
.lp-foot{background:var(--bg2);border-top:1px solid var(--line);padding:48px 0 36px;font-family:"Noto Sans JP",sans-serif}
.lp-foot .wrap{display:grid;gap:22px}
.lp-foot img{height:20px;display:block}
.lp-foot nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px}
.lp-foot nav a{color:var(--sub)}
.lp-foot nav a:hover{color:var(--fg)}
.lp-foot small{font-size:12px;color:var(--sub)}

@media (max-width:900px){
  .lp-hero-grid,.lp-url-grid,.lp-money-grid,.lp-faq-grid,.lp-safe-grid{grid-template-columns:1fr}
  .lp-vs{grid-template-columns:1fr}
  .lp-start-steps{grid-template-columns:1fr 1fr}
  /* 止まる区切り：文を上、スマホを下に。スマホの高さは画面の残りに合わせる（iPhone SE の 667 でも切れない） */
  .lp-story-pin{padding-top:72px;align-items:flex-start}
  .lp-story-grid{display:grid;grid-template-columns:1fr;gap:14px;align-content:start;height:auto}
  .lp-story .lp-phone{position:relative;left:auto;top:auto;transform:none;margin-top:40px}
  /* スマホの幅でも「ファンは左・演者は右」：ファンのときは左に寄って左へ傾き、演者に移ると右へ振れて寄る（--side 0〜1）。
     後ろの光もファンは青・演者はピンクに変わる（CEO 2026-10-17「ファンと演者同じところで切り替わってる」） */
  .lp-story .lp-phone{translate:calc((var(--side) - .5) * 2 * min(12vw,64px)) 0;rotate:calc((var(--side) - .5) * 2 * 3.5deg)}
  .lp-story .lp-phone::before{opacity:.42;
    background:radial-gradient(closest-side at 50% 50%,color-mix(in srgb,var(--g2) calc(var(--side) * 100%),var(--g1)),transparent)}
  .lp-story-text{position:relative}
  .lp-steps{position:relative;min-height:150px}
  .lp-step,.lp-step[data-phone]{left:0;right:0;top:0;bottom:auto;display:block}
  .lp-dots{position:static;transform:none;margin-top:6px}
  .lp-phone-cap{font-size:13px;bottom:calc(100% + 8px)}
  .lp-step h3{font-size:20px}
  .lp-step p:not(.who){margin-top:8px;font-size:14px;line-height:1.75}
  .lp-step .who{margin-bottom:6px}
  .lp-dots{margin-top:6px}
  .lp-story .lp-phone{--ph:min(calc(100vh - 330px),500px)}
  @supports (height:1svh){ .lp-story .lp-phone{--ph:min(calc(100svh - 330px),500px)} }
  .lp-phone.sm{--ph:min(58vh,420px)}
}
@media (max-width:760px){
  .lp-textlink{display:none}
  .brand img{height:20px}
  .lp-btn.sm{padding:0 14px;font-size:13px}
  .lp-actions{gap:10px}
  .lg-only{display:none}
  .lp-btn{height:52px;padding:0 22px}
  .lp-cta .lp-btn{flex:1}
  .lp-start-steps{grid-template-columns:1fr}
  .bars-row{grid-template-columns:1fr auto;grid-template-areas:"k v" "b b";gap:6px 10px;font-size:13px}
  .bars-row .k{grid-area:k}.bars-row .v{grid-area:v}.bars-row .b{grid-area:b}
  .lp-safe-phones .lp-phone.sm{--ph:min(52vh,360px)}
  .lp-calc > .calc-br{display:block;flex-basis:100%;height:0}   /* 「×」が行の終わりに残らないよう、2つ目の × の前で折る */
}
@media (max-width:400px){
  .lp-btn.sm{padding:0 10px;font-size:12px}   /* A/B の「無料でアカウント作成」でもロゴと離れるように */
  .brand img{height:18px}
}
@media (prefers-reduced-motion: reduce){
  .lp-wave i{animation:none}
  .js .rv,.js .lp-bars .b,.js .lp-vs .tl .c{transition:none;opacity:1;transform:none}
}