@charset = "Shift-JIS"

/***********************
 * 各ページ共通の設定
 **********************/
/*
 fontを指定します。
 IEなどのブラウザは、フォントの種類を好き勝手に変更できますが、
 同じフォントで表示されるようにしています。
*/
body{
	font-family: 'Lucida Grande', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif;
	background-color: #FFFFFF;
	margin:10px;
}
table, td{
	font-family: 'Lucida Grande', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif;
}

/*
 こちまっぷの習慣上、
共通して反映させたい設定は、mainという名前で始まるところに書いています。
行間隔や左右の余白等を指定しています。
*/
#main{
	margin-left: 10%;
	width: 84%;
	line-height:125%;
	margin-right: 6%;
}
/*
画像をIE6以外のブラウザで見た場合、変な枠(border)が表示されます。
それを防ぐために、0を指定してます。
*/
img{
	border:0px;
}
/*
中央に表示します
*/
div.center{
	text-align: center;
}

/*
【戻るボタン】
戻るボタンの位置やサイズがバラバラだと変なので、
同じになるよう指定してます。
text-align: center;は中央に表示しろという意味です。
margin-topは、上に隙間を空けろという意味です。
margin-bottomは、下に隙間を空けろという意味です。
font-sizeは、フォントサイズを拡大または縮小しろという意味です。
(100%にすると、font=3と同じ大きさになります。)
*/
p.modoru{
	text-align: center;
	margin-top: 30px;
	font-size: 90%;
	margin-bottom: 15px;
}
/*
 段組を終了します。段組を終了する場合は、必ず呼び出してください。
*/
.owari{
	clear: left;
}

/***********************
 * キリ番ページの設定
 **********************/
/*
filterと-moz-opacityとopacityは、背景を透過させるための設定です。3つセットで書きます。
ここでは65%の濃さにしています。
これだけでは白っぽい透過、赤っぽい透過…といった色がわからないので、
background-colorも指定しています。
widthは透過したい幅を指定しています。
margin-leftとmargin-rightの両方を指定すると、真ん中に表示されます。
text-alignは、文字を左に寄せろと命令してます。
*/
div.kiri{
	background-color:#FFFFFF;
	filter:Alpha(opacity=65);
	-moz-opacity: 0.65;
	opacity: 0.65;
	width:600px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}
/*
【キリ番ページのタイトル】
borderは、タイトルの周りの枠を、指定した太さと種類で書けと命令してます。
colorは、文字の色を変えろという命令です。
text-alignは、文字を真ん中に書けと命令してます。
font-sizeは、フォントサイズを拡大縮小しろという命令です。
*/
div.kirititle{
	border:2px dashed;
	margin:15pt;
	text-align: center;
	color: darkolivegreen;
	font-size: 120%;
}

/***********************
 * プロフィール・ごあんないページの設定
 **********************/
/*
透過の設定。div.kiriと似たような設定をしてます。
*/
table.info{
	background-color:#FFFFFF;
	filter:Alpha(opacity=65);
	-moz-opacity: 0.65;
	opacity: 0.65;
	border-color: darkolivegreen;
	color: #072128;
}
/*
ご案内ページのtdに書いた文字サイズを拡大縮小しろという命令
*/
.info td{
	font-size: 90%;
}
/*
【ご案内ページのタイトル】
*/
p.infotitle{
	line-height:130%;
	color: #072128;
}
/*
【同盟タイトルの設定】
*/
h3.doumei{
	border-top: 1px solid #F9A9B3;
	padding-top: 15px;
	text-align: center;
	font-size: 90%;
}

/***************************
 * トップページの設定
 ***************************/
/*
【トップページの表示範囲】
padding-topを使って、右上にある"めれでにあ"の文字が切れないようにしています。
line-heightで行間隔を1.25倍にしています。
その他、左右の余白を指定しています。
*/
#main_top{
	padding-top: 2%;
	padding-left: 6%;
	padding-right: 6%;
	line-height: 125%;
	float: right;
}
/*
【更新履歴の窓の表示】
BORDER-で始まるのは、周りにつけた枠に関する設定です。
BACKGROUND-COLORは背景の色です。
font-sizeは、文字の大きさです。
*/
textarea.rireki{
	BORDER-STYLE:solid;
	BORDER-WIDTH:2px;
	BORDER-COLOR:#f9a9b3;
	BACKGROUND-COLOR:#ffffff;
	font-size:10pt;
}
/*
【カウンターの表示位置】
カウンターは表示が遅いため、HTMLの下のほうに書いてます。
ここでは、画面の左端から××パーセント、
画面の上端から××ピクセルのところに表示しろと命令してます。
*/
div.counter{
	position:absolute;
	left:72%;
	top:55px;
}
/*
 いらっしゃいませの段組
*/
div.oneLeft{
	float: left;
	width: 67%;
}
/*
キリ版の説明部分の段組
*/
div.oneRight{
	float: right;
	width: 25%;
	padding-top: 37px;
}
/*
"最近の更新"という文字の表示位置。
IE6で文字サイズを最大にするとデザインが崩れる恐れがあるため、
white-space:nowrap;を指定しています。
また、下にあるやつとの隙間を空けるため、heightを指定しています。
*/
div.twoLeft{
	float: left;
	width: 50%;
	height:40px;
	white-space:nowrap;
}
/*
【"最近の更新"の右側にある飛行機】
IE6でメニューとの位置がずれて表示されてしまうため、
背景で飛行機の画像を呼ぶという特殊なことをやってます。
また、下にあるやつとの隙間を空けるため、heightを指定しています。
*/
div.twoRight{
	float: right;
	width: 50%;
	height:40px;
	background-image : url(../s/l_sky5.gif);
	background-repeat : no-repeat;
	color:#FFFFFF;
}
/*
3段目→更新履歴一覧の段組
ここで決めるwidthは、足し算した場合に97%になるよう設定すると良いです。
*/
div.koushinmenu{
	float: left;
	width: 33%;
}
/*
3段目→メールはこちらの段組
font-size:70%;は、font=1とほぼ同じ大きさです。
*/
div.mailmenu{
	float: left;
	width: 17%;
	text-align: center;
	font-size:70%;
}
/*
メールはこちらの下にあるメッセージ表示枠の大きさ。
幅は、(javaScriptは%を正しく認識できないので)ピクセルで指定してください。
*/
div.mailmenu table{
	width: 135px;
	text-align: center;
}
/*
メールはこちらの下にあるメッセージのサイズ。
何もしないときは表示しないため、display: none;を指定しています。
*/
div.mailmenu span{
	display: none;
	float: right;
	font-size:70%;
}
/*
3段目→メニューの段組
IE6で文字サイズ最大にしたとき2段になると嫌なので、white-space: nowrap;を指定しています。
*/
div.menu{
	float: left;
	width: 27%;
	white-space: nowrap;
}
/*3段目→BGMの段組*/
div.musicmenu{
	float: right;
	width: 20%;
	padding-top:5px;
}

/*******************
 * リンクページの設定
 *******************/
/*
【リンクページの右側で使う共通設定】
line-heightで文字間隔を指定しています。
画面の端から端まで文字が埋まっていると見苦しいので、
左から94%の範囲にwidthを指定し、その横に余白(margin-right)を指定しています。
*/
#main_link{
	width: 94%;
	line-height:125%;
	margin-right: 6%;
}
/*
 リンクページの文字サイズを指定しています。
 font-size: 90%で、font=2とほぼ同じ大きさになります。
*/
div.linkexp{
	font-size: 90%;
}
div.linkexp table{
	border: 0px;
}
div.linktitle{
	text-align: center;
	font-size: 160%;
	color: #f9a9b3;
}

