@charset "utf-8";
body {
	font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	margin: 0;
	padding: 0;
/*	background-color: #CCCCCC; */
	background-color:#BEEDED;
	color: #000;
	height: 100%;             /* #containerのmin-heightに対して必要なもの */
}

/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl { /* ブラウザー間の相違により、リストの余白とマージンをゼロにする。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定する。より詳細なセレクターを記述しない限り、ここで指定する内容が .nav リストにも適用されることに注意してください。 */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
	padding-right: 15px;
	padding-left: 15px; /* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 */
}
a img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	border: none;
	margin-bottom: 10px;
	margin-top: 10px;
}

/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
a:link {
	color:#414958;
	text-decoration: underline; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
	text-decoration: none;
	color: AntiqueWhite;
}

/* ~~ このコンテナが他のすべての div を囲み、パーセンテージに基づいた幅を指定します。~~ */
#container {
	width: 900px;
	max-width: 900px;/* レイアウトが大型モニターで広がりすぎないように、最大幅を指定することをお勧めします。これにより、読みやすい行の長さを保つことができます。IE6 ではこの宣言は無視されます。 */
	min-width: 780px;/* レイアウトが狭くなりすぎないように、最小幅を指定することをお勧めします。これにより、サイドカラムで読みやすい行の長さを保つことができます。IE6 ではこの宣言は無視されます。 */
	background-color: #FFF;
	margin: 0 auto; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。#container の幅を 100% に設定した場合、これは必要ありません。 */
	position: relative;       /* フッターの為の位置決め用 */
	height: auto !important;  /* IE6対策：この2行で */
	height: 100%;             /* IE6対策：擬似的にmin-heightと同じことをさせてる */
	min-height: 100%;         /* 中身が少なくても高さ100%にする */
}

#keyword {
		width: 900px;
		height: 26px;
		background-color:#BEEDED;
}

#keyword p {
	font-size :80%;
}


/* ~~ ヘッダーには幅は指定されません。ヘッダーはレイアウトの幅全体まで広がります。~~ */
#header {
	width: 900px;
	/*	height:100px; */
	margin: 0px;
	padding : 0px;
	background-color:indigo;
}

hr {
	margin-left: 10px;
	margin-right: 10px;
}

ul,ol,dl {
	margin-top: 0px;
	margin-bottom: 0px;
}

li {
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
}

li.minus1 {
	font-size: 0.9em;
}


.bgcoloraqua {
	background-color:aqua;
	text-align:center;
	margin-top: 10px;
	margin-bottom: 5px;
}

.bgcolorbeige {
	background-color:beige;
	margin-top: 5px;
	margin-bottom: 5px;
}

.minus1 {
	font-size: 0.9em;
	margin: 0,20px; /*上下0、左右20*/
}



p.minus1 {
	font-size: 0.9em;
	margin: 0,20px; /*上下0、左右20*/
}

.minus2 {
	font-size: 0.7em;
	line-height:0.9em;
	padding:10px 10px 40px 10px;
	
}

p.minus1red {
	font-size: 0.9em;
	color:red;
}

/*************************************************/
/*--- ご注文の手引き用 ---*/
/*************************************************/

#container700 {
	width: 740px;
	background-color: #FFF;
	margin: 0 auto; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います*/
	position: relative;       /* フッターの為の位置決め用 */
	height: auto !important;  /* IE6対策：この2行で */
	height: 100%;             /* IE6対策：擬似的にmin-heightと同じことをさせてる */
	min-height: 100%;         /* 中身が少なくても高さ100%にする */
	padding: 10px;
}

.pdd10 {
	padding:0 10px;
}

#ruleleft {
	float: left;
	padding: 10px;
}

ul {
	margin-left: 1em;
}

ol {
	margin-left: 1em;
}

#rulecenter {
	float: left;
	padding: 10px;
}

/*************************************************/
/*  以下、フォントのスタイル(クラス)　*/
/*************************************************/


.bold {
	font-weight:bold;
}
.red {
	color:red;
	text-decoration:underline;
}
.awhite {
	color: AntiqueWhite;
}

.size80 {
	font-size:80%;
}

.size90 {
	font-size:90%;
}

.size110 {
	font-size:110%;
}

.size120 {
	font-size:120%;
}

.lh80 {
	line-height:80%;
}