.hero {
  position: relative;
  width: 100%;
  height: 400px;
  background-image: url("https://pad.alpha-mail.ne.jp/static/users17/misawadensen.co.jp/images/cms/Copilot_20260604_082233.png");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  animation: bgFade 4s ease-out forwards;
}

@keyframes bgFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* 流れ星 */
.shooting {
  position: absolute;
  width: 520px;
  height: 2.2px;
  transform: rotate(-45deg);
  background: linear-gradient(to right,
    rgba(0,120,255,0) 0%,
    rgba(0,150,255,1) 12%,
    rgba(0,180,255,1) 32%,
    rgba(0,220,255,1) 55%,
    rgba(255,255,255,1) 80%,
    rgba(255,255,255,0) 100%
  );
  filter:
    drop-shadow(0 0 20px rgba(0,150,255,1))
    drop-shadow(0 0 45px rgba(0,180,255,1))
    drop-shadow(0 0 90px rgba(0,220,255,1))
    drop-shadow(0 0 140px rgba(200,240,255,1));
  animation:
    shootingDiag 2.6s linear forwards,
    tailFade 1.6s ease-out forwards,
    starColorShift 1.6s ease-out forwards;
  pointer-events: none;
  z-index: 10;
}

.shooting::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  filter: blur(12px);
  opacity: 0;
  transform: scaleX(1.6);
  animation: tailAfterglow 1.6s ease-out forwards;
}

.shooting::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  opacity: 0;
  transform: translate(0, 0) scale(0.5);
  animation: particleScatter 1.6s ease-out forwards;
}

@keyframes shootingDiag {
  0% { transform: rotate(-45deg) translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: rotate(-45deg) translate(450%, -450%); opacity: 0; }
}

@keyframes tailFade {
  0% { opacity: 0.2; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes tailAfterglow {
  0% { opacity: 0.6; }
  40% { opacity: 0.4; }
  100% { opacity: 0; }
}

@keyframes starColorShift {
  0% {
    background: linear-gradient(to right,
      rgba(0,150,255,0) 0%,
      rgba(0,170,255,0.5) 20%,
      rgba(120,200,255,1) 60%,
      rgba(255,255,255,1) 80%,
      rgba(255,255,255,0) 100%
    );
  }
  100% {
    background: linear-gradient(to right,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.5) 20%,
      rgba(255,255,255,1) 60%,
      rgba(255,255,255,1) 80%,
      rgba(255,255,255,0) 100%
    );
  }
}

/* 流れ星位置 */
.mid1 { animation-delay: 3.5s; top: 116%; left: -55%; }
.top1 { animation-delay: 3.7s; top: 112%; left: -55%; }
.bot1 { animation-delay: 3.9s; top: 120%; left: -55%; }

.mid2 { animation-delay: 5.5s; top: 144%; left: 15%; }
.top2 { animation-delay: 5.7s; top: 140%; left: 15%; }
.bot2 { animation-delay: 5.9s; top: 148%; left: 15%; }

.mid3 { animation-delay: 7.5s; top: 116%; left: -65%; }
.top3 { animation-delay: 7.7s; top: 112%; left: -65%; }
.bot3 { animation-delay: 7.9s; top: 120%; left: -65%; }

.mid4 { animation-delay: 9.5s; top: 150%; left: 25%; }
.top4 { animation-delay: 9.7s; top: 146%; left: 25%; }
.bot4 { animation-delay: 9.9s; top: 154%; left: 25%; }

.mid5 { animation-delay: 11.5s; top: 118%; left: -65%; }
.top5 { animation-delay: 11.7s; top: 114%; left: -65%; }
.bot5 { animation-delay: 11.9s; top: 122%; left: -65%; }

.mid6 { animation-delay: 13.5s; top: 150%; left: 15%; }
.top6 { animation-delay: 13.7s; top: 146%; left: 15%; }
.bot6 { animation-delay: 13.9s; top: 154%; left: 15%; }

/* キャッチコピー */
.catch {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.line1 {
  position: relative;
  top: -15px;
  font-size: 45px;
  animation: fadeInText 2.5s ease-out forwards;
  animation-delay: 3.5s;
}

.line2 {
  position: relative;
  top: -25px;
  font-size: 55px;
  animation: fadeInText 2.8s ease-out forwards;
  animation-delay: 6.8s;
}

.line3 {
  position: relative;
  top: 63px;
  font-size: 42px;
  transform: scale(0.92) translateY(10px);
  filter: blur(1.5px);
  animation: brandFloatPop 3.1s ease-out forwards;
  animation-delay: 11s;
}

.hero h1 {
  color: #fff;
  font-weight: 900;
  margin: 0;
  padding: 0;
  font-family: "Yu Mincho", serif;
  opacity: 0;
}

@keyframes fadeInText {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes brandFloatPop {
  0% { opacity: 0; transform: scale(0.85); filter: blur(1px); }
  40% { opacity: 0.5; transform: scale(0.93); filter: blur(0.5px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* スマホ */
@media screen and (max-width: 768px) {
  .hero h1 { font-size: 26px; line-height: 1.4; left: -40px; }
  .hero h1 span.size2 { font-size: 32px; }
  .hero { height: 380px; }
  .shooting { transform: scale(0.8); }
  .brandFloat { font-size: 28px; transform: translateY(60px); }
}