## 「サムネイルスライドショー」ブロックについて

    <!--▼▼▼▼▼ここから「横サムネイルスライドショー」-->
    <section class="slide-thumbnail-box">

    <div class="slide-thumbnail1">
    <div class="img rtl">
    <div><a href="#"><img src="images/1.jpg" alt=""></a></div>
    <div><a href="#"><img src="images/2.jpg" alt=""></a></div>
    <div><a href="#"><img src="images/3.jpg" alt=""></a></div>
    <div><a href="#"><img src="images/4.jpg" alt=""></a></div>
    </div>
    </div>

    <div class="slide-thumbnail1">
    <div class="img ltr">
    <div><a href="#"><img src="images/1.jpg" alt=""></a></div>
    <div><a href="#"><img src="images/2.jpg" alt=""></a></div>
    <div><a href="#"><img src="images/3.jpg" alt=""></a></div>
    <div><a href="#"><img src="images/4.jpg" alt=""></a></div>
    </div>
    </div>

    </section>
    <!--▲▲▲▲▲ここまで「横サムネイルスライドショー」-->

### ご使用上の注意点

画像（img）は必ず「4枚以上」の「偶数」で配置して下さい。それ以外だと途中で表示が崩れる場合があります。

### 主なスタイルは

cssフォルダのstyle.cssから「slide-thumbnail-box」でテキスト検索してみて下さい。詳しい解説もあります。

### 右から左へ移動するスタイル

<div class="img rtl">

### 左から右へ移動するスタイル

<div class="img ltr">

### 画像の段違いレイアウト

以下の赤文字部分で調整できます。もし全て並べて表示させたいならこのブロックごと削除すればOK。

/*偶数番目の画像の垂直位置を少しずらす。垂直位置を並べたいならこのブロックを削除。*/
.slide-thumbnail1 .img div:nth-of-type(even) {
transform: translateY(3vw);
}