@charset   "Shift_JIS";
 /* 2008.10.15 */

BODY{
  background-color : #f7f7ff;
  
  padding: 0;
	font-family: 'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-size: 0.9em;
	color: #333333;

	margin: 0;
	padding: 0;
	text-align: center; 
	font-
	}
  
A{
	font-weight:bold;
	color : #3247de;
	text-decoration : none;
}

A:VISITED{
  color : #3c4f93;
}

A:ACTIVE{
  color : #9650c9;
}

A:HOVER{
	text-decoration : underline;
}

HR{
	width: 90%;
	border-bottom: solid 4px #CCCCCC;
  left : 0px;
}

img{
	border: 0;
}

img.waku{
	border: 5px solid #ddd;
	background: #FFFFF0;
	padding: 5px;
	display:block;
	margin:auto;
	text-align: center;
}

.all #container { 
	width: 800; 
	background: #FFFFFF;
	margin: 0 auto; /* 自動マージン（幅と連動）により、ページが中央揃えになります */
	border: 1px solid #CCCCCC;
	text-align: left; /* この設定は body エレメントの text-align: center より優先されます。 */
} 

.all #header { 
	width: 800px;
	margin : 0px;
	background-repeat: no-repeat;
	border-bottom: solid 1px #eeeeee;
	height: 156px;
	padding-top: 0px;


	/* この余白は、その下に表示される div のエレメントの左揃えと一致します。#header でテキストの代わりにイメージが使用される場合は、必要に応じて、余白を削除してください。 */
} 

.all #header h1 {
	margin: 0; /* #header div の最後のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間の原因不明のスペース）が回避されます。div の周囲に境界線が適用されている場合は、境界線によってマージンの相殺が回避されるため、この操作は不要です */
	padding: 10px 0; /* マージンの代わりに余白を使用して、エレメントを div の端に接触しない位置に維持することができます */
}

/* #menu に関するヒント：
1. 単位は相対単位であるため、サイドバーで余白を使用することは回避してください。標準に準拠したブラウザでは、余白は全体の幅に追加されるため、実際の幅が不特定の幅になります。 
2. サイドバーの値の単位として em が使用されているので、その幅が初期設定のテキストサイズに応じて変化することに注意してください。
3. 「.style #menu p」ルールで見られるように、div の端と div に含まれるエレメントの間のスペースは、エレメントに左マージンと右マージンを適用することによって設定できます。
*/
.all #menu {
	float: left; 
	width: 260; /* このエレメントはフローティングエレメントであるため、幅が設定されている必要があります */
	background: ; /* 背景色は、列内のコンテンツの長さにわたって表示されます */
	padding: 15px 0; /* 上余白と下余白により、この div 内に視覚的なスペースが設定されます */

	padding: 30px 0 15px 10px;


}
.twoColHybLtHdr #menu p , .all #menu h3{
	margin-left: 10px; /* サイドバーに配置されるすべてのエレメントに左マージンと右マージンが設定されている必要があります */
	margin-right: 10px;
}

/* #mainContent に関するヒント：
1. #mainContent と #menu の間のスペースは、#mainContent div の左マージンによって設定されます。#menu div に含まれるコンテンツの量に関係なく、#menu div のスペースは維持されます。#menu のコンテンツが終了した後のスペースに #mainContent div のテキストを挿入するには、この左マージンを削除します。
2. #mainContent div の幅より広いエレメントが #mainContent div 内に配置されると、フローティングエレメントの落下（フローティング状態ではない #mainContent 領域がサイドバーの下に配置されること）が発生する可能性があります。ハイブリッドレイアウトの場合（全体の幅の単位はパーセント、サイドバーの単位は em）、使用可能な幅を正確に計算できない場合があります。ユーザーのテキストサイズが平均よりも大きい場合、#menu div が広くなるため、#mainContent div のスペースが狭くなります。クライアントが Contribute を使用してコンテンツを追加する予定である場合は、この制限に注意してください。
3. 下の Internet Explorer の条件分岐コメントでは、#mainContent に「hasLayout」を設定するのにズームプロパティが使用されます。これにより、いくつかの IE 固有のバグを回避できます。
*/
.all #main { 

	margin: 30 10px 20 280; /* 右マージンは、パーセントまたはピクセルで設定できます。これにより、ページの右側にスペースが設定されます。 */
} 
.all #footer { 
	
	padding: 5 10 30 10;
	margin: 0;
	font-size: 10px;
	color: #555555;
	text-align: center;

} 
.all #footer p {
	margin: 0; /* フッターの最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
	padding: 10px 0; /* このエレメントの余白により、マージンの相殺を発生させることなく、マージンの効果とまったく同じように、スペースが設定されます */
}

/* 再使用できる各種クラス */
.fltrt { /* このクラスは、ページ上でフローティングエレメントを右側に配置するのに使用できます。プローティングエレメントは、ページ上でその横に配置されるエレメントの前に配置される必要があります。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* このクラスは、ページ上でフローティングエレメントを左側に配置するのに使用できます */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* このクラスは、div またはブレークエレメントに適用される必要があり、また、フローティングエレメントが完全に含まれているコンテナの末尾の直前にある最後のエレメントである必要があります */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}


.all #main h1 {
	background-color: #FFFFFF;
	border-bottom: 4px solid #589ed3;		/*h2タグの下線*/
	background-image: url(img/h2blue.gif);	/*h2タグの背景画像*/
	background-position: bottom;
	background-repeat: repeat-x;
	border-top: 1px solid #d6e9f1;			/*h2タグの上線*/

  margin: 0 0 20px 10;
  font-size: 1.3em;
  color: #24293a; /* 文字の色 */
  padding: 8px 8px 6px 14px; 
  letter-spacing : 2px;
}

.all #main h2 {
	margin: 0 0 10px 0;
	padding: 2px 5px;
	background-color: #fff7b3;
	border-left: solid 5px #FF9900;
	border-bottom: solid 1px #FF9900;
	font-size: 1.1em;
	color: #173502;
}

.all #main .text p {
	margin: 0;
	padding: 0;
	line-height: 150%;
}

.all #main .text {
	background-color: #fcfffc;
	margin: 10px;
	padding: 18px;
	width: 460px;
	border: solid 2px #b6ffcf;
	line-height: 140%;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;

}

.all #main .topix {
	font-size: 1.1em;
	font-weight: bold;
	color: #67081e;
	text-align: center;
	background-color: #fff9db;
	margin: 10 10 30 10px;
	padding: 10px;
	width: 460px;
	border: dotted 3px #ffc8bf;
	line-height: 140%;
}

.all #main .topix2 {
	font-size: 1.1em;
	font-weight: bold;
	color: #67081e;
	text-align: center;
	background-color: #ffeeec;
	margin: 10 10 30 10px;
	padding: 10px;
	width: 450px;
	border: dotted 3px #ffc8bf;
	line-height: 140%;
}

.all #main .banner {
	text-align: center;
	margin: 0 10 15 0px;

}

.all #main a:hover img {
 opacity: 0.85;
}

.all #menu a:hover img {
 opacity: 0.85;
}

.s {
		font-size: 0.8em;
}

.all #main .text2 {
	border: 1px dashed #d8c69a;
	margin: 10px;
	padding: 18px;
	background-color: #fdfff3;
	width: 460px;
	line-height: 140%;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;

}
.all #main ul {
	line-height: 150%;
	list-style-type: none;
}

.all #main li {
	background-image : url("img/pinksq.gif");
	background-repeat: no-repeat;
	background-position: 1px 4px;
	padding: 0 10px 20px 18px;
}

.all #main .bluesq ul {
	line-height: 150%;
	list-style-type: none;
	margin: 0;

}

.all #main .bluesq  li{
	background-image : url("img/bluesq.gif");
	background-repeat: no-repeat;
	background-position: 0px 2px;
	margin: 0 0 0 -20px;
	padding: 0 10px 20px 16px;
}

.footer {
	width: 800px;
	padding: 5 10 30 10;
	margin: 0;
	border-top: solid 1px #CCCCCC;
	font-size: 10px;
	color: #555555;
	text-align: center;
	background-color : #fbe8f2;
	clear: left;
}

.all #menu a{
display:block;
}

.all #menu div.m {
	width: 230px;
	background-color: #fffafa;
	background: url("img/menupink.gif") repeat-y;
	padding: 10px 0 10 20px;
	border-bottom: dashed 1px #b79393;
}

.all #menu div.top {
	width: 230px;
	background-color: #fffafa;
	background: url("img/menupink.gif") repeat-y;
	padding: 10px 0 10 20px;
	border-top: dashed 1px #b79393;
	border-bottom: dashed 1px #b79393;
}

.all #menu div.blog {
	width: 230px;
	background: url("img/menugreen.gif") repeat-y;
	background-color: #fdfff6;
	padding: 10px 0 10 20px;
	border-bottom: dashed 1px #4c6d43;
}

.all #menu div.blogtop {
	width: 230px;
	background-color: #fdfff6;
	background: url("img/menugreen.gif") repeat-y;
	padding: 10px 0 10 20px;
	margin-top: 15px;
	border-top: dashed 1px #4c6d43;
	border-bottom: dashed 1px #4c6d43;
}

.all #menu div.banner{
	clear: left;
	float: left;
	border: 0;
	width: 230px;
	padding: 10px;
	text-align: center;
}


.header img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0;
	padding: 0;
}

.box1
{
    margin: 0px 0px 0px 20px;
    background: url("img/box_middle.png") repeat-y;
    width: 450px;
}

.boxcontents
{
    padding: 10px 20px;
}


.column-img{
    display: block;
}

.q{
    margin: 2px 2px 4px 10px;
    font-size: 1.1em;
    font-weight: bold;
    padding: 10px 0 8px 26px;
    background: url("img/q.gif");
	background-repeat: no-repeat;
	background-position: 4px 10px 0 0px;
	border-top: 1px dotted #aaaaaa;
	}
	
.ans{
    margin: 0px 2px 4px 10px;
    padding: 4px 1px 14px 26px;
    background: url("img/a.gif");
	background-repeat: no-repeat;
	background-position: 2px 4px;
	}