@charset "utf-8";

/* リセット
========== ========== ========== ========== */
html {
	font-size: 100%;
	overflow-y: scroll;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body {
	margin: 0;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	line-height: 1;
}
ul, ol, li {
	list-style: none;
}
img {
	border: 0;
}
b,strong {
	font-weight: normal;
}
a:visited {
	color: inherit;
}
a:focus {
	outline: 0;
}
a:hover,
a:active {
	outline: 0;
}

/* 装飾
========== ========== ========== ========== */
body {
	background-color: #cdd1d6;
}
a {
	color: inherit;
	text-decoration: none;
}
a:hover,
a:hover img {
	opacity: 0.75;
	filter: alpha(opacity=75);
}

/* wrapper
---------- ---------- ---------- */
div#wrapper {
	width: 568px;
	margin: 25px auto;
	padding: 132px 113px;
	background-color: #fff;
	-webkit-box-shadow: 0 4px 26px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 4px 26px rgba(0,0,0,0.5);
	-ms-box-shadow: 0 4px 26px rgba(0,0,0,0.5);
	box-shadow: 0 4px 26px rgba(0,0,0,0.5);
}

/* header
---------- ---------- ---------- */
div#header {
	margin-top: 6px;
}
/* "Web Designing"の画像部分
---------- ---------- */
div#header h1 span#logo01 {
	display: block;
}
div#header h1 span#logo01 img {
	width: 155px;
	height: 22px;
}
/* "ウェブフォント デザインアワード2011"
---------- ---------- */
div#header h1 span#title_01,
div#header h1 span#title_02 {
	line-height: 1.5;
}
div#header h1 span#title_02,
div#header h1 span#title_02 b.year {
	margin-left: 0.3em;
}
/* "字"
---------- ---------- */
div#bgText {
	float: right;
	border: 2px solid #EF454A;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
div#bgText h2 {
	text-align: center;
	font-size: 150%;
	line-height: 1.2em;
	width: 1.2em;
	height: 1.2em;
	margin-bottom: 0.2em;
}
/* container > イントロ部分
   "想い、イメージ、…fontplus.jp/"
---------- ---------- ---------- */
div#container div#intro {
	margin-top: 2em;
}
div#container div#intro p {
	margin-bottom: 0.6em;
}
/* container > コメント部分
   "本格的な日本語…ご確認ください"
---------- ---------- ---------- */
div#container div#summary {
	margin-top: 0.5em;
}
div#container div#summary p {
	line-height: 1.5;
}
/* "※1"
---------- ---------- */
div#container div#summary p.annotation span {
	margin-right: 0.5em;
}
/* container > 詳細部分
   "Web …開催期間：…ご確認ください"
---------- ---------- ---------- */
div#container div#detail {
	margin: 0.5em 0 0;
}
/* "Web Designing ウェブフォントデザインアワード 2011"
---------- ---------- */
div#container div#detail h2 {
	padding: 1em 8px;
	border: 1px solid #000; /* ┌－－┐ */
	border-bottom: none;
}
/* "開催期間…協賛"
---------- ---------- */
div#container div#detail ul#detail_01 li,
div#container div#detail ul#detail_02 li {
	border: 1px solid #000;
	border-top: none;
	border-bottom: none;
	padding: 0 0 0.4em 2em;
}
div#container div#detail ul#detail_02 li:last-child {
	border-bottom: 1px solid #000;
	padding-bottom: 1em;
}
div#container div#detail ul#detail_01 li dl dt,
div#container div#detail ul#detail_02 li dl dt {
	clear: left;
	float: left;
	margin-right: .5em;
	line-height: 1.4;
}
div#container div#detail ul#detail_01 li dl dd,
div#container div#detail ul#detail_02 li dl dd {
	margin: 0 2em 0 5.5em;
	line-height: 1.4;
}
div#container div#detail ul#detail_01 li dl dd {
	letter-spacing: .1em;
}
div#container .annotationIcon {
	margin-left: 0.5em;
}
div#container div#detail ul#detail_02 li dl dt {
}
div#container div#detail ul#detail_02 li dl dt:first-letter {
	margin-right: 2em;
	/* 	［備忘］
		letter-spacingだとFirefoxで意図しない表示。
		(後続ddとの間に3em程の隙間が発生する) */
}
/* "記載された社名・商品名等は…"
---------- ---------- */
div#container ul.annotation {
	margin: 0.8em -1em 0 0;
}
div#container div#detail ul.annotation li {
	line-height: 1.5em;
}
/* footer
---------- ---------- ---------- */
div#footer {
	margin-top: 0.5em;
}
/* "協力：FONT+"
---------- ---------- */
div#footer div#banner dl {
	height: 60px;
}
/* "ツイート・いいね！"
---------- ---------- */
div#footer div#snsArea {
	position: fixed;
	bottom: 0;
	left: 0;
	margin: 1em;
}
div#footer div#snsArea ul li {
	margin-top: 6px;
}

/* テキスト装飾
========== ========== ========== ========== */
div#wrapper {
	font-family: "UdMotoyaCedarStd-W4",sans-serif;
}
div#bgText h2 {
	font-family: "FKointaiStd-B",serif;
	color: #EF454A;
}
/* header
---------- ---------- ---------- */
div#header h1 span#title_01,
div#header h1 span#title_02 {
	font-family: "UdMotoyaAporoStd-W4","メイリオ",Meiryo,sans-serif;
	font-size: 180%;
}
/* container
---------- ---------- ---------- */
/* "想い…"
---------- ---------- */
div#container div#intro p {
	font-family: "TsukuMinPr5N-RB",serif;
	text-align: center;
}
/* "http://…"
---------- ---------- */
div#container div#intro p#fontplusURL a {
	font-family: "IwaGMinPro-Bd";
	text-decoration: underline;
	color: #0000ff;
}
/* "本格的な日本語Web…"
---------- ---------- */
div#container div#summary p {
	font-family: "RodinPro-DB","メイリオ",Meiryo,sans-serif;
	font-size: 0.8em;
}
div#container div#summary span.annotationIcon,
div#container div#summary p.annotation {
	font-size: 0.7em;
	color: #777;
}
/* "Web Designing…"
---------- ---------- */
div#container div#detail h2 {
	font-family: "UdMotoyaAporoStd-W4","メイリオ",Meiryo,sans-serif;
}
/* "開催期間：…株式会社モトヤ"
---------- ---------- */
div#container div#detail ul#detail_01 li,
div#container div#detail ul#detail_02 li {
	font-size: 0.8em;
	font-family: "RodinPro-M",sans-serif;
}
/* "記載された社名…"
---------- ---------- */
div#container ul.annotation {
	font-size: 0.7em;
	color: #777;
	text-align: right;
}
/* footer
---------- ---------- ---------- */
div#footer div#banner dl dt {
	font-size: 0.8em;
}
div#footer div#coution p {
	font-family: "ＭＳ Ｐゴシック",sans-serif;
	font-size: 75%;
	color: #000;
}
div#footer div#coution p:first-child { 
	font-weight: bold;
}
div#footer div#coution p a {
	color: #000080;
}



/* ＭＳワードをシミュレートする
========== ========== ========== ========== */

/* 「四隅の枠」
---------- ---------- ---------- */
div#header:before,
div#header:after,
div#banner:before,
div#banner:after {
	display: block;
	position: absolute;
	width: 24px;
	height: 24px;
	content: ""; 
}
div#header:before {
	margin-top: -30px; /* 24 + 6 */
	margin-left: -24px;
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
}
div#header:after {
	top: 133px; /* 108 + 25 */
	margin-left: 568px;
	border-left: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
}
div#banner:before {
	margin-top: 60px; /* 親要素のheightを反映 */
	margin-left: -24px;
	border-top: 1px solid #aaa;
	border-right: 1px solid #aaa;
}
div#banner:after {
	margin-left: 568px;
	border-top: 1px solid #aaa;
	border-left: 1px solid #aaa;
}

/* 「改行マーク」
---------- ---------- ---------- */
div#bgText:after,
div#header h1 span#logo01:after,
div#header h1:after,
div#container p:after,
div#container div#intro:after,
div#container div#summary:after,
div#container div#summary p:before,
div#container div#detail h2:after,
div#container div#detail ul li dl dd:after,
div#container div#detail ul.annotation li:after,
div#container div#detail:after,
div#footer div#banner dl dt:after,
div#footer div#banner dl dd:after,
div#footer div#banner dl:after {
	content: "\0021b5"; /* リターン記号 */
	color: #808080;
	font-size: 10px;
	margin-left: 1px;
	display: inline;
}
/* 改行マークが不要な要素
---------- ---------- */
div#container div#summary p:first-child:before,
div#coution p:after {
	content: "";
}
/* 改行マーク位置調整
---------- ---------- */
div#bgText:after {
	float: right;
	margin: -1em -1em 0 0;
}
div#container div#summary p:before {
	display: block;
}

/* 「右下ポップアップ」
---------- ---------- ---------- */
div#footer div#coution {
	position: fixed;
	bottom: 0;
	right: 0;
	padding: 0.4em 0.5em;
	margin: 1em;
	width: 18em;
	background-color: #ffffcc;
	border: 1px solid #000;
	-webkit-border-radius: 7px; /*for Firefox*/
	-moz-border-radius: 7px; /*for Safari and chrome*/
	border-radius: 7px;
}
div#footer div#coution:before,
div#footer div#coution:after {
	border-width: 16px;
	border-bottom-width: 0;
	border-style: solid;
	display: block;
	position: absolute;
	left: 60px;
	width: 0;
	height: 0;
	content: "";
}
div#footer div#coution:before {
	border-color: #000 transparent;
	bottom: -16px;
}
div#footer div#coution:after {
	border-color: #ffffcc transparent;
	bottom: -15px;
}
div#footer div#coution p {
	margin: 0.3em 0;
}
div#footer div#coution p a {
	margin: 0 0.3em;
}