<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Computer Technology Groups</h1>
<div id="nav">
<ul>
<li id="eco"><a href="#"><span>エコロジー</span></a></li>
<li id="com"><a href="#"><span>コンピューター</span></a></li>
<li id="mob"><a href="#"><span>モバイル</span></a></li>
<li id="shop"><a href="#"><span>ショッピング</span></a></li>
<li id="contact"><a href="#"><span>お問い合わせ</span></a></li>
</ul>
</div> <!--/#nav-->
</div> <!--/#header-->
<div id="wrapper">
<div id="upper"></div>
<h2 class="content">エコロジーへの取り組み</h2>
<p id="explain">Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。
地域の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。
商品のラインナップ</p>
<h2 class="content">商品のラインナップ</h2>
<p id="explain">紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>
</div> <!--/#wrapper-->
<div id="footer">
<p id="copy"><small>Copyright (C)</small></p>
<p id="name"><small>Computer Technology Groups.</small></p>
<p id="all"><small>All rights reserved.</small></p>
</div> <!--/#footer-->
</div> <!--/#container-->
</body>
</html>
@charset "UTF-8";
/* CSS Document */
/*reset*/
body, div, ul, li, a, span, img, h1, h2, p {
margin: 0;
padding: 0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
#container {
width: 600px;
margin: 50px auto 80px ;
}
#header {
width: 600px;
margin-bottom: 20px;
background: url(../img/logo.gif) no-repeat left top;
}
h1 {
color: mediumseagreen;
margin-bottom: 60px;
font-size: 16px;
padding-left: 60px;
}
#nav {
border-top: 1px solid green;
border-bottom: 1px solid green;
width: 600px;
height: 50px;
}
#nav li{
list-style: none;
}
#nav li a {
float: left;
width: 120px;
margin-top: 10px;
display: block;
text-align: center;
color: forestgreen;
text-decoration: none;
}
#wrapper #upper {
width: 600px;
height: 100px;
margin: 0 auto;
margin-bottom: 30px;
background: #3CB371 url(../img/ecology.gif) no-repeat center 40px;
}
h2.content {
color: #3CB371;
margin-bottom: 20px;
background: url(../img/mark.gif) no-repeat left 10px;
padding-left: 25px;
}
p#explain {
margin-bottom: 40px;
font-size: 19px;
color: #696969;
}
#footer {
width: 600px;
border-top: 2px solid #3CB371;
position: relative;
}
#footer p#copy {
color: #696969;
position: absolute ;
left: 110px;
top: 15px;
}
#footer p#name {
color: #3CB371;
position: absolute ;
left: 200px;
top: 15px;
}
#footer p#all {
color: #696969;
position: absolute ;
left: 400px;
top: 15px;
}
/*action*/
#nav a:hover {
text-decoration: underline;
}
