H10・C10回答
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="css/h10.css">
</head>
<body>
<div id="container">
<h1>Typograpy.<span id="number">71</span></h1>
<div id="nav">
<ul>
<li class="current"><a href="#">HOME</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">PHOTOGRAPH</a></li>
<li><a href="#">GUESTBOOK</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div><!--#nav end-->
<div id="content">
<div class="section" id="left_side">
<h2>文字の役割</h2>
<p>文字は、「言葉」を視覚的に伝える手段としての重要な役割を担っています。Webサイトにおいても、情報を発信する側の言葉は、文字という記号に置き換わりユーザーに届けられます。ですが、単なる論理的な情報としての文字をそこに置いただけでは、発信者の伝えたいメッセージの背景や意思を、十分に受け手に届けることは難しいでしょう。言葉がイントネーションで変化をつけるように、文字もその表現方法ひとつで伝わり方が大きく変化します。</p></div><!--.left_side end-->
<div class="section" id="right_sideup">
<h2>タイポグラフィとは</h2>
<p>タイポグラフィとは、一般に、活字を情報の目的や意図に合わせて適切に配置、構成することで、印刷物の文字の可読性や美しさを引き出すデザイン技法のことを指します。</p></div><!--.right_sideup end-->
<div class="section" id="right_sidedown">
<h2>Webのタイポグラフィ</h2>
<p>印刷業界が、技術のシフトに合わせてそれまでのタイポグラフィの根底は残したままその技法を成長させてきたように、Webというメディアにおいても、タイポグラフィの基本的な考え方は十分に適用することができます。</p></div><!--.right_sidedown end-->
</div><!--#content end-->
<div id="footer">
<p><small>Copyright© 2013 Typography.71 All Rights Reserved.</small></p>
</div><!--footer end-->
</div><!--container end-->
</body>
</html>
@charset "utf-8";
body,div,h1,h2,h3,p,ul,li,a,img {
margin: 0;
padding: 0;
}
body {
color:#333;
font-size:14px;
font-family:
Helvetica,
Arial,
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.7;
background: #D2D0B9 url(../img/body_bg.jpg) no-repeat;
}
ul {
list-style:none;
}
a {
text-decoration: none;
}
#container {
width: 700px;
padding:20px 0 30px 50px;
}
#nav {
font-size:60px;
letter-spacing:-5px;
line-height:0.76;
word-spacing:-12px;
text-transform: uppercase;
margin-bottom: 50px;
}
#nav li.current a{
color: #663;
}
#nav li a {
color: #ffffff;
}
#nav li a:hover {
color: #9CF;
}
#content {
overflow: hidden;
}
#content h2 {
margin-bottom: 5px;
font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","MS Pm明朝", serif;
font-size: 20px;
}
#content p {
line-height:1.8;
margin-bottom: 30px;
}
h1 {
color: #663;
font-size: 20px;
letter-spacing:-1px;
margin-bottom: 50px;
}
h1 span#number {
color:#333;
font-size: 40px;
font-family:Georgia,"Times New Roman",times,serif;
letter-spacing:-3px;
}
#left_side {
width:330px;
float: left;
}
#right_sideup {
float:right;
width:330px;
}
#right_sidedown {
float: right;
width:330px;
}
#footer {
clear: both;
}
■
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Computer Technology Groups</title>
<link rel="stylesheet" href="css/h09.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Computer Technology Groups</h1>
</div><!--header-->
<div id="nav">
<ul>
<li><a href="#">エコロジー</a></li>
<li><a href="#">コンピューター</a></li>
<li><a href="#">モバイル</a></li>
<li><a href="#">ショッピング</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div><!--nav end-->
<div id="content">
<h2><img src="img/ecology/img/ecology.gif" width="201" height="24" alt="エコロジー"></h2>
<div class="section">
<h3>エコロジーへの取り組み</h3>
<p>Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。<br>
地域の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。</p>
</div><!--section end-->
<div class="section">
<h3>商品のラインナップ</h3>
<p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>
</div><!--section end-->
</div><!--content end-->
<div id="footer">
<p><small>Copyright(C)<span>Computer Technology Groups.</span>All rights reserved.</small></p>
</div><!--footer end-->
</div><!--container end-->
</body>
</html>
@charset "utf-8";
body,div,h1,h2,h3,p,ul,li,a,img {
margin: 0;
padding: 0;
}
body {
color:#333;
font-size:16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.8;
}
ul {
list-style:none;
}
a {text-decoration: none;
}
#container {
width:530px;
margin: 10px auto;
}
#header {
background: url(../img/ecology/img/logo.gif) no-repeat left top;
height: 60px;
margin-bottom: 10px;
}
#nav {
width: 530px;
border-top: #063 1px solid;
border-bottom: #063 1px solid;
margin-bottom:20px;
}
#nav ul {
width:480px;
overflow:hidden;
margin: 0 auto;
}
#nav li {
float:left;
}
#nav li a {
font-size: 14px;
display: block;
color: #063;
line-height:3;
margin: 0 8px;
}
#nav li a:hover{
text-decoration: underline;
}
#content {
clear: both;
}
#footer {
border-top: 2px solid #063;
padding: 10px 0;
text-align: center;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
color: #063;
margin-left: 65px;
margin-bottom: 40px;
font-size: 20px;
}
h2 {
background-color: #063;
text-align: center;
padding: 22px 0 8px 0;
}
.section {
margin: 30px 0 25px 0;
}
h3 {
background: url(../img/ecology/img/mark.gif) no-repeat left 8px;
padding-left: 25px;
margin-bottom: 20px;
color: #063;
}
p span {
color: #063;
}
H08・C08回答
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>今月の本棚</title>
<link rel="stylesheet" href="css/h08.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>今月の本棚<br>
<span>推理小説</span></h1>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">バックナンバー</a></li>
</ul>
</div><!--header end-->
<div id="wrapper">
<div class="syoukai">
<h2>『鋼鉄都市』</h2>
<ul>
<li>（1953・米）</li>
<li>アイザック・アシモフ</li>
<li>ハヤカワ文庫SF</li>
</ul>
</div><!--syoukai end-->
<div class="section">
<p>今回はちょっと目先を変えた作品をご紹介。アシモフの推理小説といえば『黒後家蜘蛛の会』が有名だが、こちらも立派な推理物だ。水色背表紙だからといって、避けて通るのは勿体無い！</p>
<p class="space">■ ■ ■</p>
<p>宇宙移民者達がそれぞれに宇宙国家を建設し、"宇宙人"と呼ばれるようになって久しい未来。人口増加による食糧危機に喘ぐ地球では、宇宙国家群の支配の下、鋼鉄のドーム"シティ"の中で厳しい管理社会が成立している。洗練された宇宙人へのコンプレックスや、作業ロボットの開発による人員整理の不安が、地球人の閉塞的な生活に更なる圧迫感を与えている。</p></div>
<div class="section"><p>そんな中、厳重に警備された宇宙人居住区で宇宙人VIPが惨殺された。政治的問題に発展しかねない状況に際し、NYシティの私服刑事ベイリは、宇宙人側のロボット刑事R.ダニール・オリヴォーと共に、事件の捜査にあたることになる…。<br>
単に「未来社会を舞台にした推理物」というだけなら他にも多くの小説がある。この作品が異色なのは、未来社会・SFであればこそ起こり得る事象を使って、魅力的な謎と論理的推理を提示している点だ。閉鎖的な社会が形成されるに至る経緯、その社会の特性、住人の感情などが、作中で上手く利用されている。またアシモフ自身が作った「ロボット工学三原則」も、推理の鍵のひとつ。</p></div>
<div class="section"><p>「不可能犯罪」と「未知の世界」という推理・SFの王道たる物語の一方では、「異文化との融和」も大きなテーマとなっている。文化も種も立場も異なるR.ダニールを、反発しつつも徐々に受け入れていくベイリの葛藤と変化があればこそ、小説のジャンルを越えた名作となっているのだろう。<br>
本作の続編として『はだかの太陽』『夜明けのロボット』がある。アシモフのSF作品は、ベイリ＆R.ダニールのシリーズを含む「ロボットもの」と、「ファウンデーションもの」の二系統に大別できるが、晩年のアシモフは2つの未来史の融合に力を注いだ。未完に終わったことが惜しまれる</p></div>
</div><!--wrapper end-->
<div id="footer">
<p><small>©2013 BOOKWORMS</small></p>
</div><!--footer end-->
</div><!--container end-->
</body>
</html>
@charset "utf-8";
body,div,h1,h2,h3,p,ul,li,a,img {
margin: 0;
padding: 0;
}
body {
color:#FFFFFF;
font-size:16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.8;
}
ul {
list-style:none;
}
a {
text-decoration: none;
}
#container {
width:960px;
margin: 0 auto;
position: relative;
}
#header {
background: url(../img/p_mystery.jpg) no-repeat left top #906;
height: 102px;
overflow: hidden;
}
#wrapper {
background: url(../img/bg_line.gif) repeat-x left top #708090;
padding: 20px 30px 20px 10px;
overflow: hidden;
}
#footer {
clear: both;
height: 60px;
background:url(../img/bg_line.gif) repeat-x left top #906;
}
h1 {
margin-left: 210px;
font-family :"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif ;
font-size: 18px;
line-height: 1.5;
padding-top: 10px;
}
h1 span {
font-size: 25px;
}
#header ul {
float: left;
position: absolute;
left: 700px;
top: 55px;
}
#header ul li {
display: inline;
margin-left: 10px;
}
#header ul li a {
color: #FFFFFF;
}
.syoukai {
width:180px;
float: left;
padding: 25px 0 0 20px;
}
h2 {
margin-bottom:15px;
}
.section {
width: 210px;
float: left;
margin-left: 30px;
}
p.space {
margin: 28px;
text-align:center;
}
#footer p {
color:#999;
text-align: center;
padding: 15px 0
}
H07・C07回答
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>薬玉文様</title>
<link rel="stylesheet" href="css/h07.css">
</head>
<body>
<div id="container">
<h1>薬玉文様<span>（くすだまもんよう）</span></h1>
<p>
薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願する風習が、平安時代に日本へ伝わり貴族の間で行われるようになった。
江戸初期以後は、薬玉が民間の女児の玩具として流行。小袖や帯に用いられるほか、吉祥柄のため七五三用などの祝着の文様としても好まれる。</p>
<p class="footer"><small>©2013 Historical Japan</small></p>
</div><!--container end-->
</body>
</html>
@charset "utf-8";
body,div,h1,h2,h3,p,ul,li,a,img {
margin: 0;
padding: 0;
}
body {
font-size:15px;
font-family:"ヒラギノ明朝 ProN",
"HG明朝E",
"ＭＳ Ｐ明朝",
"ＭＳ 明朝",
serif;
line-height:1.7;
font-weight: bold;
background: url(../img/%E3%82%AF%E3%82%B9%E7%8E%89%E6%96%87%E6%A7%98/bg.gif) repeat;
}
#container {
width:612px;
height:459px;
position: absolute;
top: 50%;
left: 50%;
background: url(../img/%E3%82%AF%E3%82%B9%E7%8E%89%E6%96%87%E6%A7%98/image.jpg) no-repeat #000 right top;
border: 15px solid #000;
margin: -235px -311px;
}
h1 {
width:308px;
color:#FC6;
font-size: 20px;
color: #FC6;
padding: 20px 0 35px 10px;
}
h1 span {
font-size: 15px;
}
p {
width: 273px;
color:#FFF;
padding:0 25px 0 10px;
line-height:1.8;
}
p.footer {
color:#999;
margin-top: 80px;
text-align:right;
}
H06・C06回答
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>建築散歩</title>
<link rel="stylesheet" href="css/h06.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>フンデルトヴァッサー・ハウス</h1>
<p>ウィーンの市営住宅はこんなに元気だ！</p>
</div><!--header end-->
<div id="wrapper">
<div id="content">
<p class="a"><img src="img/img/ph01.jpg" width="180" alt="フンデルトヴァッサー・ハウス">旅行中に、「フンデルトヴァッサー・ハウス」へ行ってきました。</p>
<p>ウィーンの旧市街を取り囲むリングシュトラッセ（環状道路）のやや外側、<br>18〜19世紀に建てられた古風で静かな街並の中を歩いて行くと、この建物が現れます。まず目に飛び込んでくるのは、赤・黄・青・白の鮮やかな色で塗り分けられた外壁。その塗り分け方は、子供の落書きのようにぐにゃぐにゃと曲がっています。窓の大きさは不揃いで、しかも屋上には金色のネギ坊主のようなタワーが生えています。<br>
どこから見てもびっくりするような建物ですが、不思議と周囲の街並に溶け込んでいるのは、壁を覆うツタや、建物から直接生え出したように見える樹々のせいかもしれません。呆気に取られ、なんだか楽しくなってくるこの建物、実はウィーンの市営住宅なのです。</p>
<p>この建物を作ったのは、ウィーンの画家・建築家フンデルト・ヴァッサー（1923-2000）。親日家で、作品に「百水（hudert wasser）」「豊和」と号することもあります。西欧近代の人工的な環境の在り方に疑問を呈し、「自然は全て曲線であり、直線に神は宿らない」と唱えて、建築物や絵画における直線を否定しました。<br>
1986年に完成したフンデルトヴァッサー・ハウスは、その理念を実現させたもので、彼にとっての最初の建築作品です。</p>
<p>フンデルトヴァッサー・ハウスは市営住宅なので内部の見学はできませんが、向かいのビル内にショップがあります。また、近くには彼の作品などを展示したクンスト・ハウス・ウィーンがあります。<br>
こちらもヴァッサーによって改装された建物です。日本国内では、大阪市扇町公園に隣接するキッズプラザ大阪や、大阪市環境事業局舞洲工場（ゴミ処理場）で彼の建築物を見ることができます。</p>
</div><!--content end-->
<div id="sidebar">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">バックナンバー</a></li>
</ul>
</div><!--sidebar end-->
</div><!--wrapper end-->
<div id="footer">
<p><small>©2013 The Architecture</small></p>
</div><!--footer end-->
</div><!--container end-->
</body>
</html>
@charset "utf-8";
body,div,h1,h2,h3,p,ul,li,a,img {
margin: 0;
padding: 0;
}
body {
font-size:15px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.6;
color:#333;
}
ul {
list-style:none;
}
#container {
width:625px;
background: url(../img/img/bg-image.jpg)top left no-repeat;
}
#header {
padding-top: 80px;
margin-left: 200px;
margin-bottom:20px;
}
#wrapper {
width: 625px;
overflow: hidden;
}
#content {
width: 465px;
float: right;
}
#sidebar {
float:left;
width: 140px;
padding: 160px 0 0 20px;
}
#footer {
clear: both;
height:70px;
border-top: #CCC solid 1px;
color:#CCC;
text-align:center;
margin-left: 160px;
background: url(../img/img/bg-point.jpg) bottom right no-repeat;
}
#content img {
float: right;
margin-left: 5px;
}
#header h1 {
color:#6F3E37;;
font-size:25px;
font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif
}
#header p {
color:#AD8D33;
font-size: 18px;
}
p {
margin-bottom:20px;
}
H04・C04回答
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="css/h04.css">
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="img/卵カフェ/logo.gif" width="82" alt="卵料理カフェ Cockeyolly"></h1>
</div><!--header end-->
<div id="content">
<h2><img src="img/卵カフェ/title.gif" width="231" alt="今月のおすすめ"></h2>
<h3>きのこのオムライス</h3>
<p class="item"><img src="img/卵カフェ/photo01.jpg" width="185" alt="きのこのオムライス">ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。：800円</p>
<h3>シーフードスパゲッティシーフードスパゲッティ<br>バルサミコ風味</h3>
<p class="item"><img src="img/卵カフェ/photo02.jpg" width="184" alt="シーフードスパゲッティ">エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。：900円</p>
</div><!--content end-->
<div id="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">今月のおすすめ</a></li>
<li><a href="#">オリジナル雑貨</a></li>
<li><a href="#">マップ</a></li>
<li><a href="#">メール</a></li>
</ul>
</div><!--sidebar-->
<div id="footer">
<p><small>(c)2013 卵料理カフェ Cockeyolly</small></p>
</div><!--footer end-->
</div><!--container end-->
</body>
</html>
@charset "utf-8";
body,div,h1,h2,h3,p,ul,li,a,img {
margin: 0;
padding: 0;
}
body {
color:#333;
font-size:14px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
background: url(../img/%E5%8D%B5%E3%82%AB%E3%83%95%E3%82%A7/bg_img.gif) repeat-y 0 0;
}
ul {
list-style:none;
}
a {
text-decoration: none;
}
img {
vertical-align: bottom;
}
#container {
width: 610px;
padding-top: 10px;
overflow: hidden;
}
#header {
width: 150px;
text-align:center;
margin-bottom: 40px;
}
#content {
width:430px;
float:right;
margin: -105px 0 0 20px;
}
#sidebar {
width:150px;
padding-left: 10px;
}
#footer {
clear: both;
}
h1 {
padding-top: 10px;
}
h2 {
text-align: center;
margin-bottom: 60px;
}
h3 {
border-left: 8px solid #FF9933;
padding-left: 10px;
margin-bottom:15px;
}
p.item{
margin-bottom:80px;
}
p.item img {
float:right;
margin-left: 10px;
}
#sidebar ul{
font-size:16px;
font-weight:bold;
color: #FFFFFF;
}
#sidebar ul li {
padding: 5px;
}
#sidebar ul li a{
color: #FFFFFF;
}
#sidebar ul li a:hover{
color: #FF9;
}
#footer p{
margin-left:180px;
padding: 10px;
text-align:center;
color:#999;
border-top: #CCC solid 2px;
}
H03・C03回答
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ガラスの靴の持ち主を捜しています！</title>
<link href="css/h03.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="img/ガラスの靴/main.gif" width="600" height="445" alt="ガラスの靴"></h1>
</div><!--header end-->
<div id="lead">
<h2><img src="img/ガラスの靴/b_1.gif" width="450" alt="応募"></h2>
<p class="lead">下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、 ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。</p>
</div><!--lead end-->
<div id="content">
<h3>【応募規約】</h3>
<ul>
<li>○パソコンでのご応募は、お一人様一回限り（複数ご応募いただいた場合は最終応募のみ有効）とさせていただきます。</li>
<li class="kome"> ※但し、郵便ハガキでのご応募は、ハガキ１通を１口として、お一人様何口でもご応募できます。</li>
<li>○商店街で同時期に行われる他のキャンペーンと重複して当選することはできません。</li>
<li>○当選後の権利譲渡、換金はできません。 </li>
<li>○応募の際の必要事項に、不備や虚偽があった場合は、無効になります。</li>
<li>○ご応募は日本国内在住の方に限らせていただきます。 </li>
<li>○応募受付の確認、抽選結果に関するお問合せには、お受けいたしかねますのでご了承ください。 </li>
<li>○景品の"ガラスの靴"は、11月17日から12月25日まで商店街内（サン広場）に展示した靴となりますので、予めご了承ください。また、サイズは23.5ｃｍとなります。 </li>
</ul>
<h3>【個人情報のお取扱いについて】</h3>
<p>ご応募にあたり、ご記入いただいた個人情報（郵便番号、住所、氏名、電話番号、年齢）は、当社にて適切に管理し、ご当選の場合の景品受け渡し、及び個人を識別できない統計情報として、応募状況の傾向把握に利用します。当社は、上記の目的範囲内で、個人情報の取り扱いを外部の第三者に委託することがあります。この場合、個人情報の漏洩等が無いよう、業務委託契約に基づく適切な管理を行います。</p>
<h3>【個人情報のお取扱いについて】</h3>
<p class="privacy"><a href="#">（川崎アゼリアプライバシーポリシー）</a></p>
<div id="doui">
<h2><img src="img/ガラスの靴/b_2.gif" width="450" alt="同意"></h2>
<p><img class="yes" src="img/ガラスの靴/b_yes.gif" width="72" alt="yes"><img class="no" src="img/ガラスの靴/b_no.gif" width="72" alt="no"></p>
</div><!--doui end-->
</div><!--content end-->
<div id="footer">
<p><img src="img/ガラスの靴/address.gif" width="600" alt="アドレス"></p>
</div><!--footer end-->
</div><!--container end-->
</body>
</html>
@charset "utf-8";
body,div,h1,h2,h3,p,ul,li,a,img {
margin: 0;
padding: 0;
}
body {
font-size:14px;
color: #900;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
}
#container {
width:634px;
margin:0 auto;
background: url(../img/%E3%82%AC%E3%83%A9%E3%82%B9%E3%81%AE%E9%9D%B4/bg.gif) repeat-y;
}
#header{
margin-bottom:20px;
}
h1{
text-align:center;
}
#lead {
padding:0 50px;
}
h2 {
text-align:center;
margin-bottom:10px;
}
#content {
width:574px;
padding:0 20px 20px 30px;
}
h3 {
font-size: 14px;
margin-bottom:5px;
}
ul {
list-style-type:none;
font-size:12px;
padding-left:25px;
margin-bottom: 10px;
}
li {
text-indent:-1em;
}
p {
padding: 0 20px;
margin-bottom:10px;
}
li.kome {
text-indent: 1em;
}
p.privacy {
font-size:13pd;
margin-bottom:20px;
}
#doui {
text-align: center;
margin-bottom:20px;
}
#doui p img.no {
margin-left: 20px;
}
#footer {
text-align:center;
}
