@charset "UTF-8";

/* SVG線の初期状態は隠す */
table.press:nth-of-type(1) td.jskey svg .svg-elem-1,
table.press:nth-of-type(1) td.jskey svg .svg-elem-2,
table.press:nth-of-type(1) td.jskey svg .svg-elem-3,
table.press:nth-of-type(1) td.jskey svg .svg-elem-4,
table.press:nth-of-type(1) td.jskey svg .svg-elem-6 {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: none;
  animation: none;
}

/* .visible クラスがついたら線を描くアニメーション開始 */
table.press:nth-of-type(1) td.jskey svg.visible .svg-elem-1,
table.press:nth-of-type(1) td.jskey svg.visible .svg-elem-2,
table.press:nth-of-type(1) td.jskey svg.visible .svg-elem-3,
table.press:nth-of-type(1) td.jskey svg.visible .svg-elem-4,
table.press:nth-of-type(1) td.jskey svg.visible .svg-elem-6 {
  animation: draw-line 2s ease forwards;
}

table.press:nth-of-type(1) td.jskey svg.visible .svg-elem-2 {
  animation-delay: 0.3s;
}
table.press:nth-of-type(1) td.jskey svg.visible .svg-elem-3 {
  animation-delay: 0.6s;
}
table.press:nth-of-type(1) td.jskey svg.visible .svg-elem-4 {
  animation-delay: 0.9s;
}
table.press:nth-of-type(1) td.jskey svg.visible .svg-elem-6 {
  animation-delay: 1.2s;
}

/* 円のフェードイン＆拡大 */
table.press:nth-of-type(1) td.jskey svg.visible .svg-elem-5 {
  opacity: 0;
  transform: scale(0.5);
  transform-origin: center;
  animation: fade-in 0.6s ease forwards;
  animation-delay: 1.5s;
}

/* フェードイン・移動の基本設定 */
table.press:nth-of-type(1) td.jskey svg {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}

table.press:nth-of-type(1) td.jskey svg.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* 初期状態はパーツ毎にstroke-dasharrayとoffsetをパス長に合わせて設定 */
table.press:nth-of-type(1) td.jskey svg .svg-elem-1 {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
table.press:nth-of-type(1) td.jskey svg .svg-elem-2 {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
}
/* 他のパーツも同様に実際の長さに合わせて調整してください */

/* visible時にアニメーション */
table.press:nth-of-type(1) td.jskey svg.visible .svg-elem-1,
table.press:nth-of-type(1) td.jskey svg.visible .svg-elem-2,
/* 他パーツも同様に */
{
  animation: draw-line 2s ease forwards;
}