@charset "utf-8";
/* CSS Document */

/* 余白をゼロクリア */

*  {
	margin : 0px;
	padding: 0px;
} 



/*　ページ全体の横幅 -左右に1ピクセル、増えるので+2pxしている*/
#contener {
		width : 752px;
		border: 1px solid #000000;
		margin : 5px auto;　/*ここで、ページ全体を中央に寄せる。上から5pxとっている　*/
		div align : center;
}

/* aはタイトル部分のボックス */
#title {
	height:108px;
	width :752px;
	border-bottom: 1px solid #000000;
	background-image: url('../douzyhou/pic/lesson-kanban-top.gif');
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
    }

/*------- コンテンツ部分のボックス -------*/
#b-box {
		
		width : 752px;
		font-size: 12px;	
	margin-left:auto;
	margin-right:auto;
}
/*------- コンテンツの中のセクション -------*/
.section01{
	width:700px;
	margin-left:auto;
	margin-right:auto;
}
.section01 img{
	display:block;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

/*------- キャラクターの入るdiv -------*/

.cara{
	padding-top: 0px;
	padding-right: 25px;
	padding-bottom: 0px;
	padding-left: 25px;
	}
	
/*--------------------------------------------------------
   クラス

--------------------------------------------------------*/
.red{
color:#FF0000;
}

.txt_right{
	text-align:right;
	}
.txt_left{
	text-align:left;
	}
.txt_center{
	text-align:center;
	}

/* 次のページ＞＞　上に戻る↑　の部分のDIVに使われてます*/
#page_control_01 ul{
	margin-left:0px;
	font-weight:bold;
	font-size:130%;
	}

#page_control_01 li{
	margin-left:100px;
	
	list-style-type: none;
	float:left;
}
/* 2pege目以降の　次のページ＞＞　上に戻る↑　の部分のDIVに使われてます*/
#page_control_02 ul{
	margin-left:0px;
	font-weight:bold;
	font-size:130%;
	}

#page_control_02 li{
	margin-left:120px;
	
	list-style-type: none;
	float:left;
}
/*　単体ページに使用厨　ライブラリページですね(^^ )　本部に戻ると　上に戻る↑ですよ */
#page_control_03 ul{
	margin-left:170px;
	font-weight:bold;
	font-size:130%;
	}

#page_control_03 li{
	margin-left:120px;
	
	list-style-type: none;
	float:left;
}



/*----- divのクラスにscrと名前を付けてbodyに配置してあります。-----*/
.scr {
	overflow: scroll;   /* スクロール表示 */ 
	width: 750px;
	height:150px;
	background-color: #ffffff;
	border-top:#666666 1px dotted;
  }

/* フッダー部分のボックス */
#footer {
	font-size: 12px;
	text-align: center;
}
	
	

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

h1 {
	font-size: 30px;
	color:#993300;
	padding-top: 30px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 30px;
}


h2 {
	font-size: 17px;
	margin: 0px;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 30px;
}

h3 {
	font-size: 15px;
	color:#3300ff;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 30px;
}

h4 {
	font-size: 15px;
	color:#000000;
	margin: 0px;
	padding-top: 0px;
	padding-right: 50px;
	padding-bottom: 0px;
	padding-left: 0px;
	overflow: visible;
	text-align: right;
}


p {
          font-size: 14px;
          padding: 0px 5px 5px 20px;
}

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

.style5 {
	font-size: 20px;
	font-weight: bold;
}



/*--------------------------------------------------------------*/
/*IE7で、未対応でした↓ */
span.18px-center{
	font-size: 18px;
	background-color:#FFFF00;
	font:bold;
	text-align:center;
}

/*--------------------------------------------------------------*/
/* HTMLソース

絵の具の 
<span style="background-color: #0099FF">青色</span>と 
<span style="background-color: #FFFF00">黄色</span>を混ぜると 
<span style="background-color: #33CC33">緑色</span>になります。

CSSから指定する場合↓
＜span class="yellow"＞ここだけ赤字＜/span＞

*/

span.yellow{
		background-color:#FFFF00;
		} 
		

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


/*-------------------------------*/
ul { 
          padding : 10px 5px 10px 30px; 
}  


/*-------------------------------*/
.category {
          font-size: 14px;
          color: #FFFFFF;
          background-color: #990000;
          padding: 5px;
          margin: 5px;
}