.container.js-now-loading {
  position: fixed;
  /* overflow: hidden; */
}

.loading {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  background-color: #fff;
  z-index: 10000;
}

.loading.js-loading-anim-end {
  transition: opacity 0.5s .5s ease-out;
  opacity: 0;
}

.loading.end {
  display: none;
}

.loading-inner {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  background-color: #19bfff;
  border: solid 2px #000;
  border-radius: 21.466vw;
  box-sizing: border-box;

}

.loading_loader {
  padding-block-start: 8.533vw;
  padding-block-end: 6.933vw;
  padding-inline: 5.6vw;
  background-color: #ffffeb;
  border: solid 2px #000;
  border-radius: 100vmax;
  box-sizing: border-box;
}

.loading_loader.js-loader-out {
  opacity: 0;
  transition: opacity .4s;
}

.loading_loader_txt {
  font-size: 5.6vw;
  letter-spacing: 0.035em;
  writing-mode: vertical-rl;
}

.loading_loader-wrap {
  margin-block-start: 3.466vw;
  margin-inline: auto;
  position: relative;
  width: 4.533vw;
  height: 80vw;
  transition: height linear 1s;
}

.loading_loader-wrap.js-loading-anim1 {
  height: 40vw;
}

.loading_loader-wrap.js-loading-anim2 {
  transition: height linear 1s;
  height: 0;
}

.loading_linear {
  margin: auto;
  display: block;
  width: 2px;
  height: 100%;
  border-right: 2px solid #323232;
  box-sizing: border-box;
}

.loading_arrow {
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 3.2vw;
  height: 3.2vw;
  border-right: 2px solid #323232;
  border-bottom: 2px solid #323232;
  transform: translateX(-50%) rotate(45deg);
  z-index: 1;
}

@media screen and (min-width: 751px) {
  .loading-inner {
    border-radius: 118px;
  }

  .loading_loader {
    display: flex;
    align-items: center;
    padding-block: 29px;
    padding-inline: 45px 35px;
  }

  .loading_loader_txt {
    font-size: 24px;
    letter-spacing: 0.08em;
    writing-mode: horizontal-tb;
  }

  .loading_loader-wrap {
    display: inline-block;
    margin-block: 0;
    margin-inline-start: 14px;
    margin-inline-end: 0;
    width: 400px;
    height: 22px;
    transition: width linear 1s;
  }
  
  .loading_loader-wrap.js-loading-anim1 {
    width: 200px;
    height: 22px;
  }
  
  .loading_loader-wrap.js-loading-anim2 {
    transition: width linear 1s;
    width: 0;
    height: 22px;
  }
  
  .loading_linear {
    margin-block: 10px;
    display: block;
    width: 100%;
    height: 2px;
    border-right: none;
    border-top: 2px solid #323232;
    box-sizing: border-box;
  }
  
  .loading_arrow {
    position: absolute;
    top: 50%;
    bottom: auto;
    left: auto;
    right: 1px;
    width: 15px;
    height: 15px;
    transform: translateY(-50%) rotate(-45deg);
  }
}


/* anim */