@charset "utf-8";


/* ------------------------------------------
 common
------------------------------------------ */
#pageHead.course{
	background: url("../images/course/h2_bg.jpg") no-repeat top center;
	-moz-background-size: cover;
	background-size: cover;
	margin-bottom: 0;
}

@media screen and ( min-width: 769px ){
	#pageHead.course h1 img{
		margin-bottom: 40px;
	}
}

.layout_course{
	width: 800px;
	margin: 0 auto;
}

#main_contents.course .hidden_form{
	display: none;
}

.bg_line{
	position: relative;
	padding-top: 47px;
	padding-bottom: 100px;
	margin-bottom: 0 !important;
}

#main_contents.course .bg_line:after{
	content: "";
	display: block;
	width: 100%;
	height: 10px;
	background:url("../images/course/bg_line.jpg") no-repeat;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: absolute;
	bottom: 0;
	left: 0;
}

@media screen and ( max-width: 640px ){

	.bg_line{
		padding-top: 30px;
		padding-bottom: 40px;
	}

}


/* ------------------------------------------
 sec01
------------------------------------------ */
#sec01 a{
	text-decoration: underline;
}

#main_contents.course #sec01{
	background: url("../images/course/bg_sec01.jpg") no-repeat;
	background-size: cover;
}

#main_contents.course #sec01 nav{
	overflow: hidden;
}

#main_contents.course #sec01 .lesson {
	text-align: center;
}

#main_contents.course #sec01 .lesson li:last-child {
	margin-right: 0;
}

#main_contents.course #sec01 dl{
	width: 285px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

#main_contents.course #sec01 dl ul{
	overflow: hidden;
}


#main_contents.course #sec01 .banner{
	width: 701px;
	margin: 0 auto;
}



#main_contents.course #sec01 .banner li:last-child {
	margin-bottom: 0;
}

@media screen and ( min-width: 641px ){
	#main_contents.course #sec01 ul.lesson li {
		display: inline-block;
		width: 278px;
		margin-right: 20px;
	}
	#main_contents.course #sec01 nav > dl{
		width: 285px;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
	}

	#main_contents.course #sec01 dl ul li{
		width: 50%;
		float: left;
	}
}

@media screen and ( max-width: 640px ){
	#main_contents.course #sec01 .layout_thin > .mb50{
		margin-bottom: 0;
	}

	#main_contents.course #sec01 .layout_thin > div > p:first-child {
		letter-spacing: -0.04em;
	}

	#main_contents.course #sec01 ul.lesson li{
		margin: 20px 0 0;
		padding: 0;
	}

	#main_contents.course #sec01 dl{
		margin-bottom: 13px;
	}
	#main_contents.course #sec01 dl ul li{
		text-align: center;
		width: 100%;
	}
	#main_contents.course #sec01 dl dt{
		margin-bottom: 8px;
	}
}



.bg_line_or{
	position: relative;
	padding-top: 50px;
	padding-bottom: 100px;
	margin-bottom: 0 !important	;
}

#main_contents.course .bg_line_or:after{
	content: "";
	display: block;
	width: 100%;
	height: 10px;
	background:url("../images/course/bg_line-02.jpg") no-repeat;
	-webkit-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
	position: absolute;
	bottom: 0;
	left: 0;
}

.bg_line_br{
	position: relative;
	padding-top: 50px;
	padding-bottom: 100px;
	margin-bottom: 0 !important	;
}

#main_contents.course .bg_line_br:after{
	content: "";
	display: block;
	width: 100%;
	height: 10px;
	background:url("../images/course/bg_line-03.jpg") no-repeat;
	-webkit-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
	position: absolute;
	bottom: 0;
	left: 0;
}

.bg_line_pl{
	position: relative;
	padding-top: 50px;
	padding-bottom: 100px;
	margin-bottom: 0 !important	;
}

#main_contents.course .bg_line_pl:after{
	content: "";
	display: block;
	width: 100%;
	height: 10px;
	background:url("../images/course/bg_line-04.jpg") no-repeat;
	-webkit-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
	position: absolute;
	bottom: 0;
	left: 0;
}

.bg_line_n{
	position: relative;
	padding-top: 100px;
	padding-bottom: 100px;
	margin-bottom: 0 !important	;
}

@media screen and ( max-width: 640px ){
	#main_contents.course .bg_line_br::after,
	#main_contents.course .bg_line_pl::after,
	#main_contents.course .bg_line_or::after{
		height: 5px;
	}
}



#main_contents.course .lesson_list{
	overflow: hidden;
	margin-top: 23px;
}

#main_contents.course .lesson_list .bd{
	padding: 27px 30px 28px;
	border: 1px solid #c8c8c8;
	margin-bottom: 30px;
}

#main_contents.course .lesson_list .bd:last-of-type{
	margin-bottom: 0;
}

@media screen and ( max-width: 640px ){
	#main_contents.course .lesson_list .bd{
		padding: 18px 4% 8px;
	}
}

	#main_contents.course .lesson_list h3{
	color: #1ea239;
	}

#main_contents.course .lesson_list .head{
	overflow: hidden;
	margin-bottom: 13px;
	border-bottom: 1px dotted #333;
	padding-bottom: 10px;

}

#main_contents.course .lesson_list .head .left{
	width : 415px;
   	float: left;
}
#main_contents.course .lesson_list .head .right{
	width : 270px;
	float: right;
}

#main_contents.course .lesson_list .head .right img{
	width: 270px;
	height: auto;
	text-align: center;
}

#main_contents.course .lesson_list dl li{
	line-height: 1.8em;
}

#main_contents.course .bd h3{
	overflow: hidden;
	position: relative;
	margin-bottom: 12px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
}

#main_contents.course .bd h3 .font{
	font-size: 80px;
	font-family: helvetica, arial;
	margin-right: 10px;
	line-height: 1;
}

#main_contents.course .bd h3 span:not(.font){
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

@media screen and ( max-width: 640px ){
	#main_contents.course #sec02 h2,
	#main_contents.course #sec03 h2,
	#main_contents.course #sec04 h2{
		margin-bottom: 27px;
	}
	#main_contents.course #sec02 h2 img,
	#main_contents.course #sec03 h2 img,
	#main_contents.course #sec04 h2 img{
		height: 90px;
	}
	#main_contents.course .bd h3{
		font-size: 16px;
		margin-bottom: 6px;
	}

	#main_contents.course .bd h3 .font{
		font-size: 52px;
	}

	#main_contents.course .lesson_list .head{
		margin-bottom: 5px;
	}

	#main_contents.course .lesson_list .bottom .right{
		margin-top: 0 !important;
	}
}


#main_contents.course .lesson_list .bottom{
	overflow: hidden;
}
#main_contents.course .lesson_list .bottom dl,
#main_contents.course .lesson_list .bottom dt,
#main_contents.course .lesson_list .bottom dd,
#main_contents.course .lesson_list .bottom li{
	line-height: 1.75em;
}


#main_contents.course .lesson_list .bottom .left{
	width : 50%;
   	float: left;
   	padding-left: 20px;
}
#main_contents.course .lesson_list .bottom .right{
	width : 50%;
	float: right;
	padding-left: 20px;
}


#main_contents.course .course_list{
	overflow: hidden;
	clear: both;
	padding-top: 20px;
}

#main_contents.course .course_list li.bg{
	width:353px;
	float: left;
	margin-right: 30px;
	padding: 10px 50px 30px 50px;
	background: rgba(192,192,192,.2);
	margin-bottom: 30px;
}

#main_contents.course .course_list li.bg:nth-child(even){
	margin-right: 0;
}

#main_contents.course .course_list li.bg .img{
	padding: 30px;
	text-align: center;
}

#main_contents.course .course_list li.bg ul.check li{
	background: url("../images/course/check.png") no-repeat 0 4px;
	text-indent: 25px;
	margin-bottom: 10px;
}

#main_contents.course .course_list li.bg ul.check li:last-child{
	margin-bottom: 0;
}

#main_contents.course #sec02 ul li:nth-child(3) .head{
	padding-bottom: 0;
}

#main_contents.course #sec02  .lesson_list dl li small{
	font-size: 12px;
	line-height: 1.4em;
}

#main_contents.course #sec03 .lesson_list li:first-child .head{
	padding-bottom: 25px;
}

#main_contents.course .link.bg_green{
	color: #FFF;
	padding: 5px 0;
	display: block;
}

#main_contents.course .option_list{
	border-top: 1px dotted #000;
	margin-top: 20px;
}

#main_contents.course .option_list dt{
	margin-bottom: 5px;
	padding-top: 26px;
}

#main_contents.course .option_list dt span{
	padding-right: 5px;
}

#main_contents.course .pay_list dt{
	margin-bottom: 10px;

}

#main_contents.course .pay_list dd{
	margin-bottom: 20px;
	line-height: 2;
}

#main_contents.course .pay_list dd:last-child{
	margin-bottom: 0;
}

#main_contents.course .pay_list dd p{
	line-height: 2;
}

#main_contents.course .pay_list dd ul li{
	display: inline-block;
	height: 50px;
	margin-right: 10px;
}

#main_contents.course .pay_list dd ul{
	margin-top: 10px;
}

#main_contents.course .pay_list dd ul li img{
	height: 50px;
	width: auto;
}
#main_contents.course #sec05 h2{
	margin-bottom: 3px;
}

/*#main_contents.course #sec05 .option_list:nth-of-type(2) dd{
	font-weight: bold;
}*/

#main_contents.course #sec06 h3 {
	color:#6b5e05
}

#main_contents.course #sec06 h3 .bg{
	background: #6B5E05;
	color: #fff;
	font-size: 14px;
	display: inline-block;
	padding: .8em;
    vertical-align: middle;
	margin-right: 30px;
	text-align: left;
}

#main_contents.course #sec06 h3 span{
	line-height: 1.2;
	font-weight: bold;
	display: inline-block;
    vertical-align: middle;
}

#main_contents.course #sec06 .bg_img{
	background: url("../images/course/bg_premium.jpg") top center no-repeat;
	-webkit-background-size: 100%;
	     -o-background-size: 100%;
	        background-size: 100%;
	    position: relative;
	    padding-top: 200px;
	    margin-bottom: 50px;
}

#main_contents.course #sec06 .bg_img dl{
	width: 430px;
	margin: 0 auto;
	padding: 23px 30px;
	background: #DAD7C2;
}

#main_contents.course #sec06 .bg_img dl ul li{
	margin-bottom: 10px;
}

#main_contents.course #sec06 .bg_img dl ul li{
	background: url("../images/course/check_br.png") no-repeat 0 4px;
	text-indent: 25px;
	margin-bottom: 10px;
	color: #6B5E05;
}

#main_contents.course #sec06 .bg_img dl ul li:last-child{
	margin-bottom: 0;
}

#main_contents.course #sec06 .bd_style{
	padding-bottom: 20px;
	border-bottom: 1px dotted #000;
	margin-bottom: 20px;
}



#main_contents.course #sec06 .bottom{
	overflow: hidden;
}

#main_contents.course #sec06 .bottom .left{
	width : 50%;
   	float: left;
   	padding-left: 20px;
}

#main_contents.course #sec06 .bottom .left li{
	line-height: 2em;
}
#main_contents.course #sec06 .bottom .right{
	width : 50%;
	float: right;
	padding-left: 20px;
}

@media screen and ( max-width: 640px ){
	#main_contents.course #sec06 .bottom dt{
		font-weight: normal;
	}

	#main_contents.course #sec06 .bottom{
		margin-bottom: 20px;
	}

	#main_contents.course #sec06 .bg_img dl ul li{
		background-size: 18px;
	}
}

.link.linkbtn{
	width: 520px;
	margin: 0 auto;
	padding: 20px;
	text-align: center;
}

.link.linkbtn.arrow_left a:after{
	right: -20px;
}


.item_wrap{
	overflow: hidden;
	width: 890px;
	margin: 0 auto;
}

.item_wrap img{
	width: 100% !important;
}

.item_wrap .left{
	float: left;
	width: 250px;
}
.item_wrap .right{
	float: right;
	width : -webkit-calc(100% - 290px) ;
   	width : calc(100% - 290px) ;

}

ul.lesson,dl.lesson{
	margin-bottom: 42px;
}

#main_contents.course #sec01 dl ul{
	overflow: hidden;
}


@media screen and ( min-width: 769px ){
	#main_contents.course #sec07{
		padding-top: 100px;
	}

}

@media screen and ( max-width: 640px ){
	#main_contents.course #sec08{
		padding-top: 20px;
	}

	#main_contents.course #sec08 .item_wrap .right h4 {
		padding: .5em 0;
	}

	#main_contents.course #sec08 .item_wrap .right h4 + p {
		margin-bottom: 20px;
	}

	#main_contents.course #sec07 .mb20{
		font-size: 20px;
		margin-bottom: 10px;
	}

	#main_contents.course #sec07 .head{
		margin-bottom: 20px;
	}
}


#main_contents.course #sec08{
	padding-bottom: 0 !important;
}

#main_contents.course #sec08 .layout_course{
	max-width: 900px;
	width: 90%;
}

@media (max-width:768px) {

	.layout_course{
		width: 90%;
	}

	#main_contents.course #sec01 .banner{
		width: 100%;
		padding-bottom: 100px;
	}

	#main_contents.course .lesson_list .head .left{
		width: 100%;
		float: none;
	}
	#main_contents.course .lesson_list .head .right{
		width: 100%;
		float: none;
		margin: 20px auto 10px;
		text-align: center;
	}

	#main_contents.course .lesson_list + .fz12{
		margin-bottom: 13px;
	}

	#main_contents.course .lesson_list .bottom .left{
		width: 100%;
		float: none;
	}
	#main_contents.course .lesson_list .bottom .right{
		width: 100%;
		float: none;
		margin-top: 20px;
	}



	#main_contents.course .course_list li.bg{
		width: 100%;
		float: none;
		margin-bottom: 20px
	}

	#main_contents.course #sec06 .bg_img dl{
		width: 100%;
		padding: 15px 8%;
	}
	#main_contents.course #sec06 h3 .bg{
		margin-right: auto;
		padding: .5em 1em;
	}

	#main_contents.course #sec06 .head{
		margin-bottom: 20px;
	}
	#main_contents.course #sec05 h2{
		font-size: 20px;
	}

	#main_contents.course #sec06 .bg_img dl dt{
		font-size: 18px;
		margin-bottom: 10px;
	}

	#main_contents.course #sec05 .option_list.mb40{
		margin-bottom: 0;
	}


	#main_contents.course #sec06 .bottom .left{
		width: 100%;
		float: none;
	}
	#main_contents.course #sec06 .bottom .right{
		width: 100%;
		float: none;
	}

	#main_contents.course .course_list li.bg ul.check li{
		font-size: 12px;
		background-size: 1.6em;
	}

	#main_contents.course .course_list li.bg ul.check li {
		background: none;
		background-image: url(../images/course/check_sp.png);
	    background-repeat: no-repeat;
	    background-position: center left;
	    background-size: 1.6em;
	}

	#main_contents.course .course_list li.bg .img{
		padding: 0 0 15px;
	}
	#main_contents.course .course_list li.bg{
		padding: 20px 5%;
		margin-bottom: 15px;
	}

	#main_contents.course .link.bg_green a{
		font-size: 16px;
	}

	.item_wrap{
		width: 100%;
	}

	.item_wrap img{
		width: 100% !important;
	}

	.item_wrap .left{
		width: 100%;
		float: none;
	}
	.item_wrap .right{
	width: 100%;
	float: none;

	}
	.link.linkbtn{
		width: 100%;
	}

	#main_contents.course #sec01 .banner{
		margin-bottom: 0;
		padding-bottom: 0;
	}


	.bg_line_or,.bg_line_br,.bg_line_pl{
		padding-bottom: 40px;
		padding-top: 22px;
	}

	.bg_line_n{
		padding-top: 40px;
	}

	.bg_line_n{
		padding-bottom: 0;
	}

	#main_contents.course #sec06 .bg_img{
		padding-top: 39%;
		margin-bottom: 10px;
	}

	#main_contents.course #sec06 .bottom .left,
	#main_contents.course .lesson_list .bottom .left,
	#main_contents.course .lesson_list .bottom .right,
	#main_contents.course #sec06 .bottom .right{
		padding-left: 0;
	}

	#main_contents.course .pay_list dd ul{
		overflow: hidden;
	}

	#main_contents.course .pay_list dd ul li{
		width: 33%;
		margin: 0;
		float: left;
		text-align: center;
		margin-bottom: 10px;

	}

	ul.lesson,dl.lesson{
		margin-bottom: 20px;
	}

	dl.lesson dt{
		font-weight: 700;
	}

}