ボタン単体
1つのブロックで1つのボタンです
TYPE/SB-01
全面が写真又は背景色で、全体がボタン
<section class="combo wrapbtn inviewitem fadeinup"> <a href="" class="target" style="background-image:url(/img/); background-color:#;" data-ab-css-background><!--背景画像を使用しない場合はdata~を削除--> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>ここに説明文を表示します</p></dd> </dl> </a> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/SB-01-LINE
全面が写真又は背景色で、全体がボタン、枠を追加
<section class="combo wrapbtn inviewitem fadeinup"> <a href="" class="target line" style="background-image:url(/img/); background-color:#;" data-ab-css-background><!--背景画像を使用しない場合はdata~を削除--> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>ここに説明文を表示します</p></dd> </dl> </a> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/SB-02
上下に分割、タイトルと文章は中央揃え、全体がボタン
<section class="combo wrapbtn inviewitem fadeinup"> <a href="#"> <figure class="target" style="background-image:url(/img/);" data-ab-css-background></figure> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>文章をここに表示します</p></dd> </dl> </a> </section>

Display title

サブタイトルをここに表示

文章をここに表示します

Display title

サブタイトルをここに表示

文章をここに表示します

TYPE/SB-02
上下に分割、タイトルと文章は中央揃え、全体がボタン、枠を追加
<section class="combo wrapbtn inviewitem fadeinup"> <a href="#" class="line"> <figure class="target" style="background-image:url(/img/);" data-ab-css-background></figure> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>文章をここに表示します</p></dd> </dl> </a> </section>

Display title

サブタイトルをここに表示

文章をここに表示します

Display title

サブタイトルをここに表示

文章をここに表示します

TYPE/SB-03
PCとタブレットは左右半分にタイトルと文章で中央揃え、半分に画像、スマートフォンの場合は上が画像で下が文章※固定で変更は絶対に不可、全体がボタン
<section class="combo wrapbtn twoblock inviewitem fadeinup"> <a href=""> <div class="container"> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>文章をここに表示します</p></dd> </dl> <figure class="target" style="background-image:url(/img/);" data-ab-css-background></figure> </div> </a> </section>

Display title

サブタイトルをここに表示

文章をここに表示します

Display title

サブタイトルをここに表示

文章をここに表示します

TYPE/SB-03-LINE
PCとタブレットは左右半分にタイトルと文章で中央揃え、半分に画像、スマートフォンの場合は上が画像で下が文章※固定で変更は絶対に不可、全体がボタン、枠を追加
<section class="combo wrapbtn twoblock inviewitem fadeinup"> <a href="" class="line"> <div class="container"> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>文章をここに表示します</p></dd> </dl> <figure class="target" style="background-image:url(/img/);" data-ab-css-background></figure> </div> </a> </section>

Display title

サブタイトルをここに表示

文章をここに表示します

Display title

サブタイトルをここに表示

文章をここに表示します

TYPE/SB-04-01
全面が写真でグラデーションを右から左に使用、スマートフォンの場合は下から上に使用
<section class="combo wrapbtn gradation gr_01 inviewitem fadeinup"> <div class="grwrap target" style="background-image:url(/img/);" data-ab-css-background></div> <a href=""> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>ここに説明文を表示します</p></dd> </dl> </a> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/SB-04-02
全面が写真でグラデーションを左から右に使用、スマートフォンの場合は下から上に使用
<section class="combo wrapbtn gradation gr_02 inviewitem fadeinup"> <div class="grwrap target" style="background-image:url(/img/);" data-ab-css-background></div> <a href=""> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>ここに説明文を表示します</p></dd> </dl> </a> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/SB-04-03
全面が写真でグラデーションを下から上に使用
<section class="combo wrapbtn gradation gr_03 inviewitem fadeinup"> <div class="grwrap target" style="background-image:url(/img/);" data-ab-css-background></div> <a href=""> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>ここに説明文を表示します</p></dd> </dl> </a> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/SB-04-04
全面が写真でグラデーションを下から上に使用
<section class="combo wrapbtn gradation gr_04 inviewitem fadeinup"> <div class="grwrap target" style="background-image:url(/img/);" data-ab-css-background></div> <a href=""> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>ここに説明文を表示します</p></dd> </dl> </a> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/SB-04-01-LINE
全面が写真でグラデーションを右から左に使用、スマートフォンの場合は下から上に使用、枠を追加
<section class="combo wrapbtn gradation gr_01 inviewitem fadeinup"> <div class="grwrap target" style="background-image:url(/img/);" data-ab-css-background></div> <a href="" class="line"> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>ここに説明文を表示します</p></dd> </dl> </a> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/SB-04-02-LINE
全面が写真でグラデーションを左から右に使用、スマートフォンの場合は下から上に使用、枠を追加
<section class="combo wrapbtn gradation gr_02 inviewitem fadeinup"> <div class="grwrap target" style="background-image:url(/img/);" data-ab-css-background></div> <a href="" class="line"> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>ここに説明文を表示します</p></dd> </dl> </a> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/SB-04-03-LINE
全面が写真でグラデーションを下から上に使用、枠を追加
<section class="combo wrapbtn gradation gr_03 inviewitem fadeinup"> <div class="grwrap target" style="background-image:url(/img/);" data-ab-css-background></div> <a href="" class="line"> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>ここに説明文を表示します</p></dd> </dl> </a> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/SB-04-04-LINE
全面が写真でグラデーションを下から上に使用、枠を追加
<section class="combo wrapbtn gradation gr_04 inviewitem fadeinup"> <div class="grwrap target" style="background-image:url(/img/);" data-ab-css-background></div> <a href="" class="line"> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>ここに説明文を表示します</p></dd> </dl> </a> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/SB-05
全面が写真又は背景色で、ボタンを配置
<section class="combo inviewitem fadeinup"> <div class="combobtnwrap target" style="background-color:#; background-image:url(/img/);" data-ab-css-background><!--背景画像を使用しない場合はdata~を削除--> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>ここに説明文を表示します</p></dd> </dl> <div class="combobtn"><a href="">ボタン</a></div> </div> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/SB-05-LINE
全面が写真又は背景色で、ボタンを配置、枠を追加
<section class="combo inviewitem fadeinup"> <div class="combobtnwrap target line" style="background-color:#; background-image:url(img/sample_05.jpg);" data-ab-css-background><!--背景画像を使用しない場合はdata~を削除--> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>ここに説明文を表示します</p></dd> </dl> <div class="combobtn"><a href="">ボタン</a></div> </div> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/SB-06-01
全面が写真でグラデーションを右から左に使用、スマートフォンの場合は下から上に使用、ボタンを追加
<section class="combo gradation gr_01 inviewitem fadeinup"> <div class="grwrap target" style="background-image:url(/img/);" data-ab-css-background></div> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>ここに説明文を表示します</p></dd> <div class="combobtnwrap"><div class="combobtn"><a href="">ボタン</a></div></div> </dl> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/SB-06-02
全面が写真でグラデーションを左から右に使用、スマートフォンの場合は下から上に使用、ボタンを追加
<section class="combo gradation gr_02 inviewitem fadeinup"> <div class="grwrap target" style="background-image:url(/img/);" data-ab-css-background></div> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>ここに説明文を表示します</p></dd> <div class="combobtnwrap"><div class="combobtn"><a href="">ボタン</a></div></div> </dl> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/SB-06-03
全面が写真でグラデーションを下から上に使用、ボタンを追加
<section class="combo gradation gr_03 inviewitem fadeinup"> <div class="grwrap target" style="background-image:url(/img/);" data-ab-css-background></div> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>ここに説明文を表示します</p></dd> <div class="combobtnwrap"><div class="combobtn"><a href="">ボタン</a></div></div> </dl> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/SB-06-04
全面が写真でグラデーションを下から上に使用、ボタンを追加
<section class="combo gradation gr_04 inviewitem fadeinup"> <div class="grwrap target" style="background-image:url(/img/);" data-ab-css-background></div> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>ここに説明文を表示します</p></dd> <div class="combobtnwrap"><div class="combobtn"><a href="">ボタン</a></div></div> </dl> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/SB-06-01-LINE
全面が写真でグラデーションを右から左に使用、スマートフォンの場合は下から上に使用、枠を追加、ボタンを追加
<section class="combo gradation gr_01 inviewitem fadeinup"> <div class="grwrap target" style="background-image:url(/img/);" data-ab-css-background></div> <dl class="line"> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>ここに説明文を表示します</p></dd> <div class="combobtnwrap"><div class="combobtn"><a href="">ボタン</a></div></div> </dl> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/SB-06-02-LINE
全面が写真でグラデーションを左から右に使用、スマートフォンの場合は下から上に使用、枠を追加、ボタンを追加
<section class="combo gradation gr_02 inviewitem fadeinup"> <div class="grwrap target" style="background-image:url(/img/);" data-ab-css-background></div> <dl class="line"> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>ここに説明文を表示します</p></dd> <div class="combobtnwrap"><div class="combobtn"><a href="">ボタン</a></div></div> </dl> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/SB-07
PCとタブレットは左右半分にタイトルと文章で中央揃え、半分に画像、スマートフォンの場合は上が画像で下が文章※固定で変更は絶対に不可、ボタンを追加
<section class="combo twoblock inviewitem fadeinup"> <div class="container"> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>文章をここに表示します</p></dd> <div class="combobtnwrap"><div class="combobtn"><a href="">ボタン</a></div></div> </dl> <figure class="target" style="background-image:url(/img/);" data-ab-css-background></figure> </div> </section>

Display title

サブタイトルをここに表示

文章をここに表示します

Display title

サブタイトルをここに表示

文章をここに表示します

TYPE/SB-07-LINE
PCとタブレットは左右半分にタイトルと文章で中央揃え、半分に画像、スマートフォンの場合は上が画像で下が文章※固定で変更は絶対に不可、ボタンを追加
<section class="combo twoblock inviewitem fadeinup"> <div class="container line"> <dl> <dt><h3>Display title<p>サブタイトルをここに表示</p></h3></dt> <dd><p>文章をここに表示します</p></dd> <div class="combobtnwrap"><div class="combobtn"><a href="">ボタン</a></div></div> </dl> <figure class="target" style="background-image:url(/img/);" data-ab-css-background></figure> </div> </section>

Display title

サブタイトルをここに表示

文章をここに表示します

Display title

サブタイトルをここに表示

文章をここに表示します

ボタンの組み合わせ
1つのブロックで2つ以上のボタンです
TYPE/MB-02
横並びのボタンブロック/2つ
<section class="combobtncontainer count_2"> <!--ここにコンボブロックを入れる/--> <!--/ここにコンボブロックを入れる--> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/MB-03-01
横並びのボタンブロック/3つ
<section class="combobtncontainer count_3_1"> <!--ここにコンボブロックを入れる/--> <!--/ここにコンボブロックを入れる--> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/MB-03-02
ボタンブロック/3つ
<section class="combobtncontainer count_3_2"> <!--ここにコンボブロックを入れる/--> <!--/ここにコンボブロックを入れる--> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/MB-03-03
ボタンブロック/3つ
<section class="combobtncontainer count_3_3"> <!--ここにコンボブロックを入れる/--> <!--/ここにコンボブロックを入れる--> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/MB-04
横並びのボタンブロック/4つ
<section class="combobtncontainer count_4"> <!--ここにコンボブロックを入れる/--> <!--/ここにコンボブロックを入れる--> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

TYPE/MB-05-01
ボタンブロック/5つ
<section class="combobtncontainer count_5_1"> <!--ここにコンボブロックを入れる/--> <!--/ここにコンボブロックを入れる--> </section>

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します

Display title

サブタイトルをここに表示

ここに説明文を表示します