/* 手描きコピー：既存の top_copy1 / top_copy_off / top_copy_on に追加 */
.js-top-copy-handwriting {
  /* display は top_test.css の .top_copy1(表示時) / .top_copy_on(非表示時) に任せる。
     ここで display:block を指定すると読み込み順の関係で .top_copy_on{display:none} を
     上書きしてしまい、ホバー前から白い文字も重なって表示されてしまう。 */
  width: 100%;
  height: auto;
  overflow: visible;
}

.js-top-copy-handwriting .top_copy_finished {
  fill: currentColor;
  /* JSがマスクの初期状態(未描画)を設定し終える前に完成形がちらっと見えるのを防ぐ。
     top_copy_handwriting.js が準備できたら is-ready クラスを付けて表示する。 */
  opacity: 0;
}

.js-top-copy-handwriting.is-ready .top_copy_finished {
  opacity: 1;
}

.js-top-copy-handwriting .top_copy_draw_path {
  fill: none;
  stroke: #fff;
  stroke-width: 9px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 既存CSSですでに色指定がある場合は、この2行は不要です */
.top_copy_off { color: #000; }
.top_copy_on { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .js-top-copy-handwriting .top_copy_finished {
    mask: none;
  }
}

/* PC版/SP版の出し分け（モバイルファースト：ベースはSP表示） */
.top_copy_pc { display: none; }
.top_copy_sp {
  display: block;
  /* 375px幅のスマホで213px表示になる比率（213/375=56.8%）。vwなので画面幅が変わっても同じ比率を保つ */
  width: 70vw;
}

@media (min-width: 769px) {
  .top_copy_pc { display: block; }
  .top_copy_sp { display: none; }
}