@charset "UTF-8";
/* =========================================================
   フッター固定バナー（.wd-popup）
   ・PC: 画面右下に固定 ／ SP: 画面下部の中央に固定
   ・下からスライドして表示。× で閉じると設定日数は再表示しない
   ・表示中は SWELL の「トップへ戻る」ボタン(.p-fixBtnWrap)をバナーの上へ退避（PC）
   ========================================================= */
.wd-popup{
  --wd-popup-size:220px;
  --wd-popup-gap:24px;
  position:fixed;
  right:var(--wd-popup-gap);
  bottom:var(--wd-popup-gap);
  z-index:9990;
  width:var(--wd-popup-size);
  animation:wd-popup-up .5s cubic-bezier(.22,.61,.36,1) both;
}
.wd-popup[hidden]{ display:none !important; }
.wd-popup__box{ position:relative; }
.wd-popup__link{ display:block; }
.wd-popup__link img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
}
.wd-popup__close{
  position:absolute;
  top:-10px;
  right:-10px;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#333;
  font-size:18px;
  line-height:28px;
  text-align:center;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.wd-popup__close:hover{ background:#f2f2f2; }

/* 表示中は「トップへ戻る」ボタンをバナーの上へ（PC） */
@media (min-width:601px){
  html.wd-popup-shown .p-fixBtnWrap{
    bottom:calc(var(--wd-popup-gap, 24px) + var(--wd-popup-size, 220px) + 16px) !important;
  }
}

/* SP: 下部中央 */
@media (max-width:600px){
  .wd-popup{
    --wd-popup-size:min(56vw, 220px);
    --wd-popup-gap:12px;
    right:0;
    left:0;
    margin:0 auto;
    bottom:calc(var(--wd-popup-gap) + env(safe-area-inset-bottom, 0px));
  }
}

@keyframes wd-popup-up{
  from{ transform:translateY(calc(100% + 40px)); opacity:0; }
  to{ transform:none; opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .wd-popup{ animation:none; }
}