.name-card {
  position: absolute;
  top: 0;
  color: white;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.name-card .nojump {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 8;
}
.name-card .bg-img {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  height: 80%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  width: 100vw;
  z-index: -1;
}
.name-card .bg-img .container_img {
  padding: 3% 10%;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.name-card .bg-img .container_img div h1 {
  background: linear-gradient(120deg, #28064f 80%, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-size: 2.8em;
}
.name-card .bg-img #bannerImgPC {
  min-width: 100vw;
  min-height: 90dvh;
  max-height: 98dvh;
  position: absolute;
  top: -100px;
  left: 0;
  -o-object-fit: contain;
     object-fit: contain;
}
.name-card .bg-img #bannerImgSP {
  width: 100vw;
}
.name-card .bg-img h1 {
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
  color: #28064f;
  letter-spacing: -0.02em;
  font-family: "Russo One", sans-serif;
}
.name-card .resp_sp {
  display: none;
  visibility: hidden;
}
.name-card .front-card {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
}
.name-card .front-card .name-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  font-family: "Russo One", sans-serif;
  padding-left: 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80%;
  height: 80%;
}
.name-card .front-card .name-title h1 {
  font-size: 4rem;
  color: #000;
  padding-left: 100px;
}
.name-card .front-card .name-title .name {
  font-style: italic;
  font-size: 2rem;
}
.name-card .front-card span {
  width: 80%;
  height: 100px;
  clip-path: polygon(1% 0%, 0% 10%, 0% 95%, 1.5% 20%, 2.25% 10%, 50% 10%, 50.5% 7%, 50.5% 3%, 50% 0%);
  background-color: #4F033C;
  overflow: hidden;
}
.name-card .front-card #span-top:after {
  content: "";
  transform: translateX(100%);
  width: 100%;
  height: 220px;
  position: absolute;
  z-index: 1;
  animation: slide 2s infinite;
  top: 0;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
}
.name-card .front-card #span-bot {
  transform: rotate(180deg);
}
.name-card #span-bot:after {
  content: "";
  transform: translateX(100%);
  width: 100%;
  height: 220px;
  position: absolute;
  z-index: 1;
  animation: slide 2s infinite;
  animation-delay: 3s;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
}

.name-card-loading-bg {
  background: rgb(15, 0, 7);
}

@media (orientation: portrait) or (max-width: 900px) {
  .name-card {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .name-card .bg-img {
    z-index: 1;
    position: relative;
    height: 80%;
  }
  .name-card .bg-img .container_img {
    position: relative;
    padding: 0;
    align-items: flex-end;
    padding-bottom: 10dvh;
  }
  .name-card .bg-img .container_img img {
    position: absolute;
    top: -50px;
  }
  .name-card .bg-img .container_img .btns {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .name-card .bg-img .container_img div h1 {
    background: linear-gradient(90deg, rgb(255, 255, 255) 10%, #28064f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size: 2.8rem;
  }
  .name-card .resp_pc {
    display: none;
    visibility: hidden;
  }
  .name-card .resp_sp {
    display: block;
    visibility: visible;
  }
}/*# sourceMappingURL=hero_banner.css.map */