@charset "UTF-8";

/*-----------------------------------------------
_ Default Style Clear
-----------------------------------------------*/
all {  
border:0; 
line-height:1.4; 
margin:0;  
padding:0;
outline:0;   
vertical-align:baseline;
word-spacing: 1px;
font-size: 14px;
font-family: Arial, sans-serif;
}  
#main-content{
	padding: 20px 15px 20px 0px!important;
}
div.main_contents {
	min-height: 500px;
	margin: 0;
	padding: 0
}

:focus {
outline:0;
}  


.pointback_campaign img {
border:none;
text-decoration:none;
}  

.pointback_campaign ul, .pointback_campaign li {
list-style-type:none;
}  


/* Font
--------------------------------------------- */
@font-face {
	font-family: HuiFontP109;
	src: url('../font/HuiFontP109.ttf') format('truetype');
}

/*-----------------------------------------------
_ Default Style Clear
-----------------------------------------------*/

body {
	margin: 0;
	font-family: Arial, sans-sans-serif;
}

img {
	border-style:none;
}

ruby{
	color: red;
}

/*-----------------------------------------------
_ all
-----------------------------------------------*/

.all{
	width: 1000px;
	float: left;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
	color: #666666;
	text-decoration: none;
	background-color: #fff;
	padding: 20px;
	margin-top: 10px;
}

div.all a:link {
		color: #15AE67;
	}
	
	div.all a:visited {
		color: #15AE67;
	}
	
	div.all a:hover {
		color: #8FC31F;
	}

	div.all a:active {
		color: #8FC31F;
	}

.fb-like{
    position: relative;
    top: -4px!important;
}
/*-----------------------------------------------
_ top
-----------------------------------------------*/

.top{
	width: 960px;
	height: 450px;
	float: left;
	background-repeat: no-repeat;
	margin-top: 5px;
}

.top h2{
}

.top h1{
	background:url(../images/head.png) no-repeat;
	width:960px;
	height:450px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}


/*-----------------------------------------------
_ top_left
-----------------------------------------------*/

.top_left{
	background:url(../images/businessman.png) no-repeat;
	background-position: 100% 100%;
	width: 660px;
	height: 468px;
	float: left;
	margin-top: 10px;
	padding: 10px;
}

	.top_left p{
		padding-left: 10px;
		font-size: 17px;
	}

.top_right{
	width: 280px;
	height: 494px;
	float: left;
	margin-top: 10px;
	margin-left: 20px;
	padding: 20px;
	border: 1px solid #ccc;
}

/*-----------------------------------------------
_ main_top
-----------------------------------------------*/
.main_top{
	float: left;
	width: 960px;
	font-size: 14px;
	margin-bottom: 20px;
	margin-top: 20px;
}

	.main_top .title_h3{
		float: left;
		width: 960px;
		height: 30px;
		background:url(../images/bg_h3.png) no-repeat;
	}
	
		.main_top .title_h3 h3{
			font-size: 20px;
			font-weight: 100;
			padding-left: 30px;
		}
		
	.main_top p{
		font-size: 14px;
		padding: 0px 0px 0px 30px;
	}
	
.business_lessons{
	float: left;
	width: 920px;
	font-size: 14px;
	margin: 0px 20px 0px 20px;
}

	.business_lessons .tutor_box{
		float: left;
		width: 410px;
		font-size: 14px;
		padding: 20px;
	}
		.business_lessons .tutor_box h4{
			font-weight: 100;
			font-size: 24px;
			width: 410px;
			height: 50px;
			float: left;
		}
		
		.business_lessons .tutor_profile{
			width: 410px;
			height: 100px;
			float: left;
			padding-bottom: 10px;
		}
		
			.business_lessons .tutor_profile .tutor_pic{
				width: 95px;
				height: 95px;
				float: left;
				padding: 2px;
				border: 1px solid #ccc;
				background-color: #fff;
			}
				
				.business_lessons .tutor_profile .tutor_pic img:hover {
					opacity:0.7;
					filter: alpha(opacity=70);
					-ms-filter: "alpha( opacity=70 )";
					background: #fff;
				}
			
			.business_lessons .tutor_profile .tutor_detail{
				width: 290px;
				height: 95px;
				float: left;
				margin-left: 19px;
				padding-top: 5px;
			}
		
		.business_lessons .tutor_comments{
			width: 410px;
			height: 122px;
			float: left;
			margin-top: 10px;
			padding-bottom: 5px;
			border-bottom: dotted 2px #ccc;
		}
		
/*-----------------------------------------------
_fuki_under
-----------------------------------------------*/
	.chat-bubble1 {
		background-color:#fff; /*背景色*/
		border:2px solid #a6bbd1;/*ボーダーの設定*/
		padding:10px;/*ボックス内の幅*/
		position:relative;/*位置の指定はrelativeで*/
		height: 112px;
		-webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		-o-border-radius: 7px;
		-khtml-border-radius: 7px;
		border-radius: 7px;
	}
	
	.chat-bubble-arrow-border1 {
		border-color: transparent transparent #a6bbd1 transparent; /*三角の向き　下向き 左向き 上向き 右向き*/
		border-style: solid;
		border-width: 10px;　/*三角の横幅*/
		height:0;/*セルの内側を消す*/
		width:0;/*セルの内側を消す*/
		position:absolute;/*位置の指定はabsoluteで*/
		bottom:110px;/*上下の位置調整*/
		left:10px;/*左右の位置調整*/
	}
	
	.chat-bubble-arrow1 {
		border-color: transparent transparent #fff transparent;/*三角の向き　下向き 左向き 上向き 右向き*/
		border-style: solid;
		border-width: 10px;
		height:0;
		width:0;
		position:absolute;
		bottom:107px;/*上下の位置調整*/
		left:10px;/*左右の位置調整*/
	}
		
			
		.business_lessons .tutor_lessons{
			width: 410px;
			height: 80px;
			float: left;
			margin-top: 10px;
			padding: 8px;
			-moz-border-radius: 7px;
			-webkit-border-radius: 7px;
			border-radius: 7px;
			background-color: #daf2f7;
			border: 2px solid #a6bbd1;
		}
		
			.business_lessons .tutor_lessons:hover{
				opacity:0.7;
				filter: alpha(opacity=70);
				-ms-filter: "alpha( opacity=70 )";
			}
		
			.business_lessons .tutor_lessons .lesson_pic{
				width: 60px;
				height: 60px;
				float: left;
				padding: 2px;
				border: 1px solid #ccc;
				background-color: #fff;
			}
			
				.business_lessons .tutor_lessons .lesson_pic img:hover {
					opacity:0.7;
					filter: alpha(opacity=70);
					-ms-filter: "alpha( opacity=70 )";
					background: #fff;
				}
			
			.business_lessons .tutor_lessons .lesson_detail{
				width: 303px;
				height: 30px;
				float: left;
				margin-left: 19px;
				padding-top: 5px;
			}
			
				.business_lessons .tutor_lessons .lesson_detail h5{
					font-size: 16px;
					font-weight: 100;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-text-overflow: ellipsis;
					-o-text-overflow: ellipsis;
				}
				
				.business_lessons .tutor_lessons .lesson_detail .lesson_img{
					width: 30px;
					height: 22px;
					float: left;
					margin-right: 5px;
				}
				
				.business_lessons .tutor_lessons .lesson_detail .lesson_time{
					background-color: #c5bcb1;
					line-height: 1.8;
					height: 22px;
					width: 160px;
					float: left;
					text-align: center;
					-moz-border-radius: 10px;
					-webkit-border-radius: 10px;
					border-radius: 10px;
					color: #5B4A36;
				}


/*-----------------------------------------------
_ practice
-----------------------------------------------*/
.lesson_practice{
	float: left;
	width: 960px;
	height: 320px;
	font-size: 14px;
	margin-bottom: 20px;
}

	.lesson_practice .practice_office{
		float: left;
		width: 360px;
		height: 153px;
		padding-top: 25px;
		margin:20px;
	}
	
	.lesson_practice .practice_office_r{
		float: left;
		width: 547px;
		height: 90px;
	}
	
		.lesson_practice .practice_office_r .number{
			float: left;
			width: 33px;
			height: 42px;
			margin-right: 17px;
		}
		
		.lesson_practice .practice_office_r .number_title{
			float: left;
			width: 470px;
			height: 30px;
			padding-top: 6px;
		}
		
			.lesson_practice .practice_office_r .number_title p{
				font-size: 18px;
			}
			
		.lesson_practice .practice_office_r .number_text{
			float: left;
			width: 400px;
			height: 30px;
			margin: 0px 20px 0px 0px; 
		}
		
	.lesson_practice .number_p{
		float: left;
		width: 960px;
		padding-top: 20px;
		text-align: center;
		font-size: 18px;
	}

	
/*-----------------------------------------------
_ buy_text
-----------------------------------------------*/
.buy_text{
	float: left;
	width: 960px;
	height: 120px;
	font-size: 14px;
	margin-bottom: 20px;
}

	.buy_text .text_detail{
		float: left;
		width: 310px;
		height: 120px;
	}
	
		.buy_text .text_detail:hover {
			opacity:0.7;
			filter: alpha(opacity=70);
			-ms-filter: "alpha( opacity=70 )";
			background: #fff;
		}
	
		.buy_text .text_detail .text_pic{
			float: left;
			width: 85px;
			height: 120px;
			margin-right: 10px;
		}
		
		
		
		.buy_text .text_detail .text_text{
			float: left;
			width: 215px;
			height: 120px;
		}



/*-----------------------------------------------
footer
-----------------------------------------------*/
.contents footer {
    overflow: auto;
	font-family: "lucida grande",Calibri,"Helvetica Neue",Helvetica,Geneva,tahoma,verdana,arial, Meiryo,'MS PGothic','NanumGothic','AppleGothic','Malgun Gothic','Dotum Regular','Hiragino Kaku Gothic Pro', sans-serif;
    clear: both;
    margin: 35px 15px 15px 5px!important;
    width: 950px;
}


.neo88{
	float:left;
	width:15px;
	height:11px;
	background:#de7c63;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-ms-border-radius:4px
	}

.neo88::after{
	content:'';
	position:relative;
	top:10px;
	left:6px;
	width:0;
	height:0;
	float:left;
	border:2px solid transparent;
	border-top-color:#de7c63;
	border-right-color:#de7c63;
	}



/*-----------------------------------------------
_ fukidashi
-----------------------------------------------*/

	.chat-bubble {
		background-color:#fff; /*背景色*/
		border:2px solid #cccc00;/*ボーダーの設定*/
		padding:5px;/*ボックス内の幅*/
		position:relative;/*位置の指定はrelativeで*/
		width:800px;
		height:42px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-o-border-radius: 10px;
		-khtml-border-radius: 10px;
		border-radius: 10px;
		margin: 45px 0px 0px 120px;
	}
	
	.chat-bubble-arrow-border {
		border-color: transparent #cccc00 transparent transparent; /*三角の向き　下向き 左向き 上向き 右向き*/
		border-style: solid;
		border-width: 10px;　/*三角の横幅*/
		height:0;/*セルの内側を消す*/
		width:0;/*セルの内側を消す*/
		position:absolute;/*位置の指定はabsoluteで*/
		bottom:20px;/*上下の位置調整*/
		left:-20px;/*左右の位置調整*/
	}
	
	.chat-bubble-arrow {
		border-color: transparent #fff transparent transparent;/*三角の向き　下向き 左向き 上向き 右向き*/
		border-style: solid;
		border-width: 10px;
		height:0;
		width:0;
		position:absolute;
		bottom:20px;/*上下の位置調整*/
		left:-17px;/*左右の位置調整*/
	}

iframe:hover {
				opacity:0.7;
				filter: alpha(opacity=70);
				-ms-filter: "alpha( opacity=70 )";
				background: #fff;
			}