/* スマホの中の画面（本番の VoiceLetter の画面＝2026-06〜10 の実機の中身を HTML で組み直したもの）
   ・375×812 の大きさで作り、creators.js が枠に合わせて --k で縮める
   ・名前は〇〇か仮の名前、アイコンは人の形、文字起こしは〇〇。ぼかしは使わない（決定ログ 10/10）
   ・色は本番のアプリの色（紫〜桃のグラデーション・緑の再生ボタンなど）。LP の地の色とは別 */

.app{--a1:#8544F1;--a2:#DB60FF;--a3:#FD6AFB;--pk:#FF2FB0; /* ロゴの文字のグラデーションの色（CEO 2026-10-16「もとのロゴよりも滲んでる」→ ロゴと同じ鮮やかさに） */
  position:absolute;left:0;top:0;width:375px;height:812px;transform-origin:0 0;transform:scale(var(--k,.8));
  background:#F7F5FB;color:#1F1B2D;font-family:"Noto Sans JP",system-ui,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
.app .wrapper{position:absolute;inset:0;overflow:hidden}
.lp-screen > .app{opacity:0}
.lp-screen > .app.on{opacity:1}
html:not(.js) .lp-story .lp-screen > .app[data-i="3"]{opacity:1}

/* 上の時刻の帯（本番の撮影と同じ：明るい地に黒い文字。上の帯と同じ色でつなげて境目を作らない） */
.app .sb{height:50px;display:flex;align-items:center;justify-content:space-between;padding:4px 26px 0 36px;font:600 16px/1 "Inter",-apple-system,sans-serif;color:#111;background:#fff}
.app .sb.dk{color:#fff;background:transparent}
.app .sbi{display:flex;align-items:center;gap:6px;font:600 14px/1 "Inter",-apple-system,sans-serif}
.app .sbi .sig{width:18px;height:12px;background:
  linear-gradient(currentColor,currentColor) 0 100%/3px 4px no-repeat,linear-gradient(currentColor,currentColor) 5px 100%/3px 6px no-repeat,
  linear-gradient(currentColor,currentColor) 10px 100%/3px 9px no-repeat,linear-gradient(currentColor,currentColor) 15px 100%/3px 12px no-repeat}
.app .sbi .bat{position:relative;width:25px;height:12px;border-radius:4px;background:#111}
.app .sbi .bat::after{content:"";position:absolute;right:-3px;top:4px;width:2px;height:5px;border-radius:0 2px 2px 0;background:#111;opacity:.45}
.app .sb.dk .sbi .bat{background:#fff;color:#000}
.app .sb.dk .sbi .bat::after{background:#fff}

/* アプリの上の帯 */
.app .ah{position:relative;z-index:1;height:52px;display:flex;align-items:center;gap:16px;padding:0 18px;background:#fff;box-shadow:0 6px 14px -10px rgba(60,30,110,.25)}
.app .ah b{font-size:19px;font-weight:700;letter-spacing:.01em;margin-right:auto}
.app .ah.grad{background:linear-gradient(100deg,#E8248A,#C12FC0);box-shadow:none;border-bottom:1px solid rgba(255,255,255,.12)}
.app .ah.grad b{color:#fff}
.app .ah .gt{background:linear-gradient(100deg,var(--a1),var(--a2) 55%,var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent}
.app .mn{width:20px;height:14px;background:linear-gradient(var(--a1),var(--a1)) 0 0/100% 2px no-repeat,linear-gradient(var(--a1),var(--a1)) 0 6px/100% 2px no-repeat,linear-gradient(var(--a1),var(--a1)) 0 12px/100% 2px no-repeat}
.app .ah.grad .mn{filter:brightness(0) invert(1)}
.app .bell{width:18px;height:18px;border:2px solid var(--a1);border-radius:9px 9px 3px 3px;border-bottom-width:3px}

/* 人の形のアイコン（LINE の初期のアイコンのような） */
.app .av{flex:none;width:40px;height:40px;border-radius:50%;background:
  radial-gradient(circle at 50% 38%,#fff 0 22%,transparent 23%),radial-gradient(ellipse 48% 34% at 50% 98%,#fff 0 98%,transparent 100%),#C9CDD6}
.app .av.lt{background:radial-gradient(circle at 50% 38%,#fff 0 22%,transparent 23%),radial-gradient(ellipse 48% 34% at 50% 98%,#fff 0 98%,transparent 100%),#D7C8F7}

/* 0 録音（本番 2026-10-04 の実機の色と並び。光る輪などの足した動きはしない） */
.s-rec{background:linear-gradient(160deg,#E8248A 0%,#CF2BA8 36%,#A93AD8 70%,#8A3CF0 100%)}
.s-rec .sb{background:#F7FAFB}
.s-rec .rec-head{display:flex;align-items:center;gap:12px;padding:16px 16px 14px;color:#fff;font-size:19px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.12)}
.s-rec .bk{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:20px;line-height:1}
.s-rec .rec-to{margin:24px 18px 0;padding:22px 18px;border-radius:16px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;gap:16px;color:#fff;font-size:17px}
.s-rec .rec-to .av{width:52px;height:52px}
.s-rec .rec-to .av-img{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;display:block}
.s-rec .rec-pad{margin:24px 18px 0;min-height:382px;padding:53px 0 30px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;color:#fff}
/* 録音前：白い縁の丸＋「タップして想いを伝えよう」／録音中（.rec）：本番 2026-10-04 の実機どおり、縁の無い光る玉・点の波形・大きな秒数・最大10秒・残り（赤）・進む棒・タップして停止・キャンセル */
.s-rec .rec-btn{flex:none;width:150px;height:150px;border-radius:50%;background-origin:border-box;background-repeat:no-repeat;background:linear-gradient(160deg,#F066AC,#EC539F);border:5px solid #fff;box-shadow:inset 0 0 0 3px #B04A9C,0 0 26px 6px rgba(255,190,230,.55);transition:transform .25s,border-color .3s,box-shadow .3s,background .3s}
.s-rec.tap .rec-btn{transform:scale(.92)}
.s-rec.rec .rec-btn{border-width:0;background:radial-gradient(circle at 36% 30%,#FA8C98 0%,#EF4F9E 42%,#D93A92 70%,#B42F84 100%);box-shadow:0 0 16px 3px rgba(255,140,210,.35)}
.s-rec .rec-hint{margin-top:80px;font-size:17px;font-weight:700}
.s-rec.rec .rec-hint{display:none}
.s-rec .rec-live{display:none;flex-direction:column;align-items:center;width:100%}
.s-rec.rec .rec-live{display:flex}
.s-rec .rec-wave{margin-top:40px;display:flex;align-items:center;gap:3px;height:10px}
.s-rec .rec-wave i{width:3px;height:3px;border-radius:2px;background:rgba(255,255,255,.55);animation:rec-dot .9s ease-in-out infinite alternate}
.s-rec .rec-wave i:nth-child(3n){animation-delay:-.3s}.s-rec .rec-wave i:nth-child(3n+1){animation-delay:-.6s}
@keyframes rec-dot{to{height:9px}}
.s-rec .rec-time{margin-top:38px;font:800 36px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:#fff}
.s-rec .rec-max{margin-top:6px;font-size:12px;color:rgba(255,255,255,.8)}
.s-rec .rec-left{margin-top:6px;height:14px;font-size:12px;color:#FF4D5E;font-weight:700;visibility:hidden}
.s-rec.late .rec-left{visibility:visible}
.s-rec .rec-bar{margin-top:10px;width:180px;height:5px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
.s-rec .rec-bar i{display:block;height:100%;width:100%;background:#fff;transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .4s linear}
.s-rec .rec-stop{margin-top:16px;font-size:12px;color:rgba(255,255,255,.8)}
.s-rec .rec-cancel{margin-top:34px;padding:15px 52px;border-radius:12px;background:#D9DBE2;color:#333;font-size:15px;font-weight:600}
.s-rec.rec .rec-foot{display:none} /* 録音中は枠が伸びて画面の外に押し出される */
.s-rec .rec-foot{position:absolute;left:0;right:0;bottom:30px;text-align:center;font-size:13px;color:rgba(255,255,255,.85)}

/* 1・2 届いたレターの一覧 */
.app .in-card{margin:14px 14px 10px;height:84px;border-radius:16px;background:linear-gradient(100deg,var(--a1),var(--a2) 60%,var(--a3));display:flex;align-items:center;justify-content:space-between;padding:0 22px;color:#fff;box-shadow:0 10px 24px rgba(133,68,241,.35)}
.app .in-card span{font-size:17px;font-weight:700}
.app .in-card b{font:700 40px/1 "Inter",sans-serif;font-variant-numeric:tabular-nums}
.app .in-tabs{margin:0 14px 10px;padding:12px;border-radius:14px;background:#fff;display:flex;gap:8px;font-size:12px;align-items:center}
.app .in-tabs span{padding:6px 12px;border-radius:999px;background:#F1EEF7;color:#555}
.app .in-tabs .on{background:var(--a1);color:#fff}
.app .in-tabs .sel{flex:1;border:1px solid #DDD6EA;background:#fff}
.app .in-bar{margin:0 14px;padding:14px 14px 10px;border-radius:14px 14px 0 0;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:10px}
.app .in-bar b{display:block;font-size:17px}
.app .in-bar small{font-size:12px;color:#777}
.app .in-bar .auto{padding:9px 12px;border-radius:10px;background:linear-gradient(100deg,var(--a1),var(--a2));color:#fff;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 6px 14px rgba(133,68,241,.35)}
.app .in-bar .stop{padding:8px 14px;border-radius:10px;background:#EF4444;color:#fff;font-size:12px;font-weight:700;line-height:1.35;text-align:center}
.app .in-list{list-style:none;margin:0 14px;background:#fff;border-radius:0 0 14px 14px;padding:0 12px 6px}
.app .in-list li{display:grid;grid-template-columns:40px 1fr 30px 24px 30px 18px;grid-template-areas:"av nm pl hr rp mo" "tx tx tx tx tx tx";align-items:center;gap:6px 10px;padding:12px 4px;border-top:1px solid #F0EDF5;transition:background .3s,box-shadow .3s}
.app .in-list li .av{grid-area:av}
.app .in-list .nm{grid-area:nm;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.app .in-list .nm b{font-size:14px}
.app .in-list .nm em{font-style:normal;font-size:10px;padding:2px 7px;border-radius:999px;border:1px solid #DDD;color:#666}
.app .in-list .nm em.pd{border-color:#D9B8FF;color:var(--a1);background:#F7F0FF}
.app .in-list .nm small{width:100%;font:500 12px/1 "Inter",sans-serif;color:#888}
.app .in-list .pl{grid-area:pl;width:30px;height:30px;border-radius:50%;background:#22C55E;position:relative}
.app .in-list .pl::after{content:"";position:absolute;left:12px;top:9px;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.app .in-list .hr{grid-area:hr;justify-self:center;width:22px;height:22px}
.app .in-list .hr::before{content:"♡";display:block;text-align:center;font:400 20px/22px system-ui,sans-serif;color:#9CA3AF}
.app .in-list .rp{grid-area:rp;width:30px;height:30px;border-radius:50%;background:#3B82F6;position:relative}
.app .in-list .rp::after{content:"";position:absolute;left:8px;top:9px;width:14px;height:10px;border-radius:4px;border:2px solid #fff}
.app .in-list .mo{grid-area:mo;justify-self:center;width:18px;height:18px}
.app .in-list .mo::before{content:"⋯";display:block;text-align:center;font:700 16px/18px system-ui,sans-serif;color:#9CA3AF}
.app .in-list .tx{grid-area:tx;margin-left:50px;padding:6px 10px;border-radius:8px;background:#F7F3FF;font-size:12px;letter-spacing:.06em;color:#9B8BC6}
/* 新しく届いた声が上から入る */
.s-inbox .in-list li.new{display:grid}
.js .s-inbox .in-list li.new{max-height:0;padding-top:0;padding-bottom:0;opacity:0;overflow:hidden;transition:max-height .6s cubic-bezier(.2,.8,.2,1),padding .6s,opacity .5s}
.js .s-inbox.play .in-list li.new{max-height:120px;padding-top:12px;padding-bottom:12px;opacity:1;background:#FBF8FF}
.js .s-inbox.play .in-list li.new:nth-child(1){transition-delay:1.1s}
.js .s-inbox.play .in-list li.new:nth-child(2){transition-delay:.35s}
.app .fab{position:absolute;right:18px;bottom:28px;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--a3),var(--a1));color:#fff;display:grid;place-items:center;font-size:26px;box-shadow:0 10px 22px rgba(133,68,241,.45)}

/* 2 自動再生：いま流れている1通を縁取り、下に再生の帯 */
.s-auto .in-list li.cur{box-shadow:inset 0 0 0 2px #22C55E;border-radius:12px;background:#F2FCF5}
.s-auto .in-list li.cur .pl{background:#16A34A}
.s-auto .in-list li.done .pl{background:#D1D5DB}
.s-auto .np{position:absolute;left:10px;right:10px;bottom:22px;height:74px;border-radius:18px;overflow:hidden;background:linear-gradient(90deg,var(--a1),var(--a2) 60%,var(--a3));display:flex;align-items:center;gap:12px;padding:0 16px;color:#fff;box-shadow:0 12px 26px rgba(43,33,64,.35)}
.s-auto .np b{display:block;font-size:15px}
.s-auto .np small{font:500 12px/1.6 "Inter",sans-serif;opacity:.9}
.s-auto .np em{font-style:normal;margin-left:6px;font-size:10px;padding:1px 6px;border-radius:5px;background:rgba(120,140,255,.45);color:#C9F3F1}
.s-auto .np .pz{margin-left:auto;width:42px;height:42px;border-radius:50%;background:#fff;position:relative}
.s-auto .np .pz::before,.s-auto .np .pz::after{content:"";position:absolute;top:13px;width:4px;height:16px;border-radius:2px;background:var(--a1);left:15px}
.s-auto .np .pz::after{left:23px}
.s-auto .np-bar{position:absolute;left:0;bottom:0;height:4px;width:100%;background:#fff;opacity:.85;transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* 3 ロック画面の知らせ */
.s-lock{background:linear-gradient(165deg,#0866FF 0%,var(--a1) 45%,var(--a3) 100%)}
.s-lock .lk-date{margin-top:40px;text-align:center;color:rgba(255,255,255,.9);font-size:17px;font-weight:600}
.s-lock .lk-time{text-align:center;color:#fff;font:600 92px/1.05 "Inter",sans-serif;letter-spacing:-.03em}
.s-lock .lk-push{position:absolute;left:12px;right:12px;top:262px;padding:16px 18px 18px;border-radius:24px;background:rgba(255,255,255,.94);
  box-shadow:0 16px 36px rgba(43,33,64,.22);transform:translateY(-40px) scale(.94);opacity:0;transition:all .6s cubic-bezier(.3,1.3,.5,1) .35s}
.s-lock.play .lk-push,html:not(.js) .s-lock .lk-push{transform:none;opacity:1}
.s-lock .lk-row{display:flex;align-items:center;gap:10px}
.s-lock .lk-row .lk-ico{width:34px;height:34px;flex:none}
.s-lock .lk-row span{font-size:15px;font-weight:700;color:#555}
.s-lock .lk-row small{margin-left:auto;font-size:14px;color:#888}
.s-lock .lk-push b{display:block;margin-top:12px;font-size:17px;font-weight:700;color:#111}
.s-lock .lk-push p{margin-top:4px;font-size:17px;font-weight:700;line-height:1.45;color:#222}

/* 4 有料のプラン */
.s-plan .pl-head{display:flex;align-items:center;gap:10px;padding:16px 18px 6px;font-size:19px;font-weight:700}
.s-plan .bk{color:var(--a1);font-size:22px}
.s-plan .pl-card{margin:10px 14px;padding:18px 16px;border-radius:16px;background:#fff;display:grid;gap:14px}
.s-plan .pl-ttl{font-size:14px;font-weight:700;color:var(--a1)}
.s-plan .pl-row{display:flex;align-items:center;gap:8px}
.s-plan .pl-row b{font-size:16px}
.s-plan .pl-row .yen{font:600 14px "Inter";color:#555}
.s-plan .pl-row em{font-style:normal;font-size:11px;padding:3px 8px;border-radius:6px;background:#F7F0FF;color:var(--a1);margin-left:auto}
.s-plan .pl-row em.ok{background:none;color:#16A34A}
.s-plan .pl-plan{padding:14px 0 0;border-top:1px solid #F0EDF5;display:grid;gap:12px}
.s-plan .sw{width:44px;height:26px;border-radius:13px;background:#D1D5DB;position:relative;transition:background .35s}
.s-plan .sw::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.s-plan.play .sw,html:not(.js) .s-plan .sw{background:var(--a1)}
.s-plan.play .sw::after,html:not(.js) .s-plan .sw::after{transform:translateX(18px)}
.s-plan.play .sw.p2{transition-delay:.6s}.s-plan.play .sw.p2::after{transition-delay:.6s}
.s-plan .pl-in{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:12px;border:1px solid #E5E1EE}
.s-plan .pl-in label{font-size:13px;color:#666}
.s-plan .pl-in .pr{font:600 20px "Inter";font-variant-numeric:tabular-nums}
.s-plan .pl-done{margin:16px 14px;height:52px;border-radius:14px;background:linear-gradient(100deg,var(--a1),var(--a2) 60%,var(--a3));color:#fff;display:grid;place-items:center;font-size:16px;font-weight:700}

/* NG ワード（見やすく組み直した版） */
.s-ng .ng-back{padding:14px 18px 0;font-size:13px;color:#6B7280}
.s-ng .ng-top{padding:8px 18px 0;display:flex;align-items:center;justify-content:space-between}
.s-ng .ng-top b{font-size:22px}
.s-ng .ng-add{padding:9px 14px;border-radius:10px;background:linear-gradient(100deg,var(--a1),var(--a2));color:#fff;font-size:13px;font-weight:700;white-space:nowrap}
.s-ng .ng-info{margin:14px 14px 0;padding:12px 14px;border-radius:12px;background:#F7F0FF;font-size:13px;line-height:1.65;color:#4B5563}
.s-ng .ng-info b{display:block;color:var(--a1)}
.s-ng .ng-form{margin:12px 14px 0;padding:14px;border-radius:14px;background:#fff;border:1px solid #E5E7EB;display:grid;gap:10px}
.s-ng .ng-input{display:flex;align-items:center;height:42px;padding:0 12px;border-radius:10px;border:2px solid var(--a2);font-size:15px}
.s-ng .ng-type{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0}
.s-ng .caret{width:2px;height:18px;margin-left:2px;background:var(--a1);animation:ng-blink 1s steps(1) infinite}
@keyframes ng-blink{50%{opacity:0}}
.s-ng .ng-sel{display:flex;gap:8px}
.s-ng .ng-sel span{flex:1;padding:9px 10px;border-radius:10px;border:1px solid #E5E7EB;font-size:12px;color:#374151}
.s-ng .ng-list{list-style:none;margin:12px 14px 0;border-radius:14px;background:#fff;border:1px solid #E5E7EB;overflow:hidden}
.s-ng .ng-list li{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;padding:14px;font-size:13px}
.s-ng .ng-list li span{padding:3px 8px;border-radius:6px;background:#FEF3C7;color:#92400E;font-size:11px}
.s-ng .ng-list li em{font-style:normal;padding:3px 8px;border-radius:6px;background:#FEE2E2;color:#B91C1C;font-size:11px}
.s-ng .ng-list li i{font-style:normal;color:#16A34A;font-size:12px;font-weight:600}
.rv.in .s-ng .ng-type,html:not(.js) .s-ng .ng-type{animation:ng-typing 1.4s steps(7,end) .6s forwards}
@keyframes ng-typing{to{max-width:140px}}
.js .s-ng .ng-new{opacity:0;transform:translateY(-10px);transition:all .5s ease 2.4s}
.rv.in .s-ng .ng-new{opacity:1;transform:none;background:#FBF8FF}

/* ブロック・通報（後ろは暗くするだけ。ぼかさない） */
.s-block .in-list{margin-top:14px;border-radius:14px}
.s-block .bl-shade{position:absolute;inset:0;z-index:5;background:rgba(17,12,30,.45)}
.s-block .bl-sheet{position:absolute;z-index:6;left:12px;right:12px;top:250px;padding:18px 16px;border-radius:20px;background:#fff;box-shadow:0 20px 40px rgba(0,0,0,.25);transition:transform .6s cubic-bezier(.3,1.2,.5,1) .4s,opacity .4s ease .4s}
.js .s-block .bl-sheet{transform:translateY(60px);opacity:0}
.rv.in .s-block .bl-sheet{transform:none;opacity:1}
.s-block .bl-ttl{display:flex;justify-content:space-between;font-size:17px}
.s-block .bl-ttl span{color:#888}
.s-block .bl-who{margin:12px 0;font-size:13px;color:#555}
.s-block .bl-opt{display:flex;gap:12px;align-items:center;padding:14px;border-radius:14px;margin-top:10px;border:2px solid}
.s-block .bl-opt.b{border-color:#FCD34D;background:#FFFBEB}
.s-block .bl-opt.r{border-color:#FCA5A5;background:#FEF2F2}
.s-block .bl-opt i{width:34px;height:34px;border-radius:10px;flex:none}
.s-block .bl-opt.b i{background:radial-gradient(circle,transparent 0 7px,#F59E0B 7.5px 9.5px,transparent 10px),linear-gradient(45deg,transparent 46%,#F59E0B 46% 54%,transparent 54%) center/14px 14px no-repeat,#FEF3C7}
.s-block .bl-opt.r i{background:linear-gradient(#EF4444,#EF4444) center 11px/3px 9px no-repeat,linear-gradient(#EF4444,#EF4444) center 23px/3px 3px no-repeat,#FEE2E2}
.s-block .bl-opt b{display:block;font-size:15px}
.s-block .bl-opt span{font-size:12px;color:#555}

/* 0 SNS の投稿・1 演者のページ（それぞれ1枚の画面。スクロールで進み、押すところは指の丸で見せる） */
.app .r-sns,.app .r-prof{position:absolute;left:0;right:0;top:50px;bottom:0}
.app .r-sns{background:#fff;color:#111}
.app .r-prof{background:linear-gradient(160deg,#E8248A 0%,#CF2BA8 36%,#A93AD8 70%,#8A3CF0 100%);color:#fff}
.s-prof .bk{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);place-items:center;font-size:20px;line-height:1}
.s-sns .sn-head{height:52px;display:flex;align-items:center;gap:22px;padding:0 18px;border-bottom:1px solid #eee;font-size:18px}
.s-sns .sn-back{font-size:26px;color:#333}
.s-sns .sn-post{padding:16px 18px;border-bottom:1px solid #eee}
.s-sns .sn-who{display:flex;gap:12px;align-items:center}
.s-sns .sn-who img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.s-sns .sn-who b{display:block;font-size:16px}.s-sns .sn-who small{font-size:13px;color:#777}
.s-sns .sn-post > p{margin-top:12px;font-size:16px;line-height:1.65}
.s-sns .sn-link{margin-top:12px;display:flex;gap:12px;align-items:center;padding:12px;border:1px solid #e3e3e8;border-radius:16px;transition:background .2s}
.s-sns .sn-post.dim{opacity:.55}
.s-sns .sn-post.dim .ln{display:block;height:10px;margin-top:10px;border-radius:5px;background:#e6e6ec}
.s-sns .sn-post.dim .ln.s{width:60%}
.s-sns .sn-link img{width:44px;height:44px;border-radius:10px}
.s-sns .sn-link b{display:block;font-size:14px}.s-sns .sn-link small{font-size:13px;color:#777}
.s-sns.tap1 .sn-link{background:#f1f1f5}
.s-sns .sn-acts{margin-top:14px;display:flex;justify-content:space-between;padding-right:40px;font-size:13px;color:#777}
.s-prof .pf-back{padding:14px 16px}
.s-prof .pf-back .bk{display:grid}
.s-prof .pf-card{margin:0 18px;padding:22px 18px 18px;border-radius:16px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.25);display:flex;flex-direction:column;align-items:center}
.s-prof .pf-card img{width:92px;height:92px;border-radius:50%;object-fit:cover}
.s-prof .pf-card b{margin-top:12px;font-size:22px}
.s-prof .pf-card small{margin-top:4px;font-size:12px;opacity:.85}
.s-prof .pf-btns{margin-top:16px;display:flex;gap:10px;width:100%}
.s-prof .pf-btns span{flex:1;text-align:center;padding:11px 0;border:2px solid rgba(255,255,255,.75);border-radius:10px;font-size:15px;font-weight:600}
.s-prof .pf-tabs{margin:16px 18px 0;padding:5px;border-radius:12px;background:rgba(255,255,255,.12);display:flex;font-size:13px}
.s-prof .pf-tabs span{flex:1;text-align:center;padding:9px 0;border-radius:9px}
.s-prof .pf-tabs .on{background:#fff;color:#C12FC0;font-weight:700}
.s-prof .pf-send{margin:16px 18px 0;padding:18px;border-radius:16px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.25)}
.s-prof .pf-go{display:block;text-align:center;padding:14px 0;border-radius:10px;background:linear-gradient(100deg,#8B3CF0,#E8248A);font-size:16px;font-weight:700;transition:transform .2s}
.s-prof.tap2 .pf-go{transform:scale(.96)}
/* 指で押したところ */
.app .tap{position:absolute;z-index:9;width:44px;height:44px;border-radius:50%;background:rgba(40,40,60,.28);opacity:0;transform:scale(.4);transition:opacity .2s,transform .3s}
.s-sns .t1{left:150px;top:236px}
.s-prof .t2{left:166px;top:514px}
.s-sns.tap1 .t1,.s-prof.tap2 .t2{opacity:1;transform:scale(1)}

@media (color-gamut: p3){ .app{--a1:color(display-p3 .5 .24 1);--a2:color(display-p3 .86 .33 1);--a3:color(display-p3 1 .36 1);--pk:color(display-p3 1 .12 .7)} }
@media (prefers-reduced-motion: reduce){
  .app *{animation:none!important;transition:none!important}
  .js .s-inbox .in-list li.new{max-height:none;padding:12px 4px;opacity:1}
  .s-lock .lk-push,.js .s-ng .ng-new,.js .s-block .bl-sheet{opacity:1;transform:none}
  .s-ng .ng-type{max-width:none}
}