Style Guide

モジュール

その他モジュール

4.1 パンクズ

pankuzu

default

View Source

<nav class="pankuzu">
	<ul class="pankuzu_list">
		<li class="pankuzu_item"><a href="">HOME</a></li>
		<li class="pankuzu_item"><a href="">店舗情報</a></li>
		<li class="pankuzu_item">OAナガシマ御殿場店</li>
	</ul>
</nav><!-- /.pankuzu -->

Copy Source

4.2 ページリスト

pageList

default

お知らせ

8888.88.88

最新チラシ情報を更新しました

8888.88.88

今週の週替り商品更新しました

8888.88.88

今週のバイク週替り商品更新しました

一覧を見る

View Source

<div class="pageList">
	<h1 class="pageList_title">お知らせ</h1>
	<div class="pageList_body">
		<div class="pageList_list">
			<div class="pageList_item">
				<a href="">
					<p class="pageList_date">8888.88.88</p>
					<p class="pageList_name">最新チラシ情報を更新しました</p>
				</a>
			</div>
			<div class="pageList_item">
				<a href="">
					<p class="pageList_date">8888.88.88</p>
					<p class="pageList_name">今週の週替り商品更新しました</p>
				</a>
			</div>
			<div class="pageList_item">
				<a href="">
					<p class="pageList_date">8888.88.88</p>
					<p class="pageList_name">今週のバイク週替り商品更新しました</p>
				</a>
			</div>
		</div><!-- /.pageList_list -->
		<p class="pageList_more"><a href="">一覧を見る</a></p>
	</div>
</div><!-- /.pageList -->

Copy Source

4.3 SNSボタン

sns

default

View Source

<div class="sns">
	<ul class="sns_list">
		<li class="sns_item"><div class="fb-like" data-href="http://www.zoa.co.jp/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div></li>
		<li class="sns_item"><a href="https://twitter.com/zoa_akiba" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @zoa_akiba</a></li>
	</ul>
</div><!-- /.sns -->

Copy Source

4.4 画像とテキスト

imgTxt

default

ダミーイメージ

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

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

ダミーイメージ

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

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

View Source

<div class="imgTxt">
	<div class="imgTxt_left"><img src="http://placehold.it/200x200/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></div>
	<div class="imgTxt_body">
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>
</div><!-- /.imgTxt -->
<div class="imgTxt">
	<div class="imgTxt_right"><img src="http://placehold.it/200x200/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></div>
	<div class="imgTxt_body">
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>
</div><!-- /.imgTxt -->

Copy Source

4.5 店舗情報

storeInfo

default

ダミーイメージ
ダミーイメージ
店長：小杉 臣
  • ダミーイメージ
  • ダミーイメージ
  • ダミーイメージ
  • ダミーイメージ

View Source

<div class="storeInfo">
	<figure class="storeInfo_img"><img src="http://placehold.it/351x265/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></figure>
	<dl class="storeInfo_manager">
		<dt><img src="http://placehold.it/88x106/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></dt>
		<dd>店長：小杉 臣</dd>
	</dl>
	<ul class="storeInfo_imgs">
		<li class="storeInfo_img"><a href=""><img src="http://placehold.it/300x300/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></a></li>
		<li class="storeInfo_img"><a href=""><img src="http://placehold.it/300x300/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></a></li>
		<li class="storeInfo_img"><a href=""><img src="http://placehold.it/300x300/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></a></li>
		<li class="storeInfo_img"><a href=""><img src="http://placehold.it/300x300/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></a></li>
	</ul><!-- /.storeInfo_imgs -->
	<ul class="storeInfo_snsBox">
		<li class="storeInfo_sns storeInfo_sns-twitter"><a href="">Twitter</a></li>
		<li class="storeInfo_sns storeInfo_sns-facebook"><a href="">Facebook</a></li>
	</ul>
</div><!-- /.storeInfo -->

Copy Source

4.6 店舗の概要

storeSummary

default

住所 〒010-0942
秋田県秋田市川尻大川町12-33
TEL 018-896-5060
FAX 018-896-5065
Mail akita@zoa.co.jp
※ご返答までに数日いただくことがございます
営業時間 09:30～19:30
定休日 年中無休
駐車場 最大20台

View Source

<table class="storeSummary">
	<tbody>
		<tr>
			<th>住所</th>
			<td>〒010-0942<br>秋田県秋田市川尻大川町12-33</td>
		</tr>
		<tr>
			<th>TEL</th>
			<td>018-896-5060</td>
		</tr>
		<tr>
			<th>FAX</th>
			<td>018-896-5065</td>
		</tr>
		<tr>
			<th>Mail</th>
			<td><a href="mailto:akita@zoa.co.jp">akita@zoa.co.jp</a><br><span class="txt-note">※ご返答までに数日いただくことがございます</span></td>
		</tr>
		<tr>
			<th>営業時間</th>
			<td>09:30～19:30</td>
		</tr>
		<tr>
			<th>定休日</th>
			<td>年中無休</td>
		</tr>
		<tr>
			<th>駐車場</th>
			<td>最大20台</td>
		</tr>
	</tbody>
</table><!-- /.storeSummary -->

Copy Source

4.7 チラシリスト

adList

default

  • ダミーイメージ
  • ダミーイメージ

View Source

<div class="adList">
	<ul class="adList_list">
		<li class="adList_item"><a href=""><img src="http://placehold.it/220x165/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></a></li>
		<li class="adList_item"><a href=""><img src="http://placehold.it/220x165/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></a></li>
	</ul>
</div><!-- /.adList -->

Copy Source

4.8 店舗地図

storeMap

default

姫路バイパス中地インターを真直ぐ南に下り、山陽電車網干線高架をくぐってすぐ左手。 ミドリ電化姫路店さんすぐ近く。

大きな地図で見る

View Source

<div class="storeMap">
	<div class="storeMap_canvas" id="map"></div>
	<p class="storeMap_txt">姫路バイパス中地インターを真直ぐ南に下り、山陽電車網干線高架をくぐってすぐ左手。 ミドリ電化姫路店さんすぐ近く。</p>
	<p class="storeMap_mapLink"><a href="" target="_blank">大きな地図で見る</a></p>
</div><!-- /.storeMap -->

Copy Source

4.9 ストアメニュー

menuTable

default

修理箇所 6+ 6 5S/5C/5 4S/4
フロントパネル ¥19,800 ¥19,800 ¥9,800 ¥7,800
バッテリー ¥8,800 ¥6,500 ¥4,500 ¥5,800
水没修理 ¥7,000 ¥7,000 ¥7,000 ¥7,000
ホームボタン 交換後、OSアップデートや初期化が行えなくなるため修理出来ません
Dockコネクタ ¥9,800 ¥7,500 ¥6,500 ¥6,800
マイク/スピーカー ¥9,800 ¥7,500 ¥6,500 ¥6,800
  • ※上記は部品代・作業料・消費税全て込みの金額です。
  • ※店舗によって価格が異なります。
  • ※メイン基板等の故障により作業を行なっても改善しない場合がございます。
    その場合でも上記料金の半額を作業料として頂戴致します。
  • ※価格や内容は予告なく変更致します。ご了承下さい。
  • ※当社の修理はバッテリー以外純正品ではありません。
  • ※修理時に近接センサー・指紋認証システムが効かなくなる場合があります。
  • ※当社での修理完了後、Apple、キャリアショップによる修理受付が出来なくなる場合があります。

View Source

<div class="menu">
	<table class="menu_table">
		<thead>
			<tr>
				<th>修理箇所</th>
				<th>6+</th>
				<th>6</th>
				<th>5S/5C/5</th>
				<th>4S/4</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th class="menu_parts">フロントパネル</th>
				<td class="menu_6up">&yen;19,800</td>
				<td class="menu_6">&yen;19,800</td>
				<td class="menu_5">&yen;9,800</td>
				<td class="menu_4">&yen;7,800</td>
			</tr>
			<tr>
				<th class="menu_parts">バッテリー</th>
				<td class="menu_6up">&yen;8,800</td>
				<td class="menu_6">&yen;6,500</td>
				<td class="menu_5">&yen;4,500</td>
				<td class="menu_4">&yen;5,800</td>
			</tr>
			<tr>
				<th class="menu_parts">水没修理</th>
				<td class="menu_6up">&yen;7,000</td>
				<td class="menu_6">&yen;7,000</td>
				<td class="menu_5">&yen;7,000</td>
				<td class="menu_4">&yen;7,000</td>
			</tr>
			<tr>
				<th class="menu_parts">ホームボタン</th>
				<td colspan="4"  class="menu_no">交換後、OSアップデートや初期化が行えなくなるため修理出来ません</td>
			</tr>
			<tr>
				<th class="menu_parts">Dockコネクタ</th>
				<td class="menu_6up">&yen;9,800</td>
				<td class="menu_6">&yen;7,500</td>
				<td class="menu_5">&yen;6,500</td>
				<td class="menu_4">&yen;6,800</td>
			</tr>
			<tr>
				<th class="menu_parts">マイク/スピーカー</th>
				<td class="menu_6up">&yen;9,800</td>
				<td class="menu_6">&yen;7,500</td>
				<td class="menu_5">&yen;6,500</td>
				<td class="menu_4">&yen;6,800</td>
			</tr>
		</tbody>
	</table><!-- /.menu_table -->
	<ul class="menu_notes">
		<li class="menu_note">※上記は部品代・作業料・消費税全て込みの金額です。</li>
		<li class="menu_note">※店舗によって価格が異なります。</li>
		<li class="menu_note">※メイン基板等の故障により作業を行なっても改善しない場合がございます。<br>その場合でも上記料金の半額を作業料として頂戴致します。</li>
		<li class="menu_note">※価格や内容は予告なく変更致します。ご了承下さい。</li>
		<li class="menu_note">※当社の修理はバッテリー以外純正品ではありません。</li>
		<li class="menu_note">※修理時に近接センサー・指紋認証システムが効かなくなる場合があります。</li>
		<li class="menu_note">※当社での修理完了後、Apple、キャリアショップによる修理受付が出来なくなる場合があります。</li>
	</ul>
</div><!-- /.menu -->

Copy Source

4.10 修理メニューのラベル

menuLabels

default

  • 最短で当日返却
  • 翌日返却なら1000円引き

View Source

<ul class="menuLabels">
	<li class="menuLabels_item"><img src="/assets/images/store/day_release.png" alt="最短で当日返却"></li>
	<li class="menuLabels_item"><img src="/assets/images/store/discount.png" alt="翌日返却なら1000円引き"></li>
</ul><!-- /.menuLabels -->

Copy Source

4.11 店舗リスト

stores

default

パソコンの館　秋田店

秋田県秋田市川尻大川町12-33

MAP

018-896-5060

View Source

<div class="stores">
	<div class="stores_list">
		<div class="stores_item">
			<p class="stores_name"><a href="">パソコンの館　秋田店</a></p>
			<p class="stores_address">秋田県秋田市川尻大川町12-33</p>
			<p class="stores_mapBtn"><a href="" class="btn btn_map">MAP</a></p>
			<p class="stores_tel">018-896-5060</p>
		</div>
	</div>
</div><!-- /.stores -->

Copy Source

4.12 チラシイメージ

adImg

default

ダミーイメージ

View Source

<figure class="adImg"><a href="" class="js-modal"><img src="http://placehold.it/300x300/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></a></figure>

Copy Source

4.13 チラシ実施店舗一覧

adStores

default

実施店舗一覧

  • OAナガシマ浜松西インター店
  • OAナガシマ浜松西インター店
  • OAナガシマ浜松西インター店
  • OAナガシマ浜松西インター店
  • OAナガシマ浜松西インター店
  • OAナガシマ浜松西インター店
  • OAナガシマ浜松西インター店
  • OAナガシマ浜松西インター店
  • OAナガシマ浜松西インター店
  • OAナガシマ浜松西インター店
  • OAナガシマ浜松西インター店

View Source

<div class="adStores">
	<h3 class="adStores_title">実施店舗一覧</h3>
	<div class="adStores_body">
		<ul class="adStores_list">
			<li class="adStores_item" data-mh="adStores_item">OAナガシマ浜松西インター店</li>
			<li class="adStores_item" data-mh="adStores_item">OAナガシマ浜松西インター店</li>
			<li class="adStores_item" data-mh="adStores_item">OAナガシマ浜松西インター店</li>
			<li class="adStores_item" data-mh="adStores_item">OAナガシマ浜松西インター店</li>
			<li class="adStores_item" data-mh="adStores_item">OAナガシマ浜松西インター店</li>
			<li class="adStores_item" data-mh="adStores_item">OAナガシマ浜松西インター店</li>
			<li class="adStores_item" data-mh="adStores_item">OAナガシマ浜松西インター店</li>
			<li class="adStores_item" data-mh="adStores_item">OAナガシマ浜松西インター店</li>
			<li class="adStores_item" data-mh="adStores_item">OAナガシマ浜松西インター店</li>
			<li class="adStores_item" data-mh="adStores_item">OAナガシマ浜松西インター店</li>
			<li class="adStores_item" data-mh="adStores_item">OAナガシマ浜松西インター店</li>
		</ul>
	</div>
</div><!-- /.adStores -->

Copy Source

4.14 saleIndex

特価商品インデックス

default

2016年3月12日～18日
2016年3月1日～3月31日
2016年3月1日～3月31日
2016年3月1日～3月31日

View Source

<div class="saleIndex">
	<div class="saleIndex_list">
		<dl class="saleIndex_block">
			<dt><a href=""><img src="/assets/images/sale/weekly.png" alt=""></a></dt>
			<dd>2016年3月12日～18日</dd>
		</dl>
		<dl class="saleIndex_block">
			<dt><a href=""><img src="/assets/images/sale/monthly.png" alt=""></a></dt>
			<dd>2016年3月1日～3月31日</dd>
		</dl>
		<dl class="saleIndex_block">
			<dt><a href=""><img src="/assets/images/sale/point.png" alt=""></a></dt>
			<dd>2016年3月1日～3月31日</dd>
		</dl>
		<dl class="saleIndex_block">
			<dt><a href=""><img src="/assets/images/sale/club.png" alt=""></a></dt>
			<dd>2016年3月1日～3月31日</dd>
		</dl>
	</div>
</div><!-- /.saleIndex -->

Copy Source

4.15 タブ

tab

default

a

b

View Source

<div class="tab">
	<ul class="tab_btns">
		<li class="tab_btn tab_btn-active"><a href="javascript: void(0);" data-tab-index="all" class="js-tabBtn">すべて</a></li>
		<li class="tab_btn"><a href="javascript: void(0);" data-tab-index="0" class="js-tabBtn">PC</a></li>
		<li class="tab_btn"><a href="javascript: void(0);" data-tab-index="1" class="js-tabBtn">バイク</a></li>
	</ul>
	<div class="tab_content">
		<p>a</p>
	</div><!-- /.tab_content -->
	<div class="tab_content">
		<p>b</p>
	</div><!-- /.tab_content -->
</div><!-- /.tab -->

Copy Source

4.16 セール期間

saleinfo

default

対象期間：2016年3月12日（土）～18日（金）

翌週の大特価商品

View Source

<div class="saleinfo">
	<p class="saleinfo_date">対象期間：2016年3月12日（土）～18日（金）</p>
	<p class="saleinfo_other"><a href="" class="btn btn-red btn-arrow">翌週の大特価商品</a></p>
</div><!-- /.saleinfo -->

Copy Source

4.17 特価商品

saleItems

default

ディスプレイが激安！

コメントコメント

コメントコメント

ダミーイメージ

コメントコメント

I・O DATA

27インチ液晶ディスプレイLCDMF225XBRA

通常価格
23,000円
24,000円（税込）
特価
15,984円
15,984円（税込）

在庫限り（ポイント対象外）

  • 866+300MB/s
  • ビームフォーミング
  • 中継機能

2376094

ディスプレイが激安！

コメントコメント

コメントコメント

ダミーイメージ

コメントコメント

I・O DATA

27インチ液晶ディスプレイLCDMF225XBRA

通常価格
23,000円
24,000円（税込）
特価
15,984円
15,984円（税込）

在庫限り（ポイント対象外）

  • 866+300MB/s
  • ビームフォーミング
  • 中継機能

2376094

ディスプレイが激安！

コメントコメント

コメントコメント

ダミーイメージ

コメントコメント

I・O DATA

27インチ液晶ディスプレイLCDMF225XBRA

通常価格
23,000円
24,000円（税込）
特価
15,984円
15,984円（税込）

在庫限り（ポイント対象外）

  • 866+300MB/s
  • ビームフォーミング
  • 中継機能

2376094

ディスプレイが激安！

コメントコメント

コメントコメント

ダミーイメージ

コメントコメント

I・O DATA

27インチ液晶ディスプレイLCDMF225XBRA

通常価格
23,000円
24,000円（税込）
特価
15,984円
15,984円（税込）

在庫限り（ポイント対象外）

  • 866+300MB/s
  • ビームフォーミング
  • 中継機能

2376094

View Source

<div class="saleItems">
	<div class="saleItems_list">
		<div class="saleItems_item">
			<p class="saleItems_copy">ディスプレイが激安！</p>
			<p class="saleItems_comment saleItems_comment-01">コメントコメント</p>
			<p class="saleItems_comment saleItems_comment-02">コメントコメント</p>
			<div class="saleItems_img saleItems_img-stockOnly">
				<figure><a href=""><img src="http://placehold.it/250x180/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></a></figure>
				<p class="saleItems_comment saleItems_comment-03">コメントコメント</p>
			</div>
			<div class="saleItems_body">
				<div class="saleItems_leftBox">
					<p class="saleItems_maker">I・O DATA</p>
					<p class="saleItems_name">27インチ液晶ディスプレイ<span class="saleItems_code">LCDMF225XBRA</span></p>
					<dl class="saleItems_price">
						<dt>通常価格</dt>
						<dd><b>23,000</b>円</dd>
						<dd class="saleItems_taxin">24,000円（税込）</dd>
					</dl>
					<dl class="saleItems_salePrice">
						<dt>特価</dt>
						<dd><b>15,984</b>円</dd>
						<dd class="saleItems_taxin">15,984円（税込）</dd>
					</dl>
					<p class="saleItems_stock"><b>在庫限り</b>（ポイント対象外）</p>
				</div>
				<div class="saleItems_rightBox">
					<ul class="saleItems_spec">
						<li>866+300MB/s</li>
						<li>ビームフォーミング</li>
						<li>中継機能</li>
					</ul>
					<p class="saleItems_num">2376094</p>
				</div>
			</div>
		</div><!-- /.saleItems_item -->
		<div class="saleItems_item  saleItems_img-stockOnly">
			<p class="saleItems_copy">ディスプレイが激安！</p>
			<p class="saleItems_comment saleItems_comment-01">コメントコメント</p>
			<p class="saleItems_comment saleItems_comment-02">コメントコメント</p>
			<div class="saleItems_img">
				<figure><a href=""><img src="http://placehold.it/250x180/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></a></figure>
				<p class="saleItems_comment saleItems_comment-03">コメントコメント</p>
			</div>
			<div class="saleItems_body">
				<div class="saleItems_leftBox">
					<p class="saleItems_maker">I・O DATA</p>
					<p class="saleItems_name">27インチ液晶ディスプレイ<span class="saleItems_code">LCDMF225XBRA</span></p>
					<dl class="saleItems_price">
						<dt>通常価格</dt>
						<dd><b>23,000</b>円</dd>
						<dd class="saleItems_taxin">24,000円（税込）</dd>
					</dl>
					<dl class="saleItems_salePrice">
						<dt>特価</dt>
						<dd><b>15,984</b>円</dd>
						<dd class="saleItems_taxin">15,984円（税込）</dd>
					</dl>
					<p class="saleItems_stock"><b>在庫限り</b>（ポイント対象外）</p>
				</div>
				<div class="saleItems_rightBox">
					<ul class="saleItems_spec">
						<li>866+300MB/s</li>
						<li>ビームフォーミング</li>
						<li>中継機能</li>
					</ul>
					<p class="saleItems_num">2376094</p>
				</div>
			</div>
		</div><!-- /.saleItems_item -->
		<div class="saleItems_item">
			<p class="saleItems_copy">ディスプレイが激安！</p>
			<p class="saleItems_comment saleItems_comment-01">コメントコメント</p>
			<p class="saleItems_comment saleItems_comment-02">コメントコメント</p>
			<div class="saleItems_img">
				<figure><a href=""><img src="http://placehold.it/250x180/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></a></figure>
				<p class="saleItems_comment saleItems_comment-03">コメントコメント</p>
			</div>
			<div class="saleItems_body">
				<div class="saleItems_leftBox">
					<p class="saleItems_maker">I・O DATA</p>
					<p class="saleItems_name">27インチ液晶ディスプレイ<span class="saleItems_code">LCDMF225XBRA</span></p>
					<dl class="saleItems_price">
						<dt>通常価格</dt>
						<dd><b>23,000</b>円</dd>
						<dd class="saleItems_taxin">24,000円（税込）</dd>
					</dl>
					<dl class="saleItems_salePrice">
						<dt>特価</dt>
						<dd><b>15,984</b>円</dd>
						<dd class="saleItems_taxin">15,984円（税込）</dd>
					</dl>
					<p class="saleItems_stock"><b>在庫限り</b>（ポイント対象外）</p>
				</div>
				<div class="saleItems_rightBox">
					<ul class="saleItems_spec">
						<li>866+300MB/s</li>
						<li>ビームフォーミング</li>
						<li>中継機能</li>
					</ul>
					<p class="saleItems_num">2376094</p>
				</div>
			</div>
		</div><!-- /.saleItems_item -->
		<div class="saleItems_item">
			<p class="saleItems_copy">ディスプレイが激安！</p>
			<p class="saleItems_comment saleItems_comment-01">コメントコメント</p>
			<p class="saleItems_comment saleItems_comment-02">コメントコメント</p>
			<div class="saleItems_img">
				<figure><a href=""><img src="http://placehold.it/250x180/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></a></figure>
				<p class="saleItems_comment saleItems_comment-03">コメントコメント</p>
			</div>
			<div class="saleItems_body">
				<div class="saleItems_leftBox">
					<p class="saleItems_maker">I・O DATA</p>
					<p class="saleItems_name">27インチ液晶ディスプレイ<span class="saleItems_code">LCDMF225XBRA</span></p>
					<dl class="saleItems_price">
						<dt>通常価格</dt>
						<dd><b>23,000</b>円</dd>
						<dd class="saleItems_taxin">24,000円（税込）</dd>
					</dl>
					<dl class="saleItems_salePrice">
						<dt>特価</dt>
						<dd><b>15,984</b>円</dd>
						<dd class="saleItems_taxin">15,984円（税込）</dd>
					</dl>
					<p class="saleItems_stock"><b>在庫限り</b>（ポイント対象外）</p>
				</div>
				<div class="saleItems_rightBox">
					<ul class="saleItems_spec">
						<li>866+300MB/s</li>
						<li>ビームフォーミング</li>
						<li>中継機能</li>
					</ul>
					<p class="saleItems_num">2376094</p>
				</div>
			</div>
		</div><!-- /.saleItems_item -->
	</div>
</div><!-- /.saleItems -->

Copy Source

4.18 ZOA倶楽部会員様限定　大特価

clubItems

default

ディスプレイが激安！

I・O DATA

27インチ液晶ディスプレイ

LCDMF225XBRA

ダミーイメージ

ライトな装着感のグローブ

通常価格
24,000円の品
特価
15,984円
（税込 13,218円）
  • ポイント無しのズバリ特価

2376094

ディスプレイが激安！

I・O DATA

27インチ液晶ディスプレイ

LCDMF225XBRA

ダミーイメージ

ライトな装着感のグローブ

通常価格
24,000円の品
特価
15,984円
（税込 13,218円）
  • ポイント無しのズバリ特価

2376094

ディスプレイが激安！

I・O DATA

27インチ液晶ディスプレイ

LCDMF225XBRA

ダミーイメージ

ライトな装着感のグローブ

通常価格
24,000円の品
特価
15,984円
（税込 13,218円）
  • ポイント無しのズバリ特価

2376094

ディスプレイが激安！

I・O DATA

27インチ液晶ディスプレイ

LCDMF225XBRA

ダミーイメージ

ライトな装着感のグローブ

通常価格
24,000円の品
特価
15,984円
（税込 13,218円）
  • ポイント無しのズバリ特価

2376094

View Source

<div class="clubItems">
	<div class="clubItems_list">
		<div class="clubItems_item">
			<p class="clubItems_copy">ディスプレイが激安！</p>
			<p class="clubItems_maker">I・O DATA</p>
			<p class="clubItems_name">27インチ液晶ディスプレイ</p>
			<p class="clubItems_code">LCDMF225XBRA</p>
			<a href=""><figure class="clubItems_img clubItems_img-stockOnly"><img src="http://placehold.it/242x145/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></figure></a>
			<p class="clubItems_comment">ライトな装着感のグローブ</p>
			<dl class="clubItems_price">
				<dt>通常価格</dt>
				<dd><b>24,000</b>円の品</dd>
			</dl>
			<dl class="clubItems_salePrice">
				<dt>特価</dt>
				<dd><b>15,984</b>円<br>（税込 13,218円）</dd>
			</dl>
			<ul class="clubItems_info">
				<li>ポイント無しのズバリ特価</li>
			</ul>
			<p class="clubItems_num">2376094</p>
		</div><!-- /.clubItems_item -->
		<div class="clubItems_item">
			<p class="clubItems_copy">ディスプレイが激安！</p>
			<p class="clubItems_maker">I・O DATA</p>
			<p class="clubItems_name">27インチ液晶ディスプレイ</p>
			<p class="clubItems_code">LCDMF225XBRA</p>
			<a href=""><figure class="clubItems_img clubItems_img-stockOnly"><img src="http://placehold.it/242x145/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></figure></a>
			<p class="clubItems_comment">ライトな装着感のグローブ</p>
			<dl class="clubItems_price">
				<dt>通常価格</dt>
				<dd><b>24,000</b>円の品</dd>
			</dl>
			<dl class="clubItems_salePrice">
				<dt>特価</dt>
				<dd><b>15,984</b>円<br>（税込 13,218円）</dd>
			</dl>
			<ul class="clubItems_info">
				<li>ポイント無しのズバリ特価</li>
			</ul>
			<p class="clubItems_num">2376094</p>
		</div><!-- /.clubItems_item -->
		<div class="clubItems_item">
			<p class="clubItems_copy">ディスプレイが激安！</p>
			<p class="clubItems_maker">I・O DATA</p>
			<p class="clubItems_name">27インチ液晶ディスプレイ</p>
			<p class="clubItems_code">LCDMF225XBRA</p>
			<a href=""><figure class="clubItems_img"><img src="http://placehold.it/242x145/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></figure></a>
			<p class="clubItems_comment">ライトな装着感のグローブ</p>
			<dl class="clubItems_price">
				<dt>通常価格</dt>
				<dd><b>24,000</b>円の品</dd>
			</dl>
			<dl class="clubItems_salePrice">
				<dt>特価</dt>
				<dd><b>15,984</b>円<br>（税込 13,218円）</dd>
			</dl>
			<ul class="clubItems_info">
				<li>ポイント無しのズバリ特価</li>
			</ul>
			<p class="clubItems_num">2376094</p>
		</div><!-- /.clubItems_item -->
		<div class="clubItems_item">
			<p class="clubItems_copy">ディスプレイが激安！</p>
			<p class="clubItems_maker">I・O DATA</p>
			<p class="clubItems_name">27インチ液晶ディスプレイ</p>
			<p class="clubItems_code">LCDMF225XBRA</p>
			<a href=""><figure class="clubItems_img"><img src="http://placehold.it/242x145/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></figure></a>
			<p class="clubItems_comment">ライトな装着感のグローブ</p>
			<dl class="clubItems_price">
				<dt>通常価格</dt>
				<dd><b>24,000</b>円の品</dd>
			</dl>
			<dl class="clubItems_salePrice">
				<dt>特価</dt>
				<dd><b>15,984</b>円<br>（税込 13,218円）</dd>
			</dl>
			<ul class="clubItems_info">
				<li>ポイント無しのズバリ特価</li>
			</ul>
			<p class="clubItems_num">2376094</p>
		</div><!-- /.clubItems_item -->
	</div>
</div><!-- /.clubItems -->

Copy Source

4.19 サービスリスト

serviceList

default

ダミーイメージ

パソコン

【リフレッシュ】
最近パソコン遅くないですか？
動作の軽快さを取り戻しましょう。

価格
15,984円

※参考価格：50,000円～

ダミーイメージ

パソコン

【リフレッシュ】
最近パソコン遅くないですか？
動作の軽快さを取り戻しましょう。

価格
15,984円

※参考価格：50,000円～

ダミーイメージ

パソコン

【リフレッシュ】
最近パソコン遅くないですか？
動作の軽快さを取り戻しましょう。

価格
15,984円

※参考価格：50,000円～

ダミーイメージ

パソコン

【リフレッシュ】
最近パソコン遅くないですか？
動作の軽快さを取り戻しましょう。

価格
15,984円

※参考価格：50,000円～

ダミーイメージ

パソコン

【リフレッシュ】
最近パソコン遅くないですか？
動作の軽快さを取り戻しましょう。

価格
15,984円

※参考価格：50,000円～

ダミーイメージ

パソコン

【リフレッシュ】
最近パソコン遅くないですか？
動作の軽快さを取り戻しましょう。

価格
15,984円

※参考価格：50,000円～

View Source

<div class="serviceList">
	<div class="serviceList_list">
		<div class="serviceList_item">
			<figure class="serviceList_img"><img src="http://placehold.it/242x146/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></figure>
			<p class="serviceList_name">パソコン</p>
			<div class="serviceList_txt">
				<p>
					【リフレッシュ】<br>
					最近パソコン遅くないですか？<br>
					動作の軽快さを取り戻しましょう。
				</p>
			</div>
			<dl class="serviceList_price">
				<dt>価格</dt>
				<dd><b>15,984</b>円</dd>
			</dl>
			<p class="serviceList_note">※参考価格：50,000円～</p>
		</div><!-- /.serviceList_item -->
		<div class="serviceList_item">
			<figure class="serviceList_img"><img src="http://placehold.it/242x146/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></figure>
			<p class="serviceList_name">パソコン</p>
			<div class="serviceList_txt">
				<p>
					【リフレッシュ】<br>
					最近パソコン遅くないですか？<br>
					動作の軽快さを取り戻しましょう。
				</p>
			</div>
			<dl class="serviceList_price">
				<dt>価格</dt>
				<dd><b>15,984</b>円</dd>
			</dl>
			<p class="serviceList_note">※参考価格：50,000円～</p>
		</div><!-- /.serviceList_item -->
		<div class="serviceList_item">
			<figure class="serviceList_img"><img src="http://placehold.it/242x146/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></figure>
			<p class="serviceList_name">パソコン</p>
			<div class="serviceList_txt">
				<p>
					【リフレッシュ】<br>
					最近パソコン遅くないですか？<br>
					動作の軽快さを取り戻しましょう。
				</p>
			</div>
			<dl class="serviceList_price">
				<dt>価格</dt>
				<dd><b>15,984</b>円</dd>
			</dl>
			<p class="serviceList_note">※参考価格：50,000円～</p>
		</div><!-- /.serviceList_item -->
		<div class="serviceList_item">
			<figure class="serviceList_img"><img src="http://placehold.it/242x146/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></figure>
			<p class="serviceList_name">パソコン</p>
			<div class="serviceList_txt">
				<p>
					【リフレッシュ】<br>
					最近パソコン遅くないですか？<br>
					動作の軽快さを取り戻しましょう。
				</p>
			</div>
			<dl class="serviceList_price">
				<dt>価格</dt>
				<dd><b>15,984</b>円</dd>
			</dl>
			<p class="serviceList_note">※参考価格：50,000円～</p>
		</div><!-- /.serviceList_item -->
		<div class="serviceList_item">
			<figure class="serviceList_img"><img src="http://placehold.it/242x146/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></figure>
			<p class="serviceList_name">パソコン</p>
			<div class="serviceList_txt">
				<p>
					【リフレッシュ】<br>
					最近パソコン遅くないですか？<br>
					動作の軽快さを取り戻しましょう。
				</p>
			</div>
			<dl class="serviceList_price">
				<dt>価格</dt>
				<dd><b>15,984</b>円</dd>
			</dl>
			<p class="serviceList_note">※参考価格：50,000円～</p>
		</div><!-- /.serviceList_item -->
		<div class="serviceList_item">
			<figure class="serviceList_img"><img src="http://placehold.it/242x146/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></figure>
			<p class="serviceList_name">パソコン</p>
			<div class="serviceList_txt">
				<p>
					【リフレッシュ】<br>
					最近パソコン遅くないですか？<br>
					動作の軽快さを取り戻しましょう。
				</p>
			</div>
			<dl class="serviceList_price">
				<dt>価格</dt>
				<dd><b>15,984</b>円</dd>
			</dl>
			<p class="serviceList_note">※参考価格：50,000円～</p>
		</div><!-- /.serviceList_item -->
	</div>
</div><!-- /.serviceList -->

Copy Source

4.20 サービス内容のバナー

serviceBnrs

default

View Source

<ul class="serviceBnrs">
	<li class="serviceBnrs_item"><img src="/assets/images/service/bnr01.png" alt=""></li>
	<li class="serviceBnrs_item"><img src="/assets/images/service/bnr02.png" alt=""></li>
</ul>

Copy Source

4.21 フォーム

contact

default

ご依頼内容を入力の上、[入力内容確認]ボタンを押してください。
【必須マークのある項目は入力必須です】

お名前

ちゃんと入力してください。
メールアドレス

ちゃんと入力してください。
メールアドレス再入力
機種名

機種の確認方法
パソコン裏側に貼られているシールに記載されていることが多いです。保証書をお持ちでしたらそちらにも記載されています。
症状
購入先
症状などを撮影した画像の添付

View Source

<form action="" class="contact">
	<p>ご依頼内容を入力の上、[入力内容確認]ボタンを押してください。<br>【<span class="contact_mustIcon">必須</span>マークのある項目は入力必須です】</p>
	<table class="contact_table">
		<tbody>
			<tr>
				<th class="contact_must">お名前</th>
				<td>
					<div class="contact_elem"><input type="text" name="" id="" class="w-mid contact_error"></div>
					<p class="contact_errorTxt">ちゃんと入力してください。</p>
				</td>
			</tr>
			<tr>
				<th class="contact_must">メールアドレス</th>
				<td>
					<div class="contact_elem"><input type="text" name="" id="" class="w-long contact_error"></div>
					<p class="contact_errorTxt">ちゃんと入力してください。</p>
				</td>
			</tr>
			<tr>
				<th class="contact_must">メールアドレス再入力</th>
				<td>
					<div class="contact_elem"><input type="text" name="" id="" class="w-long"></div>
				</td>
			</tr>
			<tr>
				<th class="contact_must">機種名</th>
				<td>
					<div class="contact_elem"><input type="text" name="" id="" class="w-long"></div>
					<p class="contact_note"><b>機種の確認方法</b><br>パソコン裏側に貼られているシールに記載されていることが多いです。保証書をお持ちでしたらそちらにも記載されています。</p>
				</td>
			</tr>
			<tr>
				<th class="contact_must">症状</th>
				<td>
					<div class="contact_elem"><textarea name="" id="" class="w-long"></textarea></div>
				</td>
			</tr>
			<tr>
				<th>購入先</th>
				<td>
					<div class="contact_elem">
						<select name="" id="">
							<option value="">選択してください</option>
							<option value="">当社</option>
							<option value="">当社以外</option>
						</select>
					</div>
				</td>
			</tr>
			<tr>
				<th>症状などを撮影した画像の添付</th>
				<td>
					<div class="contact_elem"><input type="file" name="" id=""></div>
				</td>
			</tr>
		</tbody>
	</table>
	<ul class="btns">
		<li class="btns_item"><button type="submit" class="btn btn-mid btn-tall">入力内容確認</button></li>
	</ul><!-- /.btns -->
</form><!-- /.contact -->

Copy Source

4.23.1 フレーム

frame

default

フレームタイトル

中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身

中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身

中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身

中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身

View Source

<div class="frame">
	<h3 class="frame_title">フレームタイトル</h3>
	<div class="frame_body">
		<p>中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身</p>
		<p>中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身</p>
		<p>中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身</p>
		<p>中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身</p>
	</div>
</div><!-- /.frame -->

Copy Source

4.23.2 フレーム2

frame2

default

「ありがとう」「助かった！」＝感謝されることが栄養剤

(株)ZOAは、パソコンや周辺機器（プリンターなど）サポート・サービスを販売する会社です。
私達は、パソコンを売ることと同じ位、いえ、それ以上にお客様から「ありがとう」「助かった！」と思っていただける言っていただけることを大切にしています。
このことが、私達の栄養剤にもなっています。
お客様からのこうした感謝の気持に対して、「とても嬉しい」「この仕事をやっていて良かった」「明日も頑張ろう」、と共に思える人と一緒に仕事をしたいと思っています。

“○○して欲しい”→「ありがとう」→“嬉しいを”実感

「突然パソコンが動かなくなった。どうにか直して欲しい。」「こんなことパソコンでしたいけど、何を買えばいいか教えて欲しい。」
・・・・・こんな経験をみなさんもしたことがあるのでは。
パソコンは、どんどん便利になるけれど、それと比例してお客様の“○○して欲しい”も増え続けます。
・・・・・そう、この“○○して欲しい”に感謝の芽が隠されています｡
私達の店内・社内には、いたるところに感謝の芽と遭遇するチャンスがあります。
みなさんもこのチャンスをつかんで、“嬉しい”を実感できる職場の扉を開いてみませんか。

View Source

<div class="frame2">
	<div class="frame2_block">
		<h3 class="frame2_title">「ありがとう」「助かった！」＝感謝されることが栄養剤</h3>
		<div class="frame2_body">
			<p>
				(株)ZOAは、パソコンや周辺機器（プリンターなど）サポート・サービスを販売する会社です。<br>
				私達は、パソコンを売ることと同じ位、いえ、それ以上にお客様から「ありがとう」「助かった！」と思っていただける言っていただけることを大切にしています。<br>
				このことが、私達の栄養剤にもなっています。<br>
				お客様からのこうした感謝の気持に対して、「とても嬉しい」「この仕事をやっていて良かった」「明日も頑張ろう」、と共に思える人と一緒に仕事をしたいと思っています。
			</p>
		</div>
	</div>
	<div class="frame2_block">
		<h3 class="frame2_title">“○○して欲しい”→「ありがとう」→“嬉しいを”実感</h3>
		<div class="frame2_body">
			<p>
				「突然パソコンが動かなくなった。どうにか直して欲しい。」「こんなことパソコンでしたいけど、何を買えばいいか教えて欲しい。」<br>
				・・・・・こんな経験をみなさんもしたことがあるのでは。<br>
				パソコンは、どんどん便利になるけれど、それと比例してお客様の“○○して欲しい”も増え続けます。<br>
				・・・・・そう、この“○○して欲しい”に感謝の芽が隠されています｡<br>
				私達の店内・社内には、いたるところに感謝の芽と遭遇するチャンスがあります。<br>
				みなさんもこのチャンスをつかんで、“嬉しい”を実感できる職場の扉を開いてみませんか。
			</p>
		</div>
	</div>
</div><!-- /.frame2 -->

Copy Source

4.23.3 フレーム3

frame3

default

中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身

中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身

中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身

中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身

View Source

<div class="frame3">
	<p>中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身</p>
	<p>中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身</p>
	<p>中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身</p>
	<p>中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身</p>
</div><!-- /.frame3 -->

Copy Source

4.24 こんな人と募集

recruitList

default

  • 大きな声で挨拶ができる方
  • 明るく・笑顔が素敵な方
  • 実力主義を希望される方
  • とにかく元気な方
  • 商売の好きな方
  • 有限実行な方

View Source

<div class="recruitList">
	<ul class="recruitList_list">
		<li class="recruitList_item">大きな声で挨拶ができる方</li>
		<li class="recruitList_item">明るく・笑顔が素敵な方</li>
		<li class="recruitList_item">実力主義を希望される方</li>
		<li class="recruitList_item">とにかく元気な方</li>
		<li class="recruitList_item">商売の好きな方</li>
		<li class="recruitList_item">有限実行な方</li>
	</ul>
</div><!-- /.recruitList -->

Copy Source

4.25 先輩リスト

seniors

default

View Source

<div class="seniors">
	<ul class="seniors_list">
		<li class="seniors_item">
			<a href=""><img src="/assets/images/recruit/senior01.png" alt=""></a>
		</li>
		<li class="seniors_item">
			<a href=""><img src="/assets/images/recruit/senior02.png" alt=""></a>
		</li>
		<li class="seniors_item">
			<a href=""><img src="/assets/images/recruit/senior03.png" alt=""></a>
		</li>
		<li class="seniors_item">
			<a href=""><img src="/assets/images/recruit/senior04.png" alt=""></a>
		</li>
		<li class="seniors_item">
			<a href=""><img src="/assets/images/recruit/senior05.png" alt=""></a>
		</li>
	</ul>
</div><!-- /.seniors -->

Copy Source

4.26 先輩プロフィール

profile

default

瀧 元樹
氏名 瀧 元樹
入社日 2001年3月19日
所属 秋田店
役職・職種 店長

View Source

<div class="profile">
	<figure class="profile_img"><img src="/assets/images/recruit/senior01.png" alt="瀧 元樹"></figure>
	<div class="profile_body">
		<table class="profile_table">
			<tbody>
				<tr>
					<th>氏名</th>
					<td>瀧 元樹</td>
				</tr>
				<tr>
					<th>入社日</th>
					<td>2001年3月19日</td>
				</tr>
				<tr>
					<th>所属</th>
					<td>秋田店</td>
				</tr>
				<tr>
					<th>役職・職種</th>
					<td>店長</td>
				</tr>
			</tbody>
		</table>
	</div>
</div><!-- /.profile -->

Copy Source

4.27 ご依頼から引渡の流れ

steps

default

  • 1　ご入力

    ご入力

    お名前・修理品についてなど、修理ご依頼フォームにご入力ください。

  • 2　ご案内

    ご案内

    担当者がお見積りを作成し、メールにてお客様へご連絡を致します。

  • 3　ご依頼

    ご依頼

    お見積り内容をご確認して頂き、ご依頼メールを送信してください。

  • 4　梱包準備

    梱包準備

    パソコン周辺機器などのケーブルなどを外してください。
    梱包は運送業者が致します。

  • 5　修理引取

    修理引取

    弊社が運送業者へ連絡し、修理品の引き取り手配をお掛けします。

  • 6　修理

    修理

    修理品をお預かりし、ご依頼頂いた箇所の修理を行います。

  • 7　お振込み

    お振込み

    修理完了後、メールにてお支払いのご連絡を致します。

  • 8　引渡し

    引渡し

    お支払いの確認後、修理品をお客様へお戻し致します。

View Source

<div class="steps">
	<ul class="steps_list">
		<li class="steps_item">
			<figure class="steps_img"><img src="/assets/images/service/pc/step01.png" alt="1　ご入力"></figure>
			<div class="steps_body">
				<p class="steps_num">ご入力</p>
				<p class="steps_txt">お名前・修理品についてなど、修理ご依頼フォームにご入力ください。</p>
			</div>
		</li>
		<li class="steps_item">
			<figure class="steps_img"><img src="/assets/images/service/pc/step02.png" alt="2　ご案内"></figure>
			<div class="steps_body">
				<p class="steps_num">ご案内</p>
				<p class="steps_txt">担当者がお見積りを作成し、メールにてお客様へご連絡を致します。</p>
			</div>
		</li>
		<li class="steps_item">
			<figure class="steps_img"><img src="/assets/images/service/pc/step03.png" alt="3　ご依頼"></figure>
			<div class="steps_body">
				<p class="steps_num">ご依頼</p>
				<p class="steps_txt">お見積り内容をご確認して頂き、ご依頼メールを送信してください。</p>
			</div>
		</li>
		<li class="steps_item">
			<figure class="steps_img"><img src="/assets/images/service/pc/step04.png" alt="4　梱包準備"></figure>
			<div class="steps_body">
				<p class="steps_num">梱包準備</p>
				<p class="steps_txt">パソコン周辺機器などのケーブルなどを外してください。<br>梱包は運送業者が致します。</p>
			</div>
		</li>
		<li class="steps_item">
			<figure class="steps_img"><img src="/assets/images/service/pc/step05.png" alt="5　修理引取"></figure>
			<div class="steps_body">
				<p class="steps_num">修理引取</p>
				<p class="steps_txt">弊社が運送業者へ連絡し、修理品の引き取り手配をお掛けします。</p>
			</div>
		</li>
		<li class="steps_item">
			<figure class="steps_img"><img src="/assets/images/service/pc/step06.png" alt="6　修理"></figure>
			<div class="steps_body">
				<p class="steps_num">修理</p>
				<p class="steps_txt">修理品をお預かりし、ご依頼頂いた箇所の修理を行います。</p>
			</div>
		</li>
		<li class="steps_item">
			<figure class="steps_img"><img src="/assets/images/service/pc/step07.png" alt="7　お振込み"></figure>
			<div class="steps_body">
				<p class="steps_num">お振込み</p>
				<p class="steps_txt">修理完了後、メールにてお支払いのご連絡を致します。</p>
			</div>
		</li>
		<li class="steps_item">
			<figure class="steps_img"><img src="/assets/images/service/pc/step08.png" alt="8　引渡し"></figure>
			<div class="steps_body">
				<p class="steps_num">引渡し</p>
				<p class="steps_txt">お支払いの確認後、修理品をお客様へお戻し致します。</p>
			</div>
		</li>
	</ul>
</div><!-- /.steps -->

Copy Source

4.28 おすすめ・キャンペーン商品一覧

pickups

default

2016.05.26

ダミーイメージ

タイトルタイトルタイトルタイトルタイトル

2016.05.26

ダミーイメージ

タイトルタイトルタイトルタイトルタイトル

2016.05.26

ダミーイメージ

タイトルタイトルタイトルタイトルタイトル

2016.05.26

ダミーイメージ

タイトルタイトルタイトルタイトルタイトル

2016.05.26

ダミーイメージ

タイトルタイトルタイトルタイトルタイトル

2016.05.26

ダミーイメージ

タイトルタイトルタイトルタイトルタイトル

View Source

<div class="pickups">
	<div class="pickups_list">
		<div class="pickups_item" data-mh="pickups_item">
			<a href="">
				<p class="pickups_date">2016.05.26</p>
				<figure class="pickups_img"><img src="http://placehold.it/242x145/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></figure>
				<p class="pickups_title">タイトルタイトルタイトルタイトルタイトル</p>
			</a>
		</div>
		<div class="pickups_item" data-mh="pickups_item">
			<a href="">
				<p class="pickups_date">2016.05.26</p>
				<figure class="pickups_img"><img src="http://placehold.it/242x145/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></figure>
				<p class="pickups_title">タイトルタイトルタイトルタイトルタイトル</p>
			</a>
		</div>
		<div class="pickups_item" data-mh="pickups_item">
			<a href="">
				<p class="pickups_date">2016.05.26</p>
				<figure class="pickups_img"><img src="http://placehold.it/242x145/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></figure>
				<p class="pickups_title">タイトルタイトルタイトルタイトルタイトル</p>
			</a>
		</div>
		<div class="pickups_item" data-mh="pickups_item">
			<a href="">
				<p class="pickups_date">2016.05.26</p>
				<figure class="pickups_img"><img src="http://placehold.it/242x145/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></figure>
				<p class="pickups_title">タイトルタイトルタイトルタイトルタイトル</p>
			</a>
		</div>
		<div class="pickups_item" data-mh="pickups_item">
			<a href="">
				<p class="pickups_date">2016.05.26</p>
				<figure class="pickups_img"><img src="http://placehold.it/242x145/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></figure>
				<p class="pickups_title">タイトルタイトルタイトルタイトルタイトル</p>
			</a>
		</div>
		<div class="pickups_item" data-mh="pickups_item">
			<a href="">
				<p class="pickups_date">2016.05.26</p>
				<figure class="pickups_img"><img src="http://placehold.it/242x145/888888/ffffff?text=!!!Dummy+Image!!!" alt="ダミーイメージ"></figure>
				<p class="pickups_title">タイトルタイトルタイトルタイトルタイトル</p>
			</a>
		</div>
	</div>
</div><!-- /.pickups -->

Copy Source