/* =========================================================
 * loading
========================================================= */
/* html {
  overflow: hidden;
}
html:has(.slide-down) {
  overflow: auto;
}
 */
.loading,
.loading *,
.loading .field,
.figure  {
  pointer-events: none;
}
@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
.loading {
  position: relative;
}
.loading.hide {
  opacity: 0;
  visibility: hidden;
}
.loading .field {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 1650px;
  height: 100vh;
  min-height: 1080px;
  max-height: 1080px;
  z-index: 9999;
}
.loading::after {
  content: "";
  display: block;
  position: fixed;
  inset: 0;
  z-index: 999;
  animation: fadeOut 2.8s 3.6s forwards;
}
.loading.active::after {
  background-color: #fff;
}
.loading .field01:before,
.loading .field01:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 999;
  width: 1.2121212121vw;
  max-width: 20px;
  height: 100%;
  background: url("../img/loading/img_diagonal-line.svg") repeat-y center center/contain;
  top: 50%;
  transform: translateY(-50%);
  transition: all .6s ease;
}
.loading .field01:before {
  left: 0;
}
.loading .field01:after {
  right: 0;
}
.loading .field01.show:before,
.loading .field01.show:after {
  height: 100%;
}
.loading .field01.hide:before,
.loading .field01.hide:after {
  height: 0;
  opacity: 0;
}
.loading .field {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 1650px;
  height: 100vh;
  /*min-height: 1080px;
  max-height: 1080px;
  background-color: #fff;*/
  z-index: 999;
}

.loading .field.hide:before,
.loading .field.hide:after {
  height: 0;
  opacity: 0;
  transition: opacity .8s ease-in-out, transform .8s ease-in-out;
}

.loading .field01 {
  z-index: 1111;
}
.loading .field02 {
  z-index: 1000;
}

.loading .field01:before,
.loading .field01:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1000;
  width: 1.2121212121vw;
  max-width: 20px;
  height: 100%;
  background: url("../img/loading/img_diagonal-line.svg") repeat-y center center/contain;
  top: 50%;
  transform: translateY(-50%);
  transition: all .4s ease;
}

.loading .field01:before {
  left: 0;
}

.loading .field01:after {
  right: 0;
}

.loading .field01.show:before,
.loading .field01.show:after {
  height: 100%;
}

.loading .field02 .figure {
  position: absolute;
  opacity: 0;
  transform: translate(0, 0);
  transition: opacity .8s ease-in-out, transform .8s ease-in-out;
  will-change: opacity, transform;
}

.loading .field02 .figure.show {
  opacity: 1;
  transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
}

.loading .field02 .figure.f01 {
  width: 41.9%;
  top: 2.7%;
  left: 1.3%;
  transform: translateX(-100%);
}

.loading .field02 .figure.f01.show {
  transform: translateX(0);
}

.loading .field02 .figure.f02 {
  width: 51.1%;
  top: 4%;
  right: 1.3%;
  transform: translateX(100%);
}

.loading .field02 .figure.f02.show {
  transform: translateX(0);
}

.loading .field02 .figure.f03 {
  width: 54.4%;
  top: 20%;
  left: 1.3%;
  transform: translateY(-100%);
}

.loading .field02 .figure.f03.show {
  transform: translateY(0);
}

.loading .field02 .figure.f04 {
  width: 14.4%;
  top: 20.6%;
  left: 57.9%;
  transform: translate(-100%, -100%);
}

.loading .field02 .figure.f04.show {
  transform: translate(0, 0);
}

.loading .field02 .figure.f05 {
  width: 25.6%;
  top: 20.6%;
  right: 1.3%;
  transform: translateX(100%);
}

.loading .field02 .figure.f05.show {
  transform: translateX(0);
}

.loading .field02 .figure.f06 {
  width: 21.3%;
  top: 32.8%;
  left: 8.4%;
  transform: translateX(100%);
}

.loading .field02 .figure.f06.show {
  transform: translateX(0);
}

.loading .field02 .figure.f07 {
  width: 37.2%;
  top: 33.8%;
  left: 1.3%;
  transform: translateX(100%);
}

.loading .field02 .figure.f07.show {
  transform: translateX(0);
}

.loading .field02 .figure.f08 {
  width: 32.9%;
  top: 36.2%;
  left: 39.8%;
  transform: translateY(100%);
}

.loading .field02 .figure.f08.show {
  transform: translateY(0);
}

.loading .field02 .figure.f09 {
  width: 19.6%;
  top: 38.3%;
  right: 1.3%;
  transform: translateY(-100%);
}

.loading .field02 .figure.f09.show {
  transform: translateY(0);
}

.loading .field02 .figure.f10 {
  width: 13%;
  top: 48.8%;
  left: 1.3%;
  transform: translate(-100%, -100%);
}

.loading .field02 .figure.f10.show {
  transform: translate(0, 0);
}

.loading .field02 .figure.f11 {
  width: 61.1%;
  top: 47.9%;
  left: 15.6%;
  transform: translateX(-100%);
}

.loading .field02 .figure.f11.show {
  transform: translateX(0);
}

.loading .field02 .figure.f12 {
  width: 19.6%;
  top: 55.5%;
  right: 1.3%;
  transform: translateX(-100%);
}

.loading .field02 .figure.f12.show {
  transform: translateX(0);
}

.loading .field02 .figure.f13 {
  width: 33.1%;
  top: 64.1%;
  left: 1.3%;
  transform: translateX(-100%);
}

.loading .field02 .figure.f13.show {
  transform: translateX(0);
}

.loading .field02 .figure.f14 {
  width: 35.6%;
  top: 64%;
  left: 36.7%;
  transform: translateX(100%);
}

.loading .field02 .figure.f14.show {
  transform: translateX(0);
}

.loading .field02 .figure.f15 {
  width: 24.9%;
  top: 65.5%;
  right: 1.3%;
  transform: translateX(-100%);
}

.loading .field02 .figure.f15.show {
  transform: translateX(0);
}

.loading .field02 .figure.f16 {
  width: 51%;
  top: 74.4%;
  left: 1.3%;
  transform: translateX(-100%);
}

.loading .field02 .figure.f16.show {
  transform: translateX(0);
}

.loading .field02 .figure.f17 {
  width: 42.2%;
  top: 75%;
  right: 3.8%;
  transform: translateY(-100%);
}

.loading .field02 .figure.f17.show {
  transform: translateY(0);
}

.loading .field02 .figure.f18 {
  width: 39%;
  top: 83.8%;
  left: 1.3%;
  transform: translateX(100%);
}

.loading .field02 .figure.f18.show {
  transform: translateX(0);
}

.loading .field02 .figure.f19 {
  width: 55.9%;
  top: 84.4%;
  right: 1.3%;
  transform: translateX(-100%);
}

.loading .field02 .figure.f19.show {
  transform: translateX(0);
}
@media screen and (max-width: 1024px) {
  .loading .field {
    max-width: inherit;
    min-height: inherit;
    max-height: inherit;
  }
  .loading .field01:before,
  .loading .field01:after {
    max-width: inherit;
  }
  .loading .field02 .figure.f01 {
    width: 60%;
    top: 1.3%;
    left: 2.3%;
  }
  .loading .field02 .figure.f02 {
    width: 96.1%;
    top: 11%;
    right: 2.3%;
  }
  .loading .field02 .figure.f03 {
    width: 72%;
    top: 23%;
    left: 2.3%;
  }
  .loading .field02 .figure.f04 {
    width: 20%;
    top: 23%;
    left: 78%;
  }
  .loading .field02 .figure.f05 {
    width: 32.5%;
    top: 1.3%;
    right: 2.3%;
  }
  .loading .field02 .figure.f06 {
    width: 35.6%;
    top: 29%;
    left: 12%;
  }
  .loading .field02 .figure.f07 {
    width: 56.8%;
    top: 30.6%;
    left: 2.3%;
  }
  .loading .field02 .figure.f08 {
    width: 35%;
    top: 32.6%;
    left: 61.5%;
  }
  .loading .field02 .figure.f09 {
    width: 27.6%;
    top: 40.5%;
    right: 2.3%;
  }
  .loading .field02 .figure.f10 {
    width: 17.5%;
    top: 51%;
    left: 2.3%;
  }
  .loading .field02 .figure.f11 {
    width: 75%;
    top: 51%;
    left: 22.6%;
  }
  .loading .field02 .figure.f12 {
    width: 64%;
    top: 40.5%;
    right: 32.8%;
  }
  .loading .field02 .figure.f13 {
    width: 45%;
    top: 60%;
    left: 2.3%;
  }
  .loading .field02 .figure.f14 {
    width: 48%;
    top: 59.5%;
    left: 50%;
  }
  .loading .field02 .figure.f15 {
    width: 95%;
    top: 66%;
    right: 2.3%;
  }
  .loading .field02 .figure.f16 {
    width: 95%;
    top: 76%;
    left: 2.3%;
  }
  .loading .field02 .figure.f17 {
    width: 45%;
    top: 83%;
    right: 3.8%;
  }
  .loading .field02 .figure.f18 {
    width: 45%;
    top: 83%;
    left: 2.3%;
  }
  .loading .field02 .figure.f19 {
    width: 95%;
    top: 90%;
    right: 2.3%;
  }
}
/*  */