.hello-parent {
    display: flex;
    background: rgba(255, 255, 255, 0); /* 背景透明 */
    align-items: center; /* 縦方向中央揃え */
    justify-content: center; /* 横方向中央揃え */
    height: 100%; /* 親要素に基づく高さ設定 */
}
  

.hello-word {
  margin:auto;
}


/* fu Animation */
.fu-line1 {
  stroke-dasharray: 90px;
  stroke-dashoffset: 90px;
  animation: fu-line1-draw 1s ease forwards;
}

.fu-line2 {
  stroke-dasharray: 150px;
  stroke-dashoffset: 150px;
  animation: fu-line2-draw 1s ease forwards 1s;
}

@keyframes fu-line1-draw {
  0% {
    stroke-dashoffset: 90px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

@keyframes fu-line2-draw {
  0% {
    stroke-dashoffset: 150px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}


/* mo Animation */
.mo-line1 {
  stroke-dasharray: 90px;
  stroke-dashoffset: 90px;
  animation: mo-line1-draw 1s ease forwards;
}

.mo-line2 {
  stroke-dasharray: 90px;
  stroke-dashoffset: 90px;
  animation: mo-line2-draw 1s ease forwards;
}

.mo-line3 {
  stroke-dasharray: 124px;
  stroke-dashoffset: 124px;
  animation: mo-line3-draw 1s ease forwards;
}

.mo-line4 {
  stroke-dasharray: 72px;
  stroke-dashoffset: 72px;
  animation: mo-line4-draw 1s ease forwards 1s;
}

@keyframes mo-line1-draw {
  0% {
    stroke-dashoffset: 90px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

@keyframes mo-line2-draw {
  0% {
    stroke-dashoffset: 90px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

@keyframes mo-line3-draw {
  0% {
    stroke-dashoffset: 124px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

@keyframes mo-line4-draw {
  0% {
    stroke-dashoffset: 72px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

/* to Animation */
.to-line1 {
  stroke-dasharray: 124px;
  stroke-dashoffset: 124px;
  animation: to-line1-draw 1s ease forwards;
}

.to-line2 {
  stroke-dasharray: 100px;
  stroke-dashoffset: 100px;
  animation: to-line2-draw 1s ease forwards 1s;
}

@keyframes to-line1-draw {
  0% {
    stroke-dashoffset: 107px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

@keyframes to-line2-draw {
  0% {
    stroke-dashoffset: 100px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}


/* no Animation */
.no-line1 {
  stroke-dasharray: 150px;
  stroke-dashoffset: 150px;
  animation: no-line1-draw 1s ease forwards 1s;
}

@keyframes no-line1-draw {
  0% {
    stroke-dashoffset: 150px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}


/* Red Dot Animation */
.red-dot {
  stroke-width: 44px;
  stroke-linecap: round;
  animation: red-dot-grow 8s ease-out forwards;
}

@keyframes red-dot-grow {
  0% {
    stroke-width: 0px;
  }
  15% {
    stroke-width: 0px;
  }
  20% {
    stroke-width: 44px;
  }
  100% {
    stroke-width: 44px;
  }
}