@charset "UTF-8";
/* トップページ右下の「運命BAR」追従リンク */
.ub-promo{
  --gold:#ddad2c; --gold-l:#f3dfa4;
  position:fixed; right:22px; bottom:22px; z-index:10002;
  width:330px; border-radius:16px; overflow:hidden; text-decoration:none; color:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 30px rgba(221,173,44,.18);
  opacity:0; transform:translateY(24px) scale(.97); pointer-events:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
}
.ub-promo.is-show{opacity:1;transform:none;pointer-events:auto;animation:ubpFloat 5s ease-in-out 1s infinite}
.ub-promo:hover{box-shadow:0 22px 48px rgba(0,0,0,.6),0 0 44px rgba(221,173,44,.38);animation-play-state:paused}
/* 回転する金の縁取り */
.ub-promo::before{
  content:""; position:absolute; inset:-60%;
  background:conic-gradient(from 0deg,transparent 0 62%,rgba(221,173,44,.15) 70%,#f3dfa4 80%,#ddad2c 86%,transparent 94%);
  animation:ubpSpin 4.5s linear infinite;
}
.ub-promo__in{
  position:relative; margin:1.5px; border-radius:15px; overflow:hidden;
  display:flex; align-items:center; gap:14px; padding:16px 44px 16px 16px; min-height:104px;
  background:#120f0c;
}
.ub-promo__bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:.38; filter:saturate(1.15); transition:transform 1.2s ease, opacity .4s;
}
.ub-promo__in::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,11,8,.92) 0%,rgba(14,11,8,.62) 60%,rgba(14,11,8,.35))}
.ub-promo:hover .ub-promo__bg{transform:scale(1.08);opacity:.5}
.ub-promo__logo{
  position:relative; z-index:1; flex:0 0 62px; width:62px; height:62px; border-radius:50%;
  background:#f5f1e8; overflow:hidden; border:1px solid rgba(221,173,44,.6);
  box-shadow:0 0 0 4px rgba(221,173,44,.12),0 0 22px rgba(221,173,44,.35);
}
.ub-promo__logo img{width:100%;height:100%;object-fit:cover;display:block}
.ub-promo__body{position:relative;z-index:1;display:flex;flex-direction:column;line-height:1.35;min-width:0}
.ub-promo__tag{font-family:"futura","arial","Noto Sans JP",sans-serif;font-size:10px;letter-spacing:.22em;color:var(--gold);margin-bottom:5px;white-space:nowrap}
.ub-promo__name{
  font-family:"Zen Old Mincho","ヒラギノ明朝 ProN W6","HiraMinProN-W6",serif; font-size:27px; letter-spacing:.12em; line-height:1.15;
  background:linear-gradient(100deg,#c9962a 0%,#f7e2a6 35%,#fff6da 50%,#f7e2a6 65%,#c9962a 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 10px rgba(221,173,44,.35)); animation:ubpShine 4s linear infinite;
}
.ub-promo__desc{font-family:"arial","Noto Sans JP","游ゴシック体",YuGothic,sans-serif;font-size:12px;color:#e9e2d4;margin-top:6px;letter-spacing:.04em}
.ub-promo__desc b{color:var(--gold-l);font-weight:700}
.ub-promo__arrow{
  position:absolute; z-index:1; right:14px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(221,173,44,.55); color:var(--gold-l); font-size:13px; transition:.3s;
}
.ub-promo:hover .ub-promo__arrow{background:var(--gold);color:#1a1405;transform:translateY(-50%) translateX(3px)}

/* 小さくするボタン */
.ub-promo__close{
  position:fixed; right:14px; z-index:10003; width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(221,173,44,.5); background:#1a1612; color:#e9e2d4; font-size:14px; line-height:1;
  cursor:pointer; display:grid; place-items:center; padding:0;
  bottom:calc(22px + 106px - 13px); opacity:0; pointer-events:none; transition:opacity .4s;
}
.ub-promo.is-show ~ .ub-promo__close{opacity:1;pointer-events:auto}
.ub-promo__close:hover{background:var(--gold,#ddad2c);color:#1a1405}

/* 小さくした状態（ロゴの丸だけ） */
.ub-promo.is-mini{width:72px;border-radius:50%;animation:none}
.ub-promo.is-mini .ub-promo__in{padding:0;min-height:0;width:69px;height:69px;border-radius:50%;justify-content:center}
.ub-promo.is-mini .ub-promo__body,.ub-promo.is-mini .ub-promo__arrow,.ub-promo.is-mini .ub-promo__bg{display:none}
.ub-promo.is-mini .ub-promo__logo{flex-basis:auto;width:62px;height:62px}
.ub-promo.is-mini::after{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(221,173,44,.7);
  animation:ubpPulse 2.4s ease-out infinite;
}
.ub-promo.is-mini ~ .ub-promo__close{display:none}

/* モーダル表示中は隠す */
body.modaal-noscroll .ub-promo,body.modaal-noscroll .ub-promo__close{opacity:0!important;pointer-events:none!important}

/* スマホ：下部中央の横長ピル */
@media screen and (max-width:768px){
  .ub-promo{right:auto;left:50%;bottom:14px;width:min(360px,calc(100% - 28px));border-radius:999px;transform:translate(-50%,24px)}
  .ub-promo.is-show{transform:translateX(-50%);animation:none}
  .ub-promo__in{border-radius:999px;min-height:62px;padding:8px 46px 8px 8px;gap:11px}
  .ub-promo__logo{flex-basis:46px;width:46px;height:46px}
  .ub-promo__tag{font-size:9px;margin-bottom:2px;letter-spacing:.16em}
  .ub-promo__name{font-size:20px}
  .ub-promo__desc{display:none}
  .ub-promo__close{right:max(14px,calc(50% - 180px));bottom:calc(14px + 64px - 10px);width:24px;height:24px;font-size:13px}
  .ub-promo.is-mini{left:auto;right:14px;width:62px;transform:none}
  .ub-promo.is-mini.is-show{transform:none}
  .ub-promo.is-mini .ub-promo__in{width:59px;height:59px}
  .ub-promo.is-mini .ub-promo__logo{width:52px;height:52px}
}

@keyframes ubpSpin{to{transform:rotate(360deg)}}
@keyframes ubpShine{to{background-position:-220% 0}}
@keyframes ubpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes ubpPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.45);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .ub-promo,.ub-promo::before,.ub-promo__name,.ub-promo.is-mini::after{animation:none!important}
}