@charset "UTF-8";

html, body {
  width: 100%;
  height: 100%;
  margin: 0
}

html.pr-no-scroll, body.pr-no-scroll {
  overflow: hidden
}

body:not(.shogun-editor) {
  position: relative
}

.pr-loading-content {
  background-color: #F4F3F0;
  width: 100%;
  height: 100%;
  /* position: absolute; */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  transform: translateY(0);
  /* animation: fadeOut 1s linear 4s forwards, contentMove .5s linear 6s forwards */
  transition: 3s;
}

.pr-loading-content.hide {
  opacity: 0;
  pointer-events: none;
  transition: .5s;
}

.pr-img-loading {
  display: block;
  position: fixed;
  width: 100%;
  top: calc(50% + 53px);
  left: 50%;
  z-index: 100;
  text-align: center;
  transform: translateY(-50%) translate(-50%);
}

@media screen and (max-width:600px) {
  .pr-img-loading {
    top: calc(50% + 33px);
  }
}

.pr-img-loading , .pr-img-loading>* {
  transition: 3s;
}

.pr-img-loading>* {
  opacity: 0;
}

.pr-img-loading.hide , .pr-img-loading.hide>* {
  pointer-events: none;
  opacity: 0;
  transition: .5s;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    overflow: visible
  }

  to {
    opacity: 0;
    overflow: hidden
  }
}

@keyframes contentMove {
  from {
    transform: translateY(0)
  }

  to {
    transform: translateY(-100%)
  }
}

/*レイアウト*/
.loading_tate.in {
  animation: fadeTop 1s ease 1s forwards;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
margin: 0 auto 50px;
text-align: initial;
}
@-moz-document url-prefix() { /*firefox用*/
  .loading_tate.in {
    width: 48px; 
  }
}

@keyframes fadeTop {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.loading_tate p {
  font-size: 1.4rem;
  letter-spacing: 0.5em;
}

.loading_tate span {
  font-size: 1.0rem;
  color: rgba(0,0,0,0.5);
}

.loading_bb_txt.in {
  animation: fadeLeft 1s ease 2s forwards;
  font-size: 1.6rem;
  display: inline-block;
  margin-bottom: 40px;
  position: relative;
}

.loading_bb_txt.in::after {
  content: '';
  background-color: #666;
  height: 1px;
  width: 100%;
  animation: extend 1s ease 2.2s backwards;
  position: absolute;
  bottom: 0;
  left: 0;
}
@keyframes extend {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 100%;
    opacity: 1;
  }
}
.loading_main_txt.in {
  animation: fadeLeft 1s ease 2s forwards;
  font-size: 3.0rem;
}
.load_circle {
  animation: fadeLeft 1s ease 5s forwards;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
  left: 0;
  margin: auto;
  bottom: -150px;
  font-size: 1.2rem;
  color: #000 !important;
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.load_circle p {
  z-index: 2;
}
.load_circle_bg {
  content: '';
  width: 1px;
  height: 1px;
  background: radial-gradient(#ffffff 70%, #F4F3F0 100%);
  border-radius: 50%;
  animation: fluffy 4s ease .5s infinite , zoomFade 4s ease .5s infinite;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .load_circle_bg {
    width: 70px;
    height: 70px;
    animation: fluffy2 3s ease .5s infinite;
  }
  @keyframes fluffy2 {
    0%{
      opacity: 0;
    }
    50%{
      opacity: 0.7;
    }
    100%{
      opacity: 0;
    }
  }
}

@keyframes fluffy {
  0%{
    opacity: 0;
  }
  50%{
    opacity: 0.9;
  }
  100%{
    opacity: 0;
  }
}

@keyframes zoomFade {
    0% {
        transform: scale(1)
    }
    10% {
        transform: scale(40)
    }
    to {
        transform: scale(70)
    }
}
@media screen and (max-width:600px) {
.loading_bb_txt.in {font-size: 1.2rem;}
.loading_main_txt.in {font-size: 4.5vw;}
.load_circle.in {font-size: 1.0rem;bottom: -15vh;}
}