/*
ar-stylesheet.css
*/

/* ####
http://www.w3.org/QA/Tips/
    Use h1 for top-level heading
    Use headings to structure your document
    Care With Font Size
        Forget <font>, use CSS
        Size: respect the users' preferences, avoid small size for content
        Units: avoid absolute length units for screen display
        legible font-family 
    Use class with semantics in mind
        Good names don't change
    Be careful with colours
*/

/* ####
W3C tip: Use class with semantics in mind.
クラスの名前はエレメントの役割を表せ

Often people use class names like bluetext, or redborder. A much better way to name your classes is with the role a certain HTML element of that class has.

Good names don't change

Think about why you want something to look a certain way, and not really about how it should look. Looks can always change, but the reasons for giving something a look stay the same.

Good names
    warning, important, downloadableImage and submenu are all good names. They describe what a certain element represents, and they are not likely to change. A warning will always remain a warning, no matter how much the look of the page changes.

Bad names
    border4px, lighttext and prettybackground are examples of bad names. You might fatten that border to a whopping 5 pixels, or the background may look pretty old after a while, and not pretty at all. An advantage of using CSS is that you won't have to change much in order to change the looks of your website. If you have to change all light text into dark text, and thus change all classes lighttext to darktext in all your HTML pages, you're likely to miss a few. 
*/

/* ####
W3C tip: Care With Font Size
フォントサイズに pt とか px とか使うな

The problem here is a basic usability and accessibility issue: a good design should look good without requiring the user to enlarge or reduce the text size.

Forget <font>, use CSS

Good usage of CSS's font properties

Size: respect the users' preferences, avoid small size for content
* As a base font size for a document, 1em (or 100%) is equivalent to setting the font size to the user's preference. Use this as a basis for your font sizes, and avoid setting a smaller base font size
* Avoid sizes in em smaller than 1em for text body, except maybe for copyright statements or other kinds of "fine print."

Units: avoid absolute length units for screen display
* Do not specify the font-size in pt, or other absolute length units for screen stylesheets. 
* Use relative length units such as percent or (better) em
* even better, if a base font-size is set for the document, use absolute size ([ xx-small | x-small | small | medium | large | x-large | xx-large ]) or relative size ([ larger | smaller ]) when defining the font size for a particular element within the document.

legible font-family 
If using a small font-size, prefer a legible font-family with a high aspect value (see the section on font-size-adjust in the CSS2 specification for an explanation of the aspect value), which are more likely to be legible at such small sizes.

font-size: 12px がちょうどいい
ブラウザのフォントサイズ設定が14pxなら medium が14pxになるってこと。
pt はサイズがブラウザでばらばらなので使えない。
読みやすいフォント 第一候補 Verdana 第二候補 Arial。
小さいフォントには Geneva がいい。
Helvetica は Mac にしかない。
Tahomaは 印刷では美しいが, 画面ではいまいち。
日本語フォントはWindowsの MS UI Gothicが 第一候補。
*/

/* ####
W3C tip: Use headings to structure your document
フォントの大きさで heading を選ぶな

Structure your document
Headings tags
All the various flavors of (X)HTML define 6 levels of headings: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. It is foreseen that XHTML 2 will also provide generic headings, with a level determined by their depth in the structure.

N6はh4がちょうどいい大きさだが、IE4はh4が大きすぎる。
サイズを統一するため px 設定する。
でもMacでは全然よくない。
徹底するならJavaScriptでブラウザ毎に px 設定する必要がある.
てゆーか px 指定は止めなさい。それが W3C の勧告。
*/

/* ####
Osakaの位置の理由

例1: www.microsoft.com/japan/mac/basic.css
 font-family: 'ヒラギノ角ゴ Pro W3', Osaka, 'ＭＳ Ｐゴシック', sans-serif;
例2: www.nhk.or.jp
 font-family: Osaka, Verdana, arial, helvetica, sans-serif;
 font-size:small;
 line-height: 140%;

IE5/Macは 有効な英語のフォントを、有効な日本語フォントの前に指定してると
inputや textareaで文字化けする。
対策として、inputやtextareaでは英字フォントの前に Osaka を置く。
つまり、inputやtextareaでは英字フォントの前の Osaka は省けない。

 font-family: "ヒラギノ角ゴ Pro W3",Osaka,Verdana,Arial,Helvetica,"MS UI Gothic","MS PGothic",sans-serif;

 font-family: Verdana,Arial,"MS UI Gothic","MS PGothic",sans-serif;
 letter-spacing: 0em;
*/

/* ####
死ぬブラウザ

ブラウザによって inherit のルールがばらばら。
padding-left で NS4.7は即死する。
float box の下流で img に align 指定すると IE5/Mac は固まる。
*/


body {
 color: #000000;
 background: #FFFFFF;
 font-family: "ヒラギノ角ゴ Pro W3",Osaka,Verdana,Arial,Helvetica,"MS UI Gothic","MS PGothic",sans-serif;
}
/*
<body link="#990000" vlink="#FF9900" alink="#FF0000">
<body link="#CC6600" vlink="#FF9900" alink="#FF0000">
*/

td {
 vertical-align: top;
 font-family: "ヒラギノ角ゴ Pro W3",Osaka,Verdana,Arial,Helvetica,"MS UI Gothic","MS PGothic",sans-serif;
}

p, ul, ol, dl, blockquote, address {
 line-height: 1.7em; 
 font-family: "ヒラギノ角ゴ Pro W3",Osaka,Verdana,Arial,Helvetica,"MS UI Gothic","MS PGothic",sans-serif;
}

form, select {
 font-family: Verdana, Arial, "MS UI Gothic", "MS PGothic", sans-serif;
}

input, textarea {
 font-family: "ヒラギノ角ゴ Pro W3", Osaka, Verdana, Arial, "MS UI Gothic", "MS PGothic", sans-serif;
}

pre {
 background: #f8f4f0;
}

code {
 font-family: "Courier New", Courier, sans-serif;
}

img {
 border: none;
}

h1 {
 line-height: 1.2em;
 margin-top:    1em;
 margin-bottom: 1em;
 font-size:  medium;
}

h2 {
 line-height: 1.2em;
 margin-top:    1em;
 margin-bottom: 1em;
 font-size:  medium;
}

h3 {
 line-height: 1.2em;
 margin-top:    1em;
 margin-bottom: 1em;
 font-size:  medium;
}

h4 {
 line-height: 1.2em;
 margin-top:    1em;
 margin-bottom: 1em;
 font-size:  medium;
}

h5 {
 line-height: 1.2em;
 margin-top:    1em;
 margin-bottom: 1em;
 font-size:  medium;
}

h6 {
 line-height: 1.2em;
 margin-top:    1em;
 margin-bottom: 1em;
 font-size:  medium;
}

/*
 font-weight:  bold;
 font-style: normal;
 border-bottom: #960 thin solid;
 border-bottom: #dddddd thin solid;
 border-bottom: #FF0000 thin solid;
*/

/* #### Positioning class */

#bottom {
 clear: both;
 position: static;
 width:  auto;
 height: auto;
 font-size: xx-small;
 font-family: Verdana, Arial, sans-serif;
 color: #666666;
 background-color: #f8f4f0;
/*
 font-family: Courier, sans-serif;
 font-family: Verdana, Arial, sans-serif;
 border-top:    1px solid #666666;
 border-bottom: 1px solid #666666;
*/
}

#right {
        float: right;
        width: 26%;
        background-color: #FFFFFF;
        overflow: hidden;
        border-left: 2px solid #f8f4f0;
        font-size: xx-small;
        font-family: Verdana, Arial, sans-serif;
        color: #666;
/*
        font-family: Courier, sans-serif;
        width: 198px;
        font-size: x-small;
 border-left: #960 thin solid;
 border-left: #f8f4f0 thin solid;
 border-left: 2px solid #f8f4f0;
 border-bottom: 8px solid #f8f4f0;
*/
}

#center {
        float: left;
        width: 66%;
        overflow: hidden;
        font-family: Verdana, Arial, sans-serif;
        padding-top: 0em;
        margin-right: 1em;
        margin-left: 1em;
        font-size: x-small;
/*
        padding-left: 0em;
        margin-left: 1em;
        padding-left: 1em;
        padding-right: 1em;
        border: 1px solid #f8f4f0;
        font-family: Courier, sans-serif;
        width: 500px;
        background: #f8f4f0;
        border-right: 2px solid #f8f4f0;
*/
}

#copyright {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: xx-small;
 color: #666;
 padding-left: 30px;
 padding-left: 10px;
/*
 margin: 50px 0px 0px 0px;
 background: #FFF;
 padding-left: 30px;
 border-top: 1px dotted #CCC;
 border-bottom: 1px dotted #CCC;
*/
}


/* #### 汎用 class */

.maintitle {
 color: #ff0000;
}

.copyright {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: xx-small;
 color: #666;
}

.sidebar {
  padding: 1em;
}

.sidebar h1 {
	text-align: left;
	color: #666666;
	font-size: small;
	font-size: medium;
	font-weight: bold;
	letter-spacing: -0.06em;
/*
	margin-bottom: 1.5em;
	margin-bottom: 10px;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
 font-family: 'ヒラギノ角ゴ Pro W3', Verdana, Arial, Helvetica, 'MS UI Gothic', 'MS PGothic', 'MS Pゴシック', sans-serif;
*/
}
.sidebar h2 {
	color: #666666;
	font-family: Verdana, Arial, sans-serif;
	font-size: x-small;
	text-align: center;
	font-weight: bold;
	letter-spacing: .3em;
	letter-spacing: .1em;
	letter-spacing: .2em;
/*
	text-transform: uppercase;
	letter-spacing: .3em;
*/
}
.sidebar ul {
	padding-left: 0px;
	margin: 0px;
	margin-bottom: 30px;
}
.sidebar ol {
	padding-left: 0px;
	margin: 0px;
	margin-bottom: 30px;
}
.sidebar li {
	color: #666666;
	color: #000000;
	font-family: Verdana, Arial, sans-serif;
	font-size: x-small;
	text-align: left;
	line-height: 150%;
	margin-top: 10px;
	list-style-type: none;
}
.sidebar img {
	border: 0px solid #FFFFFF;
}


.items {
    width:40%;
    float:right;
    padding:0 0 1em 1em;
    margin:1em 0 1em 1em;
    border-left: 4px solid #f8f4f0;
}

div.itembox {
    width:40%;
    float:right;
    padding:0 0 1em 1em;
    margin:1em 0 1em 1em;
    border-left: 4px solid #f8f4f0;
}

div.itemtitle {
}

div.itemtitle h3 {
 line-height: 1.8em;
 font-size: x-small;
 text-align:left;
 border: none;
}

div.itemtitle img {
 float: right;
}

div.itemtitle a {
 font-size: small;
}

div.itemcontent {
 clear:both;
 text-align:right;
 line-height:normal;
 font-size: x-small;
}

.quote {
 /* 例文の引用 */
 border-left: solid 1em #f0ece8;
 padding-left: 0.5em;
/*
 border-left: solid 1em #f4f0ec;
 border-left: solid 1em #f8f4f0;
 margin-left: 2em;
 background: #f8f4f0;
*/
}


/* #### 限定クラス */

p.abst {
 /* 概要などに用いるパラグラフ */
 font-size: x-small;
}

span.title {
 font-size: 1.2em;
 font-weight: 600;
}

table.sub {
 width: 250px;
}

td.navia {
 font-family: Verdana, Arial, "MS UI Gothic", "MS PGothic", sans-serif;
 height: 24px;
 text-align: right;
 background-color: #EEEEEE
 /* background-color: transparent */
} 

td.left {
 width: 125px;
 vertical-align: top;
}

td.right {
 width: 425px;
 vertical-align: top;
}

div.body {
 /* 何もしないdiv  継承を断ち切るときに使う */
}

div.figureleft {
 float: left;
 width: 95px;
 padding: 8px
}

div.figureright {
 float: right;
 width: 95px;
 padding: 8px
}

div.container {
 position: relative;
 width: 550px;
 font-family: "ヒラギノ角ゴ Pro W3",Osaka,Verdana,Arial,Helvetica,"MS UI Gothic","MS PGothic",sans-serif;
 line-height: 1.7em; 
/*
 font-size: 12px;
 clear: both;
*/
}

div.side {
 position: relative;
 width: 125px;
 float: left;
}

div.main {
 position: relative;
 width: 420px;
 float: left;
}

div.bocelli {
 position: relative;
 width: 420px;
 float: left;
}

div.bocelli img{
 float:right;
 padding-left:1em;
}

div.box {
 position: relative;
 width: 425px;
}

div.header {
}

div.footer {
 line-height: 1.0em;
}

div.box550 { /* 収容ボックス */
 position: relative;
 width: 550px;
 font-size:   12px;
 font-family: "ヒラギノ角ゴ Pro W3",Osaka,Verdana,Arial,Helvetica,"MS UI Gothic","MS PGothic",sans-serif;
 line-height: 1.7em; 
 clear: both;
}

div.box125 {
 position: relative;
 float: left;
 width: 125px;
}

div.box425 {
 position: relative;
 float: left;
 width: 420px;
}

br.clear {
 /* float をクリアするために使う br */
 clear: both;
}

div.navia {
 font-family: Verdana, Arial, "MS UI Gothic", "MS PGothic", sans-serif;
 background-color: #EEEEEE;
 text-align: right;
 height: 25px;
 padding: 4px;
 /* mergin: 4px; */
}

div.navibbox {
 float: left;
 width: 250px;
 text-align: left;
}

div.navib {
 background-color: #EEEEEE;
 text-align: left;
 height: 25px;
 padding: 4px;
 /* mergin: 4px; */
}

div.title {
 font-size: 11pt;
 font-weight: bold;
 /* border-bottom: #960 thin solid; */
 /* font-weight: 600; */
 /* padding-left: 24px; */
 /* line-height: 1.5em; */
 /* N4.7はここでline-height指定しないと効かない。*/
}

div.titleCheckout {
 font-family: Verdana, Arial, "MS UI Gothic", "MS PGothic", sans-serif;
 font-size: 11pt;
 font-weight: bold;
 /* background-color: #EEEEEE; */
 border-bottom: #FF0000 thin solid;
 /* font-weight: 600; */
 /* padding-left: 24px; */
 /* line-height: 1.5em; */
 /* N4.7はここでline-height指定しないと効かない。*/
}

div.contents {
 margin-bottom: 2em;
 padding-left: 2em;
 /* line-height: 1.3em; */
 /* N4.7はここでline-height指定しないと効かない。*/
}

div.indent {
 padding-left: 2em;
 line-height: 1.7em;
 /* N4.7はここでline-height指定しないと効かない。*/
}

div.indent2 {
 padding-left: 48px;
 line-height: 1.7em;
 /* N4.7はここでline-height指定しないと効かない。*/
}

div.text {
 font-size: 11pt;
 padding-top: 10px;
 padding-bottom: 3px;
 padding-left: 20px;
 line-height: 1.7em;
 width: 425px;
 /* background-image: url(ar-wallpaper.png); */
 /* font-family: Osaka, Helvetica, Arial, "MS UI Gothic", sans-serif; */
 /* margin-left: 15%; */
}
div.entry {
 padding-bottom: 1em;
 margin-bottom: 5em;
 border-bottom: 2px solid #eeddcc;
}
div.entry h2 {
 font-size: 1.4em;
/*
 background-image:url(misc/BandWcherry.jpg);"
 padding-left: 1em;
*/
}
div.entry p {
 font-size: 1.0em;
}
div.navi { /* ナヴィボタン <a></a>収容ボックス */
 line-height: 30px; /* ボタンの高さにする */
 /*  line-height: normal; */
}

div.navibar { /* ナヴィバー | home | contact | about | ってやつ */
 font-size: 9pt;
}

div.obsolete {
 text-decoration: line-through;
}

a {
 color: black;
 background: none;
 text-decoration: none;
}
a:link {
 color: #000000;
 background: none;
 text-decoration: none;
 /* color: #666666; */
 /* background: #FF9; */
}
a:visited {
 color: #000000;
 background: none;
 text-decoration: none;
 /* text-decoration: line-through; */
 /* background: #CCC; */
}
a:hover {
 color: #ff0000;
 background: none;
 text-decoration: underline;
 /* color: #800000; */
 /* font-weight: 900; */
}
a:active {
 /* color: #ff0000; */ 
 background: none;
 text-decoration: none;
 /* background: #F96; */
}
a:focus {
 /* color: #ff0000; */ 
 background: none;
 text-decoration: none;
 /* background: #F96; */
}

a.pl {
 color: #000000;
 background-color: #ffffff;
 text-decoration: underline;
 line-height: 18px;
}
a.pl:visited {
 color: #666666;
 background-color: #ffffff;
}
a.pl:hover {
 color: #FF3300;
 background-color: #ffffff;
}
a.p {
 color: #000000;
 background-color: #ffffff;
 text-decoration: underline;
}
a.p:visited {
 color: #666666;
 background-color: #ffffff;
}
a.p:hover {
 color: #FF3300;
 background-color: #ffffff;
}

a.navi {
 text-decoration: none;
}
a.navi:hover {
 text-decoration: underline;
}
a.plain {
 text-decoration: underline;
}
a.plain:visited {
 color: #666666;
}
a.plain:hover {
 color: #FF0000;
}
a.history {
 text-decoration: none;
}
a.history:visited {
 /* font-weight: 600; */
 /* color: #0066FF; 水色 */
 color: #888888;
}
a.history:hover {
 color: #FF0000;
 text-decoration: underline;
}

A.button {
 text-decoration: none;
 padding: 0.1em;
}
A.button:link, A.button:visited {
 border: thin solid #39C;
}
A.button:hover {
 border: thin outset #39C;
 position: relative;
 top: -1px;
 left: -1px;
}
A.button:active {
 border: thin inset #39C;
 position: relative;
 top: 1px;
 left: 1px;
}

A.slide {
 text-decoration: none;
 padding: 0.1em;
}
A.slice:link, A.slide:visited {
 /* border: thin solid #39C; */
}
A.slide:hover {
 /* border: thin outset #39C; */
 position: relative;
 top: 0px;
 left: -12px;
}
A.slide:active {
 /* border: thin inset #39C; */
 position: relative;
 top: 0px;
 left: -12px;
}

a {
        text-decoration: underline;
}
a:link {
        color: #000000;
        color: #8FABBE;
        color: #006699;
        color: #884422;
        text-decoration: underline;
}
a:visited {
        color: #000000;
        color: #8FABBE;
        color: #006699;
        color: #884422;
        text-decoration: underline;
}
a:active {
        color: #000000;
        color: #8FABBE;
        color: #006699;
        color: #884422;
        text-decoration: underline;
}
a:hover {
        color: #006699;
        color: #ff0000;
        text-decoration: underline;
}


/* ####
疑似クラス(css1)

<body> の link，vlink，alink 属性の代わりになるのが、
アンカーの疑似クラス
	:link
	:visited
	:active
の3つ。<body style="">式ではなく，<style></style>かcssファイルに書くこと。
cssでの指定は、<body>の属性の指定に勝る。
css2では:active 疑似クラスがダイナミック疑似クラスに分類される。
(css2ではリンク疑似クラスとダイナミック疑似クラスに別れる)
リンク疑似クラスは
	:link
	:visited
ダイナミック疑似クラスは
	:hover
	:active
	:focus
カスケーディングの都合により
ダイナミック疑似クラスはリンク疑似クラスのあとに書くこと。
*/

/* ####
回り込み

画像以外の要素にもfloat(回り込み)を指定できる。
ボックスの幅を明示的に指定しておく。
例えば、ヘッダをfloatさせるなら
	h3.floatleft {
	 float: left;
	 width: 15%;
	 background-color: #66C;
	 padding: 0.2em;
	 text-align: center;
	}
*/

/* ####
マージンとパディング

マージンは枠の外側にとられる
パディングは枠の内側にとられる
パディングはすべての要素に適用される
この属性は継承されず、初期値は0
 margin-top:    1.0em;
 margin-bottom: 1.0em;
 padding-top:    長さ;
 padding-bottom: 長さ;
 padding-left:   長さ;
 padding-right:  長さ;
*/

/* ####
背景色

マージンの部分には背景色は適用されない。
つまりbackground-colorプロパティで transparent(透過)が指定されたのと同じ状態
background 短縮プロパティは，背景に関するプロパティ，すなわち，
background-color プロパティ，
background-image プロパティ，
background-attachment プロパティ，
background-repeat プロパティおよび 
background-position プロパティを一括して指定するものである。
*/

/* ####
太さ

weightで指定する.
font-weight プロパティを指定しなかった場合は親要素と同じフォントの太さになる
初期値は normal 
9段階の太さを100きざみで100から900の数値で指定できる(normalは400,boldは700相当)
一段太くしたいときのweightは
	X11     500
	Windows 600
	Mac/IE5 600
	Mac/NS6 700
だから
	Windowsでは500が標準,
	X11での600は2段boldになる
このweightも各ブラウザで全然違う表示になるんだなーもう。
つまり
	normal  通常の太さのフェイス。400 と同じ意味
	bold    ボールドフェイス。700 と同じ意味
	bolder  親要素のフォントの太さより太くする。
	lighter 親要素のフォントの太さより細くする。
ただし bolder および lighter は期待通りに効いてくれるとは限らない。
*/

/* ####
継承

プロパティのデフォルト値は継承値と初期値の2通りがある。
継承されるプロパティ
	color
	font-size (うそ。継承されない)
	text-align
	text-indent
	line-height
	font-family
	font-style
	font-weight
継承されないプロパティ
	background-color (初期値 透過色)
	text-decoration (装飾は継続される)
	text-shadow (装飾は継続される)
値を強制的に継承させるには キーワード inherit を与える。
ただし IE4, 5, 5.5で inherit はサポートされない。
*/

/* ####
継承ばらばら

テーブルの実体はセルつまりtd。
tdの親はtbodyであるとするのが厳密なNetscape流。
tbodyの親は table

tableのfont-sizeの指定はtdへ継承されるか
	IE5.5/Windows yes
	IE5/Mac       yes
	IE4.5/Mac     yes(tableで指定しなくてもbodyでの指定で効いている） 
	N6/Windows    no (tbodyでの指定ならyes)
	N6/Mac        no (tbodyでの指定ならyes)
	N4.7/Mac      no (tdでの指定ならyes)
ブラウザでばらばら。
*/

/* ####
行間 line-height

line-heighは、文章のための要素(pなど)でだけ使用すること。
bodyやtbodyやtdやdivなどでは使わないこと。

MacとWindowsではline-heightが変わってくる。
IE4/Windowsでは1.2emで十分、
IE5/Macでは足りず、重なってしまう。1.4emがちょうどいい。
N6/Macは1.2emで十分。
sizeをpx指定してると起きる問題か、それともem指定の問題か。 
単なる倍率指定のほうがいいかもしれない。
tdに直接、style="line-hight: 30px;" と書くとN4.7がバグる(変な空行が入る)。
*/

/* ####
div

bodyはtableの親にはなれないが、divはtableの親になれる。

複数のパラグラフやブロックをまとめてスタイルを適用するには<div>が便利
本文をブロックにするにはbodyではなくdivを使うと都合がいい
いわゆる<basefont>の代替になる
ただし、N4.7でdivの頭に自動的に空行が入ってしまう。N6では入らない。
*/

/* ####
tbody

tbodyの親はtableだが、tableの親はbodyではない

thead,tfoot,tbody で行グループを表現できる
表が 1画面に収まらないときなど
theadとtfootはスクロールせず，
tbodyのみがスクロールするようになる。
*/