/* VIPMONTH1028 毎月の受け取り（月の箱）。色は段の色。闇・炎の赤は使わない */
.vpm{position:fixed;inset:0;z-index:100003;display:grid;place-items:center;overflow:hidden;color:#fff;font-family:inherit;animation:vpmIn .35s ease-out;-webkit-tap-highlight-color:transparent}
.vpm *{box-sizing:border-box}
.vpm.is-out{opacity:0;transition:opacity .35s}
@keyframes vpmIn{from{opacity:0}to{opacity:1}}
.vpm__bg{position:absolute;inset:0;background:#2a2050 center/cover no-repeat}
.vpm__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 45% at 50% 40%,rgba(255,240,200,.18),rgba(20,10,40,.55))}
.vpm__rays{position:absolute;left:50%;top:36%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;background:center/contain no-repeat;opacity:0;transition:opacity .8s}
.vpm.is-open .vpm__rays{opacity:.5;animation:vpmSpin 40s linear infinite}
@keyframes vpmSpin{to{transform:rotate(360deg)}}
.vpm__in{position:relative;width:min(94vw,440px);max-height:100%;min-height:100%;align-content:center;overflow:auto;padding:max(18px,env(safe-area-inset-top)) 8px max(18px,env(safe-area-inset-bottom));display:grid;justify-items:center;gap:10px;text-align:center;scrollbar-width:none}
.vpm__k{margin:0;font:italic 600 12px/1 Georgia,"Times New Roman",serif;letter-spacing:.42em;color:#ffe39a;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.vpm__h{margin:2px 0 0;font:700 23px/1.3 "Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:.06em;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.vpm__h small{display:block;margin-top:4px;font:600 12.5px/1.4 system-ui,sans-serif;letter-spacing:.02em;color:#f3e8ff}
.vpm__box{position:relative;width:min(62vw,250px);aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;filter:drop-shadow(0 10px 24px rgba(0,0,0,.4));outline:0;-webkit-tap-highlight-color:transparent}
.vpm__box:focus-visible{filter:drop-shadow(0 0 14px rgba(255,230,150,.95))}
.vpm:not(.is-open) .vpm__items,.vpm:not(.is-open) .vpm__sum,.vpm:not(.is-open) .vpm__note,.vpm:not(.is-open) .vpm__btns{display:none}
.vpm__box img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .25s,transform .25s}
.vpm__box .is-open{opacity:0;transform:scale(.92)}
.vpm:not(.is-open) .vpm__box{animation:vpmBob 2.4s ease-in-out infinite}
.vpm:not(.is-open) .vpm__box:active{transform:scale(.96)}
@keyframes vpmBob{50%{transform:translateY(-6px) rotate(-1.5deg)}}
.vpm.is-open .vpm__box{width:min(34vw,140px);cursor:default;transition:width .45s cubic-bezier(.3,1.3,.5,1)}
.vpm.is-open .vpm__box .is-closed{opacity:0}
.vpm.is-open .vpm__box .is-open{opacity:1;transform:none}
.vpm__tap{margin:0;font-size:14px;font-weight:800;letter-spacing:.08em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6);animation:vpmBlink 1.6s ease-in-out infinite}
.vpm.is-open .vpm__tap{display:none}
@keyframes vpmBlink{50%{opacity:.55}}
.vpm__flash{position:absolute;inset:0;background:radial-gradient(closest-side,#fff,rgba(255,255,255,0));opacity:0;pointer-events:none}
.vpm.is-open .vpm__flash{animation:vpmFlash .7s ease-out}
@keyframes vpmFlash{0%{opacity:0}20%{opacity:.95}100%{opacity:0}}
.vpm__items{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vpm__it{position:relative;display:grid;justify-items:center;align-content:start;gap:3px;padding:8px 4px 8px;border-radius:16px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 6px 16px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transform:translateY(-40px) scale(.6)}
.vpm.is-open .vpm__it{animation:vpmPop .55s cubic-bezier(.3,1.5,.5,1) forwards;animation-delay:calc(.5s + var(--i) * .22s)}
@keyframes vpmPop{to{opacity:1;transform:none}}
.vpm__it img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))}
.vpm__it .vpm__ic{display:grid;place-items:center;width:56px;height:56px;font-size:34px}
.vpm__it b{font-size:11.5px;font-weight:800;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.vpm__it small{font-size:10px;color:#f3e8ff;line-height:1.3}
.vpm__n{position:absolute;right:6px;top:6px;min-width:24px;padding:1px 6px;border-radius:99px;background:#fff;color:#b0700a;font:700 12px/1.4 Georgia,serif;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.vpm__it--wide{grid-column:span 3;grid-template-columns:auto 1fr;justify-items:start;text-align:left;align-items:center;padding:8px 12px}
.vpm__it--wide img,.vpm__it--wide .vpm__ic{grid-row:1/3;width:48px;height:48px;font-size:28px}
.vpm__sum{margin:4px 0 0;font-size:13px;opacity:0}
.vpm__sum b{font:700 24px Georgia,serif;color:#ffe39a;text-shadow:0 0 12px rgba(255,220,140,.6)}
.vpm.is-open .vpm__sum{animation:vpmPop .5s ease-out forwards;animation-delay:calc(.7s + var(--n) * .22s)}
.vpm__note{margin:0;font-size:11px;line-height:1.6;color:#efe4ff;opacity:.9}
.vpm__btns{display:flex;gap:8px;width:100%;opacity:0}
.vpm.is-open .vpm__btns{animation:vpmPop .5s ease-out forwards;animation-delay:calc(.9s + var(--n) * .22s)}
.vpm__b{flex:1;min-height:48px;border:0;border-radius:16px;font:800 15px/1.2 inherit;font-family:inherit;color:#3a2600;background:linear-gradient(135deg,#d8a325,#ffe08a);box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center}
.vpm__b--ghost{color:#fff;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.vpm--bouquet .vpm__b:not(.vpm__b--ghost){color:#fff;background:linear-gradient(135deg,#d9467a,#ff86b0)}
.vpm--tiara .vpm__b:not(.vpm__b--ghost){color:#fff;background:linear-gradient(135deg,#7b4fd0,#ae8cff)}
.vpm__x{position:absolute;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));z-index:2;width:40px;height:40px;border:0;border-radius:50%;background:rgba(0,0,0,.25);color:#fff;font-size:18px;font-weight:900;cursor:pointer}
html.vpm-lock{overflow:hidden}
/* あなたの会員の欄の「今月の箱」 */
.vpm-entry{display:flex;align-items:center;gap:10px;width:100%;margin:8px 0;padding:8px 12px 8px 8px;border:0;border-radius:14px;background:linear-gradient(135deg,#fff3d6,#ffe9f3);color:#3a2d4a;font:inherit;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1.5px #f3d27a}
.vpm-entry img{width:56px;height:56px;object-fit:contain;flex:0 0 auto;animation:vpmBob 2.4s ease-in-out infinite}
.vpm-entry b{display:block;font-size:14px}
.vpm-entry small{color:#7a6c8c;font-size:11.5px}
.vpm-entry.is-done{background:#f7f2ff;box-shadow:none}
.vpm-entry.is-done img{animation:none;opacity:.85}
@media (prefers-reduced-motion:reduce){.vpm *,.vpm-entry img{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important}.vpm__it,.vpm__sum,.vpm__btns{opacity:1;transform:none}}
/* プロフィールの月の飾り: 名札（名前の後ろの帯）とオーラ（アイコンの後ろの光） */
.vpm-nm{position:relative;isolation:isolate;display:inline-block;padding:6px 26px 7px;color:#4a2f10!important;text-shadow:0 1px 0 rgba(255,255,255,.85)}
.vpm-nm::before{content:"";position:absolute;z-index:-1;left:-14%;right:-14%;top:-55%;bottom:-55%;background:var(--vpm-nm) center/100% 100% no-repeat;pointer-events:none}
.vpm-auw{position:relative;isolation:isolate}
.vpm-au{position:absolute;z-index:-1;inset:-30%;background:center/contain no-repeat;pointer-events:none;animation:vpmAu 6s ease-in-out infinite}
@keyframes vpmAu{50%{transform:scale(1.04) rotate(3deg);opacity:.9}}
/* 会員のページ: 月の飾りを選ぶ */
.vpm-deco{margin:10px 0;padding:10px 12px;border-radius:14px;background:#faf6ff;box-shadow:inset 0 0 0 1px #eee4f8}
.vpm-deco__h{margin:0 0 6px;font-size:13.5px;font-weight:800}
.vpm-deco__h small{margin-left:6px;font-size:11px;font-weight:600;color:#8b7f95}
.vpm-deco__k{margin:8px 0 4px;font-size:11.5px;font-weight:800;color:#8b7f95}
.vpm-deco__g{display:flex;flex-wrap:wrap;gap:6px}
.vpm-deco__o{display:grid;place-items:center;width:72px;height:52px;padding:4px;border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px #e6dcf2;cursor:pointer}
.vpm-deco__o img{max-width:100%;max-height:100%;object-fit:contain}
.vpm-deco__o.is-on{box-shadow:inset 0 0 0 2.5px #b67a00,0 2px 8px rgba(182,122,0,.25)}
.vpm-deco__none{font-size:12px;color:#8b7f95;font-weight:700}
@media (prefers-reduced-motion:reduce){.vpm-au{animation:none}}
/* 箱の中のアバターの品（全身の見本は縦長） */
.vpm__it--av img{width:64px;height:96px;object-fit:contain;object-position:center top}
.vpm__tag{position:absolute;left:6px;top:6px;padding:1px 6px;border-radius:99px;background:rgba(255,255,255,.92);color:#7b4fd0;font-size:9.5px;font-weight:800}
/* 会員のページ: 毎月の限定アバター */
.vpm-avs{margin:6px 0 0}
.vpm-avs__lead{margin:0 2px 10px;font-size:12.5px;line-height:1.7;color:#7a6c8c}
.vpm-avs__m{margin:0 0 12px;padding:12px 10px;border-radius:18px;background:linear-gradient(180deg,#fff,#f8f2ff);box-shadow:0 2px 14px rgba(90,60,120,.1)}
.vpm-avs__h{margin:0 2px 8px;font:700 15px/1.3 "Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif;color:#4a2f6a}
.vpm-avs__h b{margin-right:8px;font:700 18px Georgia,serif;color:#b0700a}
.vpm-avs__row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.vpm-avs__it{margin:0;padding:6px 4px 8px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px #efe6f7;text-align:center}
.vpm-avs__it--crown{box-shadow:inset 0 0 0 1.5px #f3d27a;background:linear-gradient(180deg,#fffdf4,#fff)}
.vpm-avs__pics{display:flex;justify-content:center;align-items:flex-end;height:128px;overflow:hidden}
.vpm-avs__pics img{width:58%;max-width:88px;height:auto;margin:0 -8px}
.vpm-avs__it figcaption b{display:block;margin-top:4px;font-size:11.5px;line-height:1.35}
.vpm-avs__it figcaption small{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:99px;background:#f3ecfb;color:#7a6c8c;font-size:10px;font-weight:700}
.vpm-avs__it--crown figcaption small{background:#fff1c9;color:#8a5a10}
.vpm-avs__m12{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:18px;background:linear-gradient(135deg,#fff3fb,#eef6ff,#fffbe8);box-shadow:inset 0 0 0 1.5px #e9d8ff}
.vpm-avs__m12 .vpm-avs__pics{flex:0 0 124px;height:132px}
.vpm-avs__m12 p{margin:0;font-size:12px;line-height:1.6;color:#5a4a6c}
.vpm-avs__m12 small{display:block;color:#9a6ad0;font-weight:800}
.vpm-avs__m12 b{display:block;font:700 16px/1.3 "Shippori Mincho","Yu Mincho",serif;color:#3a2d4a}