@charset "utf-8";

	/*↑UTF-8で書かれているので、UTF-8が扱えるエディターで開いてください。*/

/*--------------------------------------
Default Style Sheet
Last Update 2006-04-12

- Universal selector
- Structure Module
- Text Module
- Hypertext Module
- List Module
- Edit Module
- Forms Module
- Tables Module
- Image Module
- Object Module

↑elementの定義順です

---------------------------------------*/

/*--------------------------------------
  Universal selector
---------------------------------------*/

*{
	color: black;
	/*background-color: transparent;*/
	font-size: 100%;
	margin: 0;
	padding: 0;
	}

/*↑お米印は全称セレクター(Universal selector)といって全ての要素にマッチします。*/
/*まずこれで一括して全ての要素の文字の大きさ、余白やカラーの定義をしています。*/

/*--------------------------------------
 Structure Module
---------------------------------------*/

body {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.5;
	color:black;
	background-color: white;
	/*padding-bottom: 20px;*/
	}

	/*↑本文部分のbody要素です。一般的な文字の種類など決めています。*/
	/*padding-bottom: 20pxは僕の好みです。*/

/*--------------------------------------
 Text Module
---------------------------------------*/

p,
pre,
address,
cite {
	font-size: 90%;
	margin: 0.8em 16px;
	color:inherit;
	background-color:inherit;
	}

	/*↑文章主体のサイトでは、80%はやや小さく感じるかもしれません。*/
	/*お好みで変えて下さい。*/

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: bold;
	line-height: 1.2;
	margin: 1em 0;
	font-family:"Hiragino Kaku Gothic Pro","MeiryoBoldAA",sans-serif;
	color:inherit;
	background-color:inherit;
}

h1 {
 font-size: 170%;
}

h2 {
 font-size: 130%;
}

h3 {
 font-size: 110%;
}

h4 {
 font-size: 90%;
}

h5 {
 font-size: 80%;
}

h6 {
 font-size: 80%;
}

	/*↑見出し要素はデザインによって良く変わるので、*/
	/*あんまり細かく指定しときません。*/

pre {
  width: auto;
  _width: 90%; /*for IE*/
  overflow: auto;
  font-size: 75%;
  letter-spacing: 1px;
  color: #3d4263;
  background-color: #f5f5f5;
  border: 1px solid #cccccc;
  padding: 8px 16px;
}

pre[title]:before {
  display: block;
  color: black;
  background-color:inherit;
  content: attr(title);
  margin-bottom: 0.8em;
}

	/*↑pre要素にtitle属性がついてる場合はその値を要素の先頭に表示 [IE未対応]*/

blockquote {
  display: block;
  color:inherit;
  background-color: #eaeeef;
  border-top: 1px solid #b9c3c8;
  border-left: 1px solid #b9c3c8;
  margin: 0.8em 24px;
  padding: 1px;
}

blockquote * {
  color: #434755;
  background-color:inherit;
}

	/*↑引用されたら前景色は全部この色　僕の好み*/

blockquote[title]:before {
  display: block;
  font-size: 80%;
  color: #455c5d;
  content: attr(title);
  background-color: #e0e4e5;
  margin: 2px;
  padding: 0.1em 16px;
}

	/*↑blockquoteにtitle属性がついていたら、その値を要素の先頭に表示[IE未対応]*/

blockquote[cite]:after {
  display: block;
  font-size: 80%;
  color: #333333;
  background-color:inherit;
  text-align: right;
  content: attr(cite);
  margin: 0;
  padding: 0.1em 16px;
}

	/*↑blockquote要素に引用元を表すcite属性がついていたら、その値を要素の末尾に表示[IE未対応]*/

cite {
  display: block;
  color: #333333;
  background-color:inherit;
  font-style: normal;
  text-align: right;
}

em {
  font-style: normal;
  font-weight: bold;
}

strong {
  color: #FF4500;
  background-color:inherit;
}

code {
  font-family: "Osaka−等幅", monospace;
  color: #3d4263;
  background-color:inherit;
}

↑コードは等幅フォントで表示

kbd {
  font-family: "Osaka−等幅", monospace;
  text-transform: uppercase;
  color:inherit;
  background-color: #f5f5f5;
  border: 1px solid #6a8eaa;
  padding: 0 0.4em;
}

	/*キーボード要素は少しキーボードっぽく表示（なんだそりゃ*/

kbd.accesskey {
  padding: 0 0.2em;
}

	/*↑これはaccesskeyクラスを作っている。*/
	/*kbd要素にこのクラスがくっついたら上で定義したのkbd要素よりも少し横幅小さくなる。*/

/*--------------------------------------
  Hypertext Module
---------------------------------------*/

a {
  text-decoration: none;
}

a:link {
  color: #005585;
  background-color:inherit;
  	/*border-bottom: 1px solid #005585;*/
}

a:visited {
  color: #485270;
  background-color:inherit;
  	/*border-bottom: 1px solid #cccccc;*/
}

a:hover {
  color: #b83800;
  background-color:inherit;
  text-decoration:underline;
}

	/*↑リンク色は毎回サイトデザインに合わせて変更してるけど、一応。*/

/*--------------------------------------
  List Module
---------------------------------------*/

ul,
ol,
dl {
  list-style-position: outside;
  	/*margin: 1em 16px;*/
  	/*padding: 1px 8px;*/
}

	/*↑list-style-positionでマーカーの位置を揃える*/

li,
dt,
dd {
  font-size: 100%;
}

	/*↑文章主体のサイトでは、80%はやや小さく感じるかもしれません。*/
	/*お好みで変えて下さい。*/

dt {
  color: #004171;
  background-color:inherit;
}

/*
dd {

}
*/

	/*何もスタイル無いけど良く調整するからコメントアウトしとく*/

li li,
li p,
li pre,
li dt,
li dd,
dd li,
dd p,
dd pre,
dd dt,
dd dd {
  font-size:100%;
}

	/*↑入れ子になった時に、文字の大きさを元に戻す。*/
	/*li * {font-size: 100%}がIEだと効かないからこんなに面倒。*/

li ul,
li ol,
li dl,
li p,
dd ul,
dd ol,
dd dl,
dd p {
  margin: 0.4em 8px;
}

	/*↑入れ子になった要素は、通常より余白を小さくとるようにする。*/

/*--------------------------------------
  Edit Module
---------------------------------------*/

del {
  color: #666666;
  background-color:inherit;
  text-decoration: line-through;
}

del[datetime]:before{
  content: " ( "attr(datetime)"削除) ";
}

	/*↑del要素(文書を削除したことを表す要素)にdatetime属性があれば、その値を冒頭に表示する*/

ins{
  text-decoration: none;
  border-bottom: 1px dotted #666666;
}

ins[datetime]:before{
  content: " ( "attr(datetime)"修正) ";
}

	/*↑ins要素(文書を挿入、改変した事を表す要素)にdatetime属性があれば、その値を冒頭に表示する*/

/*--------------------------------------
  Forms Module
---------------------------------------*/

form {
  clear: both;
  color:inherit;
  background-color: #eee;
  border-right: 1px solid #bababa;
  border-bottom: 1px solid #bababa;
  margin: 0.5em 16px 1em 16px;
  padding: 1px 0 1em 0;
}

form dl,
form p {
  margin: 0.4em 16px;
}

fieldset {
  border: none;
  padding: 1px 0;
}

legend {
  display: none;
  font-size: 85%;
  color:inherit;
  background-color: #e8e8e8;
  padding: 0.1em 8px;
}

	/*↑この要素、なかなか言うことを聞かない [愚痴]*/

input.text,
textarea {
  font-family: Arial, Helvetica, "ヒラギノ角ゴ Pro W3",  sans-serif;
  color:inherit;
  padding: 0.1em 8px;
  background-color: white;
  border-top: 1px solid #a8a8a8;
  border-left: 1px solid #a8a8a8;
}

	/*↑ font-familyにmacのフォントを入れて、MAC IEの文字化けを防ぐ*/

input.text:hover,
textarea:hover {
  color:inherit;
  background-color: #eaeeef;
  border-top: 1px solid #b9c3c8;
  border-left: 1px solid #b9c3c8;
}

	/*↑記入部分にマウスが触れた時に、変色して優しく主張してくる。 [IE未対応]*/

input.text:focus,
textarea:focus {
  color:inherit;
  background-color: #e2e6e7;
  border-top: 1px solid #a7abac;
  border-left: 1px solid #a7abac;
}

	/*↑記入部分をクリックしてフォーカスしたら、変色して記入者を高揚させる。 [IE未対応]*/

textarea {
  padding: 0.4em 8px;
}

/*p input {
  margin-left: 8px;
}*/

input.radio {
  color:inherit;
  background-color: transparent;
  border: none;
}

	/*↑input[type="radio"](属性選択肢)がIEで使えないので、仕方なくクラスを作っている。*/
	/*なので、HTML側のラジオボタンにも class="radio"と付ける必要がある。*/

/*input.submit {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #6c737a;
  background-color:inherit;
  border-width: 1px;
  border-style: solid;
  border-color: #c2c2c2 #8f8f8f #8f8f8f #c2c2c2;
  padding: 1px 0.5em;
}*/
input.button{
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 12px;
  font-weight: bold;
  background-color:inherit;
  padding:1px 0.5em;
  }

	/*↑同じく、input[type="submit"](属性選択肢)がIEで使えないので、仕方なくクラスを作っている。*/
	/*なので、HTML側のsubmitなinputにも class="submit"と付ける必要がある。*/

/*input.submit:hover {
  color: black;
  background-color: white;
}*/

/*--------------------------------------
  Tables Module
---------------------------------------*/

table {
  color:inherit;
  background-color: #f5f5f5;
  border-width: 1px;
  border-style: solid;
  border-color: #c1ced4 #97a4aa #97a4aa #c1ced4;
  margin: 0.5em 1em;
}

caption {
  display: none;

  font-size: 80%;
  color: #454e58;
  background-color: #f5f5f5;
  border: 1px solid #97a4aa;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: #c1ced4 #97a4aa #97a4aa #c1ced4;
}

	/*↑僕はあんまりcaption要素を表示しないから display:noneがついているけど、*/
	/*はずせばそれなりの見栄えになるようになっている。*/

td,
th {
  font-size: 75%;
  line-height: 1.2;
  color: white;
  background-color:inherit;
  padding : 0.1em 8px;
}

	/*↑line-height:1.2なので、シュっとしたセルになる。ここは好み。*/

th {
  font-weight: normal;
  color: #536066;
  background-color: #f5f5f5;
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: #d2d2d2;
}

td {
  color: #2d3b4e;
  background-color: white;
  border-width: 1px;
  border-style: solid;
  border-color: #eee #bfc3c4 #bfc3c4 #eee;
}

/*--------------------------------------
  Image Module
---------------------------------------*/

img {
  vertical-align: bottom;
}

	/*↑こうなっていないと面倒な事のほうが多いから。*/

/*--------------------------------------
  Object Module
---------------------------------------*/

object,
embed {
  margin: 1em 16px;
}

	/*↑Flashとか貼り付けた時にちゃんと他と同じように余白をとらせる*/