@charset "UTF-8";
@import url("reset.css");
@import url("clearfix.css");
@import url("base.css");

/* CSS Document */

/*area1
-------------------------------------------------------------*/

#courseInfo{
	width:570px;
}

h1{
	color:#A67C52;
	font-size:2.0em;
	font-weight:bold;
	width:270px;
	height:65px;
	background-image: url(../img/common/main-top.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding:20px 236px 0 44px;
}

.course{
	width:540px;
	padding:0 0 20px 0;
	clear:left;
}
.area1{
	width:540px;
}

.area1Left{
	width:185px;
	background-color: #fff;
	float:left;
	display:inline;
	margin:22px 0 0 15px;
	padding:0 0 15px 0;
}

.area1Left h2{
	color:#009245;
	font-size:1.6em;
	font-weight:bold;
	width:155px;
	background-color: #E6E6E6;
	float:left;
	padding:5px 5px 5px 5px;
	margin:15px 15px 10px 10px;
}

*html .area1Left h2{
	margin:15px 5px 10px 5px;
}

.area1Left h3{
	width:155px;
	color:#F15A24;
	font-size:1.2em;
	margin:8px 15px 0 15px;
	clear:left;
}

.area1Left p{
	color:#000;
	font-size:1.2em;
	margin:3px 15px 0 15px;
}

.area1Right{
	width:255px;
	height:190px;
	float:left;
	background-image: url(../img/course/course-area1-right.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding:30px 34px 46px 15px;
	display:inline;
	margin:0 0 0 9px;
}

#courseBox{
	width:540px;
	background-image: url(../img/course/course-bg002.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}
/*area2
-------------------------------------------------------------*/

.area2{
	width:540px;
	clear:left;
}

.area2Top{
	width:470px;
	background-image: url(../img/course/course-bg003.gif);
	background-repeat: repeat-y;
	background-position: left top;
	padding:0 0 10px 0;
	margin:3px 15px 0 15px;
	clear:left;
}

.area2Top h3{
	display:inline;
	float:left;
	margin:15px 30px 15px 15px;
}

.area2Top p{
	font-size:1.2em;
	line-height:1.75em;
	width:275px;
	float:left;
	background-image: url(../img/course/course-marker.gif);
	background-repeat: repeat-y;
	background-position: left top;
	display:inline;
	padding:0 5px 0 5px;
	margin:4px 0 0 0;
}

.area2Bottom{
	width:540px;
	clear:left;
	padding:0 0 15px 0;
}

.area2Left{
	width:131px;
	float:left;
	display:inline;
	padding:0 0 0 15px;
}

.area2LeftBox{
	width:111px;
	height:127px;
	background-image: url(../img/course/course-area2-left.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding:26px 0 0 20px;
}

.area2LeftBox h4{
	font-size:1.4em;
	color:#008BAD;
	font-weight:bold;
	padding:4px 0 0 15px;
}


.area2Right{
	width:364px;
	float:left;
	background-image: url(../img/course/course-area2-righttop.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

.area2Right h3{
	color:#F15A24;
	font-size:1.5em;
	font-weight:bold;
	padding:30px 20px 0 30px;
}

.area2Right p{
	min-height:100px;
	font-size:1.2em;
	line-height:1.65em;
	padding:5px 25px 0 30px;
}

*html .area2Right p{
	height:100px;
}

.pagetop{
	font-size:1.2em;
	text-align:right;
	margin:1em 0 1em 0;
}

.pagetop a{
	color:#4d4d4d;
	text-decoration:underline;
}

.pagetop a:hover
,.pagetop a:focus
,.pagetop a:active{
	color:#4d4d4d;
	text-decoration:none;
}

.aka{
	color:#FF0000;
}

/*music
-------------------------------------------------------------*/

#table{
	width:480px;
	padding:20px;
}

#table td{
	font-size:1.2em;
	vertical-align: middle;
	background-color: #fff;
}

#table td.m1{
	color:#fff;
	vertical-align: middle;
	background-color: #F15A24;
	padding:5px 0;
}

#table td.naiyo{
	padding:2px;
}

#courseBox #musicH2{
	color:#009245;
	font-size:1.6em;
	font-weight:bold;
	padding:20px 0 0 20px;
}
/*lesson
-------------------------------------------------------------*/

div#lesson{
	width:503px;
	clear:left;
	padding:0 0 0 5px;
}

div#lessonBody{
	width:503px;
	height:158px;
	background-image: url(../img/course/course-lesson-body.png);
	background-repeat: no-repeat;
	background-position: left top;
}

div#lessonBody p{
	font-size:1.2em;
	padding:0 40px 0 40px;
}

*html .iepngfix {
  behavior: expression(IEPNGFIX.fix(this));
  }