#loading-animation {
  display: block;
}

.loader {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999; /* 高いz-indexを設定 */
  width: 240px;
  height: 240px;
  margin: -120px 0px 0px -120px;
  background-color: transparent;
  border-radius: 50%;
  border: 3px solid #E3E4DC;
}

.loader:before {
  content: '';
  width: 246px;
  height: 246px;
  display: block;
  position: absolute;
  border: 2px solid #898a86;
  border-radius: 50%;
  top: -3px;
  left: -3px;
  box-sizing: border-box;
  clip: rect(0px, 35px, 35px, 0px);
  z-index: 10;
  animation: rotate 3s linear infinite;
}

.loader:after {
  content: '';
  width: 246px;
  height: 246px;
  display: block;
  position: absolute;
  border: 2px solid #ad9a7a;
  border-radius: 50%;
  top: -3px;
  left: -3px;
  box-sizing: border-box;
  clip: rect(0px, 164px, 150px, 0px);
  z-index: 9;
  animation: rotate2 3s linear infinite;
}

.hexagon-container {
  position: relative;
  top: 50px;
  left: 61.5px;
  border-radius: 50%;
}

.hexagon {
  position: absolute;
  width: 60px; /* 元の1.5倍 */
  height: 34.5px; /* 元の1.5倍 
  background-color: #ad9a7a;*/
  background: linear-gradient(to bottom, #ad9a7a, #d2b978);
}

.hexagon:before {
  content: "";
  position: absolute;
  top: -17px; /* 元の1.5倍 */
  left: 0;
  width: 0;
  height: 0;
  border-left: 30px solid transparent; /* 元の1.5倍 */
  border-right: 30px solid transparent;
  border-bottom: 17.25px solid #ad9a7a;
}

.hexagon:after {
  content: "";
  position: absolute;
  top: 34.5px; /* 元の1.5倍 */
  left: 0;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 17.25px solid #d2b978;
}

.hexagon.hex_1 {
  top: 0px;
  left: 0px;
  animation: Animasearch 3s ease-in-out infinite;
  animation-delay: calc(3s / 14 * 1);
}

.hexagon.hex_2 {
  top: 0px;
  left: 63px;
  animation: Animasearch 3s ease-in-out infinite;
  animation-delay: calc(3s / 14 * 2);
}

.hexagon.hex_3 {
  top: 54px;
  left: 94.5px;
  animation: Animasearch 3s ease-in-out infinite;
  animation-delay: calc(3s / 14 * 3);
}

.hexagon.hex_4 {
  top: 108px;
  left: 63px;
  animation: Animasearch 3s ease-in-out infinite;
  animation-delay: calc(3s / 14 * 4);
}

.hexagon.hex_5 {
  top: 108px;
  left: 0px;
  animation: Animasearch 3s ease-in-out infinite;
  animation-delay: calc(3s / 14 * 5);
}

.hexagon.hex_6 {
  top: 54px;
  left: -31.5px;
  animation: Animasearch 3s ease-in-out infinite;
  animation-delay: calc(3s / 14 * 6);
}

.hexagon.hex_7 {
  top: 54px;
  left: 31.5px;
  animation: Animasearch 3s ease-in-out infinite;
  animation-delay: calc(3s / 14 * 7);
}

@keyframes Animasearch {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  15%, 50% {
    transform: scale(0.5);
    opacity: 0;
  }
  65% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
    clip: rect(0px, 35px, 35px, 0px);
  }
  50% {
    clip: rect(0px, 40px, 40px, 0px);
  }
  100% {
    transform: rotate(360deg);
    clip: rect(0px, 35px, 35px, 0px);
  }
}

@keyframes rotate2 {
  0% {
    transform: rotate(0deg);
    clip: rect(0px, 164px, 150px, 0px);
  }
  50% {
    clip: rect(0px, 164px, 0px, 0px);
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(720deg);
    clip: rect(0px, 164px, 150px, 0px);
  }
}

@keyframes rotate3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}