実践演習課題H03C03

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>H03C03</title>
<link rel="stylesheet" href="css/H03C03.css">
</head>
<body>
<div id="container">
<div id="main">
<h1>ガラスの靴の持ち主を捜しています!</h1>
</div>
<div id="lead">
<img src="img/03/b_1.gif" alt="川崎アゼリア
・オープン懸賞 パソコンで応募する方は">
<p>下記の「応募規約」、「個人情報のお取り扱い
について」をお読みいただき、ご同意いただける
方は「はい」をクリックし、応募フォームにお進み
ください。
</p>
</div>
<div id="content">
<h2>【応募規約】</h2>
<ul>
<li>○パソコンでのご応募は、お一人様一回限り
(複数ご応募いただいた場合は最終応募のみ有効)
とさせていただきます。
</li>
<li class="rice">※但し、郵便ハガキでのご応募は、
ハガキ1通を1口として、お一人様何口でもご応募
できます。
</li>
<li>○商店街で同時期に行われる他のキャンペーン
と重複して当選することはできません。
</li>
<li>○当選後の権利譲渡、換金はできません。
</li>
<li>○応募の際の必要事項に、不備や虚偽があった
場合は、無効になります。
</li>
<li>○ご応募は日本国内在住の方に限らせていただきます。
</li>
<li>○応募受付の確認、抽選結果に関するお問合せ
には、お受けいたしかねますのでご了承ください。
</li>
<li>○景品の"ガラスの靴"は、11月17日から12月25日
まで商店街内(サン広場)に展示した靴となりますので、
予めご了承ください。また、サイズは23.5cmとなります。
</li>
</ul>
<h2>【個人情報のお取扱いについて】</h2>
<p>
ご応募にあたり、ご記入いただいた個人情報
(郵便番号、住所、氏名、電話番号、年齢)は、
当社にて適切に管理し、ご当選の場合の景品
受け渡し、及び個人を識別できない統計情報
として、応募状況の傾向把握に利用します。
当社は、上記の目的範囲内で、個人情報の
取り扱いを外部の第三者に委託することが
あります。この場合、個人情報の漏洩等が
無いよう、業務委託契約に基づく適切な管理を
行います。
</p>
<h2>【個人情報のお取扱いについて】</h2>
<p><a href="#">(川崎アゼリアプライバシーポリシー)</a></p>
</div>
<div id="apply">
<img src="img/03/b_2.gif" alt="上記の内容に同意して応募しますか?">
<div id="wrapper">
    <div id="yes">
    <a href="#"><img src="img/03/b_yes.gif" alt="はい"
 width="72" height="31"></a>
    </div>
    <div id="no">
    <a href="#"><img src="img/03/b_no.gif" alt="いいえ"
 width="72" height="31"></a>
    </div>
 </div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
@charset "UTF-8";
/* CSS Document */

body, div, h1, h2, p, ul, li {
  margin: 0;
  padding: 0;
}
body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
    color: #721911;
}
h1 {
  visibility: hidden;
}
p{
  font-size: 14px;
}
h2 {
  text-indent: -20px;
  font-size: 16px;
  padding-top: 20px;
  padding-bottom: 5px;
}
ul {
  list-style: none;
  font-size: 12px;
}
li {
  text-indent: -1em;
}
li.rice{
  margin-left:  2em;
}
#container{
  width: 634px;
  margin: 0 auto;
}
#main{
  height: 445px;
  background-image: url(../img/03/main.gif);
  background-repeat: no-repeat;
  background-position: center top;
}

#lead, #content ,#apply{
  background-image: url(../img/03/bg.gif);
}
#lead{
  padding: 30px 92px 0px 92px;
}
#content{
  padding: 0 40px 20px 50px;
}
#apply{
  text-align: center;
  padding-bottom: 20px;
}
#wrapper{
  margin: 0 auto;
  padding: 10px;
  width: 164px;
  height: 31px;
  overflow: hidden;
}
#yes {
  width: 72px;
  height: 31px;
  float: left
}
#no {
  width: 72px;
  height: 31px;
  float: right
}
#footer{
  height: 96px;
  background-image: url(../img/03/address.gif);
  background-repeat: no-repeat;
  background-position: center top;
}