## 本日出勤のキャスト

「人気」や「NEW」マークをつけたい場合は、
<span class="mark1">人気</span>
<span class="mark2">NEW</span>
を加えて下さい。
「人気」や「NEW」のテキスト自体はhtml側で直接変更できます。

### transformの指定なし

<div class="list">とするとこのボックスになります。

#### sample name

簡単な説明を入れます。

人気

#### sample name

簡単な説明を入れます。

NEW

#### sample name

簡単な説明を入れます。

#### sample name

文字をつめこみすぎるとボックスから飛び出た部分が非表示になります(※小さな端末の環境で)。余裕をもって入力して下さい。

### transform1

<div class="list transform1">とするとこのボックスになります。

#### sample name

簡単な説明を入れます。

人気

#### sample name

簡単な説明を入れます。

NEW

#### sample name

簡単な説明を入れます。

#### sample name

文字をつめこみすぎるとボックスから飛び出た部分が非表示になります(※小さな端末の環境で)。余裕をもって入力して下さい。

### transform2

<div class="list transform2">とするとこのボックスになります。

#### sample name

簡単な説明を入れます。

人気

#### sample name

簡単な説明を入れます。

NEW

#### sample name

簡単な説明を入れます。

#### sample name

文字をつめこみすぎるとボックスから飛び出た部分が非表示になります(※小さな端末の環境で)。余裕をもって入力して下さい。

### up

<div class="list up">とするとこのボックスになります。

#### sample name

簡単な説明を入れます。

人気

#### sample name

簡単な説明を入れます。

NEW

#### sample name

簡単な説明を入れます。

#### sample name

文字をつめこみすぎるとボックスから飛び出た部分が非表示になります(※小さな端末の環境で)。余裕をもって入力して下さい。

### left

<div class="list left">とするとこのボックスになります。

#### sample name

簡単な説明を入れます。

人気

#### sample name

簡単な説明を入れます。

NEW

#### sample name

簡単な説明を入れます。

#### sample name

文字をつめこみすぎるとボックスから飛び出た部分が非表示になります(※小さな端末の環境で)。余裕をもって入力して下さい。

### right

<div class="list right">とするとこのボックスになります。

#### sample name

簡単な説明を入れます。

人気

#### sample name

簡単な説明を入れます。

NEW

#### sample name

簡単な説明を入れます。

#### sample name

文字をつめこみすぎるとボックスから飛び出た部分が非表示になります(※小さな端末の環境で)。余裕をもって入力して下さい。

### listブロック以外への指定もできます

#### sample name

簡単な説明を入れます。

人気

#### sample name

簡単な説明を入れます。

NEW

#### sample name

簡単な説明を入れます。

#### sample name

文字をつめこみすぎるとボックスから飛び出た部分が非表示になります(※小さな端末の環境で)。余裕をもって入力して下さい。

### オリジナルのアニメーションを作りたい場合は

cssフォルダのinview.cssに、cssで動くアニメーションタグを追加します。
css冒頭の「共通設定」の２箇所にも追加するのを忘れないようご注意下さい。

スタイルを追加したら、jsフォルダのjquery.invie_set.jsにタグを追加して下さい。
既存のタグをコピペして、スタイル名を２箇所入れ替えればOKです。

### transformのアニメーションが動作しない場合

htmlの下部に、
<!--パララックス用ファイル読み込み-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<script src="js/jquery.inview_set.js"></script>
のタグがあるか確認して下さい。

httpsから始まるurlは将来リンク切れを起こす可能性もあります。その際は改めて「jQuery CDN」などでネット検索し、新しいurlに置き換えて下さい。

## 人気キャスト

#### sample name

簡単な説明を入れます。

#### sample name

簡単な説明を入れます。

#### sample name

簡単な説明を入れます。

#### sample name

簡単な説明を入れます。

## アクセス

東京都XX区XXXXビル３F
TEL：03-0000-0000
定休日：月曜日

上のバナー画像は、901px以上の端末と900px以下とで画像２種類が切り替わります。
詳しい説明はこちら。