/* system.css
/*
/* システムページスタイル
/* 
/* 1：#container
/*    1：#course60、#course80
/*    2：#option
/*    3：#howto
/*    4：#attention
------------------------------------------------------------------------------*/


/* 1：#container
------------------------------------------------------------------------------*/
div.flame{
	background-image: url("/img/flame_bottom3.gif");
}

div#container h2#system{
	width: 670px;
	height: 30px;
	text-indent: -9999px;
	background: url("/img/system_h2.gif") no-repeat left top;
	margin: 5px 0;
}

	/* 1：#belief
	------------------------------------------------------------------------------*/
	div#container div#belief{
		background: url("/img/belief.gif") no-repeat left top;
		margin: -10px -10px 20px -10px;
		width: 690px;
		height: 700px;
		overflow: hidden;
	}

	div#container div#belief h2, div#container div#belief h3, div#container div#belief p{
		visibility: hidden;
	}

	/* 1：#course、#coursetrial
	------------------------------------------------------------------------------*/
	div#coursetrial, div#course{
		width: 670px;
		margin: 10px 0;
		position: relative;
	}

	div#coursetrial table, div#course table {
		width: 670px;
		border: #AE9F7E  solid 1px;
		font-size: 14px;
		font-weight: bold;
	}

	div#coursetrial table th, div#course table th {
		width: 156px;
		text-indent: -9999px;
		border: #AE9F7E  solid 1px;
	}

	div#coursetrial table th.title{
		background: #FFF5E1 url('/img/system_table_trial.gif') no-repeat center center;
	}

	div#course table th.title{
		background: #FFF5E1 url('/img/system_table_basic.gif') no-repeat center center;
	}

	div#coursetrial table th.newface, div#course table th.newface {
		height: 34px;
		background: #FFF5E1 url('/img/system_table_newface.gif') no-repeat center center;
	}

	div#coursetrial table th.verygood, div#course table th.verygood {
		height: 34px;
		background: #FFF5E1 url('/img/system_table_verygood.gif') no-repeat center center;
	}

	div#coursetrial table th.excellent, div#course table th.excellent {
		height: 34px;
		background: #FFF5E1 url('/img/system_table_excellent.gif') no-repeat center center;
	}

	div#coursetrial table th.free {
		font-size: 14px;
		font-weight: bold;
		text-indent: 0;
		text-align: center;
		height: 34px;
		background: #CCCCCC;
	}

	div#coursetrial table td, div#course table td {
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		vertical-align: middle;
		border: #AE9F7E  solid 1px;
	}


	div#coursetrial h3, div#course h3 {
		font-weight: bold;
		color: #90366F;
		font-size: 14px;
		margin: 10px 0 5px 20px;
	}

	div#coursetrial p, div#course p {
		margin: 0 20px;
		line-height: 1.8em;
	}

	div#coursetrial p.fin, div#course p.fin {
		color: #CC3030;
	}


	div#coursetrial p.toplay, div#course p.toplay {
		background: url("/img/system_toplay.png")  no-repeat left top;
		width: 145px;
		height: 18px;
		text-indent: -9999px;
		overflow: hidden;
		position: absolute;
		right: 5px;
		bottom: 3px;
	}

	div#coursetrial p.toplay a, div#course p.toplay a{
		display: block;
		width: 145px;
		height: 18px;
	}

	div#container dl#tel {
		background: url("/img/system_tel3.gif") no-repeat left top;
		height: 200px;
		width: 650px;
		text-indent: -9999px;
		margin-top: 10px;
		overflow: hidden;
	}

	div#container p#warning {
		background: url("/img/system_warning.gif") no-repeat left top;
		height: 20px;
		width: 659px;
		text-indent: -9999px;
		margin-top: 25px;
	}

	div#container h3#course {
		background: url("/img/system_course.gif") no-repeat left top;
		height: 220px;
		width: 690px;
		text-indent: -9999px;
		margin: 25px -10px 0 -10px;
	}

	div#container ul#trialinfo{
		background: url("/img/trialinfo.gif") no-repeat left top;
		margin: 0 -10px;
		width: 690px;
		height: 70px;
		overflow: hidden;
		clear: both;
	}

	div#container ul#trialinfo li{
		visibility: hidden;
	}

	/* 2：#option
	------------------------------------------------------------------------------*/

	div#option {
		background: url("/img/system_bg.gif") repeat-y left top;
		width: 650px;
		margin: 0 -10px;
		padding: 20px 0 0 40px;
	}

	div#option dl.fee{
		margin-right: 50px;
	} 

	div#option dl.fee dt{
		float: left;
		color: #3F3F3F;
		width: 80px;
		font-size: 14px;
		line-height: 24px;
		font-weight: bold;
		clear: both;
	} 

	div#option dl.fee dd{
		line-height: 24px;
		padding-left: 160px;
	} 
	div#option dl.fee dd a{
		line-height: 24px;
	}

	div#option dl.fee dd.traf{
		font-size: 14px;
		font-weight: bold;
		color: #3F3F3F;
		width: 80px;
		float: left;
		padding-left: 0;
	} 

	div#option dl.fee dd.bold{
		font-size: 14px;
		font-weight: bold;
		color: #3F3F3F;
		padding-left: 0;
	}

	div#option div {
		float: left;
		width: 280px;
		margin-top: 10px;
		padding-top: 10px;
		border-top: #AE9F7E solid 1px;
	}

	div#option div h3 {
		font-size: 14px;
		font-weight: bold;
		color: #3F3F3F;
	}

	div#option div p{
		color: #cc0000;
		width: 260px;
		margin: 5px 0;
	}

	div#option div dl.opt{
		width: 260px;
	}

	div#option dl.opt dt, div#option dl.opt dd{
		line-height: 24px;
		height: 24px;
	}

	div#option div dl.opt dt{
		font-weight: nomal;
		width: 200px;
		clear: left;
		float: left;
	}


	div#option div dl.opt dd{
		width: 60px;
		text-align: right;
		float: left;
	}

	div#option div.cos {
		float: left;
		width: 360px;
		margin-top: 10px;
	}

	div#option div.cos ul li {
		float: left;
		width: 72px;
		height: 96px;
		text-align: center;
	}

	div#option div.cos ul li img {
		padding: 1px;
		border: #CCCCCC solid 1px;
	}

	/* for boxover.js */
	.opthead{
		border: 1px solid #C7A76D;
		border-bottom: 0px;
		padding: 3px;
		color: #4E380E;
		background: #F0E3CB;
	 	-moz-opacity:0.85;
		opacity:0.85;
	}

	.optbody{
		border: 1px solid #C7A76D;
		padding: 3px;
		color: #4E380E;
		background: #FFFFFF;
	}

	.hide{
		visibility: hidden;
	}
	
	/* 3：#trial
	------------------------------------------------------------------------------*/
	div#container div#trial{
		background: url("/img/trial.gif") no-repeat left top;
		width: 690px;
		height: 322px;
		margin: 0 -10px;
	}

	/* 3：#classinfo
	------------------------------------------------------------------------------*/
	div#container div#classinfo{
		background: url("/img/class.gif") no-repeat left top;
		width: 690px;
		height: 490px;
		margin: 0 -10px;
	}

	/* 3：#sanitary
	------------------------------------------------------------------------------*/
	div#container div#sanitary{
		text-align: center;
		margin: 10px 30px 10px 20px;
		border: #CC3360 solid 1px;
		background: #F6F6F6;
		padding: 10px;
	}
	/* 3：#howto
	------------------------------------------------------------------------------*/

	div#container h2#howto{
		width: 670px;
		height: 30px;
		margin: 10px -5px 0 -5px;
		background: url("/img/h2_howto.gif") no-repeat left top;
		text-indent: -9999px;
	}

	div#container div#howto01, div#container div#howto02, div#container div#howto03{
		width: 330px;
		margin-bottom: 16px;
		float: left;
	}

	div#container div#howto01, div#container div#howto03 {
		margin-right: 10px;
	}

	div#container div#howto01 h3{
		background:#FF0000;
		width: 330px;
		height: 30px;
		background: url("/img/h3_howto_01.gif") no-repeat left top;
		text-indent: -9999px;
	}

	div#container div#howto01 dl{
		width: 330px;
		height: 370px;
		background: url("/img/howto2_01.gif") no-repeat left top;
		overflow: hidden;
	}

	div#container div#howto02 h3{
		background:#FF0000;
		width: 330px;
		height: 30px;
		background: url("/img/h3_howto_02.gif") no-repeat left top;
		text-indent: -9999px;
	}

	div#container div#howto02 dl{
		width: 330px;
		height: 370px;
		background: url("/img/howto2_02.gif") no-repeat left top;
		overflow: hidden;
	}

	div#container div#howto03 h3{
		background:#FF0000;
		width: 330px;
		height: 30px;
		background: url("/img/h3_howto_03.gif") no-repeat left top;
		text-indent: -9999px;
	}

	div#container div#howto03 dl{
		width: 330px;
		height: 370px;
		background: url("/img/howto2_03.gif") no-repeat left top;
		overflow: hidden;
	}

	div#container div#howto01 dl dt, div#container div#howto01 dl dd, div#container div#howto02 dl dt, div#container div#howto02 dl dd, div#container div#howto03 dl dt, div#container div#howto03 dl dd, div#container div#call dl {
		visibility: hidden;
	}


	div#container div#call{
		background:#FF0000;
		width: 330px;
		height: 370px;
		background: url("/img/call.gif") no-repeat center top;
		text-indent: -9999px;
		overflow: hidden;
		float: left;
	}


	/* 4：#attention
	------------------------------------------------------------------------------*/
	div#container h2#attention {
		width: 670px;
		height: 30px;
		margin: 10px -5px 0 -5px;
		background: url("/img/h2_attention.gif") no-repeat left top;
		text-indent: -9999px;
	}

	div#container .attention {
		width: 640px;
		margin: 10px auto 15px auto;

	}

	div#container ul.attention li { 
		background: url("/img/list_icon.gif") no-repeat left top;
		line-height: 18px;
		text-indent: 26px;
		margin-bottom: 4px;
	}

	div#container div#caution h3, div#container div#apply h3, div#container div#contact h3, 
	div#container div#caution ul, div#container div#apply dl dt, div#container  div#apply dl dd, 
	div#container div#contact dl dt, div#container div#apply dl dd, div#container div#contact dl dd,
	div#call dl dd{
		text-indent: -9999px;
	}
	
	/* 5：#about3p
	------------------------------------------------------------------------------*/
	div#container div#about3p {
		margin-left: 10px;
	}

	div#container div#about3p h3 {
		height: 28px;
		background: url("/img/about_3p.gif") no-repeat left top;
		text-indent: -9999px;
	}

	div#container div#about3p p{
		font-size: 14px;
		margin: 10px;
	}