@charset "UTF-8";
/* CSS Document */
#menu span.m3 a{background-position:left center;}
/* headtag ---------------------------- */
#stage h2,#stage h3,#stage h4,#stage h6{
	font-size: 1px;
	line-height: 1px;
	text-indent: -1000em;
	display: block;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
/* lesson_index-style */
#stage #box-index {
	height:auto;
	width:650px;
}
#box-index h3{
	background-image: url(../images/body_lesson.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 40px;
	width: 650px;
}
#box-index a,#box-index a:visited{
text-decoration: none;
}
#box-index dl{
background-image: url(../images/dotline.gif);
background-repeat: repeat-x;
background-position: left bottom;
display: block;
width: 650px;
padding: 15px 0;
}
#box-index dl.bottom{
background-image: none;
padding: 15px 0 0 0;
}

/* crearfix */
#box-index dl:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#box-index dl{ 
zoom: 100%;
}
#box-index dl { display: inline-table;}
/* Hides from IE-mac ￥*/
* html #box-index dl { height: 1%;}
#box-index dl { display: block;}
/* End hide from IE-mac */

#box-index dt{
font-size: 14px;
font-weight: bold;
float: left;
display:block;
}
#box-index dt.volume{
color: #019ac3;
width: 80px;
}
#box-index a dt.volume,#box-index a:visited dt.volume{
color: #019ac3;
}
#box-index a:hover dt.volume,#box-index a:active dt.volume{
color: #6cc7e0;
text-decoration: underline;
}

#box-index dt.title{
width: 250px;
}
#box-index a dt.title,#box-index a:visited dt.title{
color: #4C4C4C;
}
#box-index a:hover dt.title,#box-index a:active dt.title{
color: #6cc7e0;
text-decoration: underline;
}


#box-index dd{
float: left;
width: 300px;
margin:0 0 0 20px;
display:block;
}
#box-index a dd,#box-index a:visited dd{
color: #666666;
}
#box-index a:hover dd,#box-index a:active dd{
color: #6cc7e0;
text-decoration: underline;
}


/* lesson_common-style */
#stage h2.title{
	background-image: url(../images/hl.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 16px;
	width: 301px;
}
#stage .visual-index{
width:650px;
height:290px;
position: relative;
}
#stage .visual-index img{
position: absolute;
top: -20px;
}
#stage .visual{
width:650px;
height:225px;
position: relative;
}
#stage .visual img{
	position: absolute;
	top: -10px;
}

#stage #box-left {
	height:auto;
	width:480px;
	padding:0px;
	margin:0px;
	float:left;
	line-height:1.5em;
}
#stage #box-right {
	height:auto;
	width:140px;
	padding:0px;
	margin:0 0 0 30px;
	float:left;
}
#stage .wrap-visual{margin:0 0 30px 0;}
/* left p/span */
#stage #box-left p{
	margin: 0 0 10px 0;
	padding: 0px;
	color:#3C3C3C;
}
#stage #box-left span{
	color:#000;
	font-weight:bold;
}
#stage #box-left span.line{
	color:#000;
	text-decoration:underline;
	font-weight:normal;
}
#stage #box-left span.line2{
	color:#000;
	text-decoration:underline;
}
#stage #box-left span.color{
	color:#F00;
}
#stage #box-left span.color2{
	color:#03C;
}
#stage #box-left span.color-line{
	color:#F00;
	text-decoration:underline;
}
#stage #box-left p.mb{
	margin: 0 0 30px 0;
	padding: 0px;
}
#stage #box-left p.nm{
	margin: 0px;
	padding: 0px;
}
#stage #box-left .caption{
	color: #394853;
	margin:0 0 10px 0;
	padding: 10px;
	border: 1px dotted #394853;
	background-color: #F8FAFF;
}
#stage #box-left .photo-left{
float: left;
width: 200px;
}
#stage #box-left .photo-right{
float: left;
width: 200px;
margin:0 0 0px 20px;
}
#stage #box-left .text-left{
float: left;
height: auto;
width: 260px;
}
#stage #box-left .text-right{
margin: 0 0 0 20px;
float: left;
height: auto;
width: 260px;
}
/* point */
#stage #box-left #wrap-point{
	padding:20px 0 0 0;
	margin:0 0 20px 0;
	border-top:#999 dotted 1px;	
}
#stage #box-left #wrap-point2{
	padding:20px 0 0 0;
	margin:0px;
	border-top:#999 dotted 1px;	
}
/* right */
#box-right h4{
background-image: url(../images/bar_profile.gif);
background-repeat: no-repeat;
background-position: left top;
height: 40px;
width: 140px;
margin: 0px;
}
#box-right img{
	margin:0 0 10px 0;
}
#box-right p{
font-size: 11px;
color: #808080;
}
#box-right table{
font-size: 10px;
height:auto;
width:140px;
margin:0 0 10px 0;
padding:0 0 5px 0;
}
#box-right th{
	width: 40px;
	text-align: left;
	vertical-align: top;
	font-weight: normal;
	color: #019ac3;
	padding: 5px 5px 5px 0;
	background-image: url(../images/dotline.gif);
	background-repeat: repeat-x;
	background-position: left bottom;
}
#box-right td{
padding: 5px 0 5px 0;
background-image: url(../images/dotline.gif);
	background-repeat: repeat-x;
	background-position: left bottom;
}
#box-right td span{
	font-size: 10px;
	line-height: normal;
	color: #FBA18F;
	margin-top: 2px;
	display:block;
}

/* number */
#stage .number{
	height: 25px;
	width: 650px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #cccccc;
	border-bottom-color: #cccccc;
	padding: 5px 0 0 0;
	margin:40px 0 0 0;
}
#stage .number ul{
	margin: 0px auto;
	display:block;
}
#stage .number li{	
	float:left;
}
#stage .number li.icon{
	font-size: 1px;
	line-height: 1px;
	background-image: url(../images/icon_nowpage.gif);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -1000em;
	display: block;
	height: 19px;
	width: 60px;
	overflow: hidden;
	margin:0 5px 0 0;
}
#stage .number li.page{
	float:left;
}
#stage .number li.page a,#stage .number li.page a:visited{
	text-decoration: none;
}
#stage .number li.page a.thispage{
	color: #FFFFFF;
	background-color: #FFB29F;
}
#stage .buttons2 li.next{
float:right;
margin-left:5px;
}
#stage .buttons2 li.next a{
	font-size: 1px;
	line-height: 1px;
	background-image: url(../images/btn_next.gif);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -1000em;
	display: block;
	height: 19px;
	width: 90px;
	overflow: hidden;
}
#stage .buttons2 li.next a:hover{
background-position: left bottom;
}
#stage .buttons2 li.previous{
float:right;
}
#stage .buttons2 li.previous a{
font-size: 1px;
	line-height: 1px;
	background-image: url(../images/btn_prev.gif);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -1000em;
	display: block;
	height: 19px;
	width: 90px;
	overflow: hidden;
}
#stage .buttons2 li.previous a:hover{
background-position: left bottom;
}




/* buttons3----------------------------------------- */

#stage .buttons3{
	height: 25px;
	width: 650px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #cccccc;
	padding: 5px 0 0 0;
	margin: 0px;
	clear:both;
}
#stage .buttons3 li.next-pg{
float:right;
margin-left:5px;
}
#stage .buttons3 li.next-pg a{
	font-size: 1px;
	line-height: 1px;
	background-image: url(../images/btn_next_pg.gif);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -1000em;
	display: block;
	height: 19px;
	width: 90px;
	overflow: hidden;
}
#stage .buttons3 li.next-pg a:hover{
background-position: left bottom;
}
#stage .buttons3 li.previous-pg{
float:right;
}
#stage .buttons3 li.previous-pg a{
font-size: 1px;
	line-height: 1px;
	background-image: url(../images/btn_prev_pg.gif);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -1000em;
	display: block;
	height: 19px;
	width: 90px;
	overflow: hidden;
}
#stage .buttons3 li.previous-pg a:hover{
background-position: left bottom;
}
/* end buttons3 */






/* top button------------ */
#stage .number2{
	height: 25px;
	width: 650px;
	border-bottom: 1px solid #CCC;
	padding: 5px 0 0 0;
	margin:40px 0 20px 0;
}
#stage .number2 ul{
	margin: 0px auto;
	display:block;
}
#stage .number2 li{	
	float:left;
}
#stage .number2 li.next-pg{
float:right;
margin-left:5px;
}
#stage .number2 li.next-pg a{
	font-size: 1px;
	line-height: 1px;
	background-image: url(../images/btn_next_pg.gif);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -1000em;
	display: block;
	height: 19px;
	width: 90px;
	overflow: hidden;
}
#stage .number2 li.next-pg a:hover{
background-position: left bottom;
}
#stage .number2 li.previous-pg{
float:right;
}
#stage .number2 li.previous-pg a{
font-size: 1px;
	line-height: 1px;
	background-image: url(../images/btn_prev_pg.gif);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -1000em;
	display: block;
	height: 19px;
	width: 90px;
	overflow: hidden;
}
#stage .number2 li.previous-pg a:hover{
background-position: left bottom;
}




/* number3 */
#stage .number3{
	height: 25px;
	width: 650px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #cccccc;
	border-bottom-color: #cccccc;
	padding: 5px 0 0 0;
	margin:30px 0 0 0;
}
#stage .number3 ul{
	margin: 0px auto;
	display:block;
}
#stage .number3 li{	
	float:left;
}
#stage .number3 li.icon{
	font-size: 1px;
	line-height: 1px;
	background-image: url(../images/icon_page.gif);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -1000em;
	display: block;
	height: 19px;
	width: 38px;
	overflow: hidden;
	margin:0 5px 0 0;
}
#stage .number3 li.indexpage{
	float:left;
}
#stage .number3 li.indexpage a:visited{
	text-decoration: none;
}
#stage .number3 li.indexpage a.thispage{
	color: #FFFFFF;
	background-color: #FFB29F;
}
/* end number3 */




/* buttons2----------------------------------------- */

#stage .buttons2{
	height: 25px;
	width: 650px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #cccccc;
	padding: 5px 0 0 0;
	margin: 0px;
	clear:both;
}
#stage .buttons ul{
	margin: 0px auto;
	display:block;
}
#stage .buttons li{
float:left;
}
#stage .buttons2 li.entry{
float:left;
margin:0px;
}
#stage .buttons2 li.entry a{
	font-size: 1px;
	line-height: 1px;
	background-image: url(../images/btn_lessontop.gif);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -1000em;
	display: block;
	height: 19px;
	width: 200px;
	overflow: hidden;
}
#stage .buttons2 li.entry a:hover{
    background-position: left bottom;
}








/* pickup */
#stage #pickup{
	margin: 20px 0 0 0;
	padding: 20px 0 0 0;
	height: auto;
	width: 480px;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #CCCCCC;
}
#stage #pickup h6{
	background-image: url(../images/hl_point.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 40px;
	width: 220px;
}
#stage #pickup dl{
}
#stage #pickup dt{
font-weight: bold;
margin: 0 0 10px 0;
font-size: 13px;
color: #25334D;
}
#stage #pickup dd{
font-size: 12px;
color: #565B66;
background-image: url(../images/icon_yaji.gif);
background-position: left 3px;
background-repeat: no-repeat;
padding: 0 0 0 14px;
margin: 0 0 3px 0;
}
/* btn add 100602 */
#box-left .wrap-colorbox,#box-left .wrap-colorbox:visited{
	height:auto;
	background-color:#ECECEC;
	display:block;
	border:1px solid #CCC;
	padding:15px;
	color:#666;
	text-decoration:none;
}
#box-left .wrap-colorbox:hover,#box-left .wrap-colorbox:active{background-color:#F6F6F6;}
.wrap-colorbox .image-l{
	width:100px;
	height:auto;
	float:left;
}
.wrap-colorbox .text-r{
	width:335px;
	height:auto;
	float:left;
	margin:5px 0 0 13px;
}
.wrap-colorbox h4.t-toyou{
	width:235px;
	height:25px;
	background-image:url(../images/title_cs.gif);
	background-position:left top;
	background-repeat:no-repeat;
}
.wrap-colorbox .btn-cs{
	width:335px;
	height:25px;
	margin:0px !important;
	text-indent:-1000em;
	overflow:hidden;
	font-size:1px;
	line-height:1px;
	background-image:url(../images/btn_cs.gif);
	background-position:left top;
	background-repeat:no-repeat;
}
.wrap-colorbox:hover .btn-cs,.wrap-colorbox:active .btn-cs{background-position:left bottom;}