@charset "UTF-8";

#sec-attention .title-kakomi-bltitle-kakomi-bl{
  margin-bottom: 30px;
}
#sec-attention .conte01 .tx{
  margin-bottom: 30px;
  margin-top: 30px;
}

.mono .bg-logo{
  padding: calc(150px * var(--space-scale)) 0 0;
}


.bg-obi-white.title{
  color: var(--bg-black);
  padding: 6px 24px 10px;
    background: var(--color-white);
    display: table;
    margin-left: auto;
    margin-right: auto;
    border-radius: 2px;
    font-size: calc(28px * var(--font-scale));
    font-weight: 900;
    line-height: 1.2;
}

#howtobuy{
  position: relative;
}


#howtobuy .bg-obi-white{
  /*margin-top: calc(90px * var(--space-scale-s));*/
  margin-bottom:calc(50px * var(--space-scale-s));
  margin-right: auto;
  margin-left: auto;
}

.mono .bg-logo{
  position: relative;
}
.mono .bg-logo::after,
.mono .bg-logo::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
}
.mono .bg-logo::before{
  background: url(https://www.levanga.com/files/user/_/lp/2026-27/ss-26-27/img/common/logo-bg-right.svg)no-repeat;
  background-size: 50%;
  background-position: top right -40%;
}
.mono .bg-logo::after{
  background: url(https://www.levanga.com/files/user/_/lp/2026-27/ss-26-27/img/common/logo-bg-left.svg)no-repeat;
  background-size: 50%;
  background-position: top 50% left -40%;
}


/*************/

#sec-rewards .conte-animation .title-line {
  top: 52%;
  left: 10%;
}
#sec-rewards .conte-animation .title-line.short {
  top: -5%;
  left: auto;
  right: 10%;
  animation-delay: 0.6s;
}

.conte-animation{
  position: relative;
}
.conte-animation .title-line {
  transform: scaleX(0);
  transform-origin: left center;
  width: 40%;
  height: 4px;
  background: var(--bg-main);
  position: absolute;
  border-radius: 2px;
}
.conte-animation .title-line.short {
  width: 5%;
  height: 4px;
}

.conte-animation .title-line.is-active {
  animation: 
    lineExtend .7s ease forwards,
    scanLine 7s ease .7s infinite;
}
.conte-animation .title-line.short.is-active {
  animation: 
    lineExtend .4s ease forwards,
    scanLine 4s ease .4s infinite;
}


@keyframes scanLine {
  0% {
    transform: translateX(-20%);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  50% {
    opacity: 1;
    transform: translateX(110%);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(0%);
    opacity: 0;
  }
}

@keyframes lineExtend {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes lineGlitch {
  0% { translate: 0 0; }
  25% { translate: 18px 0; }
  50% { translate: -8px 0; }
  75% { translate: 6px 0; }
  100% { translate: 0 0; }
}






/*************/






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






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


  .mono .bg-logo::before{
    background: url(../img/common/logo-bg-right.svg)no-repeat;
    background-size: 70%;
    background-position: top right -80%;
  }
  .mono .bg-logo::after{
    background: url(../img/common/logo-bg-left.svg)no-repeat;
    background-size: 70%;
    background-position: top 50% left -80%;
  }


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

  .mono .bg-logo::before{
    background: url(../img/common/logo-bg-right.svg)no-repeat;
    background-size: 100%;
    background-position: top right;
    right: -40%;
  }
  .mono .bg-logo::after{
    background: url(../img/common/logo-bg-left.svg)no-repeat;
    background-size: 100%;
    background-position: top 50% left;
    left: -40%;
  }

  #sec-rewards .conte-animation .title-line {
    top: 70%;
    left: -50%;
  }
  #sec-rewards .conte-animation .title-line.short {
    top: -20%;
    left: auto;
    right: 10%;
    width: 10%;
  }


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





}