@charset "UTF-8";
/* CSS Document */

body{
    font-family: Osaka, Osaka, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, Verdana, "ＭＳ Ｐゴシック", "MS P Gothic", san-serif;
	background-color: #FFF;
	background-image: url(../img/bgi.gif);
	background-repeat: repeat-x;
	font-size: 12px;
	color: #444;
}

div.clear{
	clear: both;
}

/* ▼全体設定 */
*{
	margin: 0px;
	padding: 0px;
}
/* ▲全体設定 */

/* ▼img */
img {
	border-style: none;
}

.left{
	float: left;
}

.right{
	float: right;
}
/* ▲img */

/* ▼margin */
.mt7b5{
	margin-top: 7px;
	margin-bottom: 5px;
}

.mtb3{
	margin: 3px 0;
}

.mtb7{
	margin: 7px 0;
}

.mt15b5{
	margin-top: 15px;
	margin-bottom: 5px;
}

.mt25b7{
	margin-top: 25px;
	margin-bottom: 7px;
}

.mt25b15{
	margin-top: 25px;
	margin-bottom: 15px;
}

.mr5{
	margin-right: 5px;
}

.mr10{
	margin-right: 10px;
}

.mb10{
	margin-bottom: 10px;
}
/* ▲margin */

/* ▼width */
.w90 {
	width:90px;
}

.w70 {
	width:70px;
}

.w50 {
	width:50px;
}

/* ▲width */

/* ▼font */
.attention{
	color: red;
}

.orange{
	color: #C30;
}

.green{
	color: #076419;
}

.brown{
	color: #630;
}

.lred{
	color:#EB6E6E;
}

.fff{
	color: #fff;
}

.big{
	font-weight: bold;
	font-size: 18px;
}

.fs{
	font-size: 10px;
}

h1{
	font-size: 14px;
	line-height: 1.5em;
	border-left: solid 2px #0E9ACB;
	padding: 5px 10px;
	background-color:#fff;
}

h2{
	font-size: 12px;
}

p{
	line-height: 1.5em;
}

.ex{
	line-height: 1.9em;
	color: #777;
}
/* ▲font */

/* ▼all_box */
#all_box{
	width: 850px;
	margin-left: auto;
	margin-right: auto;
}
/* ▲all_box */

/* ▼header */
#header{
	height: 118px;
}
/* ▲header */

/* ▼main */
#main{
	width: 850px;
}

#main_login{
	width: 850px;
	height: 500px;
}

/* left */
#leftside{
	float: left;
	background-color: #ededee;
	width: 185px;
	margin: 15px 10px;
	padding-bottom: 20px;
}

/* leftcontents */
#leftside div.leftcontents{
	width: 166px;
	margin-left: auto;
	margin-right: auto;
}

/* leftcontents */
#leftside div.leftcontents div.member{
	padding-top: 10px;
}

#leftside div.leftcontents div.member img{
	float: left;
	width: 24px;
	margin-right: 5px;
}

#leftside div.leftcontents div.member p{
	float: right;
	width: 135px;
	font-size: 12px;
	line-height: 1.5em;
	border-bottom: solid 1px #ccc;
}

/* levelscore */
#myscore{
	height: 205px;
	background-image: url(../img/score_total.gif);
	background-repeat: no-repeat;
	position: relative;
}

#myscore div.myscore_b1{
	width: 18px;
	top: 27px;
	left: 30px;
	position: absolute;
}

#myscore div.myscore_b2{
	width: 40px;
	text-align:right;
	top: 27px;
	left: 52px;
	position: absolute;
}

#myscore div.myscore_b_best{
	font-size:10px;
	top: 52px;
	left: 53px;
	position: absolute;
}

#myscore div.myscore_e1{
	width: 18px;
	top: 93px;
	left: 30px;
	position: absolute;
}

#myscore div.myscore_e2{
	width: 40px;
	text-align:right;
	top: 93px;
	left: 52px;
	position: absolute;
}

#myscore div.myscore_e_best{
	font-size:10px;
	top: 118px;
	left: 50px;
	position: absolute;
}

#myscore div.myscore_t1{
	width: 42px;
	text-align:center;
	top: 160px;
	left: 20px;
	position: absolute;
}

#myscore div.myscore_t2{
	width: 40px;
	text-align:right;
	top: 160px;
	left: 65px;
	position: absolute;
}

#myscore div.myscore_max{
	font-size:11px;
	width: 166px;
	text-align: center;
	top: 184px;
	left: 0px;
	position: absolute;
}


/* right */
#rightside{
	float: right;
	width: 635px;
	margin: 15px 0;
	padding-bottom: 20px;
}

#footprint{
	width: 630px;
	margin: 8px 0;
	font-size: 11px;
	line-height: 1.8em;
	border-bottom: solid 1px #ccc;
}

.scorelist{
	display:inline;
	vertical-align: baseline;
}

/* Start Add 14.08.08 T2 */
#test_task{
	margin:30px 0 0 0;
}

#test_task h3{
	color:#0199CC;
	font-size:13px;
}

#test_task a{
	color:#09F;
}

#test_task .tbox{
	margin:15px 0;
}

#test_task .tinfo{
	float:left;
	width:70%
}

#test_task .fup{
	float:left;
	width:30%;
	text-align:right;
}

#test_task .finfo{
	margin:5px 0 5px 10px;
}

#test_task .finfo ul{
	list-style:none;
}
#test_task .finfo ul li{
	display:block;
	float:left;
	text-align:center;
	width:150px;
}

/* End Add 14.08.08 T2 */

#step{
	width: 627px;
	height: 124px;
	position: relative;
}

#step div.step01{
	float: left;
	width: 160px;
	height: 124px;
	background-image: url(../img/step01_o.gif);
	background-repeat: no-repeat;
}

#step ul{
	font-size: 11px;
	list-style: none;	
	top: 45px;
	left: 9px;
	position: absolute;
}

#step ul.s{
	font-size: 11px;
	list-style: none;	
	top: 25px;
	left: 9px;
	position: absolute;
}

#step ul.on{
	font-size: 11px;
	list-style: none;	
	top: 29px;
	left: 9px;
	position: absolute;
}

#step ul li.list_step01{
	background-image: url(../img/arrow.gif);
	background-repeat: no-repeat;
	padding-left: 12px;
	line-height: 1.3em;
	width:115px;
}

#step ul li.list_step01_s{
	background-image: url(../img/arrow.gif);
	background-repeat: no-repeat;
	padding-left: 11px;
	line-height: 1.3em;
	width:115px;
}

#step ul.on li.list_step01_on{
	line-height: 1.3em;
	width:125px;
}

#step p.payday{
	font-size: 11px;
	top: 45px;
	left: 172px;
	position: absolute;
}

#step p.payhow{
	width: 110px;
	font-size: 11px;
	top: 79px;
	left: 172px;
	position: absolute;
}

#step p.note{
	width:290px;
	font-size: 11px;
	top: 25px;
	left: 330px;
	position: absolute;
}

/* エキスパート、ベーシック */
#box_blue{
	width: 610px;
	padding: 10px;
	background-color: #eff7ff;
}

#box_blue div.box{
	font-size: 12px;
	height: 260px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 15px;
	border-bottom: dotted 1px #ccc;
}

#box_blue div.box div.box_left{
	float: left;
	width: 320px;
}

#box_blue div.box div.box_right{
	float: right;
	width: 280px;
}

/*  エキスパート */
table.t_expert1{
	background-color: #ffd078;
	width: 100px;
	height: 70px;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}

/* ベーシック */
table.t_basic1{
	background-color: #99CC99;
	width: 100px;
	height: 70px;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}

/* ファースト */
table.t_first1{
	background-color: #FFE6E6;
	width: 100px;
	height: 70px;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}

/* その他 */
table.t_other{
	background-color:#0CF;
	width: 100px;
	height: 70px;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}

/* モバイル */
#box_blue2{
	float: left;
	width: 400px;
	padding: 10px;
	background-color: #eff7ff;
}

#box_blue2 div.box{
	font-size: 12px;
	height: 150px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 15px;
	border-bottom: dotted 1px #ccc;
}

#box_blue2 div.box h1{
	font-size: 14px;
	line-height: 1.5em;
}

table.t_mobi1{
	background-color: #D9C3A3;
	width: 400px;
	height: 50px;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}

#box_blue3{
	float: right;
	width: 170px;
	padding: 17px;
	background-color: #eff7ff;
	font-size: 12px;
	/*margin-left: auto;
	margin-right: auto;*/
	padding-bottom: 10px;
}

#box_blue3 div.mobi_score{
	background-image:url(../img/score_mobi.gif);
	background-repeat:no-repeat;
	width: 165px;
	height: 115px;
	margin-left: auto;
	margin-right: auto;
	position:relative;
}

#box_blue3 div.mobi_score p.correctanswer{
	top: 20px;
	left: 75px;
	position: absolute;
}

#box_blue3 div.mobi_score p.question{
	top: 45px;
	left: 75px;
	position: absolute;
}

#box_blue3 div.mobi_score p.point{
	width: 103px;
	text-align: right;
	top: 74px;
	left: 45px;
	position: absolute;
}

/* 共通 */
td.t_top{
	text-align: center;
	height: 25px;
	border-right: solid 1px #ccc;
}

td.t_center{
	font-size: 11px;
	text-align: center;
	height: 25px;
	padding: 5px;
	background-color: #ededed;
	border-right: solid 1px #ccc;
}

td.t_bottom{
	text-align: center;
	padding: 5px;
	background-color: #fff;
	border-right: solid 1px #ccc;
}

table.t_be{
	background-color: #ededed;
	width: 210px;
	height: 70px;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}
/* ▲main */

/* ▼list */
ul.list1{
	list-style:none;
}

ul.list1 li{
	display:inline;
}

ul.list2{
	list-style:none;
}

div.list3box{
	border: solid 2px #eff7ff;
	padding: 10px;
	font-size: 12px;
	line-height: 1.6em;
}

ul.list3{
	list-style: outside disc;
	margin-left: 20px;
}
/* ▲list */

/* ▼pagetop */
#pagetop{
	width: 830px;
	text-align: right;
	margin-bottom: 10px;
}
/* ▲pagetop */

/* ▼footer */
#footer{
	border-top: solid 8px #7fc7e8;
	height: 50px;
	position: relative;
}

#footer div.footer_b{
	width: 823px;
	text-align: right;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

#footer div.footer_b span{
	font-size: 11px;
	top:5px;
	right: 330px;
	position: absolute;
}
/* ▲footer */