/*Serviceページ用*/
.arrow-anim .line {
  stroke-dasharray: 43;
  stroke-dashoffset: 43;
  opacity: 1;
  animation: drawLine 3s linear infinite;
}

.arrow-anim .triangle {
  transform: scaleY(0);
  transform-origin: 41.5px 4px;
  opacity: 0;
  animation: showTriangle 3s linear infinite;
}
@keyframes drawLine {
  0% {
    stroke-dashoffset: 43;
    opacity: 1;
  }
  16% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  85% {
    stroke-dashoffset: 0; /* stay invisible while reset準備 */
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 43; /* invisibleで初期化完了 */
    opacity: 0;
  }
}

@keyframes showTriangle {
  0%, 19% {
    transform: scaleY(0);
    opacity: 0;
  }
  20% {
    transform: scaleY(1);
    opacity: 1;
  }
  60% {
    transform: scaleY(1);
    opacity: 1;
  }
  70% {
    opacity: 0;
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}

.arrow-anim-left .line {
  stroke-dasharray: 43;
  stroke-dashoffset: 43;
  opacity: 1;
  animation: drawLineLeft 3s linear infinite;
}

.arrow-anim-left .triangle {
  transform: scaleY(0);
  transform-origin: 2.5px 4px; /* 左基点 */
  opacity: 0;
  animation: showTriangleLeft 3s linear infinite;
}

@keyframes drawLineLeft {
  0% {
    stroke-dashoffset: 43;
    opacity: 1;
  }
  16% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  85% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 43;
    opacity: 0;
  }
}

@keyframes showTriangleLeft {
  0%, 19% {
    transform: scaleY(0);
    opacity: 0;
  }
  20% {
    transform: scaleY(1);
    opacity: 1;
  }
  60% {
    transform: scaleY(1);
    opacity: 1;
  }
  70% {
    opacity: 0;
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}



/*資本政策ページ用*/
.policy .arrow-anim .line {
  stroke-dasharray: 25;
  stroke-dashoffset: 25;
}

.policy .arrow-anim .triangle {
  transform-origin: 20px 4px;
}

@keyframes drawLinePolicy {
  0%   { stroke-dashoffset: 25; opacity: 1; }
  16%  { stroke-dashoffset: 0; opacity: 1; }
  60%  { opacity: 1; }
  70%  { opacity: 0; }
  85%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 25; opacity: 0; }
}

.policy .arrow-anim {
  animation: drawLinePolicy 3s linear infinite;
}