/* 手のイラスト */
#hand .skin{fill:var(--skin)}
#hand .crease{fill:none;stroke:var(--skin2);stroke-width:2;stroke-linecap:round}
#hand .gloss{fill:#fff;opacity:.5;pointer-events:none}
#hand .nail{cursor:pointer;transform-box:fill-box;transform-origin:50% 100%;outline:none}
#hand .nail .paint{stroke:rgba(46,36,40,.12);stroke-width:1}
#hand .nail:focus-visible .paint{stroke:var(--lamp);stroke-width:3}
#hand .nail.tap{animation:tap .35s cubic-bezier(.3,1.6,.5,1)}
#hand .art{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2);transition:opacity .3s,transform .45s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
#hand .art circle{fill:#fff;stroke:#e7c27a;stroke-width:1}
#hand .art .gold{fill:#f0cf7f;stroke:none}
#hand .art.on{opacity:1;transform:none}
#hand .hand-body{animation:float 6s ease-in-out infinite}
#hand .halo{animation:glow 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes tap{40%{transform:scale(1.14)}}
@keyframes float{50%{transform:translateY(-5px)}}
@keyframes glow{50%{opacity:.6;transform:scale(.94)}}

.stage-cap{transition:opacity .6s}
.stage-cap.hide{opacity:0}

/* きらきら */
.spark{position:absolute;width:var(--s,14px);height:var(--s,14px);margin:calc(var(--s,14px)/-2) 0 0 calc(var(--s,14px)/-2);background:var(--k,#fff);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);pointer-events:none;z-index:3;animation:spark .8s ease-out forwards}
@keyframes spark{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(140deg)}}

.chip{transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.chip:hover{transform:translateY(-3px)}
.chip:active{transform:scale(.9)}
.chip[aria-pressed=true]{transform:scale(1.06)}
.seg button{transition:background .2s,color .2s}
.est-sum.bump{animation:bump .4s ease}
@keyframes bump{40%{transform:scale(1.08)}}
.estimate .est-sum{transform-origin:left center}

/* デザインのカードを押したとき */
.design{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.designs .design:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(59,40,51,.12)}
.design:hover .swatch i{animation:wiggle .6s ease}
.design:hover .swatch i:nth-child(2){animation-delay:.05s}
.design:hover .swatch i:nth-child(3){animation-delay:.1s}
.design:hover .swatch i:nth-child(4){animation-delay:.15s}
.design:hover .swatch i:nth-child(5){animation-delay:.2s}
@keyframes wiggle{40%{transform:translateY(-6px)}}

/* 地図のあかり */
.pin-glow{transform-box:fill-box;transform-origin:center;animation:pin 2.4s ease-out infinite}
@keyframes pin{0%{transform:scale(.5);opacity:.6}100%{transform:scale(1.5);opacity:0}}
.route{animation:walk 1.6s linear infinite}
@keyframes walk{to{stroke-dashoffset:-24}}

/* いま営業中 */
#open-now{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(251,245,239,.4);border-radius:99px;padding:4px 14px;font-size:14px;margin-bottom:18px}
#open-now i{width:9px;height:9px;border-radius:50%;background:#9b8f93}
#open-now.on i{background:#f4c27c;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(244,194,124,.7)}100%{box-shadow:0 0 0 12px rgba(244,194,124,0)}}

/* スクロールで浮かぶ */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  #hand .hand-body,#hand .halo,.pin-glow,.route,#open-now.on i{animation:none}
  #hand .art{transition:none}
  .rv{opacity:1;transform:none;transition:none}
  .design:hover .swatch i{animation:none}
}