.loading-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  margin: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2147483647;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
  opacity: 1;
  visibility: visible;
  min-height: 100vh;
  transform: none !important;
  zoom: 1 !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
@media screen and (max-width: 782px) {
  .loading-animation {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    padding-top: env(safe-area-inset-top, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    min-height: 100vh;
  }
}
@media screen and (max-width: 782px) and (orientation: landscape) {
  .loading-animation {
    height: 100vh;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
}
@media screen and (max-width: 782px) and (orientation: portrait) {
  .loading-animation {
    height: 100vh;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}
.loading-animation.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-content {
  width: 160px;
  height: 160px;
  transform: translateY(-14px);
}
@media screen and (max-width: 480px) {
  .loading-content {
    width: 120px;
    height: 120px;
    transform: translateY(0);
  }
}

.loading-animation svg {
  width: 160px;
  height: 160px;
}
@media screen and (max-width: 480px) {
  .loading-animation svg {
    width: 120px;
    height: 120px;
  }
}

.loading-animation #logo {
  transform-origin: center;
  transform-box: fill-box;
  animation: rotateLogo 2s ease-out 1s forwards;
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 各パーツの初期状態とアニメーション（iPhone対応） */
.loading-animation #part1,
.loading-animation #part2,
.loading-animation #part3,
.loading-animation #part4 {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 左から */
.loading-animation #part1 {
  transform: translate(-100px, 0);
  animation: move1 1s ease-out forwards;
}

@keyframes move1 {
  0% {
    opacity: 0;
  }
  70% {
    transform: translate(0, 0) rotate(24deg);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) rotate(24deg);
    opacity: 1;
  }
}
/* 上から */
.loading-animation #part2 {
  transform: translate(0, -100px);
  animation: move2 1s ease-out forwards;
}

@keyframes move2 {
  0% {
    opacity: 0;
  }
  70% {
    transform: translate(44px, -3px) rotate(24deg);
    opacity: 1;
  }
  100% {
    transform: translate(44px, -3px) rotate(24deg);
    opacity: 1;
  }
}
/* 右から */
.loading-animation #part3 {
  transform: translate(100px, 0);
  animation: move3 1s ease-out forwards;
}

@keyframes move3 {
  0% {
    opacity: 0;
  }
  70% {
    transform: translate(43px, 41px) rotate(24deg);
    opacity: 1;
  }
  100% {
    transform: translate(43px, 41px) rotate(24deg);
    opacity: 1;
  }
}
/* 下から */
.loading-animation #part4 {
  transform: translate(0, 100px);
  animation: move4 1s ease-out forwards;
}

@keyframes move4 {
  0% {
    opacity: 0;
  }
  70% {
    transform: translate(3px, 40px) rotate(24deg);
    opacity: 1;
  }
  100% {
    transform: translate(3px, 40px) rotate(24deg);
    opacity: 1;
  }
}
@keyframes rotateLogo {
  0% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(-24deg);
  }
  60% {
    transform: rotate(-24deg);
    opacity: 1;
  }
  100% {
    transform: rotate(-24deg);
    opacity: 1;
  }
}