@charset "utf-8";

@keyframes svg-draw {
  from {
    stroke-dashoffset: var(--dash, 0);
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes svg-float {
  0% {
    transform: translate3d(0, 0px, 0);
  }
  50% {
    transform: translate3d(0, -3px, 0);
  }
  100% {
    transform: translate3d(0, 0px, 0);
  }
}

svg path {
  /* JSで長さを入れるための受け皿（CSS変数） */
  stroke-dasharray: var(--dash, 0);
  stroke-dashoffset: var(--dash, 0);

  /* 線を描く */
  animation: svg-draw var(--dur, 6s) ease-in-out forwards, svg-float 6s ease-in-out infinite;
  
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 動きを弱めたい端末向け */
@media (prefers-reduced-motion: reduce) {
  #main-image path {
    animation: none;
  }
}