@charset "utf-8";

/**
 *
 *  学習システム - eラーニングシステム「el-Campus」
 *
 */

/*--------------------------------------------------------------------------
   overwrite  - 共通CSSの上書き -
---------------------------------------------------------------------------*/

.page-lead_cmn{
	margin-bottom: 0;
	padding: 65px 0 5px;
	background: url(../images/elearning/lead_bg.jpg) no-repeat #FFF;
	border-top: 3px solid #0652A5;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.page-lead_cmn .em{
	margin-bottom: 24px;
}
.inner-base{
	padding: 40px;
	border: 1px solid #C1CBD5;
}

.dev-sp .inner-base{
  font-size: 28px;
}

.inner-base._type01{
	padding: 30px 30px 20px;
}


/*--------------------------------------------------------------------------
   コンテンツセクション
---------------------------------------------------------------------------*/

/* リード
-----------------------------------------------------------------*/
.page-lead_cmn .txt-col{
	padding-left: 40px;
}
.page-lead_cmn ul{
	margin-top: 88px;
	padding: 0 6px 20px;
}
.page-lead_cmn li{
	position: relative;
	width: 235px;
	float: left;
	padding-bottom: 35px;
	border-left: 1px solid #DFE4E9;
	text-align: center;
}
.page-lead_cmn li .ico{
	margin-bottom: 17px;
}
.page-lead_cmn li a:hover img{
	-ms-filter:"alpha(opacity=70)";
	filter:alpha(opacity=70);
	opacity:0.7;
}
.page-lead_cmn li:first-child{
	border: none;
}
.page-lead_cmn li:after{
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-left: -12px;
	width: 25px;
	height: 25px;
	background: url(/shared/images/ico_arrow05.png) no-repeat;
}

/* point-base
-----------------------------------------------------------------*/
.point-base{
	background: #FFF;
	margin-top: 50px;
}
.point-base .ttl{
	position: relative;
}
.point-base .ttl .ico{
	position: absolute;
	left: 50%;
	top: -15px;
}
.point-base .heading{
	font-size: 129%;
}

/* id
-----------------------------------------------------------------*/
#anchor01,
#anchor02,
#anchor03{
	padding-top: 50px;
}
#anchor01 .point-base,
#anchor02 .point-base,
#anchor03 .point-base{
	margin-top: 0;
}

/* point01
-----------------------------------------------------------------*/
.point-base.point01 .ttl .ico{
	margin-left: -279px;
}
.point-base.point01 p{
	margin: 5px 0 27px;
	font-size: 107%;
}
.point-base.point01 .img{
	margin-top: 20px;
}
.point-base.point01 .btn{
	text-align: center;
}

/* point02
-----------------------------------------------------------------*/
.point-base.point02 .ttl .ico{
  margin-left: -294px;
}

/* point03
-----------------------------------------------------------------*/
.point-base.point03 .ttl .ico{
	margin-left: -312px;
}

/* point04
-----------------------------------------------------------------*/
.point-base.point04 .inner-base._type01{
	padding-bottom: 35px;
	border-bottom: none;
}
.point-base.point04 .ttl .ico{
	margin-left: -332px;
}
.point-base.point04 .img-box_cmn .img-col{
	padding: 2px;
	background: #EAEAEA;
	border: 1px solid #ccc;
}
.point-base.point04 .img-box_cmn .txt-col .notice{
	font-size: 86%;
	padding: 1em;
	text-indent: -1em;
}
.point-base.point04 .consultation{
	padding: 24px 24px 30px 24px;
	background: #F2F2F2;
	text-align: center;
	border-left: 1px solid #C1CBD5;
	border-right: 1px solid #C1CBD5;
	border-bottom: 1px solid #C1CBD5;
}
.point-base.point04 .consultation dd a:hover img{
	-ms-filter:"alpha(opacity=70)";
	filter:alpha(opacity=70);
	opacity:0.7;
}

/* フロー
-----------------------------------------------------------------*/
.flow-list{}
.flow-list ul{
	margin: 0 -20px;
}
.flow-list ul li{
	position: relative;
	float: left;
	width: 188px;
	margin: 30px 20px 0;
}
.flow-list ul li.arrow:after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: -26px;
	width: 11px;
	height: 18px;
	margin: auto 0;
	background: url(../images/elearning/ico_flow.png) no-repeat;
}
.flow-list ul li .ttl{
	display: table;
	position: relative;
	width: 100%;
	padding-left: 50px;
	font-size: 108%;
	font-weight: bold;
	line-height: 1.5;
}
.flow-list ul li .ttl span{
	display: table-cell;

	vertical-align: middle;
}
.flow-list ul li .ttl:before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 32px;
	height: 32px;
	margin: auto 0;
	background: url(/shared/images/ico_num_m.png) no-repeat;
}
.flow-list ul li .ttl.num1:before{
	background-position: 0 0;
}
.flow-list ul li .ttl.num2:before{
	background-position: 0 -32px;
}
.flow-list ul li .ttl.num3:before{
	background-position: 0 -64px;
}
.flow-list ul li .ttl.num4:before{
	background-position: 0 -96px;
}
.flow-list ul li .ttl.num5:before{
	background-position: 0 -128px;
}
.flow-list ul li .ttl.num6:before{
	background-position: 0 -160px;
}
.flow-list ul li .img{
	display: block;
	margin-top: 15px;
}
.flow-list ul li .txt{
	display: block;
	margin-top: 20px;
	font-size: 86%;
	line-height: 1.5;
}



/* 授業コンテンツ
-----------------------------------------------------------------*/
.feature-frame{
	margin: 0 -14px;
}
.feature-frame .feature-box{
	float: left;
	width: 196px;
	margin: 30px 14px 0;
}
.feature-frame h3{
	margin-top: 20px;
	margin-right: -5px;
	color: #1B509B;
	font-size: 129%;
	font-weight: bold;
	line-height: 1.3;
}
.feature-frame p{
	margin-top: 10px;
}

.sample-frame{
	margin: 0 -14px;
}
.sample-frame .sample-box{
	float: left;
	width: 196px;
	margin: 30px 14px 0;
}
.sample-frame .sample-box > a{
	text-decoration: none;
}
.sample-frame .sample-box > a:hover{
	text-decoration: underline;
}
.sample-frame .sample-box > a:hover .img img{
	-ms-filter:"alpha(opacity=80)";
	filter:alpha(opacity=80);
	opacity:0.8;
}
.sample-frame .img{
	background: #FFF;
}
.sample-frame h4{
	margin-top: 25px;
	color: #1A509A;
	font-size: 129%;
	font-weight: bold;
	line-height: 1.4;
}
.sample-frame p{
	margin-top: 13px;
}
.sample-frame p.name{
	padding-left: 25px;
	background: url(../images/elearning/ico_person.png) no-repeat 0 .1em;
}
.sample-frame p.link{
	padding: 15px 5px 0;
	border-top: 1px solid #C2CCD5;
}

/* モーダル */
#modal-layer{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1500;
	width: 100%;
	height: 100%;
	background-color: rgba(181,204,227,0.8);
}
#modal{
	display: none;
	position: absolute;
	top: 125px;
	left: 0;
	right: 0;
	z-index: 1600;
	width: 976px;
	margin: 0 auto;
}
#modal .btn-close{
	position: absolute;
	top: -20px;
	right: -10px;
}

#modal table.os td{
	border: none;
	padding: 0 30px 0 0;
	font-size: 100%;
}


/* オリジナル教材
-----------------------------------------------------------------*/
.sec_aside{
	margin-top: 50px;
	border: 3px solid #55A2E5;
	background: #FFF;
}
.sec_aside h2{
	margin-bottom: 15px;
	color: #55A1E5;
	font-size: 165%;
	line-height: 1.6;
}