肌の仕組みを活かす(.ttl_a)

静的HTMLではなくFutureShop内の上部・下部コンテンツエリアで使用したい場合は、全体を.main_contents_areaで囲ってあげてください。

既存コンテンツとの干渉を防ぐために、main_contents_areaというclassの中でしか効かないようにしています。
また、FutureShop内でinner_lなどの新レイアウトを使用する場合は、「全幅テンプレート」をお選びください。

<h1 class="ttl_a">肌の仕組みを活かす(.ttl_a)</h1>
<div class="ttl_a_sub">
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
<p class="description">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</div><!-- ttl_a_sub -->

※「シリーズから選ぶ」のバナーキービジュアル。PCスマホで別のビジュアルを用意する場合

<h1 class="ttl_g">
  <picture>
    <source media="(min-width: 480px)" srcset="https://www.neo-natural.com/img/item/lar/keyv_pc.jpg">
    <source media="(max-width: 479px)" srcset="https://www.neo-natural.com/img/item/lar/keyv_sp.jpg">
    <img src="https://www.neo-natural.com/img/item/lar/keyv_pc.jpg" alt="Larネオナチュラル">
  </picture>
</h1>

LEVEL2 見出し(.ttl_b)

<h2 class="ttl_b">LEVEL2 見出し(.ttl_b)</h2>

LEVEL2 見出し(.ttl_c)
（途中で大きく変える時）

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

<div class="bg_deepgreen">
<h2 class="ttl_c">LEVEL2 見出し(.ttl_c)<br>（途中で大きく変える時）</h2>
<div class="ttl_c_sub">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</div><!-- ttl_c_sub -->
</div><!-- bg_deepgreen -->

キャッチコピー(.txt_a)
LEVEL3 見出し(.ttl_d)

<h3 class="ttl_d"><div class="txt_a">キャッチコピー(.txt_a)</div>LEVEL3 見出し(.ttl_d)</h3>

LEVEL3 / 読み物系横幅(inner_g)の中で使う見出しサンプル

【読み物系横幅】この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

<div class="inner_g">
<h3 class="ttl_d">LEVEL3 / 読み物系横幅(inner_g)の中で使う見出しサンプル</h3>
<p>【読み物系横幅】この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</div><!-- inner_g -->

LEVEL4 見出し(.ttl_e)

<h4 class="ttl_e">LEVEL4 見出し(.ttl_e)</h4>

LEVEL4 見出し(.ttl_f)

<h4 class="ttl_f">LEVEL4 見出し(.ttl_f)</h4>

強調テキスト強調テキスト。ゴーシュも音のかっかゴーシュ曲から足が教わっパンたまし。またどう生意気だますとかいうゆうべたまし。おまえじゃセロをしられのたまし。

※注釈(.f_note)

<p><span class="t_color_red f_weight_b">強調テキスト強調テキスト。</span>ゴーシュも音のかっかゴーシュ曲から足が教わっパンたまし。またどう生意気だますとかいうゆうべたまし。おまえじゃセロをしられのたまし。</p>
<p class="f_note">※注釈(.f_note)</p>

リンク

ゴーシュはこんどやってやっまし。テキストリンクテキストリンク。テキストリンク over で underline を none 。

<ul class="list_c">
<li><a href="#">リンクリスト（.list_c）です</a></li>
<li><a href="#" class="icon_external">ここにリストが入ります。外部リンク</a></li>
<li><a href="#" class="icon_download">ダウンロード</a></li>
</ul>

ボタン

詳細を見る(.btn_a)

<a href="" class="btn_a">詳細を見る</a>

箇条書きリスト

list_aここにリストが入ります。ここにリストが入ります。
ここにリストが入ります。ここにリストが入ります。

<ul class="list_a">
<li>list_aここにリストが入ります。ここにリストが入ります。</li>
<li>ここにリストが入ります。ここにリストが入ります。</li>
</ul>

list_bここにリストが入ります。ここにリストが入ります。
ここにリストが入ります。ここにリストが入ります。

<ol class="list_b">
<li>list_bここにリストが入ります。ここにリストが入ります。</li>
<li>ここにリストが入ります。ここにリストが入ります。</li>
</ol>

list_d項目名: ここにリストが入ります
項目名: ここにリストが入ります
項目名: ここにリストが入ります

<dl class="list_d">
<dt>list_d項目名</dt>
<dd>ここにリストが入ります</dd>
<dt>項目名</dt>
<dd>ここにリストが入ります</dd>
<dt>項目名</dt>
<dd>ここにリストが入ります</dd>
</dl>

list_eここにリストが入ります。ここにリストが入ります。
ここにリストが入ります。ここにリストが入ります。

<ol class="list_e">
<li>ここにリストが入ります。ここにリストが入ります。</li>
<li>ここにリストが入ります。ここにリストが入ります。</li>
</ol>

表

テーブル（.table_a）です。スマホで横スクロールさせたい場合は.table_scrollで囲みます。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

table_a	タイトル	タイトル	タイトル	タイトル	タイトル
テキスト	テキスト	テキスト	テキスト	テキスト	テキスト
テキスト	テキスト	テキスト	テキスト	テキスト	テキスト

<div class="table_scroll">
<table class="table_a">
<tr>
<th>タイトル</th>
<th>タイトル</th>
<th>タイトル</th>
<th>タイトル</th>
<th>タイトル</th>
<th>タイトル</th>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</table><!-- table_a -->
</div><!-- table_scroll -->

横ヘッダの場合は.table_bです。table_bにてスマホで段組をとって全幅にしたい場合はtableに <table class="table_b table_responsive">のようにします。

table_b	テキスト	テキスト	テキスト	テキスト	テキスト
table_b	テキスト	テキスト	テキスト	テキスト	テキスト
table_b	テキスト	テキスト	テキスト	テキスト	テキスト

<table class="table_b table_responsive">
<tr>
<th>table_b</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th>table_b</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th>table_b</th>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</table><!-- table_b -->

レイアウト

段組系のPC表示は、すべて横幅1074px（inner_lクラスの中）で使うことを想定しています。

.col_four
.col_four
.col_four
.col_four

<ul class="col_four">
<li>
<p class="thumb"><a href=""><img src="https://placehold.jp/247x62.png" alt=""></a></p>
<p class="caption">.col_four</p>
</li>
<li>
<p class="thumb"><a href=""><img src="https://placehold.jp/247x62.png" alt=""></a></p>
<p class="caption">.col_four</p>
</li>
<li>
<p class="thumb"><a href=""><img src="https://placehold.jp/247x62.png" alt=""></a></p>
<p class="caption">.col_four</p>
</li>
<li>
<p class="thumb"><a href=""><img src="https://placehold.jp/247x62.png" alt=""></a></p>
<p class="caption">.col_four</p>
</li>
</ul>

.col_three
.col_three
.col_three

<ul class="col_three">
<li>
<p class="thumb"><a href=""><img src="https://placehold.jp/338x62.png" alt=""></a></p>
<p class="caption">.col_three</p>
</li>
<li>
<p class="thumb"><a href=""><img src="https://placehold.jp/338x62.png" alt=""></a></p>
<p class="caption">.col_three</p>
</li>
<li>
<p class="thumb"><a href=""><img src="https://placehold.jp/338x62.png" alt=""></a></p>
<p class="caption">.col_three</p>
</li>
</ul>

.col_two
.col_two

<ul class="col_two">
<li>
<p class="thumb"><a href=""><img src="https://placehold.jp/522x62.png" alt=""></a></p>
<p class="caption">.col_two</p>
</li>
<li>
<p class="thumb"><a href=""><img src="https://placehold.jp/522x62.png" alt=""></a></p>
<p class="caption">.col_two</p>
</li>
</ul>

col_two_floatbox　横幅可変の2列レイアウト。イレギュラー対応。
.main_contents_area .col_two_floatbox div:nth-child(2) { margin-left: 40px;}　かかってますので、margin-leftを調整したい場合はHTML内にてデザインに合わせて個別に調整した方が良いかもしれません。

<div class="col_two_floatbox">
<div class="t_align_c"><img alt="Ｌａｒネオナチュラル　ヒーリングローション" src="/img/item/skinlotion/selection/thumb_01.jpg" srcset="/img/item/skinlotion/selection/thumb_01.jpg 1x, /img/item/skinlotion/selection/thumb_01@2x.jpg 2x"></div>
<div>
<p>ネオナチュラルのスタンダード化粧水です。自社有機農場産の栄養豊富なへちま水をベースに、美容効果の高いローズ水を加え、肌のバランスを整える月桃をブレンドしました。９種類の植物のみを原料にし、水を一滴も加えていない「自然由来成分100％」の化粧水です。サラッとした使い心地ながら肌にしっかり浸透し、ふっくらとうるおいでクリアな肌を保ちます。</p>
</div>
</div><!-- col_two_floatbox -->

thumblist_five

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ
thumblist_five

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ
thumblist_five

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ
thumblist_five

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ
thumblist_five

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ

<ul class="thumblist_five">
<li>
<a href="">
<p class="thumb"><a href=""><img src="https://placehold.jp/190x60.png" alt=""></a></p>
<p class="name">thumblist_five</p>
</a>
<p class="description">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ</p>
</li>
<li>
<a href="">
<p class="thumb"><a href=""><img src="https://placehold.jp/190x60.png" alt=""></a></p>
<p class="name">thumblist_five</p>
</a>
<p class="description">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ</p>
</li>
<li>
<a href="">
<p class="thumb"><a href=""><img src="https://placehold.jp/190x60.png" alt=""></a></p>
<p class="name">thumblist_five</p>
</a>
<p class="description">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ</p>
</li>
<li>
<a href="">
<p class="thumb"><a href=""><img src="https://placehold.jp/190x60.png" alt=""></a></p>
<p class="name">thumblist_five</p>
</a>
<p class="description">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ</p>
</li>
<li>
<a href="">
<p class="thumb"><a href=""><img src="https://placehold.jp/190x60.png" alt=""></a></p>
<p class="name">thumblist_five</p>
</a>
<p class="description">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ</p>
</li>
</ul>

inner_g 読み物内レイアウト

inner_gクラスの中で使う場合。HTMLコード自体はinner_lの中で使う場合と同一。

.col_four
.col_four
.col_four
.col_four

.col_three
.col_three
.col_three

<ul class="col_three">
<li>
<p class="thumb"><a href=""><img src="https://placehold.jp/338x62.png" alt=""></a></p>
<p class="caption">.col_three</p>
</li>
<li>
<p class="thumb"><a href=""><img src="https://placehold.jp/338x62.png" alt=""></a></p>
<p class="caption">.col_three</p>
</li>
<li>
<p class="thumb"><a href=""><img src="https://placehold.jp/338x62.png" alt=""></a></p>
<p class="caption">.col_three</p>
</li>
</ul>

.col_two
.col_two

<ul class="col_two">
<li>
<p class="thumb"><a href=""><img src="https://placehold.jp/522x62.png" alt=""></a></p>
<p class="caption">.col_two</p>
</li>
<li>
<p class="thumb"><a href=""><img src="https://placehold.jp/522x62.png" alt=""></a></p>
<p class="caption">.col_two</p>
</li>
</ul>

背景ベージュの場合

テキストリンク

ボタンリンク

<div class="bg_deepgreen mt10">
<div class="inner_g">
<div class="frame_a">
<p class="ttl_b">背景ベージュの場合</p>
<p class="ttl_d">背景ベージュの場合</p>
<p class="ttl_e">背景ベージュの場合</p>
<p class="ttl_f">背景ベージュの場合</p>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
<p><a href="#">テキストリンク</a></p>
<p><a href="#" class="btn_a">ボタンリンク</a></p>
</div>
<p> </p>
</div>
</div>

囲みパターンA(.frame_a)

テキストリンク

ボタンリンク

<div class="frame_a">
<h3 class="ttl_e">囲みパターンA(.frame_a)</h3>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div><!-- frame_a -->

囲みパターンB(.frame_b)

テキストリンク

ボタンリンク

<div class="frame_b">
<h3 class="ttl_e">囲みパターンB(.frame_b)</h3>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div><!-- frame_a -->

囲みパターンB2(.frame_b2)※基本的に使用しない

テキストリンク

ボタンリンク

<div class="frame_b2">
<h3 class="ttl_e">囲みパターンB2(.frame_b2)</h3>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div><!-- frame_a -->

囲みパターンz(.frame_z)

テキストリンク

ボタンリンク

<div class="frame_z">
<h3 class="ttl_e">囲みパターンz(.frame_z)</h3>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div><!-- frame_a -->

ベージュ背景の場合(bg_deepgreen)

ベージュ背景の場合

テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

テキストリンク

ボタンリンク

<div class="frame_b">
<h3 class="ttl_e">囲みパターンB(.frame_b)</h3>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</div><!-- frame_a -->

囲みパターンC(.frame_c)

必ずしも3列とは限らないようなので、col_threeと各li内のframe_cのあわせ技に変更

タイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため

詳細を見る
タイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するためこの文章はダミーです。

詳細を見る
タイトルタイトルタイトルタイトルタイトルタイトル

この文章はダミーです。

詳細を見る

<ul class="col_three">
<li class="frame_c">
<p class="name">タイトル</p>
<p class="description">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため</p>
<p class="btn"><a href="" class="btn_a">詳細を見る</a></p>
</li>
<li class="frame_c">
<p class="name">タイトル</p>
<p class="description">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため</p>
<p class="btn"><a href="" class="btn_a">詳細を見る</a></p>
</li>
<li class="frame_c">
<p class="name">タイトル</p>
<p class="description">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため</p>
<p class="btn"><a href="" class="btn_a">詳細を見る</a></p>
</li>
</ul><!-- col_three -->

囲みパターンC＋画像(.frame_c.thumb)

タイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため

詳細を見る
タイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため

詳細を見る
タイトル

この文章はダミーです。

詳細を見る

<ul class="col_three">
<li class="frame_c">
<p class="thumb"><a href=""><img src="https://placehold.jp/336x97.png" alt="DUMMY"></a></p>
<p class="name">タイトル</p>
<p class="description">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため</p>
<p class="btn"><a href="" class="btn_a">詳細を見る</a></p>
</li>
<li class="frame_c">
<p class="thumb"><a href=""><img src="https://placehold.jp/336x97.png" alt="DUMMY"></a></p>
<p class="name">タイトル</p>
<p class="description">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため</p>
<p class="btn"><a href="" class="btn_a">詳細を見る</a></p>
</li>
<li class="frame_c">
<p class="thumb"><a href=""><img src="https://placehold.jp/336x97.png" alt="DUMMY"></a></p>
<p class="name">タイトル</p>
<p class="description">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため</p>
<p class="btn"><a href="" class="btn_a">詳細を見る</a></p>
</li>
</ul><!-- col_three -->

囲みパターンD＋画像(.frame_c.thumb)

タイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため

詳細を見る
タイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため

詳細を見る
タイトルタイトルタイトルタイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するためこの文章はダミーです。文字の大きさ、量、字間、行間等を確認するため

詳細を見る
タイトルタイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため

詳細を見る

.inner_gの場合／囲みパターンD＋画像(.frame_c.thumb)

タイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため

詳細を見る
タイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため

詳細を見る
タイトルタイトルタイトルタイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するためこの文章はダミーです。文字の大きさ、量、字間、行間等を確認するため

詳細を見る
タイトルタイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため

詳細を見る

<ul class="col_four">
<li class="frame_d">
<p class="thumb"><a href=""><img src="https://placehold.jp/336x97.png" alt="DUMMY"></a></p>
<p class="name">タイトル</p>
<p class="description">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため</p>
<p class="btn"><a href="" class="btn_a">詳細を見る</a></p>
</li>
<li class="frame_d">
<p class="thumb"><a href=""><img src="https://placehold.jp/336x97.png" alt="DUMMY"></a></p>
<p class="name">タイトル</p>
<p class="description">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため</p>
<p class="btn"><a href="" class="btn_a">詳細を見る</a></p>
</li>
<li class="frame_d">
<p class="thumb"><a href=""><img src="https://placehold.jp/336x97.png" alt="DUMMY"></a></p>
<p class="name">タイトル</p>
<p class="description">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため</p>
<p class="btn"><a href="" class="btn_a">詳細を見る</a></p>
</li>
<li class="frame_d">
<p class="thumb"><a href=""><img src="https://placehold.jp/336x97.png" alt="DUMMY"></a></p>
<p class="name">タイトル</p>
<p class="description">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するため</p>
<p class="btn"><a href="" class="btn_a">詳細を見る</a></p>
</li>
</ul><!-- col_four -->

グレー背景の場合(.bg_lightgreen)

LEVEL4 見出し

<div class="bg_lightgreen">
<div class="inner_l">
<h2 class="ttl_b">ベージュ背景の場合(.bg_lightgreen)</h2>
<h4 class="ttl_e">LEVEL4 見出し</h4>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</div><!-- inner_l -->
</div><!-- bg_lightgreen -->

ベージュ背景の場合(.bg_deepgreen)

LEVEL4 見出し

パターン背景の場合は同時に.patternを指定（例：div <class="bg_deepgreen pattern"></div>）この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

<div class="bg_deepgreen">
<div class="inner_l">
<h2 class="ttl_b">ベージュ背景の場合(.bg_deepgreen)</h2>
<h4 class="ttl_e">LEVEL4 見出し</h4>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</div><!-- inner_l -->
</div><!-- bg_lightgreen -->

【新】ブルー背景の場合(.bg_3)

LEVEL4 見出し

<div class="bg_3">
<div class="inner_l">
<h2 class="ttl_b">【新】ブルー背景の場合(.bg_3)(.bg_deepgreen)</h2>
<h4 class="ttl_e">LEVEL4 見出し</h4>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</div><!-- inner_l -->
</div><!-- bg_lightgreen -->

ショッピングカート

肌の仕組みを活かす(.ttl_a)

LEVEL2 見出し(.ttl_b)

LEVEL2 見出し(.ttl_c)（途中で大きく変える時）

キャッチコピー(.txt_a)LEVEL3 見出し(.ttl_d)

LEVEL3 / 読み物系横幅(inner_g)の中で使う見出しサンプル

LEVEL4 見出し(.ttl_e)

LEVEL4 見出し(.ttl_f)

リンク

ボタン

箇条書きリスト

表

レイアウト

inner_g 読み物内レイアウト

囲みパターンA(.frame_a)

囲みパターンB(.frame_b)

囲みパターンB2(.frame_b2)※基本的に使用しない

囲みパターンz(.frame_z)

囲みパターンC(.frame_c)

囲みパターンC＋画像(.frame_c.thumb)

囲みパターンD＋画像(.frame_c.thumb)

グレー背景の場合(.bg_lightgreen)

LEVEL4 見出し

ベージュ背景の場合(.bg_deepgreen)

LEVEL4 見出し

【新】ブルー背景の場合(.bg_3)

LEVEL4 見出し

LEVEL2 見出し(.ttl_c)
（途中で大きく変える時）

キャッチコピー(.txt_a)
LEVEL3 見出し(.ttl_d)