@charset "utf-8";

/* CSS Document */



#header-bar #sample {
	display: block;
}

#header-bar #msg-china {
	display: none;
}

#header #btn-inquiry {

	width: 223px;

	height: 53px;

	position: absolute;

	top: 20px;

	right: 10px;

	z-index: 1;

}



#header #btn-inquiry a {

	width: 223px;

	height: 53px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/btn-inquiry.png) no-repeat;

}



#header #btn-inquiry a:hover {

	background-position: left bottom;

}





/*  gnavi

=======================================================*/



#gnavi {

	margin: 0 auto;

	width: 940px;

	height: 50px;

}



#gnavi li {

	width: 188px;

	height: 50px;

	float: left;

}



#gnavi #gnavi01 a {

	width: 188px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi01.jpg) no-repeat;

}



#gnavi #gnavi02 a {

	width: 188px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi02.jpg) no-repeat;

}



#gnavi #gnavi03 a {

	width: 188px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi03.jpg) no-repeat;

}



#gnavi #gnavi04 a {

	width: 188px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi04.jpg) no-repeat;

}



#gnavi #gnavi05 a {

	width: 188px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi05.jpg) no-repeat;

}



#gnavi #gnavi06 a {

	width: 188px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi06.jpg) no-repeat;

}



#gnavi #gnavi01_on a {

	width: 188px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi01.jpg) left bottom no-repeat;

}



#gnavi #gnavi02_on a {

	width: 188px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi02.jpg) left bottom no-repeat;

}



#gnavi #gnavi03_on a {

	width: 188px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi03.jpg) left bottom no-repeat;

}



#gnavi #gnavi04_on a {

	width: 188px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi04.jpg) left bottom no-repeat;

}



#gnavi #gnavi05_on a {

	width: 188px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi05.jpg) left bottom no-repeat;

}



#gnavi #gnavi06_on a {

	width: 188px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi06.jpg) left bottom no-repeat;

}



#gnavi #gnavi01 a:hover {

	background-position: left bottom;

}



#gnavi #gnavi02 a:hover {

	background-position: left bottom;

}



#gnavi #gnavi03 a:hover {

	background-position: left bottom;

}



#gnavi #gnavi04 a:hover {

	background-position: left bottom;

}



#gnavi #gnavi05 a:hover {

	background-position: left bottom;

}



#gnavi #gnavi06 a:hover {

	background-position: left bottom;

}



#gnavi2 {

	margin: 0 auto;

	width: 940px;

	height: 50px;

}



#gnavi2 #gnavi-l {

	width: 564px;

	height: 50px;

	float: left;

}



#gnavi2 #gnavi-r {

	width: 360px;

	height: 50px;

	float: right;

}



#gnavi-l li {

	width: 188px;

	height: 50px;

	float: left;

}



#gnavi-r li {

	width: 180px;

	height: 50px;

	float: left;

}



#gnavi2 #gnavi-l01 a {

	width: 188px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi-l01.jpg) no-repeat;

}



#gnavi2 #gnavi-l02 a {

	width: 188px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi-l02.jpg) no-repeat;

}



#gnavi2 #gnavi-l03 a {

	width: 188px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi-l03.jpg) no-repeat;

}



#gnavi2 #gnavi-r01 a {

	width: 180px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi-r01.jpg) no-repeat;

}



#gnavi2 #gnavi-r02 a {

	width: 180px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi-r02.jpg) no-repeat;

}



#gnavi2 #gnavi-l01_on a {

	width: 188px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi-l01.jpg) left bottom no-repeat;

}



#gnavi2 #gnavi-l02_on a {

	width: 188px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi-l02.jpg) left bottom no-repeat;

}



#gnavi2 #gnavi-l03_on a {

	width: 188px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi-l03.jpg) left bottom no-repeat;

}



#gnavi2 #gnavi-r01_on a {

	width: 180px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi-r01.jpg) left bottom no-repeat;

}



#gnavi2 #gnavi-r02_on a {

	width: 180px;

	height: 50px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../../member/img/gnavi-r02.jpg) left bottom no-repeat;

}



#gnavi2 #gnavi-l01 a:hover {

	background-position: left bottom;

}



#gnavi2 #gnavi-l02 a:hover {

	background-position: left bottom;

}



#gnavi2 #gnavi-l03 a:hover {

	background-position: left bottom;

}



#gnavi2 #gnavi-r01 a:hover {

	background-position: left bottom;

}



#gnavi2 #gnavi-r02 a:hover {

	background-position: left bottom;

}





/*  layout(input-btn)

=============================*/



input#cancel-btn {

	width: 168px;

	height: 52px;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	cursor: pointer;

	background: url(../img/btn-cancel.jpg) no-repeat;

	border: none;

}



input#cancel-btn:hover {

	background-position: left bottom;

}



input#renew-btn {

	width: 168px;

	height: 52px;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	cursor: pointer;

	background: url(../img/btn-renew.jpg) no-repeat;

	border: none;

}



input#renew-btn:hover {

	background-position: left bottom;

}







/*  member

=============================*/



#main #records-wrap {

	width: 700px;

	height: 72px;

	background: url(../img/records-bg2.jpg) no-repeat;

	position: relative;

}



#btn-olympic {

	margin: 0 auto;

	width: 500px;

	height: 70px;

}



#btn-olympic a {

	width: 500px;

	height: 70px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-olympic.jpg) no-repeat;

}



#btn-olympic a:hover {

	background-position: left bottom;

}



.prg-cate .prg-btn {

	margin: 10px auto 0;

	width: 345px;

	height: 49px;

}



.prg-cate .prg-btn a {

	width: 345px;

	height: 49px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-detail.jpg) no-repeat;

}



.prg-cate .prg-btn a:hover {

	background-position: left bottom;

}



#prg-panel #prg-btn01, #prg-panel #prg-btn02 {

	margin-bottom: 20px;

	width: 236px;

	height: 56px;

}



#prg-panel #prg-btn03, #prg-panel #prg-btn04 {

	width: 236px;

	height: 56px;

}



#prg-panel #prg-btn01 a {

	width: 236px;

	height: 56px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-prg-menu01.jpg) no-repeat;

}



#prg-panel #prg-btn01 a:hover {

	background-position: left bottom;

}



#prg-panel #prg-btn02 a {

	width: 236px;

	height: 56px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-prg-menu02.jpg) no-repeat;

}



#prg-panel #prg-btn02 a:hover {

	background-position: left bottom;

}



#prg-panel #prg-btn03 a {

	width: 236px;

	height: 56px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-prg-menu03.jpg) no-repeat;

}



#prg-panel #prg-btn03 a:hover {

	background-position: left bottom;

}



#prg-panel #prg-btn04 a {

	width: 236px;

	height: 56px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-prg-menu04.jpg) no-repeat;

}



#prg-panel #prg-btn04 a:hover {

	background-position: left bottom;

}



#about-img {

	margin: 20px auto 0;

	width: 940px;

	height: 159px;

	background: url(../img/img-about.jpg) no-repeat;

	position: relative;

}



#about-img #btn-material2 {

	width: 264px;

	height: 74px;

	position: relative;

	top: 70px;

	left: 650px;

}



#btn-material2 a {

	width: 264px;

	height: 74px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-material2.jpg) no-repeat;

}



#btn-material2 a:hover {

	background-position: left bottom;

}



#select-contents {

	margin: 0 auto;

	width: 640px;

	height: 74px;

}



#select-contents #select-sentence {

	width: 304px;

	height: 74px;

	float: left;

}



#select-contents #select-movie {

	width: 304px;

	height: 74px;

	float: right;

}



#select-contents #select-sentence a {

	width: 304px;

	height: 74px;

	font-size: 0px;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-select01.jpg) no-repeat;

}



#select-contents #select-movie a {

	width: 304px;

	height: 74px;

	font-size: 0px;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-select02.jpg) no-repeat;

}



#select-contents #select-sentence a:hover, #select-contents #select-movie a:hover {

	background-position: left bottom;

}





/*  member(login)

=============================*/



.btn-area #btn-login {

	width: 168px;

	height: 42px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-login3.jpg) no-repeat;

	cursor: pointer;

	border: none;

}



.btn-area #btn-login:hover {

	background-position: left bottom;

}



.btn-area #btn-send {

	width: 168px;

	height: 42px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-send.jpg) no-repeat;

	cursor: pointer;

	border: none;

}



.btn-area #btn-send:hover {

	background-position: left bottom;

}



#btn-back a {

	width: 168px;

	height: 42px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-back.jpg) no-repeat;

}



#btn-back a:hover {

	background-position: left bottom;

}



.trial-btn {

	margin: 10px auto 0;

	width: 345px;

	height: 49px;

}



.trial-btn a {

	width: 345px;

	height: 49px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-trial.png) no-repeat;

}



.trial-btn a:hover {

	background-position: left bottom;

}







/*  training

=============================*/



#training-box1 .training-title, #training-box2 .training-title, #training-box3 .training-title {

	margin: 20px 0 0 10px;

	padding-top: 5px;

	width: 170px;

	min-height: 28px;

	font-size: 12px;

	font-weight: bold;

	text-align: left;

	text-indent: 25px;

	vertical-align: middle;

	background: url(../img/icon-training.jpg) no-repeat;

	float: left;

}



.btn-level01, .btn-level02, .btn-level03, .btn-level04 {

	margin-right: 5px;

	width: 98px;

	height: 49px;

	float: left;

}



.btn-level05 {

	width: 98px;

	height: 49px;

	float: left;

}



.btn-level01 a {

	width: 98px;

	height: 49px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-level01.png) no-repeat;

}



.btn-level02 a {

	width: 98px;

	height: 49px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-level02.png) no-repeat;

}



.btn-level03 a {

	width: 98px;

	height: 49px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-level03.png) no-repeat;

}



.btn-level04 a {

	width: 98px;

	height: 49px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-level04.png) no-repeat;

}



.btn-level05 a {

	width: 98px;

	height: 49px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-level05.png) no-repeat;

}



.btn-level01 a:hover, .btn-level02 a:hover, .btn-level03 a:hover,

.btn-level04 a:hover, .btn-level05 a:hover {

	background-position: left bottom;

}



.step-box .step01 a, .step-box .step01 span {

	width: 148px;

	height: 77px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-step01.jpg) no-repeat;

}



.step-box .step02 a, .step-box .step02 span {

	width: 148px;

	height: 77px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-step02.jpg) no-repeat;

}



.step-box .step03 a, .step-box .step03 span {

	width: 148px;

	height: 77px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-step03.jpg) no-repeat;

}



.step-box .step04 a, .step-box .step04 span {

	width: 148px;

	height: 77px;

	font-size: 0;

	display: block;

	text-indent: -9999px;

	overflow: hidden;

	background: url(../img/btn-step04.jpg) no-repeat;

}



.step-box .step01 a:hover, .step-box .step02 a:hover, .step-box .step03 a:hover,

.step-box .step04 a:hover, .step-box .step05 a:hover {

	background-position: left bottom;

}


#jr-head-r #jr-navi {
	width: 400px;
	height: 48px;
}

#jr-navi #jr-navi01, #jr-navi #jr-navi02 {
	margin-right: 5px;
	width: 127px;
	height: 48px;
	float: left;
}

#jr-navi #jr-navi03 {
	float: left;
}

#jr-navi #jr-navi01 a {
	width: 127px;
	height: 48px;
	font-size: 0;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../img/jr-navi01.jpg) no-repeat;
}

#jr-navi #jr-navi02 a {
	width: 127px;
	height: 48px;
	font-size: 0;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../img/jr-navi02.jpg) no-repeat;
}

#jr-navi #jr-navi03 a {
	width: 127px;
	height: 48px;
	font-size: 0;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../img/jr-navi03.jpg) no-repeat;
}

#jr-navi #jr-navi01 a:hover, #jr-navi #jr-navi02 a:hover, #jr-navi #jr-navi03 a:hover {
	background-position: left bottom;
}


#jr-step #btn-step01 a {
	width: 148px;
	height: 96px;
	font-size: 0;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../img/step-btn01.png) no-repeat;
}

#jr-step #btn-step02 a {
	width: 148px;
	height: 96px;
	font-size: 0;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../img/step-btn02.png) no-repeat;
}

#jr-step #btn-step03 a {
	width: 148px;
	height: 96px;
	font-size: 0;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../img/step-btn03.png) no-repeat;
}

#jr-step #btn-step01 a:hover, #jr-step #btn-step02 a:hover, #jr-step #btn-step03 a:hover {
	background-position: left bottom;
}



.sbnr-com2 {
	width: 210px;
	height: 60px;
}

.sbnr-com2 a {
	width: 210px;
	height: 122px;
	font-size: 0;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../img/sbnr-sample.jpg) no-repeat;
}

.sbnr-com2 a:hover {
	background-position: left bottom;
}