/* Picoa 需要探索LP — モバイル優先（390px 基準）。動きは transform / opacity だけ */
:root{
  --white:#FFFFFF; --ink:#111111; --soft:#5E5A66; --line:#ECE8F0; --wash:#FAF7FC;
  --pink:#FF3DA5; --yellow:#FFE83D; --cyan:#3DF2FF; --purple:#9B5CFF; --coral:#FF7A6B; --blue:#3D7BFF;
  --jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",system-ui,sans-serif;
  --en:Anton,"Impact","Arial Narrow Bold",sans-serif;
  --gut:20px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font:500 16px/1.75 var(--jp);
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
[hidden]{display:none!important}   /* .step{display:grid} が hidden を打ち消していた（2026-09-27 実測） */
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}

/* ---------- ロゴ：o の上にピコッと光る点 ---------- */
.logo{font-weight:900;letter-spacing:-.02em;position:relative;white-space:nowrap}
.logo-o{position:relative;display:inline-block}
.logo-o::after{content:"";position:absolute;right:-.16em;top:.16em;width:.26em;height:.26em;border-radius:50%;
               background:var(--yellow);box-shadow:0 0 0 .07em var(--ink)}
.logo-ink{color:var(--ink)}

/* ---------- SECTION 1：ファーストビュー ---------- */
.fv{position:relative;overflow:hidden;background:var(--ink);color:var(--white);
    min-height:100svh;padding:calc(env(safe-area-inset-top) + 14px) var(--gut) calc(env(safe-area-inset-bottom) + 22px);
    display:flex;flex-direction:column}
.fv-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(#3DF2FF1F 1px,transparent 1px),linear-gradient(90deg,#FF3DA51A 1px,transparent 1px);
  background-size:36px 36px;mask-image:radial-gradient(ellipse at 50% 45%,#000 40%,transparent 95%)}
.fv-rows{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.row{position:absolute;left:0;white-space:nowrap;font:400 86px/1 var(--en);color:transparent;letter-spacing:.02em;will-change:transform}
.r1{top:30%;-webkit-text-stroke:1.5px #FF3DA566;animation:slide 26s linear infinite}
.r2{top:62%;-webkit-text-stroke:1.5px #3DF2FF55;animation:slide 30s linear infinite reverse}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.dot{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.d1{width:14px;height:14px;background:var(--yellow);top:44%;left:6%;box-shadow:0 0 18px var(--yellow)}
.d2{width:10px;height:10px;background:var(--cyan);top:48%;right:9%;box-shadow:0 0 14px var(--cyan)}
.d3{width:18px;height:18px;background:var(--pink);bottom:24%;left:12%;box-shadow:0 0 20px var(--pink)}

.fv-bar{position:relative;display:flex;align-items:center;justify-content:space-between;z-index:2}
.fv-bar .logo{font-size:26px}
.fv-bar .logo-o::after{box-shadow:0 0 0 .07em var(--ink),0 0 12px var(--yellow)}
.dev{font-size:12px;font-weight:800;padding:3px 10px;border-radius:99px;border:1.5px solid #FFFFFF66;color:#FFFFFFCC}

.fv-head{position:relative;z-index:2;margin:18px 0 0;font-size:clamp(28px,8.4vw,36px);line-height:1.32;font-weight:900;
         letter-spacing:-.01em;text-shadow:0 2px 0 #00000055}

.fv-stage{position:relative;z-index:1;flex:1;min-height:250px;margin:8px 0 4px}
.char{position:absolute;right:-2%;bottom:-8px;height:min(108%,440px);width:auto;
      filter:drop-shadow(0 10px 24px #FF3DA555);animation:bob 1s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.ping-card{position:absolute;left:0;top:30%;width:min(70%,270px);display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;
           padding:11px 12px;border-radius:18px;background:#FFFFFFF2;color:var(--ink);
           box-shadow:0 12px 30px #0000004d,0 0 0 2px var(--pink);transform-origin:20% 0;
           animation:pop-in .6s cubic-bezier(.2,1.5,.35,1) .45s both, nudge 4.5s ease-in-out 2.2s infinite}
.ping-icon{width:36px;height:36px;border-radius:11px;background:var(--pink);color:#fff;font-weight:900;display:grid;place-items:center;position:relative}
.ping-icon::after{content:"";position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:var(--yellow);border:2px solid #fff}
.ping-body{display:grid;line-height:1.35;font-size:13px}
.ping-body b{font-size:12px}
.ping-time{align-self:start;font-size:11px;color:var(--soft)}
@keyframes pop-in{from{opacity:0;transform:translateY(-14px) scale(.7)}to{opacity:1;transform:none}}
@keyframes nudge{0%,88%,100%{transform:none}92%{transform:rotate(-3deg) scale(1.03)}96%{transform:rotate(2deg)}}
.spark{position:absolute;left:min(66%,255px);top:26%;width:34px;height:34px;pointer-events:none}
.spark::before,.spark::after{content:"";position:absolute;inset:0;
  background:conic-gradient(from 0deg,var(--yellow) 0 6deg,transparent 6deg 45deg,var(--yellow) 45deg 51deg,transparent 51deg 90deg,
    var(--yellow) 90deg 96deg,transparent 96deg 135deg,var(--yellow) 135deg 141deg,transparent 141deg 180deg,var(--yellow) 180deg 186deg,
    transparent 186deg 225deg,var(--yellow) 225deg 231deg,transparent 231deg 270deg,var(--yellow) 270deg 276deg,transparent 276deg 315deg,
    var(--yellow) 315deg 321deg,transparent 321deg);
  -webkit-mask:radial-gradient(circle,transparent 38%,#000 40%,#000 70%,transparent 72%);mask:radial-gradient(circle,transparent 38%,#000 40%,#000 70%,transparent 72%);
  animation:burst .7s ease-out .9s both}
@keyframes burst{from{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(1.6)}}

.fv-brand{position:relative;z-index:2;margin:6px 0 2px;font-size:17px;font-weight:900;color:var(--yellow)}
.fv-sub{position:relative;z-index:2;margin:0 0 14px;font-size:13.5px;line-height:1.6;color:#FFFFFFD9}

/* ---------- CTA ---------- */
.cta{position:relative;z-index:2;display:block;width:100%;border:0;border-radius:18px;padding:17px 18px;
     font-size:18px;font-weight:900;cursor:pointer;touch-action:manipulation;transition:transform .12s}
.cta:active{transform:scale(.97)}
.cta-yellow{background:var(--yellow);color:var(--ink);box-shadow:0 6px 0 #C9B400,0 10px 26px #FFE83D55}
.cta-pink{background:var(--pink);color:#fff;box-shadow:0 5px 0 #C21C78}
.cta-big{font-size:22px;padding:21px 18px;border-radius:22px}

/* ---------- 白地のセクション（読みやすさ優先） ---------- */
.sec{padding:64px var(--gut)}
.h2{text-wrap:balance;margin:0 0 24px;font-size:26px;line-height:1.4;font-weight:900;letter-spacing:-.01em}

.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{position:relative;padding:16px 14px 16px;border-radius:20px;background:var(--white);border:2px solid var(--ink);
      box-shadow:4px 4px 0 var(--c);display:grid;gap:6px;align-content:start;min-height:150px}
.card b{font-size:16px;font-weight:900}
.card span:last-child{font-size:13.5px;line-height:1.55;color:var(--soft)}
.ic{width:40px;height:40px;border-radius:12px;background:var(--c);display:grid;place-items:center}
.ic svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.sec-feel{background:var(--wash)}
.feel{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}
.feel li{font-size:19px;font-weight:800;line-height:1.5;padding:14px 16px;border-radius:16px;background:var(--white);
         border:2px solid var(--line);position:relative;padding-left:44px}
.feel li::before{content:"";position:absolute;left:16px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--pink)}
.feel-end{font-size:22px;font-weight:900;line-height:1.5;margin:0}
.feel-end .logo{font-size:26px}
.feel-end.in .logo{display:inline-block;animation:bounce .7s cubic-bezier(.3,1.8,.4,1) .1s both}
@keyframes bounce{0%{transform:translateY(0)}40%{transform:translateY(-10px)}100%{transform:none}}

.phone{margin:0 auto;max-width:330px;border-radius:40px;background:var(--ink);padding:12px;
       box-shadow:0 24px 50px #9B5CFF33}
.phone-top{display:flex;justify-content:space-between;align-items:center;background:var(--white);border-radius:30px 30px 10px 10px;padding:16px 18px 10px}
.phone-top .logo{font-size:22px}
.phone-tab{font-size:13px;font-weight:800;padding:3px 10px;border-radius:99px;background:var(--ink);color:#fff}
.feed{list-style:none;margin:0;padding:6px 10px 16px;background:var(--white);border-radius:10px 10px 30px 30px;display:grid;gap:8px}
.feed li{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:16px;
         background:var(--wash);border-left:5px solid var(--c)}
.feed p{margin:0;font-size:13px;line-height:1.45}
.feed time{font-size:11px;color:var(--soft);align-self:start}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:800 12px/1 var(--jp);color:var(--ink)}
.av-a{background:linear-gradient(135deg,#FFD1E8,#FFE83D)}
.av-n{background:linear-gradient(135deg,#C9F9FF,#D8C6FF)}
.phone.in .feed li{animation:feed-in .45s cubic-bezier(.2,1.3,.4,1) both}
.phone.in .feed li:nth-child(1){animation-delay:.15s}.phone.in .feed li:nth-child(2){animation-delay:.3s}
.phone.in .feed li:nth-child(3){animation-delay:.45s}.phone.in .feed li:nth-child(4){animation-delay:.6s}
.phone.in .feed li:nth-child(5){animation-delay:.75s}.phone.in .feed li:nth-child(6){animation-delay:.9s}
@keyframes feed-in{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.mock-note{margin:16px auto 0;max-width:330px;font-size:12px;color:var(--soft);text-align:center}

.who{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.who li{display:grid;gap:4px;padding:18px;border-radius:20px;background:var(--wash);position:relative;overflow:hidden}
.who li::after{content:"";position:absolute;right:-18px;top:-18px;width:64px;height:64px;border-radius:50%;background:var(--c);opacity:.9}
.who b{font-size:19px;font-weight:900}
.who span{font-size:14.5px;color:var(--soft);padding-right:36px}

/* ---------- SECTION 6：最終CTA ---------- */
.final{position:relative;overflow:hidden;background:var(--ink);color:var(--white);padding:72px var(--gut) 80px;text-align:center}
.final .d1{top:16%;left:10%}.final .d3{bottom:18%;left:auto;right:12%}
.final-head{position:relative;margin:0 0 16px;font-size:clamp(34px,10vw,44px);font-weight:900;line-height:1.25;
            text-shadow:3px 3px 0 var(--pink),-3px -3px 0 #3DF2FFAA}
.final-body{position:relative;margin:0 0 30px;font-size:15px;line-height:1.85;color:#FFFFFFD9}
.cta.cta-big.in{animation:ping .5s cubic-bezier(.2,1.6,.4,1) .2s both}
@keyframes ping{0%{transform:scale(.9)}60%{transform:scale(1.05)}100%{transform:none}}

.foot{padding:28px var(--gut) calc(env(safe-area-inset-bottom) + 36px);background:var(--ink);color:#FFFFFF99;font-size:12px;line-height:1.8;border-top:1px solid #FFFFFF1A}
.foot p{margin:0 0 8px}
.foot b{color:#FFFFFFD9}
.foot a{color:#FFFFFFD9}
.small a{color:var(--soft)}
.kw{word-break:keep-all;overflow-wrap:anywhere}

/* ---------- スクロールで現れる（一度だけ） ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,1.2,.4,1)}
.js .reveal.in{opacity:1;transform:none}
.js .cards .reveal:nth-child(2n){transition-delay:.08s}

/* ---------- CTA後のシート ---------- */
.sheet{position:fixed;inset:0;z-index:50}
.sheet-back{position:absolute;inset:0;background:#111111AA;animation:fade .2s both}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:92svh;overflow-y:auto;background:var(--white);
             border-radius:26px 26px 0 0;padding:28px var(--gut) calc(env(safe-area-inset-bottom) + 24px);
             animation:up .35s cubic-bezier(.2,1.2,.4,1) both}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(100%)}}
.sheet-x{position:absolute;top:12px;right:14px;width:40px;height:40px;border:0;background:none;font-size:26px;line-height:1;cursor:pointer}
.step{display:grid;gap:10px}
.thanks{margin:0;font-size:26px;font-weight:900}
.step-lead{margin:0 0 6px;font-size:16px;font-weight:700}
.field-label{font-size:14px;font-weight:800}
input[type=email]{font:inherit;font-size:16px;padding:15px 16px;border-radius:14px;border:2px solid var(--ink);background:#fff}
.err{margin:0;min-height:1.4em;font-size:13px;color:#D4145A;font-weight:700}
.small{margin:2px 0 0;font-size:12px;color:var(--soft)}
fieldset{border:0;margin:6px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
legend{font-size:16px;font-weight:900;margin-bottom:8px;padding:0}
legend span{font-size:12px;font-weight:700;color:var(--soft);margin-left:8px}
fieldset label{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:99px;border:2px solid var(--line);
               font-size:14px;font-weight:700;cursor:pointer}
fieldset input{accent-color:var(--pink);margin:0}
fieldset label:has(input:checked){border-color:var(--pink);background:#FFF0F7}
.link{border:0;background:none;padding:10px;font-size:14px;color:var(--soft);text-decoration:underline;cursor:pointer}

@media (min-width:720px){
  :root{--gut:40px}
  .sec,.final{max-width:760px;margin:0 auto}
  .fv{min-height:88vh;max-width:none}
  .fv > *:not(.fv-grid):not(.fv-rows):not(.dot){max-width:520px;margin-left:auto;margin-right:auto;width:100%}
  .cards{grid-template-columns:repeat(3,1fr)}
  .who{grid-template-columns:1fr 1fr}
  .sheet-panel{max-width:520px;left:50%;transform:translateX(-50%);border-radius:26px;bottom:24px;animation:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}