body.is-loading {
  overflow: hidden;
}

.loading {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #fff;
  overflow: hidden;
  transition: opacity .8s ease, visibility .8s ease;
}

.loading.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading__inner {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
}

.loading__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("../img/loading_bg.jpg") center / cover no-repeat;
  opacity: 0;
  transition: opacity .8s ease;
}

.loading__main {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 704px;
  height: 704px;
  transform: translate(-50%, -50%);
}

.loading__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: min(420px, 70vw);
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.6s ease;
}

.loading__copy {
  position: absolute;
  left: 50%;
  top: calc(50% + 180px);
  z-index: 4;
  width: min(540px, 80vw);
  height: auto;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.6s ease;
}

.loading__logo {
  width: 450px;
}

.loading__copy {
  width: 480px;
}

.loading__diamonds {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transform: rotate(0deg) scale(.92);
  transition:
    opacity .6s ease,
    transform 1.4s ease;
}

.loading__diamond {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: auto;
  transform-origin: center center;
}

/* 10個を36度ずつ配置 */
.loading__diamond--01 { transform: translate(-50%, -50%) rotate(0deg) translateY(-352px); }
.loading__diamond--02 { transform: translate(-50%, -50%) rotate(36deg) translateY(-352px); }
.loading__diamond--03 { transform: translate(-50%, -50%) rotate(72deg) translateY(-352px); }
.loading__diamond--04 { transform: translate(-50%, -50%) rotate(108deg) translateY(-352px); }
.loading__diamond--05 { transform: translate(-50%, -50%) rotate(144deg) translateY(-352px); }
.loading__diamond--06 { transform: translate(-50%, -50%) rotate(180deg) translateY(-352px); }
.loading__diamond--07 { transform: translate(-50%, -50%) rotate(216deg) translateY(-352px); }
.loading__diamond--08 { transform: translate(-50%, -50%) rotate(252deg) translateY(-352px); }
.loading__diamond--09 { transform: translate(-50%, -50%) rotate(288deg) translateY(-352px); }
.loading__diamond--10 { transform: translate(-50%, -50%) rotate(324deg) translateY(-352px); }

/* STEP */
.loading.is-text-show .loading__logo,
.loading.is-text-show .loading__copy {
  opacity: 1;
}

.loading.is-diamond-show .loading__diamonds {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.loading.is-diamond-rotate .loading__diamonds {
  opacity: 1;
  transform: rotate(360deg) scale(1);
}

.loading.is-bg-show .loading__bg {
  opacity: 1;
}

.loading.is-fadeout .loading__bg,
.loading.is-fadeout .loading__logo,
.loading.is-fadeout .loading__copy,
.loading.is-fadeout .loading__diamonds {
  opacity: 0;
}

/* SP */
@media screen and (max-width: 767px) {
  .loading__bg {
    background: url("../img/loading_bg_sp.jpg") center / cover no-repeat;
  }
  .loading__main {
    width: 82vw;
    height: 82vw;
  }

  .loading__logo {
    width: min(225px, 65vw);
  }

  .loading__copy {
    top: 50%;
    width: min(246px, 70vw);
    transform: translate(-50%, 85px);
  }

  .loading__diamond {
    width: 19px;
  }

  .loading__diamond--01 { transform: translate(-50%, -50%) rotate(0deg) translateY(-38vw); }
  .loading__diamond--02 { transform: translate(-50%, -50%) rotate(36deg) translateY(-38vw); }
  .loading__diamond--03 { transform: translate(-50%, -50%) rotate(72deg) translateY(-38vw); }
  .loading__diamond--04 { transform: translate(-50%, -50%) rotate(108deg) translateY(-38vw); }
  .loading__diamond--05 { transform: translate(-50%, -50%) rotate(144deg) translateY(-38vw); }
  .loading__diamond--06 { transform: translate(-50%, -50%) rotate(180deg) translateY(-38vw); }
  .loading__diamond--07 { transform: translate(-50%, -50%) rotate(216deg) translateY(-38vw); }
  .loading__diamond--08 { transform: translate(-50%, -50%) rotate(252deg) translateY(-38vw); }
  .loading__diamond--09 { transform: translate(-50%, -50%) rotate(288deg) translateY(-38vw); }
  .loading__diamond--10 { transform: translate(-50%, -50%) rotate(324deg) translateY(-38vw); }
}