/* v044(10/12 本人の指摘: 分身の間のパーツ・投稿の見出し・壁の下・ボタンの崩れ) */

/* ---- 分身の間のパーツ ---- */
.v44-bun{container-type:inline-size;position:relative;margin:14px 0 2px;text-align:center;overflow:hidden}
.v44-k{margin:0 16px 2px;font-family:"Zen Maru Gothic",var(--sans);font-weight:700;font-size:16px;line-height:1.5;color:#C23B62;letter-spacing:.03em;word-break:keep-all}
.v44-k .v44-sl{display:inline-block;margin:0 .3em;color:#E58BA4}
.v44-stage{--u:min(1cqw,5.6px);position:relative;height:calc(var(--u)*84);margin:0 auto;max-width:560px}
.v44-glow{position:absolute;left:50%;top:calc(var(--u)*66);width:calc(var(--u)*70);height:calc(var(--u)*46);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,#ffffffd9,#ffe3eb99 55%,#ffe3eb00);pointer-events:none}
.v44-me{position:absolute;left:50%;top:calc(var(--u)*66);z-index:3;width:calc(var(--u)*30);height:calc(var(--u)*30);padding:0;border:0;border-radius:50%;transform:translate(-50%,-50%);background:#fff;box-shadow:0 0 0 4px #fff,0 0 0 7px #f3a9bd,0 10px 24px #c2456a33;cursor:pointer;overflow:hidden}
.v44-me img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.v44-me-n{position:absolute;left:50%;top:calc(var(--u)*66 + var(--u)*15 + 10px);z-index:3;transform:translateX(-50%);margin:0;white-space:nowrap;font-size:12px;font-weight:700;color:#6E2A3D}
.v44-c,.v44-gh{position:absolute;left:50%;top:calc(var(--u)*66);width:calc(var(--u)*23);margin:0;transform:translate(-50%,-50%) translate(var(--x),var(--y))}
.v44-c{z-index:2}
.v44-c img,.v44-gh{display:block;height:auto;mix-blend-mode:multiply}
.v44-c img{width:100%;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #fff,0 6px 14px #c2456a26;object-fit:cover;object-position:50% 70%}
.v44-c figcaption{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:-2px;white-space:nowrap;padding:1px 8px;border-radius:999px;background:#fff;color:#C23B62;font-size:12px;font-weight:700;line-height:1.6;box-shadow:0 2px 6px #c2456a22}
.v44-gh{z-index:1;opacity:0;pointer-events:none;border-radius:50%}
.v44-c1{--x:calc(var(--u)*-38);--y:calc(var(--u)*-6);--i:0}
.v44-c2{--x:calc(var(--u)*-27);--y:calc(var(--u)*-34);--i:1}
.v44-c3{--x:0px;--y:calc(var(--u)*-54);--i:2;z-index:3}
.v44-c4{--x:calc(var(--u)*27);--y:calc(var(--u)*-34);--i:3}
.v44-c5{--x:calc(var(--u)*38);--y:calc(var(--u)*-6);--i:4}
.v44-puff{position:absolute;left:50%;top:calc(var(--u)*66);z-index:2;width:calc(var(--u)*18);height:calc(var(--u)*18);border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#ffe6ee 55%,#ffd0dd00 72%);opacity:0;transform:translate(-50%,-50%) translate(var(--px),var(--py)) scale(.2);pointer-events:none}
.v44-pop{position:absolute;left:calc(50% + var(--u)*12);top:calc(var(--u)*44);z-index:4;margin:0;font-family:"Zen Maru Gothic",var(--sans);font-weight:700;font-size:calc(var(--u)*6.2);color:#D9506F;text-shadow:0 2px 0 #fff,0 0 8px #fff;opacity:0;transform:rotate(-8deg) scale(.5);pointer-events:none}
.v44-cap{margin:6px 16px 0;font-family:"Zen Maru Gothic",var(--sans);font-weight:700;font-size:15px;color:#3F2A2E;word-break:keep-all}
.v44-again{margin:4px auto 0;min-height:44px;padding:0 16px;border:0;background:none;color:#6E3A50;font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
/* 動く前(画面に入るまで): 分身は真ん中に隠れている */
.v44-bun.armed:not(.go) .v44-c,.v44-bun.armed:not(.go) .v44-cap{opacity:0}
.v44-bun.armed:not(.go) .v44-c{transform:translate(-50%,-50%) scale(.3)}
/* 動き */
.v44-bun.go .v44-me{animation:v44me .9s ease-out .1s both}
.v44-bun.go .v44-puff{animation:v44puff 1s ease-out calc(.22s + var(--d,0s)) both}
.v44-bun.go .v44-pop{animation:v44pop 1.15s ease-out .28s both}
.v44-bun.go .v44-c{animation:v44out .7s cubic-bezier(.2,.9,.3,1.04) calc(.3s + var(--i)*.07s) both}
.v44-bun.go .v44-c figcaption{animation:v44fade .3s ease-out calc(.8s + var(--i)*.07s) both}
.v44-bun.go .v44-gh.g1{animation:v44gh1 .7s cubic-bezier(.2,.9,.3,1.04) calc(.35s + var(--i)*.07s) both}
.v44-bun.go .v44-gh.g2{animation:v44gh2 .7s cubic-bezier(.2,.9,.3,1.04) calc(.4s + var(--i)*.07s) both}
.v44-bun.go .v44-cap{animation:v44fade .4s ease-out 1.15s both}
.v44-bun.go .v44-c img,.v44-bun.done .v44-c img{animation:v44float 5.5s ease-in-out calc(1.6s + var(--i)*.7s) infinite alternate}
@keyframes v44me{0%{transform:translate(-50%,-50%) scale(1)}25%{transform:translate(-50%,-50%) scale(1.07);box-shadow:0 0 0 4px #fff,0 0 0 7px #f3a9bd,0 0 0 18px #ffd3df66,0 10px 24px #c2456a33}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes v44puff{0%{opacity:0;transform:translate(-50%,-50%) translate(0,0) scale(.2)}25%{opacity:.95}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--px),var(--py)) scale(1.5)}}
@keyframes v44pop{0%{opacity:0;transform:rotate(-8deg) scale(.5)}22%{opacity:1;transform:rotate(-8deg) scale(1.12)}40%{transform:rotate(-8deg) scale(1)}78%{opacity:1}100%{opacity:0;transform:rotate(-8deg) scale(1) translateY(-6px)}}
@keyframes v44out{0%{opacity:0;transform:translate(-50%,-50%) scale(.3);filter:blur(5px)}30%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(1);filter:blur(0)}}
@keyframes v44gh1{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}30%{opacity:.4}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(1)}}
@keyframes v44gh2{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}30%{opacity:.22}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(1)}}
@keyframes v44fade{from{opacity:0;transform:translateX(-50%) translateY(4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.v44-cap{--tx:0}
.v44-bun.go .v44-cap{animation-name:v44capin}
@keyframes v44capin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes v44float{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.v44-bun *{animation:none!important}.v44-puff,.v44-pop,.v44-gh,.v44-again{display:none}}

/* ---- 実際の投稿の節の見出し(本人「例えば!!! 〜マンアカウントでの、実際のこの投稿も〜」「飾りもいい感じに」) ---- */
.v44-rt{position:relative;margin:4px 0 14px;text-align:center}
.v44-stk{position:relative;display:inline-block;margin:0 0 10px;padding:3px 18px 4px;border-radius:999px;transform:rotate(-4deg);background:linear-gradient(180deg,#f47a9a,#D9506F);color:#fff;font-family:"Zen Maru Gothic",var(--sans);font-weight:700;font-size:17px;letter-spacing:.06em;box-shadow:0 3px 0 #b93a5c,0 6px 14px #d9506f40}
.v44-spk{position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;fill:#f3a9bd}
.v44-spk.l{left:-26px;transform:rotate(-12deg)}
.v44-spk.r{right:-26px;transform:rotate(14deg) scale(.8)}
.v44-rt-t{margin:0;font-family:"Zen Maru Gothic",var(--sans);font-weight:700;font-size:19px;line-height:1.6;color:#3F2A2E;word-break:keep-all}
.v44-rt-t .v44-num{font-size:1.45em;color:#D9506F;background:linear-gradient(transparent 64%,#ffd3df 64%);padding:0 3px;letter-spacing:-.01em}
.v44-rt-t .v44-l{display:block}

/* ---- ふだんの投稿の節の見出し(本人「普段の投稿から、りかこの好みを学習して、新しい投稿はAIが！！」) ---- */
.v44-r2-ai{display:inline-block;margin-top:2px;font-size:1.25em;color:#D9506F;background:linear-gradient(transparent 64%,#ffd3df 64%);padding:0 3px}

/* ---- 作品の壁の下: 止めるボタンは壁の右下に重ね、説明の一文は壁のすぐ下に(本人「崩れてるし、注釈までの間が気になる。上にくっつけていいんでは？」) ---- */
#works-wall .vp-wall{position:absolute!important;right:8px!important;bottom:6px!important;left:auto!important;top:auto!important;margin:0!important;z-index:4;width:36px;height:36px;opacity:.88}
#works-wall .ww26-cap{margin:10px 22px 0!important;text-align:center!important;font-size:14px!important;line-height:1.7!important;color:#5c4753!important}

/* ---- ボタン: 文字を真ん中に(左右の余白をそろえる)・矢印は線の図で中心に(本人「ボタン、絶妙に崩れてるので、改善して」) ---- */
main .v43-cta .btn.v43-btn{padding:10px 64px!important;box-shadow:0 4px 0 #026A2D,0 12px 24px #05973f40}
main .v43-cta .btn.v43-btn .arw{padding:0!important;font-size:0!important}
main .v43-cta .btn.v43-btn .arw svg{display:block;width:16px;height:16px}
@media (max-width:360px){main .v43-cta .btn.v43-btn{padding:10px 52px!important}main .v43-cta .btn.v43-btn .arw{width:32px;height:32px;margin-top:-16px;right:12px}}
/* 狭い画面(〜360px): 上の一言を1行に・見出しの行が折れないように */
.v44-k{white-space:nowrap;font-size:clamp(12.5px,4.1cqw,16px)}
.v44-k .v44-sl{margin:0 .2em}
@media (max-width:360px){.v44-rt-t{font-size:16.5px}.v44-stk{font-size:15.5px}}
@media (max-width:360px){.v44-c2{--x:calc(var(--u)*-30)}.v44-c4{--x:calc(var(--u)*30)}.v44-c figcaption{padding:1px 6px}}

/* ---- 10/12 r2: 本人の写真は上半身の札に・次の絵(これ全部、私の分身たちがつくりました！)へ溶かす ---- */
.v44-stage{height:calc(var(--u)*90)}
.v44-me{top:calc(var(--u)*68);width:calc(var(--u)*28);height:auto;margin:0;padding:5px;border-radius:14px;background:#fff;box-shadow:0 10px 26px #c2456a2e,0 0 0 1px #f3d3dd;cursor:default;overflow:visible}
.v44-me img{width:100%;height:auto;aspect-ratio:4/5;border-radius:10px;object-fit:cover}
.v44-me figcaption{position:absolute;left:-8px;top:-10px;padding:1px 10px;border-radius:999px;background:var(--rose,#D9506F);color:#fff;font-size:12px;font-weight:700;line-height:1.7;box-shadow:0 2px 6px #c2456a40;transform:rotate(-6deg)}
.v44-c,.v44-gh,.v44-glow,.v44-puff{top:calc(var(--u)*68)}
.v44-pop{top:calc(var(--u)*44);left:calc(50% + var(--u)*13)}
@keyframes v44me{0%{transform:translate(-50%,-50%) scale(1)}25%{transform:translate(-50%,-50%) scale(1.05)}100%{transform:translate(-50%,-50%) scale(1)}}
/* 下の端: 次の絵の上の端の色(左 #fdedf3・中 #fef2f6・右 #e6ebf5)へ */
.v44-bun{margin-bottom:0}
.v44-bun::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:0;pointer-events:none;background:linear-gradient(90deg,#fdedf3,#fef2f6 55%,#e6ebf5);-webkit-mask-image:linear-gradient(#0000,#000);mask-image:linear-gradient(#0000,#000)}
.v44-stage{z-index:1}
