/* CSS Document */

/*-----▼----------------*/
/*-----▲----------------*/

/* Reset */

body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, 
brockquote, pre, table, caption, th, td, address, 
form, fieldset, legend, object {
  margin: 0;
  padding: 0;
}

h5, h6, pre, table, code, kbd, samp, acronym, input, textarea {
  font-size: 100%;
}

a, ins {
  text-decoration: none;
}

address, em, cite, dfn, var {
  font-style: normal;
}

input, textarea {
  font-family: sans-serif;
  font-weight: normal;
}

img {
  vertical-align: baseline;
}

a img {
  border: none;
}



html {
    margin-bottom:1px;
    height:100%;
    }
	
body{
  font-family:
  "ＭＳ Ｐゴシック", "MS P Gothic", 
 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", 
  "Osaka",
  Helvetica, Arial, sans-serif;
	background:#F6F4EF url(../image/common/main_bg.gif) repeat-x;
	font-size:small;
	color:#293E1C;
    height:100%;
	position:relative;/* IE7のズームによるposition表示崩れを防ぐ*/
}
button{
	cursor:pointer;
	background-repeat:no-repeat;
}

/* Setting */

body {
  background: #FFF;
  font-family: sans-serif;
  font-size: 13px;
  color: #333;
}

* html body { /* for IE6 */
  font-size: small;
}
  
*:first-child+html body { /* for IE7 */
  font-size: small;
}

ul {
  list-style-position: outside;
  list-style-type: none;
}

ol {
  list-style-position: outside;
}
  
table {
  border-collapse: collapse;
}

legend {
  color: #333;
}

div#main p,
div#main ul,
div#main ol,
div#main dl,
div#main blockquote,
div#main pre,
div#main table {
  margin: 1em 0;
}
/* Optionバグ対策 *//*

* html .smallFont {
  font-family: 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
}
  
*:first-child+html .smallFont {
  font-family: 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
}

* html ul li dl,
* html ol li dl {
  display: inline;
}

*:first-child+html ul li dl,
*:first-child+html ol li dl {
  display: inline;
}

*/

/*---------------------------------------------

Font Sizeメモ

20px : 154%
18px : 139%
16px : 124%
15px : 116%  125%
14px : 108%  117%
13px : 100%  108%
12px :  93%  100%
11px :  85%   92%

---------------------------------------------*/

/* Clearfix */
.clearf:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearf {
  min-height: 1px;
}

* html .clearf {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}
/* ===== 見出し ===== */
h1 { font-size : 160%;}
h2 { font-size : 130%;}
h3 { font-size : 125%;}
h4 { font-size : 110%;}
h5 { font-size : 105%;}
h6 { font-size : 90%;}


/* ===== リンク設定 ===== */
a:link 		{color: #004DDD; text-decoration: none}
a:active 	{color: #FFFFFF; text-decoration: none;}
a:visited 	{color: #883388; text-decoration: none;}
a:hover 	{ color:#FF6633; text-decoration: underline;}
a{cursor:pointer;}


.float_l{float:left;}
.float_r{float:right;}
.br2{margin:0 0 1em;}
.br3{margin:0 0 1.5em;}
.m20{margin:20px}
.center {
	margin-left:auto;
	margin-right:auto;
	display:block;
}
.t_center{
	text-align:center;
}
.pic_border img{
	padding:5px;
	border:1px solid #ccc;
	background-color:#FFF;
}
.pic_m5 img {
	margin:5px;
}
/* コンテンツ */
html, body {
	height:100%;
	width:auto;
	background:url(../image/tutorial/body.gif) top left repeat-x #FCFDFB;
}
#container {
	width: 880px;
	padding:0 0 0 12px;
	background:url(../image/tutorial/kage.png) top left repeat-y;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 0 -44px 32px; /* 下部marginはfooterの高さのネガティブmargin */
}

body > #container {
　height: auto;
}
.header {
	width: 856px;
	height:159px;
	margin:0;
	background:url(../image/tutorial/head.png) top left no-repeat;
}
.top_logo{
	position:absolute;
	left:57px;
	top:7px;
}

.contents_area, .contents_area_single{
	width:820px;
	height:100%;
	background:url(../image/tutorial/container_bg.png) top left no-repeat;
	min-height:600px;
	padding:26px 20px 0 16px;

	height: auto !important;
	height: 100%;
}
.contents_area_single{
	background:url(../image/tutorial/container_single_bg.png) top left no-repeat;
}

/*-ヘッダーボタン-*/
ul.header_menu {
	overflow:hidden;
	margin:0;
	width: 856px;
	height:159px;
}

ul.header_menu li {
	width:88px;
	height:74px;
	list-style:none;
	overflow:hidden;
	position:relative;
	margin:0;
}

ul.header_menu li img {
	position:absolute;
}

ul.header_menu li a:hover {/*-IE6、IE7用-*/
	background:transparent;
}


ul.header_menu li.about {
	position:absolute;
	top:32px;
	left:320px;
}

ul.header_menu li.about img {
	left:0;
	top:0;
}

ul.header_menu li.about a:hover img {
	left:0;
	top:-74px;
}

ul.header_menu li.school {
	position:absolute;
	top:46px;
	left:418px;
}

ul.header_menu li.school img {
	left:-88px;
	top:0;
}

ul.header_menu li.school a:hover img {
	left:-88px;
	top:-74px;
}

ul.header_menu li.bbs_up {
	position:absolute;
	top:64px;
	left:510px;
}

ul.header_menu li.bbs_up img {
	left:-176px;
	top:0;
}

ul.header_menu li.bbs_up a:hover img {
	left:-176px;
	top:-74px;
}
ul.header_menu li.friend {
	position:absolute;
	top:80px;
	left:602px;
}

ul.header_menu li.friend img {
	left:-264px;
	top:0;
}

ul.header_menu li.friend a:hover img {
	left:-264px;
	top:-74px;
}

ul.header_menu li.gray img {
	top:-222px;
}

/*-ヘッダーボタン-*/
/*-新規登録ボタン-*/
div.regist_page {
	overflow:hidden;
	margin:0 0;
	width:184px;
	height:52px;
	position:relative;
	top:60px;
	left:12px;
}

div.regist_page div {
	height:26px;
	overflow:hidden;
	position:relative;
	margin:0;
}

div.regist_page div img {
	position:absolute;
	left:0;
	top:0;
}

div.regist_page div a:hover img {
	left:0;
	top:-26px;
}
div.regist_page div a:hover{/*-IE6、IE7用-*/
	background:transparent;
}

/*-新規登録ボタン-*/

/*-パンくずリスト-*/
ol#topicPath {
	margin: 0 0 10px 2px;
	padding: 0;
	font-size: 85%;
	list-style: none;
	height:1em;
	position:absolute;
	top:164px;
	left:60px;
	letter-spacing:1px;
}
ol#topicPath li {
	float: left;
	padding-right: 7px;
	padding-left: 10px;
	background: url(../image/tutorial/path_pic.gif) no-repeat 0 50%;
}
ol#topicPath li.home {
	padding-left: 0;
	background: none;
}
ol#topicPath li a:link,
ol#topicPath li a:visited {
	color: #36F;
	text-decoration: underline;
}
ol#topicPath li a:hover,
ol#topicPath li a:active {
	color: #FF6633;
	text-decoration: underline;
}
ol#topicPath li em {
	color:#238000;
	font-style: normal;
	font-weight: normal;
}
/*-パンくずリスト-*/
/*-ページ移動ナビ-*/
.page_navi{
	margin:0;
	float:right;
}
div.m_tb30{
	margin:30px 0;
}
.page_navi ul{
	text-align:center;
	list-style:none;
	overflow:hidden;
	float:left;
	width:auto;
	margin:0 0 0 15px;
}
.page_navi li{
	float:left;
	border:1px solid #C2D1B4;
	padding:1px 0 1px 1px;
	margin:0 6px 0 0;
}
.page_navi li a{
	text-decoration:underline;
	padding:1px 8px 2px;
	color:#335F19;
	background-color:#F4FAE6;
}
.page_navi li a:hover{
	text-decoration:underline;
	color:#0C6DB7;
	background-color:#98E3EA;
}
.page_navi li.current_page{
	background-color:#FDF16C;
	color:#9B5D00;
	padding:1px 8px 1px;
}
/*-ページ移動ナビ-*/
/*-ページトップへ-*/
.page_top{
	margin:0 0 0 530px;
	text-align:right;
}
.contents_single_in .page_top{
	margin:0 0 0 720px;
}
.page_top a{
	color:#337F10;
	background: url(../image/tutorial/p_3kaku.gif) left 3px no-repeat;
	border-bottom:1px solid #FFF;
	padding:0 0 0 20px;
	text-decoration:none;
}
.page_top a:hover {
	border-bottom:1px solid #337F10;
}






/*-フッター-*/
.footer, .push {
	height: 44px; /* pushとfooterは同じ高さ */
}
.footer {
	width: 857px;
	margin: 0 0 0 44px;
	background:#379310 url(../image/tutorial/footer.gif) no-repeat left top;
	text-align:center;
	overflow:hidden;
}
.footer span{
	color:#FFF;
	font-weight:bold;
	font-size:120%;
	position:relative;
	top:-13px;
	right:10px;
}
.footer img{
	margin:8px 0 0 0px;
}