ご利用の流れFlow

Step01

お問い合わせContact Us

お問い合わせの説明ブロックです。

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

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

ヒアリング・ご提案Hearing & Proposal

ヒアリング・ご提案の説明ブロックです。

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

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

契約・準備Contract & Setu

契約・準備の説明ブロックです。

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

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

サービス開始Service Start

おサービス開始の説明ブロックです。

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

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

ご利用の流れ

<!--▼▼▼▼▼ここから「ご利用の流れ」-->
<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>Contact 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を読んで下さい。