<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css">
<title>製品紹介｜ウェブサンプル株式会社</title>
</head>
<body>
<div id="pagebody">
<!-- ヘッダ -->
<div id="header">
<h1><a href="index.html"><img src="images/logo.png" alt="ウェブサンプル株式会社"></a></h1>
</div>
<!-- メインメニュー -->
<ul id="menu">
<li><a href="index.html">ホーム</a></li>
<li><a href="product.html">製品紹介</a></li>
<li><a href="profile.html">会社概要</a></li>
<li><a href="contact.html">お問合せ</a></li>
</ul>
<!-- ヘッダ画像 -->
<div id="img_subpage">
<img src="./images/img_product.png" alt="製品紹介">
</div>
<!-- サブメニュー（左カラム） -->
<div id="submenu">
<h2>製品紹介</h2>
<ul>
<li><a href="#info0001">個人向け製品</a></li>
<li><a href="#info0002">法人向け製品</a></li>
<li><a href="#info0003">紹介ビデオ</a></li>
</ul>
</div>
<!-- インフォメーション（右カラム） -->
<div id="info">
<h3 id="info0001">個人向け製品</h3>
<p>
<img src="images/product0001.png" alt="個人向け製品のイメージ画像" class="infoimg_subpage">
あいうえおかきくけこさしすせそ、（中略）
</p>
<hr>
<h3 id="info0002">法人向け製品</h3>
<p>
<img src="images/product0002.png" alt="法人向け製品のイメージ画像" class="infoimg_subpage">
あいうえおかきくけこさしすせそ、（中略）
</p>
<hr>
<h3 id="info0003">紹介ビデオ</h3>
<hr>
</div>
<!-- フッタ -->
<div id="footer"><small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small></div>
</div>
</body>
</html>