本文へ

HTMLテンプレート

見出しh2

<h2>見出しh2</h2>
<h2>上付き文字テスト二乗<span class="sup">2</span></h2>

見出しh3

<h3>見出しh3</h3>

見出しh4

<h4>見出しh4</h4>
見出しh5
<h5>見出しh5</h5>
見出しh6
<h6>見出しh6</h6>

本文用途

テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落

強調テキスト 強調テキスト 強調テキスト

<span class="text-bold">テキスト</span>

赤フォント （アクセシビリティ的に問題ないよう「#ff0000」より濃い赤で）

<span class="text-red">テキスト</span>

下線 下線 下線 下線

<span class="underline">テキスト</span>

テキスト上付きテキスト

<span class="sup">テキスト</span>

テキスト下付きテキスト

<span class="sub">テキスト</span>

小フォント 小フォント 小フォント 小フォント

<span class="text-small">テキスト</span>

大フォント 大フォント 大フォント 大フォント

<span class="text-large">テキスト</span>

センターリング センターリング

<p class="center">テキスト</p>

右寄せ 右寄せ 右寄せ 右寄せ

<p class="right">テキスト</p>

左寄せ 左寄せ 左寄せ 左寄せ

<p class="left">テキスト</p>

罫線（実線）

<hr>

罫線（点線）

<hr class="dot-line">

リンクリンクリンクリンク当該ページを別ウィンドウまたはタブで開きます

リンクリンクリンクリンク当該PDFを別ウィンドウまたはタブで開きます

リンクリンクリンクリンク拡大画像を表示します 

<a href="" target="_blank">リンクリンクリンクリンク<img src="/img/ex-link.png" class="icon" alt="当該ページを別ウィンドウまたはタブで開きます" width="18" height="18"></a>
<a href="" target="_blank">リンクリンクリンクリンク<img src="/img/pdf-link.png" class="icon" alt="当該PDFを別ウィンドウまたはタブで開きます" width="30" height="18"></a>
<a href="">リンクリンクリンクリンク<img src="/img/zoom-link.png" class="icon" alt="拡大画像を表示します" width="18" height="18"></a>
目立つ色で
目立たない色で
目立つ色で当該ページを別ウィンドウまたはタブで開きます
目立たない色で当該ページを別ウィンドウまたはタブで開きます
<a href="" class="button-vivid">目立つ色で</a>
<a href="" class="button-site">サイトカラーで</a>
<a href="" class="button-gray">目立たない色で</a>

<a href="" class="button-vivid" target="_blank">目立つ色で<img src="/img/ex-link-bk.png" class="icon" alt="当該ページを別ウィンドウまたはタブで開きます" width="24" height="24"></a>
<a href="" class="button-site" target="_blank">サイトカラーで<img src="/img/ex-link-bk.png" class="icon" alt="当該ページを別ウィンドウまたはタブで開きます" width="24" height="24">
<a href="" class="button-gray" target="_blank">目立たない色で<img src="/img/ex-link-bk.png" class="icon" alt="当該ページを別ウィンドウまたはタブで開きます" width="24" height="24"></a>

マージン用途

<p>のデフォルトは　margin: 0.7em 0 0.5em

上マージンは 0px。要素に 「mt00」というクラスが与えられています。

上マージンは 5px。要素に 「mt05」というクラスが与えられています。

上マージンは 10px。要素に「mt10」というクラスが与えられています。

上マージンは 15px。要素に「mt15」というクラスが与えられています。

上マージンは 20px。要素に「mt20」というクラスが与えられています。

上マージンは 30px。要素に「mt30」というクラスが与えられています。

上マージンは 40px。要素に「mt40」というクラスが与えられています。

右マージンは 0px。要素に 「mr00」というクラスが与えられています。

右マージンは 5px。要素に 「mr05」というクラスが与えられています。

右マージンは 10px。要素に「mr10」というクラスが与えられています。

右マージンは 15px。要素に「mr15」というクラスが与えられています。

右マージンは 20px。要素に「mr20」というクラスが与えられています。

右マージンは 30px。要素に「mr30」というクラスが与えられています。

右マージンは 40px。要素に「mr40」というクラスが与えられています。

下マージンは 0px。要素に 「mb00」というクラスが与えられています。

下マージンは 5px。要素に 「mb05」というクラスが与えられています。

下マージンは 10px。要素に「mb10」というクラスが与えられています。

下マージンは 15px。要素に「mb15」というクラスが与えられています。

下マージンは 20px。要素に「mb20」というクラスが与えられています。

下マージンは 30px。要素に「mb30」というクラスが与えられています。

下マージンは 40px。要素に「mb40」というクラスが与えられています。

左マージンは 0px。要素に 「ml00」というクラスが与えられています。

左マージンは 5px。要素に 「ml05」というクラスが与えられています。

左マージンは 10px。要素に「ml10」というクラスが与えられています。

左マージンは 15px。要素に「ml15」というクラスが与えられています。

左マージンは 20px。要素に「ml20」というクラスが与えられています。

左マージンは 30px。要素に「ml30」というクラスが与えられています。

左マージンは 40px。要素に「ml40」というクラスが与えられています。

リスト用途（第二階層：各リストインデント調整）

通常

  • あああああ
    • ※テキスト（.list-note）（第二階層）テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
  • ううううう
<ul><li>あああああ</li></ul>

ドット付きリスト：list-dot

  • あああああ（第一階層）
    1. 1.テキスト（.list-num）（第二階層）
    2. 2.テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    1. あああああテキスト（.num）テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    2. いいいいい
    3. ううううう
    1. （1）テキスト
    2. （2）テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    ※テキスト
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  • いいいい（第一階層）いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
    • あああああ（第二階層）
    • いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
    • ううううう
      1. 1.テキスト（.list-num）（第三階層：非推奨）
      2. 2.テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      1. あああああテキスト（.num）テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      2. いいいいい
      3. ううううう
      1. （1）テキスト
      2. （2）テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      ※テキスト
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<ul class="list-dot">
  <li>あああああ</li>
  <li>いいいいいいいいいいい</li>
</ul>

番号付きリスト：list-num：<ol>

  1. 1.テキスト
    • ※テキスト（.list-note）（第二階層）テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  2. 2.テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    1. 1.テキスト（.list-num）（第二階層）
    2. 2.テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    1. あああああテキスト（.num）テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    2. いいいいい
    3. ううううう
    1. （1）テキスト
    2. （2）テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    ※テキスト
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<ol class="list-num">
  <li><span class="mark">1.</span>テキスト</li>
  <li><span class="mark">2.</span>テキスト</li>
</ol>

番号付きリスト：num（自動連番）：<ol>

  1. あああああ
  2. いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
    1. 1.テキスト（.list-num）（第二階層）
    2. 2.テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    1. あああああテキスト（.num）テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    2. いいいいい
    3. ううううう
    1. （1）テキスト
    2. （2）テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    ※テキスト
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<ol class="num"><li>あああああ</li></ol>

カッコ番号付きリスト：list-brackets+(span.mark)

  1. （1）テキスト
  2. （2）テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    1. 1.テキスト（.list-num）（第二階層）
    2. 2.テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    1. あああああテキスト（.num）テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    2. いいいいい
    3. ううううう
    1. （1）テキスト
    2. （2）テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    ※テキスト
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<ol class="list-brackets"><li><span class="mark">（1）</span>あああああ</li></ol>

注意書きリスト：list-note+(span.mark)

  • ※テキスト
  • *テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    1. 1.テキスト（.list-num）（第二階層）
    2. 2.テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    1. あああああテキスト（.num）テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    2. いいいいい
    3. ううううう
    1. （1）テキスト
    2. （2）テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    ※テキスト
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<ul class="list-note"><li><span class="mark">※</span>テキスト</li></ul>

リンクリスト：link-gt

<ul class="link-gt"><li><a href="#">あああああ</a></li></ul>

ページ内リンクリスト：link-anchor

<ul class="link-anchor"><li><a href="#">あああああ</a></li></ul>

横並び「・」リスト：list-dot + inline

  • あああああ
  • いいいいい
  • ううううう
<ul class="list-dot inline"><li>あああああ</li></ul>

定義リスト

dl list-brackets or list-note で？+(span.mark)

カッコ番号付きリスト：list-brackets+(span.mark)

（1）テキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<dl class="list-brackets">
 <dt><span class="mark">（1）</span>テキスト</dt>
 <dd>テキスト</dd>
</dl>

注意書きリスト：list-note+(span.mark)

※テキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<dl class="list-note">
 <dt><span class="mark">※</span>テキスト</dt>
 <dd>テキスト</dd>
</dl>

テーブル：クラス指定無し(maxwidth)

キャプション
ああああああ ああああああ ああああああ
.nowrap ああああああ ああああああ 
<table class="maxwidth">
<caption>キャプション</caption>
<thead>
<tr>
  <th scope="col" class="border-increase">ああああああ</th>
  <th scope="col">ああああああ</th>
  <th scope="col">ああああああ</th>
</tr>
</thead>
<tbody>
<tr>
  <th scope="row">ああああああ</th>
  <td>ああああああ</td>
  <td class="cell-vivid-1col">ああああああ</td>
</tr>
</tbody>
</table>

角丸テーブル：round(maxwidth)

キャプション
あああああ あああああ あああああ
あああああ あああああ あああああ
あああああ あああああ あああああ 
<table class="round maxwidth">
  <caption>
    キャプション
  </caption>
  <thead>
  <tr>
    <th scope="col" class="round-left border-increase">あああああ</th>
    <th scope="col">あああああ</th>
    <th scope="col" class="round-right borderright-none">あああああ</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <th scope="row">あああああ</th>
    <td>あああああ</td>
    <td class="borderright-none cell-vivid vivid-border-t vivid-border-r vivid-border-l">あああああ</td>
  </tr>
  <tr class="last">
    <th scope="row" class="round-left">あああああ</th>
    <td>あああああ</td>
    <td class="round-right borderright-none cell-vivid vivid-border-b vivid-border-r vivid-border-l">あああああ</td>
  </tr>
  </tbody>
</table>

レイアウトテーブル：layout(maxwidth)

あああああ あああああ あああああ
あああああ あああああ あああああ
あああああ あああああ あああああ 
<table class="layout maxwidth">
<tbody>
<tr>
  <td>あああああ</td>
  <td>あああああ</td>
  <td>あああああ</td>
</tr>
<tr>
  <td>あああああ</td>
  <td>あああああ</td>
  <td>あああああ</td>
</tr>
<tr class="last">
  <td>あああああ</td>
  <td>あああああ</td>
  <td>あああああ</td>
</tr>
</tbody>
</table>

ボックス

通常ボックス（枠線）：box-round

通常ボックス

テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など

<div class="box-round">
    <p class="center">通常ボックス</p>
    <p>テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など</p>
</div>

背景色有ボックス（背景色）：box-round-bg

背景色有ボックス

テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など

<div class="box-round-bg">
    <p class="center">背景色有ボックス</p>
    <p>テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など</p>
</div>

点線ボックス（点線の枠）：box-round-dot

点線ボックス

テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など

<div class="box-round-dot">
    <p class="center">点線ボックス</p>
    <p>テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など</p>
</div>

強調ボックス（目立つ背景色）：box-round-vivid

強調ボックス

テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など

<div class="box-round-vivid">
    <p class="center">強調ボックス</p>
    <p>テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など</p>
</div>

角丸ボックス内のテーブル：box-round-form

商品・サービスについてお気軽にお問い合わせください

● ● ● ● ● ● ● ● ● ● ● ●部

03-­‐XXXX-­‐XXXX

お問い合わせフォームへ

<div class="box-round-form">
<p class="center">商品・サービスについてお気軽にお問い合わせください</p>
<p class="center text-large">● ● ● ● ● ● ● ● ● ● ● ●部</p>
<p class="center text-large">03-­‐XXXX-­‐XXXX</p>
<p class="center"><a href="" class="button-gray">お問い合わせフォームへ</a></p>
</div>

商品・サービスについてお気軽にお問い合わせください

● ● ● ● ● ● ● ● ● ● ● ●部

03-­‐XXXX-­‐XXXX

お問い合わせフォームへ

<div class="box-round-form2">
<p class="center">商品・サービスについてお気軽にお問い合わせください</p>
<p class="center text-large">● ● ● ● ● ● ● ● ● ● ● ●部</p>
<p class="center text-large">03-­‐XXXX-­‐XXXX</p>
<p class="center"><a href="" class="button-vivid">お問い合わせフォームへ</a></p>
</div>

レイアウト

画像1枚配置：column-box

センターリング センターリング

<div class="column-box">
<p class="center"><img src="" alt=""></p>
<p class="center caption">センターリング センターリング</p>
</div>

画像2枚配置：columns-half(キャプション+画像がある場合は+column-box)

センターリング センターリング

2カラムレイアウト　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など

センターリング センターリング

2カラムレイアウト　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など

<div class="columns-half">
  <div class="column first">
    <div class="column-box">
      <p class="center"><img src="" alt=""></p>
      <p class="center caption">センターリング センターリング</p>
    </div>
    <p>2カラムレイアウト　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など</p>
  </div>

  <div class="column">
    <div class="column-box">
      <p class="center"><img src="" alt=""></p>
      <p class="center caption">センターリング センターリング</p>
    </div>
    <p>2カラムレイアウト　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など　テキスト・画像など</p>
  </div>
</div>

画像+テキスト（左右回り込み）：float-left、float-right

センターリング センターリング

  1. 1.あああああ(list-num)
  2. 2.テスト.list-fix を付与して、左回り込み時のみに.markの絶対配置を解除いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
    1. あああああ(num)
    2. いいいいい
    3. ううううう

画像＋テキスト（右回り込み）ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

センターリング センターリング

画像＋テキスト（左回り込み）あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

<div class="clearfix">
  <div class="column-box float-left">
    <p class="center"><img src="" alt=""></p>
    <p class="center caption">センターリング センターリング</p>
  </div>
  <p class="mt00">画像＋テキスト（右回り込み）</p>
</div>

<div class="clearfix">
  <div class="column-box float-right">
    <p class="center"><img src="" alt=""></p>
    <p class="center caption">センターリング センターリング</p>
  </div>
  <ul class="link-anchor">
    <li><a href="#">あああああ</a></li>
    <li><a href="#">いいいいい</a></li>
    <li><a href="#">ううううう</a></li>
  </ul>
  <p class="mt00">画像＋テキスト（左回り込み）</p>
</div>

画像+テキスト（左右回り込みナシ）：.columns+(キャプション+画像がある場合は+column-box)

画像＋テキスト（右回り込みナシ）あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

センターリング センターリング

センターリング センターリング

  1. 1.あああああ(list-num)
  2. 2.テスト（左右回り込みナシ list-num）いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
    1. あああああ(num)
    2. いいいいい
    3. ううううう

画像＋テキスト（左回り込みナシ）あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

<div class="columns">
  <div class="column">画像＋テキスト（右回り込みナシ）</div>
  <div class="column column-box">
    <p class="center"><img src="" alt=""></p>
    <p class="center caption">センターリング センターリング</p>
  </div>
</div>
<div class="columns mt20">
  <div class="column column-box">
    <p class="center"><img src="" alt=""></p>
    <p class="center caption">センターリング センターリング</p>
  </div>
  <div class="column">画像＋テキスト（左回り込みナシ）</div>
</div>

画像スライス用：.slice + .col2 (2列の例：レスポンシブの兼ね合いで列数の決定が必要)

画像スライス用：.slice + class=”clear” (1行の例)

<div class="clearfix slice col2">
  <p><img src="" alt=""></p>
  <p><img src="" alt=""></p>
</div>

<div class="clearfix slice">
  <p><img src="" alt=""></p>
  <p class="clear"><img src="" alt=""></p>
</div>

画像スライス用：.slice + .col3 (3列の例：レスポンシブの兼ね合いで列数の決定が必要)

<div class="clearfix slice col3">
    <p><img src="" alt=""></p>
    <p><img src="" alt=""></p>
    <p><img src="" alt=""></p>
    <p class="clear"><img src="" alt=""></p>
    <p><img src="" alt=""></p>
    <p><img src="" alt=""></p>
</div>

画像スライス用：.slice + .col5 (5列の例：レスポンシブの兼ね合いで列数の決定が必要)

<div class="clearfix slice col5">
    <p><img src="/img/mid-slider-roughImg_s01.jpg" alt=""></p>
    <p><img src="/img/mid-slider-roughImg_s01.jpg" alt=""></p>
    <p><img src="/img/mid-slider-roughImg_s01.jpg" alt=""></p>
    <p><img src="/img/mid-slider-roughImg_s01.jpg" alt=""></p>
    <p><img src="/img/mid-slider-roughImg_s01.jpg" alt=""></p>
    <p class="clear"><img src="/img/mid-slider-roughImg_s01.jpg" alt=""></p>
    <p><img src="/img/mid-slider-roughImg_s01.jpg" alt=""></p>
    <p><img src="/img/mid-slider-roughImg_s01.jpg" alt=""></p>
    <p><img src="/img/mid-slider-roughImg_s01.jpg" alt=""></p>
    <p><img src="/img/mid-slider-roughImg_s01.jpg" alt=""></p>
</div>