@charset "UTF-8";
/***********************************
* #01	about-block*
***********************************/
	@media only screen and ( max-width : 767px ){
		.about-block .movie{
			margin-bottom: 20px;
		}
	}
	@media print, screen and (min-width: 768px) {
		.about-block .movie{
			margin-bottom: 40px;
		}
	}
	@media (min-width: 992px) {
		.about-block .movie{
			margin-bottom: 70px;
		}
	}

/***********************************
* #02	flow-block*
***********************************/
/* .flow .h4-box --------------------*/
.flow{
}
.h4-box h4,
.h4-box-last h4{
	margin: 0;
	padding: 0;
}
	@media only screen and ( max-width : 767px ){
		.h4-box,
		.h4-box-last {
			background-image: url(../img/onlinelesson/onlinelesson_step-bg.png);
			background-repeat: repeat-y;
			background-position: center;
			text-align: center;
			padding-top: 25px;
			padding-bottom: 5px;
		}
		.h4-box h4 img,
		.h4-box-last h4 img{
			width:150px;
		}
		.flow-cont{
			background-color: rgba(255, 255, 255, .6);
			margin-left: -15px;
			margin-right: -15px;
		}
		.flow-cont .inner{
			padding: 16px 24px;

		}
	}
	@media print, screen and (min-width: 768px) {
		.flow{
			display: flex;
			justify-content:space-between;
		}
		.h4-box,
		.h4-box-last{
			width:23%;
			max-width: 224px;
			background-image: url(../img/onlinelesson/onlinelesson_step-bg.png);
			background-repeat: repeat-y;
			background-position: center;
		}
		.h4-box-last{
			background: none;
		}
		.h4-box img,
		.h4-box-last img{
			width: 100%;
		}
		.flow-cont{
			width: 73%;
			border-top: solid #000 1px;
			margin-top: 20px;
			padding-top: 20px;
		}
		.flow-cont{
			min-height: 100px;
			padding-bottom: 50px;
		}
	}
	@media (min-width: 992px) {
		.flow-cont{
			min-height: 148px;
			padding-bottom: 115px;
		}
	}
	@media (min-width: 1200px) {
		.flow-cont{
			width: 75%;
		}
	}
/* .flow-cont中身 --------------------*/
.flow-cont h5{
	margin: 0;
	padding: 0;
	line-height: 2.1;
	font-weight: 400;
}
.flow-cont h5::before{
	content: '・ '
}
.flow-cont p{
	margin-top: 0;
}
.flow-cont section:last-child{
	margin-bottom: 0;
}
#contents-block p.flow-note-01,
#contents-block p.flow-note-02{
	color:#7E669A;
	line-height: 1.8;
}
#contents-block p.flow-note-02{ padding-left:1em; text-indent:-1em; }

	@media only screen and ( max-width : 767px ){
		.flow-cont h5{
			font-size: 0.81rem;/*13px*/
		}
		.flow-cont section{
			margin-bottom: 20px;
		}
		#contents-block p.flow-note-01,
		#contents-block p.flow-note-02{
			font-size: 0.75rem/*12px*/;
		}
	}
	@media print, screen and (min-width: 768px) {
		.flow-cont h5{
			font-size: 0.94rem;/*15px*/
		}
		.flow-cont section{
			margin-bottom: 25px;
		}
		#contents-block p.flow-note-01,
		#contents-block p.flow-note-02{
			font-size: 0.81rem/*13px*/;
		}
	}
	@media (min-width: 992px) {
		.flow-cont section{
			margin-bottom: 30px;
		}
		.flow-cont h5{
			font-size: 1.06rem;/*17px*/
		}
		#contents-block p.flow-note-01,
		#contents-block p.flow-note-02{
			font-size: 0.88rem/*14px*/;
		}
	}

/***********************************
* #03	contact-block*
***********************************/
#contents-block .contact-block p{
	display: table;
	margin-bottom: 6px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.7;
}

	@media only screen and ( max-width : 767px ){
		#contents-block .contact-block .banner-01{
			margin-bottom: 30px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#contents-block .contact-block .banner-01{
			margin-bottom: 40px;
		}
	}
	@media (min-width: 992px) {
		#contents-block .contact-block .banner-01{
			margin-bottom: 50px;
		}
	}