タブ・フロー等
タブ1（PC＆スマホ時スライド形式）
<div class="tabWrapper">
<div class="tabContainer">
<div class="tab">
<div class="tab__button active"><a href="#">Tab1</a></div>
<div class="tab__button"><a href="#">Tab2</a></div>
<div class="tab__button"><a href="#">Tab3</a></div>
</div>
</div>
<div class="contents">
<div class="contents__content">Tab1 テキストテキストテキストテキスト。</div>
<div class="contents__content">Tab2 テキストテキストテキストテキスト。</div>
<div class="contents__content">Tab3 テキストテキストテキストテキスト。</div>
</div>
</div>
タブ2（スマホ時アコーディオン形式）
- Tab1
- Tab2
- Tab3
Tab1 テキストテキストテキストテキスト。
Tab2 テキストテキストテキストテキスト。
Tab3 テキストテキストテキストテキスト。
<div id="acTab">
<ul class="resp-tabs-list">
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<div class="resp-tabs-container">
<div>Tab1 テキストテキストテキストテキスト。</div>
<div>Tab2 テキストテキストテキストテキスト。</div>
<div>Tab3 テキストテキストテキストテキスト。</div>
</div>
</div>
フロー・コンテンツ
1◯◯◯◯◯
テキストテキストテキストテキストテキストテキストテキストテキスト。
2◯◯◯◯◯
テキストテキストテキストテキストテキストテキストテキストテキスト。
<h3 class="headLvFlow"><span class="numberFlow">1</span>◯◯◯◯◯</h3>
<div class="column">
<div class="col col2N">画像やテキスト等</div>
<div class="col col2W">画像やテキスト等</div>
<div class="lowArrow"> </div>
</div>
<h3 class="headLvFlow"><span class="numberFlow">2</span>◯◯◯◯◯</h3>
<div class="column">
<div class="col col2N">画像やテキスト等</div>
<div class="col col2W">画像やテキスト等</div>
</div>
インタビュー形式
アイコンのサイズは正方形で用意してください。画像の形はcssで丸になります。（表示サイズ60px）
-
いぬ
ちゃん - テキストテキストテキストテキストテキストテキストテキスト。
-
ねこ
ちゃん - テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
<dl class="balloonSet">
<dt class="balloonPh">画像
<div class="name">いぬ<br>ちゃん</div>
</dt>
<dd class="balloonTxt">テキストテキストテキストテキストテキストテキストテキスト。</dd>
</dl>