@charset 'UTF-8';
/*  Add Custom CSS here.  */

/*@media (max-width: 720px) {
  .footer .box-totop {
    bottom: 180px;
  }
}
@media (max-width: 480px) {
  .footer .box-totop {
    bottom: 105px;
  }
}*/

.hero-bnr {
  bottom: 50px;
  position: absolute;
  right: 50px;
  max-width: 250px;
  width: 25%;
}
@media (max-width: 720px) {
  .hero-bnr {
    bottom: 30px;
    right: 30px;
    max-width: 250px !important;
    width: 250px;
  }
}
@media (max-width: 640px) {
  .hero-bnr {
    bottom: 15px;
    right: 15px;
    max-width: 200px !important;
    width: 200px;
  }
}

/* floating banner and fixed banner
-------------------------------------------------- */
/*.float_banner.onlyInPC {
  width: 220px;
  position: fixed;
  top: -200px;
  left: 15px;
  z-index: 10;
  transition: 0.3s;
  opacity: 0;
}
.float_banner.onlyInPC.active {
  opacity: 1;
  top: 150px;
}
.float_banner.onlyInPC img {
  max-width: 220px;
  width: 220px;
}

.float_banner.onlyInSP {
  width: 100%;
  position: fixed;
  bottom: -200px;
  left: 0;
  z-index: 10;
  transition: 0.3s;
  opacity: 0;
}
.float_banner.onlyInSP.active {
  opacity: 1;
  bottom: 0;
}
.float_banner.onlyInSP img {
  width: 100%;
}

@media (min-width: 721px) {
  .float_banner.onlyInSP {
    display: none !important;
  }
}
@media (max-width: 720px) {
  .onlyInPC {
    display: none !important;
  }
  .footer {
    padding-bottom: 200px;
  }
}
@media (max-width: 480px) {
  .footer {
    padding-bottom: 150px;
  }
}*/