@charset "UTF-8";

/* CSS Document */

/* ★基本 --------------------------------------------------------------------------------- */

body {
	text-align:center;
	margin: 0px; padding:0px;
	background: url(../img/body_bg.gif) top center repeat-y #fff ; 
	}

a:link{text-decoration:underline; color:#526440;}
a:visited{text-decoration:underline; color:#333333;}
a:hover{text-decoration:underline; color:#351914;;}
a:active{text-decoration:underline; color:#351914;}
a img{border:none;}


h3,p,ul{
margin:0 ;
padding:0 ;
	}

img { border:0 }	
.txt-c {text-align:center }
.txt-r {text-align:right }
	

/* ★大枠 --------------------------------------------------------------------------------- */

#main {
	width:800px ;
	background:#fff;
	border-left:0px solid #300000 ;
	border-right:0px solid #300000 ;
	margin:0 auto ;
	}
	

/* ★ヘッダー --------------------------------------------------------------------------------- */

#main #header {
	width:100% ;	/*ヘッダーの横幅*/
	height:91px ;	/*ヘッダーの高さ*/
	margin:0 auto;	/*ヘッダーを中央寄せにする。左寄せならこの行を取る*/
	padding:0 ;
	background:url(../img/header_bg.gif) 0 bottom repeat-x ;/*ロゴ画像*/
	clear:both ;}

/* logo */
#main #header h1 {
	width:260px ;	/*ロゴ画像横サイズ*/
	height:44px ;	/*ロゴ画像縦サイズ*/
	margin:0px 0 0 30px ;
	padding:19px 0 0 0;
	background:url(../img/logo.gif) left 19px no-repeat ;/*ロゴ画像*/
	float:left ;}

#main #header h1 a{
	width:260px ;	/*ロゴ画像横サイズ*/
	height:44px ;	/*ロゴ画像縦サイズ*/
	display:block ;}

#main #header h1 span { display:none ;}

#main #header h2{ display:none }


/* header navi 枠  */
#main #header #header-right {
	width:395px ;
	padding-right:20px ;
	float:right;
	}



/* ヘッダーナビ */

#main #header p#header-navi{
	margin:0 ;
	float:right
	}
#main #header p#header-navi a{
	width:90px ;	/*画像横サイズ*/
	height:11px ;	/*画像縦サイズ*/
	margin:40px 0px 0 0 ;	/*左側ロゴと下位置を合わすためのマージン*/
	padding:0 ;
	display:block ;
	text-indent:-9999px ;
	font-size:1px ;
	float:left ;
}


#main #header p#header-navi span { display:none ;}

#main #header p#header-navi a.hn01 { background:url(../img/header_navi_bg.gif) left top }
#main #header p#header-navi a.hn01:hover { background:url(../img/header_navi_bg.gif) 0 -11px }
#main #header p#header-navi a.hn02 { background:url(../img/header_navi_bg.gif) -91px 0 ;width:98px}
#main #header p#header-navi a.hn02:hover { background:url(../img/header_navi_bg.gif) -91px -11px ;width:98px}
#main #header p#header-navi a.hn03 { background:url(../img/header_navi_bg.gif) -188px 0 ;width:98px}
#main #header p#header-navi a.hn03:hover { background:url(../img/header_navi_bg.gif) -188px -11px ;width:98px}
#main #header p#header-navi a.hn04 { background:url(../img/header_navi_bg.gif) -286px 0 ;width:106px }
#main #header p#header-navi a.hn04:hover { background:url(../img/header_navi_bg.gif) -286px -11px ;width:106px}



/* ★サンプル --------------------------------------------------------------------------------- */


#main #sample {
	width:750@x ; 	/*サンプル全体の幅*/
	height:175px ; 	/*サンプルの高さ*/
	margin:0 ;
	background:#333;
	clear:both ;}





/* ★日付けで四則演算 --------------------------------------------------------------------------------- */
#main #sample #arith { 
	width:150px ;
	height:170px ;
	float:left ;
	margin:0px 0px 0px 0px ;
	padding:0px 5px 0px 5px ;
	background:#333;
	text-align:center }

#main #sample #arith form { margin:0 ;padding:0 }




#main #sample #arith table {
	width:150px ;
	margin:0 auto ;
	margin-top:0px ;
	text-align:center ;
	font-size:75% ;
	color:#FFF ;
	}
#main #sample #arith table td {
	padding:8px 0 ;
	border-bottom:0px solid #666 ; }

/* 項目画像 */
#main #sample #arith table td .arith01,
#main #sample #arith table td .arith02,
#main #sample #arith table td .arith03{
	height:13px ;
	margin-bottom:6px ;
	display:block ;
	text-indent:-9999px;
	}
#main #sample #arith table td .arith01{ background:url(../img/arith01.gif) no-repeat;}
#main #sample #arith table td .arith02{ background:url(../img/arith02.gif) no-repeat;}
#main #sample #arith table td .arith03{ background:url(../img/arith03.gif) no-repeat;}


#main #sample #arith table td input.arith-input {
	margin-left:3px ;
	margin-top:3px ;
	cursor:pointer ;}
	
#main #sample #arith table td input.ymd {
	text-align:right;
    }




/* ★直角三角形 --------------------------------------------------------------------------------- */
#main #sample #triangle { 
	width:145px ;
	height:165px ;
	float:left ;
	margin:0px 0px 0px 0px ;
	padding:10px 5px 0px 5px ;
	background:#3b2e3f;
	text-align:center }

#main #sample #triangle table {
	width:135px ;
	line-height: 110%;
	margin:0 auto ; }
	
#main #sample #triangle table th{
	width:140px ;
	margin:0 auto ;
	padding-bottom:1px ;
	text-align:center ;
	font-size:80% ;
	color:gray ; }
	
	
#main #sample #triangle table td {
	padding:4px 0 ;
	margin-top:1px;
	text-align:center ;
	font-size:70% ;
	color:#FFF ;
	border-top:1px solid #666 ; }

#main #sample #triangle form { margin:0 ;padding:0 }

#main #sample #triangle table td input.odd_n {
	text-align: right ;
	margin-left:20px ;
    float:left ;
	cursor:pointer ;}

#main #sample #triangle table td input.ok {
	margin-left:20px ;
	margin-right:0px ;
    cursor:pointer ;
  }
  
#main #sample #triangle table td input.hen {
	text-align: right ;
	}

/* ★ツェラーの公式 --------------------------------------------------------------------------------- */
#main #sample #zeller { 
	width:145px ;
	height:165px ;
	float:left ;
	margin:0px 0px 0px 0px ;
	padding:10px 5px 0px 5px ;
	background:#524641;
	text-align:center }

#main #sample #zeller table {
	width:135px ;
	line-height: 130%;
	margin:0 auto ; }
	
#main #sample #zeller table th{
	width:140px ;
	margin:0 auto ;
	padding-bottom:1px ;
	text-align:center ;
	font-size:80% ;
	color:gray ; }
	
	
#main #sample #zeller table td {
	padding:4px 0 ;
	margin-top:1px;
	text-align:center ;
	font-size:70% ;
	color:#FFF ;
	border-top:1px solid #666 ; }

#main #sample #zeller form { margin:0 ;padding:0 }

#main #sample #zeller table td input.ymd {
	text-align: right ;
	cursor:pointer ;}

#main #sample #zeller table td input.ok2 {
    float:center ;
    cursor:pointer ;
  }
  




/* ★ナビゲーション --------------------------------------------------------------------------------- */

#main #navi {
	width:100% ; 	/*ナビ全体の幅*/
	height:54px ; 	/*ナビ全体の高さ*/
	background:url(../img/navi/bg.gif) repeat-x ;	/*ナビ全体の背景画像があればここに*/
	clear:both ;}

#main #navi ul {
	width:750px ; 	/*ナビの幅*/
	margin:0px auto;/*ナビの位置*/
	padding:0 ;
	list-style-type:none ;}

#main #navi ul li { 
	height:54px ; 	/*ナビの高さ*/
	width:107px ;
	margin:0px ;
	padding:0 ;
	float:left ;}

#main #navi ul li a { 
	height:54px ;	/*画像縦サイズ*/
	width:107px ;
	text-indent:-9999px;
	text-align:left;
	display:block ;}

#main #navi ul li img{ 
	float:left}
	

/*ナビ画像*/
#main #navi ul li a#navi01 {
	background:url(../img/navi/01_1.gif) no-repeat 0 0 ;}	/*ナビの背景画像*/
#main #navi ul li a#navi01:hover {
	background:url(../img/navi/01_2.gif) no-repeat 0 0 ;}	/*マウスオーバー時の背景画像の位置*/

#main #navi ul li a#navi02 {
	background:url(../img/navi/02_1.gif) no-repeat 0 0 ;}
#main #navi ul li a#navi02:hover {
	background:url(../img/navi/02_2.gif) no-repeat 0 0 ;}

#main #navi ul li a#navi03 {
	background:url(../img/navi/03_1.gif) no-repeat 0 0;}
#main #navi ul li a#navi03:hover {
	background:url(../img/navi/03_2.gif) no-repeat 0 0;}

#main #navi ul li a#navi04 {
	background:url(../img/navi/04_1.gif) no-repeat 0 0;}
#main #navi ul li a#navi04:hover {
	background:url(../img/navi/04_2.gif) no-repeat 0 0;}

#main #navi ul li a#navi05 {
	background:url(../img/navi/05_1.gif) no-repeat 0 0;}
#main #navi ul li a#navi05:hover {
	background:url(../img/navi/05_2.gif) no-repeat 0 0;}

#main #navi ul li a#navi06 {
	background:url(../img/navi/06_1.gif) no-repeat 0 0;}
#main #navi ul li a#navi06:hover {
	background:url(../img/navi/06_2.gif) no-repeat 0 0;}

#main #navi ul li a#navi07 {
	background:url(../img/navi/07_1.gif) no-repeat 0 0;}
#main #navi ul li a#navi07:hover {
	background:url(../img/navi/07_2.gif) no-repeat 0 0;}



/* ★コンテンツ大枠 --------------------------------------------------------------------------------- */

#main #wrapper-box {
	width:760px ;
	margin:5px auto 13px auto ;
	clear:both ;
	/*for IE 5.5-7*/
	zoom:1;	}

#main #wrapper-box:after {
	/*for modern browser*/
	content:".";
	display: block;
	height:0px;
	clear:both;
	visibility:hidden;
	}


/* ★コンテンツ --------------------------------------------------------------------------------- */

#main #contents {
	width:750px ;
	margin:20px 0 0px 0px ;
	padding:0px 0px 0px 0px ;
	text-align:left ;
	float:left ;
}

#main #contents #top_h3 {
	width:100%;
	height:26px ;
	padding:0 ;
	margin:10px 0 10px 0 ;
	text-align:left ;
	text-indent:-9999px;
	background:url(../img/h3_topix.gif) 0 0 no-repeat ;	
	}

#main #contents p{
	font-size: 85% ;
	line-height:140%;}

table,td,th { border-collapse: collapse; }


/* トピックス */

/* ボックス共通設定 */
#main #contents .box-topix {
	margin:0 0 0px 16px;
	padding:0 ;
	text-align:left ;
	font-size:85% ;
	/*for IE 5.5-7*/
	zoom:1;	}

#main #contents .box-topix:after {
	/*for modern browser*/
	content:".";
	display: block;
	height:0px;
	clear:both;
	visibility:hidden;
	}

#main #contents .box-topix h3 { 
    color:#0e151e ;
    font-style: italic;
    font-size:130% ;
    }

#main #contents .box-topix h4 { 
    color:gray ;
    font-style: italic;
    font-size:110% ;
    }

/* topix text */
#main #contents .box-topix div {
	margin-left:20px  ;
	padding:0 0 0 16px ;
	border-left:3px dotted #5a625a ;}

/*text*/

#main #contents .box-topix div p {
	margin:0px 0px 15px 0px ;
	color:#333 ;
	}

#main #contents .box-topix div p img {
	margin-left:4px ;
	vertical-align:middle ;
	}
	
#main #contents .box-topix div p a{
	color:#333}
#main #contents .box-topix div p a:hover{
	color:#CC3333}

#main #contents .box-topix div span {
	padding:0 0 0 8px ;
	color:#6F382C ;
	background:url(../img/top/ico_topix.gif) 0px 3px no-repeat ;		
	}
/*  */

	

/* MZ3 目次 */
#main #contents #mokuji { 
	float:center ;
	margin:0px 0px 0px 0px ;
	padding:5px 10px 10px 10px ;
	background:#9eca9a;
	line-height: 120%;
	text-align:left }


/* ページトップへ */
#pagetop p	{
    text-align:right ;
    }
    
    a:link.pagetop{text-decoration:none; color:gray;}
    a:visited.pagetop{text-decoration:none; color:green;}
    a:hover.pagetop{text-decoration:underline; color:black;}
    a:active.pagetop{text-decoration:none; color:blue;}

	
/* フッター */
#footer {
	padding:8px 0;
	margin:0px auto 0px auto;
	color:#FFF;
	background:#5a625a;
	clear:both;
	font-size:70% ;
}
#footer a{
	color:#ccc }