@charset "utf-8";

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

common.css

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

/*--------------------------------------------------------------------
01.format
--------------------------------------------------------------------*/
body,div,span,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,blockquote,address,
table,tr,th,td,img{
   margin:0;
   padding:0;
   font:normal normal normal 100%/1.7 'メイリオ',Meiryo,'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
   border:none;
}
hr{display:none;}
li{list-style-type: none;}

/*---------------------------------*/

.mt0 {margin-top: 0px !important;}
.mt10{margin-top: 10px  !important;}
.mt15{margin-top: 15px  !important;}
.mt20{margin-top: 20px  !important;}
.mt25{margin-top: 25px  !important;}
.mt30{margin-top: 30px  !important;}
.mt35{margin-top: 35px  !important;}
.mt40{margin-top: 40px  !important;}
.mt45{margin-top: 45px  !important;}
.mt50{margin-top: 50px  !important;}
.mt55{margin-top: 55px  !important;}
.mt60{margin-top: 60px  !important;}
.mt65{margin-top: 65px  !important;}
.mt70{margin-top: 70px  !important;}
.mt75{margin-top: 75px  !important;}
.mt80{margin-top: 80px  !important;}
.mt85{margin-top: 85px  !important;}
.mt90{margin-top: 90px  !important;}
.mt95{margin-top: 95px  !important;}
.mt100{margin-top: 100px  !important;}


.mr0 {margin-right: 0px  !important;}
.mr10{margin-right: 10px  !important;}
.mr15{margin-right: 15px  !important;}
.mr20{margin-right: 20px  !important;}
.mr25{margin-right: 25px  !important;}
.mr30{margin-right: 30px  !important;}
.mr35{margin-right: 35px  !important;}
.mr40{margin-right: 40px  !important;}
.mr45{margin-right: 45px  !important;}
.mr50{margin-right: 50px  !important;}
.mr55{margin-right: 55px  !important;}
.mr60{margin-right: 60px  !important;}
.mr65{margin-right: 65px  !important;}
.mr70{margin-right: 70px  !important;}
.mr75{margin-right: 75px  !important;}
.mr80{margin-right: 80px  !important;}
.mr85{margin-right: 85px  !important;}
.mr90{margin-right: 90px  !important;}
.mr95{margin-right: 95px  !important;}
.mr100{margin-right: 100px  !important;}

.mb0 {margin-bottom: 0px  !important;}
.mb10{margin-bottom: 10px  !important;}
.mb15{margin-bottom: 15px  !important;}
.mb20{margin-bottom: 20px  !important;}
.mb25{margin-bottom: 25px  !important;}
.mb30{margin-bottom: 30px  !important;}
.mb35{margin-bottom: 35px  !important;}
.mb40{margin-bottom: 40px  !important;}
.mb45{margin-bottom: 45px  !important;}
.mb50{margin-bottom: 50px  !important;}
.mb55{margin-bottom: 55px  !important;}
.mb60{margin-bottom: 60px  !important;}
.mb65{margin-bottom: 65px  !important;}
.mb70{margin-bottom: 70px  !important;}
.mb75{margin-bottom: 75px  !important;}
.mb80{margin-bottom: 80px  !important;}
.mb85{margin-bottom: 85px  !important;}
.mb90{margin-bottom: 90px  !important;}
.mb95{margin-bottom: 95px  !important;}
.mb100{margin-bottom: 100px  !important;}

.ml0 {margin-left: 0px  !important;}
.ml10{margin-left: 10px  !important;}
.ml15{margin-left: 15px  !important;}
.ml20{margin-left: 20px  !important;}
.ml25{margin-left: 25px  !important;}
.ml30{margin-left: 30px  !important;}
.ml35{margin-left: 35px  !important;}
.ml40{margin-left: 40px  !important;}
.ml45{margin-left: 45px  !important;}
.ml50{margin-left: 50px  !important;}
.ml55{margin-left: 55px  !important;}
.ml60{margin-left: 60px  !important;}
.ml65{margin-left: 65px  !important;}
.ml70{margin-left: 70px  !important;}
.ml75{margin-left: 75px  !important;}
.ml80{margin-left: 80px  !important;}
.ml85{margin-left: 85px  !important;}
.ml90{margin-left: 90px  !important;}
.ml95{margin-left: 95px  !important;}
.ml100{margin-left: 100px  !important;}

.pt0 {padding-top: 0px  !important;}
.pt10{padding-top: 10px  !important;}
.pt15{padding-top: 15px  !important;}
.pt20{padding-top: 20px  !important;}
.pt25{padding-top: 25px  !important;}
.pt30{padding-top: 30px  !important;}
.pt35{padding-top: 35px  !important;}
.pt40{padding-top: 40px  !important;}
.pt45{padding-top: 45px  !important;}
.pt50{padding-top: 50px  !important;}
.pt55{padding-top: 55px  !important;}
.pt60{padding-top: 60px  !important;}
.pt65{padding-top: 65px  !important;}
.pt70{padding-top: 70px  !important;}
.pt75{padding-top: 75px  !important;}
.pt80{padding-top: 80px  !important;}
.pt85{padding-top: 85px  !important;}
.pt90{padding-top: 90px  !important;}
.pt95{padding-top: 95px  !important;}
.pt100{padding-top: 100px  !important;}

.pr0 {padding-right: 0px  !important;}
.pr10{padding-right: 10px  !important;}
.pr15{padding-right: 15px  !important;}
.pr20{padding-right: 20px  !important;}
.pr25{padding-right: 25px  !important;}
.pr30{padding-right: 30px  !important;}
.pr35{padding-right: 35px  !important;}
.pr40{padding-right: 40px  !important;}
.pr45{padding-right: 45px  !important;}
.pr50{padding-right: 50px  !important;}
.pr55{padding-right: 55px  !important;}
.pr60{padding-right: 60px  !important;}
.pr65{padding-right: 65px  !important;}
.pr70{padding-right: 70px  !important;}
.pr75{padding-right: 75px  !important;}
.pr80{padding-right: 80px  !important;}
.pr85{padding-right: 85px  !important;}
.pr90{padding-right: 90px  !important;}
.pr95{padding-right: 95px  !important;}
.pr100{padding-right: 100px  !important;}

.pb0 {padding-bottom: 0px  !important;}
.pb10{padding-bottom: 10px  !important;}
.pb15{padding-bottom: 15px  !important;}
.pb20{padding-bottom: 20px  !important;}
.pb25{padding-bottom: 25px  !important;}
.pb30{padding-bottom: 30px  !important;}
.pb35{padding-bottom: 35px  !important;}
.pb40{padding-bottom: 40px  !important;}
.pb45{padding-bottom: 45px  !important;}
.pb50{padding-bottom: 50px  !important;}
.pb55{padding-bottom: 55px  !important;}
.pb60{padding-bottom: 60px  !important;}
.pb65{padding-bottom: 65px  !important;}
.pb70{padding-bottom: 70px  !important;}
.pb75{padding-bottom: 75px  !important;}
.pb80{padding-bottom: 80px  !important;}
.pb85{padding-bottom: 85px  !important;}
.pb90{padding-bottom: 90px  !important;}
.pb95{padding-bottom: 95px  !important;}
.pb100{padding-bottom: 100px  !important;}

.pl0 {padding-left: 0px  !important;}
.pl10{padding-left: 10px  !important;}
.pl15{padding-left: 15px  !important;}
.pl20{padding-left: 20px  !important;}
.pl25{padding-left: 25px  !important;}
.pl30{padding-left: 30px  !important;}
.pl35{padding-left: 35px  !important;}
.pl40{padding-left: 40px  !important;}
.pl45{padding-left: 45px  !important;}
.pl50{padding-left: 50px  !important;}
.pl55{padding-left: 55px  !important;}
.pl60{padding-left: 60px  !important;}
.pl65{padding-left: 65px  !important;}
.pl70{padding-left: 70px  !important;}
.pl75{padding-left: 75px  !important;}
.pl80{padding-left: 80px  !important;}
.pl85{padding-left: 85px  !important;}
.pl90{padding-left: 90px  !important;}
.pl95{padding-left: 95px  !important;}
.pl100{padding-left: 100px  !important;}

.center{text-align: center !important;}
.right{text-align: right !important;}
.left{text-align: left !important;}

.fw-bold{font-weight: bold;}
.fw-normal{font-weight: normal;}

.fs10{font-size: 10px !important;}
.fs11{font-size: 11px !important;}
.fs12{font-size: 12px !important;}
.fs13{font-size: 13px !important;}
.fs14{font-size: 14px !important;}
.fs15{font-size: 15px !important;}
.fs16{font-size: 16px !important;}
.fs17{font-size: 17px !important;}
.fs18{font-size: 18px !important;}
.fs19{font-size: 19px !important;}
.fs20{font-size: 20px !important;}
.fs24{font-size: 24px !important;}
.fs32{font-size: 32px !important;}

.c1{color: #ee6694;}
.c2{color: #00adf2;}
.c3{color: #f18101;}
.c4{color: #a9ce05;}
.c5{color: #a501f1;}


/*text
----------------------------------------------------------------*/

h2 {
	font-size:17px;
}


h3 {
	font-size:15.5px;

}



h4 {
	font-size:12px;
}


h5 {
	font-size:11px;

}


/*a  b6d2ee   2a4bb0 057c87 5d1d82
----------------------------------------------------------------*/
a{
   color:#151515;
   text-decoration: underline;
}
a:visited{
   color:#151515;
   text-decoration:underline;
}
a:hover{
   color:#057c87;
   text-decoration:none;
}
a:active{
   color:151515;
   text-decoration:none;
}



/*--------------------------------------------------------------------
02.body
--------------------------------------------------------------------*/
html{
   height: 100%;
   background: #015fe7 url(../img/common/bg_00.jpg) no-repeat left top;
}

body{
   height: 100%;
   color: #303030;
   font-size: 12px;
   text-align: center;
   line-height: 1.8;
}

#wrapper{
   position: relative;
   height: 100%;
   min-height
   margin: 0 auto;
   background: url(../img/common/bg_contents.gif) repeat-y center top;
}
body > #wrapper{
   min-height: 100%;
   height: auto;
}

#container{
   width: 950px;
   text-align: left;
   margin: 0 auto;
}



/*--------------------------------------------------------------------
03.header
--------------------------------------------------------------------*/
#head{
   position: relative;
   height: 85px;
   background: url(../img/common/head.gif) no-repeat;
   overflow: hidden;
}
#head.english{
   background: url(../img/common/head_en.gif) no-repeat;
}
#head h1{
   position: absolute;
   right: 120px;
   top: 4px;
   width: 520px;
   height: 25px;
   line-height: 25px;
   text-align: right;
   font-size: 10px;
   color: #4d6d97;
}
#head div#logo,
#head div#logo a{
   width: 194px;
   height: 44px;
}
#head div#logo{
   position: absolute;
   left: 0;
   top: 26px;
}
#head div#logo a{
   display: block;
   text-indent: -9999px;
   overflow: hidden;
}
#head div#language{
   position: absolute;
   width: 72px;
   height: 21px;
   left: 780px;
   top: 47px;
   overflow: hidden;
}
#head div#language ul,
#head div#language ul li,
#head div#language ul li a{
   display: block;
   height: 21px;
}
#head div#language ul li,
#head div#language ul li a{
   width: 72px;
}
#head div#language ul li{float: left;}
#head div#language ul li a{
   text-indent: -9999px;
   overflow: hidden;
}
#head div#language ul li#jp a{background-position: 0 1px;}
#head div#language ul li#en a{background-position: 0px 0px;}
#head div#language ul li a:hover{
   background-repeat: no-repeat;
   background-image: url(../img/common/language_hover.gif);
}
#head.english div#language ul li a:hover{
   background-image: url(../img/common/language_en_hover.gif);
}

#head div#navi{
   position: absolute;
   left: 235px;
   top: 46px;
   width: 544px;
   height: 23px;
   overflow: hidden;
}
#head div#navi ul,
#head div#navi ul li,
#head div#navi ul li a{
   display: block;
   height: 23px;
}
#head div#navi ul li{
   float: left;
}
#head div#navi ul li a{
   text-indent: -9999px;
   overflow: hidden;
}

#head div#navi ul li#navi1 a{width: 109px;background-position:    0px 0;}
#head div#navi ul li#navi2 a{width:  79px;background-position: -109px 0;}
#head div#navi ul li#navi3 a{width:  79px;background-position: -188px 0;}
#head div#navi ul li#navi4 a{width:  80px;background-position: -267px 0;}
#head div#navi ul li#navi5 a{width:  68px;background-position: -347px 0;}
#head div#navi ul li#navi6 a{width: 120px;background-position: -415px 0;}
#head div#navi ul li a:hover{background-image: url(../img/common/navi_hover.gif);}
#head.english div#navi ul li a:hover{
   background-image: url(../img/common/navi_en_hover.gif);
}

#head div#jpp,
#head div#jpp a{
   width: 93px;
   height: 21px;
}
#head div#jpp{
   position: absolute;
   left: 857px;
   top: 47px;
   overflow: hidden;
}
#head div#jpp a{
   display: block;
   text-indent: -9999px;
   overflow: hidden;
}
#head div#jpp a:hover{
   background: url(../img/common/jpp_hover.gif) no-repeat;
}
#head.english div#jpp a:hover{
   background: url(../img/common/jpp_en_hover.gif) no-repeat;
}


#head .head-info{
   position: absolute;
   top: 0;
   right: 0;
   width: 100%;
   height: 30px;
   overflow: hidden;
   zoom: 1;
}
#head .head-info h1{
   position: relative;
   right: auto;
   float: right;
}

#head .head-info #header-cart{
   float: right;
   width: 210px;
   height: 30px;
   color: #fff;
   text-align: center;
   margin-left: 8px;
   background: #5789B5;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
   -webkit-border-bottom-left-radius: 3px;
   -webkit-border-bottom-right-radius: 3px;
   -moz-border-radius-bottomleft: 3px;
   -moz-border-radius-bottomright: 3px;
   vertical-align: middle;
   overflow: hidden;
   zoom: 1;
}
#head .head-info #header-cart .inner{
   padding: 5px 0 0;
}
#head .head-info #header-cart a{
   display: inine-block;
   font-size: 10px;
   font-weight: normal;
   color: #fff;
   text-align: center;
   text-decoration: none;
   letter-spacing: 1px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   padding: 3px 5px;

}
#head #header-cart a:hover{
   background-color: #43739d;
}
#head #header-cart a i{
   font-size: 14px;
}



/*--------------------------------------------------------------------
03.header
--------------------------------------------------------------------*/
/*#header-wrapper {

	width: 950px;
	height: 74px;
	margin: 0px auto;
	padding: 0px;
	overflow: hidden;
}

#header-wrapper #tagline {

	width: 950px;
	height: 11px;
	text-align:right;
	color:#b6d2ee;
	font-size:9px;
	margin: 0px auto;
	padding: 0px;
	letter-spacing: 0.1px;
	margin-right:0px;
	margin-top:12px;
}

#header{

   height: 74px;
   overflow: hidden;
}
#header:after{

   content: ".";
   display: block;
   clear: both;
   height: 0;
   visibility: hidden;
}
#header div#logo,
#header div#logo a{

   background: url(../img/common/head.gif) no-repeat 0 -30px;
   width: 194px;
   height: 44px;
}
#header div#logo{margin-top: 5px;}
#header div#logo a{

   float:left;
   display:inline;
   text-indent: -9999px;
   overflow: hidden;
}


/*Header Menu
#header div#nav {
	float:right;
	margin-top: -35px;

}

#header #nav ul {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
}

#header #nav li {
	float: left;
	color: #d5d5d5;
}

#header #nav a {
	padding: 0px 7.5px 0px 7.5px;
	text-decoration: none;
	font-size: 10px;
	color: #151515;
}

#header #nav a:hover {
	text-decoration: underline;
	color: #0098A4;
}

#header #nav .first a {
	background: none;
}

#header #nav .last a {
	padding: 0px 0px 0px 7.5px;

}
*/


/*--------------------------------------------------------------------
04.contents
--------------------------------------------------------------------*/
#contents{
   position: relative;
   width: 950px;
   height: auto;
   padding-bottom: 100px;
}

#contents:after{
   content: ".";
   display: block;
   clear: both;
   height: 0;
   visibility: hidden;
}




/*--------------------------------------------------------------------
05.footer
--------------------------------------------------------------------*/
#footer{
   position: absolute;
   bottom: 0;
   left: 0;
   height: 100px;
   /*width: 950px;*/
   width: 100%;
   background: url(../img/common/foot_bg.gif) no-repeat bottom;
	margin: 0px auto;
	padding: 0px;
	letter-spacing: 0.1px;
	overflow: hidden;
}
#footer div{
   /*width: 950px;*/
   width: 100%;
   background: url(../img/common/foot_border.gif) no-repeat top;
   overflow: hidden;
}
#footer div ul,
#footer div ul li{
   display: block;
}
#footer div ul{
   margin-top: 27px;
   padding-bottom: 17px;
}
#footer div ul li{
   text-align: center;
   color: #a8a8b1;
}
#footer p{
   height: 37px;
   color: #545458;
   line-height: 37px;
   text-align: center;
   font-size: 10px;
   font-family: Helvetica;
   /*padding: 60px 0 0px;*/
}

#footer p a{
	color:#545458;
}


/*--------------------------------------------------------------------
06.others
--------------------------------------------------------------------*/
.block{display: block;}
/*.right{float: right;}*/







/*--------------------------------------------------------------------
07.level2
--------------------------------------------------------------------*/
#container{
}
#contents{
   margin-top: 0px;

}
#leftpane{
   float: left;
   width: 715px;
   margin-right: 10px;
   background: url(../img/common/lv2_bg.gif) repeat-y top;
   border-top: solid 1px #e5e5e5;
   border-bottom: solid 1px #e5e5e5;
   padding-bottom: 30px;
}
#boxbg{
   width: 715px;
   background: url(../img/common/lv2_bg_top.gif) no-repeat center top;
}
#rightpane{
   float: left;
   width: 225px;
}

/*rightpane
-----------------------------------------------*/
/*side_login*/
#side_login,
#side_login ul,
#side_login ul li,
#side_login ul li a{
   display: block;
   width: 225px;
}
#side_login ul li,
#side_login ul li a{
   height: 75px;
}
#side_login ul li a{
   text-indent: -9999px;
   overflow: hidden;
}
#side_login ul li a:hover{
   background: #fff;
   opacity:0.2;
   filter: alpha(opacity=20);
}
#sl1{background: url(../img/common/sl1.jpg);}
#sl2{background: url(../img/common/sl2.jpg); margin-top: 5px;}
#sl_tki{background: url(../img/common/sl_tki.jpg); margin-top: 5px;}
#side_login.english ul li#sl1{background: url(../img/common/sl1_en.jpg);}
#side_login.english ul li#sl2{background: url(../img/common/sl2_en.jpg);}
#leftpane h3{margin: 0 !important;}
/*side_guide*/
#side_guide{
   height: 51px;
   background: url(../img/common/guide_btn_bg.gif) no-repeat left top;
   overflow: hidden;
}
#side_guide a{
   display: block;
   width: 225px;
   height: 45px;
   text-indent: -9999px;
   overflow: hidden;
   margin-top: 5px;
}
#side_guide a:hover{
   background: #fff;
   opacity:0.2;
   filter: alpha(opacity=20);
}
/*side_navi*/
#side_navi,
#side_navi ul,
#side_navi ul li{
   display: block;
   width: 225px;
}
#side_navi{
   margin-top: 5px;
}
#side_navi ul li{
   background: url(../img/common/sidenavi_bg1.gif) repeat-x left top;
   border-bottom: solid 1px #f3f3f3;
   margin-bottom: 1px;
   padding: 4px 0 2px;
}
#side_navi ul li a{
   display: block;
   color: #086fa3;
   text-decoration: none;
   background: url(../img/common/sidenavi_bg2.gif) no-repeat left 8px;
   padding: 3px 0 2px 18px;
}
#side_navi ul li a:hover{

}
/*side_bnr*/
#side_bnr{
   margin-top: 10px;
}
#side_bnr a,
#side_bnr a img{
   display: block;
}
#side_bnr a{margin-bottom: 3px;}

/*box*/
.boxbg{
   width: 715px;
   background: url(../img/common/lv2_bg.gif) repeat-y top;
   margin-top: 0;
}
.boxbg_in{
   width: 715px;
   background: url(../img/common/lv2_bg_top.gif) no-repeat center top;
   overflow: hidden;
   padding-bottom: 30px;
}
.box{
   width: 655px;
   margin: 30px 0 0 30px;
}
.box:after{
   content: ".";
   display: block;
   clear: both;
   height: 0;
   visibility: hidden;
}
.box p{
   margin-top: 10px;
}
.box img.right{
   display: block;
   margin: 0 0 5px 15px;
}



/*--------------------------------------------------------------------
02.assessment
--------------------------------------------------------------------*/
#loginbox{
   width: 950px;
   height: 650px;
   overflow: hidden;
   padding-bottom: 10px;
}
#loginbox table{
   width: 950px;
   margin: 50px 0 0 0;
   background: #cfd5d8;
}
#loginbox table th,
#loginbox table td{
   text-align: left;
   padding: 10px 20px;
}
#loginbox table th{
   font-size: 20px;
   text-align: center;
   background: #fff;
}
#loginbox table td{
   background: #fff;
}
#loginbox table td input{
   width: 690px;
   height: 40px;
   background: #ddd;
   border: solid 1px #bbb;
   color: #555;
   font-size: 28px;
}

#btn{margin-top: 15px;}
#flash_a{
   width: 950px;
   height: 650px;
   margin: 0 auto;
}

#english{
   height: 400px;
}


/*--------------------------------------------------------------------
01.Assessment
--------------------------------------------------------------------*/
#container div#assessment{
   height: 700px;
   text-align: center;
   background: #fff;
   overflow: hidden;
}
#container div#assessment div#flash{
   with: 822px;
   height: 536px;
   background: url(../img/assessment/test_bg.jpg) no-repeat;
   margin: 20px auto 0;
}


#assessment table{
   width: 535px;
   margin: 150px auto 0;
}
#assessment table th{
   background: #ededed;
   font-size: 16px;
   padding: 10px 0;
}
#assessment table td{
   vertical-align: middle;
   padding: 10px 0;
}
.pp{
   width: 300px;
   height: 44px;
   line-height: 44px;
   font-size: 30px;
   background: #ddd;
   border: solid 1px #bbb;
}



/*--------------------------------------------------------------------
00.modal window
--------------------------------------------------------------------*/
iframe{
   border: none;
}
#modal-container .iziModal-content a.close{
   position: absolute;
   right: -15px;
   top: -15px;
   display: block;
   width: 30px;
   height: 30px;
   text-align: center;
   line-height: 32px;
   background-color: #333;
   color: #fff;
   -webkit-border-radius: 30px;
   -moz-border-radius: 30px;
   border-radius: 30px;
   cursor: pointer;
}
#modal-container .iziModal-content a.close.desktop{
   /*display: none !important;*/
}