@charset "UTF-8";
/* UNFRAME LP — mobile first */
:root{
  --black:#07080c;
  --panel:#0d0f15;
  --line-c:rgba(255,255,255,.22);
  --cyan:#25e8f2;
  --pink:#ff2f7e;
  --green:#06c755;
  --ink:#111;
  --paper:#f4f2ee;
  --jp:"Noto Sans JP",sans-serif;
  --en:"Montserrat",sans-serif;
  --num:"Oswald",sans-serif;
  --hand:"Zen Kurenaido",cursive;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;font-family:var(--jp);font-weight:500;color:#fff;background:var(--black);line-height:1.7;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block}
em{font-style:normal}
.container{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}

/* ---------- LINE button ---------- */
.btn-line{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,#17d867,#05b84d);color:#fff;font-weight:700;border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 8px 24px rgba(6,199,85,.35);transition:transform .2s,filter .2s}
.btn-line:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-line__ico{width:36px;height:36px;flex:none}
.btn-line__arw{width:22px;height:22px;flex:none;margin-left:auto}
.btn-line span{flex:1;text-align:center}
.btn-line--lg{padding:14px 20px;font-size:17px;max-width:440px;width:100%}
.btn-line--md{padding:12px 20px;font-size:16px;width:100%;max-width:400px}
.btn-line--sm{padding:6px 12px;font-size:13px;gap:8px;border-radius:6px}
.btn-line--sm .btn-line__ico{width:24px;height:24px}
.btn-line--sm .btn-line__arw{width:16px;height:16px}

/* ---------- header ---------- */
.header{position:fixed;inset:0 0 auto;z-index:50;background:rgba(7,8,12,.88);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.header__inner{display:flex;align-items:center;gap:16px;height:56px;padding:0 16px;max-width:1280px;margin:0 auto}
.logo{display:flex;align-items:baseline;gap:10px;margin-right:auto}
.logo__main{font-family:var(--en);font-weight:800;font-size:22px;letter-spacing:.02em;line-height:1}
.logo__sub{font-family:var(--en);font-size:9px;font-weight:600;letter-spacing:.12em;opacity:.85;display:none}
.gnav{display:none}
.header .btn-line--sm span{display:none}
.header .btn-line--sm .btn-line__arw{display:none}
.header .btn-line--sm{padding:6px;border-radius:50%}

/* ---------- FV ---------- */
.fv{position:relative;overflow:hidden;padding:96px 0 0;background:#000}
.fv__bg{position:absolute;inset:0;background:url(fv-neon.svg) 50% 100%/cover no-repeat;opacity:.6}
.fv__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.55) 45%,#000 100%)}
.fv__inner{position:relative;z-index:2;padding:0 16px;max-width:1280px;margin:0 auto}
.fv__eyebrow{font-weight:900;font-size:13px;color:var(--pink);letter-spacing:.02em}
.fv__eyebrow::first-letter{color:var(--pink)}
.fv__title{display:block;font-weight:900;margin-top:10px}
.fv__catch{display:block;font-size:clamp(28px,9vw,84px);line-height:1.18;letter-spacing:-.01em;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.fv__lead{display:block;margin-top:16px;font-size:14px;font-weight:700;line-height:1.75}
.fv__name{display:block;margin-top:10px;font-size:14px;font-weight:700}
.fv .btn-line{margin-top:22px}
.fv__note{margin-top:10px;font-size:12px;font-weight:700;opacity:.9}
.fv__side{position:absolute;z-index:2;font-family:var(--en);font-size:9px;font-weight:600;letter-spacing:.18em;line-height:2;color:rgba(255,255,255,.8)}
.fv__side::after{content:"";display:block;width:16px;height:1px;background:currentColor;margin-top:6px}
.fv__side--top{display:none}
.fv__hand{display:none;position:absolute;z-index:2;font-family:var(--hand);color:#fff;line-height:1.5;transform:rotate(-12deg);text-shadow:0 0 12px rgba(0,0,0,.6)}
.fv__side--btm{display:none}
.fv__logo{position:relative;z-index:1;margin-top:28px;filter:drop-shadow(0 0 6px rgba(37,232,242,.5))}
.fv__logo svg{width:100%;height:auto}

/* ---------- ZERO ---------- */
.zero{background:var(--paper);color:var(--ink);padding:40px 16px}
.zero__inner{max-width:1120px;margin:0 auto}
.zero__title{font-weight:900;font-size:30px;line-height:1.35;text-align:center}
.zero__title em{font-family:var(--hand);color:var(--pink);font-size:1.5em;letter-spacing:.05em;transform:skewX(-8deg);display:inline-block}
.zero__list{display:flex;justify-content:center;gap:10px;margin-top:24px}
.zero__list li{width:31%;max-width:132px;aspect-ratio:1;border:2px solid var(--ink);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff}
.zero__label{font-weight:900;font-size:13px}
.zero__val{font-family:var(--num);font-weight:700;color:var(--cyan);font-size:44px;line-height:1;-webkit-text-stroke:.5px #0bb9c4}
.zero__val{height:1.1em;display:flex;align-items:flex-end;justify-content:center}
.zero__val small{font-family:var(--jp);font-size:14px;color:var(--ink);-webkit-text-stroke:0;font-weight:900;margin-left:2px}
.zero__val--pink{font-family:var(--hand);color:var(--pink);font-size:34px;-webkit-text-stroke:.6px var(--pink)}

/* ---------- section head ---------- */
.sec-head{position:relative;margin-bottom:24px}
.sec-head__en{font-family:var(--en);font-weight:600;font-size:11px;letter-spacing:.18em;color:var(--cyan)}
.sec-head__en--ink{color:var(--ink);display:flex;align-items:center;gap:12px}
.flow .sec-head__en--ink::after{content:"";width:40px;height:1px;background:currentColor}
.sec-head__ttl{font-weight:900;font-size:24px;line-height:1.45;margin-top:8px}
.sec-head__side{display:none}

/* ---------- WHY ---------- */
.why{padding:56px 0 64px;background:radial-gradient(ellipse at 50% 0%,#141826 0%,var(--black) 60%)}
.why-main{position:relative;display:grid;border:1px solid var(--line-c);background:#0a0b10;overflow:hidden}
.why-main__num{position:absolute;left:12px;top:8px;z-index:2;font-family:var(--num);font-weight:700;font-size:96px;line-height:1;color:var(--cyan);text-shadow:0 0 18px rgba(37,232,242,.45)}
.why-main__tag{position:absolute;left:-14px;top:30px;writing-mode:vertical-rl;font-family:var(--en);font-size:7px;letter-spacing:.2em;color:#fff;opacity:.7}
.why-main__img{height:220px;background:url(crown.jpg) 70% 50%/cover no-repeat;position:relative}
.why-main__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,#0a0b10 100%)}
.why-main__body{padding:4px 18px 24px}
.why-main__ttl{font-weight:900;font-size:24px;line-height:1.4}
.why-main__ttl span{display:block;color:var(--cyan);font-size:17px}
.why-main__body p{font-size:14px;margin-top:12px;line-height:1.85;color:rgba(255,255,255,.92)}
.why-main__badge{display:inline-block;background:var(--pink);color:#fff;font-weight:900;font-size:14px!important;padding:2px 10px;margin-top:16px!important}
.why-grid{display:grid;grid-template-columns:1fr;border-left:1px solid var(--line-c);border-top:0}
.why-grid li{display:flex;align-items:center;gap:14px;padding:16px 18px;border-right:1px solid var(--line-c);border-bottom:1px solid var(--line-c);background:rgba(10,11,16,.85)}
.why-grid__num{font-family:var(--num);font-weight:700;font-size:40px;line-height:1;color:var(--cyan);width:52px;flex:none}
.why-grid svg{width:34px;height:34px;flex:none;color:#fff}
.why-grid__txt{font-weight:700;font-size:15px;line-height:1.5;position:relative}
.why-grid__cond{display:inline-block;margin-left:8px;font-size:10px;font-weight:500;border:1px solid rgba(255,255,255,.5);padding:0 6px;vertical-align:middle;opacity:.85}

/* ---------- BENEFIT ---------- */
.benefit{position:relative;overflow:hidden;color:var(--ink);background:linear-gradient(115deg,#3de9f2 0%,#c9fbfd 55%,#3de9f2 100%);padding:44px 16px}
.benefit::before,.benefit::after{content:"";position:absolute;width:220px;height:28px;background:var(--cyan);border-radius:30px;transform:rotate(-58deg);opacity:.9}
.benefit::before{left:-90px;bottom:40px}
.benefit::after{right:-80px;top:30px}
.benefit__inner{position:relative;z-index:1;max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.benefit__ttl{font-weight:900;font-size:clamp(18px,5.6vw,22px);line-height:1.45;margin-top:8px}
.benefit__big{display:flex;align-items:flex-end;gap:10px;margin-top:6px;white-space:nowrap}
.benefit__big-l{font-weight:900;font-size:clamp(28px,9vw,44px);line-height:1.2;letter-spacing:.06em}
.benefit__big-r{font-family:var(--num);font-weight:700;font-size:clamp(48px,15vw,76px);line-height:1;color:var(--pink);font-style:italic;letter-spacing:-.01em;transform:skewX(-6deg);display:inline-block}
.benefit__big-r small{font-size:.55em;margin:0 2px}
.benefit__sub{font-weight:900;font-size:19px}
.benefit__right p{font-size:14px;margin-top:8px}
.benefit__right .benefit__note{font-size:12px;opacity:.8}
.benefit .btn-line{margin-top:18px}

/* ---------- FLOW ---------- */
.flow{background:var(--paper);color:var(--ink);padding:56px 0}
.flow__list{display:grid;gap:22px}
.flow__list li{position:relative;display:grid;grid-template-columns:60px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:16px;background:#fff;padding:14px 18px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.flow__list li:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-16px;width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
.flow__ico{grid-row:1/3;width:52px;height:52px;color:var(--ink)}
.flow__ico--line circle{fill:var(--green)}
.flow__ico--line path{fill:#fff}
.flow__num{font-family:var(--num);font-weight:700;font-size:30px;line-height:1;color:#0bbfca}
.flow__txt{font-weight:900;font-size:18px}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;padding:56px 16px 64px;text-align:center;background:#06070b}
.cta__bg{position:absolute;top:0;bottom:0;width:50%;background:0 100%/cover no-repeat;opacity:.4}
.cta__bg--l{left:0;background-image:url(crowd-l.jpg);background-position:0 100%;-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent)}
.cta__bg--r{right:0;background-image:url(crowd-r.jpg);background-position:100% 100%;-webkit-mask-image:linear-gradient(270deg,#000 55%,transparent);mask-image:linear-gradient(270deg,#000 55%,transparent)}
.cta__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.cta__ttl{font-weight:900;font-size:34px;line-height:1.3}
.cta__lead{margin-top:12px;font-weight:900;font-size:20px;line-height:1.5}
.cta__lead span{font-size:15px}
.cta .btn-line{margin-top:24px}

/* ---------- footer ---------- */
.footer{background:#05060a;padding:32px 16px 96px;border-top:1px solid rgba(255,255,255,.08)}
.footer__inner{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}
.logo--ft{flex-direction:column;align-items:center;gap:4px;margin:0}
.logo--ft .logo__main{font-size:28px}
.logo--ft .logo__sub{display:block}
.footer__info{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;font-size:12px;opacity:.85}
.footer__info a{text-decoration:underline;text-underline-offset:3px}
.footer__info a:hover{color:var(--cyan)}
.footer__copy{text-align:center;margin-top:18px;opacity:.5;font-family:var(--en)}

/* ---------- floating CTA ---------- */
.float-cta{position:fixed;z-index:60;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:40px;background:rgba(7,8,12,.92);border:2px solid var(--green);box-shadow:0 0 18px rgba(6,199,85,.45);font-size:14px;font-weight:700;opacity:0;transform:translateY(20px);pointer-events:none;transition:.3s}
.float-cta.is-show{opacity:1;transform:none;pointer-events:auto}
.float-cta__ico{width:34px;height:34px;flex:none}
.float-cta span{flex:1;text-align:center}
.float-cta__arw{width:18px;height:18px;color:var(--green)}

/* ================= tablet ================= */
@media (min-width:600px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .flow__list{grid-template-columns:repeat(2,1fr)}
  .flow__list li:not(:last-child)::after{display:none}
}

/* ================= PC ================= */
@media (min-width:960px){
  html{scroll-padding-top:72px}
  .header__inner{height:64px;padding:0 32px}
  .logo__sub{display:inline}
  .gnav{display:flex;gap:28px;font-size:13px;font-weight:700;margin-right:12px}
  .gnav a:hover{color:var(--cyan)}
  .header .btn-line--sm{padding:8px 14px;border-radius:6px}
  .header .btn-line--sm span,.header .btn-line--sm .btn-line__arw{display:block}

  .fv{padding-top:120px}
  .fv__bg{left:38%;opacity:1;background-position:0 100%}
  .fv__bg::after{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.2) 30%,transparent 60%),linear-gradient(180deg,transparent 60%,#000 100%)}
  .fv__inner{padding:0 48px}
  .fv__eyebrow{font-size:16px}
  .fv__catch{font-size:clamp(64px,6.4vw,92px)}
  .fv__lead,.fv__name{font-size:17px}
  .fv__name{margin-top:14px}
  .fv .btn-line--lg{font-size:20px;padding:18px 26px}
  .fv__side--top{display:block;right:48px;top:150px;font-size:10px}
  .fv__hand{display:block;right:8%;top:30%;font-size:clamp(30px,2.9vw,44px)}
  .fv__logo{margin-top:20px;padding-right:140px}
  .fv__side--btm{display:block;right:48px;bottom:24px;font-size:10px}

  .zero{padding:56px 48px}
  .zero__inner{display:flex;align-items:center;justify-content:center;gap:48px}
  .zero__title{font-size:44px;text-align:left;padding-right:48px;border-right:1px solid #999}
  .zero__list{margin:0;gap:20px}
  .zero__list li{width:150px;max-width:none}
  .zero__label{font-size:16px}
  .zero__val{font-size:60px}
  .zero__val--pink{font-size:44px}

  .container{padding:0 40px}
  .sec-head{margin-bottom:40px}
  .sec-head__ttl{font-size:38px}
  .sec-head--dark .sec-head__ttl{display:flex;align-items:center;gap:24px}
  .sec-head--dark .sec-head__ttl::after{content:"";width:56px;height:1px;background:#fff}
  .sec-head__side{display:block;position:absolute;right:0;bottom:6px;font-family:var(--en);font-size:9px;letter-spacing:.18em;line-height:1.9;opacity:.8}

  .why{padding:88px 0 96px}
  .why-main{grid-template-columns:44% 1fr;min-height:300px}
  .why-main__num{font-size:160px;left:40px;top:50%;transform:translateY(-50%)}
  .why-main__tag{font-size:8px;left:-22px;top:20px}
  .why-main__img{height:auto}
  .why-main__img::after{background:linear-gradient(90deg,#0a0b10 0%,transparent 35%,transparent 70%,#0a0b10 100%)}
  .why-main__body{padding:36px 40px 36px 0}
  .why-main__ttl{font-size:32px}
  .why-main__ttl span{font-size:24px}
  .why-grid{grid-template-columns:repeat(3,1fr)}
  .why-grid li{padding:26px 24px;min-height:110px}
  .why-grid__num{font-size:48px;width:64px}

  .benefit{padding:56px 48px}
  .benefit__inner{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center}
  .benefit__right{padding-left:48px;border-left:1px solid rgba(0,0,0,.4)}
  .benefit__ttl{font-size:32px}
  .benefit__big-l{font-size:64px}
  .benefit__big-r{font-size:clamp(88px,8.4vw,120px)}
  .benefit__sub{font-size:24px}

  .flow{padding:80px 0}
  .flow__list{grid-template-columns:repeat(4,1fr);gap:28px}
  .flow__list li{padding:22px 20px;grid-template-columns:54px 1fr}
  .flow__list li:not(:last-child)::after{display:block;left:auto;right:-20px;top:50%;bottom:auto;transform:translateY(-50%) rotate(-45deg)}
  .flow__ico{width:50px;height:50px}

  .cta{padding:80px 48px 88px}
  .cta__ttl{font-size:56px}
  .cta__lead{font-size:26px}
  .cta__lead span{font-size:20px}
  .cta .btn-line--lg{max-width:560px;font-size:21px;padding:18px 28px}
  .cta__bg{width:36%;opacity:1}

  .footer{padding:36px 48px 40px}
  .footer__inner{flex-direction:row;justify-content:space-between}
  .logo--ft{align-items:flex-start}
  .footer__info{gap:28px;font-size:13px}

  .float-cta{left:auto;right:24px;bottom:24px;width:auto;padding:10px 20px 10px 10px}
  .float-cta span{flex:none}
}