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


/******************************************
基本設定
*******************************************/
html{
font-size:14px;
}
body {
	background-color: #efefef;
}
body,
h1,h2,h3,h4,h5,h6,p,pre,blockquote,
ul,ol,dl,
th,td {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 150%;
	color: #555;
	text-align: left;
}
h1,h2,h3,h4,h5,h6.p {
     font-weight: normal;
}
p {
     margin: 0;
}
ol, ul {
    list-style: none;
}
fieldset,img {
     border: 0;
}
caption,th {
}
address,caption,cite,code,dfn,em,strong,th,var {
     font-style: normal;
}
img	{
vertical-align: bottom;
}

/* clearfix */
.cf {
	zoom: 1;
}
.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after {
	clear: both;
}


a:link    {color: #0088A6; text-decoration:none;}
a:visited {color: #0088A6; text-decoration:none;}
a:hover   {color: #FF8000; text-decoration:none;}

/******************************************
*******************************************
全ページ共通
*******************************************
*******************************************/

/******************************************
コンテナ
*******************************************/
#container {
	margin: 0;
	width: 100%;
	border-bottom: 1px solid #7fcad0;
	background-color: #FFF;
}

/******************************************
ヘッダ
*******************************************/
header {
	margin: 0 auto 4px;
	width: 100%;
	border-bottom: 4px solid #7fcad0;
	background-color: #FFF;
}
#headerContent {
	margin: 0 auto;
	padding: 0;
	width: 960px;
}
#headerContent h1 {
	margin-top: 7px;
	margin-bottom: 5px;
	float: left;
}
#headerContent h1 img {
	width: 280px;
	height: auto;
}
#headerContent h2 {
	margin-top: 30px;
	float: right;
}
#headerContent h2 img {
	width: 280px;
	height: auto;
}



/******************************************
フッタ
*******************************************/

/* フッタ
*******************************************/
footer {
	margin: 0 auto 20px;
	padding: 10px 0;
	width: 960px;
}
/* サイトマップ
*******************************************/
ul.footerLink {
	margin-right: 2em;
	font-size: 0.9rem;
	float: left;
	width: 500px;
}
ul.footerLink li {
	margin-top: 0.2em;
	margin-right: 2em;
	padding-left : 1em;
	background: url(../img/linkmarker.png) no-repeat 0px 3px;
	font-weight: bold;
	float: left;
}
/* シグネチュア
*******************************************/
footer address {
	font-size: 0.75rem;
	float: right;
	color: #AAA;
}


/* リンク色指定
********************/
footer a:link    {color: #555; text-decoration:none;}
footer a:visited {color: #555; text-decoration:none;}
footer a:hover   {color: #0088A6; text-decoration:underline;}



/******************************************
*******************************************
下層ページ共通
*******************************************
*******************************************/

/******************************************
パンくずリスト
*******************************************/
nav#topicpath {
	margin: 0 auto;
	width: 100%;
	height: 20px;
	background-color: #EEE;
	border-top: 1px solid #CCC;
}
nav#topicpath ul{
	margin: 0 auto;
	padding: 0 20px;
	width: 960px;
	font-size: 1rem;
}  
nav#topicpath ul li {  
    display:inline;  
    list-style-type:none;
	line-height: 20px;
	color: #555;
}  
nav#topicpath ul li a {
	padding-right: 12px;
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: right 7px;
	background-size: 6px 6px;
	background-image: url(../img/tpkpath_arrow.png);
}
nav#topicpath li a:link    {color: #0088a6;}
nav#topicpath li a:visited {color: #0088a6;}
nav#topicpath li a:hover   {color: #0088A6; text-decoration:underline;}

/******************************************
共通メイン
*******************************************/
#main {
	margin: 0 auto;
	width: 1000px;
	min-height: 500px;

}


/******************************************
管理画面
*******************************************/
#managementPage {
	margin: 30px auto;
	width: 960px;
    font-size: 1rem;
}
#managementPage .midashi1 {
	margin-top: 30px;
	margin-bottom: 20px;
	font-size: 1.5rem;
	font-weight: bold;
	border-bottom: 1px solid #CCC;
}  

#managementPage ul.menu {
	margin-top: 1.5em;
	margin-left: 50px;
	font-size: 1.5rem;
	font-weight: bold;

}  
#managementPage ul.menu > li {
	margin-bottom: 1em;
	padding-left: 1.5em;
	background-repeat: no-repeat;
	background-position: 0 3px;
	background-size: 20px 20px;
	background-image: url(../img/icon_Next.png);
}  

/* アップロード
********************/
.uploadFileName {
	margin-left: 50px;
	width: 500px;
    font-size: 1rem;
}
.formBtn {
	margin-top: 10px;
	margin-left: 50px;
	width: 200px;
	height: 31px;
    font-size: 1rem;
	color: #555;
	cursor: pointer;
	-webkit-appearance: none;
	border-radius: 4px;
	background-color: #F6F6F6;
	background: -webkit-gradient(linear, left top, left bottom, 
	            color-stop(0.20, #fff), color-stop(1.00, #eee));
	background: -webkit-linear-gradient(top, #fff 20%, #eee 100%);
	background: linear-gradient(to bottom, #fff 20%, #eee 100%);
	border: 1px solid #AAA;
}

.formBtn a:link    {color: #0095c7;}
.formBtn a:visited {color: #427282;}
.formBtn a:hover   {color: #FF8000;}

/* ユーザーリスト
********************/
ul.midashiBtn {
	margin-top: -65px;
	margin-bottom: 30px;
	text-align:right;
}
table.userList {
	width: 100%;
}
table.userList tr {
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	text-align: center;
	vertical-align: middle;
}
table.userList tr.complete {
	background-color: #FF9;
}
table.userList th {
	padding: 2px 5px;
	background-color: #EEE;
	border-left: 1px solid #FFF;
	border-right: 1px solid #FFF;
	font-size: 0.9rem;
	text-align: center;
	font-weight: bold;
}
table.userList td {
	padding: 2px 5px;
	border-left: 1px solid #EEE;
	border-right: 1px solid #EEE;
	font-size: 1rem;
}

/******************************************
ログイン
*******************************************/
dl.login {
	margin: 10px auto 30px;
	width: 750px;
	font-size: 1rem;
	list-style: decimal;
}  
dl.login dt {  
	width: 9em;  
	padding: 10px 0 0;  
	float: left;  
	clear: left;  
	font-weight: bold;
	line-height: 1.8;
}  
dl.login dd {  
	margin-left: 9em;  
	padding: 6px 0px;  
	line-height: 1.8;
}  
dl.login .textField {
    padding: 3px 3px;
	width: 70%;
    font-size: 1.2rem; 
	border:1px solid #AAA;
}  
dl.login .loginBtn {
	margin-top: 10px;
	width: 200px;
	height: 31px;
    font-size: 1rem;
	color: #555;
	cursor: pointer;
	-webkit-appearance: none;
	border-radius: 4px;
	border: 1px solid #AAA;
	background-color: #F6F6F6;
	background: -webkit-gradient(linear, left top, left bottom, 
	            color-stop(0.20, #fff), color-stop(1.00, #eee));
	background: -webkit-linear-gradient(top, #fff 20%, #eee 100%);
	background: linear-gradient(to bottom, #fff 20%, #eee 100%);
}




/******************************************
目次
*******************************************/
#commonPage {
	margin: 30px auto;
	width: 800px;
}


#commonPage p {
	margin: 0 auto 0.5em;
}  

#commonPage .midashi1 {
	margin-top: 30px;
	margin-bottom: 20px;
	font-size: 1.5rem;
	font-weight: bold;
	border-bottom: 1px solid #CCC;
}  
#commonPage .midashi2 {
	margin-top: 30px;
	margin-bottom: 20px;
	padding: 0.2em 1em;
	width: 10em;
	font-size: 1.2rem;
	font-weight: bold;
	border: 1px solid #CCC;
} 
#commonPage .midashi3 {
	margin-top: 30px;
	margin-bottom: 0.5em;
	font-size: 1.1rem;
	font-weight: bold;
} 
#commonPage ul.mokuji {
	margin-top: 25px;
	margin-left: 20px;
	margin-bottom: 20px;
	font-size: 1.5rem;
	font-weight: bold;
}  
#commonPage ul.mokuji li {
	margin: 0.2em 0;
	padding-left: 15px;
}  
#commonPage ul.mokuji li a {
	height: 47px;
	line-height: 47px;
}  
#commonPage ul.mokuji li.complete {
	background-image: url(../img/icon_Complete.png);
	background-size: 550px 51px;
	background-repeat: no-repeat;
}
#commonPage ul.complete {
	margin-top: 40px;
	margin-left: 20px;
	margin-bottom: 20px;
	font-size: 1.5rem;
	font-weight: bold;
}  
#commonPage ul.complete li {
	margin: 0.5em 0;
	height: 47px;
	line-height: 47px;
}

#commonPage ul.certificate {
	margin-top: 40px;
	margin-left: 20px;
	margin-bottom: 20px;
	font-size: 1.5rem;
	font-weight: bold;
}  
#commonPage ul.certificate li {
	margin: 0.5em 0;
	padding-left: 45px;
	height: 47px;
	line-height: 47px;
	background-image: url(../img/icon_Certificate.png);
	background-size: 500px 47px;
	background-repeat: no-repeat;
}



/* ボタン
********************/
.commonPageBtn {
	margin-left: 20px;
	text-align: center;
	font-weight: normal;
}
.commonPageBtn li {
	margin-right: 10px;
	width: 200px;
	height: 36px;
	display: block;
	text-align: center;
	line-height: 36px;
	color: #DDD;
	border-radius: 6px;
	border: 1px solid #AAA;
	font-size: 1.1rem;
	float: left;
}
.commonPageBtn li a {
	color: #555;
	display: block;
	border-radius: 6px;
	background: -webkit-gradient(linear, left top, left bottom, 
	            color-stop(0.20, #fff), color-stop(1.00, #eee));
	background: -webkit-linear-gradient(top, #fff 20%, #eee 100%);
	background: linear-gradient(to bottom, #fff 20%, #eee 100%);
} 
.commonPageBtn li a:link    {color: #555; text-decoration: none;}
.commonPageBtn li a:visited {color: #555; text-decoration: none;}
.commonPageBtn li a:hover {
	background: -webkit-gradient(linear, left top, left bottom, 
	            color-stop(0.20, #eee), color-stop(1.00, #fff));
	background: -webkit-linear-gradient(top, #eee 20%, #fff 100%);
	background: linear-gradient(to bottom, #eee 20%, #fff 100%);
}


/******************************************
コントローラー
*******************************************/
#eLearnControler {
	margin-left: 20px;
	margin-top: 30px;
	width: 190px;
	float: left;
}
#eLearnControler h1 {
	padding: 8px 2px 8px 10px;
	font-size: 1.1rem;
	background-color: #0096a1;
	color: #FFF;
	font-weight: bold;
	border-radius: 6px;
}
#eLearnControler h1:first-letter {
	padding-top: 0.3em;
	padding-right: 0.3em;
    font-size: 2em;
    line-height: 1;
    float: left;
}

#eLearnControler p {
	margin: 30px auto 20px;
	font-size: 1.5rem;
	text-align: center;
}


/* ボタン
********************/
.eLearnControlerBtn {
	width: 100%;
	text-align: center;
}
.eLearnControlerBtn li {
	margin-bottom: 10px;
	width: 98px;
	height: 40px;
	display: block;
	text-align: center;
	line-height: 40px;
	color: #DDD;
	border-radius: 6px;
	border: 1px solid #AAA;
	font-size: 1rem;
	float: left;
}
.eLearnControlerBtn li a {
	color: #555;
	display: block;
	border-radius: 6px;
	background: -webkit-gradient(linear, left top, left bottom, 
	            color-stop(0.20, #fff), color-stop(1.00, #eee));
	background: -webkit-linear-gradient(top, #fff 20%, #eee 100%);
	background: linear-gradient(to bottom, #fff 20%, #eee 100%);
}

.eLearnControlerBtn li.w100L {
	width: 88px;
}
.eLearnControlerBtn li.w100R {
	margin-left: 10px;
	width: 88px;
}
.eLearnControlerBtn li.w210 {
	width: 188px;
}
.eLearnControlerBtn li img {
	width: 24px;
	height: 24px;
	display: inline-block;
	vertical-align: middle;
	opacity: 0.2;
}
.eLearnControlerBtn li a img {
	opacity: 1;
}

.eLearnControlerBtn li img.arrowL {margin-right: 10px;}
.eLearnControlerBtn li img.arrowR {margin-left: 10px;}
  
.eLearnControlerBtn li a:link    {color: #555; text-decoration: none;}
.eLearnControlerBtn li a:visited {color: #555; text-decoration: none;}
.eLearnControlerBtn li a:hover {
	background: -webkit-gradient(linear, left top, left bottom, 
	            color-stop(0.20, #eee), color-stop(1.00, #fff));
	background: -webkit-linear-gradient(top, #eee 20%, #fff 100%);
	background: linear-gradient(to bottom, #eee 20%, #fff 100%);
}




/******************************************
eラーニングコンテンツ
*******************************************/
#eLearnContents {
	width: 760px;
	min-height: 500px;
	float: right;
	background: #FFF url(../img/bkgnd_main.png) repeat-y;
}
#eLearnContentsBox {
	margin-top: 25px;
	margin-bottom: 25px;
	margin-left: 40px;
	width: 700px;
	background-color: #FFF;;
}
/* 囲み
********************/
blockquote.caution {
	margin: 0.5em auto;
	padding: 0.2em 0 0.2em 1em;
	border: 1px solid #CCC;
}
blockquote.colorRed {
	border-color: #F60;
}

#eLearnContentsBox h1 {
	margin-bottom: 0.5em;
	line-height: 120%;
	font-size: 2rem;
	font-weight: bold;
}
#eLearnContentsBox p {
	margin: 0.5em 0;
}

/* リスト
********************/
#eLearnContentsBox ul {
	margin: 0.5em 1.5em 0.5em 1.5em;
	list-style-type: disc;	
}
#eLearnContentsBox ol {
	margin: 0.5em 1.5em 0.5em 1.5em;
	list-style-type: decimal;
}
#eLearnContentsBox li {
	margin: 0.2em 0;
}

/* 上付き文字など
********************/
#eLearnContentsBox sup {
	margin-left: 0.3em;
	font-size: 70%;
	vertical-align: super;
}

/* フォントサイズ
********************/
.size200 {font-size: 2.0rem;}
.size190 {font-size: 1.9rem;}
.size180 {font-size: 1.8rem;}
.size170 {font-size: 1.7rem;}
.size160 {font-size: 1.6rem;}
.size150 {font-size: 1.5rem;}
.size140 {font-size: 1.4rem;}
.size130 {font-size: 1.3rem;}
.size120 {font-size: 1.2rem;}
.size110 {font-size: 1.1rem;}
.size100 {font-size: 1.0rem;}
.size090 {font-size: 0.9rem;}
.size080 {font-size: 0.8rem;}
.size070 {font-size: 0.7rem;}
.size060 {font-size: 0.6rem;}
.size050 {font-size: 0.5rem;}

.colorRed {
	color: #F60;
}



/* テキスト配置
********************/
.textLeft   {text-align: left !important;}
.textCenter {text-align: center !important;}
.textRight  {text-align: right !important;}

.valignMiddle {vertical-align: middle;}

/* 画像配置
********************/
.imgW500px {margin: 10px 100px; width: 500px; height: auto;}
.imgW600px {margin: 10px 50px; width: 600px; height: auto;}
.imgW700px {margin: 10px 0; width: 700px; height: auto;}


/* テーブル
********************/
#eLearnContentsBox table {
	margin: 0.5em auto;
	width: 100%;
}
#eLearnContentsBox table th {
	padding: 4px 8px;
	background-color: #0096a1;
	border: 1px solid #FFF;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	color: #FFF;
} 
#eLearnContentsBox table tr {  
	background-color: #eaf7f8;
}
#eLearnContentsBox table td {  
	padding: 4px 8px;
	border: 1px solid #FFF;
}
#eLearnContentsBox table td.dark {  
	background-color: #d7eff1;
}





/******************************************
受講完了画面
*******************************************/
.checkBox {
	margin-bottom: 1em;
	font-size: 1.3rem;
}
/* チェックボックス
********************/
.chkbox {
}
/* ラベルのスタイル　*/
.chkbox label {
	padding-left:	22px;			/* ラベルの位置 */
	font-size:		1.2rem;
	line-height:	20px;
	display:		inline-block;
	cursor:			pointer;
	position:		relative;
}
/* ボックスのスタイル */
.chkbox label:before {
	content: '';
	width: 20px;
	height: 20px;
	display: inline-block;
	position: absolute;
	left: 0;
	top: -2px;
	background-color: #fff;
	box-shadow: inset 0px 1px 3px 0px #000;
	border-radius: 4px;
}
/* 元のチェックボックスを表示しない */
.chkbox input[type=checkbox] {
	display: none;
}
/* チェックした時のスタイル */
.chkbox input[type=checkbox]:checked + label:before {
	content: '\2713';		/* チェックの文字 */ 
	font-size: 1.5rem;
	color: #fff;
	background-color: #FF8000;
}
.formBtnComplete {
	margin: 20px auto;
	width: 200px;
	height: 40px;
    font-size: 1.2rem;
	font-weight: bold;
	color: #555;
	cursor: pointer;
	-webkit-appearance: none;
	border-radius: 4px;
	background-color: #F6F6F6;
	background: -webkit-gradient(linear, left top, left bottom, 
	            color-stop(0.20, #fff), color-stop(1.00, #eee));
	background: -webkit-linear-gradient(top, #fff 20%, #eee 100%);
	background: linear-gradient(to bottom, #fff 20%, #eee 100%);
	border: 1px solid #AAA;
}
input.formBtnComplete:disabled{
	color: #ebebeb;
	cursor: default;
	background: -webkit-gradient(linear, left top, left bottom, 
	            color-stop(0.20, #fff), color-stop(1.00, #fcfcfc));
	background: -webkit-linear-gradient(top, #fff 20%, #fcfcfc 100%);
	background: linear-gradient(to bottom, #fff 20%, #fcfcfc 100%);
	border: 1px solid #CCC;
}