ご利用の流れFlow

Step01

ご来店Visit Us

ご来店の説明ブロックです。

説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。

  • さらにステップが必要ならこのブロックを使います。サンプルテキスト。
  • さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。
  • さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。
  • さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。
Step02

ご注文Order

ご注文の説明ブロックです。

説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。

  • さらにステップが必要ならこのブロックを使います。サンプルテキスト。
  • さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。
  • さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。
  • さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。
Step03

お食事・ご休憩Enjoy Your Meal

お食事・ご休憩の説明ブロックです。

説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。

  • さらにステップが必要ならこのブロックを使います。サンプルテキスト。
  • さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。
  • さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。
  • さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。
Step04

お会計Payment

お会計の説明ブロックです。

説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。

  • さらにステップが必要ならこのブロックを使います。サンプルテキスト。
  • さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。
  • さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。
  • さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。

ご利用の流れ

<!--▼▼▼▼▼ここから「ご利用の流れ」-->
<section id="flow">

<h2 class="c"><span class="fade-in-text">ご利用の流れ</span><span class="small">Flow</span></h2>

<div class="flow-box up">
<span class="step-num">Step01</span>
<div class="title">
<h3>ご来店<span>Visit Us</span></h3>
</div>
<div class="text">
<h3>ご来店の説明ブロックです。</h3>
<p>説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。説明文をここに書きます。サンプルテキスト。</p>
<ul class="step">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>
</div>
</div>
・
・
・
</section>
<!--▲▲▲▲▲ここまで「ご利用の流れ」-->

設定は

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

左右のブロック

大きな端末で見た場合の左右ブロックについて、titleブロック内のものは左側に、textブロック内のものは右側に配置されます。必要に応じて画像や他の要素を追加して下さい。

ご利用の流れ」のテキストアニメーション

汎用的に使えるテキストアニメーションです。
詳細はmanual4_kodawari.htmlを読んで下さい。

ブロックがふわっと浮き上がるパララックス

汎用的に使えるパララックスです。
詳細はmanual4_kodawari.htmlを読んで下さい。