装飾線のアニメーション　JSはいじらなくてOK

JSは「js-line が見えたら is-active を付ける」だけなので、線の種類が増えてもJS側は一切変更不要です。

<!-- 左→右の仕切り線 -->
<div class="line-x js-line"></div>

<!-- 右→左の仕切り線 -->
<div class="line-x from-right js-line"></div>

<!-- 上→下の縦線（親要素に height が必要） -->
<div style="position: relative; height: 200px;">
  <div class="line-y js-line"></div>
</div>

<!-- 下→上の縦線 -->
<div style="position: relative; height: 200px;">
  <div class="line-y from-bottom js-line"></div>
</div>

<!-- テキストの下線として使う場合 -->
<h2 style="position: relative; display: inline-block;">
  見出しテキスト
  <div class="line-x js-line" style="position: absolute; bottom: 0; left: 0;"></div>
</h2>
```

---

## Swellでの実装場所
```
CSS → 外観 → カスタマイズ → 追加CSS
JS  → Swell設定 → 高度な設定 → bodyタグ終了前に出力するコード
       ↑ <script>...</script> で囲んで貼る

ブロック単位で使うなら → カスタムHTMLブロックに
       <style>...</style> と <script>...</script> をまとめて貼ってもOK
```

---

## まとめ：拡張の考え方
```
新しい線を追加したくなったら：
  1. CSS に新しいクラスを書く（線の形・方向を定義）
  2. HTML に js-line クラスを追加する
  3. JS はいじらなくていい ← ここが重要

見出しテキスト

“` — ## Swellでの実装場所 “` CSS → 外観 → カスタマイズ → 追加CSS JS → Swell設定 → 高度な設定 → bodyタグ終了前に出力するコード ↑ で囲んで貼る ブロック単位で使うなら → カスタムHTMLブロックに と をまとめて貼ってもOK “` — ## まとめ：拡張の考え方 “` 新しい線を追加したくなったら： 1. CSS に新しいクラスを書く（線の形・方向を定義） 2. HTML に js-line クラスを追加する 3. JS はいじらなくていい ← ここが重要