/* BE GROUP サイト共通アニメーション（2026-10-14）
   html.emo-motion のときだけ動く。動きを減らす設定では全部止める。 */

/* スクロール進捗バー */
.emo-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:9999;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#b4623b,#e2b48f 60%,#d6ec6e);pointer-events:none}

/* 見出し：1文字ずつ下からふわっと */
.emo-motion .emo-split .emo-ch{display:inline-block;opacity:0;transform:translateY(.55em) rotate(4deg);filter:blur(4px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1),filter .55s ease;transition-delay:calc(min(var(--i),16)*25ms)}
.emo-motion .emo-split.emo-split-in .emo-ch{opacity:1;transform:none;filter:none}
.emo-split em .emo-ch{background:inherit}

/* スクロールで順番に現れる */
.emo-motion .emo-in{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.emo-motion .emo-in.emo-on{opacity:1;transform:none}
/* 傾き・回転を持つ要素は、現れた後に元の向きへ */
.emo-motion .emo-kimono-item.emo-in{transform:translateY(40px) rotate(0deg) scale(.96)}
.emo-motion .emo-kimono .k1.emo-on{transform:rotate(-1.2deg)}.emo-motion .emo-kimono .k2.emo-on{transform:rotate(.8deg)}.emo-motion .emo-kimono .k3.emo-on{transform:rotate(1.4deg)}
.emo-motion .emo-kimono .k4.emo-on{transform:rotate(-.6deg)}.emo-motion .emo-kimono .k5.emo-on{transform:rotate(.9deg)}.emo-motion .emo-kimono .k6.emo-on{transform:rotate(-1deg)}
.emo-motion .emo-kimono .k7.emo-on{transform:rotate(1.1deg)}.emo-motion .emo-kimono .k8.emo-on{transform:rotate(-.8deg)}.emo-motion .emo-kimono .k9.emo-on{transform:rotate(.6deg)}
.emo-motion .emo-kimono-item.emo-on:hover{transform:rotate(0) scale(1.03)}
@media (max-width:760px){.emo-motion .emo-kimono .emo-kimono-item.emo-on{transform:none}}

/* 写真：幕が上がるように現れる */
.emo-motion .emo-wipe{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1)}
.emo-motion .emo-wipe img{transform:scale(1.14);transition:transform 2s cubic-bezier(.2,.7,.2,1)}
.emo-motion .emo-wipe.emo-on{clip-path:inset(0 0 0 0)}
.emo-motion .emo-wipe.emo-on img{transform:scale(1.04) translateY(var(--py,0px))}
/* 最初の画面に入っているものは短く（見出し・写真が出るまでの白い時間を1秒以内に）2026-10-14 */
.emo-motion .emo-wipe.emo-hero{transition-duration:.75s}
.emo-motion .emo-wipe.emo-hero img{transition-duration:1.1s}
.emo-motion .emo-in.emo-hero{transition-duration:.6s;transition-delay:calc(var(--d,0ms) / 2)}
.emo-motion .emo-para{will-change:transform}
.emo-motion .emo-on .emo-para,.emo-motion .emo-para:not(.emo-wipe img){transform:scale(1.06) translateY(var(--py,0px))}

/* ポラロイド：配られるように落ちてきて、ゆらゆら */
.emo-motion .emo-strip figure{opacity:0;translate:0 -40px;rotate:-14deg;transition:opacity .8s ease,translate .9s cubic-bezier(.3,1.4,.4,1),rotate .9s cubic-bezier(.3,1.4,.4,1)}
.emo-motion .emo-strip.emo-on figure{opacity:1;translate:0 0;rotate:0deg;animation:emoSway 6s ease-in-out infinite}
.emo-motion .emo-strip figure:nth-child(1){transition-delay:.05s;animation-delay:0s}
.emo-motion .emo-strip figure:nth-child(2){transition-delay:.15s;animation-delay:-1s}
.emo-motion .emo-strip figure:nth-child(3){transition-delay:.25s;animation-delay:-2s}
.emo-motion .emo-strip figure:nth-child(4){transition-delay:.35s;animation-delay:-3s}
.emo-motion .emo-strip figure:nth-child(5){transition-delay:.45s;animation-delay:-4s}
.emo-motion .emo-strip figure:nth-child(6){transition-delay:.55s;animation-delay:-5s}
@keyframes emoSway{0%,100%{translate:0 0}50%{translate:0 -7px}}
.emo-strip figure:hover{animation-play-state:paused}

/* ブランドロゴ：ぽんっと出て、触るとゆれる */
.emo-motion .emo-brands a{opacity:0;transform:scale(.6);transition:opacity .6s ease,transform .7s cubic-bezier(.3,1.6,.4,1)}
.emo-motion .emo-brands.emo-on a{opacity:1;transform:none}
.emo-motion .emo-brands a:nth-child(2){transition-delay:.08s}.emo-motion .emo-brands a:nth-child(3){transition-delay:.16s}.emo-motion .emo-brands a:nth-child(4){transition-delay:.24s}
.emo-motion .emo-brands a:nth-child(5){transition-delay:.32s}.emo-motion .emo-brands a:nth-child(6){transition-delay:.4s}.emo-motion .emo-brands a:nth-child(7){transition-delay:.48s}
.emo-brands a:hover img,.emo-brands a:hover{animation:emoWiggle .6s ease}
@keyframes emoWiggle{0%,100%{rotate:0deg}25%{rotate:-6deg}50%{rotate:5deg}75%{rotate:-2deg}}

/* カードの立体傾き＋光 */
.emo-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s ease,box-shadow .4s ease;transform-style:preserve-3d;position:relative}
.emo-motion .emo-tilt.emo-in:not(.emo-on){transform:translateY(34px)}
.emo-tilt::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(255,248,235,.32),transparent 45%);opacity:0;transition:opacity .4s}
.emo-tilt:hover::after{opacity:1}
.emo-tilt:hover{box-shadow:0 22px 44px rgba(43,34,29,.16)}

/* ボタン：光がすっと走る */
.store-primary,.nb-btn-main,.bl-resv-link,.emo-tiktok,.reserve-link,.mobile-action{position:relative;overflow:hidden}
.store-primary::before,.nb-btn-main::before,.bl-resv-link::before,.emo-tiktok::before,.mobile-action::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);pointer-events:none}
.store-primary:hover::before,.nb-btn-main:hover::before,.bl-resv-link:hover::before,.emo-tiktok:hover::before{animation:emoShine .9s ease}
.mobile-action::before{animation:emoShine 1.1s ease 2s 2}
@keyframes emoShine{to{left:130%}}

/* カード写真：ふれると少しズーム */
.bl-bizcard-media,.column-card,.card{overflow:hidden}
.bl-bizcard-media img,.card img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)!important}
.bl-bizcard:hover .bl-bizcard-media img,.card:hover img{transform:scale(1.07)!important}

/* トップ：光の粒がふわふわ */
.group-intro{position:relative}
.emo-dust{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.emo-dust i{position:absolute;bottom:-20px;width:var(--s,6px);height:var(--s,6px);border-radius:50%;background:radial-gradient(circle,rgba(226,180,143,.9),rgba(226,180,143,0) 70%);left:var(--x);animation:emoRise var(--t,14s) linear infinite;animation-delay:var(--dl,0s);opacity:0}
@keyframes emoRise{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}100%{transform:translate(var(--dx,30px),-110vh);opacity:0}}
.group-intro>.wrap{position:relative;z-index:1}

/* 流れる文字の帯 */
.emo-marquee{overflow:hidden;white-space:nowrap;padding:26px 0;border-block:1px solid var(--emo-line,rgba(43,34,29,.12));background:var(--emo-paper,#f5eee4)}
.emo-marquee div{display:inline-block;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(34px,6vw,84px);line-height:1;color:var(--emo-ink,#2b221d);animation:emoMarq 38s linear infinite}
.emo-marquee span{color:#b4623b;margin:0 .35em;font-style:normal}
.emo-marquee div:hover{animation-play-state:paused}
@keyframes emoMarq{to{transform:translateX(-50%)}}

/* 代表メッセージ：大きな文字がゆっくり流れる */
.emo-motion .emo-message::before{animation:emoDrift 18s ease-in-out infinite alternate}
@keyframes emoDrift{to{transform:translateX(-6%)}}

/* なつ：番号がはねる */
.emo-motion .nb-card.emo-on .nb-num{animation:emoPop .7s cubic-bezier(.3,1.8,.4,1) calc(var(--d,0ms) + .25s) both}
@keyframes emoPop{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
.emo-motion .nb-timeline li.emo-on::before{animation:emoPulse 2.4s ease-in-out calc(var(--d,0ms) + .4s) infinite}
@keyframes emoPulse{0%,100%{box-shadow:0 0 0 0 rgba(214,236,110,.9)}50%{box-shadow:0 0 0 8px rgba(214,236,110,0)}}

@media (prefers-reduced-motion:reduce){
  .emo-progress,.emo-dust{display:none}
  .emo-marquee div,.emo-strip figure,.emo-message::before{animation:none!important}
  *{scroll-behavior:auto!important}
}
html{scroll-behavior:smooth}
/* 傾きは「現れた後」に効かせる */
.emo-motion .emo-in.emo-tilt.emo-on,.emo-tilt:not(.emo-in){transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:opacity 1s ease var(--d,0ms),transform .4s ease,box-shadow .4s ease}
/* トップ写真：幕が上がって、バッジがふわっと */
.emo-motion .emo-top-photo figure{animation:emoTopWipe .9s cubic-bezier(.7,0,.2,1) .1s both}
.emo-motion .emo-top-photo img{animation:emoTopZoom 1.6s cubic-bezier(.2,.7,.2,1) .1s both}
.emo-motion .emo-top-badge{animation:emoTopBadge .7s cubic-bezier(.3,1.5,.4,1) .8s both,emoSway 6s ease-in-out 1.6s infinite}
@keyframes emoTopWipe{from{clip-path:inset(100% 0 0 0 round 999px 999px 26px 26px)}to{clip-path:inset(0 0 0 0 round 999px 999px 26px 26px)}}
@keyframes emoTopZoom{from{transform:scale(1.18)}to{transform:scale(1)}}
@keyframes emoTopBadge{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.emo-top-photo figure,.emo-top-photo img,.emo-top-badge{animation:none!important}}

/* 全店トップへ戻るボタン（2026-10-14） */
.emo-home-btn{min-height:44px;box-sizing:border-box;position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:160;display:inline-flex;align-items:center;gap:6px;padding:11px 16px;border-radius:999px;background:rgba(36,41,35,.92);color:#fff!important;font:600 13px/1 system-ui,-apple-system,"Hiragino Sans",sans-serif;letter-spacing:.04em;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .2s ease,background .2s ease}
.emo-home-btn:hover{background:#16201b;transform:translateY(-2px)}
.emo-home-btn:focus-visible{outline:2px solid #d6ec6e;outline-offset:3px}
@media(max-width:1100px){.emo-home-btn{bottom:calc(76px + env(safe-area-inset-bottom));right:12px;padding:10px 14px;font-size:12px}}
@media print{.emo-home-btn{display:none}}