.cardSP {
  position: relative;
  text-align: center;
  padding: 1% 0;
  background: linear-gradient(#B1E0F0, #DBF0FF);
}

.cardSP .cardSP_wrapper .cardNP {
  width: 65vw;
  min-width: 735px;
  margin: 1em auto;
  display: flex;
}

.cardNP {
  margin: 10px;
}

.cardSP img {
  width: 100%;
}

.cardSP .card-rates {
  position: absolute;
  height: auto;
  top: 0;
  right: 0;
}

.card-percentage {
  display: flex;
  align-items: baseline;
  margin: -5vw -1vw 0px 1px;
  padding: 0px 3vw 0px 0px;
  position: relative;
  letter-spacing: -5px;
}

.card-percentage h1 {
  font-size: 7vw;
  color: transparent;
  -webkit-text-stroke: 0.2vw #ff5757;
  text-shadow: 0.5vw 0.3vw 0px rgba(255, 87, 87, 0.5);
}

.card-percentage h5 {
  font-size: 3vw;
  color: #dadada;
  -webkit-text-stroke: 0.1vw black;
  text-shadow: none;
  position: absolute;
  bottom: 1.3vw;
  right: 1.3vw;
  font-weight: 900;
  padding: 0px 0.7vw 0px 0px;
}

#videoSP {
  text-align: center;
  width: 100%;
  margin: 0 auto 10px auto;
}

@media screen and (min-width:769px) {
  .cardSP .cardSP_wrapper .right .cardNP {
    margin-left: 3px;
  }

  .cardSP .cardSP_wrapper .left .cardNP {
    margin-right: 3px;
  }

  .cardSP img {
    width: fit-content;
  }


}

@media screen and (max-width:768px) {

  .cardSP .cardSP_wrapper .cardNP {
    width: 70vw;
    min-width: unset;
    display: block;
  }

  .card-percentage {
    margin: -9vw 0.2vw 0px 1px;
  }

  .card-percentage h1 {
    font-size: 14vw;
  }

  .card-percentage h5 {
    font-size: 6vw;
    bottom: 2vw;
    right: 1vw;
  }



}

@media screen and (max-width:468px) {
  .cardSP .cardSP_wrapper .cardNP {
    width: 75vw;
  }

  .card-percentage {
    margin: -9vw 1vw 0px 1px;
  }

  .card-percentage h1 {
    font-size: 14vw;
  }

  .card-percentage h5 {
    font-size: 6vw;
    bottom: 2vw;
    right: 1vw;
  }
}

/* Keep the wide Nandemo Pay banner inside its panel and clip source edge pixels. */
.np-rate-banner-section {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
}

.np-rate-banner-section .cardNP {
  width: min(942px, calc(100vw - 20px));
  max-width: min(942px, calc(100vw - 20px));
  margin: 10px auto;
  box-sizing: border-box;
}

.np-rate-banner-section .cardNP > a {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
}

.cardSP img.np-rate-banner,
.cardSPBanner img.np-rate-banner,
img.np-rate-banner {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  clip-path: inset(2px round 16px);
  transform: scale(1.01);
  transform-origin: center;
}

.cardSP img.np-rate-banner,
.cardSPBanner img.np-rate-banner {
  width: 100% !important;
}

.cardSPBanner {
  overflow: hidden;
  border-radius: 16px;
}

/* header SP banner */

.cardSPBanner {
  position: relative;
  /* width: 15vw; */
  width: 25vw;
  margin: 0vw auto;
}

.cardSPBanner img {
  width: 100%;
}

.cardSPBanner .card-ratesBanner {
  position: absolute;
  height: auto;
  top: 0;
  right: 0;
}

.card-percentageBanner {
  display: flex;
  align-items: baseline;
  margin: -3.4vw -1.8vw 0px 1px;
  padding: 0px 3vw 0px 0px;
  position: relative;
  letter-spacing: -5px;
}

.card-percentageBanner h1 {
  font-size: 5vw;
  color: transparent;
  -webkit-text-stroke: 0.2vw #ff5757;
  text-shadow: 0.5vw 0.3vw 0px rgba(255, 87, 87, 0.5);
}

.card-percentageBanner h5 {
  font-size: 2vw;
  color: #dadada;
  -webkit-text-stroke: 0.1vw black;
  text-shadow: none;
  position: absolute;
  bottom: 1vw;
  right: 2vw;
  font-weight: 900;
  padding: 0px 0.7vw 0px 0px;
}

@media screen and (max-width:768px) {

  .cardSPBanner {
    /* width: 27vw; */
    width: 35vw;
    margin: -1vw auto;
  }

  .card-percentageBanner {
    margin: -5vw 0.2vw 0px 1px;
  }

  .card-percentageBanner h1 {
    font-size: 8vw;
  }

  .card-percentageBanner h5 {
    font-size: 4vw;
    bottom: 0vw;
    right: 0vw;
  }
}

@media screen and (max-width:468px) {

  .cardSPBanner {
    /*width: 35vw; */
    width: 50vw;
    margin: -1vw auto;
  }

  .card-percentageBanner {
    margin: -5vw 1vw 0px 1px;
  }


  .card-percentageBanner h1 {
    font-size: 8vw;
  }

  .card-percentageBanner h5 {
    font-size: 4vw;
    bottom: 0vw;
    right: 0vw;
  }
}






/* 
  
  .card-percentage {
    display: flex;
    align-items: baseline;
    margin: -4vw 0px 0px 1px;
    padding: 0px 3vw 0px 0px;
    position: relative;
  }
  
  .card-percentage h1 {
    font-size: 15vw;
    color: transparent;
    -webkit-text-stroke: 1vw #ff5757;
    text-shadow: 0.9vw 0.8vw 0px rgba(255, 87, 87, 0.5);
  }
  .card-percentage h5 {
    font-size: 7vw;
    color: #dadada;
    -webkit-text-stroke: 0.5vw black;
    text-shadow: none;
    position: absolute;
    bottom: 0;
    right: 0;
    font-weight: 900;
    padding: 0px 0.7vw 0px 0px;
  } */