@charset "UTF-8";
/***********************************
* #01 about-block	*
***********************************/

/***********************************
* #02 few-block	*
***********************************/
.few-block h4{
	display: inline-block;
	background-color: #9E89B6;
	color:#FFFFFF;
	font-weight: 400;
	line-height: 2.1;
	letter-spacing: 0.1em;
	width: 110px;
	text-align: center;
	margin: 0;
	padding: 0;
}
#contents-block .few-cont .h4-box p{
	color:#9E89B6;
}
#contents-block .few-cont .inner p{
	margin-top:0;
}
	@media only screen and ( max-width : 767px ){
		.few-block .pic{

		}
		#contents-block .few-cont{
			padding-top: 16px;
			padding-bottom: 16px;
		}
		.few-block h4{
			font-size: 0.81rem;/*13px*/
			margin-bottom: 5px;
		}
		#contents-block .few-cont .h4-box p{
			display: inline-block;
			padding-left: 20px;
		}
		.few-cont .inner{
			padding-left: 1rem;
		}
	}
	@media print, screen and (min-width: 768px) {
		.few-block .pic{
			margin-bottom: 30px;
			margin-left: -16px;
			margin-right: -16px;
		}
		.few-block h4{
			font-size: 0.94rem;/*15px*/
		}
		#contents-block .few-cont .h4-box p{
			margin: 0;
			font-size: 14px;
			padding-left: 15px;
			padding-top: 5px;
		}
		#contents-block .few-cont{
			display: flex;
			padding-top: 30px;
			padding-bottom: 30px;
		}
		#contents-block .few-cont .h4-box{
			width: 20%;
		}
		#contents-block .few-cont .inner{
			width: 80%;
		}
	}
	@media (min-width: 992px) {
		.few-block h4{
			font-size: 1.06rem;/*17px*/
		}
		#contents-block .few-cont .h4-box{
			width: 30%;
		}
		#contents-block .few-cont .h4-box p{
			padding-left: 12px;
			font-size: 15px;
		}
		#contents-block .few-cont .inner{
			width: 70%;
		}
	}
	@media (min-width: 1200px) {
		#contents-block .few-cont .h4-box{
			width: 15%;
		}
		#contents-block .few-cont .inner{
			width: 85%;
		}
	}
/***********************************
* #03 flow-block	*
***********************************/
/* .flow .flow-block .h4-box --------------------*/
.flow{
}
.flow-block .h4-box h4,
.flow-block .h4-box-last h4{
	margin: 0;
	padding: 0;
}
	@media only screen and ( max-width : 767px ){
		.flow-block .h4-box,
		.flow-block .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;
		}
		.flow-block .h4-box h4 img,
		.flow-block .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;
		}
		.flow-block .h4-box,
		.flow-block .h4-box-last{
			width:23%;
			max-width: 224px;
			background-image: url(../img/onlinelesson/onlinelesson_step-bg.png);
			background-repeat: repeat-y;
			background-position: center;
		}
		.flow-block .h4-box-last{
			background: none;
		}
		.flow-block .h4-box img,
		.flow-block .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;
}
.flow-cont ul li::before{
	content: '・ '
}
.flow-cont ul li{
	line-height: 1.7;
	margin-bottom: 8px;
}
.flow-cont ul{
	padding-bottom: 8px;
}
#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;
		}
		.flow-cont ul li{
			font-size: 0.81rem;/*13px*/
		}
		#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;
		}
		.flow-cont ul li{
			font-size: 0.94rem;/*15px*/
		}
		#contents-block p.flow-note-01,
		#contents-block p.flow-note-02{
			font-size: 0.81rem/*13px*/;
		}
	}
	@media (min-width: 992px) {
		.flow-cont{
			min-height: 318px;
		}
		.flow-cont section{
			margin-bottom: 30px;
		}
		.flow-cont h5{
			font-size: 1.06rem;/*17px*/
		}
		.flow-cont ul li{
			font-size: 1.06rem;/*17px*/
		}
		#contents-block p.flow-note-01,
		#contents-block p.flow-note-02{
			font-size: 0.88rem/*14px*/;
		}
	}
/***********************************
* #04 form-block	*
***********************************/
/* form-cont --------------------*/
textarea {
	width:100%;
	padding:5px;
	font-size:110%;
	display:block;
	border-radius: 4px;
	border:solid 1px #999999;
}
input[type="text"]{
	width:100%;
	padding:5px;
	font-size:110%;
	display:block;
	border-radius: 4px;
	border:solid 1px #999999;
}

input[type="submit"], input[type="reset"], input[type="button"] {
	font-size:110%;
	border:solid #fff 1px;
	background-color: #fff;
	padding: 0.5rem 1rem;
}
input[type="submit"]{
	background-color: #7E669A;
	color:#fff;
	border:solid #7E669A 1px;
}
input[type="submit"]:hover{
	opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5; transition:.3s;
}
input[type="reset"]{
	background-color: #9a9a9a;
	color:#fff;
	border:solid #9a9a9a 1px;
}
input[type="reset"]:hover{
	opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5; transition:.3s;
}
.form-cont{
	border: solid 1px #7E669A;
	margin-left: auto;
	margin-right: auto;
}
.form-cont dl dt {
	font-weight: normal;
	padding-bottom: 0.1rem;
}
.form-cont dl dt::before{
	content: '・ ';
}

.must{
	color:#a1004c;
	font-size: 70%;
}
#contents-block .thanks-lead{
	font-size: 140%;
	font-weight: 400;
	font-family: 'Noto Serif JP', serif;
}

	@media only screen and ( max-width : 767px ){
		.form-cont{
			padding:1rem;
		}
		.form-cont dl dt,
		.form-cont dl dd{
			font-size: 0.81rem;/*13px*/
		}
		.form-cont dl dd{
			padding-bottom: 0.5rem;
			margin-left: 0;
		}
		#contents-block .thanks-lead{
			font-size: 120%;
		}

	}
	@media print, screen and (min-width: 768px) {
		textarea {
			width:100%;
			font-size:100%;
		}
		input[type="text"]{
			width:auto;
			font-size:100%;

		}
		input[type="submit"], input[type="reset"], input[type="button"] {
			font-size: 0.8rem;
		}
		.form-cont{
			padding:1.5rem 2rem 1.5rem 2rem;
			width: 90%;
		}
		.form-cont dl{
			padding-top: 20px;
		}
		.form-cont dl dt,
		.form-cont dl dd{
			font-size: 0.94rem;/*15px*/
		}
		.form-cont dl dt {
			float: left;
			width: 190px;
			clear: both;
			font-weight: normal;
			padding: 5px 0px;
			margin: 0px;
		}

		.form-cont dl dd {
			margin: 0px;
			padding: 5px 0px 30px 190px;
			line-height: 1.5em;
			text-align: left;
		}
		.buttun-block{
			padding-top: 0px;
		}
		#contents-block .thanks-ver{
			text-align: center;
		}
		#contents-block .thanks-lead{
			font-size: 140%;
		}
	}
	@media (min-width: 992px) {
		input[type="submit"], input[type="reset"], input[type="button"] {
			font-size: 1.1rem;
			padding: 0.5rem 2rem;
		}
		form-cont{
			width: 100%;
		}
		.form-cont{
			padding:2rem 2.5rem 2.5rem 2.5rem;
			width: 90%;
		}
		.form-cont p.lead{
			padding-top: 0.3rem;
		}
		p.thanks-lead{
			font-size: 200%;
		}
		.form-cont dl dt,
		.form-cont dl dd{
			font-size: 1.06rem;/*17px*/
		}
		.form-cont dl dt{
			width: 210px;
		}
		.form-cont dl dd{
			padding-left: 210px;
			padding-bottom: 40px;
		}

		.buttun-block{
			padding-top: 0px;
		}
		#contents-block .thanks-lead{
			font-size: 160%;
		}
	}

/*
初めての方へ
*/
.bl_intro{
	max-width: 900px!important;
}
.bl_intro figure{
	padding: 0;
	margin: 0;
	display: block;
}
.bl_intro p,
.bl_intro ul{
	font-size: 0.81rem!important;/*13px*/
	line-height: 1.8!important;
}
.bl_intro p{
	margin-bottom: 22px;
}
	@media print, screen and (min-width: 768px) {
		.bl_intro p,
		.bl_intro ul{
			font-size: 0.94rem!important;/*15px*/
		}
		.bl_intro p{
			margin-bottom: 26px;
		}
	}
	@media (min-width: 992px) {
		.bl_intro p,
		.bl_intro ul{
			font-size: 1.06rem!important;/*17px*/
		}
		.bl_intro p{
			margin-bottom: 30px;
		}
	}
/*bl_introList*/
.bl_intro ul.bl_introList01::after{
	content: "など";
	display: block;
	text-align: right;
	max-width: 21em;
	color: #7E669A;
}
.bl_intro ul.bl_introList01 li{
	position: relative;
	margin-bottom: 1em;
	padding-left: 1.5em;
}
.bl_intro ul.bl_introList01 li:before{
	content: "";
	position: absolute;
	top: .5em;
	left: 0;
	display: block;
	background-color: #7E669A;
	width: .8em;
	height: .8em;
}
.bl_intro ul.bl_introList02{
	margin: 0 1em;
}
.bl_intro ul.bl_introList02 li{
	text-align: right;
	margin-bottom: 1.5em;
}
.bl_introList02_from{
	position: relative;
	display: table;
	margin-left: auto;
	margin-right: 0;
}
.bl_introList02_from::before{
	content: "";
	position: absolute;
	top: .95em;
	left: -5.1em;
	display: block;
	height: 1px;
	width: 5em;
	background-color: #000;
}
	@media print, screen and (min-width: 768px){
		.bl_intro ul.bl_introList02{
			margin: 0;
		}
	}
/*bl_introCont1*/
.bl_introCont1_picArea{
	width: 80%;
	margin: 0 auto!important;
}
.bl_introCont1_txtArea{
	display: table;
	margin-inline: auto;
}
.bl_intro p.bl_introCont1_txtArea_lead01{
	color: #7E669A;
	font-size: 1.2rem!important;
}
.bl_intro p.bl_introCont1_txtArea_lead02{
	padding: 1em 0 2em 0;
	color: #7E669A;
	font-size: 1rem!important;
	text-align: center;
}
	@media print, screen and (min-width: 768px){
		.bl_introCont1{
			display: flex;
			justify-content: space-between;
		}
		.bl_introCont1_picArea{
			width: 54%;
			margin: 0!important;
		}
		.bl_introCont1_txtArea{
			width: 42%;
			display: block;
			margin-inline: initial;
		}
		.bl_intro p.bl_introCont1_txtArea_lead01{
			margin-top: 0;
			font-size: 1.5rem!important;
		}
		.bl_intro p.bl_introCont1_txtArea_lead02{
			padding: 2em 0 3em 0;
			font-size: 1.3rem!important;
		}
	}
	@media print, screen and (min-width: 992px){
		.bl_intro p.bl_introCont1_txtArea_lead01{
			font-size: 1.8rem!important;
		}
		.bl_intro p.bl_introCont1_txtArea_lead02{
			font-size: 1.5rem!important;
		}
	}
/*bl_introCont2*/
.bl_introCont2_picArea{
	width: 80%;
	margin: 0 auto 20px auto!important;
}
.bl_introCont2_txtArea{
	max-width: 400px;
	margin: 0 auto;
}
	@media print, screen and (min-width: 768px){
		.bl_introCont2{
			display: flex;
			justify-content: space-between;
		}
		.bl_introCont2_picArea{
			width: 47%;
			margin: 0!important;
			
		}
		.bl_introCont2_txtArea{
			width: 53%;
			max-width: initial;
		}
	}
/*bl_introReason*/
.bl_introReason{
	max-width: 600px;
	margin: 50px auto 0 auto;
}
h4.bl_introReason_ttl{
	font-size: 1rem!important;/*15px*/
	color: #7E669A;
	font-weight: normal!important;
	text-align: center;
}
.bl_introReason_cont{
	margin-bottom: 50px;
}
.bl_introReason_cont_picArea{
	width: 80%;
	margin: 0 auto!important;
}
.bl_intro p.bl_introReason_cont_lead{
	font-size: 1rem!important;
	text-align: center;
}
	@media print, screen and (min-width: 768px) {
		.bl_introReason{
			margin-top: 70px;
		}
		h4.bl_introReason_ttl{
			font-size: 1.2rem!important;/*15px*/
		}
		.bl_introReason_cont{
			margin-bottom: 70px;
		}
		.bl_intro p.bl_introReason_cont_lead{
			font-size: 1.5rem!important;
		}
	}
	@media (min-width: 992px) {
		.bl_introReason{
			margin-top: 100px;
		}
		h4.bl_introReason_ttl{
			font-size: 1.5rem!important;/*17px*/
		}
		.bl_intro p.bl_introReason_cont_lead{
			font-size: 1.6rem!important;
		}
	}