:root{--ink:#111214;--bg:#e9e9ec;--paper:#fff;--lime:#ddff2e;--blue:#0a66ff;--sky:#eaf4fd;--orange:#f06a2b;--pink:#ff7fb0;--mint:#9ce8c8;--sub:#4a4a52}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;font-size:17px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.en{font-family:Manrope,"Helvetica Neue",Arial,sans-serif}
.in{max-width:1180px;margin:0 auto;padding:0 28px;position:relative}
section{position:relative;padding:120px 0}
h1,h2,h3{font-weight:900;letter-spacing:-.01em;margin:0}
h2{font-size:clamp(32px,5vw,58px);line-height:1.3;margin-bottom:22px}
h3{font-size:clamp(22px,2.6vw,30px);line-height:1.45}
.hl{background:var(--lime);color:var(--ink);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lab{display:inline-block;background:var(--ink);color:#fff;font-family:Manrope,sans-serif;font-weight:800;font-size:13px;letter-spacing:.08em;padding:7px 14px;margin-bottom:20px}
.lab.l{background:var(--lime);color:var(--ink)}
.lead{font-size:18px;color:var(--sub);max-width:760px;margin:0}
.num{position:absolute;right:28px;top:-40px;font-family:Manrope,sans-serif;font-weight:800;font-size:clamp(120px,18vw,240px);line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px rgba(17,18,20,.12);pointer-events:none;user-select:none}
.works .num,.gets .num{-webkit-text-stroke:2px rgba(255,255,255,.14)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:900;font-size:17px;text-decoration:none;border:3px solid var(--ink);border-radius:999px;padding:16px 30px;transition:transform .12s,box-shadow .12s;cursor:pointer;font-family:inherit}
.btn.k{background:var(--ink);color:#fff;box-shadow:5px 5px 0 var(--blue)}
.btn.w{background:#fff;color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.btn.l{background:var(--lime);color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.btn:hover{transform:translate(-2px,-2px)}
.btn.k:hover{box-shadow:7px 7px 0 var(--blue)}.btn.w:hover,.btn.l:hover{box-shadow:7px 7px 0 var(--ink)}
.stk{position:absolute;pointer-events:none}
@keyframes fl{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(var(--r,0deg))}}
.float{animation:fl 5s ease-in-out infinite}

header{position:fixed;inset:0 0 auto 0;z-index:50;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;transition:background .2s}
header.s{background:rgba(17,18,20,.94);backdrop-filter:blur(8px);border-bottom:2px solid var(--lime)}
header.s .logo,header.s .hnav a.t{color:#fff!important}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;text-decoration:none;color:#fff;transition:color .2s}
header.s .logo{color:var(--ink)}
.logo i{font-style:normal;width:34px;height:34px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:16px;border:2px solid var(--ink)}
.hnav{display:flex;align-items:center;gap:22px}
.hnav a.t{color:#fff;text-decoration:none;font-weight:700;font-size:14px}
header.s .hnav a.t{color:var(--ink)}
.hnav .btn{padding:9px 18px;font-size:14px;border-width:2px;box-shadow:3px 3px 0 var(--ink)}

.fv{background:var(--ink);color:#fff;padding:140px 0 90px;overflow:hidden}
.fv .bigw{position:absolute;left:-2%;top:90px;font-family:Manrope,sans-serif;font-weight:800;font-size:clamp(100px,17vw,250px);line-height:.95;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.08);white-space:nowrap;pointer-events:none}
.fv .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;position:relative;z-index:2}
.fv h1{font-size:clamp(30px,4.2vw,58px);line-height:1.25;margin-bottom:24px}
.fv h1 .nw{white-space:nowrap}
.fv h1 .sm{display:block;font-size:.5em;margin-top:14px;color:#c9c9d1;font-weight:800}
.fv .lead{color:#c9c9d1;font-size:19px;margin-bottom:34px}
.fv .acts{display:flex;gap:16px;flex-wrap:wrap}
.fv .btn.w{box-shadow:5px 5px 0 var(--lime)}
.devices{position:relative;height:500px}
.dev{position:absolute;background:#fff;border:4px solid #fff;border-radius:18px;overflow:hidden;box-shadow:10px 10px 0 var(--lime)}
.dev img{width:100%;height:100%;object-fit:cover;object-position:top}
.dev.pc{width:92%;aspect-ratio:3/2;height:auto;right:0;top:30px}
.dev.pc .bar{height:22px;background:#f1f1f3;display:flex;gap:6px;align-items:center;padding:0 10px}
.dev.pc .bar b{width:9px;height:9px;border-radius:50%;background:#d8d8de}.dev.pc .bar b:first-child{background:#ff6b5b}
.dev.pc img{height:calc(100% - 22px)}
.dev.sp{width:30%;aspect-ratio:9/18;left:0;bottom:-10px;border-radius:26px;border-width:6px;box-shadow:10px 10px 0 var(--blue)}
.dev.sp img{object-position:28% top}
.tagl{position:absolute;z-index:3;background:var(--ink);color:#fff;border:2px solid #fff;border-radius:999px;padding:6px 14px;font-family:Manrope,sans-serif;font-weight:800;font-size:13px;letter-spacing:.06em}
.fv .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px}
.fv .chips span{border:2px solid rgba(255,255,255,.5);border-radius:999px;padding:6px 14px;font-weight:700;font-size:14px}
.fv .chips b{color:var(--lime)}

.mq{background:var(--lime);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);overflow:hidden;padding:24px 0;white-space:nowrap}
.mq.b{background:var(--blue);color:#fff}
.mq div{display:inline-block;animation:mq 30s linear infinite;font-family:Manrope,sans-serif;font-weight:800;font-size:clamp(30px,4.6vw,56px);letter-spacing:-.01em}
.mq.b div{animation-direction:reverse}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.works{background:var(--ink);color:#fff;padding-bottom:80px}
.works .lead{color:#c9c9d1}
.wall{margin-top:56px;display:flex;flex-direction:column;gap:26px;overflow:hidden;padding:10px 0 14px}
.row{display:flex;gap:24px;width:max-content;animation:wl 60s linear infinite}
.row.r2{animation-direction:reverse;animation-duration:70s}
@keyframes wl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tile{width:380px;flex:0 0 auto;background:#fff;border-radius:14px;overflow:hidden;border:3px solid #fff;transform:rotate(var(--r,0deg))}
.tile:nth-child(4n+1){box-shadow:8px 8px 0 var(--lime)}.tile:nth-child(4n+2){box-shadow:8px 8px 0 var(--pink)}.tile:nth-child(4n+3){box-shadow:8px 8px 0 var(--blue)}.tile:nth-child(4n){box-shadow:8px 8px 0 var(--mint)}
.tile img{aspect-ratio:3/2;width:100%;object-fit:cover;object-position:top}
.tile p{margin:0;color:var(--ink);font-weight:900;font-size:15px;padding:8px 12px;display:flex;justify-content:space-between}
.tile p span{font-weight:700;font-size:12px;color:#66666f}
.cats{display:flex;gap:10px;flex-wrap:wrap;margin-top:44px}
.cats span{background:#fff;color:var(--ink);border-radius:999px;padding:8px 16px;font-weight:800;font-size:15px}
.cats span b{font-family:Manrope,sans-serif;color:var(--blue);margin-left:6px}
.works .acts{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap}
.works .btn.w{box-shadow:5px 5px 0 var(--lime)}

.why{background:var(--sky)}
.bens{display:grid;gap:44px;margin-top:64px}
.ben{background:#fff;border:3px solid var(--ink);border-radius:28px;box-shadow:8px 8px 0 var(--ink);padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;position:relative}
.ben:nth-child(even) .vis{order:-1}
.bn{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.bn b{width:64px;height:64px;border-radius:50%;border:3px solid var(--ink);background:var(--lime);display:grid;place-items:center;font-family:Manrope,sans-serif;font-size:22px;box-shadow:3px 3px 0 var(--ink)}
.bn span{font-family:Manrope,sans-serif;font-weight:800;color:var(--blue);letter-spacing:.14em;font-size:14px}
.ben p{color:var(--sub);margin:16px 0 0}
.vis{border:3px solid var(--ink);border-radius:20px;min-height:290px;position:relative;overflow:hidden;display:grid;place-items:center;padding:28px;background-color:var(--blue);background-image:radial-gradient(rgba(255,255,255,.25) 1.5px,transparent 1.5px);background-size:22px 22px}
.vis.l{background-color:var(--lime);background-image:radial-gradient(rgba(17,18,20,.15) 1.5px,transparent 1.5px)}
.vis.p{background-color:var(--pink)}
.vis.m{background-color:var(--mint);background-image:radial-gradient(rgba(17,18,20,.12) 1.5px,transparent 1.5px)}
.vis img.shot{width:80%;border:3px solid var(--ink);border-radius:12px;box-shadow:6px 6px 0 var(--ink);transform:rotate(-3deg)}
.say{position:absolute;left:18px;bottom:18px;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:6px 16px;font-weight:800;font-size:15px;box-shadow:3px 3px 0 var(--ink)}
.seal{position:absolute;right:16px;top:16px;width:116px;height:116px;border-radius:50%;background:var(--lime);border:3px solid var(--ink);display:grid;place-items:center;text-align:center;font-weight:900;line-height:1.25;transform:rotate(12deg);box-shadow:4px 4px 0 var(--ink);font-size:14px}
.seal .en{font-size:22px;display:block}
.kw{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.kw span{background:#fff;border:2px solid var(--ink);border-radius:999px;padding:6px 14px;font-weight:800;font-size:15px;box-shadow:3px 3px 0 var(--ink)}
.kw span:nth-child(3n){background:var(--blue);color:#fff}
.flowv{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.flowv span{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:14px 16px;font-weight:900;text-align:center;box-shadow:4px 4px 0 var(--ink);font-size:16px}
.flowv i{font-style:normal;font-weight:900;font-size:24px}
.flowv span.g{background:var(--lime)}
.ab{display:flex;gap:14px;align-items:center}
.ab div{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:16px;width:150px;text-align:center;box-shadow:4px 4px 0 var(--ink);font-weight:900;line-height:1.4}
.ab div b{display:block;font-family:Manrope,sans-serif;font-size:44px;line-height:1.1}
.ab .vs{font-family:Manrope,sans-serif;font-weight:800;font-size:28px}

.entry{background:var(--paper)}
.ents{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:56px}
.ent{border:3px solid var(--ink);border-radius:28px;padding:38px;box-shadow:8px 8px 0 var(--ink);background:#fff;display:flex;flex-direction:column}
.ent.h{box-shadow:8px 8px 0 var(--blue)}
.ent .who{align-self:flex-start;background:var(--ink);color:#fff;font-weight:900;font-size:14px;padding:6px 14px;margin-bottom:16px}
.ent.h .who{background:var(--blue)}
.ent ol{list-style:none;counter-reset:s;padding:0;margin:22px 0 28px;flex:1}
.ent li{counter-increment:s;display:flex;gap:14px;align-items:center;padding:11px 0;border-bottom:2px dashed #d7d7dc;font-weight:700}
.ent li::before{content:counter(s);flex:0 0 36px;height:36px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-family:Manrope,sans-serif;font-weight:800;background:var(--lime)}
.ent.h li::before{background:#cfe1ff}
.ent .note{font-size:14px;color:var(--sub);background:var(--sky);border-radius:14px;padding:12px 16px;margin:0 0 22px}

.how{background:var(--sky)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px}
.st{background:#fff;border:3px solid var(--ink);border-radius:24px;padding:32px 28px;box-shadow:6px 6px 0 var(--ink)}
.st .n{width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;border:3px solid var(--ink);display:grid;place-items:center;font-family:Manrope,sans-serif;font-weight:800;font-size:24px;margin-bottom:16px}
.st p{color:var(--sub);margin:10px 0 0;font-size:16px}
.send{margin-top:34px;background:var(--ink);color:#fff;border-radius:22px;padding:26px 30px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.send .bub{background:#fff;color:var(--ink);border-radius:18px 18px 18px 4px;padding:12px 18px;font-weight:800}
.send small{color:#c9c9d1;font-size:15px}
.six{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:30px}
.six div{background:#fff;border:2px solid var(--ink);border-radius:16px;padding:14px 10px;text-align:center;font-weight:900;font-size:15px}
.six div span{display:block;font-family:Manrope,sans-serif;color:var(--blue);font-size:12px;letter-spacing:.1em}

.gets{background:var(--blue);color:#fff}
.gets .lead{color:#dce8ff}
.glist{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:56px}
.gi{background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:24px;padding:30px;box-shadow:8px 8px 0 var(--ink)}
.gi .en{display:inline-block;background:var(--lime);border:2px solid var(--ink);border-radius:999px;font-weight:800;font-size:14px;padding:2px 12px;margin-bottom:12px}
.gi p{color:var(--sub);margin:10px 0 0;font-size:16px}

.plans{background:var(--paper)}
.pl{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px;align-items:stretch}
.p{border:3px solid var(--ink);border-radius:26px;padding:32px 28px;background:#fff;box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column;position:relative}
.p.pick{background:var(--lime);box-shadow:8px 8px 0 var(--blue)}
.p.pick::before{content:"いちばん人気";position:absolute;top:-18px;left:24px;background:var(--ink);color:#fff;font-weight:900;font-size:14px;padding:5px 14px}
.pr{font-family:Manrope,sans-serif;font-weight:800;font-size:44px;line-height:1.1;margin:10px 0 2px}
.pr small{font-family:"Hiragino Sans",sans-serif;font-size:15px;font-weight:700}
.p .for{color:var(--sub);font-size:15px;margin:0 0 14px}
.p ul{list-style:none;padding:0;margin:0 0 24px;flex:1}
.p li{padding:8px 0 8px 28px;position:relative;font-weight:700;font-size:16px;border-bottom:2px dashed rgba(17,18,20,.15)}
.p li::before{content:"✓";position:absolute;left:2px;font-weight:900}

.faq{background:#fff}
.qa{max-width:900px;margin:44px auto 0}
.qa details{border:3px solid var(--ink);border-radius:20px;margin-bottom:14px;padding:0 26px;background:#fff}
.qa details[open]{box-shadow:5px 5px 0 var(--ink)}
.qa summary{cursor:pointer;list-style:none;font-weight:900;font-size:18px;padding:20px 30px 20px 44px;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q";position:absolute;left:0;top:18px;width:32px;height:32px;border-radius:50%;background:var(--lime);border:2px solid var(--ink);display:grid;place-items:center;font-family:Manrope,sans-serif;font-size:15px}
.qa summary::after{content:"＋";position:absolute;right:0;top:18px;font-size:22px}
.qa details[open] summary::after{content:"－"}
.qa p{margin:0 0 22px 44px;color:var(--sub)}

.end{background:var(--lime);text-align:center;border-top:3px solid var(--ink)}
.end h2{font-size:clamp(34px,5.4vw,64px)}
.end p{font-size:19px;margin:0 0 34px}
.end .acts{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
footer{background:var(--ink);color:#9b9ba3;text-align:center;padding:30px;font-size:14px}

@media (max-width:980px){
  .fv .grid,.ben,.ents{grid-template-columns:1fr}
  .ben:nth-child(even) .vis{order:0}
  .devices{height:420px}
  .steps,.pl,.glist{grid-template-columns:1fr}
  .six{grid-template-columns:repeat(3,1fr)}
  .hnav a.t{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  section{padding:84px 0}
  .in{padding:0 16px}
  .num{right:12px}
  .fv{padding:108px 0 70px}
  .devices{height:290px}
  .ben{padding:24px;border-radius:22px;gap:24px}
  .vis{min-height:230px;padding:20px}
  .ent{padding:24px}
  .tile{width:250px}
  .six{grid-template-columns:repeat(2,1fr)}
  .btn{width:100%}
  .hnav .btn{width:auto}
  header{padding:0 12px}
  .logo{font-size:15px;white-space:nowrap;gap:8px}.logo i{width:30px;height:30px;font-size:14px}
  .hnav .btn{padding:7px 12px;font-size:13px;white-space:nowrap}
  .seal{width:88px;height:88px;font-size:12px}.seal .en{font-size:16px}
  .say{font-size:13px}
  .ab div{width:118px;padding:12px}.ab div b{font-size:34px}
}
@media (prefers-reduced-motion:reduce){.row,.mq div,.float{animation:none}}