/* ローダー完了前はアニメーションを無効化 */
.stroke-text {
  animation-play-state: paused;
}

.stroke-text.animate {
  animation-play-state: running;
}

/* より確実にアニメーションを制御したい場合 */
body.loader-active .stroke-text {
  animation: none !important;
}

.hero {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -40%);
  z-index: 9;
}

.hero-content {
  max-width: 1170px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
}

.hero-title {
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 900;
  line-height: 1.2;
  margin: 0;
}

.hero-text {
  opacity: 0;
  color: #004387;
  transition: opacity 0.8s ease;
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 50px;
}

.hero-text.show {
  opacity: 1;
}

.stroke-text {
  font-family: 'Arial', sans-serif;
  font-weight: 900;
  display: block;
  position: relative;
  color: transparent;
  -webkit-text-stroke: 2px #ffffff;
  text-stroke: 2px #ffffff;
  animation: strokeFill 3s ease-in-out forwards;
  margin: 10px 0;
}

.hero-accent {
  font-family: 'Arial', sans-serif;
  font-weight: 900;
  display: inline-block;
  position: relative;
  color: transparent;
  -webkit-text-stroke: 2px #ffffff;
  text-stroke: 2px #ffffff;
  animation: accentFill 4.5s ease-in-out forwards;
  animation-delay: 0.5s;
  margin: 10px 0;
}

.stroke-text:nth-child(2) {
  animation-delay: 0.5s;
}

/* hero-accentが含まれる.stroke-textに対する特別な処理 */
/* .stroke-text:has(.hero-accent) {
  animation: accentFill 3s ease-in-out forwards;
} */

/* :hasが使用できない環境向けの代替案 */
.accent-text {
  animation: accentFill 3s ease-in-out forwards;
}

/* ストロークアニメーション */
@keyframes strokeFill {
  0% {
      color: transparent;
      -webkit-text-stroke: 2px #fff;
      text-stroke: 2px #fff;
  }
  50% {
      color: transparent;
      -webkit-text-stroke: 2px #ff6b6b;
      text-stroke: 2px #ff6b6b;
  }
  100% {
      color: #004387;
      -webkit-text-stroke: 2px transparent;
      text-stroke: 2px transparent;
  }
}

/* アクセントテキスト用アニメーション */
@keyframes accentFill {
  0% {
      color: transparent;
      -webkit-text-stroke: 2px #fff;
      text-stroke: 2px #fff;
  }
  50% {
      color: transparent;
      -webkit-text-stroke: 2px #ff6b6b;
      text-stroke: 2px #ff6b6b;
  }
  100% {
      color: #e86800; /* 通常テキストと同じ色でアニメーション */
      -webkit-text-stroke: 2px transparent;
      text-stroke: 2px transparent;
  }
}



.stroke-text:nth-child(2)::before {
  animation-delay: 1s;
}

@keyframes fillText {
  0%, 20% {
      width: 0%;
  }
  40%, 60% {
      width: 100%;
  }
  80%, 100% {
      width: 0%;
  }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .hero {
    height: 50vh;
    top: 32%;
  }
  .hero-title {
      font-size: clamp(1.2rem, 6vw, 4rem);
  }
  .hero-text {
    margin-top: 10px;
}
  
  .stroke-text {
      -webkit-text-stroke: 1px #ffffff;
      text-stroke: 1px #ffffff;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(1.2rem, 6vw, 4rem);
    text-align: left;
  }
  .hero-text {
    font-size: .9rem;
    line-height: 1.6;
    margin-top: 10px;
    text-align: left;
  }
  .hero {
    height: 50vh;
  }
}

/* 追加のアニメーション効果 */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,0.1) 100%);
  pointer-events: none;
}

/* フェードインアニメーション */
.hero-content {
  animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(30px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}