@charset "UTF-8";
.main_sec {
  --animation-duration: 1.5s;
  --logo-animation-duration: 1.5s;
  --logo-animation-delay: 0s;
  --text-color-transition-duration: 0.25s;
  --masked-animation-delay: 0s;
  position: relative;
  height: 100vh;
  background-color: #00b7ce;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main_sec .inr {
  color: #fff;
  position: relative;
  text-align: center;
  z-index: 2;
}
.main_sec .inr .main_visual {
  width: 77%;
  max-width: 750px;
  margin: 0 auto;
}
.main_sec .inr .logo {
  position: relative;
  margin-top: 30px;
  width: 100%;
  padding-bottom: 23.7623762376%;
  height: 0;
  overflow: hidden;
}
.main_sec .inr .logo .logo_white,
.main_sec .inr .logo .logo_navy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.main_sec .inr .logo .logo_white {
  mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 50%, transparent 100%);
  mask-size: 100% 200%;
  -webkit-mask-size: 100% 200%;
  mask-position: 0% 100%;
  -webkit-mask-position: 0% 100%;
  animation: revealLogo var(--logo-animation-duration) var(--logo-animation-delay) forwards;
}
.main_sec .inr h1 {
  font-size: clamp(1.24em, 2.5vw, 18px);
  line-height: 2.2;
  letter-spacing: 3px;
  margin-top: 5%;
}
.main_sec .inr h2 {
  text-align: left;
  font-size: clamp(1.2rem, 2.5vw, 26px);
}
.main_sec .inr h3 {
  text-align: center;
  font-size: clamp(1.25rem, 2.4vw, 25px);
  margin-top: 5%;
  color: #e1ff00;
  transition: all 0.4s;
  background: linear-gradient(to right, #e1ff00 0%, #fbffe1 20%, #eef702 30%); /* ベースとなる文字の背景色 */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  /* 光が流れるアニメーションの初期設定 */
  background-size: 200% 100%; /* グラデーションの幅を広げ、移動できるようにする */
  background-position: -100% 0; /* 最初はグラデーションを左外に配置 */
  /* アニメーションの適用 */
  animation: simpleShine 2s ease-in-out 2s 3;
}
.main_sec .inr h3.none {
  opacity: 0;
}
@keyframes simpleShine {
  0% {
    background-position: 100% 0; /* グラデーションを完全に左外に */
  }
  100% {
    background-position: -100% 0; /* グラデーションを完全に右外に */
  }
}
.main_sec .inr h1,
.main_sec .inr h2 {
  color: #fff;
  transition: color var(--text-color-transition-duration, 0.25s) ease-out;
}
.main_sec .text_black {
  color: #000 !important;
}
.main_sec.white_active .inr .logo .logo_white {
  mask-position: 0% 0%;
  -webkit-mask-position: 0% 0%;
  animation: none;
}
.main_sec .masked {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #fff;
  z-index: 1;
  animation: whiteReveal var(--animation-duration) var(--masked-animation-delay) forwards ease-in;
}
.main_sec nav {
  width: 100%;
  position: absolute;
  bottom: 60px;
  z-index: 2;
  transition: all 1s;
}
.main_sec nav.none {
  transform: translateY(0);
  opacity: 0;
}
.main_sec nav ul {
  display: flex;
  justify-content: center;
  gap: min(80px, 8vw);
  padding-left: 5px;
}
.main_sec nav ul li {
  cursor: pointer;
  color: #717373;
  position: relative;
  text-align: left;
  font-size: clamp(0.6rem, 2.8vw, 28px);
}
.main_sec nav ul li::before {
  content: "";
  position: absolute;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.3 39.8"><path fill="%23999" d="M22.9,20.9c0.6-0.6,0.6-1.5,0-2l-2-2c-0.6-0.6-1.5-1.5-2-2L4.4,0.4c-0.6-0.6-1.5-0.6-2,0l-2,2c-0.6,0.6-0.6,1.5,0,2l14.5,14.5c0.6,0.6,0.6,1.5,0,2L0.4,35.4c-0.6,0.6-0.6,1.5,0,2l2,2c0.6,0.6,1.5,0.6,2,0l14.5-14.5c0.6-0.6,1.5-1.5,2-2L22.9,20.9z"/></svg>');
  background-repeat: no-repeat;
  width: 0.4em;
  height: 0.4em;
  left: -0.6em;
  top: 0.7em;
}

/* Keyframe Animations */
@keyframes whiteReveal {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes revealLogo {
  from {
    mask-position: 0% -100%;
    -webkit-mask-position: 0% -100%;
  }
  to {
    mask-position: 0% 0%;
    -webkit-mask-position: 0% 0%;
  }
}
.animation-container {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  background-color: #f0f0f0;
}

.circle {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid #21bfef;
  background-color: transparent;
  border-radius: 50%;
  opacity: 0.2;
}
.circle.type01 {
  width: 12vw;
  height: 12vw;
  left: -10vw;
  top: 3vw;
  animation: fadeScaleCircle_type01 8s infinite alternate;
}
.circle.type02 {
  width: 25vw;
  height: 25vw;
  left: 0vw;
  top: -5vw;
  animation: fadeScaleCircle_type02 10s infinite alternate;
}
.circle.type03 {
  width: 30vw;
  height: 30vw;
  left: 20vw;
  top: -10vw;
  animation: fadeScaleCircle_type03 9s infinite alternate;
}

.moving_circle {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid #21bfef;
  background-color: transparent;
  border-radius: 50%;
  opacity: 0.6;
  animation: moveRandomly 20s infinite alternate ease-in-out, fadeCircle 5s infinite alternate;
  top: 10%;
  right: 5%;
}
.moving_circle.type01 {
  width: 120px;
  height: 120px;
  animation: moveRandomly_type02 15s infinite alternate ease-in-out, fadeCircle_type02 10s infinite alternate;
  top: 8%;
  right: 3%;
  transform-origin: center center;
}
.moving_circle.type02 {
  width: 140px;
  height: 140px;
  animation: moveRandomly_type02 10s infinite alternate ease-in-out, fadeCircle 10s infinite alternate;
  top: 8%;
  left: 3%;
  transform-origin: center center;
}
.moving_circle.type03 {
  width: 120px;
  height: 120px;
  animation: moveRandomly 20s infinite alternate ease-in-out, fadeCircle 13s infinite alternate;
  left: 8%;
  left: 2%;
  transform-origin: center center;
}

@keyframes moveRandomly {
  0% {
    transform: scale(1);
    transform: translate(0, 0);
  }
  30% {
    transform: translate(40px, -10px);
  }
  50% {
    transform: translate(0, -20px);
    transform: scale(1.1);
  }
  70% {
    transform: translate(5px, 10px);
  }
  90% {
    transform: translate(2px, -5px);
    transform: scale(0.9);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes moveRandomly_type02 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  20% {
    transform: translate(-10px, -20px) scale(1.2);
  }
  60% {
    transform: translate(30px, 20px) scale(1.1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes fadeCircle {
  0%, 100% {
    opacity: 0.4;
  }
  20% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.3;
  }
}
@keyframes fadeCircle_type02 {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.1;
  }
}
@keyframes fadeScaleCircle_type01 {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(0.9);
    opacity: 0.2;
  }
  100% {
    transform: scale(1);
    opacity: 0.1;
  }
}
@keyframes fadeScaleCircle_type02 {
  0% {
    transform: scale(1);
    opacity: 0.1;
  }
  40% {
    transform: scale(1.1);
    opacity: 0.4;
  }
  100% {
    transform: scale(1);
    opacity: 0.1;
  }
}
@keyframes fadeScaleCircle_type03 {
  0% {
    transform: scale(0.7);
    opacity: 0.4;
  }
  40% {
    opacity: 0.2;
  }
  80% {
    transform: scale(1);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 0.1;
  }
}
@media (max-width: 768px) {
  .main_sec {
    margin-bottom: 50px;
  }
  .main_sec .inr {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
  }
  .main_sec .inr .main_visual {
    transform: translateY(5%);
    width: 85%;
    max-width: 600px;
    margin: 0 auto;
  }
  .main_sec .inr .logo {
    padding: 15vw 0 25vw 0;
  }
  .main_sec .inr h1 {
    text-wrap: balance;
  }
  .main_sec nav {
    width: 100%;
    position: absolute;
    bottom: 100px;
    justify-content: space-between;
  }
}
#glowingTextContainer {
  position: relative; /* 子要素（テキスト、画像コンテナ）の基準 */
  width: fit-content; /* テキストの幅に合わせる */
  height: fit-content; /* テキストの高さに合わせる */
  padding: 10px; /* 必要に応じて、光の広がりを許容するパディング */
  /* background-color: rgba(255, 0, 0, 0.1); /* デバッグ用 */
  transition: all 1s;
}
#glowingTextContainer.none {
  opacity: 0;
}

#glowingText {
  position: relative;
  z-index: 2;
}

#imageContainer {
  position: absolute;
  top: 0;
  left: 0;
  /* mainContainer と同じサイズにし、画像がその範囲をはみ出しても見えるようにする */
  width: 100%;
  height: 100%;
  overflow: visible; /* ★重要★ 画像がコンテナからはみ出しても見えるように */
  pointer-events: none; /* コンテナがクリックイベントを邪魔しないように */
  z-index: 1; /* テキストと背景画像の間 */
}

.glow-particle {
  position: absolute;
  border-radius: 50%; /* PNGが丸くない場合でもぼかしと合わせて丸い光に見せる */
  pointer-events: none; /* 個々の画像がクリックイベントを邪魔しないように */
  /* opacity と filter: blur はJSで初期設定 */
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes particleFadeMove {
  0% {
    opacity: 0;
    transform: scale(0.5) translate(0, 0);
  }
  20% {
    opacity: 1; /* 最大の明るさ */
    transform: scale(1) translate(0, 0);
  }
  80% {
    opacity: 0.5;
    transform: scale(0.8) translate(var(--dx), var(--dy));
  }
  100% {
    opacity: 0;
    transform: scale(0) translate(var(--dx), var(--dy));
  }
}