スタンプカメラ

スタンプカメラ

無音で、かわいく、すぐ撮れる。

スタンプを選ぶ（横スライド）

選択：0

フレームを1つ選ぶ（横スライド）

状態：なし

次の画面でカメラの使用許可を求められます

準備中

スタンプ

フレーム

プレビュー

:root{--brand:#f39a38;--mint:#8fe7d9;--sky:#86d9ff;--pink:#ff99c8;--purple:#b9a6ff;--yellow:#ffe98a;--ink:#3b2d2d;--shadow:0 12px 30px rgba(0,0,0,.12);--shadow2:0 8px 20px rgba(0,0,0,.10);--radius:20px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;color:var(--ink);font-family:system-ui,-apple-system,Segoe\ UI,Roboto,Helvetica,Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;background:radial-gradient(1200px 600px at 12% 8%,rgba(255,153,200,.30),transparent 60%) , radial-gradient(900px 500px at 88% 12%,rgba(134,217,255,.28),transparent 60%) , radial-gradient(900px 500px at 18% 88%,rgba(185,166,255,.26),transparent 60%) , radial-gradient(900px 500px at 92% 86%,rgba(143,231,217,.26),transparent 60%) , linear-gradient(180deg,#fff 0%,#fff7fb 40%,#f6fbff 100%);overflow-x:hidden}body::before{content:"";position:fixed;inset:-40px;background-image:radial-gradient(circle at 20px 20px,rgba(255,153,200,.22) 0 6px,transparent 7px) , radial-gradient(circle at 70px 30px,rgba(134,217,255,.18) 0 7px,transparent 8px) , radial-gradient(circle at 40px 80px,rgba(255,233,138,.18) 0 6px,transparent 7px) , radial-gradient(circle at 90px 90px,rgba(185,166,255,.16) 0 6px,transparent 7px);background-size:120px 120px;opacity:.55;pointer-events:none;z-index:-1}.topBar{position:sticky;top:0;z-index:50;padding:10px 12px;backdrop-filter:blur(10px);background:linear-gradient(90deg,rgba(255,255,255,.78),rgba(255,255,255,.55));border-bottom:1px solid rgba(0,0,0,.06)}.topInner{max-width:980px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px}.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.02em}.brandIcon{width:36px;height:36px;border-radius:999px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.12);object-fit:contain;border:2px solid rgba(0,0,0,.06)}.brandTitle{font-size:16px;display:flex;flex-direction:column;line-height:1.1}.brandTitle b{font-size:18px;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--mint),var(--sky),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 0 rgba(255,255,255,.6)}.brandTitle span{font-weight:700;font-size:12px;opacity:.75}.topBtns{display:flex;gap:8px;align-items:center}.btn{appearance:none;border:0;cursor:pointer;padding:10px 12px;border-radius:999px;font-weight:800;color:#fff;box-shadow:var(--shadow2);user-select:none;white-space:nowrap}.btn:active{transform:translateY(1px)}.btn.secondary{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.75))}.btn.brand{background:linear-gradient(90deg,var(--pink),var(--brand))}.btn.sky{background:linear-gradient(90deg,var(--sky),var(--mint))}.wrap{max-width:980px;margin:0 auto;padding:14px}.intro{position:fixed;inset:0;z-index:99999;padding:clamp(14px,3.5vw,22px);display:grid;grid-template-rows:auto 1fr auto;gap:12px;background:radial-gradient(900px 500px at 10% 0%,rgba(255,153,200,.28),transparent 60%) , radial-gradient(900px 500px at 90% 0%,rgba(134,217,255,.25),transparent 60%) , radial-gradient(900px 500px at 10% 100%,rgba(185,166,255,.22),transparent 60%) , radial-gradient(900px 500px at 90% 100%,rgba(143,231,217,.22),transparent 60%) , linear-gradient(180deg,#fff 0%,#fff8fb 55%,#f6fbff 100%)}.introHeader{display:flex;align-items:center;justify-content:space-between;gap:12px}.introHero{display:flex;align-items:center;gap:12px;padding:14px 14px;border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.65));box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06);position:relative;overflow:hidden}.introHero::before{content:"";position:absolute;inset:-2px;background:linear-gradient(90deg,rgba(255,153,200,.40),rgba(255,233,138,.35),rgba(143,231,217,.35),rgba(134,217,255,.35),rgba(185,166,255,.35));opacity:.35;filter:blur(14px)}.introHero>*{position:relative;z-index:1}.heroTitle{font-weight:1000;font-size:clamp(22px,3.2vw,30px);line-height:1.15;letter-spacing:.03em;text-shadow:0 3px 0 rgba(255,255,255,.8);-webkit-text-stroke:.6px rgba(90,58,58,.35)}.heroTitle .grad{background:linear-gradient(90deg,var(--pink),var(--yellow),var(--mint),var(--sky),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}.heroSub{margin-top:6px;font-size:13px;font-weight:800;opacity:.8}.introBody{overflow:auto;display:grid;gap:12px}.panel{border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.66));border:1px solid rgba(0,0,0,.06);box-shadow:var(--shadow);padding:12px;position:relative;overflow:hidden}.panel::after{content:"";position:absolute;inset:auto -40px -40px auto;width:180px;height:180px;background:radial-gradient(circle at 30% 30%,rgba(255,153,200,.35),transparent 60%) , radial-gradient(circle at 70% 60%,rgba(134,217,255,.28),transparent 60%);filter:blur(12px);opacity:.55;pointer-events:none}.panelHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.panelHead h3{margin:0;font-size:14px;font-weight:1000;letter-spacing:.02em;display:flex;align-items:center;gap:8px}.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900;background:rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.06);box-shadow:0 6px 16px rgba(0,0,0,.08);white-space:nowrap}.chip strong{color:var(--brand)}.hScroll{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:82px;column-gap:10px;row-gap:10px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.hScroll::-webkit-scrollbar{height:10px}.hScroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:999px}.hItem{width:auto;scroll-snap-align:start}.thumb{width:100%;aspect-ratio: 1/1;border-radius:16px;background:#fff;border:2px solid rgba(0,0,0,.06);box-shadow:0 10px 18px rgba(0,0,0,.08);overflow:hidden;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .08s ease , border-color .08s ease , box-shadow .08s ease;user-select:none}.thumb:active{transform:translateY(1px) scale(.98)}.thumb img{width:100%;height:100%;object-fit:contain;display:block;padding:6px}.thumb.sel1{border-color:rgba(243,154,56,.95);box-shadow:0 12px 22px rgba(243,154,56,.22)}.thumb.sel2{border-color:rgba(134,217,255,.95);box-shadow:0 12px 22px rgba(134,217,255,.22)}.thumb .badgeCount{position:absolute;right:8px;top:8px;min-width:22px;height:22px;border-radius:999px;padding:0 6px;display:grid;place-items:center;font-size:12px;font-weight:1000;color:#fff;background:linear-gradient(90deg,var(--pink),var(--purple));box-shadow:0 8px 16px rgba(0,0,0,.16)}.thumb.frameSel{border-color:rgba(255,153,200,.95);box-shadow:0 12px 22px rgba(255,153,200,.22)}.thumb.frameNone{background:linear-gradient(180deg,#fff,#fff)}.thumb.frameNone svg{width:56px;height:56px;opacity:.75}.introFooter{display:grid;gap:10px}.startBtn{width:100%;padding:16px 18px;border-radius:18px;border:0;cursor:pointer;font-weight:1000;font-size:16px;color:#fff;letter-spacing:.02em;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--mint),var(--sky),var(--purple));box-shadow:0 14px 30px rgba(0,0,0,.15)}.startBtn:active{transform:translateY(1px)}.note{font-size:12px;opacity:.8;text-align:center}.stage{display:none}.stage.active{display:block}.camCard{border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.68));border:1px solid rgba(0,0,0,.06);box-shadow:var(--shadow);padding:12px;overflow:hidden}.camArea{position:relative;width:min(92vw,720px);margin:0 auto;aspect-ratio: 9 / 16;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 16px 34px rgba(0,0,0,.18);border:3px solid rgba(255,255,255,.9)}video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}#frameOverlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;display:none;z-index:2}#overlayCam{position:absolute;inset:0;width:100%;height:100%;pointer-events:auto;touch-action:pan-y;z-index:3}body.immersive #overlayCam{touch-action:none}.badgeTop{position:absolute;left:10px;top:10px;z-index:10;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:1000;color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}.controlsBar{display:flex;justify-content:center;align-items:center;gap:12px;margin:12px 0 2px}#btnShot{width:92px;height:92px;border-radius:999px;border:10px solid rgba(255,255,255,.85);background:radial-gradient(circle at 30% 30%,#fff,#f7f7f7);box-shadow:0 18px 36px rgba(0,0,0,.18);color:#333;font-weight:1000;cursor:pointer}#btnShot:active{transform:translateY(1px) scale(.99)}.btnCtl{appearance:none;border:0;cursor:pointer;padding:14px 16px;border-radius:999px;font-weight:1000;color:#fff;box-shadow:var(--shadow2);background:linear-gradient(90deg,var(--sky),var(--mint));white-space:nowrap}.btnCtl:active{transform:translateY(1px)}.miniLabel{font-size:12px;font-weight:1000;opacity:.82;text-align:center;margin:12px 0 8px;letter-spacing:.08em}.thumbRow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.thumbRow img{width:64px;height:64px;border-radius:14px;background:#fff;border:2px solid rgba(0,0,0,.06);box-shadow:0 10px 18px rgba(0,0,0,.10);object-fit:contain;padding:6px;cursor:pointer;user-select:none}.thumbRow img.sel{border-color:rgba(243,154,56,.95);box-shadow:0 12px 22px rgba(243,154,56,.22)}.thumbRow img.sel.blue{border-color:rgba(134,217,255,.95);box-shadow:0 12px 22px rgba(134,217,255,.22)}.canvasWrap{position:relative;max-width:720px;margin:0 auto}#photoCanvas{width:100%;height:auto;display:block;border-radius:18px;box-shadow:0 16px 34px rgba(0,0,0,.18);background:#000;border:3px solid rgba(255,255,255,.9)}.ctaRow{display:flex;gap:10px;justify-content:center;flex-wrap:nowrap;margin-top:12px}.ctaRow .btnBig{padding:12px 18px;border-radius:999px;border:0;cursor:pointer;font-weight:1000;font-size:15px;color:#fff;box-shadow:var(--shadow2);white-space:nowrap}.ctaRow .btnBig.secondary{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.75))}.ctaRow .btnBig.brand{background:linear-gradient(90deg,var(--pink),var(--brand))}.sticker{position:absolute;left:50%;top:50%;width:200px;transform:translate(-50%,-50%) rotate(0deg) scale(1);transform-origin:center;touch-action:none;cursor:move;outline-offset:2px}.sticker.selected{outline:2px solid rgba(243,154,56,.9)}.sticker img{display:block;width:100%;height:auto;user-select:none;pointer-events:none}.hitbox{position:absolute;left:-10%;top:-10%;right:-10%;bottom:-10%;background:transparent;touch-action:none}.stDel{position:absolute;right:-12px;top:-12px;width:30px;height:30px;border-radius:999px;background:#000;border:2px solid #fff;padding:0;z-index:2;display:none;cursor:pointer;box-shadow:0 10px 18px rgba(0,0,0,.22)}.stDel::before,.stDel::after{content:"";position:absolute;left:50%;top:50%;width:60%;height:2px;background:#fff;transform-origin:center}.stDel::before{transform:translate(-50%,-50%) rotate(45deg)}.stDel::after{transform:translate(-50%,-50%) rotate(-45deg)}.sticker.selected .stDel{display:block}#palette{position:absolute;display:none;gap:8px;padding:9px;border-radius:9999px;background:rgba(0,0,0,.50);backdrop-filter:blur(8px);z-index:9999;grid-auto-rows:28px;box-shadow:0 14px 30px rgba(0,0,0,.20)}#palette .sw{width:28px;height:28px;border-radius:999px;border:2px solid #fff;cursor:pointer}.pickerMask{position:fixed;inset:0;z-index:999999;display:none;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);padding:14px}.pickerPanel{max-width:720px;margin:0 auto;height:min(78svh,760px);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.80));border:1px solid rgba(0,0,0,.08);box-shadow:0 18px 40px rgba(0,0,0,.18);display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}.pickerHead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border-bottom:1px solid rgba(0,0,0,.08)}.pickerTitle{font-weight:1000;letter-spacing:.02em}.pickerCount{font-size:12px;font-weight:900;opacity:.85}.pickerGrid{padding:12px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:10px;-webkit-overflow-scrolling:touch}.pItem{position:relative;border-radius:16px;background:#fff;border:2px solid rgba(0,0,0,.06);box-shadow:0 10px 18px rgba(0,0,0,.10);aspect-ratio: 1/1;display:grid;place-items:center;cursor:pointer;user-select:none;overflow:hidden}.pItem img{width:100%;height:100%;object-fit:contain;padding:8px}.pItem.sel{border-color:rgba(243,154,56,.95);box-shadow:0 14px 24px rgba(243,154,56,.22)}.pTick{position:absolute;right:8px;top:8px;width:22px;height:22px;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--purple));color:#fff;font-size:12px;font-weight:1000;display:none;place-items:center;box-shadow:0 10px 18px rgba(0,0,0,.18)}.pItem.sel .pTick{display:grid}.pickerFoot{padding:12px;border-top:1px solid rgba(0,0,0,.08);display:flex;gap:10px;justify-content:flex-end;align-items:center}.btnSmall{appearance:none;border:0;cursor:pointer;padding:12px 14px;border-radius:999px;font-weight:1000;color:#fff;box-shadow:var(--shadow2);white-space:nowrap}.btnSmall.secondary{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.75))}.btnSmall.brand{background:linear-gradient(90deg,var(--pink),var(--brand))}body.immersive{background:#000;overflow:hidden}body.immersive .topBar,body.immersive footer,body.immersive .miniLabel,body.immersive #thumbsCam,body.immersive #thumbsFrames{display:none!important}body.immersive .wrap{padding:0;max-width:none}body.immersive .camCard{border-radius:0;box-shadow:none;border:0;background:#000;padding:0}body.immersive .camArea{border-radius:0;width:100vw;height:100svh;aspect-ratio:auto;border:0;box-shadow:none}body.immersive .controlsBar{position:fixed;left:50%;transform:translateX(-50%);bottom: calc(env(safe-area-inset-bottom) + 16px);z-index:2147483647;margin:0;gap:14px}body.immersive .btnCtl{padding:16px 18px}body.immersive .ctaRow{position:fixed;left:50%;transform:translateX(-50%);bottom: calc(env(safe-area-inset-bottom) + 16px);z-index:2147483647;margin-top:0}.flip180 video{transform:rotate(180deg)}.mirror video{transform:scaleX(-1)}.flip180.mirror video{transform:rotate(180deg) scaleX(-1)}footer{padding:18px 12px 22px;text-align:center;color:rgba(0,0,0,.55);font-size:12px}