要素間のマージンはclassのmt40やmt60が調節しています。
数字がpxに対応しており0～50まで5px刻み、
50～100まで10px刻みで調整可能です。
		

見出しが入ります見出しが入ります見出しが入ります見出しが入ります(h1)見出しが入ります見出しが入ります見出しが入ります見出しが入ります(h1)

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

<h1 class="mid_hl1">見出しが入ります</h1>
<p class="mid_txt">テテキストが入ります。</p>
		

見出しが入ります見出しが入ります見出しが入ります見出しが入ります(h2)

<h2 class="mid_hl2">見出しが入ります</h2>
		

見出しが入ります見出しが入ります見出しが入ります見出しが入ります(h3)

<h3 class="mid_hl3">見出しが入ります</h3>
		

見出しが入ります見出しが入ります見出しが入ります見出しが入ります(h4)

<h4 class="mid_hl4">見出しが入ります</h4>
		

見出しが入ります見出しが入ります見出しが入ります見出しが入ります(h5)

<h5 class="mid_hl5">見出しが入ります</h5>
		

見出しが入ります見出しが入ります見出しが入ります見出しが入ります(h6)

<h6 class="mid_hl6">見出しが入ります</h6>
		

見出しが入ります見出しが入ります見出しが入ります見出しが入ります見出しが入ります

<p class="mid_hl_bk">見出しが入ります</p>
		

見出しが入ります見出しが入ります見出しが入ります見出しが入ります見出しが入ります

<p class="mid_hl_bl">見出しが入ります</p>
		

注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。

<p class="mid_notice c_red">注釈テキストが入ります。</p>
		

注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。注釈テキストが入ります。

<p class="mid_notice c_gray">注釈テキストが入ります。</p>
		

• リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。
• リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。
• リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。

<ul class="mid_list">
	<li>リストテキストが入ります。</li>
</ul>
		

• リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。
• リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。
• リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。リストテキストが入ります。

<ul class="mid_list_link">
	<li>リストテキストが入ります。</li>
</ul>
		

<div class="mid_table_scroll">
	<table class="mid_table">
		<tbody>
			<tr>
				<th colspan="2"><p class="mid_txt">テキストが入ります。</p></th>
				<td><p class="mid_txt">テキストが入ります。</p></td>
			</tr>
			<tr>
				<th class="w150"><p class="mid_txt">テキストが入ります。</p></th>
				<th class="w150"><p class="mid_txt">テキストが入ります。</p></th>
				<td><p class="mid_txt">テキストが入ります。</p></td>
			</tr>
		</tbody>
	</table>
</div>
		

<div class="mid_waku mid_waku_white">
	<p class="mid_waku__tit">見出しが入ります。</p>
	<p class="mid_txt mt10">テキストが入ります。</p>
</div>
		

<div class="mid_waku mid_waku_gray">
	<p class="mid_waku__tit">見出しが入ります。</p>
	<p class="mid_txt mt10">テキストが入ります。</p>
</div>
		

<div class="mid_waku mid_waku_blue">
	<p class="mid_waku__tit">見出しが入ります。</p>
	<p class="mid_txt mt10">テキストが入ります。</p>
</div>
		

<div class="mid_waku mid_waku_red">
	<p class="mid_waku__tit">見出しが入ります。</p>
	<p class="mid_txt mt10">テキストが入ります。</p>
</div>
		

<div class="mid_faq_wrap">
	<div class="mid_faq_q">見出しが入ります。</div>
	<div class="mid_faq_a">
		<p class="mid_txt">テキストが入ります。</p>
	</div>
</div>
		

見出しが入ります見出しが入ります見出しが入ります見出しが入ります

<a href="#" class="mid_faq_wrap">
	<div class="mid_faq_q">見出しが入ります。</div>
</a>
		

画像アイコン

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

<ul class="mid_icon_list">
	<li><img src="../images/icon_ios.png" alt="iOS"></li>
	<li><img src="../images/icon_android.png" alt="android"></li>
	<li><img src="../images/icon_macos.png" alt="macOS"></li>
	<li><img src="../images/icon_windows.png" alt="windows"></li>
	<li><img src="../images/icon_linux.png" alt="linux"></li>
	<li><img src="../images/icon_newpro.png" alt="新製品"></li>
	<li><img src="../images/icon_comp.png" alt="出荷完了"></li>
	<li><img src="../images/icon_only.png" alt="在庫限り"></li>
	<li><img src="../images/icon_direct.png" alt="直販専売"></li>
	<li><img src="../images/icon_pdf.png" alt="PDF"></li>
	<li><img src="../images/icon_utility.png" alt="ユーティリティ"></li>
	<li><img src="../images/icon_firmware.png" alt="ファームウェア"></li>
	<li><img src="../images/icon_driver.png" alt="ドライバ"></li>
	<li><img src="../images/icon_opensource.png" alt="オープンソース"></li>
</ul>
		

テキスト自由記入アイコン

• テキストラベル
• テキストラベルテキストラベル
• テキストラベル
• テキストラベルテキストラベル
• テキストラベル
• テキストラベルテキストラベル
• テキストラベル
• テキストラベルテキストラベル

<ul class="mid_icon_list">
	<li class="icon_list_txt icon_black_txt">テキストラベル</li>
	<li class="icon_list_txt">テキストラベル</li>
</ul>
		

ダウンロードリンクアイコン

外部サイトリンクアイコン

外部サイトリンクアイコン右

通常リンクアイコン

<p class="mid_linktxt mid_linktxt_download"><a href="#">ダウンロードリンクアイコン</a></p>
<p class="mid_linktxt mid_linktxt_outlink"><a href="#" target="_blank">外部サイトリンクアイコン</a></p>
<p class="mid_linktxt mid_linktxt_outlink_r"><a href="#" target="_blank">外部サイトリンクアイコン右</a></p>
<p class="mid_linktxt"><a href="#">通常リンクアイコン</a></p>
		

<div class="mid_btnlink_wrap">
	<a class="mid_linkbtn mid_linkbtn_unker" href="#"><span>ページ内アンカー（下矢印）</span></a>
	<a class="mid_linkbtn" href="#"><span>リンクボタン（右矢印）</span></a>
	<a class="mid_linkbtn mid_linkbtn_outlink" href="#" target="_blank"><span>外部リンクボタン</span></a>
	<a class="mid_linkbtn mid_linkbtn_download" href="#"><span>ダウンロードリンクボタン</span></a>
</div>
		

<div class="mid_btnlink_wrap">
	<a class="mid_linkbtn mid_linkbtn_blue" href="#"><span>リンクボタン（青）</span></a>
	<a class="mid_linkbtn mid_linkbtn_yellow" href="#"><span>リンクボタン（橙）</span></a>
	<a class="mid_linkbtn mid_linkbtn_red" href="#"><span>リンクボタン（赤）</span></a>
	<a class="mid_linkbtn mid_linkbtn_green" href="#"><span>リンクボタン（緑）</span></a>
</div>
		

<div class="mid_btnlink_wrap">
	<a class="mid_linkbtn mid_linkbtn_small" href="#"><span>詳細はこちら</span></a>
</div>