@charset "utf-8";
/* CSS Document */

@media screen and (min-width: 768px) {
  .footer-bnr-block {
    width: 980px;
    position: fixed;
    bottom: 0;
    left: 50%;
    margin-left: -490px;
    z-index: 100;
    font-size: 0;
    pointer-events: none;
  }

  .footer-bnr-block .footer-bnr,
  .footer-bnr-block #footer-bnr-close {
    pointer-events: auto; /* ←クリック可能に戻す */
  }

  .footer-bnr-block img {
    display: inline;
  }

  #footer-bnr-close {
    cursor: pointer;
    text-align: right;
    line-height: 0;
  }
  .footer-bnr {
    background: #ffffff;
  }
}
@media screen and (max-width: 767px) {
  .footer-bnr-block {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 100;
    font-size: 0;
    pointer-events: none;
  }

  .footer-bnr-block .footer-bnr,
  .footer-bnr-block #footer-bnr-close {
    pointer-events: auto; /* ←クリック可能に戻す */
  }

  #footer-bnr-close {
    cursor: pointer;
    text-align: right;
    line-height: 0;
  }

  .footer-bnr-block img {
    display: inline;
  }
}
@media print {
  div.footer-bnr-block {
    display: none;
  }
}

/*-----------------
 n秒後表示ポップアップ
 -----------------*/
.footerPopup {
  position: fixed;
  bottom: 0;
}

.footerPopup.pop_center,
.footerPopup.pop_right,
.footerPopup.pop_left {
  width: 100%;
}

.footerPopup_box {
  width: 400px;
  margin: 0 auto;
}

@media (min-width: 721px) {
  /* 右寄せ */

  .footerPopup.pop_right {
    right: 0;
    width: auto;
  }

  .footerPopup.pop_left {
    left: 0;
    width: auto;
  }

  .footerPopup_box {
    margin: 0;
  }

  .pop_center .footerPopup_box {
    margin: 0 auto;
  }
}

/* アニメーション #show-later */

.anim-box {
  width: 100%;
}

.anim-box .footer-bnr {
  margin-left: auto;
  display: block;
  width: 70%;
}

.anim-box #footer-bnr-close {
  margin-left: auto;
  display: block;
  width: 66%;
  text-align: left;
  cursor: auto;
}

.anim-box #footer-bnr-close img {
  position: absolute;
}

.anim-box.slidein {
  animation: slideIn 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,
  100% {
    opacity: 1;
  }
}

#show-later.d-none {
  display: none;
}

@media screen and (min-width: 768px) {
  #show-later .footer-bnr {
    background: inherit;
  }

  .anim-box .footer-bnr {
    width: 20%;
  }

  .anim-box #footer-bnr-close {
    width: 18.5%;
  }

  .anim-box.footer-bnr-block {
    /* width: auto;
    position: fixed; */
    bottom: 0;
    left: initial;
    right: 0;
    margin-left: 0;
    z-index: 100;
  }
}